feat: reduce font-faces to single SBB variant

docs/GETTING_STARTED.md

@@ -191,7 +191,7 @@ and on [storybook](https://lyne-storybook.app.sbb.ch).
 
 ### Full Font
 
-The `typography.css` file only contains a subset of the `SBBWeb` fonts that do not contain all characters (e.g. the French "œ").
+The `typography.css` file only contains a subset of the `SBB` fonts that do not contain all characters (e.g. the French "œ").
 For including the full fontset, we provide the `fullfont.css` file which can be added after the `typography.css` file.
 
 ```css
@@ -288,3 +288,27 @@ However, this can interfere with the z-index of your components.
 Therefore, every overlay component provides a CSS variable to override its z-index.
 Additionally, there is the global CSS variable `--sbb-overlay-default-z-index` that has a default z-index of 1000.
 With this, developers have the chance to change the z-index either globally or on component level.
+
+### Fonts
+
+SBB provides different fonts depending on the font-weight: `Roman`, `Bold` and `Light`.
+Lyne maps these fonts on the CSS `font-weight` property so that consumers
+can just set e.g. `font-weight: bold` and the correct font gets automatically selected.
+Please note, although SBB provides more fonts than `Roman`, `Bold` and `Light`,
+Lyne only intends to use these three fonts.
+To apply the SBB font family you can use the CSS var `var(--sbb-typo-font-family)`. However,
+this only includes the family but no letter spacing, so we recommend to always
+use our SASS mixins or CSS classes which contain all necessary properties.
+See [Text styles](https://lyne-storybook.app.sbb.ch/?path=/docs/styles-typography--docs) for what's available.
+
+```html
+<p class="sbb-text-s sbb-text--bold"></p>
+```
+
+```scss
+@use '@sbb-esta/lyne-components' as sbb;
+
+p {
+  @include sbb.text-s--bold;
+}
+```

package.json

@@ -69,7 +69,7 @@
     "@lit/react": "1.0.4",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
-    "@sbb-esta/lyne-design-tokens": "0.6.0",
+    "@sbb-esta/lyne-design-tokens": "0.8.0",
     "@storybook/addon-a11y": "8.0.9",
     "@storybook/addon-actions": "8.0.9",
     "@storybook/addon-essentials": "8.0.9",

src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss

@@ -44,8 +44,11 @@
   --sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);
 
   @include sbb.button-reset;
-  @include sbb.text--bold;
+  @include sbb.text-xxs--regular;
 
+  // line height and letter-spacing needed to match squares drawn in Figma.
+  line-height: 0;
+  letter-spacing: 0.01em;
   width: var(--sbb-size-icon-ui-small);
   height: var(--sbb-size-icon-ui-small);
   border: var(--sbb-breadcrumb-group-ellipsis-border-width) solid

src/components/core/styles/mixins/font-face.scss

@@ -1,51 +1,57 @@
 @mixin font-declarations {
   @font-face {
-    font-family: 'SBBWeb Roman';
+    font-family: SBB;
     src:
       url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff2') format('woff2'),
       url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Roman.woff') format('woff');
     font-display: fallback;
+    font-weight: 400;
   }
 
   @font-face {
-    font-family: 'SBBWeb Bold';
+    font-family: SBB;
     src:
       url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff2') format('woff2'),
       url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Bold.woff') format('woff');
     font-display: swap;
+    font-weight: 700;
   }
 
   @font-face {
-    font-family: 'SBBWeb Light';
+    font-family: SBB;
     src:
       url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff2') format('woff2'),
       url('https://cdn.app.sbb.ch/fonts/v1_6_subset/SBBWeb-Light.woff') format('woff');
     font-display: swap;
+    font-weight: 300;
   }
 }
 
 @mixin font-declarations-full {
   @font-face {
-    font-family: 'SBBWeb Roman';
+    font-family: SBB;
     src:
       url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff2') format('woff2'),
       url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Roman.woff') format('woff');
     font-display: fallback;
+    font-weight: 400;
   }
 
   @font-face {
-    font-family: 'SBBWeb Bold';
+    font-family: SBB;
     src:
       url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff2') format('woff2'),
       url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Bold.woff') format('woff');
     font-display: swap;
+    font-weight: 700;
   }
 
   @font-face {
-    font-family: 'SBBWeb Light';
+    font-family: SBB;
     src:
       url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff2') format('woff2'),
       url('https://cdn.app.sbb.ch/fonts/v1/SBBWeb-Light.woff') format('woff');
     font-display: swap;
+    font-weight: 300;
   }
 }

src/components/core/styles/mixins/panel.scss

@@ -11,8 +11,6 @@
   --sbb-panel-inner-height: #{functions.px-to-rem-build(167)};
   --sbb-panel-triangle-height: #{functions.px-to-rem-build(33)};
   --sbb-panel-height: calc(var(--sbb-panel-inner-height) + 2 * var(--sbb-panel-triangle-height));
-  --sbb-panel-font-family: var(--sbb-typo-type-face-sbb-light);
-  --sbb-panel-letter-spacing: var(--sbb-typo-letter-spacing-titles);
   --sbb-panel-line-height: var(--sbb-typo-line-height-titles);
   --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
   --sbb-panel-color: var(--sbb-color-white);
@@ -71,10 +69,10 @@
 @mixin panel-text {
   @include typo.font-smoothing;
 
-  font-family: var(--sbb-panel-font-family);
+  font-family: var(--sbb-typo-font-family);
   font-size: var(--sbb-panel-font-size);
-  font-weight: normal;
+  font-weight: 300;
   line-height: var(--sbb-panel-line-height);
-  letter-spacing: var(--sbb-panel-letter-spacing);
+  letter-spacing: var(--sbb-typo-letter-spacing-titles);
   color: var(--sbb-panel-color);
 }

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

@@ -16,8 +16,8 @@
 
   margin: 0;
   margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
-  font-family: var(--sbb-typo-type-face-sbb-bold);
-  font-weight: normal;
+  font-family: var(--sbb-typo-font-family);
+  font-weight: bold;
   line-height: var(--sbb-title-line-height);
   letter-spacing: var(--sbb-typo-letter-spacing-titles);
   font-size: var(--sbb-title-font-size);
@@ -89,15 +89,15 @@
 // Typo: Text Style Mixins
 // ----------------------------------------------------------------------------------------------------
 @mixin text {
-  font-family: var(--sbb-typo-type-face-sbb-roman);
+  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);
 }
 
 @mixin text--bold {
-  font-family: var(--sbb-typo-type-face-sbb-bold);
+  font-weight: bold;
 }
 
 @mixin text-xl--regular {

src/components/core/styles/typography.scss

@@ -82,28 +82,37 @@ sbb-breadcrumb-group:not(:defined) {
   pointer-events: all;
 }
 
+.sbb-text-xxs,
+.sbb-text-xs,
+.sbb-text-s,
+.sbb-text-m,
+.sbb-text-l,
+.sbb-text-xl {
+  @include typo.text;
+}
+
 .sbb-text-xxs {
-  @include typo.text-xxs--regular;
+  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
 }
 
 .sbb-text-xs {
-  @include typo.text-xs--regular;
+  --sbb-text-font-size: var(--sbb-font-size-text-xs);
 }
 
 .sbb-text-s {
-  @include typo.text-s--regular;
+  --sbb-text-font-size: var(--sbb-font-size-text-s);
 }
 
 .sbb-text-m {
-  @include typo.text-m--regular;
+  --sbb-text-font-size: var(--sbb-font-size-text-m);
 }
 
 .sbb-text-l {
-  @include typo.text-l--regular;
+  --sbb-text-font-size: var(--sbb-font-size-text-l);
 }
 
 .sbb-text-xl {
-  @include typo.text-xl--regular;
+  --sbb-text-font-size: var(--sbb-font-size-text-xl);
 }
 
 .sbb-text--bold {

src/components/form-field/form-field/form-field.scss

@@ -376,7 +376,7 @@
   // To be more specific than the styles in normalize.scss we need to use !important
   // TODO: Find a better solution
   font-size: var(--sbb-font-size-text-m) !important;
-  font-family: var(--sbb-typo-type-face-sbb-roman) !important;
+  font-family: var(--sbb-typo-font-family) !important;
   line-height: var(--sbb-typo-line-height-body-text) !important;
 
   &::placeholder {

src/components/loading-indicator/loading-indicator.stories.ts

@@ -1,7 +1,5 @@
-import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
-import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
-import isChromatic from 'chromatic/isChromatic';
+import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -12,6 +10,7 @@ import type { SbbLoadingIndicatorElement } from './loading-indicator.js';
 import readme from './readme.md?raw';
 import '../button/button.js';
 import './loading-indicator.js';
+import '../title.js';
 
 const textBlockStyle: Args = {
   marginBlock: '1rem',
@@ -25,6 +24,7 @@ const negativeBlockStyle: Args = {
   backgroundColor: 'var(--sbb-color-iron)',
   color: 'var(--sbb-color-white)',
   padding: '2rem',
+  '--sbb-title-text-color-normal-override': 'var(--sbb-color-white)',
 };
 
 const createLoadingIndicator = (event: Event, args: Args): void => {
@@ -44,12 +44,6 @@ const createLoadingIndicator = (event: Event, args: Args): void => {
   }, 5000);
 };
 
-// Story interaction executed after the story renders
-const playStory = async ({ canvasElement }: StoryContext): Promise<void> => {
-  await userEvent.click(within(canvasElement).getByTestId('trigger'));
-  await new Promise((resolve) => setTimeout(resolve, 2000));
-};
-
 const TemplateAccessibility = (args: Args): TemplateResult => html`
   <div style=${styleMap(textBlockStyle)}>
     Turn on your screen-reader and click the button to make the loading indicator appear.
@@ -75,9 +69,9 @@ const InlineTemplate = (args: Args): TemplateResult => html`
     <p>
       <sbb-loading-indicator ${sbbSpread(args)}></sbb-loading-indicator> Inline loading indicator
     </p>
-    <h2>
+    <sbb-title level="4">
       <sbb-loading-indicator ${sbbSpread(args)}></sbb-loading-indicator> Adaptive to font size
-    </h2>
+    </sbb-title>
   </div>
 `;
 
@@ -86,9 +80,9 @@ const NegativeInlineTemplate = (args: Args): TemplateResult => html`
     <p>
       <sbb-loading-indicator ${sbbSpread(args)}></sbb-loading-indicator> Inline loading indicator
     </p>
-    <h2>
+    <sbb-title level="4">
       <sbb-loading-indicator ${sbbSpread(args)}></sbb-loading-indicator> Adaptive to font size
-    </h2>
+    </sbb-title>
   </div>
 `;
 
@@ -183,7 +177,6 @@ export const Accessibility: StoryObj = {
   render: TemplateAccessibility,
   argTypes: defaultArgTypes,
   args: { ...defaultArgs, size: size.options![1] },
-  play: isChromatic() ? playStory : undefined,
 };
 
 const meta: Meta = {

src/components/menu/menu-link/menu-link.stories.ts

@@ -22,14 +22,12 @@ const getBasicTemplate = (
 `;
 
 const TemplateMenuAction = (args: Args): TemplateResult => html`
-  <div>${getBasicTemplate(args, 1)} ${getBasicTemplate(args, 2)} ${getBasicTemplate(args, 3)}</div>
+  ${getBasicTemplate(args, 1)} ${getBasicTemplate(args, 2)} ${getBasicTemplate(args, 3)}
 `;
 
 const TemplateMenuActionCustomIcon = (args: Args): TemplateResult => html`
-  <div>
-    ${getBasicTemplate(args, 1, true)} ${getBasicTemplate(args, 2, false)}
-    ${getBasicTemplate(args, 3, true)}
-  </div>
+  ${getBasicTemplate(args, 1, true)} ${getBasicTemplate(args, 2, false)}
+  ${getBasicTemplate(args, 3, true)}
 `;
 
 const text: InputType = {

src/components/menu/menu/menu.stories.ts

@@ -80,14 +80,13 @@ const defaultArgs: Args = {
 };
 
 const userNameStyle: Args = {
-  fontFamily: 'var(--sbb-typo-type-face-sbb-bold)',
+  fontWeight: 'bold',
   fontSize: 'var(--sbb-font-size-text-xs)',
   marginTop: 'var(--sbb-spacing-fixed-1x)',
 };
 
 const userInfoStyle: Args = {
   color: 'var(--sbb-color-graphite)',
-  fontFamily: 'var(--sbb-typo-type-face-sbb-regular)',
   fontSize: 'var(--sbb-font-size-text-xxs)',
 };
 

src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts

@@ -320,7 +320,7 @@ const thirdLevelTemplate = ({ disableAnimation, ...args }: Args): TemplateResult
           slot="left"
           style="--sbb-pearl-chain-vertical-left-item-block-start: -10px; --sbb-pearl-chain-vertical-left-item-inline-end: 10px;"
         >
-          <div style="font-weight: bold;">19:00</div>
+          <div class="sbb-text--bold">19:00</div>
           <div style="margin-top: 40px;">10:31</div>
         </div>
       </sbb-pearl-chain-vertical-item>
@@ -356,7 +356,7 @@ const thirdLevelTemplate = ({ disableAnimation, ...args }: Args): TemplateResult
           slot="left"
           style="--sbb-pearl-chain-vertical-left-item-block-start: -10px; --sbb-pearl-chain-vertical-left-item-inline-end: 10px;"
         >
-          <div style="font-weight: bold;">19:00</div>
+          <div class="sbb-text--bold">19:00</div>
           <div style="margin-top: 40px;">10:31</div>
         </div>
       </sbb-pearl-chain-vertical-item>
@@ -385,7 +385,7 @@ const thirdLevelTemplate = ({ disableAnimation, ...args }: Args): TemplateResult
           slot="left"
           style="--sbb-pearl-chain-vertical-left-item-block-start: -10px; --sbb-pearl-chain-vertical-left-item-inline-end: 10px;"
         >
-          <div style="font-weight: bold;">19:00</div>
+          <div class="sbb-text--bold">19:00</div>
           <div style="margin-top: 40px;">10:31</div>
         </div>
       </sbb-pearl-chain-vertical-item>
@@ -413,7 +413,7 @@ const thirdLevelTemplate = ({ disableAnimation, ...args }: Args): TemplateResult
           slot="left"
           style="--sbb-pearl-chain-vertical-left-item-block-start: -10px; --sbb-pearl-chain-vertical-left-item-inline-end: 10px;"
         >
-          <div style="font-weight: bold;">19:00</div>
+          <div class="sbb-text--bold">19:00</div>
         </div>
       </sbb-pearl-chain-vertical-item>
     </sbb-pearl-chain-vertical>
@@ -481,7 +481,7 @@ const TimetableChange = (): TemplateResult => {
           slot="right"
           style="--sbb-pearl-chain-vertical-right-item-block-start: -10px; --sbb-pearl-chain-vertical-right-item-inline-start: 10px;"
         >
-          <div style="display: flex; flex-direction: row; gap: 100px; font-weight: bold;">
+          <div style="display: flex; flex-direction: row; gap: 100px;" class="sbb-text--bold">
             <div>09:45</div>
             <div>Pl. 12</div>
           </div>

src/components/skiplink-list/skiplink-list.stories.ts

@@ -13,6 +13,7 @@ import readme from './readme.md?raw';
 
 import './skiplink-list.js';
 import '../link/block-link.js';
+import '../title.js';
 
 const titleContent: InputType = {
   control: {
@@ -143,7 +144,7 @@ const meta: Meta = {
   decorators: [
     (story) => html`
       ${story()}
-      <h2>Use TAB to see the skiplink box</h2>
+      <sbb-title level="4">Use TAB to see the skiplink box</sbb-title>
     `,
   ],
   parameters: {