1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@theme {
--color-primary: var(--button-background-color);
--color-background: var(--background-color);
--color-text: var(--text-color);
--color-subtitle: var(--subtitle-color);
--color-border: var(--border-color);
--color-surface: var(--message-background-color);
--font-display: var(--font-display);
--font-sans: var(--font-ui);
/* Semantic colors for easier migration from slate/gray */
--color-muted: var(--subtitle-color);
--color-accent: var(--button-background-color);
/* Generated-like palette using color-mix for flexibility */
--color-primary-50: color-mix(in oklab, var(--button-background-color) 5%, white);
--color-primary-100: color-mix(in oklab, var(--button-background-color) 10%, white);
--color-primary-200: color-mix(in oklab, var(--button-background-color) 20%, white);
--color-primary-300: color-mix(in oklab, var(--button-background-color) 40%, white);
--color-primary-400: color-mix(in oklab, var(--button-background-color) 60%, white);
--color-primary-500: var(--button-background-color);
--color-primary-600: color-mix(in oklab, var(--button-background-color) 80%, black);
--color-primary-700: color-mix(in oklab, var(--button-background-color) 60%, black);
--color-primary-800: color-mix(in oklab, var(--button-background-color) 40%, black);
--color-primary-900: color-mix(in oklab, var(--button-background-color) 20%, black);
}
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
