implementing --uui-color-invalid

nielslyngsoe · nielslyngsoe · commit 3cf1425c4354 · 2025-02-10T10:36:52.000+01:00
diff --git a/packages/uui-badge/lib/uui-badge.element.ts b/packages/uui-badge/lib/uui-badge.element.ts
@@ -91,6 +91,11 @@ export class UUIBadgeElement extends LitElement {
         --color-standalone: var(--uui-color-danger-standalone);
         --color-contrast: var(--uui-color-danger-contrast);
       }
+      :host([color='invalid']) {
+        --color: var(--uui-color-invalid);
+        --color-standalone: var(--uui-color-invalid-standalone);
+        --color-contrast: var(--uui-color-invalid-contrast);
+      }
 
       :host {
         background-color: var(--uui-color-surface);
diff --git a/packages/uui-base/lib/types/InterfaceColor.ts b/packages/uui-base/lib/types/InterfaceColor.ts
@@ -10,4 +10,5 @@ export type UUIInterfaceColor =
   | 'default'
   | 'positive'
   | 'warning'
-  | 'danger';
+  | 'danger'
+  | 'invalid';
diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
@@ -435,6 +435,12 @@ export class UUIButtonElement extends UUIFormControlMixin(
         --color-emphasis: var(--uui-color-danger-emphasis);
         --color-contrast: var(--uui-color-danger-contrast);
       }
+      :host([color='invalid']) #button {
+        --color: var(--uui-color-invalid);
+        --color-standalone: var(--uui-color-invalid-standalone);
+        --color-emphasis: var(--uui-color-invalid-emphasis);
+        --color-contrast: var(--uui-color-invalid-contrast);
+      }
       :host([disabled]) #button {
         --color: var(--uui-color-disabled);
         --color-standalone: var(--uui-color-disabled-contrast);
diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
@@ -125,7 +125,7 @@ export class UUICardElement extends SelectOnlyMixin(
         height: 100%;
         z-index: 1;
         box-sizing: border-box;
-        border: var(--uui-card-border-width) solid var(--uui-color-danger);
+        border: var(--uui-card-border-width) solid var(--uui-color-invalid);
         border-radius: var(--uui-border-radius);
       }
 
diff --git a/packages/uui-checkbox/lib/uui-checkbox.element.ts b/packages/uui-checkbox/lib/uui-checkbox.element.ts
@@ -187,7 +187,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
       :host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,
       :host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,
       :host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {
-        border: 1px solid var(--uui-color-danger-standalone);
+        border: 1px solid var(--uui-color-invalid-standalone);
       }
 
       :host([disabled]) #ticker {
diff --git a/packages/uui-css/lib/custom-properties.story.ts b/packages/uui-css/lib/custom-properties.story.ts
@@ -115,6 +115,7 @@ export const InterfaceColors = () => {
     '--uui-color-positive',
     '--uui-color-warning',
     '--uui-color-danger',
+    '--uui-color-invalid',
     '--uui-color-disabled',
   ];
   const universal = ['--uui-color-header'];
diff --git a/packages/uui-css/lib/custom-properties/colors.css b/packages/uui-css/lib/custom-properties/colors.css
@@ -62,6 +62,11 @@
   --uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark);
   --uui-color-danger-contrast: white;
 
+  --uui-color-invalid: var(--uui-palette-maroon-flush);
+  --uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light);
+  --uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark);
+  --uui-color-invalid-contrast: white;
+
   --uui-color-positive: var(--uui-palette-forest-green);
   --uui-color-positive-emphasis: var(--uui-palette-forest-green-light);
   --uui-color-positive-standalone: var(--uui-palette-forest-green-dark);
diff --git a/packages/uui-form-validation-message/lib/uui-form-validation-message.element.ts b/packages/uui-form-validation-message/lib/uui-form-validation-message.element.ts
@@ -105,7 +105,7 @@ export class UUIFormValidationMessageElement extends LitElement {
   static styles = [
     css`
       #messages {
-        color: var(--uui-color-danger-standalone);
+        color: var(--uui-color-invalid-standalone);
       }
     `,
   ];
diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
@@ -431,7 +431,7 @@ export class UUIInputElement extends UUIFormControlMixin(
       :host(:not([pristine]):invalid),
       /* polyfill support */
       :host(:not([pristine])[internals-invalid]) {
-        border-color: var(--uui-validation-color, var(--uui-color-danger));
+        border-color: var(--uui-color-invalid);
       }
 
       input {
diff --git a/packages/uui-label/lib/uui-label.element.ts b/packages/uui-label/lib/uui-label.element.ts
@@ -80,7 +80,7 @@ export class UUILabelElement extends LitElement {
       }
       #required {
         display: inline;
-        color: var(--uui-validation-color, var(--uui-color-danger));
+        color: var(--uui-color-invalid);
         font-weight: 900;
       }
     `,
diff --git a/packages/uui-radio/lib/uui-radio-group.element.ts b/packages/uui-radio/lib/uui-radio-group.element.ts
@@ -338,7 +338,7 @@ export class UUIRadioGroupElement extends UUIFormControlMixin(LitElement, '') {
       :host(:not([pristine]):invalid),
       /* polyfill support */
       :host(:not([pristine])[internals-invalid]) {
-        border: 1px solid var(--uui-color-danger-standalone);
+        border: 1px solid var(--uui-color-invalid-standalone);
       }
     `,
   ];
diff --git a/packages/uui-range-slider/lib/uui-range-slider.element.ts b/packages/uui-range-slider/lib/uui-range-slider.element.ts
@@ -734,8 +734,8 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
       }
 
       :host([error]) {
-        --color-interactive: var(--uui-color-danger-standalone);
-        --color-hover: var(--uui-color-danger);
+        --color-interactive: var(--uui-color-invalid-standalone);
+        --color-hover: var(--uui-color-invalid);
       }
 
       #range-slider {
@@ -812,11 +812,11 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
       }
 
       :host([error]) .color {
-        background-color: var(--uui-color-danger-standalone);
+        background-color: var(--uui-color-invalid-standalone);
       }
       :host([error]) #inner-color-thumb:hover ~ .color,
       :host([error]) #inner-color-thumb:focus ~ .color {
-        background-color: var(--uui-color-danger-emphasis);
+        background-color: var(--uui-color-invalid-emphasis);
       }
 
       /** Steps */
@@ -844,7 +844,7 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
       }
 
       :host([error]) .track-step.filled {
-        fill: var(--uui-color-danger-emphasis);
+        fill: var(--uui-color-invalid-emphasis);
       }
 
       :host #inner-color-thumb.active ~ .step-wrapper .track-step.filled,
diff --git a/packages/uui-ref/lib/uui-ref.element.ts b/packages/uui-ref/lib/uui-ref.element.ts
@@ -85,10 +85,10 @@ export class UUIRefElement extends SelectOnlyMixin(
       }
 
       :host([error]) {
-        border: 2px solid var(--uui-color-danger);
+        border: 2px solid var(--uui-color-invalid);
         box-shadow:
-          0 0 4px 0 var(--uui-color-danger),
-          inset 0 0 2px 0 var(--uui-color-danger);
+          0 0 4px 0 var(--uui-color-invalid),
+          inset 0 0 2px 0 var(--uui-color-invalid);
       }
 
       :host([standalone]) {
diff --git a/packages/uui-select/lib/uui-select.element.ts b/packages/uui-select/lib/uui-select.element.ts
@@ -334,11 +334,11 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
       }
 
       :host([error]) #native {
-        border: 1px solid var(--uui-color-danger-standalone);
+        border: 1px solid var(--uui-color-invalid-standalone);
       }
 
       :host([error]) #native[disabled] {
-        border: 1px solid var(--uui-color-danger-standalone);
+        border: 1px solid var(--uui-color-invalid-standalone);
       }
     `,
   ];
diff --git a/packages/uui-slider/lib/uui-slider.element.ts b/packages/uui-slider/lib/uui-slider.element.ts
@@ -467,10 +467,10 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
       }
 
       :host(:not([pristine]):invalid) #thumb {
-        border-color: var(--uui-color-danger-standalone);
+        border-color: var(--uui-color-invalid-standalone);
       }
       :host(:not([pristine]):invalid) #thumb:after {
-        background-color: var(--uui-color-danger);
+        background-color: var(--uui-color-invalid);
       }
 
       // readonly
diff --git a/packages/uui-symbol-file-dropzone/lib/uui-symbol-file-dropzone.element.ts b/packages/uui-symbol-file-dropzone/lib/uui-symbol-file-dropzone.element.ts
@@ -46,7 +46,7 @@ export class UUISymbolFileDropzoneElement extends LitElement {
       }
 
       :host([error]) #upload-icon {
-        fill: var(--uui-color-danger);
+        fill: var(--uui-color-invalid);
       }
     `,
   ];
diff --git a/packages/uui-tag/lib/uui-tag.element.ts b/packages/uui-tag/lib/uui-tag.element.ts
@@ -81,9 +81,9 @@ export class UUITagElement extends LitElement {
         --color-contrast: var(--uui-color-warning-contrast);
       }
       :host([color='danger']) {
-        --color: var(--uui-color-danger);
-        --color-standalone: var(--uui-color-danger-standalone);
-        --color-contrast: var(--uui-color-danger-contrast);
+        --color: var(--uui-color-invalid);
+        --color-standalone: var(--uui-color-invalid-standalone);
+        --color-contrast: var(--uui-color-invalid-contrast);
       }
 
       :host {
diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts
@@ -278,12 +278,12 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
       }
       :host([error]) textarea,
       :host([error]) textarea[disabled] {
-        border: 1px solid var(--uui-color-danger) !important;
+        border: 1px solid var(--uui-color-invalid) !important;
       }
       :host(:not([pristine]):invalid) textarea,
       /* polyfill support */
       :host(:not([pristine])[internals-invalid]) textarea {
-        border-color: var(--uui-color-danger);
+        border-color: var(--uui-color-invalid);
       }
       :host([auto-height]) textarea {
         resize: none;
diff --git a/packages/uui-toast-notification/lib/uui-toast-notification.element.ts b/packages/uui-toast-notification/lib/uui-toast-notification.element.ts
@@ -351,6 +351,11 @@ export class UUIToastNotificationElement extends LitElement {
         color: var(--uui-color-danger-contrast);
         border-color: var(--uui-color-danger-standalone);
       }
+      :host([color='invalid']) #toast > div {
+        background-color: var(--uui-color-invalid);
+        color: var(--uui-color-invalid-contrast);
+        border-color: var(--uui-color-invalid-standalone);
+      }
     `,
   ];
 }
diff --git a/packages/uui-toggle/lib/uui-toggle.element.ts b/packages/uui-toggle/lib/uui-toggle.element.ts
@@ -190,7 +190,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
       /* polyfill support */
       :host(:not([pristine])[internals-invalid]) #slider,
       :host(:not([pristine])[internals-invalid]) label:hover #slider {
-        border: 1px solid var(--uui-color-danger-standalone);
+        border: 1px solid var(--uui-color-invalid-standalone);
       }
     `,
   ];

Original file line number	Diff line number	Diff line change
`@@ -125,7 +125,7 @@ export class UUICardElement extends SelectOnlyMixin(`
`125`	`125`	`height: 100%;`
`126`	`126`	`z-index: 1;`
`127`	`127`	`box-sizing: border-box;`
`128`		`- border: var(--uui-card-border-width) solid var(--uui-color-danger);`
	`128`	`+ border: var(--uui-card-border-width) solid var(--uui-color-invalid);`
`129`	`129`	`border-radius: var(--uui-border-radius);`
`130`	`130`	`}`
`131`	`131`
Original file line number	Diff line number	Diff line change
`@@ -187,7 +187,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {`
`187`	`187`	`:host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,`
`188`	`188`	`:host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,`
`189`	`189`	`:host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {`
`190`		`- border: 1px solid var(--uui-color-danger-standalone);`
	`190`	`+ border: 1px solid var(--uui-color-invalid-standalone);`
`191`	`191`	`}`
`192`	`192`
`193`	`193`	`:host([disabled]) #ticker {`
Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,7 @@ export class UUIFormValidationMessageElement extends LitElement {`
`105`	`105`	`static styles = [`
`106`	`106`	css`
`107`	`107`	`#messages {`
`108`		`- color: var(--uui-color-danger-standalone);`
	`108`	`+ color: var(--uui-color-invalid-standalone);`
`109`	`109`	`}`
`110`	`110`	`,
`111`	`111`	`];`
Original file line number	Diff line number	Diff line change
`@@ -431,7 +431,7 @@ export class UUIInputElement extends UUIFormControlMixin(`
`431`	`431`	`:host(:not([pristine]):invalid),`
`432`	`432`	`/* polyfill support */`
`433`	`433`	`:host(:not([pristine])[internals-invalid]) {`
`434`		`- border-color: var(--uui-validation-color, var(--uui-color-danger));`
	`434`	`+ border-color: var(--uui-color-invalid);`
`435`	`435`	`}`
`436`	`436`
`437`	`437`	`input {`
Original file line number	Diff line number	Diff line change
`@@ -80,7 +80,7 @@ export class UUILabelElement extends LitElement {`
`80`	`80`	`}`
`81`	`81`	`#required {`
`82`	`82`	`display: inline;`
`83`		`- color: var(--uui-validation-color, var(--uui-color-danger));`
	`83`	`+ color: var(--uui-color-invalid);`
`84`	`84`	`font-weight: 900;`
`85`	`85`	`}`
`86`	`86`	`,