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 <suzanne@forem.com> * restart * restart Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
086a53ba93
commit
7c07913aa6
9 changed files with 237 additions and 257 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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',
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
});
|
||||
|
|
@ -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 (
|
||||
<div>
|
||||
<label style={{ position: 'absolute', top: 0, left: 0, margin: '1rem' }}>
|
||||
theme{' '}
|
||||
<select onChange={themeSwitcher}>
|
||||
{THEMES.map((theme) => (
|
||||
<option
|
||||
selected={lastThemeUsed === theme}
|
||||
value={theme}
|
||||
key={theme}
|
||||
>
|
||||
{theme}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div id="story-content">{storyFn()}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
addDecorator(jsxDecorator);
|
||||
addDecorator(themeSwitcherDecorator);
|
||||
addDecorator((Story) => <Story />);
|
||||
addDecorator(cssVariablesTheme);
|
||||
|
||||
addParameters({
|
||||
options: {
|
||||
|
|
@ -86,27 +32,8 @@ addParameters({
|
|||
},
|
||||
});
|
||||
|
||||
export const Foo = () => <Component />;
|
||||
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)',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
35
yarn.lock
35
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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue