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

Fix for color-mode-theme mixin

Author: jonrohan

.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.

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;
 }
 

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;
     }
   }