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

package/src/styles/input/textInputStyle.ts

@@ -1,6 +1,7 @@
 import {css} from 'styled-components'
-import {ThemeColorSchemeKey, ThemeFontWeightKey} from '../../theme'
-import {CardTone} from '../../types'
+import {ThemeColorToneKey, ThemeFontWeightKey} from '../../theme'
+import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
+import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
 import {CSSObject} from '../../types/styled'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
 import {rem, _responsive} from '../helpers'
@@ -11,8 +12,7 @@ import {ThemeProps} from '../types'
  */
 export interface TextInputInputStyleProps {
   $fontSize: number[]
-  $scheme: ThemeColorSchemeKey
-  $tone: CardTone
+  $tone: ThemeColorToneKey
   $weight?: ThemeFontWeightKey
 }
 
@@ -22,8 +22,7 @@ export interface TextInputInputStyleProps {
 export interface TextInputRepresentationStyleProps {
   $hasPrefix?: boolean
   $hasSuffix?: boolean
-  $scheme: ThemeColorSchemeKey
-  $tone: CardTone
+  $tone: ThemeColorToneKey
 }
 
 const ROOT_STYLE = css`
@@ -41,9 +40,8 @@ export function textInputRootStyle(): ReturnType<typeof css> {
 export function textInputBaseStyle(
   props: TextInputInputStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {theme, $scheme, $tone, $weight} = props
+  const {theme, $tone, $weight} = props
   const font = theme.sanity.fonts.text
-  const color = theme.sanity.color.input
 
   return css`
     appearance: none;
@@ -81,33 +79,31 @@ export function textInputBaseStyle(
       color: var(--input-placeholder-color);
     }
 
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --input-fg-color: ${color.default.enabled.fg};
-      --input-placeholder-color: ${color.default.enabled.placeholder};
+    --input-fg-color: ${cssVars[$tone]['text-primary']};
+    --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
 
-      /* enabled */
-      &:not(:invalid):not(:disabled):not(:read-only) {
-        --input-fg-color: ${color.default.enabled.fg};
-        --input-placeholder-color: ${color.default.enabled.placeholder};
-      }
+    /* enabled */
+    &:not(:invalid):not(:disabled):not(:read-only) {
+      --input-fg-color: ${cssVars[$tone]['text-primary']};
+      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
+    }
 
-      /* disabled */
-      &:not(:invalid):disabled {
-        --input-fg-color: ${color.default.disabled.fg};
-        --input-placeholder-color: ${color.default.disabled.placeholder};
-      }
+    /* disabled */
+    &:not(:invalid):disabled {
+      --input-fg-color: ${cssVars[$tone]['text-primary']};
+      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
+    }
 
-      /* invalid */
-      &:invalid {
-        --input-fg-color: ${color.invalid.enabled.fg};
-        --input-placeholder-color: ${color.invalid.enabled.placeholder};
-      }
+    /* invalid */
+    &:invalid {
+      --input-fg-color: ${cssVars.critical['text-primary']};
+      --input-placeholder-color: ${cssVars.critical['text-inactive']};
+    }
 
-      /* readOnly */
-      &:read-only {
-        --input-fg-color: ${color.default.readOnly.fg};
-        --input-placeholder-color: ${color.default.readOnly.placeholder};
-      }
+    /* readOnly */
+    &:read-only {
+      --input-fg-color: ${cssVars[$tone]['text-primary']};
+      --input-placeholder-color: ${cssVars[$tone]['text-inactive']};
     }
   `
 }
@@ -129,10 +125,9 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
+  const {$hasPrefix, $hasSuffix, $tone, theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.text
-  const color = theme.sanity.color.input
 
   return css`
     --input-box-shadow: none;
@@ -146,7 +141,7 @@ export function textInputRepresentationStyle(
     pointer-events: none;
     z-index: 0;
 
-    background-color: var(--card-bg-color);
+    background-color: ${cssVars.mutable['bg-color']};
     box-shadow: var(--input-box-shadow);
 
     border-top-left-radius: ${$hasPrefix ? 0 : undefined};
@@ -154,78 +149,66 @@ export function textInputRepresentationStyle(
     border-top-right-radius: ${$hasSuffix ? 0 : undefined};
     border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
 
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --card-bg-color: ${color.default.enabled.bg};
-      --card-fg-color: ${color.default.enabled.fg};
+    ${mutableCardVariables['bg-color']}: ${cssVars[$tone]['bg-base']};
+    ${mutableCardVariables['fg-color']}: ${cssVars[$tone]['text-primary']};
+
+    /* enabled */
+    &[data-border] {
+      --input-box-shadow: ${focusRingBorderStyle({
+        color: cssVars[$tone]['border-base'],
+        width: input.border.width,
+      })};
+    }
 
-      /* enabled */
-      *:not(:disabled) + &[data-border] {
+    /* invalid */
+    *:not(:disabled):invalid + & {
+      ${mutableCardVariables['bg-color']}: ${cssVars.critical['bg-tint']};
+      ${mutableCardVariables['fg-color']}: ${cssVars.critical['text-primary']};
+
+      &[data-border] {
         --input-box-shadow: ${focusRingBorderStyle({
-          color: color.default.enabled.border,
+          color: cssVars.critical['border-base'],
           width: input.border.width,
         })};
       }
+    }
 
-      /* invalid */
-      *:not(:disabled):invalid + & {
-        --card-bg-color: ${color.invalid.enabled.bg};
-        --card-fg-color: ${color.invalid.enabled.fg};
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.invalid.enabled.border,
-            width: input.border.width,
-          })};
-        }
+    /* focused */
+    *:not(:disabled):focus + & {
+      &[data-border] {
+        --input-box-shadow: ${focusRingStyle({
+          border: {color: cssVars[$tone]['border-base'], width: input.border.width},
+          focusRing,
+        })};
       }
 
-      /* focused */
-      *:not(:disabled):focus + & {
-        &[data-border] {
-          --input-box-shadow: ${focusRingStyle({
-            border: {color: color.default.enabled.border, width: input.border.width},
-            focusRing,
-          })};
-        }
-
-        &:not([data-border]) {
-          --input-box-shadow: ${focusRingStyle({focusRing})};
-        }
+      &:not([data-border]) {
+        --input-box-shadow: ${focusRingStyle({focusRing})};
       }
+    }
 
-      /* disabled */
-      *:disabled + & {
-        --card-bg-color: ${color.default.disabled.bg} !important;
-        --card-fg-color: ${color.default.disabled.fg} !important;
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.default.disabled.border,
-            width: input.border.width,
-          })};
-        }
-      }
+    /* disabled */
+    *:disabled + & {
+      ${mutableCardVariables['bg-color']}: ${cssVars.default['bg-tint']} !important;
+     ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']} !important;
+    }
 
-      /* readOnly */
-      *:read-only + & {
-        --card-bg-color: ${color.default.readOnly.bg} !important;
-        --card-fg-color: ${color.default.readOnly.fg} !important;
-      }
+    /* readOnly */
+    *:read-only + & {
+      ${mutableCardVariables['bg-color']}: ${cssVars.default['bg-tint']} !important;
+     ${mutableCardVariables['fg-color']}: ${cssVars.default['text-primary']} !important;
+    }
 
-      /* hovered */
-      @media (hover: hover) {
-        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-          --card-bg-color: ${color.default.hovered.bg};
-          --card-fg-color: ${color.default.hovered.fg};
-        }
-
-        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-            color: color.default.hovered.border,
-            width: input.border.width,
-          })};
-        }
+    /* hovered */
+    @media (hover: hover) {
+
+      *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+        --input-box-shadow: ${focusRingBorderStyle({
+          color: cssVars.default['border-base-hover'],
+          width: input.border.width,
+        })};
       }
     }
+    }
   `
 }

package/src/styles/margin/marginsStyle.test.ts

@@ -3,8 +3,7 @@
 import {studioTheme, Theme} from '../../theme'
 import {responsiveMarginStyle} from './marginStyle'
 
-const {color, ...restTheme} = studioTheme
-const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
+const theme: Theme = {sanity: studioTheme}
 
 describe('styles/margin', () => {
   it('should 1', () => {

package/src/styles/padding/paddingStyle.test.ts

@@ -3,8 +3,7 @@
 import {studioTheme, Theme} from '../../theme'
 import {responsivePaddingStyle} from './paddingStyle'
 
-const {color, ...restTheme} = studioTheme
-const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
+const theme: Theme = {sanity: studioTheme}
 
 describe('styles/padding', () => {
   it('should 1', () => {

package/src/styles/shadow/shadowStyle.ts

@@ -1,5 +1,5 @@
 import {EMPTY_RECORD} from '../../constants'
-import {BoxShadow, ThemeShadow} from '../../theme'
+import {BoxShadow, ThemeShadow, cssVars} from '../../theme'
 import {CSSObject} from '../../types/styled'
 import {rem, _responsive} from '../helpers'
 import {ThemeProps} from '../types'
@@ -12,10 +12,10 @@ function toBoxShadow(shadow: BoxShadow, color: string) {
 function shadowStyle(shadow: ThemeShadow | null): CSSObject {
   if (!shadow) return EMPTY_RECORD
 
-  const outline = `0 0 0 ${rem(1)} var(--card-shadow-outline-color)`
-  const umbra = toBoxShadow(shadow.umbra, 'var(--card-shadow-umbra-color)')
-  const penumbra = toBoxShadow(shadow.penumbra, 'var(--card-shadow-penumbra-color)')
-  const ambient = toBoxShadow(shadow.ambient, 'var(--card-shadow-ambient-color)')
+  const outline = `0 0 0 ${rem(1)} ${cssVars.default['base-shadow-outline-color']}`
+  const umbra = toBoxShadow(shadow.umbra, cssVars.default['base-shadow-umbra-color'])
+  const penumbra = toBoxShadow(shadow.penumbra, cssVars.default['base-shadow-penumbra-color'])
+  const ambient = toBoxShadow(shadow.ambient, cssVars.default['base-shadow-ambient-color'])
 
   return {boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`}
 }

package/src/theme/__workshop__/color.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
+import {Box, Card, Tree, TreeItem, cssVars, useRootTheme} from '@sanity/ui'
 
 export default function ColorStory() {
   const {theme} = useRootTheme()
@@ -48,7 +48,7 @@ function ColorPreview({name, value}: {name: string; value: string}) {
         radius={2}
         style={{
           backgroundColor: value,
-          boxShadow: 'inset 0 0 0 1px var(--card-shadow-outline-color)',
+          boxShadow: `inset 0 0 0 1px ${cssVars.default['base-shadow-outline-color']}`,
           display: 'inline-block',
           height: 17,
           width: 25,

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/_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'