@scania/tegel 1.33.0 → 1.34.0-internal-variables-demo.0

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: '7b33de1426988b4bf97d3856c135945859783b6f', 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: '7c176540ee9476479de7a818de7f46258c94142d', class: "tds-table__upper-bar-flex" }, h("div", { key: '95eef4de54dd8d5507354f695b8420a4951f4c1b', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'c58973635367598d3f8b4a52881003157381d94a', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: 'e39d96b2f21a7f1645041acbd99b618debde089e', name: "start" })), h("div", { key: '24df42114518c53b2ed16376272207d02a8631d8', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '58860c836dfd8baecb98f9ee494c34a542bde347', class: "tds-table__searchbar" }, h("input", { key: '418e9cbc47efa12dbef046b08adb4ef676b1b9ca', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '6c090c782535c42fd0e7ccd439835f550ddfaa0b', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'e0e115652f69cc8a39d77b2e81f94e7789d868e6', name: "search", size: "20px" })))), h("slot", { key: '50e519e153bcb2d3a56303171e9db06c47735dd6', 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: '905e43147cabbdb2bbdf3e9fc934767e2c1fc429', "aria-selected": this.selected }, h("div", { key: '76d42a91d3af1425a33a5cc15bef5d6f721a4c96', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '2b661d3518f047f7bd0e50a121987eb62c5d42e8' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '5d8577fbb00f65b69a6431dc69679cb7c2e9b784' }))));
     }
     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: '3a004f2892daa4ecf795bfbb6194cc8ea7b9c89a', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '50a4ece90a4b78b00623b61c509e5ec2f2ab7da3', 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: '90dc518ee3e0d6cd812f8a422d56df7194c53f31', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, disabled: !this.showLeftScroll, onClick: () => this.scrollLeft() }, h("tds-icon", { key: '66e45376ed912abc63b581b5439bf6f84e1199eb', name: "chevron_left", size: "20px" })), h("slot", { key: 'd1ec9259a6e3d6e5776fdab80395491c3e771ae7', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'b85b5f3006673aa67a3c87094b31a8cae7646109', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, disabled: !this.showRightScroll, onClick: () => this.scrollRight() }, h("tds-icon", { key: 'eef334c52ec845dea3b7473a4b84b7a3cb053846', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-folder-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
@@ -8,10 +11,13 @@
 }
 :host ::slotted(*) {
   all: unset;
-  /* !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-navigation-tabs-tab-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(--inline-tabs-tab);
   text-decoration: none;
   display: block;
   position: relative;
@@ -23,13 +29,16 @@
   padding: 20px 4px;
 }
 :host ::slotted(*:focus-visible)::before {
+  outline: 2px solid var(--inline-tabs-tab-focus);
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 20px;
   bottom: 20px;
-  outline: 2px solid var(--tds-blue-400);
+}
+:host ::slotted(*:hover) {
+  color: var(--inline-tabs-tab-hover);
 }
 :host .inline-tab-item:not(.selected)::after {
   width: 0%;
@@ -46,6 +55,7 @@
   width: 100%;
 }
 :host .inline-tab-item::after {
+  background-color: var(--inline-tabs-tab-indicator-hover);
   content: " ";
   position: absolute;
   bottom: 0;
@@ -55,21 +65,20 @@
   width: 0%;
   margin-right: auto;
   height: 2px;
-  background-color: var(--tds-inline-tabs-tab-indicator-background-hover);
   z-index: 1;
 }
 :host .selected ::slotted(*) {
-  color: var(--tds-inline-tabs-tab-color-selected);
+  color: var(--inline-tabs-tab-selected);
 }
 :host .selected::after {
+  background-color: var(--inline-tabs-tab-indicator-active);
   width: 100%;
-  background-color: var(--tds-inline-tabs-tab-indicator-background-active);
 }
 :host .disabled {
-  color: var(--tds-inline-tabs-tab-color-disabled);
+  color: var(--inline-tabs-tab-disabled);
 }
 :host .disabled ::slotted(*) {
-  opacity: var(--tds-inline-tabs-tab-color-opacity-disabled);
+  color: var(--inline-tabs-tab-disabled);
 }
 :host .disabled::after {
   content: none;

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

@@ -30,11 +30,11 @@ export class TdsInlineTab {
         }
     }
     render() {
-        return (h(Host, { key: '496b56fa31a50e26ceea5275e29873d030ea2937', "aria-selected": this.selected }, h("div", { key: 'c67bfb892ea721b1ad329e00453fe62dcf4681c0', class: {
+        return (h(Host, { key: 'da941abad830e5fb5db0004d66b05fb1d53f1d26', "aria-selected": this.selected }, h("div", { key: '7ab6002c424dda4e25513164bb6d1dd04607cbf0', class: {
                 'inline-tab-item': true,
                 'selected': this.selected,
                 'disabled': this.disabled,
-            } }, h("slot", { key: 'bae7788e0625279f4eb82129da1256fbb7f1c95b' }))));
+            } }, h("slot", { key: '1dfbfd01d9a0e8dff97b5d5af4a136765b99dcff' }))));
     }
     static get is() { return "tds-inline-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,16 +1,15 @@
 :host {
   box-sizing: border-box;
   display: flex;
-  background-color: var(--tds-inline-tabs-background);
   position: relative;
 }
 :host * {
   box-sizing: border-box;
 }
 :host::after {
+  border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--tds-inline-tabs-horizontal-divider-background);
   left: 0;
   right: 0;
   bottom: 0;
@@ -38,11 +37,11 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
-  color: var(--tds-folder-tabs-scroll-btn-color);
+  background-color: var(--inline-tabs-scroll-button);
+  color: var(--inline-tabs-scroll-button-text);
   cursor: pointer;
   border: 0;
   width: 0;
-  background-color: var(--tds-inline-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -57,22 +56,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(--inline-tabs-scroll-button-text);
 }

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

@@ -169,9 +169,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '9fa2d8cb54ac480fb5875432440506b0c12efaa5', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'aecb68d56088f84e271f3c829c84da4e732df9b8', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '7ea7321faa7f49a67383dfd9629d2ee679a004fc', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '294c6e7522ca34a4eae1bd379870af84e72366f9', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '9b97d342cfe66209063b504b49480d587cd626d5', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a447ce946eb5bc02a2527f210322aa76ca5ad5b8', name: "chevron_left", size: "20px" })), h("slot", { key: '1df34e68bbea35ef76de48e7b8fe96b3a8655792', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '7c753dd66c173265c32a7b49197df12fbecc78d1', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'f76934b67470db5ff6ddb6fbae86f87fd3d0bdee', name: "chevron_right", size: "20px" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'e932cd2540b51a1a452b11c1d0630a68d79d818f', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'de83215d0aa0526d6bc6f37fe922b1e0b79b9fe9', name: "chevron_left", size: "20px" })), h("slot", { key: '187bb660c592992e98ce1eb73671e641e7f25642', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '0285a00869154edba228b473609f555964570690', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '2e7fccd7823e47105248ee1e97aba623409f7e3c', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
   display: block;
@@ -7,10 +10,13 @@
 }
 :host ::slotted(*) {
   all: unset;
-  /* !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-navigation-tabs-tab-color) !important;
+  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(--navigation-tabs-tab);
   text-decoration: none;
   display: block;
   position: relative;
@@ -22,13 +28,19 @@
   padding: 26px 4px;
 }
 :host ::slotted(*:focus-visible)::before {
+  outline: 2px solid var(--color-foreground-border-accent-focus);
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: 26px;
   bottom: 26px;
-  outline: 2px solid var(--tds-blue-400);
+}
+:host ::slotted(*:hover) {
+  color: var(--navigation-tabs-tab-hover);
+}
+:host ::slotted(*:focus-visible) {
+  color: var(--navigation-tabs-tab-focus);
 }
 :host .navigation-tab-item:not(.selected)::after {
   width: 0%;
@@ -45,6 +57,7 @@
   width: 100%;
 }
 :host .navigation-tab-item::after {
+  background-color: var(--navigation-tabs-tab-indicator-hover);
   content: " ";
   position: absolute;
   bottom: 0;
@@ -54,21 +67,20 @@
   width: 0%;
   margin-right: auto;
   height: 2px;
-  background-color: var(--tds-navigation-tabs-tab-indicator-background-hover);
   z-index: 1;
 }
 :host .selected ::slotted(*) {
-  color: var(--tds-navigation-tabs-tab-color-selected);
+  color: var(--navigation-tabs-tab-selected);
 }
 :host .selected::after {
+  background-color: var(--navigation-tabs-tab-indicator-active);
   width: 100%;
-  background-color: var(--tds-navigation-tabs-tab-indicator-background-active);
 }
 :host .disabled {
-  color: var(--tds-navigation-tabs-tab-color-disabled);
+  color: var(--navigation-tabs-tab-disabled);
 }
 :host .disabled ::slotted(*) {
-  opacity: var(--tds-navigation-tabs-tab-color-opacity-disabled);
+  color: var(--navigation-tabs-tab-disabled);
 }
 :host .disabled::after {
   content: none;

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

@@ -30,8 +30,8 @@ export class TdsNavigationTab {
         }
     }
     render() {
-        return (h(Host, { key: '28ba6f5bedc4f2a31e5011e37bf92d3b38fa8abe' }, h("div", { key: 'ac5aad203d8a13dc42a8f9e99b2ccdd7c784c9af', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'da6292612753748f6cac68e0b282ecde642cb5b5' }))));
+        return (h(Host, { key: 'b4cd140a8267485566719cd26c66ae2e9a0a6b5c' }, h("div", { key: 'd8f94aca25079426436da1918d9e0ef1c6e94560', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '95a56fbbb701726994b5dc91309401f5d70aee36' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,16 +1,16 @@
 :host {
   box-sizing: border-box;
+  background-color: var(--navigation-tabs);
   display: flex;
-  background-color: var(--tds-navigation-tabs-background);
   position: relative;
 }
 :host * {
   box-sizing: border-box;
 }
 :host::after {
+  border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
   content: " ";
   display: block;
-  border-bottom: 1px solid var(--tds-navigation-tabs-horizontal-divider-background);
   left: 0;
   right: 0;
   bottom: 0;
@@ -38,11 +38,11 @@
 }
 :host .scroll-right-button,
 :host .scroll-left-button {
-  color: var(--tds-folder-tabs-scroll-btn-color);
+  background-color: var(--navigation-tabs-scroll-button);
+  color: var(--navigation-tabs-scroll-button-icon);
   cursor: pointer;
   border: 0;
   width: 0;
-  background-color: var(--tds-inline-tabs-scroll-btn-background);
   display: none;
   justify-content: center;
   align-items: center;
@@ -57,22 +57,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(--navigation-tabs-scroll-button-color);
 }

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

@@ -169,15 +169,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: '2fc278cacc04614ca43b70f52b12f79b31227fbb', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '50357810903ea3bff83fde4478960de0866c7c15', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'c05fdc4edba8e4863a01a8f8ddfb612d836d015e', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '5a19c88129168e18bbf0e9c01d75536e38f3f9cb', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'b5b05a2f9bce1618c71594cf388dc83efce98915', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '479fa60c5acda8497eb76e14377c3bd58e374c8b', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'aad19852d36ff8e1642ba464f9618a57ff37169c', name: "chevron_left", size: "20px" })), h("slot", { key: '3dcf0d7e6900df33a69863868a3a48dcb4aa8141', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '352539955226aecf92deb0c0db83c42a5b021e43', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '2966dfb37f0912fe60e5528736a505043a7060cf', name: "chevron_left", size: "20px" })), h("slot", { key: 'b73673566f5cd2834590b5283fa82e83c61c35ec', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '85e4ea10f52b287116195226a379722fad59a880', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '0e3fe531374dd82b6ee5de1a5a1bea4a38e03500', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '987796cbfbddd0b1f998526da9923884440e0c11', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }