Add theme toggle

.storybook/main.js

@@ -29,6 +29,7 @@ module.exports = {
     '@storybook/addon-viewport',
     '@storybook/addon-backgrounds',
     '@storybook/addon-interactions',
+    'storybook-stylesheet-toggle',
   ],
   features: {
     postcss: false,

.storybook/preview.js

@@ -74,6 +74,15 @@ export const parameters = {
     storySort: sortStories(SORT_ORDER),
   },
   docs: { theme, components },
+  stylesheetToggle: {
+    stylesheets: [
+      {
+        id: 'blue',
+        title: 'Current',
+        url: 'theme/blue.css',
+      },
+    ],
+  },
 };
 
 const withUnmountWhenHidden = (Story, context) => {

.storybook/public/theme/blue.css

@@ -0,0 +1,151 @@
+html {
+  /* Neutral backgrounds */
+  --cui-bg-normal: #ffffff;
+  --cui-bg-normal-hovered: #f5f5f5;
+  --cui-bg-normal-pressed: #e6e6e6;
+  --cui-bg-normal-disabled: rgba(255, 255, 255, 0.4);
+  --cui-bg-subtle: #f5f5f5;
+  --cui-bg-subtle-hovered: #e6e6e6;
+  --cui-bg-subtle-pressed: #cccccc;
+  --cui-bg-subtle-disabled: rgba(245, 245, 245, 0.4);
+  --cui-bg-highlight: #e6e6e6;
+  --cui-bg-highlight-hovered: #cccccc;
+  --cui-bg-highlight-pressed: #999999;
+  --cui-bg-highlight-disabled: rgba(230, 230, 230, 0.4);
+  --cui-bg-strong: #000000;
+  --cui-bg-strong-hovered: #000000;
+  --cui-bg-strong-pressed: #000000;
+  --cui-bg-strong-disabled: rgba(0, 0, 0, 0.4);
+  /* Accent backgrounds */
+  --cui-bg-accent: #ebf4ff;
+  --cui-bg-accent-hovered: #dbe9ff;
+  --cui-bg-accent-pressed: #c7dbff;
+  --cui-bg-accent-disabled: rgba(235, 244, 255, 0.4);
+  --cui-bg-accent-strong: #3064e3;
+  --cui-bg-accent-strong-hovered: #1c51d3;
+  --cui-bg-accent-strong-pressed: #10399e;
+  --cui-bg-accent-strong-disabled: rgba(48, 100, 227, 0.4);
+  /* Success backgrounds */
+  --cui-bg-success: #e9fbe9;
+  --cui-bg-success-hovered: #d7f8d7;
+  --cui-bg-success-pressed: #c1e8c1;
+  --cui-bg-success-disabled: rgba(193, 232, 193, 0.4);
+  --cui-bg-success-strong: #018850;
+  --cui-bg-success-strong-hovered: #007a4e;
+  --cui-bg-success-strong-pressed: #016c26;
+  --cui-bg-success-strong-disabled: rgba(1, 135, 48, 0.4);
+  /* Warning backgrounds */
+  --cui-bg-warning: #fdf4db;
+  --cui-bg-warning-hovered: #faeec6;
+  --cui-bg-warning-pressed: #f5dea3;
+  --cui-bg-warning-disabled: rgba(245, 222, 163, 0.4);
+  --cui-bg-warning-strong: #e87c00;
+  --cui-bg-warning-strong-hovered: #cc6d00;
+  --cui-bg-warning-strong-pressed: #b25c00;
+  --cui-bg-warning-strong-disabled: rgba(232, 124, 0, 0.4);
+  /* Danger backgrounds */
+  --cui-bg-danger: #b25c00;
+  --cui-bg-danger-hovered: #fcddd9;
+  --cui-bg-danger-pressed: #f7ccc7;
+  --cui-bg-danger-disabled: rgba(247, 204, 199, 0.4);
+  --cui-bg-danger-strong: #de331d;
+  --cui-bg-danger-strong-hovered: #bd2c19;
+  --cui-bg-danger-strong-pressed: #9e2415;
+  --cui-bg-danger-strong-disabled: rgba(222, 51, 29, 0.4);
+  /* Promo backgrounds */
+  --cui-bg-promo: #f5edfe;
+  --cui-bg-promo-hovered: #ede0fc;
+  --cui-bg-promo-pressed: #e0c9f8;
+  --cui-bg-promo-disabled: rgba(224, 201, 248, 0.4);
+  --cui-bg-promo-strong: #9e33e0;
+  --cui-bg-promo-strong-hovered: #8a1ecc;
+  --cui-bg-promo-strong-pressed: #7219a9;
+  --cui-bg-promo-strong-disabled: rgba(149, 53, 208, 0.4);
+  /* Neutral foregrounds */
+  --cui-fg-normal: #1a1a1a;
+  --cui-fg-normal-hovered: #1a1a1a;
+  --cui-fg-normal-pressed: #1a1a1a;
+  --cui-fg-normal-disabled: rgba(26, 26, 26, 0.4);
+  --cui-fg-subtle: #666666;
+  --cui-fg-subtle-hovered: #333333;
+  --cui-fg-subtle-pressed: #1a1a1a;
+  --cui-fg-subtle-disabled: rgba(102, 102, 102, 0.4);
+  --cui-fg-placeholder: #999999;
+  --cui-fg-placeholder-hovered: #999999;
+  --cui-fg-placeholder-pressed: #999999;
+  --cui-fg-placeholder-disabled: rgba(153, 153, 153, 0.4);
+  --cui-fg-on-strong: #ffffff;
+  --cui-fg-on-strong-hovered: #ffffff;
+  --cui-fg-on-strong-pressed: #ffffff;
+  --cui-fg-on-strong-disabled: rgba(255, 255, 255, 0.4);
+  /* Accent foregrounds */
+  --cui-fg-accent: #3064e3;
+  --cui-fg-accent-hovered: #1c51d3;
+  --cui-fg-accent-pressed: #10399e;
+  --cui-fg-accent-disabled: rgba(48, 100, 227, 0.4);
+  /* Success foregrounds */
+  --cui-fg-success: #018850;
+  --cui-fg-success-hovered: #007a4e;
+  --cui-fg-success-pressed: #016c26;
+  --cui-fg-success-disabled: rgba(1, 135, 48, 0.4);
+  /* Warning foregrounds */
+  --cui-fg-warning: #e27900;
+  --cui-fg-warning-hovered: #cc6d00;
+  --cui-fg-warning-pressed: #b25c00;
+  --cui-fg-warning-disabled: rgba(232, 124, 0, 0.4);
+  /* Danger foregrounds */
+  --cui-fg-danger: #de331d;
+  --cui-fg-danger-hovered: #bd2c19;
+  --cui-fg-danger-pressed: #9e2415;
+  --cui-fg-danger-disabled: rgba(222, 51, 29, 0.4);
+  /* Promo foregrounds */
+  --cui-fg-promo: #9e33e0;
+  --cui-fg-promo-hovered: #8a1ecc;
+  --cui-fg-promo-pressed: #7219a9;
+  --cui-fg-promo-disabled: rgba(149, 53, 208, 0.4);
+  /* Neutral borders */
+  --cui-border-normal: #cccccc;
+  --cui-border-normal-hovered: #999999;
+  --cui-border-normal-pressed: #666666;
+  --cui-border-normal-disabled: rgba(204, 204, 204, 0.4);
+  --cui-border-subtle: #e6e6e6;
+  --cui-border-subtle-hovered: #cccccc;
+  --cui-border-subtle-pressed: #999999;
+  --cui-border-subtle-disabled: rgba(230, 230, 230, 0.4);
+  --cui-border-divider: #cccccc;
+  --cui-border-divider-hovered: #999999;
+  --cui-border-divider-pressed: #666666;
+  --cui-border-divider-disabled: rgba(204, 204, 204, 0.4);
+  --cui-border-strong: #1a1a1a;
+  --cui-border-strong-hovered: #000000;
+  --cui-border-strong-pressed: #000000;
+  --cui-border-strong-disabled: rgba(0, 0, 0, 0.4);
+  /* Accent borders */
+  --cui-border-accent: #3064e3;
+  --cui-border-accent-hovered: #1c51d3;
+  --cui-border-accent-pressed: #10399e;
+  --cui-border-accent-disabled: rgba(48, 100, 227, 0.4);
+  /* Success borders */
+  --cui-border-success: #018850;
+  --cui-border-success-hovered: #007a4e;
+  --cui-border-success-pressed: #016c26;
+  --cui-border-success-disabled: rgba(1, 135, 48, 0.4);
+  /* Warning borders */
+  --cui-border-warning: #e87c00;
+  --cui-border-warning-hovered: #cc6d00;
+  --cui-border-warning-pressed: #b25c00;
+  --cui-border-warning-disabled: rgba(232, 124, 0, 0.4);
+  /* Danger borders */
+  --cui-border-danger: #de331d;
+  --cui-border-danger-hovered: #bd2c19;
+  --cui-border-danger-pressed: #9e2415;
+  --cui-border-danger-disabled: rgba(222, 51, 29, 0.4);
+  /* Promo borders */
+  --cui-border-promo: #9e33e0;
+  --cui-border-promo-hovered: #8a1ecc;
+  --cui-border-promo-pressed: #7219a9;
+  --cui-border-promo-disabled: rgba(149, 53, 208, 0.4);
+  /* Special colors */
+  --cui-bg-overlay: rgba(0, 0, 0, 0.4);
+  --cui-border-focus: #ebf4ff;
+}

package.json

@@ -60,8 +60,8 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.13",
     "@sumup/foundry": "^5.1.0",
-    "@types/node": "^18.11.19",
     "@types/jest": "^29.4.0",
+    "@types/node": "^18.11.19",
     "audit-ci": "^6.6.1",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^29.4.1",
@@ -78,6 +78,7 @@
     "license-checker": "^25.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "storybook-stylesheet-toggle": "^0.1.3",
     "svgo": "^3.0.2",
     "typescript": "^4.9.5",
     "webpack": "^5.75.0"

yarn.lock

@@ -16644,6 +16644,11 @@ store2@^2.12.0:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.12.0.tgz#e1f1b7e1a59b6083b2596a8d067f6ee88fd4d3cf"
   integrity sha512-7t+/wpKLanLzSnQPX8WAcuLCCeuSHoWdQuh9SB3xD0kNOM38DNf+0Oa+wmvxmYueRzkmh6IcdKFtvTa+ecgPDw==
 
+storybook-stylesheet-toggle@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/storybook-stylesheet-toggle/-/storybook-stylesheet-toggle-0.1.3.tgz#e8b6226ae3617d57e306c2675df8c50f3f36db3b"
+  integrity sha512-yxpBbg985fXkv5Y+INO943DpFOWFRePY6vt2ENfKkzp94A/Bmm6/XXz+ybQQSunHP9ziQffVuV8JD8tYAx6wsg==
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"