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

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

@@ -1,81 +1,153 @@
+: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-tag {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   min-height: 1.5rem;
-  background-color: var(--ds-palette-black-05);
+  background-color: var(--ds-bgColor-neutral);
   padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-3xSmall);
 }
 .ds-tag.ds-tag--default {
-  color: var(--ds-palette-black-95);
-  background-color: var(--ds-palette-black-05);
+  color: var(--ds-textColor-default);
+  background-color: var(--ds-bgColor-neutral);
 }
 .ds-tag.ds-tag--default:hover:has(.ds-tag__link) {
-  background-color: var(--ds-palette-black-10);
+  background-color: var(--ds-bgColor-neutral-hover);
 }
 .ds-tag.ds-tag--default:active:has(.ds-tag__link) {
-  background-color: var(--ds-palette-black-20);
+  background-color: var(--ds-bgColor-neutral-active);
 }
 .ds-tag.ds-tag--black {
-  color: var(--ds-palette-white);
-  background-color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-white);
+  background-color: var(--ds-bgColor-black);
 }
 .ds-tag.ds-tag--black:hover:has(.ds-tag__link) {
-  background-color: var(--ds-palette-black-80);
+  background-color: var(--ds-bgColor-black-hover);
 }
 .ds-tag.ds-tag--black:active:has(.ds-tag__link) {
-  background-color: var(--ds-palette-black-70);
+  background-color: var(--ds-bgColor-black-active);
 }
 .ds-tag.ds-tag--white {
-  color: var(--ds-palette-black-95);
-  background-color: var(--ds-palette-white);
+  color: var(--ds-textColor-default);
+  background-color: var(--ds-bgColor-white);
 }
 .ds-tag.ds-tag--white:hover:has(.ds-tag__link) {
-  background-color: var(--ds-palette-black-10);
+  background-color: var(--ds-bgColor-white-hover);
 }
 .ds-tag.ds-tag--white:active:has(.ds-tag__link) {
-  background-color: var(--ds-palette-black-20);
+  background-color: var(--ds-bgColor-white-active);
 }
 .ds-tag.ds-tag--info {
-  color: var(--ds-palette-black-95);
-  background-color: var(--ds-palette-blue-05);
+  color: var(--ds-textColor-default);
+  background-color: var(--ds-bgColor-info);
 }
 .ds-tag.ds-tag--info:hover:has(.ds-tag__link) {
-  background-color: var(--ds-palette-blue-10);
+  background-color: var(--ds-bgColor-info-hover);
 }
 .ds-tag.ds-tag--info:active:has(.ds-tag__link) {
-  background-color: var(--ds-palette-blue-20);
+  background-color: var(--ds-bgColor-info-active);
 }
 .ds-tag.ds-tag--danger {
-  color: var(--ds-palette-black-95);
-  background-color: var(--ds-palette-red-05);
+  color: var(--ds-textColor-default);
+  background-color: var(--ds-bgColor-danger);
 }
 .ds-tag.ds-tag--danger:hover:has(.ds-tag__link) {
-  background-color: var(--ds-palette-red-10);
+  background-color: var(--ds-bgColor-danger-hover);
 }
 .ds-tag.ds-tag--danger:active:has(.ds-tag__link) {
-  background-color: var(--ds-palette-red-20);
+  background-color: var(--ds-bgColor-danger-active);
 }
 .ds-tag.ds-tag--attention {
-  color: var(--ds-palette-black-95);
-  background-color: var(--ds-palette-yellow-05);
+  color: var(--ds-textColor-default);
+  background-color: var(--ds-bgColor-attention);
 }
 .ds-tag.ds-tag--attention:hover:has(.ds-tag__link) {
-  background-color: var(--ds-palette-yellow-10);
+  background-color: var(--ds-bgColor-attention-hover);
 }
 .ds-tag.ds-tag--attention:active:has(.ds-tag__link) {
-  background-color: var(--ds-palette-yellow-20);
+  background-color: var(--ds-bgColor-attention-active);
 }
 .ds-tag.ds-tag--success {
-  color: var(--ds-palette-black-95);
-  background-color: var(--ds-palette-green-05);
+  color: var(--ds-textColor-default);
+  background-color: var(--ds-bgColor-success);
 }
 .ds-tag.ds-tag--success:hover:has(.ds-tag__link) {
-  background-color: var(--ds-palette-green-10);
+  background-color: var(--ds-bgColor-success-hover);
 }
 .ds-tag.ds-tag--success:active:has(.ds-tag__link) {
-  background-color: var(--ds-palette-green-20);
+  background-color: var(--ds-bgColor-success-active);
 }
 .ds-tag__text {
   font-family: var(--ds-fontFamily-body);

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

@@ -16,7 +16,7 @@ export class DsTag {
         });
         const DsIcon = transformTagName('ds-icon', 'ds-tag', this.el);
         const DsLink = transformTagName('ds-link', 'ds-tag', this.el);
-        return (h("div", { key: '40d1e7607357b556097b27c6aad58a1b2e5af0fb', class: classes }, h("slot", { key: '416e038155b38f758d5f31994ee45e619facff1b', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'a276c53fd88b357f40a6a0227d79576318c0b708' }, this.dsHref ? (h(DsLink, { class: "ds-tag__link", dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: "ds-tag__text" }, this.dsText))), h("slot", { key: 'e0ec39cd2378889d15b4a22e62742e730ce33a21', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
+        return (h("div", { key: 'febd1f950d71c660ac799310851365f7c26d5f29', class: classes }, h("slot", { key: '16ebb3f3698b583bc7985c4ce6aa3374c2057456', name: "prefix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'start' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null), h("slot", { key: 'dfa9d367bbf7949c7ec3095325f1b735019e0f1b' }, this.dsHref ? (h(DsLink, { class: "ds-tag__link", dsText: this.dsText, dsHref: this.dsHref, dsTarget: this.dsTarget, dsDownload: this.dsDownload, dsColour: this.dsColour === 'black' ? 'white' : 'black', dsSize: "small", dsWeight: "semibold" })) : (h("span", { class: "ds-tag__text" }, this.dsText))), h("slot", { key: '1569e0630eff3feb5a0b0044ddb616ab1ac8865c', name: "suffix" }, !this.dsHref && this.dsIcon && this.dsIconPosition === 'end' ? h(DsIcon, { dsName: this.dsIcon, dsSize: "1rem" }) : null)));
     }
     static get is() { return "ds-tag"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { tagColours } from "../../../../utils/tag/tagUtils";
+import { tagColours } from "../utils";
 const meta = {
     title: 'Base Components/Tag/Features',
     component: 'ds-tag',

package/dist/collection/components/01-base-components/ds-tag-group/ds-tag-group.css

@@ -1,15 +1,88 @@
+: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-tag-group__label {
   padding-inline: 0;
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
+  color: var(--ds-textColor-default);
 }
 
 .ds-tag-group__assistive-text {
   display: inline;
   font-size: var(--ds-fontSize-14);
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
 }
 

package/dist/collection/components/01-base-components/ds-tag-group/ds-tag-group.js

@@ -6,7 +6,7 @@ export class DsTagGroup {
     render() {
         const assistiveTextId = this.dsAssistiveText ? 'ds-tag-group-assistive-text' : undefined;
         const ariaDescribedBy = assistiveTextId ? assistiveTextId : undefined;
-        return (h("div", { key: '5e132f0aa006d74722358f2ac3b0b74c4116ea9a', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '2fe72fffe735931ff5472162cac5b3babda6b957' }, this.dsLabel && (h("div", { key: '5388aa1fb591062e25c51f03390af5f34a9e81e9', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: 'd63eb8fc20ef2e361890a45709d2a7e54c4f9a02', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), h("ul", { key: '35f882de376802e7048f4ea6b06291288d233c64', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => h("li", { innerHTML: child.outerHTML })))));
+        return (h("div", { key: '8dd881ca483b1141dc2805d1c366cf113e319983', class: "ds-tag-group", role: "group", "aria-label": this.dsLabel, "aria-describedby": ariaDescribedBy }, (this.dsLabel || this.dsAssistiveText) && (h("div", { key: '8ade266da86fd06e2fec19e68dad547bffae769a' }, this.dsLabel && (h("div", { key: '4c3867f4c1ee11ee8afd2c94c07303212477e432', class: "ds-tag-group__label" }, this.dsLabel)), this.dsAssistiveText && (h("small", { key: 'eb2cee2d745da0cc0782e7d7958973419eec8b45', class: "ds-tag-group__assistive-text", id: assistiveTextId }, this.dsAssistiveText)))), h("ul", { key: '2fd183e8bd7a02310d7b178513b7f5ceb39da676', class: "ds-tag-group__tags" }, Array.from(this.el.children).map(child => h("li", { innerHTML: child.outerHTML })))));
     }
     static get is() { return "ds-tag-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.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 *, .ds-no-style-leak * {
   all: unset;
   box-sizing: border-box;
@@ -32,7 +104,7 @@
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 .ds-input__label-container small {
   font-family: var(--ds-fontFamily-body);
@@ -42,7 +114,7 @@
   line-height: var(--ds-lineHeight-large);
   display: block;
   margin-block-start: var(--ds-spacing-3xSmall);
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-secondary);
 }
 .ds-input__container {
   box-sizing: border-box;
@@ -52,46 +124,47 @@
   align-items: center;
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
-  border-color: var(--ds-palette-black-50);
+  background-color: var(--ds-bgColor-white);
+  border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
 .ds-input__container: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-input__container:focus-within {
-  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-input__container.invalid {
-  background-color: var(--ds-palette-red-05);
-  border-color: var(--ds-palette-red-50);
+  background-color: var(--ds-bgColor-danger);
+  border-color: var(--ds-borderColor-danger);
 }
 .ds-input__container.invalid:hover:not(.ds-input__container.invalid:focus-within) {
-  background-color: var(--ds-palette-red-10);
-  border-color: var(--ds-palette-red-50);
+  background-color: var(--ds-bgColor-danger-hover);
+  border-color: var(--ds-borderColor-danger);
 }
 .ds-input__container.invalid.active {
-  background-color: var(--ds-palette-red-20);
-  border-color: var(--ds-palette-red-50);
+  background-color: var(--ds-bgColor-danger-active);
+  border-color: var(--ds-borderColor-danger);
 }
 .ds-input__container.valid {
-  background-color: var(--ds-palette-green-05);
-  border-color: var(--ds-palette-green-50);
+  background-color: var(--ds-bgColor-success);
+  border-color: var(--ds-borderColor-success);
 }
 .ds-input__container.valid:hover:not(.ds-input__container.valid:focus-within) {
-  background-color: var(--ds-palette-green-10);
-  border-color: var(--ds-palette-green-50);
+  background-color: var(--ds-bgColor-success-hover);
+  border-color: var(--ds-borderColor-success);
 }
 .ds-input__container.valid.active {
-  background-color: var(--ds-palette-green-20);
-  border-color: var(--ds-palette-green-50);
+  background-color: var(--ds-bgColor-success-active);
+  border-color: var(--ds-borderColor-success);
 }
 .ds-input__container.readonly, .ds-input__container.disabled {
-  background-color: var(--ds-overlay-black-10);
-  border-color: var(--ds-overlay-black-15);
+  background-color: var(--ds-bgColor-disabled-onLight);
+  border-color: var(--ds-borderColor-disabled-onLight);
 }
 .ds-input__container:has(span.prefix, .ds-text-input__icon) {
   padding-inline-start: var(--ds-spacing-2xSmall);
@@ -103,25 +176,25 @@
   outline: none;
 }
 .ds-input__container:has(input:active):not:has(input:disabled, input:read-only) {
-  border-color: var(--ds-palette-black-50);
+  border-color: var(--ds-borderColor-default);
 }
 .ds-input__container.active:not(.ds-input__container.disabled, .ds-input__container.readonly, .ds-input__container.invalid, .ds-input__container.valid) {
-  border-color: var(--ds-palette-black-50);
-  background-color: var(--ds-palette-black-20);
+  border-color: var(--ds-borderColor-default);
+  background-color: var(--ds-bgColor-white-active);
 }
 .ds-input__container:hover:not(.ds-input__container.disabled, .ds-input__container.readonly, .ds-input__container.active, .ds-input__container.invalid, .ds-input__container.valid, .ds-input__container:focus-within) {
-  border-color: var(--ds-palette-black-50);
-  background-color: var(--ds-palette-black-10);
+  border-color: var(--ds-borderColor-default);
+  background-color: var(--ds-bgColor-white-hover);
 }
 .ds-input__container:focus-within:not(.ds-input__container:focus-within.invalid, .ds-input__container:focus-within.valid, .ds-input__container:focus-within.readonly) {
-  border-color: var(--ds-palette-mainBlue-70);
+  border-color: var(--ds-borderColor-primary);
 }
 .ds-input__container:focus-within * > .ds-text-input__button > button:focus-visible {
   background-clip: padding-box;
   outline-offset: -5px;
   box-shadow: none;
   height: var(--ds-spacing-xLarge);
-  background-color: var(--ds-overlay-black-10);
+  background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
 .ds-input__container > input {
   font-family: var(--ds-fontFamily-body);
@@ -135,7 +208,7 @@
   flex-grow: 1;
   height: var(--ds-spacing-xLarge);
   line-height: var(--ds-fontSize-24);
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
   border: none;
   padding-block: var(--ds-spacing-4xSmall);
 }
@@ -145,13 +218,13 @@
   font-weight: var(--ds-fontWeight-regular);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-secondary);
 }
 .ds-input__container > input:disabled {
-  color: var(--ds-palette-black-40);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-input__container > input:disabled::placeholder {
-  color: var(--ds-palette-black-40);
+  color: var(--ds-textColor-disabled-onLight);
 }
 .ds-input__container > input:focus {
   outline: none;
@@ -168,11 +241,11 @@
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
 .ds-input__container span.prefix, .ds-input__container span.suffix {
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-link-standalone);
 }
 .ds-input__container .ds-text-input__icon, .ds-input__container ::slotted([slot=prefix]) {
   height: 1.5rem;
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 .ds-input__container .ds-text-input__button {
   margin-top: calc(var(--ds-spacing-3xSmall) * -1);

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

@@ -71,7 +71,6 @@ export class DsTextInput {
     async clearInput(e) {
         this.dsValue = '';
         this.inputElement.focus();
-        this.clearButtonVisible = false;
         this.dsClear.emit({ event: e, value: this.dsValue });
     }
     async dsFocus() {
@@ -82,6 +81,7 @@ export class DsTextInput {
     }
     valueObserver(value) {
         this.dsChange.emit({ value });
+        this.clearButtonVisible = !!value;
     }
     getLabelText = () => {
         if (this.dsRequired) {
@@ -121,7 +121,6 @@ export class DsTextInput {
     handleInput = (e) => {
         const target = e.target;
         this.dsValue = target.value;
-        this.clearButtonVisible = !!target.value;
         this.dsInput.emit({ event: e, value: this.dsValue });
         if (this.dsErrorText || this.wasInvalidOnBlur) {
             const validityState = this.inputElement?.validity;
@@ -203,20 +202,20 @@ export class DsTextInput {
         const inputType = this.dsType === 'password' && this.passwordInputVisible ? 'text' : this.dsType;
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-text-input', this.el);
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-text-input', this.el);
-        return (h(Fragment, { key: 'd5fbe44bbbff42b75a215b87a69d8574a2911018' }, h("div", { key: '94c0dd7e71ede20e760796deb76edde382a0f10b', class: "ds-input__label-container" }, h("slot", { key: 'e86e263cd9af65e1fa3b86c237a5ef39d4f20e7f', name: "label" }, h("label", { key: '3936b750b6f318a1b7344c4cc3ebcb852fc51066', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: 'd2da2e30b78a34a45b8b7f46966ab972e4e0b025', name: "assistiveText" }, h("small", { key: 'd52b4154dd59e8f27e6cc825cbe62c1d8f0f3319', id: this.assistiveTextId }, this.dsAssistiveText), h(DsVisuallyHidden, { key: 'fea45e29a5e2d61946cc623688ddd02f842d5dff', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, this.dsHiddenAssistiveText))), h("div", { key: '5ee839a7c0e09ba29f0d188504f31c93fe95b993', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input__container', {
+        return (h(Fragment, { key: 'c6e9959eb7982f343c228cbfbef591b7ed1da017' }, h("div", { key: 'aa5bc08c342fd8c92b3a49ef700134fe8924f422', class: "ds-input__label-container" }, h("slot", { key: '33da148c9710828d0bed2203636d2192e3a4d5e3', name: "label" }, h("label", { key: '1c773019f0e9e4f2adfbafdfddb7b9330623a54a', htmlFor: this.dsId }, this.getLabelText())), h("slot", { key: 'b2c3ebe974b798e0d20e539559c5f539d3b9e11e', name: "assistiveText" }, h("small", { key: '76fbe9e0a4d7cc8f06f60ebcd31c6475d1771202', id: this.assistiveTextId }, this.dsAssistiveText), h(DsVisuallyHidden, { key: '695c998b00a7c0526ae9d084f8d04d9fd310fe4f', id: this.visuallyHiddenAssistiveTextId, "ds-tag": "span" }, this.dsHiddenAssistiveText))), h("div", { key: '27cef3d860f46b8b1d55eeaf4ac0a8ee247c30f2', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('ds-input__container', {
                 disabled: this.dsDisabled,
                 readonly: this.dsReadonly,
                 valid: !!this.dsSuccessText,
                 invalid: !!this.dsErrorText,
                 focus: this.hasFocus,
                 active: !!this.inputActive,
-            }) }, this.renderPrefixContent(), h("input", { key: 'a9bf53d9a819db9cad6c80535abb3b101d3e36ed', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, "aria-label": this.dsAriaLabel, "aria-labelledby": this.dsAriaLabelledby, "aria-describedby": this.dsAriaDescribedby ||
+            }) }, this.renderPrefixContent(), h("input", { key: '27950a285c7a5290721c1a8d5379a43efc6be696', ref: e => (this.inputElement = e), id: this.dsId, name: this.dsName, "aria-label": this.dsAriaLabel, "aria-labelledby": this.dsAriaLabelledby, "aria-describedby": this.dsAriaDescribedby ||
                 classNames({
                     [this.assistiveTextId]: !!this.dsAssistiveText,
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.errorTextId]: !!this.dsErrorText,
                     [this.successTextId]: !!this.dsSuccessText,
-                }), "aria-invalid": this.dsErrorText ? 'true' : 'false', disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.dsValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: '1ad212e77fa8fd66c414860bf767054322a3f3bf', name: "validity" }, h(DsInputValidity, { key: '980a25cc784a37a0ba5f32e029f744a94db8502f', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsValidityRole: "alert" }), h(DsInputValidity, { key: '0a006fdb9962543ecb77790a56655669e251e7e1', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsValidityRole: "status" }))));
+                }), "aria-invalid": this.dsErrorText ? 'true' : 'false', disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.dsValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...this.inheritedAttributes }), this.renderSuffixContent()), h("slot", { key: 'a26f4f2d0198113f3c7b33cdbcfe00662d2c6098', name: "validity" }, h(DsInputValidity, { key: '63f027f7cd8746a66ea266ed5194904c72a35f65', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsValidityRole: "alert" }), h(DsInputValidity, { key: 'c2f873164d8ccf7fb45fb8ab814038d28e52406c', id: this.successTextId, dsText: this.dsSuccessText, dsType: "success", dsValidityRole: "status" }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,7 @@
 import { html } from "lit";
 import { getDsElem } from "../../../../utils/tests/testUtils";
 import { litTemplateResultToString } from "../../../../utils/utils";
+import { expect, waitFor } from "@storybook/test";
 const meta = {
     title: 'Base Components/TextInput/Examples',
     component: 'ds-text-input',
@@ -93,6 +94,9 @@ export const ClientSideValidation = {
                 autoplay: true,
             },
         },
+        visualTests: {
+            disable: true,
+        },
     },
     render: () => html `
     <style>
@@ -104,7 +108,7 @@ export const ClientSideValidation = {
     </style>
     ${clientSideValidationDOM}
   `,
-    play: async ({ canvasElement }) => {
+    play: async ({ context, canvasElement }) => {
         const errorContainerElem = canvasElement.querySelector('#example-error-container');
         const successContainerElem = canvasElement.querySelector('#example-success-container');
         const errorElem = await getDsElem(canvasElement, 'ds-text-input#example-error');
@@ -129,5 +133,25 @@ export const ClientSideValidation = {
                     return;
             }
         });
+        await window.takeScreenshot?.(context.id);
+    },
+};
+export const SearchClearButtonReactivity = {
+    args: {
+        dsLabel: 'Label',
+        dsType: 'search',
+        dsValue: '',
+        dsActionButtonAriaLabel: 'Action button',
+    },
+    play: async ({ canvasElement, step }) => {
+        const dsElem = await getDsElem(canvasElement, 'ds-text-input');
+        dsElem.dsValue = "test";
+        await waitFor(() => {
+            expect(dsElem.querySelector('ds-button')).not.toBeNull();
+        });
+        await step('Clear button should be visible', async () => {
+            const clearBtn = dsElem.querySelector('ds-button');
+            expect(clearBtn).toBeInTheDocument();
+        });
     },
 };