@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/src/core/components/tree/style.ts

@@ -1,104 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-
-export function treeItemRootStyle(): ReturnType<typeof css> {
-  return css`
-    &[role='none'] > [role='treeitem'] {
-      outline: none;
-      cursor: default;
-      border-radius: 3px;
-
-      background-color: var(--card-bg-color);
-      color: var(--treeitem-fg-color);
-
-      &:focus {
-        position: relative;
-      }
-    }
-
-    &[role='treeitem'] {
-      outline: none;
-
-      & > div {
-        cursor: default;
-        border-radius: 3px;
-
-        background-color: var(--card-bg-color);
-        color: var(--treeitem-fg-color);
-      }
-
-      &:focus > div {
-        position: relative;
-      }
-    }
-  `
-}
-
-export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
-  const $tone = 'default'
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.selectable[$tone]
-
-  return css`
-    &[role='none'] {
-      & > [role='treeitem'] {
-        ${_cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [role='treeitem'] {
-        ${_cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-          ${_cardColorStyle(color, tone.hovered)}
-        }
-
-        & > [role='treeitem']:focus {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-
-    &[role='treeitem'] {
-      & > [data-ui='TreeItem__box'] {
-        ${_cardColorStyle(color, tone.enabled)}
-      }
-
-      &[data-selected] > [data-ui='TreeItem__box'] {
-        ${_cardColorStyle(color, tone.pressed)}
-      }
-
-      @media (hover: hover) {
-        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-          ${_cardColorStyle(color, tone.hovered)}
-        }
-
-        &:focus > [data-ui='TreeItem__box'] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-      }
-    }
-  `
-}
-
-export interface TreeItemBoxStyleProps {
-  $level: number
-}
-
-export function treeItemBoxStyle(
-  props: TreeItemBoxStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$level} = props
-  const {space} = getTheme_v2(props.theme)
-
-  return css`
-    padding-left: ${rem(space[2] * $level)};
-
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}

package/src/core/primitives/_selectable/style.ts

@@ -1,114 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {SelectableTone} from '../../types'
-
-/**
- * @internal
- */
-export interface SelectableStyleProps {
-  $tone: SelectableTone
-}
-
-export function selectableBaseStyle(): ReturnType<typeof css> {
-  return css`
-    background-color: inherit;
-    color: inherit;
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      text-decoration: none;
-    }
-  `
-}
-
-export function selectableColorStyle(
-  props: SelectableStyleProps & ThemeProps,
-): ReturnType<typeof css> {
-  const {$tone} = props
-  const {color, style} = getTheme_v2(props.theme)
-  const tone = color.selectable[$tone]
-
-  return css`
-    ${_cardColorStyle(color, tone.enabled)}
-
-    background-color: var(--card-bg-color);
-    color: var(--card-fg-color);
-    outline: none;
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      &:disabled {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not(:disabled) {
-        &[aria-pressed='true'] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected],
-        &[aria-selected='true'] > & {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      &[data-disabled] {
-        ${_cardColorStyle(color, tone.disabled)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, tone.pressed)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, tone.selected)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, tone.hovered)}
-            }
-            &:active {
-              ${_cardColorStyle(color, tone.pressed)}
-            }
-          }
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `
-}

package/src/core/primitives/card/styles.ts

@@ -1,146 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingStyle} from '../../styles/focusRing'
-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} = props
-  const {space} = getTheme_v2(props.theme)
-
-  return css`
-    ${$checkered &&
-    css`
-      background-size: ${space[3]}px ${space[3]}px;
-      background-position: 50% 50%;
-      background-image: var(--card-bg-image);
-    `}
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      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, $muted} = props
-  const {card, color, style} = getTheme_v2(props.theme)
-  const border = {width: card.border.width, color: 'var(--card-border-color)'}
-
-  return css`
-    color-scheme: ${color._dark ? 'dark' : 'light'};
-
-    ${_cardColorStyle(color, color, $checkered)}
-
-    background-color: ${$muted ? 'var(--card-muted-bg-color)' : 'var(--card-bg-color)'};
-    color: var(--card-fg-color);
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      --card-focus-ring-box-shadow: none;
-
-      cursor: default;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &:disabled {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not(:disabled) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
-            : undefined};
-        }
-      }
-    }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      cursor: pointer;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &[data-disabled] {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing
-            ? focusRingStyle({base: color, border, focusRing: card.focusRing})
-            : undefined};
-        }
-      }
-    }
-
-    ${style?.card?.root}
-  `
-}

package/src/core/primitives/checkbox/styles.ts

@@ -1,127 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {css} from 'styled-components'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
-
-export function checkboxBaseStyles(): ReturnType<typeof css> {
-  return css`
-    position: relative;
-    display: inline-block;
-  `
-}
-
-export function inputElementStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input, radius} = getTheme_v2(props.theme)
-  const {focusRing} = input.checkbox
-
-  return css`
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    outline: none;
-    opacity: 0;
-    z-index: 1;
-    padding: 0;
-    margin: 0;
-
-    & + span {
-      position: relative;
-      display: block;
-      height: ${rem(input.checkbox.size)};
-      width: ${rem(input.checkbox.size)};
-      box-sizing: border-box;
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.border,
-        width: input.border.width,
-      })};
-      border-radius: ${rem(radius[2])};
-      line-height: 1;
-      background-color: ${color.input.default.enabled.bg};
-
-      & > svg {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        height: 100%;
-        width: 100%;
-
-        & > path {
-          vector-effect: non-scaling-stroke;
-          stroke-width: 1.5px !important;
-        }
-      }
-    }
-
-    &:checked + span {
-      background: ${color.input.default.enabled.fg};
-      box-shadow: ${focusRingBorderStyle({
-        color: color.input.default.enabled.fg,
-        width: input.border.width,
-      })};
-      color: ${color.input.default.enabled.bg};
-    }
-
-    /* focus */
-    &:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({focusRing})};
-    }
-
-    /* focus when checked - uses a different offset */
-    &:not(:disabled):focus:focus-visible&:checked + span {
-      box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})};
-    }
-
-    &[data-error] + span {
-      background-color: ${color.input.invalid.enabled.border};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.invalid.enabled.muted.bg,
-      })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &[data-error]&:checked + span {
-      background-color: ${color.input.invalid.enabled.muted.bg};
-      color: ${color.input.default.enabled.bg};
-    }
-    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {
-      box-shadow: ${focusRingStyle({
-        border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        focusRing: {width: 1, offset: 1},
-      })};
-    }
-
-    &:disabled + span {
-      background-color: ${color.input.default.disabled.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.default.disabled.border,
-      })};
-      color: ${color.input.default.disabled.fg};
-    }
-    &:disabled&:checked + span {
-      background-color: ${color.input.default.disabled.muted.bg};
-    }
-
-    &[data-read-only] + span {
-      background-color: ${color.input.default.readOnly.bg};
-      box-shadow: ${focusRingBorderStyle({
-        width: input.border.width,
-        color: color.input.default.readOnly.border,
-      })};
-      color: ${color.input.default.readOnly.fg};
-    }
-
-    &[data-read-only]&:checked + span {
-      background-color: ${color.input.default.readOnly.muted.bg};
-    }
-
-    &:checked + span > svg:first-child {
-      opacity: 1;
-    }
-    &:indeterminate + span > svg:last-child {
-      opacity: 1;
-    }
-  `
-}