From b417b4984f1bf01c8b004ebdf995aa345b4d6dc7 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 2 Mar 2021 21:38:25 -0800
Subject: [PATCH] Updating the mixins that register the color modes

---
 src/base/modes.scss                 |  6 ++--
 src/support/mixins/color-modes.scss | 48 +++++++++++------------------
 2 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/src/base/modes.scss b/src/base/modes.scss
index 789eb170..4acaecfa 100644
--- 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, 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;
 }
 
diff --git a/src/support/mixins/color-modes.scss b/src/support/mixins/color-modes.scss
index 4965b488..a5d736dc 100644
--- a/src/support/mixins/color-modes.scss
+++ b/src/support/mixins/color-modes.scss
@@ -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;
-      }
-    }
   }
 }