@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.30

package/src/theme/build/defaults/colorTokens.ts

@@ -0,0 +1,499 @@
+import {ThemeColorTokens} from '../../config'
+
+export const defaultColorTokens: ThemeColorTokens = {
+  avatar: {
+    '*': {
+      _blend: ['screen', 'multiply'],
+      _hue: 'gray',
+      bg: ['500', '400'],
+      fg: ['white', 'black'],
+    },
+    blue: {_hue: 'blue'},
+    purple: {_hue: 'purple'},
+    magenta: {_hue: 'magenta'},
+    red: {_hue: 'red'},
+    orange: {_hue: 'orange'},
+    yellow: {_hue: 'yellow', bg: ['600', '400']},
+    green: {_hue: 'green', bg: ['600', '400']},
+    cyan: {_hue: 'cyan', bg: ['600', '400']},
+  },
+  badge: {
+    '*': {
+      _blend: ['multiply', 'screen'],
+      bg: ['100', '900'],
+      fg: ['800', '200'],
+    },
+  },
+  base: {
+    '*': {
+      _blend: ['multiply', 'screen'],
+      bg: ['50', '950'],
+      fg: ['800', '200'],
+      border: ['200', '900'],
+      focusRing: ['blue/500', 'blue/500'],
+      shadow: {
+        outline: ['500/0.3', '500/0.4'],
+        umbra: ['gray/500/0.1', 'black/0.2'],
+        penumbra: ['gray/500/0.07', 'black/0.14'],
+        ambient: ['gray/500/0.06', 'black/0.12'],
+      },
+      skeleton: {
+        from: ['100', '900'],
+        to: ['100/0.5', '900/0.5'],
+      },
+    },
+    transparent: {
+      bg: ['50', 'black'],
+      fg: ['600', '400'],
+    },
+    default: {
+      bg: ['white', '950'],
+      fg: ['black', '200'],
+    },
+    primary: {
+      _hue: 'blue',
+    },
+    positive: {
+      _hue: 'green',
+    },
+    caution: {
+      _hue: 'yellow',
+    },
+    critical: {
+      _hue: 'red',
+    },
+  },
+  button: {
+    default: {
+      '*': {
+        '*': {
+          _blend: ['screen', 'multiply'],
+          bg: ['500', '400'],
+          bg2: ['900', '50'],
+          fg: ['white', 'black'],
+          icon: ['200', '900'],
+          border: ['500/0', '400/0'],
+          muted: {
+            fg: ['200', '700'],
+          },
+          accent: {
+            fg: ['purple/200', 'purple/700'],
+          },
+          link: {
+            fg: ['blue/200', 'blue/700'],
+          },
+          code: {
+            bg: ['500/0.2', '400/0.2'],
+            fg: ['200', '700'],
+          },
+          skeleton: {
+            from: ['900', '100'],
+            to: ['900/0.5', '100/0.5'],
+          },
+        },
+        hovered: {
+          bg: ['600', '300'],
+          border: ['600/0', '300/0'],
+        },
+        pressed: {
+          bg: ['700', '200'],
+        },
+        selected: {
+          bg: ['700', '200'],
+        },
+        disabled: {
+          _hue: 'gray',
+          bg: ['200', '900'],
+          icon: ['white', 'black'],
+        },
+      },
+      default: {
+        '*': {
+          bg: ['800', '200'],
+        },
+        hovered: {
+          bg: ['900', '100'],
+        },
+        pressed: {
+          bg: ['black', 'white'],
+        },
+        selected: {
+          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'],
+          bg: ['50', '950'],
+          bg2: ['100', '950'],
+          fg: ['700', '400'],
+          icon: ['600', '500'],
+          border: ['200', '900'],
+          muted: {
+            fg: ['700/0.6', '400/0.6'],
+          },
+          accent: {
+            fg: ['purple/700/0.6', 'purple/400/0.8'],
+          },
+          link: {
+            fg: ['blue/700/0.6', 'blue/400/0.8'],
+          },
+          code: {
+            bg: ['500/0.1', '400/0.1'],
+            fg: ['700/0.6', '400/0.6'],
+          },
+          skeleton: {
+            from: ['100', '900'],
+            to: ['100/0.5', '900/0.5'],
+          },
+        },
+        hovered: {
+          bg: ['100', '900'],
+          fg: ['700', '400'],
+        },
+        pressed: {
+          bg: ['100', '900'],
+          fg: ['800', '300'],
+        },
+        selected: {
+          bg: ['100', '900'],
+          fg: ['800', '300'],
+        },
+        disabled: {
+          _hue: 'gray',
+          fg: ['200', '900'],
+          icon: ['200', '900'],
+          border: ['100', '950'],
+          muted: {
+            fg: ['200/0.6', '900/0.6'],
+          },
+          accent: {
+            fg: ['200/0.6', '900/0.6'],
+          },
+          link: {
+            fg: ['200/0.6', '900/0.6'],
+          },
+          code: {
+            bg: ['50/0.5', '950/0.5'],
+            fg: ['200/0.6', '900/0.6'],
+          },
+        },
+      },
+      critical: {
+        '*': {
+          border: ['500/0.2', '900'],
+        },
+      },
+    },
+    bleed: {
+      '*': {
+        '*': {
+          _blend: ['multiply', 'screen'],
+          bg: ['white', 'black'],
+          bg2: ['100', '950'],
+          fg: ['700', '400'],
+          icon: ['600', '500'],
+          border: ['white/0', 'black/0'],
+          muted: {
+            fg: ['600', '300'],
+          },
+          accent: {
+            fg: ['purple/600', 'purple/300'],
+          },
+          link: {
+            fg: ['blue/600', 'blue/300'],
+          },
+          code: {
+            bg: ['100', '950'],
+            fg: ['600', '300'],
+          },
+          skeleton: {
+            from: ['100', '900'],
+            to: ['100/0.5', '900/0.5'],
+          },
+        },
+        hovered: {
+          bg: ['50', '950'],
+          fg: ['700', '400'],
+        },
+        pressed: {
+          bg: ['100', '900'],
+          fg: ['800', '300'],
+        },
+        selected: {
+          bg: ['100', '900'],
+          fg: ['800', '300'],
+        },
+        disabled: {
+          _hue: 'gray',
+          fg: ['200', '900'],
+          muted: {
+            fg: ['200/0.6', '900/0.6'],
+          },
+          accent: {
+            fg: ['200/0.6', '900/0.6'],
+          },
+          link: {
+            fg: ['200/0.6', '900/0.6'],
+          },
+          code: {
+            bg: ['50/0.5', '950/0.5'],
+            fg: ['200/0.6', '900/0.6'],
+          },
+        },
+      },
+    },
+  },
+  card: {
+    '*': {
+      _blend: ['multiply', 'screen'],
+      bg: ['white', 'black'],
+      bg2: ['100', '950'],
+      fg: ['black', 'white'],
+      icon: ['500', '400'],
+      border: ['200', '900'],
+      muted: {
+        fg: ['gray/600', 'gray/400'],
+      },
+      accent: {
+        fg: ['purple/600', 'purple/300'],
+      },
+      link: {
+        fg: ['blue/700', 'blue/300'],
+      },
+      code: {
+        bg: ['100', '950'],
+        fg: ['gray/600', 'gray/400'],
+      },
+      skeleton: {
+        from: ['100', '900'],
+        to: ['100/0.5', '900/0.5'],
+      },
+    },
+    hovered: {
+      bg: ['100', '950'],
+    },
+    pressed: {
+      bg: ['100', '900'],
+    },
+    selected: {
+      _blend: ['screen', 'multiply'],
+      bg: ['500', '400'],
+      border: ['800', '200'],
+      bg2: ['950', '50'],
+      fg: ['white', 'black'],
+    },
+    disabled: {
+      _hue: 'gray',
+      fg: ['200', '900'],
+      icon: ['200', '800'],
+      border: ['100', '900/0.5'],
+      muted: {
+        fg: ['200/0.5', '800/0.5'],
+      },
+      accent: {
+        fg: ['200/0.6', '800/0.6'],
+      },
+      link: {
+        fg: ['200/0.6', '800/0.6'],
+      },
+      code: {
+        bg: ['100/0.6', '950/0.6'],
+        fg: ['200/0.6', '800/0.6'],
+      },
+    },
+  },
+  input: {
+    '*': {
+      '*': {
+        _blend: ['multiply', 'screen'],
+        bg: ['white', 'black'],
+        bg2: ['50', '950'],
+        fg: ['black', '200'],
+        border: ['200', '900'],
+        placeholder: ['400', '600/0.5'],
+      },
+
+      hovered: {
+        border: ['300', '800'],
+      },
+
+      readOnly: {
+        border: ['200/0', '900/0'],
+        bg: ['100', '950'],
+        fg: ['800', '200'],
+      },
+
+      disabled: {
+        fg: ['200', '800'],
+        border: ['100', '900'],
+      },
+    },
+    invalid: {
+      '*': {
+        _hue: 'red',
+        bg: ['100', '950'],
+      },
+    },
+  },
+  kbd: {
+    _blend: ['multiply', 'screen'],
+    bg: ['white', 'black'],
+    fg: ['600', '400'],
+    border: ['200', '900'],
+  },
+  selectable: {
+    '*': {
+      '*': {
+        _blend: ['multiply', 'screen'],
+        bg: ['white', 'black'],
+        bg2: ['50', '950'],
+        fg: ['900', '200'],
+        icon: ['600', '400'],
+        border: ['200', '900'],
+        muted: {
+          fg: ['700', '400'],
+        },
+        accent: {
+          fg: ['purple/600', 'purple/400'],
+        },
+        link: {
+          fg: ['blue/700', 'blue/400'],
+        },
+        code: {
+          bg: ['100', '950'],
+          fg: ['700', '400'],
+        },
+        skeleton: {
+          from: ['100', '900'],
+          to: ['100/0.5', '900/0.5'],
+        },
+      },
+      hovered: {
+        bg: ['50', '950'],
+      },
+      pressed: {
+        bg: ['100', '900'],
+      },
+      selected: {
+        _blend: ['screen', 'multiply'],
+        bg: ['500', '400'],
+        bg2: ['900', '50'],
+        fg: ['white', 'black'],
+        icon: ['200', '900'],
+        border: ['500/0.2', '400/0.2'],
+        muted: {
+          fg: ['200', '700'],
+        },
+        accent: {
+          fg: ['purple/200', 'purple/700'],
+        },
+        link: {
+          fg: ['blue/200', 'blue/700'],
+        },
+        code: {
+          bg: ['500/0.2', '400/0.2'],
+          fg: ['200', '700'],
+        },
+        skeleton: {
+          from: ['900', '100'],
+          to: ['900/0.5', '100/0.5'],
+        },
+      },
+      disabled: {
+        fg: ['200', '800'],
+        icon: ['200', '800'],
+        muted: {
+          fg: ['200', '800/0.5'],
+        },
+        accent: {
+          fg: ['purple/200', 'purple/800/0.5'],
+        },
+        link: {
+          fg: ['blue/200', 'blue/800/0.5'],
+        },
+        code: {
+          bg: ['100', '950/0.5'],
+          fg: ['200', '800/0.5'],
+        },
+      },
+    },
+    default: {
+      selected: {
+        _hue: 'blue',
+        // bg: ['500', '400'],
+      },
+    },
+    critical: {
+      disabled: {
+        bg: ['50/0.5', '950/0.5'],
+      },
+    },
+  },
+  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'],
+  },
+}

package/src/theme/{studioTheme/theme.ts → build/defaults/config.ts}

@@ -1,11 +1,9 @@
-import {RootTheme} from '../types'
-import {color} from './color'
-import {fonts} from './fonts'
+import {RootTheme} from '../../system'
 
-/**
- * @public
- */
-export const studioTheme: RootTheme = {
+const BORDER_WIDTH = 1
+const OUTLINE_WIDTH = 0.5
+
+export const defaultThemeConfig: Omit<RootTheme, 'color' | 'fonts'> = {
   avatar: {
     sizes: [
       {distance: -3, size: 25},
@@ -16,30 +14,34 @@ export const studioTheme: RootTheme = {
   },
   button: {
     textWeight: 'medium',
+    border: {width: BORDER_WIDTH},
     focusRing: {offset: -1, width: 2},
   },
   card: {
+    border: {width: BORDER_WIDTH},
     focusRing: {offset: -1, width: 1},
+    shadow: {outline: OUTLINE_WIDTH},
   },
-  color,
-  container: [320, 640, 960, 1280, 1600, 1920],
+  container: [480, 640, 960, 1280, 1600, 1920],
   focusRing: {
     offset: 1,
     width: 2,
   },
-  fonts,
   media: [360, 600, 900, 1200, 1800, 2400],
   radius: [0, 1, 3, 6, 9, 12, 21],
   shadows: [
     null,
     {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 0]},
-    {umbra: [0, 3, 5, -1], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 0]},
+    {umbra: [0, 3, 5, -2], penumbra: [0, 6, 10, 0], ambient: [0, 1, 18, 1]},
     {umbra: [0, 7, 8, -4], penumbra: [0, 12, 17, 2], ambient: [0, 5, 22, 4]},
     {umbra: [0, 9, 11, -5], penumbra: [0, 18, 28, 2], ambient: [0, 7, 34, 6]},
     {umbra: [0, 11, 15, -7], penumbra: [0, 24, 38, 3], ambient: [0, 9, 46, 8]},
   ],
   space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
   input: {
+    border: {
+      width: BORDER_WIDTH,
+    },
     checkbox: {
       size: 17,
       focusRing: {offset: -1, width: 1},
@@ -50,16 +52,13 @@ export const studioTheme: RootTheme = {
       focusRing: {offset: -1, width: 1},
     },
     switch: {
-      width: 21,
-      height: 13,
+      width: 25,
+      height: 17,
       padding: 2,
       transitionDurationMs: 150,
       transitionTimingFunction: 'ease-out',
       focusRing: {offset: 1, width: 1},
     },
-    border: {
-      width: 1,
-    },
     select: {
       focusRing: {offset: -1, width: 1},
     },
@@ -67,16 +66,16 @@ export const studioTheme: RootTheme = {
       focusRing: {offset: -1, width: 1},
     },
   },
-  // styles: {
-  //   button: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  //   card: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  // },
+  styles: {
+    button: {
+      root: {
+        transition: 'background-color 100ms,border-color 100ms,color 100ms',
+      },
+    },
+    // card: {
+    //   root: {
+    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
+    //   },
+    // },
+  },
 }