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

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

@@ -9,14 +9,6 @@ const primitive: StyleRules = {
     position: 'relative',
   },
 
-  '.input-b': {
-    nest: {
-      '& .input-presentation': {
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
-      },
-    },
-  },
-
   '.input-element': {
     WebkitFontSmoothing: 'inherit',
     appearance: 'none',
@@ -45,6 +37,11 @@ const primitive: StyleRules = {
     width: ['-moz-available', '-webkit-fill-available', 'stretch'],
 
     nest: {
+      '&::placeholder': {
+        color: vars.color.input.text.placeholder,
+        opacity: 1,
+      },
+
       '.input[data-icon-left] &': {
         paddingLeft: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`,
       },
@@ -60,16 +57,16 @@ const primitive: StyleRules = {
         },
       },
 
-      '.input:not([data-invalid]) &::placeholder': {
-        color: vars.color.input.text.placeholder,
-      },
-
       '.input:not([data-invalid]) &:hover': {
-        [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0],
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0],
+        },
       },
 
       '.input:not([data-invalid]) &:focus': {
-        [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0],
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0],
+        },
       },
 
       '.input:not([data-invalid]) &:disabled': {
@@ -82,24 +79,27 @@ const primitive: StyleRules = {
       '.input[data-invalid] &': {
         vars: {
           [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[2],
-          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[4],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
         },
       },
 
-      '.input[data-invalid] &::placeholder': {
-        color: vars.color.input.text.placeholder,
-      },
-
       '.input[data-invalid] &:hover': {
-        [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
+        },
       },
 
       '.input[data-invalid] &:focus': {
-        [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
+        },
       },
 
       '.input[data-invalid] &:disabled': {
-        [varNames.color.input.text.fg]: vars.color.tinted.critical.border[3],
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.border[4],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[2],
+        },
       },
     },
   },
@@ -107,6 +107,7 @@ const primitive: StyleRules = {
   '.input-presentation': {
     backgroundColor: vars.color.input.text.bg,
     borderRadius: 'inherit',
+    boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
     position: 'absolute',
     top: 0,
     left: 0,
@@ -127,23 +128,18 @@ const primitive: StyleRules = {
         borderBottomRightRadius: 0,
       },
 
-      '.input-element:focus + &': {
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
+      // focus ring
+      '.input .input-element:not([data-no-focus-ring]):focus + &': {
         outlineWidth: vars.input.text.focusRing.width,
         outlineStyle: 'solid',
         outlineColor: vars.color.focusRing,
         outlineOffset: vars.input.text.focusRing.offset,
       },
 
-      '.input-element:disabled + &': {
-        opacity: 1,
-      },
-
       // valid
 
       '.input:not([data-invalid]) &': {
         vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[4],
           [varNames.color.input.text.bg]: vars.color.tinted.default.bg[0],
           [varNames.color.input.text.border]: vars.color.tinted.default.border[1],
         },
@@ -155,18 +151,10 @@ const primitive: StyleRules = {
         },
       },
 
-      '.input:not([data-invalid]) .input-element:placeholder-shown + &': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.default.border[4],
-        },
-      },
-
       '.input:not([data-invalid]):not([data-read-only]) .input-element:not(:disabled):hover + &': {
         vars: {
           [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
-          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1],
         },
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
       },
 
       '.input:not([data-invalid]) .input-element:focus + &': {
@@ -174,15 +162,12 @@ const primitive: StyleRules = {
           [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
           [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1],
         },
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
       },
 
       '.input:not([data-invalid]) .input-element:disabled + &': {
         vars: {
           [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1],
           [varNames.color.input.text.border]: vars.color.tinted.default.border[0],
-
-          // icon
           [varNames.color.muted.fg]: vars.color.tinted.default.border[4],
         },
       },
@@ -191,31 +176,21 @@ const primitive: StyleRules = {
 
       '.input[data-invalid] &': {
         vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[4],
           [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
           [varNames.color.input.text.border]: vars.color.tinted.critical.border[1],
-
-          [varNames.color.focusRing]: vars.color.solid.critical.bg[0],
-        },
-      },
-
-      '.input[data-invalid] .input-element:placeholder-shown + &': {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.border[4],
+          [varNames.color.muted.fg]: vars.color.tinted.critical.fg[4],
         },
       },
 
       '.input[data-invalid] .input-element:not(:disabled):hover + &': {
         vars: {
           [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
         },
       },
 
       '.input[data-invalid] .input-element:focus + &': {
         vars: {
           [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1],
         },
       },
 
@@ -225,6 +200,10 @@ const primitive: StyleRules = {
           [varNames.color.input.text.border]: vars.color.tinted.critical.border[0],
         },
       },
+
+      '.input:not(.input-b) &': {
+        [varNames.color.input.text.border]: 'transparent',
+      },
     },
   },
 }

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

@@ -13,7 +13,7 @@ const primitive: StyleRules = {
     [varNames.color.fg]: vars.color.tinted.fg[2],
 
     'nest': {
-      '&:is(button)': {
+      'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         outline: 'none',
@@ -24,8 +24,7 @@ const primitive: StyleRules = {
         width: ['-moz-available', '-webkit-fill-available', 'stretch'],
       },
 
-      /* &:is(a) */
-      '&:is(a)': {
+      'a&': {
         outline: 'none',
         textDecoration: 'none',
       },

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

@@ -3,9 +3,6 @@ import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
   '.box': {
-    // TODO: move to aspects
-    minHeight: 0,
-
     nest: {
       'iframe&': {
         border: 'none',

package/src/css/primitives/box/box.ts

@@ -13,6 +13,7 @@ import {
   inset,
   margin,
   maxWidth,
+  minHeight,
   minWidth,
   overflow,
   padding,
@@ -40,6 +41,7 @@ export function box(props: BoxStyleProps): string | undefined {
     inset(props),
     margin(props),
     maxWidth(props),
+    minHeight(props),
     minWidth(props),
     overflow(props),
     padding(props),

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

@@ -11,6 +11,7 @@ import type {
   InsetStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
+  MinHeightStyleProps,
   MinWidthStyleProps,
   OverflowStyleProps,
   PaddingStyleProps,
@@ -34,6 +35,7 @@ export interface BoxStyleProps
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    MinHeightStyleProps,
     MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,

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

@@ -261,6 +261,9 @@ function _assignToneProps(
     [_varNames.shadow.umbra]: _vars.shadow.umbra,
     [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
     [_varNames.shadow.ambient]: _vars.shadow.ambient,
+
+    [_varNames.skeleton.from]: _vars.skeleton.from,
+    [_varNames.skeleton.to]: _vars.skeleton.to,
   })
 
   for (const variant of COLOR_VARIANTS) {

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

@@ -53,6 +53,7 @@ for (const size of FONT_CODE_SIZE) {
       [varNames.font.iconSize]: v.iconSize,
       [varNames.font.ascenderHeight]: v.ascenderHeight,
       [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize,
     },
   })
 }

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

@@ -48,6 +48,7 @@ for (const size of FONT_HEADING_SIZE) {
       [varNames.font.iconSize]: v.iconSize,
       [varNames.font.ascenderHeight]: v.ascenderHeight,
       [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize,
     },
   })
 }

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

@@ -44,6 +44,7 @@ for (const size of FONT_LABEL_SIZE) {
       [k.iconSize]: v.iconSize,
       [k.ascenderHeight]: v.ascenderHeight,
       [k.descenderHeight]: v.descenderHeight,
+      [k.customIconSize]: v.customIconSize,
     },
   })
 }

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

@@ -57,6 +57,7 @@ for (const size of FONT_TEXT_SIZE) {
       [varNames.font.iconSize]: v.iconSize,
       [varNames.font.ascenderHeight]: v.ascenderHeight,
       [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize,
     },
   })
 }

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

@@ -1,9 +1,7 @@
 import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
-  '.text-area': {
-    // todo
-  },
+  '.text-area': {},
 }
 
 export const textAreaStyle: Style = {

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

@@ -1,25 +1,15 @@
-import {varNames, vars} from '../../theme'
+import {vars} from '../../theme'
 import type {Style, StyleRules} from '../../types'
 
 const primitive: StyleRules = {
-  '.text-input': {
-    vars: {
-      [varNames.font.family]: vars.font.text.family,
-    },
-
-    nest: {
-      '& > span': {
-        borderRadius: 'inherit',
-      },
-    },
-  },
+  '.text-input': {},
 
   '.text-input-prefix': {
     borderTop: `1px solid ${vars.color.border}`,
     borderLeft: `1px solid ${vars.color.border}`,
     borderBottom: `1px solid ${vars.color.border}`,
-    borderTopRightRadius: '0 !important',
-    borderBottomRightRadius: '0 !important',
+    borderTopLeftRadius: 'inherit',
+    borderBottomLeftRadius: 'inherit',
 
     nest: {
       '& > span': {
@@ -29,12 +19,16 @@ const primitive: StyleRules = {
     },
   },
 
+  '.text-input-element': {
+    borderRadius: 'inherit',
+  },
+
   '.text-input-suffix': {
     borderTop: `1px solid ${vars.color.border}`,
     borderRight: `1px solid ${vars.color.border}`,
     borderBottom: `1px solid ${vars.color.border}`,
-    borderTopLeftRadius: '0 !important',
-    borderBottomLeftRadius: '0 !important',
+    borderTopRightRadius: 'inherit',
+    borderBottomRightRadius: 'inherit',
 
     nest: {
       '& > span': {
@@ -43,8 +37,6 @@ const primitive: StyleRules = {
       },
     },
   },
-
-  '.text-input-presentation': {},
 }
 
 export const textInputStyle: Style = {

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

@@ -7,3 +7,18 @@ import type {TextInputStyleProps} from './types'
 export function textInput(props: TextInputStyleProps): string | undefined {
   return _composeClassNames(_scopeClassNames('text-input'), _input(props))
 }
+
+/** @public */
+export function textInputPrefix(): string | undefined {
+  return _scopeClassNames('text-input-prefix')
+}
+
+/** @public */
+export function textInputElement(): string | undefined {
+  return _scopeClassNames('text-input-element')
+}
+
+/** @public */
+export function textInputSuffix(): string | undefined {
+  return _scopeClassNames('text-input-suffix')
+}

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

@@ -4,19 +4,6 @@ const primitive: StyleRules = {
   '.tooltip': {
     pointerEvents: 'none',
   },
-
-  '.tooltip-card': {
-    willChange: 'transform',
-
-    nest: {
-      '&[data-animate] > *': {
-        // TODO
-        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        // opacity: `var(--motion-content-opacity, 1)`,
-        willChange: 'opacity',
-      },
-    },
-  },
 }
 
 export const tooltipStyle: Style = {layers: {primitive}}

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

@@ -4,8 +4,3 @@ import {_scopeClassNames} from '../../_scopeClassNames'
 export function tooltip(): string | undefined {
   return _scopeClassNames('tooltip')
 }
-
-/** @public */
-export function tooltipCard(): string | undefined {
-  return _scopeClassNames('tooltip-card')
-}

package/src/css/theme/resolveTheme.ts

@@ -439,16 +439,20 @@ export function resolveTheme(options: {theme: Theme_v3}) {
         iconSize: null,
         featureSettings: null,
         fontWeight: null,
+
+        capHeight: null,
         iconOffset: null,
+        customIconSize: null,
+        customIconOffset: null,
 
         code: {
           family: theme.font.code.family,
           featureSettings: theme.font.code.featureSettings ?? 'normal',
           weight: {
-            regular: String(theme.font.code.weights.regular),
-            medium: String(theme.font.code.weights.medium),
-            semibold: String(theme.font.code.weights.semibold),
-            bold: String(theme.font.code.weights.bold),
+            regular: String(theme.font.code.weight.regular),
+            medium: String(theme.font.code.weight.medium),
+            semibold: String(theme.font.code.weight.semibold),
+            bold: String(theme.font.code.weight.bold),
           },
           sizes: _fromEntries(
             FONT_CODE_SIZE.map((s) => [
@@ -460,6 +464,7 @@ export function resolveTheme(options: {theme: Theme_v3}) {
                 ascenderHeight: rem(theme.font.code.sizes[s].ascenderHeight),
                 descenderHeight: rem(theme.font.code.sizes[s].descenderHeight),
                 iconSize: rem(theme.font.code.sizes[s].iconSize),
+                customIconSize: rem(theme.font.code.sizes[s].customIconSize),
               },
             ]),
           ),
@@ -469,10 +474,10 @@ export function resolveTheme(options: {theme: Theme_v3}) {
           family: theme.font.heading.family,
           featureSettings: theme.font.heading.featureSettings ?? 'normal',
           weight: {
-            regular: String(theme.font.heading.weights.regular),
-            medium: String(theme.font.heading.weights.medium),
-            semibold: String(theme.font.heading.weights.semibold),
-            bold: String(theme.font.heading.weights.bold),
+            regular: String(theme.font.heading.weight.regular),
+            medium: String(theme.font.heading.weight.medium),
+            semibold: String(theme.font.heading.weight.semibold),
+            bold: String(theme.font.heading.weight.bold),
           },
           sizes: _fromEntries(
             FONT_HEADING_SIZE.map((s) => [
@@ -484,6 +489,7 @@ export function resolveTheme(options: {theme: Theme_v3}) {
                 ascenderHeight: rem(theme.font.heading.sizes[s].ascenderHeight),
                 descenderHeight: rem(theme.font.heading.sizes[s].descenderHeight),
                 iconSize: rem(theme.font.heading.sizes[s].iconSize),
+                customIconSize: rem(theme.font.heading.sizes[s].customIconSize),
               },
             ]),
           ),
@@ -493,10 +499,10 @@ export function resolveTheme(options: {theme: Theme_v3}) {
           family: theme.font.label.family,
           featureSettings: theme.font.label.featureSettings ?? 'normal',
           weight: {
-            regular: String(theme.font.label.weights.regular),
-            medium: String(theme.font.label.weights.medium),
-            semibold: String(theme.font.label.weights.semibold),
-            bold: String(theme.font.label.weights.bold),
+            regular: String(theme.font.label.weight.regular),
+            medium: String(theme.font.label.weight.medium),
+            semibold: String(theme.font.label.weight.semibold),
+            bold: String(theme.font.label.weight.bold),
           },
           sizes: _fromEntries(
             FONT_LABEL_SIZE.map((s) => [
@@ -508,6 +514,7 @@ export function resolveTheme(options: {theme: Theme_v3}) {
                 ascenderHeight: rem(theme.font.label.sizes[s].ascenderHeight),
                 descenderHeight: rem(theme.font.label.sizes[s].descenderHeight),
                 iconSize: rem(theme.font.label.sizes[s].iconSize),
+                customIconSize: rem(theme.font.label.sizes[s].customIconSize),
               },
             ]),
           ),
@@ -517,10 +524,10 @@ export function resolveTheme(options: {theme: Theme_v3}) {
           family: theme.font.text.family,
           featureSettings: theme.font.text.featureSettings ?? 'normal',
           weight: {
-            regular: String(theme.font.text.weights.regular),
-            medium: String(theme.font.text.weights.medium),
-            semibold: String(theme.font.text.weights.semibold),
-            bold: String(theme.font.text.weights.bold),
+            regular: String(theme.font.text.weight.regular),
+            medium: String(theme.font.text.weight.medium),
+            semibold: String(theme.font.text.weight.semibold),
+            bold: String(theme.font.text.weight.bold),
           },
           sizes: _fromEntries(
             FONT_TEXT_SIZE.map((s) => [
@@ -532,6 +539,7 @@ export function resolveTheme(options: {theme: Theme_v3}) {
                 ascenderHeight: rem(theme.font.text.sizes[s].ascenderHeight),
                 descenderHeight: rem(theme.font.text.sizes[s].descenderHeight),
                 iconSize: rem(theme.font.text.sizes[s].iconSize),
+                customIconSize: rem(theme.font.text.sizes[s].customIconSize),
               },
             ]),
           ),
@@ -684,7 +692,6 @@ export function resolveTheme(options: {theme: Theme_v3}) {
   }) {
     const {theme, scheme, tone} = options
     const card = theme.color[tone]
-    const cardOptions = {defaultHue: card._hue}
     const i = scheme === 'dark' ? 1 : 0
 
     const defaultElement = buildElementContract({
@@ -694,6 +701,10 @@ export function resolveTheme(options: {theme: Theme_v3}) {
       scheme,
     })
 
+    const bgValue = defaultElement.bg[0]
+
+    const cardOptions = {bgValue, defaultHue: card._hue}
+
     return {
       avatar: _fromEntries(
         AVATAR_COLORS.map((c) => [
@@ -775,7 +786,7 @@ export function resolveTheme(options: {theme: Theme_v3}) {
                     variant: v,
                     tone: e,
                     scheme,
-                    bgValue: defaultElement.bg[0],
+                    bgValue,
                   }),
             ]),
           ),

package/src/theme/v0/font.ts

@@ -25,7 +25,6 @@ export interface ThemeFontWeight {
 /** @public */
 export interface ThemeFont {
   family: string
-  featureSettings?: string
   weights: ThemeFontWeight
   sizes: ThemeFontSize[]
   /** @deprecated No longer supported. */

package/src/theme/v2/defaults/fonts.ts

@@ -55,7 +55,6 @@ export const defaultThemeFonts: ThemeFonts = {
   heading: {
     family:
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    featureSettings: `'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1`,
     weights: {
       regular: 600,
       medium: 700,

package/src/theme/v3/_parseColorToken.ts

@@ -139,11 +139,6 @@ export function _parseColorToken(str: ColorToken, options: {defaultHue: Hue}): T
   }
 
   function parseMix() {
-    // expect at least 1 white space
-    if (_peek() !== ' ') {
-      return undefined
-    }
-
     ignoreWhitespace()
 
     const match = RE_PERCENTAGE.exec(str.slice(cursor))

package/src/theme/v3/buildTheme_v3.ts

@@ -1,7 +1,7 @@
 import {black, hues, white} from '@sanity/color'
 
 import {defaultThemeConfig} from '../v2/defaults/config'
-import {defaultThemeFonts} from '../v2/defaults/fonts'
+import {defaultThemeFonts} from './defaultFonts'
 import {defaultTokens} from './defaultTokens'
 import {resolveTokens} from './resolveTokens'
 import type {Radius, Space, Theme_v3, ThemeOptions} from './types'
@@ -20,7 +20,7 @@ export function buildTheme_v3(options?: ThemeOptions): Theme_v3 {
     card: v2?.card ?? defaultThemeConfig.card,
     color: tokens.color,
     container: v2?.container ?? defaultThemeConfig.container,
-    font: v2?.font ?? defaultThemeFonts,
+    font: defaultThemeFonts,
     input: v2?.input ?? defaultThemeConfig.input,
     layer: v2?.layer ?? defaultThemeConfig.layer,
     media: v2?.media ?? defaultThemeConfig.media,