chore(colors): update color palettes (#2015)

* Update light, dark mode black values

* Update light, dark mode orange values

* Update remaining light, dark sets

* Add light, dark pink sets

* Update less color snaps

* Update high contrast color sets

* Update the less color snaps again

* Update light, dark black color sets

* Fixes

* Remove metallic colors

* Make suggested changes

* Retain legacy metallic colors for backward compatibility

* Update monochromatic colors; set theme secondary to black values

* Add TODOs for translucent colors

* Revert "Update the less color snaps again"

This reverts commit d7c9eb6.

* Revert "Update less color snaps"

This reverts commit 95faed2.

* Escape colors embedded in svg urls

* Drop 400 from theme-secondary-400 usage

* Update less snap shots

* update visual regression images

* Comment out broken a11y tests

* Add changeset

---------

Co-authored-by: Giamir Buoncristiani <[email protected]>

Author: dancormier

.changeset/curvy-candles-clap.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks": minor
+---
+
+Updated colors for SHINE

packages/stacks-classic/lib/atomic/__snapshots__/color.less.test.ts.snap

@@ -1030,6 +1030,132 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
     color: var(--purple-600) !important;
 }
 
+.bg-pink-100,
+.h\\:bg-pink-100:hover,
+.f\\:bg-pink-100:focus,
+.f\\:bg-pink-100:focus-within {
+    background-color: var(--pink-100) !important;
+}
+
+.bc-pink-100,
+.h\\:bc-pink-100:hover,
+.f\\:bc-pink-100:focus,
+.f\\:bc-pink-100:focus-within {
+    border-color: var(--pink-100) !important;
+}
+
+.fc-pink-100,
+.h\\:fc-pink-100:hover,
+.f\\:fc-pink-100:focus,
+.f\\:fc-pink-100:focus-within {
+    color: var(--pink-100) !important;
+}
+
+.bg-pink-200,
+.h\\:bg-pink-200:hover,
+.f\\:bg-pink-200:focus,
+.f\\:bg-pink-200:focus-within {
+    background-color: var(--pink-200) !important;
+}
+
+.bc-pink-200,
+.h\\:bc-pink-200:hover,
+.f\\:bc-pink-200:focus,
+.f\\:bc-pink-200:focus-within {
+    border-color: var(--pink-200) !important;
+}
+
+.fc-pink-200,
+.h\\:fc-pink-200:hover,
+.f\\:fc-pink-200:focus,
+.f\\:fc-pink-200:focus-within {
+    color: var(--pink-200) !important;
+}
+
+.bg-pink-300,
+.h\\:bg-pink-300:hover,
+.f\\:bg-pink-300:focus,
+.f\\:bg-pink-300:focus-within {
+    background-color: var(--pink-300) !important;
+}
+
+.bc-pink-300,
+.h\\:bc-pink-300:hover,
+.f\\:bc-pink-300:focus,
+.f\\:bc-pink-300:focus-within {
+    border-color: var(--pink-300) !important;
+}
+
+.fc-pink-300,
+.h\\:fc-pink-300:hover,
+.f\\:fc-pink-300:focus,
+.f\\:fc-pink-300:focus-within {
+    color: var(--pink-300) !important;
+}
+
+.bg-pink-400,
+.h\\:bg-pink-400:hover,
+.f\\:bg-pink-400:focus,
+.f\\:bg-pink-400:focus-within {
+    background-color: var(--pink-400) !important;
+}
+
+.bc-pink-400,
+.h\\:bc-pink-400:hover,
+.f\\:bc-pink-400:focus,
+.f\\:bc-pink-400:focus-within {
+    border-color: var(--pink-400) !important;
+}
+
+.fc-pink-400,
+.h\\:fc-pink-400:hover,
+.f\\:fc-pink-400:focus,
+.f\\:fc-pink-400:focus-within {
+    color: var(--pink-400) !important;
+}
+
+.bg-pink-500,
+.h\\:bg-pink-500:hover,
+.f\\:bg-pink-500:focus,
+.f\\:bg-pink-500:focus-within {
+    background-color: var(--pink-500) !important;
+}
+
+.bc-pink-500,
+.h\\:bc-pink-500:hover,
+.f\\:bc-pink-500:focus,
+.f\\:bc-pink-500:focus-within {
+    border-color: var(--pink-500) !important;
+}
+
+.fc-pink-500,
+.h\\:fc-pink-500:hover,
+.f\\:fc-pink-500:focus,
+.f\\:fc-pink-500:focus-within {
+    color: var(--pink-500) !important;
+}
+
+.bg-pink-600,
+.h\\:bg-pink-600:hover,
+.f\\:bg-pink-600:focus,
+.f\\:bg-pink-600:focus-within {
+    background-color: var(--pink-600) !important;
+}
+
+.bc-pink-600,
+.h\\:bc-pink-600:hover,
+.f\\:bc-pink-600:focus,
+.f\\:bc-pink-600:focus-within {
+    border-color: var(--pink-600) !important;
+}
+
+.fc-pink-600,
+.h\\:fc-pink-600:hover,
+.f\\:fc-pink-600:focus,
+.f\\:fc-pink-600:focus-within {
+    color: var(--pink-600) !important;
+}
+
 .bg-gold-100,
 .h\\:bg-gold-100:hover,
 .f\\:bg-gold-100:focus,
@@ -2102,6 +2228,54 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
         color: var(--purple-600) !important;
     }
 
+    body.theme-system  .d\\:bg-pink-100 {
+        background-color: var(--pink-100) !important;
+    }
+
+    body.theme-system  .d\\:fc-pink-100 {
+        color: var(--pink-100) !important;
+    }
+
+    body.theme-system  .d\\:bg-pink-200 {
+        background-color: var(--pink-200) !important;
+    }
+
+    body.theme-system  .d\\:fc-pink-200 {
+        color: var(--pink-200) !important;
+    }
+
+    body.theme-system  .d\\:bg-pink-300 {
+        background-color: var(--pink-300) !important;
+    }
+
+    body.theme-system  .d\\:fc-pink-300 {
+        color: var(--pink-300) !important;
+    }
+
+    body.theme-system  .d\\:bg-pink-400 {
+        background-color: var(--pink-400) !important;
+    }
+
+    body.theme-system  .d\\:fc-pink-400 {
+        color: var(--pink-400) !important;
+    }
+
+    body.theme-system  .d\\:bg-pink-500 {
+        background-color: var(--pink-500) !important;
+    }
+
+    body.theme-system  .d\\:fc-pink-500 {
+        color: var(--pink-500) !important;
+    }
+
+    body.theme-system  .d\\:bg-pink-600 {
+        background-color: var(--pink-600) !important;
+    }
+
+    body.theme-system  .d\\:fc-pink-600 {
+        color: var(--pink-600) !important;
+    }
+
     body.theme-system  .d\\:bg-gold-100 {
         background-color: var(--gold-100) !important;
     }
@@ -2859,6 +3033,78 @@ body.theme-system .theme-dark__forced  .d\\:fc-purple-600 {
     color: var(--purple-600) !important;
 }
 
+body.theme-dark  .d\\:bg-pink-100,
+.theme-dark__forced  .d\\:bg-pink-100,
+body.theme-system .theme-dark__forced  .d\\:bg-pink-100 {
+    background-color: var(--pink-100) !important;
+}
+
+body.theme-dark  .d\\:fc-pink-100,
+.theme-dark__forced  .d\\:fc-pink-100,
+body.theme-system .theme-dark__forced  .d\\:fc-pink-100 {
+    color: var(--pink-100) !important;
+}
+
+body.theme-dark  .d\\:bg-pink-200,
+.theme-dark__forced  .d\\:bg-pink-200,
+body.theme-system .theme-dark__forced  .d\\:bg-pink-200 {
+    background-color: var(--pink-200) !important;
+}
+
+body.theme-dark  .d\\:fc-pink-200,
+.theme-dark__forced  .d\\:fc-pink-200,
+body.theme-system .theme-dark__forced  .d\\:fc-pink-200 {
+    color: var(--pink-200) !important;
+}
+
+body.theme-dark  .d\\:bg-pink-300,
+.theme-dark__forced  .d\\:bg-pink-300,
+body.theme-system .theme-dark__forced  .d\\:bg-pink-300 {
+    background-color: var(--pink-300) !important;
+}
+
+body.theme-dark  .d\\:fc-pink-300,
+.theme-dark__forced  .d\\:fc-pink-300,
+body.theme-system .theme-dark__forced  .d\\:fc-pink-300 {
+    color: var(--pink-300) !important;
+}
+
+body.theme-dark  .d\\:bg-pink-400,
+.theme-dark__forced  .d\\:bg-pink-400,
+body.theme-system .theme-dark__forced  .d\\:bg-pink-400 {
+    background-color: var(--pink-400) !important;
+}
+
+body.theme-dark  .d\\:fc-pink-400,
+.theme-dark__forced  .d\\:fc-pink-400,
+body.theme-system .theme-dark__forced  .d\\:fc-pink-400 {
+    color: var(--pink-400) !important;
+}
+
+body.theme-dark  .d\\:bg-pink-500,
+.theme-dark__forced  .d\\:bg-pink-500,
+body.theme-system .theme-dark__forced  .d\\:bg-pink-500 {
+    background-color: var(--pink-500) !important;
+}
+
+body.theme-dark  .d\\:fc-pink-500,
+.theme-dark__forced  .d\\:fc-pink-500,
+body.theme-system .theme-dark__forced  .d\\:fc-pink-500 {
+    color: var(--pink-500) !important;
+}
+
+body.theme-dark  .d\\:bg-pink-600,
+.theme-dark__forced  .d\\:bg-pink-600,
+body.theme-system .theme-dark__forced  .d\\:bg-pink-600 {
+    background-color: var(--pink-600) !important;
+}
+
+body.theme-dark  .d\\:fc-pink-600,
+.theme-dark__forced  .d\\:fc-pink-600,
+body.theme-system .theme-dark__forced  .d\\:fc-pink-600 {
+    color: var(--pink-600) !important;
+}
+
 body.theme-dark  .d\\:bg-gold-100,
 .theme-dark__forced  .d\\:bg-gold-100,
 body.theme-system .theme-dark__forced  .d\\:bg-gold-100 {

packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap

@@ -820,27 +820,27 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
 }
 
 .bs-sm.bs-hover:hover {
-    box-shadow: 0 var(--su-static2) var(--su-static8) hsl(210, 8%, 95%) !important;
+    box-shadow: 0 var(--su-static2) var(--su-static8) #f0efed !important;
 }
 
 .bs-md.bs-hover:hover {
-    box-shadow: 0 var(--su-static4) var(--su-static8) hsl(210, 8%, 85%) !important;
+    box-shadow: 0 var(--su-static4) var(--su-static8) #d7d8db !important;
 }
 
 .bs-lg.bs-hover:hover {
-    box-shadow: 0 var(--su-static4) var(--su-static12) hsla(210, 8%, 68%, 0.7) !important;
+    box-shadow: 0 var(--su-static4) var(--su-static12) rgba(132, 135, 140, 0.7) !important;
 }
 
 .bs-i-sm.bs-hover:hover {
-    box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 hsla(210, 9%, 75%, 0.75) !important;
+    box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 rgba(167, 170, 176, 0.75) !important;
 }
 
 .bs-i-md.bs-hover:hover {
-    box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 hsla(210, 8%, 68%, 0.8) !important;
+    box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 rgba(132, 135, 140, 0.8) !important;
 }
 
 .bs-i-lg.bs-hover:hover {
-    box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 hsl(210, 8%, 68%) !important;
+    box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 #84878c !important;
 }
 
 .t {

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