@thalamiq/ui 0.1.17 → 0.1.18
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 +99 -88
- package/package.json +1 -1
package/dist/styles/globals.css
CHANGED
|
@@ -11,172 +11,183 @@
|
|
|
11
11
|
============================================================ */
|
|
12
12
|
|
|
13
13
|
:root {
|
|
14
|
+
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
15
|
+
sans-serif;
|
|
16
|
+
--font-mono: "Geist Mono", "SF Mono", "Cascadia Code", "Consolas", monospace;
|
|
17
|
+
|
|
14
18
|
/* ------------------------------------------------------------
|
|
15
|
-
|
|
16
|
-
|
|
19
|
+
Core surfaces
|
|
20
|
+
------------------------------------------------------------ */
|
|
17
21
|
|
|
18
22
|
/* App background (paper) */
|
|
19
|
-
--background: oklch(0.
|
|
20
|
-
--foreground: oklch(0.
|
|
23
|
+
--background: oklch(0.975 0.002 260);
|
|
24
|
+
--foreground: oklch(0.2 0.015 265);
|
|
21
25
|
|
|
22
26
|
/* Elevated surfaces */
|
|
23
|
-
--card: oklch(
|
|
24
|
-
--card-foreground: oklch(0.
|
|
27
|
+
--card: oklch(0.995 0.001 260);
|
|
28
|
+
--card-foreground: oklch(0.2 0.015 265);
|
|
25
29
|
|
|
26
30
|
--popover: oklch(1 0 0);
|
|
27
|
-
--popover-foreground: oklch(0.
|
|
31
|
+
--popover-foreground: oklch(0.2 0.015 265);
|
|
28
32
|
|
|
29
33
|
/* ------------------------------------------------------------
|
|
30
|
-
|
|
31
|
-
|
|
34
|
+
Borders & structure
|
|
35
|
+
------------------------------------------------------------ */
|
|
32
36
|
|
|
33
|
-
--border: oklch(0.
|
|
34
|
-
--input: oklch(
|
|
35
|
-
--ring: oklch(0.
|
|
37
|
+
--border: oklch(0.9 0.004 260);
|
|
38
|
+
--input: oklch(0.99 0.001 260);
|
|
39
|
+
--ring: oklch(0.54 0.1 255);
|
|
36
40
|
|
|
37
41
|
/* ------------------------------------------------------------
|
|
38
|
-
|
|
39
|
-
|
|
42
|
+
Text hierarchy
|
|
43
|
+
------------------------------------------------------------ */
|
|
40
44
|
|
|
41
45
|
/* Secondary / metadata text */
|
|
42
|
-
--muted: oklch(0.
|
|
43
|
-
--muted-foreground: oklch(0.
|
|
46
|
+
--muted: oklch(0.955 0.003 260);
|
|
47
|
+
--muted-foreground: oklch(0.5 0.012 265);
|
|
44
48
|
|
|
45
49
|
/* ------------------------------------------------------------
|
|
46
|
-
|
|
47
|
-
|
|
50
|
+
Action (user intent)
|
|
51
|
+
------------------------------------------------------------ */
|
|
48
52
|
|
|
49
53
|
/* Buttons, links, explicit user actions */
|
|
50
|
-
--primary: oklch(0.
|
|
54
|
+
--primary: oklch(0.54 0.11 255);
|
|
51
55
|
--primary-foreground: oklch(1 0 0);
|
|
52
56
|
|
|
53
57
|
/* Secondary actions (less prominent than primary) */
|
|
54
|
-
--secondary: oklch(0.96 0.
|
|
55
|
-
--secondary-foreground: oklch(0.
|
|
58
|
+
--secondary: oklch(0.96 0.003 260);
|
|
59
|
+
--secondary-foreground: oklch(0.24 0.015 265);
|
|
56
60
|
|
|
57
61
|
/* Soft contextual highlights */
|
|
58
|
-
--accent: oklch(0.
|
|
59
|
-
--accent-foreground: oklch(0.
|
|
62
|
+
--accent: oklch(0.945 0.005 260);
|
|
63
|
+
--accent-foreground: oklch(0.28 0.01 260);
|
|
60
64
|
|
|
61
65
|
/* ------------------------------------------------------------
|
|
62
|
-
|
|
63
|
-
|
|
66
|
+
Destructive (still calm)
|
|
67
|
+
------------------------------------------------------------ */
|
|
64
68
|
|
|
65
|
-
--destructive: oklch(0.
|
|
69
|
+
--destructive: oklch(0.54 0.17 25);
|
|
66
70
|
--destructive-foreground: oklch(1 0 0);
|
|
67
71
|
|
|
68
72
|
/* ------------------------------------------------------------
|
|
69
|
-
|
|
70
|
-
|
|
73
|
+
System states
|
|
74
|
+
------------------------------------------------------------ */
|
|
71
75
|
|
|
72
|
-
--warning: oklch(0.
|
|
73
|
-
--warning-foreground: oklch(0.
|
|
76
|
+
--warning: oklch(0.7 0.12 88); /* amber */
|
|
77
|
+
--warning-foreground: oklch(0.24 0.02 265);
|
|
74
78
|
|
|
75
|
-
--error: oklch(0.
|
|
79
|
+
--error: oklch(0.56 0.16 24); /* muted red */
|
|
76
80
|
--error-foreground: oklch(1 0 0);
|
|
77
81
|
|
|
78
|
-
--success: oklch(0.
|
|
82
|
+
--success: oklch(0.64 0.1 150); /* sleek green */
|
|
79
83
|
--success-foreground: oklch(1 0 0);
|
|
80
84
|
|
|
81
|
-
--info: oklch(0.
|
|
85
|
+
--info: oklch(0.58 0.1 255); /* informational blue */
|
|
82
86
|
--info-foreground: oklch(1 0 0);
|
|
83
87
|
|
|
84
88
|
/* ------------------------------------------------------------
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
Charts (analytical, not marketing)
|
|
90
|
+
------------------------------------------------------------ */
|
|
87
91
|
|
|
88
|
-
--chart-1: oklch(0.
|
|
89
|
-
--chart-2: oklch(0.
|
|
90
|
-
--chart-3: oklch(0.5 0.
|
|
91
|
-
--chart-4: oklch(0.
|
|
92
|
-
--chart-5: oklch(0.6 0.08
|
|
92
|
+
--chart-1: oklch(0.53 0.1 255); /* primary series */
|
|
93
|
+
--chart-2: oklch(0.56 0.075 205); /* secondary series */
|
|
94
|
+
--chart-3: oklch(0.5 0.03 265); /* neutral */
|
|
95
|
+
--chart-4: oklch(0.65 0.08 90); /* attention */
|
|
96
|
+
--chart-5: oklch(0.6 0.08 28); /* muted risk */
|
|
93
97
|
|
|
94
98
|
/* ------------------------------------------------------------
|
|
95
|
-
|
|
96
|
-
|
|
99
|
+
Radius
|
|
100
|
+
------------------------------------------------------------ */
|
|
97
101
|
|
|
98
|
-
--radius: 0.
|
|
102
|
+
--radius: 0.5rem;
|
|
99
103
|
|
|
100
104
|
/* ------------------------------------------------------------
|
|
101
|
-
|
|
102
|
-
|
|
105
|
+
Sidebar
|
|
106
|
+
------------------------------------------------------------ */
|
|
103
107
|
|
|
104
|
-
--sidebar: oklch(0.
|
|
105
|
-
--sidebar-foreground: oklch(0.
|
|
108
|
+
--sidebar: oklch(0.955 0.003 260);
|
|
109
|
+
--sidebar-foreground: oklch(0.22 0.012 260);
|
|
106
110
|
|
|
107
111
|
--sidebar-primary: var(--primary);
|
|
108
112
|
--sidebar-primary-foreground: var(--primary-foreground);
|
|
109
113
|
|
|
110
|
-
--sidebar-accent: oklch(0.
|
|
111
|
-
--sidebar-accent-foreground: oklch(0.
|
|
114
|
+
--sidebar-accent: oklch(0.935 0.006 260);
|
|
115
|
+
--sidebar-accent-foreground: oklch(0.18 0.01 260);
|
|
112
116
|
|
|
113
117
|
--sidebar-border: oklch(0.88 0.004 260);
|
|
114
118
|
--sidebar-ring: var(--ring);
|
|
119
|
+
|
|
120
|
+
color-scheme: light;
|
|
115
121
|
}
|
|
116
122
|
|
|
117
123
|
/* ============================================================
|
|
118
|
-
|
|
119
|
-
|
|
124
|
+
Dark Mode — “night lab”
|
|
125
|
+
============================================================ */
|
|
120
126
|
|
|
121
127
|
.dark {
|
|
122
|
-
--background: oklch(0.
|
|
123
|
-
--foreground: oklch(0.
|
|
128
|
+
--background: oklch(0.15 0.008 265);
|
|
129
|
+
--foreground: oklch(0.94 0.004 265);
|
|
124
130
|
|
|
125
|
-
--card: oklch(0.
|
|
126
|
-
--card-foreground: oklch(0.
|
|
131
|
+
--card: oklch(0.2 0.01 265);
|
|
132
|
+
--card-foreground: oklch(0.94 0.004 265);
|
|
127
133
|
|
|
128
|
-
--popover: oklch(0.
|
|
129
|
-
--popover-foreground: oklch(0.
|
|
134
|
+
--popover: oklch(0.21 0.01 265);
|
|
135
|
+
--popover-foreground: oklch(0.94 0.004 265);
|
|
130
136
|
|
|
131
|
-
--border: oklch(0.
|
|
132
|
-
--input: oklch(0.
|
|
133
|
-
--ring: oklch(0.
|
|
137
|
+
--border: oklch(0.34 0.006 260);
|
|
138
|
+
--input: oklch(0.24 0.008 260);
|
|
139
|
+
--ring: oklch(0.62 0.1 255);
|
|
134
140
|
|
|
135
|
-
--muted: oklch(0.
|
|
136
|
-
--muted-foreground: oklch(0.
|
|
141
|
+
--muted: oklch(0.26 0.01 265);
|
|
142
|
+
--muted-foreground: oklch(0.72 0.004 265);
|
|
137
143
|
|
|
138
|
-
--primary: oklch(0.
|
|
139
|
-
--primary-foreground: oklch(0.
|
|
144
|
+
--primary: oklch(0.66 0.12 255);
|
|
145
|
+
--primary-foreground: oklch(0.18 0.01 265);
|
|
140
146
|
|
|
141
|
-
--secondary: oklch(0.
|
|
142
|
-
--secondary-foreground: oklch(0.
|
|
147
|
+
--secondary: oklch(0.25 0.008 260);
|
|
148
|
+
--secondary-foreground: oklch(0.91 0.004 265);
|
|
143
149
|
|
|
144
|
-
--accent: oklch(0.
|
|
145
|
-
--accent-foreground: oklch(0.
|
|
150
|
+
--accent: oklch(0.29 0.02 255);
|
|
151
|
+
--accent-foreground: oklch(0.93 0.004 265);
|
|
146
152
|
|
|
147
|
-
--destructive: oklch(0.
|
|
148
|
-
--destructive-foreground: oklch(0.
|
|
153
|
+
--destructive: oklch(0.58 0.16 25);
|
|
154
|
+
--destructive-foreground: oklch(0.17 0.01 265);
|
|
149
155
|
|
|
150
|
-
--warning: oklch(0.
|
|
151
|
-
--warning-foreground: oklch(0.
|
|
152
|
-
--error: oklch(0.
|
|
153
|
-
--error-foreground: oklch(0.
|
|
154
|
-
--success: oklch(0.
|
|
155
|
-
--success-foreground: oklch(0.
|
|
156
|
+
--warning: oklch(0.74 0.12 88); /* amber */
|
|
157
|
+
--warning-foreground: oklch(0.19 0.01 265);
|
|
158
|
+
--error: oklch(0.6 0.15 24); /* muted red */
|
|
159
|
+
--error-foreground: oklch(0.17 0.01 265);
|
|
160
|
+
--success: oklch(0.69 0.1 150); /* sleek green */
|
|
161
|
+
--success-foreground: oklch(0.17 0.01 265);
|
|
156
162
|
|
|
157
|
-
--info: oklch(0.
|
|
158
|
-
--info-foreground: oklch(0.
|
|
163
|
+
--info: oklch(0.68 0.1 255); /* informational blue */
|
|
164
|
+
--info-foreground: oklch(0.17 0.01 265);
|
|
159
165
|
|
|
160
|
-
--chart-1: oklch(0.
|
|
161
|
-
--chart-2: oklch(0.
|
|
162
|
-
--chart-3: oklch(0.
|
|
163
|
-
--chart-4: oklch(0.
|
|
164
|
-
--chart-5: oklch(0.
|
|
166
|
+
--chart-1: oklch(0.63 0.12 255); /* primary series */
|
|
167
|
+
--chart-2: oklch(0.66 0.09 205);
|
|
168
|
+
--chart-3: oklch(0.62 0.04 265);
|
|
169
|
+
--chart-4: oklch(0.74 0.1 90);
|
|
170
|
+
--chart-5: oklch(0.68 0.1 28);
|
|
165
171
|
|
|
166
|
-
--sidebar: oklch(0.
|
|
167
|
-
--sidebar-foreground: oklch(0.
|
|
172
|
+
--sidebar: oklch(0.13 0.008 260);
|
|
173
|
+
--sidebar-foreground: oklch(0.9 0.003 265);
|
|
168
174
|
|
|
169
175
|
--sidebar-primary: var(--primary);
|
|
170
176
|
--sidebar-primary-foreground: var(--primary-foreground);
|
|
171
177
|
|
|
172
|
-
--sidebar-accent: oklch(0.
|
|
173
|
-
--sidebar-accent-foreground: oklch(0.92 0
|
|
178
|
+
--sidebar-accent: oklch(0.22 0.01 260);
|
|
179
|
+
--sidebar-accent-foreground: oklch(0.92 0.003 265);
|
|
174
180
|
|
|
175
|
-
--sidebar-border: oklch(0.
|
|
181
|
+
--sidebar-border: oklch(0.28 0.008 260);
|
|
176
182
|
--sidebar-ring: var(--ring);
|
|
183
|
+
|
|
184
|
+
color-scheme: dark;
|
|
177
185
|
}
|
|
178
186
|
|
|
179
187
|
@theme inline {
|
|
188
|
+
--font-sans: var(--font-sans);
|
|
189
|
+
--font-mono: var(--font-mono);
|
|
190
|
+
|
|
180
191
|
--color-background: var(--background);
|
|
181
192
|
--color-foreground: var(--foreground);
|
|
182
193
|
--color-card: var(--card);
|