@sanity/ui 4.0.0-v4.1 → 4.0.0

package/src/css/primitives/button/button.css.ts

@@ -1,287 +0,0 @@
-import {AVATAR_COLORS, type ButtonMode, ELEMENT_TONES, type ElementTone} from '@sanity/ui/theme'
-
-import {_fromEntries} from '../../_fromEntries'
-import {_style} from '../../_style.css'
-import {layers} from '../../layers.css'
-import {vars} from '../../vars.css'
-
-export const root: string = _style(layers.primitives, {
-  WebkitFontSmoothing: 'inherit',
-  alignItems: 'center',
-  appearance: 'none',
-  font: 'inherit',
-  outline: 'none',
-  userSelect: 'none',
-  textDecoration: 'none',
-  border: 0,
-  boxSizing: 'border-box',
-  padding: 0,
-  overflow: 'hidden',
-  margin: 0,
-  textAlign: 'left',
-  position: 'relative',
-  verticalAlign: 'top',
-  backgroundColor: vars.color.bg,
-  color: vars.color.fg,
-
-  //
-  transition:
-    'background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
-
-  selectors: {
-    '&::-moz-focus-inner': {
-      border: 0,
-      padding: 0,
-    },
-
-    '&:focus': {
-      outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
-      outlineOffset: vars.button.focusRing.offset,
-    },
-
-    '&:focus:not(:focus-visible)': {
-      outline: 'none',
-    },
-  },
-})
-
-export const modes: Record<ButtonMode, string> = {
-  default: _style(layers.primitives, {}),
-  ghost: _style(layers.primitives, {boxShadow: vars.button.boxShadow}),
-  bleed: _style(layers.primitives, {}),
-}
-
-export const loadingBox: string = _style(layers.primitives, {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  backgroundColor: vars.color.bg,
-  borderRadius: 'inherit',
-  zIndex: 1,
-  opacity: 0.8,
-})
-
-export const tones: Record<ElementTone, string> = {
-  ..._fromEntries(
-    ELEMENT_TONES.map((t) => {
-      const solid = vars.color.solid[t]
-      const tinted = vars.color.tinted[t]
-
-      return [
-        t,
-        _style(layers.primitives, {
-          selectors: {
-            // default
-
-            [`&.${modes.default}`]: {
-              vars: {
-                [vars.color.bg]: solid.bg[0],
-                [vars.color.border]: solid.border[1],
-                [vars.color.code.bg]: solid.bg[1],
-                [vars.color.code.fg]: solid.fg[4],
-                [vars.color.fg]: solid.fg[0],
-                [vars.color.muted.bg]: solid.bg[1],
-                [vars.color.muted.fg]: solid.fg[4],
-                [vars.button.boxShadow]: 'none',
-              },
-            },
-
-            [`&.${modes.default}:not([data-disabled]):hover`]: {
-              vars: {
-                [vars.color.bg]: solid.bg[1],
-                [vars.color.border]: solid.border[2],
-                [vars.color.code.bg]: solid.bg[2],
-                [vars.color.code.fg]: solid.fg[4],
-                [vars.color.fg]: solid.fg[0],
-                [vars.color.muted.bg]: solid.bg[2],
-                [vars.color.muted.fg]: solid.fg[4],
-              },
-            },
-
-            [`&.${modes.default}:not([data-disabled]):active`]: {
-              vars: {
-                [vars.color.bg]: solid.bg[2],
-                [vars.color.border]: solid.border[3],
-                [vars.color.code.bg]: solid.bg[3],
-                [vars.color.code.fg]: solid.fg[4],
-                [vars.color.fg]: solid.fg[0],
-                [vars.color.muted.bg]: solid.bg[3],
-                [vars.color.muted.fg]: solid.fg[4],
-              },
-            },
-
-            [`&.${modes.default}:not([data-disabled])[data-selected]`]: {
-              vars: {
-                [vars.color.bg]: solid.bg[2],
-                [vars.color.border]: solid.border[3],
-                [vars.color.code.bg]: solid.bg[3],
-                [vars.color.code.fg]: solid.fg[4],
-                [vars.color.fg]: solid.fg[0],
-                [vars.color.muted.bg]: solid.bg[3],
-                [vars.color.muted.fg]: solid.fg[4],
-              },
-            },
-
-            [`&.${modes.default}[data-disabled]`]: {
-              vars: {
-                ..._fromEntries(
-                  AVATAR_COLORS.map((c) => [
-                    vars.color.avatar[c].bg,
-                    vars.color.tinted.default.bg[3],
-                  ]),
-                ),
-
-                [vars.color.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.border]: vars.color.tinted.default.border[1],
-                [vars.color.code.bg]: vars.color.tinted.default.bg[2],
-                [vars.color.code.fg]: vars.color.tinted.default.border[4],
-                [vars.color.fg]: vars.color.tinted.default.border[4],
-                [vars.color.muted.bg]: vars.color.tinted.default.bg[2],
-                [vars.color.muted.fg]: vars.color.tinted.default.border[4],
-              },
-            },
-
-            // ghost
-
-            [`&.${modes.ghost}`]: {
-              vars: {
-                [vars.color.bg]: `color-mix(in srgb, transparent, ${tinted.bg[1]} 50%)`,
-                [vars.color.border]: tinted.border[0],
-                [vars.color.fg]: tinted.fg[2],
-                [vars.color.code.bg]: tinted.bg[2],
-                [vars.color.code.fg]: tinted.fg[4],
-                [vars.color.muted.bg]: tinted.bg[2],
-                [vars.color.muted.fg]: tinted.fg[4],
-                [vars.button.boxShadow]:
-                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
-              },
-            },
-
-            [`&.${modes.ghost}:not([data-disabled]):hover`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[1],
-                [vars.color.border]: tinted.border[1],
-                [vars.color.code.bg]: tinted.bg[3],
-                [vars.color.code.fg]: tinted.fg[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[3],
-                [vars.color.muted.fg]: tinted.fg[3],
-              },
-            },
-
-            [`&.${modes.ghost}:not([data-disabled]):active`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[2],
-                [vars.color.border]: tinted.border[2],
-                [vars.color.code.bg]: tinted.bg[4],
-                [vars.color.code.fg]: tinted.fg[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[4],
-                [vars.color.muted.fg]: tinted.fg[3],
-                [vars.button.boxShadow]:
-                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
-              },
-            },
-
-            [`&.${modes.ghost}:not([data-disabled])[data-selected]`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[2],
-                [vars.color.border]: tinted.border[2],
-                [vars.color.code.bg]: tinted.bg[4],
-                [vars.color.code.fg]: tinted.fg[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[4],
-                [vars.color.muted.fg]: tinted.fg[3],
-                [vars.button.boxShadow]:
-                  `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`,
-              },
-            },
-
-            [`&.${modes.ghost}[data-disabled]`]: {
-              vars: {
-                ..._fromEntries(
-                  AVATAR_COLORS.map((c) => [
-                    vars.color.avatar[c].bg,
-                    vars.color.tinted.default.bg[2],
-                  ]),
-                ),
-
-                [vars.color.bg]: vars.color.tinted.default.bg[0],
-                [vars.color.border]: vars.color.tinted.default.border[0],
-                [vars.color.code.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.code.fg]: vars.color.tinted.default.border[3],
-                [vars.color.fg]: vars.color.tinted.default.border[4],
-                [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.muted.fg]: vars.color.tinted.default.border[3],
-              },
-            },
-
-            // bleed
-
-            [`&.${modes.bleed}`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[0],
-                [vars.color.border]: tinted.border[1],
-                [vars.color.fg]: tinted.fg[2],
-                [vars.color.muted.bg]: tinted.bg[1],
-                [vars.color.muted.fg]: tinted.fg[4],
-                [vars.button.boxShadow]: 'none',
-              },
-            },
-
-            [`&.${modes.bleed}:not([data-disabled]):hover`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[1],
-                [vars.color.border]: tinted.border[2],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[2],
-                [vars.color.muted.fg]: tinted.fg[3],
-              },
-            },
-
-            [`&.${modes.bleed}:not([data-disabled]):active`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[2],
-                [vars.color.border]: tinted.border[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[3],
-                [vars.color.muted.fg]: tinted.fg[3],
-              },
-            },
-
-            [`&.${modes.bleed}:not([data-disabled])[data-selected]`]: {
-              vars: {
-                [vars.color.bg]: tinted.bg[2],
-                [vars.color.border]: tinted.border[3],
-                [vars.color.fg]: tinted.fg[1],
-                [vars.color.muted.bg]: tinted.bg[3],
-                [vars.color.muted.fg]: tinted.fg[3],
-              },
-            },
-
-            [`&.${modes.bleed}[data-disabled]`]: {
-              vars: {
-                ..._fromEntries(
-                  AVATAR_COLORS.map((c) => [
-                    vars.color.avatar[c].bg,
-                    vars.color.tinted.default.bg[2],
-                  ]),
-                ),
-
-                [vars.color.bg]: vars.color.tinted.default.bg[0],
-                [vars.color.border]: vars.color.tinted.default.border[0],
-                [vars.color.code.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.code.fg]: vars.color.tinted.default.border[3],
-                [vars.color.fg]: vars.color.tinted.default.border[4],
-                [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
-                [vars.color.muted.fg]: vars.color.tinted.default.border[3],
-              },
-            },
-          },
-        }),
-      ]
-    }),
-  ),
-}

package/src/css/primitives/button/button.ts

@@ -1,26 +0,0 @@
-import {_composeClassNames} from '../../_composeClassNames'
-import {display} from '../../props/display/display'
-import {flex} from '../../props/flex/flex'
-import {radius} from '../../props/radius/radius'
-import {width} from '../../props/width/width'
-import {loadingBox, modes, root, tones} from './button.css'
-import type {ButtonStyleProps} from './types'
-
-/** @public */
-export function button(props: ButtonStyleProps): string | undefined {
-  return _composeClassNames(
-    props.className,
-    root,
-    modes[props.mode ?? 'default'],
-    tones[props.tone ?? 'default'],
-    display({display: 'flex'}),
-    flex(props),
-    radius(props),
-    width(props),
-  )
-}
-
-/** @public */
-export function buttonLoadingBox(): string {
-  return loadingBox
-}

package/src/css/primitives/button/types.ts

@@ -1,12 +0,0 @@
-import type {ButtonMode, ElementTone} from '@sanity/ui/theme'
-
-import type {FlexStyleProps} from '../../props/flex/types'
-import type {RadiusStyleProps} from '../../props/radius/types'
-import type {WidthStyleProps} from '../../props/width/types'
-
-/** @public */
-export interface ButtonStyleProps extends FlexStyleProps, RadiusStyleProps, WidthStyleProps {
-  className?: string
-  mode?: ButtonMode
-  tone?: ElementTone
-}

package/src/css/primitives/card/__workshop__/Color.tsx

@@ -1,83 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-object-type */
-
-import {Box, Card, Code} from '@sanity/ui'
-import {vars} from '@sanity/ui/css'
-import {
-  CARD_TONES,
-  type CardTone,
-  COLOR_SCHEMES,
-  COLOR_VARIANTS,
-  type ColorScheme,
-  type ColorVariant,
-} from '@sanity/ui/theme'
-import {useSelect} from '@sanity/ui-workshop'
-import {useState} from 'react'
-
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop'
-
-interface ColorRecordNode extends Record<string, ColorNode> {}
-
-type ColorNode = string | ColorRecordNode
-
-export default function ColorStory(): React.JSX.Element {
-  // @ts-expect-error - TODO: fix this
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
-
-  return (
-    <Card
-      display="flex"
-      flexDirection="column"
-      gap={4}
-      padding={4}
-      // @ts-expect-error - TODO: fix this
-      tone={tone}
-    >
-      {Object.entries(vars.color).map(([key, value]) => {
-        if (key === 'palette') {
-          return null
-        }
-
-        if (COLOR_SCHEMES.includes(key as ColorScheme)) {
-          return null
-        }
-
-        if (CARD_TONES.includes(key as CardTone)) {
-          return null
-        }
-
-        if (COLOR_VARIANTS.includes(key as ColorVariant)) {
-          // return null
-        }
-
-        return <ColorBox key={key} node={{key, value}} />
-      })}
-    </Card>
-  )
-}
-
-function ColorBox({node}: {node: {key: string; value: ColorNode}}) {
-  const {key, value} = node
-  const [open, setOpen] = useState(true)
-
-  if (typeof value === 'string') {
-    return (
-      <Box radius={2} padding={3} style={{backgroundColor: value}}>
-        <Code size={1}>{key}</Code>
-      </Box>
-    )
-  }
-
-  return (
-    <Box overflow="hidden" radius={3} shadow={1}>
-      <Card as="button" onClick={() => setOpen(!open)} padding={3} tone="inherit">
-        <Code size={1}>{`${key} +`}</Code>
-      </Card>
-
-      <Box display="flex" flexDirection="column" gap={3} hidden={!open} padding={3}>
-        {Object.entries(value).map(([key, value]) => (
-          <ColorBox key={key} node={{key, value}} />
-        ))}
-      </Box>
-    </Box>
-  )
-}

package/src/css/primitives/card/__workshop__/index.ts

@@ -1,16 +0,0 @@
-import type {WorkshopScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-const scope: WorkshopScope = {
-  name: 'css/card',
-  title: 'Card',
-  stories: [
-    {
-      name: 'color',
-      title: 'Color',
-      component: lazy(() => import('./Color')),
-    },
-  ],
-}
-
-export default scope