@sanity/ui 3.0.0-static.13 → 3.0.0-static.15

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

@@ -1,302 +0,0 @@
-import {THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-
-import {Rules} from '../../types'
-import {toneMap, variantMap} from './_constants'
-
-const buttonVariantRules: Rules = {}
-
-for (const mode of THEME_COLOR_BUTTON_MODES) {
-  for (const tone of THEME_COLOR_STATE_TONES) {
-    if (mode === 'default') {
-      buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
-        // 'boxShadow': 'none',
-        '--color-bg': `var(--color-solid-${tone}-bg-0)`,
-        '--color-border': `var(--color-solid-${tone}-border-1)`,
-        '--color-fg': `var(--color-solid-${tone}-fg-0)`,
-        '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
-        '--button-box-shadow': 'none',
-
-        '@nest': {
-          '&:not([data-disabled]):hover': {
-            '--color-bg': `var(--color-solid-${tone}-bg-1)`,
-            '--color-border': `var(--color-solid-${tone}-border-2)`,
-            '--color-fg': `var(--color-solid-${tone}-fg-0)`,
-            '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
-          },
-
-          '&:not([data-disabled]):active': {
-            '--color-bg': `var(--color-solid-${tone}-bg-2)`,
-            '--color-border': `var(--color-solid-${tone}-border-3)`,
-            '--color-fg': `var(--color-solid-${tone}-fg-0)`,
-            '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
-          },
-
-          '&:not([data-disabled])[data-selected]': {
-            '--color-bg': `var(--color-solid-${tone}-bg-2)`,
-            '--color-border': `var(--color-solid-${tone}-border-3)`,
-            '--color-fg': `var(--color-solid-${tone}-fg-0)`,
-            '--color-muted-fg': `var(--color-solid-${tone}-fg-4)`,
-          },
-
-          '&[data-disabled]': {
-            '--color-bg': `var(--color-tinted-default-bg-1)`,
-            '--color-border': `var(--color-tinted-default-border-0)`,
-            '--color-fg': `var(--color-tinted-default-border-2)`,
-            '--color-muted-fg': `var(--color-tinted-default-border-1)`,
-          },
-        },
-      }
-    }
-
-    if (mode === 'bleed') {
-      buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
-        'boxShadow': 'none',
-        '--color-bg': `var(--color-tinted-${tone}-bg-0)`,
-        '--color-border': `var(--color-tinted-${tone}-border-1)`,
-        '--color-fg': `var(--color-tinted-${tone}-fg-2)`,
-        '--color-muted-fg': `var(--color-tinted-${tone}-fg-4)`,
-        '--button-box-shadow': 'none',
-
-        '@nest': {
-          '&:not([data-disabled]):hover': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-1)`,
-            '--color-border': `var(--color-tinted-${tone}-border-2)`,
-            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            '--color-muted-fg': `var(--color-tinted-${tone}-fg-3)`,
-          },
-
-          '&:not([data-disabled]):active': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
-            '--color-border': `var(--color-tinted-${tone}-border-3)`,
-            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            '--color-muted-fg': `var(--color-tinted-${tone}-fg-3)`,
-          },
-
-          '&:not([data-disabled])[data-selected]': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
-            '--color-border': `var(--color-tinted-${tone}-border-3)`,
-            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            '--color-muted-fg': `var(--color-tinted-${tone}-fg-3)`,
-          },
-
-          '&[data-disabled]': {
-            '--color-bg': `var(--color-tinted-default-bg-0)`,
-            '--color-border': `var(--color-tinted-default-border-0)`,
-            '--color-fg': `var(--color-tinted-default-border-2)`,
-            '--color-muted-fg': `var(--color-tinted-default-border-1)`,
-          },
-        },
-      }
-    }
-
-    if (mode === 'ghost') {
-      buttonVariantRules[`&.${variantMap[mode]}.${toneMap[tone]}`] = {
-        '--color-bg': `var(--color-tinted-${tone}-bg-0)`,
-        '--color-border': `var(--color-tinted-${tone}-border-1)`,
-        '--color-fg': `var(--color-tinted-${tone}-fg-2)`,
-        '--button-box-shadow': [
-          `inset 0 0 0 var(--button-border-width) var(--color-border)`,
-          `inset 0 -1.5px 0 0.5px var(--color-shadow-umbra)`,
-        ].join(','),
-
-        '@nest': {
-          '&:not([data-disabled]):hover': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-1)`,
-            '--color-border': `var(--color-tinted-${tone}-border-2)`,
-            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
-          },
-
-          '&:not([data-disabled]):active': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
-            '--color-border': `var(--color-tinted-${tone}-border-3)`,
-            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
-          },
-
-          '&:not([data-disabled])[data-selected]': {
-            '--color-bg': `var(--color-tinted-${tone}-bg-2)`,
-            '--color-border': `var(--color-tinted-${tone}-border-3)`,
-            '--color-fg': `var(--color-tinted-${tone}-fg-1)`,
-            '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
-          },
-
-          '&[data-disabled]': {
-            '--color-bg': `var(--color-tinted-default-bg-0)`,
-            '--color-border': `var(--color-tinted-default-border-0)`,
-            '--color-fg': `var(--color-tinted-default-border-2)`,
-          },
-        },
-      }
-    }
-  }
-}
-
-export const buttonRules: Rules = {
-  'button': {
-    'WebkitFontSmoothing': 'inherit',
-    'appearance': 'none',
-    'font': 'inherit',
-    'outline': 'none',
-    'userSelect': 'none',
-    'textDecoration': 'none',
-    'border': 0,
-    'boxSizing': 'border-box',
-    'padding': 0,
-    'overflow': 'hidden',
-    'margin': 0,
-    'textAlign': 'left',
-    'position': 'relative',
-    'verticalAlign': 'top',
-    'backgroundColor': 'var(--color-bg)',
-    'color': 'var(--color-fg)',
-    'boxShadow': 'var(--button-box-shadow)',
-
-    '@nest': {
-      '&::-moz-focus-inner': {
-        border: 0,
-        padding: 0,
-      },
-
-      '&:focus': {
-        outline: 'var(--button-focus-ring-width) solid var(--color-focus-ring)',
-        outlineOffset: 'var(--button-focus-ring-offset)',
-      },
-
-      '&:focus:not(:focus-visible)': {
-        outline: 'none',
-      },
-
-      ...buttonVariantRules,
-    },
-  },
-
-  'button-loading-box': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'var(--color-bg)',
-    borderRadius: 'inherit',
-    zIndex: 1,
-    opacity: 0.8,
-  },
-}
-
-// import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-// import {ThemeProps} from '../../_compat'
-// import {_cardColorStyle} from '../../_compat/styles/card'
-// import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
-// import {css} from '../../lib/styled'
-// import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
-
-// /**
-//  * @internal
-//  */
-// export function buttonBaseStyles(
-//   props: {$width?: ButtonWidth} & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {$width} = props
-//   const {style} = getTheme_v2(props.theme)
-
-//   return css`
-//     ${style?.button};
-
-//     -webkit-font-smoothing: inherit;
-//     appearance: none;
-//     display: inline-flex;
-//     align-items: center;
-//     font: inherit;
-//     border: 0;
-//     outline: none;
-//     user-select: none;
-//     text-decoration: none;
-//     border: 0;
-//     box-sizing: border-box;
-//     padding: 0;
-//     margin: 0;
-//     white-space: nowrap;
-//     text-align: left;
-//     position: relative;
-//     vertical-align: top;
-
-//     ${$width === 'fill' &&
-//     css`
-//       width: -moz-available;
-//       width: -webkit-fill-available;
-//       width: stretch;
-//     `}
-
-//     & > span {
-//       display: block;
-//       flex: 1;
-//       min-width: 0;
-//       border-radius: inherit;
-//     }
-
-//     &::-moz-focus-inner {
-//       border: 0;
-//       padding: 0;
-//     }
-//   `
-// }
-
-// function combineBoxShadow(...boxShadows: (string | undefined)[]): string {
-//   return boxShadows.filter(Boolean).join(',')
-// }
-
-// /**
-//  * @internal
-//  */
-// export function buttonColorStyles(
-//   props: {$mode: ButtonMode; $tone: ButtonTone} & ThemeProps,
-// ): CSSObject[] {
-//   const {$mode} = props
-//   const {button, color: baseColor, style} = getTheme_v2(props.theme)
-//   const shadow = props.$mode === 'ghost'
-//   const mode = baseColor.button[$mode] || baseColor.button.default
-//   const color = mode[props.$tone] || mode.default
-//   const border = {
-//     width: button.border.width,
-//     color: 'var(--color-border)',
-//   }
-//   // const defaultBoxShadow = `inset 0px -1.5px 0px ${buttonTheme.border.width}px color-mix(in srgb, var(--color-border) 25%, var(--color-bg))`
-//   const defaultBoxShadow = undefined
-
-//   return [
-//     _cardColorStyle(baseColor, color.enabled),
-//     {
-//       'backgroundColor': 'var(--color-bg)',
-//       'color': 'var(--color-fg)',
-//       'boxShadow': focusRingBorderStyle(border),
-//       '&:disabled, &[data-disabled]': _cardColorStyle(baseColor, color.disabled),
-//       "&:not([data-disabled='true'])": {
-//         'boxShadow': combineBoxShadow(
-//           focusRingBorderStyle(border),
-//           shadow ? defaultBoxShadow : undefined,
-//         ),
-//         '&:focus': {
-//           boxShadow: focusRingStyle({
-//             base: baseColor,
-//             border: {width: 2, color: baseColor.bg},
-//             focusRing: button.focusRing,
-//           }),
-//         },
-//         '&:focus:not(:focus-visible)': {
-//           boxShadow: combineBoxShadow(
-//             focusRingBorderStyle(border),
-//             shadow ? defaultBoxShadow : undefined,
-//           ),
-//         },
-//         '@media (hover: hover)': {
-//           '&:hover': _cardColorStyle(baseColor, color.hovered),
-//           '&:active': _cardColorStyle(baseColor, color.pressed),
-//           '&[data-hovered]': _cardColorStyle(baseColor, color.hovered),
-//         },
-//         '&[data-selected]': _cardColorStyle(baseColor, color.pressed),
-//       },
-//     },
-//     style?.button?.root,
-//   ].filter(Boolean) as CSSObject[]
-// }

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/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/container/rules.ts

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