From a9aa62527a40171798a31aa39ab3cbc32e739e0e Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 24 Apr 2024 20:50:56 +0200 Subject: [PATCH] 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. --- package.json | 2 +- .../core/styles/mixins/font-face.scss | 18 ++++++++++++------ src/components/core/styles/mixins/panel.scss | 8 +++----- src/components/core/styles/mixins/typo.scss | 8 ++++---- .../form-field/form-field/form-field.scss | 2 +- .../menu/menu-link/menu-link.stories.ts | 8 +++----- src/components/menu/menu/menu.stories.ts | 3 +-- src/storybook/styles/typography/readme.md | 2 +- yarn.lock | 8 ++++---- 9 files changed, 30 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index ed87b02935e..06228314e29 100644 --- 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 index aa78affe4a5..e0d75c1bc54 100644 --- 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 index 9856bbdf627..e867ee94078 100644 --- 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 index c3c13d1ae43..1ce9e8b5526 100644 --- 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,7 +89,7 @@ // 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); @@ -97,7 +97,7 @@ } @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 index 72ba435f5e7..8254ae2a0ed 100644 --- 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 index 6cdb65b83f0..c4c50187122 100644 --- 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` -
${getBasicTemplate(args, 1)} ${getBasicTemplate(args, 2)} ${getBasicTemplate(args, 3)}
+ ${getBasicTemplate(args, 1)} ${getBasicTemplate(args, 2)} ${getBasicTemplate(args, 3)} `; const TemplateMenuActionCustomIcon = (args: Args): TemplateResult => html` -
- ${getBasicTemplate(args, 1, true)} ${getBasicTemplate(args, 2, false)} - ${getBasicTemplate(args, 3, true)} -
+ ${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 index 6976dc84cb0..df4002bad8b 100644 --- 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 index b9c9cb01593..3fc805ff50f 100644 --- 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 `

` correctly corresponds diff --git a/yarn.lock b/yarn.lock index 0a94806afee..530844a941d 100644 --- 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"