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

package/src/theme/defaults/colorTokens.ts

@@ -4,36 +4,38 @@ export const defaultColorTokens: ThemeColorTokens = {
   base: {
     '*': {
       _blend: ['multiply', 'screen'],
+      accent: {
+        fg: ['purple/600', 'purple/400'],
+      },
       avatar: {
         '*': {
           _blend: ['screen', 'multiply'],
           bg: ['500', '400'],
           fg: ['white', 'black'],
         },
-        yellow: {bg: ['600', '400']},
-        green: {bg: ['600', '400']},
-        cyan: {bg: ['600', '400']},
       },
       backdrop: ['gray/200/0.2', 'black/0.5'],
       badge: {
         '*': {
           bg: ['100', '900'],
           fg: ['600', '400'],
+          icon: ['500', '500'],
+          dot: ['500', '500'],
         },
         positive: {
-          bg: ['200/0.6', '900'],
-          fg: ['700', '500'],
+          bg: ['200 50%', '900'],
+          fg: ['600', '500'],
         },
         caution: {
-          bg: ['200/0.7', '900'],
-          fg: ['700', '500'],
+          bg: ['200 50%', '900'],
+          fg: ['600', '500'],
         },
       },
       bg: ['50', '950'],
       border: ['200', '800'],
       code: {
         bg: ['50', '950'],
-        fg: ['600', '400'],
+        fg: ['600', '300'],
       },
       fg: ['800', '200'],
       focusRing: ['blue/500', 'blue/500'],
@@ -43,11 +45,11 @@ export const defaultColorTokens: ThemeColorTokens = {
         border: ['200', '800'],
       },
       link: {
-        fg: ['blue/600', 'blue/400'],
+        fg: ['blue/600', 'blue/300'],
       },
       muted: {
         bg: ['50', '950'],
-        fg: ['600', '400'],
+        fg: ['700 70%', '300 70%'],
       },
       shadow: {
         outline: ['500/0.3', '500/0.4'],
@@ -57,38 +59,33 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
       skeleton: {
         from: ['100', '900'],
-        to: ['100/0.5', '900/0.5'],
+        to: ['100 50%', '900 50%'],
       },
     },
     transparent: {
       bg: ['50', 'black'],
       fg: ['600', '400'],
+      muted: {
+        fg: ['600', '400'],
+      },
     },
     default: {
       bg: ['white', '950'],
       fg: ['black', '200'],
+      muted: {
+        fg: ['600', '400'],
+      },
     },
-    primary: {
-      _hue: 'blue',
-    },
+    primary: {_hue: 'blue'},
     positive: {
       _hue: 'green',
-      shadow: {
-        outline: ['600/0.3', '500/0.25'],
-      },
+      shadow: {outline: ['500/0.4', '500/0.4']},
     },
     caution: {
       _hue: 'yellow',
-      shadow: {
-        outline: ['600/0.3', '500/0.25'],
-      },
-    },
-    critical: {
-      _hue: 'red',
-      shadow: {
-        outline: ['500/0.3', '500/0.3'],
-      },
+      shadow: {outline: ['600/0.3', '500/0.4']},
     },
+    critical: {_hue: 'red'},
   },
   button: {
     default: {
@@ -96,58 +93,77 @@ export const defaultColorTokens: ThemeColorTokens = {
         '*': {
           _blend: ['screen', 'multiply'],
           accent: {
-            fg: ['purple/200', 'purple/700'],
+            fg: ['purple/300', 'purple/700'],
           },
           badge: {
             '*': {
-              dot: ['300', '700'],
-              icon: ['600', '400'],
+              bg: ['900', '100'],
+              fg: ['400', '600'],
+              dot: ['500', '500'],
+              icon: ['500', '500'],
             },
           },
           bg: ['500', '400'],
           border: ['500/0', '400/0'],
           code: {
-            bg: ['500/0.2', '400/0.2'],
-            fg: ['200', '700'],
+            bg: ['500 20%', '400 20%'],
+            fg: ['200', '600'],
           },
           fg: ['white', 'black'],
           icon: ['200', '800'],
           kbd: {
-            bg: ['900', '50'],
-            fg: ['white', 'black'],
+            bg: ['black', 'white'],
+            fg: ['200', '800'],
             border: ['800', '200'],
           },
           link: {
             fg: ['blue/200', 'blue/700'],
           },
           muted: {
-            bg: ['900', '50'],
-            fg: ['200', '700'],
+            bg: ['950', '50'],
+            fg: ['100 70%', '600'],
           },
           skeleton: {
             from: ['900', '100'],
-            to: ['900/0.5', '100/0.5'],
+            to: ['900 50%', '100 50%'],
           },
         },
         hovered: {
-          bg: ['600', '300'],
-          border: ['600/0', '300/0'],
+          bg: ['700', '300'],
+          border: ['700/0', '300/0'],
         },
         pressed: {
-          bg: ['700', '200'],
+          bg: ['700', '300'],
         },
         selected: {
-          bg: ['700', '200'],
+          bg: ['700', '300'],
         },
         disabled: {
           _hue: 'gray',
+          badge: {
+            '*': {
+              bg: ['gray/700', 'gray/300'],
+              fg: ['white', 'black'],
+              dot: ['white', 'black'],
+              icon: ['white', 'black'],
+            },
+          },
           bg: ['200', '800'],
           icon: ['white', 'black'],
+          kbd: {
+            bg: ['black', 'white'],
+            fg: ['white', 'black'],
+            border: ['700', '300'],
+          },
         },
       },
       default: {
         '*': {
           bg: ['800', '200'],
+          muted: {
+            bg: ['950', '50'],
+            fg: ['400', '600'],
+          },
         },
         hovered: {
           bg: ['900', '100'],
@@ -159,66 +175,45 @@ export const defaultColorTokens: ThemeColorTokens = {
           bg: ['black', 'white'],
         },
       },
-      positive: {
-        '*': {
-          bg: ['600', '400'],
-        },
-        hovered: {
-          bg: ['700', '300'],
-        },
-        pressed: {
-          bg: ['800', '200'],
-        },
-        selected: {
-          bg: ['800', '200'],
-        },
-      },
-      caution: {
-        '*': {
-          bg: ['600', '400'],
-        },
-        hovered: {
-          bg: ['700', '300'],
-        },
-        pressed: {
-          bg: ['800', '200'],
-        },
-        selected: {
-          bg: ['800', '200'],
-        },
-      },
     },
     ghost: {
       '*': {
         '*': {
           _blend: ['multiply', 'screen'],
+          accent: {
+            fg: ['purple/700 60%', 'purple/300 70%'],
+          },
+          badge: {
+            '*': {
+              bg: ['100', '900'],
+              fg: ['600', '400'],
+              dot: ['500', '500'],
+              icon: ['500', '500'],
+            },
+          },
           bg: ['50', '950'],
-          fg: ['700', '400'],
-          icon: ['600', '500'],
           border: ['100', '900'],
-          accent: {
-            fg: ['purple/700/0.6', 'purple/400/0.8'],
+          code: {
+            bg: ['500 10%', '400 10%'],
+            fg: ['700 60%', '400 60%'],
+          },
+          fg: ['600', '400'],
+          icon: ['600', '500'],
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['600', '400'],
+            border: ['200', '800'],
           },
           link: {
-            fg: ['blue/700/0.6', 'blue/400/0.8'],
+            fg: ['blue/700 60%', 'blue/300 60%'],
           },
           muted: {
             bg: ['100', '950'],
-            fg: ['700/0.6', '400/0.6'],
-          },
-          code: {
-            bg: ['500/0.1', '400/0.1'],
-            fg: ['700/0.6', '400/0.6'],
+            fg: ['700 60%', '300 60%'],
           },
           skeleton: {
             from: ['100', '900'],
-            to: ['100/0.5', '900/0.5'],
-          },
-          badge: {
-            '*': {
-              dot: ['300', '700'],
-              icon: ['600', '400'],
-            },
+            to: ['100 50%', '900 50%'],
           },
         },
         hovered: {
@@ -235,32 +230,46 @@ export const defaultColorTokens: ThemeColorTokens = {
         },
         disabled: {
           _hue: 'gray',
-          fg: ['200', '800'],
-          icon: ['200', '800'],
+          accent: {
+            fg: ['200', '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'],
-          muted: {
-            fg: ['200/0.6', '900/0.6'],
+          code: {
+            bg: ['50', '950'],
+            fg: ['200', '800'],
           },
-          accent: {
-            fg: ['200/0.6', '900/0.6'],
+          fg: ['200', '800'],
+          icon: ['200', '800'],
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['200', '800'],
+            border: ['100', '900'],
           },
           link: {
-            fg: ['200/0.6', '900/0.6'],
+            fg: ['200', '800'],
           },
-          code: {
-            bg: ['50/0.5', '950/0.5'],
-            fg: ['200/0.6', '900/0.6'],
+          muted: {
+            fg: ['200', '800'],
           },
         },
       },
       positive: {
         '*': {
-          border: ['600/0.2', '800'],
+          border: ['600 20%', '800'],
         },
       },
       caution: {
         '*': {
-          border: ['600/0.2', '800'],
+          border: ['600 20%', '800'],
         },
       },
     },
@@ -268,65 +277,86 @@ export const defaultColorTokens: ThemeColorTokens = {
       '*': {
         '*': {
           _blend: ['multiply', 'screen'],
+          accent: {
+            fg: ['purple/700 70%', 'purple/300 70%'],
+          },
+          badge: {
+            '*': {
+              bg: ['100', '900'],
+              fg: ['600', '400'],
+              dot: ['500', '500'],
+              icon: ['500', '500'],
+            },
+          },
           bg: ['white', 'black'],
-          fg: ['700', '300'],
-          icon: ['700/0.7', '300/0.7'],
           border: ['white/0', 'black/0'],
-          muted: {
+          code: {
             bg: ['100', '950'],
-            fg: ['700/0.7', '300/0.7'],
+            fg: ['600', '300'],
           },
-          accent: {
-            fg: ['purple/700/0.7', 'purple/300/0.7'],
+          fg: ['700', '300'],
+          icon: ['700 70%', '300 70%'],
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['600', '400'],
+            border: ['200', '800'],
           },
           link: {
-            fg: ['blue/700/0.7', 'blue/300/0.7'],
+            fg: ['blue/700 70%', 'blue/300 70%'],
           },
-          code: {
+          muted: {
             bg: ['100', '950'],
-            fg: ['600', '300'],
+            fg: ['700 70%', '300 70%'],
           },
           skeleton: {
             from: ['100', '900'],
-            to: ['100/0.5', '900/0.5'],
-          },
-          badge: {
-            '*': {
-              dot: ['300', '700'],
-              icon: ['600', '400'],
-            },
+            to: ['100 50%', '900 50%'],
           },
         },
         hovered: {
           bg: ['50', '950'],
           fg: ['700', '300'],
-          icon: ['700/0.7', '400/0.7'],
+          icon: ['700 70%', '400 70%'],
         },
         pressed: {
           bg: ['100', '900'],
           fg: ['800', '200'],
-          icon: ['800/0.7', '200/0.7'],
+          icon: ['800 70%', '200 70%'],
         },
         selected: {
           bg: ['100', '900'],
           fg: ['800', '200'],
-          icon: ['800/0.7', '200/0.7'],
+          icon: ['800 60%', '200 60%'],
         },
         disabled: {
           _hue: 'gray',
+          badge: {
+            '*': {
+              _hue: 'gray',
+              bg: ['50', '950'],
+              fg: ['gray/200', 'gray/800'],
+              dot: ['gray/200', 'gray/800'],
+              icon: ['gray/200', 'gray/800'],
+            },
+          },
           fg: ['200', '800'],
           muted: {
-            fg: ['200/0.6', '900/0.6'],
+            fg: ['200', '800'],
           },
           accent: {
-            fg: ['200/0.6', '900/0.6'],
+            fg: ['200', '800'],
+          },
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['200', '800'],
+            border: ['100', '900'],
           },
           link: {
-            fg: ['200/0.6', '900/0.6'],
+            fg: ['200', '800'],
           },
           code: {
-            bg: ['50/0.5', '950/0.5'],
-            fg: ['200/0.6', '900/0.6'],
+            bg: ['50', '950'],
+            fg: ['200', '800'],
           },
         },
       },
@@ -342,19 +372,16 @@ export const defaultColorTokens: ThemeColorTokens = {
         muted: {
           bg: ['50', '950'],
         },
-        placeholder: ['400', '600/0.5'],
+        placeholder: ['400', '600 50%'],
       },
-
       hovered: {
-        border: ['300', '800'],
+        border: ['300', '700'],
       },
-
       readOnly: {
-        border: ['200/0', '900/0'],
-        bg: ['100', '950'],
+        bg: ['50', '950'],
+        border: ['200', '800'],
         fg: ['800', '200'],
       },
-
       disabled: {
         fg: ['200', '800'],
         border: ['100', '900'],
@@ -373,16 +400,21 @@ export const defaultColorTokens: ThemeColorTokens = {
         _blend: ['multiply', 'screen'],
         bg: ['white', 'black'],
         fg: ['800', '200'],
-        icon: ['700/0.7', '300/0.7'],
+        icon: ['700 70%', '300 70%'],
         avatar: {
           '*': {
             _blend: ['screen', 'multiply'],
             bg: ['500', '400'],
             fg: ['white', 'black'],
           },
-          //   yellow: {bg: ['600', '400']},
-          //   green: {bg: ['600', '400']},
-          //   cyan: {bg: ['600', '400']},
+        },
+        badge: {
+          '*': {
+            bg: ['100', '900'],
+            fg: ['600', '400'],
+            dot: ['500', '500'],
+            icon: ['500', '500'],
+          },
         },
         border: ['200', '800'],
         muted: {
@@ -392,31 +424,21 @@ export const defaultColorTokens: ThemeColorTokens = {
         accent: {
           fg: ['purple/600', 'purple/400'],
         },
+        kbd: {
+          bg: ['white', 'black'],
+          fg: ['600', '400'],
+          border: ['200', '800'],
+        },
         link: {
           fg: ['blue/700', 'blue/300'],
         },
         code: {
-          bg: ['100', '950'],
+          bg: ['50', '950'],
           fg: ['700', '300'],
         },
         skeleton: {
           from: ['100', '900'],
-          to: ['100/0.5', '900/0.5'],
-        },
-        badge: {
-          '*': {
-            // _blend: ['multiply', 'screen'],
-            bg: ['100', '900'],
-            fg: ['600', '200'],
-            dot: ['300', '700'],
-            icon: ['600', '400'],
-          },
-        },
-        kbd: {
-          // _blend: ['multiply', 'screen'],
-          bg: ['white', 'black'],
-          fg: ['600', '400'],
-          border: ['200', '800'],
+          to: ['100 50%', '900 50%'],
         },
       },
       hovered: {
@@ -436,22 +458,18 @@ export const defaultColorTokens: ThemeColorTokens = {
             bg: ['white', 'black'],
             fg: ['black', 'white'],
           },
-          // magenta: {_hue: 'green'},
-          // yellow: {bg: ['600', '400']},
-          // green: {bg: ['600', '400']},
-          // cyan: {bg: ['600', '400']},
         },
         badge: {
           '*': {
-            // _blend: ['multiply', 'screen'],
-            // _blend: ['screen', 'multiply'],
             bg: ['700', '300'],
             fg: ['white', 'black'],
+            dot: ['300', '700'],
+            icon: ['300', '700'],
           },
         },
-        border: ['500/0.2', '400/0.2'],
+        border: ['500 20%', '400 20%'],
         muted: {
-          bg: ['900', '50'],
+          bg: ['950', '50'],
           fg: ['200', '800'],
         },
         accent: {
@@ -466,87 +484,77 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['blue/200', 'blue/800'],
         },
         code: {
-          bg: ['500/0.2', '400/0.2'],
-          fg: ['200', '700'],
+          bg: ['500 20%', '400 20%'],
+          fg: ['300', '700'],
         },
         skeleton: {
           from: ['900', '100'],
-          to: ['900/0.5', '100/0.5'],
-        },
-        // badge: {
-        //   '*': {
-        //     _blend: ['multiply', 'screen'],
-        //     bg: ['900', '100'],
-        //     fg: ['white', 'black'],
-        //     dot: ['700', '300'],
-        //     icon: ['400', '600'],
-        //   },
-        // },
+          to: ['900 50%', '100 50%'],
+        },
       },
       disabled: {
         fg: ['200', '800'],
         icon: ['200', '800'],
         muted: {
-          fg: ['200', '800/0.5'],
+          fg: ['200', '800'],
         },
         accent: {
-          fg: ['purple/200', 'purple/800/0.5'],
+          fg: ['purple/200', 'purple/800'],
         },
         link: {
-          fg: ['blue/200', 'blue/800/0.5'],
+          fg: ['blue/200', 'blue/800'],
         },
         code: {
-          bg: ['100', '950/0.5'],
-          fg: ['200', '800/0.5'],
+          bg: ['50', '950'],
+          fg: ['200', '800'],
         },
       },
     },
     default: {
       selected: {
         _hue: 'blue',
-        // bg: ['500', '400'],
       },
     },
     critical: {
       disabled: {
-        bg: ['50/0.5', '950/0.5'],
+        bg: ['50 50%', '950 50%'],
       },
     },
   },
   syntax: {
-    atrule: ['purple/700', 'purple/400'],
-    attrName: ['green/700', 'green/400'],
-    attrValue: ['yellow/700', 'yellow/400'],
-    attribute: ['yellow/700', 'yellow/400'],
-    boolean: ['purple/700', 'purple/400'],
-    builtin: ['purple/700', 'purple/400'],
-    cdata: ['yellow/700', 'yellow/400'],
-    char: ['yellow/700', 'yellow/400'],
-    class: ['orange/700', 'orange/400'],
-    className: ['cyan/700', 'cyan/400'],
-    comment: ['gray/700/0.5', 'gray/400/0.5'],
-    constant: ['purple/700', 'purple/400'],
-    deleted: ['red/700', 'red/400'],
-    entity: ['red/700', 'red/400'],
-    function: ['green/700', 'green/400'],
-    hexcode: ['blue/700', 'blue/400'],
-    id: ['purple/700', 'purple/400'],
-    important: ['purple/700', 'purple/400'],
-    inserted: ['yellow/700', 'yellow/400'],
-    keyword: ['magenta/700', 'magenta/400'],
-    number: ['purple/700', 'purple/400'],
-    operator: ['magenta/700', 'magenta/400'],
-    property: ['blue/700', 'blue/400'],
-    pseudoClass: ['yellow/700', 'yellow/400'],
-    pseudoElement: ['yellow/700', 'yellow/400'],
-    punctuation: ['gray/700', 'gray/400'],
-    regex: ['blue/700', 'blue/400'],
-    selector: ['red/700', 'red/400'],
-    string: ['yellow/700', 'yellow/400'],
-    symbol: ['purple/700', 'purple/400'],
-    tag: ['red/700', 'red/400'],
-    unit: ['orange/700', 'orange/400'],
-    url: ['red/700', 'red/400'],
-    variable: ['red/700', 'red/400'],
+    atrule: ['purple/600', 'purple/400'],
+    attrName: ['green/600', 'green/400'],
+    attrValue: ['yellow/600', 'yellow/400'],
+    attribute: ['yellow/600', 'yellow/400'],
+    boolean: ['purple/600', 'purple/400'],
+    builtin: ['purple/600', 'purple/400'],
+    cdata: ['yellow/600', 'yellow/400'],
+    char: ['yellow/600', 'yellow/400'],
+    class: ['orange/600', 'orange/400'],
+    className: ['cyan/600', 'cyan/400'],
+    comment: ['gray/400', 'gray/600'],
+    constant: ['purple/600', 'purple/400'],
+    deleted: ['red/600', 'red/400'],
+    entity: ['red/600', 'red/400'],
+    function: ['green/600', 'green/400'],
+    hexcode: ['blue/600', 'blue/400'],
+    id: ['purple/600', 'purple/400'],
+    important: ['purple/600', 'purple/400'],
+    inserted: ['yellow/600', 'yellow/400'],
+    keyword: ['magenta/600', 'magenta/400'],
+    number: ['purple/600', 'purple/400'],
+    operator: ['magenta/600', 'magenta/400'],
+    property: ['blue/600', 'blue/400'],
+    pseudoClass: ['yellow/600', 'yellow/400'],
+    pseudoElement: ['yellow/600', 'yellow/400'],
+    punctuation: ['gray/600', 'gray/400'],
+    regex: ['blue/600', 'blue/400'],
+    selector: ['red/600', 'red/400'],
+    string: ['yellow/600', 'yellow/400'],
+    symbol: ['purple/600', 'purple/400'],
+    tag: ['red/600', 'red/400'],
+    unit: ['orange/600', 'orange/400'],
+    url: ['red/600', 'red/400'],
+    variable: ['red/600', 'red/400'],
   },
 }