@scania/tegel-lite 0.1.0 → 1.0.1

package/dist/tl-textarea.css

@@ -1,51 +1,238 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component--input-background-primary: var(--color-background-layer-01);
+  --component--input-background-secondary: var(--color-background-layer-02);
+  --component--input-border-default: var(--color-border-soft);
+  --component--input-border-hover: var(--color-border-strong);
+  --component--input-border-success-default: var(--color-border-strong);
+  --component--input-border-error-default: var(--color-system-danger-default);
+  --component--input-border-radius-default: var(--scania-unit-4);
+  --component--input-border-radius-none: var(--scania-unit-0);
+  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
+  --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
+  --component--input-border-width-default: var(--scania-unit-1);
+  --component--input-border-width-none: var(--scania-unit-0);
+  --component--input-border-width-top: var(--component--input-border-width-none);
+  --component--input-border-width-right: var(--component--input-border-width-none);
+  --component--input-border-width-bottom: var(--component--input-border-width-default);
+  --component--input-border-width-left: var(--component--input-border-width-none);
+  --component--input-icon-prefix-default: var(--color-text-defined);
+  --component--input-icon-suffix-default: var(--color-text-defined);
+  --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-opacity-disabled: var(--scania-opacity-25);
+  --component--input-text-counter-default: var(--color-text-defined);
+  --component--input-text-label-default: var(--color-text-strong);
+  --component--input-text-helper-default: var(--color-text-defined);
+  --component--input-text-placeholder-default: var(--color-text-soft);
+  --component--input-text-value-default: var(--color-text-strong);
+  --component--input-text-error-default: var(--color-system-danger-default);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component--input-background-primary: var(--color-background-layer-01);
+  --component--input-background-secondary: var(--color-background-layer-02);
+  --component--input-border-default: var(--color-border-soft);
+  --component--input-border-hover: var(--color-border-strong);
+  --component--input-border-success-default: var(--color-border-strong);
+  --component--input-border-error-default: var(--color-system-danger-default);
+  --component--input-border-radius-default: var(--traton-unit-4);
+  --component--input-border-radius-none: var(--traton-unit-0);
+  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
+  --component--input-border-width-default: var(--traton-unit-1);
+  --component--input-border-width-none: var(--traton-unit-0);
+  --component--input-border-width-top: var(--component--input-border-width-default);
+  --component--input-border-width-right: var(--component--input-border-width-default);
+  --component--input-border-width-bottom: var(--component--input-border-width-default);
+  --component--input-border-width-left: var(--component--input-border-width-default);
+  --component--input-icon-prefix-default: var(--color-text-defined);
+  --component--input-icon-suffix-default: var(--color-text-defined);
+  --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-opacity-disabled: var(--traton-opacity-25);
+  --component--input-text-counter-default: var(--color-text-defined);
+  --component--input-text-label-default: var(--color-text-strong);
+  --component--input-text-helper-default: var(--color-text-defined);
+  --component--input-text-placeholder-default: var(--color-text-subtle);
+  --component--input-text-value-default: var(--color-text-strong);
+  --component--input-text-error-default: var(--color-system-danger-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component--input-background-primary: var(--color-background-layer-01);
+  --component--input-background-secondary: var(--color-background-layer-02);
+  --component--input-border-default: var(--color-border-soft);
+  --component--input-border-hover: var(--color-border-strong);
+  --component--input-border-success-default: var(--color-border-strong);
+  --component--input-border-error-default: var(--color-system-danger-default);
+  --component--input-border-radius-default: var(--scania-unit-4);
+  --component--input-border-radius-none: var(--scania-unit-0);
+  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
+  --component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
+  --component--input-border-width-default: var(--scania-unit-1);
+  --component--input-border-width-none: var(--scania-unit-0);
+  --component--input-border-width-top: var(--component--input-border-width-none);
+  --component--input-border-width-right: var(--component--input-border-width-none);
+  --component--input-border-width-bottom: var(--component--input-border-width-default);
+  --component--input-border-width-left: var(--component--input-border-width-none);
+  --component--input-icon-prefix-default: var(--color-text-defined);
+  --component--input-icon-suffix-default: var(--color-text-defined);
+  --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-opacity-disabled: var(--scania-opacity-25);
+  --component--input-text-counter-default: var(--color-text-defined);
+  --component--input-text-label-default: var(--color-text-strong);
+  --component--input-text-helper-default: var(--color-text-defined);
+  --component--input-text-placeholder-default: var(--color-text-soft);
+  --component--input-text-value-default: var(--color-text-strong);
+  --component--input-text-error-default: var(--color-system-danger-default);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component--input-background-primary: var(--color-background-layer-01);
+  --component--input-background-secondary: var(--color-background-layer-02);
+  --component--input-border-default: var(--color-border-soft);
+  --component--input-border-hover: var(--color-border-strong);
+  --component--input-border-success-default: var(--color-border-strong);
+  --component--input-border-error-default: var(--color-system-danger-default);
+  --component--input-border-radius-default: var(--traton-unit-4);
+  --component--input-border-radius-none: var(--traton-unit-0);
+  --component--input-border-radius-top-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-top-right: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
+  --component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
+  --component--input-border-width-default: var(--traton-unit-1);
+  --component--input-border-width-none: var(--traton-unit-0);
+  --component--input-border-width-top: var(--component--input-border-width-default);
+  --component--input-border-width-right: var(--component--input-border-width-default);
+  --component--input-border-width-bottom: var(--component--input-border-width-default);
+  --component--input-border-width-left: var(--component--input-border-width-default);
+  --component--input-icon-prefix-default: var(--color-text-defined);
+  --component--input-icon-suffix-default: var(--color-text-defined);
+  --component--input-icon-error-default: var(--color-system-danger-default);
+  --component--input-opacity-disabled: var(--traton-opacity-25);
+  --component--input-text-counter-default: var(--color-text-defined);
+  --component--input-text-label-default: var(--color-text-strong);
+  --component--input-text-helper-default: var(--color-text-defined);
+  --component--input-text-placeholder-default: var(--color-text-subtle);
+  --component--input-text-value-default: var(--color-text-strong);
+  --component--input-text-error-default: var(--color-system-danger-default);
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
+  --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
+  --component-textarea-icon-resize-default: var(--color-icon-subtle);
+  --component-textarea-icon-readonly-default: var(--color-icon-strong);
+  --component-textarea-size-resize-height: var(--scania-unit-12);
+  --component-textarea-size-resize-width: var(--scania-unit-12);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
+  --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
+  --component-textarea-icon-resize-default: var(--color-icon-subtle);
+  --component-textarea-icon-readonly-default: var(--color-icon-strong);
+  --component-textarea-size-resize-height: var(--traton-unit-12);
+  --component-textarea-size-resize-width: var(--traton-unit-12);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
+  --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
+  --component-textarea-icon-resize-default: var(--color-icon-subtle);
+  --component-textarea-icon-readonly-default: var(--color-icon-strong);
+  --component-textarea-size-resize-height: var(--scania-unit-12);
+  --component-textarea-size-resize-width: var(--scania-unit-12);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
+  --component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
+  --component-textarea-icon-resize-default: var(--color-icon-subtle);
+  --component-textarea-icon-readonly-default: var(--color-icon-strong);
+  --component-textarea-size-resize-height: var(--traton-unit-12);
+  --component-textarea-size-resize-width: var(--traton-unit-12);
+}
+
 .tl-textarea {
-  --textarea-background-primary: var(--color-background-layer-01);
-  --textarea-background-secondary: var(--color-background-layer-02);
+  --textarea-background-primary: var(--component--input-background-primary);
+  --textarea-background-secondary: var(--component--input-background-secondary);
   --textarea-background: var(--textarea-background-primary);
-  --textarea-text: var(--color-foreground-text-strong);
+  --textarea-text: var(--component--input-text-value-default);
   --textarea-background-disabled: var(--textarea-background-primary);
-  --textarea-text-disabled: var(--color-foreground-text-disabled);
-  --textarea-placeholder-disabled: var(--color-foreground-text-disabled);
-  --textarea-label-disabled: var(--color-foreground-text-disabled);
-  --textarea-label: var(--color-foreground-text-strong);
-  --textarea-label-inside: var(--color-foreground-text-strong);
+  --textarea-text-disabled: var(--color-text-disabled);
+  --textarea-placeholder-disabled: var(--color-text-disabled);
+  --textarea-label-disabled: var(--color-text-disabled);
+  --textarea-label: var(--component--input-text-label-default);
+  --textarea-label-inside: var(--component--input-text-label-default);
   --textarea-label-inside-left: 16px;
-  --textarea-placeholder: var(--color-foreground-text-subtle);
-  --textarea-helper: var(--color-foreground-text-defined);
-  --textarea-error: var(--color-system-danger-default);
-  --textarea-textcounter: var(--color-foreground-text-defined);
-  --textarea-resize-icon: var(--color-foreground-text-subtle);
+  --textarea-placeholder: var(--component--input-text-placeholder-default);
+  --textarea-helper: var(--component--input-text-helper-default);
+  --textarea-error: var(--component--input-text-error-default);
+  --textarea-error-icon: var(--component--input-icon-error-default);
+  --textarea-textcounter: var(--component--input-text-counter-default);
+  --textarea-resize-icon: var(--component-textarea-icon-resize-default);
+  --textarea-opacity-disabled: var(--component--input-opacity-disabled);
+  --textarea-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
+    calc(var(--component--input-border-radius-top-right) * 1px)
+    calc(var(--component--input-border-radius-bottom-right) * 1px)
+    calc(var(--component--input-border-radius-bottom-left) * 1px);
+  --textarea-border-color: var(--component--input-border-default);
+  --textarea-border-color-hover: var(--component--input-border-hover);
+  --textarea-border-color-success: var(--component--input-border-success-default);
+  --textarea-border-color-error: var(--component--input-border-error-default);
+  --textarea-border-color-readonly: var(--color-border-strong);
+  --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
 }
 .tl-textarea--primary {
   --textarea-background: var(--textarea-background-primary);
   --textarea-background-disabled: var(--textarea-background-primary);
+  --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
 }
 .tl-textarea--secondary {
   --textarea-background: var(--textarea-background-secondary);
   --textarea-background-disabled: var(--textarea-background-secondary);
-}
-
-.tl-textarea,
-.scania .tl-textarea {
-  --textarea-border-radius: 4px 4px 0 0;
-  --textarea-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
-  --textarea-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
-  --textarea-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
-  --textarea-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
-  --textarea-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
-  --textarea-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
-  --textarea-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
-}
-
-.traton .tl-textarea {
-  --textarea-border-radius: 4px;
-  --textarea-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
-  --textarea-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
-  --textarea-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
-  --textarea-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
-  --textarea-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
-  --textarea-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
-  --textarea-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
+  --textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-secondary);
 }
 
 /* Typography Usage mixins */
@@ -64,7 +251,13 @@
 .tl-textarea:has(.tl-textarea__input:disabled) {
   cursor: not-allowed;
 }
-.tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+.tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__input, .tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__label {
+  opacity: var(--textarea-opacity-disabled);
+}
+.tl-textarea:has(.tl-textarea__input:disabled)::after {
+  opacity: var(--textarea-opacity-disabled);
+}
+.tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
   content: "";
   position: absolute;
   top: 18px;
@@ -76,22 +269,22 @@
   mask-size: contain;
   mask-repeat: no-repeat;
   mask-position: center;
-  z-index: 1;
+  z-index: 2;
 }
-.traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+.traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
   top: 20px;
   right: 16px;
 }
-.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
   top: 42px;
 }
-.traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+.traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
   top: 44px;
 }
-.tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+.tl-textarea:not(.tl-textarea--label-inside, :has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
   top: 17px;
 }
-.traton .tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
+.traton .tl-textarea:not(.tl-textarea--label-inside, :has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
   top: 19px;
 }
 .tl-textarea::after {
@@ -99,15 +292,15 @@
   position: absolute;
   bottom: 3px;
   right: 3px;
-  width: 12px;
-  height: 12px;
+  width: calc(var(--component-textarea-size-resize-width) * 1px);
+  height: calc(var(--component-textarea-size-resize-height) * 1px);
   background-color: var(--textarea-resize-icon);
   mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z' fill='currentColor'/%3E%3C/svg%3E");
   mask-size: contain;
   mask-repeat: no-repeat;
   mask-position: center;
   pointer-events: none;
-  z-index: 1;
+  z-index: 2;
 }
 .traton .tl-textarea::after {
   bottom: 5px;
@@ -125,9 +318,6 @@
 .traton .tl-textarea:has(.tl-textarea__bottom)::after {
   bottom: 27px;
 }
-.tl-textarea :has(.tl-textarea__input:disabled)::after {
-  background-color: var(--color-foreground-text-disabled);
-}
 
 .tl-textarea__input {
   all: unset;
@@ -137,8 +327,11 @@
   width: 100%;
   box-sizing: border-box;
   margin: 0;
-  border: none;
+  border-style: solid;
+  border-color: var(--textarea-border-color);
+  border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
   outline: none;
+  transition: border-color 200ms ease;
 }
 .tl-textarea__input::placeholder {
   color: var(--textarea-placeholder);
@@ -165,48 +358,53 @@
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
   color: var(--textarea-text);
   resize: vertical;
-  box-shadow: inset var(--textarea-box-shadow);
-  transition: box-shadow 0.2s;
   z-index: 0;
 }
 .tl-textarea__input::placeholder {
   transform: translateY(1px);
 }
 .tl-textarea__input:focus {
-  box-shadow: inset var(--textarea-box-shadow-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 .tl-textarea__input::-webkit-resizer {
   display: none;
 }
-.tl-textarea:hover .tl-textarea__input:not(:focus):not(:disabled) {
-  box-shadow: inset var(--textarea-box-shadow-hover);
+.tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
+  border-color: var(--textarea-border-color-hover);
 }
 .tl-textarea--error .tl-textarea__input {
-  box-shadow: inset var(--textarea-box-shadow-error);
+  border-color: var(--textarea-border-color-error);
 }
 .tl-textarea--error .tl-textarea__input:focus {
-  box-shadow: inset var(--textarea-box-shadow-error-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
-.tl-textarea--error:hover .tl-textarea__input:not(:focus):not(:disabled) {
-  box-shadow: inset var(--textarea-box-shadow-error-hover);
+.tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
+  border-color: var(--textarea-border-color-error);
 }
-.tl-textarea--success:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
-  box-shadow: inset var(--textarea-box-shadow-success);
+.tl-textarea--success:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
+  border-color: var(--textarea-border-color-success);
 }
 .tl-textarea__input:disabled {
-  box-shadow: none;
-  color: var(--textarea-text-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
-  box-shadow: inset var(--textarea-box-shadow);
+  border-color: var(--textarea-border-color-readonly);
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
-  box-shadow: inset var(--textarea-box-shadow-focus);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
+  outline-offset: 1px;
+  z-index: 1;
 }
 :has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
-  box-shadow: inset var(--textarea-box-shadow-hover);
+  border-color: var(--textarea-border-color-hover);
 }
 .tl-textarea--label-inside .tl-textarea__input {
   padding-top: 26px;
@@ -225,7 +423,7 @@
   cursor: default;
   pointer-events: none;
 }
-:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
+:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
   padding-right: 50px;
 }
 
@@ -255,7 +453,7 @@
   transform: none;
   transform-origin: top left;
   transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
-  z-index: 1;
+  z-index: 2;
 }
 .tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
   font-family: var(--detail-07-font-family);
@@ -289,7 +487,7 @@
   position: relative;
 }
 :has(.tl-textarea__input:disabled) .tl-textarea__helper {
-  color: var(--color-foreground-text-disabled);
+  color: var(--color-text-disabled);
 }
 .tl-textarea--error .tl-textarea__helper {
   padding-left: 24px;
@@ -301,7 +499,7 @@
   top: 0;
   width: 16px;
   height: 16px;
-  background-color: var(--textarea-error);
+  background-color: var(--textarea-error-icon);
   mask-image: var(--icon-error-svg);
   mask-size: contain;
   mask-repeat: no-repeat;
@@ -313,11 +511,11 @@
 .tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
   display: none;
 }
-.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__helper {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__helper {
   color: var(--textarea-error);
 }
 .tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
-  background-color: var(--color-foreground-text-disabled);
+  background-color: var(--color-text-disabled);
 }
 
 .tl-textarea__charcounter {
@@ -331,17 +529,17 @@
   color: var(--textarea-textcounter);
 }
 :has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
-  color: var(--color-foreground-text-disabled);
+  color: var(--color-text-disabled);
 }
-.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
   color: var(--textarea-error);
 }
-.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
+.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
   color: var(--textarea-error);
 }
 
 .tl-textarea__charcounter-divider {
-  color: var(--color-foreground-text-disabled);
+  color: var(--color-text-disabled);
 }
 
 .tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,

package/dist/tl-toast.css

@@ -1,12 +1,114 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+:root,
+.tds-mode-light,
+.scania .tds-mode-light,
+.scania.tds-mode-light,
+.scania .tl-mode-light,
+.scania.tl-mode-light {
+  --component-toast-background-information-default: var(--color-background-inverse-base);
+  --component-toast-background-success-default: var(--color-background-inverse-base);
+  --component-toast-background-warning-default: var(--color-background-inverse-base);
+  --component-toast-background-error-default: var(--color-background-inverse-base);
+  --component-toast-border-radius-default: var(--scania-unit-4);
+  --component-toast-border-width-default: var(--scania-unit-4);
+  --component-toast-border-information-default: var(--scania-color-blue-300);
+  --component-toast-border-success-default: var(--scania-color-green-300);
+  --component-toast-border-warning-default: var(--scania-color-yellow-300);
+  --component-toast-border-error-default: var(--scania-color-red-400);
+  --component-toast-text-title-default: var(--color-text-inverse-strong);
+  --component-toast-text-body-default: var(--color-text-inverse-strong);
+  --component-toast-text-link-default: var(--component-toast-text-body-default);
+  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
+  --component-toast-icon-information-default: var(--scania-color-blue-300);
+  --component-toast-icon-success-default: var(--scania-color-green-300);
+  --component-toast-icon-warning-default: var(--scania-color-yellow-300);
+  --component-toast-icon-error-default: var(--scania-color-red-400);
+}
+
+.traton .tds-mode-light,
+.traton.tds-mode-light,
+.traton .tl-mode-light,
+.traton.tl-mode-light {
+  --component-toast-background-information-default: var(--color-background-inverse-base);
+  --component-toast-background-success-default: var(--color-background-inverse-base);
+  --component-toast-background-warning-default: var(--color-background-inverse-base);
+  --component-toast-background-error-default: var(--color-background-inverse-base);
+  --component-toast-border-radius-default: var(--traton-unit-4);
+  --component-toast-border-width-default: var(--traton-unit-4);
+  --component-toast-border-information-default: var(--color-system-info-default);
+  --component-toast-border-success-default: var(--color-system-success-default);
+  --component-toast-border-warning-default: var(--color-system-warning-default);
+  --component-toast-border-error-default: var(--color-system-danger-default);
+  --component-toast-text-title-default: var(--color-text-inverse-strong);
+  --component-toast-text-body-default: var(--color-text-inverse-soft);
+  --component-toast-text-link-default: var(--component-toast-text-body-default);
+  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
+  --component-toast-icon-information-default: var(--color-system-info-default);
+  --component-toast-icon-success-default: var(--color-system-success-default);
+  --component-toast-icon-warning-default: var(--color-system-warning-default);
+  --component-toast-icon-error-default: var(--color-system-danger-default);
+}
+
+.tds-mode-dark,
+.scania .tds-mode-dark,
+.scania.tds-mode-dark,
+.scania .tl-mode-dark,
+.scania.tl-mode-dark {
+  --component-toast-background-information-default: var(--color-background-inverse-layer-01);
+  --component-toast-background-success-default: var(--color-background-inverse-layer-01);
+  --component-toast-background-warning-default: var(--color-background-inverse-layer-01);
+  --component-toast-background-error-default: var(--color-background-inverse-layer-01);
+  --component-toast-border-radius-default: var(--scania-unit-4);
+  --component-toast-border-width-default: var(--scania-unit-4);
+  --component-toast-border-information-default: var(--scania-color-blue-400);
+  --component-toast-border-success-default: var(--scania-color-green-300);
+  --component-toast-border-warning-default: var(--scania-color-yellow-400);
+  --component-toast-border-error-default: var(--scania-color-red-400);
+  --component-toast-text-title-default: var(--color-text-inverse-strong);
+  --component-toast-text-body-default: var(--color-text-inverse-strong);
+  --component-toast-text-link-default: var(--component-toast-text-body-default);
+  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
+  --component-toast-icon-information-default: var(--scania-color-blue-400);
+  --component-toast-icon-success-default: var(--scania-color-green-300);
+  --component-toast-icon-warning-default: var(--scania-color-yellow-500);
+  --component-toast-icon-error-default: var(--scania-color-red-400);
+}
+
+.traton .tds-mode-dark,
+.traton.tds-mode-dark,
+.traton .tl-mode-dark,
+.traton.tl-mode-dark {
+  --component-toast-background-information-default: var(--color-background-inverse-base);
+  --component-toast-background-success-default: var(--color-background-inverse-base);
+  --component-toast-background-warning-default: var(--color-background-inverse-base);
+  --component-toast-background-error-default: var(--color-background-inverse-base);
+  --component-toast-border-radius-default: var(--traton-unit-4);
+  --component-toast-border-width-default: var(--traton-unit-4);
+  --component-toast-border-information-default: var(--color-system-info-default);
+  --component-toast-border-success-default: var(--color-system-success-default);
+  --component-toast-border-warning-default: var(--color-system-warning-default);
+  --component-toast-border-error-default: var(--color-system-danger-default);
+  --component-toast-text-title-default: var(--color-text-inverse-strong);
+  --component-toast-text-body-default: var(--color-text-inverse-soft);
+  --component-toast-text-link-default: var(--component-toast-text-body-default);
+  --component-toast-icon-dismiss-default: var(--color-text-inverse-strong);
+  --component-toast-icon-information-default: var(--color-system-info-default);
+  --component-toast-icon-success-default: var(--color-system-success-default);
+  --component-toast-icon-warning-default: var(--color-system-warning-default);
+  --component-toast-icon-error-default: var(--color-system-danger-default);
+}
+
 .tl-toast {
-  --toast-background: var(--color-background-inverse-base);
-  --toast-headline: var(--color-foreground-text-inverse-strong);
-  --toast-subheadline: var(--color-foreground-text-inverse-soft);
-  --toast-dismiss: var(--color-foreground-text-inverse-strong);
-  --toast-icon-error: var(--color-system-danger-default);
-  --toast-icon-success: var(--color-system-success-default);
-  --toast-icon-warning: var(--color-system-warning-default);
-  --toast-icon-info: var(--color-system-info-default);
+  --toast-background: var(--component-toast-background-information-default);
+  --toast-headline: var(--component-toast-text-title-default);
+  --toast-subheadline: var(--component-toast-text-body-default);
+  --toast-dismiss: var(--component-toast-icon-dismiss-default);
+  --toast-icon-info: var(--component-toast-icon-information-default);
+  --toast-icon-success: var(--component-toast-icon-success-default);
+  --toast-icon-warning: var(--component-toast-icon-warning-default);
+  --toast-icon-error: var(--component-toast-icon-error-default);
 }
 
 /* Typography Usage mixins */
@@ -94,8 +196,8 @@
   cursor: pointer;
 }
 .tl-toast__close:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -108,4 +210,11 @@
 }
 .tl-toast--warning .tl-toast__icon {
   color: var(--toast-icon-warning);
+}
+
+.tl-toast .tl-link {
+  text-decoration: underline;
+}
+.tl-toast .tl-link:hover {
+  text-decoration: none;
 }