diff --git a/scss/_card.scss b/scss/_card.scss index d88d6ec33b65..b2e51ccf3b2c 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -95,6 +95,12 @@ $card-tokens: defaults( } } + .card-title, + .card-subtitle, + .card-text { + align-self: stretch; + } + .card-subtitle { margin-top: calc(var(--card-body-gap) * -.5); } diff --git a/scss/_chip.scss b/scss/_chip.scss index e6f2f8a3e2ac..013262d92306 100644 --- a/scss/_chip.scss +++ b/scss/_chip.scss @@ -44,9 +44,9 @@ $chip-tokens: defaults( align-items: center; height: var(--chip-height); padding-inline: var(--chip-padding-x); - // font-size: var(--chip-font-size); - // font-weight: var(--chip-font-weight); - // line-height: 1.25; + font-size: var(--chip-font-size, var(--font-size-sm)); + font-weight: var(--chip-font-weight, var(--font-weight-base)); + line-height: var(--chip-line-height, 1.25rem); color: var(--chip-color); text-decoration: none; white-space: nowrap; diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 17dca9245cd6..4f7794720144 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -21,7 +21,7 @@ $dropdown-tokens: defaults( --dropdown-padding-x: .25rem, --dropdown-padding-y: .25rem, --dropdown-spacer: .125rem, - --dropdown-font-size: #{$font-size-base}, + --dropdown-font-size: var(--font-size-sm), --dropdown-color: var(--fg-body), --dropdown-bg: var(--bg-body), --dropdown-border-color: var(--border-color-translucent), @@ -134,7 +134,7 @@ $dropdown-tokens: defaults( display: block; padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x); margin-bottom: 0; // for use with heading elements - font-size: $font-size-sm; + font-size: var(--font-size-sm); color: var(--dropdown-header-color); white-space: nowrap; // as with > li > a } diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 1d0d57ecb3b4..55a677c89211 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -18,14 +18,14 @@ $pagination-tokens: () !default; // stylelint-disable-next-line scss/dollar-variable-default $pagination-tokens: defaults( ( - --pagination-padding-x: .75rem, - --pagination-padding-y: .375rem, - --pagination-font-size: var(--font-size-base), + --pagination-padding-x: var(--btn-input-padding-x), + --pagination-padding-y: var(--btn-input-padding-y), + --pagination-font-size: var(--btn-input-font-size), --pagination-color: var(--link-color), --pagination-bg: var(--bg-body), --pagination-border-width: var(--border-width), --pagination-border-color: var(--border-color), - --pagination-border-radius: var(--border-radius), + --pagination-border-radius: var(--btn-input-border-radius), --pagination-hover-color: var(--link-hover-color), --pagination-hover-bg: var(--bg-1), --pagination-hover-border-color: var(--border-color), @@ -41,16 +41,16 @@ $pagination-tokens: defaults( $pagination-tokens ); // scss-docs-end pagination-tokens -// stylelint-enable custom-property-no-missing-var-function -// scss-docs-start pagination-mixin -@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) { - --pagination-padding-x: #{$padding-x}; - --pagination-padding-y: #{$padding-y}; - --pagination-font-size: #{$font-size}; - --pagination-border-radius: #{$border-radius}; -} -// scss-docs-end pagination-mixin +// scss-docs-start pagination-sizes +$pagination-sizes: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$pagination-sizes: defaults( + ("sm", "lg"), + $pagination-sizes +); +// scss-docs-end pagination-sizes +// stylelint-enable custom-property-no-missing-var-function @layer components { .pagination { @@ -125,11 +125,14 @@ $pagination-tokens: defaults( // Sizing // - .pagination-lg { - @include pagination-size(.75rem, 1.5rem, $font-size-lg, var(--border-radius-lg)); - } - - .pagination-sm { - @include pagination-size(.25rem, .5rem, $font-size-sm, var(--border-radius-sm)); + // scss-docs-start pagination-sizes-loop + @each $size, $_ in $pagination-sizes { + .pagination-#{$size} { + --pagination-padding-y: var(--btn-input-#{$size}-padding-y); + --pagination-padding-x: var(--btn-input-#{$size}-padding-x); + --pagination-font-size: var(--btn-input-#{$size}-font-size); + --pagination-border-radius: var(--btn-input-#{$size}-border-radius); + } } + // scss-docs-end pagination-sizes-loop } diff --git a/scss/_popover.scss b/scss/_popover.scss index 8dcc584bcc0b..1653b5945a69 100644 --- a/scss/_popover.scss +++ b/scss/_popover.scss @@ -24,7 +24,7 @@ $popover-tokens: defaults( --popover-box-shadow: var(--box-shadow), --popover-header-padding-x: #{$spacer}, --popover-header-padding-y: #{$spacer * .75}, - --popover-header-font-size: #{$font-size-base}, + --popover-header-font-size: var(--font-size-sm), --popover-header-color: #{$headings-color}, --popover-header-bg: var(--bg-1), --popover-body-padding-x: #{$spacer}, diff --git a/scss/_root.scss b/scss/_root.scss index f8748bf69272..cfc32d9e2b65 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -22,16 +22,11 @@ $root-tokens: defaults( ( --black: #{$black}, --white: #{$white}, - // Fonts - // Note: Use `inspect` for lists so that quoted items keep the quotes. - // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 - --font-sans-serif: #{meta.inspect($font-family-sans-serif)}, - --font-monospace: #{meta.inspect($font-family-monospace)}, + --gradient: #{$gradient}, - --body-font-family: #{meta.inspect($font-family-base)}, // scss-docs-start root-font-size-variables - --font-size-base: #{$font-size-base}, + --font-size-base: 1rem, --font-size-xs: .75rem, --font-size-sm: .875rem, --font-size-md: 1rem, @@ -55,7 +50,8 @@ $root-tokens: defaults( --line-height-6xl: 1, // scss-docs-end root-font-size-variables - --body-font-size: #{$font-size-base}, + --body-font-family: system-ui, + --body-font-size: var(--font-size-base), --body-font-weight: #{$font-weight-base}, --body-line-height: #{$line-height-base}, @@ -67,6 +63,7 @@ $root-tokens: defaults( --link-decoration: #{$link-decoration}, --link-hover-color: color-mix(in oklch, var(--link-color) 90%, #000), + --font-mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", --code-font-size: 95%, --code-color: var(--fg-2), @@ -80,17 +77,19 @@ $root-tokens: defaults( // scss-docs-start root-border-radius-var --border-radius: .5rem, --border-radius-xs: .375rem, - --border-radius-sm: .375rem, + --border-radius-sm: .5rem, --border-radius-lg: .75rem, --border-radius-xl: 1rem, --border-radius-2xl: 2rem, --border-radius-pill: 50rem, // scss-docs-end root-border-radius-var - --box-shadow: #{$box-shadow}, - --box-shadow-sm: #{$box-shadow-sm}, - --box-shadow-lg: #{$box-shadow-lg}, - --box-shadow-inset: #{$box-shadow-inset}, + // scss-docs-start root-box-shadow-variables + --box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%), + --box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%), + --box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%), + --box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%), + // scss-docs-end root-box-shadow-variables --spacer: 1rem, @@ -111,7 +110,7 @@ $root-tokens: defaults( --control-disabled-bg: var(--bg-3), --control-disabled-opacity: .65, - --btn-input-min-height: 2.375rem, + --btn-input-min-height: 2.5rem, --btn-input-padding-y: .375rem, --btn-input-padding-x: .75rem, --btn-input-font-size: var(--font-size-base), @@ -120,19 +119,19 @@ $root-tokens: defaults( --btn-input-xs-min-height: 1.5rem, --btn-input-xs-padding-y: .125rem, - --btn-input-xs-padding-x: .375rem, + --btn-input-xs-padding-x: .5rem, --btn-input-xs-font-size: var(--font-size-xs), --btn-input-xs-line-height: 1.125, --btn-input-xs-border-radius: var(--border-radius-xs), - --btn-input-sm-min-height: 2rem, + --btn-input-sm-min-height: 2.25rem, --btn-input-sm-padding-y: .25rem, - --btn-input-sm-padding-x: .5rem, - --btn-input-sm-font-size: var(--font-size-xs), - --btn-input-sm-line-height: var(--line-height-xs), + --btn-input-sm-padding-x: .625rem, + --btn-input-sm-font-size: var(--font-size-sm), + --btn-input-sm-line-height: var(--line-height-sm), --btn-input-sm-border-radius: var(--border-radius-sm), - --btn-input-lg-min-height: 2.75rem, + --btn-input-lg-min-height: 3rem, --btn-input-lg-padding-y: .5rem, --btn-input-lg-padding-x: 1rem, --btn-input-lg-font-size: var(--font-size-md), @@ -181,14 +180,3 @@ $root-tokens: defaults( color-scheme: light dark; } - -:root, -[data-bs-theme="light"] { - // Root and body - @if $font-size-root != null { - --root-font-size: #{$font-size-root}; - } - @if $body-text-align != null { - --body-text-align: #{$body-text-align}; - } -} diff --git a/scss/_utilities.scss b/scss/_utilities.scss index a1c1aad7852c..99a3eb15dcd6 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -622,8 +622,8 @@ $utilities: map.merge( property: font-family, class: font, values: ( - "monospace": var(--font-monospace), - "body": var(--font-sans-serif), + "monospace": var(--font-mono), + "body": var(--body-font-family), ) ), // scss-docs-end utils-font-family diff --git a/scss/_variables.scss b/scss/_variables.scss index 89954eb34395..82eda4a4113d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -61,7 +61,7 @@ $position-values: ( // // Settings for the `` element. -$body-text-align: null !default; +// $body-text-align: null !default; // Links // @@ -110,13 +110,6 @@ $border-style: solid !default; $border-color: color-mix(in oklch, var(--gray-100), var(--gray-200)) !default; // scss-docs-end border-variables -// scss-docs-start box-shadow-variables -$box-shadow: 0 .5rem 1rem rgba($black, .15) !default; -$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default; -$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default; -$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default; -// scss-docs-end box-shadow-variables - $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; @@ -140,19 +133,10 @@ $aspect-ratios: ( // Font, line-height, and color for body text, headings, and more. // scss-docs-start font-variables -// stylelint-disable value-keyword-case -$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; -$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; -// stylelint-enable value-keyword-case -$font-family-base: var(--font-sans-serif) !default; -$font-family-code: var(--font-monospace) !default; - -// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins -// $font-size-base affects the font size of the body text -$font-size-root: 16px !default; -$font-size-base: 14px !default; // Assumes the browser default, typically `16px` -$font-size-sm: $font-size-base * .875 !default; -$font-size-lg: $font-size-base * 1.25 !default; +// $font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; +// $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; +// $font-family-base: var(--font-sans-serif) !default; +// $font-family-code: var(--font-monospace) !default; $font-weight-lighter: lighter !default; $font-weight-light: 300 !default; diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss index db29fec421ab..43a8dc296135 100644 --- a/scss/content/_reboot.scss +++ b/scss/content/_reboot.scss @@ -65,18 +65,14 @@ $reboot-mark-tokens: defaults( // null by default, thus nothing is generated. :root { - @if $font-size-root != null { - font-size: var(--root-font-size); - // @include font-size(var(--root-font-size)); - } + // Assume browser default font-size of 16px, or a user's preference + accent-color: var(--primary-base); @if $enable-smooth-scroll { @media (prefers-reduced-motion: no-preference) { scroll-behavior: smooth; } } - - accent-color: var(--primary-base); } @@ -321,7 +317,7 @@ $reboot-mark-tokens: defaults( code, kbd, samp { - font-family: $font-family-code; + font-family: var(--font-mono); font-size: 1em; // Correct the odd `em` font sizing in all browsers. } diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss index 0614af4aff1d..92a0e04d7b01 100644 --- a/scss/forms/_check.scss +++ b/scss/forms/_check.scss @@ -17,9 +17,11 @@ $check-tokens: () !default; // stylelint-disable-next-line scss/dollar-variable-default $check-tokens: defaults( ( - --check-size: 1rem, + --check-size: 1.25rem, + --check-margin-block: .125rem, --check-bg: transparent, --check-border-color: var(--border-color), + --check-border-radius: .375rem, --check-checked-bg: var(--control-checked-bg), --check-checked-border-color: var(--control-checked-border-color), --check-indeterminate-bg: var(--control-checked-bg), @@ -50,7 +52,7 @@ $check-tokens: defaults( display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); - margin-block: .125rem; + margin-block: var(--check-margin-block); :where(svg, input) { flex-shrink: 0; @@ -105,4 +107,12 @@ $check-tokens: defaults( display: none; } } + + .check-sm { + --check-size: 1rem; + } + .check-lg { + --check-size: 1.5rem; + --check-margin-block: 0; + } } diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss index 403f5e462cb5..5c5b26058fe5 100644 --- a/scss/forms/_radio.scss +++ b/scss/forms/_radio.scss @@ -17,7 +17,8 @@ $radio-tokens: () !default; // stylelint-disable-next-line scss/dollar-variable-default $radio-tokens: defaults( ( - --radio-size: 1rem, + --radio-size: 1.25rem, + --radio-margin-block: .125rem, --radio-bg: transparent, --radio-border-color: var(--border-color), --radio-checked-bg: var(--control-checked-bg), @@ -48,7 +49,7 @@ $radio-tokens: defaults( flex-shrink: 0; width: var(--radio-size); height: var(--radio-size); - margin-block: .125rem; + margin-block: var(--radio-margin-block); appearance: none; background-color: var(--theme-bg, var(--radio-bg)); border: 1px solid var(--theme-bg, var(--radio-border-color)); @@ -82,6 +83,13 @@ $radio-tokens: defaults( &:focus-visible { @include focus-ring(true); } + } + .radio-sm { + --radio-size: 1rem; + } + .radio-lg { + --radio-size: 1.5rem; + --radio-margin-block: 0; } } diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss index cfd306d63eb7..59bbe89fb85b 100644 --- a/scss/forms/_switch.scss +++ b/scss/forms/_switch.scss @@ -21,6 +21,7 @@ $switch-tokens: defaults( --switch-height: 1.25rem, --switch-width: calc(var(--switch-height) * 1.5), --switch-padding: .0625rem, + --switch-margin-block: .125rem, --switch-bg: var(--bg-3), --switch-border-width: var(--border-width), --switch-border-color: var(--border-color), @@ -48,6 +49,7 @@ $switch-tokens: defaults( width: var(--switch-width); height: var(--switch-height); padding: var(--switch-padding); + margin-block: var(--switch-margin-block); background-color: var(--switch-bg); border: var(--switch-border-width) solid var(--switch-border-color); // stylelint-disable-next-line property-disallowed-list @@ -99,9 +101,10 @@ $switch-tokens: defaults( } } .switch-sm { - --switch-height: 1em; + --switch-height: 1rem; } .switch-lg { - --switch-height: 2em; + --switch-height: 1.5rem; + --switch-margin-block: 0; } } diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss index 769368a17255..e3f5c0e6cd5e 100644 --- a/scss/mixins/_reset-text.scss +++ b/scss/mixins/_reset-text.scss @@ -1,11 +1,11 @@ @use "../variables" as *; @mixin reset-text { - font-family: $font-family-base; + font-family: var(--body-font-family); // We deliberately do NOT reset font-size or overflow-wrap / word-wrap. font-style: normal; - font-weight: $font-weight-normal; - line-height: $line-height-base; + font-weight: var(--body-font-weight); + line-height: var(--body-line-height); text-align: start; text-decoration: none; text-shadow: none; diff --git a/site/src/components/shortcodes/Code.astro b/site/src/components/shortcodes/Code.astro index 7f8b3c77f3f4..fa5f99d2b12a 100644 --- a/site/src/components/shortcodes/Code.astro +++ b/site/src/components/shortcodes/Code.astro @@ -112,13 +112,13 @@ let codeToDisplay = filePath : code if (filePath && fileMatch && codeToDisplay) { - const match = codeToDisplay.match(new RegExp(fileMatch)) + const matches = [...codeToDisplay.matchAll(new RegExp(fileMatch, 'g'))] - if (!match || !match[0]) { - throw new Error(`The file at ${filePath} does not contains a match for the regex '${fileMatch}'.`) + if (matches.length === 0) { + throw new Error(`The file at ${filePath} does not contain a match for the regex '${fileMatch}'.`) } - codeToDisplay = match[0] + codeToDisplay = matches.map(m => m[0]).join('\n\n') } // Add line wrapper for shell languages to support shell prompts diff --git a/site/src/content/docs/components/pagination.mdx b/site/src/content/docs/components/pagination.mdx index 0ab622369334..d735c5841a1d 100644 --- a/site/src/content/docs/components/pagination.mdx +++ b/site/src/content/docs/components/pagination.mdx @@ -160,6 +160,8 @@ Or with `.justify-content-end`: -### Sass mixins +### Sass sizes - + + + diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx index 9a061e0a94c4..9502e619358a 100644 --- a/site/src/content/docs/content/reboot.mdx +++ b/site/src/content/docs/content/reboot.mdx @@ -74,7 +74,7 @@ $font-family-sans-serif: Note that because the font stack includes emoji fonts, many common symbol/dingbat Unicode characters will be rendered as multicolored pictographs. Their appearance will vary, depending on the style used in the browser/platform’s native emoji font, and they won’t be affected by any CSS `color` styles. -This `font-family` is applied to the `` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap. +This `font-family` is applied to the `` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `--body-font-family`. ## Headings diff --git a/site/src/content/docs/content/typography.mdx b/site/src/content/docs/content/typography.mdx index 6640a5770c9d..6471286a89b9 100644 --- a/site/src/content/docs/content/typography.mdx +++ b/site/src/content/docs/content/typography.mdx @@ -10,11 +10,11 @@ Bootstrap sets basic global display, typography, and link styles. When more cont - Use a [native font stack]([[docsref:/content/reboot#native-font-stack]]) that selects the best `font-family` for each OS and device. - For a more inclusive and accessible type scale, we use the browser’s default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed. -- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the ``. +- Use the `--body-font-family`, `--body-font-size`, and `--body-line-height` attributes as our typographic base applied to the ``. - Set the global link color via `--bs-link-color`. - Use `--bs-body-bg` to set a `background-color` on the `` (`#fff` by default). -These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`. +These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `--font-size-base` in `rem`. ## Headings diff --git a/site/src/content/docs/customize/css-variables.mdx b/site/src/content/docs/customize/css-variables.mdx index 115cd9375b7b..613cd727fc4a 100644 --- a/site/src/content/docs/customize/css-variables.mdx +++ b/site/src/content/docs/customize/css-variables.mdx @@ -16,7 +16,7 @@ Here are the variables we include (note that the `:root` is required) that can b These CSS variables are available everywhere, regardless of color mode. - + ### Dark mode diff --git a/site/src/content/docs/forms/checkbox.mdx b/site/src/content/docs/forms/checkbox.mdx index 1fc561acfbf7..467fc5e95ccc 100644 --- a/site/src/content/docs/forms/checkbox.mdx +++ b/site/src/content/docs/forms/checkbox.mdx @@ -20,9 +20,9 @@ Checkbox layout and labels are handled with additional HTML and CSS. - - - + + + `} /> @@ -32,9 +32,9 @@ Checkboxes can utilize the indeterminate pseudo class when manually set via Java - - - + + + `} /> @@ -116,6 +116,32 @@ Applies to checked states, too. `} /> +## Sizes + +Add `.check-sm` or `.check-lg` to make your checkbox appear smaller or larger. + + + + + + + + +
+ + + + + +
+
+ + + + + +
`} /> + ## CSS ### Variables diff --git a/site/src/content/docs/forms/switch.mdx b/site/src/content/docs/forms/switch.mdx index b25000601a63..ccb417cadf67 100644 --- a/site/src/content/docs/forms/switch.mdx +++ b/site/src/content/docs/forms/switch.mdx @@ -25,13 +25,6 @@ Wrap the `.switch` in a `.checkgroup` layout wrapper and add your label. This se Consider margin utilities for additional spacing, and flex utilities for alignment, especially when using small or large switches. -
- -
- - - -
@@ -43,7 +36,7 @@ Consider margin utilities for additional spacing, and flex utilities for alignme Modify the appearance of checked checkboxes by adding the `.checked-{color}` class to the `.switch` element. This will set the checked background and border color to the theme color. `
-
+
@@ -64,14 +57,23 @@ Add the `disabled` attribute and the associated `
-
- +
+
+ +
+
-
- +
+
+ +
+
`} /> ## CSS diff --git a/site/src/content/docs/utilities/shadows.mdx b/site/src/content/docs/utilities/shadows.mdx index 9b9b3b4c9b5c..e2f064ee3e9d 100644 --- a/site/src/content/docs/utilities/shadows.mdx +++ b/site/src/content/docs/utilities/shadows.mdx @@ -19,7 +19,7 @@ While shadows on components are disabled by default in Bootstrap and can be enab ### Sass variables - + ### Sass utilities API diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index a59c9996aff3..15c3d09844b9 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -15,7 +15,6 @@ --bd-example-inner-radius: calc(var(--bs-border-radius) - 1px); margin: 0 ($bd-gutter-x * -.5); - font-size: var(--font-size-sm); background-color: var(--bd-pre-bg); border: solid var(--bs-border-color); border-width: 1px 0; diff --git a/site/src/scss/_sidebar.scss b/site/src/scss/_sidebar.scss index 6366d8924dc3..1d17decfc2b9 100644 --- a/site/src/scss/_sidebar.scss +++ b/site/src/scss/_sidebar.scss @@ -5,6 +5,8 @@ @layer custom { .bd-sidebar { + font-size: var(--font-size-sm); + @include media-breakpoint-up(lg) { position: sticky; top: 5rem; @@ -30,7 +32,7 @@ .nav { --bs-nav-gap: 2px; --bs-nav-link-justify: flex-start; - --bs-nav-link-font-size: #{$font-size-sm}; + --bs-nav-link-font-size: var(--font-size-sm); --bs-nav-link-padding-x: .75rem; --bs-nav-link-padding-y: .25rem; margin-top: .25rem; diff --git a/site/src/scss/_syntax.scss b/site/src/scss/_syntax.scss index 93b7a94d7110..d2cbb16e8bf8 100644 --- a/site/src/scss/_syntax.scss +++ b/site/src/scss/_syntax.scss @@ -19,6 +19,7 @@ display: flex; padding: var(--bd-example-padding); margin-bottom: 0; + font-size: 13px; line-height: 20px; background-color: var(--bd-pre-bg) !important; // stylelint-disable-line declaration-no-important @include border-radius(calc(var(--bs-border-radius) - 1px)); @@ -35,7 +36,7 @@ width: calc(100% + 2.5rem); padding-inline: 1.25rem; margin-inline: -1.25rem; - background-color: var(--bs-primary-bg-subtle); + background-color: color-mix(in oklch, var(--primary-bg) 10%, transparent); } // Dark mode theming for Shiki diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss index 760f6407013c..82b1255209ad 100644 --- a/site/src/scss/_toc.scss +++ b/site/src/scss/_toc.scss @@ -4,6 +4,7 @@ @layer custom { .bd-toc { container-type: inline-size; + font-size: var(--font-size-sm); @include media-breakpoint-up(lg) { position: sticky;