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

package/src/css/components/toast/rules.ts

@@ -1,68 +1,17 @@
-// import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
-// import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
-// import {styled, keyframes, css} from '../../lib/styled'
-// import {Flex} from '../../primitives'
-// import {ThemeProps} from '../../styles'
-
-// const loadingAnimation = keyframes`
-//   0% {
-//     width: 0;
-//   }
-//   100% {
-//     width: 100%;
-//   }
-// `
-
-// const LOADING_BAR_HEIGHT = 2
-
-// export function rootStyles(
-//   props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {color} = getTheme_v2(props.theme)
-
-//   const loadingBarColor = color.button.default[props.tone].enabled.bg
-
-//   if (!props.$duration)
-//     return css`
-//       pointer-events: all;
-//       & > * {
-//         opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-//         will-change: opacity;
-//       }
-//     `
-
-//   return css`
-//     pointer-events: all;
-//     width: 100%;
-//     position: relative;
-//     overflow: hidden;
-//     overflow: clip;
-//     padding-bottom: ${LOADING_BAR_HEIGHT}px;
-//     &::before {
-//       content: '';
-//       position: absolute;
-//       bottom: 0px;
-//       height: ${LOADING_BAR_HEIGHT}px;
-//       background: ${loadingBarColor};
-//       animation-name: ${loadingAnimation};
-//       animation-duration: ${props.$duration}ms;
-//       animation-fill-mode: both;
-//     }
-
-//     & > * {
-//       opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-//       will-change: opacity;
-//     }
-//   `
-// }
-
-export {}
-
-// const ToastContainer = styled.div`
-//   box-sizing: border-box;
-//   position: absolute;
-//   right: 0;
-//   bottom: 0;
-//   max-width: 420px;
-//   width: 100%;
-// `
+import {Rules} from '../../types'
+
+export const toastRules: Rules = {
+  'toast-layer': {
+    position: 'fixed',
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'none',
+    maxWidth: '420px',
+    width: '100%',
+  },
+
+  'toast': {
+    pointerEvents: 'all',
+    overflow: ['hidden', 'clip'],
+  },
+}

package/src/css/components/toast/toast.ts

@@ -0,0 +1,21 @@
+import {composeClassNames} from '../../composeClassNames'
+
+export function toastLayer() {
+  return composeClassNames('toast-layer')
+}
+
+export function toast() {
+  return composeClassNames('toast')
+}
+
+export function toastLoadingBar() {
+  return composeClassNames('toast-loading-bar')
+}
+
+export function toastLoadingBarProgress() {
+  return composeClassNames('toast-loading-bar-progress')
+}
+
+export function toastLoadingBarMask() {
+  return composeClassNames('toast-loading-bar-mask')
+}

package/src/css/components/tree/rules.ts

@@ -1,4 +1,5 @@
 import {Rules} from '../../types'
+import {vars} from '../../vars'
 
 export const treeRules: Rules = {
   'tree-item': {
@@ -8,7 +9,7 @@ export const treeRules: Rules = {
         cursor: 'default',
         borderRadius: '3px',
 
-        backgroundColor: 'var(--card-bg-color)',
+        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
         color: 'var(--treeitem-fg-color)',
       },
 
@@ -24,7 +25,7 @@ export const treeRules: Rules = {
         cursor: 'default',
         borderRadius: '3px',
 
-        backgroundColor: 'var(--card-bg-color)',
+        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
         color: 'var(--treeitem-fg-color)',
       },
 

package/src/css/components/tree/tree.ts

@@ -1,5 +1,5 @@
 import {composeClassNames} from '../../composeClassNames'
 
-export function treeItem(): string {
+export function treeItem(): string | undefined {
   return composeClassNames('tree-item')
 }

package/src/css/composeClassNames.ts

@@ -1,3 +1,13 @@
-export function composeClassNames(...classNames: Array<string | false | undefined>): string {
-  return classNames.filter(Boolean).join(' ')
+export function composeClassNames(
+  ...classNames: Array<string | false | undefined>
+): string | undefined {
+  const names =
+    unique(classNames.map((n) => typeof n === 'string' && n.trim()).filter(Boolean)).join(' ') ||
+    undefined
+
+  return names
+}
+
+function unique<T>(array: T[]): T[] {
+  return Array.from(new Set(array))
 }

package/src/css/index.ts

@@ -1,14 +1,17 @@
+export * from '../theme/versioning/v3_v2'
+export * from './compile/compilePalette'
 export * from './compile/compileSystem'
 export * from './compile/compileTheme'
-
-export * from './composeClassNames'
-
 export * from './components/breadcrumbs'
 export * from './components/dialog'
 export * from './components/menu'
 export * from './components/skeleton'
+export * from './components/toast'
 export * from './components/tree'
-
+export * from './composeClassNames'
+export * from './primitives/_arrow'
+export * from './primitives/_input'
+export * from './primitives/_selectable'
 export * from './primitives/avatar'
 export * from './primitives/badge'
 export * from './primitives/box'
@@ -23,29 +26,15 @@ export * from './primitives/label'
 export * from './primitives/popover'
 export * from './primitives/radio'
 export * from './primitives/select'
-export * from './primitives/selectable'
 export * from './primitives/spinner'
 export * from './primitives/switch'
 export * from './primitives/text'
 export * from './primitives/textArea'
 export * from './primitives/textInput'
-// export * from './primitives/token'
 export * from './primitives/tooltip'
-
-export * from './styles/border/types'
-export * from './styles/gap/types'
-export * from './styles/flex/types'
-export * from './styles/flexItem/types'
-export * from './styles/font/types'
-export * from './styles/grid/types'
-export * from './styles/gridItem/types'
-export * from './styles/margin/types'
-export * from './styles/maxWidth/types'
-export * from './styles/overflow/types'
-export * from './styles/padding/types'
-export * from './styles/pointerEvents/types'
-export * from './styles/position/types'
-export * from './styles/radius/types'
-export * from './styles/width/types'
-
+export * from './styles'
 export * from './types'
+export * from './util'
+export * from './utils/srOnly'
+export * from './varNames'
+export * from './vars'

package/src/css/primitives/_arrow/_arrow.ts

@@ -0,0 +1,14 @@
+import {composeClassNames} from '../../composeClassNames'
+
+/** @internal */
+export function _arrow(): string | undefined {
+  return composeClassNames('arrow')
+}
+
+export function _arrowStroke(): string {
+  return 'arrow-stroke'
+}
+
+export function _arrowShape(): string {
+  return 'arrow-shape'
+}

package/src/css/primitives/_arrow/index.ts

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

package/src/css/primitives/_arrow/rules.ts

@@ -0,0 +1,71 @@
+import {Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const _arrowRules: Rules = {
+  'arrow': {
+    'position': 'absolute',
+
+    // todo: replace with vars?
+    'width': 'var(--arrow-size)',
+    'height': 'var(--arrow-size)',
+
+    '@nest': {
+      ':empty + &': {
+        display: 'none',
+      },
+
+      '& > svg': {
+        display: 'block',
+        transformOrigin: `calc(var(--arrow-size) / 2) calc(var(--arrow-size) / 2)`,
+      },
+
+      // top
+
+      '[data-placement^="top"] > &': {
+        bottom: 'calc(0px - var(--arrow-size))',
+      },
+
+      '[data-placement^="top"] > & svg': {
+        transform: 'rotate(0deg)',
+      },
+
+      // right
+
+      '[data-placement^="right"] > &': {
+        left: 'calc(0px - var(--arrow-size))',
+      },
+
+      '[data-placement^="right"] > & svg': {
+        transform: 'rotate(90deg)',
+      },
+
+      // left
+
+      '[data-placement^="left"] > &': {
+        right: 'calc(0px - var(--arrow-size))',
+      },
+
+      '[data-placement^="left"] > & svg': {
+        transform: 'rotate(-90deg)',
+      },
+
+      // bottom
+
+      '[data-placement^="bottom"] > &': {
+        top: 'calc(0px - var(--arrow-size))',
+      },
+
+      '[data-placement^="bottom"] > & svg': {
+        transform: 'rotate(180deg)',
+      },
+    },
+  },
+
+  'arrow-stroke': {
+    stroke: vars.color.shadow.outline,
+  },
+
+  'arrow-shape': {
+    fill: vars.color.bg,
+  },
+}

package/src/css/primitives/_input/index.ts

@@ -0,0 +1,2 @@
+export * from './input'
+export * from './types'

package/src/css/primitives/_input/input.ts

@@ -0,0 +1,25 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {radius, width} from '../../styles'
+import {InputStyleProps} from './types'
+
+/** @internal */
+export function _input(props: InputStyleProps): string | undefined {
+  return composeClassNames(
+    `input`,
+    _resp(`input`, props.fontSize),
+    props.border && `input-b`,
+    _resp(`input-p`, props.padding),
+    _resp(`input-g`, props.gap),
+    radius(props),
+    width(props),
+  )
+}
+
+export function _inputElement(): string {
+  return 'input-element'
+}
+
+export function _inputPresentation(): string {
+  return 'input-presentation'
+}

package/src/css/primitives/_input/rules.ts

@@ -0,0 +1,163 @@
+import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
+
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
+
+export const _inputRules: Rules = {
+  'input': {
+    position: 'relative',
+  },
+
+  'input-b': {
+    '@nest': {
+      '& .input-presentation': {
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
+      },
+    },
+  },
+
+  'input-element': {
+    '--color-input-fg': vars.color.tinted.default.fg[2],
+    '--color-input-placeholder': vars.color.tinted.default.border[4],
+
+    'WebkitFontSmoothing': 'inherit',
+    'appearance': 'none',
+    'border': 0,
+    'outline': 'none',
+    'margin': 0,
+    'fontFamily': vars.font.text.family,
+    'fontSize': vars.input.fontSize,
+    'lineHeight': vars.input.lineHeight,
+    'letterSpacing': vars.input.letterSpacing,
+    'backgroundColor': 'transparent',
+    'color': vars.color.input.fg,
+    'padding': [
+      'calc(var(--input-padding) - var(--input-ascender-height))',
+      'var(--input-padding)',
+      'calc(var(--input-padding) - var(--input-descender-height))',
+      'var(--input-padding)',
+    ].join(' '),
+    'borderRadius': 'inherit',
+    'position': 'relative',
+    'zIndex': 1,
+    'display': 'block',
+    'boxSizing': 'border-box',
+    'resize': 'none',
+    'width': ['-moz-available', '-webkit-fill-available', 'stretch'],
+
+    '@nest': {
+      '.input[data-icon-left] &': {
+        paddingLeft: `calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))`,
+      },
+
+      '.input[data-icon-right] &': {
+        paddingRight: `calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))`,
+      },
+
+      '&::placeholder': {
+        color: vars.color.input.placeholder,
+      },
+
+      '&:hover': {
+        [varNames.color.input.fg]: vars.color.tinted.default.fg[0],
+      },
+
+      '&:focus': {
+        [varNames.color.input.fg]: vars.color.tinted.default.fg[0],
+      },
+
+      '&:disabled': {
+        [varNames.color.input.fg]: vars.color.tinted.default.border[3],
+      },
+    },
+  },
+
+  'input-presentation': {
+    [varNames.color.input.fg]: vars.color.tinted.default.fg[4],
+    [varNames.color.input.bg]: vars.color.tinted.default.bg[0],
+    [varNames.color.input.border]: vars.color.tinted.default.border[1],
+
+    'borderRadius': 'inherit',
+    'position': 'absolute',
+    'top': 0,
+    'left': 0,
+    'right': 0,
+    'bottom': 0,
+    'display': 'block',
+    'pointerEvents': 'none',
+    'zIndex': 0,
+
+    '@nest': {
+      '.input[data-prefix] &': {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+      },
+
+      '.input[data-suffix] &': {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+      },
+
+      '.input-element:placeholder-shown + &': {
+        [varNames.color.input.fg]: vars.color.tinted.default.border[4],
+      },
+
+      '.input-element:hover + &': {
+        [varNames.color.input.border]: vars.color.tinted.default.border[2],
+        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
+
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
+      },
+
+      '.input-element:focus + &': {
+        [varNames.color.input.border]: vars.color.tinted.default.border[2],
+        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
+
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
+        outlineWidth: vars.input.text.focusRing.width,
+        outlineStyle: 'solid',
+        outlineColor: vars.color.focusRing,
+        outlineOffset: vars.input.text.focusRing.offset,
+      },
+
+      '.input-element:disabled + &': {
+        [varNames.color.input.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.input.border]: vars.color.tinted.default.border[0],
+
+        opacity: 1,
+      },
+    },
+  },
+}
+
+for (const textSize of FONT_TEXT_SIZE) {
+  const source = vars.font.text.sizes[textSize]
+
+  _inputRules[`input-${textSize}`] = {
+    [varNames.input.fontSize]: source.fontSize,
+    [varNames.input.lineHeight]: source.lineHeight,
+    [varNames.input.letterSpacing]: source.letterSpacing,
+    [varNames.input.ascenderHeight]: source.ascenderHeight,
+    [varNames.input.descenderHeight]: source.descenderHeight,
+  }
+}
+
+for (const space of SPACE) {
+  Object.assign(
+    _inputRules,
+    responsiveRules(`input-p-${space}`, {
+      [varNames.input.padding]: vars.space[space],
+    }),
+  )
+}
+
+for (const space of SPACE) {
+  Object.assign(
+    _inputRules,
+    responsiveRules(`input-g-${space}`, {
+      [varNames.input.gap]: vars.space[space],
+    }),
+  )
+}

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

@@ -0,0 +1,12 @@
+import {FontTextSize, Space} from '@sanity/ui/theme'
+
+import {RadiusStyleProps, WidthStyleProps} from '../../styles'
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {
+  border?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  gap?: ResponsiveProp<Space>
+  padding?: ResponsiveProp<Space>
+}

package/src/css/primitives/{selectable → _selectable}/__style.ts

@@ -1,5 +1,5 @@
 // import {getTheme_v2} from '@sanity/ui/theme'
-// import {ThemeProps} from '../../../core/_compat'
+// import {ThemeProps} from '../../../core'
 // import {css} from '../../../core/lib/styled'
 // import {_cardColorStyle} from '../../../core/styles/card'
 // import {SelectableTone} from '../../../core/types'

package/src/css/primitives/_selectable/_contants.ts

@@ -0,0 +1,11 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
+  default: 'surface',
+  neutral: 'neutral',
+  suggest: 'suggest',
+  primary: 'accent',
+  positive: 'positive',
+  caution: 'caution',
+  critical: 'critical',
+} as const

package/src/css/primitives/_selectable/rules.ts

@@ -0,0 +1,129 @@
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
+import {Properties, Rules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
+import {toneMap} from './_contants'
+
+export const _selectableRules: Rules = {
+  selectable: {
+    'backgroundColor': vars.color.bg,
+    'color': vars.color.fg,
+
+    '--color-bg': vars.color.tinted.bg[0],
+    '--color-border': vars.color.tinted.border[2],
+    '--color-fg': vars.color.tinted.fg[2],
+
+    '@nest': {
+      '&:is(button)': {
+        WebkitFontSmoothing: 'inherit',
+        appearance: 'none',
+        outline: 'none',
+        font: 'inherit',
+        textAlign: 'inherit',
+        border: 0,
+        width: ['-moz-available', '-webkit-fill-available', 'stretch'],
+      },
+
+      /* &:is(a) */
+      '&:is(a)': {
+        outline: 'none',
+        textDecoration: 'none',
+      },
+
+      ...buildSelectableTones(),
+    },
+
+    '@media': {
+      '(hover: hover)': {
+        '@nest': {
+          '&:not([data-disabled])': {
+            // cursor: 'pointer',
+          },
+
+          '&:not([data-disabled]):hover': {
+            '--color-bg': vars.color.tinted.bg[1],
+            '--color-border': vars.color.tinted.border[3],
+            '--color-fg': vars.color.tinted.fg[1],
+            '--color-muted-bg': vars.color.tinted.bg[2],
+            '--color-muted-fg': vars.color.tinted.fg[4],
+          },
+
+          '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
+            {
+              '--color-bg': vars.color.tinted.bg[2],
+              '--color-border': vars.color.tinted.border[4],
+              '--color-fg': vars.color.tinted.fg[0],
+              '--color-muted-bg': vars.color.tinted.bg[3],
+              '--color-muted-fg': vars.color.tinted.fg[4],
+            },
+
+          '&:not([data-disabled]):focus': {
+            '--color-bg': vars.color.solid.bg[0],
+            '--color-border': vars.color.solid.border[1],
+            '--color-fg': vars.color.solid.fg[1],
+            '--color-muted-bg': vars.color.solid.bg[1],
+            '--color-muted-fg': vars.color.solid.fg[3],
+          },
+
+          '&[data-disabled]': {
+            '--color-bg': vars.color.tinted.bg[0],
+            '--color-border': vars.color.tinted.border[1],
+            '--color-fg': vars.color.tinted.border[4],
+            '--color-muted-bg': vars.color.tinted.bg[1],
+            '--color-muted-fg': vars.color.tinted.border[4],
+          },
+        },
+      },
+    },
+  },
+}
+
+function buildSelectableTones(): Record<string, Properties> {
+  const rules: Record<string, Properties> = {}
+
+  for (const tone of THEME_COLOR_STATE_TONES) {
+    const target = varNames.color
+    const source = vars.color
+
+    rules[`&.${toneMap[tone]}`] = {
+      [target.tinted.bg[0]]: source.tinted[tone].bg[0],
+      [target.tinted.bg[1]]: source.tinted[tone].bg[1],
+      [target.tinted.bg[2]]: source.tinted[tone].bg[2],
+      [target.tinted.bg[3]]: source.tinted[tone].bg[3],
+      [target.tinted.bg[4]]: source.tinted[tone].bg[4],
+
+      [target.tinted.border[0]]: source.tinted[tone].border[0],
+      [target.tinted.border[1]]: source.tinted[tone].border[1],
+      [target.tinted.border[2]]: source.tinted[tone].border[2],
+      [target.tinted.border[3]]: source.tinted[tone].border[3],
+      [target.tinted.border[4]]: source.tinted[tone].border[4],
+
+      [target.tinted.fg[0]]: source.tinted[tone].fg[0],
+      [target.tinted.fg[1]]: source.tinted[tone].fg[1],
+      [target.tinted.fg[2]]: source.tinted[tone].fg[2],
+      [target.tinted.fg[3]]: source.tinted[tone].fg[3],
+      [target.tinted.fg[4]]: source.tinted[tone].fg[4],
+
+      [target.solid.bg[0]]: source.solid[tone].bg[0],
+      [target.solid.bg[1]]: source.solid[tone].bg[1],
+      [target.solid.bg[2]]: source.solid[tone].bg[2],
+      [target.solid.bg[3]]: source.solid[tone].bg[3],
+      [target.solid.bg[4]]: source.solid[tone].bg[4],
+
+      [target.solid.border[0]]: source.solid[tone].border[0],
+      [target.solid.border[1]]: source.solid[tone].border[1],
+      [target.solid.border[2]]: source.solid[tone].border[2],
+      [target.solid.border[3]]: source.solid[tone].border[3],
+      [target.solid.border[4]]: source.solid[tone].border[4],
+
+      [target.solid.fg[0]]: source.solid[tone].fg[0],
+      [target.solid.fg[1]]: source.solid[tone].fg[1],
+      [target.solid.fg[2]]: source.solid[tone].fg[2],
+      [target.solid.fg[3]]: source.solid[tone].fg[3],
+      [target.solid.fg[4]]: source.solid[tone].fg[4],
+    }
+  }
+
+  return rules
+}

package/src/css/primitives/_selectable/selectable.ts

@@ -0,0 +1,9 @@
+import {composeClassNames} from '../../composeClassNames'
+import {radius} from '../../styles'
+import {toneMap} from './_contants'
+import {SelectableStyleProps} from './types'
+
+/** @internal */
+export function _selectable(props: SelectableStyleProps): string | undefined {
+  return composeClassNames('selectable', toneMap[props.tone ?? 'default'], radius(props))
+}

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

@@ -0,0 +1,8 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+import {RadiusStyleProps} from '../../styles'
+
+/** @internal */
+export interface SelectableStyleProps extends RadiusStyleProps {
+  tone?: ThemeColorStateToneKey
+}