@blinkdotnew/ui 0.1.7 → 0.2.0

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/themes/glass.css +63 -14
  3. package/src/themes/linear.css +52 -3
  4. package/src/themes/midnight.css +60 -12
  5. package/src/themes/minimal.css +58 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blinkdotnew/ui",
3
- "version": "0.1.7",
3
+ "version": "0.2.0",
4
4
  "description": "Blink UI SDK — production-quality React component library for SaaS apps",
5
5
  "keywords": [
6
6
  "blink",
package/src/themes/glass.css CHANGED
@@ -10,32 +10,51 @@
10
10
 
11
11
  :root,
12
12
  .theme-glass {
13
- /* ── Colors ───────────────────────────────── */
13
+ /* ── Colors (HSL fallback first, then OKLCH) ─ */
14
14
  --background: 210 40% 96%;
15
+ --background: oklch(0.962 0.014 247.6);
15
16
  --foreground: 222 47% 11%;
17
+ --foreground: oklch(0.245 0.055 264.1);
16
18
  --card: 0 0% 100%;
19
+ --card: oklch(1 0 0);
17
20
  --card-foreground: 222 47% 11%;
21
+ --card-foreground: oklch(0.245 0.055 264.1);
18
22
  --popover: 0 0% 100%;
23
+ --popover: oklch(1 0 0);
19
24
  --popover-foreground: 222 47% 11%;
25
+ --popover-foreground: oklch(0.245 0.055 264.1);
20
26
  --primary: 221 83% 53%;
27
+ --primary: oklch(0.546 0.215 264.1);
21
28
  --primary-foreground: 0 0% 100%;
29
+ --primary-foreground: oklch(1 0 0);
22
30
  --secondary: 210 40% 92%;
31
+ --secondary: oklch(0.928 0.014 247.6);
23
32
  --secondary-foreground: 222 47% 11%;
33
+ --secondary-foreground: oklch(0.245 0.055 264.1);
24
34
  --muted: 210 40% 93%;
35
+ --muted: oklch(0.934 0.013 247.6);
25
36
  --muted-foreground: 215 16% 47%;
37
+ --muted-foreground: oklch(0.532 0.032 252.0);
26
38
  --accent: 210 40% 92%;
39
+ --accent: oklch(0.928 0.014 247.6);
27
40
  --accent-foreground: 221 83% 53%;
41
+ --accent-foreground: oklch(0.546 0.215 264.1);
28
42
  --destructive: 0 84% 60%;
43
+ --destructive: oklch(0.628 0.258 29.2);
29
44
  --destructive-foreground: 0 0% 100%;
45
+ --destructive-foreground: oklch(1 0 0);
30
46
  --border: 214 32% 91%;
47
+ --border: oklch(0.916 0.018 252.0);
31
48
  --input: 214 32% 91%;
49
+ --input: oklch(0.916 0.018 252.0);
32
50
  --ring: 221 83% 53%;
51
+ --ring: oklch(0.546 0.215 264.1);
33
52
 
34
53
  /* ── Glass-specific ────────────────────────── */
35
54
  --glass-blur: blur(16px) saturate(180%);
36
- --glass-bg: rgba(255, 255, 255, 0.72);
37
- --glass-border: rgba(255, 255, 255, 0.6);
38
- --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
55
+ --glass-bg: oklch(1 0 0 / 0.72);
56
+ --glass-border: oklch(1 0 0 / 0.6);
57
+ --glass-shadow: 0 8px 32px 0 oklch(0.4 0.08 264 / 0.12);
39
58
 
40
59
  /* ── Typography ────────────────────────────── */
41
60
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
@@ -67,11 +86,19 @@
67
86
  --radius-xl: 1.75rem;
68
87
  --radius-full: 9999px;
69
88
 
89
+ /* ── Shadow tokens (granular) ────────────────── */
90
+ --shadow-color: oklch(0.4 0.08 264);
91
+ --shadow-opacity: 0.12;
92
+ --shadow-blur: 16px;
93
+ --shadow-spread: 0px;
94
+ --shadow-offset-x: 0px;
95
+ --shadow-offset-y: 4px;
96
+
70
97
  /* ── Shadows (diffuse, color-tinted) ─────────── */
71
- --shadow-sm: 0 2px 8px 0 rgba(100, 130, 200, 0.08);
72
- --shadow-md: 0 4px 16px 0 rgba(100, 130, 200, 0.12), 0 1px 4px rgba(100, 130, 200, 0.08);
73
- --shadow-lg: 0 8px 32px 0 rgba(100, 130, 200, 0.16), 0 2px 8px rgba(100, 130, 200, 0.1);
74
- --shadow-xl: 0 16px 48px 0 rgba(100, 130, 200, 0.2), 0 4px 16px rgba(100, 130, 200, 0.12);
98
+ --shadow-sm: 0 2px 8px 0 oklch(0.4 0.08 264 / 0.08);
99
+ --shadow-md: 0 4px 16px 0 oklch(0.4 0.08 264 / 0.12), 0 1px 4px oklch(0.4 0.08 264 / 0.08);
100
+ --shadow-lg: 0 8px 32px 0 oklch(0.4 0.08 264 / 0.16), 0 2px 8px oklch(0.4 0.08 264 / 0.1);
101
+ --shadow-xl: 0 16px 48px 0 oklch(0.4 0.08 264 / 0.2), 0 4px 16px oklch(0.4 0.08 264 / 0.12);
75
102
  --shadow-card: var(--glass-shadow);
76
103
 
77
104
  /* ── Animation (smooth, longer duration) ──────── */
@@ -95,29 +122,51 @@
95
122
 
96
123
  .theme-glass.dark {
97
124
  --background: 222 47% 8%;
125
+ --background: oklch(0.178 0.055 264.1);
98
126
  --foreground: 213 31% 91%;
127
+ --foreground: oklch(0.91 0.018 252.0);
99
128
  --card: 222 47% 11%;
129
+ --card: oklch(0.218 0.055 264.1);
100
130
  --card-foreground: 213 31% 91%;
131
+ --card-foreground: oklch(0.91 0.018 252.0);
101
132
  --popover: 222 47% 11%;
133
+ --popover: oklch(0.218 0.055 264.1);
102
134
  --popover-foreground: 213 31% 91%;
135
+ --popover-foreground: oklch(0.91 0.018 252.0);
103
136
  --primary: 217 91% 60%;
137
+ --primary: oklch(0.6 0.2 264.1);
104
138
  --primary-foreground: 0 0% 100%;
139
+ --primary-foreground: oklch(1 0 0);
105
140
  --secondary: 222 47% 15%;
141
+ --secondary: oklch(0.262 0.055 264.1);
106
142
  --secondary-foreground: 213 31% 91%;
143
+ --secondary-foreground: oklch(0.91 0.018 252.0);
107
144
  --muted: 222 47% 15%;
145
+ --muted: oklch(0.262 0.055 264.1);
108
146
  --muted-foreground: 215 20% 65%;
147
+ --muted-foreground: oklch(0.67 0.03 252.0);
109
148
  --accent: 222 47% 15%;
149
+ --accent: oklch(0.262 0.055 264.1);
110
150
  --accent-foreground: 217 91% 60%;
151
+ --accent-foreground: oklch(0.6 0.2 264.1);
111
152
  --destructive: 0 62% 30%;
153
+ --destructive: oklch(0.396 0.141 25.7);
112
154
  --destructive-foreground: 0 0% 100%;
155
+ --destructive-foreground: oklch(1 0 0);
113
156
  --border: 222 47% 18%;
157
+ --border: oklch(0.293 0.055 264.1);
114
158
  --input: 222 47% 18%;
159
+ --input: oklch(0.293 0.055 264.1);
115
160
  --ring: 217 91% 60%;
116
- --glass-bg: rgba(15, 20, 40, 0.72);
117
- --glass-border: rgba(255, 255, 255, 0.06);
118
- --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
119
- --shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
120
- --shadow-md: 0 4px 16px 0 rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
121
- --shadow-lg: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
161
+ --ring: oklch(0.6 0.2 264.1);
162
+
163
+ --glass-bg: oklch(0.145 0.04 264 / 0.72);
164
+ --glass-border: oklch(1 0 0 / 0.06);
165
+ --glass-shadow: 0 8px 32px 0 oklch(0 0 0 / 0.4);
166
+ --shadow-color: oklch(0 0 0);
167
+ --shadow-opacity: 0.35;
168
+ --shadow-sm: 0 2px 8px 0 oklch(0 0 0 / 0.2);
169
+ --shadow-md: 0 4px 16px 0 oklch(0 0 0 / 0.3), 0 1px 4px oklch(0 0 0 / 0.2);
170
+ --shadow-lg: 0 8px 32px 0 oklch(0 0 0 / 0.4), 0 2px 8px oklch(0 0 0 / 0.3);
122
171
  --shadow-card: var(--glass-shadow);
123
172
  }
package/src/themes/linear.css CHANGED
@@ -10,26 +10,45 @@
10
10
 
11
11
  :root,
12
12
  .theme-linear {
13
- /* ── Colors ───────────────────────────────── */
13
+ /* ── Colors (HSL fallback first, then OKLCH) ─ */
14
14
  --background: 0 0% 100%;
15
+ --background: oklch(1 0 0);
15
16
  --foreground: 0 0% 3.9%;
17
+ --foreground: oklch(0.145 0 0);
16
18
  --card: 0 0% 100%;
19
+ --card: oklch(1 0 0);
17
20
  --card-foreground: 0 0% 3.9%;
21
+ --card-foreground: oklch(0.145 0 0);
18
22
  --popover: 0 0% 100%;
23
+ --popover: oklch(1 0 0);
19
24
  --popover-foreground: 0 0% 3.9%;
25
+ --popover-foreground: oklch(0.145 0 0);
20
26
  --primary: 0 0% 9%;
27
+ --primary: oklch(0.205 0 0);
21
28
  --primary-foreground: 0 0% 98%;
29
+ --primary-foreground: oklch(0.985 0 0);
22
30
  --secondary: 0 0% 96.1%;
31
+ --secondary: oklch(0.97 0 0);
23
32
  --secondary-foreground: 0 0% 9%;
33
+ --secondary-foreground: oklch(0.205 0 0);
24
34
  --muted: 0 0% 96.1%;
35
+ --muted: oklch(0.97 0 0);
25
36
  --muted-foreground: 0 0% 45.1%;
37
+ --muted-foreground: oklch(0.556 0 0);
26
38
  --accent: 0 0% 96.1%;
39
+ --accent: oklch(0.97 0 0);
27
40
  --accent-foreground: 0 0% 9%;
41
+ --accent-foreground: oklch(0.205 0 0);
28
42
  --destructive: 0 84.2% 60.2%;
43
+ --destructive: oklch(0.628 0.258 29.2);
29
44
  --destructive-foreground: 0 0% 98%;
45
+ --destructive-foreground: oklch(0.985 0 0);
30
46
  --border: 0 0% 89.8%;
47
+ --border: oklch(0.922 0 0);
31
48
  --input: 0 0% 89.8%;
49
+ --input: oklch(0.922 0 0);
32
50
  --ring: 0 0% 3.9%;
51
+ --ring: oklch(0.145 0 0);
33
52
 
34
53
  /* ── Typography ────────────────────────────── */
35
54
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
@@ -61,12 +80,20 @@
61
80
  --radius-xl: 0.5rem;
62
81
  --radius-full: 9999px;
63
82
 
83
+ /* ── Shadow tokens (granular) ────────────────── */
84
+ --shadow-color: oklch(0 0 0);
85
+ --shadow-opacity: 0.06;
86
+ --shadow-blur: 3px;
87
+ --shadow-spread: 0px;
88
+ --shadow-offset-x: 0px;
89
+ --shadow-offset-y: 1px;
90
+
64
91
  /* ── Shadows (crisp, directional, no spread) ─ */
65
92
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
66
93
  --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
67
94
  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
68
95
  --shadow-xl: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04);
69
- --shadow-card: 0 0 0 1px hsl(var(--border)), 0 1px 3px 0 rgb(0 0 0 / 0.04);
96
+ --shadow-card: 0 0 0 1px oklch(0.922 0 0), 0 1px 3px 0 rgb(0 0 0 / 0.04);
70
97
 
71
98
  /* ── Animation (fast, no bounce) ────────────── */
72
99
  --duration-fast: 80ms;
@@ -79,26 +106,48 @@
79
106
 
80
107
  .theme-linear.dark {
81
108
  --background: 0 0% 3.9%;
109
+ --background: oklch(0.145 0 0);
82
110
  --foreground: 0 0% 98%;
111
+ --foreground: oklch(0.985 0 0);
83
112
  --card: 0 0% 6%;
113
+ --card: oklch(0.205 0 0 / 0.6);
84
114
  --card-foreground: 0 0% 98%;
115
+ --card-foreground: oklch(0.985 0 0);
85
116
  --popover: 0 0% 6%;
117
+ --popover: oklch(0.18 0 0);
86
118
  --popover-foreground: 0 0% 98%;
119
+ --popover-foreground: oklch(0.985 0 0);
87
120
  --primary: 0 0% 98%;
121
+ --primary: oklch(0.985 0 0);
88
122
  --primary-foreground: 0 0% 9%;
123
+ --primary-foreground: oklch(0.205 0 0);
89
124
  --secondary: 0 0% 14.9%;
125
+ --secondary: oklch(0.269 0 0);
90
126
  --secondary-foreground: 0 0% 98%;
127
+ --secondary-foreground: oklch(0.985 0 0);
91
128
  --muted: 0 0% 14.9%;
129
+ --muted: oklch(0.269 0 0);
92
130
  --muted-foreground: 0 0% 63.9%;
131
+ --muted-foreground: oklch(0.708 0 0);
93
132
  --accent: 0 0% 14.9%;
133
+ --accent: oklch(0.269 0 0);
94
134
  --accent-foreground: 0 0% 98%;
135
+ --accent-foreground: oklch(0.985 0 0);
95
136
  --destructive: 0 62.8% 30.6%;
137
+ --destructive: oklch(0.396 0.141 25.7);
96
138
  --destructive-foreground: 0 0% 98%;
139
+ --destructive-foreground: oklch(0.985 0 0);
97
140
  --border: 0 0% 14.9%;
141
+ --border: oklch(0.269 0 0);
98
142
  --input: 0 0% 14.9%;
143
+ --input: oklch(0.269 0 0);
99
144
  --ring: 0 0% 83.1%;
145
+ --ring: oklch(0.869 0 0);
146
+
147
+ --shadow-color: oklch(0 0 0);
148
+ --shadow-opacity: 0.35;
100
149
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
101
150
  --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
102
151
  --shadow-lg: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
103
- --shadow-card: 0 0 0 1px hsl(var(--border));
152
+ --shadow-card: 0 0 0 1px oklch(0.269 0 0);
104
153
  }
package/src/themes/midnight.css CHANGED
@@ -10,31 +10,50 @@
10
10
 
11
11
  :root,
12
12
  .theme-midnight {
13
- /* ── Colors ───────────────────────────────── */
13
+ /* ── Colors (HSL fallback first, then OKLCH) ─ */
14
14
  --background: 240 10% 4%;
15
+ --background: oklch(0.13 0.018 285.0);
15
16
  --foreground: 0 0% 95%;
17
+ --foreground: oklch(0.958 0 0);
16
18
  --card: 240 10% 6.5%;
19
+ --card: oklch(0.172 0.018 285.0);
17
20
  --card-foreground: 0 0% 95%;
21
+ --card-foreground: oklch(0.958 0 0);
18
22
  --popover: 240 10% 7%;
23
+ --popover: oklch(0.182 0.018 285.0);
19
24
  --popover-foreground: 0 0% 95%;
25
+ --popover-foreground: oklch(0.958 0 0);
20
26
  --primary: 263 90% 68%;
27
+ --primary: oklch(0.62 0.22 292.0);
21
28
  --primary-foreground: 0 0% 100%;
29
+ --primary-foreground: oklch(1 0 0);
22
30
  --secondary: 240 10% 11%;
31
+ --secondary: oklch(0.22 0.018 285.0);
23
32
  --secondary-foreground: 0 0% 90%;
33
+ --secondary-foreground: oklch(0.922 0 0);
24
34
  --muted: 240 10% 11%;
35
+ --muted: oklch(0.22 0.018 285.0);
25
36
  --muted-foreground: 240 5% 55%;
37
+ --muted-foreground: oklch(0.596 0.01 285.0);
26
38
  --accent: 263 90% 68%;
39
+ --accent: oklch(0.62 0.22 292.0);
27
40
  --accent-foreground: 0 0% 100%;
41
+ --accent-foreground: oklch(1 0 0);
28
42
  --destructive: 0 72% 51%;
43
+ --destructive: oklch(0.56 0.22 29.2);
29
44
  --destructive-foreground: 0 0% 100%;
45
+ --destructive-foreground: oklch(1 0 0);
30
46
  --border: 240 10% 14%;
47
+ --border: oklch(0.258 0.018 285.0);
31
48
  --input: 240 10% 14%;
49
+ --input: oklch(0.258 0.018 285.0);
32
50
  --ring: 263 90% 68%;
51
+ --ring: oklch(0.62 0.22 292.0);
33
52
 
34
53
  /* ── Midnight-specific ──────────────────────── */
35
- --neon: hsl(263 90% 68%);
36
- --neon-glow: 0 0 20px hsl(263 90% 68% / 0.35), 0 0 40px hsl(263 90% 68% / 0.15);
37
- --neon-subtle: 0 0 10px hsl(263 90% 68% / 0.2);
54
+ --neon: oklch(0.62 0.22 292.0);
55
+ --neon-glow: 0 0 20px oklch(0.62 0.22 292.0 / 0.35), 0 0 40px oklch(0.62 0.22 292.0 / 0.15);
56
+ --neon-subtle: 0 0 10px oklch(0.62 0.22 292.0 / 0.2);
38
57
 
39
58
  /* ── Typography ────────────────────────────── */
40
59
  --font-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
@@ -66,12 +85,20 @@
66
85
  --radius-xl: 1rem;
67
86
  --radius-full: 9999px;
68
87
 
88
+ /* ── Shadow tokens (granular) ────────────────── */
89
+ --shadow-color: oklch(0 0 0);
90
+ --shadow-opacity: 0.5;
91
+ --shadow-blur: 8px;
92
+ --shadow-spread: 0px;
93
+ --shadow-offset-x: 0px;
94
+ --shadow-offset-y: 2px;
95
+
69
96
  /* ── Shadows (neon glow) ─────────────────────── */
70
- --shadow-sm: 0 1px 4px 0 rgb(0 0 0 / 0.5);
71
- --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.6), 0 0 0 1px hsl(var(--border));
72
- --shadow-lg: 0 8px 24px 0 rgb(0 0 0 / 0.6), 0 0 0 1px hsl(var(--border));
73
- --shadow-xl: 0 16px 40px 0 rgb(0 0 0 / 0.7), 0 0 32px hsl(var(--primary) / 0.08);
74
- --shadow-card: 0 0 0 1px hsl(var(--border)), 0 2px 8px rgb(0 0 0 / 0.4);
97
+ --shadow-sm: 0 1px 4px 0 oklch(0 0 0 / 0.5);
98
+ --shadow-md: 0 2px 8px 0 oklch(0 0 0 / 0.6), 0 0 0 1px oklch(0.258 0.018 285.0);
99
+ --shadow-lg: 0 8px 24px 0 oklch(0 0 0 / 0.6), 0 0 0 1px oklch(0.258 0.018 285.0);
100
+ --shadow-xl: 0 16px 40px 0 oklch(0 0 0 / 0.7), 0 0 32px oklch(0.62 0.22 292.0 / 0.08);
101
+ --shadow-card: 0 0 0 1px oklch(0.258 0.018 285.0), 0 2px 8px oklch(0 0 0 / 0.4);
75
102
  --shadow-glow: var(--neon-glow);
76
103
 
77
104
  /* ── Animation (snappy, precise) ────────────── */
@@ -88,25 +115,46 @@
88
115
 
89
116
  .theme-midnight.light {
90
117
  --background: 240 10% 96%;
118
+ --background: oklch(0.962 0.01 285.0);
91
119
  --foreground: 240 10% 4%;
120
+ --foreground: oklch(0.13 0.018 285.0);
92
121
  --card: 0 0% 100%;
122
+ --card: oklch(1 0 0);
93
123
  --card-foreground: 240 10% 4%;
124
+ --card-foreground: oklch(0.13 0.018 285.0);
94
125
  --popover: 0 0% 100%;
126
+ --popover: oklch(1 0 0);
95
127
  --popover-foreground: 240 10% 4%;
128
+ --popover-foreground: oklch(0.13 0.018 285.0);
96
129
  --primary: 263 70% 50%;
130
+ --primary: oklch(0.52 0.2 292.0);
97
131
  --primary-foreground: 0 0% 100%;
132
+ --primary-foreground: oklch(1 0 0);
98
133
  --secondary: 240 10% 92%;
134
+ --secondary: oklch(0.928 0.01 285.0);
99
135
  --secondary-foreground: 240 10% 4%;
136
+ --secondary-foreground: oklch(0.13 0.018 285.0);
100
137
  --muted: 240 10% 92%;
138
+ --muted: oklch(0.928 0.01 285.0);
101
139
  --muted-foreground: 240 5% 45%;
140
+ --muted-foreground: oklch(0.506 0.01 285.0);
102
141
  --accent: 240 10% 92%;
142
+ --accent: oklch(0.928 0.01 285.0);
103
143
  --accent-foreground: 263 70% 50%;
144
+ --accent-foreground: oklch(0.52 0.2 292.0);
104
145
  --border: 240 10% 85%;
146
+ --border: oklch(0.872 0.01 285.0);
105
147
  --input: 240 10% 85%;
148
+ --input: oklch(0.872 0.01 285.0);
106
149
  --ring: 263 70% 50%;
150
+ --ring: oklch(0.52 0.2 292.0);
151
+
152
+ --neon: oklch(0.52 0.2 292.0);
107
153
  --neon-glow: none;
108
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.06);
109
- --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.08);
110
- --shadow-card: 0 0 0 1px hsl(var(--border));
154
+ --shadow-color: oklch(0 0 0);
155
+ --shadow-opacity: 0.06;
156
+ --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.06);
157
+ --shadow-md: 0 2px 8px 0 oklch(0 0 0 / 0.08);
158
+ --shadow-card: 0 0 0 1px oklch(0.872 0.01 285.0);
111
159
  color-scheme: light;
112
160
  }
package/src/themes/minimal.css CHANGED
@@ -10,26 +10,45 @@
10
10
 
11
11
  :root,
12
12
  .theme-minimal {
13
- /* ── Colors (warm light) ───────────────────── */
13
+ /* ── Colors (HSL fallback first, then OKLCH) ─ */
14
14
  --background: 40 33% 97%;
15
+ --background: oklch(0.975 0.008 80.0);
15
16
  --foreground: 25 15% 15%;
17
+ --foreground: oklch(0.255 0.022 50.0);
16
18
  --card: 0 0% 100%;
19
+ --card: oklch(1 0 0);
17
20
  --card-foreground: 25 15% 15%;
21
+ --card-foreground: oklch(0.255 0.022 50.0);
18
22
  --popover: 0 0% 100%;
23
+ --popover: oklch(1 0 0);
19
24
  --popover-foreground: 25 15% 15%;
25
+ --popover-foreground: oklch(0.255 0.022 50.0);
20
26
  --primary: 25 95% 53%;
27
+ --primary: oklch(0.7 0.19 50.0);
21
28
  --primary-foreground: 0 0% 100%;
29
+ --primary-foreground: oklch(1 0 0);
22
30
  --secondary: 35 25% 93%;
31
+ --secondary: oklch(0.942 0.014 75.0);
23
32
  --secondary-foreground: 25 15% 25%;
33
+ --secondary-foreground: oklch(0.35 0.022 50.0);
24
34
  --muted: 35 20% 94%;
35
+ --muted: oklch(0.948 0.012 75.0);
25
36
  --muted-foreground: 25 10% 45%;
37
+ --muted-foreground: oklch(0.515 0.015 50.0);
26
38
  --accent: 35 25% 93%;
39
+ --accent: oklch(0.942 0.014 75.0);
27
40
  --accent-foreground: 25 95% 48%;
41
+ --accent-foreground: oklch(0.66 0.19 50.0);
28
42
  --destructive: 0 84% 60%;
43
+ --destructive: oklch(0.628 0.258 29.2);
29
44
  --destructive-foreground: 0 0% 100%;
45
+ --destructive-foreground: oklch(1 0 0);
30
46
  --border: 35 15% 88%;
47
+ --border: oklch(0.9 0.012 75.0);
31
48
  --input: 35 15% 90%;
49
+ --input: oklch(0.912 0.012 75.0);
32
50
  --ring: 25 95% 53%;
51
+ --ring: oklch(0.7 0.19 50.0);
33
52
 
34
53
  /* ── Typography (airy, humanist) ──────────── */
35
54
  --font-sans: 'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
@@ -61,12 +80,20 @@
61
80
  --radius-xl: 1.5rem;
62
81
  --radius-full: 9999px;
63
82
 
83
+ /* ── Shadow tokens (granular) ────────────────── */
84
+ --shadow-color: oklch(0.38 0.06 50.0);
85
+ --shadow-opacity: 0.08;
86
+ --shadow-blur: 8px;
87
+ --shadow-spread: 0px;
88
+ --shadow-offset-x: 0px;
89
+ --shadow-offset-y: 2px;
90
+
64
91
  /* ── Shadows (warm, barely-there) ────────────── */
65
- --shadow-sm: 0 1px 3px 0 rgba(120, 80, 40, 0.06);
66
- --shadow-md: 0 2px 8px 0 rgba(120, 80, 40, 0.08), 0 0 0 1px rgba(120, 80, 40, 0.04);
67
- --shadow-lg: 0 4px 16px 0 rgba(120, 80, 40, 0.1), 0 1px 4px rgba(120, 80, 40, 0.06);
68
- --shadow-xl: 0 8px 32px 0 rgba(120, 80, 40, 0.12), 0 2px 8px rgba(120, 80, 40, 0.06);
69
- --shadow-card: 0 0 0 1px hsl(var(--border)), 0 1px 3px rgba(120, 80, 40, 0.06);
92
+ --shadow-sm: 0 1px 3px 0 oklch(0.38 0.06 50.0 / 0.06);
93
+ --shadow-md: 0 2px 8px 0 oklch(0.38 0.06 50.0 / 0.08), 0 0 0 1px oklch(0.38 0.06 50.0 / 0.04);
94
+ --shadow-lg: 0 4px 16px 0 oklch(0.38 0.06 50.0 / 0.1), 0 1px 4px oklch(0.38 0.06 50.0 / 0.06);
95
+ --shadow-xl: 0 8px 32px 0 oklch(0.38 0.06 50.0 / 0.12), 0 2px 8px oklch(0.38 0.06 50.0 / 0.06);
96
+ --shadow-card: 0 0 0 1px oklch(0.9 0.012 75.0), 0 1px 3px oklch(0.38 0.06 50.0 / 0.06);
70
97
 
71
98
  /* ── Animation (natural, unhurried) ─────────── */
72
99
  --duration-fast: 100ms;
@@ -79,24 +106,45 @@
79
106
 
80
107
  .theme-minimal.dark {
81
108
  --background: 25 12% 8%;
109
+ --background: oklch(0.178 0.014 50.0);
82
110
  --foreground: 35 15% 90%;
111
+ --foreground: oklch(0.912 0.012 75.0);
83
112
  --card: 25 12% 10%;
113
+ --card: oklch(0.205 0.014 50.0);
84
114
  --card-foreground: 35 15% 90%;
115
+ --card-foreground: oklch(0.912 0.012 75.0);
85
116
  --popover: 25 12% 11%;
117
+ --popover: oklch(0.218 0.014 50.0);
86
118
  --popover-foreground: 35 15% 90%;
119
+ --popover-foreground: oklch(0.912 0.012 75.0);
87
120
  --primary: 25 95% 58%;
121
+ --primary: oklch(0.73 0.19 50.0);
88
122
  --primary-foreground: 0 0% 100%;
123
+ --primary-foreground: oklch(1 0 0);
89
124
  --secondary: 25 12% 15%;
125
+ --secondary: oklch(0.255 0.014 50.0);
90
126
  --secondary-foreground: 35 15% 80%;
127
+ --secondary-foreground: oklch(0.838 0.012 75.0);
91
128
  --muted: 25 12% 14%;
129
+ --muted: oklch(0.243 0.014 50.0);
92
130
  --muted-foreground: 25 10% 55%;
131
+ --muted-foreground: oklch(0.596 0.012 50.0);
93
132
  --accent: 25 12% 15%;
133
+ --accent: oklch(0.255 0.014 50.0);
94
134
  --accent-foreground: 25 95% 58%;
135
+ --accent-foreground: oklch(0.73 0.19 50.0);
95
136
  --border: 25 12% 18%;
137
+ --border: oklch(0.285 0.014 50.0);
96
138
  --input: 25 12% 18%;
139
+ --input: oklch(0.285 0.014 50.0);
97
140
  --ring: 25 95% 58%;
98
- --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.25);
99
- --shadow-md: 0 2px 8px 0 rgb(0 0 0 / 0.35);
100
- --shadow-lg: 0 4px 16px 0 rgb(0 0 0 / 0.4);
101
- --shadow-card: 0 0 0 1px hsl(var(--border));
141
+ --ring: oklch(0.73 0.19 50.0);
142
+
143
+ --shadow-color: oklch(0 0 0);
144
+ --shadow-opacity: 0.3;
145
+ --shadow-blur: 8px;
146
+ --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.25);
147
+ --shadow-md: 0 2px 8px 0 oklch(0 0 0 / 0.35);
148
+ --shadow-lg: 0 4px 16px 0 oklch(0 0 0 / 0.4);
149
+ --shadow-card: 0 0 0 1px oklch(0.285 0.014 50.0);
102
150
  }