@sanity/ui 3.0.0-static.42 → 3.0.0-static.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.42",
+  "version": "3.0.0-static.44",
   "keywords": [
     "react",
     "ui",
@@ -29,12 +29,6 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
-    "./_visual-editing": {
-      "source": "./exports/_visual-editing.ts",
-      "import": "./dist/_visual-editing.js",
-      "require": "./dist/_visual-editing.cjs",
-      "default": "./dist/_visual-editing.js"
-    },
     "./css": {
       "source": "./exports/css.ts",
       "import": "./dist/css/index.js",
@@ -55,9 +49,6 @@
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
-      "_visual-editing": [
-        "./dist/_visual-editing.d.ts"
-      ],
       "css": [
         "./dist/css.d.ts"
       ],

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/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: '',
     },