Skip to content

Commit

Permalink
feat: reduce font-faces to single SBB variant (#2618)
Browse files Browse the repository at this point in the history
Closes #2614 

BREAKING CHANGE: Replaced `Roman`, `Bold`, and `Light` font-face variants with the single `SBB` font.
 Using CSS `font-weight` property automatically selects the correct font family.
 Migration guide:
  - Replace `font-family: "SBBWeb Roman", ...` with `font-family: "SBB", ...`  and use `font-weight: normal` (potentially not necessary as `normal` is the default).
  - Replace `font-family: "SBBWeb Bold", ...` with `font-family: "SBB", ...` and use `font-weight: bold` or CSS class `sbb-text--bold`.
  - Replace `font-family: "SBBWeb Light", ...` with `font-family: "SBB", ...` and use `font-weight: 300`.
  - Replace CSS variable `--sbb-typo-type-face-sbb-roman` with `--sbb-typo-font-family` and use `font-weight: normal` (potentially not necessary as `normal` is the default).
  - Replace CSS variable `--sbb-typo-type-face-sbb-bold` with `--sbb-typo-font-family` and use `font-weight: bold`.
  - Replace CSS variable `--sbb-typo-type-face-sbb-light` with `--sbb-typo-font-family` and use `font-weight: 300`.
  • Loading branch information
jeripeierSBB authored Apr 29, 2024
1 parent bbf1b3b commit 679d9e9
Show file tree
Hide file tree
Showing 17 changed files with 96 additions and 61 deletions.
26 changes: 25 additions & 1 deletion docs/GETTING_STARTED.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
```
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
"@lit/react": "1.0.5",
"@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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
18 changes: 12 additions & 6 deletions src/components/core/styles/mixins/font-face.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
8 changes: 3 additions & 5 deletions src/components/core/styles/mixins/panel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
}
8 changes: 4 additions & 4 deletions src/components/core/styles/mixins/typo.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand Down
21 changes: 15 additions & 6 deletions src/components/core/styles/typography.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/form-field/form-field/form-field.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
21 changes: 7 additions & 14 deletions src/components/loading-indicator/loading-indicator.stories.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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',
Expand All @@ -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 => {
Expand All @@ -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.
Expand All @@ -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>
`;

Expand All @@ -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>
`;

Expand Down Expand Up @@ -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 = {
Expand Down
8 changes: 3 additions & 5 deletions src/components/menu/menu-link/menu-link.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
3 changes: 1 addition & 2 deletions src/components/menu/menu/menu.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion src/components/skiplink-list/skiplink-list.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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: {
Expand Down
Loading

0 comments on commit 679d9e9

Please sign in to comment.