split border-radius, new utility reference table, start adding mdn link

diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 7b35a25998086fbe997e607d731b6d780d36d022..f937192aaa21db3e0865f4ed7ff79f13242df1d3 100644 (file)
--- 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 c7e9b45b4bebf9cb786b54acff14c4b6806db8bf..033dd7cc800781ec5ac097956030af2c8505a8c4 100644 (file)
--- 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 11369b5720cb69e90ad71cbcb0aa1d3aba836f66..211cd7e36aa99df0a20bfe9e9011c9f999c82543 100644 (file)
--- 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 (file)
index 0000000..ed10196
--- /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
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  role="img"
+  class={className}
+  height={height}
+  width={width}
+>
+  <title>MDN</title>
+  <path d="M6.359.734 1.846 15.266H0L4.497.734h1.862ZM8 .734v14.532H6.359V.734H8ZM16 .734v14.532h-1.641V.734H16ZM14.359.734 9.862 15.266H8.016L12.513.734h1.846Z"></path>
+</svg>

diff --git a/site/src/content/config.ts b/site/src/content/config.ts
index 387a0052ebefd0b1d2e4d6c421120c12b274ae2c..d3bffe6479cc1b84e3f587da88703a8e98d7ae79 100644 (file)
--- 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 6fac6f0855119ca498ab86c17ffc89d73741483c..38c48b055f8e6dbd238b19e6afe3c8ab49792d9d 100644 (file)
--- 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
 
-<BsTable>
+<BsTable class="table reference-table">
 | 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 553f90c3f92ccd55954a1c515393e4a079fa116e..504d9db7110d0ac2af9ecd3dedb7bb8590bd7aa6 100644 (file)
--- 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
+
+<BsTable class="table reference-table">
+| 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;` |
+</BsTable>
+
 ## 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 (file)
index 0000000..880c8e7
--- /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
+
+<BsTable class="table reference-table">
+| Class | Styles |
+| --- | --- |
+| `.rounded` | `border-radius: var(--bs-border-radius);` |
+| `.rounded-top` | `border-top-left-radius: var(--bs-border-radius);`<br/>`border-top-right-radius: var(--bs-border-radius);` |
+| `.rounded-end` | `border-bottom-right-radius: var(--bs-border-radius);`<br/>`border-top-right-radius: var(--bs-border-radius);` |
+| `.rounded-bottom` | `border-bottom-left-radius: var(--bs-border-radius);`<br/>`border-bottom-right-radius: var(--bs-border-radius);` |
+| `.rounded-start` | `border-top-left-radius: var(--bs-border-radius);`<br/>`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);` |
+</BsTable>
+
+## Radius
+
+Add classes to an element to easily round its corners.
+
+<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded" title="Example rounded image" />
+<Placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" />
+<Placeholder width="75" height="75" class="rounded-end" title="Example right rounded image" />
+<Placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" />
+<Placeholder width="75" height="75" class="rounded-start" title="Example left rounded image" />`} />
+
+### 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.
+
+<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image" />
+<Placeholder width="75" height="75" class="rounded-1" title="Example small rounded image" />
+<Placeholder width="75" height="75" class="rounded-2" title="Example default rounded image" />
+<Placeholder width="75" height="75" class="rounded-3" title="Example large rounded image" />
+<Placeholder width="75" height="75" class="rounded-4" title="Example larger rounded image" />
+<Placeholder width="75" height="75" class="rounded-5" title="Example extra large rounded image" />
+<Placeholder width="75" height="75" class="rounded-circle" title="Completely round image" />
+<Placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" />`} />
+
+<Example class="bd-example-rounded-utils" code={`<Placeholder width="75" height="75" class="rounded-bottom-1" title="Example small rounded image" />
+<Placeholder width="75" height="75" class="rounded-start-2" title="Example default left rounded image" />
+<Placeholder width="75" height="75" class="rounded-end-circle" title="Example right completely round image" />
+<Placeholder width="75" height="75" class="rounded-start-pill" title="Example left rounded pill image" />
+<Placeholder width="75" height="75" class="rounded-5 rounded-top-0" title="Example extra large bottom rounded image" />`} />
+
+## CSS
+
+### Variables
+
+<AddedIn version="5.2.0" />
+
+<ScssDocs name="root-border-var" file="scss/_root.scss" />
+
+### Sass variables
+
+<ScssDocs name="border-radius-variables" file="scss/_variables.scss" />
+
+### Sass maps
+
+### Sass mixins
+
+<ScssDocs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" />
+
+### 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]])
+
+<ScssDocs name="utils-border-radius" file="scss/_utilities.scss" />

diff --git a/site/src/content/docs/utilities/borders.mdx b/site/src/content/docs/utilities/borders.mdx
index 504044b7be45be8feda580110289ec9514a14031..3ceee7f99601cc74e2609ed3509474deaecb89b6 100644 (file)
--- 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 9250ce3c4b7ec710540f7d347057ee75ee59b524..d761006a128f658a2e935829786a7095e0c1b80a 100644 (file)
--- 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
+
+<BsTable class="table reference-table">
+| 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;` |
+</BsTable>
+
 ## 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 eda6799b2f91199a7453b78145efa55c98cacf5b..f57bf90d80ae94d0051805c7df2b56ad0d90f6ba 100644 (file)
--- 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) {
             <GitHubIcon height={16} width={16} class="bi" />
             View on GitHub
           </a>
+          {
+            frontmatter.mdn && (
+              <a
+                class="btn btn-secondary-text btn-sm"
+                href={frontmatter.mdn}
+                title="View on MDN"
+                target="_blank"
+                rel="noopener"
+              >
+                <MdnIcon height={16} width={16} class="bi" />
+                View on MDN
+              </a>
+            )
+          }
         </div>
       </div>
 

diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index c4cffe131f1e154425577d626c109dcc26a00402..74da7d47ba471e1a83a67e4af48746ba6f4378dc 100644 (file)
--- 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 {