From 7c07913aa6091df836a4f5429e06b8d601a37463 Mon Sep 17 00:00:00 2001 From: ludwiczakpawel Date: Fri, 14 Jan 2022 11:06:42 +0100 Subject: [PATCH] Storybook improvements (#15860) * storybook backgrounds * variables for background * converting colors scss to css * prepare for theming * themes * Update app/javascript/.storybook/preview.js Co-authored-by: Suzanne Aitchison * restart * restart Co-authored-by: Suzanne Aitchison --- .../config/{_colors.scss => _colors.css} | 180 +++++++++--------- .../themes/{dark.scss => dark.css} | 149 ++++++++------- app/javascript/.storybook/main.js | 2 + app/javascript/.storybook/manager.js | 11 -- app/javascript/.storybook/preview.js | 104 +++------- app/javascript/.storybook/storybook.scss | 7 +- .../__stories__/Writing-css.stories.mdx | 4 +- package.json | 2 + yarn.lock | 35 ++++ 9 files changed, 237 insertions(+), 257 deletions(-) rename app/assets/stylesheets/config/{_colors.scss => _colors.css} (69%) rename app/assets/stylesheets/themes/{dark.scss => dark.css} (72%) delete mode 100644 app/javascript/.storybook/manager.js diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.css similarity index 69% rename from app/assets/stylesheets/config/_colors.scss rename to app/assets/stylesheets/config/_colors.css index c784e0511..6051fcc18 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/app/assets/stylesheets/config/_colors.css @@ -1,18 +1,19 @@ -//////////////////////////////////////////////////////////////////////////////////// -// Colors. ///////////////////////////////////////////////////////////////////////// -//////////////////////////////////////////////////////////////////////////////////// -// -// All --base-* and --accent-* color variables will be used to generate -// Utility-First Classes/ (see config/import.scss & base/colors.scss for -// reference). Other color variables are more functional and define usage -// of particular colors in components and views. +/*********************************************** +** Colors. ************************************* +************************************************ +/* +All --base-* and --accent-* color variables will be used to generate +Utility-First Classes/ (see config/import.scss & base/colors.scss for +reference). Other color variables are more functional and define usage +of particular colors in components and views. +*/ :root { - //////////////////////////////////////////////////////////////////////////////////// - // Fundamental color variables. /////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////////////// + /*********************************************** + ** Fundamental color variables. **************** + ***********************************************/ - // Base + /* Base */ --base: #090909; --base-inverted: #fff; @@ -28,62 +29,61 @@ --base-10: #efefef; --base-0: #f9f9f9; - --base-a90: #{rgba(#090909, 0.9)}; - --base-a80: #{rgba(#090909, 0.8)}; - --base-a70: #{rgba(#090909, 0.7)}; - --base-a60: #{rgba(#090909, 0.6)}; - --base-a50: #{rgba(#090909, 0.5)}; - --base-a40: #{rgba(#090909, 0.4)}; - --base-a30: #{rgba(#090909, 0.3)}; - --base-a20: #{rgba(#090909, 0.2)}; - --base-a10: #{rgba(#090909, 0.1)}; - --base-a5: #{rgba(#090909, 0.05)}; + --base-a90: rgba(9, 9, 9, 0.9); + --base-a80: rgba(9, 9, 9, 0.8); + --base-a70: rgba(9, 9, 9, 0.7); + --base-a60: rgba(9, 9, 9, 0.6); + --base-a50: rgba(9, 9, 9, 0.5); + --base-a40: rgba(9, 9, 9, 0.4); + --base-a30: rgba(9, 9, 9, 0.3); + --base-a20: rgba(9, 9, 9, 0.2); + --base-a10: rgba(9, 9, 9, 0.1); + --base-a5: rgba(9, 9, 9, 0.05); - --base-inverted-a90: #{rgba(#fff, 0.9)}; - --base-inverted-a80: #{rgba(#fff, 0.8)}; - --base-inverted-a70: #{rgba(#fff, 0.7)}; - --base-inverted-a60: #{rgba(#fff, 0.6)}; - --base-inverted-a50: #{rgba(#fff, 0.5)}; - --base-inverted-a40: #{rgba(#fff, 0.4)}; - --base-inverted-a30: #{rgba(#fff, 0.3)}; - --base-inverted-a20: #{rgba(#fff, 0.2)}; - --base-inverted-a10: #{rgba(#fff, 0.1)}; - --base-inverted-a5: #{rgba(#fff, 0.05)}; + --base-inverted-a90: rgba(255, 255, 255, 0.9); + --base-inverted-a80: rgba(255, 255, 255, 0.8); + --base-inverted-a70: rgba(255, 255, 255, 0.7); + --base-inverted-a60: rgba(255, 255, 255, 0.6); + --base-inverted-a50: rgba(255, 255, 255, 0.5); + --base-inverted-a40: rgba(255, 255, 255, 0.4); + --base-inverted-a30: rgba(255, 255, 255, 0.3); + --base-inverted-a20: rgba(255, 255, 255, 0.2); + --base-inverted-a10: rgba(255, 255, 255, 0.1); + --base-inverted-a5: rgba(255, 255, 255, 0.05); - // Accent colors + /* Accent colors */ --accent-brand: #3b49df; --accent-brand-darker: #1827ce; --accent-brand-lighter: #8d95f2; - --accent-brand-a10: #{rgba(#3b49df, 0.1)}; + --accent-brand-a10: rgba(59, 73, 223, 0.1); - // Success + /* Success */ --accent-success: #26d9ca; --accent-success-darker: #1ab3a6; --accent-success-lighter: #79ece2; - --accent-success-a10: #{rgba(#26d9ca, 0.1)}; + --accent-success-a10: rgba(38, 217, 202, 0.1); - // Warning + /* Warning */ --accent-warning: #ffcf4c; --accent-warning-darker: #f5b400; --accent-warning-lighter: #ffe499; - --accent-warning-a10: #{rgba(#ffcf4c, 0.1)}; + --accent-warning-a10: rgba(255, 207, 76, 0.1); - // Danger + /* Danger */ --accent-danger: #d31616; --accent-danger-darker: #b90909; --accent-danger-lighter: #ec4646; - --accent-danger-a10: #{rgba(#dc1818, 0.1)}; + --accent-danger-a10: rgba(211, 22, 22, 0.1); - //////////////////////////////////////////////////////////////////////////////////// - // Functional color variables. ///////////////////////////////////////////////////// - //////////////////////////////////////////////////////////////////////////////////// + /*********************************************** + ** Functional color variables. ***************** + ***********************************************/ - // Main colors --body-bg: var(--base-10); --body-color: var(--base-100); --body-color-inverted: var(--base-inverted); - // Main content containers + /* Main content containers */ --card-bg: var(--base-inverted); --card-color: var(--base-100); --card-color-secondary: var(--base-70); @@ -96,15 +96,15 @@ --card-hover-bg: var(--base-10); --card-selected-bg: var(--base-20); - // Header + /* Header */ --header-bg: var(--base-inverted); --header-shadow: rgba(0, 0, 0, 0.1); - // Footer + /* Footer */ --footer-bg: var(--base-20); --footer-color: var(--base-80); - // Links + /* Links */ --link-bg-hover-alt: var(--base-inverted); --link-brand-color: var(--accent-brand); --link-color-current: var(--base-100); @@ -112,36 +112,36 @@ --link-color-secondary-hover: var(--base-70); --link-bg-current: var(--base-inverted); - // Primary buttons + /* Primary buttons */ --button-primary-bg: var(--accent-brand); --button-primary-bg-hover: var(--accent-brand-darker); --button-primary-color: var(--base-0); --button-primary-color-hover: var(--base-0); - //-- Inverted + /* //-- Inverted */ --button-primary-inverted-bg: var(--accent-brand); --button-primary-inverted-bg-hover: var(--accent-brand-darker); --button-primary-inverted-color: var(--base-0); --button-primary-inverted-color-hover: var(--base-0); - // Secondary buttons + /* Secondary buttons */ --button-secondary-bg: var(--base-20); --button-secondary-bg-hover: var(--base-30); --button-secondary-color: var(--base-80); --button-secondary-color-hover: var(--base-100); - //-- Inverted + /* //-- Inverted */ --button-secondary-inverted-bg: var(--base-70); --button-secondary-inverted-bg-hover: var(--base-60); --button-secondary-inverted-color: var(--base-10); --button-secondary-inverted-color-hover: var(--base-0); - // Outlined buttons + /* Outlined buttons */ --button-outlined-bg: transparent; --button-outlined-bg-hover: rgba(0, 0, 0, 0.035); --button-outlined-border: var(--base-20); --button-outlined-border-hover: var(--base-40); --button-outlined-color: var(--base-80); --button-outlined-color-hover: var(--base-100); - //-- Inverted + /* //-- Inverted */ --button-outlined-inverted-bg: transparent; --button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15); --button-outlined-inverted-border: var(--base-60); @@ -149,14 +149,14 @@ --button-outlined-inverted-color: var(--base-30); --button-outlined-inverted-color-hover: var(--base-10); - // Ghost buttons + /* Ghost buttons */ --button-ghost-bg: transparent; --button-ghost-bg-hover: rgba(0, 0, 0, 0.035); --button-ghost-color: var(--base-80); --button-ghost-color-hover: var(--base-100); --button-ghost-dimmed-color: var(--base-60); --button-ghost-dimmed-color-hover: var(--base-100); - //-- Inverted + /* //-- Inverted */ --button-ghost-inverted-bg: transparent; --button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15); --button-ghost-inverted-color: var(--base-30); @@ -164,7 +164,7 @@ --button-ghost-dimmed-inverted-color: var(--base-50); --button-ghost-dimmed-inverted-color-hover: var(--base-100); - // Forms + /* Forms */ --form-bg: var(--base-inverted); --form-bg-focus: var(--base-inverted); --form-border: var(--base-20); @@ -172,15 +172,15 @@ --form-border-focus: var(--accent-brand); --form-placeholder-color: var(--base-60); - // Form labels + /* Form labels */ --label-primary: var(--base-90); --label-secondary: var(--base-60); - // Snackbars + /* Snackbars */ --snackbar-bg: var(--base-90); --snackbar-color: var(--body-color-inverted); - // Indicators + /* Indicators */ --indicator-accent-bg: var(--accent-brand); --indicator-accent-color: var(--body-color-inverted); --indicator-critical-bg: var(--accent-danger); @@ -188,7 +188,7 @@ --indicator-default-bg: var(--button-secondary-bg); --indicator-default-color: var(--button-secondary-color); - // Tabs + /* Tabs */ --tab-color: var(--base-80); --tab-color-hover: var(--accent-brand); --tab-color-current: var(--base-100); @@ -201,19 +201,19 @@ --tab-muted-bg-current: var(--base-20); --tab-pill-color-current: var(--base-inverted); - // Tags + /* Tags */ --tag-color: var(--base-60); --tag-color-hover: var(--base-100); - // Story + /* Story */ --story-comments-bg: 249, 249, 249; --story-comments-bg-top: rgba(var(--story-comments-bg), 0); --story-comments-bg-bottom: rgba(var(--story-comments-bg), 1); - // Select icon + /* Select icon */ --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMDgwOTBBIi8+Cjwvc3ZnPg==); - // Reactions + /* Reactions */ --reaction-like-color: var(--accent-danger); --reaction-like-bg: var(--accent-danger-a10); --reaction-custom-color: var(--accent-success); @@ -225,15 +225,17 @@ } :root { - // Separating some variables here as these are the results - // of broader Crayons refactoring (see #15311) and I didn't - // want to mix everything together. + /* + Separating some variables here as these are the results + of broader Crayons refactoring (see #15311) and I did not + want to mix everything together. + */ - //////////////////////////////////////////////// - // Buttons ///////////////////////////////////// - //////////////////////////////////////////////// + /*********************************************** + ** Buttons ************************************* + ***********************************************/ - // Buttons: Default + /* Buttons: Default */ --btn-bg: transparent; --btn-bg-hover: var(--accent-brand-a10); --btn-color: var(--base-80); @@ -242,35 +244,35 @@ --btn-current-bg: var(--base-20); --btn-current-color: var(--base-100); - // Buttons: Primary + /* Buttons: Primary */ --btn-primary-bg: var(--accent-brand); --btn-primary-bg-hover: var(--accent-brand-darker); --btn-primary-color: var(--base-inverted); --btn-primary-color-hover: var(--base-inverted); - // Buttons: Secondary + /* Buttons: Secondary */ --btn-secondary-bg: var(--accent-brand-a10); --btn-secondary-bg-hover: var(--accent-brand); --btn-secondary-color: var(--accent-brand); --btn-secondary-color-hover: var(--base-inverted); - // Buttons: Destructive Default + /* Buttons: Destructive Default */ --btn-destructive-bg: transparent; --btn-destructive-bg-hover: var(--accent-danger-a10); --btn-destructive-color: var(--accent-danger); --btn-destructive-color-hover: var(--accent-danger-darker); - // Buttons: Destructive Primary + /* Buttons: Destructive Primary */ --btn-primary-destructive-bg: var(--accent-danger); --btn-primary-destructive-bg-hover: var(--accent-danger-darker); --btn-primary-destructive-color: var(--base-inverted); --btn-primary-destructive-color-hover: var(--base-inverted); - //////////////////////////////////////////////// - // Links /////////////////////////////////////// - //////////////////////////////////////////////// + /*********************************************** + ** Links *************************************** + ***********************************************/ - // Links: Default + /* Links: Default */ --link-bg: transparent; --link-bg-hover: var(--accent-brand-a10); --link-color: var(--base-80); @@ -279,17 +281,17 @@ --link-current-bg: var(--base-20); --link-current-color: var(--base-100); - // Links: Branded + /* Links: Branded */ --link-branded-bg: transparent; --link-branded-bg-hover: var(--accent-brand-a10); --link-branded-color: var(--accent-brand); --link-branded-color-hover: var(--accent-brand-darker); - //////////////////////////////////////////////// - // CTAs //////////////////////////////////////// - //////////////////////////////////////////////// + /*********************************************** + ** CTAs **************************************** + ***********************************************/ - // CTAs: Default + /* CTAs: Default */ --cta-bg: transparent; --cta-bg-hover: var(--accent-brand-a10); --cta-color: var(--base-80); @@ -297,7 +299,7 @@ --cta-border: var(--base-60); --cta-border-hover: var(--accent-brand-darker); - // CTAs: Branded + /* CTAs: Branded */ --cta-branded-bg: transparent; --cta-branded-bg-hover: var(--accent-brand); --cta-branded-color: var(--accent-brand); @@ -305,9 +307,9 @@ --cta-branded-border: var(--accent-brand); --cta-branded-border-hover: var(--accent-brand-darker); - //////////////////////////////////////////////// - // Utilities /////////////////////////////////// - //////////////////////////////////////////////// + /*********************************************** + ** Utilities *********************************** + ***********************************************/ --focus: var(--accent-brand); } diff --git a/app/assets/stylesheets/themes/dark.scss b/app/assets/stylesheets/themes/dark.css similarity index 72% rename from app/assets/stylesheets/themes/dark.scss rename to app/assets/stylesheets/themes/dark.css index 198675b2d..57123771c 100644 --- a/app/assets/stylesheets/themes/dark.scss +++ b/app/assets/stylesheets/themes/dark.css @@ -8,7 +8,7 @@ --theme-social-icon-invert: invert(100%); --theme-color: #ffffff; - // Base + /* Base */ --base: #f9f9f9; --base-inverted: #000; @@ -24,58 +24,59 @@ --base-10: #242424; --base-0: #090909; - --base-a90: #{rgba(#f9f9f9, 0.9)}; - --base-a80: #{rgba(#f9f9f9, 0.8)}; - --base-a70: #{rgba(#f9f9f9, 0.7)}; - --base-a60: #{rgba(#f9f9f9, 0.6)}; - --base-a50: #{rgba(#f9f9f9, 0.5)}; - --base-a40: #{rgba(#f9f9f9, 0.4)}; - --base-a30: #{rgba(#f9f9f9, 0.3)}; - --base-a20: #{rgba(#f9f9f9, 0.2)}; - --base-a10: #{rgba(#f9f9f9, 0.1)}; - --base-a5: #{rgba(#f9f9f9, 0.05)}; + --base-a90: rgba(249, 249, 249, 0.9); + --base-a80: rgba(249, 249, 249, 0.8); + --base-a70: rgba(249, 249, 249, 0.7); + --base-a60: rgba(249, 249, 249, 0.6); + --base-a50: rgba(249, 249, 249, 0.5); + --base-a40: rgba(249, 249, 249, 0.4); + --base-a30: rgba(249, 249, 249, 0.3); + --base-a20: rgba(249, 249, 249, 0.2); + --base-a10: rgba(249, 249, 249, 0.1); + --base-a5: rgba(249, 249, 249, 0.05); - --base-inverted-a90: #{rgba(#000, 0.9)}; - --base-inverted-a80: #{rgba(#000, 0.8)}; - --base-inverted-a70: #{rgba(#000, 0.7)}; - --base-inverted-a60: #{rgba(#000, 0.6)}; - --base-inverted-a50: #{rgba(#000, 0.5)}; - --base-inverted-a40: #{rgba(#000, 0.4)}; - --base-inverted-a30: #{rgba(#000, 0.3)}; - --base-inverted-a20: #{rgba(#000, 0.2)}; - --base-inverted-a10: #{rgba(#000, 0.1)}; - --base-inverted-a5: #{rgba(#000, 0.05)}; + --base-inverted-a90: rgba(0, 0, 0, 0.9); + --base-inverted-a80: rgba(0, 0, 0, 0.8); + --base-inverted-a70: rgba(0, 0, 0, 0.7); + --base-inverted-a60: rgba(0, 0, 0, 0.6); + --base-inverted-a50: rgba(0, 0, 0, 0.5); + --base-inverted-a40: rgba(0, 0, 0, 0.4); + --base-inverted-a30: rgba(0, 0, 0, 0.3); + --base-inverted-a20: rgba(0, 0, 0, 0.2); + --base-inverted-a10: rgba(0, 0, 0, 0.1); + --base-inverted-a5: rgba(0, 0, 0, 0.05); - // Accent colors + /* Accent colors */ --accent-brand: #7b78ff; --accent-brand-darker: #5855f3; --accent-brand-lighter: #9896ff; - --accent-brand-a10: #{rgba(#7b78ff, 0.1)}; + --accent-brand-a10: rgba(123, 120, 255, 0.1); - // Success + /* Success */ --accent-success: #26d9ca; --accent-success-darker: #1ab3a6; --accent-success-lighter: #79ece2; - --accent-success-a10: #{rgba(#26d9ca, 0.1)}; + --accent-success-a10: rgba(38, 217, 202, 0.1); +; - // Warning + /* Warning */ --accent-warning: #ffcf4c; --accent-warning-darker: #f5b400; --accent-warning-lighter: #ffe499; - --accent-warning-a10: #{rgba(#ffcf4c, 0.1)}; + --accent-warning-a10: rgba(255, 207, 76, 0.1); - // Danger + /* Danger */ --accent-danger: #ed3434; --accent-danger-darker: #e40a0a; --accent-danger-lighter: #f15555; - --accent-danger-a10: #{rgba(#ed3434, 0.1)}; + --accent-danger-a10: rgba(237, 52, 52, 0.1); - // Main colors + /* Main colors */ --body-bg: var(--base-0); --body-color: var(--base-100); --body-color-inverted: var(--base-inverted); - // Main content containers + /* Main content containers */ --card-bg: var(--base-10); --card-color: var(--base-100); --card-color-secondary: var(--base-70); @@ -88,15 +89,15 @@ --card-hover-bg: var(--accent-brand-lighter); --card-selected-bg: var(--accent-brand-darker); - // Header + /* Header */ --header-bg: var(--base-10); --header-shadow: rgba(0, 0, 0, 0.3); - // Footer + /* Footer */ --footer-bg: var(--base-inverted); --footer-color: var(--base-60); - // Links + /* Links */ --link-bg-hover-alt: var(--base-inverted); --link-brand-color: #17a1f6; --link-color-current: var(--base-100); @@ -104,36 +105,36 @@ --link-color-secondary-hover: var(--base-80); --link-bg-current: var(--base-inverted); - // Primary buttons + /* Primary buttons */ --button-primary-bg: var(--accent-brand); --button-primary-bg-hover: var(--accent-brand-darker); --button-primary-color: var(--base-inverted); --button-primary-color-hover: var(--base-inverted); - //-- Inverted + /* -- Inverted */ --button-primary-inverted-bg: var(--accent-brand); --button-primary-inverted-bg-hover: var(--accent-brand-darker); --button-primary-inverted-color: var(--base-0); --button-primary-inverted-color-hover: var(--base-0); - // Secondary buttons + /* Secondary buttons */ --button-secondary-bg: var(--base-20); --button-secondary-bg-hover: var(--base-30); --button-secondary-color: var(--base-80); --button-secondary-color-hover: var(--base-100); - //-- Inverted + /* -- Inverted */ --button-secondary-inverted-bg: var(--base-70); --button-secondary-inverted-bg-hover: var(--base-60); --button-secondary-inverted-color: var(--base-10); --button-secondary-inverted-color-hover: var(--base-0); - // Outlined buttons + /* Outlined buttons */ --button-outlined-bg: transparent; --button-outlined-bg-hover: rgba(255, 255, 255, 0.035); --button-outlined-border: var(--base-20); --button-outlined-border-hover: var(--base-30); --button-outlined-color: var(--base-80); --button-outlined-color-hover: var(--base-100); - //-- Inverted + /* -- Inverted */ --button-outlined-inverted-bg: transparent; --button-outlined-inverted-bg-hover: rgba(0, 0, 0, 0.1); --button-outlined-inverted-border: var(--base-60); @@ -141,20 +142,20 @@ --button-outlined-inverted-color: var(--base-30); --button-outlined-inverted-color-hover: var(--base-10); - // Ghost buttons + /* Ghost buttons */ --button-ghost-bg: transparent; --button-ghost-bg-hover: rgba(255, 255, 255, 0.035); --button-ghost-color: var(--base-80); --button-ghost-color-hover: var(--base-100); --button-ghost-dimmed-color: var(--base-60); --button-ghost-dimmed-color-hover: var(--base-100); - //-- Inverted + /* -- Inverted */ --button-ghost-inverted-bg: transparent; --button-ghost-inverted-bg-hover: rgba(0, 0, 0, 0.1); --button-ghost-inverted-color: var(--base-30); --button-ghost-inverted-color-hover: var(--base-10); - // Forms + /* Forms */ --form-bg: var(--base-20); --form-bg-focus: var(--base-0); --form-border: var(--base-30); @@ -162,15 +163,15 @@ --form-border-focus: var(--accent-brand); --form-placeholder-color: var(--base-60); - // Form labels + /* Form labels */ --label-primary: var(--base-90); --label-secondary: var(--base-60); - // Snackbars + /* Snackbars */ --snackbar-bg: var(--base-10); --snackbar-color: var(--card-color); - // Indicators + /* Indicators */ --indicator-accent-bg: var(--accent-brand); --indicator-accent-color: var(--body-color); --indicator-critical-bg: var(--accent-danger); @@ -178,7 +179,7 @@ --indicator-default-bg: var(--button-secondary-bg); --indicator-default-color: var(--button-secondary-color); - // Tabs + /* Tabs */ --tab-color: var(--base-80); --tab-color-hover: var(--accent-brand-lighter); --tab-color-current: var(--base-100); @@ -191,19 +192,19 @@ --tab-muted-bg-current: var(--base-20); --tab-pill-color-current: var(--base-inverted); - // Tags + /* Tags */ --tag-color: var(--base-70); --tag-color-hover: var(--base-100); - // Story + /* Story */ --story-comments-bg: 21, 30, 42; --story-comments-bg-top: rgba(var(--story-comments-bg), 0); --story-comments-bg-bottom: rgba(var(--story-comments-bg), 1); - // Select icon + /* Select icon */ --select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjYzJjNmNhIi8+Cjwvc3ZnPg==); - // Reactions + /* Reactions */ --reaction-like-color: var(--accent-danger); --reaction-like-bg: var(--accent-danger-a10); --reaction-custom-color: var(--accent-success); @@ -213,48 +214,50 @@ } :root { - // Separating some variables here as these are the results - // of broader Crayons refactoring (see #15311) and I didn't - // want to mix everything together. + /* + Separating some variables here as these are the results + of broader Crayons refactoring (see #15311) and I did not + want to mix everything together. + */ - //////////////////////////////////////////////// - // Buttons ///////////////////////////////////// - //////////////////////////////////////////////// + /*********************************************** + ** Buttons ************************************* + ***********************************************/ - // Buttons: Default + /* Buttons: Default */ --btn-color-hover: var(--accent-brand-lighter); - // Buttons: Primary + /* Buttons: Primary */ --btn-primary-bg-hover: var(--accent-brand-lighter); - // Buttons: Primary Destructive + /* Buttons: Primary Destructive */ --btn-primary-destructive-bg-hover: var(--accent-danger-lighter); - //////////////////////////////////////////////// - // Links /////////////////////////////////////// - //////////////////////////////////////////////// + /*********************************************** + ** Links *************************************** + ***********************************************/ - // Links: Default + /* Links: Default */ --link-color-hover: var(--accent-brand-lighter); - // Links: Branded + /* Links: Branded */ --link-branded-color-hover: var(--accent-brand-lighter); - //////////////////////////////////////////////// - // CTAs //////////////////////////////////////// - //////////////////////////////////////////////// + /*********************************************** + ** CTAs **************************************** + ***********************************************/ - // CTAs: Default + /* CTAs: Default */ --cta-color-hover: var(--accent-brand-lighter); --cta-border-hover: var(--accent-brand-lighter); - // CTAs: Branded + /* CTAs: Branded */ --cta-branded-bg-hover: var(--accent-brand); --cta-branded-border: var(--accent-brand); --cta-branded-border-hover: var(--accent-brand-lighter); - //////////////////////////////////////////////// - // Utilities /////////////////////////////////// - //////////////////////////////////////////////// + /*********************************************** + ** Utilities *********************************** + ***********************************************/ --focus: var(--accent-brand-lighter); } diff --git a/app/javascript/.storybook/main.js b/app/javascript/.storybook/main.js index ffe944fcc..ebbf1340d 100644 --- a/app/javascript/.storybook/main.js +++ b/app/javascript/.storybook/main.js @@ -17,6 +17,8 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-a11y', '@storybook/addon-notes/register-panel', + '@storybook/addon-backgrounds', + '@etchteam/storybook-addon-css-variables-theme', 'storybook-addon-jsx', '@whitespace/storybook-addon-html', { diff --git a/app/javascript/.storybook/manager.js b/app/javascript/.storybook/manager.js deleted file mode 100644 index bbf15ab41..000000000 --- a/app/javascript/.storybook/manager.js +++ /dev/null @@ -1,11 +0,0 @@ -import { addons } from '@storybook/addons'; -import { create } from '@storybook/theming/create'; - -const crayonsTheme = create({ - base: 'light', - brandTitle: '🖍️ Crayons 🖍️', -}); - -addons.setConfig({ - theme: crayonsTheme, -}); diff --git a/app/javascript/.storybook/preview.js b/app/javascript/.storybook/preview.js index 3affda257..c1875c3b3 100644 --- a/app/javascript/.storybook/preview.js +++ b/app/javascript/.storybook/preview.js @@ -2,75 +2,21 @@ import { h } from 'preact'; import { addDecorator, addParameters } from '@storybook/preact'; import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; import { jsxDecorator } from 'storybook-addon-jsx'; +import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'; import 'focus-visible'; import '../../assets/stylesheets/minimal.scss'; import '../../assets/stylesheets/views.scss'; import '../../assets/stylesheets/crayons.scss'; +import LightTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!../../assets/stylesheets/config/_colors.css'; +import DarkTheme from '!!style-loader?injectType=lazyStyleTag!css-loader!../../assets/stylesheets/themes/dark.css'; import '../../assets/javascripts/lib/xss'; import '../../assets/javascripts/utilities/timeAgo'; import './storybook.scss'; -function addStylesheet(theme = '') { - if (theme === '') { - return; // default theme - } - - const head = document.head; - const link = document.createElement('link'); - - link.type = 'text/css'; - link.rel = 'stylesheet'; - link.href = `themes/${theme}.css`; - link.id = 'dev-theme'; - - head.appendChild(link); -} - -function themeSwitcher(event) { - const themeNode = document.getElementById('dev-theme'); - const theme = event.target.value; - - if (themeNode) { - themeNode.parentElement.removeChild(themeNode); - } - - localStorage.setItem('storybook-crayons-theme', theme); - - addStylesheet(theme); -} - -const THEMES = Object.freeze(['light', 'dark']); - -const themeSwitcherDecorator = (storyFn) => { - const lastThemeUsed = localStorage.getItem('storybook-crayons-theme') || ''; - - addStylesheet(lastThemeUsed); - - return ( -
- -
{storyFn()}
-
- ); -}; - addDecorator(jsxDecorator); -addDecorator(themeSwitcherDecorator); addDecorator((Story) => ); +addDecorator(cssVariablesTheme); addParameters({ options: { @@ -86,27 +32,8 @@ addParameters({ }, }); -export const Foo = () => ; -Foo.parameters = { - previewTabs: { 'storybook/docs/panel': { index: -1 } }, -}; - export const parameters = { controls: { expanded: true }, - options: { - storySort: { - order: [ - 'Introduction', - 'Component Library', - 'Utility-First CSS', - 'Writing CSS', - 'Fundamentals', - 'Components', - 'App Components', - 'Utility-First Classes', - ], - }, - }, jsx: { filterProps: (val) => val !== undefined, functionValue: (fn) => { @@ -114,7 +41,26 @@ export const parameters = { return fn; }, }, - html: { - root: '#story-content', + cssVariables: { + files: { + LightTheme, + DarkTheme, + }, + }, + backgrounds: { + default: 'Card', + grid: { + disable: true, + }, + values: [ + { + name: 'Card', + value: 'var(--card-bg)', + }, + { + name: 'Body', + value: 'var(--body-bg)', + }, + ], }, }; diff --git a/app/javascript/.storybook/storybook.scss b/app/javascript/.storybook/storybook.scss index 380549805..b20c8bc9d 100644 --- a/app/javascript/.storybook/storybook.scss +++ b/app/javascript/.storybook/storybook.scss @@ -1,7 +1,5 @@ body { - margin: 0; - padding: 0; - + background: unset; // This should be Storybook's root element. #root { padding: 2rem; @@ -22,3 +20,6 @@ body { margin: revert; } } +.sb-show-main { + transition: unset !important; +} diff --git a/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx b/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx index 38943adab..06820f009 100644 --- a/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx +++ b/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx @@ -33,9 +33,9 @@ when we use SCSS variables. It's just easier. Forem support two themes so you should always test your work against both. -- Default theme: `app/assets/stylesheets/config/_colors.scss` +- Default theme: `app/assets/stylesheets/config/_colors.css` -- Dark theme: `app/assets/stylesheets/themes/dark.scss` +- Dark theme: `app/assets/stylesheets/themes/dark.css` ### Import.scss diff --git a/package.json b/package.json index 54e9ce68c..315b3a319 100644 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "@babel/core": "^7.16.7", "@babel/plugin-proposal-class-properties": "^7.16.0", "@babel/plugin-syntax-dynamic-import": "^7.8.3", + "@etchteam/storybook-addon-css-variables-theme": "^1.1.0", "@babel/plugin-transform-react-jsx": "^7.16.7", "@babel/preset-env": "^7.16.7", "@github/clipboard-copy-element": "^1.1.2", @@ -112,6 +113,7 @@ "@rails/ujs": "7.0.1", "@rails/webpacker": "5.4.3", "@reach/combobox": "^0.16.5", + "@storybook/addon-backgrounds": "^6.4.9", "@storybook/addon-controls": "^6.4.10", "ahoy.js": "^0.4.0", "autoprefixer": "^10.4.2", diff --git a/yarn.lock b/yarn.lock index 7a4de5da2..3554fea48 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1448,6 +1448,22 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@etchteam/storybook-addon-css-variables-theme@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@etchteam/storybook-addon-css-variables-theme/-/storybook-addon-css-variables-theme-1.1.0.tgz#7803e09759d40eb1bdb6fa2fbf19cea717324f08" + integrity sha512-HDW1QRsSXYnNxTX4YKOKFPmC9XeK+ODAap/C6mk9d0wkaSGJGUj2yfSzbYOnfgx5tWR82iszkvvyupZKbxDjWg== + dependencies: + "@storybook/addons" "^6.2.9" + "@storybook/api" "^6.2.9" + "@storybook/client-logger" "^6.2.9" + "@storybook/components" "^6.2.9" + "@storybook/core-events" "^6.2.9" + "@storybook/theming" "^6.2.9" + core-js "^3.0.1" + lodash "^4.17.21" + memoizerific "^1.11.3" + util-deprecate "^1.0.2" + "@faker-js/faker@^5.5.3": version "5.5.3" resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-5.5.3.tgz#18e3af6b8eae7984072bbeb0c0858474d7c4cefe" @@ -2097,6 +2113,25 @@ util-deprecate "^1.0.2" uuid-browser "^3.1.0" +"@storybook/addon-backgrounds@^6.4.9": + version "6.4.9" + resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.4.9.tgz#89033aed6f01d6a2dc134cbdb1ce0c46afd130ec" + integrity sha512-/jqUZvk+x8TpDedyFnJamSYC91w/e8prj42xtgLG4+yBlb0UmewX7BAq9i/lhowhUjuLKaOX9E8E0AHftg8L6A== + dependencies: + "@storybook/addons" "6.4.9" + "@storybook/api" "6.4.9" + "@storybook/client-logger" "6.4.9" + "@storybook/components" "6.4.9" + "@storybook/core-events" "6.4.9" + "@storybook/csf" "0.0.2--canary.87bc651.0" + "@storybook/theming" "6.4.9" + core-js "^3.8.2" + global "^4.4.0" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/addon-controls@^6.4.10": version "6.4.10" resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.4.10.tgz#0589b1123824239ec306127b8e8a609f93d66e94"