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

package/src/theme/lib/theme/color/color.test.ts

@@ -0,0 +1,63 @@
+/** @jest-environment jsdom */
+
+import {createColorTheme} from './factory'
+
+describe('color', () => {
+  describe('createColorTheme', () => {
+    it('should generate base (scheme=light, name=default)', () => {
+      const theme = createColorTheme()
+      const scheme = 'light'
+      const name = 'default'
+      const color = theme[scheme][name]
+
+      expect(color.base).toEqual({
+        bg: 'hsl(0, 0%, 100%)',
+        border: 'hsl(0, 0%, 95%)',
+        fg: 'hsl(0, 0%, 0%)',
+        focusRing: 'hsl(240, 100%, 50%)',
+        shadow: {
+          ambient: 'hsl(0, 0%, 0%)',
+          outline: 'hsl(0, 0%, 0%)',
+          penumbra: 'hsl(0, 0%, 0%)',
+          umbra: 'hsl(0, 0%, 0%)',
+        },
+        skeleton: {
+          from: 'hsl(0, 0%, 0%)',
+          to: 'hsl(0, 0%, 0%)',
+        },
+      })
+    })
+
+    it('should generate muted states (scheme=light, name=default)', () => {
+      const theme = createColorTheme()
+      const scheme = 'light'
+      const name = 'default'
+      const color = theme[scheme][name]
+
+      expect(color.muted.default.enabled).toEqual({
+        bg: 'hsl(0, 0%, 95%)',
+        bg2: 'hsl(0, 0%, 95%)',
+        border: 'hsl(0, 0%, 70%)',
+        fg: 'hsl(0, 0%, 20%)',
+        iconColor: 'hsl(0, 0%, 20%)',
+        muted: {
+          fg: 'hsl(0, 0%, 0%)',
+        },
+        link: {
+          fg: 'hsl(0, 0%, 0%)',
+        },
+        accent: {
+          fg: 'hsl(0, 0%, 0%)',
+        },
+        code: {
+          bg: 'hsl(0, 0%, 0%)',
+          fg: 'hsl(0, 0%, 0%)',
+        },
+        skeleton: {
+          from: 'hsl(0, 0%, 0%)',
+          to: 'hsl(0, 0%, 0%)',
+        },
+      })
+    })
+  })
+})

package/src/theme/lib/theme/color/defaults.ts

@@ -0,0 +1,390 @@
+import {ThemeColorBuilderOpts} from './factory'
+
+const black = 'hsl(0, 0%, 0%)'
+const white = 'hsl(0, 0%, 100%)'
+
+const colors = {
+  default: {
+    lightest: 'hsl(0, 0%, 95%)',
+    lighter: 'hsl(0, 0%, 70%)',
+    light: 'hsl(0, 0%, 65%)',
+    base: 'hsl(0, 0%, 50%)',
+    dark: 'hsl(0, 0%, 35%)',
+    darker: 'hsl(0, 0%, 20%)',
+    darkest: 'hsl(0, 0%, 5%)',
+  },
+  transparent: {
+    lightest: 'hsl(240, 100%, 95%)',
+    lighter: 'hsl(240, 100%, 70%)',
+    light: 'hsl(240, 100%, 65%)',
+    base: 'hsl(240, 100%, 50%)',
+    dark: 'hsl(240, 100%, 35%)',
+    darker: 'hsl(240, 100%, 20%)',
+    darkest: 'hsl(240, 100%, 5%)',
+  },
+  primary: {
+    lightest: 'hsl(240, 100%, 95%)',
+    lighter: 'hsl(240, 100%, 70%)',
+    light: 'hsl(240, 100%, 65%)',
+    base: 'hsl(240, 100%, 50%)',
+    dark: 'hsl(240, 100%, 35%)',
+    darker: 'hsl(240, 100%, 20%)',
+    darkest: 'hsl(240, 100%, 5%)',
+  },
+  positive: {
+    lightest: 'hsl(120, 100%, 95%)',
+    lighter: 'hsl(120, 100%, 70%)',
+    light: 'hsl(120, 100%, 65%)',
+    base: 'hsl(120, 100%, 50%)',
+    dark: 'hsl(120, 100%, 35%)',
+    darker: 'hsl(120, 100%, 20%)',
+    darkest: 'hsl(120, 100%, 5%)',
+  },
+  caution: {
+    lightest: 'hsl(60, 100%, 95%)',
+    lighter: 'hsl(60, 100%, 70%)',
+    light: 'hsl(60, 100%, 65%)',
+    base: 'hsl(60, 100%, 50%)',
+    dark: 'hsl(60, 100%, 35%)',
+    darker: 'hsl(60, 100%, 20%)',
+    darkest: 'hsl(60, 100%, 5%)',
+  },
+  critical: {
+    lightest: 'hsl(0, 100%, 95%)',
+    lighter: 'hsl(0, 100%, 70%)',
+    light: 'hsl(0, 100%, 65%)',
+    base: 'hsl(0, 100%, 50%)',
+    dark: 'hsl(0, 100%, 35%)',
+    darker: 'hsl(0, 100%, 20%)',
+    darkest: 'hsl(0, 100%, 5%)',
+  },
+}
+
+const spots = {
+  gray: 'hsl(0, 0%, 50%)',
+  red: 'hsl(0, 100%, 50%)',
+  orange: 'hsl(30, 100%, 50%)',
+  yellow: 'hsl(60, 100%, 50%)',
+  green: 'hsl(120, 100%, 50%)',
+  cyan: 'hsl(180, 100%, 50%)',
+  blue: 'hsl(240, 100%, 50%)',
+  purple: 'hsl(270, 100%, 50%)',
+  magenta: 'hsl(300, 100%, 50%)',
+}
+
+const tones = {
+  transparent: {
+    bg: [colors.transparent.darkest, colors.transparent.lightest],
+    fg: [colors.transparent.lightest, colors.transparent.darkest],
+    border: [colors.transparent.darker, colors.transparent.lighter],
+    focusRing: [colors.transparent.base, colors.transparent.base],
+  },
+  primary: {
+    bg: [colors.primary.darkest, colors.primary.lightest],
+    fg: [colors.primary.lightest, colors.primary.darkest],
+    border: [colors.primary.darker, colors.primary.lighter],
+    focusRing: [colors.primary.base, colors.primary.base],
+  },
+  positive: {
+    bg: [colors.positive.darkest, colors.positive.lightest],
+    fg: [colors.positive.lightest, colors.positive.darkest],
+    border: [colors.positive.darker, colors.positive.lighter],
+    focusRing: [colors.positive.base, colors.positive.base],
+  },
+  caution: {
+    bg: [colors.caution.darkest, colors.caution.lightest],
+    fg: [colors.caution.lightest, colors.caution.darkest],
+    border: [colors.caution.darker, colors.caution.lighter],
+    focusRing: [colors.caution.base, colors.caution.base],
+  },
+  critical: {
+    bg: [colors.critical.darkest, colors.critical.lightest],
+    fg: [colors.critical.lightest, colors.critical.darkest],
+    border: [colors.critical.darker, colors.critical.lighter],
+    focusRing: [colors.critical.base, colors.critical.base],
+  },
+}
+
+export const defaultOpts: ThemeColorBuilderOpts = {
+  base: ({dark, name}) => {
+    if (name === 'default') {
+      return {
+        bg: dark ? black : white,
+        fg: dark ? white : black,
+        border: dark ? colors.default.darkest : colors.default.lightest,
+        focusRing: colors.primary.base,
+        shadow: {
+          outline: black,
+          umbra: black,
+          penumbra: black,
+          ambient: black,
+        },
+        skeleton: {
+          from: dark ? white : black,
+          to: dark ? white : black,
+        },
+      }
+    }
+
+    // Variants:
+    // - primary
+    // - positive
+    // - caution
+    // - critical
+    return {
+      bg: tones[name].bg[dark ? 0 : 1],
+      fg: tones[name].fg[dark ? 0 : 1],
+      border: tones[name].border[dark ? 0 : 1],
+      focusRing: tones[name].focusRing[dark ? 0 : 1],
+      shadow: {
+        outline: black,
+        umbra: black,
+        penumbra: black,
+        ambient: black,
+      },
+      skeleton: {
+        from: dark ? white : black,
+        to: dark ? white : black,
+      },
+    }
+  },
+
+  solid: ({base, dark, state, tone}) => {
+    const color = colors[tone]
+
+    if (state === 'hovered') {
+      return {
+        bg: dark ? color.light : color.dark,
+        bg2: dark ? color.light : color.dark,
+        border: dark ? color.lighter : color.darker,
+        fg: dark ? color.darkest : color.lightest,
+        iconColor: dark ? color.darkest : color.lightest,
+        muted: {
+          fg: black,
+        },
+        accent: {
+          fg: black,
+        },
+        link: {
+          fg: black,
+        },
+        code: {
+          bg: black,
+          fg: black,
+        },
+        skeleton: base.skeleton,
+      }
+    }
+
+    return {
+      bg: color.base,
+      bg2: color.base,
+      border: dark ? color.light : color.dark,
+      fg: dark ? color.darkest : color.lightest,
+      iconColor: dark ? color.darkest : color.lightest,
+      muted: {
+        fg: black,
+      },
+      accent: {
+        fg: black,
+      },
+      link: {
+        fg: black,
+      },
+      code: {
+        bg: black,
+        fg: black,
+      },
+      skeleton: base.skeleton,
+    }
+  },
+
+  muted: ({base, dark, state, tone}) => {
+    const color = colors[tone]
+
+    if (state === 'hovered') {
+      return {
+        bg: dark ? color.darker : color.lighter,
+        bg2: dark ? color.darker : color.lighter,
+        border: dark ? color.lighter : color.darker,
+        fg: dark ? color.lightest : color.darkest,
+        iconColor: dark ? color.lightest : color.darkest,
+        muted: {
+          fg: black,
+        },
+        accent: {
+          fg: black,
+        },
+        link: {
+          fg: black,
+        },
+        code: {
+          bg: black,
+          fg: black,
+        },
+        skeleton: base.skeleton,
+      }
+    }
+
+    return {
+      bg: dark ? color.darkest : color.lightest,
+      bg2: dark ? color.darkest : color.lightest,
+      border: dark ? color.darker : color.lighter,
+      fg: dark ? color.lighter : color.darker,
+      iconColor: dark ? color.lighter : color.darker,
+      muted: {
+        fg: black,
+      },
+      accent: {
+        fg: black,
+      },
+      link: {
+        fg: black,
+      },
+      code: {
+        bg: black,
+        fg: black,
+      },
+      skeleton: base.skeleton,
+    }
+  },
+
+  button: ({base, mode, muted, solid}) => {
+    if (mode === 'bleed') {
+      return {
+        ...muted,
+        enabled: {
+          bg: 'transparent',
+          bg2: 'transparent',
+          fg: muted.enabled.fg,
+          iconColor: muted.enabled.fg,
+          border: 'transparent',
+          muted: {
+            fg: black,
+          },
+          accent: {
+            fg: black,
+          },
+          link: {
+            fg: black,
+          },
+          code: {
+            bg: black,
+            fg: black,
+          },
+          skeleton: base.skeleton,
+        },
+        hovered: {
+          bg: muted.enabled.bg,
+          bg2: muted.enabled.bg,
+          fg: muted.hovered.fg,
+          iconColor: muted.hovered.fg,
+          border: 'transparent',
+          muted: {
+            fg: black,
+          },
+          accent: {
+            fg: black,
+          },
+          link: {
+            fg: black,
+          },
+          code: {
+            bg: black,
+            fg: black,
+          },
+          skeleton: base.skeleton,
+        },
+      }
+    }
+
+    if (mode === 'ghost')
+      return {
+        ...solid,
+        enabled: muted.enabled,
+      }
+
+    return solid
+  },
+
+  card: ({base}) => {
+    return {
+      bg: black,
+      bg2: black,
+      fg: black,
+      iconColor: black,
+      border: black,
+      muted: {
+        fg: black,
+      },
+      accent: {
+        fg: black,
+      },
+      link: {
+        fg: black,
+      },
+      code: {
+        bg: black,
+        fg: black,
+      },
+      skeleton: base.skeleton,
+    }
+  },
+
+  input: () => {
+    return {
+      bg: black,
+      bg2: black,
+      fg: black,
+      border: black,
+      placeholder: black,
+    }
+  },
+
+  selectable: ({muted, state, tone}) => {
+    return muted[tone][state]
+  },
+
+  spot: ({key}) => {
+    return spots[key]
+  },
+
+  syntax: () => ({
+    atrule: black,
+    attrName: black,
+    attrValue: black,
+    attribute: black,
+    boolean: black,
+    builtin: black,
+    cdata: black,
+    char: black,
+    class: black,
+    className: black,
+    comment: black,
+    constant: black,
+    deleted: black,
+    doctype: black,
+    entity: black,
+    function: black,
+    hexcode: black,
+    id: black,
+    important: black,
+    inserted: black,
+    keyword: black,
+    number: black,
+    operator: black,
+    prolog: black,
+    property: black,
+    pseudoClass: black,
+    pseudoElement: black,
+    punctuation: black,
+    regex: black,
+    selector: black,
+    string: black,
+    symbol: black,
+    tag: black,
+    unit: black,
+    url: black,
+    variable: black,
+  }),
+}

package/src/theme/lib/theme/color/factory.ts

@@ -0,0 +1,138 @@
+import {ThemeColorGenericState} from './_generic'
+import {ThemeColorBase} from './base'
+import {ThemeColorButtonModeKey, ThemeColorButtonStates} from './button'
+import {createButtonModes} from './button/createButtonModes'
+import {ThemeColorCardState} from './card'
+import {createCardStates} from './card/createCardStates'
+import {defaultOpts} from './defaults'
+import {ThemeColorInputState} from './input'
+import {createInputModes} from './input/createInputModes'
+import {ThemeColorMuted, ThemeColorMutedTone} from './muted'
+import {createMutedTones} from './muted/createMuted'
+import {ThemeColorSelectableState} from './selectable'
+import {createSelectableTones} from './selectable/createSelectableTones'
+import {ThemeColorSolid, ThemeColorSolidTone} from './solid'
+import {createSolidTones} from './solid/createSolidTones'
+import {ThemeColorSpotKey} from './spot'
+import {createSpot} from './spot/createSpot'
+import {ThemeColorSyntax} from './syntax'
+import {
+  ThemeColorName,
+  ThemeColorScheme,
+  ThemeColorSchemes,
+  ThemeColor,
+  ThemeColorToneKey,
+} from './types'
+
+/**
+ * @public
+ */
+export interface ThemeColorBuilderOpts {
+  base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
+  solid: (opts: {
+    base: ThemeColorBase
+    dark: boolean
+    tone: ThemeColorToneKey
+    name: ThemeColorName
+    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
+  }) => ThemeColorGenericState
+  muted: (opts: {
+    base: ThemeColorBase
+    dark: boolean
+    tone: ThemeColorToneKey
+    name: ThemeColorName
+    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
+  }) => ThemeColorGenericState
+  card: (opts: {
+    base: ThemeColorBase
+    dark: boolean
+    muted: ThemeColorMuted
+    name: ThemeColorName
+    solid: ThemeColorSolid
+    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
+  }) => ThemeColorCardState
+  button: (opts: {
+    dark: boolean
+    mode: ThemeColorButtonModeKey
+    base: ThemeColorBase
+    solid: ThemeColorSolidTone
+    muted: ThemeColorMutedTone
+  }) => ThemeColorButtonStates
+  input: (opts: {
+    base: ThemeColorBase
+    solid: ThemeColorSolidTone
+    muted: ThemeColorMutedTone
+    dark: boolean
+    mode: 'default' | 'invalid'
+    state: 'enabled' | 'disabled' | 'hovered' | 'readOnly'
+  }) => ThemeColorInputState
+  selectable: (opts: {
+    dark: boolean
+    base: ThemeColorBase
+    solid: ThemeColorSolid
+    muted: ThemeColorMuted
+    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
+    tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+  }) => ThemeColorSelectableState
+  syntax: (opts: {base: ThemeColorBase; dark: boolean}) => ThemeColorSyntax
+  spot: (opts: {base: ThemeColorBase; dark: boolean; key: ThemeColorSpotKey}) => string
+}
+
+/**
+ * @public
+ */
+export type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
+
+/**
+ * @public
+ */
+export function createColorTheme(
+  partialOpts: PartialThemeColorBuilderOpts = {},
+): ThemeColorSchemes {
+  const builders: ThemeColorBuilderOpts = {...defaultOpts, ...partialOpts}
+
+  return {
+    light: _createColorScheme(builders, false),
+    dark: _createColorScheme(builders, true),
+  }
+}
+
+/**
+ * @internal
+ */
+function _createColorScheme(opts: ThemeColorBuilderOpts, dark: boolean): ThemeColorScheme {
+  return {
+    default: _createColor(opts, dark, 'default'),
+    transparent: _createColor(opts, dark, 'transparent'),
+    primary: _createColor(opts, dark, 'primary'),
+    positive: _createColor(opts, dark, 'positive'),
+    caution: _createColor(opts, dark, 'caution'),
+    critical: _createColor(opts, dark, 'critical'),
+  }
+}
+
+/**
+ * @internal
+ */
+function _createColor(
+  opts: ThemeColorBuilderOpts,
+  dark: boolean,
+  name: ThemeColorName,
+): ThemeColor {
+  const base = opts.base({dark, name})
+  const solid = createSolidTones(opts, base, dark, name)
+  const muted = createMutedTones(opts, base, dark, name)
+
+  return {
+    base,
+    button: createButtonModes(opts, base, dark, solid, muted),
+    card: createCardStates(opts, base, dark, name, solid, muted),
+    dark,
+    input: createInputModes(opts, base, dark, solid, muted),
+    selectable: createSelectableTones(opts, base, dark, solid, muted),
+    spot: createSpot(opts, base, dark),
+    syntax: opts.syntax({base, dark}),
+    solid,
+    muted,
+  }
+}

package/src/theme/lib/theme/color/index.ts

@@ -1,5 +1,14 @@
+export * from './factory'
+export * from './syntax'
 export * from './types'
 
-// Css Variables
-export * from './cssVariables'
-export * from './_legacy'
+//
+export * from './_generic'
+export * from './base'
+export * from './button'
+export * from './card'
+export * from './input'
+export * from './selectable'
+export * from './muted'
+export * from './solid'
+export * from './spot'

package/src/theme/lib/theme/color/input/createInputModes.ts

@@ -0,0 +1,84 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorMuted} from '../muted'
+import {ThemeColorSolid} from '../solid'
+import {ThemeColorInput} from './types'
+
+export function createInputModes(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorInput {
+  return {
+    default: {
+      enabled: opts.input({
+        base,
+        dark,
+        mode: 'default',
+        state: 'enabled',
+        solid: solid.default,
+        muted: muted.default,
+      }),
+      disabled: opts.input({
+        base,
+        dark,
+        mode: 'default',
+        state: 'disabled',
+        solid: solid.default,
+        muted: muted.default,
+      }),
+      hovered: opts.input({
+        base,
+        dark,
+        mode: 'default',
+        state: 'hovered',
+        solid: solid.default,
+        muted: muted.default,
+      }),
+      readOnly: opts.input({
+        base,
+        dark,
+        mode: 'default',
+        state: 'readOnly',
+        solid: solid.default,
+        muted: muted.default,
+      }),
+    },
+    invalid: {
+      enabled: opts.input({
+        base,
+        dark,
+        mode: 'invalid',
+        state: 'enabled',
+        solid: solid.default,
+        muted: muted.default,
+      }),
+      disabled: opts.input({
+        base,
+        dark,
+        mode: 'invalid',
+        state: 'disabled',
+        solid: solid.default,
+        muted: muted.default,
+      }),
+      hovered: opts.input({
+        base,
+        dark,
+        mode: 'invalid',
+        state: 'hovered',
+        solid: solid.default,
+        muted: muted.default,
+      }),
+      readOnly: opts.input({
+        base,
+        dark,
+        mode: 'invalid',
+        state: 'readOnly',
+        solid: solid.default,
+        muted: muted.default,
+      }),
+    },
+  }
+}

package/src/theme/lib/theme/color/input/index.ts

@@ -0,0 +1 @@
+export * from './types'