diff options
Diffstat (limited to 'assets/scss/_primer/support/mixins/color-modes.scss')
-rw-r--r-- | assets/scss/_primer/support/mixins/color-modes.scss | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/assets/scss/_primer/support/mixins/color-modes.scss b/assets/scss/_primer/support/mixins/color-modes.scss new file mode 100644 index 0000000..e4ad958 --- /dev/null +++ b/assets/scss/_primer/support/mixins/color-modes.scss @@ -0,0 +1,106 @@ +@mixin color-mode-theme($theme-name, $include-root: false) { + @if $include-root { + :root, + [data-color-mode="light"][data-light-theme="#{$theme-name}"], + [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] { + @content; + + /*! */ // This is a fix for a cssstats bug see https://github.com/cssstats/cssstats/issues/331 + } + } + @else { + [data-color-mode="light"][data-light-theme="#{$theme-name}"], + [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] { + @content; + } + } + + @media (prefers-color-scheme: light) { + [data-color-mode="auto"][data-light-theme="#{$theme-name}"] { + @content; + } + } + + @media (prefers-color-scheme: dark) { + [data-color-mode="auto"][data-dark-theme="#{$theme-name}"] { + @content; + } + } +} + +@mixin color-mode($mode) { + @if $mode == light { + :root, + [data-color-mode="light"][data-light-theme*="#{$mode}"], + [data-color-mode="dark"][data-dark-theme*="#{$mode}"] { + @content; + } + } + @else { + [data-color-mode="light"][data-light-theme*="#{$mode}"], + [data-color-mode="dark"][data-dark-theme*="#{$mode}"] { + @content; + } + } + + @media (prefers-color-scheme: light) { + [data-color-mode="auto"][data-light-theme*="#{$mode}"] { + @content; + } + } + + @media (prefers-color-scheme: dark) { + [data-color-mode="auto"][data-dark-theme*="#{$mode}"] { + @content; + } + } +} + +// This mixin takes a map of color mode vars and splits them into dark and light mode +// The goal is to reduce the amount of dark/light mode selectors compiled. +// +// Example input for $color-map +// +// @include color-variables(("custom-css-variable-1": ( +// light: var(--color-scale-gray-3), +// dark: var(--color-scale-gray-5) +// ), +// "custom-css-variable-2": ( +// light: var(--color-scale-gray-2), +// dark: var(--color-scale-gray-6) +// ), +// "custom-css-variable-3": ( +// light: var(--color-scale-gray-2), +// dark: var(--color-scale-gray-6) +// ) +// )); +@mixin color-variables($color-map) { + // Create map to store incoming variables + $dark-colors: (); + $light-colors: (); + + @each $name, $value in $color-map { + @each $type, $color in $value { + @if $type == dark { + $dark-colors: append($dark-colors, (--color-#{$name}, #{$color})); + } + @else { + $light-colors: append($light-colors, (--color-#{$name}, #{$color})); + } + } + } + + $mode-colors: ( + dark: $dark-colors, + light: $light-colors + ); + + // Loop through sorted list + @each $mode, $variables in $mode-colors { + @include color-mode($mode) { + @each $prop, $val in $variables { + #{$prop}: $val; + } + } + } +} |