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

package/src/css/components/tree/rules.ts

@@ -1,168 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const treeRules: Rules = {
-  'tree-item': {
-    '@nest': {
-      '&[role="none"] > [role="treeitem"]': {
-        outline: 'none',
-        cursor: 'default',
-        borderRadius: '3px',
-
-        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
-      },
-
-      '&[role="none"] > [role="treeitem"]:focus': {
-        position: 'relative',
-      },
-
-      '&[role="treeitem"]': {
-        outline: 'none',
-      },
-
-      '&[role="treeitem"] > div': {
-        cursor: 'default',
-        borderRadius: '3px',
-
-        backgroundColor: vars.color.bg, // 'var(--card-bg-color)',
-        color: 'var(--treeitem-fg-color)',
-      },
-
-      '&[role="treeitem"]:focus > div': {
-        position: 'relative',
-      },
-
-      // &[role='treeitem'] {
-      //   outline: none;
-
-      //   & > div {
-      //     cursor: default;
-      //     border-radius: 3px;
-
-      //     background-color: var(--card-bg-color);
-      //     color: var(--treeitem-fg-color);
-      //   }
-
-      //   &:focus > div {
-      //     position: relative;
-      //   }
-      // }
-    },
-  },
-}
-
-// const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
-
-// const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
-
-// const ToggleArrowText = styled(Text)`
-//   & > svg {
-//     transition: transform 100ms;
-//   }
-// `
-
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {css} from '../../lib/styled'
-// import {rem, ThemeProps} from '../../styles'
-// import {_cardColorStyle} from '../../styles/card'
-
-// export function treeItemRootStyle(): ReturnType<typeof css> {
-//   return css`
-//     &[role='none'] > [role='treeitem'] {
-//       outline: none;
-//       cursor: default;
-//       border-radius: 3px;
-
-//       background-color: var(--card-bg-color);
-//       color: var(--treeitem-fg-color);
-
-//       &:focus {
-//         position: relative;
-//       }
-//     }
-
-//     &[role='treeitem'] {
-//       outline: none;
-
-//       & > div {
-//         cursor: default;
-//         border-radius: 3px;
-
-//         background-color: var(--card-bg-color);
-//         color: var(--treeitem-fg-color);
-//       }
-
-//       &:focus > div {
-//         position: relative;
-//       }
-//     }
-//   `
-// }
-
-// export function treeItemRootColorStyle(props: ThemeProps): ReturnType<typeof css> {
-//   const $tone = 'default'
-//   const {color} = getTheme_v2(props.theme)
-//   const tone = color.selectable[$tone]
-
-//   return css`
-//     &[role='none'] {
-//       & > [role='treeitem'] {
-//         ${_cardColorStyle(color, tone.enabled)}
-//       }
-
-//       &[data-selected] > [role='treeitem'] {
-//         ${_cardColorStyle(color, tone.pressed)}
-//       }
-
-//       @media (hover: hover) {
-//         &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
-//           ${_cardColorStyle(color, tone.hovered)}
-//         }
-
-//         & > [role='treeitem']:focus {
-//           ${_cardColorStyle(color, tone.selected)}
-//         }
-//       }
-//     }
-
-//     &[role='treeitem'] {
-//       & > [data-ui='TreeItem__box'] {
-//         ${_cardColorStyle(color, tone.enabled)}
-//       }
-
-//       &[data-selected] > [data-ui='TreeItem__box'] {
-//         ${_cardColorStyle(color, tone.pressed)}
-//       }
-
-//       @media (hover: hover) {
-//         &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
-//           ${_cardColorStyle(color, tone.hovered)}
-//         }
-
-//         &:focus > [data-ui='TreeItem__box'] {
-//           ${_cardColorStyle(color, tone.selected)}
-//         }
-//       }
-//     }
-//   `
-// }
-
-// export interface TreeItemBoxStyleProps {
-//   $level: number
-// }
-
-// export function treeItemBoxStyle(
-//   props: TreeItemBoxStyleProps & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {$level} = props
-//   const {space} = getTheme_v2(props.theme)
-
-//   return css`
-//     padding-left: ${rem(space[2] * $level)};
-
-//     &[data-as='a'] {
-//       text-decoration: none;
-//     }
-//   `
-// }

package/src/css/composeClassNames.ts

@@ -1,13 +0,0 @@
-export function composeClassNames(
-  ...classNames: Array<string | false | undefined>
-): string | undefined {
-  const names =
-    unique(classNames.map((n) => typeof n === 'string' && n.trim()).filter(Boolean)).join(' ') ||
-    undefined
-
-  return names
-}
-
-function unique<T>(array: T[]): T[] {
-  return Array.from(new Set(array))
-}

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

@@ -1,71 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const _arrowRules: Rules = {
-  'arrow': {
-    'position': 'absolute',
-
-    // todo: replace with vars?
-    'width': 'var(--arrow-size)',
-    'height': 'var(--arrow-size)',
-
-    '@nest': {
-      ':empty + &': {
-        display: 'none',
-      },
-
-      '& > svg': {
-        display: 'block',
-        transformOrigin: `calc(var(--arrow-size) / 2) calc(var(--arrow-size) / 2)`,
-      },
-
-      // top
-
-      '[data-placement^="top"] > &': {
-        bottom: 'calc(0px - var(--arrow-size))',
-      },
-
-      '[data-placement^="top"] > & svg': {
-        transform: 'rotate(0deg)',
-      },
-
-      // right
-
-      '[data-placement^="right"] > &': {
-        left: 'calc(0px - var(--arrow-size))',
-      },
-
-      '[data-placement^="right"] > & svg': {
-        transform: 'rotate(90deg)',
-      },
-
-      // left
-
-      '[data-placement^="left"] > &': {
-        right: 'calc(0px - var(--arrow-size))',
-      },
-
-      '[data-placement^="left"] > & svg': {
-        transform: 'rotate(-90deg)',
-      },
-
-      // bottom
-
-      '[data-placement^="bottom"] > &': {
-        top: 'calc(0px - var(--arrow-size))',
-      },
-
-      '[data-placement^="bottom"] > & svg': {
-        transform: 'rotate(180deg)',
-      },
-    },
-  },
-
-  'arrow-stroke': {
-    stroke: vars.color.shadow.outline,
-  },
-
-  'arrow-shape': {
-    fill: vars.color.bg,
-  },
-}

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

@@ -1,163 +0,0 @@
-import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
-
-import {responsiveRules} from '../../responsiveRules'
-import {Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-export const _inputRules: Rules = {
-  'input': {
-    position: 'relative',
-  },
-
-  'input-b': {
-    '@nest': {
-      '& .input-presentation': {
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
-      },
-    },
-  },
-
-  'input-element': {
-    '--color-input-fg': vars.color.tinted.default.fg[2],
-    '--color-input-placeholder': vars.color.tinted.default.border[4],
-
-    'WebkitFontSmoothing': 'inherit',
-    'appearance': 'none',
-    'border': 0,
-    'outline': 'none',
-    'margin': 0,
-    'fontFamily': vars.font.text.family,
-    'fontSize': vars.input.fontSize,
-    'lineHeight': vars.input.lineHeight,
-    'letterSpacing': vars.input.letterSpacing,
-    'backgroundColor': 'transparent',
-    'color': vars.color.input.fg,
-    'padding': [
-      'calc(var(--input-padding) - var(--input-ascender-height))',
-      'var(--input-padding)',
-      'calc(var(--input-padding) - var(--input-descender-height))',
-      'var(--input-padding)',
-    ].join(' '),
-    'borderRadius': 'inherit',
-    'position': 'relative',
-    'zIndex': 1,
-    'display': 'block',
-    'boxSizing': 'border-box',
-    'resize': 'none',
-    'width': ['-moz-available', '-webkit-fill-available', 'stretch'],
-
-    '@nest': {
-      '.input[data-icon-left] &': {
-        paddingLeft: `calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))`,
-      },
-
-      '.input[data-icon-right] &': {
-        paddingRight: `calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))`,
-      },
-
-      '&::placeholder': {
-        color: vars.color.input.placeholder,
-      },
-
-      '&:hover': {
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[0],
-      },
-
-      '&:focus': {
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[0],
-      },
-
-      '&:disabled': {
-        [varNames.color.input.fg]: vars.color.tinted.default.border[3],
-      },
-    },
-  },
-
-  'input-presentation': {
-    [varNames.color.input.fg]: vars.color.tinted.default.fg[4],
-    [varNames.color.input.bg]: vars.color.tinted.default.bg[0],
-    [varNames.color.input.border]: vars.color.tinted.default.border[1],
-
-    'borderRadius': 'inherit',
-    'position': 'absolute',
-    'top': 0,
-    'left': 0,
-    'right': 0,
-    'bottom': 0,
-    'display': 'block',
-    'pointerEvents': 'none',
-    'zIndex': 0,
-
-    '@nest': {
-      '.input[data-prefix] &': {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-      },
-
-      '.input[data-suffix] &': {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-      },
-
-      '.input-element:placeholder-shown + &': {
-        [varNames.color.input.fg]: vars.color.tinted.default.border[4],
-      },
-
-      '.input-element:hover + &': {
-        [varNames.color.input.border]: vars.color.tinted.default.border[2],
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
-
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
-      },
-
-      '.input-element:focus + &': {
-        [varNames.color.input.border]: vars.color.tinted.default.border[2],
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
-
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
-        outlineWidth: vars.input.text.focusRing.width,
-        outlineStyle: 'solid',
-        outlineColor: vars.color.focusRing,
-        outlineOffset: vars.input.text.focusRing.offset,
-      },
-
-      '.input-element:disabled + &': {
-        [varNames.color.input.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.input.border]: vars.color.tinted.default.border[0],
-
-        opacity: 1,
-      },
-    },
-  },
-}
-
-for (const textSize of FONT_TEXT_SIZE) {
-  const source = vars.font.text.sizes[textSize]
-
-  _inputRules[`input-${textSize}`] = {
-    [varNames.input.fontSize]: source.fontSize,
-    [varNames.input.lineHeight]: source.lineHeight,
-    [varNames.input.letterSpacing]: source.letterSpacing,
-    [varNames.input.ascenderHeight]: source.ascenderHeight,
-    [varNames.input.descenderHeight]: source.descenderHeight,
-  }
-}
-
-for (const space of SPACE) {
-  Object.assign(
-    _inputRules,
-    responsiveRules(`input-p-${space}`, {
-      [varNames.input.padding]: vars.space[space],
-    }),
-  )
-}
-
-for (const space of SPACE) {
-  Object.assign(
-    _inputRules,
-    responsiveRules(`input-g-${space}`, {
-      [varNames.input.gap]: vars.space[space],
-    }),
-  )
-}

package/src/css/primitives/_selectable/__style.ts

@@ -1,117 +0,0 @@
-// import {getTheme_v2} from '@sanity/ui/theme'
-// import {ThemeProps} from '../../../core'
-// import {css} from '../../../core/lib/styled'
-// import {_cardColorStyle} from '../../../core/styles/card'
-// import {SelectableTone} from '../../../core/types'
-
-// /**
-//  * @internal
-//  * @deprecated
-//  */
-// export interface SelectableStyleProps {
-//   $tone: SelectableTone
-// }
-
-// export function selectableBaseStyle(): ReturnType<typeof css> {
-//   return css`
-//     background-color: inherit;
-//     color: inherit;
-
-//     &[data-as='button'] {
-//       -webkit-font-smoothing: inherit;
-//       appearance: none;
-//       outline: none;
-//       font: inherit;
-//       text-align: inherit;
-//       border: 0;
-//       width: -moz-available;
-//       width: -webkit-fill-available;
-//       width: stretch;
-//     }
-
-//     /* &:is(a) */
-//     &[data-as='a'] {
-//       text-decoration: none;
-//     }
-//   `
-// }
-
-// export function selectableColorStyle(
-//   props: SelectableStyleProps & ThemeProps,
-// ): ReturnType<typeof css> {
-//   const {$tone} = props
-//   const {color, style} = getTheme_v2(props.theme)
-//   const tone = color.selectable[$tone]
-
-//   return css`
-//     ${_cardColorStyle(color, tone.enabled)}
-
-//     background-color: var(--card-bg-color);
-//     color: var(--card-fg-color);
-//     outline: none;
-
-//     /* &:is(button) */
-//     &[data-as='button'] {
-//       &:disabled {
-//         ${_cardColorStyle(color, tone.disabled)}
-//       }
-
-//       &:not(:disabled) {
-//         &[aria-pressed='true'] {
-//           ${_cardColorStyle(color, tone.pressed)}
-//         }
-
-//         &[data-selected],
-//         &[aria-selected='true'] > & {
-//           ${_cardColorStyle(color, tone.selected)}
-//         }
-
-//         @media (hover: hover) {
-//           &:not([data-selected]) {
-//             &[data-hovered],
-//             &:hover {
-//               ${_cardColorStyle(color, tone.hovered)}
-//             }
-
-//             &:active {
-//               ${_cardColorStyle(color, tone.pressed)}
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     /* &:is(a) */
-//     &[data-as='a'] {
-//       &[data-disabled] {
-//         ${_cardColorStyle(color, tone.disabled)}
-//       }
-
-//       &:not([data-disabled]) {
-//         &[data-pressed] {
-//           ${_cardColorStyle(color, tone.pressed)}
-//         }
-
-//         &[data-selected] {
-//           ${_cardColorStyle(color, tone.selected)}
-//         }
-
-//         @media (hover: hover) {
-//           &:not([data-selected]) {
-//             &[data-hovered],
-//             &:hover {
-//               ${_cardColorStyle(color, tone.hovered)}
-//             }
-//             &:active {
-//               ${_cardColorStyle(color, tone.pressed)}
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     ${style?.card?.root}
-//   `
-// }
-
-export {}

package/src/css/primitives/_selectable/_contants.ts

@@ -1,11 +0,0 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-export const toneMap: Record<ThemeColorStateToneKey, string | undefined> = {
-  default: 'surface',
-  neutral: 'neutral',
-  suggest: 'suggest',
-  primary: 'accent',
-  positive: 'positive',
-  caution: 'caution',
-  critical: 'critical',
-} as const

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

@@ -1,129 +0,0 @@
-import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
-
-import {Properties, Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-import {toneMap} from './_contants'
-
-export const _selectableRules: Rules = {
-  selectable: {
-    'backgroundColor': vars.color.bg,
-    'color': vars.color.fg,
-
-    '--color-bg': vars.color.tinted.bg[0],
-    '--color-border': vars.color.tinted.border[2],
-    '--color-fg': vars.color.tinted.fg[2],
-
-    '@nest': {
-      '&:is(button)': {
-        WebkitFontSmoothing: 'inherit',
-        appearance: 'none',
-        outline: 'none',
-        font: 'inherit',
-        textAlign: 'inherit',
-        border: 0,
-        width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-      },
-
-      /* &:is(a) */
-      '&:is(a)': {
-        outline: 'none',
-        textDecoration: 'none',
-      },
-
-      ...buildSelectableTones(),
-    },
-
-    '@media': {
-      '(hover: hover)': {
-        '@nest': {
-          '&:not([data-disabled])': {
-            // cursor: 'pointer',
-          },
-
-          '&:not([data-disabled]):hover': {
-            '--color-bg': vars.color.tinted.bg[1],
-            '--color-border': vars.color.tinted.border[3],
-            '--color-fg': vars.color.tinted.fg[1],
-            '--color-muted-bg': vars.color.tinted.bg[2],
-            '--color-muted-fg': vars.color.tinted.fg[4],
-          },
-
-          '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
-            {
-              '--color-bg': vars.color.tinted.bg[2],
-              '--color-border': vars.color.tinted.border[4],
-              '--color-fg': vars.color.tinted.fg[0],
-              '--color-muted-bg': vars.color.tinted.bg[3],
-              '--color-muted-fg': vars.color.tinted.fg[4],
-            },
-
-          '&:not([data-disabled]):focus': {
-            '--color-bg': vars.color.solid.bg[0],
-            '--color-border': vars.color.solid.border[1],
-            '--color-fg': vars.color.solid.fg[1],
-            '--color-muted-bg': vars.color.solid.bg[1],
-            '--color-muted-fg': vars.color.solid.fg[3],
-          },
-
-          '&[data-disabled]': {
-            '--color-bg': vars.color.tinted.bg[0],
-            '--color-border': vars.color.tinted.border[1],
-            '--color-fg': vars.color.tinted.border[4],
-            '--color-muted-bg': vars.color.tinted.bg[1],
-            '--color-muted-fg': vars.color.tinted.border[4],
-          },
-        },
-      },
-    },
-  },
-}
-
-function buildSelectableTones(): Record<string, Properties> {
-  const rules: Record<string, Properties> = {}
-
-  for (const tone of THEME_COLOR_STATE_TONES) {
-    const target = varNames.color
-    const source = vars.color
-
-    rules[`&.${toneMap[tone]}`] = {
-      [target.tinted.bg[0]]: source.tinted[tone].bg[0],
-      [target.tinted.bg[1]]: source.tinted[tone].bg[1],
-      [target.tinted.bg[2]]: source.tinted[tone].bg[2],
-      [target.tinted.bg[3]]: source.tinted[tone].bg[3],
-      [target.tinted.bg[4]]: source.tinted[tone].bg[4],
-
-      [target.tinted.border[0]]: source.tinted[tone].border[0],
-      [target.tinted.border[1]]: source.tinted[tone].border[1],
-      [target.tinted.border[2]]: source.tinted[tone].border[2],
-      [target.tinted.border[3]]: source.tinted[tone].border[3],
-      [target.tinted.border[4]]: source.tinted[tone].border[4],
-
-      [target.tinted.fg[0]]: source.tinted[tone].fg[0],
-      [target.tinted.fg[1]]: source.tinted[tone].fg[1],
-      [target.tinted.fg[2]]: source.tinted[tone].fg[2],
-      [target.tinted.fg[3]]: source.tinted[tone].fg[3],
-      [target.tinted.fg[4]]: source.tinted[tone].fg[4],
-
-      [target.solid.bg[0]]: source.solid[tone].bg[0],
-      [target.solid.bg[1]]: source.solid[tone].bg[1],
-      [target.solid.bg[2]]: source.solid[tone].bg[2],
-      [target.solid.bg[3]]: source.solid[tone].bg[3],
-      [target.solid.bg[4]]: source.solid[tone].bg[4],
-
-      [target.solid.border[0]]: source.solid[tone].border[0],
-      [target.solid.border[1]]: source.solid[tone].border[1],
-      [target.solid.border[2]]: source.solid[tone].border[2],
-      [target.solid.border[3]]: source.solid[tone].border[3],
-      [target.solid.border[4]]: source.solid[tone].border[4],
-
-      [target.solid.fg[0]]: source.solid[tone].fg[0],
-      [target.solid.fg[1]]: source.solid[tone].fg[1],
-      [target.solid.fg[2]]: source.solid[tone].fg[2],
-      [target.solid.fg[3]]: source.solid[tone].fg[3],
-      [target.solid.fg[4]]: source.solid[tone].fg[4],
-    }
-  }
-
-  return rules
-}