@placesapp/appy-ui 0.0.3 → 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 -3
- package/src/styles/globals.css +314 -0
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",
|
|
@@ -8,10 +8,12 @@
|
|
|
8
8
|
".": {
|
|
9
9
|
"types": "./dist/index.d.ts",
|
|
10
10
|
"import": "./dist/index.js"
|
|
11
|
-
}
|
|
11
|
+
},
|
|
12
|
+
"./globals.css": "./src/styles/globals.css"
|
|
12
13
|
},
|
|
13
14
|
"files": [
|
|
14
|
-
"dist"
|
|
15
|
+
"dist",
|
|
16
|
+
"src/styles/globals.css"
|
|
15
17
|
],
|
|
16
18
|
"sideEffects": false,
|
|
17
19
|
"peerDependencies": {
|
|
@@ -0,0 +1,314 @@
|
|
|
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
|
+
|
|
59
|
+
:root {
|
|
60
|
+
/* Colors - OKLch */
|
|
61
|
+
--background: oklch(0.99 0.002 75);
|
|
62
|
+
--foreground: oklch(0.15 0.01 75);
|
|
63
|
+
--card: oklch(1 0 0);
|
|
64
|
+
--card-foreground: oklch(0.145 0 0);
|
|
65
|
+
--popover: oklch(1 0 0);
|
|
66
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
67
|
+
--primary: oklch(0.65 0.18 45);
|
|
68
|
+
--primary-foreground: oklch(0.99 0.002 75);
|
|
69
|
+
--secondary: oklch(0.97 0 0);
|
|
70
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
71
|
+
--muted: oklch(0.97 0 0);
|
|
72
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
73
|
+
--accent: oklch(0.65 0.18 45);
|
|
74
|
+
--accent-foreground: oklch(0.99 0.002 75);
|
|
75
|
+
--destructive: oklch(0.58 0.22 27);
|
|
76
|
+
--border: oklch(0.922 0 0);
|
|
77
|
+
--input: oklch(0.922 0 0);
|
|
78
|
+
--ring: oklch(0.65 0.18 45);
|
|
79
|
+
--chart-1: oklch(0.809 0.105 251.813);
|
|
80
|
+
--chart-2: oklch(0.623 0.214 259.815);
|
|
81
|
+
--chart-3: oklch(0.546 0.245 262.881);
|
|
82
|
+
--chart-4: oklch(0.488 0.243 264.376);
|
|
83
|
+
--chart-5: oklch(0.424 0.199 265.638);
|
|
84
|
+
--radius: 0.875rem;
|
|
85
|
+
--sidebar: oklch(0.985 0 0);
|
|
86
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
87
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
88
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
89
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
90
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
91
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
92
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.dark {
|
|
96
|
+
--background: oklch(0.14 0.01 260);
|
|
97
|
+
--foreground: oklch(0.92 0.01 75);
|
|
98
|
+
--card: oklch(0.18 0.01 260);
|
|
99
|
+
--card-foreground: oklch(0.92 0.01 75);
|
|
100
|
+
--popover: oklch(0.18 0.01 260);
|
|
101
|
+
--popover-foreground: oklch(0.92 0.01 75);
|
|
102
|
+
--primary: oklch(0.72 0.18 45);
|
|
103
|
+
--primary-foreground: oklch(0.14 0.01 260);
|
|
104
|
+
--secondary: oklch(0.22 0.01 260);
|
|
105
|
+
--secondary-foreground: oklch(0.92 0.01 75);
|
|
106
|
+
--muted: oklch(0.22 0.01 260);
|
|
107
|
+
--muted-foreground: oklch(0.65 0.01 75);
|
|
108
|
+
--accent: oklch(0.72 0.18 45);
|
|
109
|
+
--accent-foreground: oklch(0.14 0.01 260);
|
|
110
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
111
|
+
--border: oklch(1 0 0 / 10%);
|
|
112
|
+
--input: oklch(1 0 0 / 15%);
|
|
113
|
+
--ring: oklch(0.72 0.18 45);
|
|
114
|
+
--chart-1: oklch(0.809 0.105 251.813);
|
|
115
|
+
--chart-2: oklch(0.623 0.214 259.815);
|
|
116
|
+
--chart-3: oklch(0.546 0.245 262.881);
|
|
117
|
+
--chart-4: oklch(0.488 0.243 264.376);
|
|
118
|
+
--chart-5: oklch(0.424 0.199 265.638);
|
|
119
|
+
--sidebar: oklch(0.18 0.01 260);
|
|
120
|
+
--sidebar-foreground: oklch(0.92 0.01 75);
|
|
121
|
+
--sidebar-primary: oklch(0.72 0.18 45);
|
|
122
|
+
--sidebar-primary-foreground: oklch(0.14 0.01 260);
|
|
123
|
+
--sidebar-accent: oklch(0.22 0.01 260);
|
|
124
|
+
--sidebar-accent-foreground: oklch(0.92 0.01 75);
|
|
125
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
126
|
+
--sidebar-ring: oklch(0.72 0.18 45);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* ============================================
|
|
130
|
+
iOS 26 Liquid Glass Design System
|
|
131
|
+
============================================ */
|
|
132
|
+
|
|
133
|
+
.ios {
|
|
134
|
+
/* Glass Effects */
|
|
135
|
+
--glass-blur: 20px;
|
|
136
|
+
--glass-bg: oklch(1 0 0 / 60%);
|
|
137
|
+
--glass-bg-elevated: oklch(1 0 0 / 70%);
|
|
138
|
+
--glass-border: oklch(1 0 0 / 30%);
|
|
139
|
+
|
|
140
|
+
/* iOS System Colors */
|
|
141
|
+
--ios-blue: oklch(0.65 0.22 255);
|
|
142
|
+
--ios-green: oklch(0.7 0.2 145);
|
|
143
|
+
--ios-red: oklch(0.6 0.25 25);
|
|
144
|
+
--ios-orange: oklch(0.7 0.2 55);
|
|
145
|
+
--ios-yellow: oklch(0.85 0.18 90);
|
|
146
|
+
--ios-teal: oklch(0.7 0.15 195);
|
|
147
|
+
--ios-purple: oklch(0.6 0.2 300);
|
|
148
|
+
|
|
149
|
+
/* Typography - SF Pro */
|
|
150
|
+
--font-sans:
|
|
151
|
+
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
|
|
152
|
+
'Helvetica Neue', sans-serif;
|
|
153
|
+
|
|
154
|
+
/* iOS Corner Radii - pill-shaped / larger */
|
|
155
|
+
--radius: 1.25rem;
|
|
156
|
+
|
|
157
|
+
/* Elevation - iOS uses no shadows, only translucency */
|
|
158
|
+
--elevation-1: none;
|
|
159
|
+
--elevation-2: none;
|
|
160
|
+
--elevation-3: none;
|
|
161
|
+
|
|
162
|
+
/* Interaction */
|
|
163
|
+
--press-scale: 0.97;
|
|
164
|
+
--press-duration: 100ms;
|
|
165
|
+
|
|
166
|
+
/* Separators */
|
|
167
|
+
--separator: oklch(0 0 0 / 8%);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.ios.dark {
|
|
171
|
+
--glass-bg: oklch(0.2 0.02 260 / 60%);
|
|
172
|
+
--glass-bg-elevated: oklch(0.25 0.02 260 / 70%);
|
|
173
|
+
--glass-border: oklch(1 0 0 / 15%);
|
|
174
|
+
--separator: oklch(1 0 0 / 8%);
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
/* iOS Glass Support Check */
|
|
178
|
+
@supports (backdrop-filter: blur(1px)) {
|
|
179
|
+
.ios {
|
|
180
|
+
--glass-supported: 1;
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
@supports not (backdrop-filter: blur(1px)) {
|
|
185
|
+
.ios {
|
|
186
|
+
--glass-blur: 0;
|
|
187
|
+
--glass-bg: oklch(1 0 0 / 92%);
|
|
188
|
+
--glass-bg-elevated: oklch(1 0 0 / 95%);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.ios.dark {
|
|
192
|
+
--glass-bg: oklch(0.18 0.02 260 / 95%);
|
|
193
|
+
--glass-bg-elevated: oklch(0.22 0.02 260 / 95%);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* ============================================
|
|
198
|
+
Material 3 Design System
|
|
199
|
+
============================================ */
|
|
200
|
+
|
|
201
|
+
.material {
|
|
202
|
+
/* Glass Effects - Material uses solid surfaces */
|
|
203
|
+
--glass-blur: 0;
|
|
204
|
+
--glass-bg: var(--card);
|
|
205
|
+
--glass-bg-elevated: var(--card);
|
|
206
|
+
--glass-border: transparent;
|
|
207
|
+
|
|
208
|
+
/* M3 Surface Tones */
|
|
209
|
+
--m3-surface: oklch(0.99 0.002 75);
|
|
210
|
+
--m3-surface-container: oklch(0.96 0.003 75);
|
|
211
|
+
--m3-surface-container-high: oklch(0.94 0.004 75);
|
|
212
|
+
--m3-surface-container-highest: oklch(0.92 0.005 75);
|
|
213
|
+
--m3-on-surface: oklch(0.15 0.01 75);
|
|
214
|
+
|
|
215
|
+
/* M3 State Layers */
|
|
216
|
+
--m3-state-hover: oklch(0 0 0 / 8%);
|
|
217
|
+
--m3-state-focus: oklch(0 0 0 / 12%);
|
|
218
|
+
--m3-state-pressed: oklch(0 0 0 / 12%);
|
|
219
|
+
--m3-state-dragged: oklch(0 0 0 / 16%);
|
|
220
|
+
|
|
221
|
+
/* Typography - Roboto */
|
|
222
|
+
--font-sans: 'Roboto', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
223
|
+
|
|
224
|
+
/* M3 Corner Radius Scale */
|
|
225
|
+
--radius: 0.75rem;
|
|
226
|
+
--radius-xs: 0.25rem;
|
|
227
|
+
--radius-sm: 0.5rem;
|
|
228
|
+
--radius-md: 0.75rem;
|
|
229
|
+
--radius-lg: 1rem;
|
|
230
|
+
--radius-xl: 1.75rem;
|
|
231
|
+
--radius-full: 9999px;
|
|
232
|
+
|
|
233
|
+
/* M3 Elevation Shadows */
|
|
234
|
+
--elevation-1: 0 1px 2px oklch(0 0 0 / 30%), 0 1px 3px 1px oklch(0 0 0 / 15%);
|
|
235
|
+
--elevation-2: 0 1px 2px oklch(0 0 0 / 30%), 0 2px 6px 2px oklch(0 0 0 / 15%);
|
|
236
|
+
--elevation-3: 0 1px 3px oklch(0 0 0 / 30%), 0 4px 8px 3px oklch(0 0 0 / 15%);
|
|
237
|
+
|
|
238
|
+
/* Interaction */
|
|
239
|
+
--press-scale: 1;
|
|
240
|
+
--press-duration: 0ms;
|
|
241
|
+
--ripple-duration: 300ms;
|
|
242
|
+
|
|
243
|
+
/* Separators */
|
|
244
|
+
--separator: oklch(0 0 0 / 12%);
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.material.dark {
|
|
248
|
+
--m3-surface: oklch(0.14 0.01 260);
|
|
249
|
+
--m3-surface-container: oklch(0.18 0.01 260);
|
|
250
|
+
--m3-surface-container-high: oklch(0.22 0.01 260);
|
|
251
|
+
--m3-surface-container-highest: oklch(0.26 0.01 260);
|
|
252
|
+
--m3-on-surface: oklch(0.92 0.01 75);
|
|
253
|
+
|
|
254
|
+
--m3-state-hover: oklch(1 0 0 / 8%);
|
|
255
|
+
--m3-state-focus: oklch(1 0 0 / 12%);
|
|
256
|
+
--m3-state-pressed: oklch(1 0 0 / 12%);
|
|
257
|
+
--m3-state-dragged: oklch(1 0 0 / 16%);
|
|
258
|
+
|
|
259
|
+
--elevation-1: 0 1px 3px 1px oklch(0 0 0 / 26%), 0 1px 2px oklch(0 0 0 / 30%);
|
|
260
|
+
--elevation-2: 0 2px 6px 2px oklch(0 0 0 / 26%), 0 1px 2px oklch(0 0 0 / 30%);
|
|
261
|
+
--elevation-3: 0 4px 8px 3px oklch(0 0 0 / 26%), 0 1px 3px oklch(0 0 0 / 30%);
|
|
262
|
+
|
|
263
|
+
--separator: oklch(1 0 0 / 12%);
|
|
264
|
+
}
|
|
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
|
+
|
|
290
|
+
/* ============================================
|
|
291
|
+
Platform-Specific Component Overrides
|
|
292
|
+
============================================ */
|
|
293
|
+
|
|
294
|
+
/* iOS Card - Shadow effect */
|
|
295
|
+
.ios [data-slot='card'] {
|
|
296
|
+
box-shadow: 0 0 8px oklch(0 0 0 / 8%);
|
|
297
|
+
border: none;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
/* Material Card - Elevation shadow */
|
|
301
|
+
.material [data-slot='card'] {
|
|
302
|
+
box-shadow: var(--elevation-1);
|
|
303
|
+
border: none;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/* ============================================
|
|
307
|
+
Performance Optimizations
|
|
308
|
+
============================================ */
|
|
309
|
+
|
|
310
|
+
/* Apply will-change only to animated glass elements */
|
|
311
|
+
.ios [data-slot='dialog-content'],
|
|
312
|
+
.ios [data-slot='sheet-content'] {
|
|
313
|
+
will-change: transform, opacity;
|
|
314
|
+
}
|