Feature: New color 'invalid'

packages/uui-action-bar/lib/uui-action-bar.story.ts

@@ -21,7 +21,7 @@ const meta: Meta = {
     },
     color: {
       control: { type: 'select' },
-      options: ['default', 'positive', 'warning', 'danger'],
+      options: ['default', 'positive', 'warning', 'danger', 'invalid'],
     },
   },
   parameters: {
@@ -67,7 +67,7 @@ export const LooksAndColors: Story = {
   render: () => {
     const buttons = ['copy', 'remove', 'delete'];
     const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
-    const colors = ['default', 'positive', 'warning', 'danger'];
+    const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
 
     const uppercaseFirstLetter = (str: string) =>
       str.charAt(0).toUpperCase() + str.slice(1);

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);

packages/uui-badge/lib/uui-badge.story.ts

@@ -16,7 +16,7 @@ const meta: Meta = {
       options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
     },
     color: {
-      options: ['default', 'positive', 'warning', 'danger'],
+      options: ['default', 'positive', 'warning', 'danger', 'invalid'],
     },
   },
 
@@ -63,7 +63,7 @@ export const Icon: Story = {
 export const LooksAndColors: Story = {
   render: () => {
     const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
-    const colors = ['default', 'positive', 'warning', 'danger'];
+    const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
 
     const uppercaseFirstLetter = (str: string) =>
       str.charAt(0).toUpperCase() + str.slice(1);

packages/uui-base/lib/types/InterfaceColor.ts

@@ -3,11 +3,13 @@ export const UUIInterfaceColorValues: Readonly<UUIInterfaceColor[]> = [
   'positive',
   'warning',
   'danger',
+  'invalid',
 ] as const;
 
 export type UUIInterfaceColor =
   | ''
   | 'default'
   | 'positive'
   | 'warning'
-  | 'danger';
+  | 'danger'
+  | 'invalid';

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);

packages/uui-button/lib/uui-button.story.ts

@@ -20,7 +20,7 @@ const meta: Meta = {
       options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
     },
     color: {
-      options: ['default', 'positive', 'warning', 'danger'],
+      options: ['default', 'positive', 'warning', 'danger', 'invalid'],
     },
     type: {
       options: ['button', 'submit', 'reset'],
@@ -147,7 +147,13 @@ export const LooksAndColors: Story = {
       'outline',
       'placeholder',
     ] as const;
-    const colors = ['default', 'positive', 'warning', 'danger'] as const;
+    const colors = [
+      'default',
+      'positive',
+      'warning',
+      'danger',
+      'invalid',
+    ] as const;
 
     const uppercaseFirstLetter = (str: string) =>
       str.charAt(0).toUpperCase() + str.slice(1);

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);
       }
 

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 {

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'];

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);

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);
       }
     `,
   ];

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-color-danger);
+        border-color: var(--uui-color-invalid);
       }
 
       input {

packages/uui-label/lib/uui-label.element.ts

@@ -6,6 +6,7 @@ import { property } from 'lit/decorators.js';
  * Label element for Custom Element
  * @element uui-label
  * @slot - for the label text.
+ * @cssprop --uui-validation-color - Color property for the required asterisk.
  */
 @defineElement('uui-label')
 export class UUILabelElement extends LitElement {
@@ -79,7 +80,7 @@ export class UUILabelElement extends LitElement {
       }
       #required {
         display: inline;
-        color: var(--uui-color-danger);
+        color: var(--uui-color-invalid);
         font-weight: 900;
       }
     `,

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);
       }
     `,
   ];

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,

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]) {

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);
       }
     `,
   ];

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

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);
       }
     `,
   ];

packages/uui-tag/lib/uui-tag.element.ts

@@ -84,6 +84,11 @@ export class UUITagElement 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);

packages/uui-tag/lib/uui-tag.story.ts

@@ -39,7 +39,7 @@ export const Sizing: Story = {
 export const LooksAndColors: Story = {
   render: () => {
     const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
-    const colors = ['default', 'positive', 'warning', 'danger'];
+    const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
 
     function uppercaseFirstLetter(s: string) {
       return s.charAt(0).toUpperCase() + s.slice(1);

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;

packages/uui-toast-notification/lib/uui-toast-notification.element.ts

@@ -6,6 +6,7 @@ import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 
 import { UUIToastNotificationEvent } from './UUIToastNotificationEvent';
+import { UUIInterfaceColor } from '@umbraco-ui/uui-base';
 
 /**
  *  @element uui-toast-notification
@@ -20,12 +21,12 @@ import { UUIToastNotificationEvent } from './UUIToastNotificationEvent';
 export class UUIToastNotificationElement extends LitElement {
   /**
    * Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.
-   * @type {'' | 'default' | 'positive' | 'warning' | 'danger'}
+   * @type {UUIInterfaceColor}
    * @attr
    * @default ""
    */
   @property({ reflect: true })
-  color: '' | 'default' | 'positive' | 'warning' | 'danger' = '';
+  color: UUIInterfaceColor = '';
 
   private _autoClose: number | null = null;
   /**
@@ -351,6 +352,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);
+      }
     `,
   ];
 }

packages/uui-toast-notification/lib/uui-toast-notification.story.ts

@@ -15,7 +15,7 @@ const meta: Meta = {
   },
   argTypes: {
     color: {
-      options: ['', 'default', 'positive', 'warning', 'danger'],
+      options: ['', 'default', 'positive', 'warning', 'danger', 'invalid'],
     },
     headline: { control: { type: 'text' } },
   },
@@ -42,7 +42,7 @@ export const Default: Story = {
   },
 };
 
-export const ErrorStyle: Story = {
+export const DangerStyle: Story = {
   args: {
     headline: 'Document could not be published!',
     slot: html`An error occurred while attempting to contact the server. Please
@@ -54,6 +54,17 @@ export const ErrorStyle: Story = {
   },
 };
 
+export const ErrorStyle: Story = {
+  args: {
+    headline: 'Document could not be published!',
+    slot: html`The data is not valid. Please correct data corrdingly.
+      <uui-button slot="actions" look="primary" color="invalid"
+        >Retry</uui-button
+      >`,
+    color: 'invalid',
+  },
+};
+
 export const PositiveStyle: Story = {
   args: {
     headline: 'Document published!',

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);
       }
     `,
   ];