diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-06-24 12:44:36 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2023-06-24 12:44:36 +0000 |
commit | c1d5a801b4bc66e3866f815be00e11d1b20d3539 (patch) | |
tree | 394cfedf644640ac80b78aaddaff93ceb8eefa5e /scss/tests/mixins/_color-modes.test.scss | |
parent | Adding upstream version 5.2.3+dfsg. (diff) | |
download | bootstrap-html-c1d5a801b4bc66e3866f815be00e11d1b20d3539.tar.xz bootstrap-html-c1d5a801b4bc66e3866f815be00e11d1b20d3539.zip |
Adding upstream version 5.3.0+dfsg.upstream/5.3.0+dfsg
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'scss/tests/mixins/_color-modes.test.scss')
-rw-r--r-- | scss/tests/mixins/_color-modes.test.scss | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss new file mode 100644 index 0000000..9ecc628 --- /dev/null +++ b/scss/tests/mixins/_color-modes.test.scss @@ -0,0 +1,69 @@ +// stylelint-disable selector-attribute-quotes + +@import "../../functions"; +@import "../../variables"; +@import "../../variables-dark"; +@import "../../maps"; +@import "../../mixins"; + +@include describe("global $color-mode-type: data") { + @include it("generates data attribute selectors for dark mode") { + @include assert() { + @include output() { + @include color-mode(dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } + } + @include color-mode(dark, true) { + --custom-color: #{mix($indigo, $blue, 50%)}; + } + } + @include expect() { + [data-bs-theme=dark] .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } + [data-bs-theme=dark] { + --custom-color: #3a3ff8; + } + } + } + } +} + +@include describe("global $color-mode-type: media-query") { + @include it("generates media queries for dark mode") { + $color-mode-type: media-query !global; + + @include assert() { + @include output() { + @include color-mode(dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } + } + @include color-mode(dark, true) { + --custom-color: #{mix($indigo, $blue, 50%)}; + } + } + @include expect() { + @media (prefers-color-scheme: dark) { + .element { + color: var(--bs-primary-text-emphasis); + background-color: var(--bs-primary-bg-subtle); + } + } + @media (prefers-color-scheme: dark) { + :root { + --custom-color: #3a3ff8; + } + } + } + } + + $color-mode-type: data !global; + } +} |