@sanity/ui 3.0.0-static.17 → 3.0.0-static.19

package/src/css/aspects/overflow/types.ts

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type BoxOverflow = 'visible' | 'hidden' | 'auto'

package/src/css/aspects/padding/padding.style.ts

@@ -1,11 +1,8 @@
-// import {type Style, type StyleRules, vars} from '@sanity/css'
-// import {SPACE} from '@sanity/theme'
-
 import {SPACE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const util: StyleRules = {}
 

package/src/css/aspects/padding/padding.ts

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {PaddingStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {PaddingStyleProps} from './types'
 
 /** @internal */
 export function padding(props: PaddingStyleProps): string | undefined {
-  return composeClassNames(
+  return _scopeClassNames(
     _resp('p', props.padding),
     _resp('px', props.paddingX),
     _resp('py', props.paddingY),

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

@@ -1,6 +1,6 @@
-import {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface PaddingStyleProps {

package/src/css/aspects/pointerEvents/pointerEvents.ts

@@ -1,7 +1,7 @@
-import {composeClassNames} from '../../composeClassNames'
-import {PointerEventsStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {PointerEventsStyleProps} from './types'
 
 /** @internal */
 export function pointerEvents(props: PointerEventsStyleProps): string | undefined {
-  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`)
+  return _scopeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`)
 }

package/src/css/aspects/position/position.ts

@@ -1,8 +1,8 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {PositionStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {PositionStyleProps} from './types'
 
 /** @internal */
 export function position(props: PositionStyleProps): string | undefined {
-  return composeClassNames(_resp('position', props.position))
+  return _scopeClassNames(_resp('position', props.position))
 }

package/src/css/aspects/position/types.ts

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'

package/src/css/aspects/radius/radius.style.ts

@@ -1,6 +1,6 @@
 import {_responsiveRule} from '../../_responsiveRule'
+import {vars} from '../../theme'
 import type {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
 
 const util: StyleRules = {}
 

package/src/css/aspects/radius/radius.ts

@@ -1,8 +1,8 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {RadiusStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {RadiusStyleProps} from './types'
 
 /** @public */
 export function radius(props: RadiusStyleProps): string | undefined {
-  return composeClassNames(_resp('r', props.radius))
+  return _scopeClassNames(_resp('r', props.radius))
 }

package/src/css/aspects/radius/types.ts

@@ -1,6 +1,6 @@
-import {Radius} from '@sanity/ui/theme'
+import type {Radius} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface RadiusStyleProps {

package/src/css/aspects/shadow/shadow.style.ts

@@ -1,21 +1,21 @@
 import {SHADOW} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
+import {vars} from '../../theme'
 import type {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
 
 const util: StyleRules = {}
 
-for (const shadow of SHADOW) {
-  if (shadow === 0) {
+for (const index of SHADOW) {
+  if (index === 0) {
     _responsiveRule(util, 'shadow-0', {boxShadow: 'none'})
   } else {
-    _responsiveRule(util, `shadow-${shadow}`, {
+    _responsiveRule(util, `shadow-${index}`, {
       boxShadow: [
         `0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`,
-        `${vars.shadow[shadow].umbra} ${vars.color.shadow.umbra}`,
-        `${vars.shadow[shadow].penumbra} ${vars.color.shadow.penumbra}`,
-        `${vars.shadow[shadow].ambient} ${vars.color.shadow.ambient}`,
+        `${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/aspects/shadow/shadow.ts

@@ -1,8 +1,8 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {ShadowStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {ShadowStyleProps} from './types'
 
 /** @internal */
 export function shadow(props: ShadowStyleProps): string | undefined {
-  return composeClassNames(_resp('shadow', props.shadow))
+  return _scopeClassNames(_resp('shadow', props.shadow))
 }

package/src/css/aspects/shadow/types.ts

@@ -1,6 +1,6 @@
-import {Shadow} from '@sanity/ui/theme'
+import type {Shadow} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface ShadowStyleProps {

package/src/css/aspects/textAlign/textAlign.style.ts

@@ -1,5 +1,5 @@
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 export const util: StyleRules = {}
 

package/src/css/aspects/textAlign/textAlign.ts

@@ -1,8 +1,8 @@
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {TextAlignStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {TextAlignStyleProps} from './types'
 
 /** @public */
 export function textAlign(props: TextAlignStyleProps): string | undefined {
-  return composeClassNames(_resp('text-align', props.textAlign))
+  return _scopeClassNames(_resp('text-align', props.textAlign))
 }

package/src/css/aspects/textOverflow/textOverflow.ts

@@ -1,7 +1,7 @@
-import {_comp} from '../../_comp'
-import {TextOverflowStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {TextOverflowStyleProps} from './types'
 
 /** @internal */
 export function textOverflow(props: TextOverflowStyleProps): string | undefined {
-  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`)
+  return _scopeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`)
 }

package/src/css/aspects/width/types.ts

@@ -1,6 +1,6 @@
-import {ContainerWidth} from '@sanity/ui/theme'
+import type {ContainerWidth} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type Width = ContainerWidth | 'fill'

package/src/css/aspects/width/width.style.ts

@@ -1,5 +1,5 @@
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const util: StyleRules = {}
 

package/src/css/aspects/width/width.ts

@@ -1,7 +1,8 @@
 import {_resp} from '../../_resp'
-import {WidthStyleProps} from './types'
+import {_scopeClassNames} from '../../_scopeClassNames'
+import type {WidthStyleProps} from './types'
 
 /** @internal */
-export function width(props: WidthStyleProps): string {
-  return _resp('w', props.width) ?? ''
+export function width(props: WidthStyleProps): string | undefined {
+  return _scopeClassNames(_resp('w', props.width) ?? '')
 }

package/src/css/components/breadcrumbs/breadcrumbs.style.ts

@@ -1,4 +1,4 @@
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const component: StyleRules = {
   '.breadcrumbs': {

package/src/css/components/breadcrumbs/breadcrumbs.ts

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

package/src/css/components/dialog/dialog.style.ts

@@ -1,8 +1,11 @@
-import {Style, StyleKeyframes, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleKeyframes, StyleRules} from '../../types'
+
+const KEYFRAMES_DIALOG_ZOOM_IN = 'dialog-zoom-in'
+const KEYFRAMES_DIALOG_FADE_IN = 'dialog-fade-in'
 
 const keyframes: StyleKeyframes = {
-  'dialog-zoom-in': {
+  [KEYFRAMES_DIALOG_ZOOM_IN]: {
     from: {
       opacity: 0,
       transform: 'scale(0.95)',
@@ -12,7 +15,7 @@ const keyframes: StyleKeyframes = {
       transform: 'scale(1)',
     },
   },
-  'dialog-fade-in': {
+  [KEYFRAMES_DIALOG_FADE_IN]: {
     from: {
       opacity: 0,
     },
@@ -24,24 +27,19 @@ const keyframes: StyleKeyframes = {
 
 const component: StyleRules = {
   '.dialog': {
-    // 'top': 0,
-    // 'left': 0,
-    // 'right': 0,
-    // 'bottom': 0,
-    'alignItems': 'center',
-    'justifyContent': 'center',
-    'outline': 'none',
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
 
-    'background': vars.color.backdrop,
+    background: vars.color.backdrop,
 
-    '@nest': {
+    nest: {
       '&[data-animate]': {
-        animation: 'dialog-fade-in 200ms ease-out',
+        animation: `${KEYFRAMES_DIALOG_FADE_IN} 200ms ease-out`,
       },
 
-      // Animates the dialog card.
       '&[data-animate] > [data-ui="DialogCard"]': {
-        animation: 'dialog-zoom-in 200ms ease-out',
+        animation: `${KEYFRAMES_DIALOG_ZOOM_IN} 200ms ease-out`,
       },
     },
   },

package/src/css/components/dialog/dialog.ts

@@ -1,37 +1,38 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {inset} from '../../aspects'
 
 /** @public */
 export function dialog(): string | undefined {
-  return _comp('dialog', inset({inset: 0}))
+  return _composeClassNames(_scopeClassNames('dialog'), inset({inset: 0}))
 }
 
 /** @public */
 export function dialogContainer(): string | undefined {
-  return _comp('dialog-container')
+  return _scopeClassNames('dialog-container')
 }
 
 /** @public */
 export function dialogCardRoot(): string | undefined {
-  return _comp('dialog-card-root')
+  return _scopeClassNames('dialog-card-root')
 }
 
 /** @public */
 export function dialogLayout(): string | undefined {
-  return _comp('dialog-layout')
+  return _scopeClassNames('dialog-layout')
 }
 
 /** @public */
 export function dialogHeader(): string | undefined {
-  return _comp('dialog-header')
+  return _scopeClassNames('dialog-header')
 }
 
 /** @public */
 export function dialogContent(): string | undefined {
-  return _comp('dialog-content')
+  return _scopeClassNames('dialog-content')
 }
 
 /** @public */
 export function dialogFooter(): string | undefined {
-  return _comp('dialog-footer')
+  return _scopeClassNames('dialog-footer')
 }

package/src/css/components/menu/menu.style.ts

@@ -1,5 +1,5 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const component: StyleRules = {
   '.menu': {

package/src/css/components/menu/menu.ts

@@ -1,11 +1,11 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @public */
 export function menu(): string | undefined {
-  return _comp('menu')
+  return _scopeClassNames('menu')
 }
 
 /** @public */
 export function menuDivider(): string | undefined {
-  return _comp('menu-divider')
+  return _scopeClassNames('menu-divider')
 }

package/src/css/components/skeleton/skeleton.style.ts

@@ -1,9 +1,8 @@
 import {FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleKeyframes, StyleRules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
+import {varNames, vars} from '../../theme'
+import type {Style, StyleKeyframes, StyleRules} from '../../types'
 
 // TODO: should keyframes be prefixed?
 const KEYFRAMES_PULSE = 'skeleton-pulse'
@@ -31,7 +30,7 @@ const component: StyleRules = {
     'opacity': 0,
     'transition': 'opacity 200ms ease-in',
 
-    '@nest': {
+    'nest': {
       '&[data-animated]': {
         backgroundImage: [
           `linear-gradient(to right`,
@@ -61,39 +60,47 @@ const component: StyleRules = {
   },
 
   '.font-skeleton': {
-    height: `calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))`,
+    height: `calc(${vars.font.skeleton.lineHeight} - ${vars.font.skeleton.ascenderHeight} - ${vars.font.skeleton.descenderHeight})`,
   },
 }
 
 for (const size of FONT_CODE_SIZE) {
   _responsiveRule(component, `code-skeleton-${size}`, {
-    '--font-skeleton-line-height': vars.font.code.sizes[size].lineHeight,
-    '--font-skeleton-ascender-height': vars.font.code.sizes[size].ascenderHeight,
-    '--font-skeleton-descender-height': vars.font.code.sizes[size].descenderHeight,
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.code.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.code.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.code.sizes[size].descenderHeight,
+    },
   })
 }
 
 for (const size of FONT_HEADING_SIZE) {
   _responsiveRule(component, `heading-skeleton-${size}`, {
-    '--font-skeleton-line-height': vars.font.heading.sizes[size].lineHeight,
-    '--font-skeleton-ascender-height': vars.font.heading.sizes[size].ascenderHeight,
-    '--font-skeleton-descender-height': vars.font.heading.sizes[size].descenderHeight,
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.heading.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.heading.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.heading.sizes[size].descenderHeight,
+    },
   })
 }
 
 for (const size of FONT_LABEL_SIZE) {
   _responsiveRule(component, `label-skeleton-${size}`, {
-    '--font-skeleton-line-height': vars.font.label.sizes[size].lineHeight,
-    '--font-skeleton-ascender-height': vars.font.label.sizes[size].ascenderHeight,
-    '--font-skeleton-descender-height': vars.font.label.sizes[size].descenderHeight,
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.label.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.label.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.label.sizes[size].descenderHeight,
+    },
   })
 }
 
 for (const size of FONT_TEXT_SIZE) {
   _responsiveRule(component, `text-skeleton-${size}`, {
-    '--font-skeleton-line-height': vars.font.text.sizes[size].lineHeight,
-    '--font-skeleton-ascender-height': vars.font.text.sizes[size].ascenderHeight,
-    '--font-skeleton-descender-height': vars.font.text.sizes[size].descenderHeight,
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.text.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.text.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.text.sizes[size].descenderHeight,
+    },
   })
 }
 

package/src/css/components/skeleton/skeleton.ts

@@ -1,7 +1,8 @@
-import {_comp} from '../../_comp'
+import {_composeClassNames} from '../../_composeClassNames'
 import {_resp} from '../../_resp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 import {radius} from '../../aspects/radius'
-import {
+import type {
   CodeSkeletonStyleProps,
   HeadingSkeletonStyleProps,
   LabelSkeletonStyleProps,
@@ -11,25 +12,25 @@ import {
 
 /** @beta */
 export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return _comp('skeleton', radius(props))
+  return _composeClassNames(_scopeClassNames('skeleton'), radius(props))
 }
 
 /** @beta */
 export function codeSkeleton(props: CodeSkeletonStyleProps): string | undefined {
-  return _comp('font-skeleton', _resp('code-skeleton', props.size))
+  return _scopeClassNames('font-skeleton', _resp('code-skeleton', props.size))
 }
 
 /** @beta */
 export function headingSkeleton(props: HeadingSkeletonStyleProps): string | undefined {
-  return _comp('font-skeleton', _resp('heading-skeleton', props.size))
+  return _scopeClassNames('font-skeleton', _resp('heading-skeleton', props.size))
 }
 
 /** @beta */
 export function labelSkeleton(props: LabelSkeletonStyleProps): string | undefined {
-  return _comp('font-skeleton', _resp('label-skeleton', props.size))
+  return _scopeClassNames('font-skeleton', _resp('label-skeleton', props.size))
 }
 
 /** @beta */
 export function textSkeleton(props: TextSkeletonStyleProps): string | undefined {
-  return _comp('font-skeleton', _resp('text-skeleton', props.size))
+  return _scopeClassNames('font-skeleton', _resp('text-skeleton', props.size))
 }

package/src/css/components/skeleton/types.ts

@@ -1,13 +1,11 @@
-import {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
+import type {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
 
-import {RadiusStyleProps} from '../../aspects/radius'
-import {ResponsiveProp} from '../../types'
+import type {RadiusStyleProps} from '../../aspects/radius'
+import type {ResponsiveProp} from '../../types'
 
 /** @beta */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface SkeletonStyleProps extends RadiusStyleProps {
-  // visible?: boolean
-}
+export interface SkeletonStyleProps extends RadiusStyleProps {}
 
 /** @beta */
 export interface CodeSkeletonStyleProps {

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

@@ -1,4 +1,4 @@
-import {Style, StyleRules} from '../../types'
+import type {Style, StyleRules} from '../../types'
 
 const component: StyleRules = {
   '.toast-layer': {

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

@@ -1,26 +1,26 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @public */
 export function toastLayer() {
-  return _comp('toast-layer')
+  return _scopeClassNames('toast-layer')
 }
 
 /** @public */
 export function toast() {
-  return _comp('toast')
+  return _scopeClassNames('toast')
 }
 
 /** @public */
 export function toastLoadingBar() {
-  return _comp('toast-loading-bar')
+  return _scopeClassNames('toast-loading-bar')
 }
 
 /** @public */
 export function toastLoadingBarProgress() {
-  return _comp('toast-loading-bar-progress')
+  return _scopeClassNames('toast-loading-bar-progress')
 }
 
 /** @public */
 export function toastLoadingBarMask() {
-  return _comp('toast-loading-bar-mask')
+  return _scopeClassNames('toast-loading-bar-mask')
 }

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

@@ -1,16 +1,16 @@
-import {Style, StyleRules} from '../../types'
-import {vars} from '../../vars'
+import {vars} from '../../theme'
+import type {Style, StyleRules} from '../../types'
 
 const component: StyleRules = {
   '.tree-item': {
-    '@nest': {
+    nest: {
       '&[role="none"] > [role="treeitem"]': {
         outline: 'none',
         cursor: 'default',
         borderRadius: '3px',
 
-        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
+        backgroundColor: vars.color.bg,
+        color: vars.color.fg,
       },
 
       '&[role="none"] > [role="treeitem"]:focus': {
@@ -25,29 +25,13 @@ const component: StyleRules = {
         cursor: 'default',
         borderRadius: '3px',
 
-        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
+        backgroundColor: vars.color.bg,
+        color: vars.color.fg,
       },
 
       '&[role="treeitem"]:focus > div': {
         position: 'relative',
       },
-
-      // &[role='treeitem'] {
-      //   outline: none;
-
-      //   & > div {
-      //     cursor: default;
-      //     border-radius: 3px;
-
-      //     background-color: var(--card-bg-color);
-      //     color: var(--treeitem-fg-color);
-      //   }
-
-      //   &:focus > div {
-      //     position: relative;
-      //   }
-      // }
     },
   },
 }

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

@@ -1,6 +1,6 @@
-import {_comp} from '../../_comp'
+import {_scopeClassNames} from '../../_scopeClassNames'
 
 /** @beta */
 export function treeItem(): string | undefined {
-  return _comp('tree-item')
+  return _scopeClassNames('tree-item')
 }

package/src/css/constants.ts

@@ -1,5 +1,6 @@
 /** @public */
 export const BREAKPOINTS = {
+  0: 0,
   1: 360,
   2: 600,
   3: 900,
@@ -7,6 +8,3 @@ export const BREAKPOINTS = {
   5: 1800,
   6: 2400,
 }
-
-/** @public */
-export const PREFIX = 's-'