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

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

@@ -1,112 +1,23 @@
-import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
-// import {_resp} from '../../_resp'
-import {responsiveRules} from '../../responsiveRules'
 import {Rules} from '../../types'
 import {vars} from '../../vars'
 
 export const textInputRules: Rules = {
   'text-input': {
     '--font-family': vars.font.text.family,
-  },
-
-  ...SPACE.reduce<Rules>((acc, space) => {
-    return {
-      ...acc,
-      ...responsiveRules(`text-input-p-${space}`.replace('.', '_'), {
-        '--padding-top': `calc(${vars.space[space]} - var(--font-ascender-height))`,
-        '--padding-right': vars.space[space],
-        '--padding-bottom': `calc(${vars.space[space]} - var(--font-descender-height))`,
-        '--padding-left': vars.space[space],
-      }),
-    }
-  }, {}),
-
-  ...FONT_TEXT_SIZE.reduce<Rules>((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`text-input-${size}`, {
-        '--font-size': vars.font.text.sizes[size].fontSize,
-        '--font-line-height': vars.font.text.sizes[size].lineHeight,
-        '--font-letter-spacing': vars.font.text.sizes[size].letterSpacing,
-        '--font-ascender-height': vars.font.text.sizes[size].ascenderHeight,
-        '--font-descender-height': vars.font.text.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-
-  'text-input-element': {
-    'appearance': 'none',
-    'background': 'none',
-    'border': 0,
-    'borderRadius': 0,
-    'outline': 'none',
-    'width': '100%',
-    'boxSizing': 'border-box',
-    'fontFamily': 'var(--font-family)',
-    'fontSize': 'var(--font-size)',
-    'fontWeight': 'var(--font-weight)',
-    'lineHeight': 'var(--font-line-height)',
-    'letterSpacing': 'var(--font-letter-spacing)',
-    'margin': 0,
-    'position': 'relative',
-    'zIndex': 1,
-    'display': 'block',
-    'color': 'var(--input-fg-color)',
-    'paddingTop': 'var(--padding-top)',
-    'paddingRight': 'var(--padding-right)',
-    'paddingBottom': 'var(--padding-bottom)',
-    'paddingLeft': 'var(--padding-left)',
-
-    '--input-fg-color': 'var(--color-input-default-enabled-fg)',
 
     '@nest': {
-      // NOTE: This is a hack to disable Chrome’s autofill styles
-      '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
-        {
-          WebkitTextFillColor: 'var(--input-fg-color) !important',
-          transition: 'background-color 5000s',
-          transitionDelay: '86400s', // 24h
-        },
-
-      /* &:is(textarea) */
-      // '&[data-as="textarea"]': {
-      //   resize: 'none',
-      // },
-
-      '&::placeholder': {
-        color: 'var(--input-placeholder-color)',
+      '& > span': {
+        borderRadius: 'inherit',
       },
-
-      // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
-      //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-      //   /* enabled */
-      //   &:not(:invalid):not(:disabled):not(:read-only) {
-      //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-      //   }
-      //   /* disabled */
-      //   &:not(:invalid):disabled {
-      //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
-      //   }
-      //   /* invalid */
-      //   &:invalid {
-      //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
-      //   }
-      //   /* readOnly */
-      //   &:read-only {
-      //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
-      //   }
-      // }
     },
   },
 
   'text-input-prefix': {
-    'borderTopRightRadius': 0,
-    'borderBottomRightRadius': 0,
+    'borderTop': '1px solid var(--color-border)',
+    'borderLeft': '1px solid var(--color-border)',
+    'borderBottom': '1px solid var(--color-border)',
+    'borderTopRightRadius': '0 !important',
+    'borderBottomRightRadius': '0 !important',
 
     '@nest': {
       '& > span': {
@@ -117,8 +28,11 @@ export const textInputRules: Rules = {
   },
 
   'text-input-suffix': {
-    'borderTopLeftRadius': 0,
-    'borderBottomLeftRadius': 0,
+    'borderTop': '1px solid var(--color-border)',
+    'borderRight': '1px solid var(--color-border)',
+    'borderBottom': '1px solid var(--color-border)',
+    'borderTopLeftRadius': '0 !important',
+    'borderBottomLeftRadius': '0 !important',
 
     '@nest': {
       '& > span': {
@@ -129,31 +43,34 @@ export const textInputRules: Rules = {
   },
 
   'text-input-presentation': {
-    '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-
-    'position': 'absolute',
-    'top': 0,
-    'left': 0,
-    'right': 0,
-    'bottom': 0,
-    'display': 'block',
-    'pointerEvents': 'none',
-    'zIndex': 0,
-
-    'backgroundColor': 'var(--input-bg-color)',
-    'boxShadow': 'var(--input-box-shadow)',
-
-    '--input-border-color': 'var(--color-input-default-enabled-border)',
-
+    // position: 'absolute',
+    // top: 0,
+    // left: 0,
+    // right: 0,
+    // bottom: 0,
+    // display: 'block',
+    // pointerEvents: 'none',
+    // zIndex: 0,
+    // backgroundColor: 'var(--input-bg-color)',
+    // 'boxShadow': 'var(--input-box-shadow)',
+    // '--input-border-color': 'var(--color-input-default-enabled-border)',
+    // '--input-border-color': 'var(--color-tinted-default-border-1)',
+    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
     // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
     // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
     // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
     // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-
+    // '@nest': {
+    //   'input:hover + &': {
+    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
+    //   },
+    //   'input:focus + &': {
+    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
+    //   },
+    // },
     // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
     //   --card-bg-color: ${color.input.default.enabled.bg};
     //   --card-fg-color: ${color.input.default.enabled.fg};
-
     //   /* enabled */
     //   *:not(:disabled) + &[data-border] {
     //     --input-box-shadow: ${focusRingBorderStyle({
@@ -161,12 +78,10 @@ export const textInputRules: Rules = {
     //       width: input.border.width,
     //     })};
     //   }
-
     //   /* invalid */
     //   *:not(:disabled):invalid + & {
     //     --card-bg-color: ${color.input.invalid.enabled.bg};
     //     --card-fg-color: ${color.input.invalid.enabled.fg};
-
     //     &[data-border] {
     //       --input-box-shadow: ${focusRingBorderStyle({
     //         color: color.input.invalid.enabled.border,
@@ -174,7 +89,6 @@ export const textInputRules: Rules = {
     //       })};
     //     }
     //   }
-
     //   /* focused */
     //   *:not(:disabled):focus + & {
     //     &[data-border] {
@@ -185,20 +99,17 @@ export const textInputRules: Rules = {
     //             focusRing: input.text.focusRing,
     //           })};
     //     }
-
     //     &:not([data-border]) {
     //       --input-box-shadow: ${$unstableDisableFocusRing
     //         ? undefined
     //         : focusRingStyle({focusRing: input.text.focusRing})};
     //     }
     //   }
-
     //   /* disabled */
     //   *:not(:invalid):disabled + & {
     //     --card-bg-color: ${color.input.default.disabled.bg} !important;
     //     --card-fg-color: ${color.input.default.disabled.fg} !important;
     //     --card-icon-color: ${color.input.default.disabled.fg} !important;
-
     //     &[data-border] {
     //       --input-box-shadow: ${focusRingBorderStyle({
     //         color: color.input.default.disabled.border,
@@ -206,12 +117,10 @@ export const textInputRules: Rules = {
     //       })};
     //     }
     //   }
-
     //   *:invalid:disabled + & {
     //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
     //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
     //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-
     //     &[data-border] {
     //       --input-box-shadow: ${focusRingBorderStyle({
     //         color: color.input.invalid.disabled.border,
@@ -219,37 +128,31 @@ export const textInputRules: Rules = {
     //       })};
     //     }
     //   }
-
     //   /* readOnly */
     //   *:not(:invalid):read-only + & {
     //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
     //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
     //   }
-
     //   *:invalid:read-only + & {
     //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
     //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
     //   }
-
     //   /* hovered */
     //   @media (hover: hover) {
     //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
     //       --card-bg-color: ${color.input.default.hovered.bg};
     //       --card-fg-color: ${color.input.default.hovered.fg};
     //     }
-
     //     *:invalid:not(:disabled):not(:read-only):hover + & {
     //       --card-bg-color: ${color.input.invalid.hovered.bg};
     //       --card-fg-color: ${color.input.invalid.hovered.fg};
     //     }
-
     //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
     //       --input-box-shadow: ${focusRingBorderStyle({
     //         color: color.input.default.hovered.border,
     //         width: input.border.width,
     //       })};
     //     }
-
     //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
     //       --input-box-shadow: ${focusRingBorderStyle({
     //         color: color.input.invalid.hovered.border,

package/src/css/primitives/textInput/textInput.ts

@@ -1,15 +1,8 @@
-import {_resp} from '../../_resp'
+// import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
+import {_input} from '../_input'
 import {TextInputStyleProps} from './types'
 
-export function textInput(props: TextInputStyleProps): string {
-  return composeClassNames(
-    'text-input',
-    _resp('text-input', props.size),
-    _resp('text-input-p', props.padding),
-  )
-}
-
-export function textInputElement(): string {
-  return composeClassNames('text-input-element')
+export function textInput(props: TextInputStyleProps): string | undefined {
+  return composeClassNames(_input(props), 'text-input')
 }

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

@@ -1,8 +1,11 @@
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ResponsiveProp} from '../../types'
+// import {FontTextSize, Space} from '@sanity/ui/theme'
+// import {ResponsiveProp} from '../../types'
+
+import {InputStyleProps} from '../_input'
 
 /** @public */
-export interface TextInputStyleProps {
-  padding: ResponsiveProp<Space>
-  size: ResponsiveProp<FontTextSize>
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TextInputStyleProps extends InputStyleProps {
+  // padding: ResponsiveProp<Space>
+  // fontSize: ResponsiveProp<FontTextSize>
 }

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

@@ -1,45 +1,45 @@
 import type {Rules} from '../../types'
-import {vars} from '../../vars'
 
 export const tokenRules: Rules = {
   token: {
     '@nest': {
-      '&.atrule': {color: vars.color.syntax.atrule},
-      '&.attr-name': {color: vars.color.syntax.attrName},
-      '&.attr-value': {color: vars.color.syntax.attrValue},
-      '&.attribute': {color: vars.color.syntax.attribute},
-      '&.boolean': {color: vars.color.syntax.boolean},
-      '&.builtin': {color: vars.color.syntax.builtin},
-      '&.cdata': {color: vars.color.syntax.cdata},
-      '&.char': {color: vars.color.syntax.char},
-      '&.class': {color: vars.color.syntax.class},
-      '&.class-name': {color: vars.color.syntax.className},
-      '&.comment': {color: vars.color.syntax.comment},
-      '&.constant': {color: vars.color.syntax.constant},
-      '&.deleted': {color: vars.color.syntax.deleted},
-      '&.doctype': {color: vars.color.syntax.doctype},
-      '&.entity': {color: vars.color.syntax.entity},
-      '&.function': {color: vars.color.syntax.function},
-      '&.hexcode': {color: vars.color.syntax.hexcode},
-      '&.id': {color: vars.color.syntax.id},
-      '&.important': {color: vars.color.syntax.important},
-      '&.inserted': {color: vars.color.syntax.inserted},
-      '&.keyword': {color: vars.color.syntax.keyword},
-      '&.number': {color: vars.color.syntax.number},
-      '&.operator': {color: vars.color.syntax.operator},
-      '&.prolog': {color: vars.color.syntax.prolog},
-      '&.property': {color: vars.color.syntax.property},
-      '&.pseudo-class': {color: vars.color.syntax.pseudoClass},
-      '&.pseudo-element': {color: vars.color.syntax.pseudoElement},
-      '&.punctuation': {color: vars.color.syntax.punctuation},
-      '&.regex': {color: vars.color.syntax.regex},
-      '&.selector': {color: vars.color.syntax.selector},
-      '&.string': {color: vars.color.syntax.string},
-      '&.symbol': {color: vars.color.syntax.symbol},
-      '&.tag': {color: vars.color.syntax.tag},
-      '&.unit': {color: vars.color.syntax.unit},
-      '&.url': {color: vars.color.syntax.url},
-      '&.variable': {color: vars.color.syntax.variable},
+      '&.atrule': {color: 'var(--color-token-atrule)'},
+      '&.attr-name': {color: 'var(--color-token-attr-name)'},
+      '&.attr-value': {color: 'var(--color-token-attr-value)'},
+      '&.attribute': {color: 'var(--color-token-attribute)'},
+      '&.boolean': {color: 'var(--color-token-boolean)'},
+      '&.builtin': {color: 'var(--color-token-builtin)'},
+      '&.cdata': {color: 'var(--color-token-cdata)'},
+      '&.char': {color: 'var(--color-token-char)'},
+      '&.class': {color: 'var(--color-token-class)'},
+      '&.class-name': {color: 'var(--color-token-class-name)'},
+      '&.comment': {color: 'var(--color-token-comment)'},
+      '&.constant': {color: 'var(--color-token-constant)'},
+      '&.deleted': {color: 'var(--color-token-deleted)'},
+      '&.doctype': {color: 'var(--color-token-doctype)'},
+      '&.entity': {color: 'var(--color-token-entity)'},
+      '&.function': {color: 'var(--color-token-function)'},
+      '&.hexcode': {color: 'var(--color-token-hexcode)'},
+      '&.id': {color: 'var(--color-token-id)'},
+      '&.important': {color: 'var(--color-token-important)'},
+      '&.inserted': {color: 'var(--color-token-inserted)'},
+      '&.keyword': {color: 'var(--color-token-keyword)'},
+      '&.number': {color: 'var(--color-token-number)'},
+      '&.operator': {color: 'var(--color-token-operator)'},
+      '&.prolog': {color: 'var(--color-token-prolog)'},
+      '&.property': {color: 'var(--color-token-property)'},
+      '&.pseudo-class': {color: 'var(--color-token-pseudo-class)'},
+      '&.pseudo-element': {color: 'var(--color-token-pseudo-element)'},
+      '&.punctuation': {color: 'var(--color-token-punctuation)'},
+      '&.attr-value &:not(.attr-equals).punctuation': {color: 'inherit'},
+      '&.regex': {color: 'var(--color-token-regex)'},
+      '&.selector': {color: 'var(--color-token-selector)'},
+      '&.string': {color: 'var(--color-token-string)'},
+      '&.symbol': {color: 'var(--color-token-symbol)'},
+      '&.tag': {color: 'var(--color-token-tag)'},
+      '&.unit': {color: 'var(--color-token-unit)'},
+      '&.url': {color: 'var(--color-token-url)'},
+      '&.variable': {color: 'var(--color-token-variable)'},
     },
   },
 }

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

@@ -6,6 +6,8 @@ export const tooltipRules: Rules = {
   },
 
   'tooltip-card': {
+    'willChange': 'transform',
+
     '@nest': {
       '&[data-animate] > *': {
         // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);

package/src/css/primitives/tooltip/tooltip.ts

@@ -1,9 +1,9 @@
 import {composeClassNames} from '../../composeClassNames'
 
-export function tooltip(): string {
+export function tooltip(): string | undefined {
   return composeClassNames('tooltip')
 }
 
-export function tooltipCard(): string {
+export function tooltipCard(): string | undefined {
   return composeClassNames('tooltip-card')
 }

package/src/css/rules.ts

@@ -2,6 +2,10 @@ import {breadcrumbsRules} from './components/breadcrumbs/rules'
 import {dialogRules} from './components/dialog/rules'
 import {menuRules} from './components/menu/rules'
 import {skeletonRules} from './components/skeleton/rules'
+import {toastRules} from './components/toast/rules'
+import {_arrowRules} from './primitives/_arrow/rules'
+import {_inputRules} from './primitives/_input/rules'
+import {_selectableRules} from './primitives/_selectable/rules'
 import {avatarRules} from './primitives/avatar/rules'
 import {badgeRules} from './primitives/badge/rules'
 import {boxRules} from './primitives/box/rules'
@@ -16,7 +20,6 @@ import {labelRules} from './primitives/label/rules'
 import {popoverRules} from './primitives/popover/rules'
 import {radioRules} from './primitives/radio/rules'
 import {selectRules} from './primitives/select/rules'
-import {selectableRules} from './primitives/selectable/rules'
 import {spinnerRules} from './primitives/spinner/rules'
 import {switchRules} from './primitives/switch/rules'
 import {textRules} from './primitives/text/rules'
@@ -33,6 +36,7 @@ import {gapRules} from './styles/gap/rules'
 import {gridRules} from './styles/grid/rules'
 import {gridItemRules} from './styles/gridItem/rules'
 import {heightRules} from './styles/height/rules'
+import {insetRules} from './styles/inset/rules'
 import {marginRules} from './styles/margin/rules'
 import {maxWidthRules} from './styles/maxWidth/rules'
 import {outlineRules} from './styles/outline/rules'
@@ -42,8 +46,10 @@ import {pointerEventsRules} from './styles/pointerEvents/rules'
 import {positionRules} from './styles/position/rules'
 import {radiusRules} from './styles/radius/rules'
 import {shadowRules} from './styles/shadow/rules'
+import {textOverflowRules} from './styles/textOverflow/rules'
 import {widthRules} from './styles/width/rules'
 import {type Rules} from './types'
+import {srOnlyRules} from './utils/srOnly/rules'
 
 export const rules: Rules = {
   // styles
@@ -56,6 +62,7 @@ export const rules: Rules = {
   ...gridItemRules,
   ...gridRules,
   ...heightRules,
+  ...insetRules,
   ...marginRules,
   ...outlineRules,
   ...overflowRules,
@@ -66,7 +73,13 @@ export const rules: Rules = {
   ...shadowRules,
   ...widthRules,
 
+  // utils
+  ...srOnlyRules,
+
   // primitives
+  ..._arrowRules,
+  ..._inputRules,
+  ..._selectableRules,
   ...avatarRules,
   ...badgeRules,
   ...boxRules,
@@ -82,11 +95,11 @@ export const rules: Rules = {
   ...popoverRules,
   ...radioRules,
   ...selectRules,
-  ...selectableRules,
   ...spinnerRules,
   ...switchRules,
   ...textAreaRules,
   ...textInputRules,
+  ...textOverflowRules,
   ...textRules,
   ...tokenRules,
   ...tooltipRules,
@@ -96,4 +109,5 @@ export const rules: Rules = {
   ...dialogRules,
   ...menuRules,
   ...skeletonRules,
+  ...toastRules,
 }

package/src/css/styles/border/border.ts

@@ -11,7 +11,7 @@ const prefixes = {
 }
 
 /** @public */
-export function border(props: BorderStyleProps): string {
+export function border(props: BorderStyleProps): string | undefined {
   return composeClassNames(
     _resp(prefixes.border, props.border),
     _resp(prefixes.borderTop, props.borderTop),

package/src/css/styles/display/display.ts

@@ -0,0 +1,7 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {DisplayStyleProps} from './types'
+
+export function display(props: DisplayStyleProps): string | undefined {
+  return composeClassNames(_resp(undefined, props.display))
+}

package/src/css/styles/display/index.ts

@@ -0,0 +1,2 @@
+export * from './display'
+export * from './types'

package/src/css/styles/display/rules.ts

@@ -43,11 +43,11 @@ export const displayRules: Rules = {
     },
   }),
 
-  ...responsiveRules('grid-flex', {
+  ...responsiveRules('inline-grid', {
     'gridTemplateRows': 'auto',
     '@nest': {
       '&:not([hidden])': {
-        display: 'grid-flex',
+        display: 'inline-grid',
       },
     },
   }),

package/src/css/styles/display/types.ts

@@ -0,0 +1,17 @@
+import {ResponsiveProp} from '../../types'
+
+/**
+ * @public
+ */
+export type Display =
+  | 'block'
+  | 'inline-block'
+  | 'flex'
+  | 'inline-flex'
+  | 'grid'
+  | 'inline-grid'
+  | 'none'
+
+export interface DisplayStyleProps {
+  display?: ResponsiveProp<Display>
+}

package/src/css/styles/flex/flex.ts

@@ -10,7 +10,7 @@ const prefixes = {
 }
 
 /** @public */
-export function flex(props: FlexStyleProps): string {
+export function flex(props: FlexStyleProps): string | undefined {
   return composeClassNames(
     _resp(prefixes.align, props.align),
     _resp(prefixes.direction, props.direction),

package/src/css/styles/flexItem/flexItem.ts

@@ -3,6 +3,6 @@ import {composeClassNames} from '../../composeClassNames'
 import {FlexItemStyleProps} from './types'
 
 /** @public */
-export function flexItem(props: FlexItemStyleProps): string {
+export function flexItem(props: FlexItemStyleProps): string | undefined {
   return composeClassNames(_resp(`flex`, props.flex))
 }

package/src/css/styles/flexItem/rules.ts

@@ -3,6 +3,7 @@ import {type Rules} from '../../types'
 
 export const flexItemRules: Rules = {
   ...responsiveRules('flex-none', {flex: 'none'}),
+  ...responsiveRules('flex-auto', {flex: 'auto'}),
   ...responsiveRules('flex-1', {flex: 1}),
   ...responsiveRules('flex-2', {flex: 2}),
   ...responsiveRules('flex-3', {flex: 3}),

package/src/css/styles/font/font.ts

@@ -8,7 +8,7 @@ const prefixes = {
 } as const
 
 /** @public */
-export function font(props: FontStyleProps): string {
+export function font(props: FontStyleProps): string | undefined {
   return composeClassNames(
     'font',
     props.weight && `${prefixes.weight}-${props.weight}`,

package/src/css/styles/font/rules.ts

@@ -3,8 +3,9 @@ import {type Rules} from '../../types'
 
 export const fontRules: Rules = {
   'font': {
-    'position': 'relative',
+    // 'position': 'relative',
     'fontFamily': 'var(--font-family)',
+    'fontFeatureSettings': 'var(--font-feature-settings)',
     'fontSize': 'var(--font-size)',
     'lineHeight': 'var(--font-line-height)',
     'letterSpacing': 'var(--font-letter-spacing)',
@@ -13,9 +14,8 @@ export const fontRules: Rules = {
     'padding': '1px 0',
     'margin': '0',
 
-    '--font-cap-height':
-      'calc(var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height))',
-    '--font-icon-offset': 'calc((var(--font-cap-height) - var(--font-icon-size)) / 2)',
+    '--font-icon-offset':
+      'calc(((var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height)) - var(--font-icon-size)) / 2)',
     '--font-weight': 'var(--font-weight-regular)',
 
     '@nest': {

package/src/css/styles/gap/gap.ts

@@ -3,6 +3,6 @@ import {composeClassNames} from '../../composeClassNames'
 import {GapStyleProps} from './types'
 
 /** @public */
-export function gap(props: GapStyleProps): string {
+export function gap(props: GapStyleProps): string | undefined {
   return composeClassNames(_resp(`g`, props.gap), _resp(`gx`, props.gapX), _resp(`gy`, props.gapY))
 }

package/src/css/styles/gap/rules.ts

@@ -1,4 +1,5 @@
 import {SPACE} from '@sanity/ui/theme'
+
 import {responsiveRules} from '../../responsiveRules'
 import {type Rules} from '../../types'
 import {vars} from '../../vars'

package/src/css/styles/gap/types.ts

@@ -1,4 +1,5 @@
 import {Space} from '@sanity/ui/theme'
+
 import {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/styles/grid/grid.ts

@@ -2,7 +2,7 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {GridStyleProps} from './types'
 
-export function grid(props: GridStyleProps): string {
+export function grid(props: GridStyleProps): string | undefined {
   return composeClassNames(
     _resp('auto-cols', props.autoCols),
     _resp('auto-rows', props.autoRows),