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"