@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/theme/defaults/colorTokens.ts

@@ -0,0 +1,560 @@
+import {ThemeColorTokens} from '../config'
+
+export const defaultColorTokens: ThemeColorTokens = {
+  base: {
+    '*': {
+      _blend: ['multiply', 'screen'],
+      accent: {
+        fg: ['purple/600', 'purple/400'],
+      },
+      avatar: {
+        '*': {
+          _blend: ['screen', 'multiply'],
+          bg: ['500', '400'],
+          fg: ['white', 'black'],
+        },
+      },
+      backdrop: ['gray/200/0.2', 'black/0.5'],
+      badge: {
+        '*': {
+          bg: ['100', '900'],
+          fg: ['600', '400'],
+          icon: ['500', '500'],
+          dot: ['500', '500'],
+        },
+        positive: {
+          bg: ['200 50%', '900'],
+          fg: ['600', '500'],
+        },
+        caution: {
+          bg: ['200 50%', '900'],
+          fg: ['600', '500'],
+        },
+      },
+      bg: ['50', '950'],
+      border: ['200', '800'],
+      code: {
+        bg: ['50', '950'],
+        fg: ['600', '300'],
+      },
+      fg: ['800', '200'],
+      focusRing: ['blue/500', 'blue/500'],
+      kbd: {
+        bg: ['white', 'black'],
+        fg: ['600', '400'],
+        border: ['200', '800'],
+      },
+      link: {
+        fg: ['blue/600', 'blue/300'],
+      },
+      muted: {
+        bg: ['50', '950'],
+        fg: ['700 70%', '300 70%'],
+      },
+      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 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'},
+    positive: {
+      _hue: 'green',
+      shadow: {outline: ['500/0.4', '500/0.4']},
+    },
+    caution: {
+      _hue: 'yellow',
+      shadow: {outline: ['600/0.3', '500/0.4']},
+    },
+    critical: {_hue: 'red'},
+  },
+  button: {
+    default: {
+      '*': {
+        '*': {
+          _blend: ['screen', 'multiply'],
+          accent: {
+            fg: ['purple/300', 'purple/700'],
+          },
+          badge: {
+            '*': {
+              bg: ['900', '100'],
+              fg: ['400', '600'],
+              dot: ['500', '500'],
+              icon: ['500', '500'],
+            },
+          },
+          bg: ['500', '400'],
+          border: ['500/0', '400/0'],
+          code: {
+            bg: ['500 20%', '400 20%'],
+            fg: ['200', '600'],
+          },
+          fg: ['white', 'black'],
+          icon: ['200', '800'],
+          kbd: {
+            bg: ['black', 'white'],
+            fg: ['200', '800'],
+            border: ['800', '200'],
+          },
+          link: {
+            fg: ['blue/200', 'blue/700'],
+          },
+          muted: {
+            bg: ['950', '50'],
+            fg: ['100 70%', '600'],
+          },
+          skeleton: {
+            from: ['900', '100'],
+            to: ['900 50%', '100 50%'],
+          },
+        },
+        hovered: {
+          bg: ['700', '300'],
+          border: ['700/0', '300/0'],
+        },
+        pressed: {
+          bg: ['700', '300'],
+        },
+        selected: {
+          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'],
+        },
+        pressed: {
+          bg: ['black', 'white'],
+        },
+        selected: {
+          bg: ['black', 'white'],
+        },
+      },
+    },
+    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'],
+          border: ['100', '900'],
+          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 60%', 'blue/300 60%'],
+          },
+          muted: {
+            bg: ['100', '950'],
+            fg: ['700 60%', '300 60%'],
+          },
+          skeleton: {
+            from: ['100', '900'],
+            to: ['100 50%', '900 50%'],
+          },
+        },
+        hovered: {
+          bg: ['100', '900'],
+          fg: ['700', '300'],
+        },
+        pressed: {
+          bg: ['100', '900'],
+          fg: ['800', '200'],
+        },
+        selected: {
+          bg: ['100', '900'],
+          fg: ['800', '200'],
+        },
+        disabled: {
+          _hue: 'gray',
+          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'],
+          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'],
+          },
+        },
+      },
+      positive: {
+        '*': {
+          border: ['600 20%', '800'],
+        },
+      },
+      caution: {
+        '*': {
+          border: ['600 20%', '800'],
+        },
+      },
+    },
+    bleed: {
+      '*': {
+        '*': {
+          _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'],
+          border: ['white/0', 'black/0'],
+          code: {
+            bg: ['100', '950'],
+            fg: ['600', '300'],
+          },
+          fg: ['700', '300'],
+          icon: ['700 70%', '300 70%'],
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['600', '400'],
+            border: ['200', '800'],
+          },
+          link: {
+            fg: ['blue/700 70%', 'blue/300 70%'],
+          },
+          muted: {
+            bg: ['100', '950'],
+            fg: ['700 70%', '300 70%'],
+          },
+          skeleton: {
+            from: ['100', '900'],
+            to: ['100 50%', '900 50%'],
+          },
+        },
+        hovered: {
+          bg: ['50', '950'],
+          fg: ['700', '300'],
+          icon: ['700 70%', '400 70%'],
+        },
+        pressed: {
+          bg: ['100', '900'],
+          fg: ['800', '200'],
+          icon: ['800 70%', '200 70%'],
+        },
+        selected: {
+          bg: ['100', '900'],
+          fg: ['800', '200'],
+          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', '800'],
+          },
+          accent: {
+            fg: ['200', '800'],
+          },
+          kbd: {
+            bg: ['white', 'black'],
+            fg: ['200', '800'],
+            border: ['100', '900'],
+          },
+          link: {
+            fg: ['200', '800'],
+          },
+          code: {
+            bg: ['50', '950'],
+            fg: ['200', '800'],
+          },
+        },
+      },
+    },
+  },
+  input: {
+    '*': {
+      '*': {
+        _blend: ['multiply', 'screen'],
+        bg: ['white', 'black'],
+        border: ['200', '800'],
+        fg: ['black', '200'],
+        muted: {
+          bg: ['50', '950'],
+        },
+        placeholder: ['400', '600 50%'],
+      },
+      hovered: {
+        border: ['300', '700'],
+      },
+      readOnly: {
+        bg: ['50', '950'],
+        border: ['200', '800'],
+        fg: ['800', '200'],
+      },
+      disabled: {
+        fg: ['200', '800'],
+        border: ['100', '900'],
+      },
+    },
+    invalid: {
+      '*': {
+        _hue: 'red',
+        bg: ['100', '950'],
+      },
+    },
+  },
+  selectable: {
+    '*': {
+      '*': {
+        _blend: ['multiply', 'screen'],
+        bg: ['white', 'black'],
+        fg: ['800', '200'],
+        icon: ['700 70%', '300 70%'],
+        avatar: {
+          '*': {
+            _blend: ['screen', 'multiply'],
+            bg: ['500', '400'],
+            fg: ['white', 'black'],
+          },
+        },
+        badge: {
+          '*': {
+            bg: ['100', '900'],
+            fg: ['600', '400'],
+            dot: ['500', '500'],
+            icon: ['500', '500'],
+          },
+        },
+        border: ['200', '800'],
+        muted: {
+          bg: ['50', '950'],
+          fg: ['700', '300'],
+        },
+        accent: {
+          fg: ['purple/600', 'purple/400'],
+        },
+        kbd: {
+          bg: ['white', 'black'],
+          fg: ['600', '400'],
+          border: ['200', '800'],
+        },
+        link: {
+          fg: ['blue/700', 'blue/300'],
+        },
+        code: {
+          bg: ['50', '950'],
+          fg: ['700', '300'],
+        },
+        skeleton: {
+          from: ['100', '900'],
+          to: ['100 50%', '900 50%'],
+        },
+      },
+      hovered: {
+        bg: ['50', '950'],
+      },
+      pressed: {
+        bg: ['100', '900'],
+      },
+      selected: {
+        _blend: ['screen', 'multiply'],
+        bg: ['500', '400'],
+        fg: ['white', 'black'],
+        icon: ['200', '800'],
+        avatar: {
+          '*': {
+            _blend: ['multiply', 'screen'],
+            bg: ['white', 'black'],
+            fg: ['black', 'white'],
+          },
+        },
+        badge: {
+          '*': {
+            bg: ['700', '300'],
+            fg: ['white', 'black'],
+            dot: ['300', '700'],
+            icon: ['300', '700'],
+          },
+        },
+        border: ['500 20%', '400 20%'],
+        muted: {
+          bg: ['950', '50'],
+          fg: ['200', '800'],
+        },
+        accent: {
+          fg: ['purple/200', 'purple/800'],
+        },
+        kbd: {
+          bg: ['black/0', 'white/0'],
+          fg: ['white', 'black'],
+          border: ['gray/700', 'gray/300'],
+        },
+        link: {
+          fg: ['blue/200', 'blue/800'],
+        },
+        code: {
+          bg: ['500 20%', '400 20%'],
+          fg: ['300', '700'],
+        },
+        skeleton: {
+          from: ['900', '100'],
+          to: ['900 50%', '100 50%'],
+        },
+      },
+      disabled: {
+        fg: ['200', '800'],
+        icon: ['200', '800'],
+        muted: {
+          fg: ['200', '800'],
+        },
+        accent: {
+          fg: ['purple/200', 'purple/800'],
+        },
+        link: {
+          fg: ['blue/200', 'blue/800'],
+        },
+        code: {
+          bg: ['50', '950'],
+          fg: ['200', '800'],
+        },
+      },
+    },
+    default: {
+      selected: {
+        _hue: 'blue',
+      },
+    },
+    critical: {
+      disabled: {
+        bg: ['50 50%', '950 50%'],
+      },
+    },
+  },
+  syntax: {
+    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'],
+  },
+}

package/src/theme/defaults/config.ts

@@ -0,0 +1,84 @@
+import {RootTheme_v2} from '../system'
+
+const BORDER_WIDTH = 1
+const OUTLINE_WIDTH = 0.5
+
+export const defaultThemeConfig: Omit<RootTheme_v2, 'color' | 'font'> = {
+  _version: 2,
+  avatar: {
+    sizes: [
+      {distance: -4, size: 19},
+      {distance: -4, size: 25},
+      {distance: -8, size: 33},
+      {distance: -12, size: 49},
+    ],
+    focusRing: {offset: 1, width: 1},
+  },
+  button: {
+    textWeight: 'medium',
+    border: {width: BORDER_WIDTH},
+    focusRing: {offset: -1, width: 1},
+  },
+  card: {
+    border: {width: BORDER_WIDTH},
+    focusRing: {offset: -1, width: 1},
+    shadow: {outline: OUTLINE_WIDTH},
+  },
+  container: [480, 640, 960, 1280, 1600, 1920],
+  media: [360, 600, 900, 1200, 1800, 2400],
+  layer: {
+    dialog: {zOffset: 600},
+    popover: {zOffset: 400},
+    tooltip: {zOffset: 200},
+  },
+  radius: [0, 1, 3, 6, 9, 12, 21],
+  shadow: [
+    null,
+    {umbra: [0, 0, 0, 0], penumbra: [0, 0, 0, 0], ambient: [0, 0, 0, 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},
+    },
+    radio: {
+      size: 17,
+      markSize: 9,
+      focusRing: {offset: -1, width: 1},
+    },
+    switch: {
+      width: 25,
+      height: 17,
+      padding: 5,
+      transitionDurationMs: 150,
+      transitionTimingFunction: 'ease-out',
+      focusRing: {offset: 1, width: 1},
+    },
+    select: {
+      focusRing: {offset: -1, width: 1},
+    },
+    text: {
+      focusRing: {offset: -1, width: 1},
+    },
+  },
+  style: {
+    button: {
+      root: {
+        transition: 'background-color 100ms,border-color 100ms,color 100ms',
+      },
+    },
+    // card: {
+    //   root: {
+    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
+    //   },
+    // },
+  },
+}