refactor: version 2

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($font-size: var(--sbb-text-font-size), $font-weight: normal) {
+@mixin text($exclude-font-size: false) {
   font-family: var(--sbb-typo-font-family);
-  font-weight: $font-weight;
+  font-weight: normal;
   line-height: var(--sbb-typo-line-height-body-text);
   letter-spacing: var(--sbb-typo-letter-spacing-body-text);
-  font-size: $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);
@@ -132,6 +129,7 @@
   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
   &::after {
@@ -171,7 +169,7 @@
 
 .sbb-tab-label__text,
 .sbb-tab-label__amount {
-  @include sbb.text($font-size: var(--sbb-tab-label-font-size));
+  font-size: var(--sbb-tab-label-font-size);
   @include sbb.font-smoothing;
 }
 
@@ -187,11 +185,11 @@
   transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
 
   @include sbb.ellipsis;
-  @include sbb.text--bold;
 }
 
 .sbb-tab-label__amount {
   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);
+  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.