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