@scania/tegel 1.34.0-multibrand-beta.6 → 1.35.0

package/dist/collection/components/dropdown/dropdown.css

@@ -1,21 +1,14 @@
 @charset "UTF-8";
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
-:host {
-  padding-bottom: 1px;
-}
 :host button {
   all: unset;
-  box-shadow: var(--dropdown-border);
   height: 100%;
   width: 100%;
-  background-color: var(--dropdown-background);
-  border-radius: var(--dropdown-border-radius);
-  transition: box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
+  background-color: var(--tds-dropdown-bg);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
+  border-radius: var(--tds-dropdown-border-radius);
 }
 :host button:hover {
-  box-shadow: var(--dropdown-border-hover);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
 :host button .value-wrapper {
   padding: 0 16px;
@@ -24,67 +17,68 @@
   justify-content: space-between;
 }
 :host button.placeholder {
-  color: var(--dropdown-placeholder);
+  color: var(--tds-dropdown-placeholder-color);
   line-height: 1.3;
 }
 :host button.value {
-  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(--dropdown-text);
-  /** Needed to not get be affected by overflow:hidden
+  color: var(--tds-dropdown-value-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  /** Needed to not get be affected by overflow:hidden 
   The original line-height is 1.14 */
   line-height: 1.3;
 }
 :host button:focus {
-  box-shadow: var(--dropdown-border-focus);
-}
-:host button:active {
-  box-shadow: var(--dropdown-border-active);
+  border-bottom: 0;
 }
 :host button.error {
-  box-shadow: var(--dropdown-border-error);
-}
-:host button.error:hover {
-  box-shadow: var(--dropdown-border-error-hover);
+  border-bottom: 1px solid var(--tds-dropdown-error);
 }
 :host button.error:focus {
-  box-shadow: var(--dropdown-border-error-focus);
+  border-bottom-color: transparent;
+}
+:host button.error:focus::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--tds-dropdown-error);
 }
 :host button:disabled {
-  box-shadow: var(--dropdown-border-disabled);
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
+  border-bottom: 1px solid transparent;
 }
 :host button .menu-icon {
   margin-right: 0;
 }
 
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
-:host {
-  padding-bottom: 1px;
+:host .dropdown-select:focus-within {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
 }
 :host .filter {
-  box-shadow: var(--dropdown-border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
-  background-color: var(--dropdown-background);
+  background-color: var(--tds-dropdown-bg);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom);
   padding-left: 16px;
-  border-radius: var(--dropdown-border-radius);
-  transition: box-shadow var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
+  border-radius: 4px 4px 0 0;
 }
 :host .filter:hover {
-  box-shadow: var(--dropdown-border-hover);
+  border-bottom: 1px solid var(--tds-dropdown-border-bottom-hover);
 }
 :host .filter.disabled {
-  box-shadow: var(--dropdown-border-disabled);
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
+  border-bottom: 1px solid transparent;
+}
+:host .filter.disabled .value-wrapper input {
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .filter .value-wrapper {
   display: flex;
@@ -92,19 +86,15 @@
   height: 100%;
 }
 :host .filter .value-wrapper input {
-  color: var(--dropdown-text);
+  color: var(--tds-dropdown-filter-input-color);
 }
 :host .filter .label-inside-as-placeholder {
-  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(--dropdown-placeholder);
   position: absolute;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   /* Overwrite in order to display ÅÄÖ and similar sign correctly */
   line-height: 1.3;
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .filter .label-inside-as-placeholder.lg {
   top: 20px;
@@ -116,12 +106,8 @@
   display: none;
 }
 :host .filter .label-inside-as-placeholder.selected {
-  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);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: all 0.2s ease-in-out;
 }
 :host .filter .label-inside-as-placeholder.selected.lg {
@@ -137,13 +123,25 @@
   margin-top: 8px;
 }
 :host .filter.focus {
-  box-shadow: var(--dropdown-border-focus);
+  border-bottom: 0;
+}
+:host .filter.focus:hover {
+  border-bottom: 0;
 }
 :host .filter.error {
-  box-shadow: var(--dropdown-border-error);
+  border-bottom: 1px solid var(--tds-dropdown-error);
 }
 :host .filter.error.focus {
-  box-shadow: var(--dropdown-border-error-focus);
+  border-bottom-color: transparent;
+}
+:host .filter.error.focus::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--tds-dropdown-error);
 }
 :host .filter input {
   flex: 1;
@@ -151,39 +149,30 @@
   width: 100%;
 }
 :host .filter input::placeholder {
-  color: var(--dropdown-placeholder);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .filter input:disabled::placeholder {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .filter tds-icon {
   cursor: pointer;
 }
-:host .filter tds-icon.disabled {
-  color: var(--dropdown-disabled);
-}
 :host .filter .menu-icon {
   margin-right: 16px;
 }
-:host .filter .menu-icon.disabled {
-  color: var(--dropdown-disabled);
-}
 :host .filter .clear-icon {
   margin: 0 8px;
+  color: var(--tds-dropdown-clear-icon-color);
   padding-right: 8px;
-  border-right: 1px solid var(--dropdown-icon);
-  color: var(--dropdown-clear-icon);
+  border-right: 1px solid var(--tds-dropdown-clear-icon-color);
 }
 :host .filter .clear-icon:hover {
-  color: var(--dropdown-icon);
+  color: var(--tds-dropdown-clear-icon-hover-color);
 }
 :host .filter .clear-icon.hide {
   display: none;
   visibility: hidden;
 }
-:host .filter .clear-icon.disabled {
-  color: var(--dropdown-disabled);
-}
 
 :host {
   --tds-scrollbar-width-standard: thin;
@@ -197,50 +186,60 @@ body {
   scrollbar-width: thin;
 }
 
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
-  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);
   display: block;
   position: relative;
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
 }
 :host .label-outside {
-  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(--dropdown-text);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-dropdown-label-color);
   margin-bottom: 8px;
 }
 :host .label-outside.disabled {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .dropdown-select {
   position: relative;
 }
+:host .dropdown-select 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;
+  border-radius: 0;
+}
+:host .dropdown-select button {
+  transition: border-bottom-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);
+}
+:host .dropdown-select button:hover {
+  border-bottom-color: var(--tds-dropdown-border-bottom-hover);
+}
+:host .dropdown-select button {
+  border-bottom-color: var(--tds-dropdown-border-bottom);
+}
+:host .dropdown-select button.error {
+  border-bottom-color: var(--tds-dropdown-error);
+}
+:host .dropdown-select button.error:focus {
+  border-bottom-color: transparent;
+}
 :host .dropdown-select.disabled .label-inside,
 :host .dropdown-select.disabled .placeholder,
 :host .dropdown-select.disabled .label-inside-as-placeholder,
 :host .dropdown-select.disabled .value-wrapper {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
+}
+:host .dropdown-select.disabled button {
+  border: none;
 }
 :host .dropdown-select .label-inside {
-  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);
   position: absolute;
-  color: var(--dropdown-text);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  color: var(--tds-dropdown-label-inside-color);
 }
 :host .dropdown-select .label-inside.lg {
   top: 12px;
@@ -250,7 +249,10 @@ body {
   top: 8px;
   left: 16px;
 }
-:host .dropdown-select .label-inside.sm, :host .dropdown-select .label-inside.xs {
+:host .dropdown-select .label-inside.sm {
+  display: none;
+}
+:host .dropdown-select .label-inside.xs {
   display: none;
 }
 :host .dropdown-select .label-inside + .placeholder:not(.sm) {
@@ -267,16 +269,12 @@ body {
   line-height: 1;
 }
 :host .dropdown-select .label-inside-as-placeholder {
-  color: var(--dropdown-placeholder);
+  color: var(--tds-dropdown-placeholder-color);
 }
 :host .dropdown-select .label-inside-as-placeholder.selected {
-  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);
   position: absolute;
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
   transition: all 0.2s ease-in-out;
 }
 :host .dropdown-select .label-inside-as-placeholder.selected.lg {
@@ -304,50 +302,45 @@ body {
   height: 29px;
 }
 :host .helper {
-  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);
-  padding-top: var(--tds-spacing-element-4);
-  color: var(--dropdown-helper-text);
+  margin-top: 4px;
+  color: var(--tds-dropdown-helper-color);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   align-items: center;
   gap: 8px;
 }
 :host .helper.error {
-  color: var(--dropdown-error);
+  color: var(--tds-dropdown-error);
 }
 :host .helper.disabled {
-  color: var(--dropdown-disabled);
+  color: var(--tds-dropdown-disabled-color);
 }
 :host .dropdown-list {
   z-index: 100;
   position: absolute;
-  margin-top: 2px;
   width: 100%;
   transform-origin: top;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px 0;
-  border-radius: var(--dropdown-list-border-radius-down);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
+  border-radius: var(--tds-dropdown-list-border-radius-down);
   overflow-y: auto;
   transform: scaleY(0);
   pointer-events: none;
 }
 :host .dropdown-list:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-hover-thumb-color);
   background-clip: padding-box;
 }
 :host .dropdown-list::-webkit-scrollbar {
   width: var(--tds-scrollbar-width);
 }
 :host .dropdown-list::-webkit-scrollbar-track {
-  background: var(--color-background-layer-01);
+  background: var(--tds-scrollbar-track-color);
 }
 :host .dropdown-list::-webkit-scrollbar-thumb {
   border-radius: 40px;
-  background: var(--color-foreground-icon-discrete);
+  background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;
 }
@@ -367,7 +360,10 @@ body {
 :host .dropdown-list.md {
   max-height: 312px;
 }
-:host .dropdown-list.sm, :host .dropdown-list.xs {
+:host .dropdown-list.sm {
+  max-height: 260px;
+}
+:host .dropdown-list.xs {
   max-height: 260px;
 }
 :host .dropdown-list.up {
@@ -377,8 +373,7 @@ body {
   transform-origin: bottom;
   display: flex;
   flex-direction: column-reverse;
-  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 3px 0;
-  border-radius: var(--dropdown-list-border-radius-up);
+  border-radius: var(--tds-dropdown-list-border-radius-up);
 }
 :host .dropdown-list.up.label-outside {
   bottom: calc(100% - 24px);
@@ -400,16 +395,12 @@ body {
   transition: transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit);
 }
 :host .dropdown-list .no-result {
-  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);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   display: flex;
   align-items: center;
   padding: 0 16px;
-  background-color: var(--dropdown-background);
+  background-color: var(--tds-dropdown-bg);
 }
 :host .dropdown-list .no-result.lg {
   height: 56px;
@@ -417,14 +408,14 @@ body {
 :host .dropdown-list .no-result.md {
   height: 48px;
 }
-:host .dropdown-list .no-result.sm, :host .dropdown-list .no-result.xs {
+:host .dropdown-list .no-result.sm {
   height: 40px;
 }
-:host .menu-icon {
-  color: var(--dropdown-icon);
+:host .dropdown-list .no-result.xs {
+  height: 40px;
 }
-:host .menu-icon.disabled {
-  color: var(--dropdown-disabled);
+:host .menu-icon {
+  color: var(--tds-dropdown-menu-icon-color);
 }
 :host tds-icon {
   transition: transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);

package/dist/collection/components/dropdown/dropdown.js

@@ -497,12 +497,11 @@ export class TdsDropdown {
             }, class: {
                 'clear-icon': true,
                 'hide': !(this.open && this.inputElement.value !== ''),
-                'disabled': this.disabled
             }, name: "cross", size: "16px" }), h("tds-icon", { tdsAriaHidden: true, role: "button", "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", onClick: this.handleToggleOpen, onKeyDown: (event) => {
                 if (event.key === 'Enter') {
                     this.handleToggleOpen();
                 }
-            }, class: `menu-icon ${this.open ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
+            }, class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))) : (h("button", { "aria-label": this.tdsAriaLabel, "aria-labelledby": labelId, "aria-describedby": helperId, "aria-disabled": this.disabled, onClick: () => this.handleToggleOpen(), onKeyDown: (event) => {
                 if (event.key === 'Escape') {
                     this.open = false;
                 }
@@ -514,7 +513,7 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${this.selectedOptions.length ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'} ${this.disabled ? 'disabled' : ''}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'dfd39c165ccaef43bb3b1f3e5fd2793d771b773a', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, this.selectedOptions.length ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '6de931198040eec79815f83e2617d2646507b6a1', role: "listbox", "aria-label": this.tdsAriaLabel, inert: !this.open, "aria-orientation": "vertical", "aria-multiselectable": this.multiselect, ref: (element) => {
                 this.dropdownList = element;
             }, class: {
                 'dropdown-list': true,
@@ -525,11 +524,11 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '2f4b44fbea4d047dda71d057d89303fcb6f5e9da', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '157d60c6f3c99c8cf4467ad060e570ce09311d60', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'c8d18fbec1bf442178bd5b37e75b58cb2bfe4ec6', id: helperId, class: {
+            } }, h("slot", { key: '61ab9737181371073b25b95c34dad3311c2995c0', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'aca39f881a57a6a23de03da78b5062e5dff55af7', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '1e4221e58bc16608bfb0f780b7bc8040935eab37', id: helperId, class: {
                 helper: true,
                 error: this.error,
                 disabled: this.disabled,
-            } }, this.error && h("tds-icon", { key: 'c13ddefa45a3e5a80cac6298d13953ca24b4f397', name: "error", size: "16px" }), this.helper))));
+            } }, this.error && h("tds-icon", { key: 'ec946e77add75e7eaf194e2b38e5dd1c548ab32f', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,17 +1,10 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host {
   display: block;
 }
 :host .footer-top-title {
-  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(--footer-top-links-desktop);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-footer-top-links-header);
   padding-bottom: 8px;
 }
 :host .footer-top-title *,
@@ -19,20 +12,16 @@
   margin: 0;
 }
 :host button.footer-top-title-button {
-  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);
   border: none;
   width: 100%;
-  color: var(--footer-top-links);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-footer-top-links);
   background-color: transparent;
   text-align: left;
   padding: 19px 24px;
   justify-content: space-between;
-  border-bottom: 1px solid var(--footer-top-divider);
+  border-bottom: 1px solid var(--tds-footer-top-divider);
 }
 :host button.footer-top-title-button *,
 :host button.footer-top-title-button ::slotted(*) {
@@ -48,12 +37,13 @@
   cursor: pointer;
 }
 :host button.footer-top-title-button:active {
-  background-color: var(--footer-top-button-active);
+  background-color: var(--tds-footer-top-button-active);
 }
 :host button.footer-top-title-button:focus-visible {
-  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: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host button.footer-top-title-button tds-icon {
   transition: transform 0.2s ease-in-out;

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

@@ -1,22 +1,16 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 :host([role=listitem]) div ::slotted(a),
 :host([role=listitem]) div ::slotted(button) {
-  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(--footer-main-links);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-footer-main-links);
   text-decoration: none;
 }
 :host([role=listitem]) div ::slotted(a:focus-visible),
 :host([role=listitem]) div ::slotted(button:focus-visible) {
-  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: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host([role=listitem]) div ::slotted(a:hover),
 :host([role=listitem]) div ::slotted(button:hover) {
@@ -24,24 +18,21 @@
 }
 :host([role=listitem]) div.top-part-child ::slotted(a),
 :host([role=listitem]) div.top-part-child ::slotted(button) {
-  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(--footer-top-links);
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-footer-top-links);
 }
 :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
 :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
-  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: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 
 @media all and (max-width: 992px) {
   :host([role=listitem]) div.top-part-child {
-    border-bottom: 1px solid var(--footer-top-divider);
+    border-bottom: 1px solid var(--tds-footer-top-divider);
   }
   :host([role=listitem]) div.top-part-child ::slotted(a),
   :host([role=listitem]) div.top-part-child ::slotted(button) {
@@ -53,12 +44,13 @@
   :host([role=listitem]) div.top-part-child ::slotted(a:hover),
   :host([role=listitem]) div.top-part-child ::slotted(button:hover) {
     text-decoration: underline;
-    background-color: var(--footer-top-links-background-hover);
+    background-color: var(--tds-footer-top-links-background-hover);
   }
   :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
   :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
-    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: 2px solid var(--tds-focus-outline-color);
+    box-shadow: 0 0 0 1px var(--tds-white);
     outline-offset: 1px;
+    z-index: 1;
   }
 }