From f3767f25849750d6ed1607c6f4db6e2fdc5f8b27 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Fri, 18 Apr 2025 11:26:13 -0500 Subject: [PATCH] Use variables for card colors --- app/assets/stylesheets/_global.css | 71 ++++++++++++++++++------------ app/assets/stylesheets/cards.css | 13 ++++-- app/models/colorable.rb | 17 ++++++- 3 files changed, 66 insertions(+), 35 deletions(-) diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css index a385c0afd..5497c7aa5 100644 --- a/app/assets/stylesheets/_global.css +++ b/app/assets/stylesheets/_global.css @@ -129,8 +129,48 @@ --lch-pink-lighter: 92% 0.03 338; --lch-pink-lightest: 96% 0.02 336; + /* Colors: Named */ + --color-black: oklch(var(--lch-black)); + --color-white: oklch(var(--lch-white)); + + --color-ink: oklch(var(--lch-ink-darkest)); + --color-ink-darkest: oklch(var(--lch-ink-darkest)); + --color-ink-darker: oklch(var(--lch-ink-darker)); + --color-ink-dark: oklch(var(--lch-ink-dark)); + --color-ink-medium: oklch(var(--lch-ink-medium)); + --color-ink-light: oklch(var(--lch-ink-light)); + --color-ink-lighter: oklch(var(--lch-ink-lighter)); + --color-ink-lightest: oklch(var(--lch-ink-lightest)); + + --color-ink-inverted: oklch(var(--lch-ink-inverted)); + + /* Colors: Abstractions */ + --color-canvas: oklch(var(--lch-canvas)); + --color-negative: oklch(var(--lch-red-dark)); + --color-positive: oklch(var(--lch-green-dark)); + --color-link: oklch(var(--lch-blue-dark)); + --color-selected: oklch(var(--lch-blue-lighter)); + --color-selected-dark: oklch(var(--lch-blue-light)); + --color-highlight: oklch(var(--lch-yellow-lighter)); + --color-marker: oklch(var(--lch-red-medium)); + --color-container: oklch(var(--lch-aqua-light)); + --color-terminal-bg: oklch(var(--lch-blue-darkest)); + --color-terminal-text: oklch(var(--lch-green-medium)); + + /* Colors: Cards */ + --color-card-1: oklch(var(--lch-ink-dark)); + --color-card-2: oklch(var(--lch-uncolor-dark)); + --color-card-3: oklch(var(--lch-yellow-dark)); + --color-card-4: oklch(var(--lch-lime-dark)); + --color-card-5: oklch(var(--lch-aqua-dark)); + --color-card-6: oklch(var(--lch-blue-dark)); + --color-card-7: oklch(var(--lch-violet-dark)); + --color-card-8: oklch(var(--lch-purple-dark)); + --color-card-9: oklch(var(--lch-pink-dark)); + @media (prefers-color-scheme: dark) { --lch-canvas: 20% 0.0195 232.58; + --lch-ink-inverted: var(--lch-black); --lch-ink-darkest: 96.02% 0.0034 260; --lch-ink-darker: 86% 0.0061 260; @@ -220,6 +260,8 @@ --lch-pink-lighter: 30% 0.03 346; --lch-pink-lightest: 25% 0.011 348; + --color-container: oklch(var(--lch-aqua-lighter)); + --shadow: 0 0 0 1px oklch(var(--lch-black) / 0.42), 0 .2em 1.6em -0.8em oklch(var(--lch-black) / 0.6), 0 .4em 2.4em -1em oklch(var(--lch-black) / 0.7), @@ -227,33 +269,4 @@ 0 .8em 1.2em -1.6em oklch(var(--lch-black) / 0.9), 0 1.2em 1.6em -2em oklch(var(--lch-black) / 1); } - - /* Colors: Named */ - --color-black: oklch(var(--lch-black)); - --color-white: oklch(var(--lch-white)); - - --color-ink: oklch(var(--lch-ink-darkest)); - --color-ink-darkest: oklch(var(--lch-ink-darkest)); - --color-ink-darker: oklch(var(--lch-ink-darker)); - --color-ink-dark: oklch(var(--lch-ink-dark)); - --color-ink-medium: oklch(var(--lch-ink-medium)); - --color-ink-light: oklch(var(--lch-ink-light)); - --color-ink-lighter: oklch(var(--lch-ink-lighter)); - --color-ink-lightest: oklch(var(--lch-ink-lightest)); - - --color-ink-inverted: oklch(var(--lch-ink-inverted)); - - /* Colors: Abstractions */ - --color-canvas: oklch(var(--lch-canvas)); - --color-negative: oklch(var(--lch-red-dark)); - --color-positive: oklch(var(--lch-green-dark)); - --color-link: oklch(var(--lch-blue-dark)); - --color-selected: oklch(var(--lch-blue-lighter)); - --color-selected-dark: oklch(var(--lch-blue-light)); - --color-highlight: oklch(var(--lch-yellow-lighter)); - --color-marker: oklch(var(--lch-red-medium)); - --color-container: oklch(var(--lch-aqua-light)); - --color-golden: oklch(var(--lch-yellow-light)); - --color-terminal-bg: oklch(var(--lch-blue-darkest)); - --color-terminal-text: oklch(var(--lch-green-medium)); } diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css index 794733da3..6a0f13225 100644 --- a/app/assets/stylesheets/cards.css +++ b/app/assets/stylesheets/cards.css @@ -28,11 +28,16 @@ --border-color: var(--color-canvas) !important; background-color: var(--color-canvas); - background-image: linear-gradient(90deg, oklch(var(--lch-yellow-light) / 0.5) 0%, oklch(var(--lch-yellow-light) / 0.1) 50%, oklch(var(--lch-yellow-light) / 0.75) 100%); + background-image: linear-gradient(75deg, + oklch(var(--lch-yellow-lighter) / 0.5) 0%, + oklch(var(--lch-yellow-lighter) / 0.1) 40%, + oklch(var(--lch-yellow-lighter) / 0.1) 60%, + oklch(var(--lch-yellow-lighter) / 0.75) 100% + ); box-shadow: - 0 0 0.5em 0.2em var(--color-golden), - 0 0 1em 0.4em var(--color-golden) !important; - outline: 1px solid var(--color-golden); + 0 0 0.5em 0.2em oklch(var(--lch-yellow-light) / 0.5), + 0 0 1em 0.4em oklch(var(--lch-yellow-light) / 0.5) !important; + outline: 1px solid oklch(var(--lch-yellow-light) / 0.5); } .card__background { diff --git a/app/models/colorable.rb b/app/models/colorable.rb index 4fba4556d..fed768a27 100644 --- a/app/models/colorable.rb +++ b/app/models/colorable.rb @@ -1,8 +1,21 @@ module Colorable extend ActiveSupport::Concern - COLORS = %w[ #3b3633 #67695e #eb7a32 #bf7c2b #c09c6f #746b1e #2c6da8 #5d618f #663251 #ff63a8 ] - DEFAULT_COLOR = "#2c6da8" + # COLORS = %w[ #3b3633 #67695e #eb7a32 #bf7c2b #c09c6f #746b1e #2c6da8 #5d618f #663251 #ff63a8 ] + # DEFAULT_COLOR = "#2c6da8" + + COLORS = [ + "var(--color-card-1)", + "var(--color-card-2)", + "var(--color-card-3)", + "var(--color-card-4)", + "var(--color-card-5)", + "var(--color-card-6)", + "var(--color-card-7)", + "var(--color-card-8)", + "var(--color-card-9)", + ] + DEFAULT_COLOR = "var(--color-card-6)" included do attribute :color, default: DEFAULT_COLOR