@sanity/ui 3.0.0-static.43 → 3.0.0-static.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.43",
+  "version": "3.0.0-static.45",
   "keywords": [
     "react",
     "ui",

package/src/core/primitives/box/box.tsx

@@ -37,6 +37,13 @@ export type BoxElementType =
   | 'section'
   | 'span'
   | 'summary'
+  | 'table'
+  | 'tbody'
+  | 'td'
+  | 'tfoot'
+  | 'th'
+  | 'thead'
+  | 'tr'
   | 'ul'
   | ComponentType
 

package/src/core/primitives/text/text.tsx

@@ -21,6 +21,8 @@ export type TextElementType =
   | 'li'
   | 'p'
   | 'span'
+  | 'summary'
+  | 'time'
   | ComponentType
 
 /** @public */

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

@@ -7,7 +7,7 @@ export const root: string = _style(layers.components, {
 })
 
 export const divider: string = _style(layers.components, {
-  height: `1px`,
+  height: vars.card.border.width,
   border: 0,
   backgroundColor: vars.color.border,
   margin: 0,

package/src/css/primitives/avatar/avatar.css.ts

@@ -19,7 +19,6 @@ globalStyle(`${stack} > * + *`, {
 })
 
 export const root: string = _style(layers.primitives, {
-  // display: 'block',
   backgroundColor: vars.color.avatar.bg,
   position: 'relative',
   boxSizing: 'border-box',

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

@@ -28,7 +28,7 @@ export const root: string = _style(layers.primitives, {
     [vars.color.border]: vars.color.tinted.default.border[1],
     [vars.color.fg]: vars.color.tinted.default.fg[0],
     [vars.color.muted.bg]: vars.color.tinted.default.bg[1],
-    [vars.color.muted.border]: vars.color.tinted.default.bg[0],
+    [vars.color.muted.border]: vars.color.tinted.default.border[0],
     [vars.color.muted.fg]: vars.color.tinted.default.fg[4],
   },
 

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

@@ -36,7 +36,7 @@ export const presentation: string = _style(layers.primitives, {
   borderRadius: vars.radius[2],
   lineHeight: 1,
   backgroundColor: vars.color.input.checkbox.bg,
-  boxShadow: `inset 0 0 0 1px ${vars.color.input.checkbox.border}`,
+  boxShadow: `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.checkbox.border}`,
   color: vars.color.input.checkbox.fg,
 
   vars: {

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

@@ -35,7 +35,7 @@ export const presentation: string = _style(layers.primitives, {
   'height': vars.input.radio.size,
   'borderRadius': '9999px',
   'backgroundColor': vars.color.input.radio.bg,
-  'boxShadow': `inset 0 0 0 1px ${vars.color.input.radio.border}`,
+  'boxShadow': `inset 0 0 0 ${vars.input.border.width} ${vars.color.input.radio.border}`,
 
   'vars': {
     [vars.color.input.radio.fg]: vars.color.tinted.default.fg[0],

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

@@ -7,9 +7,9 @@ import {vars} from '../../vars.css'
 export const root: string = _style(layers.primitives, {})
 
 export const prefix: string = _style(layers.primitives, {
-  borderTop: `1px solid ${vars.color.border}`,
-  borderLeft: `1px solid ${vars.color.border}`,
-  borderBottom: `1px solid ${vars.color.border}`,
+  borderTop: `${vars.input.border.width} solid ${vars.color.border}`,
+  borderLeft: `${vars.input.border.width} solid ${vars.color.border}`,
+  borderBottom: `${vars.input.border.width} solid ${vars.color.border}`,
   borderTopLeftRadius: 'inherit',
   borderBottomLeftRadius: 'inherit',
 })
@@ -17,7 +17,8 @@ export const prefix: string = _style(layers.primitives, {
 globalStyle(`${prefix} > span`, {
   [`@layer ${layers.primitives}`]: {
     display: 'block',
-    margin: '-1px',
+    margin: `calc(0 - ${vars.input.border.width})`,
+    marginRight: 0,
   },
 })
 
@@ -26,9 +27,9 @@ export const element: string = _style(layers.primitives, {
 })
 
 export const suffix: string = _style(layers.primitives, {
-  borderTop: `1px solid ${vars.color.border}`,
-  borderRight: `1px solid ${vars.color.border}`,
-  borderBottom: `1px solid ${vars.color.border}`,
+  borderTop: `${vars.input.border.width}solid ${vars.color.border}`,
+  borderRight: `${vars.input.border.width}solid ${vars.color.border}`,
+  borderBottom: `${vars.input.border.width}solid ${vars.color.border}`,
   borderTopRightRadius: 'inherit',
   borderBottomRightRadius: 'inherit',
 })
@@ -36,6 +37,7 @@ export const suffix: string = _style(layers.primitives, {
 globalStyle(`${suffix} > span`, {
   [`@layer ${layers.primitives}`]: {
     display: 'block',
-    margin: '-1px',
+    margin: `calc(0 - ${vars.input.border.width})`,
+    marginLeft: 0,
   },
 })

package/src/css/props/border/border.css.ts

@@ -6,10 +6,10 @@ import type {BorderStyle} from './types'
 
 export const borderOptions: ResponsiveRuleOptions<BorderStyle> = {
   solid: _responsiveStyle(layers.props, {
-    border: `1px solid ${vars.color.border}`,
+    border: `${vars.card.border.width} solid ${vars.color.border}`,
   }),
   muted: _responsiveStyle(layers.props, {
-    border: `1px solid ${vars.color.muted.border}`,
+    border: `${vars.card.border.width} solid ${vars.color.muted.border}`,
   }),
   none: _responsiveStyle(layers.props, {
     border: 'none',
@@ -18,10 +18,10 @@ export const borderOptions: ResponsiveRuleOptions<BorderStyle> = {
 
 export const borderTopOptions: ResponsiveRuleOptions<BorderStyle> = {
   solid: _responsiveStyle(layers.props, {
-    borderTop: `1px solid ${vars.color.border}`,
+    borderTop: `${vars.card.border.width} solid ${vars.color.border}`,
   }),
   muted: _responsiveStyle(layers.props, {
-    borderTop: `1px solid ${vars.color.muted.border}`,
+    borderTop: `${vars.card.border.width} solid ${vars.color.muted.border}`,
   }),
   none: _responsiveStyle(layers.props, {
     borderTop: 'none',
@@ -30,10 +30,10 @@ export const borderTopOptions: ResponsiveRuleOptions<BorderStyle> = {
 
 export const borderRightOptions: ResponsiveRuleOptions<BorderStyle> = {
   solid: _responsiveStyle(layers.props, {
-    borderRight: `1px solid ${vars.color.border}`,
+    borderRight: `${vars.card.border.width} solid ${vars.color.border}`,
   }),
   muted: _responsiveStyle(layers.props, {
-    borderRight: `1px solid ${vars.color.muted.border}`,
+    borderRight: `${vars.card.border.width} solid ${vars.color.muted.border}`,
   }),
   none: _responsiveStyle(layers.props, {
     borderRight: 'none',
@@ -42,10 +42,10 @@ export const borderRightOptions: ResponsiveRuleOptions<BorderStyle> = {
 
 export const borderBottomOptions: ResponsiveRuleOptions<BorderStyle> = {
   solid: _responsiveStyle(layers.props, {
-    borderBottom: `1px solid ${vars.color.border}`,
+    borderBottom: `${vars.card.border.width} solid ${vars.color.border}`,
   }),
   muted: _responsiveStyle(layers.props, {
-    borderBottom: `1px solid ${vars.color.muted.border}`,
+    borderBottom: `${vars.card.border.width} solid ${vars.color.muted.border}`,
   }),
   none: _responsiveStyle(layers.props, {
     borderBottom: 'none',
@@ -54,10 +54,10 @@ export const borderBottomOptions: ResponsiveRuleOptions<BorderStyle> = {
 
 export const borderLeftOptions: ResponsiveRuleOptions<BorderStyle> = {
   solid: _responsiveStyle(layers.props, {
-    borderLeft: `1px solid ${vars.color.border}`,
+    borderLeft: `${vars.card.border.width} solid ${vars.color.border}`,
   }),
   muted: _responsiveStyle(layers.props, {
-    borderLeft: `1px solid ${vars.color.muted.border}`,
+    borderLeft: `${vars.card.border.width} solid ${vars.color.muted.border}`,
   }),
   none: _responsiveStyle(layers.props, {
     borderLeft: 'none',

package/src/css/theme/buildCSSTheme.ts

@@ -76,6 +76,9 @@ export function buildCSSTheme(options?: CSSThemeOptions): ThemeTokens {
       },
     },
     card: {
+      border: {
+        width: px(theme.card.border.width),
+      },
       shadow: {
         outline: px(theme.card.shadow.outline),
       },

package/src/css/types.ts

@@ -180,6 +180,9 @@ export type CoreThemeTokens = {
     }
   }
   card: {
+    border: {
+      width: string
+    }
     shadow: {
       outline: string
     }

package/src/css/vars.css.ts

@@ -71,6 +71,9 @@ const themeTokens: CoreThemeTokens = {
     },
   },
   card: {
+    border: {
+      width: '',
+    },
     shadow: {
       outline: '',
     },