@scania/tegel 1.33.0 → 1.34.0-multibrand-beta.1

package/dist/collection/components/textarea/textarea.css

@@ -1,5 +1,8 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .textarea-container {
-  border-radius: 4px 4px 0 0;
+  border-radius: var(--textarea-border-radius);
   position: relative;
   box-sizing: border-box;
   height: auto;
@@ -19,64 +22,60 @@
   width: unset;
   min-width: 100%;
 }
-
-.textarea-container:not(.textarea-disabled) .textarea-wrapper::before, .textarea-container:not(.textarea-disabled) .textarea-wrapper::after {
+.textarea-container .textarea-wrapper::after {
+  background: var(--textarea-bar);
   content: "";
   height: 2px;
-  width: 0;
+  width: 100%;
+  bottom: 0;
   position: absolute;
-  background: var(--tds-textarea-bar);
-  transition: 0.35s ease all;
-}
-.textarea-container:not(.textarea-disabled) .textarea-wrapper::before {
-  left: 50%;
-}
-.textarea-container:not(.textarea-disabled) .textarea-wrapper::after {
-  right: 50%;
-}
-.textarea-container:not(.textarea-disabled) .textarea-wrapper::after, .textarea-container:not(.textarea-disabled) .textarea-wrapper::before {
-  top: calc(100% - 2px);
+  transform: scaleX(0);
+  transition: 0.35s ease transform;
 }
 
 .textarea-input {
-  border-radius: 4px 4px 0 0;
   width: 100%;
   box-sizing: border-box;
   margin: 0;
   border: none;
   outline: none;
   height: 100%;
-  color: var(--tds-textarea-color);
-  background-color: var(--tds-textarea-background);
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  color: var(--textarea-text);
+  background-color: var(--textarea-background);
+  border-radius: var(--textarea-border-radius);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
   display: block;
   resize: vertical;
-  border-bottom: 1px solid var(--tds-textarea-border-bottom);
-  transition: border-bottom-color 200ms ease;
+  box-shadow: var(--textarea-box-shadow);
+  transition: box-shadow 200ms ease;
 }
 .textarea-input::placeholder {
   opacity: 1;
-  color: var(--tds-textarea-placeholder);
+  color: var(--textarea-placeholder);
 }
 .textarea-input:disabled {
-  background-color: var(--tds-textarea-disabled-background);
-  color: var(--tds-textarea-disabled-color);
+  background-color: var(--textarea-disabled-background);
+  color: var(--textarea-disabled-text);
   cursor: not-allowed;
 }
 .textarea-input:disabled::placeholder {
-  color: var(--tds-textarea-disabled-placeholder);
+  color: var(--textarea-disabled-placeholder);
 }
 .textarea-input::-webkit-resizer {
   display: none;
 }
 .textarea-input:hover {
-  border-bottom-color: var(--tds-textarea-border-bottom-hover);
+  box-shadow: var(--textarea-box-shadow-hover);
 }
 
 .textarea-resizer-icon {
-  color: var(--tds-textarea-resize-icon);
+  color: var(--textarea-resize-icon);
   position: absolute;
   display: block;
   bottom: 2px;
@@ -84,32 +83,40 @@
   padding-bottom: 2px;
   padding-right: 2px;
   pointer-events: none;
-  background-color: var(--tds-textarea-background);
+  background-color: var(--textarea-background);
 }
 .textarea-resizer-icon svg {
   display: block;
 }
 
 .textarea-label {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   display: block;
   z-index: 1;
   margin-bottom: var(--tds-spacing-element-8);
-  color: var(--tds-textarea-label-color);
+  color: var(--textarea-label);
 }
 
 .textarea-container.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   transition: 0.1s ease all;
-  color: var(--tds-textarea-label-inside-color);
+  color: var(--textarea-label-inside);
   position: absolute;
   top: var(--tds-spacing-element-20);
   left: var(--tds-spacing-element-16);
 }
 .textarea-container.textarea-label-inside.textarea-disabled .textarea-label {
-  color: var(--tds-textarea-disabled-label);
+  color: var(--textarea-disabled-label);
 }
 .textarea-container.textarea-label-inside .textarea-input::placeholder {
   color: transparent;
@@ -119,45 +126,77 @@
 }
 .textarea-container.textarea-label-inside .textarea-input:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--tds-textarea-placeholder);
+  color: var(--textarea-placeholder);
+}
+.textarea-container.textarea-focus {
+  /* Focus outline */
+  /* Focus outline error staet */
 }
 .textarea-container.textarea-focus.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
   top: var(--tds-spacing-element-8);
 }
-.textarea-container.textarea-focus .textarea-wrapper::before, .textarea-container.textarea-focus .textarea-wrapper::after {
-  width: 50%;
+.textarea-container.textarea-focus .textarea-wrapper::after {
+  transform: scaleX(1);
+}
+.textarea-container.textarea-focus .textarea-input {
+  outline: var(--textarea-focus-outline);
+  outline-offset: var(--textarea-focus-outline-offset);
+}
+.textarea-container.textarea-focus.textarea-error .textarea-input {
+  outline: var(--textarea-focus-outline-error);
+  outline-offset: var(--textarea-focus-outline-offset);
 }
 .textarea-container.textarea-data.textarea-label-inside .textarea-label {
-  font: var(--tds-detail-07);
-  letter-spacing: var(--tds-detail-07-ls);
+  font-family: var(--detail-07-font-family);
+  font-size: var(--detail-07-font-size);
+  line-height: var(--detail-07-line-height);
+  font-weight: var(--detail-07-font-weight);
+  letter-spacing: var(--detail-07-letter-spacing);
+  text-transform: var(--detail-07-text-transform);
   top: var(--tds-spacing-element-8);
 }
 
 .textarea-textcounter {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
-  color: var(--tds-textarea-textcounter);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  color: var(--textarea-textcounter);
   float: right;
   flex-basis: 100%;
   text-align: right;
   padding-top: var(--tds-spacing-element-4);
 }
 .textarea-textcounter .textfield-textcounter-divider {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
-  color: var(--tds-textarea-textcounter-divider);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
+  color: var(--textarea-textcounter-divider);
 }
 
 .textarea-helper {
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   display: flex;
   gap: 8px;
   align-items: center;
   padding-top: var(--tds-spacing-element-4);
-  color: var(--tds-textarea-helper);
+  color: var(--textarea-helper);
   flex-grow: 2;
   flex-basis: auto;
 }
@@ -166,38 +205,41 @@
 }
 
 .textarea-success .textarea-input {
-  border-bottom-color: var(--tds-textarea-border-bottom-success);
+  box-shadow: var(--textarea-box-shadow-success);
 }
 
 .textarea-error .textarea-input {
-  border-bottom-color: var(--tds-textarea-border-bottom-error);
+  box-shadow: var(--textarea-box-shadow-error);
 }
-.textarea-error .textarea-wrapper::after, .textarea-error .textarea-wrapper::before {
-  background: var(--tds-textarea-bar-error);
+.textarea-error .textarea-wrapper::after {
+  background: var(--textarea-bar-error);
 }
 .textarea-error .textarea-helper {
-  color: var(--tds-textarea-helper-error);
+  color: var(--textarea-helper-error);
 }
 
 .textarea-disabled {
   cursor: not-allowed;
 }
 .textarea-disabled .textarea-input {
-  border-bottom-color: transparent;
+  box-shadow: var(--textarea-box-shadow-disabled);
   pointer-events: none;
   user-select: none;
 }
 .textarea-disabled .textarea-label {
-  color: var(--tds-textarea-disabled-label);
+  color: var(--textarea-disabled-label);
 }
 .textarea-disabled .textarea-helper {
-  color: var(--tds-textarea-helper-disabled);
+  color: var(--textarea-helper-disabled);
 }
 .textarea-disabled .textarea-textcounter {
-  color: var(--tds-textarea-textcounter-disabled);
+  color: var(--textarea-textcounter-disabled);
 }
 .textarea-disabled .textarea-textcounter .textfield-textcounter-divider {
-  color: var(--tds-textarea-textcounter-disabled);
+  color: var(--textarea-textcounter-disabled);
+}
+.textarea-disabled .textarea-resizer-icon {
+  background-color: var(--textarea-background-secondary);
 }
 
 .textarea-icon__readonly {
@@ -205,27 +247,13 @@
   position: absolute;
   right: 18px;
   top: 18px;
-  color: var(--tds-textarea-icon-read-only-color);
-}
-.textarea-icon__readonly-label {
-  display: none;
-  position: absolute;
-  right: 18px;
-  top: 48px;
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
-  padding: 8px;
-  color: var(--tds-textarea-icon-read-only-label-color);
-  background-color: var(--tds-textarea-icon-read-only-label-background);
-  white-space: nowrap;
-  border-radius: 4px 0 4px 4px;
 }
 
 .textarea-readonly .textarea-icon__readonly {
   display: block;
 }
 .textarea-readonly .textarea-input {
-  border: 1px solid var(--tds-textarea-border-bottom-read-only-color);
+  box-shadow: var(--textarea-box-shadow-read-only);
 }
 .textarea-readonly .textfield-container {
   background-color: transparent;

package/dist/collection/components/textarea/textarea.js

@@ -65,17 +65,17 @@ export class TdsTextarea {
     }
     render() {
         var _a;
-        return (h("div", { key: '06fd8ce87614410858a7d9253fac73a6f1cf20ec', class: {
+        return (h("div", { key: 'dd21ad7eba3f5c751fc4e67b6e20e373aada6c79', class: {
                 'textarea-container': true,
-                'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-focus': this.focusInput,
+                'textarea-label-inside': this.labelPosition === 'inside',
                 'textarea-disabled': this.disabled,
                 'textarea-readonly': !this.disabled && this.readOnly,
                 [`tds-mode-variant-${this.setModeVariant(this.modeVariant)}`]: true,
                 'textarea-data': this.value !== '',
                 [`textarea-${this.state}`]: this.state === 'error' || this.state === 'success',
                 'no-min-width': this.noMinWidth,
-            } }, this.labelPosition !== 'no-label' && (h("label", { key: '1a02a333e4164b39fd223c68cc3d27d7c53487fb', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '6d45e8c8427770accc82c7ad9e10fbed016437a4', class: "textarea-wrapper" }, h("textarea", { key: '614c30a5b5077060b1568744cf0800580e746819', id: `textarea-element-${this.uuid}`, class: 'textarea-input', ref: (inputEl) => {
+            } }, this.labelPosition !== 'no-label' && (h("label", { key: 'e63ddf98d7a3cb8e759061cbbee566a2855571ba', htmlFor: `textarea-element-${this.uuid}`, class: 'textarea-label' }, this.label)), h("div", { key: '984e957c4a556074667140917b8345ac2595fdc5', class: "textarea-wrapper" }, h("textarea", { key: '55106fda825589c3ffb4d2903b07a4431fb29d00', id: `textarea-element-${this.uuid}`, class: "textarea-input", ref: (inputEl) => {
                 this.textEl = inputEl;
             }, disabled: this.disabled, readonly: !this.disabled && this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
                 if (!this.readOnly) {
@@ -85,7 +85,7 @@ export class TdsTextarea {
                 if (!this.readOnly) {
                     this.handleBlur(event);
                 }
-            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: 'e0574ae32d1ce9c69156dc2aa52d8d1881b6ff9b', class: "textarea-resizer-icon" }, h("svg", { key: '23e79729cc099b7e4f07192c05aa4a304b91788a', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '54891720aa51af768f467be5bd8a72fc7adc8d47', "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" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '72e3586f1be99460ced66d640392b4596e5b8c2f', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: '9f84391a75b5ae428c71d3b713a9d281c4475a09', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '55e195bb50d8b707ec3a403c8c62cad74d738919', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'ff2043a19ebb129178ecfd36126b0d23eacde4d1', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '84b0991ef5ddab7f960ba75db22c65762b0b5d20', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: '963b3a3bdafeabec6ad2bd3663c07ed0d4a5b3fd', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '8496a0ae44721cdcd9443e09ff6a709b6d3c704f', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+            }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), "aria-invalid": this.state === 'error' ? 'true' : 'false', "aria-readonly": this.readOnly ? 'true' : 'false', "aria-label": this.tdsAriaLabel ? this.tdsAriaLabel : this.label, "aria-describedby": `textarea-helper-element-${this.uuid}` }), h("span", { key: '53f748ec3aad84435b01340c427277d201ef8293', class: "textarea-resizer-icon" }, h("svg", { key: '936ca19dc06fe6d83a89809c7b7500be47930442', width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '142eafbb0637bc62d39cc784840525b9f942be76', "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" }))), !this.disabled && !this.hideReadOnlyIcon && this.readOnly && (h("span", { key: '9c7cc7ac48f45c8e125970d3907271f96a2321e1', class: "textarea-icon__readonly" }, h("tds-tooltip", { key: 'aeb173e437ac6a773caa987a6988ed4b9ac0c3a2', placement: "top-end", text: "This field is non-editable", selector: "#readonly-tooltip" }), h("tds-icon", { key: '6a174aa3488ad0e8c379918bfd8f8602acdf1a62', id: "readonly-tooltip", name: "edit_inactive", svgTitle: "inactive" })))), h("span", { key: 'aad3a3c7273215a1ff7cf44962f6cc2ee369821a', class: 'textarea-helper', "aria-live": "assertive", id: `textarea-helper-element-${this.uuid}` }, this.state === 'error' && this.helper && !this.readOnly && (h("tds-icon", { key: '1ee6d461455b03f163d03d4973b54a9ab1f6c804', name: "error", size: "16px" })), this.helper), this.maxLength > 0 && (h("div", { key: 'f83b5821271cdb06828593208faa8f7359571a43', class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { key: '35900e84677ad26350fad6b0db03dc4c2afc3706', class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
     }
     static get is() { return "tds-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/toast/toast.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host(.hide) {
   display: none;
   visibility: hidden;
@@ -7,34 +10,34 @@
   z-index: 800;
 }
 :host .wrapper {
+  background-color: var(--toast-background);
   display: flex;
   width: 348px;
-  background-color: var(--tds-toast-background-color);
   border-radius: 4px;
 }
 :host .wrapper.information {
-  border-left: 4px solid var(--tds-toast-icon-color-info);
+  border-left: 4px solid var(--toast-icon-info);
 }
 :host .wrapper.information tds-icon {
-  color: var(--tds-toast-icon-color-info);
+  color: var(--toast-icon-info);
 }
 :host .wrapper.success {
-  border-left: 4px solid var(--tds-toast-icon-color-success);
+  border-left: 4px solid var(--toast-icon-success);
 }
 :host .wrapper.success tds-icon {
-  color: var(--tds-toast-icon-color-success);
+  color: var(--toast-icon-success);
 }
 :host .wrapper.error {
-  border-left: 4px solid var(--tds-toast-icon-color-error);
+  border-left: 4px solid var(--toast-icon-error);
 }
 :host .wrapper.error tds-icon {
-  color: var(--tds-toast-icon-color-error);
+  color: var(--toast-icon-error);
 }
 :host .wrapper.warning {
-  border-left: 4px solid var(--tds-toast-icon-color-warning);
+  border-left: 4px solid var(--toast-icon-warning);
 }
 :host .wrapper.warning tds-icon {
-  color: var(--tds-toast-icon-color-warning);
+  color: var(--toast-icon-warning);
 }
 :host .wrapper button.close {
   height: 20px;
@@ -50,13 +53,12 @@
   cursor: pointer;
 }
 :host .wrapper button.close:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
   outline-offset: 1px;
-  z-index: 1;
 }
 :host .wrapper button.close tds-icon {
-  color: var(--tds-toast-dissmiss-color);
+  color: var(--toast-dissmiss);
   padding: 0;
 }
 :host tds-icon {
@@ -77,17 +79,23 @@
 }
 :host .content .header,
 :host .content slot[name=header]::slotted(*) {
-  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
-  font: var(--tds-headline-07) !important;
-  letter-spacing: var(--tds-headline-07-ls) !important;
-  color: var(--tds-toast-headline-color);
+  font-family: var(--headline-07-font-family);
+  font-size: var(--headline-07-font-size);
+  line-height: var(--headline-07-line-height);
+  font-weight: var(--headline-07-font-weight);
+  letter-spacing: var(--headline-07-letter-spacing);
+  text-transform: var(--headline-07-text-transform);
+  color: var(--toast-headline);
 }
 :host .content .subheader,
 :host .content slot[name=subheader]::slotted(*) {
-  /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
-  color: var(--tds-toast-subheadline-color);
-  font: var(--tds-detail-02) !important;
-  letter-spacing: var(--tds-detail-02-ls) !important;
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--toast-subheadline);
 }
 :host .content .subheader.no-link slot::slotted(*),
 :host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*) {
@@ -97,8 +105,8 @@
   padding-top: 12px;
 }
 :host .tds-mode-variant-primary {
-  --tds-toast-background: var(--tds-toast-background-primary);
+  --toast-background: var(--toast-background-primary);
 }
 :host .tds-mode-variant-secondary {
-  --tds-toast-background: var(--tds-toast-background-secondary);
+  --toast-background: var(--toast-background-secondary);
 }

package/dist/collection/components/toast/toast.js

@@ -65,12 +65,12 @@ export class TdsToast {
         const usesHeaderSlot = hasSlot('header', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: '433c25165487688ff40c78a0455d30cedd08c76f', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
+        return (h(Host, { key: '09db24b58ba05daeba3e00ae880e86e700a43c2d', "aria-live": this.tdsAriaLive, toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: {
                 hide: this.hidden,
                 show: !this.hidden,
-            } }, h("div", { key: '2734573a413d9cdf1a329675fe0e0db374243cbf', class: `
+            } }, h("div", { key: '253a018ec0eea9e17f72200f52a38e71802f2902', class: `
             wrapper
-            ${this.variant}` }, h("tds-icon", { key: '88d4ab6fd55d64c93ad3089c695d0fa4075208a6', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: '02de15f884420946530d2e04c330987f73c9ca44', class: `content` }, h("div", { key: '4eb8c6a13a7bb53313a18b47bfa8e2ab1211cdbc', class: "header-subheader" }, this.header && h("div", { key: '1b707e29cdd68a5cc73a2b694b8b93698cbac661', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: 'ffe2b463f8fc6e4ca3b563d7a4ae55968cb4a478', name: "header" }), this.subheader && h("div", { key: '8164b591452e4a6f025f752951c678a15443fff9', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '2bca8428e8eb128cf8c0f62b31a0da54ef555df3', name: "subheader" })), usesActionsSlot && (h("div", { key: 'de84bc19257b09127b861b357240509a7346f2e7', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'b85a46c5dc97dc7d3b95feb816145731887711fb', name: "actions" })))), this.closable && (h("button", { key: '69adb03d815ece9e50cf436957927c5dcd4d3ab8', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: '9b4f062079caa32c5900202aaf1c2a7a5ef8e18c', name: "cross", size: "20px", svgTitle: "cross" }))))));
+            ${this.variant}` }, h("tds-icon", { key: '953f414876c38ffb05bc0c684850ab53df124b5e', name: this.getIconName(), size: "20px", svgTitle: this.getIconName() }), h("div", { key: 'eb1ec8eb50cf3e05ecd880c427804626d9e4c51b', class: `content` }, h("div", { key: '97a0f4cb5ec278ad6a22051328461a9e0e1ce0ff', class: "header-subheader" }, this.header && h("div", { key: 'b3ae30e072257f4a74e748e24991bbab72a80c01', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '761fac1eda5bedd6c36d00be0548109c4f774af9', name: "header" }), this.subheader && h("div", { key: 'b4916a19416d8c0bfbdc0ef3d98fefda6ea96c86', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '62813da86efbf2ddf089a4931e11f774d6d27491', name: "subheader" })), usesActionsSlot && (h("div", { key: '93ec29dca445466da32ea2dc1c04bef76b8dc79e', class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { key: 'fa9aeb95c9c569e77f85e3b65d993064e35dad81', name: "actions" })))), this.closable && (h("button", { key: '0d0aad78ebd983647774a2afdb593a7aa4e2dbf9', id: "my-button", "aria-label": this.tdsCloseAriaLabel, onClick: this.handleClose, class: "close" }, h("tds-icon", { key: 'df6e7efeef43689bf44c101d23e5ce725d087951', name: "cross", size: "20px", svgTitle: "cross" }))))));
     }
     static get is() { return "tds-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.css

@@ -1,14 +1,31 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
+tds-toggle {
+  --toggle-switch: var(--color-brand-neutral-white);
+  --toggle-text: var(--color-foreground-text-strong);
+  --toggle-disabled: var(--color-foreground-icon-disabled);
+  --toggle-background-on: var(--color-system-success-default);
+  --toggle-background-off: var(--color-foreground-icon-subtle);
+  --toggle-border-focus: var(--color-foreground-border-accent-focus);
+}
+
 .tds-toggle .disabled {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .tds-toggle .toggle-headline {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-toggle-headline);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--toggle-text);
   margin-bottom: 12px;
 }
 .tds-toggle .toggle-headline.disabled {
-  color: var(--tds-toggle-headline-disabled);
+  color: var(--toggle-disabled);
+  user-select: none;
 }
 .tds-toggle input[type=checkbox] {
   appearance: initial;
@@ -22,72 +39,60 @@
   /* Switch */
 }
 .tds-toggle input[type=checkbox]::after, .tds-toggle input[type=checkbox]::before {
+  transition: all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania);
   content: "";
   position: absolute;
   box-sizing: border-box;
-  transition: all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania);
 }
 .tds-toggle input[type=checkbox]::before {
   /* Slider */
-  width: 44px;
-  height: 24px;
+  background-color: var(--toggle-background-off);
+  border: 2px solid transparent;
   border-radius: 16px;
-  background-color: var(--tds-toggle-off-slider);
   left: 0;
-  border: 1px solid transparent;
+  height: 24px;
+  width: 44px;
 }
 .tds-toggle input[type=checkbox]::after {
-  width: 16px;
-  height: 16px;
-  background-color: var(--tds-toggle-switch);
+  background-color: var(--toggle-switch);
   border-radius: 50%;
   left: 4px;
   top: 4px;
+  width: 16px;
+  height: 16px;
 }
 .tds-toggle input[type=checkbox]:focus {
-  outline: none;
-  outline: 2px solid var(--tds-toggle-border-outline);
+  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
+  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
+  outline-offset: 1px;
   border-radius: 16px;
-  outline-offset: 0;
 }
 .tds-toggle input[type=checkbox]:focus::before {
-  background-color: var(--tds-toggle-off-slider-focus);
-  border: 1px solid var(--tds-toggle-off-border-focus);
+  background-color: var(--toggle-disabled);
 }
 .tds-toggle input[type=checkbox]:hover::before {
-  background-color: var(--tds-toggle-off-slider-hover);
-  border: 1px solid var(--tds-toggle-off-border-focus);
+  background-color: var(--toggle-background-off);
 }
 .tds-toggle input[type=checkbox]:checked::before {
-  background-color: var(--tds-toggle-on-slider);
-}
-.tds-toggle input[type=checkbox]:checked:focus::before {
-  background-color: var(--tds-toggle-on-slider-focus);
-  border: 1px solid var(--tds-toggle-off-border-focus);
-}
-.tds-toggle input[type=checkbox]:checked:hover::before {
-  background-color: var(--tds-toggle-on-slider-hover);
-  border: 1px solid var(--tds-toggle-off-border-focus);
+  background-color: var(--toggle-background-on);
 }
 .tds-toggle input[type=checkbox]:checked::after {
   left: 24px;
 }
 .tds-toggle input[type=checkbox]:disabled {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .tds-toggle input[type=checkbox]:disabled::before {
-  background-color: var(--tds-toggle-slider-disabled);
-  border: 1px solid var(--tds-toggle-slider-disabled);
+  background-color: var(--toggle-disabled);
 }
 .tds-toggle input[type=checkbox]:disabled::after {
-  background-color: var(--tds-toggle-switch-disabled);
+  background-color: var(--toggle-switch);
 }
 .tds-toggle input[type=checkbox]:disabled:checked::before {
-  background-color: var(--tds-toggle-on-slider-disabled);
-  border: 1px solid var(--tds-toggle-on-slider-disabled);
+  background-color: var(--toggle-disabled);
 }
 .tds-toggle input[type=checkbox]:disabled:checked::after {
-  background-color: var(--tds-toggle-switch-disabled);
+  background-color: var(--toggle-switch);
 }
 .tds-toggle input[type=checkbox].sm {
   width: 28px;
@@ -102,27 +107,32 @@
   height: 8px;
 }
 .tds-toggle input[type=checkbox].sm:checked::before {
-  background-color: var(--tds-toggle-on-slider);
+  background-color: var(--toggle-background-on);
 }
 .tds-toggle input[type=checkbox].sm:checked::after {
   left: 16px;
 }
 .tds-toggle input[type=checkbox].sm:disabled::before {
-  background-color: var(--tds-toggle-slider-disabled);
-  border: 1px solid var(--tds-toggle-slider-disabled);
+  background-color: var(--toggle-disabled);
 }
 .tds-toggle input[type=checkbox].sm:disabled::after {
-  background-color: var(--tds-toggle-switch-disabled);
+  background-color: var(--toggle-switch);
 }
 .tds-toggle label {
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
+  color: var(--toggle-text);
+  cursor: pointer;
+  user-select: none;
   display: inline-block;
   vertical-align: middle;
-  font: var(--tds-detail-01);
-  letter-spacing: var(--tds-detail-01-ls);
-  color: var(--tds-toggle-label-color);
   padding-left: 8px;
-  cursor: pointer;
 }
 .tds-toggle label.disabled {
-  color: var(--tds-toggle-label-color-disabled);
+  color: var(--toggle-disabled);
+  pointer-events: none;
 }