@thalamiq/ui 0.1.18 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles/globals.css +74 -74
- package/package.json +1 -1
package/dist/styles/globals.css
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
/* ============================================================
|
|
7
7
|
ThalamiQ Design Tokens
|
|
8
8
|
Philosophy:
|
|
9
|
-
-
|
|
10
|
-
-
|
|
9
|
+
- Clean white canvas, colorful where it counts
|
|
10
|
+
- Professional but not flat — blue-tinted accents, clear status colors
|
|
11
11
|
============================================================ */
|
|
12
12
|
|
|
13
13
|
:root {
|
|
@@ -19,81 +19,81 @@
|
|
|
19
19
|
Core surfaces
|
|
20
20
|
------------------------------------------------------------ */
|
|
21
21
|
|
|
22
|
-
/* App background
|
|
23
|
-
--background: oklch(0
|
|
24
|
-
--foreground: oklch(0.
|
|
22
|
+
/* App background */
|
|
23
|
+
--background: oklch(1 0 0);
|
|
24
|
+
--foreground: oklch(0.18 0.02 265);
|
|
25
25
|
|
|
26
26
|
/* Elevated surfaces */
|
|
27
|
-
--card: oklch(0
|
|
28
|
-
--card-foreground: oklch(0.
|
|
27
|
+
--card: oklch(1 0 0);
|
|
28
|
+
--card-foreground: oklch(0.18 0.02 265);
|
|
29
29
|
|
|
30
30
|
--popover: oklch(1 0 0);
|
|
31
|
-
--popover-foreground: oklch(0.
|
|
31
|
+
--popover-foreground: oklch(0.18 0.02 265);
|
|
32
32
|
|
|
33
33
|
/* ------------------------------------------------------------
|
|
34
34
|
Borders & structure
|
|
35
35
|
------------------------------------------------------------ */
|
|
36
36
|
|
|
37
|
-
--border: oklch(0.
|
|
38
|
-
--input: oklch(0.
|
|
39
|
-
--ring: oklch(0.54 0.
|
|
37
|
+
--border: oklch(0.88 0.008 260);
|
|
38
|
+
--input: oklch(0.98 0.004 265);
|
|
39
|
+
--ring: oklch(0.54 0.14 255);
|
|
40
40
|
|
|
41
41
|
/* ------------------------------------------------------------
|
|
42
42
|
Text hierarchy
|
|
43
43
|
------------------------------------------------------------ */
|
|
44
44
|
|
|
45
|
-
/*
|
|
46
|
-
--muted: oklch(0.
|
|
47
|
-
--muted-foreground: oklch(0.
|
|
45
|
+
/* Muted: disabled states, metadata, deemphasized areas */
|
|
46
|
+
--muted: oklch(0.96 0.004 260);
|
|
47
|
+
--muted-foreground: oklch(0.46 0.02 265);
|
|
48
48
|
|
|
49
49
|
/* ------------------------------------------------------------
|
|
50
50
|
Action (user intent)
|
|
51
51
|
------------------------------------------------------------ */
|
|
52
52
|
|
|
53
53
|
/* Buttons, links, explicit user actions */
|
|
54
|
-
--primary: oklch(0.
|
|
54
|
+
--primary: oklch(0.52 0.16 255);
|
|
55
55
|
--primary-foreground: oklch(1 0 0);
|
|
56
56
|
|
|
57
|
-
/* Secondary
|
|
58
|
-
--secondary: oklch(0.
|
|
59
|
-
--secondary-foreground: oklch(0.
|
|
57
|
+
/* Secondary: ghost buttons, toggles, secondary CTAs */
|
|
58
|
+
--secondary: oklch(0.93 0.01 260);
|
|
59
|
+
--secondary-foreground: oklch(0.22 0.02 265);
|
|
60
60
|
|
|
61
|
-
/*
|
|
62
|
-
--accent: oklch(0.
|
|
63
|
-
--accent-foreground: oklch(0.
|
|
61
|
+
/* Accent: hover highlights, active nav items, selected state */
|
|
62
|
+
--accent: oklch(0.92 0.04 255);
|
|
63
|
+
--accent-foreground: oklch(0.22 0.03 255);
|
|
64
64
|
|
|
65
65
|
/* ------------------------------------------------------------
|
|
66
66
|
Destructive (still calm)
|
|
67
67
|
------------------------------------------------------------ */
|
|
68
68
|
|
|
69
|
-
--destructive: oklch(0.54 0.
|
|
69
|
+
--destructive: oklch(0.54 0.2 25);
|
|
70
70
|
--destructive-foreground: oklch(1 0 0);
|
|
71
71
|
|
|
72
72
|
/* ------------------------------------------------------------
|
|
73
73
|
System states
|
|
74
74
|
------------------------------------------------------------ */
|
|
75
75
|
|
|
76
|
-
--warning: oklch(0.
|
|
77
|
-
--warning-foreground: oklch(0.
|
|
76
|
+
--warning: oklch(0.72 0.15 88); /* amber */
|
|
77
|
+
--warning-foreground: oklch(0.22 0.02 265);
|
|
78
78
|
|
|
79
|
-
--error: oklch(0.56 0.
|
|
79
|
+
--error: oklch(0.56 0.19 24); /* red */
|
|
80
80
|
--error-foreground: oklch(1 0 0);
|
|
81
81
|
|
|
82
|
-
--success: oklch(0.64 0.
|
|
82
|
+
--success: oklch(0.64 0.14 150); /* green */
|
|
83
83
|
--success-foreground: oklch(1 0 0);
|
|
84
84
|
|
|
85
|
-
--info: oklch(0.58 0.
|
|
85
|
+
--info: oklch(0.58 0.14 255); /* blue */
|
|
86
86
|
--info-foreground: oklch(1 0 0);
|
|
87
87
|
|
|
88
88
|
/* ------------------------------------------------------------
|
|
89
89
|
Charts (analytical, not marketing)
|
|
90
90
|
------------------------------------------------------------ */
|
|
91
91
|
|
|
92
|
-
--chart-1: oklch(0.
|
|
93
|
-
--chart-2: oklch(0.
|
|
94
|
-
--chart-3: oklch(0.5 0.
|
|
95
|
-
--chart-4: oklch(0.65 0.
|
|
96
|
-
--chart-5: oklch(0.6 0.
|
|
92
|
+
--chart-1: oklch(0.52 0.15 255); /* primary series */
|
|
93
|
+
--chart-2: oklch(0.55 0.1 205); /* secondary series */
|
|
94
|
+
--chart-3: oklch(0.5 0.05 265); /* neutral */
|
|
95
|
+
--chart-4: oklch(0.65 0.12 90); /* attention */
|
|
96
|
+
--chart-5: oklch(0.6 0.12 28); /* warm accent */
|
|
97
97
|
|
|
98
98
|
/* ------------------------------------------------------------
|
|
99
99
|
Radius
|
|
@@ -105,16 +105,16 @@
|
|
|
105
105
|
Sidebar
|
|
106
106
|
------------------------------------------------------------ */
|
|
107
107
|
|
|
108
|
-
--sidebar: oklch(0.
|
|
109
|
-
--sidebar-foreground: oklch(0.
|
|
108
|
+
--sidebar: oklch(0.975 0.004 260);
|
|
109
|
+
--sidebar-foreground: oklch(0.2 0.015 260);
|
|
110
110
|
|
|
111
111
|
--sidebar-primary: var(--primary);
|
|
112
112
|
--sidebar-primary-foreground: var(--primary-foreground);
|
|
113
113
|
|
|
114
|
-
--sidebar-accent: oklch(0.
|
|
115
|
-
--sidebar-accent-foreground: oklch(0.18 0.
|
|
114
|
+
--sidebar-accent: oklch(0.955 0.008 255);
|
|
115
|
+
--sidebar-accent-foreground: oklch(0.18 0.015 260);
|
|
116
116
|
|
|
117
|
-
--sidebar-border: oklch(0.
|
|
117
|
+
--sidebar-border: oklch(0.9 0.006 260);
|
|
118
118
|
--sidebar-ring: var(--ring);
|
|
119
119
|
|
|
120
120
|
color-scheme: light;
|
|
@@ -125,60 +125,60 @@
|
|
|
125
125
|
============================================================ */
|
|
126
126
|
|
|
127
127
|
.dark {
|
|
128
|
-
--background: oklch(0.
|
|
129
|
-
--foreground: oklch(0.
|
|
128
|
+
--background: oklch(0.12 0.014 265);
|
|
129
|
+
--foreground: oklch(0.93 0.006 265);
|
|
130
130
|
|
|
131
|
-
--card: oklch(0.
|
|
132
|
-
--card-foreground: oklch(0.
|
|
131
|
+
--card: oklch(0.17 0.012 260);
|
|
132
|
+
--card-foreground: oklch(0.93 0.006 265);
|
|
133
133
|
|
|
134
|
-
--popover: oklch(0.
|
|
135
|
-
--popover-foreground: oklch(0.
|
|
134
|
+
--popover: oklch(0.18 0.012 260);
|
|
135
|
+
--popover-foreground: oklch(0.93 0.006 265);
|
|
136
136
|
|
|
137
|
-
--border: oklch(0.
|
|
138
|
-
--input: oklch(0.
|
|
139
|
-
--ring: oklch(0.62 0.
|
|
137
|
+
--border: oklch(0.32 0.012 260);
|
|
138
|
+
--input: oklch(0.23 0.012 260);
|
|
139
|
+
--ring: oklch(0.62 0.14 255);
|
|
140
140
|
|
|
141
|
-
--muted: oklch(0.
|
|
142
|
-
--muted-foreground: oklch(0.
|
|
141
|
+
--muted: oklch(0.2 0.008 260);
|
|
142
|
+
--muted-foreground: oklch(0.7 0.008 265);
|
|
143
143
|
|
|
144
|
-
--primary: oklch(0.
|
|
145
|
-
--primary-foreground: oklch(0.
|
|
144
|
+
--primary: oklch(0.64 0.16 255);
|
|
145
|
+
--primary-foreground: oklch(0.16 0.01 265);
|
|
146
146
|
|
|
147
|
-
--secondary: oklch(0.
|
|
148
|
-
--secondary-foreground: oklch(0.
|
|
147
|
+
--secondary: oklch(0.23 0.014 260);
|
|
148
|
+
--secondary-foreground: oklch(0.9 0.006 265);
|
|
149
149
|
|
|
150
|
-
--accent: oklch(0.
|
|
151
|
-
--accent-foreground: oklch(0.
|
|
150
|
+
--accent: oklch(0.26 0.04 255);
|
|
151
|
+
--accent-foreground: oklch(0.92 0.008 255);
|
|
152
152
|
|
|
153
|
-
--destructive: oklch(0.58 0.
|
|
154
|
-
--destructive-foreground: oklch(0.
|
|
153
|
+
--destructive: oklch(0.58 0.19 25);
|
|
154
|
+
--destructive-foreground: oklch(0.15 0.01 265);
|
|
155
155
|
|
|
156
|
-
--warning: oklch(0.74 0.
|
|
157
|
-
--warning-foreground: oklch(0.
|
|
158
|
-
--error: oklch(0.6 0.
|
|
159
|
-
--error-foreground: oklch(0.
|
|
160
|
-
--success: oklch(0.69 0.
|
|
161
|
-
--success-foreground: oklch(0.
|
|
156
|
+
--warning: oklch(0.74 0.15 88); /* amber */
|
|
157
|
+
--warning-foreground: oklch(0.17 0.01 265);
|
|
158
|
+
--error: oklch(0.6 0.18 24); /* red */
|
|
159
|
+
--error-foreground: oklch(0.15 0.01 265);
|
|
160
|
+
--success: oklch(0.69 0.14 150); /* green */
|
|
161
|
+
--success-foreground: oklch(0.15 0.01 265);
|
|
162
162
|
|
|
163
|
-
--info: oklch(0.68 0.
|
|
164
|
-
--info-foreground: oklch(0.
|
|
163
|
+
--info: oklch(0.68 0.14 255); /* blue */
|
|
164
|
+
--info-foreground: oklch(0.15 0.01 265);
|
|
165
165
|
|
|
166
|
-
--chart-1: oklch(0.
|
|
167
|
-
--chart-2: oklch(0.
|
|
168
|
-
--chart-3: oklch(0.
|
|
169
|
-
--chart-4: oklch(0.
|
|
170
|
-
--chart-5: oklch(0.
|
|
166
|
+
--chart-1: oklch(0.62 0.16 255); /* primary series */
|
|
167
|
+
--chart-2: oklch(0.65 0.12 205);
|
|
168
|
+
--chart-3: oklch(0.6 0.06 265);
|
|
169
|
+
--chart-4: oklch(0.73 0.13 90);
|
|
170
|
+
--chart-5: oklch(0.67 0.13 28);
|
|
171
171
|
|
|
172
|
-
--sidebar: oklch(0.
|
|
173
|
-
--sidebar-foreground: oklch(0.9 0.
|
|
172
|
+
--sidebar: oklch(0.15 0.012 260);
|
|
173
|
+
--sidebar-foreground: oklch(0.9 0.005 265);
|
|
174
174
|
|
|
175
175
|
--sidebar-primary: var(--primary);
|
|
176
176
|
--sidebar-primary-foreground: var(--primary-foreground);
|
|
177
177
|
|
|
178
|
-
--sidebar-accent: oklch(0.22 0.
|
|
179
|
-
--sidebar-accent-foreground: oklch(0.92 0.
|
|
178
|
+
--sidebar-accent: oklch(0.22 0.02 255);
|
|
179
|
+
--sidebar-accent-foreground: oklch(0.92 0.005 265);
|
|
180
180
|
|
|
181
|
-
--sidebar-border: oklch(0.28 0.
|
|
181
|
+
--sidebar-border: oklch(0.28 0.01 260);
|
|
182
182
|
--sidebar-ring: var(--ring);
|
|
183
183
|
|
|
184
184
|
color-scheme: dark;
|