@scania/tegel 1.33.0 → 1.34.0-design.tokens.beta.test.0

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

@@ -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

@@ -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

@@ -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

@@ -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;