@sanity/ui 3.0.0-static.4 → 3.0.0-static.41

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

@@ -0,0 +1,272 @@
+import {FONT_CODE_SIZE, type FontCodeSize} 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 type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+
+export const root: string = _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: ResponsiveRuleOptions<FontCodeSize> = {
+  ..._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,19 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
-import {font} from '../../aspects'
-import {CodeStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {display} from '../../props/display/display'
+import {flex} from '../../props/flex/flex'
+import {font} from '../../props/font/font'
+import {root, scale} from './code.css'
+import type {CodeStyleProps} from './types'
 
 /** @public */
 export function code(props: CodeStyleProps): string | undefined {
-  return _comp('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 '../../aspects'
-import {ResponsiveProp} from '../../types'
+import type {FontCodeSize} from '@sanity/ui/theme'
 
-/** @public */
-export type CodeSize = number
+import type {FlexStyleProps} from '../../props/flex/types'
+import type {FontStyleProps} from '../../props/font/types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface CodeStyleProps extends FontStyleProps {
-  size?: ResponsiveProp<CodeSize>
+export interface CodeStyleProps extends FlexStyleProps, Omit<FontStyleProps, 'align'> {
+  className?: string
+  size?: ResponsiveProp<FontCodeSize>
 }

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: string = _style(layers.primitives, {})

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

@@ -1,7 +1,17 @@
-import {_comp} from '../../_comp'
-import {maxWidth} from '../../aspects'
-import {ContainerStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {margin} from '../../props/margin/margin'
+import {maxWidth} from '../../props/maxWidth/maxWidth'
+import {width} from '../../props/width/width'
+import {root} from './container.css'
+import type {ContainerStyleProps} from './types'
 
+/** @public */
 export function container(props: ContainerStyleProps): string | undefined {
-  return _comp('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,86 @@
+import {FONT_HEADING_SIZE, type FontHeadingSize} 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 type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+
+export const root: string = _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: string = _style(layers.primitives, {
+  color: vars.color.muted.fg,
+})
+
+export const sizes: ResponsiveRuleOptions<FontHeadingSize> = {
+  ..._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,22 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
-import {HeadingStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {display} from '../../props/display/display'
+import {flex} from '../../props/flex/flex'
+import {font} from '../../props/font/font'
+import {textAlign} from '../../props/textAlign/textAlign'
+import {muted, root, sizes} from './heading.css'
+import type {HeadingStyleProps} from './types'
 
 /** @public */
 export function heading(props: HeadingStyleProps): string | undefined {
-  return _comp(
-    'block',
-    'heading',
+  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),
-    flexItem(props),
+    textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,12 +1,14 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
+import type {FontHeadingSize} from '@sanity/ui/theme'
 
-/** @public */
-export type HeadingSize = number
+import type {FlexStyleProps} from '../../props/flex/types'
+import type {FontStyleProps} from '../../props/font/types'
+import type {TextAlignStyleProps} from '../../props/textAlign/types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
-  accent?: boolean
+export interface HeadingStyleProps extends FontStyleProps, FlexStyleProps {
+  align?: TextAlignStyleProps['textAlign']
+  className?: string
   muted?: boolean
-  size?: ResponsiveProp<HeadingSize>
+  size?: ResponsiveProp<FontHeadingSize>
 }

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: string = _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 {_comp} from '../../_comp'
-import {radius} from '../../aspects'
-import {KBDStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {radius} from '../../props/radius/radius'
+import {root} from './kbd.css'
+import type {KBDStyleProps} from './types'
 
+/** @public */
 export function kbd(props: KBDStyleProps): string | undefined {
-  return _comp('kbd', radius(props))
+  return _composeClassNames(props.className, root, radius(props))
 }

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

@@ -1,7 +1,6 @@
-import {RadiusStyleProps} from '../../aspects'
+import type {RadiusStyleProps} from '../../props/radius/types'
 
 /** @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,87 @@
+import {FONT_LABEL_SIZE, type FontLabelSize} 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 type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+
+export const root: string = _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,
+  textTransform: 'uppercase',
+})
+
+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: string = _style(layers.primitives, {
+  color: vars.color.muted.fg,
+})
+
+export const sizes: ResponsiveRuleOptions<FontLabelSize> = {
+  ..._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,
+          },
+        }),
+      ]
+    }),
+  ),
+}

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

@@ -1,16 +1,22 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
-import {font} from '../../aspects'
-import {LabelStyleProps} from './types'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {display} from '../../props/display/display'
+import {flex} from '../../props/flex/flex'
+import {font} from '../../props/font/font'
+import {textAlign} from '../../props/textAlign/textAlign'
+import {muted, root, sizes} from './label.css'
+import type {LabelStyleProps} from './types'
 
 /** @public */
 export function label(props: LabelStyleProps): string | undefined {
-  return _comp(
-    'label',
-    'block',
+  return _composeClassNames(
+    props.className,
+    root,
+    props.muted && muted,
+    _responsiveClassName(sizes, props.size ?? 1),
+    display({display: 'block'}),
+    flex(props),
     font(props),
-    props.accent && 'label-accent',
-    props.muted && 'label-muted',
-    _resp(`label`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,12 +1,14 @@
-import {FontStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
+import type {FontLabelSize} from '@sanity/ui/theme'
 
-/** @public */
-export type LabelSize = number
+import type {FlexStyleProps} from '../../props/flex/types'
+import type {FontStyleProps} from '../../props/font/types'
+import type {TextAlignStyleProps} from '../../props/textAlign/types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export interface LabelStyleProps extends FontStyleProps {
-  accent?: boolean
+export interface LabelStyleProps extends FlexStyleProps, FontStyleProps {
+  align?: TextAlignStyleProps['textAlign']
+  className?: string
   muted?: boolean
-  size?: ResponsiveProp<LabelSize>
+  size?: ResponsiveProp<FontLabelSize>
 }