feat(docs): add cargo theme (#3993)

This PR add style indexes for Cargo internal and external and allows to
use them in the documentation.

.changeset/khaki-cougars-itch.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Addes Cargo theme styles.

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]);
 

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 {

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';

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';

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');
+}

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');
+}

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';

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';

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);
+}