From 6b2160f307b41467bcf4c0f63eebccaa5a5bd341 Mon Sep 17 00:00:00 2001 From: Michael Kohl Date: Tue, 9 Nov 2021 22:11:55 +0700 Subject: [PATCH] Theming cleanup (#15237) * Theming cleanup * Fix specs * Use correct method * Update storybook theme switcher --- app/assets/stylesheets/scaffolds.scss | 3 +- app/assets/stylesheets/theme-selector.scss | 27 -- app/assets/stylesheets/themes/hacker.scss | 234 ------------------ app/assets/stylesheets/themes/minimal.scss | 221 ----------------- app/assets/stylesheets/themes/pink.scss | 221 ----------------- app/decorators/user_decorator.rb | 4 - app/javascript/.storybook/preview.js | 2 +- .../__stories__/Writing-css.stories.mdx | 2 +- app/models/users/setting.rb | 4 +- app/views/credits/new.html.erb | 2 +- app/views/layouts/_user_config.html.erb | 14 +- spec/decorators/user_decorator_spec.rb | 43 +--- spec/factories/users_settings.rb | 1 + spec/models/user_spec.rb | 23 -- spec/models/users/setting_spec.rb | 2 +- 15 files changed, 16 insertions(+), 787 deletions(-) delete mode 100644 app/assets/stylesheets/themes/hacker.scss delete mode 100644 app/assets/stylesheets/themes/minimal.scss delete mode 100644 app/assets/stylesheets/themes/pink.scss diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss index 16d931e73..e645660a2 100644 --- a/app/assets/stylesheets/scaffolds.scss +++ b/app/assets/stylesheets/scaffolds.scss @@ -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, diff --git a/app/assets/stylesheets/theme-selector.scss b/app/assets/stylesheets/theme-selector.scss index dcd354b58..6289088c6 100644 --- a/app/assets/stylesheets/theme-selector.scss +++ b/app/assets/stylesheets/theme-selector.scss @@ -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; diff --git a/app/assets/stylesheets/themes/hacker.scss b/app/assets/stylesheets/themes/hacker.scss deleted file mode 100644 index 6dab10835..000000000 --- a/app/assets/stylesheets/themes/hacker.scss +++ /dev/null @@ -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); -} diff --git a/app/assets/stylesheets/themes/minimal.scss b/app/assets/stylesheets/themes/minimal.scss deleted file mode 100644 index f52c70b21..000000000 --- a/app/assets/stylesheets/themes/minimal.scss +++ /dev/null @@ -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); -} diff --git a/app/assets/stylesheets/themes/pink.scss b/app/assets/stylesheets/themes/pink.scss deleted file mode 100644 index fea357ea3..000000000 --- a/app/assets/stylesheets/themes/pink.scss +++ /dev/null @@ -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); -} diff --git a/app/decorators/user_decorator.rb b/app/decorators/user_decorator.rb index 91ff7bea9..0811d5d36 100644 --- a/app/decorators/user_decorator.rb +++ b/app/decorators/user_decorator.rb @@ -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 = [ { diff --git a/app/javascript/.storybook/preview.js b/app/javascript/.storybook/preview.js index ce1b36614..07a392fc9 100644 --- a/app/javascript/.storybook/preview.js +++ b/app/javascript/.storybook/preview.js @@ -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') || ''; diff --git a/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx b/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx index 82f8850b4..9dc8378c0 100644 --- a/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx +++ b/app/javascript/crayons/guidelines/__stories__/Writing-css.stories.mdx @@ -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 diff --git a/app/models/users/setting.rb b/app/models/users/setting.rb index e6e0f506e..d2d50046d 100644 --- a/app/models/users/setting.rb +++ b/app/models/users/setting.rb @@ -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 diff --git a/app/views/credits/new.html.erb b/app/views/credits/new.html.erb index 5df95864b..7194f4485 100644 --- a/app/views/credits/new.html.erb +++ b/app/views/credits/new.html.erb @@ -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', diff --git a/app/views/layouts/_user_config.html.erb b/app/views/layouts/_user_config.html.erb index 5ac19c795..7a6def8a4 100644 --- a/app/views/layouts/_user_config.html.erb +++ b/app/views/layouts/_user_config.html.erb @@ -8,12 +8,6 @@ if (bodyClass.includes('dark-theme')) { document.getElementById('body-styles').innerHTML = ''; - } else if (bodyClass.includes('ten-x-hacker-theme')) { - document.getElementById('body-styles').innerHTML = '' - } else if (bodyClass.includes('pink-theme')) { - document.getElementById('body-styles').innerHTML = '' - } else if(bodyClass.includes('minimal-light-theme')) { - document.getElementById('body-styles').innerHTML = '' } 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) } diff --git a/spec/decorators/user_decorator_spec.rb b/spec/decorators/user_decorator_spec.rb index 79336778c..a558f429e 100644 --- a/spec/decorators/user_decorator_spec.rb +++ b/spec/decorators/user_decorator_spec.rb @@ -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) diff --git a/spec/factories/users_settings.rb b/spec/factories/users_settings.rb index ccdcdb1e0..80d6b1f2a 100644 --- a/spec/factories/users_settings.rb +++ b/spec/factories/users_settings.rb @@ -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 diff --git a/spec/models/user_spec.rb b/spec/models/user_spec.rb index cf2208a59..b4e76f359 100644 --- a/spec/models/user_spec.rb +++ b/spec/models/user_spec.rb @@ -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 diff --git a/spec/models/users/setting_spec.rb b/spec/models/users/setting_spec.rb index 2379d24bc..d5e16e651 100644 --- a/spec/models/users/setting_spec.rb +++ b/spec/models/users/setting_spec.rb @@ -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