From 01f61a6b45ba8422a50738fcfecae456bdf5029c Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 24 Apr 2024 20:50:56 +0200 Subject: [PATCH 1/5] 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 9cdb96aee8..14cadba7fa 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 aa78affe4a..e0d75c1bc5 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 9856bbdf62..e867ee9407 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 c3c13d1ae4..1ce9e8b552 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 72ba435f5e..8254ae2a0e 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 6cdb65b83f..c4c5018712 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 6976dc84cb..df4002bad8 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 b9c9cb0159..3fc805ff50 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 bbc4ab4b87..2e82562b8b 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" From f89ee20435e296d104bea291c4014dabbfe9d087 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 24 Apr 2024 21:05:26 +0200 Subject: [PATCH 2/5] refactor: reduce typography output --- src/components/core/styles/typography.scss | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/core/styles/typography.scss b/src/components/core/styles/typography.scss index 0d4e18dbc8..81db616dd3 100644 --- a/src/components/core/styles/typography.scss +++ b/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 { From 12390f4baed5939f9db8fee52ca55ec498203e07 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 24 Apr 2024 22:28:01 +0200 Subject: [PATCH 3/5] fix: review --- .../breadcrumb-group/breadcrumb-group.scss | 5 ++++- .../loading-indicator.stories.ts | 21 +++++++------------ .../pearl-chain-vertical.stories.ts | 10 ++++----- .../skiplink-list/skiplink-list.stories.ts | 3 ++- .../tabs/tab-group/tab-group.stories.ts | 4 +++- src/storybook/styles/list/list.stories.ts | 8 ++++--- 6 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss index 8800db08d8..eb38a38793 100644 --- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss +++ b/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 diff --git a/src/components/loading-indicator/loading-indicator.stories.ts b/src/components/loading-indicator/loading-indicator.stories.ts index a60b722e89..7da95c660c 100644 --- a/src/components/loading-indicator/loading-indicator.stories.ts +++ b/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 => { - await userEvent.click(within(canvasElement).getByTestId('trigger')); - await new Promise((resolve) => setTimeout(resolve, 2000)); -}; - const TemplateAccessibility = (args: Args): TemplateResult => html`

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`

Inline loading indicator

-

+ Adaptive to font size -

+
`; @@ -86,9 +80,9 @@ const NegativeInlineTemplate = (args: Args): TemplateResult => html`

Inline loading indicator

-

+ Adaptive to font size -

+ `; @@ -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 = { diff --git a/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts b/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts index bc07d3fd69..a6ff5133fc 100644 --- a/src/components/pearl-chain-vertical/pearl-chain-vertical.stories.ts +++ b/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;" > -
19:00
+
19:00
10:31
@@ -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;" > -
19:00
+
19:00
10:31
@@ -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;" > -
19:00
+
19:00
10:31
@@ -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;" > -
19:00
+
19:00
@@ -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;" > -
+
09:45
Pl. 12
diff --git a/src/components/skiplink-list/skiplink-list.stories.ts b/src/components/skiplink-list/skiplink-list.stories.ts index cbe3f4bd05..8743a7df7c 100644 --- a/src/components/skiplink-list/skiplink-list.stories.ts +++ b/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()} -

Use TAB to see the skiplink box

+ Use TAB to see the skiplink box `, ], parameters: { diff --git a/src/components/tabs/tab-group/tab-group.stories.ts b/src/components/tabs/tab-group/tab-group.stories.ts index 0f698b7dc5..3aea79340f 100644 --- a/src/components/tabs/tab-group/tab-group.stories.ts +++ b/src/components/tabs/tab-group/tab-group.stories.ts @@ -15,7 +15,9 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js'; import readme from './readme.md?raw'; import { SbbTabGroupElement } from './tab-group.js'; + import '../tab-title.js'; +import '../../title.js'; const firstTabTitle = (label: string, args: Args): TemplateResult => html` ${label} @@ -27,7 +29,7 @@ const tabPanelOne = (): TemplateResult => html` elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui sapien eget mi proin sed libero enim sed faucibus turpis in eu mi bibendum neque egestas congue. -

Content heading

+ Content heading Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra justo nec. diff --git a/src/storybook/styles/list/list.stories.ts b/src/storybook/styles/list/list.stories.ts index 32fc77f966..c31c04615c 100644 --- a/src/storybook/styles/list/list.stories.ts +++ b/src/storybook/styles/list/list.stories.ts @@ -4,6 +4,8 @@ import { html } from 'lit'; import readme from './readme.md?raw'; +import '../../../components/title.js'; + const ListContent = (): TemplateResult => html`
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
  • @@ -16,7 +18,7 @@ const ListContent = (): TemplateResult => html` const UnorderedListTemplate = (): TemplateResult => html` ${['xs', 's', 'm', 'l', 'xl'].map( (textSize) => html` -

    Text size ${textSize}

    + Text size ${textSize}
      ${ListContent()}
    • @@ -33,7 +35,7 @@ const UnorderedListTemplate = (): TemplateResult => html` const OrderedListTemplate = (): TemplateResult => html` ${['xs', 's', 'm', 'l', 'xl'].map( (textSize) => html` -

      Text size ${textSize}

      + Text size ${textSize}
        ${ListContent()}
      1. @@ -50,7 +52,7 @@ const OrderedListTemplate = (): TemplateResult => html` const StepsTemplate = (): TemplateResult => html` ${['xs', 's', 'm', 'l', 'xl'].map( (textSize) => html` -

        Text size ${textSize}

        + Text size ${textSize}
          ${ListContent()}
        1. From e061843462a51eff12c9687346d98a1f46599da0 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 25 Apr 2024 08:38:25 +0200 Subject: [PATCH 4/5] docs: add font section in getting started --- docs/GETTING_STARTED.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md index 82eaff0a9a..653067e57c 100644 --- a/docs/GETTING_STARTED.md +++ b/docs/GETTING_STARTED.md @@ -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 +

          +``` + +```scss +@use '@sbb-esta/lyne-components' as sbb; + +p { + @include sbb.text-s--bold; +} +``` From 66a54e0b1a3d0148dbbff7649eab6c5814ae668e Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 25 Apr 2024 12:00:51 +0200 Subject: [PATCH 5/5] fix: use SBB instead of SBBWeb --- docs/GETTING_STARTED.md | 2 +- package.json | 2 +- src/components/core/styles/mixins/font-face.scss | 12 ++++++------ yarn.lock | 8 ++++---- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md index 653067e57c..f4f85016f1 100644 --- a/docs/GETTING_STARTED.md +++ b/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 diff --git a/package.json b/package.json index 14cadba7fa..90ccd3f9ec 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.7.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", diff --git a/src/components/core/styles/mixins/font-face.scss b/src/components/core/styles/mixins/font-face.scss index e0d75c1bc5..523762cf00 100644 --- a/src/components/core/styles/mixins/font-face.scss +++ b/src/components/core/styles/mixins/font-face.scss @@ -1,6 +1,6 @@ @mixin font-declarations { @font-face { - font-family: SBBWeb; + 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'); @@ -9,7 +9,7 @@ } @font-face { - font-family: SBBWeb; + 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'); @@ -18,7 +18,7 @@ } @font-face { - font-family: SBBWeb; + 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'); @@ -29,7 +29,7 @@ @mixin font-declarations-full { @font-face { - font-family: SBBWeb; + 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'); @@ -38,7 +38,7 @@ } @font-face { - font-family: SBBWeb; + 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'); @@ -47,7 +47,7 @@ } @font-face { - font-family: SBBWeb; + 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'); diff --git a/yarn.lock b/yarn.lock index 2e82562b8b..b5a7961457 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.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== +"@sbb-esta/lyne-design-tokens@0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.8.0.tgz#58b0bce6b2b7628d4b3c86991d625a58162ee071" + integrity sha512-o8AnOHdop6o+XinaXK6Ffxk4lbHKswwIWbBnYmuEdRrAMSX9oN6v9mTOxBpJ5m4htmiEqYIidTWrF3fqS0zKrg== "@sinclair/typebox@^0.27.8": version "0.27.8"