chore(tokens): 🎨 update tokens (#3786)

Merge this PR to update the tokens in the main branch. --------- Co-authored-by: Travaglini Alessio <[email protected]> Co-authored-by: Alizé Debray <[email protected]> Co-authored-by: Alizé Debray <[email protected]> Co-authored-by: Oliver Schürch <[email protected]>
swisspost · Oct 18, 2024 · c5d0423 · c5d0423
1 parent 763096d
commit c5d0423
Show file tree

Hide file tree

Showing 16 changed files with 1,139 additions and 1,065 deletions.
diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml
@@ -40,7 +40,7 @@ jobs:
             const outputOrder = [
               'index.scss',
               'core.scss',
-              'mode.scss',
+              'scheme.scss',
               'device.scss',
               'channel.scss',
               'theme.scss',

diff --git a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
@@ -3,7 +3,7 @@ import { IconButton, WithTooltip } from '@storybook/components';
 
 const THEMES = ['Post'] as const;
 const CHANNELS = ['External', 'Internal'] as const;
-const MODES = ['Light', 'Dark'] as const;
+const SCHEMES = ['Light', 'Dark'] as const;
 
 /*
  * Stylesheets
@@ -18,14 +18,14 @@ const possibleStylesheets = THEMES.flatMap(theme => {
 /*
  * Backgrounds
  */
-const backgroundClasses: { [key in (typeof MODES)[number]]: string } = {
+const backgroundClasses: { [key in (typeof SCHEMES)[number]]: string } = {
   Light: 'bg-white',
   Dark: 'bg-dark',
 };
-const getBackgroundClass = (mode: string) => {
-  return mode in backgroundClasses ? backgroundClasses[mode] : '';
+const getBackgroundClass = (scheme: string) => {
+  return scheme in backgroundClasses ? backgroundClasses[scheme] : '';
 };
-const possibleBackgrounds = MODES.map(mode => getBackgroundClass(mode));
+const possibleBackgrounds = SCHEMES.map(scheme => getBackgroundClass(scheme));
 
 /*
  * Local storage access
@@ -56,7 +56,7 @@ function StylesSwitcher() {
 
   const [currentTheme, setCurrentTheme] = useState<string>(stored('theme') || THEMES[0]);
   const [currentChannel, setCurrentChannel] = useState<string>(stored('channel') || CHANNELS[0]);
-  const [currentMode, setCurrentMode] = useState<string>(stored('mode') || MODES[0]);
+  const [currentScheme, setCurrentScheme] = useState<string>(stored('scheme') || SCHEMES[0]);
 
   const [preview, setPreview] = useState<Document>();
   const [stories, setStories] = useState<NodeListOf<Element>>();
@@ -107,17 +107,17 @@ function StylesSwitcher() {
   }, [preview, currentTheme, currentChannel]);
 
   /**
-   * Sets the expected 'data-color-mode' attribute on all story containers when the mode changes
+   * Sets the expected 'data-color-scheme' attribute on all story containers when the scheme changes
    */
   useEffect(() => {
     if (!stories) return;
 
     stories.forEach(story => {
       story.classList.remove(...possibleBackgrounds);
-      story.classList.add(getBackgroundClass(currentMode));
-      story.setAttribute('data-color-mode', currentMode.toLowerCase());
+      story.classList.add(getBackgroundClass(currentScheme));
+      story.setAttribute('data-color-scheme', currentScheme.toLowerCase());
     });
-  }, [stories, currentMode]);
+  }, [stories, currentScheme]);
 
   /**
    * Applies selected theme and registers it to the local storage
@@ -136,11 +136,11 @@ function StylesSwitcher() {
   };
 
   /**
-   * Applies selected mode and registers it to the local storage
+   * Applies selected scheme and registers it to the local storage
    */
-  const applyMode = (mode: string) => {
-    store('mode', mode);
-    setCurrentMode(mode);
+  const applyScheme = (scheme: string) => {
+    store('scheme', scheme);
+    setCurrentScheme(scheme);
   };
 
   return (
@@ -193,27 +193,27 @@ function StylesSwitcher() {
         </IconButton>
       </WithTooltip>
 
-      {/* Mode dropdown */}
+      {/* Scheme dropdown */}
       <WithTooltip
         placement="bottom-end"
         trigger="click"
         closeOnOutsideClick
         tooltip={
           <div className="addon-dropdown">
-            {MODES.map(mode => (
+            {SCHEMES.map(scheme => (
               <IconButton
-                className={'addon-dropdown__item' + (mode === currentMode ? ' active' : '')}
-                key={mode}
-                onClick={() => applyMode(mode)}
+                className={'addon-dropdown__item' + (scheme === currentScheme ? ' active' : '')}
+                key={scheme}
+                onClick={() => applyScheme(scheme)}
               >
-                {mode}
+                {scheme}
               </IconButton>
             ))}
           </div>
         }
       >
         <IconButton className="addon-label" size="medium">
-          Mode: {currentMode}
+          Color Scheme: {currentScheme}
         </IconButton>
       </WithTooltip>
     </>

diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
@@ -18,7 +18,7 @@ import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
 
 SyntaxHighlighter.registerLanguage('scss', scss);
 
-export const SourceDarkMode = true;
+export const SourceDarkScheme = true;
 
 const preview: Preview = {
   decorators: [fullScreenUrlDecorator],
@@ -85,7 +85,7 @@ const preview: Preview = {
       },
       source: {
         excludeDecorators: true,
-        dark: SourceDarkMode,
+        dark: SourceDarkScheme,
         transform: (snippet: string) => format(snippet, prettierOptions),
       },
       components: resetComponents,

diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
@@ -170,7 +170,7 @@
   overflow-x: hidden;
 }
 
-.sbdocs-preview:not([data-color-mode]) {
+.sbdocs-preview:not([data-color-scheme]) {
   display: none;
 }
 

diff --git a/packages/documentation/src/stories/components/link/link.snapshot.stories.ts b/packages/documentation/src/stories/components/link/link.snapshot.stories.ts
@@ -20,7 +20,7 @@ export const Link: Story = {
           bg => html`
             <div
               class="${bg} d-flex flex-column gap-regular p-regular mt-regular"
-              data-color-mode="${bg === 'bg-white' ? 'light' : 'dark'}"
+              data-color-scheme="${bg === 'bg-white' ? 'light' : 'dark'}"
             >
               ${bombArgs({
                 text: ['Link Text', 'Lorem ipsum dolor sit amet consectetur'],

diff --git a/...n/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx b/...n/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx
@@ -10,7 +10,7 @@ import SampleInstall from './internet-header-install.sample.html?raw';
 import SampleFixAppStyles from './internet-header-fix-app-styles.sample.html?raw';
 import SampleOld from './internet-header-old.sample.html?raw';
 import * as GettingStartedStories from './internet-header.stories';
-import { SourceDarkMode } from '@/../.storybook/preview';
+import { SourceDarkScheme } from '@/../.storybook/preview';
 
 <Meta of={GettingStartedStories} />
 
@@ -75,18 +75,18 @@ Internet-header package provide two versions:
 
     When working with Angular or any other framework, the easiest installation method is via npm.
 
-    <Source code={`npm install @swisspost/internet-header`} dark={SourceDarkMode} language="bash" />
+    <Source code={`npm install @swisspost/internet-header`} dark={SourceDarkScheme} language="bash" />
 
-    <Source code={SampleFrameworks} dark={SourceDarkMode} language="html" />
+    <Source code={SampleFrameworks} dark={SourceDarkScheme} language="html" />
 
     <div>
       <div class="row mb-8">
         <div class="col-6 fw-bold">Lazy-Loaded</div>
         <div class="col-6 fw-bold">Bare Component</div>
       </div>
       <div class="row">
-        <div class="col-6"><Source code={SampleLazyLoaded} dark={SourceDarkMode} language="javascript" /></div>
-        <div class="col-6"><Source code={SampleBareComponent} dark={SourceDarkMode} language="javascript" /></div>
+        <div class="col-6"><Source code={SampleLazyLoaded} dark={SourceDarkScheme} language="javascript" /></div>
+        <div class="col-6"><Source code={SampleBareComponent} dark={SourceDarkScheme} language="javascript" /></div>
       </div>
     </div>
   </PostTabPanel>
@@ -107,8 +107,8 @@ Internet-header package provide two versions:
         <div class="col-6 fw-bold">Bare Component</div>
       </div>
       <div class="row">
-        <div class="col-6"><Source code={SampleCDNLazyLoaded} dark={SourceDarkMode} language="html" /></div>
-        <div class="col-6"><Source code={SampleCDNBareComponent} dark={SourceDarkMode} language="html" /></div>
+        <div class="col-6"><Source code={SampleCDNLazyLoaded} dark={SourceDarkScheme} language="html" /></div>
+        <div class="col-6"><Source code={SampleCDNBareComponent} dark={SourceDarkScheme} language="html" /></div>
       </div>
     </div>
   </PostTabPanel>
@@ -126,11 +126,11 @@ This stylesheet allows you to access CSS variables to implement styling relative
 <PostTabs>
   <PostTabHeader panel="sass-import">Sass Import</PostTabHeader>
   <PostTabPanel name="sass-import">
-    <Source code={`@use "@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css";`} dark={SourceDarkMode} language="scss" />
+    <Source code={`@use "@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css";`} dark={SourceDarkScheme} language="scss" />
   </PostTabPanel>
   <PostTabHeader panel="html-import">HTML Import</PostTabHeader>
   <PostTabPanel name="html-import">
-    <Source code={`<link rel="stylesheet" href="@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css"/>`} dark={SourceDarkMode} language="html" />
+    <Source code={`<link rel="stylesheet" href="@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css"/>`} dark={SourceDarkScheme} language="html" />
   </PostTabPanel>
 </PostTabs>
 
@@ -201,7 +201,7 @@ Please refer to the [Internet Header installation instructions](/?path=/docs/9b0
 
 After installation, you're ready to add the new tags to your markup:
 
-<Source code={SampleInstall} dark={SourceDarkMode} language="html" />
+<Source code={SampleInstall} dark={SourceDarkScheme} language="html" />
 
 Place the new elements as described (and needed) as shown above.
 The breadcrumbs need a `container` wrapper to align themselves with the content of your page,
@@ -212,6 +212,6 @@ If you don't have breadcrumbs, you can just delete the `<aside>` and the `<swiss
 
 If you need to change settings during runtime, you can get a reference to the header by querying:
 
-<Source code={SampleReference} dark={SourceDarkMode} language="typescript" />
+<Source code={SampleReference} dark={SourceDarkScheme} language="typescript" />
 
 At the [Internet Header configuration page](/?path=/docs/ebb11274-091b-4cb7-9a3f-3e0451c9a865--docs) you can find a list of possible options.
diff --git a/packages/documentation/src/stories/patterns/metadata/metadata.docs.mdx b/packages/documentation/src/stories/patterns/metadata/metadata.docs.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from '@storybook/blocks';
 import METADATA_SNIPPETS, {METADATA_OPEN_GRAPH_SNIPPET , METADATA_COMBINED_SNIPPET} from './metadata.sample';
 import MetadataStories from './metadata.stories';
-import { SourceDarkMode } from '@/../.storybook/preview';
+import { SourceDarkScheme } from '@/../.storybook/preview';
 
 <Meta of={MetadataStories} />
 
@@ -17,19 +17,19 @@ On this page you will find links to other pages that explain some of those names
     - [General attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attributes)
     - [Standard names](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name)
 
-<Source code={METADATA_SNIPPETS.general} dark={SourceDarkMode} language="html" />
+<Source code={METADATA_SNIPPETS.general} dark={SourceDarkScheme} language="html" />
 
 ## Viewport
 
 This meta-tag can be used to manipulate the size and shape of the viewport. [More information](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag)
 
-<Source code={METADATA_SNIPPETS.viewport} dark={SourceDarkMode} language="html" />
+<Source code={METADATA_SNIPPETS.viewport} dark={SourceDarkScheme} language="html" />
 
 ## Search engines
 
 There are some meta-tags that change the way search engines or google in particular treat the website. [More information](https://developers.google.com/search/docs/crawling-indexing/special-tags?hl=en)
 
-<Source code={METADATA_SNIPPETS.searchEngines} dark={SourceDarkMode} language="html" />
+<Source code={METADATA_SNIPPETS.searchEngines} dark={SourceDarkScheme} language="html" />
 
 ## Open Graph Tags
 
@@ -41,21 +41,21 @@ To use open grah tags you should put `prefix="og: http://ogp.me/ns#"` as attribu
 - Open Graph Tags explained by [open graph](https://ogp.me/)
 - Cards and Open Graph Tags explained by [X](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started)
 
-<Source code={METADATA_OPEN_GRAPH_SNIPPET} dark={SourceDarkMode} language="html" />
+<Source code={METADATA_OPEN_GRAPH_SNIPPET} dark={SourceDarkScheme} language="html" />
 
 ## Favicon
 
 The favicon is the little icon that is displayed on tabs in webbowsers. You can see it as the program icon of a website.
 [More information](https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7)
 
-<Source code={METADATA_SNIPPETS.favicon} dark={SourceDarkMode} language="html" />
+<Source code={METADATA_SNIPPETS.favicon} dark={SourceDarkScheme} language="html" />
 
 ## Language
 
-There is the possibility to provide a specific page in different languages using metadata. The page specififed with `hreflang="x-default"` is the page that will match for any language that is not specified in any `hreflang` attribute on this page. 
+There is the possibility to provide a specific page in different languages using metadata. The page specififed with `hreflang="x-default"` is the page that will match for any language that is not specified in any `hreflang` attribute on this page.
 Please note that the current page and its language alternatives must be listed on each of this pages. [More information](https://developers.google.com/search/docs/specialty/international/localized-versions)
 
-<Source code={METADATA_SNIPPETS.language} dark={SourceDarkMode} language="html" />
+<Source code={METADATA_SNIPPETS.language} dark={SourceDarkScheme} language="html" />
 
 ## Content Security Policy
 
@@ -66,10 +66,10 @@ In that case it must be the first meta-tag in the header.
 - [More in depth information](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)
 - [Impementation notes and examples](https://infosec.mozilla.org/guidelines/web_security#content-security-policy)
 
-<Source code={METADATA_SNIPPETS.cors} dark={SourceDarkMode} language="html" />
+<Source code={METADATA_SNIPPETS.cors} dark={SourceDarkScheme} language="html" />
 
 ## Example
 
 This is how metadata of a webpage called "Metadata Example" could look like.
 
-<Source code={METADATA_COMBINED_SNIPPET} dark={SourceDarkMode} language="html" />
+<Source code={METADATA_COMBINED_SNIPPET} dark={SourceDarkScheme} language="html" />
diff --git a/packages/documentation/src/utils/codeOrSourceMdx.tsx b/packages/documentation/src/utils/codeOrSourceMdx.tsx
@@ -1,7 +1,7 @@
 // Source: https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/blocks/mdx.tsx#L34
 import { Source } from '@storybook/blocks';
 import { Code } from '@storybook/components';
-import { SourceDarkMode } from '@/../.storybook/preview';
+import { SourceDarkScheme } from '@/../.storybook/preview';
 
 /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
 // @ts-ignore
@@ -19,7 +19,7 @@ export const CodeOrSourceMdx = ({ className, children, ...rest }) => {
     <Source
       language={(language && language[1]) || 'plaintext'}
       format={false}
-      dark={SourceDarkMode}
+      dark={SourceDarkScheme}
       code={children as string}
       {...rest}
     />

diff --git a/packages/styles/src/placeholders/_modes.scss b/packages/styles/src/placeholders/_modes.scss
diff --git a/packages/styles/src/placeholders/_schemes.scss b/packages/styles/src/placeholders/_schemes.scss
@@ -0,0 +1,10 @@
+@use '../tokens/temp/scheme';
+@use './../mixins/tokens';
+
+%color-scheme-light {
+  @include tokens.from(scheme.$post-light);
+}
+
+%color-scheme-dark {
+  @include tokens.from(scheme.$post-dark);
+}
diff --git a/packages/styles/src/post-tokens-external.scss b/packages/styles/src/post-tokens-external.scss
@@ -1,7 +1,7 @@
 @use 'sass:meta';
 
 @layer design-system {
-  @include meta.load-css('./tokens/modes');
+  @include meta.load-css('./tokens/schemes');
   @include meta.load-css('./tokens/device');
   @include meta.load-css('./tokens/external');
   @include meta.load-css('./tokens/post-theme');

diff --git a/packages/styles/src/post-tokens-internal.scss b/packages/styles/src/post-tokens-internal.scss
@@ -1,7 +1,7 @@
 @use 'sass:meta';
 
 @layer design-system {
-  @include meta.load-css('./tokens/modes');
+  @include meta.load-css('./tokens/schemes');
   @include meta.load-css('./tokens/device');
   @include meta.load-css('./tokens/internal');
   @include meta.load-css('./tokens/post-theme');

diff --git a/packages/styles/src/tokens/_modes.scss b/packages/styles/src/tokens/_modes.scss
diff --git a/packages/styles/src/tokens/_schemes.scss b/packages/styles/src/tokens/_schemes.scss
@@ -0,0 +1,11 @@
+@use './core';
+@use '../placeholders/schemes';
+
+:root,
+[data-color-scheme='light'] {
+  @extend %color-scheme-light;
+}
+
+[data-color-scheme='dark'] {
+  @extend %color-scheme-dark;
+}