frosted-ui 0.0.1-canary.83 → 0.0.1-canary.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frosted-ui",
-  "version": "0.0.1-canary.83",
+  "version": "0.0.1-canary.85",
   "private": false,
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",

package/styles.css

@@ -3789,8 +3789,10 @@ video {
   --color-tooltip-outline: transparent;
 }
 
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.frosted-ui:not(.light, .light-theme)) {
+.dark,
+.dark-theme,
+.dark :where(.frosted-ui:not(.light, .light-theme)),
+.dark-theme :where(.frosted-ui:not(.light, .light-theme)) {
   --color-background: var(--gray-1);
   --color-overlay: var(--black-a8);
   --color-panel-solid: var(--gray-2);
@@ -3895,7 +3897,7 @@ video {
   --color-focus-root: var(--accent-8);
 }
 
-.frosted-ui ::selection {
+::selection {
   background-color: var(--color-selection-root);
 }
 
@@ -5544,8 +5546,10 @@ video {
 }
 
 @supports (color: color-mix(in oklab, white, black)) {
-  :is(.dark, .dark-theme),
-  :is(.dark, .dark-theme) :where(.frosted-ui:not(.light, .light-theme)) {
+  .dark,
+  .dark-theme,
+  .dark :where(.frosted-ui:not(.light, .light-theme)),
+  .dark-theme :where(.frosted-ui:not(.light, .light-theme)) {
     --shadow-1:
       inset 0 -1px 1px 0 var(--gray-a3),
       inset 0 0 0 1px var(--gray-a3),
@@ -5581,11 +5585,8 @@ video {
       0 16px 64px var(--black-a6),
       0 16px 36px -20px var(--black-a11);
     --card-classic-hover-box-shadow:
-      0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-8)),
-      0 0 1px 1px var(--gray-a7),
-      0 0 1px -1px var(--gray-a4),
-      0 0 3px -2px var(--gray-a3),
-      0 0 12px -2px var(--gray-a3),
+      0 0 0 1px color-mix(in oklab, var(--gray-a7), var(--gray-8)), 0 0 1px 1px var(--gray-a7),
+      0 0 1px -1px var(--gray-a4), 0 0 3px -2px var(--gray-a3), 0 0 12px -2px var(--gray-a3),
       0 0 16px -8px var(--gray-a9);
   }
 }
@@ -6152,12 +6153,10 @@ video {
   }
     .fui-DrawerContent:where([data-state='open']) {
       animation: fui-drawer-content-show 400ms cubic-bezier(0.32, 0.72, 0, 1);
-      animation: fui-drawer-content-show 400ms cubic-bezier(0.16, 1, 0.3, 1);
     }
 
     .fui-DrawerContent:where([data-state='closed']) {
       animation: fui-drawer-content-hide 400ms cubic-bezier(0.32, 0.72, 0, 1);
-      animation: fui-drawer-content-hide 300ms cubic-bezier(0.16, 1, 0.3, 1);
     }
 }
 
@@ -9768,22 +9767,13 @@ video {
   height: var(--skeleton-avatar-size);
   flex-shrink: 0;
 
-  background-size: 400% 100%;
-  background-image: linear-gradient(
-    270deg,
-    var(--skeleton-background-color),
-    var(--skeleton-background-shimmer-color),
-    var(--skeleton-background-shimmer-color),
-    var(--skeleton-background-color)
-  );
+  background: var(--skeleton-background-color);
 
-  --skeleton-background-color: var(--accent-a2);
-  --skeleton-background-shimmer-color: var(--accent-a3);
+  --skeleton-background-color: var(--accent-a3);
 }
 
 .fui-SkeletonAvatar:where(.fui-high-contrast) {
     --skeleton-background-color: var(--accent-a4);
-    --skeleton-background-shimmer-color: var(--accent-a6);
   }
 
 .fui-SkeletonAvatar:where(.fui-shape-circle) {
@@ -9839,16 +9829,13 @@ video {
   align-items: center;
   justify-content: center;
   margin: 0;
-
   height: var(--skeleton-text-line-height);
 
-  --skeleton-background-color: var(--accent-a2);
-  --skeleton-background-shimmer-color: var(--accent-a3);
+  --skeleton-background-color: var(--accent-a3);
 }
 
 .fui-SkeletonText:where(.fui-high-contrast) {
     --skeleton-background-color: var(--accent-a4);
-    --skeleton-background-shimmer-color: var(--accent-a6);
   }
 
 .fui-SkeletonText::after {
@@ -9856,15 +9843,7 @@ video {
   width: 100%;
   height: var(--skeleton-text-size);
 
-  background-size: 400% 100%;
-  background-image: linear-gradient(
-    270deg,
-    var(--skeleton-background-color),
-    var(--skeleton-background-shimmer-color),
-    var(--skeleton-background-shimmer-color),
-    var(--skeleton-background-color)
-  );
-
+  background: var(--skeleton-background-color);
   border-radius: var(--skeleton-text-border-radius);
 }
 
@@ -9935,47 +9914,27 @@ video {
           user-select: none;
   flex-shrink: 0;
 
-  background-size: 400% 100%;
-  background-image: linear-gradient(
-    270deg,
-    var(--skeleton-background-color),
-    var(--skeleton-background-shimmer-color),
-    var(--skeleton-background-shimmer-color),
-    var(--skeleton-background-color)
-  );
+  background: var(--skeleton-background-color);
 
-  --skeleton-background-color: var(--accent-a2);
-  --skeleton-background-shimmer-color: var(--accent-a3);
+  --skeleton-background-color: var(--accent-a3);
 }
 
 .fui-SkeletonRect:where(.fui-high-contrast) {
     --skeleton-background-color: var(--accent-a4);
-    --skeleton-background-shimmer-color: var(--accent-a6);
   }
 
 @media (prefers-reduced-motion: no-preference) {
-  @keyframes fui-skeleton-shimmer {
-    from {
-      background-position: 200% 0;
-    }
-    to {
-      background-position: -200% 0;
+  @keyframes fui-skeleton-pulse {
+    50% {
+      opacity: 0.5;
     }
   }
 
   .fui-SkeletonAvatar,
   .fui-SkeletonText::after,
   .fui-SkeletonRect {
-    animation: fui-skeleton-shimmer 8s ease-in-out infinite;
+    animation: fui-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
-
-    .fui-DrawerContent:where([data-state='open'])::before {
-      animation: fui-drawer-backdrop-show 400ms cubic-bezier(0.16, 1, 0.3, 1);
-    }
-
-    .fui-DrawerContent:where([data-state='closed'])::before {
-      animation: fui-drawer-backdrop-hide 300ms cubic-bezier(0.16, 1, 0.3, 1);
-    }
 }
 
 .fui-SliderRoot {