@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

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

@@ -9,17 +9,37 @@ export const codeRules: Rules = {
     '--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-fg)',
+    'color': 'var(--color-code-fg)',
 
     '@nest': {
       '& > code': {
-        font: 'inherit',
+        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',
       },
     },
   },
@@ -31,6 +51,7 @@ export const codeRules: Rules = {
     '--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', {
@@ -40,6 +61,7 @@ export const codeRules: Rules = {
     '--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', {
@@ -49,6 +71,7 @@ export const codeRules: Rules = {
     '--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', {
@@ -58,6 +81,7 @@ export const codeRules: Rules = {
     '--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', {
@@ -67,5 +91,6 @@ export const codeRules: Rules = {
     '--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,4 +1,4 @@
-import {FontStyleProps} from '@sanity/ui/css'
+import {FontStyleProps} from '../../styles'
 import {ResponsiveProp} from '../../types'
 
 /** @public */

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

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

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

@@ -1,4 +1,5 @@
 import {ContainerWidth} from '@sanity/ui/theme'
+
 import {ResponsiveProp} from '../../types'
 
 export interface ContainerStyleProps {

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

@@ -1,13 +1,14 @@
 import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
-import {font} from '../../styles/font'
+import {flexItem, font} from '../../styles'
 import {HeadingStyleProps} from './types'
 
 /** @public */
-export function heading(props: HeadingStyleProps): string {
+export function heading(props: HeadingStyleProps): string | undefined {
   return composeClassNames(
     'heading',
     'block',
+    flexItem(props),
     font(props),
     props.accent && 'heading-accent',
     props.muted && 'heading-muted',

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

@@ -9,6 +9,7 @@ export const headingRules: Rules = {
     '--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)',
 
@@ -20,12 +21,12 @@ export const headingRules: Rules = {
     },
   },
 
-  'heading-accent': {
-    '--fg-color': 'var(--color-accent-fg)',
-  },
+  // 'heading-accent': {
+  //   '--color-fg': 'var(--color-accent-fg)',
+  // },
 
   'heading-muted': {
-    '--fg-color': 'var(--color-muted-fg)',
+    '--color-fg': 'var(--color-tinted-default-fg-4)',
   },
 
   ...responsiveRules('heading-0', {
@@ -35,6 +36,7 @@ export const headingRules: Rules = {
     '--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', {
@@ -44,6 +46,7 @@ export const headingRules: Rules = {
     '--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', {
@@ -53,6 +56,7 @@ export const headingRules: Rules = {
     '--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', {
@@ -60,8 +64,9 @@ export const headingRules: Rules = {
     '--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-label-3-ascender-height)',
-    '--font-descender-height': 'var(--font-label-3-descender-height)',
+    '--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', {
@@ -71,6 +76,7 @@ export const headingRules: Rules = {
     '--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', {
@@ -80,5 +86,70 @@ export const headingRules: Rules = {
     '--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,11 +1,11 @@
-import {FontStyleProps} from '@sanity/ui/css'
+import {FlexItemStyleProps, FontStyleProps} from '../../styles'
 import {ResponsiveProp} from '../../types'
 
 /** @public */
 export type HeadingSize = number
 
 /** @public */
-export interface HeadingStyleProps extends FontStyleProps {
+export interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<HeadingSize>

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

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

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

@@ -2,12 +2,12 @@ import {Rules} from '../../types'
 
 export const kbdRules: Rules = {
   kbd: {
-    '--card-bg-color': 'var(--card-kbd-bg-color)',
-    '--card-border-color': 'var(--card-kbd-border-color)',
-    '--card-fg-color': 'var(--card-kbd-fg-color)',
+    // '--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 1px var(--card-border-color)',
-    'background': 'var(--card-bg-color)',
+    'boxShadow': 'inset 0 0 0 0.5px var(--color-border)',
+    'background': 'var(--color-muted-bg)',
     'font': 'inherit',
     'verticalAlign': 'top',
 

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

@@ -1,5 +1,7 @@
-import {RadiusStyleProps} from '../../styles/radius'
+import {RadiusStyleProps} from '../../styles'
 
+/** @public */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface KBDStyleProps extends RadiusStyleProps {
   //
 }

package/src/css/primitives/label/label.ts

@@ -1,10 +1,10 @@
 import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
-import {font} from '../../styles/font'
+import {font} from '../../styles'
 import {LabelStyleProps} from './types'
 
 /** @public */
-export function label(props: LabelStyleProps): string {
+export function label(props: LabelStyleProps): string | undefined {
   return composeClassNames(
     'label',
     'block',

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

@@ -9,6 +9,7 @@ export const labelRules: Rules = {
     '--font-weight-bold': `var(--font-label-weight-bold)`,
 
     '--font-family': `var(--font-label-family)`,
+    '--font-feature-settings': `var(--font-label-feature-settings)`,
 
     'color': 'var(--color-fg)',
     'textTransform': 'uppercase',
@@ -22,11 +23,11 @@ export const labelRules: Rules = {
   },
 
   'label-accent': {
-    '--fg-color': 'var(--color-accent-fg)',
+    '--color-fg': 'var(--color-accent-fg)',
   },
 
   'label-muted': {
-    '--fg-color': 'var(--color-muted-fg)',
+    '--color-fg': 'var(--color-muted-fg)',
   },
 
   ...responsiveRules('label-0', {
@@ -36,6 +37,7 @@ export const labelRules: Rules = {
     '--font-icon-size': 'var(--font-label-0-icon-size)',
     '--font-ascender-height': 'var(--font-label-0-ascender-height)',
     '--font-descender-height': 'var(--font-label-0-descender-height)',
+    // '--font-cap-height': 'var(--font-label-0-cap-height)',
   }),
 
   ...responsiveRules('label-1', {
@@ -45,6 +47,7 @@ export const labelRules: Rules = {
     '--font-icon-size': 'var(--font-label-1-icon-size)',
     '--font-ascender-height': 'var(--font-label-1-ascender-height)',
     '--font-descender-height': 'var(--font-label-1-descender-height)',
+    // '--font-cap-height': 'var(--font-label-1-cap-height)',
   }),
 
   ...responsiveRules('label-2', {
@@ -54,6 +57,7 @@ export const labelRules: Rules = {
     '--font-icon-size': 'var(--font-label-2-icon-size)',
     '--font-ascender-height': 'var(--font-label-2-ascender-height)',
     '--font-descender-height': 'var(--font-label-2-descender-height)',
+    // '--font-cap-height': 'var(--font-label-2-cap-height)',
   }),
 
   ...responsiveRules('label-3', {
@@ -63,6 +67,7 @@ export const labelRules: Rules = {
     '--font-icon-size': 'var(--font-label-3-icon-size)',
     '--font-ascender-height': 'var(--font-label-3-ascender-height)',
     '--font-descender-height': 'var(--font-label-3-descender-height)',
+    // '--font-cap-height': 'var(--font-label-3-cap-height)',
   }),
 
   ...responsiveRules('label-4', {
@@ -72,6 +77,7 @@ export const labelRules: Rules = {
     '--font-icon-size': 'var(--font-label-4-icon-size)',
     '--font-ascender-height': 'var(--font-label-4-ascender-height)',
     '--font-descender-height': 'var(--font-label-4-descender-height)',
+    // '--font-cap-height': 'var(--font-label-4-cap-height)',
   }),
 
   ...responsiveRules('label-5', {
@@ -81,5 +87,51 @@ export const labelRules: Rules = {
     '--font-icon-size': 'var(--font-label-5-icon-size)',
     '--font-ascender-height': 'var(--font-label-5-ascender-height)',
     '--font-descender-height': 'var(--font-label-5-descender-height)',
+    // '--font-cap-height': 'var(--font-label-5-cap-height)',
   }),
 }
+
+// import {getTheme_v2} from '@sanity/ui/theme'
+// import {ThemeProps} from '../../_compat'
+// import {css} from '../../lib/styled'
+
+// export function labelBaseStyle(
+//   props: {$accent?: boolean; $muted: boolean} & ThemeProps,
+// ): ReturnType<typeof css> {
+//   const {$accent, $muted} = props
+//   const {font} = getTheme_v2(props.theme)
+
+//   return css`
+//     text-transform: uppercase;
+
+//     ${$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;
+//     }
+
+//     & 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/label/types.ts

@@ -1,4 +1,4 @@
-import {FontStyleProps} from '@sanity/ui/css'
+import {FontStyleProps} from '../../styles'
 import {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/popover/popover.ts

@@ -1,5 +1,5 @@
 import {composeClassNames} from '../../composeClassNames'
 
-export function popover(): string {
+export function popover(): string | undefined {
   return composeClassNames('popover')
 }

package/src/css/primitives/radio/radio.ts

@@ -1,5 +1,5 @@
 import {composeClassNames} from '../../composeClassNames'
 
-export function radio(): string {
+export function radio(): string | undefined {
   return composeClassNames('radio')
 }

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

@@ -1,5 +1,121 @@
 import {Rules} from '../../types'
 
 export const radioRules: Rules = {
-  //
+  radio: {
+    'position': 'relative',
+
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-block',
+      },
+
+      '& input': {
+        appearance: 'none',
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        opacity: '0',
+        height: '100%',
+        width: '100%',
+        outline: 'none',
+        zIndex: '1',
+        padding: '0',
+        margin: '0',
+        borderRadius: '9999px',
+        border: 'none',
+      },
+
+      /* enabled */
+      '& > input + span': {
+        'display': 'block',
+        'position': 'relative',
+        'width': 'var(--input-radio-size)',
+        'height': 'var(--input-radio-size)',
+        'borderRadius': '9999px',
+        'backgroundColor': 'var(--color-input-bg)',
+        'boxShadow': 'inset 0 0 0 1px var(--color-input-border)',
+        // border-radius: ${rem(input.radio.size / 2)};
+        // background: ${color.input.default.enabled.bg};
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.border,
+        //   width: input.border.width,
+        // })};
+
+        '--color-input-fg': 'var(--color-tinted-default-fg-0)',
+        '--color-input-bg': 'var(--color-tinted-default-bg-0)',
+        '--color-input-border': 'var(--color-tinted-default-border-1)',
+      },
+
+      '& > input + span::after': {
+        content: '""',
+        position: 'absolute',
+        top: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
+        left: `calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)`,
+        width: 'var(--input-radio-mark-size)',
+        height: 'var(--input-radio-mark-size)',
+        backgroundColor: 'var(--color-input-fg)',
+        borderRadius: '9999px',
+        opacity: 0,
+      },
+
+      /* hovered */
+      '& > input:not(:disabled):hover + span': {
+        '--color-input-bg': 'var(--color-tinted-default-bg-1)',
+        '--color-input-border': 'var(--color-tinted-default-border-2)',
+      },
+
+      /* focused */
+      '& > input:not(:disabled):focus + span': {
+        '--color-input-border': 'var(--color-tinted-default-border-2)',
+        // box-shadow: ${focusRingStyle({
+        //   border: {width: input.border.width, color: color.input.default.enabled.border},
+        //   focusRing: input.radio.focusRing,
+        // })};
+      },
+
+      '& > input:not(:disabled):focus:not(:focus-visible) + span': {
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.border,
+        //   width: input.border.width,
+        // })};
+      },
+
+      '& > input:checked + span::after': {
+        opacity: 1,
+      },
+
+      //   /* customValidity */
+      //   &[data-error] + span {
+      //     background-color: ${color.input.invalid.enabled.border};
+      //     box-shadow: ${focusRingBorderStyle({
+      //       width: input.border.width,
+      //       color: color.input.invalid.enabled.muted.bg,
+      //     })};
+      //     &::after {
+      //       background: ${color.input.invalid.enabled.muted.bg};
+      //     }
+      //   }
+
+      //   /* read only */
+      //   &[data-read-only] + span {
+      //     box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
+      //     background: ${color.input.default.readOnly.bg};
+
+      //     &::after {
+      //       background: ${color.input.default.readOnly.border};
+      //     }
+      //   }
+
+      //   /* disabled */
+      //   &:not([data-read-only]):disabled + span {
+      //     box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
+      //     background: ${color.input.default.disabled.bg};
+
+      //     &::after {
+      //       background: ${color.input.default.disabled.border};
+      //     }
+      //   }
+      // `
+    },
+  },
 }

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

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

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

@@ -1,5 +1,22 @@
 import {Rules} from '../../types'
 
 export const selectRules: Rules = {
-  //
+  'select': {
+    '@nest': {
+      '& > select:disabled': {
+        opacity: 1,
+      },
+    },
+  },
+
+  'select-presentation': {
+    '@nest': {
+      '& > span': {
+        // place icon to the right
+        position: 'absolute',
+        top: 0,
+        right: 0,
+      },
+    },
+  },
 }

package/src/css/primitives/select/select.ts

@@ -1,5 +1,11 @@
 import {composeClassNames} from '../../composeClassNames'
+import {_input, _inputPresentation} from '../_input'
+import {SelectStyleProps} from './types'
 
-export function select(): string {
-  return composeClassNames('select')
+export function select(props: SelectStyleProps): string | undefined {
+  return composeClassNames('select', _input(props))
+}
+
+export function selectPresentation(): string | undefined {
+  return composeClassNames('select-presentation', _inputPresentation())
 }

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

@@ -0,0 +1,5 @@
+import {InputStyleProps} from '../_input'
+
+/** @public */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface SelectStyleProps extends InputStyleProps {}

package/src/css/primitives/spinner/spinner.ts

@@ -1,9 +1,9 @@
 import {composeClassNames} from '../../composeClassNames'
 
-export function spinner(): string {
+export function spinner(): string | undefined {
   return composeClassNames('spinner')
 }
 
-export function animatedSpinnerIcon(): string {
+export function animatedSpinnerIcon(): string | undefined {
   return composeClassNames('animated-spinner-icon')
 }