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

package/src/css/primitives/radio/radio.style.ts

@@ -0,0 +1,84 @@
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.radio': {
+    position: 'relative',
+
+    nest: {
+      '&:not([hidden])': {
+        display: 'inline-block',
+      },
+
+      '& input': {
+        appearance: 'none',
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        opacity: '0',
+        height: '100%',
+        width: '100%',
+        outline: 'none',
+        zIndex: '1',
+        padding: '0',
+        margin: '0',
+        borderRadius: '9999px',
+        border: 'none',
+      },
+
+      // enabled
+      '& > input + span': {
+        display: 'block',
+        position: 'relative',
+        width: vars.input.radio.size,
+        height: vars.input.radio.size,
+        borderRadius: '9999px',
+        backgroundColor: vars.color.input.radio.bg,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.radio.border}`,
+
+        vars: {
+          [varNames.color.input.radio.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[1],
+        },
+      },
+
+      '& > input + span::after': {
+        content: '""',
+        position: 'absolute',
+        top: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
+        left: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
+        width: vars.input.radio.markSize,
+        height: vars.input.radio.markSize,
+        backgroundColor: vars.color.input.radio.fg,
+        borderRadius: '9999px',
+        opacity: 0,
+      },
+
+      // hovered
+      '& > input:not(:disabled):hover + span': {
+        vars: {
+          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2],
+        },
+      },
+
+      // focused
+      '& > input:not(:disabled):focus + span': {
+        vars: {
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2],
+        },
+      },
+
+      '& > input:checked + span::after': {
+        opacity: 1,
+      },
+    },
+  },
+}
+
+export const radioStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

package/src/css/primitives/radio/radio.ts

@@ -1,5 +1,6 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
+/** @public */
 export function radio(): string | undefined {
-  return composeClassNames('radio')
+  return _scopeClassNames('radio')
 }

package/src/css/primitives/select/{rules.ts → select.style.ts}

@@ -1,16 +1,16 @@
-import {Rules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
-export const selectRules: Rules = {
-  'select': {
-    '@nest': {
+const primitive: StyleRules = {
+  '.select': {
+    nest: {
       '& > select:disabled': {
         opacity: 1,
       },
     },
   },
 
-  'select-presentation': {
-    '@nest': {
+  '.select-presentation': {
+    nest: {
       '& > span': {
         // place icon to the right
         position: 'absolute',
@@ -20,3 +20,5 @@ export const selectRules: Rules = {
     },
   },
 }
+
+export const selectStyle: Style = {layers: {primitive}}

package/src/css/primitives/select/select.ts

@@ -1,11 +1,14 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {_input, _inputPresentation} from '../_input'
-import {SelectStyleProps} from './types'
+import type {SelectStyleProps} from './types'
 
+/** @public */
 export function select(props: SelectStyleProps): string | undefined {
-  return composeClassNames('select', _input(props))
+  return _composeClassNames(_scopeClassNames('select'), _input(props))
 }
 
+/** @public */
 export function selectPresentation(): string | undefined {
-  return composeClassNames('select-presentation', _inputPresentation())
+  return _composeClassNames(_scopeClassNames('select-presentation'), _inputPresentation())
 }

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

@@ -1,4 +1,4 @@
-import {InputStyleProps} from '../_input'
+import type {InputStyleProps} from '../_input'
 
 /** @public */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

package/src/css/primitives/spinner/spinner.style.ts

@@ -0,0 +1,22 @@
+import type {Style, StyleKeyframes, StyleRules} from '../../types'
+
+const keyframes: StyleKeyframes = {
+  'spinner-rotate': {
+    from: {
+      transform: 'rotate(0deg)',
+    },
+    to: {
+      transform: 'rotate(360deg)',
+    },
+  },
+}
+
+const primitive: StyleRules = {
+  '.spinner': {},
+
+  '.animated-spinner-icon': {
+    animation: 'spinner-rotate 500ms linear infinite',
+  },
+}
+
+export const spinnerStyle: Style = {keyframes, layers: {primitive}}

package/src/css/primitives/spinner/spinner.ts

@@ -1,9 +1,11 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
+/** @public */
 export function spinner(): string | undefined {
-  return composeClassNames('spinner')
+  return _scopeClassNames('spinner')
 }
 
+/** @public */
 export function animatedSpinnerIcon(): string | undefined {
-  return composeClassNames('animated-spinner-icon')
+  return _scopeClassNames('animated-spinner-icon')
 }

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

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

package/src/css/primitives/stack/stack.style.ts

@@ -0,0 +1,13 @@
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.stack': {
+    gridTemplateColumns: 'minmax(0, 1fr)',
+  },
+}
+
+export const stackStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

package/src/css/primitives/stack/stack.ts

@@ -0,0 +1,6 @@
+import {_scopeClassNames} from '../../_scopeClassNames'
+
+/** @public */
+export function stack(): string | undefined {
+  return _scopeClassNames('stack')
+}

package/src/css/primitives/switch/switch.style.ts

@@ -0,0 +1,102 @@
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.switch': {},
+
+  '.switch-element': {
+    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 on top of the representation element
+    zIndex: 1,
+  },
+
+  '.switch-presentation': {
+    vars: {
+      [varNames.color.input.switch.bg]: vars.color.tinted.default.border[2],
+      [varNames.color.input.switch.fg]: vars.color.tinted.default.bg[0],
+      [varNames.input.switch.thumb.offset]: '0',
+      [varNames.input.switch.thumb.size]:
+        `calc(${vars.input.switch.height} - ${vars.input.switch.padding} * 2)`,
+    },
+    display: 'block',
+    position: 'relative',
+    width: vars.input.switch.width,
+    height: vars.input.switch.height,
+    borderRadius: `calc(${vars.input.switch.height} / 2)`,
+    outlineOffset: vars.input.switch.focusRing.offset,
+
+    // Make sure it’s not possible to interact with the presentation element
+    pointerEvents: 'none',
+
+    nest: {
+      'input:not(:checked):hover + &': {
+        vars: {
+          [varNames.color.input.switch.bg]: vars.color.tinted.default.border[4],
+        },
+      },
+
+      'input:checked + &': {
+        vars: {
+          [varNames.color.input.switch.bg]: vars.color.solid.default.bg[0],
+          [varNames.color.input.switch.fg]: vars.color.solid.default.fg[0],
+          [varNames.input.switch.thumb.offset]:
+            `calc(${vars.input.switch.width} - (${vars.input.switch.padding} * 2) - ${vars.input.switch.thumb.size})`,
+        },
+      },
+
+      '[data-indeterminate] > input + &': {
+        vars: {
+          [varNames.input.switch.thumb.offset]:
+            `calc(${vars.input.switch.width} / 2 - ${vars.input.switch.thumb.size} / 2 - ${vars.input.switch.padding})`,
+        },
+      },
+
+      'input:focus + &': {
+        outline: `${vars.input.switch.focusRing.width} solid ${vars.color.focusRing}`,
+      },
+
+      'input:focus:not(:focus-visible) + &': {
+        outline: 'none',
+      },
+    },
+  },
+
+  '.switch-track': {
+    display: 'block',
+    backgroundColor: vars.color.input.switch.bg,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 'inherit',
+    transition: `box-shadow, background-color ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
+  },
+
+  '.switch-thumb': {
+    display: 'block',
+    position: 'absolute',
+    left: vars.input.switch.padding,
+    top: vars.input.switch.padding,
+    width: vars.input.switch.thumb.size,
+    height: vars.input.switch.thumb.size,
+    backgroundColor: vars.color.input.switch.fg,
+    borderRadius: '9999px',
+    boxShadow: `0 0 0 0.5px ${vars.color.shadow.umbra}, 0 0.5px 2px 0.5px ${vars.color.shadow.umbra}`,
+    transform: `translate3d(${vars.input.switch.thumb.offset}, 0, 0)`,
+    transition: `transform ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`,
+  },
+}
+
+export const switchStyle: Style = {layers: {primitive}}

package/src/css/primitives/switch/switch.ts

@@ -1,21 +1,26 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
+/** @public */
 export function _switch(): string | undefined {
-  return composeClassNames('switch')
+  return _scopeClassNames('switch')
 }
 
+/** @public */
 export function _switchElement(): string | undefined {
-  return composeClassNames('switch-element')
+  return _scopeClassNames('switch-element')
 }
 
+/** @public */
 export function _switchPresentation(): string | undefined {
-  return composeClassNames('switch-presentation')
+  return _scopeClassNames('switch-presentation')
 }
 
+/** @public */
 export function _switchThumb(): string | undefined {
-  return composeClassNames('switch-thumb')
+  return _scopeClassNames('switch-thumb')
 }
 
+/** @public */
 export function _switchTrack(): string | undefined {
-  return composeClassNames('switch-track')
+  return _scopeClassNames('switch-track')
 }

package/src/css/primitives/text/text.style.ts

@@ -0,0 +1,65 @@
+import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.text': {
+    vars: {
+      [varNames.font.family]: vars.font.text.family,
+      [varNames.font.featureSettings]: vars.font.text.featureSettings,
+
+      [varNames.font.weight.regular]: vars.font.text.weight.regular,
+      [varNames.font.weight.medium]: vars.font.text.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.text.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.text.weight.bold,
+    },
+
+    color: vars.color.fg,
+
+    nest: {
+      '& a': {
+        color: vars.color.link.fg,
+        textDecoration: 'none',
+      },
+
+      '& a:hover': {
+        color: vars.color.fg,
+      },
+
+      '& code': {
+        fontFamily: vars.font.code.family,
+        color: vars.color.code.fg,
+        backgroundColor: vars.color.code.bg,
+        borderRadius: vars.radius[2],
+      },
+
+      '& svg': {
+        color: vars.color.muted.fg,
+      },
+    },
+  },
+
+  '.text-muted': {
+    color: vars.color.muted.fg,
+  },
+}
+
+for (const size of FONT_TEXT_SIZE) {
+  const v = vars.font.text.sizes[size]
+
+  _responsiveRule(primitive, `text-${size}`, {
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize,
+    },
+  })
+}
+
+export const textStyle: Style = {layers: {primitive}}

package/src/css/primitives/text/text.ts

@@ -1,17 +1,15 @@
+import {_composeClassNames} from '../../_composeClassNames'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {flexItem, font} from '../../styles'
-import {TextStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import {flexItem, font, textAlign} from '../../aspects'
+import type {TextStyleProps} from './types'
 
 /** @public */
 export function text(props: TextStyleProps): string | undefined {
-  return composeClassNames(
-    'text',
-    'block',
+  return _composeClassNames(
+    _scopeClassNames('text', 'block', props.muted && 'text-muted', _resp(`text`, props.size)),
     flexItem(props),
     font(props),
-    props.accent && 'text-accent',
-    props.muted && 'text-muted',
-    _resp(`text`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,11 +1,16 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../styles'
-import {ResponsiveProp} from '../../types'
+import type {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
+import type {ResponsiveProp} from '../../types'
 
+/** @public */
 export type TextSize = number
 
 /** @public */
 export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
+  /**
+   * @deprecated Will be removed in next major version
+   */
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<TextSize>
 }

package/src/css/primitives/textArea/textArea.style.ts

@@ -0,0 +1,11 @@
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.text-area': {},
+}
+
+export const textAreaStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

package/src/css/primitives/textArea/textArea.ts

@@ -1,7 +1,9 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {_input} from '../_input'
-import {TextAreaStyleProps} from './types'
+import type {TextAreaStyleProps} from './types'
 
+/** @public */
 export function textArea(props: TextAreaStyleProps): string | undefined {
-  return composeClassNames('text-area', _input(props))
+  return _composeClassNames(_scopeClassNames('text-area'), _input(props))
 }

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

@@ -1,4 +1,4 @@
-import {InputStyleProps} from '../_input'
+import type {InputStyleProps} from '../_input'
 
 /** @public */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type

package/src/css/primitives/textInput/textInput.style.ts

@@ -0,0 +1,46 @@
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.text-input': {},
+
+  '.text-input-prefix': {
+    borderTop: `1px solid ${vars.color.border}`,
+    borderLeft: `1px solid ${vars.color.border}`,
+    borderBottom: `1px solid ${vars.color.border}`,
+    borderTopLeftRadius: 'inherit',
+    borderBottomLeftRadius: 'inherit',
+
+    nest: {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  '.text-input-element': {
+    borderRadius: 'inherit',
+  },
+
+  '.text-input-suffix': {
+    borderTop: `1px solid ${vars.color.border}`,
+    borderRight: `1px solid ${vars.color.border}`,
+    borderBottom: `1px solid ${vars.color.border}`,
+    borderTopRightRadius: 'inherit',
+    borderBottomRightRadius: 'inherit',
+
+    nest: {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+}
+
+export const textInputStyle: Style = {
+  layers: {
+    primitive,
+  },
+}

package/src/css/primitives/textInput/textInput.ts

@@ -1,8 +1,24 @@
-// import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {_input} from '../_input'
-import {TextInputStyleProps} from './types'
+import type {TextInputStyleProps} from './types'
 
+/** @public */
 export function textInput(props: TextInputStyleProps): string | undefined {
-  return composeClassNames(_input(props), 'text-input')
+  return _composeClassNames(_scopeClassNames('text-input'), _input(props))
+}
+
+/** @public */
+export function textInputPrefix(): string | undefined {
+  return _scopeClassNames('text-input-prefix')
+}
+
+/** @public */
+export function textInputElement(): string | undefined {
+  return _scopeClassNames('text-input-element')
+}
+
+/** @public */
+export function textInputSuffix(): string | undefined {
+  return _scopeClassNames('text-input-suffix')
 }

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

@@ -1,11 +1,5 @@
-// import {FontTextSize, Space} from '@sanity/ui/theme'
-// import {ResponsiveProp} from '../../types'
-
-import {InputStyleProps} from '../_input'
+import type {InputStyleProps} from '../_input'
 
 /** @public */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface TextInputStyleProps extends InputStyleProps {
-  // padding: ResponsiveProp<Space>
-  // fontSize: ResponsiveProp<FontTextSize>
-}
+export interface TextInputStyleProps extends InputStyleProps {}

package/src/css/primitives/token/token.style.ts

@@ -0,0 +1,50 @@
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.token': {
+    _prefix: false,
+
+    nest: {
+      '&.atrule': {color: vars.color.code.token.atrule},
+      '&.attr-name': {color: vars.color.code.token.attrName},
+      '&.attr-value': {color: vars.color.code.token.attrValue},
+      '&.attribute': {color: vars.color.code.token.attribute},
+      '&.boolean': {color: vars.color.code.token.boolean},
+      '&.builtin': {color: vars.color.code.token.builtin},
+      '&.cdata': {color: vars.color.code.token.cdata},
+      '&.char': {color: vars.color.code.token.char},
+      '&.class': {color: vars.color.code.token.class},
+      '&.class-name': {color: vars.color.code.token.className},
+      '&.comment': {color: vars.color.code.token.comment},
+      '&.constant': {color: vars.color.code.token.constant},
+      '&.deleted': {color: vars.color.code.token.deleted},
+      '&.doctype': {color: vars.color.code.token.doctype},
+      '&.entity': {color: vars.color.code.token.entity},
+      '&.function': {color: vars.color.code.token.function},
+      '&.hexcode': {color: vars.color.code.token.hexcode},
+      '&.id': {color: vars.color.code.token.id},
+      '&.important': {color: vars.color.code.token.important},
+      '&.inserted': {color: vars.color.code.token.inserted},
+      '&.keyword': {color: vars.color.code.token.keyword},
+      '&.number': {color: vars.color.code.token.number},
+      '&.operator': {color: vars.color.code.token.operator},
+      '&.prolog': {color: vars.color.code.token.prolog},
+      '&.property': {color: vars.color.code.token.property},
+      '&.pseudo-class': {color: vars.color.code.token.pseudoClass},
+      '&.pseudo-element': {color: vars.color.code.token.pseudoElement},
+      '&.punctuation': {color: vars.color.code.token.punctuation},
+      '&.attr-value &:not(.attr-equals).punctuation': {color: 'inherit'},
+      '&.regex': {color: vars.color.code.token.regex},
+      '&.selector': {color: vars.color.code.token.selector},
+      '&.string': {color: vars.color.code.token.string},
+      '&.symbol': {color: vars.color.code.token.symbol},
+      '&.tag': {color: vars.color.code.token.tag},
+      '&.unit': {color: vars.color.code.token.unit},
+      '&.url': {color: vars.color.code.token.url},
+      '&.variable': {color: vars.color.code.token.variable},
+    },
+  },
+}
+
+export const tokenStyle: Style = {layers: {primitive}}

package/src/css/primitives/tooltip/tooltip.style.ts

@@ -0,0 +1,9 @@
+import type {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.tooltip': {
+    pointerEvents: 'none',
+  },
+}
+
+export const tooltipStyle: Style = {layers: {primitive}}

package/src/css/primitives/tooltip/tooltip.ts

@@ -1,9 +1,6 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
+/** @public */
 export function tooltip(): string | undefined {
-  return composeClassNames('tooltip')
-}
-
-export function tooltipCard(): string | undefined {
-  return composeClassNames('tooltip-card')
+  return _scopeClassNames('tooltip')
 }