@blinkdotnew/ui 0.2.0 → 0.2.1

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