Skip to content

Commit e781666

Browse files
Copilottarebyte
Copilot
and
tarebyte
committed
Refactor color mapping to use switch statements for better readability
Co-authored-by: tarebyte <564113+tarebyte@users.noreply.github.com>
1 parent 468f7c1 commit e781666

File tree

2 files changed

+254
-223
lines changed

2 files changed

+254
-223
lines changed

‎src/colors.js‎

Lines changed: 213 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -118,179 +118,232 @@ function transformToNestedStructure(flatColors) {
118118
// Map fgColor-* to fg.*
119119
Object.keys(flatColors).forEach(key => {
120120
const val = flatColors[key].value;
121+
122+
// Map color tokens using switch statement for better readability
123+
switch (key) {
124+
// Accent colors
125+
case 'fgColor-accent':
126+
nested.accent.fg = val;
127+
break;
128+
case 'bgColor-accent-emphasis':
129+
nested.accent.emphasis = val;
130+
break;
131+
case 'bgColor-accent-muted':
132+
nested.accent.subtle = val;
133+
nested.accent.muted = val;
134+
break;
121135

122-
// Map accent colors (must come before general fgColor- check)
123-
if (key === 'fgColor-accent') {
124-
nested.accent.fg = val;
125-
}
126-
else if (key === 'bgColor-accent-emphasis') {
127-
nested.accent.emphasis = val;
128-
}
129-
else if (key === 'bgColor-accent-muted') {
130-
nested.accent.subtle = val;
131-
nested.accent.muted = val;
132-
}
136+
// Danger colors
137+
case 'fgColor-danger':
138+
nested.danger.fg = val;
139+
break;
140+
case 'bgColor-danger-emphasis':
141+
nested.danger.emphasis = val;
142+
break;
143+
case 'bgColor-danger-muted':
144+
nested.danger.muted = val;
145+
nested.danger.subtle = val;
146+
break;
133147

134-
// Map danger colors (must come before general fgColor- check)
135-
else if (key === 'fgColor-danger') {
136-
nested.danger.fg = val;
137-
}
138-
else if (key === 'bgColor-danger-emphasis') {
139-
nested.danger.emphasis = val;
140-
}
141-
else if (key === 'bgColor-danger-muted') {
142-
nested.danger.muted = val;
143-
nested.danger.subtle = val;
144-
}
148+
// Attention colors
149+
case 'fgColor-attention':
150+
nested.attention.fg = val;
151+
break;
152+
case 'bgColor-attention-emphasis':
153+
nested.attention.emphasis = val;
154+
break;
155+
case 'bgColor-attention-muted':
156+
nested.attention.muted = val;
157+
break;
145158

146-
// Map attention colors (must come before general fgColor- check)
147-
else if (key === 'fgColor-attention') {
148-
nested.attention.fg = val;
149-
}
150-
else if (key === 'bgColor-attention-emphasis') {
151-
nested.attention.emphasis = val;
152-
}
153-
else if (key === 'bgColor-attention-muted') {
154-
nested.attention.muted = val;
155-
}
159+
// Success colors
160+
case 'fgColor-success':
161+
nested.success.fg = val;
162+
break;
163+
case 'bgColor-success-emphasis':
164+
nested.success.emphasis = val;
165+
break;
166+
case 'bgColor-success-muted':
167+
nested.success.muted = val;
168+
break;
156169

157-
// Map success colors (must come before general fgColor- check)
158-
else if (key === 'fgColor-success') {
159-
nested.success.fg = val;
160-
}
161-
else if (key === 'bgColor-success-emphasis') {
162-
nested.success.emphasis = val;
163-
}
164-
else if (key === 'bgColor-success-muted') {
165-
nested.success.muted = val;
166-
}
170+
// Severe colors
171+
case 'fgColor-severe':
172+
nested.severe.fg = val;
173+
break;
174+
case 'bgColor-severe-muted':
175+
nested.severe.subtle = val;
176+
break;
167177

168-
// Map severe colors (must come before general fgColor- check)
169-
else if (key === 'fgColor-severe') {
170-
nested.severe.fg = val;
171-
}
172-
else if (key === 'bgColor-severe-muted') {
173-
nested.severe.subtle = val;
174-
}
178+
// Done colors
179+
case 'bgColor-done-muted':
180+
nested.done.subtle = val;
181+
break;
175182

176-
// General fgColor-* to fg.*
177-
else if (key.startsWith('fgColor-')) {
178-
const prop = key.replace('fgColor-', '').replace(/-/g, '');
179-
if (prop === 'default') nested.fg.default = val;
180-
else if (prop === 'muted') nested.fg.muted = val;
181-
else if (prop === 'subtle') nested.fg.subtle = val;
182-
else if (prop === 'onEmphasis') nested.fg.onEmphasis = val;
183-
}
183+
// Sponsors colors
184+
case 'bgColor-sponsors-muted':
185+
nested.sponsors.subtle = val;
186+
break;
184187

185-
// Helper to check if a key should be mapped to canvas
186-
const isCanvasBgColor = (key) => {
187-
return key.startsWith('bgColor-') &&
188-
!key.startsWith('bgColor-accent-') &&
189-
!key.startsWith('bgColor-danger-') &&
190-
!key.startsWith('bgColor-attention-') &&
191-
!key.startsWith('bgColor-success-') &&
192-
!key.startsWith('bgColor-neutral-');
193-
};
188+
// Neutral colors
189+
case 'bgColor-neutral-emphasis':
190+
nested.neutral.emphasis = val;
191+
nested.neutral.emphasisPlus = val;
192+
break;
193+
case 'bgColor-neutral-muted':
194+
nested.neutral.muted = val;
195+
nested.neutral.subtle = val;
196+
break;
194197

195-
// Helper to check if a key should be mapped to border
196-
const isBorderColor = (key) => {
197-
return key.startsWith('borderColor-') &&
198-
!key.startsWith('borderColor-accent-') &&
199-
!key.startsWith('borderColor-danger-') &&
200-
!key.startsWith('borderColor-attention-') &&
201-
!key.startsWith('borderColor-success-');
202-
};
198+
// CodeMirror colors
199+
case 'codeMirror-activeline-bgColor':
200+
nested.codemirror.activelineBg = val;
201+
break;
203202

204-
// Map bgColor-* to canvas.*
205-
if (isCanvasBgColor(key)) {
206-
if (key === 'bgColor-default') nested.canvas.default = val;
207-
else if (key === 'bgColor-overlay') nested.canvas.overlay = val;
208-
else if (key === 'bgColor-inset') nested.canvas.inset = val;
209-
else if (key === 'bgColor-muted') nested.canvas.subtle = val;
210-
}
203+
// Primer border
204+
case 'borderColor-accent-emphasis':
205+
nested.primer.border.active = val;
206+
break;
211207

212-
// Map borderColor-* to border.*
213-
else if (isBorderColor(key)) {
214-
if (key === 'borderColor-default') nested.border.default = val;
215-
else if (key === 'borderColor-muted') nested.border.muted = val;
216-
}
208+
// Canvas colors
209+
case 'bgColor-default':
210+
nested.canvas.default = val;
211+
break;
212+
case 'bgColor-overlay':
213+
nested.canvas.overlay = val;
214+
break;
215+
case 'bgColor-inset':
216+
nested.canvas.inset = val;
217+
break;
218+
case 'bgColor-muted':
219+
nested.canvas.subtle = val;
220+
break;
217221

218-
// Map done colors
219-
else if (key === 'bgColor-done-muted') {
220-
nested.done.subtle = val;
221-
}
222+
// Border colors
223+
case 'borderColor-default':
224+
nested.border.default = val;
225+
break;
226+
case 'borderColor-muted':
227+
nested.border.muted = val;
228+
break;
222229

223-
// Map sponsors colors
224-
else if (key === 'bgColor-sponsors-muted') {
225-
nested.sponsors.subtle = val;
226-
}
227-
228-
// Map neutral colors
229-
else if (key === 'bgColor-neutral-emphasis') {
230-
nested.neutral.emphasis = val;
231-
nested.neutral.emphasisPlus = val;
232-
}
233-
else if (key === 'bgColor-neutral-muted') {
234-
nested.neutral.muted = val;
235-
nested.neutral.subtle = val;
236-
}
237-
238-
// Map button colors
239-
else if (key.startsWith('button-')) {
240-
const btnProp = key.replace('button-', '');
241-
if (btnProp === 'primary-bgColor-rest') nested.btn.primary = { ...nested.btn.primary, bg: val };
242-
else if (btnProp === 'primary-bgColor-hover') nested.btn.primary = { ...nested.btn.primary, hoverBg: val };
243-
else if (btnProp === 'primary-fgColor-rest') nested.btn.primary = { ...nested.btn.primary, text: val };
244-
else if (btnProp === 'default-bgColor-rest') nested.btn.bg = val;
245-
else if (btnProp === 'default-bgColor-hover') nested.btn.hoverBg = val;
246-
else if (btnProp === 'default-bgColor-active') nested.btn.activeBg = val;
247-
else if (btnProp === 'default-fgColor-rest') nested.btn.text = val;
248-
}
249-
250-
// Map ANSI colors
251-
else if (key.startsWith('color-ansi-')) {
252-
const ansiColor = key.replace('color-ansi-', '');
253-
if (ansiColor === 'black') nested.ansi.black = val;
254-
else if (ansiColor === 'black-bright') nested.ansi.blackBright = val;
255-
else if (ansiColor === 'white') nested.ansi.white = val;
256-
else if (ansiColor === 'white-bright') nested.ansi.whiteBright = val;
257-
else if (ansiColor === 'red') nested.ansi.red = val;
258-
else if (ansiColor === 'red-bright') nested.ansi.redBright = val;
259-
else if (ansiColor === 'green') nested.ansi.green = val;
260-
else if (ansiColor === 'green-bright') nested.ansi.greenBright = val;
261-
else if (ansiColor === 'yellow') nested.ansi.yellow = val;
262-
else if (ansiColor === 'yellow-bright') nested.ansi.yellowBright = val;
263-
else if (ansiColor === 'blue') nested.ansi.blue = val;
264-
else if (ansiColor === 'blue-bright') nested.ansi.blueBright = val;
265-
else if (ansiColor === 'magenta') nested.ansi.magenta = val;
266-
else if (ansiColor === 'magenta-bright') nested.ansi.magentaBright = val;
267-
else if (ansiColor === 'cyan') nested.ansi.cyan = val;
268-
else if (ansiColor === 'cyan-bright') nested.ansi.cyanBright = val;
269-
}
270-
271-
// Map display scale colors (e.g., display-blue-scale-6)
272-
// Expected format: "display-{color}-scale-{index}"
273-
else if (key.startsWith('display-') && key.includes('-scale-')) {
274-
const parts = key.split('-');
275-
if (parts.length >= 4 && parts[0] === 'display' && parts[2] === 'scale') {
276-
const color = parts[1]; // e.g., "blue"
277-
const indexStr = parts[3]; // e.g., "6"
278-
const index = parseInt(indexStr, 10);
279-
280-
if (!isNaN(index) && nested.scale[color]) {
281-
nested.scale[color][index] = val;
230+
// General fgColor-* to fg.*
231+
default:
232+
if (key.startsWith('fgColor-')) {
233+
const prop = key.replace('fgColor-', '').replace(/-/g, '');
234+
switch (prop) {
235+
case 'default':
236+
nested.fg.default = val;
237+
break;
238+
case 'muted':
239+
nested.fg.muted = val;
240+
break;
241+
case 'subtle':
242+
nested.fg.subtle = val;
243+
break;
244+
case 'onEmphasis':
245+
nested.fg.onEmphasis = val;
246+
break;
247+
}
282248
}
283-
}
284-
}
285-
286-
// Map codemirror activelineBg
287-
else if (key === 'codeMirror-activeline-bgColor') {
288-
nested.codemirror.activelineBg = val;
289-
}
290-
291-
// Map primer.border.active
292-
else if (key === 'borderColor-accent-emphasis') {
293-
nested.primer.border.active = val;
249+
250+
// Map button colors
251+
else if (key.startsWith('button-')) {
252+
const btnProp = key.replace('button-', '');
253+
switch (btnProp) {
254+
case 'primary-bgColor-rest':
255+
nested.btn.primary = { ...nested.btn.primary, bg: val };
256+
break;
257+
case 'primary-bgColor-hover':
258+
nested.btn.primary = { ...nested.btn.primary, hoverBg: val };
259+
break;
260+
case 'primary-fgColor-rest':
261+
nested.btn.primary = { ...nested.btn.primary, text: val };
262+
break;
263+
case 'default-bgColor-rest':
264+
nested.btn.bg = val;
265+
break;
266+
case 'default-bgColor-hover':
267+
nested.btn.hoverBg = val;
268+
break;
269+
case 'default-bgColor-active':
270+
nested.btn.activeBg = val;
271+
break;
272+
case 'default-fgColor-rest':
273+
nested.btn.text = val;
274+
break;
275+
}
276+
}
277+
278+
// Map ANSI colors
279+
else if (key.startsWith('color-ansi-')) {
280+
const ansiColor = key.replace('color-ansi-', '');
281+
switch (ansiColor) {
282+
case 'black':
283+
nested.ansi.black = val;
284+
break;
285+
case 'black-bright':
286+
nested.ansi.blackBright = val;
287+
break;
288+
case 'white':
289+
nested.ansi.white = val;
290+
break;
291+
case 'white-bright':
292+
nested.ansi.whiteBright = val;
293+
break;
294+
case 'red':
295+
nested.ansi.red = val;
296+
break;
297+
case 'red-bright':
298+
nested.ansi.redBright = val;
299+
break;
300+
case 'green':
301+
nested.ansi.green = val;
302+
break;
303+
case 'green-bright':
304+
nested.ansi.greenBright = val;
305+
break;
306+
case 'yellow':
307+
nested.ansi.yellow = val;
308+
break;
309+
case 'yellow-bright':
310+
nested.ansi.yellowBright = val;
311+
break;
312+
case 'blue':
313+
nested.ansi.blue = val;
314+
break;
315+
case 'blue-bright':
316+
nested.ansi.blueBright = val;
317+
break;
318+
case 'magenta':
319+
nested.ansi.magenta = val;
320+
break;
321+
case 'magenta-bright':
322+
nested.ansi.magentaBright = val;
323+
break;
324+
case 'cyan':
325+
nested.ansi.cyan = val;
326+
break;
327+
case 'cyan-bright':
328+
nested.ansi.cyanBright = val;
329+
break;
330+
}
331+
}
332+
333+
// Map display scale colors (e.g., display-blue-scale-6)
334+
else if (key.startsWith('display-') && key.includes('-scale-')) {
335+
const parts = key.split('-');
336+
if (parts.length >= 4 && parts[0] === 'display' && parts[2] === 'scale') {
337+
const color = parts[1]; // e.g., "blue"
338+
const indexStr = parts[3]; // e.g., "6"
339+
const index = parseInt(indexStr, 10);
340+
341+
if (!isNaN(index) && nested.scale[color]) {
342+
nested.scale[color][index] = val;
343+
}
344+
}
345+
}
346+
break;
294347
}
295348
});
296349

0 commit comments

Comments
 (0)