Skip to content

Commit 2a3f541

Browse files
etewiahclaude
etewiah
and
claude
committed
Fix page_parts to use PWB semantic color system
- Replace hardcoded gray colors (text-gray-*, bg-gray-*) with pwb-secondary equivalents for consistent theming - Replace hardcoded amber/primary colors with pwb-primary/pwb-accent - Add spec to prevent regression of hardcoded colors in page_parts - Ensures all page_parts respect tenant color palettes Files updated: - about-us__teams_team_grid.yml - contact-us__cta_cta_split_image.yml - home__cta_cta_banner.yml - home__features_feature_grid_3col.yml - home__heroes_hero_centered.yml - home__stats_stats_counter.yml - home__testimonials_testimonial_carousel.yml - sell__faqs_faq_accordion.yml 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent cb219b0 commit 2a3f541

9 files changed

+211
-89
lines changed

‎db/yml_seeds/page_parts/about-us__teams_team_grid.yml‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,16 @@
5454
<div class="max-w-6xl mx-auto px-4">
5555
{% if page_part["section_title"]["content"] != blank %}
5656
<div class="text-center mb-12">
57-
<h2 class="text-3xl font-bold text-gray-900 mb-4">{{ page_part["section_title"]["content"] }}</h2>
57+
<h2 class="text-3xl font-bold text-pwb-secondary-900 mb-4">{{ page_part["section_title"]["content"] }}</h2>
5858
{% if page_part["section_subtitle"]["content"] != blank %}
59-
<p class="text-lg text-gray-600">{{ page_part["section_subtitle"]["content"] }}</p>
59+
<p class="text-lg text-pwb-secondary-600">{{ page_part["section_subtitle"]["content"] }}</p>
6060
{% endif %}
6161
</div>
6262
{% endif %}
6363
<div class="team-grid-members grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 items-stretch">
6464
{% if page_part["member_1_name"]["content"] != blank %}
6565
<div class="team-member text-center flex flex-col h-full">
66-
<div class="w-32 h-32 mx-auto mb-4 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
66+
<div class="w-32 h-32 mx-auto mb-4 rounded-full bg-pwb-secondary-200 flex items-center justify-center overflow-hidden">
6767
{% if page_part["member_1_image"]["content"] != blank %}
6868
{% assign member1_img = page_part["member_1_image"]["content"] %}
6969
{% assign member1_webp = member1_img | replace: '.jpg', '.webp' | replace: '.jpeg', '.webp' %}
@@ -77,17 +77,17 @@
7777
</picture>
7878
{% else %}
7979
<div class="w-full h-full flex items-center justify-center">
80-
<span class="text-3xl text-gray-400">{{ page_part["member_1_name"]["content"] | slice: 0 }}</span>
80+
<span class="text-3xl text-pwb-secondary-400">{{ page_part["member_1_name"]["content"] | slice: 0 }}</span>
8181
</div>
8282
{% endif %}
8383
</div>
84-
<h3 class="font-semibold text-gray-900">{{ page_part["member_1_name"]["content"] }}</h3>
85-
<p class="text-sm text-primary">{{ page_part["member_1_role"]["content"] }}</p>
84+
<h3 class="font-semibold text-pwb-secondary-900">{{ page_part["member_1_name"]["content"] }}</h3>
85+
<p class="text-sm text-pwb-primary">{{ page_part["member_1_role"]["content"] }}</p>
8686
</div>
8787
{% endif %}
8888
{% if page_part["member_2_name"]["content"] != blank %}
8989
<div class="team-member text-center flex flex-col h-full">
90-
<div class="w-32 h-32 mx-auto mb-4 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
90+
<div class="w-32 h-32 mx-auto mb-4 rounded-full bg-pwb-secondary-200 flex items-center justify-center overflow-hidden">
9191
{% if page_part["member_2_image"]["content"] != blank %}
9292
{% assign member2_img = page_part["member_2_image"]["content"] %}
9393
{% assign member2_webp = member2_img | replace: '.jpg', '.webp' | replace: '.jpeg', '.webp' %}
@@ -101,17 +101,17 @@
101101
</picture>
102102
{% else %}
103103
<div class="w-full h-full flex items-center justify-center">
104-
<span class="text-3xl text-gray-400">{{ page_part["member_2_name"]["content"] | slice: 0 }}</span>
104+
<span class="text-3xl text-pwb-secondary-400">{{ page_part["member_2_name"]["content"] | slice: 0 }}</span>
105105
</div>
106106
{% endif %}
107107
</div>
108-
<h3 class="font-semibold text-gray-900">{{ page_part["member_2_name"]["content"] }}</h3>
109-
<p class="text-sm text-primary">{{ page_part["member_2_role"]["content"] }}</p>
108+
<h3 class="font-semibold text-pwb-secondary-900">{{ page_part["member_2_name"]["content"] }}</h3>
109+
<p class="text-sm text-pwb-primary">{{ page_part["member_2_role"]["content"] }}</p>
110110
</div>
111111
{% endif %}
112112
{% if page_part["member_3_name"]["content"] != blank %}
113113
<div class="team-member text-center flex flex-col h-full">
114-
<div class="w-32 h-32 mx-auto mb-4 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
114+
<div class="w-32 h-32 mx-auto mb-4 rounded-full bg-pwb-secondary-200 flex items-center justify-center overflow-hidden">
115115
{% if page_part["member_3_image"]["content"] != blank %}
116116
{% assign member3_img = page_part["member_3_image"]["content"] %}
117117
{% assign member3_webp = member3_img | replace: '.jpg', '.webp' | replace: '.jpeg', '.webp' %}
@@ -125,17 +125,17 @@
125125
</picture>
126126
{% else %}
127127
<div class="w-full h-full flex items-center justify-center">
128-
<span class="text-3xl text-gray-400">{{ page_part["member_3_name"]["content"] | slice: 0 }}</span>
128+
<span class="text-3xl text-pwb-secondary-400">{{ page_part["member_3_name"]["content"] | slice: 0 }}</span>
129129
</div>
130130
{% endif %}
131131
</div>
132-
<h3 class="font-semibold text-gray-900">{{ page_part["member_3_name"]["content"] }}</h3>
133-
<p class="text-sm text-primary">{{ page_part["member_3_role"]["content"] }}</p>
132+
<h3 class="font-semibold text-pwb-secondary-900">{{ page_part["member_3_name"]["content"] }}</h3>
133+
<p class="text-sm text-pwb-primary">{{ page_part["member_3_role"]["content"] }}</p>
134134
</div>
135135
{% endif %}
136136
{% if page_part["member_4_name"]["content"] != blank %}
137137
<div class="team-member text-center flex flex-col h-full">
138-
<div class="w-32 h-32 mx-auto mb-4 rounded-full bg-gray-200 flex items-center justify-center overflow-hidden">
138+
<div class="w-32 h-32 mx-auto mb-4 rounded-full bg-pwb-secondary-200 flex items-center justify-center overflow-hidden">
139139
{% if page_part["member_4_image"]["content"] != blank %}
140140
{% assign member4_img = page_part["member_4_image"]["content"] %}
141141
{% assign member4_webp = member4_img | replace: '.jpg', '.webp' | replace: '.jpeg', '.webp' %}
@@ -149,12 +149,12 @@
149149
</picture>
150150
{% else %}
151151
<div class="w-full h-full flex items-center justify-center">
152-
<span class="text-3xl text-gray-400">{{ page_part["member_4_name"]["content"] | slice: 0 }}</span>
152+
<span class="text-3xl text-pwb-secondary-400">{{ page_part["member_4_name"]["content"] | slice: 0 }}</span>
153153
</div>
154154
{% endif %}
155155
</div>
156-
<h3 class="font-semibold text-gray-900">{{ page_part["member_4_name"]["content"] }}</h3>
157-
<p class="text-sm text-primary">{{ page_part["member_4_role"]["content"] }}</p>
156+
<h3 class="font-semibold text-pwb-secondary-900">{{ page_part["member_4_name"]["content"] }}</h3>
157+
<p class="text-sm text-pwb-primary">{{ page_part["member_4_role"]["content"] }}</p>
158158
</div>
159159
{% endif %}
160160
</div>

‎db/yml_seeds/page_parts/contact-us__cta_cta_split_image.yml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,25 @@
2626
- label: bg_style
2727
isSingleLineText: "true"
2828
template: |
29-
<section class="cta-split py-16 bg-gray-50">
29+
<section class="cta-split py-16 bg-pwb-secondary-50">
3030
<div class="max-w-6xl mx-auto px-4">
3131
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
3232
<div class="cta-content">
3333
{% if page_part["pretitle"]["content"] != blank %}
34-
<p class="text-sm uppercase tracking-widest text-primary mb-2">{{ page_part["pretitle"]["content"] }}</p>
34+
<p class="text-sm uppercase tracking-widest text-pwb-primary mb-2">{{ page_part["pretitle"]["content"] }}</p>
3535
{% endif %}
36-
<h2 class="text-3xl font-bold text-gray-900 mb-4">{{ page_part["title"]["content"] }}</h2>
36+
<h2 class="text-3xl font-bold text-pwb-secondary-900 mb-4">{{ page_part["title"]["content"] }}</h2>
3737
{% if page_part["description"]["content"] != blank %}
38-
<p class="text-lg text-gray-600 mb-6">{{ page_part["description"]["content"] }}</p>
38+
<p class="text-lg text-pwb-secondary-600 mb-6">{{ page_part["description"]["content"] }}</p>
3939
{% endif %}
4040
{% if page_part["features"]["content"] != blank %}
41-
<div class="features-list mb-8 [&_ul]:space-y-3 [&_li]:flex [&_li]:items-start [&_li]:gap-3 [&_li]:text-gray-700 [&_li]:before:content-['✓'] [&_li]:before:text-primary [&_li]:before:font-bold [&_li]:before:text-lg">
41+
<div class="features-list mb-8 [&_ul]:space-y-3 [&_li]:flex [&_li]:items-start [&_li]:gap-3 [&_li]:text-pwb-secondary-700 [&_li]:before:content-['✓'] [&_li]:before:text-pwb-primary [&_li]:before:font-bold [&_li]:before:text-lg">
4242
{{ page_part["features"]["content"] }}
4343
</div>
4444
{% endif %}
4545
{% assign btn_text = page_part["button_text"]["content"] | strip %}
4646
{% if btn_text != blank and btn_text != "" %}
47-
<a href="{{ page_part["button_link"]["content"] }}" class="inline-block px-8 py-3 bg-primary text-white font-semibold rounded-lg hover:bg-primary/90 transition">
47+
<a href="{{ page_part["button_link"]["content"] }}" class="inline-block px-8 py-3 bg-pwb-primary text-white font-semibold rounded-lg hover:bg-pwb-primary/90 transition">
4848
{{ btn_text }}
4949
</a>
5050
{% endif %}

‎db/yml_seeds/page_parts/home__cta_cta_banner.yml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,15 @@
2626
- label: style
2727
isSingleLineText: "true"
2828
template: |
29-
<section class="cta-banner py-16 bg-primary text-white">
29+
<section class="cta-banner py-16 bg-pwb-primary text-white">
3030
<div class="max-w-4xl mx-auto px-4 text-center">
3131
<h2 class="text-3xl font-bold mb-4">{{ page_part["title"]["content"] }}</h2>
3232
{% if page_part["subtitle"]["content"] %}
33-
<p class="text-xl opacity-90 mb-8">{{ page_part["subtitle"]["content"] }}</p>
33+
<p class="text-xl text-pwb-primary-100 mb-8">{{ page_part["subtitle"]["content"] }}</p>
3434
{% endif %}
3535
<div class="flex flex-wrap justify-center gap-4">
3636
{% if page_part["button_text"]["content"] %}
37-
<a href="{{ page_part["button_link"]["content"] }}" class="px-8 py-3 bg-white text-gray-900 font-semibold rounded-lg hover:bg-gray-100 transition">
37+
<a href="{{ page_part["button_link"]["content"] }}" class="px-8 py-3 bg-white text-pwb-primary-900 font-semibold rounded-lg hover:bg-pwb-primary-50 transition">
3838
{{ page_part["button_text"]["content"] }}
3939
</a>
4040
{% endif %}

‎db/yml_seeds/page_parts/home__features_feature_grid_3col.yml‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,53 +40,53 @@
4040
- label: feature_3_link
4141
isSingleLineText: "true"
4242
template: |
43-
<section class="services-section-wrapper py-16 bg-gray-50" id="home-services">
43+
<section class="services-section-wrapper py-16 bg-pwb-secondary-50" id="home-services">
4444
<div class="services-container max-w-6xl mx-auto px-4">
4545
{% if page_part["section_title"]["content"] != blank %}
4646
<div class="text-center mb-12">
4747
{% if page_part["section_pretitle"]["content"] != blank %}
48-
<p class="text-sm uppercase tracking-widest text-amber-700 mb-2">{{ page_part["section_pretitle"]["content"] }}</p>
48+
<p class="text-sm uppercase tracking-widest text-pwb-accent mb-2">{{ page_part["section_pretitle"]["content"] }}</p>
4949
{% endif %}
50-
<h2 class="text-3xl font-bold text-gray-900 mb-4">{{ page_part["section_title"]["content"] }}</h2>
50+
<h2 class="text-3xl font-bold text-pwb-secondary-900 mb-4">{{ page_part["section_title"]["content"] }}</h2>
5151
{% if page_part["section_subtitle"]["content"] != blank %}
52-
<p class="text-lg text-gray-600 max-w-2xl mx-auto">{{ page_part["section_subtitle"]["content"] }}</p>
52+
<p class="text-lg text-pwb-secondary-600 max-w-2xl mx-auto">{{ page_part["section_subtitle"]["content"] }}</p>
5353
{% endif %}
5454
</div>
5555
{% endif %}
5656
<div class="services-grid grid grid-cols-1 gap-8">
5757
{% if page_part["feature_1_title"]["content"] != blank %}
5858
<div class="service-card bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition">
5959
{% if page_part["feature_1_icon"]["content"] != blank %}
60-
<div class="service-icon-wrapper text-4xl text-amber-700 mb-4">{{ page_part["feature_1_icon"]["content"] | material_icon: "xl" }}</div>
60+
<div class="service-icon-wrapper text-4xl text-pwb-accent mb-4">{{ page_part["feature_1_icon"]["content"] | material_icon: "xl" }}</div>
6161
{% endif %}
62-
<h3 class="service-title text-xl font-semibold text-gray-900 mb-3">{{ page_part["feature_1_title"]["content"] }}</h3>
63-
<p class="service-content text-gray-600">{{ page_part["feature_1_description"]["content"] }}</p>
62+
<h3 class="service-title text-xl font-semibold text-pwb-secondary-900 mb-3">{{ page_part["feature_1_title"]["content"] }}</h3>
63+
<p class="service-content text-pwb-secondary-600">{{ page_part["feature_1_description"]["content"] }}</p>
6464
{% if page_part["feature_1_link"]["content"] != blank %}
65-
<a href="{{ page_part["feature_1_link"]["content"] }}" class="inline-block mt-4 text-amber-700 hover:underline">Learn more &rarr;</a>
65+
<a href="{{ page_part["feature_1_link"]["content"] }}" class="inline-block mt-4 text-pwb-primary hover:text-pwb-primary-700 hover:underline">Learn more &rarr;</a>
6666
{% endif %}
6767
</div>
6868
{% endif %}
6969
{% if page_part["feature_2_title"]["content"] != blank %}
7070
<div class="service-card bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition">
7171
{% if page_part["feature_2_icon"]["content"] != blank %}
72-
<div class="service-icon-wrapper text-4xl text-amber-700 mb-4">{{ page_part["feature_2_icon"]["content"] | material_icon: "xl" }}</div>
72+
<div class="service-icon-wrapper text-4xl text-pwb-accent mb-4">{{ page_part["feature_2_icon"]["content"] | material_icon: "xl" }}</div>
7373
{% endif %}
74-
<h3 class="service-title text-xl font-semibold text-gray-900 mb-3">{{ page_part["feature_2_title"]["content"] }}</h3>
75-
<p class="service-content text-gray-600">{{ page_part["feature_2_description"]["content"] }}</p>
74+
<h3 class="service-title text-xl font-semibold text-pwb-secondary-900 mb-3">{{ page_part["feature_2_title"]["content"] }}</h3>
75+
<p class="service-content text-pwb-secondary-600">{{ page_part["feature_2_description"]["content"] }}</p>
7676
{% if page_part["feature_2_link"]["content"] != blank %}
77-
<a href="{{ page_part["feature_2_link"]["content"] }}" class="inline-block mt-4 text-amber-700 hover:underline">Learn more &rarr;</a>
77+
<a href="{{ page_part["feature_2_link"]["content"] }}" class="inline-block mt-4 text-pwb-primary hover:text-pwb-primary-700 hover:underline">Learn more &rarr;</a>
7878
{% endif %}
7979
</div>
8080
{% endif %}
8181
{% if page_part["feature_3_title"]["content"] != blank %}
8282
<div class="service-card bg-white p-8 rounded-lg shadow-md text-center hover:shadow-lg transition">
8383
{% if page_part["feature_3_icon"]["content"] != blank %}
84-
<div class="service-icon-wrapper text-4xl text-amber-700 mb-4">{{ page_part["feature_3_icon"]["content"] | material_icon: "xl" }}</div>
84+
<div class="service-icon-wrapper text-4xl text-pwb-accent mb-4">{{ page_part["feature_3_icon"]["content"] | material_icon: "xl" }}</div>
8585
{% endif %}
86-
<h3 class="service-title text-xl font-semibold text-gray-900 mb-3">{{ page_part["feature_3_title"]["content"] }}</h3>
87-
<p class="service-content text-gray-600">{{ page_part["feature_3_description"]["content"] }}</p>
86+
<h3 class="service-title text-xl font-semibold text-pwb-secondary-900 mb-3">{{ page_part["feature_3_title"]["content"] }}</h3>
87+
<p class="service-content text-pwb-secondary-600">{{ page_part["feature_3_description"]["content"] }}</p>
8888
{% if page_part["feature_3_link"]["content"] != blank %}
89-
<a href="{{ page_part["feature_3_link"]["content"] }}" class="inline-block mt-4 text-amber-700 hover:underline">Learn more &rarr;</a>
89+
<a href="{{ page_part["feature_3_link"]["content"] }}" class="inline-block mt-4 text-pwb-primary hover:text-pwb-primary-700 hover:underline">Learn more &rarr;</a>
9090
{% endif %}
9191
</div>
9292
{% endif %}

‎db/yml_seeds/page_parts/home__heroes_hero_centered.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<div class="absolute inset-0 bg-gradient-to-b from-black/60 to-black/40"></div>
3939
</div>
4040
{% else %}
41-
<div class="absolute inset-0 bg-gradient-to-br from-primary to-secondary z-0"></div>
41+
<div class="absolute inset-0 bg-gradient-to-br from-pwb-primary to-pwb-secondary z-0"></div>
4242
{% endif %}
4343
<div class="hero-content-wrapper relative z-10 text-center px-4 max-w-4xl mx-auto">
4444
{% if page_part["pretitle"]["content"] %}
@@ -52,7 +52,7 @@
5252
{% endif %}
5353
<div class="flex flex-wrap justify-center gap-4">
5454
{% if page_part["cta_text"]["content"] %}
55-
<a href="{{ page_part["cta_link"]["content"] }}" class="px-8 py-3 bg-white text-gray-900 font-semibold rounded-lg hover:bg-gray-100 transition">
55+
<a href="{{ page_part["cta_link"]["content"] }}" class="px-8 py-3 bg-white text-pwb-primary-900 font-semibold rounded-lg hover:bg-pwb-primary-50 transition">
5656
{{ page_part["cta_text"]["content"] }}
5757
</a>
5858
{% endif %}

0 commit comments

Comments
 (0)