feat: update KBD styles and default props

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>