@uh-design-system/component-library 0.7.1 → 0.7.2-rc.1

package/dist/collection/components/01-base-components/ds-combobox/stories/ds-combobox.features.stories.js

@@ -0,0 +1,166 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+const meta = {
+    title: 'Base Components/Combobox/Features',
+    component: 'ds-combobox',
+};
+export default meta;
+const renderDsOption = (dsValue, dsLabel, dsDescription) => html `
+  <ds-option ds-value=${dsValue} ds-description=${ifDefined(dsDescription)}>${dsLabel}</ds-option>
+`;
+const renderDsOptions = (length = 3, from = 1) => html `
+  ${Array.from({ length }, (_, i) => renderDsOption(`option${i + from}`, `Option ${i + from}`))}
+`;
+export const AriaLabel = {
+    render: () => html `
+    <ds-combobox
+      ds-aria-label="Select an option"
+      ds-icon="search"
+    >
+      ${renderDsOptions()}
+    </ds-combobox>
+  `,
+};
+export const GroupedOptions = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      <ds-option-group ds-label="Group 1">
+        ${renderDsOptions(2, 1)}
+      </ds-option-group>
+      <ds-option-group ds-label="Group 2">
+        ${renderDsOptions(2, 3)}
+      </ds-option-group>
+    </ds-combobox>
+  `,
+};
+export const Disabled = {
+    render: () => html `
+    <ds-combobox
+      ds-disabled="true"
+      ds-label="Disabled Combobox"
+    >
+      ${renderDsOptions()}
+    </ds-combobox>
+  `,
+};
+export const Invalid = {
+    render: () => html `
+    <ds-combobox
+      ds-error-text="Error text"
+      ds-label="Invalid Combobox"
+    >
+      ${renderDsOptions()}
+    </ds-combobox>
+  `,
+};
+export const LongList = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      ${renderDsOptions(30)}
+    </ds-combobox>
+  `,
+};
+export const LongGroupedList = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      <ds-option-group ds-label="Group 1">
+        ${renderDsOptions(10, 1)}
+      </ds-option-group>
+      <ds-option-group ds-label="Group 2">
+        ${renderDsOptions(10, 11)}
+      </ds-option-group>
+      <ds-option-group ds-label="Group 3">
+        ${renderDsOptions(10, 21)}
+      </ds-option-group>
+    </ds-combobox>
+  `,
+};
+export const WithIcon = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+      ds-icon="language"
+    >
+      ${renderDsOptions()}
+    </ds-combobox>
+  `,
+};
+export const WithDescriptions = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      ${renderDsOption('option1', 'Option 1', 'This is the first option')}
+      ${renderDsOption('option2', 'Option 2', 'This is the second option')}
+      ${renderDsOption('option3', 'Option 3', 'This is the third option')}
+    </ds-combobox>
+  `,
+};
+export const LongOptionText = {
+    render: () => html `
+    <ds-combobox
+      ds-label="Select an option"
+    >
+      ${renderDsOption('option1', 'This is a very long option text that should be truncated if it exceeds the width of the combobox')}
+      ${renderDsOption('option2', 'Another long option text that might not fit in the combobox')}
+      ${renderDsOption('option3', 'Short option')}
+    </ds-combobox>
+  `,
+};
+const createDsOption = (value, label) => {
+    const option = document.createElement('ds-option');
+    option.setAttribute('ds-value', value);
+    option.textContent = label;
+    return option;
+};
+const createDsOptions = (length, start = 1) => {
+    return Array.from({ length }, (_, i) => createDsOption(`option${i + start}`, `Option ${i + start}`));
+};
+const renderDynamicOptions = (prop, ms = 3000) => {
+    let appendChildren = true;
+    const div = document.createElement('div');
+    const p = document.createElement('p');
+    p.textContent = `The state is toggled every ${ms / 1000} seconds.`;
+    const combobox = document.createElement('ds-combobox');
+    combobox.dsLabel = 'Select an option';
+    combobox[prop] = true;
+    setInterval(() => {
+        if (appendChildren) {
+            combobox[prop] = false;
+            const options = createDsOptions(3);
+            options.forEach(option => combobox.appendChild(option));
+        }
+        else {
+            combobox[prop] = true;
+            const options = combobox.querySelectorAll('ds-option');
+            options.forEach(option => option.remove());
+        }
+        appendChildren = !appendChildren;
+    }, ms);
+    div.appendChild(p);
+    div.appendChild(combobox);
+    return div;
+};
+export const DynamicOptionsLoading = {
+    render: () => renderDynamicOptions('dsLoading', 3000),
+};
+export const DynamicOptionsError = {
+    render: () => renderDynamicOptions('dsOptionsError', 3000),
+};
+export const CustomTagName = {
+    render: () => html `
+    <custom-ds-combobox
+      ds-label="custom-ds-combobox"
+    >
+      <custom-ds-option ds-value="option1">Option 1</custom-ds-option>
+      <custom-ds-option ds-value="option2">Option 2</custom-ds-option>
+      <custom-ds-option ds-value="option3">Option 3</custom-ds-option>
+    </custom-ds-combobox>
+  `,
+};

package/dist/collection/components/01-base-components/ds-combobox/stories/ds-combobox.stories.js

@@ -0,0 +1,72 @@
+import { html } from "lit";
+const meta = {
+    title: 'Base Components/Combobox',
+    component: 'ds-combobox',
+};
+export default meta;
+const options = [
+    { value: 'cat', label: 'Cat' },
+    { value: 'wildcat', label: 'Wildcat' },
+    { value: 'bobcat', label: 'Bobcat' },
+    { value: 'catfish', label: 'Catfish' },
+    { value: 'housecat', label: 'Housecat' },
+];
+export const Default = {
+    args: {
+        dsFilteringStrategy: 'dynamic',
+        dsLabel: 'Select an option',
+    },
+    render: (args) => html `
+    <ds-combobox
+      ds-filtering-strategy=${args.dsFilteringStrategy}
+      ds-label=${args.dsLabel}
+      ?ds-placeholder=${args.dsPlaceholder}
+      @dsChange=${(event) => {
+        const output = document.getElementById('combobox-output__selected-value');
+        if (output) {
+            output.textContent = event.detail || 'None';
+        }
+    }}
+    >
+      ${options.map((option) => html `<ds-option ds-value=${option.value}>${option.label}</ds-option>`)}
+    </ds-combobox>
+  `,
+};
+export const Playground = {
+    args: {
+        dsId: 'playground-combobox',
+        dsLabel: 'Playground Combobox',
+        dsAssistiveText: '',
+        dsIcon: '',
+        dsPlaceholder: 'Select an option',
+        dsPlaceholderHidden: false,
+        dsDisabled: false,
+        dsAriaLabel: '',
+        dsClearable: true,
+        dsErrorText: '',
+        dsFilteringStrategy: 'dynamic',
+        dsLoading: false,
+        dsOptionsError: false,
+        dsNoResults: false,
+    },
+    render: (args) => html `
+    <ds-combobox
+      ds-id=${args.dsId}
+      ds-label=${args.dsLabel}
+      ds-assistive-text=${args.dsAssistiveText}
+      ds-icon=${args.dsIcon}
+      ds-placeholder=${args.dsPlaceholder}
+      ds-placeholder-hidden=${args.dsPlaceholderHidden}
+      ds-disabled=${args.dsDisabled}
+      ds-aria-label=${args.dsAriaLabel}
+      ds-clearable=${args.dsClearable}
+      ds-error-text=${args.dsErrorText}
+      ds-filtering-strategy=${args.dsFilteringStrategy}
+      ds-loading=${args.dsLoading}
+      ds-options-error=${args.dsOptionsError}
+      ds-no-results=${args.dsNoResults}
+    >
+      ${options.map((option) => html `<ds-option ds-value=${option.value}>${option.label}</ds-option>`)}
+    </ds-combobox>
+  `,
+};

package/dist/collection/components/01-base-components/ds-grid/ds-grid.css

@@ -7,6 +7,78 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 .ds-grid {
   display: flex;
   flex-flow: wrap;

package/dist/collection/components/01-base-components/ds-grid/ds-grid.js

@@ -27,14 +27,14 @@ export class DsGrid {
         const classes = classNames('ds-grid', {
             'ds-grid--container': this.dsContainer,
         });
-        return (h(Host, { key: '52eed8bf11cbc3facc984438bcee9df2b15b5567', class: classes, style: {
+        return (h(Host, { key: 'a94d11ee7a97bc2ef58afd18b8955ade079b7deb', class: classes, style: {
                 '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
                 '--ds-parent-size-tablet': `${this.dsParentSizeTablet}`,
                 '--ds-parent-size-desktop': `${this.dsParentSizeDesktop}`,
                 '--ds-size-mobile': `${this.dsSizeMobile ? this.dsSizeMobile * 3 : this.dsSize}`,
                 '--ds-size-tablet': `${this.dsSizeTablet ? this.dsSizeTablet * 2 : this.dsSize}`,
                 '--ds-size-desktop': `${this.dsSizeDesktop || this.dsSize}`,
-            } }, h("slot", { key: '4a6f4d9e32064cdcfd86995d460cdbe5ce8eccdc' })));
+            } }, h("slot", { key: '56f3755b02a21b44bdabe9dc5f5aa6e8ada186ed' })));
     }
     static get is() { return "ds-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/01-base-components/ds-icon/ds-icon.js

@@ -15,7 +15,7 @@ export class DsIcon {
     render() {
         const iconComponentName = `ds-icon-${this.dsName.replace(/_/g, "-")}`;
         const IconTag = transformTagName(iconComponentName, 'ds-icon', this.el);
-        return (h(Fragment, { key: '7eaf2c94d82646aced5d1809adf1dc3878f462ab' }, h("span", { key: '534afbeb6d1aefaac7dd700a5925deef5f800dcb', class: "ds-icon--container", "aria-hidden": this.dsHidden ? 'true' : 'false' }, h(IconTag, { key: '528a25680f0198ba67054c23adab754aeff179f1', dsSize: remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: this.dsRole, dsTitle: this.dsTitle }))));
+        return (h(Fragment, { key: '07581e5bc92ec162bee2975b6baa64c1803b5c38' }, h("span", { key: '1537fe69ea7815c3611551269b8ead4c68511342', class: "ds-icon--container", "aria-hidden": this.dsHidden ? 'true' : 'false' }, h(IconTag, { key: 'c8b81d1b90b6434698e793db95916e2d7493d5db', dsSize: remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: this.dsRole, dsTitle: this.dsTitle }))));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-icon/stories/ds-icon.stories.js

@@ -1,5 +1,5 @@
 import { icons } from "../../../00-foundations/icons/iconList";
-import { getColourVariables } from "../../../../utils/colours/colourUtils";
+import { getPaletteCssVariables } from "../../../00-foundations/colours/utils";
 const meta = {
     title: 'Base Components/Icon',
     component: 'ds-icon',
@@ -11,7 +11,7 @@ const meta = {
             },
         },
         dsColour: {
-            options: getColourVariables('palette').map(colour => colour.name),
+            options: getPaletteCssVariables().map(({ name }) => name),
             control: {
                 type: 'select',
             },

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css

@@ -7,6 +7,78 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 .ds-input-validity {
   display: flex;
   align-items: center;
@@ -14,10 +86,10 @@
   gap: var(--ds-spacing-2xSmall);
 }
 .ds-input-validity--error {
-  color: var(--ds-palette-red-70);
+  color: var(--ds-textColor-danger);
 }
 .ds-input-validity--success {
-  color: var(--ds-palette-green-70);
+  color: var(--ds-textColor-success);
 }
 .ds-input-validity__icon {
   display: block;

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js

@@ -20,7 +20,7 @@ export class DsInputValidity {
         });
         const icon = this.dsType === 'success' ? 'check_circle_fill' : 'warning_fill';
         const DsIcon = transformTagName('ds-icon', 'ds-input-validity', this.el);
-        return (h("div", { key: 'd39ec88fafa158e6ae3e0fde34ab9012454507a8', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (h("div", { key: '8c3863ba4dde84c806fd994af040cc91265f9679', class: classes }, h(DsIcon, { key: '221dd7009c9a3fc02fbf29d85abe4640ff26d3ce', class: "ds-input-validity__icon", dsName: icon }), h("small", { key: '7709de0ba98a75ab413a24309ca20d224f34ea25', id: this.identifier }, this.dsText)))));
+        return (h("div", { key: 'd3f2ee11099c03634e4aa883047b0b3e703a4396', role: this.dsValidityRole, "aria-live": this.dsAriaLive, "aria-atomic": this.dsAriaAtomic }, this.dsText && (h("div", { key: '50cea574413bea4202c41515d2099c4804a433e1', class: classes }, h(DsIcon, { key: '4c8e325756ed286ad16af21774f35b34835cfb51', class: "ds-input-validity__icon", dsName: icon }), h("small", { key: 'f8eb469911f41094c9f071645dbc29f364cad8c3', id: this.identifier }, this.dsText)))));
     }
     static get is() { return "ds-input-validity"; }
     static get originalStyleUrls() {

package/dist/collection/components/01-base-components/ds-link/ds-link.css

@@ -7,6 +7,78 @@
   --ds-breakpoint-xLarge: 90rem;
 }
 
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 :host {
   display: inline-block;
 }
@@ -15,7 +87,7 @@
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-textColor-link);
   font-weight: var(--ds-fontWeight-regular);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
@@ -27,8 +99,8 @@
   text-underline-position: from-font;
 }
 .ds-link:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-link--semibold {
@@ -76,42 +148,42 @@
   text-underline-offset: 12%;
 }
 .ds-link:hover {
-  color: var(--ds-palette-mainBlue-80);
+  color: var(--ds-textColor-link-hover);
 }
 .ds-link:active {
-  color: var(--ds-palette-mainBlue-90);
+  color: var(--ds-textColor-link-active);
 }
 .ds-link:visited {
-  color: #551a8b;
+  color: var(--ds-textColor-link-visited);
 }
 .ds-link--standalone {
-  color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-textColor-link);
   text-decoration-line: none;
 }
 .ds-link--standalone:hover, .ds-link--standalone:active {
   text-decoration-line: underline;
 }
 .ds-link--standalone:hover {
-  color: var(--ds-palette-mainBlue-80);
+  color: var(--ds-textColor-link-hover);
 }
 .ds-link--standalone:active {
-  color: var(--ds-palette-mainBlue-90);
+  color: var(--ds-textColor-link-active);
 }
 .ds-link--standalone:focus-visible {
-  color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-textColor-link);
 }
 .ds-link--standalone:visited {
-  color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-textColor-link);
 }
 .ds-link--colour-white {
-  color: var(--ds-palette-white);
+  color: var(--ds-textColor-white);
 }
 .ds-link--colour-white:hover, .ds-link--colour-white:active, .ds-link--colour-white:visited, .ds-link--colour-white:focus-visible {
-  color: var(--ds-palette-white);
+  color: var(--ds-textColor-white);
 }
 .ds-link--colour-black {
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 .ds-link--colour-black:hover, .ds-link--colour-black:active, .ds-link--colour-black:visited, .ds-link--colour-black:focus-visible {
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }

package/dist/collection/components/01-base-components/ds-link/stories/ds-link.features.stories.js

@@ -64,7 +64,12 @@ export const OpensInANewTab = {
         dsHref: '#',
         dsTarget: '_blank',
     },
-    play: async ({ canvasElement, step }) => {
+    parameters: {
+        visualTests: {
+            disable: true,
+        },
+    },
+    play: async ({ context, canvasElement, step }) => {
         const shadowRoot = await getShadowRoot(canvasElement, 'ds-link');
         const anchorElem = shadowRoot.querySelector('a');
         const visuallyHiddenElem = shadowRoot.querySelector('ds-visually-hidden');
@@ -78,6 +83,7 @@ export const OpensInANewTab = {
         await step('Has an end icon', async () => {
             expect(iconEnd).toBeInTheDocument();
         });
+        await window.takeScreenshot?.(context.id);
     }
 };
 export const IconPosition = {