chore(colors): update color palettes

packages/stacks-classic/lib/atomic/misc.less

@@ -297,7 +297,7 @@
 //  $  OUTLINE
 //  ----------------------------------------------------------------------------
 .outline-none { outline: 0 !important; }
-.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); }
+.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); } // TODO SHINE revisit this value once theme colors are finalized
 
 .f\:outline-ring {
     &:focus,

packages/stacks-classic/lib/components/activity-indicator/activity-indicator.less

@@ -1,5 +1,5 @@
 .s-activity-indicator {
-    --_ai-bg: var(--theme-secondary-400);
+    --_ai-bg: var(--pink-400);
     --_ai-fc: var(--white);
     --_ai-min-size: var(--su-static16);
     --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
@@ -27,7 +27,6 @@
 
     &&__warning {
         --_ai-bg: var(--yellow-400);
-        --_ai-fc: var(--_black-static);
 
         .highcontrast-mode({
             --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast

packages/stacks-classic/lib/components/anchor/anchor.less

@@ -28,7 +28,7 @@
     }
 
     &&__default {
-        --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
+        --_an-a-fc: var(--theme-link-color, var(--theme-secondary));
         --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
         --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
         --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));

packages/stacks-classic/lib/components/award-bling/award-bling.less

@@ -2,16 +2,17 @@
     --_ab-before-bg: unset;
 
     // VARIANTS
+    // TODO SHINE expect a conflict with the award-bling updates. Prefer the changes in https://github.com/StackExchange/Stacks/pull/2013.
     &&__gold {
-        --_ab-before-bg: var(--gold-300);
+        --_ab-before-bg: var(--yellow-300);
     }
 
     &&__silver {
-        --_ab-before-bg: var(--silver-300);
+        --_ab-before-bg: var(--blue-300);
     }
 
     &&__bronze {
-        --_ab-before-bg: var(--bronze-300);
+        --_ab-before-bg: var(--orange-300);
     }
 
     // CHILD ELEMENTS

packages/stacks-classic/lib/components/badge/badge.less

@@ -62,18 +62,18 @@
     }
 
     &&__gold {
-        --_ba-bc: var(--gold-300);
-        --_ba-bg: var(--gold-100);
+        --_ba-bc: var(--yellow-300);
+        --_ba-bg: var(--yellow-100);
     }
 
     &&__silver {
-        --_ba-bc: var(--silver-300);
-        --_ba-bg: var(--silver-100);
+        --_ba-bc: var(--blue-300);
+        --_ba-bg: var(--blue-100);
     }
 
     &&__bronze {
-        --_ba-bc: var(--bronze-300);
-        --_ba-bg: var(--bronze-100);
+        --_ba-bc: var(--orange-300);
+        --_ba-bg: var(--orange-100);
     }
 
     // Number counts

packages/stacks-classic/lib/components/checkbox_radio/checkbox_radio.less

@@ -48,21 +48,23 @@
     // Less variables for check svg fill color
     @ch-bg-image-fill: .set-white()[default];
     @ch-bg-image-fill-dark: .set-white-dark()[default];
+    @ch-bg-image-fill-esc: escape("@{ch-bg-image-fill}"); // color escaped for URL usage
+    @ch-bg-image-fill-dark-esc: escape("@{ch-bg-image-fill-dark}"); // color escaped for URL usage
 
     // CONTEXTUAL STYLES
     .dark-mode({
         &:checked {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark-esc}'/%3E%3C/svg%3E");
         }
         &:indeterminate {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark-esc}'/%3E%3C/svg%3E");
         }
     });
 
     .highcontrast-dark-mode({
         &:checked, &:indeterminate {
-            --_ch-bc: var(--blue-500) !important;
-            --_ch-bg: var(--blue-400);
+            --_ch-bc: var(--black) !important;
+            --_ch-bg: var(--black);
         }
     });
 
@@ -75,16 +77,16 @@
 
     // STATES
     &:checked, &:indeterminate {
-        --_ch-bc: var(--theme-secondary-400) !important;
-        --_ch-bg: var(--theme-secondary-400);
+        --_ch-bc: var(--theme-secondary) !important;
+        --_ch-bg: var(--theme-secondary);
     }
 
     &:checked {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-esc}'/%3E%3C/svg%3E");
     }
 
     &:indeterminate {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-esc}'/%3E%3C/svg%3E");
     }
 
     background-image: var(--_ch-bg-image);
@@ -100,15 +102,15 @@
     // CONTEXTUAL STYLES
     .highcontrast-dark-mode({
         &:checked {
-            --_ch-bc: var(--blue-400);
+            --_ch-bc: var(--black);
             outline: var(--su-static1) solid var(--black);
         }
     });
 
     // STATES
     &:checked {
         --_ch-baw: 0.30769231em;
-        --_ch-bc: var(--theme-secondary-400);
+        --_ch-bc: var(--theme-secondary);
         --_ch-bg: var(--white);
     }
 

packages/stacks-classic/lib/components/link-preview/link-preview.less

@@ -129,7 +129,7 @@
             color: var(--theme-link-color, var(--purple-500));
         }
 
-        color: var(--theme-link-color, var(--theme-secondary-400));
+        color: var(--theme-link-color, var(--theme-secondary));
         cursor: pointer;
         text-decoration: none;
     }

packages/stacks-classic/lib/components/link/link.less

@@ -26,7 +26,7 @@ a {
 
 a,
 .s-link {
-    --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
+    --_li-fc: var(--theme-link-color, var(--theme-secondary));
     --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
     --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
     --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));

packages/stacks-classic/lib/components/post-summary/post-summary.less

@@ -5,7 +5,7 @@
     --_ps-o: unset;
     // Child components
     --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
-    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400))));
+    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary))));
     --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))));
     --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500))));
     --_ps-content-title-a-fc-hover-visited: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600))));
@@ -119,7 +119,7 @@
         &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
             --_ps-bg: var(--yellow-100);
             --_ps-stats-fc: var(--black-400);
-            --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
+            --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary)));
             --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
             --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500)));
             --_ps-content-title-a-fc-hover-visited: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600)));

packages/stacks-classic/lib/components/progress-bar/progress-bar.less

@@ -23,23 +23,24 @@
         --_pr-bar-bg: var(--orange-400);
     }
 
+    // TODO SPARK I've changed metallic colors here to use their new non-metallic equivalents
     &&__bronze {
-        --_pr-bar-bg: var(--bronze-100);
-        --_pr-label-bc: var(--bronze-400);
+        --_pr-bar-bg: var(--orange-100);
+        --_pr-label-bc: var(--orange-400);
     }
 
     &&__gold {
-        --_pr-bar-bg: var(--gold-100);
-        --_pr-label-bc: var(--gold-400);
+        --_pr-bar-bg: var(--yellow-100);
+        --_pr-label-bc: var(--yellow-400);
     }
 
     &&__info {
         --_pr-bar-bg: var(--blue-400);
     }
 
     &&__silver {
-        --_pr-bar-bg: var(--silver-100);
-        --_pr-label-bc: var(--silver-400);
+        --_pr-bar-bg: var(--blue-100);
+        --_pr-label-bc: var(--blue-400);
     }
 
     // VARIANTS
@@ -161,16 +162,16 @@
                 &.is-active {
                     .s-progress {
                         &--bar.s-progress--bar__left {
-                            background: var(--theme-secondary-400);
+                            background: var(--theme-secondary);
                         }
 
                         &--label {
                             color: var(--fc-dark);
                         }
 
                         &--stop {
-                            background: var(--theme-secondary-400);
-                            box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);
+                            background: var(--theme-secondary);
+                            box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized
                         }
                     }
                 }
@@ -179,7 +180,7 @@
                     .s-progress {
                         &--bar,
                         &--stop {
-                            background: var(--theme-secondary-400);
+                            background: var(--theme-secondary);
                         }
 
                         &--label {

packages/stacks-classic/lib/components/toggle-switch/toggle-switch.less

@@ -1,14 +1,16 @@
 .s-toggle-switch {
     @ts-bg-image-fill: .set-white()[default];
     @ts-bg-image-fill-dark: .set-white-dark()[default];
+    @ts-bg-image-fill-esc: escape("@{ts-bg-image-fill}"); // color escaped for URL usage
+    @ts-bg-image-fill-dark-esc: escape("@{ts-bg-image-fill-dark}"); // color escaped for URL usage
     --_ts-bg: var(--black-350);
-    --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill}'/%3e%3c/svg%3e");
+    --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-esc}'/%3e%3c/svg%3e");
     --_ts-bg-ps: left center;
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-400);
 
     .dark-mode({
-        --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-dark}'/%3e%3c/svg%3e");
+        --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-dark-esc}'/%3e%3c/svg%3e");
     });
 
     fieldset[disabled] &,

packages/stacks-classic/lib/exports/color-mixins.less

@@ -261,19 +261,29 @@
 
     each(@tiers, .(@tier, @k, @i) {
         @stops: 100, 200, 300, 400, 500, 600;
-        @fallbackColor: if(@tier = primary, orange, blue);
+        @fallbackColor: if(@tier = primary, orange, black);
         @baseThemeVar: ~"--theme-@{tier}";
         @customThemeVar: if(@mode = light, ~"@{baseThemeVar}-custom", ~"--theme-dark-@{tier}-custom");
 
         & when (@mode = light), (@mode = dark) {
-            @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}-400))";
+            & when (@tier = primary) {
+                @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}-400))";
+            }
+            & when (@tier = secondary) {
+                @{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}))";
+            }
             each(@stops, .(@stop, @kStop, @iStop) {
                 @{baseThemeVar}-@{stop}: ~"var(@{customThemeVar}-@{stop}, var(--@{fallbackColor}-@{stop}))";
             });
         }
 
         & when (@mode = light-highcontrast), (@mode = dark-highcontrast) {
-            @{baseThemeVar}: ~"var(--@{fallbackColor}-400)";
+            & when (@tier = primary) {
+                @{baseThemeVar}: ~"var(--@{fallbackColor}-400)";
+            }
+            & when (@tier = secondary) {
+            @{baseThemeVar}: ~"var(--@{fallbackColor})";
+            }
 
             each(@stops, .(@stop, @kStop, @iStop) {
                 @{baseThemeVar}-@{stop}: ~"var(--@{fallbackColor}-@{stop})";