@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

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

@@ -1,172 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {rem, ThemeProps} from '../../_compat'
-import {focusRingStyle} from '../../_compat/styles/internal'
-import {css} from '../../lib/styled'
-
-/* Root */
-// export function switchBaseStyles(): ReturnType<typeof css> {
-//   return css`
-//     position: relative;
-//     &:not([hidden]) {
-//       display: inline-block;
-//     }
-//   `
-// }
-
-/* Input */
-export function switchInputStyles(): ReturnType<typeof css> {
-  // Visually hide the input element while keeping it interactive
-  return css`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    height: 100%;
-    width: 100%;
-    outline: none;
-    padding: 0;
-    margin: 0;
-
-    /* Place the input element above the representation element */
-    z-index: 1;
-  `
-}
-
-/* Representation */
-export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {color, input} = getTheme_v2(props.theme)
-
-  return css`
-    --switch-bg-color: ${color.input.default.enabled.border};
-    --switch-fg-color: ${color.input.default.enabled.bg};
-    --switch-box-shadow: none;
-
-    &:not([hidden]) {
-      display: block;
-    }
-    position: relative;
-    width: ${rem(input.switch.width)};
-    height: ${rem(input.switch.height)};
-    border-radius: ${rem(input.switch.height / 2)};
-
-    /* Make sure it’s not possible to interact with the wrapper element */
-    pointer-events: none;
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 1;
-      box-shadow: var(--switch-box-shadow);
-      border-radius: inherit;
-    }
-
-    /* Focus styles */
-    input:focus + && {
-      --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
-    }
-
-    input:focus:not(:focus-visible) + && {
-      --switch-box-shadow: none;
-    }
-
-    input:checked + && {
-      --switch-bg-color: ${color.input.default.enabled.fg};
-      --switch-fg-color: ${color.input.default.enabled.bg};
-    }
-
-    @media (hover: hover) {
-      input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.input.default.hovered.border};
-        --switch-fg-color: ${color.input.default.hovered.bg};
-      }
-
-      input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.input.default.enabled.fg};
-        --switch-fg-color: ${color.input.default.enabled.bg};
-      }
-    }
-
-    input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.input.default.disabled.border};
-      --switch-fg-color: ${color.input.default.disabled.bg};
-    }
-
-    input[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.input.default.readOnly.border};
-      --switch-fg-color: ${color.input.default.readOnly.bg};
-    }
-
-    input:checked[data-read-only]:disabled + && {
-      --switch-bg-color: ${color.input.default.readOnly.fg};
-      --switch-fg-color: ${color.input.default.readOnly.bg};
-    }
-  `
-}
-
-/* Track */
-export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
-  const {input} = getTheme_v2(props.theme)
-
-  return css`
-    &:not([hidden]) {
-      display: block;
-    }
-    background-color: var(--switch-bg-color);
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: ${rem(input.switch.width)};
-    height: ${rem(input.switch.height)};
-    border-radius: ${rem(input.switch.height / 2)};
-  `
-}
-
-/* Thumb */
-export function switchThumbStyles(
-  props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$indeterminate} = props
-  const {input} = getTheme_v2(props.theme)
-  const trackWidth = input.switch.width
-  const trackHeight = input.switch.height
-  const trackPadding = input.switch.padding
-  const size = trackHeight - input.switch.padding * 2
-  const checkedOffset = trackWidth - trackPadding * 2 - size
-  const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-  const checked = $indeterminate !== true && props.$checked === true
-
-  return css`
-    &:not([hidden]) {
-      display: block;
-    }
-    position: absolute;
-    left: ${rem(trackPadding)};
-    top: ${rem(trackPadding)};
-    height: ${rem(size)};
-    width: ${rem(size)};
-    border-radius: ${rem(size / 2)};
-    transition-property: transform;
-    transition-duration: ${input.switch.transitionDurationMs}ms;
-    transition-timing-function: ${input.switch.transitionTimingFunction};
-    background: var(--switch-fg-color);
-    transform: translate3d(0, 0, 0);
-    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-
-    ${checked &&
-    css`
-      transform: translate3d(${checkedOffset}px, 0, 0);
-    `}
-
-    ${$indeterminate &&
-    css`
-      transform: translate3d(${indeterminateOffset}px, 0, 0);
-    `}
-  `
-}

package/src/core/primitives/text/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

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

@@ -1,73 +0,0 @@
-import {getTheme_v2} from '@sanity/ui/theme'
-import {ThemeProps} from '../../_compat'
-import {css} from '../../lib/styled'
-
-export function textBaseStyle(
-  props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
-): ReturnType<typeof css> {
-  const {$accent, $muted} = props
-  const {font} = getTheme_v2(props.theme)
-
-  return css`
-    color: var(--card-fg-color);
-
-    ${$accent &&
-    css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted &&
-    css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-      background-color: var(--card-code-bg-color);
-      color: var(--card-code-fg-color);
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-      color: var(--card-link-color);
-      outline: none;
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &:focus {
-        box-shadow:
-          0 0 0 1px var(--card-bg-color),
-          0 0 0 3px var(--card-focus-ring-color);
-      }
-
-      &:focus:not(:focus-visible) {
-        box-shadow: none;
-      }
-    }
-
-    & strong {
-      font-weight: ${font.text.weights.bold};
-    }
-
-    & 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;
-      color: var(--card-icon-color);
-
-      & path {
-        vector-effect: non-scaling-stroke !important;
-      }
-    }
-  `
-}

package/src/core/primitives/textArea/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/textInput/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/primitives/textInput/__workshop__/multipleTones.tsx

@@ -1,20 +0,0 @@
-import {Card, Stack, TextInput} from '@sanity/ui'
-
-export default function MultipleTonesStory() {
-  return (
-    <Stack>
-      <Card padding={3} tone="primary">
-        <TextInput />
-      </Card>
-      <Card padding={3} tone="positive">
-        <TextInput />
-      </Card>
-      <Card padding={3} tone="caution">
-        <TextInput />
-      </Card>
-      <Card padding={3} tone="critical">
-        <TextInput />
-      </Card>
-    </Stack>
-  )
-}

package/src/core/primitives/tooltip/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/theme/__workshop__/.eslintrc

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  }
-}

package/src/core/theme/__workshop__/build/Root.tsx

@@ -1,367 +0,0 @@
-import {css, styled} from 'styled-components'
-import {getTheme_v2} from '../../../../theme'
-
-export const Root = styled.div((props) => {
-  const {button, card, input} = getTheme_v2(props.theme)
-
-  return css`
-    background: #000;
-    font-family:
-      Inter,
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      Oxygen,
-      Ubuntu,
-      Cantarell,
-      'Open Sans',
-      'Helvetica Neue',
-      sans-serif;
-    font-size: 13px;
-    line-height: 9px;
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    user-select: none;
-
-    pre {
-      font: inherit;
-      font-family: 'SF Mono', Menlo, monospace;
-      margin: 0;
-      padding: 0;
-    }
-
-    .base {
-      background-color: var(--bg);
-      color: var(--fg);
-    }
-
-    .button {
-      --border-width: ${button.border.width}px;
-
-      --bg: var(--button-enabled-bg);
-      --fg: var(--button-enabled-fg);
-      --icon: var(--button-enabled-icon);
-      --border: var(--button-enabled-border);
-      --muted-bg: var(--button-enabled-muted-bg);
-      --muted-fg: var(--button-enabled-muted-fg);
-      --accent-fg: var(--button-enabled-accent-fg);
-      --link-fg: var(--button-enabled-link-fg);
-      --code-bg: var(--button-enabled-code-bg);
-      --code-fg: var(--button-enabled-code-fg);
-      --skeleton-from: var(--button-enabled-skeleton-from);
-      --skeleton-to: var(--button-enabled-skeleton-to);
-
-      background-color: var(--bg);
-      color: var(--fg);
-      box-shadow: inset 0 0 0 var(--border-width) var(--border);
-      text-align: center;
-      border-radius: var(--radius-2);
-      font-weight: 500;
-      cursor: default;
-      transition: box-shadow 50ms ease-in-out;
-      outline: none;
-      justify-content: center;
-      align-items: center;
-
-      &:hover {
-        --bg: var(--button-hovered-bg);
-        --fg: var(--button-hovered-fg);
-        --icon: var(--button-hovered-icon);
-        --border: var(--button-hovered-border);
-        --muted-bg: var(--button-hovered-muted-bg);
-        --muted-fg: var(--button-hovered-muted-fg);
-        --accent-fg: var(--button-hovered-accent-fg);
-        --link-fg: var(--button-hovered-link-fg);
-        --code-bg: var(--button-hovered-code-bg);
-        --code-fg: var(--button-hovered-code-fg);
-        --skeleton-from: var(--button-hovered-skeleton-from);
-        --skeleton-to: var(--button-hovered-skeleton-to);
-      }
-
-      &:focus-visible {
-        box-shadow:
-          inset 0 0 0 var(--border-width) var(--border),
-          0 0 0 1px var(--base-bg),
-          0 0 0 3px var(--focus-ring);
-
-        --bg: var(--button-hovered-bg);
-        --fg: var(--button-hovered-fg);
-        --icon: var(--button-hovered-icon);
-        --border: var(--button-hovered-border);
-        --muted-bg: var(--button-hovered-muted-bg);
-        --muted-fg: var(--button-hovered-muted-fg);
-        --accent-fg: var(--button-hovered-accent-fg);
-        --link-fg: var(--button-hovered-link-fg);
-        --code-bg: var(--button-hovered-code-bg);
-        --code-fg: var(--button-hovered-code-fg);
-        --skeleton-from: var(--button-hovered-skeleton-from);
-        --skeleton-to: var(--button-hovered-skeleton-to);
-      }
-
-      &:active {
-        --bg: var(--button-pressed-bg);
-        --fg: var(--button-pressed-fg);
-        --icon: var(--button-pressed-icon);
-        --border: var(--button-pressed-border);
-        --muted-bg: var(--button-pressed-muted-bg);
-        --muted-fg: var(--button-pressed-muted-fg);
-        --accent-fg: var(--button-pressed-accent-fg);
-        --link-fg: var(--button-pressed-link-fg);
-        --code-bg: var(--button-pressed-code-bg);
-        --code-fg: var(--button-pressed-code-fg);
-        --skeleton-from: var(--button-pressed-skeleton-from);
-        --skeleton-to: var(--button-pressed-skeleton-to);
-      }
-
-      &.selected {
-        --bg: var(--button-selected-bg);
-        --fg: var(--button-selected-fg);
-        --icon: var(--button-selected-icon);
-        --border: var(--button-selected-border);
-        --muted-bg: var(--button-selected-muted-bg);
-        --muted-fg: var(--button-selected-muted-fg);
-        --accent-fg: var(--button-selected-accent-fg);
-        --link-fg: var(--button-selected-link-fg);
-        --code-bg: var(--button-selected-code-bg);
-        --code-fg: var(--button-selected-code-fg);
-        --skeleton-from: var(--button-selected-skeleton-from);
-        --skeleton-to: var(--button-selected-skeleton-to);
-      }
-
-      &.disabled {
-        --bg: var(--button-disabled-bg);
-        --fg: var(--button-disabled-fg);
-        --icon: var(--button-disabled-icon);
-        --border: var(--button-disabled-border);
-        --muted-bg: var(--button-disabled-muted-bg);
-        --muted-fg: var(--button-disabled-muted-fg);
-        --accent-fg: var(--button-disabled-accent-fg);
-        --link-fg: var(--button-disabled-link-fg);
-        --code-bg: var(--button-disabled-code-bg);
-        --code-fg: var(--button-disabled-code-fg);
-        --skeleton-from: var(--button-disabled-skeleton-from);
-        --skeleton-to: var(--button-disabled-skeleton-to);
-      }
-    }
-
-    .card {
-      --border-width: ${card.border.width}px;
-
-      --bg: var(--card-enabled-bg);
-      --fg: var(--card-enabled-fg);
-      --icon: var(--card-enabled-icon);
-      --border: var(--card-enabled-border);
-      --muted-bg: var(--card-enabled-muted-bg);
-      --muted-fg: var(--card-enabled-muted-fg);
-      --accent-fg: var(--card-enabled-accent-fg);
-      --link-fg: var(--card-enabled-link-fg);
-      --code-bg: var(--card-enabled-code-bg);
-      --code-fg: var(--card-enabled-code-fg);
-      --kbd-bg: var(--card-enabled-kbd-bg);
-      --skeleton-from: var(--card-enabled-skeleton-from);
-      --skeleton-to: var(--card-enabled-skeleton-to);
-
-      background-color: var(--bg);
-      color: var(--fg);
-      box-shadow: inset 0 0 0 var(--border-width) var(--border);
-      border-radius: var(--radius-2);
-      font-weight: 500;
-      cursor: default;
-      transition: box-shadow 50ms ease-in-out;
-      outline: none;
-
-      &:hover {
-        --bg: var(--card-hovered-bg);
-        --fg: var(--card-hovered-fg);
-        --icon: var(--card-hovered-icon);
-        --border: var(--card-hovered-border);
-        --muted-bg: var(--card-hovered-muted-bg);
-        --muted-fg: var(--card-hovered-muted-fg);
-        --accent-fg: var(--card-hovered-accent-fg);
-        --link-fg: var(--card-hovered-link-fg);
-        --code-bg: var(--card-hovered-code-bg);
-        --code-fg: var(--card-hovered-code-fg);
-        --skeleton-from: var(--card-hovered-skeleton-from);
-        --skeleton-to: var(--card-hovered-skeleton-to);
-      }
-
-      &:focus-visible {
-        box-shadow:
-          inset 0 0 0 var(--border-width) var(--border),
-          0 0 0 1px var(--base-bg),
-          0 0 0 3px var(--focus-ring);
-
-        /* --bg: var(--card-hovered-bg);
-        --fg: var(--card-hovered-fg);
-        --icon: var(--card-hovered-icon);
-        --border: var(--card-hovered-border);
-        --muted-bg: var(--card-hovered-muted-bg);
-        --muted-fg: var(--card-hovered-muted-fg);
-        --accent-fg: var(--card-hovered-accent-fg);
-        --link-fg: var(--card-hovered-link-fg);
-        --code-bg: var(--card-hovered-code-bg);
-        --code-fg: var(--card-hovered-code-fg);
-        --skeleton-from: var(--card-hovered-skeleton-from);
-        --skeleton-to: var(--card-hovered-skeleton-to); */
-      }
-
-      &:active {
-        --bg: var(--card-pressed-bg);
-        --fg: var(--card-pressed-fg);
-        --icon: var(--card-pressed-icon);
-        --border: var(--card-pressed-border);
-        --muted-bg: var(--card-pressed-muted-bg);
-        --muted-fg: var(--card-pressed-muted-fg);
-        --accent-fg: var(--card-pressed-accent-fg);
-        --link-fg: var(--card-pressed-link-fg);
-        --code-bg: var(--card-pressed-code-bg);
-        --code-fg: var(--card-pressed-code-fg);
-        --skeleton-from: var(--card-pressed-skeleton-from);
-        --skeleton-to: var(--card-pressed-skeleton-to);
-      }
-
-      &.selected {
-        --bg: var(--card-selected-bg);
-        --fg: var(--card-selected-fg);
-        --icon: var(--card-selected-icon);
-        --border: var(--card-selected-border);
-        --muted-bg: var(--card-selected-muted-bg);
-        --muted-fg: var(--card-selected-muted-fg);
-        --accent-fg: var(--card-selected-accent-fg);
-        --link-fg: var(--card-selected-link-fg);
-        --code-bg: var(--card-selected-code-bg);
-        --code-fg: var(--card-selected-code-fg);
-        --skeleton-from: var(--card-selected-skeleton-from);
-        --skeleton-to: var(--card-selected-skeleton-to);
-      }
-
-      &.disabled {
-        --bg: var(--card-disabled-bg);
-        --fg: var(--card-disabled-fg);
-        --icon: var(--card-disabled-icon);
-        --border: var(--card-disabled-border);
-        --muted-bg: var(--card-disabled-muted-bg);
-        --muted-fg: var(--card-disabled-muted-fg);
-        --accent-fg: var(--card-disabled-accent-fg);
-        --link-fg: var(--card-disabled-link-fg);
-        --code-bg: var(--card-disabled-code-bg);
-        --code-fg: var(--card-disabled-code-fg);
-        --skeleton-from: var(--card-disabled-skeleton-from);
-        --skeleton-to: var(--card-disabled-skeleton-to);
-      }
-    }
-
-    .input {
-      background-color: var(--bg);
-      color: var(--fg);
-      padding: var(--space-3);
-      box-shadow: inset 0 0 0 ${input.border.width}px var(--border);
-      font-size: 16px;
-      line-height: 11px;
-      border-radius: var(--radius-2);
-      cursor: default;
-      transition: box-shadow 50ms ease-in-out;
-
-      .placeholder {
-        color: var(--placeholder);
-      }
-
-      --bg: var(--input-enabled-bg);
-      --bg2: var(--input-enabled-bg2);
-      --fg: var(--input-enabled-fg);
-      --border: var(--input-enabled-border);
-      --placeholder: var(--input-enabled-placeholder);
-
-      &:hover {
-        --bg: var(--input-hovered-bg);
-        --bg2: var(--input-hovered-bg2);
-        --fg: var(--input-hovered-fg);
-        --border: var(--input-hovered-border);
-        --placeholder: var(--input-hovered-placeholder);
-      }
-
-      &:focus,
-      &.readOnly:focus {
-        outline: none;
-        box-shadow: inset 0 0 0 1px var(--focus-ring);
-
-        --bg: var(--input-hovered-bg);
-        --bg2: var(--input-hovered-bg2);
-        --fg: var(--input-hovered-fg);
-        --border: var(--input-hovered-border);
-        --placeholder: var(--input-hovered-placeholder);
-      }
-
-      &.readOnly {
-        --bg: var(--input-read-only-bg);
-        --bg2: var(--input-read-only-bg2);
-        --fg: var(--input-read-only-fg);
-        --border: var(--input-read-only-border);
-        --placeholder: var(--input-read-only-placeholder);
-      }
-
-      &.disabled {
-        --bg: var(--input-disabled-bg);
-        --bg2: var(--input-disabled-bg2);
-        --fg: var(--input-disabled-fg);
-        --border: var(--input-disabled-border);
-        --placeholder: var(--input-disabled-placeholder);
-      }
-    }
-
-    .bg2 {
-      background-color: var(--muted-bg);
-    }
-
-    .border {
-      border: 1px solid var(--border);
-    }
-
-    .icon {
-      color: var(--icon);
-    }
-
-    .muted {
-      color: var(--muted-fg);
-    }
-
-    .accent {
-      color: var(--accent-fg);
-    }
-
-    .link {
-      color: var(--link-fg);
-    }
-
-    .code {
-      background-color: var(--code-bg);
-      color: var(--code-fg);
-    }
-
-    .kbd {
-      background-color: var(--kbd-bg);
-      color: var(--kbd-fg);
-    }
-
-    .badge {
-      background-color: var(--badge-bg);
-      color: var(--badge-fg);
-    }
-
-    .badge--default {
-      --badge-bg: var(--badge-default-bg);
-      --badge-fg: var(--badge-default-fg);
-      --badge-border: var(--badge-default-border);
-    }
-
-    .skeleton-from {
-      color: var(--skeleton-from);
-    }
-
-    .skeleton-to {
-      color: var(--skeleton-to);
-    }
-  `
-})