Skip to content

Commit a5b1c7e

Browse files
etewiahclaude
etewiah
and
claude
committed
Update theme headers/footers to use semantic palette classes
Replace hardcoded color classes with semantic pwb-* palette classes so headers and footers respond to palette color changes. Theme color mappings: - Primary brand colors → pwb-primary, pwb-primary-* - Secondary/dark colors → pwb-secondary-* - Accent/highlight colors → pwb-accent, pwb-accent-* Updated themes: - default: bg-gray-800 → bg-pwb-secondary-800, bg-blue-600 → bg-pwb-primary - brisbane: luxury-navy → pwb-secondary-*, luxury-gold → pwb-accent - bologna: terra-* → pwb-primary-*, olive-* → pwb-secondary-* - barcelona: med-* → pwb-primary/secondary-*, gold-* → pwb-accent-* - biarritz: Already uses CSS variables, no changes needed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent be50290 commit a5b1c7e

File tree

13 files changed

+299
-301
lines changed

13 files changed

+299
-301
lines changed

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

Lines changed: 26 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1628,6 +1628,12 @@
16281628
.border-white {
16291629
border-color: var(--color-white);
16301630
}
1631+
.border-white\/20 {
1632+
border-color: color-mix(in srgb, #fff 20%, transparent);
1633+
@supports (color: color-mix(in lab, red, red)) {
1634+
border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
1635+
}
1636+
}
16311637
.border-yellow-100 {
16321638
border-color: var(--color-yellow-100);
16331639
}
@@ -2759,6 +2765,18 @@
27592765
.text-white {
27602766
color: var(--color-white);
27612767
}
2768+
.text-white\/40 {
2769+
color: color-mix(in srgb, #fff 40%, transparent);
2770+
@supports (color: color-mix(in lab, red, red)) {
2771+
color: color-mix(in oklab, var(--color-white) 40%, transparent);
2772+
}
2773+
}
2774+
.text-white\/50 {
2775+
color: color-mix(in srgb, #fff 50%, transparent);
2776+
@supports (color: color-mix(in lab, red, red)) {
2777+
color: color-mix(in oklab, var(--color-white) 50%, transparent);
2778+
}
2779+
}
27622780
.text-white\/70 {
27632781
color: color-mix(in srgb, #fff 70%, transparent);
27642782
@supports (color: color-mix(in lab, red, red)) {
@@ -2826,6 +2844,14 @@
28262844
color: var(--color-warm-400);
28272845
}
28282846
}
2847+
.placeholder-white\/40 {
2848+
&::placeholder {
2849+
color: color-mix(in srgb, #fff 40%, transparent);
2850+
@supports (color: color-mix(in lab, red, red)) {
2851+
color: color-mix(in oklab, var(--color-white) 40%, transparent);
2852+
}
2853+
}
2854+
}
28292855
.accent-blue-600 {
28302856
accent-color: var(--color-blue-600);
28312857
}
@@ -3164,16 +3190,6 @@
31643190
}
31653191
}
31663192
}
3167-
.group-hover\:bg-terra-500\/20 {
3168-
&:is(:where(.group):hover *) {
3169-
@media (hover: hover) {
3170-
background-color: color-mix(in srgb, #B8503E 20%, transparent);
3171-
@supports (color: color-mix(in lab, red, red)) {
3172-
background-color: color-mix(in oklab, var(--color-terra-500) 20%, transparent);
3173-
}
3174-
}
3175-
}
3176-
}
31773193
.group-hover\:bg-white\/50 {
31783194
&:is(:where(.group):hover *) {
31793195
@media (hover: hover) {
@@ -3846,13 +3862,6 @@
38463862
}
38473863
}
38483864
}
3849-
.hover\:bg-med-200 {
3850-
&:hover {
3851-
@media (hover: hover) {
3852-
background-color: var(--color-med-200);
3853-
}
3854-
}
3855-
}
38563865
.hover\:bg-med-600 {
38573866
&:hover {
38583867
@media (hover: hover) {
@@ -4312,13 +4321,6 @@
43124321
}
43134322
}
43144323
}
4315-
.hover\:text-terra-300 {
4316-
&:hover {
4317-
@media (hover: hover) {
4318-
color: var(--color-terra-300);
4319-
}
4320-
}
4321-
}
43224324
.hover\:text-terra-400 {
43234325
&:hover {
43244326
@media (hover: hover) {
@@ -4772,16 +4774,6 @@
47724774
--tw-ring-color: var(--color-blue-500);
47734775
}
47744776
}
4775-
.focus-visible\:ring-med-500 {
4776-
&:focus-visible {
4777-
--tw-ring-color: var(--color-med-500);
4778-
}
4779-
}
4780-
.focus-visible\:ring-terra-500 {
4781-
&:focus-visible {
4782-
--tw-ring-color: var(--color-terra-500);
4783-
}
4784-
}
47854777
.active\:cursor-grabbing {
47864778
&:active {
47874779
cursor: grabbing;

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1532,6 +1532,12 @@
15321532
.border-white {
15331533
border-color: var(--color-white);
15341534
}
1535+
.border-white\/20 {
1536+
border-color: color-mix(in srgb, #fff 20%, transparent);
1537+
@supports (color: color-mix(in lab, red, red)) {
1538+
border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
1539+
}
1540+
}
15351541
.border-yellow-100 {
15361542
border-color: var(--color-yellow-100);
15371543
}
@@ -2412,6 +2418,18 @@
24122418
.text-white {
24132419
color: var(--color-white);
24142420
}
2421+
.text-white\/40 {
2422+
color: color-mix(in srgb, #fff 40%, transparent);
2423+
@supports (color: color-mix(in lab, red, red)) {
2424+
color: color-mix(in oklab, var(--color-white) 40%, transparent);
2425+
}
2426+
}
2427+
.text-white\/50 {
2428+
color: color-mix(in srgb, #fff 50%, transparent);
2429+
@supports (color: color-mix(in lab, red, red)) {
2430+
color: color-mix(in oklab, var(--color-white) 50%, transparent);
2431+
}
2432+
}
24152433
.text-white\/70 {
24162434
color: color-mix(in srgb, #fff 70%, transparent);
24172435
@supports (color: color-mix(in lab, red, red)) {
@@ -2469,6 +2487,14 @@
24692487
color: var(--color-gray-400);
24702488
}
24712489
}
2490+
.placeholder-white\/40 {
2491+
&::placeholder {
2492+
color: color-mix(in srgb, #fff 40%, transparent);
2493+
@supports (color: color-mix(in lab, red, red)) {
2494+
color: color-mix(in oklab, var(--color-white) 40%, transparent);
2495+
}
2496+
}
2497+
}
24722498
.accent-blue-600 {
24732499
accent-color: var(--color-blue-600);
24742500
}

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

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1607,6 +1607,12 @@
16071607
.border-white {
16081608
border-color: var(--color-white);
16091609
}
1610+
.border-white\/20 {
1611+
border-color: color-mix(in srgb, #fff 20%, transparent);
1612+
@supports (color: color-mix(in lab, red, red)) {
1613+
border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
1614+
}
1615+
}
16101616
.border-yellow-100 {
16111617
border-color: var(--color-yellow-100);
16121618
}
@@ -2644,6 +2650,18 @@
26442650
.text-white {
26452651
color: var(--color-white);
26462652
}
2653+
.text-white\/40 {
2654+
color: color-mix(in srgb, #fff 40%, transparent);
2655+
@supports (color: color-mix(in lab, red, red)) {
2656+
color: color-mix(in oklab, var(--color-white) 40%, transparent);
2657+
}
2658+
}
2659+
.text-white\/50 {
2660+
color: color-mix(in srgb, #fff 50%, transparent);
2661+
@supports (color: color-mix(in lab, red, red)) {
2662+
color: color-mix(in oklab, var(--color-white) 50%, transparent);
2663+
}
2664+
}
26472665
.text-white\/70 {
26482666
color: color-mix(in srgb, #fff 70%, transparent);
26492667
@supports (color: color-mix(in lab, red, red)) {
@@ -2706,6 +2724,14 @@
27062724
color: var(--color-warm-gray-500);
27072725
}
27082726
}
2727+
.placeholder-white\/40 {
2728+
&::placeholder {
2729+
color: color-mix(in srgb, #fff 40%, transparent);
2730+
@supports (color: color-mix(in lab, red, red)) {
2731+
color: color-mix(in oklab, var(--color-white) 40%, transparent);
2732+
}
2733+
}
2734+
}
27092735
.accent-blue-600 {
27102736
accent-color: var(--color-blue-600);
27112737
}
@@ -3015,16 +3041,6 @@
30153041
}
30163042
}
30173043
}
3018-
.group-hover\:bg-terra-500\/20 {
3019-
&:is(:where(.group):hover *) {
3020-
@media (hover: hover) {
3021-
background-color: color-mix(in srgb, #c45d3e 20%, transparent);
3022-
@supports (color: color-mix(in lab, red, red)) {
3023-
background-color: color-mix(in oklab, var(--color-terra-500) 20%, transparent);
3024-
}
3025-
}
3026-
}
3027-
}
30283044
.group-hover\:bg-white\/50 {
30293045
&:is(:where(.group):hover *) {
30303046
@media (hover: hover) {
@@ -3669,13 +3685,6 @@
36693685
}
36703686
}
36713687
}
3672-
.hover\:bg-olive-200 {
3673-
&:hover {
3674-
@media (hover: hover) {
3675-
background-color: var(--color-olive-200);
3676-
}
3677-
}
3678-
}
36793688
.hover\:bg-olive-600 {
36803689
&:hover {
36813690
@media (hover: hover) {
@@ -4068,13 +4077,6 @@
40684077
}
40694078
}
40704079
}
4071-
.hover\:text-terra-300 {
4072-
&:hover {
4073-
@media (hover: hover) {
4074-
color: var(--color-terra-300);
4075-
}
4076-
}
4077-
}
40784080
.hover\:text-terra-400 {
40794081
&:hover {
40804082
@media (hover: hover) {
@@ -4506,11 +4508,6 @@
45064508
--tw-ring-color: var(--color-blue-500);
45074509
}
45084510
}
4509-
.focus-visible\:ring-terra-500 {
4510-
&:focus-visible {
4511-
--tw-ring-color: var(--color-terra-500);
4512-
}
4513-
}
45144511
.active\:cursor-grabbing {
45154512
&:active {
45164513
cursor: grabbing;

0 commit comments

Comments
 (0)