npm - @scania/tegel - Versions diffs - 1.33.0 → 1.34.0-internal-variables-demo.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (520) hide show

package/dist/collection/components/accordion/accordion-item/accordion-item.css CHANGED Viewed

@@ -1,9 +1,12 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .tds-accordion-item {
   box-sizing: border-box;
   list-style: none;
-  color: var(--tds-accordion-color);
+  color: var(--accordion-text);
   position: relative;
-  border-top: 1px solid var(--tds-accordion-border);
+  border-top: 1px solid var(--accordion-border);
 }
 .tds-accordion-item * {
   box-sizing: border-box;
@@ -17,14 +20,18 @@
 .tds-accordion-item button.tds-accordion-header-icon-start,
 .tds-accordion-item button.tds-accordion-header-icon-end {
   box-sizing: border-box;
+  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);
   cursor: pointer;
   display: flex;
   align-items: center;
   width: 100%;
-  font: var(--tds-headline-07);
-  letter-spacing: var(--tds-headline-07-ls);
   padding: var(--tds-spacing-element-16);
-  background-color: var(--tds-accordion-background);
+  background-color: var(--accordion-background);
 }
 .tds-accordion-item .tds-accordion-header-icon-start *,
 .tds-accordion-item .tds-accordion-header-icon-end *,
@@ -38,7 +45,7 @@
 .tds-accordion-item button.tds-accordion-header-icon-end .tds-accordion-icon {
   transform-origin: center;
   transition: transform 0.15s ease-in-out;
-  color: var(--tds-accordion-icon-color);
+  color: var(--accordion-icon);
 }
 .tds-accordion-item .tds-accordion-header-icon-start .tds-accordion-icon > tds-icon,
 .tds-accordion-item .tds-accordion-header-icon-end .tds-accordion-icon > tds-icon,
@@ -53,8 +60,12 @@
   cursor: default;
   padding: var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);
   display: none;
-  font: var(--tds-detail-03);
-  letter-spacing: var(--tds-detail-03-ls);
+  font-family: var(--detail-03-font-family);
+  font-size: var(--detail-03-font-size);
+  line-height: var(--detail-03-line-height);
+  font-weight: var(--detail-03-font-weight);
+  letter-spacing: var(--detail-03-letter-spacing);
+  text-transform: var(--detail-03-text-transform);
 }
 .tds-accordion-item .tds-accordion-panel p {
   margin: 0;
@@ -77,14 +88,14 @@
 .tds-accordion-item.disabled .tds-accordion-header-icon-end,
 .tds-accordion-item.disabled .tds-accordion-header-icon-start,
 .tds-accordion-item.disabled .tds-accordion-panel {
-  color: var(--tds-accordion-color-disabled);
+  color: var(--accordion-text-disabled);
   cursor: not-allowed;
 }
 .tds-accordion-item.disabled .tds-accordion-icon,
 .tds-accordion-item.disabled .tds-accordion-header-icon-end .tds-accordion-icon,
 .tds-accordion-item.disabled .tds-accordion-header-icon-start .tds-accordion-icon,
 .tds-accordion-item.disabled .tds-accordion-panel .tds-accordion-icon {
-  color: var(--tds-accordion-color-disabled);
+  color: var(--accordion-text-disabled);
 }
 .tds-accordion-item.disabled:hover,
 .tds-accordion-item.disabled:hover *, .tds-accordion-item.disabled:focus-within,
@@ -126,56 +137,54 @@
 }
 .tds-accordion-item:first-child {
   margin-bottom: -1px;
-  border-bottom: 1px solid var(--tds-accordion-border);
+  border-bottom: 1px solid var(--accordion-border);
 }
 .tds-accordion-item:has(.tds-accordion-header-icon-start:focus), .tds-accordion-item:has(.tds-accordion-header-icon-end:focus) {
-  border-top: 1px solid var(--tds-accordion-border-focus);
+  border-top: 1px solid var(--accordion-border-focus);
 }
 .tds-accordion-item[disabled=true]:focus-within {
-  border-color: var(--tds-accordion-border);
+  border-color: var(--accordion-border);
 }
 :host(:focus-within) .tds-accordion-item:has(.tds-accordion-header-icon-start:focus), :host(:focus-within) .tds-accordion-item:has(.tds-accordion-header-icon-end: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(:focus-within) .tds-accordion-item .tds-accordion-header-icon-start,
 :host(:focus-within) .tds-accordion-item .tds-accordion-header-icon-end {
-  background-color: var(--tds-accordion-background-focus);
+  background-color: var(--accordion-background-focus);
   outline: none;
 }
 :host(:hover) .tds-accordion-header-icon-start,
 :host(:hover) .tds-accordion-header-icon-end {
-  background-color: var(--tds-accordion-background-hover);
+  background-color: var(--accordion-background-hover);
 }
 :host(:focus-within:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:focus), :host(:focus-within:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end: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(:focus-within:hover) .tds-accordion-item .tds-accordion-header-icon-start,
 :host(:focus-within:hover) .tds-accordion-item .tds-accordion-header-icon-end {
-  background-color: var(--tds-accordion-background-hover);
+  background-color: var(--accordion-background-hover);
   outline: none;
 }
 .tds-accordion-item:has(:hover) {
-  background-color: var(--tds-accordion-background-hover);
+  background-color: var(--accordion-background-hover);
 }
 .tds-accordion-item:has(.tds-accordion-header-icon-start:active),
 .tds-accordion-item:has(.tds-accordion-header-icon-end:active) {
-  background-color: var(--tds-accordion-background-active);
+  background-color: var(--accordion-background-active);
 }
 :host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:active) .tds-accordion-header-icon-start,
 :host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end:active) .tds-accordion-header-icon-end {
-  background-color: var(--tds-accordion-background-active);
+  background-color: var(--accordion-background-active);
 }
 .tds-accordion-header-icon-start:active,

package/dist/collection/components/accordion/accordion.css CHANGED Viewed

@@ -12,19 +12,18 @@
 }
 :host(: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(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {
-  background-color: var(--tds-accordion-background-focus);
+  background-color: var(--accordion-background-focus);
   outline: none;
 }
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-start::after,
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-end::after {
-  border-color: var(--tds-accordion-border-focus);
+  border-color: var(--accordion-border-focus);
 }
 :host(:focus) .disabled,
 :host(:focus) .disabled * {
@@ -43,7 +42,7 @@
 :host(:active) .tds-accordion-header-icon-start,
 :host(:active) .tds-accordion-header-icon-end {
-  background-color: var(--tds-accordion-background-active);
+  background-color: var(--accordion-background-active);
   outline: none;
 }
 :host(:active) .disabled,
@@ -62,7 +61,7 @@
 }
 :host(:last-child) {
-  border-bottom: 1px solid var(--tds-accordion-border);
+  border-bottom: 1px solid var(--accordion-border);
 }
 :host(.hide-last-border:last-child) {
@@ -70,9 +69,9 @@
 }
 :host(.tds-mode-variant-secondary) {
-  background-color: var(--tds-accordion-background);
+  background-color: var(--accordion-background);
 }
 :host(.tds-mode-variant-primary) {
-  background-color: var(--tds-accordion-background);
+  background-color: var(--accordion-background);
 }

package/dist/collection/components/badge/badge.css CHANGED Viewed

@@ -1,6 +1,4 @@
 :host {
-  --tds-badge-background-color: var(--tds-red-400);
-  --tds-badge-color-text: var(--tds-white);
   box-sizing: border-box;
   display: block;
 }
@@ -11,7 +9,7 @@
 .tds-badge {
   display: block;
   border-radius: 12px;
-  background-color: var(--tds-badge-background-color);
+  background-color: var(--badge-background-color);
   text-align: center;
 }
 .tds-badge.tds-badge-sm {
@@ -36,6 +34,6 @@
 .tds-badge-text {
   font-size: 12px;
-  color: var(--tds-badge-color-text);
+  color: var(--badge-color-text);
   font-weight: bold;
 }

package/dist/collection/components/banner/banner.css CHANGED Viewed

@@ -1,19 +1,22 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host(.hide) {
   display: none;
   visibility: hidden;
 }
 :host(.error) {
-  background-color: var(--tds-banner-background-error);
+  background-color: var(--banner-background-error);
 }
 :host(.information) {
-  background-color: var(--tds-banner-background-info);
+  background-color: var(--banner-background-info);
 }
 :host {
   display: flex;
-  background-color: var(--tds-banner-background-default);
+  background-color: var(--banner-background-default);
   z-index: 400;
   padding-left: 16px;
 }
@@ -21,16 +24,16 @@
   padding-left: 4px;
   padding-top: 14px;
   padding-right: 12px;
-  color: var(--tds-banner-prefix-default-color);
+  color: var(--banner-prefix-default);
 }
 :host .banner-icon.error {
-  color: var(--tds-banner-prefix-error-color);
+  color: var(--banner-prefix-error);
 }
 :host .banner-icon.information {
-  color: var(--tds-banner-prefix-info-color);
+  color: var(--banner-prefix-info);
 }
 :host .content {
-  color: var(--tds-banner-text-color);
+  color: var(--banner-text);
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -46,14 +49,22 @@
 }
 :host .header,
 :host slot[name=header] {
-  font: var(--tds-headline-06);
-  letter-spacing: var(--tds-headline-06-ls);
+  font-family: var(--headline-06-font-family);
+  font-size: var(--headline-06-font-size);
+  line-height: var(--headline-06-line-height);
+  font-weight: var(--headline-06-font-weight);
+  letter-spacing: var(--headline-06-letter-spacing);
+  text-transform: var(--headline-06-text-transform);
 }
 :host .subheader,
 :host slot[name=subheader] {
   display: block;
-  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);
 }
 :host slot[name=actions]::slotted(*) {
   display: block;
@@ -61,14 +72,14 @@
   padding-top: 12px;
 }
 :host .banner-close {
-  color: var(--tds-banner-x-color);
+  color: var(--banner-close-icon);
 }
 :host .banner-close button {
   padding-right: 16px;
   padding-top: 14px;
   background-color: transparent;
   border: none;
-  color: var(--tds-banner-x-color);
+  color: var(--banner-close-icon);
 }
 :host .banner-close button:hover {
   cursor: pointer;
@@ -77,8 +88,7 @@
   outline: none;
 }
 :host .banner-close button:focus-visible tds-icon {
-  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;
 }

package/dist/collection/components/banner/banner.js CHANGED Viewed

@@ -69,7 +69,7 @@ export class TdsBanner {
                 "mutable": false,
                 "complexType": {
                     "original": "IconNames",
-                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"merge\" | \"copy\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"placeholder\" | \"history\" | \"print\" | \"key\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"list\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
+                    "resolved": "\"profile\" | \"expand\" | \"info\" | \"error\" | \"global\" | \"merge\" | \"copy\" | \"document\" | \"audio\" | \"link\" | \"video\" | \"image\" | \"text\" | \"download\" | \"target\" | \"placeholder\" | \"history\" | \"print\" | \"key\" | \"24v_battery_inactive\" | \"24v_battery\" | \"acceleration_inactive\" | \"acceleration\" | \"adblue_inactive\" | \"adblue\" | \"arrow_diagonal\" | \"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"audio_inactive\" | \"award\" | \"back\" | \"backward_inactive\" | \"backward\" | \"bento\" | \"bug_inactive\" | \"bug\" | \"burger\" | \"bus_inactive\" | \"bus\" | \"calendar_inactive\" | \"calendar\" | \"camera_inactive\" | \"camera\" | \"card\" | \"cart\" | \"charging_complete\" | \"charging_failed\" | \"charging_speed_inactive\" | \"charging_speed\" | \"charging_stopped\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"clock_inactive\" | \"clock\" | \"configurator\" | \"contact_inactive\" | \"contact\" | \"cookie_inactive\" | \"cookie\" | \"coolant_level_inactive\" | \"coolant_level\" | \"cross\" | \"cup_inactive\" | \"cup\" | \"dashboard\" | \"department_inactive\" | \"department\" | \"departure_scheduling_inactive\" | \"departure_scheduling\" | \"diamond_inactive\" | \"diamond\" | \"document_check\" | \"document_doc\" | \"document_eye\" | \"document_pdf\" | \"document_plus_inactive\" | \"document_plus\" | \"document_ppt\" | \"document_tool\" | \"document_wrong\" | \"document_xls\" | \"dollar\" | \"doner\" | \"double_kebab\" | \"driving_licence_inactive\" | \"driving_licence\" | \"drop_inactive\" | \"drop\" | \"edit_inactive\" | \"edit\" | \"email\" | \"engine_inactive\" | \"engine\" | \"environment_inactive\" | \"environment\" | \"exit\" | \"expand_inactive\" | \"export_inactive\" | \"export\" | \"eye_inactive\" | \"eye\" | \"face_dissatisfied\" | \"face_neutral\" | \"face_satisfied\" | \"factory_inactive\" | \"factory\" | \"ferry_inactive\" | \"ferry\" | \"filters_inactive\" | \"filters\" | \"flash_inactive\" | \"flash\" | \"folder\" | \"forward_inactive\" | \"forward\" | \"fuel_gauge_inactive\" | \"fuel_gauge\" | \"fuel_inactive\" | \"fuel\" | \"gift inactive\" | \"gift\" | \"guided_tour_inactive\" | \"guided_tour\" | \"hatch_open_1\" | \"hatch_open_2\" | \"hatch_open_inactive\" | \"hatch_open\" | \"heart_inactive\" | \"heart\" | \"heating_inactive_screen\" | \"history_inactive\" | \"home_inactive\" | \"home\" | \"idea_inactive\" | \"idea\" | \"image_add\" | \"image_inactive\" | \"image_set\" | \"insights\" | \"kebab\" | \"key_inactive\" | \"layer_inactive\" | \"layer\" | \"link_broken\" | \"list_inactive\" | \"list\" | \"lock_inactive\" | \"lock\" | \"map_cursor_inactive\" | \"map_cursor\" | \"maximize_fullscreen\" | \"meatballs\" | \"merge_inactive\" | \"message_inactive\" | \"message\" | \"mileage_inactive\" | \"mileage\" | \"minimize_fullscreen\" | \"minus\" | \"navigate_inactive\" | \"navigate\" | \"notification_inactive\" | \"notification\" | \"oil_level_inactive\" | \"oil_level\" | \"pause_inactive\" | \"pause\" | \"phone_inactive\" | \"phone\" | \"pie_chart\" | \"pin_inactive\" | \"pin\" | \"play_inactive\" | \"play\" | \"plus\" | \"powerplug_inactive\" | \"powerplug\" | \"print_inactive\" | \"privacy_inactive\" | \"privacy\" | \"profile_inactive\" | \"proportions_inactive\" | \"proportions\" | \"range_inactive\" | \"range\" | \"redirect\" | \"refresh_inactive\" | \"refresh\" | \"reload_inactive\" | \"reload\" | \"repeat\" | \"report_inactive\" | \"report\" | \"route_inactive\" | \"route\" | \"save_inactive\" | \"save\" | \"search\" | \"send_inactive\" | \"send\" | \"settings\" | \"share\" | \"skip_backwards\" | \"skip_forward\" | \"smartphone_inactive\" | \"smartphone\" | \"sorting\" | \"speedometer_inactive\" | \"speedometer\" | \"star\" | \"support\" | \"target_inactive\" | \"temperature_inactive\" | \"temperature\" | \"text_inactive\" | \"thumbs_down\" | \"thumbs_up\" | \"tick\" | \"timer\" | \"tool_inactive\" | \"tool\" | \"trailer_inactive\" | \"trailer\" | \"trash_inactive\" | \"trash\" | \"truck_inactive\" | \"truck\" | \"undo_inactive\" | \"undo\" | \"unlock\" | \"upload\" | \"video_inactive\" | \"wallet\" | \"warning\" | \"weight_inactive\" | \"weight\" | \"wifi_inactive\" | \"wifi\" | \"windscreen_heating_inactive\" | \"windscreen_heating\"",
                     "references": {
                         "IconNames": {
                             "location": "import",

package/dist/collection/components/block/block.css CHANGED Viewed

@@ -1,28 +1,35 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 .tds-block {
   box-sizing: border-box;
-  color: var(--tds-block-color);
-  background-color: var(--tds-block-background);
+  font-family: var(--detail-01-font-family);
+  font-size: var(--detail-01-font-size);
+  line-height: var(--detail-01-line-height);
+  font-weight: var(--detail-01-font-weight);
+  letter-spacing: var(--detail-01-letter-spacing);
+  text-transform: var(--detail-01-text-transform);
+  background-color: var(--block-background);
+  color: var(--block-text-color);
   border-radius: 4px;
   padding: 16px;
-  font: var(--tds-body-01);
-  letter-spacing: var(--tds-body-01-ls);
 }
 .tds-block * {
   box-sizing: border-box;
 }
 .tds-mode-variant-primary {
-  background-color: var(--tds-block-background-primary);
+  background-color: var(--block-background-mode-primary);
 }
 .tds-mode-variant-secondary {
-  background-color: var(--tds-block-background-secondary);
+  background-color: var(--block-background-mode-secondary);
 }
 .tds-block-even {
-  background-color: var(--tds-block-background-even);
+  background-color: var(--block-background-even);
 }
 .tds-block-odd {
-  background-color: var(--tds-block-background-odd);
+  background-color: var(--block-background-odd);
 }

package/dist/collection/components/block/block.js CHANGED Viewed

@@ -13,6 +13,7 @@ export class TdsBlock {
         this.componentTag = 'div';
     }
     getNestingLevel() {
+        // Start at 0 for the outermost block
         let level = 0;
         let parent = this.host.parentElement;
         while (parent) {
@@ -27,7 +28,10 @@ export class TdsBlock {
         const TagType = this.componentTag;
         const nestingLevel = this.getNestingLevel();
         let evenOddClass = '';
-        if (this.modeVariant === null) {
+        // Check if this block has any tds-block children
+        const hasNestedBlocks = Array.from(this.host.querySelectorAll('tds-block')).length > 0;
+        // Only apply even/odd classes if this block has nested blocks or is itself nested
+        if (this.modeVariant === null && (nestingLevel > 0 || hasNestedBlocks)) {
             if (nestingLevel % 2 === 0) {
                 evenOddClass = 'tds-block-even';
             }
@@ -35,7 +39,7 @@ export class TdsBlock {
                 evenOddClass = 'tds-block-odd';
             }
         }
-        return (h(TagType, { key: '34385f3ac01d173e6bb568432418304186d261c7', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '569b04916fb165fb460711ec659ed2dc3e9ebd12' })));
+        return (h(TagType, { key: '3f595ff59e8957fdc7bbb3680545d293e4c9628a', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '13cf4ac7582e31558780e39e0ef1610edf79331b' })));
     }
     static get is() { return "tds-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css CHANGED Viewed

@@ -1,24 +1,22 @@
 @charset "UTF-8";
 :host([role=listitem]) div ::slotted(*) {
-  color: var(--tds-breadcrumb-color);
+  color: var(--breadcrumb-label);
   text-decoration: none;
 }
 :host([role=listitem]) div:hover ::slotted(*) {
-  color: var(--tds-breadcrumb-color-hover);
+  color: var(--breadcrumb-hover);
   text-decoration: underline;
 }
 :host([role=listitem]) div ::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;
-  outline-offset: 0;
 }
 :host([role=listitem]) div.current ::slotted(*),
 :host([role=listitem]) div [aria-current=page] ::slotted(*) {
   pointer-events: none;
   cursor: default;
-  color: var(--tds-breadcrumb-color-current);
+  color: var(--breadcrumb-current);
 }
 :host([role=listitem]) div.current:hover ::slotted(*),
 :host([role=listitem]) div [aria-current=page]:hover ::slotted(*) {
@@ -27,7 +25,7 @@
 }
 :host([role=listitem]) div::after {
   content: "›";
-  color: var(--tds-breadcrumb-separator-color);
+  color: var(--breadcrumb-separator-color);
   margin-right: 4px;
   margin-left: 4px;
   display: inline-block;

package/dist/collection/components/breadcrumbs/breadcrumbs.css CHANGED Viewed

@@ -1,3 +1,6 @@
+/* Typography Usage mixins */
+/* Centralized map of typography types */
+/* Utility mixin */
 :host {
   box-sizing: border-box;
 }
@@ -5,10 +8,14 @@
   box-sizing: border-box;
 }
 :host [role=list] {
+  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: 0;
   margin: 0;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
   display: flex;
   flex-wrap: wrap;
   list-style-type: none;