V 3/ fallback color mix (#1325)

reown-com · Sep 11, 2023 · 5ed7940 · 5ed7940 · vercel · Sep 11, 2023
1 parent b985a56
commit 5ed7940
Show file tree

Hide file tree

Showing 3 changed files with 240 additions and 193 deletions.
diff --git a/packages/ui/src/composites/wui-avatar/styles.ts b/packages/ui/src/composites/wui-avatar/styles.ts
@@ -12,42 +12,45 @@ export default css`
   }
 
   :host([data-variant='generated']) {
-    --mixed-local-color-1: color-mix(
-      in srgb,
-      var(--w3m-color-mix) var(--w3m-color-mix-strength),
-      var(--local-color-1)
-    );
-    --mixed-local-color-2: color-mix(
-      in srgb,
-      var(--w3m-color-mix) var(--w3m-color-mix-strength),
-      var(--local-color-2)
-    );
-    --mixed-local-color-3: color-mix(
-      in srgb,
-      var(--w3m-color-mix) var(--w3m-color-mix-strength),
-      var(--local-color-3)
-    );
-    --mixed-local-color-4: color-mix(
-      in srgb,
-      var(--w3m-color-mix) var(--w3m-color-mix-strength),
-      var(--local-color-4)
-    );
-    --mixed-local-color-5: color-mix(
-      in srgb,
-      var(--w3m-color-mix) var(--w3m-color-mix-strength),
-      var(--local-color-5)
-    );
+    --mixed-local-color-1: var(--local-color-1);
+    --mixed-local-color-2: var(--local-color-2);
+    --mixed-local-color-3: var(--local-color-3);
+    --mixed-local-color-4: var(--local-color-4);
+    --mixed-local-color-5: var(--local-color-5);
+  }
 
+  @supports (background: color-mix(in srgb, white 50%, black)) {
+    :host([data-variant='generated']) {
+      --mixed-local-color-1: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-1)
+      );
+      --mixed-local-color-2: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-2)
+      );
+      --mixed-local-color-3: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-3)
+      );
+      --mixed-local-color-4: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-4)
+      );
+      --mixed-local-color-5: color-mix(
+        in srgb,
+        var(--w3m-color-mix) var(--w3m-color-mix-strength),
+        var(--local-color-5)
+      );
+    }
+  }
+
+  :host([data-variant='generated']) {
     outline: 8px solid var(--wui-avatar-border);
-    background: radial-gradient(
-      75.29% 75.29% at 64.96% 24.36%,
-      #fff 0.52%,
-      var(--local-color-5) 31.25%,
-      var(--local-color-3) 51.56%,
-      var(--local-color-2) 65.63%,
-      var(--local-color-1) 82.29%,
-      var(--local-color-4) 100%
-    );
     background: radial-gradient(
       75.29% 75.29% at 64.96% 24.36%,
       #fff 0.52%,

diff --git a/packages/ui/src/composites/wui-icon-box/styles.ts b/packages/ui/src/composites/wui-icon-box/styles.ts
@@ -8,12 +8,17 @@ export default css`
     position: relative;
     overflow: hidden;
     background-color: var(--wui-gray-glass-020);
-    background-color: color-mix(in srgb, var(--local-bg-value) var(--local-bg-mix), transparent);
     border-radius: var(--local-border-radius);
     border: var(--local-border);
     width: var(--local-size);
     height: var(--local-size);
     min-height: var(--local-size);
     min-width: var(--local-size);
   }
+
+  @supports (background: color-mix(in srgb, white 50%, black)) {
+    :host {
+      background-color: color-mix(in srgb, var(--local-bg-value) var(--local-bg-mix), transparent);
+    }
+  }
 `