@casoon/atlas-styles 0.0.8 → 0.1.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.
- package/dist/components.css +1281 -55
- package/dist/index.css +6550 -4404
- package/dist/recipes.css +622 -0
- package/dist/tokens.css +292 -0
- package/package.json +8 -2
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Atlas UI Component Tokens
|
|
3
|
+
*
|
|
4
|
+
* Design tokens specifically for UI components.
|
|
5
|
+
* These tokens complement the core.css tokens and provide
|
|
6
|
+
* semantic naming for component styling.
|
|
7
|
+
*
|
|
8
|
+
* Usage: @import "@casoon/atlas-styles/tokens";
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
/* ========================================
|
|
13
|
+
Semantic Color Tokens
|
|
14
|
+
Using HSL format for flexibility
|
|
15
|
+
======================================== */
|
|
16
|
+
|
|
17
|
+
/* Background & Foreground */
|
|
18
|
+
--atlas-background: 220 14% 4%;
|
|
19
|
+
--atlas-foreground: 220 13% 95%;
|
|
20
|
+
|
|
21
|
+
/* Surface Colors (Cards, Popovers) */
|
|
22
|
+
--atlas-card: 220 14% 7%;
|
|
23
|
+
--atlas-card-foreground: 220 13% 95%;
|
|
24
|
+
|
|
25
|
+
--atlas-popover: 220 14% 7%;
|
|
26
|
+
--atlas-popover-foreground: 220 13% 95%;
|
|
27
|
+
|
|
28
|
+
/* Primary (Brand) */
|
|
29
|
+
--atlas-primary: 224 76% 65%;
|
|
30
|
+
--atlas-primary-foreground: 220 14% 4%;
|
|
31
|
+
|
|
32
|
+
/* Secondary */
|
|
33
|
+
--atlas-secondary: 220 14% 14%;
|
|
34
|
+
--atlas-secondary-foreground: 220 13% 95%;
|
|
35
|
+
|
|
36
|
+
/* Muted (Subtle backgrounds) */
|
|
37
|
+
--atlas-muted: 220 14% 14%;
|
|
38
|
+
--atlas-muted-foreground: 220 9% 70%;
|
|
39
|
+
|
|
40
|
+
/* Accent (Hover states) */
|
|
41
|
+
--atlas-accent: 220 14% 14%;
|
|
42
|
+
--atlas-accent-foreground: 220 13% 95%;
|
|
43
|
+
|
|
44
|
+
/* Destructive (Errors, danger) */
|
|
45
|
+
--atlas-destructive: 0 72% 51%;
|
|
46
|
+
--atlas-destructive-foreground: 0 0% 98%;
|
|
47
|
+
|
|
48
|
+
/* Success */
|
|
49
|
+
--atlas-success: 142 71% 45%;
|
|
50
|
+
--atlas-success-foreground: 0 0% 98%;
|
|
51
|
+
|
|
52
|
+
/* Warning */
|
|
53
|
+
--atlas-warning: 38 92% 50%;
|
|
54
|
+
--atlas-warning-foreground: 0 0% 4%;
|
|
55
|
+
|
|
56
|
+
/* Info */
|
|
57
|
+
--atlas-info: 199 89% 48%;
|
|
58
|
+
--atlas-info-foreground: 0 0% 98%;
|
|
59
|
+
|
|
60
|
+
/* Border, Input, Ring */
|
|
61
|
+
--atlas-border: 220 14% 18%;
|
|
62
|
+
--atlas-input: 220 14% 18%;
|
|
63
|
+
--atlas-ring: 224 76% 65%;
|
|
64
|
+
|
|
65
|
+
/* ========================================
|
|
66
|
+
Border Radius
|
|
67
|
+
======================================== */
|
|
68
|
+
--atlas-radius-none: 0;
|
|
69
|
+
--atlas-radius-sm: 0.25rem;
|
|
70
|
+
--atlas-radius: 0.5rem;
|
|
71
|
+
--atlas-radius-md: 0.5rem;
|
|
72
|
+
--atlas-radius-lg: 0.75rem;
|
|
73
|
+
--atlas-radius-xl: 1rem;
|
|
74
|
+
--atlas-radius-2xl: 1.5rem;
|
|
75
|
+
--atlas-radius-full: 9999px;
|
|
76
|
+
|
|
77
|
+
/* ========================================
|
|
78
|
+
Shadows
|
|
79
|
+
======================================== */
|
|
80
|
+
--atlas-shadow-xs: 0 1px 2px 0 hsl(var(--atlas-foreground) / 0.03);
|
|
81
|
+
--atlas-shadow-sm:
|
|
82
|
+
0 1px 3px 0 hsl(var(--atlas-foreground) / 0.05),
|
|
83
|
+
0 1px 2px -1px hsl(var(--atlas-foreground) / 0.05);
|
|
84
|
+
--atlas-shadow-md:
|
|
85
|
+
0 4px 6px -1px hsl(var(--atlas-foreground) / 0.08),
|
|
86
|
+
0 2px 4px -2px hsl(var(--atlas-foreground) / 0.05);
|
|
87
|
+
--atlas-shadow-lg:
|
|
88
|
+
0 10px 15px -3px hsl(var(--atlas-foreground) / 0.08),
|
|
89
|
+
0 4px 6px -4px hsl(var(--atlas-foreground) / 0.05);
|
|
90
|
+
--atlas-shadow-xl:
|
|
91
|
+
0 20px 25px -5px hsl(var(--atlas-foreground) / 0.1),
|
|
92
|
+
0 8px 10px -6px hsl(var(--atlas-foreground) / 0.05);
|
|
93
|
+
--atlas-shadow-2xl: 0 25px 50px -12px hsl(var(--atlas-foreground) / 0.25);
|
|
94
|
+
|
|
95
|
+
/* ========================================
|
|
96
|
+
Transitions
|
|
97
|
+
======================================== */
|
|
98
|
+
--atlas-duration-instant: 0ms;
|
|
99
|
+
--atlas-duration-fast: 150ms;
|
|
100
|
+
--atlas-duration-normal: 200ms;
|
|
101
|
+
--atlas-duration-slow: 300ms;
|
|
102
|
+
--atlas-duration-slower: 500ms;
|
|
103
|
+
|
|
104
|
+
--atlas-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
105
|
+
--atlas-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
106
|
+
--atlas-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
107
|
+
--atlas-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
108
|
+
--atlas-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
109
|
+
--atlas-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
110
|
+
|
|
111
|
+
/* ========================================
|
|
112
|
+
Typography
|
|
113
|
+
======================================== */
|
|
114
|
+
--atlas-font-sans:
|
|
115
|
+
ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
116
|
+
'Noto Color Emoji';
|
|
117
|
+
--atlas-font-mono:
|
|
118
|
+
ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
|
|
119
|
+
|
|
120
|
+
--atlas-text-xs: 0.75rem;
|
|
121
|
+
--atlas-text-sm: 0.875rem;
|
|
122
|
+
--atlas-text-base: 1rem;
|
|
123
|
+
--atlas-text-lg: 1.125rem;
|
|
124
|
+
--atlas-text-xl: 1.25rem;
|
|
125
|
+
--atlas-text-2xl: 1.5rem;
|
|
126
|
+
--atlas-text-3xl: 1.875rem;
|
|
127
|
+
--atlas-text-4xl: 2.25rem;
|
|
128
|
+
|
|
129
|
+
--atlas-leading-none: 1;
|
|
130
|
+
--atlas-leading-tight: 1.25;
|
|
131
|
+
--atlas-leading-snug: 1.375;
|
|
132
|
+
--atlas-leading-normal: 1.5;
|
|
133
|
+
--atlas-leading-relaxed: 1.625;
|
|
134
|
+
--atlas-leading-loose: 2;
|
|
135
|
+
|
|
136
|
+
--atlas-font-thin: 100;
|
|
137
|
+
--atlas-font-light: 300;
|
|
138
|
+
--atlas-font-normal: 400;
|
|
139
|
+
--atlas-font-medium: 500;
|
|
140
|
+
--atlas-font-semibold: 600;
|
|
141
|
+
--atlas-font-bold: 700;
|
|
142
|
+
--atlas-font-extrabold: 800;
|
|
143
|
+
|
|
144
|
+
/* ========================================
|
|
145
|
+
Spacing
|
|
146
|
+
======================================== */
|
|
147
|
+
--atlas-space-0: 0;
|
|
148
|
+
--atlas-space-px: 1px;
|
|
149
|
+
--atlas-space-0-5: 0.125rem;
|
|
150
|
+
--atlas-space-1: 0.25rem;
|
|
151
|
+
--atlas-space-1-5: 0.375rem;
|
|
152
|
+
--atlas-space-2: 0.5rem;
|
|
153
|
+
--atlas-space-2-5: 0.625rem;
|
|
154
|
+
--atlas-space-3: 0.75rem;
|
|
155
|
+
--atlas-space-3-5: 0.875rem;
|
|
156
|
+
--atlas-space-4: 1rem;
|
|
157
|
+
--atlas-space-5: 1.25rem;
|
|
158
|
+
--atlas-space-6: 1.5rem;
|
|
159
|
+
--atlas-space-7: 1.75rem;
|
|
160
|
+
--atlas-space-8: 2rem;
|
|
161
|
+
--atlas-space-9: 2.25rem;
|
|
162
|
+
--atlas-space-10: 2.5rem;
|
|
163
|
+
--atlas-space-12: 3rem;
|
|
164
|
+
--atlas-space-14: 3.5rem;
|
|
165
|
+
--atlas-space-16: 4rem;
|
|
166
|
+
--atlas-space-20: 5rem;
|
|
167
|
+
--atlas-space-24: 6rem;
|
|
168
|
+
|
|
169
|
+
/* ========================================
|
|
170
|
+
Z-Index
|
|
171
|
+
======================================== */
|
|
172
|
+
--atlas-z-hide: -1;
|
|
173
|
+
--atlas-z-base: 0;
|
|
174
|
+
--atlas-z-dropdown: 50;
|
|
175
|
+
--atlas-z-sticky: 100;
|
|
176
|
+
--atlas-z-drawer: 150;
|
|
177
|
+
--atlas-z-modal: 200;
|
|
178
|
+
--atlas-z-popover: 250;
|
|
179
|
+
--atlas-z-tooltip: 300;
|
|
180
|
+
--atlas-z-toast: 400;
|
|
181
|
+
--atlas-z-max: 9999;
|
|
182
|
+
|
|
183
|
+
/* ========================================
|
|
184
|
+
Focus Ring
|
|
185
|
+
======================================== */
|
|
186
|
+
--atlas-ring-width: 2px;
|
|
187
|
+
--atlas-ring-offset: 2px;
|
|
188
|
+
--atlas-ring-offset-color: hsl(var(--atlas-background));
|
|
189
|
+
|
|
190
|
+
/* ========================================
|
|
191
|
+
Glass Effect
|
|
192
|
+
======================================== */
|
|
193
|
+
--atlas-glass-blur: 12px;
|
|
194
|
+
--atlas-glass-bg: hsl(var(--atlas-background) / 0.7);
|
|
195
|
+
--atlas-glass-border: hsl(var(--atlas-border) / 0.3);
|
|
196
|
+
--atlas-glass-shadow: 0 4px 6px -1px hsl(var(--atlas-foreground) / 0.1);
|
|
197
|
+
|
|
198
|
+
/* ========================================
|
|
199
|
+
Component-Specific Tokens
|
|
200
|
+
======================================== */
|
|
201
|
+
|
|
202
|
+
/* Button */
|
|
203
|
+
--atlas-button-height-sm: 2rem;
|
|
204
|
+
--atlas-button-height-md: 2.5rem;
|
|
205
|
+
--atlas-button-height-lg: 2.75rem;
|
|
206
|
+
|
|
207
|
+
/* Input */
|
|
208
|
+
--atlas-input-height-sm: 2rem;
|
|
209
|
+
--atlas-input-height-md: 2.5rem;
|
|
210
|
+
--atlas-input-height-lg: 3rem;
|
|
211
|
+
|
|
212
|
+
/* Avatar */
|
|
213
|
+
--atlas-avatar-size-sm: 2rem;
|
|
214
|
+
--atlas-avatar-size-md: 2.5rem;
|
|
215
|
+
--atlas-avatar-size-lg: 3rem;
|
|
216
|
+
--atlas-avatar-size-xl: 4rem;
|
|
217
|
+
|
|
218
|
+
/* Dialog/Modal */
|
|
219
|
+
--atlas-dialog-width-sm: 400px;
|
|
220
|
+
--atlas-dialog-width-md: 500px;
|
|
221
|
+
--atlas-dialog-width-lg: 700px;
|
|
222
|
+
--atlas-dialog-width-xl: 900px;
|
|
223
|
+
|
|
224
|
+
/* Sheet/Drawer */
|
|
225
|
+
--atlas-sheet-width-sm: 320px;
|
|
226
|
+
--atlas-sheet-width-md: 400px;
|
|
227
|
+
--atlas-sheet-width-lg: 540px;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* ========================================
|
|
231
|
+
Light Mode
|
|
232
|
+
======================================== */
|
|
233
|
+
:root[data-theme='light'],
|
|
234
|
+
.light {
|
|
235
|
+
--atlas-background: 0 0% 100%;
|
|
236
|
+
--atlas-foreground: 220 14% 10%;
|
|
237
|
+
|
|
238
|
+
--atlas-card: 0 0% 100%;
|
|
239
|
+
--atlas-card-foreground: 220 14% 10%;
|
|
240
|
+
|
|
241
|
+
--atlas-popover: 0 0% 100%;
|
|
242
|
+
--atlas-popover-foreground: 220 14% 10%;
|
|
243
|
+
|
|
244
|
+
--atlas-primary: 224 76% 48%;
|
|
245
|
+
--atlas-primary-foreground: 0 0% 100%;
|
|
246
|
+
|
|
247
|
+
--atlas-secondary: 220 14% 96%;
|
|
248
|
+
--atlas-secondary-foreground: 220 14% 10%;
|
|
249
|
+
|
|
250
|
+
--atlas-muted: 220 14% 96%;
|
|
251
|
+
--atlas-muted-foreground: 220 9% 46%;
|
|
252
|
+
|
|
253
|
+
--atlas-accent: 220 14% 96%;
|
|
254
|
+
--atlas-accent-foreground: 220 14% 10%;
|
|
255
|
+
|
|
256
|
+
--atlas-destructive: 0 72% 51%;
|
|
257
|
+
--atlas-destructive-foreground: 0 0% 98%;
|
|
258
|
+
|
|
259
|
+
--atlas-border: 220 14% 90%;
|
|
260
|
+
--atlas-input: 220 14% 90%;
|
|
261
|
+
--atlas-ring: 224 76% 48%;
|
|
262
|
+
|
|
263
|
+
--atlas-glass-bg: hsl(var(--atlas-background) / 0.8);
|
|
264
|
+
--atlas-glass-border: hsl(var(--atlas-border) / 0.4);
|
|
265
|
+
|
|
266
|
+
--atlas-shadow-sm: 0 1px 3px 0 hsl(220 14% 10% / 0.1), 0 1px 2px -1px hsl(220 14% 10% / 0.1);
|
|
267
|
+
--atlas-shadow-md: 0 4px 6px -1px hsl(220 14% 10% / 0.1), 0 2px 4px -2px hsl(220 14% 10% / 0.1);
|
|
268
|
+
--atlas-shadow-lg: 0 10px 15px -3px hsl(220 14% 10% / 0.1), 0 4px 6px -4px hsl(220 14% 10% / 0.1);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/* ========================================
|
|
272
|
+
High Contrast Mode
|
|
273
|
+
======================================== */
|
|
274
|
+
@media (prefers-contrast: more) {
|
|
275
|
+
:root {
|
|
276
|
+
--atlas-border: 220 14% 40%;
|
|
277
|
+
--atlas-ring-width: 3px;
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/* ========================================
|
|
282
|
+
Reduced Motion
|
|
283
|
+
======================================== */
|
|
284
|
+
@media (prefers-reduced-motion: reduce) {
|
|
285
|
+
:root {
|
|
286
|
+
--atlas-duration-instant: 0ms;
|
|
287
|
+
--atlas-duration-fast: 0ms;
|
|
288
|
+
--atlas-duration-normal: 0ms;
|
|
289
|
+
--atlas-duration-slow: 0ms;
|
|
290
|
+
--atlas-duration-slower: 0ms;
|
|
291
|
+
}
|
|
292
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@casoon/atlas-styles",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "Pure CSS design system with glass effects, gradients, and utilities for Tailwind v4",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -17,11 +17,17 @@
|
|
|
17
17
|
"./dist/orbs.css": "./dist/orbs.css",
|
|
18
18
|
"./dist/animations.css": "./dist/animations.css",
|
|
19
19
|
"./dist/utilities.css": "./dist/utilities.css",
|
|
20
|
+
"./dist/components.css": "./dist/components.css",
|
|
21
|
+
"./dist/tokens.css": "./dist/tokens.css",
|
|
22
|
+
"./dist/recipes.css": "./dist/recipes.css",
|
|
20
23
|
"./core.css": "./dist/core.css",
|
|
21
24
|
"./glass.css": "./dist/glass.css",
|
|
22
25
|
"./orbs.css": "./dist/orbs.css",
|
|
23
26
|
"./animations.css": "./dist/animations.css",
|
|
24
|
-
"./utilities.css": "./dist/utilities.css"
|
|
27
|
+
"./utilities.css": "./dist/utilities.css",
|
|
28
|
+
"./components.css": "./dist/components.css",
|
|
29
|
+
"./tokens.css": "./dist/tokens.css",
|
|
30
|
+
"./recipes.css": "./dist/recipes.css"
|
|
25
31
|
},
|
|
26
32
|
"scripts": {
|
|
27
33
|
"build": "rimraf dist && node build.js",
|