From 1787b4a130190ee58fb291a47268465909e46f5e Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Mon, 2 Sep 2024 16:09:55 +0200
Subject: [PATCH] refactor: version 2

---
 src/elements/core/host.ts                  | 1 +
 src/elements/core/host/box-sizing.scss     | 3 +++
 src/elements/core/host/host.ts             | 2 ++
 src/elements/core/host/typo.scss           | 9 +++++++++
 src/elements/core/styles/mixins/typo.scss  | 8 +++++---
 src/elements/tabs/tab-label/tab-label.scss | 8 +++-----
 src/elements/tabs/tab-label/tab-label.ts   | 3 ++-
 7 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src/elements/core/host.ts
 create mode 100644 src/elements/core/host/box-sizing.scss
 create mode 100644 src/elements/core/host/host.ts
 create mode 100644 src/elements/core/host/typo.scss

diff --git a/src/elements/core/host.ts b/src/elements/core/host.ts
new file mode 100644
index 0000000000..9556a7269c
--- /dev/null
+++ b/src/elements/core/host.ts
@@ -0,0 +1 @@
+export * from './host/host.js';
diff --git a/src/elements/core/host/box-sizing.scss b/src/elements/core/host/box-sizing.scss
new file mode 100644
index 0000000000..3f9d585b86
--- /dev/null
+++ b/src/elements/core/host/box-sizing.scss
@@ -0,0 +1,3 @@
+@use '../styles/mixins/helpers';
+
+@include helpers.box-sizing;
diff --git a/src/elements/core/host/host.ts b/src/elements/core/host/host.ts
new file mode 100644
index 0000000000..81e564c61e
--- /dev/null
+++ b/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';
diff --git a/src/elements/core/host/typo.scss b/src/elements/core/host/typo.scss
new file mode 100644
index 0000000000..58a3146826
--- /dev/null
+++ b/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);
+}
diff --git a/src/elements/core/styles/mixins/typo.scss b/src/elements/core/styles/mixins/typo.scss
index 1605ea7061..420d93d6a5 100644
--- a/src/elements/core/styles/mixins/typo.scss
+++ b/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 {
diff --git a/src/elements/tabs/tab-label/tab-label.scss b/src/elements/tabs/tab-label/tab-label.scss
index 8c112e80c7..a02f2c53d4 100644
--- a/src/elements/tabs/tab-label/tab-label.scss
+++ b/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;
 }
diff --git a/src/elements/tabs/tab-label/tab-label.ts b/src/elements/tabs/tab-label/tab-label.ts
index 51133d3e97..c8473aa9e2 100644
--- a/src/elements/tabs/tab-label/tab-label.ts
+++ b/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.