@sanity/ui 2.0.0-alpha.32 → 2.0.0-alpha.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.32",
+  "version": "2.0.0-alpha.34",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./exports/index.ts",

package/src/core/primitives/kbd/kbd.tsx

@@ -1,6 +1,7 @@
 import {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
+import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'
 import {Box} from '../box'
@@ -16,9 +17,17 @@ export interface KBDProps {
   radius?: Radius | Radius[]
 }
 
-function kbdStyle() {
+function kbdStyle(props: ThemeProps) {
+  const {theme} = props
+  const color = theme.sanity.color.kbd || theme.sanity.color.base
+
   return css`
-    background: var(--card-bg2-color);
+    --card-fg-color: ${color.fg};
+    --kbd-box-bg: ${color.bg};
+    --kbd-box-shadow: ${color.border};
+
+    box-shadow: inset 0 0 0 1px var(--kbd-box-shadow);
+    background: var(--kbd-box-bg);
     font: inherit;
 
     &:not([hidden]) {
@@ -38,12 +47,12 @@ export const KBD = forwardRef(function KBD(
   props: KBDProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'ref' | 'size'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {children, fontSize = 1, padding = 1, radius = 2, ...restProps} = props
+  const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
 
   return (
     <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
-        <Text as="span" muted size={fontSize} weight="medium">
+        <Text as="span" size={fontSize} weight="medium">
           {children}
         </Text>
       </Box>

package/src/theme/themes/studio/config.ts

@@ -7,15 +7,15 @@ export const config: Omit<RootTheme, 'color' | 'fonts'> = {
   avatar: {
     sizes: [
       {distance: -3, size: 19},
-      {distance: -6, size: 31},
-      {distance: -9, size: 51},
+      {distance: -6, size: 25},
+      {distance: -9, size: 35},
     ],
     focusRing: {offset: 0, width: 1},
   },
   button: {
     textWeight: 'medium',
     border: {width: STROKE_WIDTH},
-    focusRing: {offset: -1, width: 2},
+    focusRing: {offset: -1, width: 1},
   },
   card: {
     border: {width: STROKE_WIDTH},