frosted-ui 0.0.1-canary.90 → 0.0.1-canary.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frosted-ui",
-  "version": "0.0.1-canary.90",
+  "version": "0.0.1-canary.91",
   "private": false,
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -124,8 +124,8 @@
     "stylelint": "^15.11.0",
     "tsx": "^4.19.2",
     "typescript": "^5.6.3",
-    "eslint-config-custom": "0.0.0",
-    "@frosted-ui/icons": "0.0.1-canary.21"
+    "@frosted-ui/icons": "0.0.1-canary.21",
+    "eslint-config-custom": "0.0.0"
   },
   "publishConfig": {
     "access": "public"

package/styles.css

@@ -2717,12 +2717,12 @@ video {
   --magenta-a10: #ff0089ef;
   --magenta-a11: #ff89b8;
   --magenta-a12: #ffcfe0;
-  --gray-2-translucent: #1d1d1d80;
-  --mauve-2-translucent: #1e1d1e80;
-  --slate-2-translucent: #1b1d1e80;
-  --sage-2-translucent: #1a1c1b80;
-  --olive-2-translucent: #1b1c1a80;
-  --sand-2-translucent: #1d1d1b80;
+  --gray-2-translucent: #1d1d1dd9;
+  --mauve-2-translucent: #1e1d1ed9;
+  --slate-2-translucent: #1b1d1ed9;
+  --sage-2-translucent: #1a1c1bd9;
+  --olive-2-translucent: #1b1c1ad9;
+  --sand-2-translucent: #1d1d1bd9;
   --gray-surface: #21212180;
   --mauve-surface: #22212380;
   --slate-surface: #1f212380;
@@ -3554,12 +3554,12 @@ video {
       --magenta-a10: color(display-p3 1 0.2078 0.5804 / 0.853);
       --magenta-a11: color(display-p3 1 0.5961 0.7647 / 0.933);
       --magenta-a12: color(display-p3 0.9961 0.8431 0.902 / 0.967);
-        --gray-2-translucent: color(display-p3 0.1137 0.1137 0.1137 / 0.5);
-        --mauve-2-translucent: color(display-p3 0.1176 0.1137 0.1176 / 0.5);
-        --slate-2-translucent: color(display-p3 0.1059 0.1137 0.1176 / 0.5);
-        --sage-2-translucent: color(display-p3 0.102 0.1137 0.1059 / 0.5);
-        --olive-2-translucent: color(display-p3 0.1059 0.1137 0.102 / 0.5);
-        --sand-2-translucent: color(display-p3 0.1137 0.1137 0.1059 / 0.5);
+        --gray-2-translucent: color(display-p3 0.1137 0.1137 0.1137 / 0.85);
+        --mauve-2-translucent: color(display-p3 0.1176 0.1137 0.1176 / 0.85);
+        --slate-2-translucent: color(display-p3 0.1059 0.1137 0.1176 / 0.85);
+        --sage-2-translucent: color(display-p3 0.102 0.1137 0.1059 / 0.85);
+        --olive-2-translucent: color(display-p3 0.1059 0.1137 0.102 / 0.85);
+        --sand-2-translucent: color(display-p3 0.1137 0.1137 0.1059 / 0.85);
         --gray-surface: color(display-p3 0.1255 0.1255 0.1255 / 0.5);
         --mauve-surface: color(display-p3 0.1333 0.1255 0.1333 / 0.5);
         --slate-surface: color(display-p3 0.1176 0.1255 0.1333 / 0.5);
@@ -3698,7 +3698,7 @@ video {
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, 0.7);
+  --color-panel-translucent: rgba(255, 255, 255, 0.85);
   --color-surface: rgba(255, 255, 255, 0.9);
   --backdrop-filter-panel: blur(20px) saturate(190%) contrast(50%) brightness(130%);
   --color-stroke: var(--gray-a5);
@@ -3875,6 +3875,19 @@ video {
   --color-tooltip-outline: black;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  :where(.frosted-ui) {
+    --color-panel-translucent: var(--color-panel-solid);
+  }
+
+  .dark,
+  .dark-theme,
+  .dark :where(.frosted-ui:not(.light, .light-theme)),
+  .dark-theme :where(.frosted-ui:not(.light, .light-theme)) {
+    --color-panel-translucent: var(--color-panel-solid);
+  }
+}
+
 @supports (color: color(display-p3 1 1 1)) {
   @media (color-gamut: p3) {
     .frosted-ui {

package/styles.lite.css

@@ -1884,12 +1884,12 @@ video {
   --magenta-a10: #ff0089ef;
   --magenta-a11: #ff89b8;
   --magenta-a12: #ffcfe0;
-  --gray-2-translucent: #1d1d1d80;
-  --mauve-2-translucent: #1e1d1e80;
-  --slate-2-translucent: #1b1d1e80;
-  --sage-2-translucent: #1a1c1b80;
-  --olive-2-translucent: #1b1c1a80;
-  --sand-2-translucent: #1d1d1b80;
+  --gray-2-translucent: #1d1d1dd9;
+  --mauve-2-translucent: #1e1d1ed9;
+  --slate-2-translucent: #1b1d1ed9;
+  --sage-2-translucent: #1a1c1bd9;
+  --olive-2-translucent: #1b1c1ad9;
+  --sand-2-translucent: #1d1d1bd9;
   --gray-surface: #21212180;
   --mauve-surface: #22212380;
   --slate-surface: #1f212380;
@@ -1995,7 +1995,7 @@ video {
   --color-background: white;
   --color-overlay: var(--black-a6);
   --color-panel-solid: white;
-  --color-panel-translucent: rgba(255, 255, 255, 0.7);
+  --color-panel-translucent: rgba(255, 255, 255, 0.85);
   --color-surface: rgba(255, 255, 255, 0.9);
   --backdrop-filter-panel: blur(20px) saturate(190%) contrast(50%) brightness(130%);
   --color-stroke: var(--gray-a5);
@@ -2172,6 +2172,19 @@ video {
   --color-tooltip-outline: black;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  :where(.frosted-ui) {
+    --color-panel-translucent: var(--color-panel-solid);
+  }
+
+  .dark,
+  .dark-theme,
+  .dark :where(.frosted-ui:not(.light, .light-theme)),
+  .dark-theme :where(.frosted-ui:not(.light, .light-theme)) {
+    --color-panel-translucent: var(--color-panel-solid);
+  }
+}
+
 .frosted-ui:where(.light, .light-theme) {
   color-scheme: light;
 }