diff --git a/docs/GETTING_STARTED.md b/docs/GETTING_STARTED.md index 82eaff0a9a..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 @@ -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; +} +``` diff --git a/package.json b/package.json index 9cdb96aee8..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.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", 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/core/styles/mixins/font-face.scss b/src/components/core/styles/mixins/font-face.scss index aa78affe4a..523762cf00 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: 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; } } 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/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 { 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/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/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/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. 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..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.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.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"