Skip to content

Commit 0e0e5bd

Browse files
etewiahclaude
etewiah
and
claude
committed
Enable dynamic palette colors in Bologna theme
The Bologna theme's Tailwind classes (bg-terra-500, text-terra-600, etc.) were compiled with hardcoded hex values, ignoring the palette CSS variables set by the palette selection system. Added dynamic palette color override section to tailwind-bologna.css that maps Tailwind color variables to the CSS variables set by _bologna.css.erb: - --color-terra-* now references --bologna-terra (primary color) - --color-olive-* now references --bologna-olive (secondary color) - --color-sand-* now references --bologna-sand (accent color) Uses CSS color-mix() to generate lighter/darker shades from the base palette color, enabling full palette switching without rebuilding Tailwind. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 5c2d7b4 commit 0e0e5bd

File tree

2 files changed

+165
-0
lines changed

2 files changed

+165
-0
lines changed

‎app/assets/builds/tailwind-bologna.css‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5530,6 +5530,122 @@
55305530
src: url(./files/outfit-latin-wght-normal.woff2) format('woff2-variations');
55315531
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
55325532
}
5533+
:root {
5534+
--color-terra-500: var(--bologna-terra, #c45d3e);
5535+
--color-terra-50: var(--bologna-terra, #c45d3e);
5536+
@supports (color: color-mix(in lab, red, red)) {
5537+
--color-terra-50: color-mix(in srgb, var(--bologna-terra, #c45d3e) 10%, white);
5538+
}
5539+
--color-terra-100: var(--bologna-terra, #c45d3e);
5540+
@supports (color: color-mix(in lab, red, red)) {
5541+
--color-terra-100: color-mix(in srgb, var(--bologna-terra, #c45d3e) 20%, white);
5542+
}
5543+
--color-terra-200: var(--bologna-terra, #c45d3e);
5544+
@supports (color: color-mix(in lab, red, red)) {
5545+
--color-terra-200: color-mix(in srgb, var(--bologna-terra, #c45d3e) 35%, white);
5546+
}
5547+
--color-terra-300: var(--bologna-terra, #c45d3e);
5548+
@supports (color: color-mix(in lab, red, red)) {
5549+
--color-terra-300: color-mix(in srgb, var(--bologna-terra, #c45d3e) 50%, white);
5550+
}
5551+
--color-terra-400: var(--bologna-terra, #c45d3e);
5552+
@supports (color: color-mix(in lab, red, red)) {
5553+
--color-terra-400: color-mix(in srgb, var(--bologna-terra, #c45d3e) 70%, white);
5554+
}
5555+
--color-terra-600: var(--bologna-terra, #c45d3e);
5556+
@supports (color: color-mix(in lab, red, red)) {
5557+
--color-terra-600: color-mix(in srgb, var(--bologna-terra, #c45d3e) 85%, black);
5558+
}
5559+
--color-terra-700: var(--bologna-terra, #c45d3e);
5560+
@supports (color: color-mix(in lab, red, red)) {
5561+
--color-terra-700: color-mix(in srgb, var(--bologna-terra, #c45d3e) 70%, black);
5562+
}
5563+
--color-terra-800: var(--bologna-terra, #c45d3e);
5564+
@supports (color: color-mix(in lab, red, red)) {
5565+
--color-terra-800: color-mix(in srgb, var(--bologna-terra, #c45d3e) 55%, black);
5566+
}
5567+
--color-terra-900: var(--bologna-terra, #c45d3e);
5568+
@supports (color: color-mix(in lab, red, red)) {
5569+
--color-terra-900: color-mix(in srgb, var(--bologna-terra, #c45d3e) 40%, black);
5570+
}
5571+
--color-olive-500: var(--bologna-olive, #5c6b4d);
5572+
--color-olive-50: var(--bologna-olive, #5c6b4d);
5573+
@supports (color: color-mix(in lab, red, red)) {
5574+
--color-olive-50: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 10%, white);
5575+
}
5576+
--color-olive-100: var(--bologna-olive, #5c6b4d);
5577+
@supports (color: color-mix(in lab, red, red)) {
5578+
--color-olive-100: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 20%, white);
5579+
}
5580+
--color-olive-200: var(--bologna-olive, #5c6b4d);
5581+
@supports (color: color-mix(in lab, red, red)) {
5582+
--color-olive-200: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 35%, white);
5583+
}
5584+
--color-olive-300: var(--bologna-olive, #5c6b4d);
5585+
@supports (color: color-mix(in lab, red, red)) {
5586+
--color-olive-300: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 50%, white);
5587+
}
5588+
--color-olive-400: var(--bologna-olive, #5c6b4d);
5589+
@supports (color: color-mix(in lab, red, red)) {
5590+
--color-olive-400: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 70%, white);
5591+
}
5592+
--color-olive-600: var(--bologna-olive, #5c6b4d);
5593+
@supports (color: color-mix(in lab, red, red)) {
5594+
--color-olive-600: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 85%, black);
5595+
}
5596+
--color-olive-700: var(--bologna-olive, #5c6b4d);
5597+
@supports (color: color-mix(in lab, red, red)) {
5598+
--color-olive-700: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 70%, black);
5599+
}
5600+
--color-olive-800: var(--bologna-olive, #5c6b4d);
5601+
@supports (color: color-mix(in lab, red, red)) {
5602+
--color-olive-800: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 55%, black);
5603+
}
5604+
--color-olive-900: var(--bologna-olive, #5c6b4d);
5605+
@supports (color: color-mix(in lab, red, red)) {
5606+
--color-olive-900: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 40%, black);
5607+
}
5608+
--color-sand-400: var(--bologna-sand, #d4a574);
5609+
--color-sand-500: var(--bologna-sand, #d4a574);
5610+
@supports (color: color-mix(in lab, red, red)) {
5611+
--color-sand-500: color-mix(in srgb, var(--bologna-sand, #d4a574) 90%, black);
5612+
}
5613+
--color-sand-50: var(--bologna-sand, #d4a574);
5614+
@supports (color: color-mix(in lab, red, red)) {
5615+
--color-sand-50: color-mix(in srgb, var(--bologna-sand, #d4a574) 10%, white);
5616+
}
5617+
--color-sand-100: var(--bologna-sand, #d4a574);
5618+
@supports (color: color-mix(in lab, red, red)) {
5619+
--color-sand-100: color-mix(in srgb, var(--bologna-sand, #d4a574) 20%, white);
5620+
}
5621+
--color-sand-200: var(--bologna-sand, #d4a574);
5622+
@supports (color: color-mix(in lab, red, red)) {
5623+
--color-sand-200: color-mix(in srgb, var(--bologna-sand, #d4a574) 35%, white);
5624+
}
5625+
--color-sand-300: var(--bologna-sand, #d4a574);
5626+
@supports (color: color-mix(in lab, red, red)) {
5627+
--color-sand-300: color-mix(in srgb, var(--bologna-sand, #d4a574) 50%, white);
5628+
}
5629+
--color-sand-600: var(--bologna-sand, #d4a574);
5630+
@supports (color: color-mix(in lab, red, red)) {
5631+
--color-sand-600: color-mix(in srgb, var(--bologna-sand, #d4a574) 75%, black);
5632+
}
5633+
--color-sand-700: var(--bologna-sand, #d4a574);
5634+
@supports (color: color-mix(in lab, red, red)) {
5635+
--color-sand-700: color-mix(in srgb, var(--bologna-sand, #d4a574) 60%, black);
5636+
}
5637+
--color-sand-800: var(--bologna-sand, #d4a574);
5638+
@supports (color: color-mix(in lab, red, red)) {
5639+
--color-sand-800: color-mix(in srgb, var(--bologna-sand, #d4a574) 45%, black);
5640+
}
5641+
--color-sand-900: var(--bologna-sand, #d4a574);
5642+
@supports (color: color-mix(in lab, red, red)) {
5643+
--color-sand-900: color-mix(in srgb, var(--bologna-sand, #d4a574) 30%, black);
5644+
}
5645+
--color-primary: var(--bologna-terra, #c45d3e);
5646+
--color-secondary: var(--bologna-olive, #5c6b4d);
5647+
--color-accent: var(--bologna-sand, #d4a574);
5648+
}
55335649
@keyframes fadeUp {
55345650
0% {
55355651
opacity: 0;

‎app/assets/stylesheets/tailwind-bologna.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,55 @@
8484
--animate-slide-in: slideIn 0.4s ease-out forwards;
8585
}
8686

87+
/* ==========================================================================
88+
Dynamic Palette Color Overrides
89+
These override the static Tailwind colors with CSS variables set by the
90+
palette system at runtime. This enables palette switching without rebuilding.
91+
========================================================================== */
92+
:root {
93+
/* Terra palette - uses dynamic primary color from palette system */
94+
/* The --bologna-terra variable is set by _bologna.css.erb from style_variables["primary_color"] */
95+
--color-terra-500: var(--bologna-terra, #c45d3e);
96+
--color-terra-50: color-mix(in srgb, var(--bologna-terra, #c45d3e) 10%, white);
97+
--color-terra-100: color-mix(in srgb, var(--bologna-terra, #c45d3e) 20%, white);
98+
--color-terra-200: color-mix(in srgb, var(--bologna-terra, #c45d3e) 35%, white);
99+
--color-terra-300: color-mix(in srgb, var(--bologna-terra, #c45d3e) 50%, white);
100+
--color-terra-400: color-mix(in srgb, var(--bologna-terra, #c45d3e) 70%, white);
101+
--color-terra-600: color-mix(in srgb, var(--bologna-terra, #c45d3e) 85%, black);
102+
--color-terra-700: color-mix(in srgb, var(--bologna-terra, #c45d3e) 70%, black);
103+
--color-terra-800: color-mix(in srgb, var(--bologna-terra, #c45d3e) 55%, black);
104+
--color-terra-900: color-mix(in srgb, var(--bologna-terra, #c45d3e) 40%, black);
105+
106+
/* Olive palette - uses dynamic secondary color from palette system */
107+
--color-olive-500: var(--bologna-olive, #5c6b4d);
108+
--color-olive-50: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 10%, white);
109+
--color-olive-100: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 20%, white);
110+
--color-olive-200: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 35%, white);
111+
--color-olive-300: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 50%, white);
112+
--color-olive-400: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 70%, white);
113+
--color-olive-600: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 85%, black);
114+
--color-olive-700: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 70%, black);
115+
--color-olive-800: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 55%, black);
116+
--color-olive-900: color-mix(in srgb, var(--bologna-olive, #5c6b4d) 40%, black);
117+
118+
/* Sand/Accent palette - uses dynamic accent color from palette system */
119+
--color-sand-400: var(--bologna-sand, #d4a574);
120+
--color-sand-500: color-mix(in srgb, var(--bologna-sand, #d4a574) 90%, black);
121+
--color-sand-50: color-mix(in srgb, var(--bologna-sand, #d4a574) 10%, white);
122+
--color-sand-100: color-mix(in srgb, var(--bologna-sand, #d4a574) 20%, white);
123+
--color-sand-200: color-mix(in srgb, var(--bologna-sand, #d4a574) 35%, white);
124+
--color-sand-300: color-mix(in srgb, var(--bologna-sand, #d4a574) 50%, white);
125+
--color-sand-600: color-mix(in srgb, var(--bologna-sand, #d4a574) 75%, black);
126+
--color-sand-700: color-mix(in srgb, var(--bologna-sand, #d4a574) 60%, black);
127+
--color-sand-800: color-mix(in srgb, var(--bologna-sand, #d4a574) 45%, black);
128+
--color-sand-900: color-mix(in srgb, var(--bologna-sand, #d4a574) 30%, black);
129+
130+
/* Primary/secondary/accent shortcuts */
131+
--color-primary: var(--bologna-terra, #c45d3e);
132+
--color-secondary: var(--bologna-olive, #5c6b4d);
133+
--color-accent: var(--bologna-sand, #d4a574);
134+
}
135+
87136
/* Keyframes */
88137
@keyframes fadeUp {
89138
0% { opacity: 0; transform: translateY(20px); }

0 commit comments

Comments
 (0)