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

package/src/css/primitives/checkbox/checkbox.ts

@@ -1,9 +1,17 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_composeClassNames} from '../../_composeClassNames'
+import {input, presentation, root} from './checkbox.css'
 
-export function checkbox(): string | undefined {
-  return composeClassNames('checkbox')
+/** @public */
+export function checkbox(props: {className?: string}) {
+  return _composeClassNames(props.className, root)
 }
 
-export function checkboxInput(): string | undefined {
-  return composeClassNames('checkbox-input')
+/** @public */
+export function checkboxInput() {
+  return input
+}
+
+/** @public */
+export function checkboxPresentation() {
+  return presentation
 }

package/src/css/primitives/code/code.css.ts

@@ -0,0 +1,271 @@
+import {FONT_CODE_SIZE} from '@sanity/ui/theme'
+import {globalStyle} from '@vanilla-extract/css'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.primitives, {
+  vars: {
+    [vars.font.family]: vars.font.code.family,
+    [vars.font.featureSettings]: vars.font.code.featureSettings,
+
+    [vars.font.weight.regular]: vars.font.code.weight.regular,
+    [vars.font.weight.medium]: vars.font.code.weight.medium,
+    [vars.font.weight.semibold]: vars.font.code.weight.semibold,
+    [vars.font.weight.bold]: vars.font.code.weight.bold,
+  },
+
+  color: vars.color.code.fg,
+})
+
+globalStyle(`${root} a`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.link.fg,
+      textDecoration: 'none',
+    },
+  },
+})
+
+globalStyle(`${root} a:hover`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.fg,
+    },
+  },
+})
+
+globalStyle(`${root} svg`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.muted.fg,
+    },
+  },
+})
+
+globalStyle(`${root} code`, {
+  '@layer': {
+    [layers.primitives]: {
+      fontFamily: 'inherit',
+    },
+  },
+})
+
+// globalStyle(`${root} .token`, {
+//   '@layer': {
+//     [layers.primitives]: {},
+//   },
+// })
+globalStyle(`${root} .token.atrule`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.atrule},
+  },
+})
+globalStyle(`${root} .token.attr-name`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.attrName},
+  },
+})
+globalStyle(`${root} .token.attr-value`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.attrValue},
+  },
+})
+globalStyle(`${root} .token.attribute`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.attribute},
+  },
+})
+globalStyle(`${root} .token.boolean`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.boolean},
+  },
+})
+globalStyle(`${root} .token.builtin`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.builtin},
+  },
+})
+globalStyle(`${root} .token.cdata`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.cdata},
+  },
+})
+globalStyle(`${root} .token.char`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.char},
+  },
+})
+globalStyle(`${root} .token.class`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.class},
+  },
+})
+globalStyle(`${root} .token.class-name`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.className},
+  },
+})
+globalStyle(`${root} .token.comment`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.comment},
+  },
+})
+globalStyle(`${root} .token.constant`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.constant},
+  },
+})
+globalStyle(`${root} .token.deleted`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.deleted},
+  },
+})
+globalStyle(`${root} .token.doctype`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.doctype},
+  },
+})
+globalStyle(`${root} .token.entity`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.entity},
+  },
+})
+globalStyle(`${root} .token.function`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.function},
+  },
+})
+globalStyle(`${root} .token.hexcode`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.hexcode},
+  },
+})
+globalStyle(`${root} .token.id`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.id},
+  },
+})
+globalStyle(`${root} .token.important`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.important},
+  },
+})
+globalStyle(`${root} .token.inserted`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.inserted},
+  },
+})
+globalStyle(`${root} .token.keyword`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.keyword},
+  },
+})
+globalStyle(`${root} .token.number`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.number},
+  },
+})
+globalStyle(`${root} .token.operator`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.operator},
+  },
+})
+globalStyle(`${root} .token.prolog`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.prolog},
+  },
+})
+globalStyle(`${root} .token.property`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.property},
+  },
+})
+globalStyle(`${root} .token.pseudo-class`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.pseudoClass},
+  },
+})
+globalStyle(`${root} .token.pseudo-element`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.pseudoElement},
+  },
+})
+globalStyle(`${root} .token.punctuation`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.punctuation},
+  },
+})
+
+globalStyle(`${root} .token.attr-value:not(.attr-equals).punctuation`, {
+  '@layer': {
+    [layers.primitives]: {color: 'inherit'},
+  },
+})
+
+globalStyle(`${root} .token.regex`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.regex},
+  },
+})
+globalStyle(`${root} .token.selector`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.selector},
+  },
+})
+globalStyle(`${root} .token.string`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.string},
+  },
+})
+globalStyle(`${root} .token.symbol`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.symbol},
+  },
+})
+globalStyle(`${root} .token.tag`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.tag},
+  },
+})
+globalStyle(`${root} .token.unit`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.unit},
+  },
+})
+globalStyle(`${root} .token.url`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.url},
+  },
+})
+globalStyle(`${root} .token.variable`, {
+  '@layer': {
+    [layers.primitives]: {color: vars.color.code.token.variable},
+  },
+})
+
+export const scale = {
+  ..._fromEntries(
+    FONT_CODE_SIZE.map((s) => {
+      const v = vars.font.code.scale[s]
+
+      return [
+        s,
+        _responsiveStyle(layers.primitives, {
+          vars: {
+            [vars.font.fontSize]: v.fontSize,
+            [vars.font.lineHeight]: v.lineHeight,
+            [vars.font.letterSpacing]: v.letterSpacing,
+            [vars.font.iconSize]: v.iconSize,
+            [vars.font.ascenderHeight]: v.ascenderHeight,
+            [vars.font.descenderHeight]: v.descenderHeight,
+            [vars.font.customIconSize]: v.customIconSize,
+          },
+        }),
+      ]
+    }),
+  ),
+}

package/src/css/primitives/code/code.ts

@@ -1,9 +1,17 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {font} from '../../styles'
-import {CodeStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {display, flex, font} from '../../props'
+import {root, scale} from './code.css'
+import type {CodeStyleProps} from './types'
 
 /** @public */
 export function code(props: CodeStyleProps): string | undefined {
-  return composeClassNames('code', 'block', font(props), _resp(`code`, props.size))
+  return _composeClassNames(
+    props.className,
+    root,
+    _responsiveClassName(scale, props.size ?? 1),
+    display({display: 'block'}),
+    flex(props),
+    font(props),
+  )
 }

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

@@ -1,10 +1,11 @@
-import {FontStyleProps} from '../../styles'
-import {ResponsiveProp} from '../../types'
+import type {FlexStyleProps, FontStyleProps} from '../../props'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type CodeSize = number
 
 /** @public */
-export interface CodeStyleProps extends FontStyleProps {
+export interface CodeStyleProps extends FlexStyleProps, Omit<FontStyleProps, 'align'> {
+  className?: string
   size?: ResponsiveProp<CodeSize>
 }

package/src/css/primitives/container/container.css.ts

@@ -0,0 +1,4 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+
+export const root = _style(layers.primitives, {})

package/src/css/primitives/container/container.ts

@@ -1,7 +1,15 @@
-import {composeClassNames} from '../../composeClassNames'
-import {maxWidth} from '../../styles'
-import {ContainerStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {margin, maxWidth, width} from '../../props'
+import {root} from './container.css'
+import type {ContainerStyleProps} from './types'
 
+/** @public */
 export function container(props: ContainerStyleProps): string | undefined {
-  return composeClassNames('container', maxWidth({maxWidth: props.width}))
+  return _composeClassNames(
+    props.className,
+    root,
+    margin({marginX: 'auto'}),
+    maxWidth({maxWidth: props.width}),
+    width({width: 'fill'}),
+  )
 }

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

@@ -1,7 +1,9 @@
-import {ContainerWidth} from '@sanity/ui/theme'
+import type {ContainerWidth} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
+/** @public */
 export interface ContainerStyleProps {
+  className?: string
   width?: ResponsiveProp<ContainerWidth>
 }

package/src/css/primitives/heading/heading.css.ts

@@ -0,0 +1,85 @@
+import {FONT_HEADING_SIZE} from '@sanity/ui/theme'
+import {globalStyle} from '@vanilla-extract/css'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.primitives, {
+  vars: {
+    [vars.font.family]: vars.font.heading.family,
+    [vars.font.featureSettings]: vars.font.heading.featureSettings,
+
+    [vars.font.weight.regular]: vars.font.heading.weight.regular,
+    [vars.font.weight.medium]: vars.font.heading.weight.medium,
+    [vars.font.weight.semibold]: vars.font.heading.weight.semibold,
+    [vars.font.weight.bold]: vars.font.heading.weight.bold,
+  },
+
+  color: vars.color.fg,
+})
+
+globalStyle(`${root} a`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.link.fg,
+      textDecoration: 'none',
+    },
+  },
+})
+
+globalStyle(`${root} a:hover`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.fg,
+    },
+  },
+})
+
+globalStyle(`${root} code`, {
+  '@layer': {
+    [layers.primitives]: {
+      fontFamily: vars.font.code.family,
+      color: vars.color.code.fg,
+      backgroundColor: vars.color.code.bg,
+      borderRadius: vars.radius[2],
+    },
+  },
+})
+
+globalStyle(`${root} svg`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.muted.fg,
+    },
+  },
+})
+
+export const muted = _style(layers.primitives, {
+  color: vars.color.muted.fg,
+})
+
+export const sizes = {
+  ..._fromEntries(
+    FONT_HEADING_SIZE.map((s) => {
+      const v = vars.font.heading.scale[s]
+
+      return [
+        s,
+        _responsiveStyle(layers.primitives, {
+          vars: {
+            [vars.font.fontSize]: v.fontSize,
+            [vars.font.lineHeight]: v.lineHeight,
+            [vars.font.letterSpacing]: v.letterSpacing,
+            [vars.font.iconSize]: v.iconSize,
+            [vars.font.ascenderHeight]: v.ascenderHeight,
+            [vars.font.descenderHeight]: v.descenderHeight,
+            [vars.font.customIconSize]: v.customIconSize,
+          },
+        }),
+      ]
+    }),
+  ),
+}

package/src/css/primitives/heading/heading.ts

@@ -1,17 +1,19 @@
-import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {flexItem, font} from '../../styles'
-import {HeadingStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {display, flex, font, textAlign} from '../../props'
+import {muted, root, sizes} from './heading.css'
+import type {HeadingStyleProps} from './types'
 
 /** @public */
 export function heading(props: HeadingStyleProps): string | undefined {
-  return composeClassNames(
-    'heading',
-    'block',
-    flexItem(props),
+  return _composeClassNames(
+    props.className,
+    root,
+    props.muted && muted,
+    _responsiveClassName(sizes, props.size ?? 1),
+    display({display: 'block'}),
+    flex(props),
     font(props),
-    props.accent && 'heading-accent',
-    props.muted && 'heading-muted',
-    _resp(`heading`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,12 +1,15 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../styles'
-import {ResponsiveProp} from '../../types'
+import type {FlexStyleProps, FontStyleProps, TextAlignStyleProps} from '../../props'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type HeadingSize = number
 
 /** @public */
-export interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
+export interface HeadingStyleProps extends FontStyleProps, FlexStyleProps {
+  /** @deprecated No longer in use */
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
+  className?: string
   muted?: boolean
   size?: ResponsiveProp<HeadingSize>
 }

package/src/css/primitives/index.ts

@@ -0,0 +1,24 @@
+export * from './_arrow'
+export * from './_input'
+export * from './_selectable'
+export * from './avatar'
+export * from './badge'
+export * from './box'
+export * from './button'
+export * from './card'
+export * from './checkbox'
+export * from './code'
+export * from './container'
+export * from './heading'
+export * from './kbd'
+export * from './label'
+export * from './popover'
+export * from './radio'
+export * from './select'
+export * from './spinner'
+export * from './stack'
+export * from './switch'
+export * from './text'
+export * from './textArea'
+export * from './textInput'
+export * from './tooltip'

package/src/css/primitives/kbd/kbd.css.ts

@@ -0,0 +1,16 @@
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.primitives, {
+  boxShadow: `inset 0 0 0 0.5px ${vars.color.border}`,
+  backgroundColor: vars.color.muted.bg,
+  font: 'inherit',
+  verticalAlign: 'top',
+
+  selectors: {
+    '&:not([hidden])': {
+      display: 'inline-block',
+    },
+  },
+})

package/src/css/primitives/kbd/kbd.ts

@@ -1,7 +1,9 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles'
-import {KBDStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {radius} from '../../props'
+import {root} from './kbd.css'
+import type {KBDStyleProps} from './types'
 
+/** @public */
 export function kbd(props: KBDStyleProps): string | undefined {
-  return composeClassNames('kbd', radius(props))
+  return _composeClassNames(props.className, root, radius(props))
 }

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

@@ -1,7 +1,6 @@
-import {RadiusStyleProps} from '../../styles'
+import type {RadiusStyleProps} from '../../props'
 
 /** @public */
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface KBDStyleProps extends RadiusStyleProps {
-  //
+  className?: string
 }

package/src/css/primitives/label/label.css.ts

@@ -0,0 +1,85 @@
+import {FONT_LABEL_SIZE} from '@sanity/ui/theme'
+import {globalStyle} from '@vanilla-extract/css'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {_style} from '../../_style.css'
+import {layers} from '../../layers.css'
+import {vars} from '../../vars.css'
+
+export const root = _style(layers.primitives, {
+  vars: {
+    [vars.font.family]: vars.font.label.family,
+    [vars.font.featureSettings]: vars.font.label.featureSettings,
+
+    [vars.font.weight.regular]: vars.font.label.weight.regular,
+    [vars.font.weight.medium]: vars.font.label.weight.medium,
+    [vars.font.weight.semibold]: vars.font.label.weight.semibold,
+    [vars.font.weight.bold]: vars.font.label.weight.bold,
+  },
+
+  color: vars.color.fg,
+})
+
+globalStyle(`${root} a`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.link.fg,
+      textDecoration: 'none',
+    },
+  },
+})
+
+globalStyle(`${root} a:hover`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.fg,
+    },
+  },
+})
+
+globalStyle(`${root} code`, {
+  '@layer': {
+    [layers.primitives]: {
+      fontFamily: vars.font.code.family,
+      color: vars.color.code.fg,
+      backgroundColor: vars.color.code.bg,
+      borderRadius: vars.radius[2],
+    },
+  },
+})
+
+globalStyle(`${root} svg`, {
+  '@layer': {
+    [layers.primitives]: {
+      color: vars.color.muted.fg,
+    },
+  },
+})
+
+export const muted = _style(layers.primitives, {
+  color: vars.color.muted.fg,
+})
+
+export const sizes = {
+  ..._fromEntries(
+    FONT_LABEL_SIZE.map((s) => {
+      const v = vars.font.label.scale[s]
+
+      return [
+        s,
+        _responsiveStyle(layers.primitives, {
+          vars: {
+            [vars.font.fontSize]: v.fontSize,
+            [vars.font.lineHeight]: v.lineHeight,
+            [vars.font.letterSpacing]: v.letterSpacing,
+            [vars.font.iconSize]: v.iconSize,
+            [vars.font.ascenderHeight]: v.ascenderHeight,
+            [vars.font.descenderHeight]: v.descenderHeight,
+            [vars.font.customIconSize]: v.customIconSize,
+          },
+        }),
+      ]
+    }),
+  ),
+}