@j3m-quantum/ui 0.7.8 → 0.7.9
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/index.cjs +28 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -2
- package/dist/index.d.ts +7 -2
- package/dist/index.js +28 -11
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +44 -0
- package/package.json +1 -1
package/dist/styles/index.css
CHANGED
|
@@ -176,11 +176,20 @@
|
|
|
176
176
|
--j3m-glass-neutral-strong: rgba(227, 227, 227, 0.7);
|
|
177
177
|
--j3m-glass-primary: rgba(243, 108, 33, 0.1);
|
|
178
178
|
--j3m-glass-primary-highlight: rgba(243, 108, 33, 0.2);
|
|
179
|
+
|
|
180
|
+
/* Frosted Glass (enhanced) */
|
|
181
|
+
--j3m-glass-frosted: rgba(255, 255, 255, 0.25);
|
|
182
|
+
--j3m-glass-frosted-strong: rgba(255, 255, 255, 0.4);
|
|
183
|
+
--j3m-glass-frosted-card: rgba(255, 255, 255, 0.35);
|
|
184
|
+
--j3m-blur-frosted: 24px;
|
|
179
185
|
|
|
180
186
|
/* Glass Borders */
|
|
181
187
|
--j3m-glass-border-light: rgba(255, 255, 255, 0.3);
|
|
182
188
|
--j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
|
|
183
189
|
--j3m-glass-border-white: rgba(255, 255, 255, 0.2);
|
|
190
|
+
|
|
191
|
+
/* Gradient Border (top lighter, bottom darker - simulates light from above) */
|
|
192
|
+
--j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
|
|
184
193
|
|
|
185
194
|
/* Glass Shadows */
|
|
186
195
|
--j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
@@ -547,6 +556,41 @@ textarea,
|
|
|
547
556
|
box-shadow: var(--j3m-glass-shadow-glow);
|
|
548
557
|
}
|
|
549
558
|
|
|
559
|
+
/* Frosted glass with gradient border */
|
|
560
|
+
.glass-frosted {
|
|
561
|
+
background: var(--j3m-glass-frosted);
|
|
562
|
+
backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
563
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
564
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.glass-frosted-strong {
|
|
568
|
+
background: var(--j3m-glass-frosted-strong);
|
|
569
|
+
backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
570
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
571
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
/* Gradient border utility - creates top-lit edge effect */
|
|
575
|
+
.glass-border-gradient {
|
|
576
|
+
position: relative;
|
|
577
|
+
border: none !important;
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.glass-border-gradient::before {
|
|
581
|
+
content: '';
|
|
582
|
+
position: absolute;
|
|
583
|
+
inset: 0;
|
|
584
|
+
border-radius: inherit;
|
|
585
|
+
padding: 1px;
|
|
586
|
+
background: var(--j3m-glass-border-gradient);
|
|
587
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
588
|
+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
589
|
+
-webkit-mask-composite: xor;
|
|
590
|
+
mask-composite: exclude;
|
|
591
|
+
pointer-events: none;
|
|
592
|
+
}
|
|
593
|
+
|
|
550
594
|
/* ========================================
|
|
551
595
|
ANIMATIONS (tw-animate-css compatible)
|
|
552
596
|
Composable animation system using CSS variables
|