Merge pull request #1261 from primer/color-mode-mixin-fix

Fix for color-mode-theme mixin
primer · Mar 26, 2021 · b720816 · b720816 · vercel · Mar 26, 2021
2 parents a6408ac + 739412b
commit b720816
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/witty-donuts-rest.md b/.changeset/witty-donuts-rest.md
@@ -0,0 +1,5 @@
+---
+'@primer/css': patch
+---
+
+Fixing the `color-mode-theme` mixin. Currently the mixin doesn't take into account when `mode="light"` and `light-theme="dark"`. This fix allows dark themes to be set as light themes and to toggle into single light mode.
diff --git a/src/base/modes.scss b/src/base/modes.scss
@@ -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, dark) {
+@include color-mode-theme(dark_dimmed) {
   @include primer-colors-dark_dimmed;
 }
 

diff --git a/src/support/mixins/color-modes.scss b/src/support/mixins/color-modes.scss
@@ -1,12 +1,14 @@
-@mixin color-mode-theme($theme-name, $type, $include-root: false) {
+@mixin color-mode-theme($theme-name, $include-root: false) {
   @if $include-root {
     :root,
-    [data-color-mode="#{$type}"][data-#{$type}-theme="#{$theme-name}"] {
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
       @content;
     }
   }
   @else {
-    [data-color-mode="#{$type}"][data-#{$type}-theme="#{$theme-name}"] {
+    [data-color-mode="light"][data-light-theme="#{$theme-name}"],
+    [data-color-mode="dark"][data-dark-theme="#{$theme-name}"] {
       @content;
     }
   }