@blinkdotnew/ui 0.1.6 → 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 (9) hide show
  1. package/dist/index.d.mts +12 -2
  2. package/dist/index.d.ts +12 -2
  3. package/dist/index.js +4 -4
  4. package/dist/index.mjs +4 -4
  5. package/package.json +1 -1
  6. package/src/themes/glass.css +63 -14
  7. package/src/themes/linear.css +52 -3
  8. package/src/themes/midnight.css +60 -12
  9. package/src/themes/minimal.css +58 -10
package/dist/index.d.mts CHANGED
@@ -273,10 +273,20 @@ interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
273
273
  defaultCollapsed?: boolean;
274
274
  }
275
275
  declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
276
- /** Sidebar wrapper — hidden on mobile, shown as overlay when mobileOpen=true */
276
+ /**
277
+ * Sidebar wrapper.
278
+ * On MOBILE → hidden (display: none) by default; shown as a fixed overlay when mobileOpen=true.
279
+ * On DESKTOP → always visible as a normal flex child.
280
+ *
281
+ * ALWAYS wrap <Sidebar> in <AppShellSidebar> — never put <Sidebar> directly in <AppShell>.
282
+ * Without this wrapper the sidebar is visible on all screen sizes.
283
+ */
277
284
  declare const AppShellSidebar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
278
285
  declare const AppShellMain: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
279
- /** Hamburger button — place in Navbar/header on mobile to toggle sidebar */
286
+ /**
287
+ * Hamburger/close button — place in your mobile header bar (md:hidden).
288
+ * Toggles the sidebar overlay on mobile.
289
+ */
280
290
  declare const MobileSidebarTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
281
291
 
282
292
  declare const SplitPage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
package/dist/index.d.ts CHANGED
@@ -273,10 +273,20 @@ interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
273
273
  defaultCollapsed?: boolean;
274
274
  }
275
275
  declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
276
- /** Sidebar wrapper — hidden on mobile, shown as overlay when mobileOpen=true */
276
+ /**
277
+ * Sidebar wrapper.
278
+ * On MOBILE → hidden (display: none) by default; shown as a fixed overlay when mobileOpen=true.
279
+ * On DESKTOP → always visible as a normal flex child.
280
+ *
281
+ * ALWAYS wrap <Sidebar> in <AppShellSidebar> — never put <Sidebar> directly in <AppShell>.
282
+ * Without this wrapper the sidebar is visible on all screen sizes.
283
+ */
277
284
  declare const AppShellSidebar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
278
285
  declare const AppShellMain: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
279
- /** Hamburger button — place in Navbar/header on mobile to toggle sidebar */
286
+ /**
287
+ * Hamburger/close button — place in your mobile header bar (md:hidden).
288
+ * Toggles the sidebar overlay on mobile.
289
+ */
280
290
  declare const MobileSidebarTrigger: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
281
291
 
282
292
  declare const SplitPage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
package/dist/index.js CHANGED
@@ -1009,11 +1009,11 @@ var AppShellSidebar = React26__default.default.forwardRef(
1009
1009
  {
1010
1010
  ref,
1011
1011
  className: cn(
1012
- // Desktop: always visible
1013
1012
  "shrink-0 h-full",
1014
- // Mobile: hidden by default, slide in as fixed overlay when open
1015
- "fixed inset-y-0 left-0 z-50 md:relative md:translate-x-0 transition-transform duration-200",
1016
- mobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
1013
+ // Mobile: hidden by default; shows as fixed overlay when open
1014
+ mobileOpen ? "fixed inset-y-0 left-0 z-50 flex" : "hidden md:flex",
1015
+ // Desktop: always visible as a normal relative element
1016
+ "md:relative",
1017
1017
  className
1018
1018
  ),
1019
1019
  ...props
package/dist/index.mjs CHANGED
@@ -972,11 +972,11 @@ var AppShellSidebar = React26.forwardRef(
972
972
  {
973
973
  ref,
974
974
  className: cn(
975
- // Desktop: always visible
976
975
  "shrink-0 h-full",
977
- // Mobile: hidden by default, slide in as fixed overlay when open
978
- "fixed inset-y-0 left-0 z-50 md:relative md:translate-x-0 transition-transform duration-200",
979
- mobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
976
+ // Mobile: hidden by default; shows as fixed overlay when open
977
+ mobileOpen ? "fixed inset-y-0 left-0 z-50 flex" : "hidden md:flex",
978
+ // Desktop: always visible as a normal relative element
979
+ "md:relative",
980
980
  className
981
981
  ),
982
982
  ...props
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blinkdotnew/ui",
3
- "version": "0.1.6",
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
  }