From de0dfca9a1749990319cdfcbb7f1584df09d7091 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 29 Nov 2021 21:14:17 -0800 Subject: Convert border utilities to CSS variables - Updates the utilities mixin to check for specific CSS variable names via `css-variable` - Bonus fix: we now prevent local variables for `0` value utilities (e.g., `.border-top-0` no longer sets `--bs-border-opacity: 1` - Adds new `.border-opacity-*` classes - Adds new root variables: `--bs-border-color`, `--bs-border-style`, `--bs-border-width` - Documents the new variable changes --- scss/_root.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 2927c343f..ab0584e68 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -50,5 +50,12 @@ } --#{$variable-prefix}body-bg: #{$body-bg}; // scss-docs-end root-body-variables + + // scss-docs-start root-border-var + --#{$variable-prefix}border-width: #{$border-width}; + --#{$variable-prefix}border-style: solid; + --#{$variable-prefix}border-color: #{$border-color}; + --#{$variable-prefix}border-radius: #{$border-radius}; + // scss-docs-end root-border-var // stylelint-enable custom-property-empty-line-before } -- cgit v1.2.3 From 2d11c1c28a1617d61421e73e8d48692204083148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 3 Mar 2022 13:22:50 +0100 Subject: Add missing root border opacity CSS var --- scss/_root.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index ab0584e68..4d5f3d198 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -56,6 +56,7 @@ --#{$variable-prefix}border-style: solid; --#{$variable-prefix}border-color: #{$border-color}; --#{$variable-prefix}border-radius: #{$border-radius}; + --#{$variable-prefix}border-opacity: 1; // scss-docs-end root-border-var // stylelint-enable custom-property-empty-line-before } -- cgit v1.2.3 From acf6ea74a74328bcaa9f1c354f27e602cfbb8968 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 13 Mar 2022 10:13:09 -0700 Subject: Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981) * Add additional root variables, rename $variable-prefix to $prefix - Adds new root CSS variables for border-radius, border-width, border-color, and border-style - Adds new root CSS variables for heading-color, link-colors, code color, and highlight color - Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss - Updates $mark-padding to be an even pixel number - Renames $variable-prefix to $prefix throughout * Bundlewatch --- scss/_root.scss | 67 +++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 41 insertions(+), 26 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 4d5f3d198..f0f89800f 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,3 +1,5 @@ +// stylelint-disable custom-property-empty-line-before + :root { // Note: Custom variable values only support SassScript inside `#{}`. @@ -6,57 +8,70 @@ // Generate palettes for full colors, grays, and theme colors. @each $color, $value in $colors { - --#{$variable-prefix}#{$color}: #{$value}; + --#{$prefix}#{$color}: #{$value}; } @each $color, $value in $grays { - --#{$variable-prefix}gray-#{$color}: #{$value}; + --#{$prefix}gray-#{$color}: #{$value}; } @each $color, $value in $theme-colors { - --#{$variable-prefix}#{$color}: #{$value}; + --#{$prefix}#{$color}: #{$value}; } @each $color, $value in $theme-colors-rgb { - --#{$variable-prefix}#{$color}-rgb: #{$value}; + --#{$prefix}#{$color}-rgb: #{$value}; } - --#{$variable-prefix}white-rgb: #{to-rgb($white)}; - --#{$variable-prefix}black-rgb: #{to-rgb($black)}; - --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)}; - --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)}; + --#{$prefix}white-rgb: #{to-rgb($white)}; + --#{$prefix}black-rgb: #{to-rgb($black)}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; // Fonts // Note: Use `inspect` for lists so that quoted items keep the quotes. // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 - --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; - --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)}; - --#{$variable-prefix}gradient: #{$gradient}; + --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; + --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; + --#{$prefix}gradient: #{$gradient}; // Root and body - // stylelint-disable custom-property-empty-line-before // scss-docs-start root-body-variables @if $font-size-root != null { - --#{$variable-prefix}root-font-size: #{$font-size-root}; + --#{$prefix}root-font-size: #{$font-size-root}; } - --#{$variable-prefix}body-font-family: #{$font-family-base}; - @include rfs($font-size-base, --#{$variable-prefix}body-font-size); - --#{$variable-prefix}body-font-weight: #{$font-weight-base}; - --#{$variable-prefix}body-line-height: #{$line-height-base}; - --#{$variable-prefix}body-color: #{$body-color}; + --#{$prefix}body-font-family: #{$font-family-base}; + @include rfs($font-size-base, --#{$prefix}body-font-size); + --#{$prefix}body-font-weight: #{$font-weight-base}; + --#{$prefix}body-line-height: #{$line-height-base}; + --#{$prefix}body-color: #{$body-color}; @if $body-text-align != null { - --#{$variable-prefix}body-text-align: #{$body-text-align}; + --#{$prefix}body-text-align: #{$body-text-align}; } - --#{$variable-prefix}body-bg: #{$body-bg}; + --#{$prefix}body-bg: #{$body-bg}; // scss-docs-end root-body-variables // scss-docs-start root-border-var - --#{$variable-prefix}border-width: #{$border-width}; - --#{$variable-prefix}border-style: solid; - --#{$variable-prefix}border-color: #{$border-color}; - --#{$variable-prefix}border-radius: #{$border-radius}; - --#{$variable-prefix}border-opacity: 1; + --#{$prefix}border-width: #{$border-width}; + --#{$prefix}border-style: #{$border-style}; + --#{$prefix}border-color: #{$border-color}; + --#{$prefix}border-radius: #{$border-radius}; + --#{$prefix}border-opacity: 1; + + --#{$prefix}border-radius: #{$border-radius}; + --#{$prefix}border-radius-sm: #{$border-radius-sm}; + --#{$prefix}border-radius-lg: #{$border-radius-lg}; + --#{$prefix}border-radius-xl: #{$border-radius-xl}; + --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; + --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var - // stylelint-enable custom-property-empty-line-before + + --#{$prefix}heading-color: #{$headings-color}; + --#{$prefix}link-color: #{$link-color}; + --#{$prefix}link-hover-color: #{$link-hover-color}; + + --#{$prefix}code-color: #{$code-color}; + + --#{$prefix}highlight-bg: #{$mark-bg}; } -- cgit v1.2.3 From d0714817f89fc4ad7429da3701c5b08b81587604 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 29 Mar 2022 15:42:18 +0200 Subject: Fix duplicate border radius CSS var definition --- scss/_root.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index f0f89800f..e1719e5da 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -56,7 +56,6 @@ --#{$prefix}border-width: #{$border-width}; --#{$prefix}border-style: #{$border-style}; --#{$prefix}border-color: #{$border-color}; - --#{$prefix}border-radius: #{$border-radius}; --#{$prefix}border-opacity: 1; --#{$prefix}border-radius: #{$border-radius}; -- cgit v1.2.3 From 7745730e4132eff204bf2afe8351511e595acee6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 29 Apr 2022 13:59:41 -0700 Subject: Revert `border-color` change (#36238) * Revert `border-color` change * Add new border-color-translucent for when we want optional alpha-transparency in our border-color Apply to drodpowns, modals, offcanvas, popovers, and toasts * bundlewatch --- scss/_root.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index e1719e5da..36f9849ef 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -56,6 +56,7 @@ --#{$prefix}border-width: #{$border-width}; --#{$prefix}border-style: #{$border-style}; --#{$prefix}border-color: #{$border-color}; + --#{$prefix}border-color-translucent: #{$border-color-translucent}; --#{$prefix}border-opacity: 1; --#{$prefix}border-radius: #{$border-radius}; -- cgit v1.2.3 From bca99232b8bef6a53719e4827de40729098d4ec8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 May 2022 21:32:02 -0700 Subject: Iterate on border utilities (#36239) * Remove `--bs-border-opacity: 1` from `.border-*` utilities We set `--bs-border-opacity: 1` globally at the `:root` level, so redeclaring it on every `.border-*` utility doesn't make much sense. I think we can drop this. * Remove global border-opacity var, restore on .border-color classes, move .border-color utils down the list to fix some specificity issues * Add some demos of border utils to the docs --- scss/_root.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 36f9849ef..e16d2a3f6 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -57,7 +57,6 @@ --#{$prefix}border-style: #{$border-style}; --#{$prefix}border-color: #{$border-color}; --#{$prefix}border-color-translucent: #{$border-color-translucent}; - --#{$prefix}border-opacity: 1; --#{$prefix}border-radius: #{$border-radius}; --#{$prefix}border-radius-sm: #{$border-radius-sm}; -- cgit v1.2.3 From 427c089961c8773386de0503a1da8b586587df38 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 22 May 2022 19:24:08 -0700 Subject: Stylelint: Disable `custom-property-empty-line-before` --- scss/_root.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index e16d2a3f6..ae22687b1 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,5 +1,3 @@ -// stylelint-disable custom-property-empty-line-before - :root { // Note: Custom variable values only support SassScript inside `#{}`. -- cgit v1.2.3 From 270344a0d55e9cd6b0af7eb524b6657eb8e2fdf0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 5 Jun 2022 19:26:07 -0700 Subject: Remove headings-color CSS variable due to backward compatibility issues --- scss/_root.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index ae22687b1..e64ae04e5 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -64,7 +64,6 @@ --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var - --#{$prefix}heading-color: #{$headings-color}; --#{$prefix}link-color: #{$link-color}; --#{$prefix}link-hover-color: #{$link-hover-color}; -- cgit v1.2.3 From 2fa7aa0c18fc9e929474a49fe0f78113395a2541 Mon Sep 17 00:00:00 2001 From: Stefan Haack Date: Mon, 3 Oct 2022 20:04:19 +0200 Subject: Added breakpoints as css variables (#36095) --- scss/_root.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index e64ae04e5..d9355b38e 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -70,4 +70,8 @@ --#{$prefix}code-color: #{$code-color}; --#{$prefix}highlight-bg: #{$mark-bg}; + + @each $name, $value in $grid-breakpoints { + --#{$prefix}breakpoint-#{$name}: #{$value}; + } } -- cgit v1.2.3 From abdd3fef1fc742d2a21fc6f536cdad0ebb67aa3c Mon Sep 17 00:00:00 2001 From: chris Date: Mon, 21 Nov 2022 23:22:27 +0100 Subject: Keep string representation in `--bs-body-font-family` (#37526) --- scss/_root.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index d9355b38e..60e15152f 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -39,7 +39,7 @@ @if $font-size-root != null { --#{$prefix}root-font-size: #{$font-size-root}; } - --#{$prefix}body-font-family: #{$font-family-base}; + --#{$prefix}body-font-family: #{inspect($font-family-base)}; @include rfs($font-size-base, --#{$prefix}body-font-size); --#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-line-height: #{$line-height-base}; -- cgit v1.2.3 From fc3f4b67d65c575daa661ecf31cf59b4ff3cced5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Nov 2022 22:30:26 -0800 Subject: Add dark mode support (#35857) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond * Apply suggestions from code review Co-authored-by: Julien Déramond * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond Co-authored-by: Julien Déramond --- scss/_root.scss | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 122 insertions(+), 4 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 60e15152f..19cc06696 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,4 +1,5 @@ -:root { +:root, +[data-bs-theme="light"] { // Note: Custom variable values only support SassScript inside `#{}`. // Colors @@ -21,6 +22,18 @@ --#{$prefix}#{$color}-rgb: #{$value}; } + @each $color, $value in $theme-colors-text { + --#{$prefix}#{$color}-text: #{$value}; + } + + @each $color, $value in $theme-colors-bg-subtle { + --#{$prefix}#{$color}-bg-subtle: #{$value}; + } + + @each $color, $value in $theme-colors-border-subtle { + --#{$prefix}#{$color}-border-subtle: #{$value}; + } + --#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}black-rgb: #{to-rgb($black)}; --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; @@ -44,12 +57,45 @@ --#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-line-height: #{$line-height-base}; --#{$prefix}body-color: #{$body-color}; + + --#{$prefix}emphasis-color: #{$body-emphasis-color}; + --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)}; + + --#{$prefix}secondary-color: #{$body-secondary-color}; + --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)}; + --#{$prefix}secondary-bg: #{$body-secondary-bg}; + --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)}; + + --#{$prefix}tertiary-color: #{$body-tertiary-color}; + --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)}; + --#{$prefix}tertiary-bg: #{$body-tertiary-bg}; + --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; + @if $body-text-align != null { --#{$prefix}body-text-align: #{$body-text-align}; } --#{$prefix}body-bg: #{$body-bg}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; // scss-docs-end root-body-variables + @if $headings-color != null { + --#{$prefix}heading-color: #{$headings-color}; + } + + --#{$prefix}link-color: #{$link-color}; + --#{$prefix}link-color-rgb: #{to-rgb($link-color)}; + --#{$prefix}link-decoration: #{$link-decoration}; + + --#{$prefix}link-hover-color: #{$link-hover-color}; + --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)}; + + @if $link-hover-decoration != null { + --#{$prefix}link-hover-decoration: #{$link-hover-decoration}; + } + + --#{$prefix}code-color: #{$code-color}; + --#{$prefix}highlight-bg: #{$mark-bg}; + // scss-docs-start root-border-var --#{$prefix}border-width: #{$border-width}; --#{$prefix}border-style: #{$border-style}; @@ -64,10 +110,17 @@ --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var - --#{$prefix}link-color: #{$link-color}; - --#{$prefix}link-hover-color: #{$link-hover-color}; + --#{$prefix}box-shadow: #{$box-shadow}; + --#{$prefix}box-shadow-sm: #{$box-shadow-sm}; + --#{$prefix}box-shadow-lg: #{$box-shadow-lg}; + --#{$prefix}box-shadow-inset: #{$box-shadow-inset}; - --#{$prefix}code-color: #{$code-color}; + --#{$prefix}emphasis-color: #{$emphasis-color}; + + // scss-docs-start form-control-vars + --#{$prefix}form-control-bg: var(--#{$prefix}body-bg); + --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg); + // scss-docs-end form-control-vars --#{$prefix}highlight-bg: #{$mark-bg}; @@ -75,3 +128,68 @@ --#{$prefix}breakpoint-#{$name}: #{$value}; } } + +@if $enable-dark-mode { + @include color-mode(dark) { + // scss-docs-start root-dark-mode-vars + --#{$prefix}body-color: #{$body-color-dark}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)}; + --#{$prefix}body-bg: #{$body-bg-dark}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)}; + + --#{$prefix}emphasis-color: #{$body-emphasis-color-dark}; + --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)}; + + --#{$prefix}secondary-color: #{$body-secondary-color-dark}; + --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)}; + --#{$prefix}secondary-bg: #{$body-secondary-bg-dark}; + --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)}; + + --#{$prefix}tertiary-color: #{$body-tertiary-color-dark}; + --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)}; + --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; + --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; + + --#{$prefix}emphasis-color: #{$emphasis-color-dark}; + + --#{$prefix}primary-text: #{$primary-text-dark}; + --#{$prefix}secondary-text: #{$secondary-text-dark}; + --#{$prefix}success-text: #{$success-text-dark}; + --#{$prefix}info-text: #{$info-text-dark}; + --#{$prefix}warning-text: #{$warning-text-dark}; + --#{$prefix}danger-text: #{$danger-text-dark}; + --#{$prefix}light-text: #{$light-text-dark}; + --#{$prefix}dark-text: #{$dark-text-dark}; + + --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark}; + --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark}; + --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark}; + --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark}; + --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark}; + --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark}; + --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark}; + --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark}; + + --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark}; + --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark}; + --#{$prefix}success-border-subtle: #{$success-border-subtle-dark}; + --#{$prefix}info-border-subtle: #{$info-border-subtle-dark}; + --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark}; + --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark}; + --#{$prefix}light-border-subtle: #{$light-border-subtle-dark}; + --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark}; + + --#{$prefix}heading-color: #{$headings-color-dark}; + + --#{$prefix}link-color: #{$link-color-dark}; + --#{$prefix}link-hover-color: #{$link-hover-color-dark}; + --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)}; + --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)}; + + --#{$prefix}code-color: #{$code-color-dark}; + + --#{$prefix}border-color: #{$border-color-dark}; + --#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; + // scss-docs-end root-dark-mode-vars + } +} -- cgit v1.2.3 From 41f62c5a11d98d49646296f996fa844d05f9514d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 21 Dec 2022 07:52:07 +0100 Subject: Fix Sass compilation when `$color-mode-type` is set to `media-query` (#37687) * Fix Sass compilation when `$color-mode-type` is set to `media-query` * Update mixin names, fix docs color modes for using media queries by using mixin Co-authored-by: Mark Otto --- scss/_root.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 19cc06696..2d042d30e 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -130,7 +130,7 @@ } @if $enable-dark-mode { - @include color-mode(dark) { + @include color-mode(dark, true) { // scss-docs-start root-dark-mode-vars --#{$prefix}body-color: #{$body-color-dark}; --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)}; -- cgit v1.2.3 From 5d9c09ccbaff4d1c89398eec3b077da412dec956 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 27 Dec 2022 10:32:10 -0800 Subject: Add color-scheme to dark root selector --- scss/_root.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 2d042d30e..45de31090 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -131,6 +131,8 @@ @if $enable-dark-mode { @include color-mode(dark, true) { + color-scheme: dark; + // scss-docs-start root-dark-mode-vars --#{$prefix}body-color: #{$body-color-dark}; --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)}; -- cgit v1.2.3 From 9e17b2b34cdec9dce063bba09b01aa9a63e7dd94 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 29 Dec 2022 14:19:22 -0800 Subject: Focus ring helper and utilities (#33125) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add global variables for box-shadow focus rings * Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs * fix variable name * Add CSS variables for global focus styling, document it * Move to CSS vars section * Update scss/_nav.scss Co-authored-by: Gaël Poupard * Helper and utils * Fix bundlewatch * Change 'Focus ring' in sidebar so that the page can be visible * Minor typo fix * fix merge * Revamp some more, improve docs Co-authored-by: Gaël Poupard Co-authored-by: Julien Déramond Co-authored-by: Patrick H. Lauke --- scss/_root.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 45de31090..323a5217b 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -127,6 +127,15 @@ @each $name, $value in $grid-breakpoints { --#{$prefix}breakpoint-#{$name}: #{$value}; } + + // Focus styles + // scss-docs-start root-focus-variables + --#{$prefix}focus-ring-width: #{$focus-ring-width}; + --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity}; + --#{$prefix}focus-ring-color: #{$focus-ring-color}; + // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values + --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); + // scss-docs-end root-focus-variables } @if $enable-dark-mode { -- cgit v1.2.3 From da1c96896572512f128354b28e159e8d1c393bdd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 3 Jan 2023 19:28:26 -0800 Subject: Remove dark mode --bs-heading-color value, set to null, and add custom styles for the docs dark mode headings --- scss/_root.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 323a5217b..62ed0fd62 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -190,7 +190,9 @@ --#{$prefix}light-border-subtle: #{$light-border-subtle-dark}; --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark}; - --#{$prefix}heading-color: #{$headings-color-dark}; + @if $headings-color-dark != null { + --#{$prefix}heading-color: #{$headings-color-dark}; + } --#{$prefix}link-color: #{$link-color-dark}; --#{$prefix}link-hover-color: #{$link-hover-color-dark}; -- cgit v1.2.3 From 1c05a887eacee27b785a6fc2403a43cae76dfae3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 5 Jan 2023 22:10:22 +0100 Subject: Remove duplicate definition of `--bs-highlight-bg` in `scss/_root.scss` --- scss/_root.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 62ed0fd62..2bde6f7b6 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -122,8 +122,6 @@ --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg); // scss-docs-end form-control-vars - --#{$prefix}highlight-bg: #{$mark-bg}; - @each $name, $value in $grid-breakpoints { --#{$prefix}breakpoint-#{$name}: #{$value}; } -- cgit v1.2.3 From 702a3b6a61fab473de356fe3fe91edf2b8a3b6f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 6 Jan 2023 04:59:24 +0100 Subject: Fix duplicate `--bs-emphasis-color` set value (#37809) * Fix duplicate `--bs-emphasis-color` set value * Restore body- prefix Co-authored-by: Mark Otto --- scss/_root.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 2bde6f7b6..64c73659d 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -115,8 +115,6 @@ --#{$prefix}box-shadow-lg: #{$box-shadow-lg}; --#{$prefix}box-shadow-inset: #{$box-shadow-inset}; - --#{$prefix}emphasis-color: #{$emphasis-color}; - // scss-docs-start form-control-vars --#{$prefix}form-control-bg: var(--#{$prefix}body-bg); --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg); @@ -159,8 +157,6 @@ --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; - --#{$prefix}emphasis-color: #{$emphasis-color-dark}; - --#{$prefix}primary-text: #{$primary-text-dark}; --#{$prefix}secondary-text: #{$secondary-text-dark}; --#{$prefix}success-text: #{$success-text-dark}; -- cgit v1.2.3 From 8265927fc1dc5fd18c13d04d623f00a77590e4e0 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 6 Jan 2023 20:46:03 +0100 Subject: CSS: rename some variables to be consistent (#37804) * Fix * fix(review) --- scss/_root.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 64c73659d..a37832222 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -106,7 +106,8 @@ --#{$prefix}border-radius-sm: #{$border-radius-sm}; --#{$prefix}border-radius-lg: #{$border-radius-lg}; --#{$prefix}border-radius-xl: #{$border-radius-xl}; - --#{$prefix}border-radius-2xl: #{$border-radius-2xl}; + --#{$prefix}border-radius-xxl: #{$border-radius-xxl}; + --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var -- cgit v1.2.3 From 748702d00f623c9b3700a83b743429beeae85e29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 9 Jan 2023 20:41:32 +0100 Subject: Reduce bootstrap-grid.css content --- scss/_root.scss | 4 ---- 1 file changed, 4 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index a37832222..901a6a84d 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -121,10 +121,6 @@ --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg); // scss-docs-end form-control-vars - @each $name, $value in $grid-breakpoints { - --#{$prefix}breakpoint-#{$name}: #{$value}; - } - // Focus styles // scss-docs-start root-focus-variables --#{$prefix}focus-ring-width: #{$focus-ring-width}; -- cgit v1.2.3 From 47580ff9ba0faa7fca7ed69b8219e9bcda17d922 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 11 Jan 2023 15:36:00 +0100 Subject: Drop duplicate `--bs-body-bg-rgb` declaration + reorder props --- scss/_root.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 901a6a84d..a0efc0e65 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -36,8 +36,6 @@ --#{$prefix}white-rgb: #{to-rgb($white)}; --#{$prefix}black-rgb: #{to-rgb($black)}; - --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; - --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; // Fonts @@ -56,7 +54,14 @@ @include rfs($font-size-base, --#{$prefix}body-font-size); --#{$prefix}body-font-weight: #{$font-weight-base}; --#{$prefix}body-line-height: #{$line-height-base}; + @if $body-text-align != null { + --#{$prefix}body-text-align: #{$body-text-align}; + } + --#{$prefix}body-color: #{$body-color}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; + --#{$prefix}body-bg: #{$body-bg}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; --#{$prefix}emphasis-color: #{$body-emphasis-color}; --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)}; @@ -70,12 +75,6 @@ --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)}; --#{$prefix}tertiary-bg: #{$body-tertiary-bg}; --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; - - @if $body-text-align != null { - --#{$prefix}body-text-align: #{$body-text-align}; - } - --#{$prefix}body-bg: #{$body-bg}; - --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; // scss-docs-end root-body-variables @if $headings-color != null { -- cgit v1.2.3 From 60714e32c76c23c407c291e9bdebcdf211d45222 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Thu, 12 Jan 2023 06:06:18 +0100 Subject: Add theme maps specific to dark mode (#37843) * Add theme maps specific to dark mode * Fix CSS building * Fix other failing test Co-authored-by: Mark Otto --- scss/_root.scss | 37 +++++++++++-------------------------- 1 file changed, 11 insertions(+), 26 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index a0efc0e65..f9de30195 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -153,32 +153,17 @@ --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; - --#{$prefix}primary-text: #{$primary-text-dark}; - --#{$prefix}secondary-text: #{$secondary-text-dark}; - --#{$prefix}success-text: #{$success-text-dark}; - --#{$prefix}info-text: #{$info-text-dark}; - --#{$prefix}warning-text: #{$warning-text-dark}; - --#{$prefix}danger-text: #{$danger-text-dark}; - --#{$prefix}light-text: #{$light-text-dark}; - --#{$prefix}dark-text: #{$dark-text-dark}; - - --#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark}; - --#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark}; - --#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark}; - --#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark}; - --#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark}; - --#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark}; - --#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark}; - --#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark}; - - --#{$prefix}primary-border-subtle: #{$primary-border-subtle-dark}; - --#{$prefix}secondary-border-subtle: #{$secondary-border-subtle-dark}; - --#{$prefix}success-border-subtle: #{$success-border-subtle-dark}; - --#{$prefix}info-border-subtle: #{$info-border-subtle-dark}; - --#{$prefix}warning-border-subtle: #{$warning-border-subtle-dark}; - --#{$prefix}danger-border-subtle: #{$danger-border-subtle-dark}; - --#{$prefix}light-border-subtle: #{$light-border-subtle-dark}; - --#{$prefix}dark-border-subtle: #{$dark-border-subtle-dark}; + @each $color, $value in $theme-colors-text-dark { + --#{$prefix}#{$color}-text: #{$value}; + } + + @each $color, $value in $theme-colors-bg-subtle-dark { + --#{$prefix}#{$color}-bg-subtle: #{$value}; + } + + @each $color, $value in $theme-colors-border-subtle-dark { + --#{$prefix}#{$color}-border-subtle: #{$value}; + } @if $headings-color-dark != null { --#{$prefix}heading-color: #{$headings-color-dark}; -- cgit v1.2.3 From ca88999448f81b4c62b317f38c38dff74340fb1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 16 Jan 2023 15:56:23 -0800 Subject: Fix `.form-control` in dark mode (#37893) * Fix .form-control in dark mode * Remove CSS vars from docs --- scss/_root.scss | 5 ----- 1 file changed, 5 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index f9de30195..7841a153e 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -115,11 +115,6 @@ --#{$prefix}box-shadow-lg: #{$box-shadow-lg}; --#{$prefix}box-shadow-inset: #{$box-shadow-inset}; - // scss-docs-start form-control-vars - --#{$prefix}form-control-bg: var(--#{$prefix}body-bg); - --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg); - // scss-docs-end form-control-vars - // Focus styles // scss-docs-start root-focus-variables --#{$prefix}focus-ring-width: #{$focus-ring-width}; -- cgit v1.2.3 From 15744ee1d04bcca03155c3bb37ee7e65a7b011c6 Mon Sep 17 00:00:00 2001 From: louismaximepiton Date: Tue, 17 Jan 2023 16:09:52 +0100 Subject: Proposal to rename the CSS and Sass variables --- scss/_root.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 7841a153e..b82759a21 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -23,7 +23,7 @@ } @each $color, $value in $theme-colors-text { - --#{$prefix}#{$color}-text: #{$value}; + --#{$prefix}#{$color}-text-emphasis: #{$value}; } @each $color, $value in $theme-colors-bg-subtle { @@ -149,7 +149,7 @@ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; @each $color, $value in $theme-colors-text-dark { - --#{$prefix}#{$color}-text: #{$value}; + --#{$prefix}#{$color}-text-emphasis: #{$value}; } @each $color, $value in $theme-colors-bg-subtle-dark { -- cgit v1.2.3 From 8fddb9fe57ba4b9ee83aa35ec59cbe761c1e64d0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 Feb 2023 15:22:35 -0800 Subject: Update form validation styles to use new CSS variables for `color` and `border-color` (#38044) * Update form validation styles to use new CSS variables for color and border-color * Use better Sass variables --- scss/_root.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index b82759a21..2219ba032 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -123,6 +123,13 @@ // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); // scss-docs-end root-focus-variables + + // scss-docs-start root-form-validation-variables + --#{$prefix}form-valid-color: #{$form-valid-color}; + --#{$prefix}form-valid-border-color: #{$form-valid-border-color}; + --#{$prefix}form-invalid-color: #{$form-invalid-color}; + --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color}; + // scss-docs-end root-form-validation-variables } @if $enable-dark-mode { @@ -173,6 +180,11 @@ --#{$prefix}border-color: #{$border-color-dark}; --#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; + + --#{$prefix}form-valid-color: #{$form-valid-color-dark}; + --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark}; + --#{$prefix}form-invalid-color: #{$form-invalid-color-dark}; + --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark}; // scss-docs-end root-dark-mode-vars } } -- cgit v1.2.3 From 51299bf4e125c0222412d3a3159cf2f0ccb957f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Sat, 25 Feb 2023 08:01:20 +0100 Subject: Drop unused `--bs-focus-ring-box-shadow` and add documentation for `--bs-focus-ring-{x|y|blur}` (#38095) --- scss/_root.scss | 2 -- 1 file changed, 2 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index 2219ba032..e7cff7056 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -120,8 +120,6 @@ --#{$prefix}focus-ring-width: #{$focus-ring-width}; --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity}; --#{$prefix}focus-ring-color: #{$focus-ring-color}; - // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values - --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); // scss-docs-end root-focus-variables // scss-docs-start root-form-validation-variables -- cgit v1.2.3 From 0bea3f35c6e6decabf114d2d63d07c6501caa95f Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 21 Apr 2023 05:09:43 +0200 Subject: CSS: New var proposal + init `headings-color` (#37904) * Proposal * Revert opacity changes --------- Co-authored-by: Mark Otto --- scss/_root.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index e7cff7056..ab720a38e 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -77,9 +77,7 @@ --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; // scss-docs-end root-body-variables - @if $headings-color != null { - --#{$prefix}heading-color: #{$headings-color}; - } + --#{$prefix}heading-color: #{$headings-color}; --#{$prefix}link-color: #{$link-color}; --#{$prefix}link-color-rgb: #{to-rgb($link-color)}; @@ -165,9 +163,7 @@ --#{$prefix}#{$color}-border-subtle: #{$value}; } - @if $headings-color-dark != null { - --#{$prefix}heading-color: #{$headings-color-dark}; - } + --#{$prefix}heading-color: #{$headings-color-dark}; --#{$prefix}link-color: #{$link-color-dark}; --#{$prefix}link-hover-color: #{$link-hover-color-dark}; -- cgit v1.2.3 From bde23ae6612b71376e6cd906679425bd58d8db72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Wed, 13 Sep 2023 08:50:42 +0200 Subject: Allow `` colors customization for color modes (#39141) --- scss/_root.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'scss/_root.scss') diff --git a/scss/_root.scss b/scss/_root.scss index ab720a38e..becddf14a 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -91,6 +91,7 @@ } --#{$prefix}code-color: #{$code-color}; + --#{$prefix}highlight-color: #{$mark-color}; --#{$prefix}highlight-bg: #{$mark-bg}; // scss-docs-start root-border-var @@ -171,6 +172,8 @@ --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)}; --#{$prefix}code-color: #{$code-color-dark}; + --#{$prefix}highlight-color: #{$mark-color-dark}; + --#{$prefix}highlight-bg: #{$mark-bg-dark}; --#{$prefix}border-color: #{$border-color-dark}; --#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; -- cgit v1.2.3