Skip to content

Commit 151c5fa

Browse files
cursoragentcursoragent
committed
chore(tailwind): import light/dark theme colors to remove duplication and prevent drift
1 parent 1502c4a commit 151c5fa

1 file changed

Lines changed: 2 additions & 251 deletions

File tree

‎packages/design-tokens/src/tailwind/theme.css‎

Lines changed: 2 additions & 251 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@import '../css/brand-colors.css';
22
@import '../css/typography.css';
33
@import '../css/shadow.css';
4+
@import '../css/light-theme-colors.css';
5+
@import '../css/dark-theme-colors.css';
46

57
@theme {
68
--font-size-*: initial;
@@ -183,257 +185,6 @@
183185
var(--shadow-color, var(--color-shadow-default));
184186
}
185187

186-
/**
187-
* Light Theme Colors
188-
* Explicitly scoped so .light resets variables when nested inside .dark.
189-
* The :root values come from @theme above — this block only needs
190-
* the class/attribute selectors for runtime theme switching.
191-
*/
192-
[data-theme='light'],
193-
.light {
194-
--color-background-default: var(--brand-colors-grey-grey000);
195-
--color-background-section: var(--brand-colors-grey-grey050);
196-
--color-background-subsection: var(--brand-colors-grey-grey000);
197-
--color-background-alternative: var(--brand-colors-grey-grey050);
198-
--color-background-muted: #b4b4b528;
199-
--color-background-muted-hover: #b4b4b53d;
200-
--color-background-muted-pressed: #b4b4b552;
201-
--color-background-default-hover: var(--brand-colors-grey-grey050);
202-
--color-background-default-pressed: var(--brand-colors-grey-grey100);
203-
--color-background-alternative-hover: #ebedf1;
204-
--color-background-alternative-pressed: #e1e4ea;
205-
--color-background-hover: #b4b4b528;
206-
--color-background-pressed: #b4b4b53d;
207-
--color-text-default: var(--brand-colors-grey-grey900);
208-
--color-text-alternative: var(--brand-colors-grey-grey500);
209-
--color-text-muted: var(--brand-colors-grey-grey200);
210-
--color-icon-default: var(--brand-colors-grey-grey900);
211-
--color-icon-default-hover: #2a2b2c;
212-
--color-icon-default-pressed: #414243;
213-
--color-icon-alternative: var(--brand-colors-grey-grey500);
214-
--color-icon-muted: var(--brand-colors-grey-grey200);
215-
--color-icon-inverse: var(--brand-colors-grey-grey000);
216-
--color-border-default: var(--brand-colors-grey-grey400);
217-
--color-border-muted: #b4b4b566;
218-
--color-overlay-default: #0a0d135c;
219-
--color-overlay-alternative: #0a0d1392;
220-
--color-overlay-inverse: var(--brand-colors-grey-grey000);
221-
--color-primary-default: var(--brand-colors-blue-blue500);
222-
--color-primary-alternative: var(--brand-colors-blue-blue600);
223-
--color-primary-muted: #4459ff1a;
224-
--color-primary-inverse: var(--brand-colors-grey-grey000);
225-
--color-primary-default-hover: #384df5;
226-
--color-primary-default-pressed: #2b3eda;
227-
--color-primary-muted-hover: #4459ff26;
228-
--color-primary-muted-pressed: #4459ff33;
229-
--color-error-default: var(--brand-colors-red-red500);
230-
--color-error-alternative: var(--brand-colors-red-red600);
231-
--color-error-muted: #ca35421a;
232-
--color-error-inverse: var(--brand-colors-grey-grey000);
233-
--color-error-default-hover: #ba313d;
234-
--color-error-default-pressed: #9a2832;
235-
--color-error-muted-hover: #ca354226;
236-
--color-error-muted-pressed: #ca354233;
237-
--color-warning-default: var(--brand-colors-yellow-yellow500);
238-
--color-warning-muted: #9a63001a;
239-
--color-warning-inverse: var(--brand-colors-grey-grey000);
240-
--color-warning-default-hover: #855500;
241-
--color-warning-default-pressed: #5c3b00;
242-
--color-warning-muted-hover: #9a630026;
243-
--color-warning-muted-pressed: #9a630033;
244-
--color-success-default: var(--brand-colors-lime-lime500);
245-
--color-success-muted: #457a391a;
246-
--color-success-inverse: var(--brand-colors-grey-grey000);
247-
--color-success-default-hover: #3d6c32;
248-
--color-success-default-pressed: #2d5025;
249-
--color-success-muted-hover: #457a3926;
250-
--color-success-muted-pressed: #457a3933;
251-
--color-info-default: var(--brand-colors-blue-blue500);
252-
--color-info-muted: #4459ff1a;
253-
--color-info-inverse: var(--brand-colors-grey-grey000);
254-
--color-accent01-light: var(--brand-colors-orange-orange200);
255-
--color-accent01-normal: var(--brand-colors-orange-orange400);
256-
--color-accent01-dark: var(--brand-colors-orange-orange700);
257-
--color-accent02-light: var(--brand-colors-purple-purple100);
258-
--color-accent02-normal: var(--brand-colors-purple-purple300);
259-
--color-accent02-dark: var(--brand-colors-purple-purple800);
260-
--color-accent03-light: var(--brand-colors-lime-lime050);
261-
--color-accent03-normal: var(--brand-colors-lime-lime100);
262-
--color-accent03-dark: var(--brand-colors-lime-lime700);
263-
--color-accent04-light: var(--brand-colors-indigo-indigo100);
264-
--color-accent04-normal: var(--brand-colors-indigo-indigo200);
265-
--color-accent04-dark: var(--brand-colors-indigo-indigo800);
266-
--color-flask-default: var(--brand-colors-purple-purple500);
267-
--color-flask-inverse: var(--brand-colors-grey-grey000);
268-
--color-shadow-default: #0000001a;
269-
--color-shadow-primary: #4459ff33;
270-
--color-shadow-error: #ca354266;
271-
}
272-
273-
/**
274-
* Dark Theme Colors
275-
*/
276-
[data-theme='dark'],
277-
.dark {
278-
/* Background default should be the darkest shade, 0 elevation.
279-
Section is +1 elevation, subsection is +2 elevation.
280-
Alternative should be deprecated. */
281-
--color-background-default: var(--brand-colors-grey-grey900);
282-
--color-background-section: var(--brand-colors-grey-grey800);
283-
--color-background-subsection: var(--brand-colors-grey-grey700);
284-
--color-background-alternative: var(--brand-colors-grey-grey1000);
285-
286-
/* Applied to interactive elements, such as buttons.
287-
For dark mode, we apply pure white with 4% opacity so these
288-
tokens inherit the background hue of 264.5. */
289-
--color-background-muted: #ffffff0a;
290-
--color-background-muted-hover: #ffffff14;
291-
--color-background-muted-pressed: #ffffff1f;
292-
293-
/* Ensures visual consistency with section and subsection. */
294-
--color-background-default-hover: var(--brand-colors-grey-grey800);
295-
--color-background-default-pressed: var(--brand-colors-grey-grey700);
296-
297-
/* Hover state surface for background/alternative (#0d0d0e) */
298-
--color-background-alternative-hover: #0d0d0e;
299-
--color-background-alternative-pressed: #161617;
300-
301-
/* These have opacities of pure white for general usage.
302-
We set 8% for hover and 12% for pressed so these tokens pick up
303-
background hues and are consistent with +1 and +2 elevations.*/
304-
--color-background-hover: #ffffff0a;
305-
--color-background-pressed: #ffffff1f;
306-
307-
/* These are our content colors.
308-
Contrast ratio of alternative: 7.4 on default, 8.5 on section.
309-
Contrast ratio of muted: 2.0 on default, 1.8 on section.*/
310-
--color-text-default: var(--brand-colors-grey-grey000);
311-
--color-text-alternative: var(--brand-colors-grey-grey300);
312-
--color-text-muted: var(--brand-colors-grey-grey600);
313-
314-
--color-icon-default: var(--brand-colors-grey-grey000);
315-
--color-icon-default-hover: #f0f0f0;
316-
--color-icon-default-pressed: #d0d0d0;
317-
318-
--color-icon-alternative: var(--brand-colors-grey-grey300);
319-
--color-icon-muted: var(--brand-colors-grey-grey600);
320-
--color-icon-inverse: var(--brand-colors-grey-grey900);
321-
322-
/* Contrast of border-default: 3:3 on bg-default, 3.0 on section.
323-
We use 8% opacify of pure white for border-muted so it maintains
324-
sufficient contrast on bg-default and bg-section.*/
325-
--color-border-default: var(--brand-colors-grey-grey500);
326-
--color-border-muted: #ffffff14;
327-
328-
/* Derived from the same hue as bg-default, 264.5, for visual
329-
consistency. Ensures we don't have too much "red".
330-
Opacities are 72% and 84% for default and alternative. */
331-
--color-overlay-default: #030304b8;
332-
--color-overlay-alternative: #030304d6;
333-
--color-overlay-inverse: var(--brand-colors-grey-grey000);
334-
335-
/* For primary semantic elements: interactive, active, selected (#8b99ff) */
336-
--color-primary-default: var(--brand-colors-blue-blue300);
337-
/* Stronger color for primary semantic elements (#adb6fe) */
338-
--color-primary-alternative: var(--brand-colors-blue-blue200);
339-
/* Muted color for primary semantic elements (#8b99ff26) */
340-
--color-primary-muted: #8b99ff26;
341-
/* For elements placed on top of primary/default (#121314) */
342-
--color-primary-inverse: var(--brand-colors-grey-grey900);
343-
/* Hover state surface for primary/default (#9eaaff) */
344-
--color-primary-default-hover: #9eaaff;
345-
/* Pressed state surface for primary/default (#c7ceff) */
346-
--color-primary-default-pressed: #c7ceff;
347-
/* Hover state surface for primary/muted (#8b99ff33) */
348-
--color-primary-muted-hover: #8b99ff33;
349-
/* Pressed state surface for primary/muted (#8b99ff40) */
350-
--color-primary-muted-pressed: #8b99ff40;
351-
/* For danger semantic elements: error, critical, destructive (#ff7584) */
352-
--color-error-default: var(--brand-colors-red-red300);
353-
/* Stronger color for error semantic (#ffa1aa) */
354-
--color-error-alternative: var(--brand-colors-red-red200);
355-
/* Muted color for error semantic (#ff758426) */
356-
--color-error-muted: #ff758426;
357-
/* For elements placed on top of error/default (#121314) */
358-
--color-error-inverse: var(--brand-colors-grey-grey900);
359-
/* Hover state surface for error/default (#ff8a96) */
360-
--color-error-default-hover: #ff8a96;
361-
/* Pressed state surface for error/default (#ffb2bb) */
362-
--color-error-default-pressed: #ffb2bb;
363-
/* Hover state surface for error/muted (#ff758433) */
364-
--color-error-muted-hover: #ff758433;
365-
/* Pressed state surface for error/muted (#ff758440) */
366-
--color-error-muted-pressed: #ff758440;
367-
/* For warning semantic elements: caution, attention, precaution (#f0b034) */
368-
--color-warning-default: var(--brand-colors-yellow-yellow200);
369-
/* Muted color option for warning semantic (#f0b03426) */
370-
--color-warning-muted: #f0b03426;
371-
/* For elements placed on top of warning/default (#121314) */
372-
--color-warning-inverse: var(--brand-colors-grey-grey900);
373-
/* Hover state surface for warning/default (#f3be59) */
374-
--color-warning-default-hover: #f3be59;
375-
/* Pressed state surface for warning/default (#f6cd7f) */
376-
--color-warning-default-pressed: #f6cd7f;
377-
/* Hover state surface for warning/muted (#f0b03433) */
378-
--color-warning-muted-hover: #f0b03433;
379-
/* Pressed state surface for warning/muted (#f0b03440) */
380-
--color-warning-muted-pressed: #f0b03440;
381-
/* For positive semantic elements: success, confirm, complete, safe (#baf24a) */
382-
--color-success-default: var(--brand-colors-lime-lime100);
383-
/* Muted color for positive semantic (#baf24a26) */
384-
--color-success-muted: #baf24a26;
385-
/* For elements placed on top of success/default (#121314) */
386-
--color-success-inverse: var(--brand-colors-grey-grey900);
387-
/* Hover state surface for success/default (#c9f570) */
388-
--color-success-default-hover: #c9f570;
389-
/* Pressed state surface for success/default (#d7f796) */
390-
--color-success-default-pressed: #d7f796;
391-
/* Hover state surface for success/muted (#baf24a33) */
392-
--color-success-muted-hover: #baf24a33;
393-
/* Pressed state surface for success/muted (#baf24a40) */
394-
--color-success-muted-pressed: #baf24a40;
395-
/* For informational read-only elements: info, reminder, hint (#8b99ff) */
396-
--color-info-default: var(--brand-colors-blue-blue300);
397-
/* Muted color for informational semantic (#8b99ff26) */
398-
--color-info-muted: #8b99ff26;
399-
/* For elements placed on top of info/default (#121314) */
400-
--color-info-inverse: var(--brand-colors-grey-grey900);
401-
/* Expressive color in light orange (#ffa680) */
402-
--color-accent01-light: var(--brand-colors-orange-orange200);
403-
/* Expressive color in orange (#ff5c16) */
404-
--color-accent01-normal: var(--brand-colors-orange-orange400);
405-
/* Expressive color in dark orange (#661800) */
406-
--color-accent01-dark: var(--brand-colors-orange-orange700);
407-
/* Expressive color in light purple (#eac2ff) */
408-
--color-accent02-light: var(--brand-colors-purple-purple100);
409-
/* Expressive color in purple (#d075ff) */
410-
--color-accent02-normal: var(--brand-colors-purple-purple300);
411-
/* Expressive color in dark purple (#3d065f) */
412-
--color-accent02-dark: var(--brand-colors-purple-purple800);
413-
/* Expressive color in light lime (#e5ffc3) */
414-
--color-accent03-light: var(--brand-colors-lime-lime050);
415-
/* Expressive color in lime (#baf24a) */
416-
--color-accent03-normal: var(--brand-colors-lime-lime100);
417-
/* Expressive color in dark lime (#013330) */
418-
--color-accent03-dark: var(--brand-colors-lime-lime700);
419-
/* Expressive color in light indigo (#cce7ff) */
420-
--color-accent04-light: var(--brand-colors-indigo-indigo100);
421-
/* Expressive color in indigo (#89b0ff) */
422-
--color-accent04-normal: var(--brand-colors-indigo-indigo200);
423-
/* Expressive color in dark indigo (#190066) */
424-
--color-accent04-dark: var(--brand-colors-indigo-indigo800);
425-
/* For Flask primary accent color (#d27dff) */
426-
--color-flask-default: var(--brand-colors-purple-purple300);
427-
/* For elements placed on top of flask/default (#121314) */
428-
--color-flask-inverse: var(--brand-colors-grey-grey900);
429-
/* For neutral drop shadow color (black-40%) */
430-
--color-shadow-default: #00000066;
431-
/* For primary drop shadow color (#8b99ff33) */
432-
--color-shadow-primary: #8b99ff33;
433-
/* For critical/danger drop shadow color (#ff758433) */
434-
--color-shadow-error: #ff758433;
435-
}
436-
437188
/* Color Shortcut Utilities - Enable shorter class names */
438189
/* Text shortcuts: text-default instead of text-text-default */
439190
@utility text-default {

0 commit comments

Comments
 (0)