primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-02 07:53:06 +03:00
Code Issues Projects Releases Wiki Activity

Simplify color mode theme definition

Browse Source
This commit is contained in:
Michelle Tilley 2020-12-15 12:18:19 -08:00
parent 3e14f371bc
commit 29169b4d17
No known key found for this signature in database
GPG Key ID: 810E3A96D4CF00F4
2 changed files with 10 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/base/modes.scss
View File

@ -9,15 +9,15 @@
// Outputs the CSS variables
// Use :root (html element) to define a default
@include color-mode-theme(light, light, true) {
@include color-mode-theme(light, true) {
@include primer-colors-light;
}
@include color-mode-theme(dark, dark) {
@include color-mode-theme(dark) {
@include primer-colors-dark;
}
@include color-mode-theme(dark, dimmed) {
@include color-mode-theme(dimmed) {
@include primer-colors-dimmed;
}

25
src/support/mixins/color-modes.scss
View File

@ -1,6 +1,4 @@
@mixin color-mode-theme($base-mode, $theme-name, $include-root: false) {
$opposite: opposite-color-mode($base-mode);
@mixin color-mode-theme($theme-name, $include-root: false) {
@if $include-root {
:root {
@content;
@ -8,33 +6,24 @@
}
[data-color-mode="#{$theme-name}"],
[data-color-mode="#{$base-mode}"][data-#{$base-mode}-theme="#{$theme-name}"],
[data-color-mode="#{$opposite}"][data-#{$opposite}-theme="#{$theme-name}"] {
[data-color-mode="light"][data-light-theme="#{$theme-name}"],
[data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
@content;
}
[data-color-mode="auto"][data-#{$base-mode}-theme="#{$theme-name}"] {
@media (prefers-color-scheme: #{$base-mode}) {
[data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
@media (prefers-color-scheme: light) {
@content;
}
}
[data-color-mode="auto"][data-#{$opposite}-theme="#{$theme-name}"] {
@media (prefers-color-scheme: #{$opposite}) {
[data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
@media (prefers-color-scheme: dark) {
@content;
}
}
}
@function opposite-color-mode($mode) {
@if $mode == light {
@return dark;
}
@else {
@return light;
}
}
// Allows CSS to be scoped to a specific color mode
@mixin color-mode($mode) {
@if $mode == light {