From b615c45420d68e0741f9564bf3a0c50f8577ac82 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= <juderamond@gmail.com> Date: Wed, 8 Feb 2023 20:56:16 +0100 Subject: [PATCH] Combine :host to :root so that Web Components can access CSS vars --- scss/_grid.scss | 3 ++- scss/_reboot.scss | 3 ++- scss/_root.scss | 1 + scss/_variables.scss | 2 +- scss/mixins/_color-mode.scss | 2 +- site/content/docs/5.3/customize/css-variables.md | 2 +- 6 files changed, 8 insertions(+), 5 deletions(-) diff --git a/scss/_grid.scss b/scss/_grid.scss index 048f8009a3..9c2e6270c5 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -2,7 +2,8 @@ // // Rows contain your columns. -:root { +:root, +:host { @each $name, $value in $grid-breakpoints { --#{$prefix}breakpoint-#{$name}: #{$value}; } diff --git a/scss/_reboot.scss b/scss/_reboot.scss index 305740587b..f83bfba9c1 100644 --- a/scss/_reboot.scss +++ b/scss/_reboot.scss @@ -25,7 +25,8 @@ // Ability to the value of the root font sizes, affecting the value of `rem`. // null by default, thus nothing is generated. -:root { +:root, +:host { @if $font-size-root != null { @include font-size(var(--#{$prefix}root-font-size)); } diff --git a/scss/_root.scss b/scss/_root.scss index b82759a210..a10221a31e 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -1,4 +1,5 @@ :root, +:host, [data-bs-theme="light"] { // Note: Custom variable values only support SassScript inside `#{}`. diff --git a/scss/_variables.scss b/scss/_variables.scss index 6f255d4042..db05cc44f5 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -387,7 +387,7 @@ $enable-important-utilities: true !default; $enable-dark-mode: true !default; $color-mode-type: data !default; // `data` or `media-query` -// Prefix for :root CSS variables +// Prefix for ':root, :host' CSS variables $variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix` $prefix: $variable-prefix !default; diff --git a/scss/mixins/_color-mode.scss b/scss/mixins/_color-mode.scss index 03338b0256..822dbec1a7 100644 --- a/scss/mixins/_color-mode.scss +++ b/scss/mixins/_color-mode.scss @@ -3,7 +3,7 @@ @if $color-mode-type == "media-query" { @if $root == true { @media (prefers-color-scheme: $mode) { - :root { + :root, :host { @content; } } diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md index ffb40c0c4a..f746660150 100644 --- a/site/content/docs/5.3/customize/css-variables.md +++ b/site/content/docs/5.3/customize/css-variables.md @@ -21,7 +21,7 @@ These CSS variables are available everywhere, regardless of color mode. ```css {{< root.inline >}} {{- $css := readFile "dist/css/bootstrap.css" -}} -{{- $match := findRE `:root,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}} +{{- $match := findRE `:root,\n:host,\n\[data-bs-theme=light\] {([^}]*)}` $css 1 -}} {{- if (eq (len $match) 0) -}} {{- errorf "Got no matches for :root in %q!" $.Page.Path -}} -- GitLab