feat: reduce font-faces to single SbbWeb variant

BREAKING CHANGE: replaced Roman, bold, and light font-face variants with the single "SbbWeb" font. Using font-weight chooses the correct font-family.
sbb-design-systems · Apr 24, 2024 · a9aa625 · a9aa625
1 parent 32881a9
commit a9aa625
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 29 deletions.
diff --git a/package.json b/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.7.0",
     "@storybook/addon-a11y": "8.0.9",
     "@storybook/addon-actions": "8.0.9",
     "@storybook/addon-essentials": "8.0.9",

diff --git a/src/components/core/styles/mixins/font-face.scss b/src/components/core/styles/mixins/font-face.scss
@@ -1,51 +1,57 @@
 @mixin font-declarations {
   @font-face {
-    font-family: 'SBBWeb Roman';
+    font-family: SBBWeb;
     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: SBBWeb;
     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: SBBWeb;
     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: SBBWeb;
     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: SBBWeb;
     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: SBBWeb;
     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;
   }
 }
diff --git a/src/components/core/styles/mixins/panel.scss b/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);
 }
diff --git a/src/components/core/styles/mixins/typo.scss b/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 {

diff --git a/src/components/form-field/form-field/form-field.scss b/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 {

diff --git a/src/components/menu/menu-link/menu-link.stories.ts b/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 = {

diff --git a/src/components/menu/menu/menu.stories.ts b/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)',
 };
 

diff --git a/src/storybook/styles/typography/readme.md b/src/storybook/styles/typography/readme.md
@@ -1,6 +1,6 @@
 ## Text styles
 
-Every text size (xxs, xs, s, m, l and xl) is available as sass mixin or css class.
+Every text size (xxs, xs, s, m, l and xl) is available as SASS mixin or CSS class.
 It also includes line-height, letter-spacing and font-family.
 
 The native browser margins (1em) between paragraph elements `<p>` correctly corresponds

diff --git a/yarn.lock b/yarn.lock
@@ -1989,10 +1989,10 @@
     argparse "~1.0.9"
     string-argv "~0.3.1"
 
-"@sbb-esta/lyne-design-tokens@0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.6.0.tgz#5d77348934b311c6c0be14458fd48160d0f638b1"
-  integrity sha512-pV5OhCIrC7k24r9ZPda2t6R2Ld8kO9YQGajOvdpDKr2Q0zxOE5213NCbh7AspC/5y4SYldvKX8vbsRujSOd1jA==
+"@sbb-esta/lyne-design-tokens@0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.7.0.tgz#20a56b14e270f7f72c1046ec8bcac3c022aa358a"
+  integrity sha512-5qV0E4GecyBMZjti7g44ry7SjTAs5BhOTCkWeyK4Q6XEvFlIUHq+C7PHzpafaVPGPzbgObL3RDGpvM9hs/H+cQ==
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"