Theming cleanup (#15237)
* Theming cleanup * Fix specs * Use correct method * Update storybook theme switcher
This commit is contained in:
Michael Kohl
GitHub
parent
dcf1e08477
commit
6b2160f307
15 changed files with 16 additions and 787 deletions
|
|
@ -39,8 +39,7 @@ div {
|
|||
display: none !important;
|
||||
}
|
||||
|
||||
body.night-theme,
|
||||
body.ten-x-hacker-theme {
|
||||
body.dark-theme {
|
||||
.on-page-nav-butt img,
|
||||
.icon-img,
|
||||
.reaction-button:not(.reacted) img,
|
||||
|
|
|
|||
|
|
@ -105,33 +105,6 @@
|
|||
--preview-border: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.theme-selector--pink-theme {
|
||||
--preview-body-bg: #fff7f9;
|
||||
--preview-body-color: #0a0a0a;
|
||||
--preview-header: #fb4881;
|
||||
--preview-form: #fff7f9;
|
||||
--preview-card: #fff;
|
||||
--preview-border: #fb4881;
|
||||
}
|
||||
|
||||
.theme-selector--minimal-light-theme {
|
||||
--preview-body-bg: #fcfcfc;
|
||||
--preview-body-color: #0a0a0a;
|
||||
--preview-header: #ffffff;
|
||||
--preview-form: #f4f5f7;
|
||||
--preview-card: #fff;
|
||||
--preview-border: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.theme-selector--ten-x-hacker-theme {
|
||||
--preview-body-bg: #0a0a0a;
|
||||
--preview-body-color: #42ff87;
|
||||
--preview-header: #1c1c1c;
|
||||
--preview-form: #0a0a0a;
|
||||
--preview-card: #0a0a0a;
|
||||
--preview-border: #42ff87;
|
||||
}
|
||||
|
||||
.rich-selector-radio {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -1,234 +0,0 @@
|
|||
:root {
|
||||
--theme-secondary-color: #ebebeb;
|
||||
--theme-container-background: #030303;
|
||||
--theme-container-accent-background: #000f0b;
|
||||
--theme-container-background-hover: #1c2c3f;
|
||||
--theme-container-box-shadow: none;
|
||||
--theme-container-border: 1px solid #22303f;
|
||||
--theme-social-icon-invert: invert(100%);
|
||||
--theme-color: #ffffff;
|
||||
|
||||
// Base
|
||||
--base: #fff;
|
||||
--base-inverted: #000;
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #efefef;
|
||||
--base-80: #d6d6d7;
|
||||
--base-70: #bdbdbd;
|
||||
--base-60: #a3a3a3;
|
||||
--base-50: #8a8a8a;
|
||||
--base-40: #717171;
|
||||
--base-30: #575757;
|
||||
--base-20: #3d3d3d;
|
||||
--base-10: #242424;
|
||||
--base-0: #090909;
|
||||
|
||||
--base-a90: #{rgba(#fff, 0.9)};
|
||||
--base-a80: #{rgba(#fff, 0.8)};
|
||||
--base-a70: #{rgba(#fff, 0.7)};
|
||||
--base-a60: #{rgba(#fff, 0.6)};
|
||||
--base-a50: #{rgba(#fff, 0.5)};
|
||||
--base-a40: #{rgba(#fff, 0.4)};
|
||||
--base-a30: #{rgba(#fff, 0.3)};
|
||||
--base-a20: #{rgba(#fff, 0.2)};
|
||||
--base-a10: #{rgba(#fff, 0.1)};
|
||||
--base-a5: #{rgba(#fff, 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)};
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #2eff7b;
|
||||
--accent-brand-darker: #00c548;
|
||||
--accent-brand-lighter: #8effb7;
|
||||
--accent-brand-a10: #{rgba(#2eff7b, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: var(--accent-brand);
|
||||
--accent-success-darker: var(--accent-brand-darker);
|
||||
--accent-success-lighter: var(--accent-brand-lighter);
|
||||
--accent-success-a10: #{rgba(#2eff7b, 0.1)};
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
||||
|
||||
// Main colors
|
||||
--body-bg: var(--base-0);
|
||||
--body-color: var(--accent-brand);
|
||||
--body-color-inverted: var(--base-inverted);
|
||||
|
||||
// Main content containers
|
||||
--card-bg: var(--base-inverted);
|
||||
--card-color: var(--accent-brand);
|
||||
--card-color-secondary: var(--accent-brand-darker);
|
||||
--card-color-tertiary: var(--base-50);
|
||||
--card-secondary-bg: var(--base-inverted);
|
||||
--card-secondary-color: var(--base-90);
|
||||
--card-headline-color: var(--accent-brand-lighter);
|
||||
--card-border: rgba(255, 255, 255, 0.2);
|
||||
--card-secondary-border: rgba(255, 255, 255, 0.2);
|
||||
--card-hover-bg: var(--base-10);
|
||||
--card-selected-bg: var(--base-20);
|
||||
|
||||
// Header
|
||||
--header-bg: var(--base-10);
|
||||
--header-bg-hover: var(--base-20);
|
||||
--header-button-focus-color: var(--accent-brand);
|
||||
--header-bg-current: var(--base-0);
|
||||
--header-shadow: rgba(0, 0, 0, 0.1);
|
||||
--header-icons-color: var(--base-70);
|
||||
--header-icons-color-hover: var(--base-100);
|
||||
|
||||
// Logo
|
||||
--logo-bg: var(--accent-brand);
|
||||
--logo-color: #0a0a0a;
|
||||
|
||||
// Footer
|
||||
--footer-bg: var(--base-10);
|
||||
--footer-copy-color: var(--base-80);
|
||||
--footer-copy-secondary-color: var(--base-60);
|
||||
--footer-link-color: var(--accent-brand);
|
||||
--footer-link-color-hover: var(--accent-brand-lighter);
|
||||
|
||||
// Links
|
||||
--link-color: var(--accent-brand);
|
||||
--link-color-hover: var(--accent-brand-darker); // #ff53d9;
|
||||
--link-color-current: var(--accent-brand-lighter);
|
||||
--link-color-secondary: var(--accent-brand-darker);
|
||||
--link-color-secondary-hover: var(--accent-brand-darker);
|
||||
--link-brand-color: #e24ec1;
|
||||
--link-bg-hover: var(--base-a10);
|
||||
--link-bg-hover-alt: var(--base-0);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// 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
|
||||
--button-primary-inverted-bg: var(--base-0);
|
||||
--button-primary-inverted-bg-hover: var(--base-20);
|
||||
--button-primary-inverted-color: var(--accent-brand);
|
||||
--button-primary-inverted-color-hover: var(--accent-brand-darker);
|
||||
|
||||
// Secondary buttons
|
||||
--button-secondary-bg: var(--base-10);
|
||||
--button-secondary-bg-hover: var(--base-20);
|
||||
--button-secondary-color: var(--accent-brand);
|
||||
--button-secondary-color-hover: var(--accent-brand-lighter);
|
||||
//-- Inverted
|
||||
--button-secondary-inverted-bg: var(--base-50);
|
||||
--button-secondary-inverted-bg-hover: var(--base-30);
|
||||
--button-secondary-inverted-color: var(--accent-brand);
|
||||
--button-secondary-inverted-color-hover: var(--accent-brand-lighter);
|
||||
|
||||
// Outlined buttons
|
||||
--button-outlined-bg: transparent;
|
||||
--button-outlined-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-outlined-border: var(--accent-brand);
|
||||
--button-outlined-border-hover: var(--accent-brand-darker);
|
||||
--button-outlined-color: var(--accent-brand);
|
||||
--button-outlined-color-hover: var(--accent-brand-darker);
|
||||
//-- Inverted
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-outlined-inverted-border: var(--accent-brand-darker);
|
||||
--button-outlined-inverted-border-hover: var(--accent-brand);
|
||||
--button-outlined-inverted-color: var(--accent-brand-darker);
|
||||
--button-outlined-inverted-color-hover: var(--accent-brand-darker);
|
||||
|
||||
// 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
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Forms
|
||||
--form-bg: var(--base-0);
|
||||
--form-bg-focus: var(--base-inverted);
|
||||
--form-border: var(--base-30);
|
||||
--form-border-hover: var(--base-40);
|
||||
--form-border-focus: var(--accent-brand);
|
||||
--form-placeholder-color: var(--base-60);
|
||||
|
||||
// Form labels
|
||||
--label-primary: var(--accent-brand);
|
||||
--label-secondary: var(--accent-brand-darker);
|
||||
|
||||
// Default box
|
||||
--box: var(--base-90);
|
||||
--box-darker: var(--base-100);
|
||||
|
||||
// Snackbars
|
||||
--snackbar-bg: var(--base-10);
|
||||
--snackbar-color: var(--accent-brand);
|
||||
|
||||
// Indicators
|
||||
--indicator-accent-bg: var(--accent-brand);
|
||||
--indicator-accent-color: var(--body-color-inverted);
|
||||
--indicator-critical-bg: var(--accent-danger);
|
||||
--indicator-critical-color: var(--body-color-inverted);
|
||||
--indicator-default-bg: var(--button-secondary-bg);
|
||||
--indicator-default-color: var(--button-secondary-color);
|
||||
|
||||
// Tabs
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color-hover: var(--accent-brand);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
|
||||
// Tags
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
|
||||
// Story
|
||||
--story-comments-bg: 13, 13, 13;
|
||||
--story-comments-bg-top: rgba(var(--story-comments-bg), 0);
|
||||
--story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
|
||||
|
||||
// Select icon
|
||||
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjMkVGRjdCIi8+Cjwvc3ZnPg==);
|
||||
|
||||
// Reactions
|
||||
--reaction-like-color: var(--accent-danger);
|
||||
--reaction-like-bg: var(--accent-danger-a10);
|
||||
--reaction-custom-color: var(--accent-success);
|
||||
--reaction-custom-bg: var(--accent-success-a10);
|
||||
--reaction-save-color: var(--accent-warning);
|
||||
--reaction-save-bg: var(--accent-warning-a10);
|
||||
}
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
:root {
|
||||
--theme-secondary-color: #505159;
|
||||
--theme-container-background: #ffffff;
|
||||
--theme-container-accent-background: #f4f5f7;
|
||||
--theme-container-background-hover: #efefef;
|
||||
--theme-container-box-shadow: none;
|
||||
--theme-container-border: 1px solid #e3e3e5;
|
||||
|
||||
// Base
|
||||
--base: #0a0a0a;
|
||||
|
||||
--base-a90: #{rgba(#0a0a0a, 0.9)};
|
||||
--base-a80: #{rgba(#0a0a0a, 0.8)};
|
||||
--base-a70: #{rgba(#0a0a0a, 0.7)};
|
||||
--base-a60: #{rgba(#0a0a0a, 0.6)};
|
||||
--base-a50: #{rgba(#0a0a0a, 0.5)};
|
||||
--base-a40: #{rgba(#0a0a0a, 0.4)};
|
||||
--base-a30: #{rgba(#0a0a0a, 0.3)};
|
||||
--base-a20: #{rgba(#0a0a0a, 0.2)};
|
||||
--base-a10: #{rgba(#0a0a0a, 0.1)};
|
||||
--base-a5: #{rgba(#0a0a0a, 0.05)};
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #202020;
|
||||
--base-80: #353535;
|
||||
--base-70: #4b4b4b;
|
||||
--base-60: #626262;
|
||||
--base-50: #7a7a7a;
|
||||
--base-40: #939393;
|
||||
--base-30: #adadad;
|
||||
--base-20: #c8c8c8;
|
||||
--base-10: #e3e3e3;
|
||||
--base-0: #ffffff;
|
||||
--base-inverted: #ffffff;
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #3b49df;
|
||||
--accent-brand-darker: #1827ce;
|
||||
--accent-brand-lighter: #8d95f2;
|
||||
--accent-brand-a10: #{rgba(#3b49df, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: #26d9ca;
|
||||
--accent-success-darker: #1ab3a6;
|
||||
--accent-success-lighter: #79ece2;
|
||||
--accent-success-a10: #{rgba(#26d9ca, 0.1)};
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
||||
|
||||
// Main colors
|
||||
--body-bg: #fcfcfc;
|
||||
--body-color: #0a0a0a;
|
||||
--body-color-inverted: var(--base-inverted);
|
||||
|
||||
// Main content containers
|
||||
--card-bg: var(--base-inverted);
|
||||
--card-color: var(--base-100);
|
||||
--card-color-secondary: var(--base-70);
|
||||
--card-color-tertiary: var(--base-50);
|
||||
--card-secondary-bg: var(--base-0);
|
||||
--card-secondary-color: var(--base-90);
|
||||
--card-headline-color: var(--base-100);
|
||||
--card-border: var(--base-a5);
|
||||
--card-secondary-border: var(--base-a5);
|
||||
--card-hover-bg: var(--base-10);
|
||||
--card-selected-bg: var(--base-20);
|
||||
|
||||
// Header
|
||||
--header-bg: var(--base-0);
|
||||
--header-bg-hover: var(--base-10);
|
||||
--header-button-focus-color: var(--accent-brand);
|
||||
--header-bg-current: var(--base-20);
|
||||
--header-shadow: rgba(0, 0, 0, 0.1);
|
||||
--header-icons-color: #0a0a0a;
|
||||
--header-icons-color-hover: #000;
|
||||
|
||||
// Logo
|
||||
--logo-bg: #e3e5ed;
|
||||
--logo-color: #232426;
|
||||
|
||||
// Footer
|
||||
--footer-bg: var(--base-inverted);
|
||||
--footer-copy-color: var(--base-80);
|
||||
--footer-copy-secondary-color: var(--base-60);
|
||||
--footer-link-color: var(--base-80);
|
||||
--footer-link-color-hover: var(--base-100);
|
||||
|
||||
// Links
|
||||
--link-color: var(--base-90);
|
||||
--link-color-hover: var(--accent-brand-darker);
|
||||
--link-color-current: var(--base-100);
|
||||
--link-color-secondary: var(--base-70);
|
||||
--link-color-secondary-hover: var(--base-80);
|
||||
--link-brand-color: var(--accent-brand);
|
||||
--link-bg-hover: var(--base-a5);
|
||||
--link-bg-hover-alt: var(--base-10);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// Primary buttons
|
||||
--button-primary-bg: var(--base-90);
|
||||
--button-primary-bg-hover: var(--base-100);
|
||||
--button-primary-color: var(--base-10);
|
||||
--button-primary-color-hover: var(--base-0);
|
||||
//-- Inverted
|
||||
--button-primary-inverted-bg: var(--base-10);
|
||||
--button-primary-inverted-bg-hover: var(--base-0);
|
||||
--button-primary-inverted-color: var(--base-90);
|
||||
--button-primary-inverted-color-hover: var(--base-100);
|
||||
|
||||
// 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
|
||||
--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
|
||||
--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
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-outlined-inverted-border: var(--base-60);
|
||||
--button-outlined-inverted-border-hover: var(--base-40);
|
||||
--button-outlined-inverted-color: var(--base-30);
|
||||
--button-outlined-inverted-color-hover: var(--base-10);
|
||||
|
||||
// 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
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
--button-ghost-dimmed-inverted-color: var(--base-50);
|
||||
--button-ghost-dimmed-inverted-color-hover: var(--base-100);
|
||||
|
||||
// Forms
|
||||
--form-bg: #f4f5f7;
|
||||
--form-bg-focus: var(--base-0);
|
||||
--form-border: #f4f5f7;
|
||||
--form-border-hover: var(--base-40);
|
||||
--form-border-focus: var(--accent-brand);
|
||||
--form-placeholder-color: var(--base-60);
|
||||
|
||||
// Form labels
|
||||
--label-primary: var(--base-90);
|
||||
--label-secondary: var(--base-60);
|
||||
|
||||
// Default box
|
||||
--box: var(--base-90);
|
||||
--box-darker: var(--base-100);
|
||||
|
||||
// Snackbars
|
||||
--snackbar-bg: var(--base-90);
|
||||
--snackbar-color: var(--body-color-inverted);
|
||||
|
||||
// Indicators
|
||||
--indicator-accent-bg: var(--accent-brand);
|
||||
--indicator-accent-color: var(--body-color-inverted);
|
||||
--indicator-critical-bg: var(--accent-danger);
|
||||
--indicator-critical-color: var(--body-color-inverted);
|
||||
--indicator-default-bg: var(--button-secondary-bg);
|
||||
--indicator-default-color: var(--button-secondary-color);
|
||||
|
||||
// Tabs
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color-hover: var(--accent-brand);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
|
||||
// Tags
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
|
||||
// Story
|
||||
--story-comments-bg: 250, 250, 250;
|
||||
--story-comments-bg-top: rgba(var(--story-comments-bg), 0);
|
||||
--story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
|
||||
|
||||
// Select icon
|
||||
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjN2E3YTdhIi8+Cjwvc3ZnPg==);
|
||||
|
||||
// Reactions
|
||||
--reaction-like-color: var(--accent-danger);
|
||||
--reaction-like-bg: var(--accent-danger-a10);
|
||||
--reaction-custom-color: var(--accent-success);
|
||||
--reaction-custom-bg: var(--accent-success-a10);
|
||||
--reaction-save-color: var(--accent-brand);
|
||||
--reaction-save-bg: var(--accent-brand-a10);
|
||||
}
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
:root {
|
||||
--theme-secondary-color: #4e57ef;
|
||||
--theme-container-background: #fff;
|
||||
--theme-container-accent-background: #ffccdb;
|
||||
--theme-container-background-hover: #ffe5eb;
|
||||
--theme-container-box-shadow: none;
|
||||
--theme-container-border: 1px solid #ff4983;
|
||||
|
||||
// Base
|
||||
--base: #1c060d;
|
||||
|
||||
--base-a90: #{rgba(#1c060d, 0.9)};
|
||||
--base-a80: #{rgba(#1c060d, 0.8)};
|
||||
--base-a70: #{rgba(#1c060d, 0.7)};
|
||||
--base-a60: #{rgba(#1c060d, 0.6)};
|
||||
--base-a50: #{rgba(#1c060d, 0.5)};
|
||||
--base-a40: #{rgba(#1c060d, 0.4)};
|
||||
--base-a30: #{rgba(#1c060d, 0.3)};
|
||||
--base-a20: #{rgba(#1c060d, 0.2)};
|
||||
--base-a10: #{rgba(#1c060d, 0.1)};
|
||||
--base-a5: #{rgba(#1c060d, 0.05)};
|
||||
|
||||
--base-100: var(--base);
|
||||
--base-90: #330f1a;
|
||||
--base-80: #57192d;
|
||||
--base-70: #7d2440;
|
||||
--base-60: #a52f55;
|
||||
--base-50: #cf3b6b;
|
||||
--base-40: #fb4881;
|
||||
--base-30: #ff7da6;
|
||||
--base-20: #ffa9c4;
|
||||
--base-10: #ffd1df;
|
||||
--base-0: #fff7f9;
|
||||
--base-inverted: #fff;
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #ff6c9b;
|
||||
--accent-brand-darker: #f03e76;
|
||||
--accent-brand-lighter: #ff99b9;
|
||||
--accent-brand-a10: #{rgba(#ff6c9b, 0.1)};
|
||||
|
||||
// Success
|
||||
--accent-success: #71db92;
|
||||
--accent-success-darker: #5abf79;
|
||||
--accent-success-lighter: #93edaf;
|
||||
--accent-success-a10: #{rgba(#71db92, 0.1)};
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
--accent-warning-darker: #f5b400;
|
||||
--accent-warning-lighter: #ffe499;
|
||||
--accent-warning-a10: #{rgba(#ffcf4c, 0.1)};
|
||||
|
||||
// Danger
|
||||
--accent-danger: #dc1818;
|
||||
--accent-danger-darker: #c20a0a;
|
||||
--accent-danger-lighter: #ec5050;
|
||||
--accent-danger-a10: #{rgba(#dc1818, 0.1)};
|
||||
|
||||
// Main colors
|
||||
--body-bg: var(--base-0);
|
||||
--body-color: var(--base-100);
|
||||
--body-color-inverted: var(--base-inverted);
|
||||
|
||||
// Main content containers
|
||||
--card-bg: var(--base-inverted);
|
||||
--card-color: var(--base-100);
|
||||
--card-color-secondary: var(--base-70);
|
||||
--card-color-tertiary: var(--base-50);
|
||||
--card-secondary-bg: rgba(255, 209, 223, 0.3);
|
||||
--card-secondary-color: var(--base-90);
|
||||
--card-headline-color: var(--base-100);
|
||||
--card-border: var(--accent-brand);
|
||||
--card-secondary-border: #{rgba(#ff6c9b, 0.2)};
|
||||
--card-hover-bg: var(--base-10);
|
||||
--card-selected-bg: var(--base-20);
|
||||
|
||||
// Header
|
||||
--header-bg: var(--base-40);
|
||||
--header-bg-hover: var(--base-50);
|
||||
--header-bg-current: var(--base-50);
|
||||
--header-button-focus-color: var(--accent-brand);
|
||||
--header-shadow: rgba(0, 0, 0, 0.1);
|
||||
--header-icons-color: var(--base-10);
|
||||
--header-icons-color-hover: var(--base-0);
|
||||
|
||||
// Logo
|
||||
--logo-bg: var(--base-inverted);
|
||||
--logo-color: var(--header-bg);
|
||||
|
||||
// Footer
|
||||
--footer-bg: var(--base-inverted);
|
||||
--footer-copy-color: var(--base-80);
|
||||
--footer-copy-secondary-color: var(--base-60);
|
||||
--footer-link-color: var(--base-80);
|
||||
--footer-link-color-hover: var(--base-100);
|
||||
|
||||
// Links
|
||||
--link-color: var(--base-90);
|
||||
--link-color-hover: var(--base-70);
|
||||
--link-color-current: var(--base-100);
|
||||
--link-color-secondary: var(--base-70);
|
||||
--link-color-secondary-hover: var(--base-80);
|
||||
--link-brand-color: #4e57ef;
|
||||
--link-bg-hover: var(--base-a5);
|
||||
--link-bg-hover-alt: var(--base-inverted);
|
||||
--link-bg-current: var(--base-inverted);
|
||||
|
||||
// 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
|
||||
--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
|
||||
--button-secondary-bg: var(--base-10);
|
||||
--button-secondary-bg-hover: var(--base-20);
|
||||
--button-secondary-color: var(--base-70);
|
||||
--button-secondary-color-hover: var(--base-90);
|
||||
//-- Inverted
|
||||
--button-secondary-inverted-bg: var(--base-60);
|
||||
--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
|
||||
--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-70);
|
||||
--button-outlined-color-hover: var(--base-90);
|
||||
//-- Inverted
|
||||
--button-outlined-inverted-bg: transparent;
|
||||
--button-outlined-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-outlined-inverted-border: var(--base-60);
|
||||
--button-outlined-inverted-border-hover: var(--base-40);
|
||||
--button-outlined-inverted-color: var(--base-30);
|
||||
--button-outlined-inverted-color-hover: var(--base-10);
|
||||
|
||||
// Ghost buttons
|
||||
--button-ghost-bg: transparent;
|
||||
--button-ghost-bg-hover: rgba(0, 0, 0, 0.035);
|
||||
--button-ghost-color: var(--base-90);
|
||||
--button-ghost-color-hover: var(--base-100);
|
||||
--button-ghost-dimmed-color: var(--base-60);
|
||||
--button-ghost-dimmed-color-hover: var(--base-100);
|
||||
//-- Inverted
|
||||
--button-ghost-inverted-bg: transparent;
|
||||
--button-ghost-inverted-bg-hover: rgba(255, 255, 255, 0.15);
|
||||
--button-ghost-inverted-color: var(--base-30);
|
||||
--button-ghost-inverted-color-hover: var(--base-10);
|
||||
--button-ghost-dimmed-inverted-color: var(--base-50);
|
||||
--button-ghost-dimmed-inverted-color-hover: var(--base-100);
|
||||
|
||||
// Forms
|
||||
--form-bg: #fff7f9;
|
||||
--form-bg-focus: var(--base-0);
|
||||
--form-border: var(--base-50);
|
||||
--form-border-hover: var(--base-60);
|
||||
--form-border-focus: var(--base-60);
|
||||
--form-placeholder-color: var(--base-60);
|
||||
|
||||
// Form labels
|
||||
--label-primary: var(--base-100);
|
||||
--label-secondary: var(--base-90);
|
||||
|
||||
// Default box
|
||||
--box: var(--card-bg);
|
||||
--box-darker: var(--base-100);
|
||||
|
||||
// Snackbars
|
||||
--snackbar-bg: var(--base-90);
|
||||
--snackbar-color: var(--body-color-inverted);
|
||||
|
||||
// Indicators
|
||||
--indicator-accent-bg: var(--link-brand-color);
|
||||
--indicator-accent-color: var(--body-color-inverted);
|
||||
--indicator-critical-bg: var(--base-80);
|
||||
--indicator-critical-color: var(--body-color-inverted);
|
||||
--indicator-dimmed-bg: var(--base-30);
|
||||
--indicator-dimmed-color: var(--base-70);
|
||||
|
||||
// Tabs
|
||||
--tab-color: var(--base-80);
|
||||
--tab-color-hover: var(--accent-brand);
|
||||
--tab-color-current: var(--base-100);
|
||||
--tab-bg-hover: var(--accent-brand-a10);
|
||||
--tab-bg-current: var(--accent-brand);
|
||||
--tab-muted-color: var(--base-80);
|
||||
--tab-muted-color-hover: var(--base-90);
|
||||
--tab-muted-color-current: var(--base-100);
|
||||
--tab-muted-bg-hover: var(--base-a10);
|
||||
--tab-muted-bg-current: var(--base-20);
|
||||
--tab-pill-color-current: var(--base-inverted);
|
||||
|
||||
// Tags
|
||||
--tag-color: var(--base-70);
|
||||
--tag-color-hover: var(--base-100);
|
||||
|
||||
// Story
|
||||
--story-comments-bg: 255, 255, 255;
|
||||
--story-comments-bg-top: rgba(var(--story-comments-bg), 0);
|
||||
--story-comments-bg-bottom: rgba(var(--story-comments-bg), 1);
|
||||
|
||||
// Select icon
|
||||
--select-icon: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDE2TDYgMTBIMThMMTIgMTZaIiBmaWxsPSIjNTcxOTJkIi8+Cjwvc3ZnPg==);
|
||||
|
||||
// Reactions
|
||||
--reaction-like-color: var(--accent-danger);
|
||||
--reaction-like-bg: var(--accent-danger-a10);
|
||||
--reaction-custom-color: var(--accent-success);
|
||||
--reaction-custom-bg: var(--accent-success-a10);
|
||||
--reaction-save-color: var(--accent-brand);
|
||||
--reaction-save-bg: var(--accent-brand-a10);
|
||||
}
|
||||
|
|
@ -61,10 +61,6 @@ class UserDecorator < ApplicationDecorator
|
|||
body_class.join(" ")
|
||||
end
|
||||
|
||||
def dark_theme?
|
||||
setting.dark_theme? || setting.ten_x_hacker_theme?
|
||||
end
|
||||
|
||||
def assigned_color
|
||||
colors = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ function themeSwitcher(event) {
|
|||
addStylesheet(theme);
|
||||
}
|
||||
|
||||
const THEMES = Object.freeze(['default', 'night', 'minimal', 'pink', 'hacker']);
|
||||
const THEMES = Object.freeze(['light', 'dark']);
|
||||
|
||||
const themeSwitcherDecorator = (storyFn) => {
|
||||
const lastThemeUsed = localStorage.getItem('storybook-crayons-theme') || '';
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ themes. We have a file with all color variables and each theme has its own too.
|
|||
|
||||
- Default theme: `app/assets/stylesheets/config/_colors.scss`
|
||||
|
||||
- Other themes (minimal, dark, pink, hacker): `app/assets/stylesheets/themes`
|
||||
- Dark theme: `app/assets/stylesheets/themes/dark.scss`
|
||||
|
||||
### Import.scss
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ module Users
|
|||
_suffix: :font
|
||||
enum inbox_type: { private: 0, open: 1 }, _suffix: :inbox
|
||||
enum config_navbar: { default: 0, static: 1 }, _suffix: :navbar
|
||||
enum config_theme: { light_theme: 0, minimal_light_theme: 1, dark_theme: 2, pink_theme: 3,
|
||||
ten_x_hacker_theme: 4 }
|
||||
# NOTE: We previously had a set of 5 themes with values from 0 to 4.
|
||||
enum config_theme: { light_theme: 0, dark_theme: 2 }
|
||||
enum config_homepage_feed: { default: 0, latest: 1, top_week: 2, top_month: 3, top_year: 4, top_infinity: 5 },
|
||||
_suffix: :feed
|
||||
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@
|
|||
var stripe = Stripe('<%= Settings::General.stripe_publishable_key %>');
|
||||
var elements = stripe.elements();
|
||||
|
||||
<% if current_user.decorate.dark_theme? %>
|
||||
<% if current_user.dark_theme? %>
|
||||
var style = {
|
||||
base: {
|
||||
color: 'white',
|
||||
|
|
|
|||
|
|
@ -8,12 +8,6 @@
|
|||
|
||||
if (bodyClass.includes('dark-theme')) {
|
||||
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/dark.css"].to_s.squish.html_safe %></style>';
|
||||
} else if (bodyClass.includes('ten-x-hacker-theme')) {
|
||||
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/hacker.css"].to_s.squish.html_safe %></style>'
|
||||
} else if (bodyClass.includes('pink-theme')) {
|
||||
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/pink.css"].to_s.squish.html_safe %></style>'
|
||||
} else if(bodyClass.includes('minimal-light-theme')) {
|
||||
document.getElementById('body-styles').innerHTML = '<style><%= Rails.application.assets["themes/minimal.css"].to_s.squish.html_safe %></style>'
|
||||
}
|
||||
|
||||
if (bodyClass.includes('open-dyslexic-article-body')) { // Preloading custom font for anticipated use
|
||||
|
|
@ -35,14 +29,14 @@
|
|||
const user = JSON.parse(userString)
|
||||
const numTags = JSON.parse(user.followed_tags).length
|
||||
if (numTags < 6) {
|
||||
document.body.classList.add("user-tags-followed-"+numTags);
|
||||
document.body.classList.add("user-tags-followed-" + numTags);
|
||||
} else {
|
||||
document.body.classList.add("user-tags-followed-max");
|
||||
}
|
||||
}
|
||||
} catch(e) {
|
||||
setTimeout(function(){
|
||||
} catch (e) {
|
||||
setTimeout(function () {
|
||||
Honeybadger.notify(e);
|
||||
},1000)
|
||||
}, 1000)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,15 +7,15 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
context "with serialization" do
|
||||
it "serializes both the decorated object IDs and decorated methods" do
|
||||
user = saved_user.decorate
|
||||
expected_result = { "id" => user.id, "dark_theme?" => user.dark_theme? }
|
||||
expect(user.as_json(only: [:id], methods: [:dark_theme?])).to eq(expected_result)
|
||||
expected_result = { "id" => user.id }
|
||||
expect(user.as_json(only: [:id])).to eq(expected_result)
|
||||
end
|
||||
|
||||
it "serializes collections of decorated objects" do
|
||||
user = saved_user.decorate
|
||||
decorated_collection = User.decorate
|
||||
expected_result = [{ "id" => user.id, "dark_theme?" => user.dark_theme? }]
|
||||
expect(decorated_collection.as_json(only: [:id], methods: [:dark_theme?])).to eq(expected_result)
|
||||
expected_result = [{ "id" => user.id }]
|
||||
expect(decorated_collection.as_json(only: [:id])).to eq(expected_result)
|
||||
end
|
||||
end
|
||||
|
||||
|
|
@ -132,24 +132,6 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
||||
it "creates proper body class with pink theme" do
|
||||
user.setting.config_theme = "pink_theme"
|
||||
expected_result = %W[
|
||||
pink-theme sans-serif-article-body
|
||||
trusted-status-#{user.trusted} #{user.setting.config_navbar}-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
||||
it "creates proper body class with minimal light theme" do
|
||||
user.setting.config_theme = "minimal_light_theme"
|
||||
expected_result = %W[
|
||||
minimal-light-theme sans-serif-article-body
|
||||
trusted-status-#{user.trusted} #{user.setting.config_navbar}-header
|
||||
].join(" ")
|
||||
expect(user.decorate.config_body_class).to eq(expected_result)
|
||||
end
|
||||
|
||||
it "works with static navbar" do
|
||||
user.setting.config_navbar = "static"
|
||||
expected_result = %W[
|
||||
|
|
@ -174,23 +156,6 @@ RSpec.describe UserDecorator, type: :decorator do
|
|||
end
|
||||
end
|
||||
|
||||
describe "#dark_theme?" do
|
||||
it "determines dark theme if dark theme" do
|
||||
user.setting.config_theme = "dark_theme"
|
||||
expect(user.decorate.dark_theme?).to be(true)
|
||||
end
|
||||
|
||||
it "determines dark theme if ten x hacker" do
|
||||
user.setting.config_theme = "ten_x_hacker_theme"
|
||||
expect(user.decorate.dark_theme?).to be(true)
|
||||
end
|
||||
|
||||
it "determines not dark theme if not one of the dark themes" do
|
||||
user.setting.config_theme = "light_theme"
|
||||
expect(user.decorate.dark_theme?).to be(false)
|
||||
end
|
||||
end
|
||||
|
||||
describe "#fully_banished?" do
|
||||
it "returns not fully banished if in good standing" do
|
||||
expect(user.decorate.fully_banished?).to eq(false)
|
||||
|
|
|
|||
|
|
@ -11,5 +11,6 @@ FactoryBot.define do
|
|||
feed_referential_link { true }
|
||||
inbox_type { "private" }
|
||||
permit_adjacent_sponsors { true }
|
||||
prefer_os_color_scheme { true }
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -647,21 +647,6 @@ RSpec.describe User, type: :model do
|
|||
expect(user.decorate.config_body_class).to eq(classes)
|
||||
end
|
||||
|
||||
it "determines dark theme if dark theme" do
|
||||
user.setting.config_theme = "dark_theme"
|
||||
expect(user.decorate.dark_theme?).to eq(true)
|
||||
end
|
||||
|
||||
it "determines dark theme if ten x hacker" do
|
||||
user.setting.config_theme = "ten_x_hacker_theme"
|
||||
expect(user.decorate.dark_theme?).to eq(true)
|
||||
end
|
||||
|
||||
it "determines not dark theme if not one of the dark themes" do
|
||||
user.setting.config_theme = "light_theme"
|
||||
expect(user.decorate.dark_theme?).to eq(false)
|
||||
end
|
||||
|
||||
it "creates proper body class with sans serif config" do
|
||||
user.setting.config_font = "sans_serif"
|
||||
|
||||
|
|
@ -684,14 +669,6 @@ RSpec.describe User, type: :model do
|
|||
user.setting.config_theme = "dark_theme"
|
||||
|
||||
classes = "dark-theme sans-serif-article-body trusted-status-#{user.trusted} #{user.setting.config_navbar}-header"
|
||||
|
||||
expect(user.decorate.config_body_class).to eq(classes)
|
||||
end
|
||||
|
||||
it "creates proper body class with pink theme" do
|
||||
user.setting.config_theme = "pink_theme"
|
||||
|
||||
classes = "pink-theme sans-serif-article-body trusted-status-#{user.trusted} #{user.setting.config_navbar}-header"
|
||||
expect(user.decorate.config_body_class).to eq(classes)
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ RSpec.describe Users::Setting, type: :model do
|
|||
it { is_expected.to define_enum_for(:inbox_type).with_values(private: 0, open: 1).with_suffix(:inbox) }
|
||||
it { is_expected.to define_enum_for(:config_font).with_values(default: 0, comic_sans: 1, monospace: 2, open_dyslexic: 3, sans_serif: 4, serif: 5).with_suffix(:font) }
|
||||
it { is_expected.to define_enum_for(:config_navbar).with_values(default: 0, static: 1).with_suffix(:navbar) }
|
||||
it { is_expected.to define_enum_for(:config_theme).with_values(light_theme: 0, minimal_light_theme: 1, dark_theme: 2, pink_theme: 3, ten_x_hacker_theme: 4) }
|
||||
it { is_expected.to define_enum_for(:config_theme).with_values(light_theme: 0, dark_theme: 2) }
|
||||
it { is_expected.to define_enum_for(:config_homepage_feed).with_values(default: 0, latest: 1, top_week: 2, top_month: 3, top_year: 4, top_infinity: 5).with_suffix(:feed) }
|
||||
|
||||
describe "validating color fields" do
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue