@thalamiq/ui 0.1.7 → 0.1.9

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.
Files changed (2) hide show
  1. package/dist/styles/globals.css +209 -130
  2. package/package.json +3 -3
package/dist/styles/globals.css CHANGED
@@ -3,112 +3,207 @@
3
3
 
4
4
  @custom-variant dark (&:is(.dark *));
5
5
 
6
+ /* ============================================================
7
+ ThalamiQ Design Tokens
8
+ Philosophy:
9
+ - Neutral infrastructure first
10
+ - Action ≠ Authority ≠ Data
11
+ - Calm, desaturated, inspectable
12
+ ============================================================ */
13
+
6
14
  :root {
7
- --background: oklch(1 0 0);
8
- --foreground: oklch(0.141 0.005 285.823);
15
+ /* ------------------------------------------------------------
16
+ Core surfaces
17
+ ------------------------------------------------------------ */
18
+
19
+ /* App background (paper) */
20
+ --background: oklch(0.98 0 0);
21
+ --foreground: oklch(0.21 0.02 265);
22
+
23
+ /* Elevated surfaces */
9
24
  --card: oklch(1 0 0);
10
- --card-foreground: oklch(0.141 0.005 285.823);
11
- --link: oklch(0.623 0.214 259.815);
25
+ --card-foreground: oklch(0.21 0.02 265);
26
+
12
27
  --popover: oklch(1 0 0);
13
- --popover-foreground: oklch(0.141 0.005 285.823);
14
- --primary: oklch(0.623 0.214 259.815);
15
- --primary-foreground: oklch(0.97 0.014 254.604);
16
- --secondary: oklch(0.96 0.001 286.375);
17
- --secondary-foreground: oklch(0.21 0.006 285.885);
18
- --muted: oklch(0.967 0.001 286.375);
19
- --muted-foreground: oklch(0.552 0.016 285.938);
20
- --accent: oklch(0.95 0 0);
21
- --accent-foreground: oklch(0.205 0 0);
22
- --destructive: oklch(0.577 0.245 27.325);
23
- --destructive-foreground: oklch(0.985 0 0);
24
- --border: oklch(0.92 0.004 286.32);
25
- --input: oklch(1 0 0);
26
- --ring: oklch(0.623 0.214 259.815);
27
- --chart-1: oklch(0.6 0.2 250); /* bright blue */
28
- --chart-2: oklch(0.65 0.12 200); /* soft teal */
29
- --chart-3: oklch(0.52 0.08 250); /* desaturated blue-gray */
30
- --chart-4: oklch(0.75 0.14 210); /* aqua accent */
31
- --chart-5: oklch(0.7 0.06 250); /* muted slate */
32
- --chart-6: oklch(0.8 0.1 200); /* light teal */
33
- --chart-7: oklch(0.55 0.1 260); /* mid blue */
34
- --chart-8: oklch(0.45 0.07 220); /* dark cyan-gray */
35
- --sidebar: oklch(0.983 0.004 286.32);
36
- --sidebar-foreground: oklch(0.141 0.005 285.823);
37
- --sidebar-primary: oklch(0.623 0.214 259.815);
38
- --sidebar-primary-foreground: oklch(0.97 0.014 254.604);
39
- --sidebar-accent: oklch(0.957 0.001 286.375);
40
- --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
41
- --sidebar-border: oklch(0.92 0.004 286.32);
42
- --sidebar-ring: oklch(0.623 0.214 259.815);
43
- --success: oklch(0.72 0.12 160);
44
- --success-foreground: oklch(0.17 0.02 250);
45
- --warning: oklch(0.85 0.14 85);
46
- --warning-foreground: oklch(0.25 0.02 250);
47
- --info: oklch(0.68 0.08 230);
48
- --info-foreground: oklch(1 0 0);
49
- --neutral: oklch(0.85 0.02 250);
50
- --neutral-foreground: oklch(0.25 0.02 250);
51
- --radius: 1rem;
52
- --shadow-2xs: 0 1px 3px hsl(0 0% 0% / 0.04);
53
- --shadow-xs: 0 1px 3px hsl(0 0% 0% / 0.05);
54
- --shadow-sm: 0 2px 4px hsl(0 0% 0% / 0.06);
55
- --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.07);
56
- --shadow-lg: 0 6px 10px hsl(0 0% 0% / 0.08);
57
- --shadow-xl: 0 8px 14px hsl(0 0% 0% / 0.1);
28
+ --popover-foreground: oklch(0.21 0.02 265);
29
+
30
+ /* ------------------------------------------------------------
31
+ Borders & structure
32
+ ------------------------------------------------------------ */
33
+
34
+ --border: oklch(0.88 0.004 260);
35
+ --input: oklch(0.95 0.004 260);
36
+ --ring: oklch(0.5 0.1 255);
37
+
38
+ /* ------------------------------------------------------------
39
+ Text hierarchy
40
+ ------------------------------------------------------------ */
41
+
42
+ /* Secondary / metadata text */
43
+ --muted: oklch(0.97 0 0);
44
+ --muted-foreground: oklch(0.55 0.014 265);
45
+
46
+ /* ------------------------------------------------------------
47
+ Action (user intent)
48
+ ------------------------------------------------------------ */
49
+
50
+ /* Buttons, links, explicit user actions */
51
+ --primary: oklch(0.56 0.12 255);
52
+ --primary-foreground: oklch(1 0 0);
53
+
54
+ /* Soft contextual highlights */
55
+ --accent: oklch(0.92 0.03 255);
56
+ --accent-foreground: oklch(0.25 0.02 265);
57
+
58
+ /* ------------------------------------------------------------
59
+ Authority & Truth (core ThalamiQ concept)
60
+ ------------------------------------------------------------ */
61
+
62
+ /* Published, canonical, trusted */
63
+ --authority: oklch(0.52 0.1 255);
64
+ --authority-foreground: oklch(1 0 0);
65
+
66
+ /* Draft, provisional, unreviewed */
67
+ --provisional: oklch(0.7 0.03 265);
68
+ --provisional-foreground: oklch(0.25 0.02 265);
69
+
70
+ /* ------------------------------------------------------------
71
+ Data & provenance
72
+ ------------------------------------------------------------ */
73
+
74
+ /* Structured data, facts, projections */
75
+ --data: oklch(0.55 0.06 200);
76
+ --data-muted: oklch(0.9 0.02 200);
77
+
78
+ /* ------------------------------------------------------------
79
+ Review & attention (non-alarming)
80
+ ------------------------------------------------------------ */
81
+
82
+ /* Needs review, focus state */
83
+ --focus: oklch(0.65 0.12 90);
84
+ --focus-muted: oklch(0.93 0.04 90);
85
+
86
+ /* ------------------------------------------------------------
87
+ Destructive (still calm)
88
+ ------------------------------------------------------------ */
89
+
90
+ --destructive: oklch(0.55 0.18 25);
91
+ --destructive-foreground: oklch(1 0 0);
92
+
93
+ /* ------------------------------------------------------------
94
+ System states
95
+ ------------------------------------------------------------ */
96
+
97
+ --warning: oklch(0.65 0.12 90); /* amber */
98
+ --warning-foreground: oklch(0.21 0.02 265);
99
+
100
+ --error: oklch(0.55 0.18 25); /* muted red */
101
+ --error-foreground: oklch(1 0 0);
102
+
103
+ --success: oklch(0.58 0.1 150); /* sleek green */
104
+ --success-foreground: oklch(1 0 0);
105
+
106
+ /* ------------------------------------------------------------
107
+ Charts (analytical, not marketing)
108
+ ------------------------------------------------------------ */
109
+
110
+ --chart-1: var(--authority); /* truth */
111
+ --chart-2: oklch(0.58 0.06 200); /* data */
112
+ --chart-3: oklch(0.5 0.04 265); /* neutral */
113
+ --chart-4: oklch(0.62 0.08 90); /* attention */
114
+ --chart-5: oklch(0.6 0.08 30); /* muted risk */
115
+
116
+ /* ------------------------------------------------------------
117
+ Radius
118
+ ------------------------------------------------------------ */
119
+
120
+ --radius: 0.25rem;
121
+
122
+ /* ------------------------------------------------------------
123
+ Sidebar
124
+ ------------------------------------------------------------ */
125
+
126
+ --sidebar: oklch(0.95 0.003 260);
127
+ --sidebar-foreground: oklch(0.25 0.01 260);
128
+
129
+ --sidebar-primary: var(--primary);
130
+ --sidebar-primary-foreground: var(--primary-foreground);
131
+
132
+ --sidebar-accent: oklch(0.90 0.006 260);
133
+ --sidebar-accent-foreground: oklch(0.20 0.01 260);
134
+
135
+ --sidebar-border: oklch(0.88 0.004 260);
136
+ --sidebar-ring: var(--ring);
58
137
  }
59
138
 
139
+ /* ============================================================
140
+ Dark Mode — “night lab”
141
+ ============================================================ */
142
+
60
143
  .dark {
61
- --background: oklch(0.17 0.006 285.885);
62
- --foreground: oklch(0.985 0 0);
63
- --link: oklch(0.546 0.245 262.881);
64
- --card: oklch(0.17 0.006 285.885);
65
- --card-foreground: oklch(0.985 0 0);
66
- --popover: oklch(0.21 0.006 285.885);
67
- --popover-foreground: oklch(0.985 0 0);
68
- --primary: oklch(0.546 0.245 262.881);
69
- --primary-foreground: oklch(0.985 0 0);
70
- --secondary: oklch(0.274 0.006 286.033);
71
- --secondary-foreground: oklch(0.985 0 0);
72
- --muted: oklch(0.274 0.006 286.033);
73
- --muted-foreground: oklch(0.705 0.015 286.067);
74
- --accent: oklch(0.274 0.006 286.033);
75
- --accent-foreground: oklch(0.985 0 0);
76
- --destructive: oklch(0.704 0.191 22.216);
77
- --destructive-foreground: oklch(0.985 0 0);
78
- --border: oklch(1 0 0 / 10%);
79
- --input: oklch(1 0 0 / 15%);
80
- --ring: oklch(0.488 0.243 264.376);
81
- --chart-1: oklch(0.7 0.2 260); /* vivid blue */
82
- --chart-2: oklch(0.65 0.14 190); /* teal highlight */
83
- --chart-3: oklch(0.55 0.1 250); /* muted blue-gray */
84
- --chart-4: oklch(0.6 0.12 200); /* cool teal */
85
- --chart-5: oklch(0.5 0.08 230); /* slate */
86
- --chart-6: oklch(0.45 0.1 250); /* dark blue */
87
- --chart-7: oklch(0.55 0.07 220); /* gray-blue */
88
- --chart-8: oklch(0.4 0.06 200); /* deep cyan-gray */
89
- --sidebar: oklch(0.11 0.008 285.823);
90
- --sidebar-foreground: oklch(0.985 0 0);
91
- --sidebar-primary: oklch(0.546 0.245 262.881);
92
- --sidebar-primary-foreground: oklch(0.379 0.146 265.522);
93
- --sidebar-accent: oklch(0.374 0.006 286.033);
94
- --sidebar-accent-foreground: oklch(0.985 0 0);
95
- --sidebar-border: oklch(1 0 0 / 10%);
96
- --sidebar-ring: oklch(0.488 0.243 264.376);
97
- --success: oklch(0.68 0.12 160);
98
- --success-foreground: oklch(0.1 0.02 250);
99
- --warning: oklch(0.75 0.14 85);
100
- --warning-foreground: oklch(0.1 0.02 250);
101
- --info: oklch(0.62 0.08 230);
102
- --info-foreground: oklch(0.1 0.02 250);
103
- --neutral: oklch(0.4 0.02 250);
104
- --neutral-foreground: oklch(0.92 0.02 240);
105
- --radius: 1rem;
106
- --shadow-2xs: 0 1px 3px hsl(0 0% 0% / 0.04);
107
- --shadow-xs: 0 1px 3px hsl(0 0% 0% / 0.05);
108
- --shadow-sm: 0 2px 4px hsl(0 0% 0% / 0.06);
109
- --shadow-md: 0 4px 6px hsl(0 0% 0% / 0.07);
110
- --shadow-lg: 0 6px 10px hsl(0 0% 0% / 0.08);
111
- --shadow-xl: 0 8px 14px hsl(0 0% 0% / 0.1);
144
+ --background: oklch(0.14 0.01 265);
145
+ --foreground: oklch(0.95 0 0);
146
+
147
+ --card: oklch(0.18 0.01 265);
148
+ --card-foreground: oklch(0.95 0 0);
149
+
150
+ --popover: oklch(0.18 0.01 265);
151
+ --popover-foreground: oklch(0.95 0 0);
152
+
153
+ --border: oklch(0.26 0.006 260);
154
+ --input: oklch(0.16 0.006 260);
155
+ --ring: oklch(0.55 0.1 255);
156
+
157
+ --muted: oklch(0.25 0.01 265);
158
+ --muted-foreground: oklch(0.65 0 0);
159
+
160
+ --primary: oklch(0.62 0.14 255);
161
+ --primary-foreground: oklch(0.14 0.01 265);
162
+
163
+ --accent: oklch(0.25 0.02 255);
164
+ --accent-foreground: oklch(0.95 0 0);
165
+
166
+ --authority: oklch(0.62 0.14 255);
167
+ --authority-foreground: oklch(0.14 0.01 265);
168
+
169
+ --provisional: oklch(0.4 0.02 265);
170
+ --provisional-foreground: oklch(0.85 0 0);
171
+
172
+ --data: oklch(0.62 0.08 200);
173
+ --data-muted: oklch(0.3 0.04 200);
174
+
175
+ --focus: oklch(0.72 0.14 90);
176
+ --focus-muted: oklch(0.35 0.06 90);
177
+
178
+ --destructive: oklch(0.5 0.18 25);
179
+ --destructive-foreground: oklch(0.95 0 0);
180
+
181
+ --warning: oklch(0.72 0.14 90); /* amber */
182
+ --warning-foreground: oklch(0.14 0.01 265);
183
+
184
+ --error: oklch(0.5 0.18 25); /* muted red */
185
+ --error-foreground: oklch(0.95 0 0);
186
+
187
+ --success: oklch(0.65 0.12 150); /* sleek green */
188
+ --success-foreground: oklch(0.14 0.01 265);
189
+
190
+ --chart-1: var(--authority);
191
+ --chart-2: oklch(0.6 0.1 200);
192
+ --chart-3: oklch(0.55 0.06 265);
193
+ --chart-4: oklch(0.7 0.12 90);
194
+ --chart-5: oklch(0.65 0.12 30);
195
+
196
+ --sidebar: oklch(0.11 0.006 260);
197
+ --sidebar-foreground: oklch(0.85 0 0);
198
+
199
+ --sidebar-primary: var(--primary);
200
+ --sidebar-primary-foreground: var(--primary-foreground);
201
+
202
+ --sidebar-accent: oklch(0.18 0.008 260);
203
+ --sidebar-accent-foreground: oklch(0.92 0 0);
204
+
205
+ --sidebar-border: oklch(0.22 0.006 260);
206
+ --sidebar-ring: var(--ring);
112
207
  }
113
208
 
114
209
  @theme inline {
@@ -120,8 +215,6 @@
120
215
  --color-popover-foreground: var(--popover-foreground);
121
216
  --color-primary: var(--primary);
122
217
  --color-primary-foreground: var(--primary-foreground);
123
- --color-secondary: var(--secondary);
124
- --color-secondary-foreground: var(--secondary-foreground);
125
218
  --color-muted: var(--muted);
126
219
  --color-muted-foreground: var(--muted-foreground);
127
220
  --color-accent: var(--accent);
@@ -131,14 +224,25 @@
131
224
  --color-border: var(--border);
132
225
  --color-input: var(--input);
133
226
  --color-ring: var(--ring);
227
+ --color-authority: var(--authority);
228
+ --color-authority-foreground: var(--authority-foreground);
229
+ --color-provisional: var(--provisional);
230
+ --color-provisional-foreground: var(--provisional-foreground);
231
+ --color-data: var(--data);
232
+ --color-data-muted: var(--data-muted);
233
+ --color-focus: var(--focus);
234
+ --color-focus-muted: var(--focus-muted);
235
+ --color-warning: var(--warning);
236
+ --color-warning-foreground: var(--warning-foreground);
237
+ --color-error: var(--error);
238
+ --color-error-foreground: var(--error-foreground);
239
+ --color-success: var(--success);
240
+ --color-success-foreground: var(--success-foreground);
134
241
  --color-chart-1: var(--chart-1);
135
242
  --color-chart-2: var(--chart-2);
136
243
  --color-chart-3: var(--chart-3);
137
244
  --color-chart-4: var(--chart-4);
138
245
  --color-chart-5: var(--chart-5);
139
- --color-chart-6: var(--chart-6);
140
- --color-chart-7: var(--chart-7);
141
- --color-chart-8: var(--chart-8);
142
246
  --color-sidebar: var(--sidebar);
143
247
  --color-sidebar-foreground: var(--sidebar-foreground);
144
248
  --color-sidebar-primary: var(--sidebar-primary);
@@ -152,31 +256,6 @@
152
256
  --radius-md: calc(var(--radius) - 2px);
153
257
  --radius-lg: var(--radius);
154
258
  --radius-xl: calc(var(--radius) + 4px);
155
-
156
- --shadow-2xs: var(--shadow-2xs);
157
- --shadow-xs: var(--shadow-xs);
158
- --shadow-sm: var(--shadow-sm);
159
- --shadow: var(--shadow);
160
- --shadow-md: var(--shadow-md);
161
- --shadow-lg: var(--shadow-lg);
162
- --shadow-xl: var(--shadow-xl);
163
- --shadow-2xl: var(--shadow-2xl);
164
-
165
- --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
166
- --tracking-tight: calc(var(--tracking-normal) - 0.025em);
167
- --tracking-normal: var(--tracking-normal);
168
- --tracking-wide: calc(var(--tracking-normal) + 0.025em);
169
- --tracking-wider: calc(var(--tracking-normal) + 0.05em);
170
- --tracking-widest: calc(var(--tracking-normal) + 0.1em);
171
-
172
- --color-success: var(--success);
173
- --color-success-foreground: var(--success-foreground);
174
- --color-warning: var(--warning);
175
- --color-warning-foreground: var(--warning-foreground);
176
- --color-info: var(--info);
177
- --color-info-foreground: var(--info-foreground);
178
- --color-neutral: var(--neutral);
179
- --color-neutral-foreground: var(--neutral-foreground);
180
259
  }
181
260
 
182
261
  @layer base {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thalamiq/ui",
3
- "version": "0.1.7",
3
+ "version": "0.1.9",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public",
@@ -283,12 +283,12 @@
283
283
  "import": "./dist/components/tooltip.js",
284
284
  "require": "./dist/components/tooltip.cjs"
285
285
  },
286
- "./utils/utils": {
286
+ "./utils": {
287
287
  "types": "./dist/utils/utils.d.ts",
288
288
  "import": "./dist/utils/utils.js",
289
289
  "require": "./dist/utils/utils.cjs"
290
290
  },
291
- "./hooks/use-mobile": {
291
+ "./hooks": {
292
292
  "types": "./dist/hooks/use-mobile.d.ts",
293
293
  "import": "./dist/hooks/use-mobile.js",
294
294
  "require": "./dist/hooks/use-mobile.cjs"