@sanity/ui 2.0.0-gamma.1 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-gamma.1",
+  "version": "2.0.1",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",
@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.4",
-    "@sanity/color": "3.0.0-beta.9",
+    "@sanity/color": "^3.0.0",
     "@sanity/icons": "^2.7.0",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.5",
@@ -206,10 +206,6 @@
       {
         "name": "alpha",
         "prerelease": true
-      },
-      {
-        "name": "gamma",
-        "prerelease": true
       }
     ]
   }

package/src/core/__workshop__/fontsPlugin.tsx

@@ -3,20 +3,60 @@ import {createGlobalStyle} from 'styled-components'
 
 const GlobalStyle = createGlobalStyle`
   @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: normal;
-    font-weight: 100 900;
+    font-weight: 400;
     font-display: swap;
-    src: url('https://studio-static.sanity.io/InterVariable.ttf') format('ttf');
-    font-named-instance: 'Regular';
+    src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
   }
   @font-face {
-    font-family: 'Inter';
+    font-family: Inter;
     font-style: italic;
-    font-weight: 100 900;
+    font-weight: 400;
     font-display: swap;
-    src: url('https://studio-static.sanity.io/InterVariable-Italic.ttf') format('ttf');
-    font-named-instance: 'Italic';
+    src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
   }
 `
 

package/src/core/primitives/button/button.tsx

@@ -72,7 +72,7 @@ export const Button = forwardRef(function Button(
     iconRight,
     justify: justifyProp = 'center',
     loading,
-    mode = 'ghost',
+    mode = 'default',
     padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,

package/src/core/primitives/popover/popover.tsx

@@ -98,6 +98,10 @@ export interface PopoverProps
   portal?: boolean | string
   preventOverflow?: boolean
   referenceBoundary?: HTMLElement | null
+  /**
+   * When defined, the popover will be positioned relative to this element.
+   * The children of the popover won't be rendered.
+   */
   referenceElement?: HTMLElement | null
   scheme?: ThemeColorSchemeKey
   tone?: CardTone
@@ -376,8 +380,9 @@ export const Popover = memo(
     }, [update, updateRef])
 
     useEffect(() => {
+      if (child) return
       refs.setReference(referenceElement || null)
-    }, [referenceElement, refs])
+    }, [referenceElement, refs, child])
 
     if (disabled) {
       return childProp || <></>

package/src/theme/defaults/colorTokens.ts

@@ -14,7 +14,7 @@ export const defaultColorTokens: ThemeColorTokens = {
           fg: ['white', 'black'],
         },
       },
-      backdrop: ['gray/200/0.2', 'black/0.5'],
+      backdrop: ['gray/200/0.5', 'black/0.5'],
       badge: {
         '*': {
           bg: ['100', '900'],

package/src/theme/system/color/state.ts

@@ -12,7 +12,13 @@ export interface ThemeColorState_v2 {
   accent: {
     fg: string
   }
+  /**
+   * @internal  This may be removed in a future release
+   * */
   avatar: ThemeColorAvatar_v2
+  /**
+   * @internal  This may be removed in a future release
+   * */
   badge: ThemeColorBadge_v2
   bg: string
   border: string

package/src/theme/system/v0/color/color.ts

@@ -18,7 +18,6 @@ export interface ThemeColor extends Partial<Omit<ThemeColorGenericState, 'muted'
   button: ThemeColorButton
   card: ThemeColorCard
   dark: boolean
-  focusRing?: string
   input: ThemeColorInput
   muted: ThemeColorMuted
   selectable?: ThemeColorSelectable

package/src/theme/versioning/v2_v0.ts

@@ -91,6 +91,7 @@ function themeColor_v2_v0(color_v2: ThemeColorCard_v2): ThemeColor {
       ...color_v2.button.default,
       transparent: color_v2.button.default.default,
     },
+    selectable: color_v2.selectable,
     spot: {
       gray: color_v2.avatar.gray.bg,
       blue: color_v2.avatar.blue.bg,