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

package/src/primitives/button/styles.ts

@@ -1,166 +0,0 @@
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
-import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
-import {ButtonMode, ButtonTone} from '../../types'
-import {CSSObject} from '../../types/styled'
-
-/**
- * @internal
- */
-export function buttonBaseStyles(): ReturnType<typeof css> {
-  return css`
-    -webkit-font-smoothing: inherit;
-    appearance: none;
-    display: inline-flex;
-    align-items: center;
-    font: inherit;
-    border: 0;
-    outline: none;
-    user-select: none;
-    text-decoration: none;
-    border: 0;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    white-space: nowrap;
-    text-align: left;
-    position: relative;
-
-    & > span {
-      display: block;
-      flex: 1;
-      min-width: 0;
-      border-radius: inherit;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-      padding: 0;
-    }
-  `
-}
-
-const buttonTheme = {border: {width: 1}}
-const defaultBoxShadow = '0px 2px 0px 0px rgba(112, 128, 155, 0.19);'
-
-function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
-  return boxShadows.filter(Boolean).join(',')
-}
-
-/**
- * @internal
- */
-export function buttonColorStyles(
-  props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
-): CSSObject[] {
-  const {$mode, theme, $tone} = props
-  const {focusRing} = theme.sanity.button
-  const shadow = props.$mode !== 'bleed'
-  const border = {
-    width: buttonTheme.border.width,
-    color:
-      $mode === 'default'
-        ? cssVars[$tone]['bg-accent']
-        : $mode === 'ghost'
-        ? cssVars[$tone]['border-base']
-        : cssVars[$tone]['bg-base'],
-  }
-
-  return [
-    {
-      // This is going to be used by the text elements inside the button
-      [mutableCardVariables['fg-color']]:
-        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-primary'],
-      [mutableCardVariables['muted-fg-color']]:
-        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-secondary'],
-      [mutableCardVariables['icon-color']]:
-        $mode === 'default' ? cssVars[$tone]['icon-inverted'] : cssVars[$tone]['icon-default'],
-      [mutableCardVariables['bg-color']]:
-        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-base'],
-
-      // Override the default variables for elements used inside buttons
-      [getToneCssVar('default', 'bg-tint-code')]:
-        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-tint-code'],
-      ...($mode === 'default' && {
-        [getToneCssVar('default', 'text-code')]: cssVars[$tone]['base-text-color'],
-        [getToneCssVar('default', 'text-code')]: cssVars[$tone]['base-text-color'],
-        [getToneCssVar('default', 'text-link')]: cssVars[$tone]['base-text-color'],
-        [getToneCssVar('default', 'text-accent')]: cssVars[$tone]['base-text-color'],
-      }),
-
-      '&:disabled, &[data-disabled="true"]': {
-        /* Updates the variables for the */
-        [mutableCardVariables['fg-color']]: cssVars.primary['text-inactive'],
-        [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-inactive'],
-        [mutableCardVariables['icon-color']]: cssVars.primary['border-base'],
-        [mutableCardVariables['bg-color']]:
-          $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.default['bg-base'],
-      },
-    },
-    {
-      backgroundColor:
-        $mode === 'default' ? cssVars[$tone]['bg-accent'] : cssVars[$tone]['bg-base'],
-      color:
-        $mode === 'default' ? cssVars[$tone]['base-text-color'] : cssVars[$tone]['text-primary'],
-      boxShadow: focusRingBorderStyle(border),
-      '&:disabled, &[data-disabled="true"]': {
-        backgroundColor:
-          $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.default['bg-base'],
-        color: cssVars.primary['text-inactive'],
-        boxShadow: focusRingBorderStyle({
-          ...border,
-          color: $mode === 'default' ? cssVars.primary['bg-tint'] : cssVars.primary['border-base'],
-        }),
-      },
-      "&:not([data-disabled='true'])": {
-        boxShadow: combineBoxShadow(
-          focusRingBorderStyle(border),
-          shadow ? defaultBoxShadow : undefined,
-        ),
-        '&:focus': {
-          boxShadow: focusRingStyle({
-            base: {bg: cssVars.positive['border-accent']},
-            border: {width: 2, color: cssVars.default['bg-base']},
-            focusRing,
-          }),
-        },
-        '&:focus:not(:focus-visible)': {
-          boxShadow: combineBoxShadow(
-            focusRingBorderStyle(border),
-            shadow ? defaultBoxShadow : undefined,
-          ),
-        },
-        '@media (hover: hover)': {
-          '&:hover': {
-            backgroundColor:
-              $mode === 'default'
-                ? cssVars[$tone]['bg-accent-hover']
-                : cssVars[$tone]['bg-base-hover'],
-          },
-          '&:active': {
-            backgroundColor:
-              $mode === 'default'
-                ? cssVars[$tone]['bg-accent-active']
-                : cssVars[$tone]['bg-base-active'],
-          },
-          '&[data-hovered]': {
-            backgroundColor:
-              $mode === 'default'
-                ? cssVars[$tone]['bg-accent-hover']
-                : cssVars[$tone]['bg-base-hover'],
-          },
-        },
-        '&[data-selected]': {
-          backgroundColor:
-            $mode === 'default'
-              ? cssVars[$tone]['bg-accent-active']
-              : cssVars[$tone]['bg-base-active'],
-        },
-      },
-    },
-    theme.sanity.styles?.button?.root,
-  ].filter(Boolean) as CSSObject[]
-}

package/src/primitives/card/__workshop__/asButton.tsx

@@ -1,88 +0,0 @@
-import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
-
-export default function AsButtonStory() {
-  const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container>
-        <Grid columns={3} gap={2}>
-          <Box>
-            <Text align="center" size={1} weight="semibold">
-              Enabled
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  key={tone}
-                  padding={4}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text weight="semibold">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="semibold">
-              Disabled
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <Card
-                  __unstable_focusRing
-                  as="button"
-                  disabled
-                  key={tone}
-                  padding={4}
-                  style={{textAlign: 'center'}}
-                  tone={tone}
-                >
-                  <Stack space={2}>
-                    <Text weight="semibold">{title}</Text>
-                    <Text muted>Muted</Text>
-                    <Text accent>Accent</Text>
-                  </Stack>
-                </Card>
-              ))}
-            </Stack>
-          </Box>
-
-          <Box>
-            <Text align="center" size={1} weight="semibold">
-              Selected
-            </Text>
-            <Stack marginTop={3} space={2}>
-              {tones.map(([title, tone]) => (
-                <div aria-selected key={tone}>
-                  <Card
-                    __unstable_focusRing
-                    as="button"
-                    padding={4}
-                    style={{textAlign: 'center'}}
-                    tone={tone}
-                  >
-                    <Stack space={2}>
-                      <Text weight="semibold">{title}</Text>
-                      <Text muted>Muted</Text>
-                      <Text accent>Accent</Text>
-                    </Stack>
-                  </Card>
-                </div>
-              ))}
-            </Stack>
-          </Box>
-        </Grid>
-      </Container>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/asComponent.tsx

@@ -1,27 +0,0 @@
-import {Card, Flex, Text} from '@sanity/ui'
-import {forwardRef} from 'react'
-
-const CustomLink = forwardRef(function CustomLink(
-  props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,
-  ref: React.ForwardedRef<HTMLAnchorElement>,
-): React.ReactElement {
-  const {children, req, ...restProps} = props
-
-  return (
-    <a data-required={req} {...restProps} ref={ref}>
-      {children}
-    </a>
-  )
-})
-
-export default function AsComponentStory() {
-  const props = {href: '#'}
-
-  return (
-    <Flex align="center" height="fill" justify="center">
-      <Card as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
-        <Text>As component</Text>
-      </Card>
-    </Flex>
-  )
-}

package/src/primitives/card/__workshop__/selected.tsx

@@ -1,100 +0,0 @@
-import {EditIcon, PublishIcon} from '@sanity/icons'
-import {
-  Box,
-  Card,
-  Container,
-  Flex,
-  Inline,
-  Stack,
-  Text,
-  ThemeColorToneKey,
-  useRootTheme,
-} from '@sanity/ui'
-import {useBoolean} from '@sanity/ui-workshop'
-import styled, {css} from 'styled-components'
-import {mutableCardVariables} from '../../../theme/lib/theme/color/cssVariables/cardVariables'
-import {cssVars} from '../../../theme/lib/theme/color/cssVariables/createCssVars'
-
-const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(({
-  $tone,
-}: {
-  $tone: ThemeColorToneKey
-}) => {
-  return css`
-    &:not([data-selected]) {
-      ${mutableCardVariables['fg-color']}: ${$tone ? cssVars[$tone]['text-secondary'] : undefined};
-      ${mutableCardVariables['muted-fg-color']} ${$tone
-        ? cssVars[$tone]['text-secondary']
-        : undefined};
-    }
-
-    [data-ui='Card']:disabled & {
-      ${mutableCardVariables['fg-color']}: inherit;
-      ${mutableCardVariables['muted-fg-color']} inherit;
-    }
-  `
-})
-
-export default function SelectedStory() {
-  const disabled = useBoolean('Disabled', false) || false
-  const selected = useBoolean('Selected', false) || false
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Container width={0}>
-        <Stack space={1}>
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-          >
-            <Preview selected={selected} />
-          </Card>
-
-          <Card
-            __unstable_focusRing
-            as="button"
-            disabled={disabled}
-            padding={3}
-            radius={2}
-            selected={selected}
-            tone="critical"
-          >
-            <Preview selected={selected} />
-          </Card>
-        </Stack>
-      </Container>
-    </Flex>
-  )
-}
-
-function Preview({selected}: {selected: boolean}) {
-  const theme = useRootTheme()
-
-  return (
-    <Flex>
-      <Box flex={1}>
-        <Text>Title</Text>
-      </Box>
-      <Inline space={3}>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          $tone={theme.tone === 'default' ? 'caution' : 'default'}
-        >
-          <EditIcon />
-        </TextWithTone>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          $tone={theme.tone === 'default' ? 'positive' : 'default'}
-        >
-          <PublishIcon />
-        </TextWithTone>
-      </Inline>
-    </Flex>
-  )
-}

package/src/primitives/card/card.tsx

@@ -1,142 +0,0 @@
-import {forwardRef} from 'react'
-import {isValidElementType} from 'react-is'
-import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {
-  responsiveBorderStyle,
-  ResponsiveBorderStyleProps,
-  responsiveRadiusStyle,
-  ResponsiveRadiusStyleProps,
-  responsiveShadowStyle,
-  ResponsiveShadowStyleProps,
-} from '../../styles/internal'
-import {ThemeColorName, ThemeColorSchemeKey} from '../../theme'
-import {ToneProvider} from '../../theme/toneContext/toneProvider'
-import {useToneContext} from '../../theme/toneContext/useToneContext'
-import {CardTone} from '../../types'
-import {Box, BoxProps} from '../box'
-import {ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps} from '../types'
-import {cardStyle} from './styles'
-import {CardStyleProps} from './types'
-
-/**
- * @public
- */
-export interface CardProps
-  extends BoxProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  pressed?: boolean
-  scheme?: ThemeColorSchemeKey
-  tone?: CardTone
-  /**
-   * @internal
-   * Used by the popover, as it creates a new html element that it's ouside of the previous scope of the card.
-   * So if it's inheriting styles from the parent, it needs to create a new cars context
-   */
-  updateCssVars?: boolean
-}
-
-const Root = styled(Box)<
-  CardStyleProps &
-    ResponsiveRadiusStyleProps &
-    ResponsiveBorderStyleProps &
-    ResponsiveShadowStyleProps
->(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle)
-
-const Wrapper = ({
-  shouldAddContext,
-  scheme,
-  tone,
-  children,
-}: {
-  shouldAddContext: boolean
-  scheme: ThemeColorSchemeKey
-  tone: ThemeColorName
-  children: React.ReactElement
-}): React.ReactElement => {
-  // Avoid creating a new react context if the card is just inheriting styles from the parent.
-  if (shouldAddContext) {
-    return (
-      <ToneProvider scheme={scheme} tone={tone}>
-        {children}
-      </ToneProvider>
-    )
-  }
-
-  return children
-}
-
-/**
- * @public
- */
-export const Card = forwardRef(function Card(
-  props: CardProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {
-    __unstable_checkered: checkered = false,
-    __unstable_focusRing: focusRing = false,
-    as: asProp,
-    border,
-    borderTop,
-    borderRight,
-    borderBottom,
-    borderLeft,
-    pressed,
-    radius = 0,
-    scheme: schemeProp,
-    selected,
-    shadow,
-    tone: toneProp = 'default',
-    updateCssVars = false,
-    ...restProps
-  } = props
-
-  const as = isValidElementType(asProp) ? asProp : 'div'
-  const toneContext = useToneContext()
-  const tone = toneProp === 'inherit' ? toneContext.tone : toneProp
-  const scheme = schemeProp ?? toneContext.scheme
-  const shouldAddContext = scheme !== toneContext.scheme || tone !== toneContext.tone
-
-  return (
-    <Wrapper shouldAddContext={shouldAddContext} scheme={scheme} tone={tone}>
-      <Root
-        data-as={typeof as === 'string' ? as : undefined}
-        data-scheme={scheme}
-        data-ui="Card"
-        data-tone={tone}
-        $scheme={scheme ?? toneContext.scheme}
-        {...restProps}
-        $border={useArrayProp(border)}
-        $borderTop={useArrayProp(borderTop)}
-        $borderRight={useArrayProp(borderRight)}
-        $borderBottom={useArrayProp(borderBottom)}
-        $borderLeft={useArrayProp(borderLeft)}
-        $checkered={checkered}
-        $focusRing={focusRing}
-        $radius={useArrayProp(radius)}
-        $shadow={useArrayProp(shadow)}
-        $tone={tone}
-        $updateCssVars={updateCssVars || shouldAddContext}
-        data-checkered={checkered ? '' : undefined}
-        data-pressed={pressed ? '' : undefined}
-        data-selected={selected ? '' : undefined}
-        forwardedAs={as}
-        ref={ref}
-        selected={selected}
-      />
-    </Wrapper>
-  )
-})

package/src/primitives/card/styles.ts

@@ -1,160 +0,0 @@
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {
-  _colorVarStyleActive,
-  _colorVarStyleDisabled,
-  _colorVarStyleHover,
-  _colorVarStyleSelected,
-} from '../../styles/colorVars'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/focusRing'
-import {createCssVars, cssVars} from '../../theme/lib/theme/color/cssVariables'
-import {CardStyleProps} from './types'
-
-export function cardStyle(
-  props: CardStyleProps & ThemeProps,
-): Array<ReturnType<typeof css> | (() => ReturnType<typeof css>)> {
-  return [cardBaseStyle(props), cardColorStyle(props)]
-}
-
-export function cardBaseStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, theme} = props
-  const space = theme.sanity.space
-
-  return css`
-    ${$checkered &&
-    css`
-      background-size: ${space[3]}px ${space[3]}px;
-      background-position: 50% 50%;
-      background-image: ${cssVars.mutable['bg-image']};
-    `}
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      outline: none;
-      text-decoration: none;
-    }
-
-    /* &:is(pre) */
-    &[data-as='pre'] {
-      font: inherit;
-    }
-  `
-}
-
-export function cardColorStyle(props: CardStyleProps & ThemeProps): ReturnType<typeof css> {
-  const {$checkered, $focusRing, theme, $tone, $scheme, $updateCssVars} = props
-  const {focusRing} = theme.sanity.card
-
-  const border = {width: 0, color: cssVars.positive['border-accent']}
-
-  return css`
-    /* A new css vars context is created, allowing for override of the default tone and changing the scheme */
-    ${$updateCssVars && createCssVars($scheme, theme.sanity.color.tones, $tone)}
-    color-scheme: ${$scheme === 'dark' ? 'dark' : 'light'};
-    ${$checkered &&
-    `--card-bg-image: repeating-conic-gradient(${cssVars.default['base-bg-card']} 0% 25%, ${cssVars.default['bg-tint']} 0% 50%)`}
-
-    background-color: ${cssVars.mutable['bg-color']};
-    color: ${cssVars.default['text-primary']};
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      --card-focus-ring-box-shadow: none;
-
-      cursor: default;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &:disabled {
-        ${_colorVarStyleDisabled($checkered)}
-      }
-
-      &:not(:disabled) {
-        &[data-pressed] {
-          ${_colorVarStyleActive()}
-        }
-
-        &[data-selected] {
-          ${_colorVarStyleSelected()}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_colorVarStyleHover()}
-            }
-
-            &:active {
-              ${_colorVarStyleActive()}
-            }
-          }
-        }
-
-        &:focus {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({border, focusRing})
-            : undefined};
-        }
-
-        &:focus:not(:focus-visible) {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingBorderStyle(border) : undefined};
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      cursor: pointer;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &[data-disabled] {
-        ${_colorVarStyleDisabled($checkered)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_colorVarStyleActive()}
-        }
-
-        &[data-selected] {
-          ${_colorVarStyleSelected()}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_colorVarStyleHover()}
-            }
-
-            &:active {
-              ${_colorVarStyleActive()}
-            }
-          }
-        }
-
-        &:focus {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({border, focusRing})
-            : undefined};
-        }
-
-        &:focus:not(:focus-visible) {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingBorderStyle(border) : undefined};
-        }
-      }
-    }
-
-    ${theme.sanity.styles?.card?.root}
-  `
-}

package/src/primitives/card/types.ts

@@ -1,12 +0,0 @@
-import {ThemeColorSchemeKey, ThemeColorToneKey} from '../../theme'
-
-/**
- * @internal
- */
-export interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $tone: ThemeColorToneKey
-  $scheme: ThemeColorSchemeKey
-  $updateCssVars: boolean
-}