From 57a81db0cf20a96ef7fb733767b021f78dd05e58 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 May 2025 11:38:06 -0700 Subject: [PATCH] split border-radius, new utility reference table, start adding mdn link --- scss/_buttons.scss | 6 +- scss/_variables.scss | 1 + site/data/sidebar.yml | 1 + site/src/components/icons/MdnIcon.astro | 19 +++++ site/src/content/config.ts | 1 + .../content/docs/utilities/aspect-ratio.mdx | 3 +- .../src/content/docs/utilities/background.mdx | 30 ++++++++ .../content/docs/utilities/border-radius.mdx | 76 +++++++++++++++++++ site/src/content/docs/utilities/borders.mdx | 1 + site/src/content/docs/utilities/colors.mdx | 23 +++++- site/src/layouts/DocsLayout.astro | 15 ++++ site/src/scss/_content.scss | 22 ++++-- 12 files changed, 189 insertions(+), 9 deletions(-) create mode 100644 site/src/components/icons/MdnIcon.astro create mode 100644 site/src/content/docs/utilities/border-radius.mdx diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 7b35a25998..f937192aaa 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -272,6 +272,7 @@ $button-variants: ( --#{$prefix}btn-font-weight: #{$btn-font-weight}; --#{$prefix}btn-line-height: #{$btn-line-height}; --#{$prefix}btn-color: #{$btn-color}; + --#{$prefix}btn-gap: #{$btn-gap}; --#{$prefix}btn-bg: transparent; --#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-color: transparent; @@ -283,7 +284,10 @@ $button-variants: ( --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5); // scss-docs-end btn-css-vars - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--#{$prefix}btn-gap); padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x); font-family: var(--#{$prefix}btn-font-family); @include font-size(var(--#{$prefix}btn-font-size)); diff --git a/scss/_variables.scss b/scss/_variables.scss index c7e9b45b4b..033dd7cc80 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -533,6 +533,7 @@ $input-btn-border-width: var(--#{$prefix}border-width) !default; // scss-docs-start btn-variables $btn-color: var(--#{$prefix}body-color) !default; +$btn-gap: .375rem !default; $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; $btn-font-family: $input-btn-font-family !default; diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 11369b5720..211cd7e36a 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -120,6 +120,7 @@ - title: Aspect ratio - title: Background - title: Borders + - title: Border radius - title: Colors - title: Display - title: Flex diff --git a/site/src/components/icons/MdnIcon.astro b/site/src/components/icons/MdnIcon.astro new file mode 100644 index 0000000000..ed10196e87 --- /dev/null +++ b/site/src/components/icons/MdnIcon.astro @@ -0,0 +1,19 @@ +--- +import type { SvgIconProps } from '@libs/icon' + +type Props = SvgIconProps + +const { class: className, height, width } = Astro.props +--- + + + MDN + + diff --git a/site/src/content/config.ts b/site/src/content/config.ts index 387a0052eb..d3bffe6479 100644 --- a/site/src/content/config.ts +++ b/site/src/content/config.ts @@ -17,6 +17,7 @@ const docsSchema = z.object({ }) .array() .optional(), + mdn: z.string().optional(), sections: z .object({ description: z.string(), diff --git a/site/src/content/docs/utilities/aspect-ratio.mdx b/site/src/content/docs/utilities/aspect-ratio.mdx index 6fac6f0855..38c48b055f 100644 --- a/site/src/content/docs/utilities/aspect-ratio.mdx +++ b/site/src/content/docs/utilities/aspect-ratio.mdx @@ -2,11 +2,12 @@ title: Aspect ratio description: Make elements maintain specific aspect ratios. Perfect for handling videos, slideshow embeds, and more based on the width of the parent. toc: true +mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio --- ## Reference - + | Class | Styles | | --- | --- | | `.ratio-auto` | `aspect-ratio: auto;` | diff --git a/site/src/content/docs/utilities/background.mdx b/site/src/content/docs/utilities/background.mdx index 553f90c3f9..504d9db711 100644 --- a/site/src/content/docs/utilities/background.mdx +++ b/site/src/content/docs/utilities/background.mdx @@ -2,10 +2,40 @@ title: Background description: Convey meaning through `background-color`, adjust opacity with `color-mix()` utilities, and add decoration with gradients. toc: true +mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/background-color --- import { getData } from '@libs/data' +## Reference + + +| Class | Styles | +| --- | --- | +| `.bg-primary` | `background-color: var(--bs-primary);` | +| `.bg-subtle-primary` | `background-color: var(--bs-subtle-primary);` | +| `.bg-accent` | `background-color: var(--bs-accent);` | +| `.bg-subtle-accent` | `background-color: var(--bs-subtle-accent);` | +| `.bg-secondary` | `background-color: var(--bs-secondary);` | +| `.bg-subtle-secondary` | `background-color: var(--bs-subtle-secondary);` | +| `.bg-success` | `background-color: var(--bs-success);` | +| `.bg-subtle-success` | `background-color: var(--bs-subtle-success);` | +| `.bg-danger` | `background-color: var(--bs-danger);` | +| `.bg-subtle-danger` | `background-color: var(--bs-subtle-danger);` | +| `.bg-warning` | `background-color: var(--bs-warning);` | +| `.bg-subtle-warning` | `background-color: var(--bs-subtle-warning);` | +| `.bg-info` | `background-color: var(--bs-info);` | +| `.bg-subtle-info` | `background-color: var(--bs-subtle-info);` | +| `.bg` | `background-color: var(--bs-bg);` | +| `.bg-1` | `background-color: var(--bs-bg-1);` | +| `.bg-2` | `background-color: var(--bs-bg-2);` | +| `.bg-3` | `background-color: var(--bs-bg-3);` | +| `.bg-white` | `background-color: var(--bs-white);` | +| `.bg-black` | `background-color: var(--bs-black);` | +| `.bg-inherit` | `background-color: inherit;` | +| `.bg-transparent` | `background-color: transparent;` | + + ## Background color Set the `background-color` of an element. diff --git a/site/src/content/docs/utilities/border-radius.mdx b/site/src/content/docs/utilities/border-radius.mdx new file mode 100644 index 0000000000..880c8e7840 --- /dev/null +++ b/site/src/content/docs/utilities/border-radius.mdx @@ -0,0 +1,76 @@ +--- +title: Border radius +description: Use border radius… +toc: true +mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius +--- + +import { getData } from '@libs/data' + +## Reference + + +| Class | Styles | +| --- | --- | +| `.rounded` | `border-radius: var(--bs-border-radius);` | +| `.rounded-top` | `border-top-left-radius: var(--bs-border-radius);`
`border-top-right-radius: var(--bs-border-radius);` | +| `.rounded-end` | `border-bottom-right-radius: var(--bs-border-radius);`
`border-top-right-radius: var(--bs-border-radius);` | +| `.rounded-bottom` | `border-bottom-left-radius: var(--bs-border-radius);`
`border-bottom-right-radius: var(--bs-border-radius);` | +| `.rounded-start` | `border-top-left-radius: var(--bs-border-radius);`
`border-bottom-left-radius: var(--bs-border-radius);` | +| `.rounded-0` | `border-radius: 0;` | +| `.rounded-1` | `border-radius: var(--bs-border-radius-sm);` | +| `.rounded-2` | `border-radius: var(--bs-border-radius);` | + + +## Radius + +Add classes to an element to easily round its corners. + + + + + +`} /> + +### Sizes + +Use the scaling classes for larger or smaller rounded corners. Sizes range from `0` to `5` including `circle` and `pill`, and can be configured by modifying the utilities API. + + + + + + + + +`} /> + + + + + +`} /> + +## CSS + +### Variables + + + + + +### Sass variables + + + +### Sass maps + +### Sass mixins + + + +### Sass utilities API + +Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-api]]) + + diff --git a/site/src/content/docs/utilities/borders.mdx b/site/src/content/docs/utilities/borders.mdx index 504044b7be..3ceee7f996 100644 --- a/site/src/content/docs/utilities/borders.mdx +++ b/site/src/content/docs/utilities/borders.mdx @@ -2,6 +2,7 @@ title: Borders description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. toc: true +mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/border --- import { getData } from '@libs/data' diff --git a/site/src/content/docs/utilities/colors.mdx b/site/src/content/docs/utilities/colors.mdx index 9250ce3c4b..d761006a12 100644 --- a/site/src/content/docs/utilities/colors.mdx +++ b/site/src/content/docs/utilities/colors.mdx @@ -1,11 +1,32 @@ --- title: Colors -description: Convey meaning through `color` with a handful of color utility classes. Includes support for styling links with hover states, too. +description: Convey meaning through text `color` utilities. Mix with opacity utilities powered by `color-mix()` to control translucency, too. toc: true +mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/color --- import { getData } from '@libs/data' +## Reference + + +| Class | Styles | +| --- | --- | +| `.color-primary` | `color: var(--bs-primary);` | +| `.color-secondary` | `color: var(--bs-secondary);` | +| `.color-success` | `color: var(--bs-success);` | +| `.color-danger` | `color: var(--bs-danger);` | +| `.color-warning` | `color: var(--bs-warning);` | +| `.color-info` | `color: var(--bs-info);` | +| `.color-fg` | `color: var(--bs-fg);` | +| `.color-fg-1` | `color: var(--bs-fg-1);` | +| `.color-fg-2` | `color: var(--bs-fg-2);` | +| `.color-fg-3` | `color: var(--bs-fg-3);` | +| `.color-white` | `color: var(--bs-white);` | +| `.color-black` | `color: var(--bs-black);` | +| `.color-inherit` | `color: inherit;` | + + ## Colors Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]([[docsref:/helpers/colored-links]]) which have `:hover` and `:focus` states. diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro index eda6799b2f..f57bf90d80 100644 --- a/site/src/layouts/DocsLayout.astro +++ b/site/src/layouts/DocsLayout.astro @@ -14,6 +14,7 @@ import { parse } from 'yaml' import { fileURLToPath } from 'node:url' import { join, dirname } from 'node:path' import GitHubIcon from '@components/icons/GitHubIcon.astro' +import MdnIcon from '@components/icons/MdnIcon.astro' interface NavigationPage { title: string @@ -124,6 +125,20 @@ if (currentPageIndex < allPages.length - 1) { View on GitHub + { + frontmatter.mdn && ( + + + View on MDN + + ) + } diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss index c4cffe131f..74da7d47ba 100644 --- a/site/src/scss/_content.scss +++ b/site/src/scss/_content.scss @@ -40,6 +40,15 @@ margin-top: .25rem; } + > .table-responsive:has(.reference-table) { + max-height: 400px; + overflow-y: auto; + + td:last-child code { + color: var(--bs-indigo-500); + } + } + // Override Bootstrap defaults > .table, > .table-responsive .table { @@ -55,13 +64,14 @@ } } - thead { - border-bottom: 2px solid currentcolor; - } - tbody:not(:first-child) { - border-top: 2px solid currentcolor; - } + // thead { + // // border-bottom: 2px solid currentcolor; + // } + + // tbody:not(:first-child) { + // // border-top: 2px solid currentcolor; + // } th, td { -- 2.47.2