@sanity/ui 2.0.0-beta.10 → 2.0.0-beta.11

package/dist/theme.js

@@ -2189,10 +2189,11 @@ const defaultColorTokens = {
       border: ["200", "800"],
       code: {
         bg: ["50", "950"],
-        fg: ["600", "300"]
+        fg: ["600", "400"]
       },
       fg: ["800", "200"],
       focusRing: ["blue/500", "blue/500"],
+      icon: ["600", "400"],
       kbd: {
         bg: ["white", "black"],
         fg: ["600", "400"],
@@ -2203,7 +2204,7 @@ const defaultColorTokens = {
       },
       muted: {
         bg: ["50", "950"],
-        fg: ["700 70%", "300 70%"]
+        fg: ["700 75%", "300 75%"]
       },
       shadow: {
         outline: ["500/0.3", "500/0.4"],
@@ -2217,15 +2218,11 @@ const defaultColorTokens = {
       }
     },
     transparent: {
-      bg: ["50", "black"],
-      fg: ["600", "400"],
-      muted: {
-        fg: ["600", "400"]
-      }
+      bg: ["50", "black"]
     },
     default: {
       bg: ["white", "950"],
-      fg: ["black", "200"],
+      fg: ["800", "200"],
       muted: {
         fg: ["600", "400"]
       }
@@ -2257,6 +2254,13 @@ const defaultColorTokens = {
           accent: {
             fg: ["purple/300", "purple/700"]
           },
+          avatar: {
+            "*": {
+              _blend: ["multiply", "screen"],
+              bg: ["white", "black"],
+              fg: ["black", "white"]
+            }
+          },
           badge: {
             "*": {
               bg: ["900", "100"],
@@ -2272,18 +2276,18 @@ const defaultColorTokens = {
             fg: ["200", "600"]
           },
           fg: ["white", "black"],
-          icon: ["200", "800"],
+          icon: ["100 70%", "900 70%"],
           kbd: {
             bg: ["black", "white"],
-            fg: ["200", "800"],
+            fg: ["200", "600"],
             border: ["800", "200"]
           },
           link: {
-            fg: ["blue/200", "blue/700"]
+            fg: ["blue/200", "blue/600"]
           },
           muted: {
             bg: ["950", "50"],
-            fg: ["100 70%", "600"]
+            fg: ["100 70%", "900 70%"]
           },
           skeleton: {
             from: ["900", "100"],
@@ -2302,6 +2306,9 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
+          accent: {
+            fg: ["100 70%", "900 70%"]
+          },
           badge: {
             "*": {
               bg: ["gray/700", "gray/300"],
@@ -2311,11 +2318,13 @@ const defaultColorTokens = {
             }
           },
           bg: ["200", "800"],
-          icon: ["white", "black"],
           kbd: {
             bg: ["black", "white"],
             fg: ["white", "black"],
             border: ["700", "300"]
+          },
+          link: {
+            fg: ["100 70%", "900 70%"]
           }
         }
       },
@@ -2360,7 +2369,7 @@ const defaultColorTokens = {
             fg: ["700 60%", "400 60%"]
           },
           fg: ["600", "400"],
-          icon: ["600", "500"],
+          icon: ["700 60%", "300 60%"],
           kbd: {
             bg: ["white", "black"],
             fg: ["600", "400"],
@@ -2453,14 +2462,14 @@ const defaultColorTokens = {
           bg: ["white", "black"],
           border: ["white/0", "black/0"],
           code: {
-            bg: ["100", "950"],
-            fg: ["600", "300"]
+            bg: ["50", "950"],
+            fg: ["700 75%", "300 75%"]
           },
           fg: ["700", "300"],
-          icon: ["700 70%", "300 70%"],
+          icon: ["700 75%", "300 75%"],
           kbd: {
             bg: ["white", "black"],
-            fg: ["600", "400"],
+            fg: ["700", "300"],
             border: ["200", "800"]
           },
           link: {
@@ -2468,7 +2477,7 @@ const defaultColorTokens = {
           },
           muted: {
             bg: ["100", "950"],
-            fg: ["700 70%", "300 70%"]
+            fg: ["700 75%", "300 75%"]
           },
           skeleton: {
             from: ["100", "900"],
@@ -2477,7 +2486,6 @@ const defaultColorTokens = {
         },
         hovered: {
           bg: ["50", "950"],
-          fg: ["700", "300"],
           icon: ["700 70%", "400 70%"]
         },
         pressed: {
@@ -2492,6 +2500,9 @@ const defaultColorTokens = {
         },
         disabled: {
           _hue: "gray",
+          accent: {
+            fg: ["200", "800"]
+          },
           badge: {
             "*": {
               _hue: "gray",
@@ -2501,13 +2512,12 @@ const defaultColorTokens = {
               icon: ["gray/200", "gray/800"]
             }
           },
-          fg: ["200", "800"],
-          muted: {
-            fg: ["200", "800"]
-          },
-          accent: {
+          code: {
+            bg: ["50", "950"],
             fg: ["200", "800"]
           },
+          fg: ["200", "800"],
+          icon: ["200", "800"],
           kbd: {
             bg: ["white", "black"],
             fg: ["200", "800"],
@@ -2516,8 +2526,7 @@ const defaultColorTokens = {
           link: {
             fg: ["200", "800"]
           },
-          code: {
-            bg: ["50", "950"],
+          muted: {
             fg: ["200", "800"]
           }
         }
@@ -2560,15 +2569,8 @@ const defaultColorTokens = {
     "*": {
       "*": {
         _blend: ["multiply", "screen"],
-        bg: ["white", "black"],
-        fg: ["800", "200"],
-        icon: ["700 70%", "300 70%"],
-        avatar: {
-          "*": {
-            _blend: ["screen", "multiply"],
-            bg: ["500", "400"],
-            fg: ["white", "black"]
-          }
+        accent: {
+          fg: ["purple/700 70%", "purple/300 70%"]
         },
         badge: {
           "*": {
@@ -2578,25 +2580,25 @@ const defaultColorTokens = {
             icon: ["500", "500"]
           }
         },
+        bg: ["white", "black"],
         border: ["200", "800"],
-        muted: {
+        code: {
           bg: ["50", "950"],
-          fg: ["700", "300"]
-        },
-        accent: {
-          fg: ["purple/600", "purple/400"]
+          fg: ["600", "400"]
         },
+        fg: ["700", "300"],
+        icon: ["700 75%", "300 75%"],
         kbd: {
           bg: ["white", "black"],
           fg: ["600", "400"],
           border: ["200", "800"]
         },
         link: {
-          fg: ["blue/700", "blue/300"]
+          fg: ["blue/700 70%", "blue/300 70%"]
         },
-        code: {
-          bg: ["50", "950"],
-          fg: ["700", "300"]
+        muted: {
+          bg: ["100", "950"],
+          fg: ["700 75%", "300 75%"]
         },
         skeleton: {
           from: ["100", "900"],
@@ -2611,9 +2613,9 @@ const defaultColorTokens = {
       },
       selected: {
         _blend: ["screen", "multiply"],
-        bg: ["500", "400"],
-        fg: ["white", "black"],
-        icon: ["200", "800"],
+        accent: {
+          fg: ["purple/300", "purple/700"]
+        },
         avatar: {
           "*": {
             _blend: ["multiply", "screen"],
@@ -2623,31 +2625,31 @@ const defaultColorTokens = {
         },
         badge: {
           "*": {
-            bg: ["700", "300"],
-            fg: ["white", "black"],
-            dot: ["300", "700"],
-            icon: ["300", "700"]
+            bg: ["900", "100"],
+            fg: ["400", "600"],
+            dot: ["500", "500"],
+            icon: ["500", "500"]
           }
         },
+        bg: ["500", "400"],
         border: ["500 20%", "400 20%"],
-        muted: {
-          bg: ["950", "50"],
-          fg: ["200", "800"]
-        },
-        accent: {
-          fg: ["purple/200", "purple/800"]
+        code: {
+          bg: ["500 20%", "400 20%"],
+          fg: ["200", "600"]
         },
+        fg: ["white", "black"],
+        icon: ["100 70%", "900 70%"],
         kbd: {
-          bg: ["black/0", "white/0"],
-          fg: ["white", "black"],
-          border: ["gray/700", "gray/300"]
+          bg: ["black", "white"],
+          fg: ["200", "600"],
+          border: ["800", "200"]
         },
         link: {
-          fg: ["blue/200", "blue/800"]
+          fg: ["blue/200", "blue/600"]
         },
-        code: {
-          bg: ["500 20%", "400 20%"],
-          fg: ["300", "700"]
+        muted: {
+          bg: ["950", "50"],
+          fg: ["100 70%", "900 70%"]
         },
         skeleton: {
           from: ["900", "100"],
@@ -2655,20 +2657,36 @@ const defaultColorTokens = {
         }
       },
       disabled: {
-        fg: ["200", "800"],
-        icon: ["200", "800"],
-        muted: {
-          fg: ["200", "800"]
-        },
+        _hue: "gray",
         accent: {
-          fg: ["purple/200", "purple/800"]
+          fg: ["200", "800"]
         },
-        link: {
-          fg: ["blue/200", "blue/800"]
+        badge: {
+          "*": {
+            _hue: "gray",
+            bg: ["50", "950"],
+            fg: ["gray/200", "gray/800"],
+            dot: ["gray/200", "gray/800"],
+            icon: ["gray/200", "gray/800"]
+          }
         },
+        border: ["100", "900"],
         code: {
           bg: ["50", "950"],
           fg: ["200", "800"]
+        },
+        fg: ["200", "800"],
+        icon: ["200", "800"],
+        kbd: {
+          bg: ["white", "black"],
+          fg: ["200", "800"],
+          border: ["100", "900"]
+        },
+        link: {
+          fg: ["200", "800"]
+        },
+        muted: {
+          fg: ["200", "800"]
         }
       }
     },