From c5d042341ca329c487418e4e0c66f64c19ea2014 Mon Sep 17 00:00:00 2001 From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com> Date: Fri, 18 Oct 2024 15:21:53 +0200 Subject: [PATCH] chore(tokens): :art: update tokens (#3786) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Merge this PR to update the tokens in the main branch. --------- Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com> Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> Co-authored-by: Alizé Debray Co-authored-by: Oliver Schürch --- .github/workflows/build-tokens.yaml | 2 +- .../addons/styles-switcher/StylesSwitcher.tsx | 42 +- packages/documentation/.storybook/preview.ts | 4 +- .../.storybook/styles/preview.scss | 2 +- .../components/link/link.snapshot.stories.ts | 2 +- .../internet-header/internet-header.docs.mdx | 22 +- .../patterns/metadata/metadata.docs.mdx | 20 +- .../src/utils/codeOrSourceMdx.tsx | 4 +- packages/styles/src/placeholders/_modes.scss | 10 - .../styles/src/placeholders/_schemes.scss | 10 + packages/styles/src/post-tokens-external.scss | 2 +- packages/styles/src/post-tokens-internal.scss | 2 +- packages/styles/src/tokens/_modes.scss | 11 - packages/styles/src/tokens/_schemes.scss | 11 + .../tokens/tokensstudio-generated/tokens.json | 1991 +++++++++-------- pnpm-lock.yaml | 69 +- 16 files changed, 1139 insertions(+), 1065 deletions(-) delete mode 100644 packages/styles/src/placeholders/_modes.scss create mode 100644 packages/styles/src/placeholders/_schemes.scss delete mode 100644 packages/styles/src/tokens/_modes.scss create mode 100644 packages/styles/src/tokens/_schemes.scss diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml index c72c148e50..5bc19a4479 100644 --- 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 index adebf7a66d..6b3ca6c08e 100644 --- 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(stored('theme') || THEMES[0]); const [currentChannel, setCurrentChannel] = useState(stored('channel') || CHANNELS[0]); - const [currentMode, setCurrentMode] = useState(stored('mode') || MODES[0]); + const [currentScheme, setCurrentScheme] = useState(stored('scheme') || SCHEMES[0]); const [preview, setPreview] = useState(); const [stories, setStories] = useState>(); @@ -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() { - {/* Mode dropdown */} + {/* Scheme dropdown */} - {MODES.map(mode => ( + {SCHEMES.map(scheme => ( applyMode(mode)} + className={'addon-dropdown__item' + (scheme === currentScheme ? ' active' : '')} + key={scheme} + onClick={() => applyScheme(scheme)} > - {mode} + {scheme} ))} } > - Mode: {currentMode} + Color Scheme: {currentScheme} diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts index ba2aca3353..3f3c253f82 100644 --- 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 index 3cc1177fed..712fc0d078 100644 --- 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 index dfab463bd6..8c82117d55 100644 --- 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`
${bombArgs({ text: ['Link Text', 'Lorem ipsum dolor sit amet consectetur'], diff --git a/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx index b2b07858e8..58a59a05ea 100644 --- a/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx +++ b/packages/documentation/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'; @@ -75,9 +75,9 @@ Internet-header package provide two versions: When working with Angular or any other framework, the easiest installation method is via npm. - + - +
@@ -85,8 +85,8 @@ Internet-header package provide two versions:
Bare Component
-
-
+
+
@@ -107,8 +107,8 @@ Internet-header package provide two versions:
Bare Component
-
-
+
+
@@ -126,11 +126,11 @@ This stylesheet allows you to access CSS variables to implement styling relative Sass Import - + HTML Import - `} dark={SourceDarkMode} language="html" /> + `} dark={SourceDarkScheme} language="html" /> @@ -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: - + 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 `