@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

package/lib/atomic/v1/__snapshots__/typography.less.test.ts.snap

@@ -0,0 +1,22 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`atomic: border v1 > should output all v1 atomic css classes for colors 1`] = `
+"@media (prefers-color-scheme: dark) {
+}
+
+@media (prefers-color-scheme: dark) {
+}
+
+.fc-dark-legacy {
+    color: var(--fc-dark-legacy) !important;
+}
+
+.fc-medium-legacy {
+    color: var(--fc-medium-legacy) !important;
+}
+
+.fc-light-legacy {
+    color: var(--fc-light-legacy) !important;
+}
+"
+`;

package/lib/atomic/v1/border.less

@@ -0,0 +1,210 @@
+// DEPRECATED
+
+//  ============================================================================
+//  $   COLORS
+//  ============================================================================
+//  $$  WHITE
+//  ----------------------------------------------------------------------------
+.bc-white-legacy-1 { border-color: var(--black-legacy-500) !important; }
+.bc-white-legacy-2 { border-color: var(--black-legacy-300) !important; }
+.bc-white-legacy-3,
+.bc-white-legacy { border-color: var(--white-legacy) !important; }
+
+.highcontrast-mode({
+    .bc-white-legacy-1 { border-color: var(--black-legacy-025) !important; }
+    .bc-white-legacy-2 { border-color: var(--black-legacy-050) !important; }
+});
+
+//  $$  BLACK
+//  ----------------------------------------------------------------------------
+.bc-black-legacy-025 { border-color: var(--black-legacy-025) !important; }
+.bc-black-legacy-1,
+.bc-black-legacy-050 { border-color: var(--black-legacy-050) !important; }
+.bc-black-legacy-2,
+.bc-black-legacy-075 { border-color: var(--black-legacy-075) !important; }
+.bc-black-legacy-3,
+.bc-black-legacy-100 { border-color: var(--black-legacy-100) !important; }
+.bc-black-legacy-150 { border-color: var(--black-legacy-150) !important; }
+.bc-black-legacy-4,
+.bc-black-legacy-200 { border-color: var(--black-legacy-200) !important; }
+.bc-black-legacy-5,
+.bc-black-legacy-300 { border-color: var(--black-legacy-300) !important; }
+.bc-black-legacy-350 { border-color: var(--black-legacy-350) !important; }
+.bc-black-legacy-6,
+.bc-black-legacy-400 { border-color: var(--black-legacy-400) !important; }
+.bc-black-legacy-7,
+.bc-black-legacy-500 { border-color: var(--black-legacy-500) !important; }
+.bc-black-legacy-600 { border-color: var(--black-legacy-600) !important; }
+.bc-black-legacy-8,
+.bc-black-legacy-700 { border-color: var(--black-legacy-700) !important; }
+.bc-black-legacy-750 { border-color: var(--black-legacy-750) !important; }
+.bc-black-legacy-9,
+.bc-black-legacy-800 { border-color: var(--black-legacy-800) !important; }
+.bc-black-legacy-10,
+.bc-black-legacy-900 { border-color: var(--black-legacy-900) !important; }
+
+.highcontrast-mode({
+    .bc-black-legacy-1,
+    .bc-black-legacy-2,
+    .bc-black-legacy-3,
+    .bc-black-legacy-4,
+    .bc-black-legacy-025,
+    .bc-black-legacy-050,
+    .bc-black-legacy-075,
+    .bc-black-legacy-100,
+    .bc-black-legacy-150,
+    .bc-black-legacy-200 { border-color: var(--black-legacy-300) !important; }
+});
+
+//  $$  ORANGE
+//  ----------------------------------------------------------------------------
+.bc-orange-legacy-050 { border-color: var(--orange-legacy-050) !important; }
+.bc-orange-legacy-1,
+.bc-orange-legacy-100 { border-color: var(--orange-legacy-100) !important; }
+.bc-orange-legacy-200 { border-color: var(--orange-legacy-200) !important; }
+.bc-orange-legacy-300 { border-color: var(--orange-legacy-300) !important; }
+.bc-orange-legacy-2,
+.bc-orange-legacy-400 { border-color: var(--orange-legacy-400) !important; }
+.bc-orange-legacy-500 { border-color: var(--orange-legacy-500) !important; }
+.bc-orange-legacy-3,
+.bc-orange-legacy-600 { border-color: var(--orange-legacy-600) !important; }
+.bc-orange-legacy-700 { border-color: var(--orange-legacy-700) !important; }
+.bc-orange-legacy-800 { border-color: var(--orange-legacy-800) !important; }
+.bc-orange-legacy-900 { border-color: var(--orange-legacy-900) !important; }
+
+//  $$  BLUE
+//  ----------------------------------------------------------------------------
+.bc-blue-legacy-050 { border-color: var(--blue-legacy-050) !important; }
+.bc-blue-legacy-1,
+.bc-blue-legacy-100 { border-color: var(--blue-legacy-100) !important; }
+.bc-blue-legacy-200 { border-color: var(--blue-legacy-200) !important; }
+.bc-blue-legacy-300 { border-color: var(--blue-legacy-300) !important; }
+.bc-blue-legacy-2,
+.bc-blue-legacy-400 { border-color: var(--blue-legacy-400) !important; }
+.bc-blue-legacy-500 { border-color: var(--blue-legacy-500) !important; }
+.bc-blue-legacy-3,
+.bc-blue-legacy-600 { border-color: var(--blue-legacy-600) !important; }
+.bc-blue-legacy-700 { border-color: var(--blue-legacy-700) !important; }
+.bc-blue-legacy-800 { border-color: var(--blue-legacy-800) !important; }
+.bc-blue-legacy-900 { border-color: var(--blue-legacy-900) !important; }
+
+//  $$  POWDER
+//  ----------------------------------------------------------------------------
+.bc-powder-legacy-050 { border-color: var(--powder-legacy-050) !important; }
+.bc-powder-legacy-1,
+.bc-powder-legacy-100 { border-color: var(--powder-legacy-100) !important; }
+.bc-powder-legacy-200 { border-color: var(--powder-legacy-200) !important; }
+.bc-powder-legacy-300 { border-color: var(--powder-legacy-300) !important; }
+.bc-powder-legacy-2,
+.bc-powder-legacy-400 { border-color: var(--powder-legacy-400) !important; }
+.bc-powder-legacy-500 { border-color: var(--powder-legacy-500) !important; }
+.bc-powder-legacy-3,
+.bc-powder-legacy-600 { border-color: var(--powder-legacy-600) !important; }
+.bc-powder-legacy-700 { border-color: var(--powder-legacy-700) !important; }
+.bc-powder-legacy-800 { border-color: var(--powder-legacy-800) !important; }
+.bc-powder-legacy-900 { border-color: var(--powder-legacy-900) !important; }
+
+//  $$  GREEN
+//  ----------------------------------------------------------------------------
+.bc-green-legacy-025 { border-color: var(--green-legacy-025) !important; }
+.bc-green-legacy-050 { border-color: var(--green-legacy-050) !important; }
+.bc-green-legacy-1,
+.bc-green-legacy-100 { border-color: var(--green-legacy-100) !important; }
+.bc-green-legacy-200 { border-color: var(--green-legacy-200) !important; }
+.bc-green-legacy-300 { border-color: var(--green-legacy-300) !important; }
+.bc-green-legacy-2,
+.bc-green-legacy-400 { border-color: var(--green-legacy-400) !important; }
+.bc-green-legacy-500 { border-color: var(--green-legacy-500) !important; }
+.bc-green-legacy-3,
+.bc-success-legacy,
+.bc-green-legacy-600 { border-color: var(--green-legacy-600) !important; }
+.bc-green-legacy-700 { border-color: var(--green-legacy-700) !important; }
+.bc-green-legacy-800 { border-color: var(--green-legacy-800) !important; }
+.bc-green-legacy-900 { border-color: var(--green-legacy-900) !important; }
+
+//  $$  RED
+//  ----------------------------------------------------------------------------
+.bc-red-legacy-025 { border-color: var(--red-legacy-025) !important; }
+.bc-red-legacy-050 { border-color: var(--red-legacy-050) !important; }
+.bc-red-legacy-1,
+.bc-red-legacy-100 { border-color: var(--red-legacy-100) !important; }
+.bc-red-legacy-200 { border-color: var(--red-legacy-200) !important; }
+.bc-red-legacy-300 { border-color: var(--red-legacy-300) !important; }
+.bc-red-legacy-2,
+.bc-error-legacy,
+.bc-red-legacy-400 { border-color: var(--red-legacy-400) !important; }
+.bc-red-legacy-500 { border-color: var(--red-legacy-500) !important; }
+.bc-red-legacy-3,
+.bc-red-legacy-600 { border-color: var(--red-legacy-600) !important; }
+.bc-red-legacy-700 { border-color: var(--red-legacy-700) !important; }
+.bc-red-legacy-800 { border-color: var(--red-legacy-800) !important; }
+.bc-red-legacy-900 { border-color: var(--red-legacy-900) !important; }
+
+//  $$  YELLOW
+//  ----------------------------------------------------------------------------
+.bc-yellow-legacy-050 { border-color: var(--yellow-legacy-050) !important; }
+.bc-yellow-legacy-100 { border-color: var(--yellow-legacy-100) !important; }
+.bc-yellow-legacy-1,
+.bc-yellow-legacy-200 { border-color: var(--yellow-legacy-200) !important; }
+.bc-yellow-legacy-300 { border-color: var(--yellow-legacy-300) !important; }
+.bc-yellow-legacy-2,
+.bc-yellow-legacy-400 { border-color: var(--yellow-legacy-400) !important; }
+.bc-yellow-legacy-500 { border-color: var(--yellow-legacy-500) !important; }
+.bc-yellow-legacy-3,
+.bc-warning-legacy,
+.bc-yellow-legacy-600 { border-color: var(--yellow-legacy-600) !important; }
+.bc-yellow-legacy-700 { border-color: var(--yellow-legacy-700) !important; }
+.bc-yellow-legacy-800 { border-color: var(--yellow-legacy-800) !important; }
+.bc-yellow-legacy-900 { border-color: var(--yellow-legacy-900) !important; }
+
+//  $$  GOLD
+//  ----------------------------------------------------------------------------
+.bc-gold-legacy-lighter { border-color: var(--gold-legacy-lighter) !important; }
+.bc-gold-legacy { border-color: var(--gold-legacy) !important; }
+.bc-gold-legacy-darker { border-color: var(--gold-legacy-darker) !important; }
+
+//  $$  SILVER
+//  ----------------------------------------------------------------------------
+.bc-silver-legacy-lighter { border-color: var(--silver-legacy-lighter) !important; }
+.bc-silver-legacy { border-color: var(--silver-legacy) !important; }
+.bc-silver-legacy-darker { border-color: var(--silver-legacy-darker) !important; }
+
+//  $$  BRONZE
+//  ----------------------------------------------------------------------------
+.bc-bronze-legacy-lighter { border-color: var(--bronze-legacy-lighter) !important; }
+.bc-bronze-legacy { border-color: var(--bronze-legacy) !important; }
+.bc-bronze-legacy-darker { border-color: var(--bronze-legacy-darker) !important; }
+
+//  $$  PRIMARY
+//  ----------------------------------------------------------------------------
+.bc-theme-primary-legacy-025 { border-color: var(--theme-primary-legacy-025) !important; }
+.bc-theme-primary-legacy-050 { border-color: var(--theme-primary-legacy-050) !important; }
+.bc-theme-primary-legacy-075 { border-color: var(--theme-primary-legacy-075) !important; }
+.bc-theme-primary-legacy-100 { border-color: var(--theme-primary-legacy-100) !important; }
+.bc-theme-primary-legacy-150 { border-color: var(--theme-primary-legacy-150) !important; }
+.bc-theme-primary-legacy-200 { border-color: var(--theme-primary-legacy-200) !important; }
+.bc-theme-primary-legacy-300 { border-color: var(--theme-primary-legacy-300) !important; }
+.bc-theme-primary-legacy-350 { border-color: var(--theme-primary-legacy-350) !important; }
+.bc-theme-primary-legacy-400 { border-color: var(--theme-primary-legacy-400) !important; }
+.bc-theme-primary-legacy-500 { border-color: var(--theme-primary-legacy-500) !important; }
+.bc-theme-primary-legacy-600 { border-color: var(--theme-primary-legacy-600) !important; }
+.bc-theme-primary-legacy-700 { border-color: var(--theme-primary-legacy-700) !important; }
+.bc-theme-primary-legacy-800 { border-color: var(--theme-primary-legacy-800) !important; }
+.bc-theme-primary-legacy-900 { border-color: var(--theme-primary-legacy-900) !important; }
+
+//  $$  SECONDARY
+//  ----------------------------------------------------------------------------
+.bc-theme-secondary-legacy-025 { border-color: var(--theme-secondary-legacy-025) !important; }
+.bc-theme-secondary-legacy-050 { border-color: var(--theme-secondary-legacy-050) !important; }
+.bc-theme-secondary-legacy-075 { border-color: var(--theme-secondary-legacy-075) !important; }
+.bc-theme-secondary-legacy-100 { border-color: var(--theme-secondary-legacy-100) !important; }
+.bc-theme-secondary-legacy-150 { border-color: var(--theme-secondary-legacy-150) !important; }
+.bc-theme-secondary-legacy-200 { border-color: var(--theme-secondary-legacy-200) !important; }
+.bc-theme-secondary-legacy-300 { border-color: var(--theme-secondary-legacy-300) !important; }
+.bc-theme-secondary-legacy-350 { border-color: var(--theme-secondary-legacy-350) !important; }
+.bc-theme-secondary-legacy-400 { border-color: var(--theme-secondary-legacy-400) !important; }
+.bc-theme-secondary-legacy-500 { border-color: var(--theme-secondary-legacy-500) !important; }
+.bc-theme-secondary-legacy-600 { border-color: var(--theme-secondary-legacy-600) !important; }
+.bc-theme-secondary-legacy-700 { border-color: var(--theme-secondary-legacy-700) !important; }
+.bc-theme-secondary-legacy-800 { border-color: var(--theme-secondary-legacy-800) !important; }
+.bc-theme-secondary-legacy-900 { border-color: var(--theme-secondary-legacy-900) !important; }

package/lib/atomic/v1/border.less.test.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../../test/less-test-utils";
+
+describe("atomic: border v1", () => {
+    it("should output all v1 atomic css classes for colors", async () => {
+        const css = await renderLess(`
+            @import (reference) "./lib/exports/v1/constants-colors.less";
+            @import (reference) "./lib/exports/mixins.less";
+            @import "./lib/atomic/v1/border.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

package/lib/atomic/v1/color.less

@@ -0,0 +1,183 @@
+// DEPRECATED
+& {
+    .color(@color-name) {
+        .fc-@{color-name},
+        .h\:fc-@{color-name}:hover,
+        .f\:fc-@{color-name}:focus,
+        .f\:fc-@{color-name}:focus-within {
+            color: var(~"--@{color-name}") !important;
+        }
+        .d\:fc-@{color-name} {
+            .dark-mode({
+                color: var(~"--@{color-name}") !important;
+            });
+        }
+
+        .bg-@{color-name},
+        .h\:bg-@{color-name}:hover,
+        .f\:bg-@{color-name}:focus,
+        .f\:bg-@{color-name}:focus-within {
+            background-color: var(~"--@{color-name}") !important;
+        }
+        .d\:bg-@{color-name} {
+            .dark-mode({
+                background-color: var(~"--@{color-name}") !important;
+            });
+        }
+    }
+
+    .standard-weights(@color) {
+        .color(~"@{color}-900");
+        .color(~"@{color}-800");
+        .color(~"@{color}-700");
+        .color(~"@{color}-600");
+        .color(~"@{color}-500");
+        .color(~"@{color}-400");
+        .color(~"@{color}-300");
+        .color(~"@{color}-200");
+        .color(~"@{color}-100");
+        .color(~"@{color}-050");
+    }
+
+    .standard-weights(black-legacy);
+    .standard-weights(orange-legacy);
+    .standard-weights(blue-legacy);
+    .standard-weights(powder-legacy);
+    .standard-weights(green-legacy);
+    .standard-weights(yellow-legacy);
+    .standard-weights(red-legacy);
+    .standard-weights(theme-primary-legacy);
+    .standard-weights(theme-secondary-legacy);
+
+    // Additional color names
+    .color(white-legacy);
+    .color(black-legacy);
+    .color(black-legacy-750);
+    .color(black-legacy-350);
+    .color(black-legacy-150);
+    .color(black-legacy-075);
+    .color(black-legacy-025);
+    .color(green-legacy-025);
+    .color(red-legacy-025);
+    .color(theme-primary-legacy-350);
+    .color(theme-primary-legacy-150);
+    .color(theme-primary-legacy-075);
+    .color(theme-primary-legacy-025);
+    .color(theme-secondary-legacy-350);
+    .color(theme-secondary-legacy-150);
+    .color(theme-secondary-legacy-075);
+    .color(theme-secondary-legacy-025);
+
+    .fc-success-legacy { &:extend(.fc-green-legacy-600); }
+    .fc-warning-legacy { &:extend(.fc-yellow-legacy-600); }
+    .fc-error-legacy,
+    .fc-danger-legacy { &:extend(.fc-red-legacy-500); }
+    .bg-success-legacy { &:extend(.bg-green-legacy-500); }
+    .bg-warning-legacy { &:extend(.bg-yellow-legacy-600); }
+    .bg-error-legacy,
+    .bg-danger-legacy { &:extend(.bg-red-legacy-500); }
+}
+
+.fc-theme-primary-legacy {
+    color: var(--theme-primary-color-legacy) !important;
+}
+
+.bg-theme-primary-legacy {
+    background-color: var(--theme-primary-color-legacy) !important;
+}
+
+.bc-theme-primary-legacy {
+    border-color: var(--theme-primary-color-legacy) !important;
+}
+
+.fc-theme-secondary-legacy {
+    color: var(--theme-secondary-color-legacy) !important;
+}
+
+.bg-theme-secondary-legacy {
+    background-color: var(--theme-secondary-color-legacy) !important;
+}
+
+.bc-theme-secondary-legacy {
+    border-color: var(--theme-secondary-color-legacy) !important;
+}
+
+.fc-white-legacy__forced {
+    color: @white-legacy !important;
+}
+
+.fc-black-legacy__forced {
+    color: @black-legacy !important;
+}
+
+.fc-gold-legacy {
+    color: var(--gold-legacy) !important;
+}
+
+.fc-gold-legacy-darker {
+    color: var(--gold-legacy-darker) !important;
+}
+
+.fc-gold-legacy-lighter {
+    color: var(--gold-legacy-lighter) !important;
+}
+
+.bg-gold-legacy {
+    background-color: var(--gold-legacy) !important;
+}
+
+.bg-gold-legacy-darker {
+    background-color: var(--gold-legacy-darker) !important;
+}
+
+.bg-gold-legacy-lighter {
+    background-color: var(--gold-legacy-lighter) !important;
+}
+
+.fc-silver-legacy {
+    color: var(--silver-legacy) !important;
+}
+
+.fc-silver-legacy-darker {
+    color: var(--silver-legacy-darker) !important;
+}
+
+.fc-silver-legacy-lighter {
+    color: var(--silver-legacy-lighter) !important;
+}
+
+.bg-silver-legacy {
+    background-color: var(--silver-legacy) !important;
+}
+
+.bg-silver-legacy-darker {
+    background-color: var(--silver-legacy-darker) !important;
+}
+
+.bg-silver-legacy-lighter {
+    background-color: var(--silver-legacy-lighter) !important;
+}
+
+.fc-bronze-legacy {
+    color: var(--bronze-legacy) !important;
+}
+
+.fc-bronze-legacy-darker {
+    color: var(--bronze-legacy-darker) !important;
+}
+
+.fc-bronze-legacy-lighter {
+    color: var(--bronze-legacy-lighter) !important;
+}
+
+.bg-bronze-legacy {
+    background-color: var(--bronze-legacy) !important;
+}
+
+.bg-bronze-legacy-darker {
+    background-color: var(--bronze-legacy-darker) !important;
+}
+
+.bg-bronze-legacy-lighter {
+    background-color: var(--bronze-legacy-lighter) !important;
+}

package/lib/atomic/v1/color.less.test.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../../test/less-test-utils";
+
+describe("atomic: color v1", () => {
+    it("should output all v1 atomic css classes for colors", async () => {
+        const css = await renderLess(`
+            @import (reference) "./lib/exports/v1/constants-colors.less";
+            @import (reference) "./lib/exports/mixins.less";
+            @import "./lib/atomic/v1/color.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

package/lib/atomic/v1/typography.less

@@ -0,0 +1,8 @@
+// DEPRECATED
+
+//  ============================================================================
+//  $$  TEXT COLORS
+//  ----------------------------------------------------------------------------
+.fc-dark-legacy { color: var(--fc-dark-legacy) !important; }
+.fc-medium-legacy { color: var(--fc-medium-legacy) !important; }
+.fc-light-legacy { color: var(--fc-light-legacy) !important; }

package/lib/atomic/v1/typography.less.test.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from "vitest";
+import { renderLess } from "../../test/less-test-utils";
+
+describe("atomic: border v1", () => {
+    it("should output all v1 atomic css classes for colors", async () => {
+        const css = await renderLess(`
+            @import (reference) "./lib/exports/v1/constants-colors.less";
+            @import (reference) "./lib/exports/mixins.less";
+            @import "./lib/atomic/v1/typography.less";
+        `);
+
+        expect(css).toMatchSnapshot();
+    });
+});

package/lib/components/activity-indicator/activity-indicator.a11y.test.ts

@@ -9,15 +9,6 @@ describe("activity-indicator", () => {
         children: {
             default: `<div class="v-visible-sr">New activity</div>`,
             new: `new<div class="v-visible-sr">New activity</div>`,
-        },
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-activity-indicator-dark-new",
-            "s-activity-indicator-dark-success-new",
-            "s-activity-indicator-dark-warning-new",
-            "s-activity-indicator-light-success-new",
-            "s-activity-indicator-light-warning-new",
-            "s-activity-indicator-highcontrast-light-warning-new",
-        ],
+        }
     });
 });

package/lib/components/activity-indicator/activity-indicator.less

@@ -1,7 +1,7 @@
 .s-activity-indicator {
     --_ai-focus-ring: var(--focus-ring);
     --_ai-bg: var(--theme-secondary-400);
-    --_ai-fc: @white;
+    --_ai-fc: var(--_white-static);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
@@ -10,17 +10,17 @@
 
     // VARIANTS
     &&__danger {
-        --_ai-bg: var(--red-500);
+        --_ai-bg: var(--red-400);
         --_ai-focus-ring: var(--focus-ring-error);
     }
 
     &&__success {
-        --_ai-bg: var(--green-500);
+        --_ai-bg: var(--green-400);
         --_ai-focus-ring: var(--focus-ring-success);
     }
 
     &&__warning {
-        --_ai-bg: var(--yellow-600);
+        --_ai-bg: var(--yellow-500);
         --_ai-focus-ring: var(--focus-ring-warning);
     }
 

package/lib/components/anchor/anchor.a11y.test.ts

@@ -33,17 +33,5 @@ describe("anchors", () => {
             ...defaultOptions,
             includeNullModifier: false,
         },
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-anchors-dark-danger",
-            "s-anchors-dark-default",
-            "s-anchors-dark-underlined",
-            "s-anchors-dark-grayscale",
-            "s-anchors-dark-muted",
-            "s-anchors-light-danger",
-            "s-anchors-light-default",
-            "s-anchors-light-muted",
-            "s-anchors-light-underlined",
-        ],
     });
 });

package/lib/components/anchor/anchor.less

@@ -14,7 +14,7 @@
 
     // VARIANTS
     &&__danger {
-        --_an-a-fc: var(--red-500);
+        --_an-a-fc: var(--red-400);
         --_an-a-fc-hover: var(--red-400);
     }
 
@@ -25,8 +25,8 @@
     }
 
     &&__grayscale {
-        --_an-a-fc: var(--black-700);
-        --_an-a-fc-hover: var(--black-600);
+        --_an-a-fc: var(--black-500);
+        --_an-a-fc-hover: var(--black-500);
     }
 
     &&__inherit {
@@ -35,7 +35,7 @@
     }
 
     &&__muted {
-        --_an-a-fc: var(--black-500);
+        --_an-a-fc: var(--black-400);
         --_an-a-fc-hover: var(--black-400);
     }
 

package/lib/components/anchor/anchor.visual.test.ts

@@ -41,7 +41,7 @@ describe("anchors", () => {
             includeNullModifier: false,
         },
         template: ({ component, testid }) => html`
-            <div data-testid="${testid}" class="s-card ws3 fc-green-600">
+            <div data-testid="${testid}" class="s-card ws3 fc-green-500">
                 ${testid}: ${component}
             </div>
         `,

package/lib/components/avatar/avatar.less

@@ -1,6 +1,6 @@
 .s-avatar {
     --_av-size: var(--su-static16);
-    --_av-bg: @white; // Force a white background color for when we have transparent avatars
+    --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
     --_av-br: var(--br-sm);
     --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
     --_av-scale-badge: 1;
@@ -81,7 +81,7 @@
     }
 
     & &--letter {
-        color: @white; // Force a light appearance of text rendering
+        color: var(--_white-static); // Force a light appearance of text rendering
         display: block; // Make sure we're treating the letter as a block-level element
         font-size: var(--_av-fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
         font-weight: bold;

package/lib/components/award-bling/award-bling.less

@@ -3,15 +3,15 @@
 
     // VARIANTS
     &&__gold {
-        --_ab-before-bg: var(--gold);
+        --_ab-before-bg: var(--gold-300);
     }
 
     &&__silver {
-        --_ab-before-bg: var(--silver);
+        --_ab-before-bg: var(--silver-300);
     }
 
     &&__bronze {
-        --_ab-before-bg: var(--bronze);
+        --_ab-before-bg: var(--bronze-300);
     }
 
     // CHILD ELEMENTS