dark mode colors

mdn · Feb 21, 2024 · d7aef7e · d7aef7e
1 parent 03a623c
commit d7aef7e
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 54 deletions.
diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss
@@ -13,10 +13,7 @@
     --cur-bg-color-list-item-header: var(
       --cur-bg-color-list-item-topic-standards
     );
-    --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-standards);
-    --cur-bg-color-list-item-icon: var(
-      --cur-bg-color-list-item-icon-topic-standards
-    );
+    --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-standards);
   }
 
   .topic-styling {
@@ -25,10 +22,7 @@
     --cur-bg-color-list-item-header: var(
       --cur-bg-color-list-item-topic-styling
     );
-    --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-styling);
-    --cur-bg-color-list-item-icon: var(
-      --cur-bg-color-list-item-icon-topic-styling
-    );
+    --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-styling);
   }
 
   .topic-scripting {
@@ -37,10 +31,7 @@
     --cur-bg-color-list-item-header: var(
       --cur-bg-color-list-item-topic-scripting
     );
-    --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-scripting);
-    --cur-bg-color-list-item-icon: var(
-      --cur-bg-color-list-item-icon-topic-scripting
-    );
+    --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-scripting);
   }
 
   .topic-tooling {
@@ -49,10 +40,7 @@
     --cur-bg-color-list-item-header: var(
       --cur-bg-color-list-item-topic-tooling
     );
-    --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-tooling);
-    --cur-bg-color-list-item-icon: var(
-      --cur-bg-color-list-item-icon-topic-tooling
-    );
+    --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-tooling);
   }
 
   .topic-practices {
@@ -61,10 +49,7 @@
     --cur-bg-color-list-item-header: var(
       --cur-bg-color-list-item-topic-practices
     );
-    --cur-color-list-item-icon: var(--cur-color-list-item-icon-topic-practices);
-    --cur-bg-color-list-item-icon: var(
-      --cur-bg-color-list-item-icon-topic-practices
-    );
+    --cur-bg-color-topic-icon: var(--cur-bg-color-topic-icon-topic-practices);
   }
 
   .curriculum-content {

diff --git a/client/src/curriculum/modules-list.scss b/client/src/curriculum/modules-list.scss
@@ -185,14 +185,6 @@
             svg.topic-icon {
               height: 4rem;
               width: 4rem;
-
-              circle {
-                fill: var(--cur-bg-color-list-item-icon);
-              }
-
-              path {
-                fill: var(--cur-color-list-item-icon);
-              }
             }
 
             > span {

diff --git a/client/src/curriculum/topic-icon.scss b/client/src/curriculum/topic-icon.scss
@@ -1,6 +1,6 @@
 svg.topic-icon {
   circle {
-    fill: var(--background-primary);
+    fill: var(--cur-bg-color-topic-icon);
   }
 
   path {

diff --git a/client/src/ui/base/_themes.scss b/client/src/ui/base/_themes.scss
@@ -230,16 +230,11 @@
   --cur-border-color-list-item: #f2f1f1;
   --cur-border-color-list-item-hover: rgba(227, 100, 42, 0.7);
   --cur-bg-color-list-item-body: #fff;
-  --cur-color-list-item-icon-topic-standards: #{$mdn-color-light-theme-red-60};
-  --cur-color-list-item-icon-topic-styling: #{$mdn-color-light-theme-blue-60};
-  --cur-color-list-item-icon-topic-scripting: #{$mdn-color-light-theme-yellow-60};
-  --cur-color-list-item-icon-topic-tooling: #{$mdn-color-light-theme-green-60};
-  --cur-color-list-item-icon-topic-practices: #{$mdn-color-light-theme-violet-60};
-  --cur-bg-color-list-item-icon-topic-standards: #fff;
-  --cur-bg-color-list-item-icon-topic-styling: #fff;
-  --cur-bg-color-list-item-icon-topic-scripting: #fff;
-  --cur-bg-color-list-item-icon-topic-tooling: #fff;
-  --cur-bg-color-list-item-icon-topic-practices: #fff;
+  --cur-bg-color-topic-icon-topic-standards: #fff;
+  --cur-bg-color-topic-icon-topic-styling: #fff;
+  --cur-bg-color-topic-icon-topic-scripting: #fff;
+  --cur-bg-color-topic-icon-topic-tooling: #fff;
+  --cur-bg-color-topic-icon-topic-practices: #fff;
   --cur-bg-color-list-item-topic-standards: #{$mdn-color-light-theme-red-50}30;
   --cur-bg-color-list-item-topic-styling: #{$mdn-color-light-theme-blue-50}30;
   --cur-bg-color-list-item-topic-scripting: #{$mdn-color-light-theme-yellow-50}30;
@@ -480,11 +475,11 @@
   --baseline-limited-cross: #ea8600;
 
   --cur-color: #e3642a;
-  --cur-color-topic-standards: #{$mdn-color-light-theme-red-30};
-  --cur-color-topic-styling: #{$mdn-color-light-theme-blue-30};
-  --cur-color-topic-scripting: #cfc23f;
-  --cur-color-topic-tooling: #55ab2d;
-  --cur-color-topic-practices: #ce93fa;
+  --cur-color-topic-standards: #f2919c;
+  --cur-color-topic-styling: #91a6f2;
+  --cur-color-topic-scripting: #f2cf8f;
+  --cur-color-topic-tooling: #8ff2a4;
+  --cur-color-topic-practices: #c891f2;
   --cur-bg-color: #664b33;
   --cur-bg-color-note: #332e2b;
   --cur-bg-large-color: #343434;
@@ -509,16 +504,11 @@
   --cur-bg-color-list-item-topic-scripting: #343434;
   --cur-bg-color-list-item-topic-tooling: #343434;
   --cur-bg-color-list-item-topic-practices: #343434;
-  --cur-color-list-item-icon-topic-standards: #f2919c;
-  --cur-color-list-item-icon-topic-styling: #91a6f2;
-  --cur-color-list-item-icon-topic-scripting: #f2cf8f;
-  --cur-color-list-item-icon-topic-tooling: #8ff2a4;
-  --cur-color-list-item-icon-topic-practices: #c891f2;
-  --cur-bg-color-list-item-icon-topic-standards: #804248;
-  --cur-bg-color-list-item-icon-topic-styling: #425080;
-  --cur-bg-color-list-item-icon-topic-scripting: #806a42;
-  --cur-bg-color-list-item-icon-topic-tooling: #428050;
-  --cur-bg-color-list-item-icon-topic-practices: #584280;
+  --cur-bg-color-topic-icon-topic-standards: #804248;
+  --cur-bg-color-topic-icon-topic-styling: #425080;
+  --cur-bg-color-topic-icon-topic-scripting: #806a42;
+  --cur-bg-color-topic-icon-topic-tooling: #428050;
+  --cur-bg-color-topic-icon-topic-practices: #584280;
   --cur-shadow: 2px 2px 5px 0 rgba(36, 36, 36, 0.15),
     -2px 2px 8px 0 rgba(87, 87, 87, 0.15);
   --cur-shadow-landing-about-ul: 0 4px 10px 0 rgba(227, 100, 42, 0.06),