From 14f0242fac61e5ed194c5be0a681f7998d296304 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliz=C3=A9=20Debray?= Date: Thu, 14 Nov 2024 14:45:30 +0100 Subject: [PATCH] feat(docs): add cargo theme --- .changeset/khaki-cougars-itch.md | 6 ++++++ .../addons/styles-switcher/StylesSwitcher.tsx | 17 ++--------------- .../.storybook/styles/preview.scss | 2 ++ packages/styles/src/cargo-external.scss | 7 +++++++ packages/styles/src/cargo-internal.scss | 7 +++++++ packages/styles/src/cargo-tokens-external.scss | 8 ++++++++ packages/styles/src/cargo-tokens-internal.scss | 8 ++++++++ packages/styles/src/post-external.scss | 5 ++++- packages/styles/src/post-internal.scss | 5 ++++- packages/styles/src/tokens/_cargo-theme.scss | 8 ++++++++ 10 files changed, 56 insertions(+), 17 deletions(-) create mode 100644 .changeset/khaki-cougars-itch.md create mode 100644 packages/styles/src/cargo-external.scss create mode 100644 packages/styles/src/cargo-internal.scss create mode 100644 packages/styles/src/cargo-tokens-external.scss create mode 100644 packages/styles/src/cargo-tokens-internal.scss create mode 100644 packages/styles/src/tokens/_cargo-theme.scss diff --git a/.changeset/khaki-cougars-itch.md b/.changeset/khaki-cougars-itch.md new file mode 100644 index 0000000000..cf48920dda --- /dev/null +++ b/.changeset/khaki-cougars-itch.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-styles': minor +'@swisspost/design-system-documentation': minor +--- + +Addes Cargo theme styles. diff --git a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx index 6b3ca6c08e..2980542b93 100644 --- a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx +++ b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { IconButton, WithTooltip } from '@storybook/components'; -const THEMES = ['Post'] as const; +const THEMES = ['Post', 'Cargo'] as const; const CHANNELS = ['External', 'Internal'] as const; const SCHEMES = ['Light', 'Dark'] as const; @@ -15,18 +15,6 @@ const possibleStylesheets = THEMES.flatMap(theme => { return CHANNELS.map(channel => getStylesheetUrl(theme, channel)); }); -/* - * Backgrounds - */ -const backgroundClasses: { [key in (typeof SCHEMES)[number]]: string } = { - Light: 'bg-white', - Dark: 'bg-dark', -}; -const getBackgroundClass = (scheme: string) => { - return scheme in backgroundClasses ? backgroundClasses[scheme] : ''; -}; -const possibleBackgrounds = SCHEMES.map(scheme => getBackgroundClass(scheme)); - /* * Local storage access */ @@ -113,9 +101,8 @@ function StylesSwitcher() { if (!stories) return; stories.forEach(story => { - story.classList.remove(...possibleBackgrounds); - story.classList.add(getBackgroundClass(currentScheme)); story.setAttribute('data-color-scheme', currentScheme.toLowerCase()); + if (!story.classList.contains('palette-default')) story.classList.add('palette-default'); }); }, [stories, currentScheme]); diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss index c5f0f5e49c..ae30b5f472 100644 --- a/packages/documentation/.storybook/styles/preview.scss +++ b/packages/documentation/.storybook/styles/preview.scss @@ -11,6 +11,8 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier #storybook-root, #storybook-docs { + background-color: white; + .sbdocs-content .container >, .sbdocs-content .container > post-tabs > post-tab-panel >, .sbdocs-content .container > migration-global-state { diff --git a/packages/styles/src/cargo-external.scss b/packages/styles/src/cargo-external.scss new file mode 100644 index 0000000000..845e06851a --- /dev/null +++ b/packages/styles/src/cargo-external.scss @@ -0,0 +1,7 @@ +@use './tokens/schemes'; +@use './tokens/device'; +@use './tokens/external'; +@use './tokens/cargo-theme'; +@use './utilities'; +@use './elements'; +@use './components'; diff --git a/packages/styles/src/cargo-internal.scss b/packages/styles/src/cargo-internal.scss new file mode 100644 index 0000000000..8a5de0f563 --- /dev/null +++ b/packages/styles/src/cargo-internal.scss @@ -0,0 +1,7 @@ +@use './tokens/schemes'; +@use './tokens/device'; +@use './tokens/internal'; +@use './tokens/cargo-theme'; +@use './utilities'; +@use './elements'; +@use './components'; diff --git a/packages/styles/src/cargo-tokens-external.scss b/packages/styles/src/cargo-tokens-external.scss new file mode 100644 index 0000000000..4e4f2e9932 --- /dev/null +++ b/packages/styles/src/cargo-tokens-external.scss @@ -0,0 +1,8 @@ +@use 'sass:meta'; + +@layer design-system { + @include meta.load-css('./tokens/schemes'); + @include meta.load-css('./tokens/device'); + @include meta.load-css('./tokens/external'); + @include meta.load-css('./tokens/cargo-theme'); +} diff --git a/packages/styles/src/cargo-tokens-internal.scss b/packages/styles/src/cargo-tokens-internal.scss new file mode 100644 index 0000000000..481b7091aa --- /dev/null +++ b/packages/styles/src/cargo-tokens-internal.scss @@ -0,0 +1,8 @@ +@use 'sass:meta'; + +@layer design-system { + @include meta.load-css('./tokens/schemes'); + @include meta.load-css('./tokens/device'); + @include meta.load-css('./tokens/internal'); + @include meta.load-css('./tokens/cargo-theme'); +} diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss index 87f2a3fa55..10e1746fa7 100644 --- a/packages/styles/src/post-external.scss +++ b/packages/styles/src/post-external.scss @@ -1,4 +1,7 @@ -@use './post-tokens-external'; +@use './tokens/schemes'; +@use './tokens/device'; +@use './tokens/external'; +@use './tokens/post-theme'; @use './utilities'; @use './elements'; @use './components'; diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss index 834c79f621..4e06884fe1 100644 --- a/packages/styles/src/post-internal.scss +++ b/packages/styles/src/post-internal.scss @@ -1,4 +1,7 @@ -@use './post-tokens-internal'; +@use './tokens/schemes'; +@use './tokens/device'; +@use './tokens/internal'; +@use './tokens/post-theme'; @use './utilities'; @use './elements'; @use './components'; diff --git a/packages/styles/src/tokens/_cargo-theme.scss b/packages/styles/src/tokens/_cargo-theme.scss new file mode 100644 index 0000000000..ee29dc4877 --- /dev/null +++ b/packages/styles/src/tokens/_cargo-theme.scss @@ -0,0 +1,8 @@ +@use './temp/theme' as themes; + +@use './core'; +@use './../mixins/tokens'; + +:root { + @include tokens.from(themes.$post-cargo); +}