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

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

@@ -0,0 +1,28 @@
+/**
+ * @public
+ */
+export interface ThemeColorInputState {
+  bg: string
+  bg2: string
+  fg: string
+  border: string
+  placeholder: string
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorInputStates {
+  enabled: ThemeColorInputState
+  disabled: ThemeColorInputState
+  hovered: ThemeColorInputState
+  readOnly: ThemeColorInputState
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorInput {
+  default: ThemeColorInputStates
+  invalid: ThemeColorInputStates
+}

package/src/theme/lib/theme/color/muted/createMuted.ts

@@ -0,0 +1,56 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorName} from '../types'
+import {ThemeColorMuted} from './types'
+
+export function createMutedTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorName,
+): 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/lib/theme/color/muted/index.ts

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

package/src/theme/lib/theme/color/muted/types.ts

@@ -0,0 +1,24 @@
+import {ThemeColorGenericState} from '../_generic/types'
+
+/**
+ * @public
+ */
+export interface ThemeColorMutedTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorMuted {
+  default: ThemeColorMutedTone
+  transparent: ThemeColorMutedTone
+  primary: ThemeColorMutedTone
+  positive: ThemeColorMutedTone
+  caution: ThemeColorMutedTone
+  critical: ThemeColorMutedTone
+}

package/src/theme/lib/theme/color/selectable/createSelectableTones.ts

@@ -0,0 +1,73 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorMuted} from '../muted'
+import {ThemeColorSolid} from '../solid'
+import {ThemeColorSelectable, ThemeColorSelectableStates} from './types'
+
+export function createSelectableTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+): ThemeColorSelectable {
+  return {
+    default: _createSelectableStates(opts, base, dark, solid, muted, 'default'),
+    primary: _createSelectableStates(opts, base, dark, solid, muted, 'primary'),
+    positive: _createSelectableStates(opts, base, dark, solid, muted, 'positive'),
+    caution: _createSelectableStates(opts, base, dark, solid, muted, 'caution'),
+    critical: _createSelectableStates(opts, base, dark, solid, muted, 'critical'),
+  }
+}
+
+function _createSelectableStates(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  solid: ThemeColorSolid,
+  muted: ThemeColorMuted,
+  tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical',
+): ThemeColorSelectableStates {
+  return {
+    enabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'enabled',
+      tone,
+    }),
+    hovered: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'hovered',
+      tone,
+    }),
+    pressed: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'pressed',
+      tone,
+    }),
+    selected: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'selected',
+      tone,
+    }),
+    disabled: opts.selectable({
+      base,
+      dark,
+      solid,
+      muted,
+      state: 'disabled',
+      tone,
+    }),
+  }
+}

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

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

package/src/theme/lib/theme/color/selectable/types.ts

@@ -0,0 +1,29 @@
+import {ThemeColorGenericState} from '../_generic'
+
+/**
+ * @deprecated Use `ThemeColorGenericState` instead.
+ * @public
+ */
+export type ThemeColorSelectableState = ThemeColorGenericState
+
+/**
+ * @public
+ */
+export interface ThemeColorSelectableStates {
+  enabled: ThemeColorSelectableState
+  hovered: ThemeColorSelectableState
+  pressed: ThemeColorSelectableState
+  selected: ThemeColorSelectableState
+  disabled: ThemeColorSelectableState
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorSelectable {
+  default: ThemeColorSelectableStates
+  primary: ThemeColorSelectableStates
+  positive: ThemeColorSelectableStates
+  caution: ThemeColorSelectableStates
+  critical: ThemeColorSelectableStates
+}

package/src/theme/lib/theme/color/solid/createSolidTones.ts

@@ -0,0 +1,56 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorName} from '../types'
+import {ThemeColorSolid} from './types'
+
+export function createSolidTones(
+  opts: ThemeColorBuilderOpts,
+  base: ThemeColorBase,
+  dark: boolean,
+  name: ThemeColorName,
+): ThemeColorSolid {
+  return {
+    default: {
+      enabled: opts.solid({base, dark, tone: 'default', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'default', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'default', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'default', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'default', name, state: 'selected'}),
+    },
+    transparent: {
+      enabled: opts.solid({base, dark, tone: 'transparent', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'transparent', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'transparent', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'transparent', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'transparent', name, state: 'selected'}),
+    },
+    primary: {
+      enabled: opts.solid({base, dark, tone: 'primary', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'primary', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'primary', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'primary', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'primary', name, state: 'selected'}),
+    },
+    positive: {
+      enabled: opts.solid({base, dark, tone: 'positive', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'positive', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'positive', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'positive', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'positive', name, state: 'selected'}),
+    },
+    caution: {
+      enabled: opts.solid({base, dark, tone: 'caution', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'caution', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'caution', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'caution', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'caution', name, state: 'selected'}),
+    },
+    critical: {
+      enabled: opts.solid({base, dark, tone: 'critical', name, state: 'enabled'}),
+      disabled: opts.solid({base, dark, tone: 'critical', name, state: 'disabled'}),
+      hovered: opts.solid({base, dark, tone: 'critical', name, state: 'hovered'}),
+      pressed: opts.solid({base, dark, tone: 'critical', name, state: 'pressed'}),
+      selected: opts.solid({base, dark, tone: 'critical', name, state: 'selected'}),
+    },
+  }
+}

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

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

package/src/theme/lib/theme/color/solid/types.ts

@@ -0,0 +1,24 @@
+import {ThemeColorGenericState} from '../_generic/types'
+
+/**
+ * @public
+ */
+export interface ThemeColorSolidTone {
+  enabled: ThemeColorGenericState
+  disabled: ThemeColorGenericState
+  hovered: ThemeColorGenericState
+  pressed: ThemeColorGenericState
+  selected: ThemeColorGenericState
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorSolid {
+  default: ThemeColorSolidTone
+  transparent: ThemeColorSolidTone
+  primary: ThemeColorSolidTone
+  positive: ThemeColorSolidTone
+  caution: ThemeColorSolidTone
+  critical: ThemeColorSolidTone
+}

package/src/theme/lib/theme/color/spot/createSpot.ts

@@ -0,0 +1,21 @@
+import {ThemeColorBase} from '../base'
+import {ThemeColorBuilderOpts} from '../factory'
+import {ThemeColorSpot} from './types'
+
+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/lib/theme/color/spot/index.ts

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

package/src/theme/lib/theme/color/spot/types.ts

@@ -0,0 +1,28 @@
+/**
+ * @public
+ */
+export type ThemeColorSpotKey =
+  | 'gray'
+  | 'blue'
+  | 'purple'
+  | 'magenta'
+  | 'red'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'cyan'
+
+/**
+ * @public
+ */
+export interface ThemeColorSpot {
+  gray: string
+  blue: string
+  purple: string
+  magenta: string
+  red: string
+  orange: string
+  yellow: string
+  green: string
+  cyan: string
+}

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

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

package/src/theme/lib/theme/color/syntax/types.ts

@@ -0,0 +1,41 @@
+/**
+ * @public
+ */
+export interface ThemeColorSyntax {
+  atrule: string
+  attrName: string
+  attrValue: string
+  attribute: string
+  boolean: string
+  builtin: string
+  cdata: string
+  char: string
+  class: string
+  className: string
+  comment: string
+  constant: string
+  deleted: string
+  doctype: string
+  entity: string
+  function: string
+  hexcode: string
+  id: string
+  important: string
+  inserted: string
+  keyword: string
+  number: string
+  operator: string
+  prolog: string
+  property: string
+  pseudoClass: string
+  pseudoElement: string
+  punctuation: string
+  regex: string
+  selector: string
+  string: string
+  symbol: string
+  tag: string
+  unit: string
+  url: string
+  variable: string
+}

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

@@ -1,4 +1,12 @@
-import {ColorTints} from '@sanity/color'
+import {ThemeColorBase} from './base'
+import {ThemeColorButton} from './button'
+import {ThemeColorCard} from './card'
+import {ThemeColorInput} from './input'
+import {ThemeColorMuted} from './muted'
+import {ThemeColorSelectable} from './selectable'
+import {ThemeColorSolid} from './solid'
+import {ThemeColorSpot} from './spot'
+import {ThemeColorSyntax} from './syntax'
 
 /**
  * @public
@@ -30,12 +38,35 @@ export type ThemeColorToneKey =
 /**
  * @public
  */
-export interface ThemeColorSchemes {
-  // Could we update this to only return Record<ThemeColorName ,  keyof typeof hues> ? Then the function that assigns the color would search the ColorTint
-  tones: Record<ThemeColorName, ColorTints>
+export interface ThemeColor {
+  dark: boolean
+  base: ThemeColorBase
+  button: ThemeColorButton
+  card: ThemeColorCard
+  input: ThemeColorInput
+  selectable?: ThemeColorSelectable
+  spot: ThemeColorSpot
+  syntax: ThemeColorSyntax
+  solid: ThemeColorSolid
+  muted: ThemeColorMuted
 }
 
 /**
- * @beta
+ * @public
  */
-export type CSSVariableKey = ThemeColorName & ('spot' | 'syntax' | 'mutable')
+export interface ThemeColorScheme {
+  default: ThemeColor
+  transparent: ThemeColor
+  primary: ThemeColor
+  positive: ThemeColor
+  caution: ThemeColor
+  critical: ThemeColor
+}
+
+/**
+ * @public
+ */
+export interface ThemeColorSchemes {
+  dark: ThemeColorScheme
+  light: ThemeColorScheme
+}