@placesapp/appy-ui 0.0.2 → 0.0.31
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.
- package/package.json +5 -12
- package/{dist/styles/index.css → src/styles/globals.css} +104 -79
- package/dist/styles/base.css +0 -135
- package/dist/styles/ios.css +0 -65
- package/dist/styles/material.css +0 -66
- package/dist/styles/overrides.css +0 -32
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@placesapp/appy-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.31",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -9,14 +9,11 @@
|
|
|
9
9
|
"types": "./dist/index.d.ts",
|
|
10
10
|
"import": "./dist/index.js"
|
|
11
11
|
},
|
|
12
|
-
"./
|
|
13
|
-
"./styles/base.css": "./dist/styles/base.css",
|
|
14
|
-
"./styles/ios.css": "./dist/styles/ios.css",
|
|
15
|
-
"./styles/material.css": "./dist/styles/material.css",
|
|
16
|
-
"./styles/overrides.css": "./dist/styles/overrides.css"
|
|
12
|
+
"./globals.css": "./src/styles/globals.css"
|
|
17
13
|
},
|
|
18
14
|
"files": [
|
|
19
|
-
"dist"
|
|
15
|
+
"dist",
|
|
16
|
+
"src/styles/globals.css"
|
|
20
17
|
],
|
|
21
18
|
"sideEffects": false,
|
|
22
19
|
"peerDependencies": {
|
|
@@ -61,9 +58,6 @@
|
|
|
61
58
|
"@types/react-dom": "19.2.3",
|
|
62
59
|
"cmdk": "^1.1.1",
|
|
63
60
|
"embla-carousel-react": "^8.6.0",
|
|
64
|
-
"postcss": "^8.5.6",
|
|
65
|
-
"postcss-cli": "^11.0.1",
|
|
66
|
-
"postcss-import": "^16.1.1",
|
|
67
61
|
"react-day-picker": "^9.13.0",
|
|
68
62
|
"recharts": "^3.7.0",
|
|
69
63
|
"tanstack-theme-kit": "^0.2.1",
|
|
@@ -71,8 +65,7 @@
|
|
|
71
65
|
"typescript": "^5.7.3"
|
|
72
66
|
},
|
|
73
67
|
"scripts": {
|
|
74
|
-
"build": "tsup
|
|
75
|
-
"build:css": "postcss src/styles/index.css -o dist/styles/index.css && cp src/styles/base.css src/styles/ios.css src/styles/material.css src/styles/overrides.css dist/styles/",
|
|
68
|
+
"build": "tsup",
|
|
76
69
|
"dev": "tsup --watch",
|
|
77
70
|
"prepublishOnly": "npm run build"
|
|
78
71
|
},
|
|
@@ -1,8 +1,61 @@
|
|
|
1
|
-
/* appy-ui Styles */
|
|
2
|
-
/*
|
|
3
|
-
|
|
4
|
-
/*
|
|
5
|
-
|
|
1
|
+
/* appy-ui Global Styles */
|
|
2
|
+
/* Import this file in your app's CSS after tailwindcss */
|
|
3
|
+
|
|
4
|
+
/* Tell Tailwind to scan this package's compiled components */
|
|
5
|
+
@source "../dist/**/*.js";
|
|
6
|
+
|
|
7
|
+
/* Custom variants for platform theming */
|
|
8
|
+
@custom-variant dark (&:is(.dark *));
|
|
9
|
+
@custom-variant ios (&:is(.ios *));
|
|
10
|
+
@custom-variant material (&:is(.material *));
|
|
11
|
+
|
|
12
|
+
/* Theme tokens - maps CSS vars to Tailwind */
|
|
13
|
+
@theme inline {
|
|
14
|
+
--font-sans: 'Inter Variable', sans-serif;
|
|
15
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
16
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
17
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
18
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
19
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
20
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
21
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
22
|
+
--color-sidebar: var(--sidebar);
|
|
23
|
+
--color-chart-5: var(--chart-5);
|
|
24
|
+
--color-chart-4: var(--chart-4);
|
|
25
|
+
--color-chart-3: var(--chart-3);
|
|
26
|
+
--color-chart-2: var(--chart-2);
|
|
27
|
+
--color-chart-1: var(--chart-1);
|
|
28
|
+
--color-ring: var(--ring);
|
|
29
|
+
--color-input: var(--input);
|
|
30
|
+
--color-border: var(--border);
|
|
31
|
+
--color-destructive: var(--destructive);
|
|
32
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
33
|
+
--color-accent: var(--accent);
|
|
34
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
35
|
+
--color-muted: var(--muted);
|
|
36
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
37
|
+
--color-secondary: var(--secondary);
|
|
38
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
39
|
+
--color-primary: var(--primary);
|
|
40
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
41
|
+
--color-popover: var(--popover);
|
|
42
|
+
--color-card-foreground: var(--card-foreground);
|
|
43
|
+
--color-card: var(--card);
|
|
44
|
+
--color-foreground: var(--foreground);
|
|
45
|
+
--color-background: var(--background);
|
|
46
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
47
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
48
|
+
--radius-lg: var(--radius);
|
|
49
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
50
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
51
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
52
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* ============================================
|
|
56
|
+
Base Theme Variables
|
|
57
|
+
============================================ */
|
|
58
|
+
|
|
6
59
|
:root {
|
|
7
60
|
/* Colors - OKLch */
|
|
8
61
|
--background: oklch(0.99 0.002 75);
|
|
@@ -38,6 +91,7 @@
|
|
|
38
91
|
--sidebar-border: oklch(0.922 0 0);
|
|
39
92
|
--sidebar-ring: oklch(0.708 0 0);
|
|
40
93
|
}
|
|
94
|
+
|
|
41
95
|
.dark {
|
|
42
96
|
--background: oklch(0.14 0.01 260);
|
|
43
97
|
--foreground: oklch(0.92 0.01 75);
|
|
@@ -71,68 +125,11 @@
|
|
|
71
125
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
72
126
|
--sidebar-ring: oklch(0.72 0.18 45);
|
|
73
127
|
}
|
|
74
|
-
/* Tailwind theme extension */
|
|
75
|
-
@theme inline {
|
|
76
|
-
--font-sans: 'Inter Variable', sans-serif;
|
|
77
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
78
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
79
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
80
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
81
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
82
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
83
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
84
|
-
--color-sidebar: var(--sidebar);
|
|
85
|
-
--color-chart-5: var(--chart-5);
|
|
86
|
-
--color-chart-4: var(--chart-4);
|
|
87
|
-
--color-chart-3: var(--chart-3);
|
|
88
|
-
--color-chart-2: var(--chart-2);
|
|
89
|
-
--color-chart-1: var(--chart-1);
|
|
90
|
-
--color-ring: var(--ring);
|
|
91
|
-
--color-input: var(--input);
|
|
92
|
-
--color-border: var(--border);
|
|
93
|
-
--color-destructive: var(--destructive);
|
|
94
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
95
|
-
--color-accent: var(--accent);
|
|
96
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
97
|
-
--color-muted: var(--muted);
|
|
98
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
99
|
-
--color-secondary: var(--secondary);
|
|
100
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
101
|
-
--color-primary: var(--primary);
|
|
102
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
103
|
-
--color-popover: var(--popover);
|
|
104
|
-
--color-card-foreground: var(--card-foreground);
|
|
105
|
-
--color-card: var(--card);
|
|
106
|
-
--color-foreground: var(--foreground);
|
|
107
|
-
--color-background: var(--background);
|
|
108
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
109
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
110
|
-
--radius-lg: var(--radius);
|
|
111
|
-
--radius-xl: calc(var(--radius) + 4px);
|
|
112
|
-
--radius-2xl: calc(var(--radius) + 8px);
|
|
113
|
-
--radius-3xl: calc(var(--radius) + 12px);
|
|
114
|
-
--radius-4xl: calc(var(--radius) + 16px);
|
|
115
|
-
}
|
|
116
|
-
@layer base {
|
|
117
|
-
* {
|
|
118
|
-
@apply border-border outline-ring/50;
|
|
119
|
-
}
|
|
120
|
-
body {
|
|
121
|
-
@apply relative bg-background font-sans text-foreground;
|
|
122
|
-
}
|
|
123
|
-
html {
|
|
124
|
-
@apply scroll-smooth font-sans select-none;
|
|
125
|
-
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
|
126
|
-
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
127
|
-
background-color: var(--background);
|
|
128
|
-
}
|
|
129
128
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
135
|
-
/* iOS 26 Liquid Glass Design System */
|
|
129
|
+
/* ============================================
|
|
130
|
+
iOS 26 Liquid Glass Design System
|
|
131
|
+
============================================ */
|
|
132
|
+
|
|
136
133
|
.ios {
|
|
137
134
|
/* Glass Effects */
|
|
138
135
|
--glass-blur: 20px;
|
|
@@ -169,18 +166,21 @@
|
|
|
169
166
|
/* Separators */
|
|
170
167
|
--separator: oklch(0 0 0 / 8%);
|
|
171
168
|
}
|
|
169
|
+
|
|
172
170
|
.ios.dark {
|
|
173
171
|
--glass-bg: oklch(0.2 0.02 260 / 60%);
|
|
174
172
|
--glass-bg-elevated: oklch(0.25 0.02 260 / 70%);
|
|
175
173
|
--glass-border: oklch(1 0 0 / 15%);
|
|
176
174
|
--separator: oklch(1 0 0 / 8%);
|
|
177
175
|
}
|
|
176
|
+
|
|
178
177
|
/* iOS Glass Support Check */
|
|
179
178
|
@supports (backdrop-filter: blur(1px)) {
|
|
180
179
|
.ios {
|
|
181
180
|
--glass-supported: 1;
|
|
182
181
|
}
|
|
183
182
|
}
|
|
183
|
+
|
|
184
184
|
@supports not (backdrop-filter: blur(1px)) {
|
|
185
185
|
.ios {
|
|
186
186
|
--glass-blur: 0;
|
|
@@ -193,7 +193,11 @@
|
|
|
193
193
|
--glass-bg-elevated: oklch(0.22 0.02 260 / 95%);
|
|
194
194
|
}
|
|
195
195
|
}
|
|
196
|
-
|
|
196
|
+
|
|
197
|
+
/* ============================================
|
|
198
|
+
Material 3 Design System
|
|
199
|
+
============================================ */
|
|
200
|
+
|
|
197
201
|
.material {
|
|
198
202
|
/* Glass Effects - Material uses solid surfaces */
|
|
199
203
|
--glass-blur: 0;
|
|
@@ -239,6 +243,7 @@
|
|
|
239
243
|
/* Separators */
|
|
240
244
|
--separator: oklch(0 0 0 / 12%);
|
|
241
245
|
}
|
|
246
|
+
|
|
242
247
|
.material.dark {
|
|
243
248
|
--m3-surface: oklch(0.14 0.01 260);
|
|
244
249
|
--m3-surface-container: oklch(0.18 0.01 260);
|
|
@@ -257,33 +262,53 @@
|
|
|
257
262
|
|
|
258
263
|
--separator: oklch(1 0 0 / 12%);
|
|
259
264
|
}
|
|
260
|
-
|
|
261
|
-
/*
|
|
265
|
+
|
|
266
|
+
/* ============================================
|
|
267
|
+
Base Layer Styles
|
|
268
|
+
============================================ */
|
|
269
|
+
|
|
270
|
+
@layer base {
|
|
271
|
+
* {
|
|
272
|
+
@apply border-border outline-ring/50;
|
|
273
|
+
}
|
|
274
|
+
body {
|
|
275
|
+
@apply relative bg-background font-sans text-foreground;
|
|
276
|
+
}
|
|
277
|
+
html {
|
|
278
|
+
@apply scroll-smooth font-sans select-none;
|
|
279
|
+
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
|
280
|
+
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
281
|
+
background-color: var(--background);
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
button:not(:disabled),
|
|
285
|
+
[role='button']:not(:disabled) {
|
|
286
|
+
cursor: pointer;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
262
290
|
/* ============================================
|
|
263
|
-
|
|
291
|
+
Platform-Specific Component Overrides
|
|
264
292
|
============================================ */
|
|
265
|
-
|
|
293
|
+
|
|
294
|
+
/* iOS Card - Shadow effect */
|
|
266
295
|
.ios [data-slot='card'] {
|
|
267
296
|
box-shadow: 0 0 8px oklch(0 0 0 / 8%);
|
|
268
297
|
border: none;
|
|
269
298
|
}
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
============================================ */
|
|
273
|
-
/* Card - Elevation shadow */
|
|
299
|
+
|
|
300
|
+
/* Material Card - Elevation shadow */
|
|
274
301
|
.material [data-slot='card'] {
|
|
275
302
|
box-shadow: var(--elevation-1);
|
|
276
303
|
border: none;
|
|
277
304
|
}
|
|
305
|
+
|
|
278
306
|
/* ============================================
|
|
279
307
|
Performance Optimizations
|
|
280
308
|
============================================ */
|
|
309
|
+
|
|
281
310
|
/* Apply will-change only to animated glass elements */
|
|
282
311
|
.ios [data-slot='dialog-content'],
|
|
283
312
|
.ios [data-slot='sheet-content'] {
|
|
284
313
|
will-change: transform, opacity;
|
|
285
314
|
}
|
|
286
|
-
/* Custom variants for Tailwind v4 */
|
|
287
|
-
@custom-variant dark (&:is(.dark *));
|
|
288
|
-
@custom-variant ios (&:is(.ios *));
|
|
289
|
-
@custom-variant material (&:is(.material *));
|
package/dist/styles/base.css
DELETED
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
/* appy-ui Base Theme Variables */
|
|
2
|
-
/* These are CSS custom properties that define the theme colors and other design tokens */
|
|
3
|
-
|
|
4
|
-
:root {
|
|
5
|
-
/* Colors - OKLch */
|
|
6
|
-
--background: oklch(0.99 0.002 75);
|
|
7
|
-
--foreground: oklch(0.15 0.01 75);
|
|
8
|
-
--card: oklch(1 0 0);
|
|
9
|
-
--card-foreground: oklch(0.145 0 0);
|
|
10
|
-
--popover: oklch(1 0 0);
|
|
11
|
-
--popover-foreground: oklch(0.145 0 0);
|
|
12
|
-
--primary: oklch(0.65 0.18 45);
|
|
13
|
-
--primary-foreground: oklch(0.99 0.002 75);
|
|
14
|
-
--secondary: oklch(0.97 0 0);
|
|
15
|
-
--secondary-foreground: oklch(0.205 0 0);
|
|
16
|
-
--muted: oklch(0.97 0 0);
|
|
17
|
-
--muted-foreground: oklch(0.556 0 0);
|
|
18
|
-
--accent: oklch(0.65 0.18 45);
|
|
19
|
-
--accent-foreground: oklch(0.99 0.002 75);
|
|
20
|
-
--destructive: oklch(0.58 0.22 27);
|
|
21
|
-
--border: oklch(0.922 0 0);
|
|
22
|
-
--input: oklch(0.922 0 0);
|
|
23
|
-
--ring: oklch(0.65 0.18 45);
|
|
24
|
-
--chart-1: oklch(0.809 0.105 251.813);
|
|
25
|
-
--chart-2: oklch(0.623 0.214 259.815);
|
|
26
|
-
--chart-3: oklch(0.546 0.245 262.881);
|
|
27
|
-
--chart-4: oklch(0.488 0.243 264.376);
|
|
28
|
-
--chart-5: oklch(0.424 0.199 265.638);
|
|
29
|
-
--radius: 0.875rem;
|
|
30
|
-
--sidebar: oklch(0.985 0 0);
|
|
31
|
-
--sidebar-foreground: oklch(0.145 0 0);
|
|
32
|
-
--sidebar-primary: oklch(0.205 0 0);
|
|
33
|
-
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
34
|
-
--sidebar-accent: oklch(0.97 0 0);
|
|
35
|
-
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
36
|
-
--sidebar-border: oklch(0.922 0 0);
|
|
37
|
-
--sidebar-ring: oklch(0.708 0 0);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.dark {
|
|
41
|
-
--background: oklch(0.14 0.01 260);
|
|
42
|
-
--foreground: oklch(0.92 0.01 75);
|
|
43
|
-
--card: oklch(0.18 0.01 260);
|
|
44
|
-
--card-foreground: oklch(0.92 0.01 75);
|
|
45
|
-
--popover: oklch(0.18 0.01 260);
|
|
46
|
-
--popover-foreground: oklch(0.92 0.01 75);
|
|
47
|
-
--primary: oklch(0.72 0.18 45);
|
|
48
|
-
--primary-foreground: oklch(0.14 0.01 260);
|
|
49
|
-
--secondary: oklch(0.22 0.01 260);
|
|
50
|
-
--secondary-foreground: oklch(0.92 0.01 75);
|
|
51
|
-
--muted: oklch(0.22 0.01 260);
|
|
52
|
-
--muted-foreground: oklch(0.65 0.01 75);
|
|
53
|
-
--accent: oklch(0.72 0.18 45);
|
|
54
|
-
--accent-foreground: oklch(0.14 0.01 260);
|
|
55
|
-
--destructive: oklch(0.704 0.191 22.216);
|
|
56
|
-
--border: oklch(1 0 0 / 10%);
|
|
57
|
-
--input: oklch(1 0 0 / 15%);
|
|
58
|
-
--ring: oklch(0.72 0.18 45);
|
|
59
|
-
--chart-1: oklch(0.809 0.105 251.813);
|
|
60
|
-
--chart-2: oklch(0.623 0.214 259.815);
|
|
61
|
-
--chart-3: oklch(0.546 0.245 262.881);
|
|
62
|
-
--chart-4: oklch(0.488 0.243 264.376);
|
|
63
|
-
--chart-5: oklch(0.424 0.199 265.638);
|
|
64
|
-
--sidebar: oklch(0.18 0.01 260);
|
|
65
|
-
--sidebar-foreground: oklch(0.92 0.01 75);
|
|
66
|
-
--sidebar-primary: oklch(0.72 0.18 45);
|
|
67
|
-
--sidebar-primary-foreground: oklch(0.14 0.01 260);
|
|
68
|
-
--sidebar-accent: oklch(0.22 0.01 260);
|
|
69
|
-
--sidebar-accent-foreground: oklch(0.92 0.01 75);
|
|
70
|
-
--sidebar-border: oklch(1 0 0 / 10%);
|
|
71
|
-
--sidebar-ring: oklch(0.72 0.18 45);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
/* Tailwind theme extension */
|
|
75
|
-
@theme inline {
|
|
76
|
-
--font-sans: 'Inter Variable', sans-serif;
|
|
77
|
-
--color-sidebar-ring: var(--sidebar-ring);
|
|
78
|
-
--color-sidebar-border: var(--sidebar-border);
|
|
79
|
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
80
|
-
--color-sidebar-accent: var(--sidebar-accent);
|
|
81
|
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
82
|
-
--color-sidebar-primary: var(--sidebar-primary);
|
|
83
|
-
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
84
|
-
--color-sidebar: var(--sidebar);
|
|
85
|
-
--color-chart-5: var(--chart-5);
|
|
86
|
-
--color-chart-4: var(--chart-4);
|
|
87
|
-
--color-chart-3: var(--chart-3);
|
|
88
|
-
--color-chart-2: var(--chart-2);
|
|
89
|
-
--color-chart-1: var(--chart-1);
|
|
90
|
-
--color-ring: var(--ring);
|
|
91
|
-
--color-input: var(--input);
|
|
92
|
-
--color-border: var(--border);
|
|
93
|
-
--color-destructive: var(--destructive);
|
|
94
|
-
--color-accent-foreground: var(--accent-foreground);
|
|
95
|
-
--color-accent: var(--accent);
|
|
96
|
-
--color-muted-foreground: var(--muted-foreground);
|
|
97
|
-
--color-muted: var(--muted);
|
|
98
|
-
--color-secondary-foreground: var(--secondary-foreground);
|
|
99
|
-
--color-secondary: var(--secondary);
|
|
100
|
-
--color-primary-foreground: var(--primary-foreground);
|
|
101
|
-
--color-primary: var(--primary);
|
|
102
|
-
--color-popover-foreground: var(--popover-foreground);
|
|
103
|
-
--color-popover: var(--popover);
|
|
104
|
-
--color-card-foreground: var(--card-foreground);
|
|
105
|
-
--color-card: var(--card);
|
|
106
|
-
--color-foreground: var(--foreground);
|
|
107
|
-
--color-background: var(--background);
|
|
108
|
-
--radius-sm: calc(var(--radius) - 4px);
|
|
109
|
-
--radius-md: calc(var(--radius) - 2px);
|
|
110
|
-
--radius-lg: var(--radius);
|
|
111
|
-
--radius-xl: calc(var(--radius) + 4px);
|
|
112
|
-
--radius-2xl: calc(var(--radius) + 8px);
|
|
113
|
-
--radius-3xl: calc(var(--radius) + 12px);
|
|
114
|
-
--radius-4xl: calc(var(--radius) + 16px);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
@layer base {
|
|
118
|
-
* {
|
|
119
|
-
@apply border-border outline-ring/50;
|
|
120
|
-
}
|
|
121
|
-
body {
|
|
122
|
-
@apply relative bg-background font-sans text-foreground;
|
|
123
|
-
}
|
|
124
|
-
html {
|
|
125
|
-
@apply scroll-smooth font-sans select-none;
|
|
126
|
-
padding: env(safe-area-inset-top) env(safe-area-inset-right)
|
|
127
|
-
env(safe-area-inset-bottom) env(safe-area-inset-left);
|
|
128
|
-
background-color: var(--background);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
button:not(:disabled),
|
|
132
|
-
[role='button']:not(:disabled) {
|
|
133
|
-
cursor: pointer;
|
|
134
|
-
}
|
|
135
|
-
}
|
package/dist/styles/ios.css
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
/* iOS 26 Liquid Glass Design System */
|
|
2
|
-
|
|
3
|
-
.ios {
|
|
4
|
-
/* Glass Effects */
|
|
5
|
-
--glass-blur: 20px;
|
|
6
|
-
--glass-bg: oklch(1 0 0 / 60%);
|
|
7
|
-
--glass-bg-elevated: oklch(1 0 0 / 70%);
|
|
8
|
-
--glass-border: oklch(1 0 0 / 30%);
|
|
9
|
-
|
|
10
|
-
/* iOS System Colors */
|
|
11
|
-
--ios-blue: oklch(0.65 0.22 255);
|
|
12
|
-
--ios-green: oklch(0.7 0.2 145);
|
|
13
|
-
--ios-red: oklch(0.6 0.25 25);
|
|
14
|
-
--ios-orange: oklch(0.7 0.2 55);
|
|
15
|
-
--ios-yellow: oklch(0.85 0.18 90);
|
|
16
|
-
--ios-teal: oklch(0.7 0.15 195);
|
|
17
|
-
--ios-purple: oklch(0.6 0.2 300);
|
|
18
|
-
|
|
19
|
-
/* Typography - SF Pro */
|
|
20
|
-
--font-sans:
|
|
21
|
-
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
|
|
22
|
-
'Helvetica Neue', sans-serif;
|
|
23
|
-
|
|
24
|
-
/* iOS Corner Radii - pill-shaped / larger */
|
|
25
|
-
--radius: 1.25rem;
|
|
26
|
-
|
|
27
|
-
/* Elevation - iOS uses no shadows, only translucency */
|
|
28
|
-
--elevation-1: none;
|
|
29
|
-
--elevation-2: none;
|
|
30
|
-
--elevation-3: none;
|
|
31
|
-
|
|
32
|
-
/* Interaction */
|
|
33
|
-
--press-scale: 0.97;
|
|
34
|
-
--press-duration: 100ms;
|
|
35
|
-
|
|
36
|
-
/* Separators */
|
|
37
|
-
--separator: oklch(0 0 0 / 8%);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.ios.dark {
|
|
41
|
-
--glass-bg: oklch(0.2 0.02 260 / 60%);
|
|
42
|
-
--glass-bg-elevated: oklch(0.25 0.02 260 / 70%);
|
|
43
|
-
--glass-border: oklch(1 0 0 / 15%);
|
|
44
|
-
--separator: oklch(1 0 0 / 8%);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* iOS Glass Support Check */
|
|
48
|
-
@supports (backdrop-filter: blur(1px)) {
|
|
49
|
-
.ios {
|
|
50
|
-
--glass-supported: 1;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@supports not (backdrop-filter: blur(1px)) {
|
|
55
|
-
.ios {
|
|
56
|
-
--glass-blur: 0;
|
|
57
|
-
--glass-bg: oklch(1 0 0 / 92%);
|
|
58
|
-
--glass-bg-elevated: oklch(1 0 0 / 95%);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.ios.dark {
|
|
62
|
-
--glass-bg: oklch(0.18 0.02 260 / 95%);
|
|
63
|
-
--glass-bg-elevated: oklch(0.22 0.02 260 / 95%);
|
|
64
|
-
}
|
|
65
|
-
}
|
package/dist/styles/material.css
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
/* Material 3 Design System */
|
|
2
|
-
|
|
3
|
-
.material {
|
|
4
|
-
/* Glass Effects - Material uses solid surfaces */
|
|
5
|
-
--glass-blur: 0;
|
|
6
|
-
--glass-bg: var(--card);
|
|
7
|
-
--glass-bg-elevated: var(--card);
|
|
8
|
-
--glass-border: transparent;
|
|
9
|
-
|
|
10
|
-
/* M3 Surface Tones */
|
|
11
|
-
--m3-surface: oklch(0.99 0.002 75);
|
|
12
|
-
--m3-surface-container: oklch(0.96 0.003 75);
|
|
13
|
-
--m3-surface-container-high: oklch(0.94 0.004 75);
|
|
14
|
-
--m3-surface-container-highest: oklch(0.92 0.005 75);
|
|
15
|
-
--m3-on-surface: oklch(0.15 0.01 75);
|
|
16
|
-
|
|
17
|
-
/* M3 State Layers */
|
|
18
|
-
--m3-state-hover: oklch(0 0 0 / 8%);
|
|
19
|
-
--m3-state-focus: oklch(0 0 0 / 12%);
|
|
20
|
-
--m3-state-pressed: oklch(0 0 0 / 12%);
|
|
21
|
-
--m3-state-dragged: oklch(0 0 0 / 16%);
|
|
22
|
-
|
|
23
|
-
/* Typography - Roboto */
|
|
24
|
-
--font-sans: 'Roboto', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
25
|
-
|
|
26
|
-
/* M3 Corner Radius Scale */
|
|
27
|
-
--radius: 0.75rem;
|
|
28
|
-
--radius-xs: 0.25rem;
|
|
29
|
-
--radius-sm: 0.5rem;
|
|
30
|
-
--radius-md: 0.75rem;
|
|
31
|
-
--radius-lg: 1rem;
|
|
32
|
-
--radius-xl: 1.75rem;
|
|
33
|
-
--radius-full: 9999px;
|
|
34
|
-
|
|
35
|
-
/* M3 Elevation Shadows */
|
|
36
|
-
--elevation-1: 0 1px 2px oklch(0 0 0 / 30%), 0 1px 3px 1px oklch(0 0 0 / 15%);
|
|
37
|
-
--elevation-2: 0 1px 2px oklch(0 0 0 / 30%), 0 2px 6px 2px oklch(0 0 0 / 15%);
|
|
38
|
-
--elevation-3: 0 1px 3px oklch(0 0 0 / 30%), 0 4px 8px 3px oklch(0 0 0 / 15%);
|
|
39
|
-
|
|
40
|
-
/* Interaction */
|
|
41
|
-
--press-scale: 1;
|
|
42
|
-
--press-duration: 0ms;
|
|
43
|
-
--ripple-duration: 300ms;
|
|
44
|
-
|
|
45
|
-
/* Separators */
|
|
46
|
-
--separator: oklch(0 0 0 / 12%);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
.material.dark {
|
|
50
|
-
--m3-surface: oklch(0.14 0.01 260);
|
|
51
|
-
--m3-surface-container: oklch(0.18 0.01 260);
|
|
52
|
-
--m3-surface-container-high: oklch(0.22 0.01 260);
|
|
53
|
-
--m3-surface-container-highest: oklch(0.26 0.01 260);
|
|
54
|
-
--m3-on-surface: oklch(0.92 0.01 75);
|
|
55
|
-
|
|
56
|
-
--m3-state-hover: oklch(1 0 0 / 8%);
|
|
57
|
-
--m3-state-focus: oklch(1 0 0 / 12%);
|
|
58
|
-
--m3-state-pressed: oklch(1 0 0 / 12%);
|
|
59
|
-
--m3-state-dragged: oklch(1 0 0 / 16%);
|
|
60
|
-
|
|
61
|
-
--elevation-1: 0 1px 3px 1px oklch(0 0 0 / 26%), 0 1px 2px oklch(0 0 0 / 30%);
|
|
62
|
-
--elevation-2: 0 2px 6px 2px oklch(0 0 0 / 26%), 0 1px 2px oklch(0 0 0 / 30%);
|
|
63
|
-
--elevation-3: 0 4px 8px 3px oklch(0 0 0 / 26%), 0 1px 3px oklch(0 0 0 / 30%);
|
|
64
|
-
|
|
65
|
-
--separator: oklch(1 0 0 / 12%);
|
|
66
|
-
}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/* Platform-Specific Component Overrides */
|
|
2
|
-
/* Uses data-slot attributes for targeting */
|
|
3
|
-
|
|
4
|
-
/* ============================================
|
|
5
|
-
iOS Overrides
|
|
6
|
-
============================================ */
|
|
7
|
-
|
|
8
|
-
/* Card - Shadow effect */
|
|
9
|
-
.ios [data-slot='card'] {
|
|
10
|
-
box-shadow: 0 0 8px oklch(0 0 0 / 8%);
|
|
11
|
-
border: none;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
/* ============================================
|
|
15
|
-
Material 3 Overrides
|
|
16
|
-
============================================ */
|
|
17
|
-
|
|
18
|
-
/* Card - Elevation shadow */
|
|
19
|
-
.material [data-slot='card'] {
|
|
20
|
-
box-shadow: var(--elevation-1);
|
|
21
|
-
border: none;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/* ============================================
|
|
25
|
-
Performance Optimizations
|
|
26
|
-
============================================ */
|
|
27
|
-
|
|
28
|
-
/* Apply will-change only to animated glass elements */
|
|
29
|
-
.ios [data-slot='dialog-content'],
|
|
30
|
-
.ios [data-slot='sheet-content'] {
|
|
31
|
-
will-change: transform, opacity;
|
|
32
|
-
}
|