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

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 (2) hide show
  1. package/package.json +1 -1
  2. package/styles.css +10 -52
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frosted-ui",
3
- "version": "0.0.1-canary.83",
3
+ "version": "0.0.1-canary.84",
4
4
  "private": false,
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/styles.css CHANGED
@@ -6152,12 +6152,10 @@ video {
6152
6152
  }
6153
6153
  .fui-DrawerContent:where([data-state='open']) {
6154
6154
  animation: fui-drawer-content-show 400ms cubic-bezier(0.32, 0.72, 0, 1);
6155
- animation: fui-drawer-content-show 400ms cubic-bezier(0.16, 1, 0.3, 1);
6156
6155
  }
6157
6156
 
6158
6157
  .fui-DrawerContent:where([data-state='closed']) {
6159
6158
  animation: fui-drawer-content-hide 400ms cubic-bezier(0.32, 0.72, 0, 1);
6160
- animation: fui-drawer-content-hide 300ms cubic-bezier(0.16, 1, 0.3, 1);
6161
6159
  }
6162
6160
  }
6163
6161
 
@@ -9768,22 +9766,13 @@ video {
9768
9766
  height: var(--skeleton-avatar-size);
9769
9767
  flex-shrink: 0;
9770
9768
 
9771
- background-size: 400% 100%;
9772
- background-image: linear-gradient(
9773
- 270deg,
9774
- var(--skeleton-background-color),
9775
- var(--skeleton-background-shimmer-color),
9776
- var(--skeleton-background-shimmer-color),
9777
- var(--skeleton-background-color)
9778
- );
9769
+ background: var(--skeleton-background-color);
9779
9770
 
9780
- --skeleton-background-color: var(--accent-a2);
9781
- --skeleton-background-shimmer-color: var(--accent-a3);
9771
+ --skeleton-background-color: var(--accent-a3);
9782
9772
  }
9783
9773
 
9784
9774
  .fui-SkeletonAvatar:where(.fui-high-contrast) {
9785
9775
  --skeleton-background-color: var(--accent-a4);
9786
- --skeleton-background-shimmer-color: var(--accent-a6);
9787
9776
  }
9788
9777
 
9789
9778
  .fui-SkeletonAvatar:where(.fui-shape-circle) {
@@ -9839,16 +9828,13 @@ video {
9839
9828
  align-items: center;
9840
9829
  justify-content: center;
9841
9830
  margin: 0;
9842
-
9843
9831
  height: var(--skeleton-text-line-height);
9844
9832
 
9845
- --skeleton-background-color: var(--accent-a2);
9846
- --skeleton-background-shimmer-color: var(--accent-a3);
9833
+ --skeleton-background-color: var(--accent-a3);
9847
9834
  }
9848
9835
 
9849
9836
  .fui-SkeletonText:where(.fui-high-contrast) {
9850
9837
  --skeleton-background-color: var(--accent-a4);
9851
- --skeleton-background-shimmer-color: var(--accent-a6);
9852
9838
  }
9853
9839
 
9854
9840
  .fui-SkeletonText::after {
@@ -9856,15 +9842,7 @@ video {
9856
9842
  width: 100%;
9857
9843
  height: var(--skeleton-text-size);
9858
9844
 
9859
- background-size: 400% 100%;
9860
- background-image: linear-gradient(
9861
- 270deg,
9862
- var(--skeleton-background-color),
9863
- var(--skeleton-background-shimmer-color),
9864
- var(--skeleton-background-shimmer-color),
9865
- var(--skeleton-background-color)
9866
- );
9867
-
9845
+ background: var(--skeleton-background-color);
9868
9846
  border-radius: var(--skeleton-text-border-radius);
9869
9847
  }
9870
9848
 
@@ -9935,47 +9913,27 @@ video {
9935
9913
  user-select: none;
9936
9914
  flex-shrink: 0;
9937
9915
 
9938
- background-size: 400% 100%;
9939
- background-image: linear-gradient(
9940
- 270deg,
9941
- var(--skeleton-background-color),
9942
- var(--skeleton-background-shimmer-color),
9943
- var(--skeleton-background-shimmer-color),
9944
- var(--skeleton-background-color)
9945
- );
9916
+ background: var(--skeleton-background-color);
9946
9917
 
9947
- --skeleton-background-color: var(--accent-a2);
9948
- --skeleton-background-shimmer-color: var(--accent-a3);
9918
+ --skeleton-background-color: var(--accent-a3);
9949
9919
  }
9950
9920
 
9951
9921
  .fui-SkeletonRect:where(.fui-high-contrast) {
9952
9922
  --skeleton-background-color: var(--accent-a4);
9953
- --skeleton-background-shimmer-color: var(--accent-a6);
9954
9923
  }
9955
9924
 
9956
9925
  @media (prefers-reduced-motion: no-preference) {
9957
- @keyframes fui-skeleton-shimmer {
9958
- from {
9959
- background-position: 200% 0;
9960
- }
9961
- to {
9962
- background-position: -200% 0;
9926
+ @keyframes fui-skeleton-pulse {
9927
+ 50% {
9928
+ opacity: 0.5;
9963
9929
  }
9964
9930
  }
9965
9931
 
9966
9932
  .fui-SkeletonAvatar,
9967
9933
  .fui-SkeletonText::after,
9968
9934
  .fui-SkeletonRect {
9969
- animation: fui-skeleton-shimmer 8s ease-in-out infinite;
9935
+ animation: fui-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
9970
9936
  }
9971
-
9972
- .fui-DrawerContent:where([data-state='open'])::before {
9973
- animation: fui-drawer-backdrop-show 400ms cubic-bezier(0.16, 1, 0.3, 1);
9974
- }
9975
-
9976
- .fui-DrawerContent:where([data-state='closed'])::before {
9977
- animation: fui-drawer-backdrop-hide 300ms cubic-bezier(0.16, 1, 0.3, 1);
9978
- }
9979
9937
  }
9980
9938
 
9981
9939
  .fui-SliderRoot {