Rename variant colors to use color names

microsoft · Feb 11, 2025 · 378b276 · 378b276
1 parent d66a89f
commit 378b276
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 32 deletions.
diff --git a/docfiles/themes/arcade-legacy.json b/docfiles/themes/arcade-legacy.json
@@ -54,13 +54,12 @@
         "pxt-neutral-stencil3": "#FFFFFF",
         "pxt-neutral-button-background": "#e0e1e2",
         "pxt-neutral-button-foreground": "#323130",
-        "pxt-variant-foreground1": "#9932cc",
-        "pxt-variant-foreground2": "#ff7f50",
-        "pxt-variant-foreground3": "#00ced1",
-        "pxt-variant-foreground4": "#663905",
-        "pxt-variant-foreground5": "#0000ff",
         "pxt-link": "#3977B4",
         "pxt-link-hover": "#204467",
+        "pxt-colors-purple-background1": "#9932cc",
+        "pxt-colors-orange-background1": "#ff7f50",
+        "pxt-colors-brown-background1": "#663905",
+        "pxt-colors-blue-background1": "#0000ff",
         "pxt-colors-green-background1": "#2ecc71",
         "pxt-colors-green-foreground": "#FFFFFF",
         "pxt-colors-green-hover": "#22be64",

diff --git a/docfiles/themes/arcade-light.json b/docfiles/themes/arcade-light.json
@@ -53,13 +53,12 @@
         "pxt-neutral-stencil3": "#FFFFFF",
         "pxt-neutral-button-background": "#e0e1e2",
         "pxt-neutral-button-foreground": "#323130",
-        "pxt-variant-foreground1": "#9932cc",
-        "pxt-variant-foreground2": "#ff7f50",
-        "pxt-variant-foreground3": "#00ced1",
-        "pxt-variant-foreground4": "#663905",
-        "pxt-variant-foreground5": "#0000ff",
         "pxt-link": "#3977B4",
         "pxt-link-hover": "#204467",
+        "pxt-colors-purple-background1": "#9932cc",
+        "pxt-colors-orange-background1": "#ff7f50",
+        "pxt-colors-brown-background1": "#663905",
+        "pxt-colors-blue-background1": "#0000ff",
         "pxt-colors-green-background1": "#2ecc71",
         "pxt-colors-green-foreground": "#FFFFFF",
         "pxt-colors-green-hover": "#22be64",

diff --git a/docfiles/themes/base-theme.css b/docfiles/themes/base-theme.css
@@ -49,13 +49,12 @@
     --pxt-neutral-stencil3: #FFFFFF;
     --pxt-neutral-button-background: #e0e1e2;
     --pxt-neutral-button-foreground: #333333;
-    --pxt-variant-foreground1: #9932cc;
-    --pxt-variant-foreground2: #ff7f50;
-    --pxt-variant-foreground3: #00ced1;
-    --pxt-variant-foreground4: #663905;
-    --pxt-variant-foreground5: #0000ff;
     --pxt-link: #666666;
     --pxt-link-hover: #333333;
+    --pxt-colors-purple-background1: #9932cc;
+    --pxt-colors-orange-background1: #ff7f50;
+    --pxt-colors-brown-background1: #663905;
+    --pxt-colors-blue-background1: #0000ff;
     --pxt-colors-green-background1: #2ecc71;
     --pxt-colors-green-foreground: #FFFFFF;
     --pxt-colors-green-hover: #22be64;

diff --git a/docfiles/themes/high-contrast.json b/docfiles/themes/high-contrast.json
@@ -53,13 +53,12 @@
         "pxt-neutral-stencil3": "#FFFFFF",
         "pxt-neutral-button-background": "#000000",
         "pxt-neutral-button-foreground": "#FFFFFF",
-        "pxt-variant-foreground1": "#FFFFFF",
-        "pxt-variant-foreground2": "#FFFFFF",
-        "pxt-variant-foreground3": "#FFFFFF",
-        "pxt-variant-foreground4": "#FFFFFF",
-        "pxt-variant-foreground5": "#FFFFFF",
         "pxt-link": "#807FFF",
         "pxt-link-hover": "#1b19ff",
+        "pxt-colors-purple-background1": "#FF00FF",
+        "pxt-colors-orange-background1": "#FF7F00",
+        "pxt-colors-brown-background1": "##d1b7a3",
+        "pxt-colors-blue-background1": "#8C8CFF",
         "pxt-colors-green-background1": "#00FF00",
         "pxt-colors-green-foreground": "#000000",
         "pxt-colors-green-hover": "#00FF00",

diff --git a/docfiles/themes/microbit-light.json b/docfiles/themes/microbit-light.json
@@ -55,13 +55,12 @@
         "pxt-neutral-stencil3": "#FFFFFF",
         "pxt-neutral-button-background": "#e0e1e2",
         "pxt-neutral-button-foreground": "#323130",
-        "pxt-variant-foreground1": "#9932cc",
-        "pxt-variant-foreground2": "#ff7f50",
-        "pxt-variant-foreground3": "#00ced1",
-        "pxt-variant-foreground4": "#663905",
-        "pxt-variant-foreground5": "#0000ff",
         "pxt-link": "#3977B4",
         "pxt-link-hover": "#204467",
+        "pxt-colors-purple-background1": "#9932cc",
+        "pxt-colors-orange-background1": "#ff7f50",
+        "pxt-colors-brown-background1": "#663905",
+        "pxt-colors-blue-background1": "#0000ff",
         "pxt-colors-green-background1": "#107c10",
         "pxt-colors-green-foreground": "#FFFFFF",
         "pxt-colors-green-hover": "#096a09",

diff --git a/theme/debugger.less b/theme/debugger.less
@@ -69,7 +69,7 @@
     white-space: pre;
 }
 .ui.item.dbg-btn .icon.blue {
-    color: var(--pxt-variant-foreground5) !important;
+    color: var(--pxt-colors-blue-background1) !important;
 }
 
 .ui.item.dbg-btn .icon.red {

diff --git a/theme/soundeffecteditor.less b/theme/soundeffecteditor.less
@@ -12,7 +12,7 @@
 @soundPreviewStaticWaveColor: @soundPreviewBaselineColor;
 @soundPreviewAnimatedWaveColor: @soundEffectHeaderColor;
 
-@soundGalleryBackgroundColor: var(--pxt-variant-foreground1);
+@soundGalleryBackgroundColor: var(--pxt-colors-purple-background1);
 @soundGalleryWaveColor: @soundEffectHeaderColor;
 
 

diff --git a/theme/themes/pxt/globals/site.variables b/theme/themes/pxt/globals/site.variables
@@ -369,11 +369,11 @@
     Debugger
 -------------------*/
 // TODO: Chance this for the color we want for variables in the debugger.
-@debugNumberVariable: var(--pxt-variant-foreground1);
-@debugStringVariable: var(--pxt-variant-foreground2);
-@debugBooleanVariable: var(--pxt-variant-foreground3);
-@debugArrayVariable: var(--pxt-variant-foreground4);
-@debugSpriteVariable: var(--pxt-variant-foreground5);
+@debugNumberVariable: var(--pxt-colors-purple-background1);
+@debugStringVariable: var(--pxt-colors-orange-background1);
+@debugBooleanVariable: var(--pxt-colors-green-background1);
+@debugArrayVariable: var(--pxt-colors-brown-background1);
+@debugSpriteVariable: var(--pxt-colors-blue-background1);
 
 // @debugVariableOdd: var(--pxt-neutral-background1);
 // @debugVariableEven: var(--pxt-neutral-background3);