From 2a9efb2ebee4d7bbb11b5a50e70f95f573d16279 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Tue, 6 Jun 2023 09:35:13 +0200 Subject: [PATCH] [PM-2238] Add nord and solarize themes (#5491) --- .storybook/preview.tsx | 90 +++++++++++++++++++++++--- libs/components/src/stories/colors.mdx | 2 + libs/components/src/tw-theme.css | 78 ++++++++++++++++++++++ 3 files changed, 161 insertions(+), 9 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 86ab6ab374..d7d37a71e7 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -6,19 +6,91 @@ import docJson from "../documentation.json"; setCompodocJson(docJson); const decorator = componentWrapperDecorator( - (story) => ` - -
${story}
-
- -
${story}
-
- - ` + (story) => { + return ` + +
+ ${story} +
+
+ +
+ ${story} +
+
+ +
+ ${story} +
+
+ +
+ ${story} +
+
+ + + + + + `; + }, + ({ globals }) => { + return { theme: `${globals["theme"]}` }; + } ); const preview: Preview = { decorators: [decorator], + globalTypes: { + theme: { + description: "Global theme for components", + defaultValue: "both", + toolbar: { + title: "Theme", + icon: "circlehollow", + items: [ + { + title: "Light & Dark", + value: "both", + icon: "sidebyside", + }, + { + title: "Light", + value: "light", + icon: "sun", + }, + { + title: "Dark", + value: "dark", + icon: "moon", + }, + { + title: "Nord", + value: "nord", + left: "⛰", + }, + { + title: "Solarized", + value: "solarized", + left: "☯", + }, + ], + dynamicTitle: true, + }, + }, + }, parameters: { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { diff --git a/libs/components/src/stories/colors.mdx b/libs/components/src/stories/colors.mdx index d77c726b26..4fe5ad12ce 100644 --- a/libs/components/src/stories/colors.mdx +++ b/libs/components/src/stories/colors.mdx @@ -105,4 +105,6 @@ Below are all the permited colors. Please consult design before considering addi
+
+
diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css index ba4efe60e7..2a59fe2e93 100644 --- a/libs/components/src/tw-theme.css +++ b/libs/components/src/tw-theme.css @@ -80,4 +80,82 @@ --tw-ring-offset-color: #1f242e; } +.theme_nord { + --color-transparent-hover: rgb(255 255 255 / 0.12); + + --color-background: 67 76 94; + --color-background-alt: 59 66 82; + --color-background-alt2: 76 86 106; + --color-background-alt3: 76 86 106; + --color-background-alt4: 67 76 94; + + --color-primary-300: 108 153 166; + --color-primary-500: 136 192 208; + --color-primary-700: 160 224 242; + + --color-secondary-100: 76 86 106; + --color-secondary-300: 94 105 125; + --color-secondary-500: 216 222 233; + --color-secondary-700: 255 255 255; + + --color-success-500: 163 190 140; + --color-success-700: 144 170 122; + + --color-danger-500: 228 129 139; + --color-danger-700: 191 97 106; + + --color-warning-500: 235 203 139; + --color-warning-700: 210 181 121; + + --color-info-500: 129 161 193; + --color-info-700: 94 129 172; + + --color-text-main: 229 233 240; + --color-text-muted: 216 222 233; + --color-text-contrast: 46 52 64; + --color-text-alt2: 255 255 255; + --color-text-code: 219 177 211; + + --tw-ring-offset-color: #434c5e; +} + +.theme_solarized { + --color-transparent-hover: rgb(255 255 255 / 0.12); + + --color-background: 0 43 54; + --color-background-alt: 7 54 66; + --color-background-alt2: 31 72 87; + --color-background-alt3: 31 72 87; + --color-background-alt4: 0 43 54; + + --color-primary-300: 42 161 152; + --color-primary-500: 133 153 0; + --color-primary-700: 192 203 123; + + --color-secondary-100: 31 72 87; + --color-secondary-300: 101 123 131; + --color-secondary-500: 131 148 150; + --color-secondary-700: 238 232 213; + + --color-success-500: 133 153 0; + --color-success-700: 192 203 123; + + --color-danger-500: 220 50 47; + --color-danger-700: 223 135 134; + + --color-warning-500: 181 137 0; + --color-warning-700: 220 189 92; + + --color-info-500: 133 153 0; + --color-info-700: 192 203 123; + + --color-text-main: 253 246 227; + --color-text-muted: 147 161 161; + --color-text-contrast: 0 43 54; + --color-text-alt2: 255 255 255; + --color-text-code: 240 141 199; + + --tw-ring-offset-color: #002b36; +} + @import "./search/search.component.css";