diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 8d9a0724cb00..9d1bfefd8f60 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -10,7 +10,7 @@
},
{
"path": "./dist/css/bootstrap-reboot.css",
- "maxSize": "5.25 kB"
+ "maxSize": "5.5 kB"
},
{
"path": "./dist/css/bootstrap-reboot.min.css",
diff --git a/scss/_config.scss b/scss/_config.scss
index 835db327215d..dd3ab6242cfe 100644
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -190,12 +190,6 @@ $icon-link-icon-transition: .2s ease-in-out transform !default;
$icon-link-icon-transform: translate3d(.25em, 0, 0) !default;
// scss-docs-end icon-link-variables
-// Paragraphs
-//
-// Style p element.
-
-$paragraph-margin-bottom: 1rem !default;
-
// Components
//
// Define common padding and border radius sizes and more.
@@ -302,24 +296,9 @@ $font-sizes: defaults(
// scss-docs-end font-sizes
// scss-docs-start headings-variables
-$headings-margin-bottom: var(--spacer-2) !default;
-$headings-font-family: null !default;
-$headings-font-style: null !default;
-$headings-font-weight: 500 !default;
-$headings-line-height: 1.2 !default;
$headings-color: inherit !default;
// scss-docs-end headings-variables
-// scss-docs-start type-variables
-
-$legend-margin-bottom: .5rem !default;
-$legend-font-size: 1.5rem !default;
-$legend-font-weight: null !default;
-
-$dt-font-weight: $font-weight-bold !default;
-
-// scss-docs-end type-variables
-
// Z-index master list
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
diff --git a/scss/_root.scss b/scss/_root.scss
index 3d53bbd0340c..0f03febaf332 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -41,6 +41,7 @@ $root-tokens: defaults(
--link-color: light-dark(var(--primary-base), var(--primary-fg)),
--link-decoration: #{$link-decoration},
+ --link-underline-offset: #{$link-underline-offset},
--link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000),
--font-mono: "ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;",
diff --git a/scss/content/_type.scss b/scss/content/_blockquote.scss
similarity index 70%
rename from scss/content/_type.scss
rename to scss/content/_blockquote.scss
index fec15e147e60..498d5def05c7 100644
--- a/scss/content/_type.scss
+++ b/scss/content/_blockquote.scss
@@ -1,5 +1,4 @@
@use "../functions" as *;
-@use "../mixins/lists" as *;
@use "../mixins/tokens" as *;
$blockquote-tokens: () !default;
@@ -10,7 +9,7 @@ $blockquote-tokens: defaults(
(
--blockquote-gap: calc(var(--spacer) / 2),
--blockquote-padding-x: var(--spacer),
- --blockquote-margin-y: 1rem,
+ --blockquote-margin-y: var(--spacer),
--blockquote-font-size: var(--font-size-md),
--blockquote-border-width: .25rem,
--blockquote-border-color: var(--border-color),
@@ -22,37 +21,6 @@ $blockquote-tokens: defaults(
// scss-docs-end blockquote-tokens
@layer content {
- //
- // Lists
- //
-
- .list-unstyled {
- @include list-unstyled();
- }
-
- // Inline turns list items into inline-block
- .list-inline {
- @include list-unstyled();
- }
- .list-inline-item {
- display: inline-block;
-
- &:not(:last-child) {
- margin-inline-end: var(--list-inline-padding, var(--spacer) / 2);
- }
- }
-
- //
- // Misc
- //
-
- // Builds on `abbr`
- .initialism {
- font-size: var(--initialism-font-size, var(--font-size-xs));
- text-transform: uppercase;
- }
-
- // Blockquotes
.blockquote {
@include tokens($blockquote-tokens);
display: flex;
diff --git a/scss/content/_lists.scss b/scss/content/_lists.scss
new file mode 100644
index 000000000000..fc0ecab3c022
--- /dev/null
+++ b/scss/content/_lists.scss
@@ -0,0 +1,23 @@
+@use "../mixins/lists" as *;
+
+@layer content {
+ //
+ // Lists
+ //
+
+ .list-unstyled {
+ @include list-unstyled();
+ }
+
+ // Inline turns list items into inline-block
+ .list-inline {
+ @include list-unstyled();
+ }
+ .list-inline-item {
+ display: inline-block;
+
+ &:not(:last-child) {
+ margin-inline-end: var(--list-inline-padding, var(--spacer) / 2);
+ }
+ }
+}
diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index 11a12c153bbe..a37eacab4cc2 100644
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -5,15 +5,38 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
+$type-tokens: () !default;
$reboot-kbd-tokens: () !default;
$reboot-mark-tokens: () !default;
+// scss-docs-start type-tokens
+// stylelint-disable-next-line scss/dollar-variable-default
+$type-tokens: defaults(
+ (
+ --heading-margin-bottom: var(--spacer-2),
+ --heading-font-family: null,
+ --heading-font-style: null,
+ --heading-line-height: 1.2,
+ --paragraph-margin-bottom: var(--spacer),
+ --legend-margin-bottom: var(--spacer-2),
+ --legend-font-size: 1.5rem,
+ --legend-font-weight: null,
+ --list-padding-x: var(--spacer-7),
+ ),
+ $type-tokens
+);
+// scss-docs-end type-tokens
+
+:root {
+ @include tokens($type-tokens);
+}
+
// scss-docs-start reboot-kbd-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$reboot-kbd-tokens: defaults(
(
--kbd-padding-y: .125rem,
- --kbd-padding-x: .25rem,
+ --kbd-padding-x: var(--spacer-1),
--kbd-font-size: var(--font-size-xs),
--kbd-color: var(--bg-body),
--kbd-bg: var(--fg-2),
@@ -115,11 +138,11 @@ $reboot-mark-tokens: defaults(
%heading {
margin-top: 0; // 1
- margin-bottom: $headings-margin-bottom;
- font-family: $headings-font-family;
- font-style: $headings-font-style;
- font-weight: $headings-font-weight;
- line-height: $headings-line-height;
+ margin-bottom: var(--heading-margin-bottom);
+ font-family: var(--heading-font-family);
+ font-style: var(--heading-font-style);
+ font-weight: var(--heading-font-weight, var(--font-weight-medium));
+ line-height: var(--heading-line-height);
color: var(--heading-color);
}
@@ -166,7 +189,7 @@ $reboot-mark-tokens: defaults(
p {
margin-top: 0;
- margin-bottom: $paragraph-margin-bottom;
+ margin-bottom: var(--paragraph-margin-bottom);
}
// Abbreviations
@@ -181,10 +204,16 @@ $reboot-mark-tokens: defaults(
text-decoration-skip-ink: none; // 3
}
+ // Builds on `abbr`
+ .initialism {
+ font-size: var(--initialism-font-size, var(--font-size-xs));
+ text-transform: uppercase;
+ }
+
// Address
address {
- margin-bottom: 1rem;
+ margin-bottom: var(--spacer);
font-style: normal;
line-height: inherit;
}
@@ -193,14 +222,14 @@ $reboot-mark-tokens: defaults(
ol,
ul {
- padding-inline-start: 2rem;
+ padding-inline-start: var(--list-padding-x);
}
ol,
ul,
dl {
margin-top: 0;
- margin-bottom: 1rem;
+ margin-bottom: var(--spacer);
}
ol ol,
@@ -211,20 +240,20 @@ $reboot-mark-tokens: defaults(
}
dt {
- font-weight: $dt-font-weight;
+ font-weight: var(--dt-font-weight, var(--font-weight-bold));
}
// 1. Undo browser default
dd {
margin-inline-start: 0; // 1
- margin-bottom: .5rem;
+ margin-bottom: var(--spacer-2);
}
// Blockquote
blockquote {
- margin: 0 0 1rem;
+ margin: 0 0 var(--spacer);
> * {
margin-block: 0;
}
@@ -236,7 +265,7 @@ $reboot-mark-tokens: defaults(
b,
strong {
- font-weight: $font-weight-bolder;
+ font-weight: var(--font-weight-bolder);
}
// Small
@@ -279,7 +308,7 @@ $reboot-mark-tokens: defaults(
a {
color: var(--theme-fg, var(--link-color));
text-decoration: var(--link-decoration);
- text-underline-offset: $link-underline-offset;
+ text-underline-offset: var(--link-underline-offset);
&:hover {
// --link-color: var(--link-hover-color);
@@ -319,7 +348,7 @@ $reboot-mark-tokens: defaults(
pre {
display: block;
margin-top: 0; // 1
- margin-bottom: 1rem; // 2
+ margin-bottom: var(--spacer); // 2
overflow: auto; // 3
font-size: var(--code-font-size);
color: var(--code-color, inherit);
@@ -363,7 +392,7 @@ $reboot-mark-tokens: defaults(
// Apply a consistent margin strategy (matches our type styles).
figure {
- margin: 0 0 1rem;
+ margin: 0 0 var(--spacer);
}
// Images and content
@@ -383,22 +412,17 @@ $reboot-mark-tokens: defaults(
}
caption {
- // padding-top: $table-cell-padding-y;
- // padding-bottom: $table-cell-padding-y;
- // color: $table-caption-color;
- padding-block: .5rem;
+ padding-block: var(--spacer-2);
color: var(--fg-3);
text-align: start;
}
- // 1. Removes font-weight bold by inheriting
- // 2. Matches default `| ` alignment by inheriting `text-align`.
- // 3. Fix alignment for Safari
+ // 1. Matches default ` | ` alignment by inheriting `text-align`.
+ // 2. Fix alignment for Safari
th {
- // font-weight: $table-th-font-weight; // 1 // TODO: null by default — decide whether to remove
- text-align: inherit; // 2
- text-align: -webkit-match-parent; // 3
+ text-align: inherit; // 1
+ text-align: -webkit-match-parent; // 2
}
thead,
@@ -522,9 +546,9 @@ $reboot-mark-tokens: defaults(
float: inline-start; // 1
width: 100%;
padding: 0;
- margin-bottom: $legend-margin-bottom;
- font-size: $legend-font-size;
- font-weight: $legend-font-weight;
+ margin-bottom: var(--legend-margin-bottom);
+ font-size: var(--legend-font-size);
+ font-weight: var(--legend-font-weight);
line-height: inherit;
+ * {
diff --git a/scss/content/index.scss b/scss/content/index.scss
index 8b141c949c25..477ebd2e96a1 100644
--- a/scss/content/index.scss
+++ b/scss/content/index.scss
@@ -1,5 +1,6 @@
@forward "reboot";
-@forward "type";
+@forward "lists";
+@forward "blockquote";
@forward "tables";
@forward "images";
@forward "prose";
diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx
index 137eecadf613..e137197a4d18 100644
--- a/site/src/content/docs/content/typography.mdx
+++ b/site/src/content/docs/content/typography.mdx
@@ -263,15 +263,15 @@ All `--font-size-*` and `--line-height-*` CSS custom properties are defined in `
}
```
-### Sass variables
+Headings, paragraphs, description lists, and ` |