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

package/src/theme/build/_deprecated/color/muted/createMuted.ts

@@ -0,0 +1,54 @@
+import {ThemeColorBase, ThemeColorCardToneKey, ThemeColorMuted} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createMutedTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorCardToneKey,
+): ThemeColorMuted {
+  return {
+    default: {
+      enabled: opts.muted({base, dark, tone: 'default', name, state: 'enabled'}),
+      disabled: opts.muted({base, dark, tone: 'default', name, state: 'disabled'}),
+      hovered: opts.muted({base, dark, tone: 'default', name, state: 'hovered'}),
+      pressed: opts.muted({base, dark, tone: 'default', name, state: 'pressed'}),
+      selected: opts.muted({base, dark, tone: 'default', name, state: 'selected'}),
+    },
+    transparent: {
+      enabled: opts.muted({base, dark, tone: 'transparent', name, state: 'enabled'}),
+      disabled: opts.muted({base, dark, tone: 'transparent', name, state: 'disabled'}),
+      hovered: opts.muted({base, dark, tone: 'transparent', name, state: 'hovered'}),
+      pressed: opts.muted({base, dark, tone: 'transparent', name, state: 'pressed'}),
+      selected: opts.muted({base, dark, tone: 'transparent', name, state: 'selected'}),
+    },
+    primary: {
+      enabled: opts.muted({base, dark, tone: 'primary', name, state: 'enabled'}),
+      disabled: opts.muted({base, dark, tone: 'primary', name, state: 'disabled'}),
+      hovered: opts.muted({base, dark, tone: 'primary', name, state: 'hovered'}),
+      pressed: opts.muted({base, dark, tone: 'primary', name, state: 'pressed'}),
+      selected: opts.muted({base, dark, tone: 'primary', name, state: 'selected'}),
+    },
+    positive: {
+      enabled: opts.muted({base, dark, tone: 'positive', name, state: 'enabled'}),
+      disabled: opts.muted({base, dark, tone: 'positive', name, state: 'disabled'}),
+      hovered: opts.muted({base, dark, tone: 'positive', name, state: 'hovered'}),
+      pressed: opts.muted({base, dark, tone: 'positive', name, state: 'pressed'}),
+      selected: opts.muted({base, dark, tone: 'positive', name, state: 'selected'}),
+    },
+    caution: {
+      enabled: opts.muted({base, dark, tone: 'caution', name, state: 'enabled'}),
+      disabled: opts.muted({base, dark, tone: 'caution', name, state: 'disabled'}),
+      hovered: opts.muted({base, dark, tone: 'caution', name, state: 'hovered'}),
+      pressed: opts.muted({base, dark, tone: 'caution', name, state: 'pressed'}),
+      selected: opts.muted({base, dark, tone: 'caution', name, state: 'selected'}),
+    },
+    critical: {
+      enabled: opts.muted({base, dark, tone: 'critical', name, state: 'enabled'}),
+      disabled: opts.muted({base, dark, tone: 'critical', name, state: 'disabled'}),
+      hovered: opts.muted({base, dark, tone: 'critical', name, state: 'hovered'}),
+      pressed: opts.muted({base, dark, tone: 'critical', name, state: 'pressed'}),
+      selected: opts.muted({base, dark, tone: 'critical', name, state: 'selected'}),
+    },
+  }
+}

package/src/theme/build/_deprecated/color/spot/createSpot.ts

@@ -0,0 +1,20 @@
+import {ThemeColorBase, ThemeColorSpot} from '../../../../system'
+import {ThemeColorBuilderOpts} from '../factory'
+
+export function createSpot(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+): ThemeColorSpot {
+  return {
+    gray: opts.spot({base, dark, key: 'gray'}),
+    blue: opts.spot({base, dark, key: 'blue'}),
+    purple: opts.spot({base, dark, key: 'purple'}),
+    magenta: opts.spot({base, dark, key: 'magenta'}),
+    red: opts.spot({base, dark, key: 'red'}),
+    orange: opts.spot({base, dark, key: 'orange'}),
+    yellow: opts.spot({base, dark, key: 'yellow'}),
+    green: opts.spot({base, dark, key: 'green'}),
+    cyan: opts.spot({base, dark, key: 'cyan'}),
+  }
+}

package/src/theme/build/buildColorTheme.test.ts

@@ -0,0 +1,183 @@
+import {ThemeColorTokens} from '../config'
+import {buildColorTheme} from './buildColorTheme'
+
+test('buildColorTheme: base', () => {
+  const {light, dark} = buildColorTheme({
+    color: {
+      base: {
+        '*': {
+          bg: ['50', '900'],
+          fg: ['800', '200'],
+        },
+        transparent: {
+          bg: ['50', 'black'],
+        },
+        default: {
+          bg: ['white', '950'],
+          fg: ['black', '200'],
+        },
+        primary: {
+          _hue: 'purple',
+        },
+        positive: {
+          _hue: 'cyan',
+        },
+        caution: {
+          _hue: 'yellow',
+        },
+        critical: {
+          _hue: 'red',
+        },
+      },
+    },
+  })
+
+  expect({
+    light: {
+      transparent: {
+        bg: light.transparent.bg,
+        fg: light.transparent.fg,
+      },
+      default: {
+        bg: light.default.bg,
+        fg: light.default.fg,
+      },
+      primary: {
+        bg: light.primary.bg,
+        fg: light.primary.fg,
+      },
+    },
+    dark: {
+      transparent: {
+        bg: dark.transparent.bg,
+        fg: dark.transparent.fg,
+      },
+      default: {
+        bg: dark.default.bg,
+        fg: dark.default.fg,
+      },
+      primary: {
+        bg: dark.primary.bg,
+        fg: dark.primary.fg,
+      },
+    },
+  }).toEqual({
+    light: {
+      transparent: {
+        bg: 'gray/50',
+        fg: 'gray/600',
+      },
+      default: {
+        bg: 'white',
+        fg: 'black',
+      },
+      primary: {
+        bg: 'purple/50',
+        fg: 'purple/800',
+      },
+    },
+    dark: {
+      transparent: {
+        bg: 'black',
+        fg: 'gray/400',
+      },
+      default: {
+        bg: 'gray/950',
+        fg: 'gray/200',
+      },
+      primary: {
+        bg: 'purple/900',
+        fg: 'purple/200',
+      },
+    },
+  })
+})
+
+test('buildColorTheme: button', () => {
+  const tokens: ThemeColorTokens = {
+    base: {
+      '*': {
+        bg: ['50', '900'],
+        fg: ['800', '200'],
+      },
+      transparent: {
+        bg: ['50', 'black'],
+      },
+      default: {
+        bg: ['white', '950'],
+        fg: ['black', '200'],
+      },
+      primary: {
+        _hue: 'purple',
+      },
+      positive: {
+        _hue: 'cyan',
+      },
+      caution: {
+        _hue: 'yellow',
+      },
+      critical: {
+        _hue: 'red',
+      },
+    },
+    button: {
+      default: {
+        '*': {
+          '*': {
+            bg: ['500', '400'],
+            fg: ['white', 'black'],
+          },
+          hovered: {
+            bg: ['600', '300'],
+          },
+        },
+      },
+    },
+  }
+
+  const {dark, light} = buildColorTheme({color: tokens})
+
+  expect({
+    light: {
+      enabled: {
+        bg: light.default.button.default.primary.enabled.bg,
+        fg: light.default.button.default.primary.enabled.fg,
+      },
+      hovered: {
+        bg: light.default.button.default.primary.hovered.bg,
+        fg: light.default.button.default.primary.hovered.fg,
+      },
+    },
+    dark: {
+      enabled: {
+        bg: dark.default.button.default.primary.enabled.bg,
+        fg: dark.default.button.default.primary.enabled.fg,
+      },
+      hovered: {
+        bg: dark.default.button.default.primary.hovered.bg,
+        fg: dark.default.button.default.primary.hovered.fg,
+      },
+    },
+  }).toEqual({
+    light: {
+      enabled: {
+        bg: 'purple/500',
+        fg: 'white',
+      },
+      hovered: {
+        bg: 'purple/600',
+        fg: 'white',
+      },
+    },
+    dark: {
+      enabled: {
+        bg: 'purple/400',
+        fg: 'black',
+      },
+      hovered: {
+        bg: 'purple/300',
+        fg: 'black',
+      },
+    },
+  })
+})