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

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/code/styles.ts

@@ -1,83 +0,0 @@
-import {purple, green, yellow, orange, cyan, gray, red, blue, magenta} from '@sanity/color'
-import {css} from 'styled-components'
-import {ThemeColorSchemeKey} from '../../theme'
-import {cssVars} from '../../theme/lib/theme/color/cssVariables/createCssVars'
-
-function codeSyntaxHighlightingStyle(scheme: ThemeColorSchemeKey) {
-  const dark = scheme === 'dark'
-  const mainShade = dark ? 400 : 600
-  const secondaryShade = dark ? 600 : 400
-
-  return {
-    '&.atrule': {color: purple[mainShade].hex},
-    '&.attr-name': {color: green[mainShade].hex},
-    '&.attr-value': {color: yellow[mainShade].hex},
-    '&.attribute': {color: yellow[mainShade].hex},
-    '&.boolean': {color: purple[mainShade].hex},
-    '&.builtin': {color: purple[mainShade].hex},
-    '&.cdata': {color: yellow[mainShade].hex},
-    '&.char': {color: yellow[mainShade].hex},
-    '&.class': {color: orange[mainShade].hex},
-    '&.class-name': {color: cyan[mainShade].hex},
-    '&.comment': {color: gray[secondaryShade].hex},
-    '&.constant': {color: purple[mainShade].hex},
-    '&.deleted': {color: red[mainShade].hex},
-    '&.doctype': {color: gray[secondaryShade].hex},
-    '&.entity': {color: red[mainShade].hex},
-    '&.function': {color: green[mainShade].hex},
-    '&.hexcode': {color: blue[mainShade].hex},
-    '&.id': {color: purple[mainShade].hex},
-    '&.important': {color: purple[mainShade].hex},
-    '&.inserted': {color: yellow[mainShade].hex},
-    '&.keyword': {color: magenta[mainShade].hex},
-    '&.number': {color: purple[mainShade].hex},
-    '&.operator': {color: magenta[mainShade].hex},
-    '&.prolog': {color: gray[secondaryShade].hex},
-    '&.property': {color: blue[mainShade].hex},
-    '&.pseudo-class': {color: yellow[mainShade].hex},
-    '&.pseudo-element': {color: yellow[mainShade].hex},
-    '&.punctuation': {color: gray[mainShade].hex},
-    '&.regex': {color: blue[mainShade].hex},
-    '&.selector': {color: red[mainShade].hex},
-    '&.string': {color: yellow[mainShade].hex},
-    '&.symbol': {color: purple[mainShade].hex},
-    '&.tag': {color: red[mainShade].hex},
-    '&.unit': {color: orange[mainShade].hex},
-    '&.url': {color: red[mainShade].hex},
-    '&.variable': {color: red[mainShade].hex},
-  }
-}
-
-export interface CodeBaseStyleProps {
-  $scheme: ThemeColorSchemeKey
-}
-
-export function codeBaseStyle(props: CodeBaseStyleProps): ReturnType<typeof css> {
-  return css`
-    color: ${cssVars.default['text-code']};
-
-    & code {
-      font-family: inherit;
-
-      &.refractor .token {
-        ${codeSyntaxHighlightingStyle(props.$scheme)}
-      }
-    }
-
-    & a {
-      color: inherit;
-      text-decoration: underline;
-      border-radius: 1px;
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `
-}

package/src/primitives/popover/popoverArrow.tsx

@@ -1,77 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {cssVars} from '../../theme'
-import {DEFAULT_POPOVER_ARROW_HEIGHT, DEFAULT_POPOVER_ARROW_WIDTH} from './constants'
-
-const Root = styled.div`
-  position: absolute;
-  pointer-events: none;
-  width: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
-  height: ${DEFAULT_POPOVER_ARROW_WIDTH}px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    display: block;
-    transform-origin: ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px ${DEFAULT_POPOVER_ARROW_WIDTH / 2}px;
-  }
-
-  [data-placement^='top'] > & {
-    bottom: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
-  }
-
-  [data-placement^='right'] > & {
-    left: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
-
-    & > svg {
-      transform: rotate(90deg);
-    }
-  }
-
-  [data-placement^='left'] > & {
-    right: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
-
-    & > svg {
-      transform: rotate(-90deg);
-    }
-  }
-
-  [data-placement^='bottom'] > & {
-    top: -${DEFAULT_POPOVER_ARROW_WIDTH}px;
-
-    & > svg {
-      transform: rotate(180deg);
-    }
-  }
-`
-
-const BorderPath = styled.path`
-  fill: ${cssVars.default['base-shadow-outline-color']};
-`
-
-const ShapePath = styled.path`
-  fill: ${cssVars.mutable['bg-color']};
-`
-
-export const PopoverArrow = forwardRef(function PopoverArrow(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  return (
-    <Root data-ui="Popover__arrow" {...props} ref={ref}>
-      <svg
-        width={DEFAULT_POPOVER_ARROW_WIDTH}
-        height={DEFAULT_POPOVER_ARROW_HEIGHT}
-        viewBox="0 0 27 11"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <BorderPath d="M1.18708 1C3.29803 1.0011 5.29585 1.95479 6.62414 3.59561L11.1683 9.20895C12.369 10.6922 14.631 10.6922 15.8317 9.20894L20.3759 3.59561C21.7042 1.95478 23.702 1.0011 25.8129 1H21.9436C21.0533 1.49255 20.2545 2.15618 19.5986 2.96641L15.0545 8.57975C14.254 9.56855 12.746 9.56855 11.9455 8.57975L7.40139 2.96642C6.74548 2.15618 5.94673 1.49255 5.05643 1H1.18708Z" />
-        <ShapePath d="M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z" />
-      </svg>
-    </Root>
-  )
-})

package/src/primitives/switch/__workshop__/props.tsx

@@ -1,41 +0,0 @@
-import {Flex, Switch, useTheme} from '@sanity/ui'
-import {useBoolean, useNumber} from '@sanity/ui-workshop'
-import {useCallback, useMemo} from 'react'
-import {ThemeProvider} from 'styled-components'
-
-export default function PropsStory() {
-  const checked = useBoolean('Checked', false)
-  const indeterminate = useBoolean('Indeterminate', false)
-  const readOnly = useBoolean('Read only', false)
-  const theme = useTheme()
-  const focusRingOffset = useNumber('Focus ring offset', theme.sanity.input.switch.focusRing.offset)
-  const focusRingWidth = useNumber('Focus ring width', theme.sanity.input.switch.focusRing.width)
-  const handleChange = useCallback(() => undefined, [])
-
-  const customTheme = useMemo(
-    () => ({
-      ...theme,
-      sanity: {
-        ...theme.sanity,
-        focusRing: {
-          offset: focusRingOffset || theme.sanity.input.switch.focusRing.offset,
-          width: focusRingWidth || theme.sanity.input.switch.focusRing.width,
-        },
-      },
-    }),
-    [focusRingOffset, focusRingWidth, theme],
-  )
-
-  return (
-    <ThemeProvider theme={customTheme}>
-      <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-        <Switch
-          checked={checked}
-          indeterminate={indeterminate}
-          onChange={handleChange}
-          readOnly={readOnly}
-        />
-      </Flex>
-    </ThemeProvider>
-  )
-}

package/src/primitives/text/__workshop__/colored.tsx

@@ -1,27 +0,0 @@
-import {Flex, Text, useTheme} from '@sanity/ui'
-import {useSelect} from '@sanity/ui-workshop'
-import styled, {css} from 'styled-components'
-import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
-import {useToneContext} from '../../../theme/toneContext/useToneContext'
-import {spotColor} from '../../avatar/spotColors'
-
-const ColoredText = styled(Text)<{color: string}>((props: {color: string}) => {
-  return css`
-    color: ${props.color};
-  `
-})
-
-export default function ColoredTextStory() {
-  const theme = useTheme()
-  const selectedColor = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'gray')
-  const {scheme} = useToneContext()
-  const color = spotColor[selectedColor ?? 'gray'][scheme]
-
-  return (
-    <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText align="center" color={color.hex} size={4} theme={theme} weight="bold">
-        {color.title}
-      </ColoredText>
-    </Flex>
-  )
-}

package/src/primitives/tooltip/__workshop__/index.ts

@@ -1,14 +0,0 @@
-import {defineScope} from '@sanity/ui-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'primitives/tooltip',
-  title: 'Tooltip',
-  stories: [
-    {
-      name: 'props',
-      title: 'Props',
-      component: lazy(() => import('./props')),
-    },
-  ],
-})

package/src/primitives/tooltip/constants.ts

@@ -1,16 +0,0 @@
-import {Placement} from '@floating-ui/react-dom'
-
-export const DEFAULT_FALLBACK_PLACEMENTS: Record<Placement, Placement[]> = {
-  top: ['bottom', 'left', 'right'],
-  'top-start': ['bottom-start', 'left-start', 'right-start'],
-  'top-end': ['bottom-end', 'left-end', 'right-end'],
-  bottom: ['top', 'left', 'right'],
-  'bottom-start': ['top-start', 'left-start', 'right-start'],
-  'bottom-end': ['top-end', 'left-end', 'right-end'],
-  left: ['right', 'top', 'bottom'],
-  'left-start': ['right-start', 'top-start', 'bottom-start'],
-  'left-end': ['right-end', 'top-end', 'bottom-end'],
-  right: ['left', 'top', 'bottom'],
-  'right-start': ['left-start', 'top-start', 'bottom-start'],
-  'right-end': ['left-end', 'top-end', 'bottom-end'],
-}

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -1,90 +0,0 @@
-import {forwardRef} from 'react'
-import styled from 'styled-components'
-import {cssVars} from '../../theme'
-
-const Root = styled.div`
-  position: absolute;
-  pointer-events: none;
-  width: 15px;
-  height: 15px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    display: block;
-    transform-origin: 7.5px 7.5px;
-  }
-
-  /* position: absolute;
-  width: 15px;
-  height: 15px;
-  fill: none;
-
-  :empty + & {
-    display: none;
-  }
-
-  & > svg {
-    &:not([hidden]) {
-      display: block;
-    }
-    transform-origin: 7.5px 7.5px;
-  } */
-
-  [data-placement^='top'] > & {
-    bottom: -27px;
-  }
-
-  [data-placement^='right'] > & {
-    left: -27px;
-
-    & > svg {
-      transform: rotate(90deg);
-    }
-  }
-
-  [data-placement^='left'] > & {
-    right: -27px;
-
-    & > svg {
-      transform: rotate(-90deg);
-    }
-  }
-
-  [data-placement^='bottom'] > & {
-    top: -27px;
-
-    & > svg {
-      transform: rotate(180deg);
-    }
-  }
-`
-
-const Border = styled.path`
-  fill: ${cssVars.default['base-shadow-outline-color']};
-`
-
-const Shape = styled.path`
-  fill: ${cssVars.mutable['bg-color']};
-`
-
-interface TooltipArrowProps {}
-
-export const TooltipArrow = forwardRef(function TooltipArrow(
-  props: TooltipArrowProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
-  ref: React.ForwardedRef<HTMLDivElement>,
-) {
-  const {...restProps} = props
-
-  return (
-    <Root data-ui="Tooltip__arrow" {...restProps} ref={ref}>
-      <svg width="15" height="15" viewBox="0 0 15 15">
-        <Border d="M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z" />
-        <Shape d="M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z" />
-      </svg>
-    </Root>
-  )
-})

package/src/styles/border/borderStyle.ts

@@ -1,58 +0,0 @@
-import {cssVars} from '../../theme'
-import {CSSObject} from '../../types/styled'
-import {_responsive} from '../helpers'
-import {ThemeProps} from '../types'
-import {ResponsiveBorderStyleProps} from './types'
-
-const BORDER_VALUE = `1px solid ${cssVars.default['border-base']}`
-
-export function responsiveBorderStyle(): Array<
-  (props: ResponsiveBorderStyleProps & ThemeProps) => CSSObject[]
-> {
-  return [border, borderTop, borderRight, borderBottom, borderLeft]
-}
-
-function border(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$border, (value) =>
-    value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}},
-  )
-}
-
-function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$borderTop, (value) =>
-    value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}},
-  )
-}
-
-function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$borderRight, (value) =>
-    value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}},
-  )
-}
-
-function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$borderBottom, (value) =>
-    value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}},
-  )
-}
-
-function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
-  const {theme} = props
-  const {media} = theme.sanity
-
-  return _responsive(media, props.$borderLeft, (value) =>
-    value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}},
-  )
-}

package/src/styles/colorVars/colorVarsStyle.ts

@@ -1,84 +0,0 @@
-import {ThemeColorToneKey, cssVars} from '../../theme'
-import {mutableCardVariables} from '../../theme/lib/theme/color/cssVariables/cardVariables'
-import {getToneCssVar} from '../../theme/lib/theme/color/cssVariables/tones'
-import {CSSObject} from '../../types/styled'
-
-/**
- * @internal
- * Card overrides in disabled states
- */
-export function _colorVarStyleDisabled(checkered = false): CSSObject {
-  return {
-    [getToneCssVar('default', 'text-link')]: cssVars.default['text-secondary'],
-    [getToneCssVar('default', 'text-accent')]: cssVars.default['text-secondary'],
-    [getToneCssVar('default', 'text-code')]: cssVars.default['text-secondary'],
-    [getToneCssVar('default', 'text-primary')]: cssVars.default['text-secondary'],
-
-    [mutableCardVariables['fg-color']]: cssVars.primary['text-secondary'],
-    [mutableCardVariables['muted-fg-color']]: cssVars.primary['text-secondary'],
-    [mutableCardVariables['icon-color']]: cssVars.primary['border-base'],
-    [mutableCardVariables['accent-color']]: cssVars.primary['base-bg-card'],
-    [mutableCardVariables['bg-color']]: cssVars.primary['bg-tint'],
-    [mutableCardVariables['bg-image']]: checkered
-      ? `repeating-conic-gradient(${cssVars.default['base-bg-card']} 0% 25%, ${cssVars.default['bg-tint']} 0% 50%)`
-      : undefined,
-  }
-}
-
-/**
- * @internal
- * Card overrides in selected states
- */
-export function _colorVarStyleSelected(): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: cssVars.default['bg-accent'],
-    [mutableCardVariables['fg-color']]: cssVars.default['bg-base'],
-    [mutableCardVariables['muted-fg-color']]: cssVars.default['base-bg-card'],
-    [mutableCardVariables['accent-color']]: cssVars.default['base-bg-card'],
-    [mutableCardVariables['icon-color']]: cssVars.primary['bg-base'],
-  }
-}
-
-/**
- * @internal
- * Card overrides in hover
- */
-export function _colorVarStyleHover(): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-hover'],
-    [getToneCssVar('default', 'bg-tint')]: cssVars.default['bg-base-active'],
-  }
-}
-
-/**
- * @internal
- * Card overrides in active / pressed states
- */
-export function _colorVarStyleActive(): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: cssVars.default['bg-base-active'],
-  }
-}
-
-/**
- * @internal
- * Selectable needs to redefine bg-color and fg-color
- */
-export function _selectableVarStyle(tone: ThemeColorToneKey): CSSObject {
-  return {
-    [mutableCardVariables['bg-color']]: 'inherit',
-    [mutableCardVariables['fg-color']]:
-      tone === 'default' ? cssVars.default['text-primary'] : cssVars.default['text-secondary'],
-  }
-}
-
-/**
- * @internal
- * Selectable overrides in disabled states, same as card but with different bg-color
- */
-export function _selectableVarStyleDisabled(): CSSObject {
-  return {
-    ..._colorVarStyleDisabled(),
-    [mutableCardVariables['bg-color']]: undefined,
-  }
-}

package/src/styles/colorVars/index.ts

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