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

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

@@ -0,0 +1,12 @@
+import {FontTextSize, Space} from '@sanity/ui/theme'
+
+import {RadiusStyleProps, WidthStyleProps} from '../../aspects'
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface InputStyleProps extends RadiusStyleProps, WidthStyleProps {
+  border?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  gap?: ResponsiveProp<Space>
+  padding?: ResponsiveProp<Space>
+}

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

@@ -0,0 +1,117 @@
+// 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

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

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

@@ -0,0 +1,132 @@
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
+import {Properties, Style, StyleRules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
+import {toneMap} from './_contants'
+
+const primitive: StyleRules = {
+  '.selectable': {
+    'backgroundColor': vars.color.bg,
+    'color': vars.color.fg,
+
+    [varNames.color.bg]: vars.color.tinted.bg[0],
+    [varNames.color.border]: vars.color.tinted.border[2],
+    [varNames.color.fg]: vars.color.tinted.fg[2],
+
+    '@nest': {
+      '&:is(button)': {
+        WebkitFontSmoothing: 'inherit',
+        appearance: 'none',
+        outline: 'none',
+        font: 'inherit',
+        textAlign: 'inherit',
+        border: 0,
+        // @ts-expect-error - TODO: fix this
+        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': {
+            [varNames.color.bg]: vars.color.tinted.bg[1],
+            [varNames.color.border]: vars.color.tinted.border[3],
+            [varNames.color.fg]: vars.color.tinted.fg[1],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[2],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4],
+          },
+
+          '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
+            {
+              [varNames.color.bg]: vars.color.tinted.bg[2],
+              [varNames.color.border]: vars.color.tinted.border[4],
+              [varNames.color.fg]: vars.color.tinted.fg[0],
+              [varNames.color.muted.bg]: vars.color.tinted.bg[3],
+              [varNames.color.muted.fg]: vars.color.tinted.fg[4],
+            },
+
+          '&:not([data-disabled]):focus': {
+            [varNames.color.bg]: vars.color.solid.primary.bg[0],
+            [varNames.color.border]: vars.color.solid.primary.border[1],
+            [varNames.color.fg]: vars.color.solid.primary.fg[0],
+            [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+            [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
+          },
+
+          '&[data-disabled]': {
+            [varNames.color.bg]: vars.color.tinted.bg[0],
+            [varNames.color.border]: vars.color.tinted.border[1],
+            [varNames.color.fg]: vars.color.tinted.border[4],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[1],
+            [varNames.color.muted.fg]: vars.color.tinted.border[4],
+          },
+        },
+      },
+    },
+  },
+}
+
+export const _selectableStyle: Style = {layers: {primitive}}
+
+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
+}

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

@@ -0,0 +1,9 @@
+import {_comp} from '../../_comp'
+import {radius} from '../../aspects'
+import {toneMap} from './_contants'
+import {SelectableStyleProps} from './types'
+
+/** @internal */
+export function _selectable(props: SelectableStyleProps): string | undefined {
+  return _comp('selectable', toneMap[props.tone ?? 'default'], radius(props))
+}

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

@@ -0,0 +1,8 @@
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+import {RadiusStyleProps} from '../../aspects'
+
+/** @internal */
+export interface SelectableStyleProps extends RadiusStyleProps {
+  tone?: ThemeColorStateToneKey
+}

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

@@ -0,0 +1,175 @@
+import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Properties, Style, StyleRules} from '../../types'
+import {varNames} from '../../varNames'
+import {vars} from '../../vars'
+
+const primitive: StyleRules = {
+  '.avatar': {
+    'backgroundColor': vars.color.avatar.bg,
+    'position': 'relative',
+    'boxSizing': 'border-box',
+    'userSelect': 'none',
+    'boxShadow': `0 0 0 1px ${vars.color.bg}`,
+    'lineHeight': 0,
+
+    'width': vars.avatar.size,
+    'height': vars.avatar.size,
+    'borderRadius': vars.avatar.size,
+
+    '@nest': {
+      '&[data-status="inactive"]': {
+        opacity: 0.5,
+      },
+
+      // &:is(button)
+      '&:is(button)': {
+        WebkitFontSmoothing: 'inherit',
+        appearance: 'none',
+        margin: 0,
+        padding: 0,
+        border: 0,
+        font: 'inherit',
+        color: 'inherit',
+        outline: 'none',
+      },
+
+      '&:is(button):focus': {
+        outline: 'var(--avatar-focus-ring-width) solid var(--color-focus-ring)',
+        outlineOffset: 'var(--avatar-focus-ring-offset)',
+      },
+
+      '&:is(button):focus:not(:focus-visible)': {
+        boxShadow: 'none',
+      },
+
+      ':disabled &, [data-disabled] &': {
+        [varNames.color.avatar.bg]: vars.color.border,
+        [varNames.color.avatar.fg]: vars.color.bg,
+      },
+
+      ...THEME_COLOR_AVATAR_COLORS.reduce(
+        (acc, color) => {
+          return {
+            ...acc,
+            [`&.${color}`]: {
+              [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
+              [varNames.color.avatar.fg]: vars.color.avatar[color].fg,
+            },
+          }
+        },
+        {} as Record<string, Properties>,
+      ),
+    },
+  },
+
+  '.avatar-arrow': {
+    'position': 'absolute',
+    'boxSizing': 'border-box',
+    'zIndex': 0,
+    'opacity': 0,
+    'transition': 'all 0.2s linear',
+    'transform': 'rotate(-90deg) translate3d(0, 6px, 0)',
+    'left': 0,
+    'right': 0,
+    'top': 0,
+    'bottom': 0,
+
+    '@nest': {
+      '& > svg': {
+        display: 'block',
+        width: '11px',
+        height: '7px',
+        position: 'absolute',
+        top: '-5px',
+        left: '50%',
+        transform: 'translateX(-6px)',
+      },
+
+      '[data-arrow-position="inside"] > &': {
+        transform: 'rotate(-90deg) translate3d(0, 6px, 0)',
+        opacity: 0,
+      },
+
+      '[data-arrow-position="top"] > &': {
+        opacity: 1,
+        transform: 'rotate(0deg)',
+      },
+
+      '[data-arrow-position="bottom"] > &': {
+        opacity: 1,
+        transform: 'rotate(-180deg)',
+      },
+    },
+  },
+
+  '.avatar-image': {
+    '@nest': {
+      '& > img': {
+        display: 'block',
+        position: 'absolute',
+        width: vars.avatar.size,
+        height: vars.avatar.size,
+        borderRadius: vars.avatar.size,
+      },
+
+      '& > span': {
+        display: 'block',
+        position: 'absolute',
+        width: vars.avatar.size,
+        height: vars.avatar.size,
+        borderRadius: vars.avatar.size,
+        boxShadow: [
+          `inset 0 0 0 1px ${vars.color.avatar.bg}`,
+          `inset 0 0 0 1.75px ${vars.color.bg}`,
+        ].join(', '),
+      },
+
+      '[data-image-error] &': {
+        display: 'none',
+      },
+    },
+  },
+
+  '.avatar-initials': {
+    color: vars.color.avatar.fg,
+    borderRadius: vars.avatar.size,
+  },
+
+  '.avatar-counter': {
+    'color': vars.color.fg,
+    'backgroundColor': vars.color.bg,
+    'boxShadow': [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(', '),
+    'userSelect': 'none',
+    'borderRadius': vars.avatar.size,
+    'height': vars.avatar.size,
+
+    '@nest': {
+      '&&': {
+        minWidth: vars.avatar.size,
+      },
+
+      '[data-hide-inner-stroke] &': {
+        boxShadow: `0 0 0 1px ${vars.color.bg}`,
+      },
+    },
+  },
+
+  '.avatar-stack': {
+    '@nest': {
+      '& > div + div': {
+        marginLeft: vars.avatar.distance,
+      },
+    },
+  },
+}
+
+for (const size of AVATAR_SIZE) {
+  _responsiveRule(primitive, `avatar-${size}`, {
+    [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
+    [varNames.avatar.size]: vars.avatar.sizes[size].size,
+  })
+}
+
+export const avatarStyle: Style = {layers: {primitive}}

package/src/css/primitives/avatar/avatar.ts

@@ -1,32 +1,27 @@
+import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {composeClassNames} from '../../composeClassNames'
 import {AvatarStyleProps} from './types'
 
-export function avatar(props: AvatarStyleProps): string {
-  return composeClassNames(
-    'avatar',
-    `avatar-${props.color}`,
-    `avatar-arrow-${props.arrowPosition}`,
-    _resp('avatar', props.size),
-  )
+export function avatar(props: AvatarStyleProps): string | undefined {
+  return _comp('avatar', props.color || 'gray', _resp('avatar', props.size))
 }
 
-export function avatarArrow(): string {
-  return composeClassNames('avatar-arrow')
+export function avatarArrow(): string | undefined {
+  return _comp('avatar-arrow')
 }
 
-export function avatarInitials(): string {
-  return composeClassNames('avatar-initials')
+export function avatarInitials(): string | undefined {
+  return _comp('avatar-initials')
 }
 
-export function avatarBgStroke(): string {
-  return composeClassNames('avatar-bg-stroke')
+export function avatarImage(): string | undefined {
+  return _comp('avatar-image')
 }
 
-export function avatarStroke(): string {
-  return composeClassNames('avatar-stroke')
+export function avatarCounter(props: {size?: AvatarStyleProps['size']}): string | undefined {
+  return _comp('avatar-counter', _resp('avatar', props.size))
 }
 
-export function avatarImage(): string {
-  return composeClassNames('avatar-image')
+export function avatarStack(props: {size?: AvatarStyleProps['size']}): string | undefined {
+  return _comp('avatar-stack', _resp('avatar', props.size))
 }