@sanity/ui 2.0.0-beta.6 → 2.0.0-beta.8

package/src/theme/defaults/colorTokens.ts

@@ -13,9 +13,6 @@ export const defaultColorTokens: ThemeColorTokens = {
           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: {
@@ -26,19 +23,19 @@ export const defaultColorTokens: ThemeColorTokens = {
           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: ['700', '300'],
+        fg: ['600', '300'],
       },
       fg: ['800', '200'],
       focusRing: ['blue/500', 'blue/500'],
@@ -48,11 +45,11 @@ export const defaultColorTokens: ThemeColorTokens = {
         border: ['200', '800'],
       },
       link: {
-        fg: ['blue/700', 'blue/300'],
+        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'],
@@ -62,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: {
@@ -101,7 +93,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         '*': {
           _blend: ['screen', 'multiply'],
           accent: {
-            fg: ['purple/200', 'purple/700'],
+            fg: ['purple/300', 'purple/700'],
           },
           badge: {
             '*': {
@@ -114,8 +106,8 @@ export const defaultColorTokens: ThemeColorTokens = {
           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'],
@@ -128,23 +120,23 @@ export const defaultColorTokens: ThemeColorTokens = {
             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',
@@ -168,6 +160,10 @@ export const defaultColorTokens: ThemeColorTokens = {
       default: {
         '*': {
           bg: ['800', '200'],
+          muted: {
+            bg: ['950', '50'],
+            fg: ['400', '600'],
+          },
         },
         hovered: {
           bg: ['900', '100'],
@@ -179,41 +175,13 @@ 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/0.6', 'purple/400/0.8'],
+            fg: ['purple/700 60%', 'purple/300 70%'],
           },
           badge: {
             '*': {
@@ -226,10 +194,10 @@ export const defaultColorTokens: ThemeColorTokens = {
           bg: ['50', '950'],
           border: ['100', '900'],
           code: {
-            bg: ['500/0.1', '400/0.1'],
-            fg: ['700/0.6', '400/0.6'],
+            bg: ['500 10%', '400 10%'],
+            fg: ['700 60%', '400 60%'],
           },
-          fg: ['700', '400'],
+          fg: ['600', '400'],
           icon: ['600', '500'],
           kbd: {
             bg: ['white', 'black'],
@@ -237,15 +205,15 @@ export const defaultColorTokens: ThemeColorTokens = {
             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'],
+            fg: ['700 60%', '300 60%'],
           },
           skeleton: {
             from: ['100', '900'],
-            to: ['100/0.5', '900/0.5'],
+            to: ['100 50%', '900 50%'],
           },
         },
         hovered: {
@@ -296,12 +264,12 @@ export const defaultColorTokens: ThemeColorTokens = {
       },
       positive: {
         '*': {
-          border: ['600/0.2', '800'],
+          border: ['600 20%', '800'],
         },
       },
       caution: {
         '*': {
-          border: ['600/0.2', '800'],
+          border: ['600 20%', '800'],
         },
       },
     },
@@ -310,7 +278,7 @@ export const defaultColorTokens: ThemeColorTokens = {
         '*': {
           _blend: ['multiply', 'screen'],
           accent: {
-            fg: ['purple/700/0.7', 'purple/300/0.7'],
+            fg: ['purple/700 70%', 'purple/300 70%'],
           },
           badge: {
             '*': {
@@ -327,38 +295,38 @@ export const defaultColorTokens: ThemeColorTokens = {
             fg: ['600', '300'],
           },
           fg: ['700', '300'],
-          icon: ['700/0.7', '300/0.7'],
+          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%'],
           },
           muted: {
             bg: ['100', '950'],
-            fg: ['700/0.7', '300/0.7'],
+            fg: ['700 70%', '300 70%'],
           },
           skeleton: {
             from: ['100', '900'],
-            to: ['100/0.5', '900/0.5'],
+            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',
@@ -404,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'],
@@ -435,20 +400,16 @@ 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: {
           '*': {
-            // _blend: ['multiply', 'screen'],
             bg: ['100', '900'],
             fg: ['600', '400'],
             dot: ['500', '500'],
@@ -472,12 +433,12 @@ export const defaultColorTokens: ThemeColorTokens = {
           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'],
+          to: ['100 50%', '900 50%'],
         },
       },
       hovered: {
@@ -497,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: {
@@ -527,86 +484,76 @@ 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/600', 'purple/400'],
-    attrName: ['green/700', 'green/400'],
-    attrValue: ['yellow/700', 'yellow/400'],
-    attribute: ['yellow/700', 'yellow/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/700', 'yellow/400'],
-    char: ['yellow/700', 'yellow/400'],
-    class: ['orange/700', 'orange/400'],
-    className: ['cyan/700', 'cyan/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/700', 'green/400'],
+    function: ['green/600', 'green/400'],
     hexcode: ['blue/600', 'blue/400'],
     id: ['purple/600', 'purple/400'],
     important: ['purple/600', 'purple/400'],
-    inserted: ['yellow/700', 'yellow/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/700', 'yellow/400'],
-    pseudoElement: ['yellow/700', 'yellow/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/700', 'yellow/400'],
+    string: ['yellow/600', 'yellow/400'],
     symbol: ['purple/600', 'purple/400'],
     tag: ['red/600', 'red/400'],
-    unit: ['orange/700', 'orange/400'],
+    unit: ['orange/600', 'orange/400'],
     url: ['red/600', 'red/400'],
     variable: ['red/600', 'red/400'],
   },

package/src/theme/defaults/config.ts

@@ -57,7 +57,7 @@ export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
     switch: {
       width: 25,
       height: 17,
-      padding: 2,
+      padding: 5,
       transitionDurationMs: 150,
       transitionTimingFunction: 'ease-out',
       focusRing: {offset: 1, width: 1},