refactor: use text mixins less invasive WIP

src/elements/core/host.ts

@@ -0,0 +1 @@
+export * from './host/host.js';

src/elements/core/host/box-sizing.scss

@@ -0,0 +1,3 @@
+@use '../styles/mixins/helpers';
+
+@include helpers.box-sizing;

src/elements/core/host/host.ts

@@ -0,0 +1,2 @@
+export { default as boxSizingStyles } from './box-sizing.scss?lit&inline';
+export { default as typoStyles } from './typo.scss?lit&inline';

src/elements/core/host/typo.scss

@@ -0,0 +1,9 @@
+@use '../styles/mixins/typo';
+
+:host {
+  @include typo.text($exclude-font-size: true);
+}
+
+* {
+  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+}

src/elements/core/styles/mixins/typo.scss

@@ -88,12 +88,14 @@
 // ----------------------------------------------------------------------------------------------------
 // Typo: Text Style Mixins
 // ----------------------------------------------------------------------------------------------------
-@mixin text {
+@mixin text($exclude-font-size: false) {
   font-family: var(--sbb-typo-font-family);
   font-weight: normal;
   line-height: var(--sbb-typo-line-height-body-text);
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
-  font-size: var(--sbb-text-font-size);
+  @if not($exclude-font-size) {
+    font-size: var(--sbb-text-font-size);
+  }
 }
 
 @mixin text--bold {

src/elements/tabs/tab-label/tab-label.scss

@@ -1,8 +1,5 @@
 @use '../../core/styles' as sbb;
 
-// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
-@include sbb.box-sizing;
-
 :host {
   --sbb-tab-label-height: var(--sbb-size-element-m);
   --sbb-tab-label-color: var(--sbb-color-granite);
@@ -20,6 +17,7 @@
   );
   --sbb-tab-label-animation-easing: var(--sbb-animation-easing);
   --sbb-tab-label-amount-color: var(--sbb-color-metal);
+  --sbb-tab-label-font-size: var(--sbb-font-size-text-m);
 
   display: inline-block;
   max-width: 100%;
@@ -40,6 +38,11 @@
 :host([data-size='s']) {
   --sbb-tab-label-height: var(--sbb-size-element-xs);
   --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);
+  --sbb-tab-label-font-size: var(--sbb-font-size-text-s);
+}
+
+:host([data-size='xl']) {
+  --sbb-tab-label-font-size: var(--sbb-font-size-text-xl);
 }
 
 :host([disabled]) {
@@ -83,20 +86,34 @@
   --sbb-tab-label-color: var(--sbb-color-charcoal);
 }
 
+// Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
+:host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) {
+  --sbb-tab-label-focus-visible-display: block;
+}
+
+:host([data-has-divider]) {
+  --sbb-tab-label-divider-display: block;
+}
+
+:host(:is([data-slot-names~='icon'], [icon-name])) {
+  --sbb-tab-label-icon-display: flex;
+}
+
+:host(:is([data-slot-names~='amount'], [amount])) {
+  --sbb-tab-label-amount-display: flex;
+}
+
 .sbb-tab-label__wrapper {
   position: relative;
 
-  // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
-  :host(:focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])) & {
-    &::before {
-      content: '';
-      position: absolute;
-      display: block;
-      inset: calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1);
-      border: var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);
-      border-radius: var(--sbb-border-radius-2x);
-      z-index: 1;
-    }
+  &::before {
+    content: '';
+    position: absolute;
+    display: var(--sbb-tab-label-focus-visible-display, none);
+    inset: calc((var(--sbb-focus-outline-width) + var(--sbb-focus-outline-offset)) * -1);
+    border: var(--sbb-focus-outline-width) solid var(--sbb-focus-outline-color);
+    border-radius: var(--sbb-border-radius-2x);
+    z-index: 1;
   }
 }
 
@@ -112,18 +129,18 @@
   cursor: var(--sbb-tab-label-cursor);
   transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
   color: var(--sbb-tab-label-icon-color);
+  @include sbb.text--bold;
 
   // Show a border under the tab-group and between flex rows when the tab titles wrap to a new line
-  :host([data-has-divider]) & {
-    &::after {
-      content: '';
-      position: absolute;
-      inset-inline-start: 0;
-      inset-block-end: 0;
-      width: var(--sbb-tab-group-width);
-      height: var(--sbb-border-width-1x);
-      background-color: var(--sbb-color-cloud);
-    }
+  &::after {
+    content: '';
+    position: absolute;
+    display: var(--sbb-tab-label-divider-display, none);
+    inset-inline-start: 0;
+    inset-block-end: 0;
+    width: var(--sbb-tab-group-width);
+    height: var(--sbb-border-width-1x);
+    background-color: var(--sbb-color-cloud);
   }
 
   &::before {
@@ -150,51 +167,29 @@
   text-decoration: var(--sbb-tab-label-text-decoration);
 }
 
+.sbb-tab-label__text,
+.sbb-tab-label__amount {
+  font-size: var(--sbb-tab-label-font-size);
+  @include sbb.font-smoothing;
+}
+
 .sbb-tab-label__icon {
-  display: flex;
+  display: var(--sbb-tab-label-icon-display, none);
   flex-shrink: 0;
   color: var(--sbb-tab-label-color);
   transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
-
-  :host(:not([data-slot-names~='icon'], [icon-name])) & {
-    display: none;
-  }
 }
 
 .sbb-tab-label__text {
   color: var(--sbb-tab-label-color);
   transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
 
-  @include sbb.font-smoothing;
   @include sbb.ellipsis;
-  @include sbb.text-m--bold;
-
-  :host([data-size='s']) & {
-    @include sbb.text-s--bold;
-  }
-
-  :host([data-size='xl']) & {
-    @include sbb.text-xl--bold;
-  }
 }
 
 .sbb-tab-label__amount {
-  display: flex;
+  display: var(--sbb-tab-label-amount-display, none);
   color: var(--sbb-tab-label-amount-color);
   transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
-
-  @include sbb.text-m--regular;
-  @include sbb.font-smoothing;
-
-  :host(:not([data-slot-names~='amount'], [amount])) & {
-    display: none;
-  }
-
-  :host([data-size='s']) & {
-    @include sbb.text-s--regular;
-  }
-
-  :host([data-size='xl']) & {
-    @include sbb.text-xl--regular;
-  }
+  font-weight: normal;
 }

src/elements/tabs/tab-label/tab-label.ts

@@ -4,6 +4,7 @@ import { customElement, property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
 import { slotState } from '../../core/decorators.js';
+import { boxSizingStyles, typoStyles } from '../../core/host.js';
 import { SbbDisabledMixin } from '../../core/mixins.js';
 import { SbbIconNameMixin } from '../../icon.js';
 import type { SbbTitleLevel } from '../../title.js';
@@ -20,7 +21,7 @@ import style from './tab-label.scss?lit&inline';
 @customElement('sbb-tab-label')
 @slotState()
 export class SbbTabLabelElement extends SbbDisabledMixin(SbbIconNameMixin(LitElement)) {
-  public static override styles: CSSResultGroup = style;
+  public static override styles: CSSResultGroup = [boxSizingStyles, typoStyles, style];
 
   /**
    * The level will correspond to the heading tag generated in the title.