@sanity/ui 1.8.3 → 2.0.0-alpha.10

package/src/theme/lib/theme/color/cssVariables/tints.ts

@@ -0,0 +1,312 @@
+/**
+ * This file creates a translation between the tints and the studio colors
+ * Providing readable names, and allowing to mix colors and tints in the same ThemeColor.
+ * e.g. for positive theme: `{"bg_base": "white", ""bg-base-hover"": "gray/50", ""bg-base-active"": "cyan/50"}
+ * This is not possible in the previous configuration, as each ThemeColor uses only one tint.
+ */
+import {ColorTintKey, ColorTints, ColorTint, black, hues, white} from '@sanity/color'
+import {rgba} from '../../../color-fns'
+import {ThemeColorName, ThemeColorSchemeKey} from '../types'
+
+export const colorKeys = [
+  'text-primary',
+  'text-secondary',
+  'text-inactive',
+  // TODO: Can this be replaced by other of the text colors? It's used by the code html element if it's inside a text
+  'text-code',
+  'text-muted',
+  'text-link',
+  'text-accent',
+  'bg-base',
+  'bg-base-hover',
+  'bg-base-active',
+  'bg-accent',
+  'bg-accent-hover',
+  'bg-accent-active',
+  'bg-tint',
+  // TODO: Can we replace this with bg_tint?  It's used by the code html element if it's inside a text
+  'bg-tint-code',
+
+  'icon-default',
+  'icon-inverted',
+  'border-base',
+  'border-base-hover',
+  'border-accent',
+  'border-accent-inverted',
+
+  // Colors starting with -base won't be affected by the mix function
+  'base-bg-card', // This is used by the card when a tone is defined, it will also override the bg-base in the rest of the components.
+  'base-bg-raw', // This is the same color as bg-base, but it won't be overridden by the card bg color, used in selectable items.
+
+  'base-shadow-outline-color',
+  'base-shadow-umbra-color',
+  'base-shadow-penumbra-color',
+  'base-shadow-ambient-color',
+  'base-text-color', // Color used by the buttons for default mode text
+
+  'skeleton-from',
+  'skeleton-to',
+] as const
+
+export type ColorKey = (typeof colorKeys)[number]
+
+type ColorWithOpacity = {
+  type: 'colorWithOpacity'
+  tint: ColorTintKey
+  /**
+   * Number between 0 and 1
+   */
+  opacity: number
+}
+
+type DefaultColor = {
+  type: 'colorTint'
+  value: ColorTint
+}
+
+type ColorTintsDictionary = Record<ColorKey, ColorTintKey | DefaultColor | ColorWithOpacity>
+const defaultTints: Record<ThemeColorSchemeKey, ColorTintsDictionary> = {
+  light: {
+    'text-primary': '900',
+    'text-secondary': '600',
+    'text-inactive': '500',
+    'text-code': '600',
+    'text-muted': '600',
+    'text-link': {
+      type: 'colorTint',
+      value: hues.blue['600'],
+    },
+    'text-accent': {
+      type: 'colorTint',
+      value: hues.red['500'],
+    },
+    'bg-base': {
+      type: 'colorTint',
+      value: white,
+    },
+    'bg-base-hover': '50',
+    'bg-base-active': '100',
+    'bg-accent': '500',
+    'bg-accent-hover': '600',
+    'bg-accent-active': '700',
+    'bg-tint': '50',
+    'bg-tint-code': '50',
+    'icon-default': '500',
+    'icon-inverted': {
+      type: 'colorTint',
+      value: white,
+    },
+    'border-base': '100',
+    'border-base-hover': '200',
+    'border-accent': '500',
+    'border-accent-inverted': {
+      type: 'colorTint',
+      value: white,
+    },
+    'base-bg-card': '50',
+    'base-bg-raw': {
+      type: 'colorTint',
+      value: white,
+    },
+    'base-text-color': {type: 'colorTint', value: white},
+    'base-shadow-outline-color': {
+      type: 'colorWithOpacity',
+      tint: '500',
+      opacity: 0.2,
+    },
+    'base-shadow-umbra-color': {
+      type: 'colorWithOpacity',
+      tint: '500',
+      opacity: 0.1,
+    },
+    'base-shadow-penumbra-color': {
+      type: 'colorWithOpacity',
+      tint: '500',
+      opacity: 0.07,
+    },
+    'base-shadow-ambient-color': {
+      type: 'colorWithOpacity',
+      tint: '500',
+      opacity: 0.06,
+    },
+    'skeleton-from': '100',
+    'skeleton-to': {
+      type: 'colorWithOpacity',
+      tint: '50',
+      opacity: 0.5,
+    },
+  },
+  dark: {
+    'text-primary': '50',
+    'text-secondary': '300',
+    'text-inactive': '400',
+    'text-code': '400',
+    'text-muted': '400',
+    'text-link': {
+      type: 'colorTint',
+      value: hues.blue['400'],
+    },
+    'text-accent': {
+      type: 'colorTint',
+      value: hues.red['400'],
+    },
+    'bg-base': {type: 'colorTint', value: black},
+    'bg-base-hover': '900',
+    'bg-base-active': '800',
+    'bg-accent': '500',
+    'bg-accent-hover': '400',
+    'bg-accent-active': '300',
+    'bg-tint': '900',
+    'bg-tint-code': '950',
+    'icon-default': '300',
+    'icon-inverted': {type: 'colorTint', value: hues.gray[900]},
+    'border-base': '800',
+    'border-base-hover': '700',
+    'border-accent': '300',
+    'border-accent-inverted': {type: 'colorTint', value: hues.gray[900]},
+    'base-bg-card': '950',
+    'base-text-color': {type: 'colorTint', value: black},
+    'base-shadow-outline-color': {
+      type: 'colorWithOpacity',
+      tint: '500',
+      opacity: 0.4,
+    },
+    'base-shadow-umbra-color': {
+      type: 'colorWithOpacity',
+      tint: '900',
+      opacity: 0.4,
+    },
+    'base-shadow-penumbra-color': {
+      type: 'colorWithOpacity',
+      tint: '900',
+      opacity: 0.28,
+    },
+    'base-shadow-ambient-color': {
+      type: 'colorWithOpacity',
+      tint: '900',
+      opacity: 0.24,
+    },
+    'base-bg-raw': {
+      type: 'colorTint',
+      value: black,
+    },
+    'skeleton-from': '900',
+    'skeleton-to': {
+      type: 'colorWithOpacity',
+      tint: '50',
+      opacity: 0.5,
+    },
+  },
+}
+
+export const colorTints: Record<
+  ThemeColorSchemeKey,
+  Record<ThemeColorName, ColorTintsDictionary>
+> = {
+  light: {
+    default: {
+      ...defaultTints.light,
+      'base-bg-card': {type: 'colorTint', value: white},
+      'bg-accent': '900',
+      'bg-accent-hover': '950',
+      'bg-accent-active': {type: 'colorTint', value: black},
+      'border-accent': '600',
+    },
+    primary: {
+      ...defaultTints.light,
+      'bg-accent': '900',
+      'bg-accent-hover': '950',
+      'bg-accent-active': {type: 'colorTint', value: black},
+      'border-accent': '600',
+    },
+    positive: {
+      ...defaultTints.light,
+      'bg-base-hover': {type: 'colorTint', value: hues.gray[50]},
+      'bg-base-active': '50',
+      'bg-accent': '400',
+      'bg-accent-hover': '500',
+      'bg-accent-active': '600',
+      'border-accent': '400',
+    },
+    transparent: defaultTints.light,
+    caution: defaultTints.light,
+    critical: {...defaultTints.light, 'text-inactive': '300'},
+  },
+  dark: {
+    default: {
+      ...defaultTints.dark,
+      'base-bg-card': {type: 'colorTint', value: black},
+      'text-primary': {type: 'colorTint', value: white},
+      'bg-accent': {type: 'colorTint', value: white},
+      'bg-accent-hover': '50',
+      'bg-accent-active': '100',
+      'base-shadow-umbra-color': {
+        type: 'colorWithOpacity',
+        tint: '950',
+        opacity: 0.4,
+      },
+      'base-shadow-penumbra-color': {
+        type: 'colorWithOpacity',
+        tint: '950',
+        opacity: 0.28,
+      },
+      'base-shadow-ambient-color': {
+        type: 'colorWithOpacity',
+        tint: '950',
+        opacity: 0.24,
+      },
+    },
+    primary: {
+      ...defaultTints.dark,
+      'text-primary': {type: 'colorTint', value: white},
+      'bg-accent': {type: 'colorTint', value: white},
+      'bg-accent-hover': '50',
+      'bg-accent-active': '100',
+    },
+    positive: {
+      ...defaultTints.dark,
+      'bg-base-hover': {type: 'colorTint', value: hues.gray[900]},
+      'bg-base-active': '900',
+      'bg-accent': '400',
+      'bg-accent-hover': '300',
+      'bg-accent-active': '200',
+      'border-accent': '400',
+    },
+    transparent: defaultTints.dark,
+    caution: defaultTints.dark,
+    critical: {...defaultTints.dark, 'text-inactive': '700'},
+  },
+}
+
+export const getColorValue = (
+  tints: ColorTints,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorName,
+  key: ColorKey,
+): ColorTint => {
+  const value = colorTints[scheme][tone][key]
+
+  if (typeof value === 'string') {
+    return tints[value]
+  }
+
+  if (value.type === 'colorWithOpacity') {
+    const base = tints[value.tint]
+
+    return {
+      hex: rgba(base.hex, value.opacity),
+      title: `${base.title} ${Math.round(value.opacity * 100)}%`,
+    }
+  }
+
+  return value.value
+}
+
+export const getColorHex = (
+  tints: ColorTints,
+  scheme: ThemeColorSchemeKey,
+  tone: ThemeColorName,
+  key: ColorKey,
+): string => {
+  return getColorValue(tints, scheme, tone, key).hex
+}

package/src/theme/lib/theme/color/cssVariables/tones.ts

@@ -0,0 +1,67 @@
+import {ColorTints} from '@sanity/color'
+import {multiply, screen} from '../../../../studioTheme/helpers'
+import {ThemeColorName, ThemeColorSchemeKey} from '../types'
+import {ColorKey, colorKeys, getColorHex} from './tints'
+
+export const getToneCssVar = (tone: ThemeColorName, key: ColorKey): string => `--${tone}-${key}`
+
+export const createTonesVariables = (
+  scheme: ThemeColorSchemeKey,
+  tones: Record<ThemeColorName, ColorTints>,
+  defaultTone: ThemeColorName = 'default',
+  baseBg: string,
+): Record<string, string> => {
+  const tonesVariables: Record<string, string> = {}
+  const keys = Object.keys(tones) as ThemeColorName[]
+  const mix = scheme === 'dark' ? screen : multiply
+  const needsMixing = defaultTone !== 'default'
+
+  keys.forEach((_tone: ThemeColorName) => {
+    const tone = _tone == 'default' ? defaultTone : _tone
+    const tint = tones[tone]
+
+    colorKeys.forEach((key) => {
+      const colorHex = getColorHex(tint, scheme, tone, key)
+      const varName = getToneCssVar(_tone, key)
+      const willBeMixed = needsMixing && !key.startsWith('base-')
+
+      tonesVariables[varName] = willBeMixed ? mix(baseBg, colorHex) : colorHex
+    })
+  })
+
+  // If we are changing the default tone, we need to update the bg-base to match with the new base bg color.
+  // As components are using this bg-base for the background color, and it needs to match with the card bg color.
+  if (defaultTone !== 'default') {
+    tonesVariables[getToneCssVar('default', 'bg-base')] = tonesCssVariables.default['base-bg-card']
+  }
+
+  return tonesVariables
+}
+
+const themeNames: ThemeColorName[] = [
+  'default',
+  'transparent',
+  'primary',
+  'positive',
+  'caution',
+  'critical',
+]
+
+export const tonesCssVariables: Record<
+  ThemeColorName,
+  Record<ColorKey, string>
+> = themeNames.reduce(
+  (acc, tone) => {
+    acc[tone] = colorKeys.reduce(
+      (acc, key) => {
+        acc[key] = `var(${getToneCssVar(tone, key)})`
+
+        return acc
+      },
+      {} as Record<ColorKey, string>,
+    )
+
+    return acc
+  },
+  {} as Record<ThemeColorName, Record<ColorKey, string>>,
+)

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

@@ -0,0 +1,15 @@
+import {cssObjectToCssString} from './utils'
+
+describe('cssObjectToCssString', () => {
+  it('should transform css variables object to a style declaration type string', () => {
+    const cssObject = {
+      '--default-text-primary': '#007bff',
+      '--default-text-secondary': '#6c757d',
+      '--default-text-inactive': '#28a745',
+    }
+
+    const expectedCssString = `--default-text-primary: #007bff; --default-text-secondary: #6c757d; --default-text-inactive: #28a745; `
+
+    expect(cssObjectToCssString(cssObject)).toEqual(expectedCssString)
+  })
+})

package/src/theme/lib/theme/color/cssVariables/utils.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ * Transform css variables object to a style declaration type string
+ */
+export function cssObjectToCssString(rules: Record<string, string>): string {
+  return Object.keys(rules).reduce((acc, key) => {
+    return `${acc}${key}: ${rules[key]}; `
+  }, '')
+}

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

@@ -1,14 +1,5 @@
-export * from './factory'
-export * from './syntax'
 export * from './types'
 
-//
-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'
+// Css Variables
+export * from './cssVariables'
+export * from './_legacy'

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

@@ -1,12 +1,4 @@
-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'
+import {ColorTints} from '@sanity/color'
 
 /**
  * @public
@@ -38,35 +30,12 @@ export type ThemeColorToneKey =
 /**
  * @public
  */
-export interface ThemeColor {
-  dark: boolean
-  base: ThemeColorBase
-  button: ThemeColorButton
-  card: ThemeColorCard
-  input: ThemeColorInput
-  selectable?: ThemeColorSelectable
-  spot: ThemeColorSpot
-  syntax: ThemeColorSyntax
-  solid: ThemeColorSolid
-  muted: ThemeColorMuted
-}
-
-/**
- * @public
- */
-export interface ThemeColorScheme {
-  default: ThemeColor
-  transparent: ThemeColor
-  primary: ThemeColor
-  positive: ThemeColor
-  caution: ThemeColor
-  critical: ThemeColor
+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>
 }
 
 /**
- * @public
+ * @beta
  */
-export interface ThemeColorSchemes {
-  dark: ThemeColorScheme
-  light: ThemeColorScheme
-}
+export type CSSVariableKey = ThemeColorName & ('spot' | 'syntax' | 'mutable')

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

@@ -1,13 +1,17 @@
+import {FocusRing} from '../../types'
+
 /**
  * @public
  */
 export interface ThemeInput {
   checkbox: {
     size: number
+    focusRing: FocusRing
   }
   radio: {
     size: number
     markSize: number
+    focusRing: FocusRing
   }
   switch: {
     width: number
@@ -15,8 +19,15 @@ export interface ThemeInput {
     padding: number
     transitionDurationMs: number
     transitionTimingFunction: string
+    focusRing: FocusRing
   }
   border: {
     width: number
   }
+  select: {
+    focusRing: FocusRing
+  }
+  text: {
+    focusRing: FocusRing
+  }
 }

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

@@ -1,3 +1,4 @@
+import {FocusRing} from '../../types'
 import {ThemeAvatar} from './avatar'
 import {ThemeColorSchemes} from './color'
 import {ThemeFonts, ThemeFontWeightKey} from './fonts'
@@ -15,14 +16,20 @@ export interface BaseTheme<
   avatar: ThemeAvatar
   button: {
     textWeight: ThemeFontWeightKey
+    focusRing: FocusRing
+  }
+  card: {
+    focusRing: FocusRing
   }
   color: ThemeColorSchemes
   container: number[]
+  /** @deprecated Use component-specific `focusRing` values instead */
   focusRing: {
     offset: number
     width: number
   }
   fonts: ThemeFonts
+  input: ThemeInput
   /**
    * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
    * @beta
@@ -32,6 +39,5 @@ export interface BaseTheme<
   radius: number[]
   shadows: Array<ThemeShadow | null>
   space: number[]
-  input: ThemeInput
   styles?: Styles
 }