@casoon/atlas-styles 0.0.6 → 0.0.8
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 +868 -0
- package/dist/glass.css +104 -0
- package/dist/index.css +1018 -0
- package/dist/orbs.css +43 -0
- package/package.json +6 -6
- package/LICENSE +0 -21
package/dist/glass.css
CHANGED
|
@@ -138,6 +138,110 @@
|
|
|
138
138
|
--cs-glass-backdrop-filter-extra: none;
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
+
/* =========================================================
|
|
142
|
+
CSS CUSTOM PROPERTIES FOR INLINE STYLES
|
|
143
|
+
Duplicates @theme tokens as :root variables for use with var()
|
|
144
|
+
========================================================= */
|
|
145
|
+
:root {
|
|
146
|
+
/* === GLASS COLOR SYSTEM === */
|
|
147
|
+
--cs-glass-white: #ffffff;
|
|
148
|
+
--cs-glass-black: #000000;
|
|
149
|
+
--cs-glass-blue: #3b82f6;
|
|
150
|
+
--cs-glass-purple: #9333ea;
|
|
151
|
+
--cs-glass-green: #22c55e;
|
|
152
|
+
--cs-glass-pink: #ec4899;
|
|
153
|
+
--cs-glass-amber: #f59e0b;
|
|
154
|
+
|
|
155
|
+
/* Glass background opacity tokens - Complete range */
|
|
156
|
+
--cs-glass-bg-xs: rgba(255, 255, 255, 0.02);
|
|
157
|
+
--cs-glass-bg-sm: rgba(255, 255, 255, 0.07);
|
|
158
|
+
--cs-glass-bg-light: rgba(255, 255, 255, 0.1);
|
|
159
|
+
--cs-glass-bg-weak: rgba(255, 255, 255, 0.05);
|
|
160
|
+
--cs-glass-bg-md: rgba(255, 255, 255, 0.12);
|
|
161
|
+
--cs-glass-bg-medium: rgba(255, 255, 255, 0.15);
|
|
162
|
+
--cs-glass-bg-lg: rgba(255, 255, 255, 0.18);
|
|
163
|
+
--cs-glass-bg-strong: rgba(255, 255, 255, 0.2);
|
|
164
|
+
--cs-glass-bg-xl: rgba(255, 255, 255, 0.25);
|
|
165
|
+
--cs-glass-bg-2xl: rgba(255, 255, 255, 0.35);
|
|
166
|
+
--cs-glass-bg-3xl: rgba(255, 255, 255, 0.45);
|
|
167
|
+
--cs-glass-bg-4xl: rgba(255, 255, 255, 0.6);
|
|
168
|
+
--cs-glass-bg-5xl: rgba(255, 255, 255, 0.75);
|
|
169
|
+
|
|
170
|
+
/* Dark glass backgrounds - Complete range */
|
|
171
|
+
--cs-glass-bg-dark: rgba(0, 0, 0, 0.1);
|
|
172
|
+
--cs-glass-bg-dark-xs: rgba(0, 0, 0, 0.02);
|
|
173
|
+
--cs-glass-bg-dark-sm: rgba(0, 0, 0, 0.07);
|
|
174
|
+
--cs-glass-bg-dark-md: rgba(0, 0, 0, 0.12);
|
|
175
|
+
--cs-glass-bg-dark-lg: rgba(0, 0, 0, 0.18);
|
|
176
|
+
--cs-glass-bg-dark-strong: rgba(0, 0, 0, 0.2);
|
|
177
|
+
--cs-glass-bg-dark-xl: rgba(0, 0, 0, 0.25);
|
|
178
|
+
--cs-glass-bg-dark-2xl: rgba(0, 0, 0, 0.35);
|
|
179
|
+
--cs-glass-bg-dark-3xl: rgba(0, 0, 0, 0.45);
|
|
180
|
+
--cs-glass-bg-dark-4xl: rgba(0, 0, 0, 0.6);
|
|
181
|
+
--cs-glass-bg-dark-5xl: rgba(0, 0, 0, 0.75);
|
|
182
|
+
|
|
183
|
+
/* Colored glass backgrounds */
|
|
184
|
+
--cs-glass-bg-blue: rgba(59, 130, 246, 0.1);
|
|
185
|
+
--cs-glass-bg-purple: rgba(147, 51, 234, 0.1);
|
|
186
|
+
--cs-glass-bg-green: rgba(34, 197, 94, 0.1);
|
|
187
|
+
--cs-glass-bg-pink: rgba(236, 72, 153, 0.1);
|
|
188
|
+
--cs-glass-bg-amber: rgba(245, 158, 11, 0.1);
|
|
189
|
+
|
|
190
|
+
/* Glass border opacity tokens - Complete range */
|
|
191
|
+
--cs-glass-border-xs: rgba(255, 255, 255, 0.05);
|
|
192
|
+
--cs-glass-border-sm: rgba(255, 255, 255, 0.08);
|
|
193
|
+
--cs-glass-border-light: rgba(255, 255, 255, 0.1);
|
|
194
|
+
--cs-glass-border-md: rgba(255, 255, 255, 0.15);
|
|
195
|
+
--cs-glass-border-medium: rgba(255, 255, 255, 0.2);
|
|
196
|
+
--cs-glass-border-lg: rgba(255, 255, 255, 0.25);
|
|
197
|
+
--cs-glass-border-strong: rgba(255, 255, 255, 0.3);
|
|
198
|
+
--cs-glass-border-xl: rgba(255, 255, 255, 0.4);
|
|
199
|
+
--cs-glass-border-2xl: rgba(255, 255, 255, 0.5);
|
|
200
|
+
--cs-glass-border-3xl: rgba(255, 255, 255, 0.65);
|
|
201
|
+
|
|
202
|
+
/* Colored glass borders */
|
|
203
|
+
--cs-glass-border-blue: rgba(59, 130, 246, 0.2);
|
|
204
|
+
--cs-glass-border-purple: rgba(147, 51, 234, 0.2);
|
|
205
|
+
--cs-glass-border-green: rgba(34, 197, 94, 0.2);
|
|
206
|
+
--cs-glass-border-pink: rgba(236, 72, 153, 0.2);
|
|
207
|
+
--cs-glass-border-amber: rgba(245, 158, 11, 0.2);
|
|
208
|
+
|
|
209
|
+
/* Glass effects tokens */
|
|
210
|
+
--cs-glass-blur-sm: 8px;
|
|
211
|
+
--cs-glass-blur: 16px;
|
|
212
|
+
--cs-glass-blur-lg: 24px;
|
|
213
|
+
--cs-glass-blur-xl: 32px;
|
|
214
|
+
|
|
215
|
+
--cs-glass-radius-sm: 0.25rem;
|
|
216
|
+
--cs-glass-radius: 0.5rem;
|
|
217
|
+
--cs-glass-radius-lg: 0.75rem;
|
|
218
|
+
--cs-glass-radius-xl: 1rem;
|
|
219
|
+
--cs-glass-radius-2xl: 1.5rem;
|
|
220
|
+
--cs-glass-radius-3xl: 2rem;
|
|
221
|
+
|
|
222
|
+
/* Glass shadow tokens */
|
|
223
|
+
--cs-glass-shadow-light: rgba(0, 0, 0, 0.05);
|
|
224
|
+
--cs-glass-shadow-medium: rgba(0, 0, 0, 0.1);
|
|
225
|
+
--cs-glass-shadow-strong: rgba(0, 0, 0, 0.15);
|
|
226
|
+
--cs-glass-shadow-xl: rgba(0, 0, 0, 0.2);
|
|
227
|
+
|
|
228
|
+
/* Glass misc tokens */
|
|
229
|
+
--cs-glass-transition: 0.3s;
|
|
230
|
+
--cs-glass-tooltip-bg: rgba(0, 0, 0, 0.8);
|
|
231
|
+
--cs-glass-bg-hover: rgba(255, 255, 255, 0.15);
|
|
232
|
+
--cs-glass-bg-light-hover: rgba(255, 255, 255, 0.25);
|
|
233
|
+
--cs-glass-bg-contrast: rgba(255, 255, 255, 0.2);
|
|
234
|
+
--cs-glass-bg-dark-contrast: rgba(0, 0, 0, 0.2);
|
|
235
|
+
--cs-glass-bg-fallback: rgba(255, 255, 255, 0.25);
|
|
236
|
+
--cs-glass-bg-dark-fallback: rgba(0, 0, 0, 0.25);
|
|
237
|
+
--cs-glass-bg-blue-fallback: rgba(59, 130, 246, 0.2);
|
|
238
|
+
--cs-glass-bg-purple-fallback: rgba(147, 51, 234, 0.2);
|
|
239
|
+
--cs-glass-bg-green-fallback: rgba(34, 197, 94, 0.2);
|
|
240
|
+
--cs-glass-bg-pink-fallback: rgba(236, 72, 153, 0.2);
|
|
241
|
+
--cs-glass-bg-amber-fallback: rgba(245, 158, 11, 0.2);
|
|
242
|
+
--cs-glass-focus-ring: rgba(59, 130, 246, 0.5);
|
|
243
|
+
}
|
|
244
|
+
|
|
141
245
|
/* =========================================================
|
|
142
246
|
CORE GLASS UTILITIES
|
|
143
247
|
Base glass backdrop-filter utilities
|