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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
@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] *));
|
