Skip to content

Commit 6f1e40f

Browse files
nlopinnlopin
committed
feat(tokens): create color schemas
1 parent 3676660 commit 6f1e40f

File tree

5 files changed

+25
-615
lines changed

5 files changed

+25
-615
lines changed

‎src/essentials/Colors/Colors.ts

+1-295
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export const SemanticColors = {
9797
},
9898
success: {
9999
default: Colors.green[50],
100-
emphasized: Colors.green[900],
100+
emphasized: Colors.green[900],
101101
},
102102
warning: {
103103
default: Colors.yellow[50],
@@ -166,297 +166,3 @@ export const SemanticColors = {
166166
},
167167
},
168168
} satisfies SemanticColorsSchema
169-
170-
// Component Colors Tier (--wave-c-color-...)
171-
export const ComponentColors = {
172-
text: {
173-
button: {
174-
primary: {
175-
// --wave-c-color-text-button-primary-default
176-
default: SemanticColors.text.primaryInverted,
177-
// --wave-c-color-text-button-primary-hover
178-
hover: SemanticColors.text.primaryInverted,
179-
// --wave-c-color-text-button-primary-disabled
180-
disabled: SemanticColors.text.primaryInverted,
181-
// --wave-c-color-text-button-primary-inverted
182-
inverted: SemanticColors.text.primary,
183-
// --wave-c-color-text-button-primary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
184-
hoverInverted: SemanticColors.text.tertiaryInverted,
185-
// --wave-c-color-text-button-primary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
186-
disabledInverted: SemanticColors.text.tertiaryInverted,
187-
},
188-
secondary: {
189-
// --wave-c-color-text-button-secondary-default
190-
default: SemanticColors.text.primary,
191-
// --wave-c-color-text-button-secondary-hover
192-
hover: SemanticColors.text.primary,
193-
// --wave-c-color-text-button-secondary-disabled
194-
disabled: SemanticColors.text.disabled,
195-
// --wave-c-color-text-button-secondary-inverted
196-
inverted: SemanticColors.text.primaryInverted,
197-
// --wave-c-color-text-button-secondary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
198-
hoverInverted: SemanticColors.text.primary,
199-
// --wave-c-color-text-button-secondary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
200-
disabledInverted: SemanticColors.text.disabledInverted,
201-
},
202-
danger: {
203-
// --wave-c-color-text-button-danger-default
204-
default: SemanticColors.text.primaryInverted,
205-
// --wave-c-color-text-button-danger-hover
206-
hover: SemanticColors.text.primaryInverted,
207-
// --wave-c-color-text-button-danger-disabled
208-
disabled: SemanticColors.text.primaryInverted,
209-
// --wave-c-color-text-button-danger-inverted
210-
inverted: SemanticColors.text.primaryInverted,
211-
// --wave-c-color-text-button-danger-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
212-
hoverInverted: SemanticColors.text.primaryInverted,
213-
// --wave-c-color-text-button-danger-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
214-
disabledInverted: SemanticColors.text.primaryInverted,
215-
}
216-
},
217-
textButton: {
218-
primary: {
219-
default: SemanticColors.text.link,
220-
hover: SemanticColors.text.linkHover,
221-
disabled: SemanticColors.text.disabled,
222-
inverted: SemanticColors.text.linkInverted,
223-
hoverInverted: SemanticColors.text.tertiary,
224-
disabledInverted: SemanticColors.text.disabledInverted,
225-
},
226-
danger: {
227-
default: SemanticColors.text.dangerInverted,
228-
hover: SemanticColors.text.danger,
229-
disabled: SemanticColors.text.disabled,
230-
inverted: SemanticColors.text.dangerInverted,
231-
hoverInverted: SemanticColors.text.danger,
232-
disabledInverted: SemanticColors.text.disabledInverted,
233-
},
234-
}
235-
},
236-
background: {
237-
button: {
238-
primary: {
239-
// --wave-c-color-icon-button-primary-default
240-
default: SemanticColors.background.primary.emphasized,
241-
// --wave-c-color-icon-button-primary-hover
242-
hover: SemanticColors.background.primary.hover,
243-
// --wave-c-color-icon-button-primary-disabled
244-
disabled: SemanticColors.background.primary.disabled,
245-
// --wave-c-color-icon-button-primary-inverted
246-
inverted: SemanticColors.background.primary.default,
247-
// --wave-c-color-icon-button-primary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
248-
hoverInverted: SemanticColors.background.primary.emphasized,
249-
// --wave-c-color-icon-button-primary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
250-
disabledInverted: SemanticColors.background.secondary.emphasized,
251-
},
252-
secondary: {
253-
// --wave-c-color-icon-button-secondary-default
254-
default: SemanticColors.background.primary.default,
255-
// --wave-c-color-icon-button-secondary-hover
256-
hover: SemanticColors.background.secondary.default,
257-
// --wave-c-color-icon-button-secondary-disabled
258-
disabled: SemanticColors.background.primary.default,
259-
// --wave-c-color-icon-button-secondary-inverted
260-
inverted: SemanticColors.background.transparent,
261-
// --wave-c-color-icon-button-secondary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
262-
hoverInverted: SemanticColors.background.primary.default,
263-
// --wave-c-color-icon-button-secondary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
264-
disabledInverted: SemanticColors.background.transparent,
265-
},
266-
danger: {
267-
// --wave-c-color-icon-button-danger-default
268-
default: SemanticColors.background.danger.emphasized,
269-
// --wave-c-color-icon-button-danger-hover
270-
hover: SemanticColors.background.danger.hover,
271-
// --wave-c-color-icon-button-danger-disabled
272-
disabled: SemanticColors.background.primary.disabled,
273-
// --wave-c-color-icon-button-danger-inverted
274-
inverted: SemanticColors.background.danger.emphasized,
275-
// --wave-c-color-icon-button-danger-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
276-
hoverInverted: SemanticColors.background.danger.hover,
277-
// --wave-c-color-icon-button-danger-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
278-
disabledInverted: SemanticColors.background.primary.disabled,
279-
}
280-
},
281-
calendar: {
282-
default: SemanticColors.background.primary.default,
283-
hover: SemanticColors.background.secondary.default,
284-
range: SemanticColors.background.info.default,
285-
selected: SemanticColors.background.info.emphasized,
286-
rangeHover: SemanticColors.background.info.hover,
287-
},
288-
table: {
289-
skeleton: SemanticColors.background.secondary.default,
290-
rows: {
291-
zebra: {
292-
// Does it make sense to define SemanticColors for these cases? (Check when revisiting this for refactor)
293-
// What would be suitable semantic names?
294-
active: Colors.blue.secondary[150],
295-
hover: Colors.blue.secondary[100],
296-
secondary: 'rgba(241, 242, 244, 0.4)',
297-
},
298-
lines: {
299-
active: Colors.blue.secondary[100],
300-
hover: Colors.blue.secondary[50],
301-
},
302-
blank: {
303-
active: Colors.blue.secondary[100],
304-
hover: Colors.blue.secondary[50],
305-
},
306-
}
307-
},
308-
toggle: {
309-
handle: {
310-
default: {
311-
off: SemanticColors.background.primary.default,
312-
on: SemanticColors.background.primary.default,
313-
disabled: SemanticColors.background.secondary.default,
314-
},
315-
error: {
316-
off: SemanticColors.background.primary.default,
317-
on: SemanticColors.background.primary.default,
318-
disabled: SemanticColors.background.secondary.default,
319-
}
320-
},
321-
frame: {
322-
default: {
323-
off: SemanticColors.background.primary.disabled,
324-
on: SemanticColors.background.info.emphasized,
325-
disabled: SemanticColors.background.secondary.default,
326-
},
327-
error: {
328-
off: SemanticColors.background.primary.disabled,
329-
on: SemanticColors.background.danger.emphasized,
330-
disabled: SemanticColors.background.secondary.default,
331-
}
332-
}
333-
},
334-
dialog: {
335-
// Define new color?
336-
dimming: 'rgba(0, 15, 31, 0.6)',
337-
},
338-
},
339-
border: {
340-
button: {
341-
primary: {
342-
// --wave-c-color-icon-button-primary-default
343-
default: SemanticColors.border.primary.default,
344-
// --wave-c-color-icon-button-primary-hover
345-
hover: SemanticColors.border.primary.emphasized,
346-
// --wave-c-color-icon-button-primary-disabled
347-
disabled: SemanticColors.border.disabled.default,
348-
// --wave-c-color-icon-button-primary-inverted
349-
inverted: SemanticColors.border.primary.inverted,
350-
// --wave-c-color-icon-button-primary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
351-
hoverInverted: SemanticColors.border.primary.default,
352-
// --wave-c-color-icon-button-primary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
353-
disabledInverted: SemanticColors.border.disabled.inverted,
354-
},
355-
secondary: {
356-
// --wave-c-color-icon-button-secondary-default
357-
default: SemanticColors.border.secondary.default,
358-
// --wave-c-color-icon-button-secondary-hover
359-
hover: SemanticColors.border.secondary.default,
360-
// --wave-c-color-icon-button-secondary-disabled
361-
disabled: SemanticColors.border.disabled.default,
362-
// --wave-c-color-icon-button-secondary-inverted
363-
inverted: SemanticColors.border.secondary.inverted,
364-
// --wave-c-color-icon-button-secondary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
365-
hoverInverted: Colors.white,
366-
// --wave-c-color-icon-button-secondary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
367-
disabledInverted: SemanticColors.border.disabled.inverted,
368-
},
369-
danger: {
370-
// --wave-c-color-icon-button-danger-default
371-
default: SemanticColors.border.danger.default,
372-
// --wave-c-color-icon-button-danger-hover
373-
hover: SemanticColors.border.danger.emphasized,
374-
// --wave-c-color-icon-button-danger-disabled
375-
disabled: SemanticColors.border.disabled.default,
376-
// --wave-c-color-icon-button-danger-inverted
377-
inverted: SemanticColors.border.danger.default,
378-
// --wave-c-color-icon-button-danger-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
379-
hoverInverted: SemanticColors.border.danger.emphasized,
380-
// --wave-c-color-icon-button-danger-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
381-
disabledInverted: SemanticColors.border.disabled.default,
382-
}
383-
},
384-
calendar: {
385-
default: SemanticColors.border.secondary.default,
386-
hover: SemanticColors.border.secondary.default,
387-
range: SemanticColors.border.info.default,
388-
selected: SemanticColors.border.info.emphasized,
389-
rangeHover: SemanticColors.border.secondary.default,
390-
},
391-
table: {
392-
rows: {
393-
lines: SemanticColors.border.secondary.default,
394-
},
395-
header: SemanticColors.border.disabled.inverted,
396-
}
397-
},
398-
icon: {
399-
button: {
400-
primary: {
401-
// --wave-c-color-icon-button-primary-default
402-
default: SemanticColors.icon.primary.inverted,
403-
// --wave-c-color-icon-button-primary-hover
404-
hover: SemanticColors.icon.primary.inverted,
405-
// --wave-c-color-icon-button-primary-disabled
406-
disabled: SemanticColors.icon.primary.inverted,
407-
// --wave-c-color-icon-button-primary-inverted
408-
inverted: SemanticColors.icon.primary.default,
409-
// --wave-c-color-icon-button-primary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
410-
hoverInverted: SemanticColors.icon.primary.inverted,
411-
// --wave-c-color-icon-button-primary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
412-
disabledInverted: SemanticColors.icon.tertiary.default,
413-
},
414-
secondary: {
415-
// --wave-c-color-icon-button-secondary-default
416-
default: SemanticColors.icon.primary.default,
417-
// --wave-c-color-icon-button-secondary-hover
418-
hover: SemanticColors.icon.primary.default,
419-
// --wave-c-color-icon-button-secondary-disabled
420-
disabled: SemanticColors.icon.disabled.default,
421-
// --wave-c-color-icon-button-secondary-inverted
422-
inverted: SemanticColors.icon.primary.inverted,
423-
// --wave-c-color-icon-button-secondary-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
424-
hoverInverted: SemanticColors.icon.primary.default,
425-
// --wave-c-color-icon-button-secondary-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
426-
disabledInverted: SemanticColors.icon.disabled.inverted,
427-
},
428-
danger: {
429-
// --wave-c-color-icon-button-danger-default
430-
default: SemanticColors.icon.primary.inverted,
431-
// --wave-c-color-icon-button-danger-hover
432-
hover: SemanticColors.icon.primary.inverted,
433-
// --wave-c-color-icon-button-danger-disabled
434-
disabled: SemanticColors.icon.primary.inverted,
435-
// --wave-c-color-icon-button-danger-inverted
436-
inverted: SemanticColors.icon.primary.inverted,
437-
// --wave-c-color-icon-button-danger-hoverInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
438-
hoverInverted: SemanticColors.icon.primary.inverted,
439-
// --wave-c-color-icon-button-danger-disabledInverted // This needs rething, as inverted is state, same as hover - Should be in Dark Mode Schema
440-
disabledInverted: SemanticColors.icon.primary.inverted,
441-
}
442-
},
443-
textButton: {
444-
primary: {
445-
default: SemanticColors.icon.action.default,
446-
hover: SemanticColors.icon.action.emphasized,
447-
disabled: SemanticColors.icon.disabled.default,
448-
inverted: SemanticColors.icon.primary.inverted,
449-
hoverInverted: SemanticColors.icon.tertiary.inverted,
450-
disabledInverted: SemanticColors.icon.disabled.inverted,
451-
},
452-
danger: {
453-
default: SemanticColors.icon.danger.default,
454-
hover: SemanticColors.icon.danger.emphasized,
455-
disabled: SemanticColors.icon.disabled.default,
456-
inverted: SemanticColors.icon.danger.default,
457-
hoverInverted: SemanticColors.icon.danger.emphasized,
458-
disabledInverted: SemanticColors.icon.disabled.inverted,
459-
},
460-
}
461-
},
462-
}

0 commit comments

Comments
 (0)