fix: adapt lyne tokens change (#2582)

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.5.0",
+    "@sbb-esta/lyne-design-tokens": "0.6.0",
     "@storybook/addon-a11y": "8.0.8",
     "@storybook/addon-actions": "8.0.8",
     "@storybook/addon-essentials": "8.0.8",

src/components/core/styles/_index.scss

@@ -1,13 +1,12 @@
-@forward './core/font-face';
 @forward './core/functions';
 @forward './core/mediaqueries';
-@forward './core/variables';
 
 @forward './mixins/a11y';
 @forward './mixins/badge';
 @forward './mixins/buttons';
 @forward './mixins/card';
 @forward './mixins/chip';
+@forward './mixins/font-face';
 @forward './mixins/helpers';
 @forward './mixins/inputs';
 @forward './mixins/layout';

src/components/core/styles/fullfont.scss

@@ -1,3 +1,3 @@
-@use './core/font-face';
+@use './mixins/font-face';
 
 @include font-face.font-declarations-full;

src/components/core/styles/global.scss

@@ -1,9 +1,40 @@
+@use 'node_modules/@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables_css--mixin.scss' as
+  sbb-css-tokens;
 @use './_index' as sbb;
 @use './normalize';
 @use './typography';
+@use './core/mediaqueries';
+@use './core/functions';
 
 // Core variables, are always needed
 :root {
-  // Core variables for :root context
-  @include sbb.lyne-components-css-vars;
+  // Grab css vars defined by `@sbb-esta/lyne-design-tokens` package
+  @include sbb-css-tokens.lyne-design-tokens-css-variables;
+
+  // Train formation
+  --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
+  --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
+  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
+  --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
+
+  // Header
+  --sbb-header-height: var(--sbb-spacing-fixed-14x);
+
+  // Time Input
+  --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+
+  // Overlay
+  --sbb-overlay-default-z-index: 1000;
+
+  // Infinity border radius, can be used to achieve rounded border on start and end
+  // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
+  --sbb-border-radius-infinity: 10000000em;
+
+  @include mediaqueries.mq($from: medium) {
+    // Header
+    --sbb-header-height: var(--sbb-spacing-fixed-24x);
+
+    // Time Input
+    --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+  }
 }

src/components/core/styles/typography.scss

@@ -1,4 +1,4 @@
-@use './core/font-face';
+@use './mixins/font-face';
 @use './mixins/a11y';
 @use './mixins/layout';
 @use './mixins/lists';

tools/vite/copy-sass.ts

@@ -22,15 +22,15 @@ export function copySass(sassRoot: string): PluginOption {
           type: 'asset',
           fileName: file,
           source: readFileSync(join(viteConfig.root, file), 'utf8').replace(
-            /@use '(node_modules\/[^']+)'/g,
-            (_m, useFile: string) => {
+            /(@use|@import) '(node_modules\/[^']+)'/g,
+            (_m, useOrImport, useFile: string) => {
               const outFile = join(sassRoot, useFile.replaceAll('/', '_'));
               this.emitFile({
                 type: 'asset',
                 fileName: outFile,
                 source: readFileSync(new URL(useFile, root), 'utf8'),
               });
-              return `@use '${relative(dirname(file), outFile)}'`;
+              return `${useOrImport} '${relative(dirname(file), outFile)}'`;
             },
           ),
         });

yarn.lock

@@ -1979,10 +1979,10 @@
     argparse "~1.0.9"
     string-argv "~0.3.1"
 
-"@sbb-esta/lyne-design-tokens@0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@sbb-esta/lyne-design-tokens/-/lyne-design-tokens-0.5.0.tgz#13384cf5496a1512d20fe6eed70454e1ebd919a6"
-  integrity sha512-WKzoxM3HzBoFrqUsNUF1rFAvut5PVb3qyN/IxFUNzjrNZTvlYEeXU4pNQJM+KQtt4t4iJmKEytBifF0MiLfRow==
+"@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==
 
 "@sinclair/typebox@^0.27.8":
   version "0.27.8"