@uh-design-system/component-library 0.5.2 → 0.6.0

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

@@ -16,7 +16,7 @@ export const WithLinkInBody = {
 };
 export const WithInputInBody = {
     render: () => html `
-    <ds-accordion variant="compact">
+    <ds-accordion ds-variant="compact">
       <div slot="header">${exampleHeader}</div>
       <div slot="content">
         ${exampleContent}
@@ -27,15 +27,15 @@ export const WithInputInBody = {
 };
 export const MultipleAccordions = {
     render: () => html `
-    <ds-accordion accordion-id="ac-1">
+    <ds-accordion ds-accordion-id="ac-1">
       <div slot="header">First Accordion</div>
       <div slot="content">${exampleContent}</div>
     </ds-accordion>
-    <ds-accordion accordion-id="ac-2">
+    <ds-accordion ds-accordion-id="ac-2">
       <div slot="header">Second Accordion</div>
       <div slot="content">${exampleContent}</div>
     </ds-accordion>
-    <ds-accordion accordion-id="ac-3">
+    <ds-accordion ds-accordion-id="ac-3">
       <div slot="header">Third Accordion</div>
       <div slot="content">${exampleContent}</div>
     </ds-accordion>
@@ -43,11 +43,11 @@ export const MultipleAccordions = {
 };
 export const LongTitles = {
     render: () => html `
-    <ds-accordion accordion-id="ac-1">
+    <ds-accordion ds-accordion-id="ac-1">
       <div slot="header">${generateLoremIpsum({ paragraphs: 2, wordsPerParagraph: 20, consistent: true })}</div>
       <div slot="content">${exampleContent}</div>
     </ds-accordion>
-    <ds-accordion accordion-id="ac-2">
+    <ds-accordion ds-accordion-id="ac-2">
       <div slot="header">${generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30, consistent: true })}</div>
       <div slot="content">
         <p>${generateLoremIpsum({ paragraphs: 5, wordsPerParagraph: 20 })}</p>

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

@@ -9,70 +9,70 @@ const exampleContent = generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30
 export default meta;
 export const VariantDefault = {};
 VariantDefault.args = {
-    variant: 'default',
+    dsVariant: 'default',
 };
 VariantDefault.render = (args) => html `
-  <ds-accordion variant="${args.variant}">
+  <ds-accordion ds-variant="${args.dsVariant}">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>
 `;
 export const VariantCompact = {};
 VariantCompact.args = {
-    variant: 'compact',
+    dsVariant: 'compact',
 };
 VariantCompact.render = (args) => html `
-  <ds-accordion variant="${args.variant}">
+  <ds-accordion ds-variant="${args.dsVariant}">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>
 `;
 export const BorderAligned = {};
 BorderAligned.args = {
-    borderAligned: true,
+    dsBorderAligned: true,
 };
 BorderAligned.render = (args) => html `
-  <ds-accordion border-aligned="${args.borderAligned}">
+  <ds-accordion ds-border-aligned="${args.dsBorderAligned}">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>
 `;
 export const WithCloseButton = {};
 WithCloseButton.args = {
-    useCloseButton: true,
+    dsUseCloseButton: true,
 };
 WithCloseButton.render = (args) => html `
-  <ds-accordion use-close-button="${args.useCloseButton}" open-by-default="true">
+  <ds-accordion ds-use-close-button="${args.dsUseCloseButton}" ds-open-by-default="true">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>
 `;
 export const OpenByDefault = {};
 OpenByDefault.args = {
-    openByDefault: true,
+    dsOpenByDefault: true,
 };
 OpenByDefault.render = (args) => html `
-  <ds-accordion open-by-default="${args.openByDefault}">
+  <ds-accordion ds-open-by-default="${args.dsOpenByDefault}">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>
 `;
 export const CustomIdForAccordion = {};
 CustomIdForAccordion.args = {
-    accordionId: 'custom-id',
+    dsAccordionId: 'custom-id',
 };
 CustomIdForAccordion.render = (args) => html `
-  <ds-accordion accordion-id="${args.accordionId}">
+  <ds-accordion ds-accordion-id="${args.dsAccordionId}">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>
 `;
 export const HeadingLevel = {};
 HeadingLevel.args = {
-    headingLevel: 3,
+    dsHeadingLevel: 3,
 };
 HeadingLevel.render = (args) => html `
-  <ds-accordion heading-level="${args.headingLevel}">
+  <ds-accordion ds-heading-level="${args.dsHeadingLevel}">
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
   </ds-accordion>

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

@@ -3,74 +3,31 @@ import { html } from "lit";
 const meta = {
     title: 'Base Components/Accordion',
     component: 'ds-accordion',
-    argTypes: {
-        variant: {
-            options: ['default', 'compact'],
-            control: {
-                type: 'radio',
-            },
-            name: 'Variant',
-        },
-        useCloseButton: {
-            control: {
-                type: 'boolean'
-            },
-            name: 'Use close button',
-        },
-        borderAligned: {
-            control: {
-                type: 'boolean'
-            },
-            name: 'Border aligned',
-        },
-        openByDefault: {
-            control: {
-                type: 'boolean'
-            },
-            name: 'Accordion open by default',
-        },
-        headingLevel: {
-            control: {
-                type: 'number'
-            },
-            name: 'Heading level for accordion open button'
-        },
-        accordionId: {
-            control: {
-                type: 'text'
-            },
-            name: 'Custom id for accordion element'
-        },
-        hideTopBorder: {
-            control: {
-                type: 'boolean'
-            },
-            name: 'Hide top border'
-        },
-    },
 };
 const exampleHeader = generateLoremIpsum();
 const exampleContent = generateLoremIpsum({ paragraphs: 3, wordsPerParagraph: 30 });
 export default meta;
 export const Default = {};
 Default.args = {
-    variant: 'default',
-    useCloseButton: false,
-    borderAligned: false,
-    openByDefault: false,
-    headingLevel: 2,
-    accordionId: 'dsaccordion',
-    hideTopBorder: false,
+    dsVariant: 'default',
+    dsUseCloseButton: false,
+    dsBorderAligned: false,
+    dsOpenByDefault: false,
+    dsHeadingLevel: 2,
+    dsAccordionId: 'dsaccordion',
+    dsHideTopBorder: false,
+    dsHideBottomBorder: false,
 };
 Default.render = (args) => html `
   <ds-accordion
-    variant="${args.variant}"
-    use-close-button="${args.useCloseButton}"
-    border-aligned="${args.borderAligned}"
-    open-by-default="${args.openByDefault}"
-    heading-level="${args.headingLevel}"
-    accordion-id="${args.accordionId}"
-    hide-top-border="${args.hideTopBorder}"
+    ds-variant="${args.dsVariant}"
+    ds-use-close-button="${args.dsUseCloseButton}"
+    ds-border-aligned="${args.dsBorderAligned}"
+    ds-open-by-default="${args.dsOpenByDefault}"
+    ds-heading-level="${args.dsHeadingLevel}"
+    ds-accordion-id="${args.dsAccordionId}"
+    ds-hide-top-border="${args.dsHideTopBorder}"
+    ds-hide-bottom-border="${args.dsHideBottomBorder}"
   >
     <div slot="header">${exampleHeader}</div>
     <div slot="content">${exampleContent}</div>
@@ -94,13 +51,14 @@ Playground.args = {
 Playground.render = (args) => {
     const accordions = Array.from({ length: args.Items }, (_, index) => `
     <ds-accordion
-      variant="${args.variant}"
-      use-close-button="${args.useCloseButton}"
-      border-aligned="${args.borderAligned}"
-      open-by-default="${args.openByDefault}"
-      heading-level="${args.headingLevel}"
-      accordion-id="${args.accordionId}-${index + 1}"
-      hide-top-border="${args.hideTopBorder}"
+      ds-variant="${args.dsVariant}"
+      ds-use-close-button="${args.dsUseCloseButton}"
+      ds-border-aligned="${args.dsBorderAligned}"
+      ds-open-by-default="${args.dsOpenByDefault}"
+      ds-heading-level="${args.dsHeadingLevel}"
+      ds-accordion-id="${args.dsAccordionId}-${index + 1}"
+      ds-hide-top-border="${args.dsHideTopBorder}"
+      ds-hide-bottom-border="${args.dsHideBottomBorder}"
     >
       <div slot="header">${args.Header}</div>
       <div slot="content">${args.Content}</div>

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

@@ -1,13 +1,21 @@
-.no-style-leak *, :host * {
+:host *, .ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
   display: block;
 }
 
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
 :host {
   display: inline-block;
 }
-:host[full-width] {
+:host[dsFullWidth], :host[ds-full-width] {
   width: 100%;
 }
 
@@ -18,34 +26,39 @@
   border-style: solid;
   display: flex;
   font-family: var(--ds-fontFamily-body);
-  font-weight: var(--ds-fontWeight-bold);
+  font-weight: var(--ds-fontWeight-semibold);
   outline: 4px solid transparent;
   justify-content: center;
 }
-.ds-button .button-value {
+.ds-button:not(.supplementary) .button-value {
   padding-right: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-3xSmall);
 }
+.ds-button.supplementary:has(ds-spinner) .button-value {
+  padding-right: 0;
+  padding-left: var(--ds-spacing-3xSmall);
+}
 .ds-button ds-icon {
   height: 1.5rem;
 }
-.ds-button.icon-start:not(.small) ds-icon {
-  margin-right: var(--ds-spacing-3xSmall);
-}
-.ds-button.icon-end:not(.small) ds-icon {
+.ds-button:has(ds-spinner):not(.small) .button-value {
   margin-left: var(--ds-spacing-3xSmall);
 }
+.ds-button.icon-only {
+  aspect-ratio: 1;
+  justify-content: center;
+}
 .ds-button:not(.small):not(.secondary) {
   border-width: 0px;
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
-  padding: var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px);
+  padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
 .ds-button:not(.small).secondary {
-  border-width: var(--ds-borderWidth-thick);
+  border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-18);
   min-height: 44px;
-  padding: var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick));
+  padding: var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall);
 }
 .ds-button:not(.small).icon-only {
   padding-left: 0;
@@ -55,13 +68,13 @@
   border-width: 0px;
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
-  padding: var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px);
+  padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
 .ds-button.small.secondary {
   border-width: var(--ds-borderWidth-thin);
   font-size: var(--ds-fontSize-14);
   min-height: 32px;
-  padding: var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin));
+  padding: var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall);
 }
 .ds-button.small.icon-only {
   padding-left: 0;
@@ -71,238 +84,204 @@
 .ds-button.small ds-icon {
   height: 1rem;
 }
+.ds-button.icon-start:not(.small) ds-icon {
+  margin-right: var(--ds-spacing-3xSmall);
+}
+.ds-button.icon-end:not(.small) ds-icon {
+  margin-left: var(--ds-spacing-3xSmall);
+}
 .ds-button.primary.blue {
-  background-color: var(--ds-bgColor-primary);
+  background-color: var(--ds-palette-mainBlue-70);
   border-color: transparent;
-  color: var(--ds-textColor-white);
+  color: var(--ds-palette-white);
 }
 .ds-button.primary.blue:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.primary.blue:hover {
-  background-color: var(--ds-bgColor-primary-hover);
+  background-color: var(--ds-palette-mainBlue-80);
 }
 .ds-button.primary.blue:active, .ds-button.primary.blue--active {
-  background-color: var(--ds-bgColor-primary-active);
+  background-color: var(--ds-palette-mainBlue-90);
 }
-.ds-button.primary.blue[aria-disabled=true], .ds-button.primary.blue.disabled, .ds-button.primary.blue:disabled {
-  background-color: var(--ds-bgColor-disabled-onLight);
+.ds-button.primary.blue.disabled, .ds-button.primary.blue:disabled {
+  background-color: var(--ds-overlay-black-10);
   border-color: transparent;
-  color: var(--ds-textColor-disabled-onLight);
+  color: var(--ds-palette-black-40);
 }
 .ds-button.primary.black {
-  background-color: var(--ds-bgColor-black);
+  background-color: var(--ds-palette-black-95);
   border-color: transparent;
-  color: var(--ds-textColor-white);
+  color: var(--ds-palette-white);
 }
 .ds-button.primary.black:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.primary.black:hover {
-  background-color: var(--ds-bgColor-black-hover);
+  background-color: var(--ds-palette-black-80);
 }
 .ds-button.primary.black:active, .ds-button.primary.black--active {
-  background-color: var(--ds-bgColor-black-active);
+  background-color: var(--ds-palette-white-70);
 }
-.ds-button.primary.black[aria-disabled=true], .ds-button.primary.black.disabled, .ds-button.primary.black:disabled {
-  background-color: var(--ds-bgColor-disabled-onLight);
+.ds-button.primary.black.disabled, .ds-button.primary.black:disabled {
+  background-color: var(--ds-overlay-black-10);
   border-color: transparent;
-  color: var(--ds-textColor-disabled-onLight);
+  color: var(--ds-palette-black-40);
 }
 .ds-button.primary.white {
-  background-color: var(--ds-bgColor-white);
+  background-color: var(--ds-palette-white);
   border-color: transparent;
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
 }
 .ds-button.primary.white:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.primary.white:hover {
-  background-color: var(--ds-bgColor-white-hover);
+  background-color: var(--ds-palette-black-10);
 }
 .ds-button.primary.white:active, .ds-button.primary.white--active {
-  background-color: var(--ds-bgColor-white-active);
+  background-color: var(--ds-palette-black-20);
 }
-.ds-button.primary.white[aria-disabled=true], .ds-button.primary.white.disabled, .ds-button.primary.white:disabled {
-  background-color: var(--ds-bgColor-disabled-onDark);
+.ds-button.primary.white.disabled, .ds-button.primary.white:disabled {
+  background-color: var(--ds-overlay-white-10);
   border-color: transparent;
-  color: var(--ds-textColor-disabled-onDark);
+  color: var(--ds-overlay-white-40);
 }
 .ds-button.secondary.blue {
-  background-color: var(--ds-bgColor-secondary);
-  border-color: var(--ds-borderColor-primary);
-  color: var(--ds-textColor-primary);
+  background-color: var(--ds-palette-white);
+  border-color: var(--ds-palette-mainBlue-70);
+  color: var(--ds-palette-mainBlue-70);
 }
 .ds-button.secondary.blue:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.secondary.blue:hover {
-  background-color: var(--ds-bgColor-secondary-hover);
+  background-color: var(--ds-palette-mainBlue-05);
 }
 .ds-button.secondary.blue:active, .ds-button.secondary.blue--active {
-  background-color: var(--ds-bgColor-secondary-active);
+  background-color: var(--ds-palette-mainBlue-10);
 }
-.ds-button.secondary.blue[aria-disabled=true], .ds-button.secondary.blue.disabled, .ds-button.secondary.blue:disabled {
-  background-color: var(--ds-bgColor-secondary);
-  border-color: var(--ds-borderColor-disabled-onLight);
-  color: var(--ds-textColor-disabled-onLight);
+.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);
 }
 .ds-button.secondary.black {
   background-color: transparent;
-  border-color: var(--ds-borderColor-black);
-  color: var(--ds-textColor-default);
+  border-color: var(--ds-palette-black-95);
+  color: var(--ds-palette-black-95);
 }
 .ds-button.secondary.black:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.secondary.black:hover {
-  background-color: var(--ds-bgColor-transparent-onLight-hover);
+  background-color: var(--ds-overlay-black-10);
 }
 .ds-button.secondary.black:active, .ds-button.secondary.black--active {
-  background-color: var(--ds-bgColor-transparent-onLight-active);
+  background-color: var(--ds-overlay-black-15);
 }
-.ds-button.secondary.black[aria-disabled=true], .ds-button.secondary.black.disabled, .ds-button.secondary.black:disabled {
+.ds-button.secondary.black.disabled, .ds-button.secondary.black:disabled {
   background-color: transparent;
-  border-color: var(--ds-borderColor-disabled-onLight);
-  color: var(--ds-textColor-disabled-onLight);
+  border-color: var(--ds-overlay-black-15);
+  color: var(--ds-palette-black-40);
 }
 .ds-button.secondary.white {
   background-color: transparent;
-  border-color: var(--ds-borderColor-white);
-  color: var(--ds-textColor-white);
+  border-color: var(--ds-palette-white);
+  color: var(--ds-palette-white);
 }
 .ds-button.secondary.white:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.secondary.white:hover {
-  background-color: var(--ds-bgColor-transparent-onDark-hover);
+  background-color: var(--ds-overlay-white-30);
 }
 .ds-button.secondary.white:active, .ds-button.secondary.white--active {
-  background-color: var(--ds-bgColor-transparent-onDark-active);
+  background-color: var(--ds-overlay-white-40);
 }
-.ds-button.secondary.white[aria-disabled=true], .ds-button.secondary.white.disabled, .ds-button.secondary.white:disabled {
+.ds-button.secondary.white.disabled, .ds-button.secondary.white:disabled {
   background-color: transparent;
-  border-color: var(--ds-borderColor-disabled-onDark);
-  color: var(--ds-textColor-disabled-onDark);
+  border-color: var(--ds-overlay-white-15);
+  color: var(--ds-overlay-white-40);
 }
 .ds-button.supplementary.blue {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-textColor-primary);
+  color: var(--ds-palette-mainBlue-70);
+  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-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.supplementary.blue:hover {
-  background-color: var(--ds-bgColor-secondary-hover);
+  background-color: var(--ds-palette-mainBlue-05);
 }
 .ds-button.supplementary.blue:active, .ds-button.supplementary.blue--active {
-  background-color: var(--ds-bgColor-secondary-active);
-}
-.ds-button.supplementary.blue:not(.small) {
-  padding-right: var(--ds-borderWidth-thick);
-  padding-left: var(--ds-borderWidth-thick);
+  background-color: var(--ds-palette-mainBlue-10);
 }
-.ds-button.supplementary.blue.small {
-  padding-right: var(--ds-borderWidth-thin);
-  padding-left: var(--ds-borderWidth-thin);
-}
-.ds-button.supplementary.blue[aria-disabled=true], .ds-button.supplementary.blue.disabled, .ds-button.supplementary.blue:disabled {
+.ds-button.supplementary.blue.disabled, .ds-button.supplementary.blue:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-textColor-disabled-onLight);
+  color: var(--ds-palette-black-40);
 }
 .ds-button.supplementary.black {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-textColor-default);
+  color: var(--ds-palette-black-95);
+  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-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.supplementary.black:hover {
-  background-color: var(--ds-bgColor-transparent-onLight-hover);
+  background-color: var(--ds-overlay-black-10);
 }
 .ds-button.supplementary.black:active, .ds-button.supplementary.black--active {
-  background-color: var(--ds-bgColor-transparent-onLight-active);
-}
-.ds-button.supplementary.black:not(.small) {
-  padding-right: var(--ds-borderWidth-thick);
-  padding-left: var(--ds-borderWidth-thick);
+  background-color: var(--ds-overlay-black-15);
 }
-.ds-button.supplementary.black.small {
-  padding-right: var(--ds-borderWidth-thin);
-  padding-left: var(--ds-borderWidth-thin);
-}
-.ds-button.supplementary.black[aria-disabled=true], .ds-button.supplementary.black.disabled, .ds-button.supplementary.black:disabled {
+.ds-button.supplementary.black.disabled, .ds-button.supplementary.black:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-textColor-disabled-onLight);
+  color: var(--ds-palette-black-40);
 }
 .ds-button.supplementary.white {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-textColor-white);
+  color: var(--ds-palette-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-borderColor-black);
-  outline-color: var(--ds-borderColor-white);
-  outline-offset: var(--ds-borderWidth-thin);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-black-95);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-white);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .ds-button.supplementary.white:hover {
-  background-color: var(--ds-bgColor-transparent-onDark-hover);
+  background-color: var(--ds-overlay-white-30);
 }
 .ds-button.supplementary.white:active, .ds-button.supplementary.white--active {
-  background-color: var(--ds-bgColor-transparent-onDark-active);
-}
-.ds-button.supplementary.white:not(.small) {
-  padding-right: var(--ds-borderWidth-thick);
-  padding-left: var(--ds-borderWidth-thick);
+  background-color: var(--ds-overlay-white-40);
 }
-.ds-button.supplementary.white.small {
-  padding-right: var(--ds-borderWidth-thin);
-  padding-left: var(--ds-borderWidth-thin);
-}
-.ds-button.supplementary.white[aria-disabled=true], .ds-button.supplementary.white.disabled, .ds-button.supplementary.white:disabled {
+.ds-button.supplementary.white.disabled, .ds-button.supplementary.white:disabled {
   background-color: transparent;
   border-color: transparent;
-  color: var(--ds-textColor-disabled-onDark);
-}
-.ds-button.icon-only {
-  aspect-ratio: 1;
-  justify-content: center;
+  color: var(--ds-overlay-white-40);
 }