@sanity/ui 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/theme/_internal/types.ts

@@ -0,0 +1,91 @@
+import {ColorBlendModeValue} from './config'
+import {
+  COLOR_BASE_TONES,
+  COLOR_BUTTON_MODES,
+  COLOR_HUES,
+  COLOR_STATE_TONES,
+  COLOR_STATES,
+  COLOR_TINTS,
+} from './constants'
+
+export type ColorHueValue = (typeof COLOR_HUES)[number]
+
+export type ColorTintValue = (typeof COLOR_TINTS)[number]
+
+export type ColorBaseTone = (typeof COLOR_BASE_TONES)[number]
+
+export type ColorButtonMode = (typeof COLOR_BUTTON_MODES)[number]
+
+export type ColorState = (typeof COLOR_STATES)[number]
+
+export type ColorStateTone = (typeof COLOR_STATE_TONES)[number]
+
+export interface TMP_StateColorTheme {
+  _blend: ColorBlendModeValue
+  bg: string
+  bg2?: string
+  fg: string
+  border: string
+  muted: {
+    fg: string
+  }
+  accent: {
+    fg: string
+  }
+  link: {
+    fg: string
+  }
+  code: {
+    bg: string
+    fg: string
+  }
+  skeleton?: {
+    from: string
+    to: string
+  }
+}
+
+export type TMP_ButtonStatesColorTheme = Record<ColorState, TMP_StateColorTheme>
+
+export type TMP_ButtonModesColorTheme = Record<ColorButtonMode, TMP_ButtonStatesColorTheme>
+
+export type TMP_ButtonColorTheme = Record<ColorStateTone, TMP_ButtonModesColorTheme>
+
+export interface TMP_BaseColorTheme {
+  _blend: ColorBlendModeValue
+  dark: boolean
+  // base: ThemeColorBase
+  base: {
+    bg: string
+    fg: string
+    border: string
+    focusRing: string
+    shadow: {
+      outline: string
+      umbra: string
+      penumbra: string
+      ambient: string
+    }
+    skeleton: {
+      from: string
+      to: string
+    }
+  }
+  button: TMP_ButtonColorTheme
+  // card: ThemeColorCard
+  // input: ThemeColorInput
+  // selectable?: ThemeColorSelectable
+  // spot: ThemeColorSpot
+  // syntax: ThemeColorSyntax
+  // solid: ThemeColorSolid
+  // muted: ThemeColorMuted
+}
+
+export type TMP_ColorTheme = Record<ColorBaseTone, TMP_BaseColorTheme>
+
+export interface TMP_Theme {
+  color: {
+    light: TMP_ColorTheme
+    dark: TMP_ColorTheme
+  }
+}

package/src/theme/index.ts

@@ -1,3 +1,4 @@
+export * from './_internal'
 export * from './lib/color-fns'
 export * from './lib/theme'
 export * from './studioTheme'

package/src/theme/lib/color-fns/blend/multiply.ts

@@ -1,4 +1,4 @@
-import {RGB} from '../types'
+import {RGB, RGBA} from '../types'
 
 function multiplyChannel(b: number, s: number) {
   return b * s
@@ -9,7 +9,7 @@ function multiplyChannel(b: number, s: number) {
  * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
  * @internal
  */
-export function multiply(b: RGB, s: RGB): RGB {
+export function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB {
   return {
     r: Math.round(clamp(multiplyChannel(b.r / 255, s.r / 255) * 255)),
     g: Math.round(clamp(multiplyChannel(b.g / 255, s.g / 255) * 255)),

package/src/theme/lib/color-fns/blend/screen.ts

@@ -1,4 +1,4 @@
-import {RGB} from '../types'
+import {RGB, RGBA} from '../types'
 
 function screenChannel(b: number, s: number) {
   return b + s - b * s
@@ -9,7 +9,7 @@ function screenChannel(b: number, s: number) {
  * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
  * @internal
  */
-export function screen(b: RGB, s: RGB): RGB {
+export function screen(b: RGB | RGBA, s: RGB | RGBA): RGB {
   return {
     r: Math.round(clamp(screenChannel(b.r / 255, s.r / 255) * 255)),
     g: Math.round(clamp(screenChannel(b.g / 255, s.g / 255) * 255)),

package/src/theme/lib/color-fns/convert.ts

@@ -1,4 +1,4 @@
-import {HSL, RGB} from './types'
+import {HSL, RGB, RGBA} from './types'
 
 /**
  * @internal
@@ -23,6 +23,20 @@ export function hexToRgb(hex: string): RGB {
   }
 }
 
+/**
+ * @internal
+ */
+export function rgbaToRGBA(rgba: string): RGBA {
+  const values = rgba.replace(/rgba\(|\)/g, '').split(',')
+
+  return {
+    r: parseInt(values[0]),
+    g: parseInt(values[1]),
+    b: parseInt(values[2]),
+    a: parseFloat(values[3]),
+  }
+}
+
 /**
  * @internal
  */

package/src/theme/lib/color-fns/parse.ts

@@ -1,5 +1,5 @@
-import {hexToRgb, hslToRgb} from './convert'
-import {HSL, RGB} from './types'
+import {hexToRgb, hslToRgb, rgbaToRGBA} from './convert'
+import {HSL, RGB, RGBA} from './types'
 
 const HEX_CHARS = '0123456789ABCDEFabcdef'
 
@@ -37,7 +37,7 @@ function parseHsl(str: string): HSL {
 /**
  * @internal
  */
-export function parseColor(color: unknown): RGB {
+export function parseColor(color: unknown): RGB | RGBA {
   if (!color) return {r: 0, g: 0, b: 0}
 
   if (typeof color !== 'string') {
@@ -52,5 +52,9 @@ export function parseColor(color: unknown): RGB {
     return hslToRgb(parseHsl(color))
   }
 
+  if (color.startsWith('rgba(')) {
+    return rgbaToRGBA(color)
+  }
+
   throw new Error(`parseColor: unexpected color format: "${color}"`)
 }

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

@@ -5,6 +5,17 @@ export interface RGB {
   r: number
   g: number
   b: number
+  a?: undefined
+}
+
+/**
+ * @internal
+ */
+export interface RGBA {
+  r: number
+  g: number
+  b: number
+  a: number
 }
 
 /**

package/src/theme/lib/theme/avatar.ts

@@ -5,7 +5,9 @@ import {FocusRing} from '../../types'
  */
 export interface ThemeAvatar {
   sizes: {
+    /** Distance between avatars in an <AvatarStack> component (px) */
     distance: number
+    /** Diameter (px) */
     size: number
   }[]
   focusRing: FocusRing

package/src/theme/lib/theme/color/_legacy/createColorTheme.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ * @deprecated Use studioTheme instead.
+ */
+export function createColorTheme(): null {
+  return null
+}

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

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