@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.
@@ -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
- Core surfaces
16
- ------------------------------------------------------------ */
19
+ Core surfaces
20
+ ------------------------------------------------------------ */
17
21
 
18
22
  /* App background (paper) */
19
- --background: oklch(0.98 0 0);
20
- --foreground: oklch(0.21 0.02 265);
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(1 0 0);
24
- --card-foreground: oklch(0.21 0.02 265);
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.21 0.02 265);
31
+ --popover-foreground: oklch(0.2 0.015 265);
28
32
 
29
33
  /* ------------------------------------------------------------
30
- Borders & structure
31
- ------------------------------------------------------------ */
34
+ Borders & structure
35
+ ------------------------------------------------------------ */
32
36
 
33
- --border: oklch(0.88 0.004 260);
34
- --input: oklch(1 0 0);
35
- --ring: oklch(0.5 0.1 255);
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
- Text hierarchy
39
- ------------------------------------------------------------ */
42
+ Text hierarchy
43
+ ------------------------------------------------------------ */
40
44
 
41
45
  /* Secondary / metadata text */
42
- --muted: oklch(0.97 0 0);
43
- --muted-foreground: oklch(0.55 0.014 265);
46
+ --muted: oklch(0.955 0.003 260);
47
+ --muted-foreground: oklch(0.5 0.012 265);
44
48
 
45
49
  /* ------------------------------------------------------------
46
- Action (user intent)
47
- ------------------------------------------------------------ */
50
+ Action (user intent)
51
+ ------------------------------------------------------------ */
48
52
 
49
53
  /* Buttons, links, explicit user actions */
50
- --primary: oklch(0.56 0.12 255);
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.002 260);
55
- --secondary-foreground: oklch(0.25 0.02 265);
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.93 0.004 260);
59
- --accent-foreground: oklch(0.32 0.008 260);
62
+ --accent: oklch(0.945 0.005 260);
63
+ --accent-foreground: oklch(0.28 0.01 260);
60
64
 
61
65
  /* ------------------------------------------------------------
62
- Destructive (still calm)
63
- ------------------------------------------------------------ */
66
+ Destructive (still calm)
67
+ ------------------------------------------------------------ */
64
68
 
65
- --destructive: oklch(0.55 0.18 25);
69
+ --destructive: oklch(0.54 0.17 25);
66
70
  --destructive-foreground: oklch(1 0 0);
67
71
 
68
72
  /* ------------------------------------------------------------
69
- System states
70
- ------------------------------------------------------------ */
73
+ System states
74
+ ------------------------------------------------------------ */
71
75
 
72
- --warning: oklch(0.65 0.12 90); /* amber */
73
- --warning-foreground: oklch(0.21 0.02 265);
76
+ --warning: oklch(0.7 0.12 88); /* amber */
77
+ --warning-foreground: oklch(0.24 0.02 265);
74
78
 
75
- --error: oklch(0.55 0.18 25); /* muted red */
79
+ --error: oklch(0.56 0.16 24); /* muted red */
76
80
  --error-foreground: oklch(1 0 0);
77
81
 
78
- --success: oklch(0.58 0.1 150); /* sleek green */
82
+ --success: oklch(0.64 0.1 150); /* sleek green */
79
83
  --success-foreground: oklch(1 0 0);
80
84
 
81
- --info: oklch(0.55 0.1 255); /* informational blue */
85
+ --info: oklch(0.58 0.1 255); /* informational blue */
82
86
  --info-foreground: oklch(1 0 0);
83
87
 
84
88
  /* ------------------------------------------------------------
85
- Charts (analytical, not marketing)
86
- ------------------------------------------------------------ */
89
+ Charts (analytical, not marketing)
90
+ ------------------------------------------------------------ */
87
91
 
88
- --chart-1: oklch(0.52 0.1 255); /* primary series */
89
- --chart-2: oklch(0.58 0.06 200); /* secondary series */
90
- --chart-3: oklch(0.5 0.04 265); /* neutral */
91
- --chart-4: oklch(0.62 0.08 90); /* attention */
92
- --chart-5: oklch(0.6 0.08 30); /* muted risk */
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
- Radius
96
- ------------------------------------------------------------ */
99
+ Radius
100
+ ------------------------------------------------------------ */
97
101
 
98
- --radius: 0.3rem;
102
+ --radius: 0.5rem;
99
103
 
100
104
  /* ------------------------------------------------------------
101
- Sidebar
102
- ------------------------------------------------------------ */
105
+ Sidebar
106
+ ------------------------------------------------------------ */
103
107
 
104
- --sidebar: oklch(0.95 0.003 260);
105
- --sidebar-foreground: oklch(0.25 0.01 260);
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.90 0.006 260);
111
- --sidebar-accent-foreground: oklch(0.20 0.01 260);
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
- Dark Mode — “night lab”
119
- ============================================================ */
124
+ Dark Mode — “night lab”
125
+ ============================================================ */
120
126
 
121
127
  .dark {
122
- --background: oklch(0.14 0.01 265);
123
- --foreground: oklch(0.95 0 0);
128
+ --background: oklch(0.15 0.008 265);
129
+ --foreground: oklch(0.94 0.004 265);
124
130
 
125
- --card: oklch(0.18 0.01 265);
126
- --card-foreground: oklch(0.95 0 0);
131
+ --card: oklch(0.2 0.01 265);
132
+ --card-foreground: oklch(0.94 0.004 265);
127
133
 
128
- --popover: oklch(0.18 0.01 265);
129
- --popover-foreground: oklch(0.95 0 0);
134
+ --popover: oklch(0.21 0.01 265);
135
+ --popover-foreground: oklch(0.94 0.004 265);
130
136
 
131
- --border: oklch(0.26 0.006 260);
132
- --input: oklch(0.22 0.008 260);
133
- --ring: oklch(0.55 0.1 255);
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.25 0.01 265);
136
- --muted-foreground: oklch(0.65 0 0);
141
+ --muted: oklch(0.26 0.01 265);
142
+ --muted-foreground: oklch(0.72 0.004 265);
137
143
 
138
- --primary: oklch(0.62 0.14 255);
139
- --primary-foreground: oklch(0.95 0 0);
144
+ --primary: oklch(0.66 0.12 255);
145
+ --primary-foreground: oklch(0.18 0.01 265);
140
146
 
141
- --secondary: oklch(0.22 0.008 260);
142
- --secondary-foreground: oklch(0.92 0 0);
147
+ --secondary: oklch(0.25 0.008 260);
148
+ --secondary-foreground: oklch(0.91 0.004 265);
143
149
 
144
- --accent: oklch(0.25 0.02 255);
145
- --accent-foreground: oklch(0.95 0 0);
150
+ --accent: oklch(0.29 0.02 255);
151
+ --accent-foreground: oklch(0.93 0.004 265);
146
152
 
147
- --destructive: oklch(0.5 0.18 25);
148
- --destructive-foreground: oklch(0.95 0 0);
153
+ --destructive: oklch(0.58 0.16 25);
154
+ --destructive-foreground: oklch(0.17 0.01 265);
149
155
 
150
- --warning: oklch(0.72 0.14 90); /* amber */
151
- --warning-foreground: oklch(0.95 0 0);
152
- --error: oklch(0.5 0.18 25); /* muted red */
153
- --error-foreground: oklch(0.95 0 0);
154
- --success: oklch(0.65 0.12 150); /* sleek green */
155
- --success-foreground: oklch(0.95 0 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.6 0.12 255); /* informational blue */
158
- --info-foreground: oklch(0.95 0 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.58 0.14 255); /* primary series */
161
- --chart-2: oklch(0.6 0.1 200);
162
- --chart-3: oklch(0.55 0.06 265);
163
- --chart-4: oklch(0.7 0.12 90);
164
- --chart-5: oklch(0.65 0.12 30);
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.11 0.006 260);
167
- --sidebar-foreground: oklch(0.85 0 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.18 0.008 260);
173
- --sidebar-accent-foreground: oklch(0.92 0 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.22 0.006 260);
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thalamiq/ui",
3
- "version": "0.1.17",
3
+ "version": "0.1.18",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public",