bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use variables for card colors

Browse Source
This commit is contained in:
Andy Smith
2025-04-18 11:26:13 -05:00
parent eb539fce97
commit f3767f2584
3 changed files with 66 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/_global.css
+42 -29
View File
@@ -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));
}
app/assets/stylesheets/cards.css
+9 -4
View File
@@ -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 {
app/models/colorable.rb
+15 -2
View File
@@ -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