@sanity/ui 3.0.0-static.8 → 3.0.0

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

@@ -1,152 +0,0 @@
-import {Rules} from '../../types'
-
-export const checkboxRules: Rules = {
-  'checkbox': {
-    position: 'relative',
-    display: 'inline-block',
-  },
-
-  'checkbox-input': {
-    'position': 'absolute',
-    'top': 0,
-    'left': 0,
-    'width': '100%',
-    'height': '100%',
-    'outline': 'none',
-    'opacity': 0,
-    'zIndex': 1,
-    'padding': 0,
-    'margin': 0,
-
-    '@nest': {
-      '& + span': {
-        'position': 'relative',
-        'display': 'block',
-        'width': `var(--input-checkbox-size)`,
-        'height': `var(--input-checkbox-size)`,
-        'boxSizing': 'border-box',
-        'borderRadius': `var(--radius-2)`,
-        'lineHeight': 1,
-        'backgroundColor': `var(--color-checkbox-bg)`,
-        'boxShadow': `inset 0 0 0 1px var(--color-checkbox-border)`,
-        'color': `var(--color-checkbox-fg)`,
-
-        // '--color-checkbox-bg': 'var(--color-input-default-enabled-bg)',
-        // '--color-checkbox-border': 'var(--color-input-default-enabled-border)',
-        // '--color-checkbox-fg': 'var(--color-input-default-enabled-fg)',
-
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-0)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-1)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
-
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })},
-      },
-
-      '& + span > svg': {
-        display: 'block',
-        position: 'absolute',
-        opacity: 0,
-        height: '100%',
-        width: '100%',
-      },
-
-      '& + span > svg > path': {
-        vectorEffect: 'non-scaling-stroke',
-        strokeWidth: '1.5px !important',
-      },
-
-      '&:hover + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-fg-0)',
-      },
-
-      '&:checked + span': {
-        '--color-checkbox-bg': 'var(--color-solid-default-bg-0)',
-        '--color-checkbox-border': 'var(--color-solid-default-bg-0)',
-        '--color-checkbox-fg': 'var(--color-solid-default-fg-0)',
-        // '--color-checkbox-bg': 'var(--color-input-default-enabled-fg)',
-        // '--color-checkbox-border': 'var(--color-input-default-enabled-fg)',
-        // '--color-checkbox-fg': 'var(--color-input-default-enabled-bg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.fg,
-        //   width: input.border.width,
-        // })},
-      },
-
-      '&:checked + span > svg:first-child': {
-        opacity: 1,
-      },
-
-      // focus
-      '&:not(:disabled):focus:focus-visible + span': {
-        // box-shadow: ${focusRingStyle({focusRing})},
-      },
-
-      // focus when checked - uses a different offset
-      '&:not(:disabled):focus:focus-visible&:checked + span': {
-        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
-      },
-
-      '&[data-error] + span': {
-        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-border)',
-        '--color-checkbox-border': 'var(--color-input-invalid-enabled-bg)',
-        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-fg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.invalid.enabled.muted.bg,
-        // })},
-      },
-
-      '&[data-error]:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-invalid-enabled-muted-bg)',
-        '--color-checkbox-fg': 'var(--color-input-invalid-enabled-bg)',
-      },
-
-      '&[data-error]:checked:not(:disabled):focus:focus-visible + span': {
-        '--color-checkbox-border': 'var(--color-input-invalid-readOnly-muted-bg)',
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        //   focusRing: {width: 1, offset: 1},
-        // })},
-      },
-
-      '&:disabled + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-bg-1)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-0)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-border-2)',
-      },
-
-      '&:checked:disabled + span': {
-        '--color-checkbox-bg': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-border': 'var(--color-tinted-default-border-2)',
-        '--color-checkbox-fg': 'var(--color-tinted-default-bg-0)',
-      },
-
-      // '&:disabled:checked + span': {
-      //   '--color-checkbox-bg': 'var(--color-input-default-disabled-muted-bg)',
-      // },
-
-      '&[data-read-only] + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-readOnly-bg)',
-        '--color-checkbox-border': 'var(--color-input-default-readOnly-border)',
-        '--color-checkbox-fg': 'var(--color-input-default-readOnly-fg)',
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.default.readOnly.border,
-        // })},
-      },
-
-      '&[data-read-only]:checked + span': {
-        '--color-checkbox-bg': 'var(--color-input-default-readOnly-muted-bg)',
-      },
-
-      '&:indeterminate + span > svg:last-child': {
-        opacity: 1,
-      },
-    },
-  },
-}

package/src/css/primitives/code/code.style.ts

@@ -1,62 +0,0 @@
-import {FONT_CODE_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.code': {
-    '--font-weight-regular': `var(--font-code-weight-regular)`,
-    '--font-weight-medium': `var(--font-code-weight-medium)`,
-    '--font-weight-semibold': `var(--font-code-weight-semibold)`,
-    '--font-weight-bold': `var(--font-code-weight-bold)`,
-
-    '--font-family': `var(--font-code-family)`,
-    '--font-feature-settings': `var(--font-code-feature-settings)`,
-
-    'color': 'var(--color-code-fg)',
-
-    '@nest': {
-      '& > code': {
-        fontFamily: 'inherit',
-      },
-
-      // & code {
-      //   font-family: inherit;
-
-      //   &.refractor .token {
-      //     ${codeSyntaxHighlightingStyle}
-      //   }
-      // }
-
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-        borderRadius: '1px',
-      },
-
-      '& svg': {
-        // Some popular CSS libraries change the defaults for SVG display
-        // Make sure SVGs are rendered as inline elements
-        display: 'inline',
-      },
-
-      '& [data-sanity-icon]': {
-        verticalAlign: 'baseline',
-      },
-    },
-  },
-}
-
-for (const size of FONT_CODE_SIZE) {
-  _responsiveRule(primitive, `code-${size}`, {
-    '--font-size': `var(--font-code-${size}-size)`,
-    '--font-line-height': `var(--font-code-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-code-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-code-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-code-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-code-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-code-${size}-cap-height)`,
-  })
-}
-
-export const codeStyle: Style = {layers: {primitive}}

package/src/css/primitives/code/code.ts

@@ -1,9 +0,0 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
-import {font} from '../../aspects'
-import {CodeStyleProps} from './types'
-
-/** @public */
-export function code(props: CodeStyleProps): string | undefined {
-  return _comp('code', 'block', font(props), _resp(`code`, props.size))
-}

package/src/css/primitives/code/index.ts

@@ -1,2 +0,0 @@
-export * from './code'
-export * from './types'

package/src/css/primitives/code/rules.ts

@@ -1,96 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-
-export const codeRules: Rules = {
-  code: {
-    '--font-weight-regular': `var(--font-code-weight-regular)`,
-    '--font-weight-medium': `var(--font-code-weight-medium)`,
-    '--font-weight-semibold': `var(--font-code-weight-semibold)`,
-    '--font-weight-bold': `var(--font-code-weight-bold)`,
-
-    '--font-family': `var(--font-code-family)`,
-    '--font-feature-settings': `var(--font-code-feature-settings)`,
-
-    'color': 'var(--color-code-fg)',
-
-    '@nest': {
-      '& > code': {
-        fontFamily: 'inherit',
-      },
-
-      // & code {
-      //   font-family: inherit;
-
-      //   &.refractor .token {
-      //     ${codeSyntaxHighlightingStyle}
-      //   }
-      // }
-
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-        borderRadius: '1px',
-      },
-
-      '& svg': {
-        // Some popular CSS libraries change the defaults for SVG display
-        // Make sure SVGs are rendered as inline elements
-        display: 'inline',
-      },
-
-      '& [data-sanity-icon]': {
-        verticalAlign: 'baseline',
-      },
-    },
-  },
-
-  ...responsiveRules('code-0', {
-    '--font-size': 'var(--font-code-0-size)',
-    '--font-line-height': 'var(--font-code-0-line-height)',
-    '--font-letter-spacing': 'var(--font-code-0-letter-spacing)',
-    '--font-icon-size': 'var(--font-code-0-icon-size)',
-    '--font-ascender-height': 'var(--font-code-0-ascender-height)',
-    '--font-descender-height': 'var(--font-code-0-descender-height)',
-    // '--font-cap-height': 'var(--font-code-0-cap-height)',
-  }),
-
-  ...responsiveRules('code-1', {
-    '--font-size': 'var(--font-code-1-size)',
-    '--font-line-height': 'var(--font-code-1-line-height)',
-    '--font-letter-spacing': 'var(--font-code-1-letter-spacing)',
-    '--font-icon-size': 'var(--font-code-1-icon-size)',
-    '--font-ascender-height': 'var(--font-code-1-ascender-height)',
-    '--font-descender-height': 'var(--font-code-1-descender-height)',
-    // '--font-cap-height': 'var(--font-code-1-cap-height)',
-  }),
-
-  ...responsiveRules('code-2', {
-    '--font-size': 'var(--font-code-2-size)',
-    '--font-line-height': 'var(--font-code-2-line-height)',
-    '--font-letter-spacing': 'var(--font-code-2-letter-spacing)',
-    '--font-icon-size': 'var(--font-code-2-icon-size)',
-    '--font-ascender-height': 'var(--font-code-2-ascender-height)',
-    '--font-descender-height': 'var(--font-code-2-descender-height)',
-    // '--font-cap-height': 'var(--font-code-2-cap-height)',
-  }),
-
-  ...responsiveRules('code-3', {
-    '--font-size': 'var(--font-code-3-size)',
-    '--font-line-height': 'var(--font-code-3-line-height)',
-    '--font-letter-spacing': 'var(--font-code-3-letter-spacing)',
-    '--font-icon-size': 'var(--font-code-3-icon-size)',
-    '--font-ascender-height': 'var(--font-code-3-ascender-height)',
-    '--font-descender-height': 'var(--font-code-3-descender-height)',
-    // '--font-cap-height': 'var(--font-code-3-cap-height)',
-  }),
-
-  ...responsiveRules('code-4', {
-    '--font-size': 'var(--font-code-4-size)',
-    '--font-line-height': 'var(--font-code-4-line-height)',
-    '--font-letter-spacing': 'var(--font-code-4-letter-spacing)',
-    '--font-icon-size': 'var(--font-code-4-icon-size)',
-    '--font-ascender-height': 'var(--font-code-4-ascender-height)',
-    '--font-descender-height': 'var(--font-code-4-descender-height)',
-    // '--font-cap-height': 'var(--font-code-4-cap-height)',
-  }),
-}

package/src/css/primitives/code/types.ts

@@ -1,10 +0,0 @@
-import {FontStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export type CodeSize = number
-
-/** @public */
-export interface CodeStyleProps extends FontStyleProps {
-  size?: ResponsiveProp<CodeSize>
-}

package/src/css/primitives/container/container.style.ts

@@ -1,10 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.container': {
-    margin: '0 auto',
-    width: '100%',
-  },
-}
-
-export const containerStyle: Style = {layers: {primitive}}

package/src/css/primitives/container/container.ts

@@ -1,7 +0,0 @@
-import {_comp} from '../../_comp'
-import {maxWidth} from '../../aspects'
-import {ContainerStyleProps} from './types'
-
-export function container(props: ContainerStyleProps): string | undefined {
-  return _comp('container', maxWidth({maxWidth: props.width}))
-}

package/src/css/primitives/container/rules.ts

@@ -1,8 +0,0 @@
-import {Rules} from '../../types'
-
-export const containerRules: Rules = {
-  container: {
-    margin: '0 auto',
-    width: '100%',
-  },
-}

package/src/css/primitives/container/types.ts

@@ -1,7 +0,0 @@
-import {ContainerWidth} from '@sanity/ui/theme'
-
-import {ResponsiveProp} from '../../types'
-
-export interface ContainerStyleProps {
-  width?: ResponsiveProp<ContainerWidth>
-}

package/src/css/primitives/heading/heading.style.ts

@@ -1,47 +0,0 @@
-import {FONT_HEADING_SIZE} from '@sanity/ui/theme'
-
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.heading': {
-    '--font-weight-regular': `var(--font-heading-weight-regular)`,
-    '--font-weight-medium': `var(--font-heading-weight-medium)`,
-    '--font-weight-semibold': `var(--font-heading-weight-semibold)`,
-    '--font-weight-bold': `var(--font-heading-weight-bold)`,
-
-    '--font-family': `var(--font-heading-family)`,
-    '--font-feature-settings': `var(--font-heading-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-    },
-  },
-
-  // '.heading-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
-  '.heading-muted': {
-    '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-}
-
-for (const size of FONT_HEADING_SIZE) {
-  _responsiveRule(primitive, `heading-${size}`, {
-    '--font-size': `var(--font-heading-${size}-size)`,
-    '--font-line-height': `var(--font-heading-${size}-line-height)`,
-    '--font-letter-spacing': `var(--font-heading-${size}-letter-spacing)`,
-    '--font-icon-size': `var(--font-heading-${size}-icon-size)`,
-    '--font-ascender-height': `var(--font-heading-${size}-ascender-height)`,
-    '--font-descender-height': `var(--font-heading-${size}-descender-height)`,
-    // '--font-cap-height': `var(--font-heading-${size}-cap-height)`,
-  })
-}
-
-export const headingStyle: Style = {layers: {primitive}}

package/src/css/primitives/heading/heading.ts

@@ -1,17 +0,0 @@
-import {_comp} from '../../_comp'
-import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
-import {HeadingStyleProps} from './types'
-
-/** @public */
-export function heading(props: HeadingStyleProps): string | undefined {
-  return _comp(
-    'block',
-    'heading',
-    font(props),
-    props.accent && 'heading-accent',
-    props.muted && 'heading-muted',
-    _resp(`heading`, props.size),
-    flexItem(props),
-  )
-}

package/src/css/primitives/heading/index.ts

@@ -1,2 +0,0 @@
-export * from './heading'
-export * from './types'

package/src/css/primitives/heading/rules.ts

@@ -1,155 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-
-export const headingRules: Rules = {
-  'heading': {
-    '--font-weight-regular': `var(--font-heading-weight-regular)`,
-    '--font-weight-medium': `var(--font-heading-weight-medium)`,
-    '--font-weight-semibold': `var(--font-heading-weight-semibold)`,
-    '--font-weight-bold': `var(--font-heading-weight-bold)`,
-
-    '--font-family': `var(--font-heading-family)`,
-    '--font-feature-settings': `var(--font-heading-feature-settings)`,
-
-    'color': 'var(--color-fg)',
-
-    '@nest': {
-      '& a': {
-        color: 'var(--color-link-fg)',
-        textDecoration: 'none',
-      },
-    },
-  },
-
-  // 'heading-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
-  'heading-muted': {
-    '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-
-  ...responsiveRules('heading-0', {
-    '--font-size': 'var(--font-heading-0-size)',
-    '--font-line-height': 'var(--font-heading-0-line-height)',
-    '--font-letter-spacing': 'var(--font-heading-0-letter-spacing)',
-    '--font-icon-size': 'var(--font-heading-0-icon-size)',
-    '--font-ascender-height': 'var(--font-heading-0-ascender-height)',
-    '--font-descender-height': 'var(--font-heading-0-descender-height)',
-    // '--font-cap-height': 'var(--font-heading-0-cap-height)',
-  }),
-
-  ...responsiveRules('heading-1', {
-    '--font-size': 'var(--font-heading-1-size)',
-    '--font-line-height': 'var(--font-heading-1-line-height)',
-    '--font-letter-spacing': 'var(--font-heading-1-letter-spacing)',
-    '--font-icon-size': 'var(--font-heading-1-icon-size)',
-    '--font-ascender-height': 'var(--font-heading-1-ascender-height)',
-    '--font-descender-height': 'var(--font-heading-1-descender-height)',
-    // '--font-cap-height': 'var(--font-heading-1-cap-height)',
-  }),
-
-  ...responsiveRules('heading-2', {
-    '--font-size': 'var(--font-heading-2-size)',
-    '--font-line-height': 'var(--font-heading-2-line-height)',
-    '--font-letter-spacing': 'var(--font-heading-2-letter-spacing)',
-    '--font-icon-size': 'var(--font-heading-2-icon-size)',
-    '--font-ascender-height': 'var(--font-heading-2-ascender-height)',
-    '--font-descender-height': 'var(--font-heading-2-descender-height)',
-    // '--font-cap-height': 'var(--font-heading-2-cap-height)',
-  }),
-
-  ...responsiveRules('heading-3', {
-    '--font-size': 'var(--font-heading-3-size)',
-    '--font-line-height': 'var(--font-heading-3-line-height)',
-    '--font-letter-spacing': 'var(--font-heading-3-letter-spacing)',
-    '--font-icon-size': 'var(--font-heading-3-icon-size)',
-    '--font-ascender-height': 'var(--font-heading-3-ascender-height)',
-    '--font-descender-height': 'var(--font-heading-3-descender-height)',
-    // '--font-cap-height': 'var(--font-heading-3-cap-height)',
-  }),
-
-  ...responsiveRules('heading-4', {
-    '--font-size': 'var(--font-heading-4-size)',
-    '--font-line-height': 'var(--font-heading-4-line-height)',
-    '--font-letter-spacing': 'var(--font-heading-4-letter-spacing)',
-    '--font-icon-size': 'var(--font-heading-4-icon-size)',
-    '--font-ascender-height': 'var(--font-heading-4-ascender-height)',
-    '--font-descender-height': 'var(--font-heading-4-descender-height)',
-    // '--font-cap-height': 'var(--font-heading-4-cap-height)',
-  }),
-
-  ...responsiveRules('heading-5', {
-    '--font-size': 'var(--font-heading-5-size)',
-    '--font-line-height': 'var(--font-heading-5-line-height)',
-    '--font-letter-spacing': 'var(--font-heading-5-letter-spacing)',
-    '--font-icon-size': 'var(--font-heading-5-icon-size)',
-    '--font-ascender-height': 'var(--font-heading-5-ascender-height)',
-    '--font-descender-height': 'var(--font-heading-5-descender-height)',
-    // '--font-cap-height': 'var(--font-heading-5-cap-height)',
-  }),
-}
-
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {ThemeProps} from '../../_compat'
-// import {css} from '../../lib/styled'
-// import {HeadingStyleProps} from './types'
-
-// export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {
-//   const {$accent, $muted} = props
-//   const {font} = getTheme_v2(props.theme)
-
-//   return css`
-//     ${$accent &&
-//     css`
-//       color: var(--card-accent-fg-color);
-//     `}
-
-//     ${$muted &&
-//     css`
-//       color: var(--card-muted-fg-color);
-//     `}
-
-//     & code {
-//       font-family: ${font.code.family};
-//       border-radius: 1px;
-//     }
-
-//     & a {
-//       text-decoration: none;
-//       border-radius: 1px;
-//       color: var(--card-link-color);
-//       outline: none;
-
-//       @media (hover: hover) {
-//         &:hover {
-//           text-decoration: underline;
-//         }
-//       }
-
-//       &:focus {
-//         box-shadow:
-//           0 0 0 1px var(--card-bg-color),
-//           0 0 0 3px var(--card-focus-ring-color);
-//       }
-
-//       &:focus:not(:focus-visible) {
-//         box-shadow: none;
-//       }
-//     }
-
-//     & strong {
-//       font-weight: ${font.heading.weights.bold};
-//     }
-
-//     & svg {
-//       /* Certain popular CSS libraries changes the defaults for SVG display */
-//       /* Make sure SVGs are rendered as inline elements */
-//       display: inline;
-//     }
-
-//     & [data-sanity-icon] {
-//       vertical-align: baseline;
-//     }
-//   `
-// }

package/src/css/primitives/heading/types.ts

@@ -1,12 +0,0 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
-import {ResponsiveProp} from '../../types'
-
-/** @public */
-export type HeadingSize = number
-
-/** @public */
-export interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
-  accent?: boolean
-  muted?: boolean
-  size?: ResponsiveProp<HeadingSize>
-}

package/src/css/primitives/kbd/index.ts

@@ -1,2 +0,0 @@
-export * from './kbd'
-export * from './types'

package/src/css/primitives/kbd/kbd.style.ts

@@ -1,22 +0,0 @@
-import {Style, StyleRules} from '../../types'
-
-const primitive: StyleRules = {
-  '.kbd': {
-    // '--color-bg': 'var(--color-tinted-default-bg-1)',
-    // '--color-border': 'var(--color-tinted-default-border-2)',
-    // '--color-fg': 'var(--color-tinted-default-fg-3)',
-
-    'boxShadow': 'inset 0 0 0 0.5px var(--color-tinted-default-border-3)',
-    'background': 'var(--color-muted-bg)',
-    'font': 'inherit',
-    'verticalAlign': 'top',
-
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-    },
-  },
-}
-
-export const kbdStyle: Style = {layers: {primitive}}

package/src/css/primitives/kbd/kbd.ts

@@ -1,7 +0,0 @@
-import {_comp} from '../../_comp'
-import {radius} from '../../aspects'
-import {KBDStyleProps} from './types'
-
-export function kbd(props: KBDStyleProps): string | undefined {
-  return _comp('kbd', radius(props))
-}

package/src/css/primitives/kbd/rules.ts

@@ -1,20 +0,0 @@
-import {Rules} from '../../types'
-
-export const kbdRules: Rules = {
-  kbd: {
-    // '--color-bg': 'var(--color-tinted-default-bg-1)',
-    // '--color-border': 'var(--color-tinted-default-border-2)',
-    // '--color-fg': 'var(--color-tinted-default-fg-3)',
-
-    'boxShadow': 'inset 0 0 0 0.5px var(--color-border)',
-    'background': 'var(--color-muted-bg)',
-    'font': 'inherit',
-    'verticalAlign': 'top',
-
-    '@nest': {
-      '&:not([hidden])': {
-        display: 'inline-block',
-      },
-    },
-  },
-}