primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

Updating the mixins that register the color modes

Browse Source
This commit is contained in:
Jon Rohan 2021-03-02 21:38:25 -08:00
parent ebdc346ecb
commit b417b4984f
No known key found for this signature in database
GPG Key ID: B0BBE304A9A0AECB
2 changed files with 21 additions and 33 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, true) {
@include color-mode-theme(light, light, true) {
@include primer-colors-light;
}
@include color-mode-theme(dark) {
@include color-mode-theme(dark, dark) {
@include primer-colors-dark;
}
@include color-mode-theme(dark_dimmed) {
@include color-mode-theme(dark_dimmed, dark) {
@include primer-colors-dark_dimmed;
}

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

@ -1,53 +1,41 @@
@mixin color-mode-theme($theme-name, $include-root: false) {
@mixin color-mode-theme($theme-name, $type, $include-root: false) {
@if $include-root {
:root {
:root,
[data-color-mode="#{$type}"][data-#{$type}-theme="#{$theme-name}"] {
@content;
}
} @else {
[data-color-mode="#{$type}"][data-#{$type}-theme="#{$theme-name}"] {
@content;
}
}
[data-color-mode="#{$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-light-theme="#{$theme-name}"] {
@media (prefers-color-scheme: light) {
@media (prefers-color-scheme: light) {
[data-color-mode="auto"][data-light-theme="#{$theme-name}"] {
@content;
}
}
[data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
@media (prefers-color-scheme: dark) {
@media (prefers-color-scheme: dark) {
[data-color-mode="auto"][data-dark-theme="#{$theme-name}"] {
@content;
}
}
}
// Allows CSS to be scoped to a specific color mode
@mixin color-mode($mode) {
@if $mode == light {
:root,
[data-color-mode="light"] {
[data-color-mode="#{$mode}"][data-#{$mode}-theme*="#{$mode}"] {
@content;
}
@media (prefers-color-scheme: light) {
[data-color-mode="auto"][data-light-theme*="#{$mode}"] {
@content;
}
[data-color-mode="auto"] {
@media (prefers-color-scheme: light) {
@content;
}
}
}
@else if $mode == dark {
[data-color-mode="dark"] {
@media (prefers-color-scheme: dark) {
[data-color-mode="auto"][data-dark-theme*="#{$mode}"] {
@content;
}
[data-color-mode="auto"] {
@media (prefers-color-scheme: dark) {
@content;
}
}
}
}