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

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

@@ -0,0 +1,154 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.checkbox': {
+    position: 'relative',
+    display: 'inline-block',
+  },
+
+  '.checkbox-input': {
+    'position': 'absolute',
+    'top': 0,
+    'left': 0,
+    'width': '100%',
+    'height': '100%',
+    'outline': 'none',
+    'opacity': 0,
+    'zIndex': 1,
+    'padding': 0,
+    'margin': 0,
+
+    '@nest': {
+      '& + span': {
+        'position': 'relative',
+        'display': 'block',
+        'width': `var(--input-checkbox-size)`,
+        'height': `var(--input-checkbox-size)`,
+        'boxSizing': 'border-box',
+        'borderRadius': `var(--radius-2)`,
+        'lineHeight': 1,
+        'backgroundColor': `var(--color-checkbox-bg)`,
+        'boxShadow': `inset 0 0 0 1px var(--color-checkbox-border)`,
+        'color': `var(--color-checkbox-fg)`,
+
+        // '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
+        // '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
+        // '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
+
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-0)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-1)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
+
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.border,
+        //   width: input.border.width,
+        // })},
+      },
+
+      '& + span > svg': {
+        display: 'block',
+        position: 'absolute',
+        opacity: 0,
+        height: '100%',
+        width: '100%',
+      },
+
+      '& + span > svg > path': {
+        vectorEffect: 'non-scaling-stroke',
+        strokeWidth: '1.5px !important',
+      },
+
+      '&:hover + span': {
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
+      },
+
+      '&:checked + span': {
+        '--color-checkbox-bg': 'var(--color-solid-default-bg-0)',
+        '--color-checkbox-border': 'var(--color-solid-default-bg-0)',
+        '--color-checkbox-fg': 'var(--color-solid-default-fg-0)',
+        // '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
+        // '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
+        // '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.fg,
+        //   width: input.border.width,
+        // })},
+      },
+
+      '&:checked + span > svg:first-child': {
+        opacity: 1,
+      },
+
+      // focus
+      '&:not(:disabled):focus:focus-visible + span': {
+        // box-shadow: ${focusRingStyle({focusRing})},
+      },
+
+      // focus when checked - uses a different offset
+      '&:not(:disabled):focus:focus-visible&:checked + span': {
+        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
+      },
+
+      '&[data-error] + span': {
+        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-border)',
+        '--color-checkbox-border': 'var(--color-input-invalid-enabled-bg)',
+        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-fg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.invalid.enabled.muted.bg,
+        // })},
+      },
+
+      '&[data-error]:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-muted-bg)',
+        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-bg)',
+      },
+
+      '&[data-error]:checked:not(:disabled):focus:focus-visible + span': {
+        '--color-checkbox-border': 'var(--color-input-invalid-readOnly-muted-bg)',
+        // box-shadow: ${focusRingStyle({
+        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
+        //   focusRing: {width: 1, offset: 1},
+        // })},
+      },
+
+      '&:disabled + span': {
+        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-0)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-border-2)',
+      },
+
+      '&:checked:disabled + span': {
+        '--color-checkbox-bg': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
+        '--color-checkbox-fg': 'var(--color-tinted-default-bg-0)',
+      },
+
+      // '&:disabled:checked + span': {
+      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
+      // },
+
+      '&[data-read-only] + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-readOnly-bg)',
+        '--color-checkbox-border': 'var(--color-input-default-readOnly-border)',
+        '--color-checkbox-fg': 'var(--color-input-default-readOnly-fg)',
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.default.readOnly.border,
+        // })},
+      },
+
+      '&[data-read-only]:checked + span': {
+        '--color-checkbox-bg': 'var(--color-input-default-readOnly-muted-bg)',
+      },
+
+      '&:indeterminate + span > svg:last-child': {
+        opacity: 1,
+      },
+    },
+  },
+}
+
+export const checkboxStyle: Style = {layers: {primitive}}

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

@@ -1,9 +1,9 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 
 export function checkbox(): string | undefined {
-  return composeClassNames('checkbox')
+  return _comp('checkbox')
 }
 
 export function checkboxInput(): string | undefined {
-  return composeClassNames('checkbox-input')
+  return _comp('checkbox-input')
 }

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

@@ -0,0 +1,62 @@
+import {FONT_CODE_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.code': {
+    '--font-weight-regular': `var(--font-code-weight-regular)`,
+    '--font-weight-medium': `var(--font-code-weight-medium)`,
+    '--font-weight-semibold': `var(--font-code-weight-semibold)`,
+    '--font-weight-bold': `var(--font-code-weight-bold)`,
+
+    '--font-family': `var(--font-code-family)`,
+    '--font-feature-settings': `var(--font-code-feature-settings)`,
+
+    'color': 'var(--color-code-fg)',
+
+    '@nest': {
+      '& > code': {
+        fontFamily: 'inherit',
+      },
+
+      // & code {
+      //   font-family: inherit;
+
+      //   &.refractor .token {
+      //     ${codeSyntaxHighlightingStyle}
+      //   }
+      // }
+
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+        borderRadius: '1px',
+      },
+
+      '& svg': {
+        // Some popular CSS libraries change the defaults for SVG display
+        // Make sure SVGs are rendered as inline elements
+        display: 'inline',
+      },
+
+      '& [data-sanity-icon]': {
+        verticalAlign: 'baseline',
+      },
+    },
+  },
+}
+
+for (const size of FONT_CODE_SIZE) {
+  _responsiveRule(primitive, `code-${size}`, {
+    '--font-size': `var(--font-code-${size}-size)`,
+    '--font-line-height': `var(--font-code-${size}-line-height)`,
+    '--font-letter-spacing': `var(--font-code-${size}-letter-spacing)`,
+    '--font-icon-size': `var(--font-code-${size}-icon-size)`,
+    '--font-ascender-height': `var(--font-code-${size}-ascender-height)`,
+    '--font-descender-height': `var(--font-code-${size}-descender-height)`,
+    // '--font-cap-height': `var(--font-code-${size}-cap-height)`,
+  })
+}
+
+export const codeStyle: Style = {layers: {primitive}}

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

@@ -1,9 +1,9 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {font} from '../../styles'
+import {font} from '../../aspects'
 import {CodeStyleProps} from './types'
 
 /** @public */
 export function code(props: CodeStyleProps): string | undefined {
-  return composeClassNames('code', 'block', font(props), _resp(`code`, props.size))
+  return _comp('code', 'block', font(props), _resp(`code`, props.size))
 }

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

@@ -1,4 +1,4 @@
-import {FontStyleProps} from '../../styles'
+import {FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */

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

@@ -0,0 +1,10 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.container': {
+    margin: '0 auto',
+    width: '100%',
+  },
+}
+
+export const containerStyle: Style = {layers: {primitive}}

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

@@ -1,7 +1,7 @@
-import {composeClassNames} from '../../composeClassNames'
-import {maxWidth} from '../../styles'
+import {_comp} from '../../_comp'
+import {maxWidth} from '../../aspects'
 import {ContainerStyleProps} from './types'
 
 export function container(props: ContainerStyleProps): string | undefined {
-  return composeClassNames('container', maxWidth({maxWidth: props.width}))
+  return _comp('container', maxWidth({maxWidth: props.width}))
 }

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

@@ -0,0 +1,47 @@
+import {FONT_HEADING_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.heading': {
+    '--font-weight-regular': `var(--font-heading-weight-regular)`,
+    '--font-weight-medium': `var(--font-heading-weight-medium)`,
+    '--font-weight-semibold': `var(--font-heading-weight-semibold)`,
+    '--font-weight-bold': `var(--font-heading-weight-bold)`,
+
+    '--font-family': `var(--font-heading-family)`,
+    '--font-feature-settings': `var(--font-heading-feature-settings)`,
+
+    'color': 'var(--color-fg)',
+
+    '@nest': {
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+    },
+  },
+
+  // '.heading-accent': {
+  //   '--color-fg': 'var(--color-accent-fg)',
+  // },
+
+  '.heading-muted': {
+    '--color-fg': 'var(--color-tinted-default-fg-4)',
+  },
+}
+
+for (const size of FONT_HEADING_SIZE) {
+  _responsiveRule(primitive, `heading-${size}`, {
+    '--font-size': `var(--font-heading-${size}-size)`,
+    '--font-line-height': `var(--font-heading-${size}-line-height)`,
+    '--font-letter-spacing': `var(--font-heading-${size}-letter-spacing)`,
+    '--font-icon-size': `var(--font-heading-${size}-icon-size)`,
+    '--font-ascender-height': `var(--font-heading-${size}-ascender-height)`,
+    '--font-descender-height': `var(--font-heading-${size}-descender-height)`,
+    // '--font-cap-height': `var(--font-heading-${size}-cap-height)`,
+  })
+}
+
+export const headingStyle: Style = {layers: {primitive}}

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

@@ -1,17 +1,17 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {flexItem, font} from '../../styles'
+import {flexItem, font} from '../../aspects'
 import {HeadingStyleProps} from './types'
 
 /** @public */
 export function heading(props: HeadingStyleProps): string | undefined {
-  return composeClassNames(
-    'heading',
+  return _comp(
     'block',
-    flexItem(props),
+    'heading',
     font(props),
     props.accent && 'heading-accent',
     props.muted && 'heading-muted',
     _resp(`heading`, props.size),
+    flexItem(props),
   )
 }

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

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../styles'
+import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */

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

@@ -0,0 +1,22 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.kbd': {
+    // '--color-bg': 'var(--color-tinted-default-bg-1)',
+    // '--color-border': 'var(--color-tinted-default-border-2)',
+    // '--color-fg': 'var(--color-tinted-default-fg-3)',
+
+    'boxShadow': 'inset 0 0 0 0.5px var(--color-border)',
+    'background': 'var(--color-muted-bg)',
+    'font': 'inherit',
+    'verticalAlign': 'top',
+
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-block',
+      },
+    },
+  },
+}
+
+export const kbdStyle: Style = {layers: {primitive}}

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

@@ -1,7 +1,7 @@
-import {composeClassNames} from '../../composeClassNames'
-import {radius} from '../../styles'
+import {_comp} from '../../_comp'
+import {radius} from '../../aspects'
 import {KBDStyleProps} from './types'
 
 export function kbd(props: KBDStyleProps): string | undefined {
-  return composeClassNames('kbd', radius(props))
+  return _comp('kbd', radius(props))
 }

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

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

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

@@ -0,0 +1,48 @@
+import {FONT_LABEL_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.label': {
+    '--font-weight-regular': `var(--font-label-weight-regular)`,
+    '--font-weight-medium': `var(--font-label-weight-medium)`,
+    '--font-weight-semibold': `var(--font-label-weight-semibold)`,
+    '--font-weight-bold': `var(--font-label-weight-bold)`,
+
+    '--font-family': `var(--font-label-family)`,
+    '--font-feature-settings': `var(--font-label-feature-settings)`,
+
+    'color': 'var(--color-fg)',
+    'textTransform': 'uppercase',
+
+    '@nest': {
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+    },
+  },
+
+  '.label-accent': {
+    '--color-fg': 'var(--color-accent-fg)',
+  },
+
+  '.label-muted': {
+    '--color-fg': 'var(--color-muted-fg)',
+  },
+}
+
+for (const size of FONT_LABEL_SIZE) {
+  _responsiveRule(primitive, `label-${size}`, {
+    '--font-size': `var(--font-label-${size}-size)`,
+    '--font-line-height': `var(--font-label-${size}-line-height)`,
+    '--font-letter-spacing': `var(--font-label-${size}-letter-spacing)`,
+    '--font-icon-size': `var(--font-label-${size}-icon-size)`,
+    '--font-ascender-height': `var(--font-label-${size}-ascender-height)`,
+    '--font-descender-height': `var(--font-label-${size}-descender-height)`,
+    // '--font-cap-height': `var(--font-label-${size}-cap-height)`,
+  })
+}
+
+export const labelStyle: Style = {layers: {primitive}}

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

@@ -1,11 +1,11 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
-import {font} from '../../styles'
+import {font} from '../../aspects'
 import {LabelStyleProps} from './types'
 
 /** @public */
 export function label(props: LabelStyleProps): string | undefined {
-  return composeClassNames(
+  return _comp(
     'label',
     'block',
     font(props),

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

@@ -1,4 +1,4 @@
-import {FontStyleProps} from '../../styles'
+import {FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */

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

@@ -0,0 +1,5 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {}
+
+export const popoverStyle: Style = {layers: {primitive}}

package/src/css/primitives/popover/popover.ts

@@ -1,5 +1,5 @@
-import {composeClassNames} from '../../composeClassNames'
+import {_comp} from '../../_comp'
 
 export function popover(): string | undefined {
-  return composeClassNames('popover')
+  return _comp('popover')
 }

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

@@ -0,0 +1,123 @@
+import {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': 'var(--input-radio-size)',
+        'height': 'var(--input-radio-size)',
+        'borderRadius': '9999px',
+        'backgroundColor': 'var(--color-input-bg)',
+        'boxShadow': 'inset 0 0 0 1px var(--color-input-border)',
+        // border-radius: ${rem(input.radio.size / 2)};
+        // background: ${color.input.default.enabled.bg};
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.border,
+        //   width: input.border.width,
+        // })};
+
+        '--color-input-fg': 'var(--color-tinted-default-fg-0)',
+        '--color-input-bg': 'var(--color-tinted-default-bg-0)',
+        '--color-input-border': 'var(--color-tinted-default-border-1)',
+      },
+
+      '& > input + span::after': {
+        content: '""',
+        position: 'absolute',
+        top: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
+        left: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
+        width: 'var(--input-radio-mark-size)',
+        height: 'var(--input-radio-mark-size)',
+        backgroundColor: 'var(--color-input-fg)',
+        borderRadius: '9999px',
+        opacity: 0,
+      },
+
+      /* hovered */
+      '& > input:not(:disabled):hover + span': {
+        '--color-input-bg': 'var(--color-tinted-default-bg-1)',
+        '--color-input-border': 'var(--color-tinted-default-border-2)',
+      },
+
+      /* focused */
+      '& > input:not(:disabled):focus + span': {
+        '--color-input-border': 'var(--color-tinted-default-border-2)',
+        // box-shadow: ${focusRingStyle({
+        //   border: {width: input.border.width, color: color.input.default.enabled.border},
+        //   focusRing: input.radio.focusRing,
+        // })};
+      },
+
+      '& > input:not(:disabled):focus:not(:focus-visible) + span': {
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.border,
+        //   width: input.border.width,
+        // })};
+      },
+
+      '& > input:checked + span::after': {
+        opacity: 1,
+      },
+
+      //   /* customValidity */
+      //   &[data-error] + span {
+      //     background-color: ${color.input.invalid.enabled.border};
+      //     box-shadow: ${focusRingBorderStyle({
+      //       width: input.border.width,
+      //       color: color.input.invalid.enabled.muted.bg,
+      //     })};
+      //     &::after {
+      //       background: ${color.input.invalid.enabled.muted.bg};
+      //     }
+      //   }
+
+      //   /* read only */
+      //   &[data-read-only] + span {
+      //     box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
+      //     background: ${color.input.default.readOnly.bg};
+
+      //     &::after {
+      //       background: ${color.input.default.readOnly.border};
+      //     }
+      //   }
+
+      //   /* disabled */
+      //   &:not([data-read-only]):disabled + span {
+      //     box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
+      //     background: ${color.input.default.disabled.bg};
+
+      //     &::after {
+      //       background: ${color.input.default.disabled.border};
+      //     }
+      //   }
+      // `
+    },
+  },
+}
+
+export const radioStyle: Style = {layers: {primitive}}

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

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

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

@@ -0,0 +1,24 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.select': {
+    '@nest': {
+      '& > select:disabled': {
+        opacity: 1,
+      },
+    },
+  },
+
+  '.select-presentation': {
+    '@nest': {
+      '& > span': {
+        // place icon to the right
+        position: 'absolute',
+        top: 0,
+        right: 0,
+      },
+    },
+  },
+}
+
+export const selectStyle: Style = {layers: {primitive}}

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

@@ -1,11 +1,12 @@
+import {_comp} from '../../_comp'
 import {composeClassNames} from '../../composeClassNames'
 import {_input, _inputPresentation} from '../_input'
 import {SelectStyleProps} from './types'
 
 export function select(props: SelectStyleProps): string | undefined {
-  return composeClassNames('select', _input(props))
+  return composeClassNames(_comp('select'), _input(props))
 }
 
 export function selectPresentation(): string | undefined {
-  return composeClassNames('select-presentation', _inputPresentation())
+  return composeClassNames(_comp('select-presentation'), _inputPresentation())
 }

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

@@ -6,6 +6,7 @@ export const spinnerRules: Rules = {
   'animated-spinner-icon': {
     'animation': 'spinner-rotate 500ms linear infinite',
 
+    // @ts-expect-error - TODO: fix this
     '@keyframes': {
       'spinner-rotate': {
         from: {