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

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

@@ -1,88 +0,0 @@
-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-border-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
-  '--card-bg-color': tonesCssVariables.default['bg-base'],
-  '--card-bg-image': 'inherit',
-  '--card-fg-color': tonesCssVariables.default['text-primary'],
-  '--card-border-color': tonesCssVariables.default['border-base'],
-  '--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'],
-}

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

@@ -1,31 +0,0 @@
-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

@@ -1,262 +0,0 @@
-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-border-color': 'var(--default-border-base)',
-    }
-
-    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

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