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

package/src/css/props/padding/padding.css.ts

@@ -0,0 +1,87 @@
+import {SPACE} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+import type {Padding} from './types'
+
+export const paddingOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        padding: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingXOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingLeft: vars.space[index],
+        paddingRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingYOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingTop: vars.space[index],
+        paddingBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingTopOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingTop: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingRightOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingBottomOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingLeftOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingLeft: vars.space[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/padding/padding.ts

@@ -0,0 +1,25 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {
+  paddingBottomOptions,
+  paddingLeftOptions,
+  paddingOptions,
+  paddingRightOptions,
+  paddingTopOptions,
+  paddingXOptions,
+  paddingYOptions,
+} from './padding.css'
+import type {PaddingStyleProps} from './types'
+
+/** @public */
+export function padding(props: PaddingStyleProps) {
+  return _composeClassNames(
+    _responsiveClassName(paddingOptions, props.padding),
+    _responsiveClassName(paddingXOptions, props.paddingX),
+    _responsiveClassName(paddingYOptions, props.paddingY),
+    _responsiveClassName(paddingTopOptions, props.paddingTop),
+    _responsiveClassName(paddingRightOptions, props.paddingRight),
+    _responsiveClassName(paddingBottomOptions, props.paddingBottom),
+    _responsiveClassName(paddingLeftOptions, props.paddingLeft),
+  )
+}

package/src/css/props/padding/types.ts

@@ -0,0 +1,17 @@
+import type {Space} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type Padding = Space
+
+/** @public */
+export interface PaddingStyleProps {
+  padding?: ResponsiveProp<Padding>
+  paddingTop?: ResponsiveProp<Padding>
+  paddingRight?: ResponsiveProp<Padding>
+  paddingBottom?: ResponsiveProp<Padding>
+  paddingLeft?: ResponsiveProp<Padding>
+  paddingX?: ResponsiveProp<Padding>
+  paddingY?: ResponsiveProp<Padding>
+}

package/src/css/props/pointerEvents/pointerEvents.css.ts

@@ -0,0 +1,13 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {PointerEvents} from './types'
+
+export const options: ResponsiveRuleOptions<PointerEvents> = {
+  auto: _responsiveStyle(layers.utils, {
+    pointerEvents: 'auto',
+  }),
+  none: _responsiveStyle(layers.utils, {
+    pointerEvents: 'none',
+  }),
+}

package/src/css/props/pointerEvents/pointerEvents.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './pointerEvents.css'
+import type {PointerEventsStyleProps} from './types'
+
+/** @public */
+export function pointerEvents(props: PointerEventsStyleProps) {
+  return _responsiveClassName(options, props.pointerEvents)
+}

package/src/css/props/position/position.css.ts

@@ -0,0 +1,22 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {Position} from './types'
+
+export const options: ResponsiveRuleOptions<Position> = {
+  absolute: _responsiveStyle(layers.utils, {
+    position: 'absolute',
+  }),
+  fixed: _responsiveStyle(layers.utils, {
+    position: 'fixed',
+  }),
+  relative: _responsiveStyle(layers.utils, {
+    position: 'relative',
+  }),
+  static: _responsiveStyle(layers.utils, {
+    position: 'static',
+  }),
+  sticky: _responsiveStyle(layers.utils, {
+    position: 'sticky',
+  }),
+}

package/src/css/props/position/position.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './position.css'
+import type {PositionStyleProps} from './types'
+
+/** @public */
+export function position(props: PositionStyleProps) {
+  return _responsiveClassName(options, props.position)
+}

package/src/css/props/radius/radius.css.ts

@@ -0,0 +1,21 @@
+import {RADIUS, type Radius} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+
+export const options: ResponsiveRuleOptions<Radius | 'full'> = {
+  full: _responsiveStyle(layers.utils, {
+    borderRadius: '9999px',
+  }),
+  ..._fromEntries(
+    RADIUS.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        borderRadius: vars.radius[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/radius/radius.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './radius.css'
+import type {RadiusStyleProps} from './types'
+
+/** @public */
+export function radius(props: RadiusStyleProps) {
+  return _responsiveClassName(options, props.radius)
+}

package/src/css/props/shadow/shadow.css.ts

@@ -0,0 +1,23 @@
+import {SHADOW, type Shadow} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+
+export const options: ResponsiveRuleOptions<Shadow> = {
+  ..._fromEntries(
+    SHADOW.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        boxShadow: [
+          `0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`,
+          `${vars.shadow[index].umbra} ${vars.color.shadow.umbra}`,
+          `${vars.shadow[index].penumbra} ${vars.color.shadow.penumbra}`,
+          `${vars.shadow[index].ambient} ${vars.color.shadow.ambient}`,
+        ].join(', '),
+      }),
+    ]),
+  ),
+}

package/src/css/props/shadow/shadow.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './shadow.css'
+import type {ShadowStyleProps} from './types'
+
+/** @public */
+export function shadow(props: ShadowStyleProps) {
+  return _responsiveClassName(options, props.shadow)
+}

package/src/css/props/textAlign/textAlign.css.ts

@@ -0,0 +1,22 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {TextAlign} from './types'
+
+export const options: ResponsiveRuleOptions<TextAlign> = {
+  left: _responsiveStyle(layers.utils, {
+    textAlign: 'left',
+  }),
+  right: _responsiveStyle(layers.utils, {
+    textAlign: 'right',
+  }),
+  center: _responsiveStyle(layers.utils, {
+    textAlign: 'center',
+  }),
+  justify: _responsiveStyle(layers.utils, {
+    textAlign: 'justify',
+  }),
+  initial: _responsiveStyle(layers.utils, {
+    textAlign: 'initial',
+  }),
+}

package/src/css/props/textAlign/textAlign.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './textAlign.css'
+import type {TextAlignStyleProps} from './types'
+
+/** @public */
+export function textAlign(props: TextAlignStyleProps) {
+  return _responsiveClassName(options, props.textAlign)
+}

package/src/css/props/textOverflow/textOverflow.css.ts

@@ -0,0 +1,13 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {TextOverflow} from './types'
+
+export const options: ResponsiveRuleOptions<TextOverflow> = {
+  clip: _responsiveStyle(layers.utils, {
+    textOverflow: 'clip',
+  }),
+  ellipsis: _responsiveStyle(layers.utils, {
+    textOverflow: 'ellipsis',
+  }),
+}

package/src/css/props/textOverflow/textOverflow.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './textOverflow.css'
+import type {TextOverflowStyleProps} from './types'
+
+/** @public */
+export function textOverflow(props: TextOverflowStyleProps) {
+  return _responsiveClassName(options, props.textOverflow)
+}

package/src/css/{aspects → props}/textOverflow/types.ts

@@ -1,9 +1,12 @@
-/** @internal */
+/** @public */
+export type TextOverflow = 'ellipsis' | 'clip'
+
+/** @public */
 export interface TextOverflowStyleProps {
   /**
    * Controls how overflowing text is treated.
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis' | 'clip'
+  textOverflow?: TextOverflow
 }

package/src/css/{aspects → props}/width/types.ts

@@ -3,7 +3,7 @@ import type {ContainerWidth} from '@sanity/ui/theme'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */
-export type Width = ContainerWidth | 'fill'
+export type Width = ContainerWidth | 'auto' | 'fill' | 'stretch'
 
 /** @public */
 export interface WidthStyleProps {

package/src/css/props/width/width.css.ts

@@ -0,0 +1,28 @@
+import {CONTAINER_SCALE} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+import type {Width} from './types'
+
+export const options: ResponsiveRuleOptions<Width> = {
+  auto: _responsiveStyle(layers.utils, {
+    width: 'auto',
+  }),
+  fill: _responsiveStyle(layers.utils, {
+    width: '100%',
+  }),
+  stretch: _responsiveStyle(layers.utils, {
+    width: 'stretch',
+  }),
+  ..._fromEntries(
+    CONTAINER_SCALE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        width: vars.container[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/width/width.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import type {WidthStyleProps} from './types'
+import {options} from './width.css'
+
+/** @public */
+export function width(props: WidthStyleProps) {
+  return _responsiveClassName(options, props.width)
+}

package/src/css/types.ts

@@ -1,68 +1,249 @@
-import type CSS from 'csstype'
+import type {
+  AvatarColor,
+  AvatarSize,
+  ContainerScale,
+  FontCodeSize,
+  FontHeadingSize,
+  FontLabelSize,
+  FontTextSize,
+  Hue,
+  Radius,
+  Shadow,
+  Space,
+  ThemeColorCardToneKey,
+  ThemeColorSchemeKey,
+  ThemeColorStateToneKey,
+  ThemeColorVariantKey,
+  Tint,
+} from '@sanity/ui/theme'
 
 import type {BREAKPOINTS} from './constants'
-import {varNames} from './theme'
 
 /** @public */
-export type ExtractStringValues<T> = T extends string
-  ? T
-  : T extends object
-    ? ExtractStringValues<T[keyof T]>
-    : never
+export type Breakpoint = keyof typeof BREAKPOINTS
 
 /** @public */
-export type VarNames = typeof varNames
+export type ResponsiveProp<T> = T | Partial<Record<Breakpoint, T>>
 
 /** @public */
-export type VarName = ExtractStringValues<VarNames>
+export type ResponsiveRules = Record<Breakpoint, string>
 
 /** @public */
-export type Breakpoint = keyof typeof BREAKPOINTS
+export type ResponsiveRuleOptions<K extends string | number> = Record<K, ResponsiveRules>
 
 /** @public */
-export type ResponsiveProp<T> = T | Array<T | null | undefined>
+export type CSSThemeColorPalette = {
+  black: string
+  white: string
+} & Record<Hue, Record<Tint, string>>
 
 /** @public */
-export interface Rules {
-  [className: string]: Properties
-}
+export type CSSThemeColorCard = {
+  avatar: Record<AvatarColor, {bg: string; fg: string}>
+  backdrop: string
+  code: {
+    bg: string
+    fg: string
+    token: {
+      atrule: string
+      attrName: string
+      attrValue: string
+      attribute: string
+      boolean: string
+      builtin: string
+      cdata: string
+      char: string
+      class: string
+      className: string
+      comment: string
+      constant: string
+      deleted: string
+      doctype: string
+      entity: string
+      function: string
+      hexcode: string
+      id: string
+      important: string
+      inserted: string
+      keyword: string
+      number: string
+      operator: string
+      prolog: string
+      property: string
+      pseudoClass: string
+      pseudoElement: string
+      punctuation: string
+      regex: string
+      selector: string
+      string: string
+      symbol: string
+      tag: string
+      unit: string
+      url: string
+      variable: string
+    }
+  }
+  focusRing: string
+  link: {
+    fg: string
+  }
+  shadow: {
+    outline: string
+    umbra: string
+    penumbra: string
+    ambient: string
+  }
+  skeleton: {
+    from: string
+    to: string
+  }
+} & Record<
+  ThemeColorVariantKey,
+  Record<
+    ThemeColorStateToneKey,
+    {
+      bg: {
+        0: string
+        4: string
+      }
+      border: {
+        0: string
+        4: string
+      }
+      fg: {
+        0: string
+        4: string
+      }
+    }
+  >
+>
 
 /** @public */
-export interface CustomCSSProperties {
-  [key: VarName]: string | number
-}
+export type CSSThemeColorScheme = Record<ThemeColorCardToneKey, CSSThemeColorCard>
 
 /** @public */
-export interface BaseProperties extends CSS.Properties {
-  _prefix?: boolean
-  vars?: Partial<CustomCSSProperties>
-}
+export type CSSThemeColor = {
+  palette: CSSThemeColorPalette
+} & Record<ThemeColorSchemeKey, CSSThemeColorScheme>
 
 /** @public */
-export interface PropertiesWithVarsAndNested extends BaseProperties {
-  nest?: Record<string, BaseProperties>
+export type CSSThemeFont<FontScaleIndex extends number> = {
+  family: string
+  featureSettings: string
+  weight: {
+    regular: string
+    medium: string
+    semibold: string
+    bold: string
+  }
+  scale: Record<
+    FontScaleIndex,
+    {
+      fontSize: string
+      lineHeight: string
+      letterSpacing: string
+      ascenderHeight: string
+      descenderHeight: string
+      iconSize: string
+      customIconSize: string
+    }
+  >
 }
 
 /** @public */
-export interface Properties extends PropertiesWithVarsAndNested {
-  '@media'?: Record<string, PropertiesWithVarsAndNested>
+export type CSSTheme = {
+  '@layer'?: string
+  'avatar': {
+    focusRing: {
+      offset: string
+      width: string
+    }
+    scale: Record<
+      AvatarSize,
+      {
+        distance: string
+        size: string
+      }
+    >
+  }
+  'button': {
+    border: {
+      width: string
+    }
+    focusRing: {
+      offset: string
+      width: string
+    }
+  }
+  'card': {
+    shadow: {
+      outline: string
+    }
+  }
+  'color': CSSThemeColor
+  'container': Record<ContainerScale, string>
+  'font': {
+    code: CSSThemeFont<FontCodeSize>
+    heading: CSSThemeFont<FontHeadingSize>
+    label: CSSThemeFont<FontLabelSize>
+    text: CSSThemeFont<FontTextSize>
+  }
+  'input': {
+    border: {
+      width: string
+    }
+    checkbox: {
+      size: string
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    radio: {
+      size: string
+      markSize: string
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    select: {
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+    switch: {
+      focusRing: {
+        width: string
+        offset: string
+      }
+      height: string
+      width: string
+      padding: string
+      transitionDurationMs: string
+      transitionTimingFunction: string
+    }
+    text: {
+      focusRing: {
+        offset: string
+        width: string
+      }
+    }
+  }
+  'radius': Record<Radius, string>
+  'shadow': Record<
+    Shadow,
+    {
+      umbra: string
+      penumbra: string
+      ambient: string
+    }
+  >
+  'space': Record<Space, string>
 }
 
-/** @public */
-export type StyleSelector = `.${string}` | `#${string}` | `:root`
-
-/** @public */
-export type StyleRules = Partial<Record<StyleSelector, Properties>>
-
-/** @public */
-export type StyleKeyframes = Record<string, Record<string, Properties>>
-
-/** @public */
-export type StyleLayers = Record<string, StyleRules>
-
-/** @public */
-export interface Style {
-  keyframes?: StyleKeyframes
-  layers?: StyleLayers
-  rules?: StyleRules
+/** @internal */
+export type _CSSThemeWithoutPalette = Omit<CSSTheme, '@layer' | 'color'> & {
+  color: Omit<CSSThemeColor, 'palette'>
 }

package/src/css/util.ts

@@ -1,15 +1,5 @@
 import {type ThemeBoxShadow} from '@sanity/ui/theme'
 
-/** @internal */
-export function isRecord(value: unknown): value is Record<string, unknown> {
-  return value !== null && typeof value === 'object' && !Array.isArray(value)
-}
-
-/** @internal */
-export function isArray(value: unknown): value is unknown[] {
-  return Array.isArray(value)
-}
-
 /** @internal */
 export function rem(value: number): string {
   if (value === 0) return '0'

package/src/css/utils/index.ts

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