@sanity/ui 2.0.0-alpha.5 → 2.0.0-alpha.7

package/src/theme/__workshop__/index.ts

@@ -5,11 +5,6 @@ export default defineScope({
   name: 'theme',
   title: 'Theme',
   stories: [
-    {
-      name: 'canvas',
-      title: 'Canvas',
-      component: lazy(() => import('./canvas')),
-    },
     {
       name: 'nested-provider',
       title: 'Nested provider',

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/color/cssVariables/cardVariables.ts

@@ -0,0 +1,92 @@
+import {tonesCssVariables} from './tones'
+
+/**
+ * @internal
+ * This variables can be changed by other components besides the `Card` component itself.
+ */
+export const mutableCardVariables = {
+  'bg-color': '--card-bg-color',
+  'muted-fg-color': '--card-muted-fg-color',
+  'icon-color': '--card-icon-color',
+  'fg-color': '--card-fg-color',
+  'bg-image': '--card-bg-image',
+  'accent-color': '--card-accent-fg-color',
+} as const
+
+/**
+ * @internal
+ * This are the only variables that are exposed, as they can be updated and used by other components.
+ */
+export const mutableVariables: Record<keyof typeof mutableCardVariables, string> = Object.keys(
+  mutableCardVariables,
+).reduce(
+  (acc, key) => {
+    const item = key as keyof typeof mutableCardVariables
+
+    acc[item] = `var(${mutableCardVariables[item]})`
+
+    return acc
+  },
+  {} as Record<keyof typeof mutableCardVariables, string>,
+)
+
+/**
+ * @internal
+ * This variables can not be changed by other components, they are here for backwards compatibility.
+ * Shouldn't be used inside any component in @sanity/ui
+ */
+const legacyFixedVariables = [
+  '--card-shadow-outline-color',
+  '--card-shadow-umbra-color',
+  '--card-shadow-penumbra-color',
+  '--card-shadow-ambient-color',
+  '--card-focus-ring-color',
+  '--card-link-fg-color',
+  '--card-code-bg-color',
+  '--card-code-fg-color',
+  '--card-skeleton-color-from',
+  '--card-skeleton-color-to',
+  '--card-link-color',
+  '--card-hairline-soft-color',
+  '--card-hairline-hard-color',
+  '--card-bg2-color',
+] as const
+
+const allVariables = [...Object.values(mutableCardVariables), ...legacyFixedVariables] as const
+
+type CardCssVariable = (typeof allVariables)[number]
+
+/**
+ * @internal
+ */
+export const cardVariables: Record<CardCssVariable, string> = {
+  '--card-shadow-outline-color': tonesCssVariables.default['base-shadow-outline-color'],
+  '--card-shadow-umbra-color': tonesCssVariables.default['base-shadow-umbra-color'],
+  '--card-shadow-penumbra-color': tonesCssVariables.default['base-shadow-penumbra-color'],
+  '--card-shadow-ambient-color': tonesCssVariables.default['base-shadow-ambient-color'],
+  '--card-focus-ring-color': tonesCssVariables.positive['bg-accent'],
+  '--card-icon-color': tonesCssVariables.default['icon-default'],
+  '--card-bg-image': 'inherit',
+
+  // Card
+  '--card-bg-color': tonesCssVariables.default['bg-base'],
+
+  '--card-fg-color': tonesCssVariables.default['text-primary'],
+
+  '--card-muted-fg-color': tonesCssVariables.default['text-secondary'],
+  '--card-accent-fg-color': tonesCssVariables.default['text-accent'],
+  '--card-link-fg-color': tonesCssVariables.default['text-link'],
+  '--card-code-bg-color': tonesCssVariables.default['bg-tint-code'],
+  '--card-code-fg-color': tonesCssVariables.default['text-code'],
+
+  '--card-skeleton-color-from': tonesCssVariables.default['skeleton-from'],
+  '--card-skeleton-color-to': tonesCssVariables.default['skeleton-to'],
+
+  // @todo: deprecate
+  '--card-link-color': tonesCssVariables.default['text-link'],
+  '--card-hairline-soft-color': tonesCssVariables.default['border-base'],
+  '--card-hairline-hard-color': tonesCssVariables.default['border-base'],
+
+  // Card
+  '--card-bg2-color': tonesCssVariables.default['bg-tint'],
+}

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

@@ -0,0 +1,31 @@
+import {ColorTints} from '@sanity/color'
+import {ThemeColorName, ThemeColorSchemeKey} from '../types'
+import {cardVariables, mutableVariables} from './cardVariables'
+import {getColorHex} from './tints'
+import {createTonesVariables, tonesCssVariables} from './tones'
+
+/**
+ * @beta
+ */
+export const createCssVars = (
+  scheme: ThemeColorSchemeKey,
+  tones: Record<ThemeColorName, ColorTints>,
+  defaultTone: ThemeColorName = 'default',
+): Record<string, string> => {
+  const baseBg = getColorHex(tones[defaultTone], scheme, defaultTone, 'base-bg-card')
+  const tonesVars = createTonesVariables(scheme, tones, defaultTone, baseBg)
+
+  return {...tonesVars, ...cardVariables}
+}
+
+/**
+ * @beta
+ */
+export const cssVars = {
+  ...tonesCssVariables,
+  /**
+   * This variables are mutable, they can be updated by other components.
+   * The main component that updates them is the card, these are the only ones that should be exposed for use from the cards.
+   */
+  mutable: mutableVariables,
+}

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

@@ -0,0 +1,262 @@
+import {ColorTints, hues} from '@sanity/color'
+import {ThemeColorName} from '../types'
+import {createCssVars} from './createCssVars'
+
+export const tones: Record<ThemeColorName, ColorTints> = {
+  default: hues.gray,
+  transparent: hues.gray,
+  primary: hues.gray,
+  positive: hues.cyan,
+  caution: hues.yellow,
+  critical: hues.red,
+} as const
+
+describe('css variables', () => {
+  it('Should create the variables when no default tone is provided', () => {
+    const result = createCssVars('light', tones)
+
+    const expected = {
+      '--default-text-primary': '#1f2228',
+      '--default-text-secondary': '#5e6573',
+      '--default-text-inactive': '#788191',
+      '--default-text-code': '#5e6573',
+      '--default-text-muted': '#5e6573',
+      '--default-text-link': '#0661fe',
+      '--default-text-accent': '#ec4636',
+      '--default-bg-base': '#ffffff',
+      '--default-bg-base-hover': '#f9f9fa',
+      '--default-bg-base-active': '#f3f4f6',
+      '--default-bg-accent': '#1f2228',
+      '--default-bg-accent-hover': '#17191c',
+      '--default-bg-accent-active': '#111213',
+      '--default-bg-tint': '#f9f9fa',
+      '--default-bg-tint-code': '#f9f9fa',
+      '--default-icon-default': '#788191',
+      '--default-icon-inverted': '#ffffff',
+      '--default-border-base': '#f3f4f6',
+      '--default-border-base-hover': '#e2e6e9',
+      '--default-border-accent': '#5e6573',
+      '--default-border-accent-inverted': '#ffffff',
+      '--default-base-bg-card': '#ffffff',
+      '--default-base-bg-raw': '#ffffff',
+      '--default-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
+      '--default-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
+      '--default-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
+      '--default-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
+      '--default-base-text-color': '#ffffff',
+      '--default-skeleton-from': '#f3f4f6',
+      '--default-skeleton-to': 'rgba(249,249,250,0.5)',
+      '--transparent-text-primary': '#1f2228',
+      '--transparent-text-secondary': '#5e6573',
+      '--transparent-text-inactive': '#788191',
+      '--transparent-text-code': '#5e6573',
+      '--transparent-text-muted': '#5e6573',
+      '--transparent-text-link': '#0661fe',
+      '--transparent-text-accent': '#ec4636',
+      '--transparent-bg-base': '#ffffff',
+      '--transparent-bg-base-hover': '#f9f9fa',
+      '--transparent-bg-base-active': '#f3f4f6',
+      '--transparent-bg-accent': '#788191',
+      '--transparent-bg-accent-hover': '#5e6573',
+      '--transparent-bg-accent-active': '#464c58',
+      '--transparent-bg-tint': '#f9f9fa',
+      '--transparent-bg-tint-code': '#f9f9fa',
+      '--transparent-icon-default': '#788191',
+      '--transparent-icon-inverted': '#ffffff',
+      '--transparent-border-base': '#f3f4f6',
+      '--transparent-border-base-hover': '#e2e6e9',
+      '--transparent-border-accent': '#788191',
+      '--transparent-border-accent-inverted': '#ffffff',
+      '--transparent-base-bg-card': '#f9f9fa',
+      '--transparent-base-bg-raw': '#ffffff',
+      '--transparent-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
+      '--transparent-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
+      '--transparent-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
+      '--transparent-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
+      '--transparent-base-text-color': '#ffffff',
+      '--transparent-skeleton-from': '#f3f4f6',
+      '--transparent-skeleton-to': 'rgba(249,249,250,0.5)',
+      '--primary-text-primary': '#1f2228',
+      '--primary-text-secondary': '#5e6573',
+      '--primary-text-inactive': '#788191',
+      '--primary-text-code': '#5e6573',
+      '--primary-text-muted': '#5e6573',
+      '--primary-text-link': '#0661fe',
+      '--primary-text-accent': '#ec4636',
+      '--primary-bg-base': '#ffffff',
+      '--primary-bg-base-hover': '#f9f9fa',
+      '--primary-bg-base-active': '#f3f4f6',
+      '--primary-bg-accent': '#1f2228',
+      '--primary-bg-accent-hover': '#17191c',
+      '--primary-bg-accent-active': '#111213',
+      '--primary-bg-tint': '#f9f9fa',
+      '--primary-bg-tint-code': '#f9f9fa',
+      '--primary-icon-default': '#788191',
+      '--primary-icon-inverted': '#ffffff',
+      '--primary-border-base': '#f3f4f6',
+      '--primary-border-base-hover': '#e2e6e9',
+      '--primary-border-accent': '#5e6573',
+      '--primary-border-accent-inverted': '#ffffff',
+      '--primary-base-bg-card': '#f9f9fa',
+      '--primary-base-bg-raw': '#ffffff',
+      '--primary-base-shadow-outline-color': 'rgba(120,129,145,0.2)',
+      '--primary-base-shadow-umbra-color': 'rgba(120,129,145,0.1)',
+      '--primary-base-shadow-penumbra-color': 'rgba(120,129,145,0.07)',
+      '--primary-base-shadow-ambient-color': 'rgba(120,129,145,0.06)',
+      '--primary-base-text-color': '#ffffff',
+      '--primary-skeleton-from': '#f3f4f6',
+      '--primary-skeleton-to': 'rgba(249,249,250,0.5)',
+      '--positive-text-primary': '#0b2a32',
+      '--positive-text-secondary': '#0e9ebe',
+      '--positive-text-inactive': '#0ecff1',
+      '--positive-text-code': '#0e9ebe',
+      '--positive-text-muted': '#0e9ebe',
+      '--positive-text-link': '#0661fe',
+      '--positive-text-accent': '#ec4636',
+      '--positive-bg-base': '#ffffff',
+      '--positive-bg-base-hover': '#f9f9fa',
+      '--positive-bg-base-active': '#ebfdff',
+      '--positive-bg-accent': '#41e1f6',
+      '--positive-bg-accent-hover': '#0ecff1',
+      '--positive-bg-accent-active': '#0e9ebe',
+      '--positive-bg-tint': '#ebfdff',
+      '--positive-bg-tint-code': '#ebfdff',
+      '--positive-icon-default': '#0ecff1',
+      '--positive-icon-inverted': '#ffffff',
+      '--positive-border-base': '#d2fcfe',
+      '--positive-border-base-hover': '#aaf8fd',
+      '--positive-border-accent': '#41e1f6',
+      '--positive-border-accent-inverted': '#ffffff',
+      '--positive-base-bg-card': '#ebfdff',
+      '--positive-base-bg-raw': '#ffffff',
+      '--positive-base-shadow-outline-color': 'rgba(14,207,241,0.2)',
+      '--positive-base-shadow-umbra-color': 'rgba(14,207,241,0.1)',
+      '--positive-base-shadow-penumbra-color': 'rgba(14,207,241,0.07)',
+      '--positive-base-shadow-ambient-color': 'rgba(14,207,241,0.06)',
+      '--positive-base-text-color': '#ffffff',
+      '--positive-skeleton-from': '#d2fcfe',
+      '--positive-skeleton-to': 'rgba(235,253,255,0.5)',
+      '--caution-text-primary': '#331f0a',
+      '--caution-text-secondary': '#cb920b',
+      '--caution-text-inactive': '#f3bc16',
+      '--caution-text-code': '#cb920b',
+      '--caution-text-muted': '#cb920b',
+      '--caution-text-link': '#0661fe',
+      '--caution-text-accent': '#ec4636',
+      '--caution-bg-base': '#ffffff',
+      '--caution-bg-base-hover': '#fffdf0',
+      '--caution-bg-base-active': '#fef7cd',
+      '--caution-bg-accent': '#f3bc16',
+      '--caution-bg-accent-hover': '#cb920b',
+      '--caution-bg-accent-active': '#98670b',
+      '--caution-bg-tint': '#fffdf0',
+      '--caution-bg-tint-code': '#fffdf0',
+      '--caution-icon-default': '#f3bc16',
+      '--caution-icon-inverted': '#ffffff',
+      '--caution-border-base': '#fef7cd',
+      '--caution-border-base-hover': '#fbf1a7',
+      '--caution-border-accent': '#f3bc16',
+      '--caution-border-accent-inverted': '#ffffff',
+      '--caution-base-bg-card': '#fffdf0',
+      '--caution-base-bg-raw': '#ffffff',
+      '--caution-base-shadow-outline-color': 'rgba(243,188,22,0.2)',
+      '--caution-base-shadow-umbra-color': 'rgba(243,188,22,0.1)',
+      '--caution-base-shadow-penumbra-color': 'rgba(243,188,22,0.07)',
+      '--caution-base-shadow-ambient-color': 'rgba(243,188,22,0.06)',
+      '--caution-base-text-color': '#ffffff',
+      '--caution-skeleton-from': '#fef7cd',
+      '--caution-skeleton-to': 'rgba(255,253,240,0.5)',
+      '--critical-text-primary': '#421410',
+      '--critical-text-secondary': '#d72414',
+      '--critical-text-inactive': '#f6a098',
+      '--critical-text-code': '#d72414',
+      '--critical-text-muted': '#d72414',
+      '--critical-text-link': '#0661fe',
+      '--critical-text-accent': '#ec4636',
+      '--critical-bg-base': '#ffffff',
+      '--critical-bg-base-hover': '#fff5f5',
+      '--critical-bg-base-active': '#fee8e7',
+      '--critical-bg-accent': '#ec4636',
+      '--critical-bg-accent-hover': '#d72414',
+      '--critical-bg-accent-active': '#a52112',
+      '--critical-bg-tint': '#fff5f5',
+      '--critical-bg-tint-code': '#fff5f5',
+      '--critical-icon-default': '#ec4636',
+      '--critical-icon-inverted': '#ffffff',
+      '--critical-border-base': '#fee8e7',
+      '--critical-border-base-hover': '#fbccc6',
+      '--critical-border-accent': '#ec4636',
+      '--critical-border-accent-inverted': '#ffffff',
+      '--critical-base-bg-card': '#fff5f5',
+      '--critical-base-bg-raw': '#ffffff',
+      '--critical-base-shadow-outline-color': 'rgba(236,70,54,0.2)',
+      '--critical-base-shadow-umbra-color': 'rgba(236,70,54,0.1)',
+      '--critical-base-shadow-penumbra-color': 'rgba(236,70,54,0.07)',
+      '--critical-base-shadow-ambient-color': 'rgba(236,70,54,0.06)',
+      '--critical-base-text-color': '#ffffff',
+      '--critical-skeleton-from': '#fee8e7',
+      '--critical-skeleton-to': 'rgba(255,245,245,0.5)',
+      '--card-shadow-outline-color': 'var(--default-base-shadow-outline-color)',
+      '--card-shadow-umbra-color': 'var(--default-base-shadow-umbra-color)',
+      '--card-shadow-penumbra-color': 'var(--default-base-shadow-penumbra-color)',
+      '--card-shadow-ambient-color': 'var(--default-base-shadow-ambient-color)',
+      '--card-focus-ring-color': 'var(--positive-bg-accent)',
+      '--card-icon-color': 'var(--default-icon-default)',
+      '--card-bg-image': 'inherit',
+      '--card-bg-color': 'var(--default-bg-base)',
+      '--card-fg-color': 'var(--default-text-primary)',
+      '--card-muted-fg-color': 'var(--default-text-secondary)',
+      '--card-accent-fg-color': 'var(--default-text-accent)',
+      '--card-link-fg-color': 'var(--default-text-link)',
+      '--card-code-bg-color': 'var(--default-bg-tint-code)',
+      '--card-code-fg-color': 'var(--default-text-code)',
+      '--card-skeleton-color-from': 'var(--default-skeleton-from)',
+      '--card-skeleton-color-to': 'var(--default-skeleton-to)',
+      '--card-link-color': 'var(--default-text-link)',
+      '--card-hairline-soft-color': 'var(--default-border-base)',
+      '--card-hairline-hard-color': 'var(--default-border-base)',
+      '--card-bg2-color': 'var(--default-bg-tint)',
+    }
+
+    expect(result).toEqual(expected)
+  })
+  it('Should create the variables when a default tone is provided in light mode', () => {
+    const defaultVariables = createCssVars('light', tones)
+    const result = createCssVars('light', tones, 'caution')
+
+    expect(result['--default-text-primary']).toEqual(result['--caution-text-primary'])
+    // It's not equal because it has been mixed with the default bg
+    expect(result['--default-text-primary']).not.toEqual(defaultVariables['--caution-text-primary'])
+
+    expect(result['--default-text-secondary']).toEqual(result['--caution-text-secondary'])
+    // It's not equal because it has been mixed with the default bg
+    expect(result['--default-text-secondary']).not.toEqual(
+      defaultVariables['--caution-text-secondary'],
+    )
+    // The default base bg should not be mixed
+    expect(result['--default-bg_base']).toEqual(defaultVariables['--caution-card_base_bg'])
+
+    expect(result['--default-base-shadow-ambient-color']).toEqual(
+      defaultVariables['--caution-base-shadow-ambient-color'],
+    )
+    expect(result['--default-base-shadow-ambient-color']).not.toEqual(
+      defaultVariables['--positive-base-shadow-ambient-color'],
+    )
+  })
+  it('Should create the variables when a default tone is provided in dark mode', () => {
+    const defaultVariables = createCssVars('dark', tones)
+    const result = createCssVars('dark', tones, 'caution')
+
+    expect(result['--default-text-primary']).toEqual(result['--caution-text-primary'])
+    // It's not equal because it has been mixed with the default bg
+    expect(result['--default-text-primary']).not.toEqual(defaultVariables['--caution-text-primary'])
+
+    expect(result['--default-text-secondary']).toEqual(result['--caution-text-secondary'])
+    // It's not equal because it has been mixed with the default bg
+    expect(result['--default-text-secondary']).not.toEqual(
+      defaultVariables['--caution-text-secondary'],
+    )
+    // The base bg should not be mixed
+    expect(result['--default-bg_base']).toEqual(defaultVariables['--caution-card_base_bg'])
+  })
+})

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

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