@placesapp/appy-ui 0.0.1 → 0.0.2
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/dist/styles/index.css +282 -6
- package/package.json +5 -2
package/dist/styles/index.css
CHANGED
|
@@ -1,13 +1,289 @@
|
|
|
1
1
|
/* appy-ui Styles */
|
|
2
2
|
/* This file combines all style modules for the component library */
|
|
3
|
+
/* Import all style modules - must be first for PostCSS bundling */
|
|
4
|
+
/* appy-ui Base Theme Variables */
|
|
5
|
+
/* These are CSS custom properties that define the theme colors and other design tokens */
|
|
6
|
+
:root {
|
|
7
|
+
/* Colors - OKLch */
|
|
8
|
+
--background: oklch(0.99 0.002 75);
|
|
9
|
+
--foreground: oklch(0.15 0.01 75);
|
|
10
|
+
--card: oklch(1 0 0);
|
|
11
|
+
--card-foreground: oklch(0.145 0 0);
|
|
12
|
+
--popover: oklch(1 0 0);
|
|
13
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
14
|
+
--primary: oklch(0.65 0.18 45);
|
|
15
|
+
--primary-foreground: oklch(0.99 0.002 75);
|
|
16
|
+
--secondary: oklch(0.97 0 0);
|
|
17
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
18
|
+
--muted: oklch(0.97 0 0);
|
|
19
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
20
|
+
--accent: oklch(0.65 0.18 45);
|
|
21
|
+
--accent-foreground: oklch(0.99 0.002 75);
|
|
22
|
+
--destructive: oklch(0.58 0.22 27);
|
|
23
|
+
--border: oklch(0.922 0 0);
|
|
24
|
+
--input: oklch(0.922 0 0);
|
|
25
|
+
--ring: oklch(0.65 0.18 45);
|
|
26
|
+
--chart-1: oklch(0.809 0.105 251.813);
|
|
27
|
+
--chart-2: oklch(0.623 0.214 259.815);
|
|
28
|
+
--chart-3: oklch(0.546 0.245 262.881);
|
|
29
|
+
--chart-4: oklch(0.488 0.243 264.376);
|
|
30
|
+
--chart-5: oklch(0.424 0.199 265.638);
|
|
31
|
+
--radius: 0.875rem;
|
|
32
|
+
--sidebar: oklch(0.985 0 0);
|
|
33
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
34
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
35
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
36
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
37
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
38
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
39
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
40
|
+
}
|
|
41
|
+
.dark {
|
|
42
|
+
--background: oklch(0.14 0.01 260);
|
|
43
|
+
--foreground: oklch(0.92 0.01 75);
|
|
44
|
+
--card: oklch(0.18 0.01 260);
|
|
45
|
+
--card-foreground: oklch(0.92 0.01 75);
|
|
46
|
+
--popover: oklch(0.18 0.01 260);
|
|
47
|
+
--popover-foreground: oklch(0.92 0.01 75);
|
|
48
|
+
--primary: oklch(0.72 0.18 45);
|
|
49
|
+
--primary-foreground: oklch(0.14 0.01 260);
|
|
50
|
+
--secondary: oklch(0.22 0.01 260);
|
|
51
|
+
--secondary-foreground: oklch(0.92 0.01 75);
|
|
52
|
+
--muted: oklch(0.22 0.01 260);
|
|
53
|
+
--muted-foreground: oklch(0.65 0.01 75);
|
|
54
|
+
--accent: oklch(0.72 0.18 45);
|
|
55
|
+
--accent-foreground: oklch(0.14 0.01 260);
|
|
56
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
57
|
+
--border: oklch(1 0 0 / 10%);
|
|
58
|
+
--input: oklch(1 0 0 / 15%);
|
|
59
|
+
--ring: oklch(0.72 0.18 45);
|
|
60
|
+
--chart-1: oklch(0.809 0.105 251.813);
|
|
61
|
+
--chart-2: oklch(0.623 0.214 259.815);
|
|
62
|
+
--chart-3: oklch(0.546 0.245 262.881);
|
|
63
|
+
--chart-4: oklch(0.488 0.243 264.376);
|
|
64
|
+
--chart-5: oklch(0.424 0.199 265.638);
|
|
65
|
+
--sidebar: oklch(0.18 0.01 260);
|
|
66
|
+
--sidebar-foreground: oklch(0.92 0.01 75);
|
|
67
|
+
--sidebar-primary: oklch(0.72 0.18 45);
|
|
68
|
+
--sidebar-primary-foreground: oklch(0.14 0.01 260);
|
|
69
|
+
--sidebar-accent: oklch(0.22 0.01 260);
|
|
70
|
+
--sidebar-accent-foreground: oklch(0.92 0.01 75);
|
|
71
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
72
|
+
--sidebar-ring: oklch(0.72 0.18 45);
|
|
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
|
+
@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
|
+
}
|
|
3
129
|
|
|
130
|
+
button:not(:disabled),
|
|
131
|
+
[role='button']:not(:disabled) {
|
|
132
|
+
cursor: pointer;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
/* iOS 26 Liquid Glass Design System */
|
|
136
|
+
.ios {
|
|
137
|
+
/* Glass Effects */
|
|
138
|
+
--glass-blur: 20px;
|
|
139
|
+
--glass-bg: oklch(1 0 0 / 60%);
|
|
140
|
+
--glass-bg-elevated: oklch(1 0 0 / 70%);
|
|
141
|
+
--glass-border: oklch(1 0 0 / 30%);
|
|
142
|
+
|
|
143
|
+
/* iOS System Colors */
|
|
144
|
+
--ios-blue: oklch(0.65 0.22 255);
|
|
145
|
+
--ios-green: oklch(0.7 0.2 145);
|
|
146
|
+
--ios-red: oklch(0.6 0.25 25);
|
|
147
|
+
--ios-orange: oklch(0.7 0.2 55);
|
|
148
|
+
--ios-yellow: oklch(0.85 0.18 90);
|
|
149
|
+
--ios-teal: oklch(0.7 0.15 195);
|
|
150
|
+
--ios-purple: oklch(0.6 0.2 300);
|
|
151
|
+
|
|
152
|
+
/* Typography - SF Pro */
|
|
153
|
+
--font-sans:
|
|
154
|
+
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
|
|
155
|
+
'Helvetica Neue', sans-serif;
|
|
156
|
+
|
|
157
|
+
/* iOS Corner Radii - pill-shaped / larger */
|
|
158
|
+
--radius: 1.25rem;
|
|
159
|
+
|
|
160
|
+
/* Elevation - iOS uses no shadows, only translucency */
|
|
161
|
+
--elevation-1: none;
|
|
162
|
+
--elevation-2: none;
|
|
163
|
+
--elevation-3: none;
|
|
164
|
+
|
|
165
|
+
/* Interaction */
|
|
166
|
+
--press-scale: 0.97;
|
|
167
|
+
--press-duration: 100ms;
|
|
168
|
+
|
|
169
|
+
/* Separators */
|
|
170
|
+
--separator: oklch(0 0 0 / 8%);
|
|
171
|
+
}
|
|
172
|
+
.ios.dark {
|
|
173
|
+
--glass-bg: oklch(0.2 0.02 260 / 60%);
|
|
174
|
+
--glass-bg-elevated: oklch(0.25 0.02 260 / 70%);
|
|
175
|
+
--glass-border: oklch(1 0 0 / 15%);
|
|
176
|
+
--separator: oklch(1 0 0 / 8%);
|
|
177
|
+
}
|
|
178
|
+
/* iOS Glass Support Check */
|
|
179
|
+
@supports (backdrop-filter: blur(1px)) {
|
|
180
|
+
.ios {
|
|
181
|
+
--glass-supported: 1;
|
|
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
|
+
/* Material 3 Design System */
|
|
197
|
+
.material {
|
|
198
|
+
/* Glass Effects - Material uses solid surfaces */
|
|
199
|
+
--glass-blur: 0;
|
|
200
|
+
--glass-bg: var(--card);
|
|
201
|
+
--glass-bg-elevated: var(--card);
|
|
202
|
+
--glass-border: transparent;
|
|
203
|
+
|
|
204
|
+
/* M3 Surface Tones */
|
|
205
|
+
--m3-surface: oklch(0.99 0.002 75);
|
|
206
|
+
--m3-surface-container: oklch(0.96 0.003 75);
|
|
207
|
+
--m3-surface-container-high: oklch(0.94 0.004 75);
|
|
208
|
+
--m3-surface-container-highest: oklch(0.92 0.005 75);
|
|
209
|
+
--m3-on-surface: oklch(0.15 0.01 75);
|
|
210
|
+
|
|
211
|
+
/* M3 State Layers */
|
|
212
|
+
--m3-state-hover: oklch(0 0 0 / 8%);
|
|
213
|
+
--m3-state-focus: oklch(0 0 0 / 12%);
|
|
214
|
+
--m3-state-pressed: oklch(0 0 0 / 12%);
|
|
215
|
+
--m3-state-dragged: oklch(0 0 0 / 16%);
|
|
216
|
+
|
|
217
|
+
/* Typography - Roboto */
|
|
218
|
+
--font-sans: 'Roboto', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
219
|
+
|
|
220
|
+
/* M3 Corner Radius Scale */
|
|
221
|
+
--radius: 0.75rem;
|
|
222
|
+
--radius-xs: 0.25rem;
|
|
223
|
+
--radius-sm: 0.5rem;
|
|
224
|
+
--radius-md: 0.75rem;
|
|
225
|
+
--radius-lg: 1rem;
|
|
226
|
+
--radius-xl: 1.75rem;
|
|
227
|
+
--radius-full: 9999px;
|
|
228
|
+
|
|
229
|
+
/* M3 Elevation Shadows */
|
|
230
|
+
--elevation-1: 0 1px 2px oklch(0 0 0 / 30%), 0 1px 3px 1px oklch(0 0 0 / 15%);
|
|
231
|
+
--elevation-2: 0 1px 2px oklch(0 0 0 / 30%), 0 2px 6px 2px oklch(0 0 0 / 15%);
|
|
232
|
+
--elevation-3: 0 1px 3px oklch(0 0 0 / 30%), 0 4px 8px 3px oklch(0 0 0 / 15%);
|
|
233
|
+
|
|
234
|
+
/* Interaction */
|
|
235
|
+
--press-scale: 1;
|
|
236
|
+
--press-duration: 0ms;
|
|
237
|
+
--ripple-duration: 300ms;
|
|
238
|
+
|
|
239
|
+
/* Separators */
|
|
240
|
+
--separator: oklch(0 0 0 / 12%);
|
|
241
|
+
}
|
|
242
|
+
.material.dark {
|
|
243
|
+
--m3-surface: oklch(0.14 0.01 260);
|
|
244
|
+
--m3-surface-container: oklch(0.18 0.01 260);
|
|
245
|
+
--m3-surface-container-high: oklch(0.22 0.01 260);
|
|
246
|
+
--m3-surface-container-highest: oklch(0.26 0.01 260);
|
|
247
|
+
--m3-on-surface: oklch(0.92 0.01 75);
|
|
248
|
+
|
|
249
|
+
--m3-state-hover: oklch(1 0 0 / 8%);
|
|
250
|
+
--m3-state-focus: oklch(1 0 0 / 12%);
|
|
251
|
+
--m3-state-pressed: oklch(1 0 0 / 12%);
|
|
252
|
+
--m3-state-dragged: oklch(1 0 0 / 16%);
|
|
253
|
+
|
|
254
|
+
--elevation-1: 0 1px 3px 1px oklch(0 0 0 / 26%), 0 1px 2px oklch(0 0 0 / 30%);
|
|
255
|
+
--elevation-2: 0 2px 6px 2px oklch(0 0 0 / 26%), 0 1px 2px oklch(0 0 0 / 30%);
|
|
256
|
+
--elevation-3: 0 4px 8px 3px oklch(0 0 0 / 26%), 0 1px 3px oklch(0 0 0 / 30%);
|
|
257
|
+
|
|
258
|
+
--separator: oklch(1 0 0 / 12%);
|
|
259
|
+
}
|
|
260
|
+
/* Platform-Specific Component Overrides */
|
|
261
|
+
/* Uses data-slot attributes for targeting */
|
|
262
|
+
/* ============================================
|
|
263
|
+
iOS Overrides
|
|
264
|
+
============================================ */
|
|
265
|
+
/* Card - Shadow effect */
|
|
266
|
+
.ios [data-slot='card'] {
|
|
267
|
+
box-shadow: 0 0 8px oklch(0 0 0 / 8%);
|
|
268
|
+
border: none;
|
|
269
|
+
}
|
|
270
|
+
/* ============================================
|
|
271
|
+
Material 3 Overrides
|
|
272
|
+
============================================ */
|
|
273
|
+
/* Card - Elevation shadow */
|
|
274
|
+
.material [data-slot='card'] {
|
|
275
|
+
box-shadow: var(--elevation-1);
|
|
276
|
+
border: none;
|
|
277
|
+
}
|
|
278
|
+
/* ============================================
|
|
279
|
+
Performance Optimizations
|
|
280
|
+
============================================ */
|
|
281
|
+
/* Apply will-change only to animated glass elements */
|
|
282
|
+
.ios [data-slot='dialog-content'],
|
|
283
|
+
.ios [data-slot='sheet-content'] {
|
|
284
|
+
will-change: transform, opacity;
|
|
285
|
+
}
|
|
4
286
|
/* Custom variants for Tailwind v4 */
|
|
5
287
|
@custom-variant dark (&:is(.dark *));
|
|
6
288
|
@custom-variant ios (&:is(.ios *));
|
|
7
289
|
@custom-variant material (&:is(.material *));
|
|
8
|
-
|
|
9
|
-
/* Import all style modules */
|
|
10
|
-
@import './base.css';
|
|
11
|
-
@import './ios.css';
|
|
12
|
-
@import './material.css';
|
|
13
|
-
@import './overrides.css';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@placesapp/appy-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"module": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -61,6 +61,9 @@
|
|
|
61
61
|
"@types/react-dom": "19.2.3",
|
|
62
62
|
"cmdk": "^1.1.1",
|
|
63
63
|
"embla-carousel-react": "^8.6.0",
|
|
64
|
+
"postcss": "^8.5.6",
|
|
65
|
+
"postcss-cli": "^11.0.1",
|
|
66
|
+
"postcss-import": "^16.1.1",
|
|
64
67
|
"react-day-picker": "^9.13.0",
|
|
65
68
|
"recharts": "^3.7.0",
|
|
66
69
|
"tanstack-theme-kit": "^0.2.1",
|
|
@@ -69,7 +72,7 @@
|
|
|
69
72
|
},
|
|
70
73
|
"scripts": {
|
|
71
74
|
"build": "tsup && npm run build:css",
|
|
72
|
-
"build:css": "
|
|
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/",
|
|
73
76
|
"dev": "tsup --watch",
|
|
74
77
|
"prepublishOnly": "npm run build"
|
|
75
78
|
},
|