@stackoverflow/stacks 3.0.0-beta.1 → 3.0.0-beta.12

package/lib/exports/color-sets.less

@@ -11,283 +11,318 @@
 //
 // tl;dr: don't put inline after values in this file
 
+// Colors are based on the variables in Figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18798&p=f&vars=1&var-set-id=1713-5190&m=dev
+
 // White
 .set-white() {
-    default: hsl(0, 0%, 100%);
+    default: hsv(0, 0%, 100%);
 }
 .set-white-dark() {
-    default: hsl(210, 3%, 15%);
+    default: hsv(0, 0%, 8%);
 }
 .set-white-hc() {
-    default: hsl(0, 0%, 100%);
+    default: hsv(0, 0%, 100%);
 }
 .set-white-hc-dark() {
-    default: hsl(0, 0%, 0%);
+    default: hsv(0, 0%, 0%);
 }
 
 // Black
 .set-black() {
-    050: hsl(0, 0%, 100%);
-    100: hsl(210, 8%, 98%);
-    150: hsl(210, 8%, 95%);
-    200: hsl(210, 8%, 90%);
-    225: hsl(210, 8%, 85%);
-    250: hsl(210, 8%, 80%);
-    300: hsl(210, 9%, 75%);
-    350: hsl(210, 8%, 68%);
-    400: hsl(210, 8%, 42%);
-    500: hsl(210, 8%, 25%);
-    600: hsl(210, 8%, 5%);
-    default: hsl(0, 0%, 0%);
+    050: hsv(0, 0%, 100%);
+    100: hsv(30, 1%, 97%);
+    150: hsv(40, 1%, 94%);
+    200: hsv(216, 2%, 89%);
+    225: hsv(225, 2%, 86%);
+    250: hsv(218, 4%, 82%);
+    300: hsv(218, 5%, 69%);
+    350: hsv(218, 6%, 55%);
+    400: hsv(225, 7%, 45%);
+    500: hsv(223, 9%, 30%);
+    600: hsv(345, 13%, 13%);
+    default: hsv(0, 0%, 0%);
 }
 .set-black-dark() {
-    050: hsl(210, 3%, 15%);
-    100: hsl(210, 3%, 18%);
-    150: hsl(210, 4%, 21%);
-    200: hsl(210, 4%, 27%);
-    225: hsl(210, 4%, 30%);
-    250: hsl(210, 5%, 36%);
-    300: hsl(210, 4%, 47%);
-    350: hsl(210, 8%, 70%);
-    400: hsl(210, 8%, 80%);
-    500: hsl(210, 8%, 90%);
-    600: hsl(210, 11%, 98%);
-    default: hsl(0, 0%, 100%);
+    050: hsv(0, 0%, 8%);
+    100: hsv(0, 0%, 15%);
+    150: hsv(0, 0%, 20%);
+    200: hsv(0, 0%, 34%);
+    225: hsv(0, 0%, 40%);
+    250: hsv(0, 0%, 45%);
+    300: hsv(0, 0%, 55%);
+    350: hsv(0, 0%, 65%);
+    400: hsv(30, 5%, 85%);
+    500: hsv(27, 4%, 95%);
+    600: hsv(0, 0%, 100%);
+    default: hsv(0, 0%, 100%);
 }
 .set-black-hc() {
-    050: hsl(0, 0%, 100%);
-    100: hsl(210, 8%, 98%);
-    150: hsl(210, 8%, 95%);
-    200: hsl(210, 8%, 90%);
-    225: hsl(210, 8%, 85%);
-    250: hsl(210, 8%, 80%);
-    300: hsl(210, 9%, 75%);
-    350: hsl(210, 8%, 45%);
-    400: hsl(212, 8%, 35%);
-    500: hsl(210, 8%, 25%);
-    600: hsl(210, 8%, 5%);
-    default: hsl(0, 0%, 0%);
+    050: hsv(0, 0%, 100%);
+    100: hsv(30, 1%, 97%);
+    150: hsv(40, 1%, 94%);
+    200: hsv(216, 2%, 89%);
+    225: hsv(225, 2%, 86%);
+    250: hsv(218, 4%, 82%);
+    300: hsv(229, 7%, 61%);
+    350: hsv(214, 8%, 36%);
+    400: hsv(204, 6%, 35%);
+    500: hsv(223, 9%, 30%);
+    600: hsv(345, 13%, 13%);
+    default: hsv(0, 0%, 0%);
 }
-
 .set-black-hc-dark() {
-    050: hsl(210, 3%, 15%);
-    100: hsl(210, 3%, 18%);
-    150: hsl(210, 4%, 21%);
-    200: hsl(210, 4%, 27%);
-    225: hsl(210, 4%, 30%);
-    250: hsl(210, 5%, 36%);
-    300: hsl(210, 4%, 47%);
-    350: hsl(210, 10%, 74%);
-    400: hsl(210, 8%, 80%);
-    500: hsl(210, 8%, 90%);
-    600: hsl(210, 11%, 98%);
-    default: hsl(0, 0%, 100%);
+    050: hsv(0, 0%, 8%);
+    100: hsv(0, 0%, 15%);
+    150: hsv(0, 0%, 20%);
+    200: hsv(0, 0%, 34%);
+    225: hsv(0, 0%, 40%);
+    250: hsv(0, 0%, 45%);
+    300: hsv(0, 0%, 55%);
+    350: hsv(0, 0%, 65%);
+    400: hsv(30, 5%, 85%);
+    500: hsv(27, 4%, 95%);
+    600: hsv(0, 0%, 100%);
+    default: hsv(0, 0%, 100%);
 }
 
 // Orange
 .set-orange() {
-    100: hsl(23, 87%, 97%);
-    200: hsl(27, 87%, 87%);
-    300: hsl(27, 87%, 72%);
-    400: hsl(27, 89%, 48%);
-    500: hsl(27, 87%, 41%);
-    600: hsl(27, 87%, 27%);
+    100: hsv(23, 5%, 100%);
+    200: hsv(22, 26%, 100%);
+    300: hsv(22, 65%, 96%);
+    400: hsv(22, 92%, 91%);
+    500: hsv(22, 98%, 75%);
+    600: hsv(22, 95%, 44%);
 }
 .set-orange-dark() {
-    100: hsl(27, 55%, 20%);
-    200: hsl(27, 50%, 33%);
-    300: hsl(27, 50%, 43%);
-    400: hsl(27, 90%, 68%);
-    500: hsl(27, 90%, 80%);
-    600: hsl(27, 90%, 90%);
+    100: hsv(21, 80%, 25%);
+    200: hsv(22, 76%, 45%);
+    300: hsv(22, 47%, 78%);
+    400: hsv(22, 40%, 90%);
+    500: hsv(22, 30%, 99%);
+    600: hsv(22, 20%, 98%);
 }
 .set-orange-hc() {
-    100: hsl(23, 87%, 97%);
-    200: hsl(23, 87%, 97%);
-    300: hsl(27, 89%, 48%);
-    400: hsl(27, 87%, 29%);
-    500: hsl(27, 87%, 21%);
-    600: hsl(27, 87%, 21%);
+    100: hsv(23, 5%, 100%);
+    200: hsv(23, 5%, 100%);
+    300: hsv(22, 92%, 91%);
+    400: hsv(22, 98%, 59%);
+    500: hsv(22, 95%, 43%);
+    600: hsv(22, 95%, 43%);
 }
 .set-orange-hc-dark() {
-    100: hsl(27, 30%, 19%);
-    200: hsl(27, 30%, 19%);
-    300: hsl(27, 80%, 72%);
-    400: hsl(27, 80%, 72%);
-    500: hsl(28, 78%, 93%);
-    600: hsl(28, 78%, 93%);
+    100: hsv(21, 80%, 25%);
+    200: hsv(21, 80%, 25%);
+    300: hsv(22, 35%, 87%);
+    400: hsv(22, 30%, 99%);
+    500: hsv(22, 20%, 98%);
+    600: hsv(22, 20%, 98%);
 }
 
 // Blue
 .set-blue() {
-    100: hsl(210, 80%, 96%);
-    200: hsl(210, 80%, 91%);
-    300: hsl(210, 78%, 76%);
-    400: hsl(210, 77%, 46%);
-    500: hsl(210, 77%, 36%);
-    600: hsl(210, 80%, 23%);
+    100: hsv(225, 6%, 100%);
+    200: hsv(226, 20%, 98%);
+    300: hsv(226, 45%, 97%);
+    400: hsv(226, 67%, 95%);
+    500: hsv(226, 80%, 70%);
+    600: hsv(226, 85%, 40%);
 }
 .set-blue-dark() {
-    100: hsl(210, 50%, 22%);
-    200: hsl(210, 50%, 36%);
-    300: hsl(210, 50%, 48%);
-    400: hsl(210, 89%, 77%);
-    500: hsl(210, 89%, 84%);
-    600: hsl(210, 89%, 92%);
+    100: hsv(220, 56%, 30%);
+    200: hsv(220, 50%, 60%);
+    300: hsv(220, 45%, 88%);
+    400: hsv(220, 35%, 100%);
+    500: hsv(220, 20%, 100%);
+    600: hsv(221, 10%, 100%);
 }
 .set-blue-hc() {
-    100: hsl(210, 80%, 96%);
-    200: hsl(210, 80%, 96%);
-    300: hsl(210, 70%, 48%);
-    400: hsl(210, 77%, 34%);
-    500: hsl(210, 80%, 23%);
-    600: hsl(210, 80%, 23%);
+    100: hsv(225, 6%, 100%);
+    200: hsv(225, 6%, 100%);
+    300: hsv(226, 67%, 95%);
+    400: hsv(226, 80%, 70%);
+    500: hsv(226, 85%, 40%);
+    600: hsv(226, 85%, 40%);
 }
 .set-blue-hc-dark() {
-    100: hsl(209, 30%, 19%);
-    200: hsl(209, 30%, 19%);
-    300: hsl(210, 80%, 72%);
-    400: hsl(210, 80%, 75%);
-    500: hsl(210, 78%, 93%);
-    600: hsl(210, 78%, 93%);
+    100: hsv(220, 56%, 30%);
+    200: hsv(220, 56%, 30%);
+    300: hsv(220, 35%, 100%);
+    400: hsv(220, 20%, 100%);
+    500: hsv(221, 10%, 100%);
+    600: hsv(221, 10%, 100%);
 }
 
 // Green
 .set-green() {
-    100: hsl(148, 35%, 95%);
-    200: hsl(148, 35%, 88%);
-    300: hsl(148, 35%, 69%);
-    400: hsl(148, 70%, 31%);
-    500: hsl(148, 75%, 22%);
-    600: hsl(148, 75%, 15%);
+    100: hsv(84, 6%, 98%);
+    200: hsv(82, 30%, 90%);
+    300: hsv(82, 46%, 75%);
+    400: hsv(82, 80%, 60%);
+    500: hsv(82, 90%, 45%);
+    600: hsv(82, 95%, 30%);
 }
 .set-green-dark() {
-    100: hsl(149, 51%, 15%);
-    200: hsl(149, 51%, 25%);
-    300: hsl(149, 51%, 36%);
-    400: hsl(149, 50%, 62%);
-    500: hsl(149, 50%, 74%);
-    600: hsl(149, 50%, 88%);
+    100: hsv(81, 80%, 22%);
+    200: hsv(82, 55%, 45%);
+    300: hsv(82, 44%, 70%);
+    400: hsv(82, 40%, 90%);
+    500: hsv(82, 30%, 90%);
+    600: hsv(82, 20%, 100%);
 }
 .set-green-hc() {
-    100: hsl(147, 36%, 95%);
-    200: hsl(147, 36%, 95%);
-    300: hsl(148, 70%, 31%);
-    400: hsl(148, 75%, 22%);
-    500: hsl(146, 74%, 15%);
-    600: hsl(146, 74%, 15%);
+    100: hsv(84, 6%, 98%);
+    200: hsv(84, 6%, 98%);
+    300: hsv(82, 80%, 63%);
+    400: hsv(82, 93%, 38%);
+    500: hsv(82, 95%, 30%);
+    600: hsv(82, 95%, 30%);
 }
 .set-green-hc-dark() {
-    100: hsl(147, 30%, 19%);
-    200: hsl(147, 30%, 19%);
-    300: hsl(148, 40%, 62%);
-    400: hsl(148, 40%, 68%);
-    500: hsl(150, 39%, 93%);
-    600: hsl(150, 39%, 93%);
+    100: hsv(81, 80%, 22%);
+    200: hsv(81, 80%, 22%);
+    300: hsv(82, 40%, 90%);
+    400: hsv(82, 30%, 90%);
+    500: hsv(82, 20%, 100%);
+    600: hsv(82, 20%, 100%);
 }
 
 // Red
 .set-red() {
-    100: hsl(0, 72%, 96%);
-    200: hsl(0, 70%, 93%);
-    300: hsl(0, 66%, 80%);
-    400: hsl(0, 60%, 49%);
-    500: hsl(0, 65%, 37%);
-    600: hsl(0, 65%, 22%);
+    100: hsv(0, 6%, 99%);
+    200: hsv(1, 25%, 96%);
+    300: hsv(0, 50%, 90%);
+    400: hsv(0, 75%, 75%);
+    500: hsv(0, 90%, 55%);
+    600: hsv(0, 96%, 35%);
 }
 .set-red-dark() {
-    100: hsl(0, 43%, 22%);
-    200: hsl(0, 43%, 41%);
-    300: hsl(0, 43%, 56%);
-    400: hsl(0, 90%, 81%);
-    500: hsl(0, 90%, 88%);
-    600: hsl(0, 90%, 94%);
+    100: hsv(0, 71%, 20%);
+    200: hsv(0, 55%, 40%);
+    300: hsv(0, 48%, 70%);
+    400: hsv(0, 30%, 98%);
+    500: hsv(0, 20%, 99%);
+    600: hsv(0, 10%, 100%);
 }
 .set-red-hc() {
-    100: hsl(0, 80%, 96%);
-    200: hsl(0, 80%, 96%);
-    300: hsl(0, 60%, 49%);
-    400: hsl(0, 65%, 37%);
-    500: hsl(0, 65%, 22%);
-    600: hsl(0, 65%, 22%);
+    100: hsv(0, 6%, 99%);
+    200: hsv(0, 6%, 99%);
+    300: hsv(0, 75%, 75%);
+    400: hsv(0, 90%, 55%);
+    500: hsv(0, 96%, 35%);
+    600: hsv(0, 96%, 35%);
 }
 .set-red-hc-dark() {
-    100: hsl(358, 30%, 19%);
-    200: hsl(358, 30%, 19%);
-    300: hsl(0, 75%, 77%);
-    400: hsl(0, 73%, 80%);
-    500: hsl(0, 76%, 95%);
-    600: hsl(0, 76%, 95%);
+    100: hsv(0, 71%, 20%);
+    200: hsv(0, 71%, 20%);
+    300: hsv(0, 30%, 98%);
+    400: hsv(0, 20%, 99%);
+    500: hsv(0, 10%, 100%);
+    600: hsv(0, 10%, 100%);
 }
 
 // Yellow
 .set-yellow() {
-    100: hsl(43, 85%, 95%);
-    200: hsl(43, 85%, 88%);
-    300: hsl(43, 85%, 72%);
-    400: hsl(43, 85%, 50%);
-    500: hsl(43, 85%, 33%);
-    600: hsl(43, 85%, 18%);
+    100: hsv(48, 8%, 99%);
+    200: hsv(48, 36%, 96%);
+    300: hsv(48, 94%, 93%);
+    400: hsv(48, 100%, 67%);
+    500: hsv(48, 100%, 50%);
+    600: hsv(48, 100%, 30%);
 }
 .set-yellow-dark() {
-    100: hsl(43, 50%, 17%);
-    200: hsl(43, 50%, 28%);
-    300: hsl(43, 50%, 39%);
-    400: hsl(43, 90%, 75%);
-    500: hsl(43, 90%, 82%);
-    600: hsl(43, 90%, 91%);
+    100: hsv(48, 80%, 20%);
+    200: hsv(48, 75%, 35%);
+    300: hsv(48, 55%, 65%);
+    400: hsv(48, 45%, 90%);
+    500: hsv(48, 30%, 89%);
+    600: hsv(48, 10%, 100%);
 }
 .set-yellow-hc() {
-    100: hsl(41, 85%, 95%);
-    200: hsl(41, 85%, 95%);
-    300: hsl(43, 85%, 50%);
-    400: hsl(43, 85%, 50%);
-    500: hsl(48, 85%, 18%);
-    600: hsl(48, 85%, 18%);
+    100: hsv(48, 8%, 99%);
+    200: hsv(48, 8%, 99%);
+    300: hsv(48, 100%, 67%); 
+    400: hsv(48, 100%, 42%);
+    500: hsv(48, 100%, 30%);
+    600: hsv(48, 100%, 30%);
 }
 .set-yellow-hc-dark() {
-    100: hsl(43, 29%, 17%);
-    200: hsl(43, 29%, 17%);
-    300: hsl(43, 75%, 75%);
-    400: hsl(43, 75%, 75%);
-    500: hsl(48, 74%, 91%);
-    600: hsl(44, 74%, 91%);
+    100: hsv(48, 80%, 20%);
+    200: hsv(48, 80%, 20%);
+    300: hsv(48, 45%, 90%);
+    400: hsv(48, 30%, 89%);
+    500: hsv(48, 10%, 100%);
+    600: hsv(48, 10%, 100%);
 }
 
 // Purple
 .set-purple() {
-    100: hsl(237, 83%, 98%);
-    200: hsl(237, 78%, 93%);
-    300: hsl(237, 60%, 83%);
-    400: hsl(237, 55%, 57%);
-    500: hsl(237, 50%, 45%);
-    600: hsl(237, 50%, 32%);
+    100: hsv(252, 6%, 99%);
+    200: hsv(252, 20%, 97%);
+    300: hsv(252, 40%, 95%);
+    400: hsv(252, 65%, 90%);
+    500: hsv(252, 80%, 75%);
+    600: hsv(252, 90%, 45%);
 }
 .set-purple-dark() {
-    100: hsl(237, 26%, 23%);
-    200: hsl(237, 26%, 44%);
-    300: hsl(237, 26%, 56%);
-    400: hsl(237, 98%, 87%);
-    500: hsl(237, 98%, 92%);
-    600: hsl(237, 98%, 96%);
+    100: hsv(252, 70%, 30%);
+    200: hsv(252, 65%, 50%);
+    300: hsv(252, 45%, 70%);
+    400: hsv(252, 33%, 97%);
+    500: hsv(252, 20%, 98%);
+    600: hsv(252, 10%, 99%);
 }
 .set-purple-hc() {
-    100: hsl(237, 83%, 98%);
-    200: hsl(237, 83%, 98%);
-    300: hsl(237, 55%, 57%);
-    400: hsl(237, 52%, 48%);
-    500: hsl(237, 50%, 32%);
-    600: hsl(237, 50%, 32%);
+    100: hsv(252, 6%, 99%);
+    200: hsv(252, 6%, 99%);
+    300: hsv(252, 65%, 90%);
+    400: hsv(252, 80%, 75%);
+    500: hsv(252, 90%, 45%);
+    600: hsv(252, 90%, 45%);
 }
 .set-purple-hc-dark() {
-    100: hsl(237, 26%, 23%);
-    200: hsl(237, 26%, 23%);
-    300: hsl(237, 98%, 87%);
-    400: hsl(237, 98%, 87%);
-    500: hsl(237, 98%, 96%);
-    600: hsl(237, 98%, 96%);
-}
-
+    100: hsv(252, 70%, 30%);
+    200: hsv(252, 70%, 30%);
+    300: hsv(252, 33%, 97%);
+    400: hsv(252, 20%, 98%);
+    500: hsv(252, 10%, 99%);
+    600: hsv(252, 10%, 99%);
+}
+
+.set-pink() {
+    100: hsv(296, 6%, 99%);
+    200: hsv(293, 25%, 95%);
+    300: hsv(293, 45%, 95%);
+    400: hsv(292, 68%, 91%);
+    500: hsv(293, 80%, 70%);
+    600: hsv(293, 90%, 45%);
+}
+.set-pink-dark() {
+    100: hsv(293, 80%, 20%);
+    200: hsv(293, 65%, 40%);
+    300: hsv(293, 35%, 78%);
+    400: hsv(293, 25%, 98%);
+    500: hsv(293, 18%, 99%);
+    600: hsv(295, 10%, 99%);
+}
+.set-pink-hc() {
+    100: hsv(296, 6%, 99%);
+    200: hsv(296, 6%, 99%);
+    300: hsv(292, 68%, 91%);
+    400: hsv(293, 80%, 62%);
+    500: hsv(293, 90%, 45%);
+    600: hsv(293, 90%, 45%);
+}
+.set-pink-hc-dark() {
+    100: hsv(293, 80%, 20%);
+    200: hsv(293, 80%, 20%);
+    300: hsv(293, 25%, 98%);
+    400: hsv(293, 18%, 99%);
+    500: hsv(295, 10%, 99%);
+    600: hsv(295, 10%, 99%);
+}
+
+// Retaining legacy metallic colors for backward compatibility
 // gold
 .set-gold() {
     100: hsl(46, 100%, 91%);
@@ -432,21 +467,21 @@
 
 // translucent utility colors (HC set represents both light and dark HC modes)
 .set-translucent() {
-    secondary: var(--theme-secondary-custom-translucent, hsla(206, 100%, 40%, 0.15));
+    secondary: var(--theme-secondary-custom-translucent, hsva(0, 0%, 45%, 0.15)); // light mode black-400 at 15% alpha
     success: hsla(140, 40%, 75%, 0.4);
     warning: hsla(47, 79%, 58%, 0.4);
     error: hsla(358, 62%, 47%, 0.15);
     muted: hsla(210, 8%, 15%, 0.1);
 }
 .set-translucent-dark() {
-    secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
+    secondary: var(--theme-dark-secondary-custom-translucent, hsva(30, 5%, 85%, 0.25)); // dark mode black-400 at 25% alpha
     success: hsla(140, 40%, 75%, 0.4);
     warning: hsla(47, 79%, 58%, 0.4);
     error: hsla(358, 62%, 47%, 0.15);
     muted: hsla(210, 8%, 15%, 0.1);
 }
 .set-translucent-hc() {
-    secondary: hsla(206, 100%, 40%, 0.9);
+    secondary: hsla(204, 6%, 35%, 0.9); // hc mode black-400 at 90% opacity
     success: hsla(140, 40%, 40%, 0.9);
     warning: hsla(47, 76%, 46%, 0.9);
     error: hsla(358, 62%, 47%, 0.9);
@@ -456,26 +491,27 @@
 // focus colors used for accessible focus styles
 .set-focus() {
     neutral: var(--white);
-    theme: var(--theme-secondary-400);
+    theme: var(--theme-secondary);
 }
 
 // focus ring (sets represents both light and dark mode)
+// TODO SHINE update these focus ring colors to use newly updated color sets
 .set-focus-ring() {
-    default: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
+    default: var(--theme-secondary-custom-focus-ring, hsva(0, 0%, 45%, 0.15)); // light mode black-400 at 15% alpha
     success: hsla(140, 40%, 75%, 0.4);
     warning: hsla(47, 79%, 58%, 0.4);
     error: hsla(358, 62%, 47%, 0.15);
     muted: hsla(210, 8%, 15%, 0.1);
 }
 .set-focus-ring-dark() {
-    default: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
+    default: var(--theme-dark-secondary-custom-focus-ring, hsva(30, 5%, 85%, 0.25)); // dark mode black-400 at 25% alpha
     success: hsla(140, 40%, 75%, 0.4);
     warning: hsla(47, 79%, 58%, 0.4);
     error: hsla(358, 62%, 47%, 0.15);
     muted: hsla(210, 8%, 15%, 0.1);
 }
 .set-focus-ring-hc() {
-    default: hsla(206, 100%, 40%, 0.9);
+    default: hsva(0, 0%, 45%, 0.9); // hc mode dark mode black-400 at 25% alpha
     success: hsla(140, 40%, 40%, 0.9);
     warning: hsla(47, 76%, 46%, 0.9);
     error: hsla(358, 62%, 47%, 0.9);
@@ -484,6 +520,7 @@
 
 // highlight
 // TODO consult with design to potentially map static colors to new colors variables
+// TODO SHINE request colors for use in code blocks (or verify these can be used for now)
 .set-highlight() {
     addition: var(--green-500);
     attribute: hsl(206, 98.5%, 29%);
@@ -571,6 +608,7 @@
     red: .set-red();
     yellow: .set-yellow();
     purple: .set-purple();
+    pink: .set-pink();
     gold: .set-gold();
     silver: .set-silver();
     bronze: .set-bronze();
@@ -585,6 +623,7 @@
     red: .set-red-dark();
     yellow: .set-yellow-dark();
     purple: .set-purple-dark();
+    pink: .set-pink-dark();
     gold: .set-gold-dark();
     silver: .set-silver-dark();
     bronze: .set-bronze-dark();
@@ -599,6 +638,7 @@
     red: .set-red-hc();
     yellow: .set-yellow-hc();
     purple: .set-purple-hc();
+    pink: .set-pink-hc();
     gold: .set-gold-hc();
     silver: .set-silver-hc();
     bronze: .set-bronze-hc();
@@ -613,6 +653,7 @@
     red: .set-red-hc-dark();
     yellow: .set-yellow-hc-dark();
     purple: .set-purple-hc-dark();
+    pink: .set-pink-hc-dark();
     gold: .set-gold-hc-dark();
     silver: .set-silver-hc-dark();
     bronze: .set-bronze-hc-dark();
@@ -674,7 +715,6 @@
 }
 
 // Theme values
-// TODO update to use custom theme colors with orange/blue as fallbacks
 .set-theme-primary-default() {
     default: var(--orange-400);
     100: var(--orange-100);
@@ -686,13 +726,13 @@
 }
 
 .set-theme-secondary-default() {
-    default: var(--blue-400);
-    100: var(--blue-100);
-    200: var(--blue-200);
-    300: var(--blue-300);
-    400: var(--blue-400);
-    500: var(--blue-500);
-    600: var(--blue-600);
+    default: var(--black);
+    100: var(--black-100);
+    200: var(--black-200);
+    300: var(--black-300);
+    400: var(--black-400);
+    500: var(--black-500);
+    600: var(--black-600);
 }
 
 .sets-theme-default() {
@@ -702,10 +742,10 @@
 
 .theme-light-default() {
     primary: .set-orange()[400];
-    secondary: .set-blue()[400];
+    secondary: .set-black()[default];
 }
 
 .theme-dark-default() {
     primary: .set-orange-dark()[400];
-    secondary: .set-blue-dark()[400];
+    secondary: .set-black-dark()[default];
 }