@stackoverflow/stacks 2.0.0-rc.4 → 2.0.0-rc.6

package/lib/atomic/__snapshots__/color.less.test.ts.snap

@@ -904,6 +904,132 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
     color: var(--yellow-600) !important;
 }
 
+.bg-purple-100,
+.h\\\\:bg-purple-100:hover,
+.f\\\\:bg-purple-100:focus,
+.f\\\\:bg-purple-100:focus-within {
+    background-color: var(--purple-100) !important;
+}
+
+.bc-purple-100,
+.h\\\\:bc-purple-100:hover,
+.f\\\\:bc-purple-100:focus,
+.f\\\\:bc-purple-100:focus-within {
+    border-color: var(--purple-100) !important;
+}
+
+.fc-purple-100,
+.h\\\\:fc-purple-100:hover,
+.f\\\\:fc-purple-100:focus,
+.f\\\\:fc-purple-100:focus-within {
+    color: var(--purple-100) !important;
+}
+
+.bg-purple-200,
+.h\\\\:bg-purple-200:hover,
+.f\\\\:bg-purple-200:focus,
+.f\\\\:bg-purple-200:focus-within {
+    background-color: var(--purple-200) !important;
+}
+
+.bc-purple-200,
+.h\\\\:bc-purple-200:hover,
+.f\\\\:bc-purple-200:focus,
+.f\\\\:bc-purple-200:focus-within {
+    border-color: var(--purple-200) !important;
+}
+
+.fc-purple-200,
+.h\\\\:fc-purple-200:hover,
+.f\\\\:fc-purple-200:focus,
+.f\\\\:fc-purple-200:focus-within {
+    color: var(--purple-200) !important;
+}
+
+.bg-purple-300,
+.h\\\\:bg-purple-300:hover,
+.f\\\\:bg-purple-300:focus,
+.f\\\\:bg-purple-300:focus-within {
+    background-color: var(--purple-300) !important;
+}
+
+.bc-purple-300,
+.h\\\\:bc-purple-300:hover,
+.f\\\\:bc-purple-300:focus,
+.f\\\\:bc-purple-300:focus-within {
+    border-color: var(--purple-300) !important;
+}
+
+.fc-purple-300,
+.h\\\\:fc-purple-300:hover,
+.f\\\\:fc-purple-300:focus,
+.f\\\\:fc-purple-300:focus-within {
+    color: var(--purple-300) !important;
+}
+
+.bg-purple-400,
+.h\\\\:bg-purple-400:hover,
+.f\\\\:bg-purple-400:focus,
+.f\\\\:bg-purple-400:focus-within {
+    background-color: var(--purple-400) !important;
+}
+
+.bc-purple-400,
+.h\\\\:bc-purple-400:hover,
+.f\\\\:bc-purple-400:focus,
+.f\\\\:bc-purple-400:focus-within {
+    border-color: var(--purple-400) !important;
+}
+
+.fc-purple-400,
+.h\\\\:fc-purple-400:hover,
+.f\\\\:fc-purple-400:focus,
+.f\\\\:fc-purple-400:focus-within {
+    color: var(--purple-400) !important;
+}
+
+.bg-purple-500,
+.h\\\\:bg-purple-500:hover,
+.f\\\\:bg-purple-500:focus,
+.f\\\\:bg-purple-500:focus-within {
+    background-color: var(--purple-500) !important;
+}
+
+.bc-purple-500,
+.h\\\\:bc-purple-500:hover,
+.f\\\\:bc-purple-500:focus,
+.f\\\\:bc-purple-500:focus-within {
+    border-color: var(--purple-500) !important;
+}
+
+.fc-purple-500,
+.h\\\\:fc-purple-500:hover,
+.f\\\\:fc-purple-500:focus,
+.f\\\\:fc-purple-500:focus-within {
+    color: var(--purple-500) !important;
+}
+
+.bg-purple-600,
+.h\\\\:bg-purple-600:hover,
+.f\\\\:bg-purple-600:focus,
+.f\\\\:bg-purple-600:focus-within {
+    background-color: var(--purple-600) !important;
+}
+
+.bc-purple-600,
+.h\\\\:bc-purple-600:hover,
+.f\\\\:bc-purple-600:focus,
+.f\\\\:bc-purple-600:focus-within {
+    border-color: var(--purple-600) !important;
+}
+
+.fc-purple-600,
+.h\\\\:fc-purple-600:hover,
+.f\\\\:fc-purple-600:focus,
+.f\\\\:fc-purple-600:focus-within {
+    color: var(--purple-600) !important;
+}
+
 .bg-gold-100,
 .h\\\\:bg-gold-100:hover,
 .f\\\\:bg-gold-100:focus,
@@ -1928,6 +2054,54 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
         color: var(--yellow-600) !important;
     }
 
+    body.theme-system  .d\\\\:bg-purple-100 {
+        background-color: var(--purple-100) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-100 {
+        color: var(--purple-100) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-200 {
+        background-color: var(--purple-200) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-200 {
+        color: var(--purple-200) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-300 {
+        background-color: var(--purple-300) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-300 {
+        color: var(--purple-300) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-400 {
+        background-color: var(--purple-400) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-400 {
+        color: var(--purple-400) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-500 {
+        background-color: var(--purple-500) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-500 {
+        color: var(--purple-500) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-600 {
+        background-color: var(--purple-600) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-600 {
+        color: var(--purple-600) !important;
+    }
+
     body.theme-system  .d\\\\:bg-gold-100 {
         background-color: var(--gold-100) !important;
     }
@@ -2613,6 +2787,78 @@ body.theme-system .theme-dark__forced  .d\\\\:fc-yellow-600 {
     color: var(--yellow-600) !important;
 }
 
+body.theme-dark  .d\\\\:bg-purple-100,
+.theme-dark__forced  .d\\\\:bg-purple-100,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-100 {
+    background-color: var(--purple-100) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-100,
+.theme-dark__forced  .d\\\\:fc-purple-100,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-100 {
+    color: var(--purple-100) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-200,
+.theme-dark__forced  .d\\\\:bg-purple-200,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-200 {
+    background-color: var(--purple-200) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-200,
+.theme-dark__forced  .d\\\\:fc-purple-200,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-200 {
+    color: var(--purple-200) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-300,
+.theme-dark__forced  .d\\\\:bg-purple-300,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-300 {
+    background-color: var(--purple-300) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-300,
+.theme-dark__forced  .d\\\\:fc-purple-300,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-300 {
+    color: var(--purple-300) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-400,
+.theme-dark__forced  .d\\\\:bg-purple-400,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-400 {
+    background-color: var(--purple-400) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-400,
+.theme-dark__forced  .d\\\\:fc-purple-400,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-400 {
+    color: var(--purple-400) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-500,
+.theme-dark__forced  .d\\\\:bg-purple-500,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-500 {
+    background-color: var(--purple-500) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-500,
+.theme-dark__forced  .d\\\\:fc-purple-500,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-500 {
+    color: var(--purple-500) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-600,
+.theme-dark__forced  .d\\\\:bg-purple-600,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-600 {
+    background-color: var(--purple-600) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-600,
+.theme-dark__forced  .d\\\\:fc-purple-600,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-600 {
+    color: var(--purple-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 {

package/lib/base/body.less

@@ -18,7 +18,7 @@
 
 html,
 body {
-    color: var(--theme-body-font-color);
+    color: var(--theme-body-font-color, var(--black-600));
     font-family: var(--theme-body-font-family);
     font-size: var(--fs-base);
     line-height: var(--lh-base);
@@ -34,7 +34,7 @@ body {
 body {
     box-sizing: border-box;
     min-height: 100%;
-    background-color: var(--theme-background-color);
+    background-color: var(--theme-background-color, var(--white));
 
     *,
     *:before,

package/lib/components/anchor/anchor.less

@@ -19,9 +19,9 @@
     }
 
     &&__default {
-        --_an-a-fc: var(--theme-link-color);
-        --_an-a-fc-hover: var(--theme-link-color-hover);
-        --_an-a-fc-visited: var(--theme-link-color-visited);
+        --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
+        --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
+        --_an-a-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
     }
 
     &&__grayscale {

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

@@ -44,6 +44,6 @@ describe("anchors", () => {
             <div data-testid="${testid}" class="s-card ws3 fc-green-500">
                 ${testid}: ${component}
             </div>
-        `
+        `,
     });
 });

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

@@ -46,6 +46,6 @@ describe("avatar", () => {
             >
                 ${component}
             </div>
-        `
+        `,
     });
 });

package/lib/components/banner/banner.less

@@ -37,8 +37,8 @@
     inset: 0 0 auto 0;
     padding: var(--su12);
     position: fixed;
-    -webkit-transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
-    transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
+    -webkit-transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
+    transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
     width: 100%;
     z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
 }

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

@@ -21,6 +21,6 @@ describe("button", () => {
         children: {
             default: "Ask question",
         },
-        tag: "button"
+        tag: "button",
     });
 });

package/lib/components/button/button.less

@@ -4,41 +4,41 @@
     --_bu-bc: transparent;
     // --_bu-bg: inherit; // [1]
     --_bu-br: var(--br-md);
-    --_bu-fc: var(--theme-button-color);
+    --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
     --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
     --_bu-fs: var(--fs-body1);
     --_bu-p: 0.8em;
     // STATE AND INTERACTION CUSTOM PROPERTIES
     --_bu-bc-selected: transparent;
-    --_bu-bg-active: var(--theme-button-active-background-color);
-    --_bu-bg-hover: var(--theme-button-hover-background-color);
-    --_bu-bg-selected: var(--theme-button-selected-background-color);
-    --_bu-fc-active: var(--theme-button-hover-color); // Note: hover color used here intentionally
-    --_bu-fc-hover: var(--theme-button-hover-color);
-    --_bu-fc-selected: var(--theme-button-selected-color);
+    --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
+    --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
+    --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
+    --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500)); // Note: hover color used here intentionally
+    --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
+    --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
     // Filled
     --_bu-filled-bc: transparent;
     --_bu-filled-bc-active: transparent;
     --_bu-filled-bc-selected: transparent;
-    --_bu-filled-bg: var(--theme-button-primary-background-color);
-    --_bu-filled-bg-active: var(--theme-button-primary-active-background-color);
-    --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color);
-    --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color);
-    --_bu-filled-fc: var(--theme-button-primary-color);
-    --_bu-filled-fc-active: var(--theme-button-primary-hover-color);
-    --_bu-filled-fc-hover: var(--theme-button-primary-hover-color);
-    --_bu-filled-fc-selected: var(--theme-button-primary-selected-color);
+    --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
+    --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
+    --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
+    --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
+    --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
+    --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
+    --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
+    --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
     // Outlined
-    --_bu-outlined-bc: var(--theme-button-outlined-border-color);
+    --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(----theme-secondary-400));
     --_bu-outlined-bg: var(--theme-button-outlined-background-color);
-    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
-    --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
-    --_bu-outlined-fc-selected: var(--theme-button-selected-color);
+    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(----theme-secondary-400));
+    --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
+    --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
     // CHILD COMPONENT CUSTOM PROPERTIES
     --_bu-badge-o: 0.5;
     --_bu-dropdown-bw: var(--su-static4);
     --_bu-number-fc: var(--white);
-    --_bu-number-fc-filled: var(--theme-button-primary-number-color);
+    --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600));
     --_bu-number-fc-selected: var(--white);
 
     // CONTEXTUAL STYLES
@@ -49,7 +49,7 @@
         --_bu-fc-selected: var(--white);
         --_bu-outlined-fc-selected: var(--white);
         --_bu-badge-o: 0.8;
-        --_bu-number-fc-selected: var(--theme-button-primary-number-color);
+        --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
     });
 
     // STATES
@@ -306,16 +306,16 @@
 
     // DEPRECATED - THE PRIMARY BUTTON STYLE IS TO BE REMOVED WITH V1 COLORS
     &&__primary {
-        --_bu-bg: var(--theme-button-primary-background-color);
-        --_bu-bg-active: var(--theme-button-primary-active-background-color);
-        --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
-        --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
-        --_bu-fc: var(--theme-button-primary-color);
-        --_bu-fc-active: var(--theme-button-primary-hover-color);
-        --_bu-fc-hover: var(--theme-button-primary-hover-color);
-        --_bu-fc-selected: var(--theme-button-primary-selected-color);
-        --_bu-number-fc: var(--theme-button-primary-number-color);
-        --_bu-number-fc-selected: var(--theme-button-primary-number-color);
+        --_bu-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
+        --_bu-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
+        --_bu-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
+        --_bu-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
+        --_bu-fc: var(--theme-button-primary-color, var(--white));
+        --_bu-fc-active: var(--theme-button-primary-hover-color, var(--white));
+        --_bu-fc-hover: var(--theme-button-primary-hover-color, var(--white));
+        --_bu-fc-selected: var(--theme-button-primary-selected-color, var(--white));
+        --_bu-number-fc: var(--theme-button-primary-number-color, var(--theme-secondary-600));
+        --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
 
         .highcontrast-mode({
             --_bu-bc: transparent;

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

@@ -44,6 +44,6 @@ describe("button", () => {
             >
                 ${component}
             </div>
-        `
+        `,
     });
 });

package/lib/components/code-block/code-block.a11y.test.ts

@@ -0,0 +1,30 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import highlightedFixtures from "./code-block.fixtures";
+import "../../index";
+
+describe("code block", () => {
+    Object.keys(highlightedFixtures).forEach((language) => {
+        runComponentTests({
+            type: "a11y",
+            tag: "pre",
+            baseClass: `s-code-block language-${language}`,
+            children: {
+                default: highlightedFixtures[language],
+            },
+            options: {
+                ...defaultOptions,
+                includeNullModifier: false,
+            },
+            // TODO new colors should resolve this issue
+            skippedTestids: [
+                "s-code-block-language-html-light",
+                "s-code-block-language-html-highcontrast-light",
+                "s-code-block-language-html-highcontrast-dark",
+                "s-code-block-language-html-dark",
+                "s-code-block-language-css-dark",
+                "s-code-block-language-javascript-dark",
+                "s-code-block-language-javascript-highcontrast-light",
+            ],
+        });
+    });
+});

package/lib/components/code-block/code-block.fixtures.ts

@@ -0,0 +1,88 @@
+import type { LanguageFn } from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import hljsJavascript from "highlight.js/lib/languages/javascript";
+import hljsCss from "highlight.js/lib/languages/css";
+import hljsHtml from "highlight.js/lib/languages/xml";
+
+const hljsLanguages: Record<string, LanguageFn> = {
+    javascript: hljsJavascript,
+    css: hljsCss,
+    html: hljsHtml,
+};
+
+const javascriptFixture = `
+import React, { Component } from 'react'
+import { IP } from '../constants/IP'
+import { withAuth0 } from '@auth0/auth0-react';
+
+class AddATournament extends Component {
+    componentDidMount() {
+        this.myNewListOfAllTournamentsWithAuth()
+    }
+}
+
+export default withAuth0(AddATournament);
+`;
+
+const cssFixture = `
+.s-input,
+.s-textarea {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 0;
+    padding: 0.6em 0.7em;
+    border: 1px solid var(--bc-darker);
+    border-radius: 3px;
+    background-color: var(--white);
+    color: var(--fc-dark);
+    font-size: 13px;
+    font-family: inherit;
+    line-height: 1.15384615;
+    scrollbar-color: var(--scrollbar) transparent;
+}
+@supports (-webkit-overflow-scrolling: touch) {
+    .s-input,
+    .s-textarea {
+        font-size: 16px;
+        padding: 0.36em 0.55em;
+    }
+    .s-input::-webkit-input-placeholder,
+    .s-textarea::-webkit-input-placeholder {
+        line-height: normal !important;
+    }
+}
+`;
+
+const htmlFixture = `
+<form class="d-flex gy4 fd-column">
+    <label class="flex--item s-label" for="question-title">Question title</label>
+    <div class="d-flex ps-relative">
+        <input class="flex--item s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
+    </div>
+</form>
+`;
+
+const fixtures: Record<string, string> = {
+    javascript: javascriptFixture,
+    css: cssFixture,
+    html: htmlFixture,
+};
+
+const highlightFixture = (fixture: string, language: string) => {
+    const hljsLanguage = hljsLanguages[language];
+    hljs.registerLanguage(language, hljsLanguage);
+
+    const highlightedCode = hljs.highlight(fixture, { language }).value;
+
+    return `<code>${highlightedCode}</code>`;
+};
+
+const highlightedFixtures = Object.keys(fixtures).reduce(
+    (acc, language) => {
+        acc[language] = highlightFixture(fixtures[language], language);
+        return acc;
+    },
+    {} as Record<string, string>
+);
+
+export default highlightedFixtures;

package/lib/components/code-block/code-block.visual.test.ts

@@ -0,0 +1,20 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import highlightedFixtures from "./code-block.fixtures";
+import "../../index";
+
+describe("code block", () => {
+    Object.keys(highlightedFixtures).forEach((language) => {
+        runComponentTests({
+            type: "visual",
+            tag: "pre",
+            baseClass: `s-code-block language-${language}`,
+            children: {
+                default: highlightedFixtures[language],
+            },
+            options: {
+                ...defaultOptions,
+                includeNullModifier: false,
+            },
+        });
+    });
+});

package/lib/components/link/link.less

@@ -2,9 +2,9 @@
 // it's tech debt that'll take some doing in consumer's code to pay down.
 a,
 .s-link {
-    --_li-fc: var(--theme-link-color);
-    --_li-fc-hover: var(--theme-link-color-hover);
-    --_li-fc-visited: var(--theme-link-color-visited);
+    --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
+    --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
+    --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
@@ -53,9 +53,9 @@ a,
         }
 
         &__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
-            --_li-fc: var(--theme-link-color-visited);
-            --_li-fc-hover: var(--theme-link-color-hover);
-            --_li-fc-visited: var(--theme-link-color-visited);
+            --_li-fc: var(--theme-link-color-visited, var(--theme-secondary-500));
+            --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
+            --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
         }
 
         // VARIANTS

package/lib/components/link-preview/link-preview.less

@@ -109,7 +109,7 @@
         &:hover{
             &,
             &.s-link__visited {
-                color: var(--theme-link-color-hover);
+                color: var(--theme-link-color-hover, var(--theme-secondary-400));
             }
         }
 
@@ -126,10 +126,10 @@
         }
 
         &.s-link__visited:visited {
-            color: var(--theme-link-color);
+            color: var(--theme-link-color, var(--theme-secondary-400));
         }
 
-        color: var(--theme-link-color);
+        color: var(--theme-link-color, var(--theme-secondary-400));
         cursor: pointer;
         text-decoration: none;
     }