@thalamiq/ui 0.1.17 → 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.
Files changed (2) hide show
  1. package/dist/styles/globals.css +105 -94
  2. package/package.json +1 -1
package/dist/styles/globals.css CHANGED
@@ -6,177 +6,188 @@
6
6
  /* ============================================================
7
7
  ThalamiQ Design Tokens
8
8
  Philosophy:
9
- - Neutral infrastructure first
10
- - Calm, desaturated, inspectable
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 {
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
- /* App background (paper) */
19
- --background: oklch(0.98 0 0);
20
- --foreground: oklch(0.21 0.02 265);
22
+ /* App background */
23
+ --background: oklch(1 0 0);
24
+ --foreground: oklch(0.18 0.02 265);
21
25
 
22
26
  /* Elevated surfaces */
23
27
  --card: oklch(1 0 0);
24
- --card-foreground: oklch(0.21 0.02 265);
28
+ --card-foreground: oklch(0.18 0.02 265);
25
29
 
26
30
  --popover: oklch(1 0 0);
27
- --popover-foreground: oklch(0.21 0.02 265);
31
+ --popover-foreground: oklch(0.18 0.02 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.88 0.008 260);
38
+ --input: oklch(0.98 0.004 265);
39
+ --ring: oklch(0.54 0.14 255);
36
40
 
37
41
  /* ------------------------------------------------------------
38
- Text hierarchy
39
- ------------------------------------------------------------ */
42
+ Text hierarchy
43
+ ------------------------------------------------------------ */
40
44
 
41
- /* Secondary / metadata text */
42
- --muted: oklch(0.97 0 0);
43
- --muted-foreground: oklch(0.55 0.014 265);
45
+ /* Muted: disabled states, metadata, deemphasized areas */
46
+ --muted: oklch(0.96 0.004 260);
47
+ --muted-foreground: oklch(0.46 0.02 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.52 0.16 255);
51
55
  --primary-foreground: oklch(1 0 0);
52
56
 
53
- /* Secondary actions (less prominent than primary) */
54
- --secondary: oklch(0.96 0.002 260);
55
- --secondary-foreground: oklch(0.25 0.02 265);
57
+ /* Secondary: ghost buttons, toggles, secondary CTAs */
58
+ --secondary: oklch(0.93 0.01 260);
59
+ --secondary-foreground: oklch(0.22 0.02 265);
56
60
 
57
- /* Soft contextual highlights */
58
- --accent: oklch(0.93 0.004 260);
59
- --accent-foreground: oklch(0.32 0.008 260);
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);
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.2 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.72 0.15 88); /* amber */
77
+ --warning-foreground: oklch(0.22 0.02 265);
74
78
 
75
- --error: oklch(0.55 0.18 25); /* muted red */
79
+ --error: oklch(0.56 0.19 24); /* 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.14 150); /* 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.14 255); /* 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.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 */
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.975 0.004 260);
109
+ --sidebar-foreground: oklch(0.2 0.015 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.955 0.008 255);
115
+ --sidebar-accent-foreground: oklch(0.18 0.015 260);
112
116
 
113
- --sidebar-border: oklch(0.88 0.004 260);
117
+ --sidebar-border: oklch(0.9 0.006 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.12 0.014 265);
129
+ --foreground: oklch(0.93 0.006 265);
124
130
 
125
- --card: oklch(0.18 0.01 265);
126
- --card-foreground: oklch(0.95 0 0);
131
+ --card: oklch(0.17 0.012 260);
132
+ --card-foreground: oklch(0.93 0.006 265);
127
133
 
128
- --popover: oklch(0.18 0.01 265);
129
- --popover-foreground: oklch(0.95 0 0);
134
+ --popover: oklch(0.18 0.012 260);
135
+ --popover-foreground: oklch(0.93 0.006 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.32 0.012 260);
138
+ --input: oklch(0.23 0.012 260);
139
+ --ring: oklch(0.62 0.14 255);
134
140
 
135
- --muted: oklch(0.25 0.01 265);
136
- --muted-foreground: oklch(0.65 0 0);
141
+ --muted: oklch(0.2 0.008 260);
142
+ --muted-foreground: oklch(0.7 0.008 265);
137
143
 
138
- --primary: oklch(0.62 0.14 255);
139
- --primary-foreground: oklch(0.95 0 0);
144
+ --primary: oklch(0.64 0.16 255);
145
+ --primary-foreground: oklch(0.16 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.23 0.014 260);
148
+ --secondary-foreground: oklch(0.9 0.006 265);
143
149
 
144
- --accent: oklch(0.25 0.02 255);
145
- --accent-foreground: oklch(0.95 0 0);
150
+ --accent: oklch(0.26 0.04 255);
151
+ --accent-foreground: oklch(0.92 0.008 255);
146
152
 
147
- --destructive: oklch(0.5 0.18 25);
148
- --destructive-foreground: oklch(0.95 0 0);
153
+ --destructive: oklch(0.58 0.19 25);
154
+ --destructive-foreground: oklch(0.15 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.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);
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.14 255); /* blue */
164
+ --info-foreground: oklch(0.15 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.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);
165
171
 
166
- --sidebar: oklch(0.11 0.006 260);
167
- --sidebar-foreground: oklch(0.85 0 0);
172
+ --sidebar: oklch(0.15 0.012 260);
173
+ --sidebar-foreground: oklch(0.9 0.005 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.02 255);
179
+ --sidebar-accent-foreground: oklch(0.92 0.005 265);
174
180
 
175
- --sidebar-border: oklch(0.22 0.006 260);
181
+ --sidebar-border: oklch(0.28 0.01 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.19",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public",