@casoon/atlas-styles 0.0.6 → 0.0.7

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 (4) hide show
  1. package/dist/glass.css +104 -0
  2. package/dist/index.css +147 -0
  3. package/dist/orbs.css +43 -0
  4. package/package.json +1 -1
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
package/dist/index.css CHANGED
@@ -4601,6 +4601,110 @@
4601
4601
  --cs-glass-backdrop-filter-extra: none;
4602
4602
  }
4603
4603
 
4604
+ /* =========================================================
4605
+ CSS CUSTOM PROPERTIES FOR INLINE STYLES
4606
+ Duplicates @theme tokens as :root variables for use with var()
4607
+ ========================================================= */
4608
+ :root {
4609
+ /* === GLASS COLOR SYSTEM === */
4610
+ --cs-glass-white: #ffffff;
4611
+ --cs-glass-black: #000000;
4612
+ --cs-glass-blue: #3b82f6;
4613
+ --cs-glass-purple: #9333ea;
4614
+ --cs-glass-green: #22c55e;
4615
+ --cs-glass-pink: #ec4899;
4616
+ --cs-glass-amber: #f59e0b;
4617
+
4618
+ /* Glass background opacity tokens - Complete range */
4619
+ --cs-glass-bg-xs: rgba(255, 255, 255, 0.02);
4620
+ --cs-glass-bg-sm: rgba(255, 255, 255, 0.07);
4621
+ --cs-glass-bg-light: rgba(255, 255, 255, 0.1);
4622
+ --cs-glass-bg-weak: rgba(255, 255, 255, 0.05);
4623
+ --cs-glass-bg-md: rgba(255, 255, 255, 0.12);
4624
+ --cs-glass-bg-medium: rgba(255, 255, 255, 0.15);
4625
+ --cs-glass-bg-lg: rgba(255, 255, 255, 0.18);
4626
+ --cs-glass-bg-strong: rgba(255, 255, 255, 0.2);
4627
+ --cs-glass-bg-xl: rgba(255, 255, 255, 0.25);
4628
+ --cs-glass-bg-2xl: rgba(255, 255, 255, 0.35);
4629
+ --cs-glass-bg-3xl: rgba(255, 255, 255, 0.45);
4630
+ --cs-glass-bg-4xl: rgba(255, 255, 255, 0.6);
4631
+ --cs-glass-bg-5xl: rgba(255, 255, 255, 0.75);
4632
+
4633
+ /* Dark glass backgrounds - Complete range */
4634
+ --cs-glass-bg-dark: rgba(0, 0, 0, 0.1);
4635
+ --cs-glass-bg-dark-xs: rgba(0, 0, 0, 0.02);
4636
+ --cs-glass-bg-dark-sm: rgba(0, 0, 0, 0.07);
4637
+ --cs-glass-bg-dark-md: rgba(0, 0, 0, 0.12);
4638
+ --cs-glass-bg-dark-lg: rgba(0, 0, 0, 0.18);
4639
+ --cs-glass-bg-dark-strong: rgba(0, 0, 0, 0.2);
4640
+ --cs-glass-bg-dark-xl: rgba(0, 0, 0, 0.25);
4641
+ --cs-glass-bg-dark-2xl: rgba(0, 0, 0, 0.35);
4642
+ --cs-glass-bg-dark-3xl: rgba(0, 0, 0, 0.45);
4643
+ --cs-glass-bg-dark-4xl: rgba(0, 0, 0, 0.6);
4644
+ --cs-glass-bg-dark-5xl: rgba(0, 0, 0, 0.75);
4645
+
4646
+ /* Colored glass backgrounds */
4647
+ --cs-glass-bg-blue: rgba(59, 130, 246, 0.1);
4648
+ --cs-glass-bg-purple: rgba(147, 51, 234, 0.1);
4649
+ --cs-glass-bg-green: rgba(34, 197, 94, 0.1);
4650
+ --cs-glass-bg-pink: rgba(236, 72, 153, 0.1);
4651
+ --cs-glass-bg-amber: rgba(245, 158, 11, 0.1);
4652
+
4653
+ /* Glass border opacity tokens - Complete range */
4654
+ --cs-glass-border-xs: rgba(255, 255, 255, 0.05);
4655
+ --cs-glass-border-sm: rgba(255, 255, 255, 0.08);
4656
+ --cs-glass-border-light: rgba(255, 255, 255, 0.1);
4657
+ --cs-glass-border-md: rgba(255, 255, 255, 0.15);
4658
+ --cs-glass-border-medium: rgba(255, 255, 255, 0.2);
4659
+ --cs-glass-border-lg: rgba(255, 255, 255, 0.25);
4660
+ --cs-glass-border-strong: rgba(255, 255, 255, 0.3);
4661
+ --cs-glass-border-xl: rgba(255, 255, 255, 0.4);
4662
+ --cs-glass-border-2xl: rgba(255, 255, 255, 0.5);
4663
+ --cs-glass-border-3xl: rgba(255, 255, 255, 0.65);
4664
+
4665
+ /* Colored glass borders */
4666
+ --cs-glass-border-blue: rgba(59, 130, 246, 0.2);
4667
+ --cs-glass-border-purple: rgba(147, 51, 234, 0.2);
4668
+ --cs-glass-border-green: rgba(34, 197, 94, 0.2);
4669
+ --cs-glass-border-pink: rgba(236, 72, 153, 0.2);
4670
+ --cs-glass-border-amber: rgba(245, 158, 11, 0.2);
4671
+
4672
+ /* Glass effects tokens */
4673
+ --cs-glass-blur-sm: 8px;
4674
+ --cs-glass-blur: 16px;
4675
+ --cs-glass-blur-lg: 24px;
4676
+ --cs-glass-blur-xl: 32px;
4677
+
4678
+ --cs-glass-radius-sm: 0.25rem;
4679
+ --cs-glass-radius: 0.5rem;
4680
+ --cs-glass-radius-lg: 0.75rem;
4681
+ --cs-glass-radius-xl: 1rem;
4682
+ --cs-glass-radius-2xl: 1.5rem;
4683
+ --cs-glass-radius-3xl: 2rem;
4684
+
4685
+ /* Glass shadow tokens */
4686
+ --cs-glass-shadow-light: rgba(0, 0, 0, 0.05);
4687
+ --cs-glass-shadow-medium: rgba(0, 0, 0, 0.1);
4688
+ --cs-glass-shadow-strong: rgba(0, 0, 0, 0.15);
4689
+ --cs-glass-shadow-xl: rgba(0, 0, 0, 0.2);
4690
+
4691
+ /* Glass misc tokens */
4692
+ --cs-glass-transition: 0.3s;
4693
+ --cs-glass-tooltip-bg: rgba(0, 0, 0, 0.8);
4694
+ --cs-glass-bg-hover: rgba(255, 255, 255, 0.15);
4695
+ --cs-glass-bg-light-hover: rgba(255, 255, 255, 0.25);
4696
+ --cs-glass-bg-contrast: rgba(255, 255, 255, 0.2);
4697
+ --cs-glass-bg-dark-contrast: rgba(0, 0, 0, 0.2);
4698
+ --cs-glass-bg-fallback: rgba(255, 255, 255, 0.25);
4699
+ --cs-glass-bg-dark-fallback: rgba(0, 0, 0, 0.25);
4700
+ --cs-glass-bg-blue-fallback: rgba(59, 130, 246, 0.2);
4701
+ --cs-glass-bg-purple-fallback: rgba(147, 51, 234, 0.2);
4702
+ --cs-glass-bg-green-fallback: rgba(34, 197, 94, 0.2);
4703
+ --cs-glass-bg-pink-fallback: rgba(236, 72, 153, 0.2);
4704
+ --cs-glass-bg-amber-fallback: rgba(245, 158, 11, 0.2);
4705
+ --cs-glass-focus-ring: rgba(59, 130, 246, 0.5);
4706
+ }
4707
+
4604
4708
  /* =========================================================
4605
4709
  CORE GLASS UTILITIES
4606
4710
  Base glass backdrop-filter utilities
@@ -5876,6 +5980,49 @@
5876
5980
  );
5877
5981
  }
5878
5982
 
5983
+ /* =========================================================
5984
+ CSS CUSTOM PROPERTIES FOR INLINE STYLES
5985
+ Duplicates @theme tokens as :root variables for use with var()
5986
+ ========================================================= */
5987
+ :root {
5988
+ /* Base palette colors */
5989
+ --cs-text: #0f172a;
5990
+ --cs-text-inverse: #ffffff;
5991
+ --cs-bg: #ffffff;
5992
+ --cs-surface: #ffffff;
5993
+ --cs-surface-2: #f8fafc;
5994
+ --cs-border: #e5e7eb;
5995
+
5996
+ /* Orb colors */
5997
+ --cs-orb-blue: #3b82f6;
5998
+ --cs-orb-blue-light: #93c5fd;
5999
+ --cs-orb-blue-lighter: #dbeafe;
6000
+ --cs-orb-purple: #9333ea;
6001
+ --cs-orb-purple-light: #c4b5fd;
6002
+ --cs-orb-purple-lighter: #ede9fe;
6003
+ --cs-orb-pink: #ec4899;
6004
+ --cs-orb-pink-light: #fbcfe8;
6005
+ --cs-orb-pink-lighter: #fdf2f8;
6006
+ --cs-orb-custom-primary: #667eea;
6007
+ --cs-orb-custom-secondary: #764ba2;
6008
+ --cs-orb-custom-accent: #f093fb;
6009
+ --cs-orb-green: #22c55e;
6010
+ --cs-orb-amber: #f59e0b;
6011
+
6012
+ /* Opacity tokens */
6013
+ --cs-opacity-strong: 0.5;
6014
+ --cs-opacity-medium: 0.3;
6015
+ --cs-opacity-weak: 0.1;
6016
+
6017
+ /* Motion & transitions */
6018
+ --cs-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
6019
+ --cs-anim-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
6020
+ --cs-anim-ease-emph: cubic-bezier(0.2, 0.8, 0.2, 1);
6021
+ --cs-anim-duration-float: 6s;
6022
+ --cs-anim-duration-pulse: 4s;
6023
+ --cs-anim-duration-drift: 8s;
6024
+ }
6025
+
5879
6026
  /* =========================================================
5880
6027
  Base Orb Utility
5881
6028
  ========================================================= */
package/dist/orbs.css CHANGED
@@ -202,6 +202,49 @@
202
202
  );
203
203
  }
204
204
 
205
+ /* =========================================================
206
+ CSS CUSTOM PROPERTIES FOR INLINE STYLES
207
+ Duplicates @theme tokens as :root variables for use with var()
208
+ ========================================================= */
209
+ :root {
210
+ /* Base palette colors */
211
+ --cs-text: #0f172a;
212
+ --cs-text-inverse: #ffffff;
213
+ --cs-bg: #ffffff;
214
+ --cs-surface: #ffffff;
215
+ --cs-surface-2: #f8fafc;
216
+ --cs-border: #e5e7eb;
217
+
218
+ /* Orb colors */
219
+ --cs-orb-blue: #3b82f6;
220
+ --cs-orb-blue-light: #93c5fd;
221
+ --cs-orb-blue-lighter: #dbeafe;
222
+ --cs-orb-purple: #9333ea;
223
+ --cs-orb-purple-light: #c4b5fd;
224
+ --cs-orb-purple-lighter: #ede9fe;
225
+ --cs-orb-pink: #ec4899;
226
+ --cs-orb-pink-light: #fbcfe8;
227
+ --cs-orb-pink-lighter: #fdf2f8;
228
+ --cs-orb-custom-primary: #667eea;
229
+ --cs-orb-custom-secondary: #764ba2;
230
+ --cs-orb-custom-accent: #f093fb;
231
+ --cs-orb-green: #22c55e;
232
+ --cs-orb-amber: #f59e0b;
233
+
234
+ /* Opacity tokens */
235
+ --cs-opacity-strong: 0.5;
236
+ --cs-opacity-medium: 0.3;
237
+ --cs-opacity-weak: 0.1;
238
+
239
+ /* Motion & transitions */
240
+ --cs-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
241
+ --cs-anim-ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
242
+ --cs-anim-ease-emph: cubic-bezier(0.2, 0.8, 0.2, 1);
243
+ --cs-anim-duration-float: 6s;
244
+ --cs-anim-duration-pulse: 4s;
245
+ --cs-anim-duration-drift: 8s;
246
+ }
247
+
205
248
  /* =========================================================
206
249
  Base Orb Utility
207
250
  ========================================================= */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@casoon/atlas-styles",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "description": "Pure CSS design system with glass effects, gradients, and utilities for Tailwind v4",
5
5
  "type": "module",
6
6
  "files": [