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

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

@@ -1,3 +1,75 @@
+: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 *, .ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
@@ -16,7 +88,7 @@
 :host {
   display: inline-block;
 }
-:host[dsFullWidth], :host[ds-full-width] {
+:host:has(.ds-button--full-width) {
   width: 100%;
 }
 
@@ -92,197 +164,197 @@
   margin-left: var(--ds-spacing-3xSmall);
 }
 .ds-button.primary.blue {
-  background-color: var(--ds-palette-mainBlue-70);
+  background-color: var(--ds-bgColor-primary);
   border-color: transparent;
-  color: var(--ds-palette-white);
+  color: var(--ds-textColor-white);
 }
 .ds-button.primary.blue: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-button.primary.blue:hover {
-  background-color: var(--ds-palette-mainBlue-80);
+  background-color: var(--ds-bgColor-primary-hover);
 }
 .ds-button.primary.blue:active, .ds-button.primary.blue--active {
-  background-color: var(--ds-palette-mainBlue-90);
+  background-color: var(--ds-bgColor-primary-active);
 }
 .ds-button.primary.blue.disabled, .ds-button.primary.blue:disabled {
-  background-color: var(--ds-overlay-black-10);
+  background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
-  color: var(--ds-palette-black-40);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-button.primary.black {
-  background-color: var(--ds-palette-black-95);
+  background-color: var(--ds-bgColor-black);
   border-color: transparent;
-  color: var(--ds-palette-white);
+  color: var(--ds-textColor-white);
 }
 .ds-button.primary.black: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-button.primary.black:hover {
-  background-color: var(--ds-palette-black-80);
+  background-color: var(--ds-bgColor-black-hover);
 }
 .ds-button.primary.black:active, .ds-button.primary.black--active {
-  background-color: var(--ds-palette-black-70);
+  background-color: var(--ds-bgColor-black-active);
 }
 .ds-button.primary.black.disabled, .ds-button.primary.black:disabled {
-  background-color: var(--ds-overlay-black-10);
+  background-color: var(--ds-bgColor-disabled-onLight);
   border-color: transparent;
-  color: var(--ds-palette-black-40);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-button.primary.white {
-  background-color: var(--ds-palette-white);
+  background-color: var(--ds-bgColor-white);
   border-color: transparent;
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 .ds-button.primary.white:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.primary.white:hover {
-  background-color: var(--ds-palette-black-10);
+  background-color: var(--ds-bgColor-white-hover);
 }
 .ds-button.primary.white:active, .ds-button.primary.white--active {
-  background-color: var(--ds-palette-black-20);
+  background-color: var(--ds-bgColor-white-active);
 }
 .ds-button.primary.white.disabled, .ds-button.primary.white:disabled {
-  background-color: var(--ds-overlay-white-10);
+  background-color: var(--ds-bgColor-disabled-onDark);
   border-color: transparent;
-  color: var(--ds-overlay-white-40);
+  color: var(--ds-textColor-disabled-onDark);
 }
 .ds-button.secondary.blue {
-  background-color: var(--ds-palette-white);
-  border-color: var(--ds-palette-mainBlue-70);
-  color: var(--ds-palette-mainBlue-70);
+  background-color: var(--ds-bgColor-secondary);
+  border-color: var(--ds-borderColor-primary);
+  color: var(--ds-textColor-primary);
 }
 .ds-button.secondary.blue: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-button.secondary.blue:hover {
-  background-color: var(--ds-palette-mainBlue-05);
+  background-color: var(--ds-bgColor-secondary-hover);
 }
 .ds-button.secondary.blue:active, .ds-button.secondary.blue--active {
-  background-color: var(--ds-palette-mainBlue-10);
+  background-color: var(--ds-bgColor-secondary-active);
 }
 .ds-button.secondary.blue.disabled, .ds-button.secondary.blue:disabled {
-  background-color: var(--ds-palette-white);
-  border-color: var(--ds-overlay-black-15);
-  color: var(--ds-palette-black-40);
+  background-color: var(--ds-bgColor-secondary);
+  border-color: var(--ds-borderColor-disabled-onLight);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-button.secondary.black {
   background-color: transparent;
-  border-color: var(--ds-palette-black-95);
-  color: var(--ds-palette-black-95);
+  border-color: var(--ds-borderColor-black);
+  color: var(--ds-textColor-default);
 }
 .ds-button.secondary.black: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-button.secondary.black:hover {
-  background-color: var(--ds-overlay-black-10);
+  background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
 .ds-button.secondary.black:active, .ds-button.secondary.black--active {
-  background-color: var(--ds-overlay-black-15);
+  background-color: var(--ds-bgColor-transparent-onLight-active);
 }
 .ds-button.secondary.black.disabled, .ds-button.secondary.black:disabled {
   background-color: transparent;
-  border-color: var(--ds-overlay-black-15);
-  color: var(--ds-palette-black-40);
+  border-color: var(--ds-borderColor-disabled-onLight);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-button.secondary.white {
   background-color: transparent;
-  border-color: var(--ds-palette-white);
-  color: var(--ds-palette-white);
+  border-color: var(--ds-borderColor-white);
+  color: var(--ds-textColor-white);
 }
 .ds-button.secondary.white:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.secondary.white:hover {
-  background-color: var(--ds-overlay-white-30);
+  background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
 .ds-button.secondary.white:active, .ds-button.secondary.white--active {
-  background-color: var(--ds-overlay-white-40);
+  background-color: var(--ds-bgColor-transparent-onDark-active);
 }
 .ds-button.secondary.white.disabled, .ds-button.secondary.white:disabled {
   background-color: transparent;
-  border-color: var(--ds-overlay-white-15);
-  color: var(--ds-overlay-white-40);
+  border-color: var(--ds-borderColor-disabled-onDark);
+  color: var(--ds-textColor-disabled-onDark);
 }
 .ds-button.supplementary.blue {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-textColor-primary);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
 .ds-button.supplementary.blue: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-button.supplementary.blue:hover {
-  background-color: var(--ds-palette-mainBlue-05);
+  background-color: var(--ds-bgColor-secondary-hover);
 }
 .ds-button.supplementary.blue:active, .ds-button.supplementary.blue--active {
-  background-color: var(--ds-palette-mainBlue-10);
+  background-color: var(--ds-bgColor-secondary-active);
 }
 .ds-button.supplementary.blue.disabled, .ds-button.supplementary.blue:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-palette-black-40);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-button.supplementary.black {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
 .ds-button.supplementary.black: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-button.supplementary.black:hover {
-  background-color: var(--ds-overlay-black-10);
+  background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
 .ds-button.supplementary.black:active, .ds-button.supplementary.black--active {
-  background-color: var(--ds-overlay-black-15);
+  background-color: var(--ds-bgColor-transparent-onLight-active);
 }
 .ds-button.supplementary.black.disabled, .ds-button.supplementary.black:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-palette-black-40);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-button.supplementary.white {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-palette-white);
+  color: var(--ds-textColor-white);
   padding-right: var(--ds-spacing-4xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
 .ds-button.supplementary.white:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-white);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.supplementary.white:hover {
-  background-color: var(--ds-overlay-white-30);
+  background-color: var(--ds-bgColor-transparent-onDark-hover);
 }
 .ds-button.supplementary.white:active, .ds-button.supplementary.white--active {
-  background-color: var(--ds-overlay-white-40);
+  background-color: var(--ds-bgColor-transparent-onDark-active);
 }
 .ds-button.supplementary.white.disabled, .ds-button.supplementary.white:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-overlay-white-40);
+  color: var(--ds-textColor-disabled-onDark);
 }

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

@@ -97,6 +97,7 @@ export class DsButton {
             'icon-start': this.dsIcon && this.dsIconPosition === 'start' && this.hasContent,
             'icon-end': this.dsIcon && this.dsIconPosition === 'end' && this.hasContent,
             'icon-only': this.dsIcon && !this.hasContent,
+            'ds-button--full-width': this.dsFullWidth,
         });
         const iconClasses = classNames('ds-button__icon');
         const iconSize = this.dsSize === 'small' ? '1rem' : undefined;

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

@@ -1,11 +1,24 @@
 import { html } from "lit";
 import { litTemplateResultToString } from "../../../../utils/utils";
-import { handleButtonLoading } from "../../../../utils/button/buttonUtils";
 const meta = {
     title: 'Base Components/Button/Examples',
     component: 'ds-button',
 };
 export default meta;
+function handleButtonLoading(buttonElement, originalValue, loadValue, loadingDuration = 3000) {
+    if (buttonElement.getAttribute('ds-is-loading') === 'true')
+        return;
+    const originalIsLoading = buttonElement.getAttribute('ds-is-loading') || 'false';
+    const originalAriaDisabled = buttonElement.getAttribute('ds-aria-disabled') || 'false';
+    buttonElement.setAttribute('ds-value', loadValue);
+    buttonElement.setAttribute('ds-is-loading', 'true');
+    buttonElement.setAttribute('ds-aria-disabled', 'true');
+    setTimeout(() => {
+        buttonElement.setAttribute('ds-value', originalValue);
+        buttonElement.setAttribute('ds-is-loading', originalIsLoading);
+        buttonElement.setAttribute('ds-aria-disabled', originalAriaDisabled);
+    }, loadingDuration);
+}
 const dsSbButtonGroupStyle = html `
   <style>
     .ds-sb-button-group {

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

@@ -99,26 +99,44 @@ export const IconOnly = {
     }
 };
 export const FullWidth = {
-    render: () => html `<ds-button ds-full-width ds-value="Full width"></ds-button>`
+    args: {
+        dsValue: 'Full width',
+        dsFullWidth: true,
+    }
 };
 export const FullWidthWithStartIcon = {
-    render: () => html `<ds-button ds-full-width ds-icon="ds_flame" ds-value="Full width"></ds-button>`
+    args: {
+        dsFullWidth: true,
+        dsIcon: 'ds_flame',
+        dsValue: 'Full width',
+    }
 };
 export const FullWidthWithEndIcon = {
-    render: () => html `<ds-button ds-full-width ds-icon="ds_flame" ds-icon-position="end" ds-value="Full width"></ds-button>`
+    args: {
+        dsFullWidth: true,
+        dsIcon: 'ds_flame',
+        dsIconPosition: 'end',
+        dsValue: 'Full width',
+    }
 };
 export const ProgrammaticFocus = {
     args: {
         dsValue: 'Primary',
         dsVariant: 'primary',
     },
-    play: async ({ canvasElement, step }) => {
+    parameters: {
+        visualTests: {
+            disable: true,
+        },
+    },
+    play: async ({ context, canvasElement, step }) => {
         const dsElem = await getDsElem(canvasElement, 'ds-button');
         const buttonElem = dsElem.querySelector('button');
         await step('Calling `dsFocus` should set focus to inner button element', async () => {
             await dsElem.dsFocus();
             expect(buttonElem).toHaveFocus();
         });
+        await window.takeScreenshot?.(context.id);
     }
 };
 export const CustomTagName = {

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

@@ -1,3 +1,75 @@
+: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);
+}
+
 :root,
 :host {
   --ds-breakpoint-xSmall: 20rem;
@@ -12,9 +84,9 @@
 }
 
 .ds-card {
-  background-color: var(--ds-palette-white);
-  border: 1px solid var(--ds-palette-black-20);
-  color: var(--ds-palette-black-95);
+  background-color: var(--ds-bgColor-white);
+  border: 1px solid var(--ds-borderColor-light);
+  color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
   display: flex;
   flex-direction: column;
@@ -22,8 +94,8 @@
   margin-bottom: var(--ds-spacing-2xSmall);
 }
 .ds-card:focus-within {
-  box-shadow: false 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  box-shadow: false 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * -1);
 }
 .ds-card:focus-within .ds-card__heading {
@@ -31,30 +103,30 @@
   text-underline-offset: 2px;
 }
 .ds-card.ds-card--link:hover {
-  border-color: var(--ds-palette-black-50);
+  border-color: var(--ds-borderColor-default);
   cursor: pointer;
 }
 .ds-card.ds-card--link:hover .ds-card__icon {
-  color: var(--ds-palette-black-80);
+  color: var(--ds-textColor-link-standalone-hover);
 }
 .ds-card.ds-card--link:hover .ds-card__heading {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 .ds-card.ds-card--link:active {
-  border-color: var(--ds-palette-black-95);
+  border-color: var(--ds-borderColor-black);
 }
 .ds-card.ds-card--link:active .ds-card__icon {
-  color: var(--ds-palette-black-80);
+  color: var(--ds-textColor-link-standalone-hover);
 }
 .ds-card.ds-card--link {
   text-decoration: none;
 }
 .ds-card.ds-card--link:focus-within .ds-card__icon {
-  color: var(--ds-palette-black-80);
+  color: var(--ds-textColor-link-standalone-hover);
 }
 .ds-card--filled {
-  background-color: var(--ds-palette-black-05);
+  background-color: var(--ds-bgColor-neutral);
 }
 .ds-card__image-container {
   aspect-ratio: 16/9;
@@ -80,7 +152,7 @@
   gap: var(--ds-spacing-3xSmall);
 }
 .ds-card__eyebrow {
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -92,7 +164,7 @@
 }
 .ds-card__heading {
   align-items: center;
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   display: flex;
   font-size: var(--ds-fontSize-20);
   font-family: var(--ds-fontFamily-body);
@@ -108,7 +180,7 @@
 .ds-card__subtitle {
   font-size: var(--ds-fontSize-16);
   font-family: var(--ds-fontFamily-body);
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
   order: 3;
@@ -118,13 +190,13 @@
   font-size: var(--ds-fontSize-16);
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   padding: 0 var(--ds-spacing-small);
   margin: 0 0 var(--ds-spacing-small) 0;
   text-wrap: pretty;
 }
 .ds-card .ds-card__icon {
-  color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-textColor-primary);
   font-size: var(--ds-fontSize-20);
   font-weight: normal;
 }