Skip to content

Commit 1bd10ed

Browse files
etewiahetewiah
committed
Fix: Standardize theme CSS to use dynamic palette variables
1 parent 0e0e5bd commit 1bd10ed

File tree

8 files changed

+214
-169
lines changed

8 files changed

+214
-169
lines changed

‎app/views/pwb/custom_css/_barcelona.css.erb‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,66 +7,66 @@
77
<%= render partial: '/pwb/custom_css/base_variables', locals: {} %>
88

99
:root {
10-
/* Primary Colors - from palette with fallbacks */
11-
--barcelona-med: <%= @current_website.style_variables["primary_color"] || "#0B5394" %>;
12-
--barcelona-terra: <%= @current_website.style_variables["secondary_color"] || "#B8503E" %>;
13-
--barcelona-gold: <%= @current_website.style_variables["accent_color"] || "#E5B45A" %>;
14-
--barcelona-warm: <%= @current_website.style_variables["text_color"] || "#2D3436" %>;
15-
--barcelona-light: <%= @current_website.style_variables["background_color"] || @current_website.style_variables["light_color"] || "#FEFCF9" %>;
16-
17-
/* Extended Mediterranean Blue Palette - derived using color-mix */
18-
--barcelona-med-50: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 5%, white);
19-
--barcelona-med-100: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 15%, white);
20-
--barcelona-med-200: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 25%, white);
21-
--barcelona-med-300: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 40%, white);
22-
--barcelona-med-400: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 60%, white);
23-
--barcelona-med-500: var(--barcelona-med);
24-
--barcelona-med-600: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 85%, black);
25-
--barcelona-med-700: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 70%, black);
26-
--barcelona-med-800: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 55%, black);
27-
--barcelona-med-900: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 40%, black);
28-
29-
/* Extended Terracotta Palette - derived using color-mix */
30-
--barcelona-terra-50: color-mix(in srgb, <%= @current_website.style_variables["secondary_color"] || "#B8503E" %> 5%, white);
31-
--barcelona-terra-100: color-mix(in srgb, <%= @current_website.style_variables["secondary_color"] || "#B8503E" %> 15%, white);
32-
--barcelona-terra-200: color-mix(in srgb, <%= @current_website.style_variables["secondary_color"] || "#B8503E" %> 25%, white);
33-
--barcelona-terra-300: color-mix(in srgb, <%= @current_website.style_variables["secondary_color"] || "#B8503E" %> 40%, white);
34-
--barcelona-terra-400: color-mix(in srgb, <%= @current_website.style_variables["secondary_color"] || "#B8503E" %> 70%, white);
35-
--barcelona-terra-500: var(--barcelona-terra);
36-
--barcelona-terra-600: color-mix(in srgb, <%= @current_website.style_variables["secondary_color"] || "#B8503E" %> 80%, black);
37-
38-
/* Extended Gold Palette - derived using color-mix */
39-
--barcelona-gold-50: color-mix(in srgb, <%= @current_website.style_variables["accent_color"] || "#E5B45A" %> 5%, white);
40-
--barcelona-gold-100: color-mix(in srgb, <%= @current_website.style_variables["accent_color"] || "#E5B45A" %> 15%, white);
41-
--barcelona-gold-200: color-mix(in srgb, <%= @current_website.style_variables["accent_color"] || "#E5B45A" %> 30%, white);
42-
--barcelona-gold-300: color-mix(in srgb, <%= @current_website.style_variables["accent_color"] || "#E5B45A" %> 50%, white);
43-
--barcelona-gold-400: var(--barcelona-gold);
44-
--barcelona-gold-500: color-mix(in srgb, <%= @current_website.style_variables["accent_color"] || "#E5B45A" %> 80%, black);
45-
46-
/* Footer Colors - from palette */
47-
--footer-bg-color: <%= @current_website.style_variables["footer_bg_color"] || "var(--barcelona-med-900)" %>;
48-
--footer-text-color: <%= @current_website.style_variables["footer_text_color"] || @current_website.style_variables["footer_main_text_color"] || "#d5d0c8" %>;
10+
/* Primary Colors - Mapped to PWB Standard Variables */
11+
--barcelona-med: var(--pwb-primary-color);
12+
--barcelona-terra: var(--pwb-secondary-color);
13+
--barcelona-gold: var(--pwb-accent-color);
14+
--barcelona-warm: var(--pwb-text-color);
15+
--barcelona-light: var(--pwb-background-color);
16+
17+
/* Extended Mediterranean Blue Palette - Mapped to PWB Dynamic Shades */
18+
--barcelona-med-50: var(--pwb-primary-50);
19+
--barcelona-med-100: var(--pwb-primary-100);
20+
--barcelona-med-200: var(--pwb-primary-200);
21+
--barcelona-med-300: var(--pwb-primary-300);
22+
--barcelona-med-400: var(--pwb-primary-400);
23+
--barcelona-med-500: var(--pwb-primary-500);
24+
--barcelona-med-600: var(--pwb-primary-600);
25+
--barcelona-med-700: var(--pwb-primary-700);
26+
--barcelona-med-800: var(--pwb-primary-800);
27+
--barcelona-med-900: var(--pwb-primary-900);
28+
29+
/* Extended Terracotta Palette - Mapped to PWB Dynamic Shades */
30+
--barcelona-terra-50: var(--pwb-secondary-50);
31+
--barcelona-terra-100: var(--pwb-secondary-100);
32+
--barcelona-terra-200: var(--pwb-secondary-200);
33+
--barcelona-terra-300: var(--pwb-secondary-300);
34+
--barcelona-terra-400: var(--pwb-secondary-400);
35+
--barcelona-terra-500: var(--pwb-secondary-500);
36+
--barcelona-terra-600: var(--pwb-secondary-600);
37+
38+
/* Extended Gold Palette - Mapped to PWB Dynamic Shades */
39+
--barcelona-gold-50: var(--pwb-accent-50);
40+
--barcelona-gold-100: var(--pwb-accent-100);
41+
--barcelona-gold-200: var(--pwb-accent-200);
42+
--barcelona-gold-300: var(--pwb-accent-300);
43+
--barcelona-gold-400: var(--pwb-accent-400);
44+
--barcelona-gold-500: var(--pwb-accent-500);
45+
46+
/* Footer Colors */
47+
--footer-bg-color: var(--pwb-footer-background-color);
48+
--footer-text-color: var(--pwb-footer-text-color);
4949
--footer-link-color: var(--barcelona-gold-400);
5050
--footer-link-hover-color: var(--barcelona-gold-300);
5151

52-
/* Action Colors - from palette */
53-
--action-color: <%= @current_website.style_variables["action_color"] || "var(--barcelona-med)" %>;
52+
/* Action Colors */
53+
--action-color: var(--pwb-primary-color);
5454

55-
/* Typography - from palette */
55+
/* Typography */
5656
--font-display: <%= @current_website.style_variables["font_primary"] || "Cormorant Garamond" %>;
5757
--font-body: <%= @current_website.style_variables["font_secondary"] || "Montserrat" %>;
5858

59-
/* Spacing & Sizing - from palette */
59+
/* Spacing & Sizing */
6060
--border-radius-soft: <%= @current_website.style_variables["border_radius"] || "12px" %>;
6161
--border-radius-softer: 16px;
6262
--border-radius-pill: 9999px;
6363
--container-padding: <%= @current_website.style_variables["container_padding"] || "1rem" %>;
6464

65-
/* Soft Shadows - using primary color for tinted shadows */
66-
--shadow-soft: 0 4px 24px -4px color-mix(in srgb, <%= @current_website.style_variables["text_color"] || "#2D3436" %> 8%, transparent);
67-
--shadow-medium: 0 8px 32px -8px color-mix(in srgb, <%= @current_website.style_variables["text_color"] || "#2D3436" %> 12%, transparent);
68-
--shadow-elevated: 0 16px 48px -12px color-mix(in srgb, <%= @current_website.style_variables["text_color"] || "#2D3436" %> 16%, transparent);
69-
--shadow-glow: 0 0 40px color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0B5394" %> 15%, transparent);
65+
/* Soft Shadows */
66+
--shadow-soft: 0 4px 24px -4px color-mix(in srgb, var(--pwb-text-color) 8%, transparent);
67+
--shadow-medium: 0 8px 32px -8px color-mix(in srgb, var(--pwb-text-color) 12%, transparent);
68+
--shadow-elevated: 0 16px 48px -12px color-mix(in srgb, var(--pwb-text-color) 16%, transparent);
69+
--shadow-glow: 0 0 40px color-mix(in srgb, var(--pwb-primary-color) 15%, transparent);
7070
}
7171

7272
/* ============================================

‎app/views/pwb/custom_css/_base_variables.css.erb‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -56,48 +56,49 @@
5656
%>
5757

5858
:root {
59-
/* ===== Color System ===== */
60-
--pwb-primary: <%= primary_color %>;
61-
--pwb-primary-light: color-mix(in srgb, <%= primary_color %> 70%, white);
62-
--pwb-primary-dark: color-mix(in srgb, <%= primary_color %> 70%, black);
59+
/* ===== Color System - Mapped to PWB Standard Variables ===== */
60+
--pwb-primary: var(--pwb-primary-color);
61+
--pwb-primary-light: var(--pwb-primary-100);
62+
--pwb-primary-dark: var(--pwb-primary-700);
63+
/* RGB fallback for legacy support */
6364
--pwb-primary-rgb: <%= primary_color.gsub('#', '').scan(/../).map { |c| c.to_i(16) }.join(', ') rescue '233, 27, 35' %>;
6465

65-
--pwb-secondary: <%= secondary_color %>;
66-
--pwb-secondary-light: color-mix(in srgb, <%= secondary_color %> 70%, white);
67-
--pwb-secondary-dark: color-mix(in srgb, <%= secondary_color %> 70%, black);
66+
--pwb-secondary: var(--pwb-secondary-color);
67+
--pwb-secondary-light: var(--pwb-secondary-100);
68+
--pwb-secondary-dark: var(--pwb-secondary-700);
6869

69-
--pwb-accent: <%= accent_color %>;
70-
--pwb-accent-light: color-mix(in srgb, <%= accent_color %> 70%, white);
71-
--pwb-accent-dark: color-mix(in srgb, <%= accent_color %> 70%, black);
70+
--pwb-accent: var(--pwb-accent-color);
71+
--pwb-accent-light: var(--pwb-accent-100);
72+
--pwb-accent-dark: var(--pwb-accent-700);
7273

7374
/* Status colors */
74-
--pwb-success: #28a745;
75-
--pwb-warning: #ffc107;
76-
--pwb-danger: #dc3545;
75+
--pwb-success: var(--pwb-success-color, #28a745);
76+
--pwb-warning: var(--pwb-warning-color, #ffc107);
77+
--pwb-danger: var(--pwb-error-color, #dc3545);
7778
--pwb-info: #17a2b8;
7879

7980
/* Background colors */
80-
--pwb-bg-light: <%= bg_light %>;
81+
--pwb-bg-light: var(--pwb-surface-alt-color, <%= bg_light %>);
8182
--pwb-bg-dark: <%= bg_dark %>;
82-
--pwb-bg-body: #ffffff;
83-
--pwb-bg-surface: #ffffff;
84-
--pwb-bg-muted: #f1f3f4;
83+
--pwb-bg-body: var(--pwb-background-color, #ffffff);
84+
--pwb-bg-surface: var(--pwb-surface-color, #ffffff);
85+
--pwb-bg-muted: var(--pwb-surface-alt-color, #f1f3f4);
8586

8687
/* Text colors */
87-
--pwb-text-primary: <%= text_primary %>;
88-
--pwb-text-secondary: <%= text_secondary %>;
89-
--pwb-text-muted: #9ca3af;
88+
--pwb-text-primary: var(--pwb-text-color, <%= text_primary %>);
89+
--pwb-text-secondary: var(--pwb-muted-text-color, <%= text_secondary %>);
90+
--pwb-text-muted: var(--pwb-muted-text-color, #9ca3af);
9091
--pwb-text-light: <%= text_light %>;
9192
--pwb-text-on-primary: #ffffff;
9293
--pwb-text-on-secondary: #ffffff;
9394

9495
/* Border colors */
95-
--pwb-border-color: #e5e7eb;
96+
--pwb-border-color: var(--pwb-border-color, #e5e7eb);
9697
--pwb-border-color-dark: #d1d5db;
9798

9899
/* Footer */
99-
--pwb-footer-bg: <%= footer_bg %>;
100-
--pwb-footer-text: <%= footer_text %>;
100+
--pwb-footer-bg: var(--pwb-footer-background-color, <%= footer_bg %>);
101+
--pwb-footer-text: var(--pwb-footer-text-color, <%= footer_text %>);
101102
--pwb-footer-link: <%= footer_link %>;
102103

103104
/* ===== Typography ===== */

‎app/views/pwb/custom_css/_biarritz.css.erb‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -17,36 +17,36 @@
1717

1818
/* WCAG AA Compliant Color System - Using Palette Variables */
1919
:root {
20-
/* Primary Ocean Colors - from palette with fallbacks */
21-
--biarritz-ocean: <%= @current_website.style_variables["primary_color"] || "#0369A1" %>;
22-
--biarritz-sand: <%= @current_website.style_variables["secondary_color"] || "#D97706" %>;
23-
--biarritz-sunset: <%= @current_website.style_variables["accent_color"] || "#F59E0B" %>;
24-
--biarritz-bg: <%= @current_website.style_variables["background_color"] || "#FAFAF9" %>;
25-
--biarritz-text: <%= @current_website.style_variables["text_color"] || "#1C1917" %>;
26-
27-
/* Derived Ocean shades using color-mix */
28-
--ocean-darker: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0369A1" %> 60%, black);
29-
--ocean-dark: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0369A1" %> 80%, black);
30-
--ocean-primary: <%= @current_website.style_variables["primary_color"] || "#0369A1" %>;
31-
--ocean-light: color-mix(in srgb, <%= @current_website.style_variables["primary_color"] || "#0369A1" %> 15%, white);
32-
33-
/* Derived Sand shades using color-mix */
34-
--sand-dark: color-mix(in srgb, <%= @current_website.style_variables["secondary_color"] || "#D97706" %> 70%, black);
35-
--sand-primary: <%= @current_website.style_variables["secondary_color"] || "#D97706" %>;
36-
--sand-light: color-mix(in srgb, <%= @current_website.style_variables["secondary_color"] || "#D97706" %> 15%, white);
37-
38-
/* Derived Sunset shades using color-mix */
39-
--sunset-dark: color-mix(in srgb, <%= @current_website.style_variables["accent_color"] || "#F59E0B" %> 70%, black);
40-
--sunset-primary: <%= @current_website.style_variables["accent_color"] || "#F59E0B" %>;
41-
--sunset-light: color-mix(in srgb, <%= @current_website.style_variables["accent_color"] || "#F59E0B" %> 15%, white);
20+
/* Primary Ocean Colors - Mapped to PWB Standard Variables */
21+
--biarritz-ocean: var(--pwb-primary-color);
22+
--biarritz-sand: var(--pwb-secondary-color);
23+
--biarritz-sunset: var(--pwb-accent-color);
24+
--biarritz-bg: var(--pwb-background-color);
25+
--biarritz-text: var(--pwb-text-color);
26+
27+
/* Derived Ocean shades - Mapped to PWB Dynamic Shades */
28+
--ocean-darker: var(--pwb-primary-800);
29+
--ocean-dark: var(--pwb-primary-700);
30+
--ocean-primary: var(--pwb-primary-color);
31+
--ocean-light: var(--pwb-primary-100);
32+
33+
/* Derived Sand shades - Mapped to PWB Dynamic Shades */
34+
--sand-dark: var(--pwb-secondary-700);
35+
--sand-primary: var(--pwb-secondary-color);
36+
--sand-light: var(--pwb-secondary-100);
37+
38+
/* Derived Sunset shades - Mapped to PWB Dynamic Shades */
39+
--sunset-dark: var(--pwb-accent-700);
40+
--sunset-primary: var(--pwb-accent-color);
41+
--sunset-light: var(--pwb-accent-100);
4242

4343
/* Neutral colors - derived from text color */
44-
--neutral-900: <%= @current_website.style_variables["text_color"] || "#1C1917" %>;
45-
--neutral-800: color-mix(in srgb, <%= @current_website.style_variables["text_color"] || "#1C1917" %> 85%, white);
46-
--neutral-700: color-mix(in srgb, <%= @current_website.style_variables["text_color"] || "#1C1917" %> 65%, white);
47-
--neutral-200: color-mix(in srgb, <%= @current_website.style_variables["text_color"] || "#1C1917" %> 15%, white);
48-
--neutral-100: color-mix(in srgb, <%= @current_website.style_variables["background_color"] || "#FAFAF9" %> 95%, <%= @current_website.style_variables["text_color"] || "#1C1917" %>);
49-
--neutral-50: <%= @current_website.style_variables["background_color"] || "#FAFAF9" %>;
44+
--neutral-900: var(--pwb-text-color);
45+
--neutral-800: color-mix(in srgb, var(--pwb-text-color) 85%, white);
46+
--neutral-700: color-mix(in srgb, var(--pwb-text-color) 65%, white);
47+
--neutral-200: color-mix(in srgb, var(--pwb-text-color) 15%, white);
48+
--neutral-100: color-mix(in srgb, var(--pwb-background-color) 95%, var(--pwb-text-color));
49+
--neutral-50: var(--pwb-background-color);
5050

5151
--danger-red: #B91C1C; /* Red for destructive actions */
5252
--light-gray-text: #D4D4D8; /* Light gray for footer text */
@@ -71,11 +71,11 @@
7171
--nav-focus-ring: var(--ocean-primary);
7272

7373
/* Footer colors - from palette */
74-
--footer-bg: <%= @current_website.style_variables["footer_bg_color"] || "var(--ocean-darker)" %>;
75-
--footer-text: <%= @current_website.style_variables["footer_text_color"] || "white" %>;
74+
--footer-bg: var(--pwb-footer-background-color);
75+
--footer-text: var(--pwb-footer-text-color);
7676
/* WCAG AA: Improved footer contrast ratios for 4.5:1+ */
77-
--footer-text-muted: color-mix(in srgb, <%= @current_website.style_variables["footer_text_color"] || "white" %> 85%, transparent);
78-
--footer-link-color: color-mix(in srgb, <%= @current_website.style_variables["footer_text_color"] || "white" %> 90%, transparent);
77+
--footer-text-muted: color-mix(in srgb, var(--pwb-footer-text-color) 85%, transparent);
78+
--footer-link-color: color-mix(in srgb, var(--pwb-footer-text-color) 90%, transparent);
7979
--footer-link-hover: var(--sand-light);
8080
--footer-border: var(--ocean-dark);
8181
--footer-icon-bg: var(--ocean-dark);

‎app/views/pwb/custom_css/_bologna.css.erb‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,39 @@
77
<%= render partial: '/pwb/custom_css/base_variables', locals: {} %>
88

99
:root {
10-
/* Primary Colors */
11-
--bologna-terra: <%= @current_website.style_variables["primary_color"] || "#c45d3e" %>;
12-
--bologna-olive: <%= @current_website.style_variables["secondary_color"] || "#5c6b4d" %>;
13-
--bologna-sand: <%= @current_website.style_variables["accent_color"] || "#d4a574" %>;
14-
--bologna-warm-gray: <%= @current_website.style_variables["text_color"] || "#3d3d3d" %>;
15-
--bologna-light: <%= @current_website.style_variables["light_color"] || "#faf9f7" %>;
16-
17-
/* Extended Terra Palette */
18-
--bologna-terra-50: #fdf8f6;
19-
--bologna-terra-100: #f9ece6;
20-
--bologna-terra-200: #f2d5c9;
21-
--bologna-terra-300: #e7b5a0;
22-
--bologna-terra-400: #d98e6e;
23-
--bologna-terra-500: var(--bologna-terra);
24-
--bologna-terra-600: #b14a2e;
25-
26-
/* Extended Olive Palette */
27-
--bologna-olive-50: #f6f7f4;
28-
--bologna-olive-100: #e8ebe3;
29-
--bologna-olive-200: #d3d9c9;
30-
--bologna-olive-300: #b4bfa4;
31-
--bologna-olive-400: #95a37f;
32-
--bologna-olive-500: var(--bologna-olive);
33-
--bologna-olive-600: #4a5640;
10+
/* Primary Colors - Mapped to PWB Standard Variables */
11+
--bologna-terra: var(--pwb-primary-color);
12+
--bologna-olive: var(--pwb-secondary-color);
13+
--bologna-sand: var(--pwb-accent-color);
14+
--bologna-warm-gray: var(--pwb-text-color);
15+
--bologna-light: var(--pwb-background-color);
16+
17+
/* Extended Terra Palette - Mapped to PWB Dynamic Shades */
18+
--bologna-terra-50: var(--pwb-primary-50);
19+
--bologna-terra-100: var(--pwb-primary-100);
20+
--bologna-terra-200: var(--pwb-primary-200);
21+
--bologna-terra-300: var(--pwb-primary-300);
22+
--bologna-terra-400: var(--pwb-primary-400);
23+
--bologna-terra-500: var(--pwb-primary-500);
24+
--bologna-terra-600: var(--pwb-primary-600);
25+
26+
/* Extended Olive Palette - Mapped to PWB Dynamic Shades */
27+
--bologna-olive-50: var(--pwb-secondary-50);
28+
--bologna-olive-100: var(--pwb-secondary-100);
29+
--bologna-olive-200: var(--pwb-secondary-200);
30+
--bologna-olive-300: var(--pwb-secondary-300);
31+
--bologna-olive-400: var(--pwb-secondary-400);
32+
--bologna-olive-500: var(--pwb-secondary-500);
33+
--bologna-olive-600: var(--pwb-secondary-600);
3434

3535
/* Footer Colors */
36-
--footer-bg-color: <%= @current_website.style_variables["footer_bg_color"] || "#3d3d3d" %>;
37-
--footer-text-color: <%= @current_website.style_variables["footer_main_text_color"] || "#d5d0c8" %>;
38-
--footer-link-color: var(--bologna-terra-400);
39-
--footer-link-hover-color: var(--bologna-terra-300);
36+
--footer-bg-color: var(--pwb-footer-background-color);
37+
--footer-text-color: var(--pwb-footer-text-color);
38+
--footer-link-color: var(--pwb-primary-400);
39+
--footer-link-hover-color: var(--pwb-primary-300);
4040

4141
/* Action Colors */
42-
--action-color: <%= @current_website.style_variables["action_color"] || "#c45d3e" %>;
42+
--action-color: var(--pwb-primary-color);
4343

4444
/* Typography */
4545
--font-display: <%= @current_website.style_variables["font_primary"] || "Outfit" %>;

0 commit comments

Comments
 (0)