Skip to content

Commit 05b5d3a

Browse files
jdclaude
jd
and
claude
committed
refactor(design): remove Chakra color block
Migrate remaining Chakra consumers (PageContent, Search, Docset, Badge, changelog pages) to semantic tokens, then delete the entire --chakra-colors-* definition block from theme.css. Zero Chakra references remain in src/. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Change-Id: Iea7d94f720ac76250523d9d271e2a104c9614f0b
1 parent a5806c5 commit 05b5d3a

7 files changed

Lines changed: 58 additions & 140 deletions

File tree

‎src/components/Badge/Badge.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
text-transform: uppercase;
88
letter-spacing: 0.1ch;
99
white-space: nowrap;
10-
background-color: var(--chakra-colors-orange-100);
11-
color: var(--chakra-colors-orange-800);
10+
background-color: color-mix(in srgb, var(--color-orange-400) 25%, transparent);
11+
color: var(--color-orange-700);
1212
}

‎src/components/DocsetGrid/Docset.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const IconComponent = !isStringIcon ? icon : null;
2929

3030
<style lang="scss">
3131
.container {
32-
border: 1px solid var(--chakra-colors-chakra-border-color);
32+
border: 1px solid var(--theme-border);
3333
padding: 24px;
3434
border-radius: 6px;
3535
}

‎src/components/PageContent/PageContent.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const suppressTitle = content.suppressTitle;
4040
.divider {
4141
opacity: 0.6;
4242
border: 0;
43-
border-color: var(--chakra-colors-gray-300);
43+
border-color: var(--theme-border);
4444
border-style: solid;
4545
border-bottom-width: 1px;
4646
width: 100%;

‎src/components/Search/Search.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
.page-result {
2020
&.active {
21-
background: var(--chakra-colors-blue-100);
21+
background: var(--theme-bg-offset);
2222
}
2323
}
2424

@@ -45,7 +45,7 @@
4545
}
4646

4747
.theme-dark .modal-content .page-result.active {
48-
background: var(--chakra-colors-blue-700) !important;
48+
background: var(--theme-bg-hover) !important;
4949
}
5050

5151
.theme-dark .modal-content mark {

‎src/pages/changelog/[slug].astro‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -75,19 +75,19 @@ const { title, description, date, tags } = entry.data;
7575
.date {
7676
font-size: 1rem;
7777
font-weight: 600;
78-
color: var(--chakra-colors-gray-700);
78+
color: var(--theme-text-secondary);
7979
letter-spacing: 0.01em;
80-
background: var(--chakra-colors-gray-100);
80+
background: var(--theme-bg-offset);
8181
padding: 0.5rem 1rem;
8282
border-radius: 6px;
83-
border: 1px solid var(--chakra-colors-gray-200);
83+
border: 1px solid var(--theme-border);
8484
display: inline-block;
8585
}
8686

8787
.theme-dark .date {
88-
background: var(--chakra-colors-gray-800);
89-
color: var(--chakra-colors-gray-100);
90-
border-color: var(--chakra-colors-gray-700);
88+
background: var(--theme-bg-offset);
89+
color: var(--theme-text-secondary);
90+
border-color: var(--theme-border);
9191
}
9292

9393
.tag-list {
@@ -114,21 +114,21 @@ const { title, description, date, tags } = entry.data;
114114
}
115115

116116
.tag {
117-
background: var(--chakra-colors-gray-100);
118-
color: var(--chakra-colors-gray-700);
117+
background: var(--theme-bg-offset);
118+
color: var(--theme-text-secondary);
119119
font-size: 0.75rem;
120120
font-weight: 600;
121121
padding: 0.4rem 0.75rem;
122122
border-radius: 6px;
123123
text-transform: uppercase;
124124
letter-spacing: 0.05em;
125-
border: 1px solid var(--chakra-colors-gray-200);
125+
border: 1px solid var(--theme-border);
126126
}
127127

128128
.theme-dark .tag {
129-
background: var(--chakra-colors-gray-700);
130-
color: var(--chakra-colors-gray-200);
131-
border-color: var(--chakra-colors-gray-600);
129+
background: var(--theme-bg-offset);
130+
color: var(--theme-text-secondary);
131+
border-color: var(--theme-border);
132132
}
133133

134134
.entry-title {
@@ -242,27 +242,27 @@ const { title, description, date, tags } = entry.data;
242242
.entry-content :global(blockquote) {
243243
margin: 1.5rem 0;
244244
padding: 1rem 1.25rem;
245-
border-left: 4px solid var(--chakra-colors-gray-300);
246-
background: var(--chakra-colors-gray-50);
245+
border-left: 4px solid var(--theme-border);
246+
background: var(--theme-bg-offset);
247247
color: var(--theme-text-light);
248248
font-style: italic;
249249
}
250250

251251
.theme-dark .entry-content :global(blockquote) {
252-
border-left-color: var(--chakra-colors-gray-600);
253-
background: var(--chakra-colors-gray-800);
252+
border-left-color: var(--theme-border);
253+
background: var(--theme-bg-offset);
254254
}
255255

256256
.entry-content :global(a) {
257257
color: var(--theme-text);
258258
text-decoration: underline;
259-
text-decoration-color: var(--chakra-colors-gray-300);
259+
text-decoration-color: var(--theme-border);
260260
text-underline-offset: 2px;
261261
transition: text-decoration-color 0.2s;
262262
}
263263

264264
.entry-content :global(a:hover) {
265-
text-decoration-color: var(--chakra-colors-gray-600);
265+
text-decoration-color: var(--theme-text-muted);
266266
}
267267

268268
.entry-content :global(hr) {
@@ -292,19 +292,19 @@ const { title, description, date, tags } = entry.data;
292292
text-decoration: none;
293293
font-size: 0.875rem;
294294
font-weight: 600;
295-
color: var(--chakra-colors-gray-700);
296-
background: var(--chakra-colors-gray-100);
295+
color: var(--theme-text-secondary);
296+
background: var(--theme-bg-offset);
297297
padding: 0.5rem 1rem;
298298
border-radius: 6px;
299-
border: 1px solid var(--chakra-colors-gray-200);
299+
border: 1px solid var(--theme-border);
300300
transition: all 0.2s ease;
301301
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
302302
}
303303

304304
.back-button:hover {
305-
background: var(--chakra-colors-gray-700);
306-
color: #fff;
307-
border-color: var(--chakra-colors-gray-700);
305+
background: var(--theme-accent);
306+
color: var(--theme-bg-content);
307+
border-color: var(--theme-accent);
308308
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
309309
transform: translateY(-1px);
310310
}
@@ -321,14 +321,14 @@ const { title, description, date, tags } = entry.data;
321321
}
322322

323323
.theme-dark .back-button {
324-
background: var(--chakra-colors-gray-700);
325-
color: var(--chakra-colors-gray-200);
326-
border-color: var(--chakra-colors-gray-600);
324+
background: var(--theme-bg-offset);
325+
color: var(--theme-text-secondary);
326+
border-color: var(--theme-border);
327327
}
328328

329329
.theme-dark .back-button:hover {
330-
background: var(--chakra-colors-gray-600);
331-
color: #fff;
332-
border-color: var(--chakra-colors-gray-500);
330+
background: var(--theme-accent);
331+
color: var(--theme-bg-content);
332+
border-color: var(--theme-accent);
333333
}
334334
</style>

‎src/pages/changelog/index.astro‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -286,18 +286,18 @@ const description = 'Latest product updates from Mergify.';
286286
text-decoration: none;
287287
font-size: 0.875rem;
288288
font-weight: 600;
289-
color: var(--chakra-colors-gray-700);
290-
background: var(--chakra-colors-gray-100);
289+
color: var(--theme-text-secondary);
290+
background: var(--theme-bg-offset);
291291
padding: 0.5rem 1rem;
292292
border-radius: 6px;
293-
border: 1px solid var(--chakra-colors-gray-200);
293+
border: 1px solid var(--theme-border);
294294
transition: all 0.2s ease;
295295
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
296296
}
297297
.rss-button:hover {
298-
background: var(--chakra-colors-gray-700);
299-
color: #fff;
300-
border-color: var(--chakra-colors-gray-700);
298+
background: var(--theme-accent);
299+
color: var(--theme-bg-content);
300+
border-color: var(--theme-accent);
301301
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
302302
transform: translateY(-1px);
303303
}
@@ -310,14 +310,14 @@ const description = 'Latest product updates from Mergify.';
310310
flex-shrink: 0;
311311
}
312312
.theme-dark .rss-button {
313-
background: var(--chakra-colors-gray-700);
314-
color: var(--chakra-colors-gray-200);
315-
border-color: var(--chakra-colors-gray-600);
313+
background: var(--theme-bg-offset);
314+
color: var(--theme-text-secondary);
315+
border-color: var(--theme-border);
316316
}
317317
.theme-dark .rss-button:hover {
318-
background: var(--chakra-colors-gray-600);
319-
color: #fff;
320-
border-color: var(--chakra-colors-gray-500);
318+
background: var(--theme-accent);
319+
color: var(--theme-bg-content);
320+
border-color: var(--theme-accent);
321321
}
322322

323323
.slack-subscribe {
@@ -373,8 +373,8 @@ const description = 'Latest product updates from Mergify.';
373373
display: flex;
374374
align-items: center;
375375
gap: 0.35rem;
376-
background: var(--chakra-colors-gray-700);
377-
color: #fff;
376+
background: var(--theme-accent);
377+
color: var(--theme-bg-content);
378378
border: none;
379379
padding: 0.4rem 0.75rem;
380380
border-radius: 4px;
@@ -387,7 +387,7 @@ const description = 'Latest product updates from Mergify.';
387387
}
388388

389389
.copy-btn:hover {
390-
background: var(--chakra-colors-gray-600);
390+
background: var(--theme-accent-secondary);
391391
}
392392

393393
.copy-btn.copied {
@@ -400,9 +400,9 @@ const description = 'Latest product updates from Mergify.';
400400

401401
.tag-pills { display: flex; flex-wrap: wrap; gap: .65rem; }
402402
.tag-pills-row { margin-top: 1rem; }
403-
.pill { border: 1px solid var(--theme-border-color); background: var(--chakra-colors-gray-100); color: var(--chakra-colors-gray-700); padding: .5rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer; line-height: 1; transition: background .15s, color .15s, border-color .15s, transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
404-
.pill:hover { background: var(--chakra-colors-gray-200); }
405-
.pill.active { background: var(--chakra-colors-gray-700); color: #fff; border-color: var(--chakra-colors-gray-700); box-shadow: 0 2px 4px rgba(0,0,0,0.12); }
403+
.pill { border: 1px solid var(--theme-border-color); background: var(--theme-bg-offset); color: var(--theme-text-secondary); padding: .5rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer; line-height: 1; transition: background .15s, color .15s, border-color .15s, transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
404+
.pill:hover { background: var(--theme-bg-hover); }
405+
.pill.active { background: var(--theme-accent); color: var(--theme-bg-content); border-color: var(--theme-accent); box-shadow: 0 2px 4px rgba(0,0,0,0.12); }
406406
.pill:active { transform: translateY(1px); }
407407

408408
/* Product-specific pill colors */
@@ -516,7 +516,7 @@ const description = 'Latest product updates from Mergify.';
516516
.entry-list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--theme-border-color); }
517517
.entry { position: relative; margin: 0; padding: 1.25rem 0 1.25rem 1.25rem; border-bottom: 1px solid var(--theme-border-color); }
518518
.entry:last-child { border-bottom: 0; }
519-
.entry::before { content: ''; position: absolute; left: -6px; top: 1.4rem; width: 10px; height: 10px; background: var(--chakra-colors-gray-400); border-radius: 50%; box-shadow: 0 0 0 2px var(--theme-bg); }
519+
.entry::before { content: ''; position: absolute; left: -6px; top: 1.4rem; width: 10px; height: 10px; background: var(--theme-text-muted); border-radius: 50%; box-shadow: 0 0 0 2px var(--theme-bg); }
520520
.entry-release::before { background: var(--section-merge-queue-accent, var(--theme-accent)); box-shadow: 0 0 0 2px var(--theme-bg), 0 0 0 6px rgba(27, 99, 243, 0.15); }
521521
.entry-release + .entry { border-top: 1px solid var(--theme-border-color); }
522522
.entry-release .release-title { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: 1rem; }
@@ -571,12 +571,12 @@ const description = 'Latest product updates from Mergify.';
571571
}
572572
.title { font-size: 1.05rem; margin: 0 0 .4rem; line-height: 1.3; }
573573
.title a { text-decoration: none; color: var(--theme-text); }
574-
.title a:hover { text-decoration: underline; color: var(--chakra-colors-gray-700); }
574+
.title a:hover { text-decoration: underline; color: var(--theme-text-secondary); }
575575
.summary { font-size: .85rem; margin: .1rem 0 0; color: var(--theme-text-light); line-height: 1.5; }
576576
.more-col { align-self: center; justify-self: start; }
577-
.read-more { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; text-decoration: none; font-weight: 700; padding: .4rem .7rem; border-radius: .6rem; background: var(--chakra-colors-gray-100); color: var(--chakra-colors-gray-800); transition: background .15s, color .15s, transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
577+
.read-more { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; text-decoration: none; font-weight: 700; padding: .4rem .7rem; border-radius: .6rem; background: var(--theme-bg-offset); color: var(--theme-text); transition: background .15s, color .15s, transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
578578
.read-more .read-icon { transition: transform .15s ease; }
579-
.read-more:hover { background: var(--chakra-colors-gray-700); color: #fff; }
579+
.read-more:hover { background: var(--theme-accent); color: var(--theme-bg-content); }
580580
.read-more:hover .read-icon { transform: translateX(2px); }
581581
@media (min-width: 50em) { .more-col { justify-self: end; } }
582582
#no-results { text-align: center; font-size: .875rem; margin: 3rem 0; }

‎src/styles/theme.css‎

Lines changed: 0 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -205,88 +205,6 @@
205205
);
206206
}
207207

208-
:root,
209-
::backdrop {
210-
/*
211-
Chakra colors
212-
*/
213-
--chakra-colors-transparent: transparent;
214-
--chakra-colors-current: currentColor;
215-
--chakra-colors-black: #000000;
216-
--chakra-colors-white: #ffffff;
217-
--chakra-colors-whiteAlpha-50: rgba(255, 255, 255, 0.04);
218-
--chakra-colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
219-
--chakra-colors-whiteAlpha-200: rgba(255, 255, 255, 0.08);
220-
--chakra-colors-whiteAlpha-300: rgba(255, 255, 255, 0.16);
221-
--chakra-colors-whiteAlpha-400: rgba(255, 255, 255, 0.24);
222-
--chakra-colors-whiteAlpha-500: rgba(255, 255, 255, 0.36);
223-
--chakra-colors-whiteAlpha-600: rgba(255, 255, 255, 0.48);
224-
--chakra-colors-whiteAlpha-700: rgba(255, 255, 255, 0.64);
225-
--chakra-colors-whiteAlpha-800: rgba(255, 255, 255, 0.8);
226-
--chakra-colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
227-
--chakra-colors-blackAlpha-50: rgba(0, 0, 0, 0.04);
228-
--chakra-colors-blackAlpha-100: rgba(0, 0, 0, 0.06);
229-
--chakra-colors-blackAlpha-200: rgba(0, 0, 0, 0.08);
230-
--chakra-colors-blackAlpha-300: rgba(0, 0, 0, 0.16);
231-
--chakra-colors-blackAlpha-400: rgba(0, 0, 0, 0.24);
232-
--chakra-colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
233-
--chakra-colors-blackAlpha-600: rgba(0, 0, 0, 0.48);
234-
--chakra-colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
235-
--chakra-colors-blackAlpha-800: rgba(0, 0, 0, 0.8);
236-
--chakra-colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
237-
--chakra-colors-gray-50: #f7fafc;
238-
--chakra-colors-gray-100: #edf2f7;
239-
--chakra-colors-gray-200: #e2e8f0;
240-
--chakra-colors-gray-300: #cbd5e0;
241-
--chakra-colors-gray-400: #a0aec0;
242-
--chakra-colors-gray-500: #718096;
243-
--chakra-colors-gray-600: #4a5568;
244-
--chakra-colors-gray-700: #2d3748;
245-
--chakra-colors-gray-800: #1a202c;
246-
--chakra-colors-gray-900: #171923;
247-
--chakra-colors-red-50: #fff5f5;
248-
--chakra-colors-red-100: #fed7d7;
249-
--chakra-colors-red-200: #feb2b2;
250-
--chakra-colors-red-300: #fc8181;
251-
--chakra-colors-red-400: #f56565;
252-
--chakra-colors-red-500: #e53e3e;
253-
--chakra-colors-red-600: #c53030;
254-
--chakra-colors-red-700: #9b2c2c;
255-
--chakra-colors-red-800: #822727;
256-
--chakra-colors-red-900: #63171b;
257-
--chakra-colors-orange-50: #fffaf0;
258-
--chakra-colors-orange-100: #feebc8;
259-
--chakra-colors-orange-200: #fbd38d;
260-
--chakra-colors-orange-300: #f6ad55;
261-
--chakra-colors-orange-400: #ed8936;
262-
--chakra-colors-orange-500: #dd6b20;
263-
--chakra-colors-orange-600: #c05621;
264-
--chakra-colors-orange-700: #9c4221;
265-
--chakra-colors-orange-800: #7b341e;
266-
--chakra-colors-orange-900: #652b19;
267-
--chakra-colors-green-50: #f0fff4;
268-
--chakra-colors-green-100: #c6f6d5;
269-
--chakra-colors-green-200: #9ae6b4;
270-
--chakra-colors-green-300: #68d391;
271-
--chakra-colors-green-400: #48bb78;
272-
--chakra-colors-green-500: #38a169;
273-
--chakra-colors-green-600: #2f855a;
274-
--chakra-colors-green-700: #276749;
275-
--chakra-colors-green-800: #22543d;
276-
--chakra-colors-green-900: #1c4532;
277-
--chakra-colors-blue-50: #ddeef8;
278-
--chakra-colors-blue-100: #badff3;
279-
--chakra-colors-blue-200: #98ccec;
280-
--chakra-colors-blue-300: #75bce6;
281-
--chakra-colors-blue-400: #54ace0;
282-
--chakra-colors-blue-500: #1f79ac;
283-
--chakra-colors-blue-600: #196189;
284-
--chakra-colors-blue-700: #144767;
285-
--chakra-colors-blue-800: #0a2534;
286-
--chakra-colors-blue-900: #000000;
287-
--chakra-colors-chakra-border-color: var(--chakra-colors-gray-200);
288-
}
289-
290208
:root.theme-dark,
291209
.theme-dark ::backdrop {
292210
color-scheme: dark;

0 commit comments

Comments
 (0)