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

package/dist/collection/components/table/table-footer/table-footer.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: table-footer-group;
@@ -7,8 +10,8 @@
   box-sizing: border-box;
 }
 :host .tds-table__footer-row {
-  background-color: var(--tds-table-footer-background);
-  color: var(--tds-table-color);
+  background-color: var(--table-footer);
+  color: var(--table-text);
 }
 :host .tds-table__footer-cell {
   padding: 0 var(--tds-spacing-element-16);
@@ -26,32 +29,36 @@
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page {
+  margin-right: var(--tds-spacing-element-16);
   display: flex;
   align-items: center;
-  margin-right: var(--tds-spacing-element-16);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p {
   margin-right: var(--tds-spacing-element-8);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  background-color: var(--tds-table-footer-page-selector-input-background);
-  color: var(--tds-table-color);
+  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);
+  background-color: var(--table-footer-page-selector-input);
+  border-radius: var(--tds-spacing-element-4);
+  color: var(--table-text);
+  margin-right: var(--tds-spacing-element-4);
+  padding-right: var(--tds-spacing-element-8);
   width: 74px;
   height: 30px;
   border: none;
-  border-radius: var(--tds-spacing-element-4);
   transition: background-color 250ms ease;
-  margin-right: var(--tds-spacing-element-4);
-  padding-left: var(--tds-spacing-element-16);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover {
-  background-color: var(--tds-table-footer-page-selector-input-background-hover);
+  background-color: var(--table-footer-page-selector-input-hover);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled {
-  color: var(--tds-table-footer-page-selector-input-color-disabled);
+  color: var(--table-footer-page-selector-input-color-disabled);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake {
   animation: tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
@@ -60,37 +67,41 @@
   perspective: 1000px;
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  padding: 1px 8px 0 0;
+  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: 1px 22px 0 0;
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn {
+  border-radius: var(--tds-spacing-element-4);
+  color: var(--table-icon);
+  height: var(--tds-spacing-element-32);
+  width: var(--tds-spacing-element-32);
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
   background-color: transparent;
   cursor: pointer;
-  height: var(--tds-spacing-element-32);
-  width: var(--tds-spacing-element-32);
-  border-radius: var(--tds-spacing-element-4);
   transition: background-color 250ms ease;
-  color: var(--tds-table-footer-page-selector-icon);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover {
-  background-color: var(--tds-table-footer-btn-hover);
+  background-color: var(--table-footer-button-hover);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled {
+  color: var(--table-icon-disabled);
   cursor: default;
-  color: var(--tds-table-footer-page-selector-icon-disabled);
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover {
   background-color: transparent;
 }
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg {
+  fill: var(--table-text);
   height: var(--tds-spacing-element-20);
   width: var(--tds-spacing-element-20);
-  fill: var(--tds-table-color);
 }
 
 :host(.tds-table--compact) {

package/dist/collection/components/table/table-footer/table-footer.js

@@ -127,12 +127,12 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'fd6a5604adc116a78c9723ce3f16535ea6fa7edf', class: {
+        return (h(Host, { key: '7cfc3ea42663922b79d37538e0649c19ebc712ff', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '5ec3649f1e76f54a1d09cc023f52f165bf55a175', class: "tds-table__footer-row" }, h("td", { key: '0815d2e9083b0b3793dbf3572869b76c2445396e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '3bdc6acf5b034f8ee141e1fde58e32cb76e7ab33', class: "tds-table__pagination" }, h("div", { key: 'd8bd734bb3890593404d7950b5cb353e0af1b37f', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '0cc09dd7662a2ceba454fb1e1c3eb3a389e9eb4d', class: "rows-per-page" }, h("p", { key: '57ae73ac509c9cd7ce9c93ae60737724035fb376' }, "Rows per page"), h("tds-dropdown", { key: '6fc1d8794bb2cecc406d9143c1e501733a990993', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: '3ad36497b515800372f57dcaf92589620d69b42b', class: "tds-table__footer-row" }, h("td", { key: '622408b38d7ea483d50283679d8ee9d3a42098aa', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '3f119143b7000a692b4b9575eae1bc0c7909d681', class: "tds-table__pagination" }, h("div", { key: '8c4a3e17f23a3febf61702aef85b9e2eb6588612', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '04a80b602eb4af3cb4a5857152dfde0fc2763713', class: "rows-per-page" }, h("p", { key: '97e08ed3804491bbc8f3ed906fec42a02dfc4346' }, "Rows per page"), h("tds-dropdown", { key: 'df2b970e5175c21927fea11f22e991c50f998c25', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
             return (h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), h("div", { key: '71e30ccac9cb36acf61f46de47fc39d4b45c49d3', class: "tds-table__page-selector" }, h("input", { key: 'fe99cbdae18c4b297e0823de2f2a5529f24ed7f4', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: 'd49b93524aeaddacd2e6c431d8f191fd87c768be', class: "tds-table__footer-text" }, "of ", h("span", { key: '1d6f7429e0837f200db90259e1e23cb879643756' }, this.pages), " pages"), h("button", { key: 'b5e0a8d72a1e7ff35570dfd2c131735f91ebb824', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '06ffe814de254c6c194ab88d89fe5f6da5239c44', name: "skip_backwards", size: "20px" })), h("button", { key: '271a59221429937f24873f984526fe55dd12c874', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'b2231b490bdd4234d62399f2785edf3136789af5', name: "chevron_left", size: "20px" })), h("button", { key: '6b06a0fad602d8593bb834672e934afb00d45edf', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '384751f9299ce4078e35fc15be37d2d529ddeffa', name: "chevron_right", size: "20px" })), h("button", { key: 'cf0fa5f2967d7f249ffbd548039e8021e4121bec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6da11c4f01f58a7e39698b7a91034567527464e6', name: "skip_forward", size: "20px" })))))))));
+        }))))), h("div", { key: '22ed5e4131d22d961f6742c8fa21c648b5738de5', class: "tds-table__page-selector" }, h("input", { key: 'bc43dd6fed5f554013872f9774c11da89be10a2f', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '6c4ccd34133a5b14a8d3bbeb47a6c75c7604fcb0', class: "tds-table__footer-text" }, "of ", h("span", { key: 'c136a3bbb26e0d915d4a009c85b9b2c03f3cf018' }, this.pages), " pages"), h("button", { key: '16dafa158dc8181c56031cad5253a36104ae2df5', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'f2a5edf16a2b164c2bd85801d2582f85c8d5aa22', name: "skip_backwards", size: "20px" })), h("button", { key: 'e7a73b61dfe85440cce8a76917bc68cde05241bd', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '55d7e648e0d731dec4e6aabe99d5e19a77d59d7b', name: "chevron_left", size: "20px" })), h("button", { key: '61856f668fed5d3085a9718204607f1e753fe7f1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'f468fde63814f4f906b85390979aed45163f6705', name: "chevron_right", size: "20px" })), h("button", { key: '35cfa4a7f8f680abb7a77c035f4cc8a7920e5d67', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '44dba6b889241055ce393f021b1b68cb7ed5e162', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header/table-header.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: table-header-group;
@@ -6,13 +9,17 @@
   box-sizing: border-box;
 }
 :host .tds-table__header-cell--checkbox {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  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);
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--table-divider);
+  color: var(--table-text);
   display: table-cell;
   text-align: left;
-  color: var(--tds-table-color);
-  background-color: var(--tds-table-header-background);
-  border-bottom: 1px solid var(--tds-table-divider);
   height: 48px;
   box-sizing: border-box;
   overflow: hidden;
@@ -50,7 +57,7 @@
   transform: rotate(180deg);
 }
 :host ::slotted(tds-header-cell:hover) {
-  background-color: var(--tds-table-header-background-hover);
+  background-color: var(--table-header-hover);
 }
 
 :host(.tds-table--compact) .tds-table__header-cell--checkbox {
@@ -61,7 +68,7 @@
 }
 
 :host(.tds-table--divider) .tds-table__header-cell--checkbox {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }
 
 :host(.tds-table--toolbar-available) .tds-table__header-cell--checkbox {

package/dist/collection/components/table/table-header/table-header.js

@@ -82,11 +82,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: '968ef371db492d005ac3156d8b4a15de0966d117', class: {
+        return (h(Host, { key: '6f2fe80cd2493ad5c3bba50129c5d9f673e71897', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'cc9fdb8e36b29c4dccf01961060df330fb50c6f2' }, this.multiselect && (h("th", { key: 'e306755b170ef4edc6d3c2f32941dfbb51eefaf6', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '2903d76304e4f3428aa63ba7e0aa65e48d21f232', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'd9acae7cae023f412395663c607b3293ce40a2e2', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: 'cea8e7da2c5a4a728ea55ead114f790674fc1a0c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '5ad238c2ceaabc721970c28ea9d58ecedac8152d' }))));
+            } }, h("tr", { key: 'b409f610aca3da5fa322e7e69f6efc06ab82165a' }, this.multiselect && (h("th", { key: '89e063b17bc2fa11ba2425b88d7a4896deef164d', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'eb44702a1169731a5587adaf7f4d0a28beb4b6db', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '5a3bb99a515fb6e87f39de70e530a67c10c3e2f7', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '8463b7990b37ffb6eb36eaffe9e3f3e159fdf5ba', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '2f31f807f5f3744ffe05c0eebac93c6c8374b046' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header-cell/table-header-cell.css

@@ -1,12 +1,19 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host(.tds-table__header-cell) {
   box-sizing: border-box;
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  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);
+  background-color: var(--table-header);
+  border-bottom: 1px solid var(--table-divider);
+  color: var(--table-text);
   display: table-cell;
   text-align: left;
-  color: var(--tds-table-color);
-  background-color: var(--tds-table-header-background);
-  border-bottom: 1px solid var(--tds-table-header-background-hover);
   padding: 0;
   height: 48px;
   min-width: 192px;
@@ -27,6 +34,7 @@
 }
 
 :host(.tds-table__header-cell--sortable) .tds-table__header-button {
+  color: var(--table-text);
   display: flex;
   align-items: center;
   gap: 8px;
@@ -41,37 +49,43 @@
   transition: background-color 200ms ease;
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button:focus {
-  outline: 2px solid var(--tds-table-header-btn-focus);
+  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;
   outline-offset: -2px;
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon {
   opacity: 1;
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  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(--table-text);
   text-align: left;
-  color: var(--tds-table-header-btn-color);
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon {
   /* not to shrink on lot of text */
+  fill: var(--table-text);
   flex: 0 0 16px;
   height: 16px;
   width: 16px;
   opacity: 0;
   transform-origin: center;
   transition: opacity 200ms ease-in, transform 200ms ease;
-  color: var(--tds-table-color);
 }
 :host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon {
   opacity: 1;
 }
 
 :host(.tds-table__header-cell--is-sorted) .tds-table__header-button {
-  background-color: var(--tds-table-header-btn-background);
+  background-color: var(--table-header-button);
 }
 :host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover {
-  background-color: var(--tds-table-header-btn-background-hover);
+  background-color: var(--table-header-button-hover);
 }
 :host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon {
   opacity: 1;
@@ -85,7 +99,7 @@
 }
 
 :host(.tds-table--divider) {
-  border-right: 1px solid var(--tds-table-divider);
+  border-right: 1px solid var(--table-divider);
 }
 
 :host(.tds-table--divider:last-of-type) {

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -113,7 +113,7 @@ export class TdsTableHeaderCell {
         return 'none';
     }
     render() {
-        return (h(Host, { key: 'c832982801653ad4ed4be858fa88f6d3d3de02ef', class: {
+        return (h(Host, { key: '9306f586f70affe65e63f3c7545285cf58e05a92', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,

package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   position: relative;
 }
@@ -10,7 +13,7 @@
   display: inline-block;
 }
 :host(.focused-input-wrapper) ::slotted(input:not(:focus)) {
-  background-color: var(--tds-table-input-background-hover);
+  background-color: var(--table-input-hover);
 }
 
 :host(.show-icon) ::slotted(input) {
@@ -18,19 +21,23 @@
 }
 
 tds-icon.search-icon {
-  color: var(--tds-table-input-header-icon);
+  color: var(--table-input-header-icon);
   position: absolute;
   left: 15px;
   top: 1px;
 }
 
 ::slotted(input) {
-  box-sizing: border-box;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-table-color);
+  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(--table-text);
   padding-left: var(--tds-spacing-element-16);
   padding-right: var(--tds-spacing-element-16);
+  box-sizing: border-box;
   height: 48px;
   border-radius: 0;
   background-color: transparent;
@@ -39,13 +46,13 @@ tds-icon.search-icon {
 }
 
 ::slotted(input)::placeholder {
-  color: var(--tds-table-input-header-placeholder);
+  color: var(--table-input-header-placeholder);
 }
 
 ::slotted(input:focus) {
-  outline: none;
-  background-color: var(--tds-table-input-header-background-focus);
+  background-color: var(--table-input-header-focus);
   border-bottom: 2px solid var(--tds-text-field-bar);
+  outline: none;
 }
 
 :host(.tds-table__compact) ::slotted(input) {

package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.js

@@ -63,7 +63,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: 'e92640dc4c88b52574960d7234b377d7e5eaaa8e', class: {
+        return (h(Host, { key: '5a8057029e82d223a8174544fd374b8e3151d624', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

package/dist/collection/components/table/table-toolbar/table-toolbar.css

@@ -1,10 +1,13 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
+  background-color: var(--table-toolbar);
+  color: var(--table-text);
+  padding: 0 var(--tds-spacing-element-16);
   display: table-caption;
   position: relative;
-  background-color: var(--tds-table-toolbar-background);
-  color: var(--tds-table-color);
-  padding: 0 var(--tds-spacing-element-16);
   height: 64px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -22,11 +25,15 @@
   display: flex;
 }
 :host .tds-table__title {
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
+  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);
   padding-top: var(--tds-spacing-element-16);
-  text-align: left;
   margin-right: var(--tds-spacing-element-8);
+  text-align: left;
 }
 :host .tds-table__actionbar,
 :host slot[name=end]::slotted(*),
@@ -46,12 +53,12 @@
   background-color: transparent;
 }
 :host .tds-table__searchbar::after {
+  background-color: var(--table-toolbar-searchbar-border-bottom);
   content: "";
   width: 100%;
   height: 2px;
   position: absolute;
   bottom: 0;
-  background-color: var(--tds-blue-400);
   transform: scaleX(0);
   transition: transform 150ms ease;
 }
@@ -59,16 +66,20 @@
   transform: scaleX(100%);
 }
 :host .tds-table__searchbar:focus-within, :host .tds-table__searchbar.tds-table__searchbar--active {
+  background-color: var(--table-toolbar-searchbar);
   width: 208px;
-  background-color: var(--tds-table-toolbar-searchbar-background);
 }
 :host .tds-table__searchbar:focus-within:hover, :host .tds-table__searchbar.tds-table__searchbar--active:hover {
-  background-color: var(--tds-table-toolbar-searchbar-background);
+  background-color: var(--table-toolbar-searchbar);
 }
 :host .tds-table__searchbar .tds-table__searchbar-input {
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
-  color: var(--tds-table-color);
+  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(--table-text);
   z-index: 1;
   width: 100%;
   height: 100%;
@@ -79,10 +90,10 @@
   cursor: pointer;
 }
 :host .tds-table__searchbar .tds-table__searchbar-input :focus {
-  background-color: var(--tds-table-toolbar-searchbar-background);
+  background-color: var(--table-toolbar-searchbar);
 }
 :host .tds-table__searchbar:hover {
-  background-color: var(--tds-table-toolbar-searchbar-background-hover);
+  background-color: var(--table-toolbar-searchbar-hover);
 }
 :host .tds-table__searchbar .tds-table__searchbar-icon {
   z-index: 0;

package/dist/collection/components/table/table-toolbar/table-toolbar.js

@@ -68,10 +68,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '76acde1b3c55f421cedae9bf932f923813272fe3', class: {
+        return (h(Host, { key: '7cf6fffdb988f525b5ff9fca25588f2b4770f9df', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'e6fe2f411ebde77befeb99992b5157bba3651fbf', class: "tds-table__upper-bar-flex" }, h("div", { key: 'f61dc1de54a73c28a2ef10dcae2a5a629ae76c57', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'ca50269d08eab742cb759d371937739fd0a87eff', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '275b233ff233a9f90d936553fa31015f72f21899', name: "start" })), h("div", { key: 'd2ed2b7918e8f8d8e23c34bd8114ee1e69cdb681', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'cd0bd112e3ab6b31c96e10bc4b2eb32715766d58', class: "tds-table__searchbar" }, h("input", { key: '3dbcdf5394477fb55d41c2ee0ddcea1e50ffcd64', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '0a34bfd7cd50c88604af01dfc9bef1adae7d8999', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '98a376c6db7d249e060dafffef18c9345730e25c', name: "search", size: "20px" })))), h("slot", { key: 'e4400d9ddb0f6435315569e1f64f34bc04d8054f', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'd071dcc92ba9d045c7322eec7bde32afc16616d6', class: "tds-table__upper-bar-flex" }, h("div", { key: '9cee0628c8c81614fb43ec2453644f7dd5001f54', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '90949e76eb225021d4dd9645968bd544b6ec9e71', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: 'fe27e4a5f5fb81040deb6df122fafa9172fc2c54', name: "start" })), h("div", { key: '2d146dfb716542c6c44a67404e2b537dfd730887', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'a2aee3c2a1dc9873c66e9e916af036a5e4851cf5', class: "tds-table__searchbar" }, h("input", { key: 'a8d9cc52b1e90d43ef9be1d198962d2c8bc54ea8', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '77bf8cff14864f3f36a2e94d34cbcbba361b700c', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'a4de427ffa05d9d08b183ecedfd6105abe9d9e35', name: "search", size: "20px" })))), h("slot", { key: '95c49753b2cc07b4dc211dc8b18ae88eb1170838', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.css

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   position: relative;
@@ -7,12 +10,15 @@
 }
 :host ::slotted(*) {
   all: unset;
+  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);
   min-width: 142px;
   display: block;
   width: calc(100% - 32px);
-  /* !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;
   cursor: pointer;
   padding: 16px;
   white-space: nowrap;
@@ -24,29 +30,30 @@
   border-left-color: transparent;
 }
 :host ::slotted(*:focus-visible) {
-  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;
+  box-shadow: none;
+  outline-offset: -4px;
 }
 :host div:not(.selected) {
-  background-color: var(--tds-folder-tab-background);
+  background-color: var(--folder-tab-surface);
 }
 :host div:not(.selected) ::slotted(*) {
-  border-left-color: var(--tds-folder-tab-divider-color);
-  border-top: 2px solid var(--tds-folder-tab-background);
-  color: var(--tds-folder-tab-item-color);
+  border-left-color: var(--folder-tab-divider-text);
+  border-top: 2px solid var(--folder-tab-surface);
+  color: var(--folder-tab-item-text);
 }
 :host div:not(.selected):hover:not(.disabled) {
-  background-color: var(--tds-folder-tab-background-hover);
+  background-color: var(--folder-tab-surface-hover);
   cursor: pointer;
 }
 :host div:not(.selected):hover:not(.disabled) ::slotted(*) {
-  border-top-color: var(--tds-folder-tab-background-hover);
-  color: var(--tds-folder-tab-color);
+  border-top-color: var(--folder-tab-surface-hover);
+  color: var(--folder-tab-text);
 }
 :host div:not(.selected).disabled ::slotted(*) {
-  color: var(--tds-folder-tab-item-color-disabled);
+  color: var(--folder-tab-item-text-disabled);
 }
 :host div:not(.selected).disabled ::slotted(*:focus-visible) {
   outline: none;
@@ -58,12 +65,12 @@
   content: none;
 }
 :host .selected {
-  background-color: var(--tds-folder-tab-background-selected);
-  border-top: 2px solid var(--tds-folder-tab-border-selected);
+  background-color: var(--folder-tab-surface-selected);
+  border-top: 2px solid var(--folder-tab-border-selected);
 }
 :host .selected::after {
+  background-color: var(--folder-tab-surface-selected);
   content: " ";
-  background-color: var(--tds-folder-tab-background-selected);
   width: 1px;
   top: 0;
   bottom: 0;
@@ -73,7 +80,7 @@
   z-index: 1;
 }
 :host .selected ::slotted(*) {
-  color: var(--tds-folder-tab-color);
+  color: var(--folder-tab-text);
 }
 
 :host(.first) :not(.selected) ::slotted(*) {

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '19a42f7143a8f32130642bd50dd6817f871fdf20', "aria-selected": this.selected }, h("div", { key: '51bef3bebff5e13d7c949529919865780d8b33de', class: {
+        return (h(Host, { key: '584a1fcf43299d27e3fb2150214830c7964e3895', "aria-selected": this.selected }, h("div", { key: 'ed0f0d8acafaf35c36a22d34ef4c9ac240ba5311', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'ac2fb5ed4062e9e83297e9a6c2f3ea6b9f514b06' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.css

@@ -25,12 +25,12 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
+  background-color: var(--folder-tabs-scroll-button-surface);
+  color: var(--folder-tabs-scroll-button-text);
   height: 50px;
-  color: var(--tds-folder-tabs-scroll-btn-color);
   cursor: pointer;
   border: 0;
   width: 0;
-  background-color: var(--tds-folder-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -45,22 +45,7 @@
   opacity: 1;
   pointer-events: all;
 }
-:host .scroll-right-button:hover,
-:host .scroll-left-button:hover {
-  background-color: var(--tds-folder-tabs-scroll-btn-background-hover);
-}
-:host .scroll-right-button:active,
-:host .scroll-left-button:active {
-  background-color: var(--tds-folder-tabs-scroll-btn-background-active);
-}
-:host .scroll-right-button:focus,
-:host .scroll-left-button:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
-  outline-offset: 1px;
-  z-index: 1;
-}
 :host .scroll-right-button svg,
 :host .scroll-left-button svg {
-  fill: var(--tds-folder-tabs-scroll-btn-color);
+  fill: var(--folder-tabs-scroll-button-text);
 }

package/dist/collection/components/tabs/folder-tabs/folder-tabs.js

@@ -162,9 +162,9 @@ export class TdsFolderTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'c56bf987e23ade8b30cd2470ab1ed0f4273bd191', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'afab8a86427918d5ac4bbc17dd2a436a986df577', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'f97a75dc1b7bf12757a7e96e4075387c27459e7e', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '92299f0dc356d448d901569d314fa6afaa21fdb1', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            } }, h("button", { key: '0b82a953932e888d05478d82944c90768f97bb36', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '50cd22c5be43ae452e0896b449570774c3ab0151', name: "chevron_left", size: "20px" })), h("slot", { key: '3cb17dddc8592241c467167b3a0028355f2b7d5e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '23c289b70d723b2d0705692835a510b8a650fcfa', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'fff2bfcbcf916d1b391aa25ee5f6fda3c8e63d23', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: 'f00e92acb5a9071173c25d2c8334fa32cc32cca8', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: 'eb113eeecf5c89a9b6e3e3c4306f3557c574b3e7', name: "chevron_left", size: "20px" })), h("slot", { key: '4136a2b52af81b9406cffc74a6ad84f428d18273', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '0d5177b9eff827616a3252992a6dc7e79e58f5e1', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'a575af766f02d2427760aa1f5911e63f32c28d1d', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }