@sanity/ui 3.0.0-static.14 → 3.0.0-static.16

package/src/css/aspects/font/types.ts

@@ -1,10 +1,6 @@
 import {FontWeight} from '@sanity/ui/theme'
 
-/** @public */
-export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
-
 /** @public */
 export interface FontStyleProps {
-  align?: TextAlign
   weight?: FontWeight
 }

package/src/css/aspects/index.ts

@@ -17,5 +17,6 @@ export * from './pointerEvents'
 export * from './position'
 export * from './radius'
 export * from './shadow'
+export * from './textAlign'
 export * from './textOverflow'
 export * from './width'

package/src/css/aspects/margin/margin.style.ts

@@ -1,6 +1,3 @@
-// import {type Style, type StyleRules, vars} from '@sanity/css'
-// import {SPACE} from '@sanity/theme'
-
 import {SPACE} from '@sanity/ui/theme'
 
 import {_responsiveRule} from '../../_responsiveRule'

package/src/css/aspects/textAlign/index.ts

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

package/src/css/aspects/textAlign/textAlign.style.ts

@@ -0,0 +1,26 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+
+export const util: StyleRules = {}
+
+_responsiveRule(util, `text-align-initial`, {
+  textAlign: 'initial',
+})
+
+_responsiveRule(util, `text-align-left`, {
+  textAlign: 'left',
+})
+
+_responsiveRule(util, `text-align-center`, {
+  textAlign: 'center',
+})
+
+_responsiveRule(util, `text-align-right`, {
+  textAlign: 'right',
+})
+
+_responsiveRule(util, `text-align-justify`, {
+  textAlign: 'justify',
+})
+
+export const textAlignStyle: Style = {layers: {util}}

package/src/css/aspects/textAlign/textAlign.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {TextAlignStyleProps} from './types'
+
+/** @public */
+export function textAlign(props: TextAlignStyleProps): string | undefined {
+  return composeClassNames(_resp('text-align', props.textAlign))
+}

package/src/css/aspects/textAlign/types.ts

@@ -0,0 +1,7 @@
+/** @public */
+export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
+/** @public */
+export interface TextAlignStyleProps {
+  textAlign?: TextAlign
+}

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

@@ -1,5 +1,6 @@
 import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
 
+import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleRules} from '../../types'
 import {varNames} from '../../varNames'
 import {vars} from '../../vars'
@@ -132,31 +133,28 @@ const primitive: StyleRules = {
   },
 }
 
-// todo: make responsive
-for (const textSize of FONT_TEXT_SIZE) {
-  const source = vars.font.text.sizes[textSize]
+for (const size of FONT_TEXT_SIZE) {
+  const source = vars.font.text.sizes[size]
 
-  primitive[`.input-${textSize}`] = {
+  _responsiveRule(primitive, `input-${size}`, {
     [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,
-  }
+  })
 }
 
-// todo: make responsive
 for (const space of SPACE) {
-  primitive[`.input-p-${space}`] = {
+  _responsiveRule(primitive, `input-p-${space}`, {
     [varNames.input.padding]: vars.space[space],
-  }
+  })
 }
 
-// todo: make responsive
 for (const space of SPACE) {
-  primitive[`.input-g-${space}`] = {
+  _responsiveRule(primitive, `input-g-${space}`, {
     [varNames.input.gap]: vars.space[space],
-  }
+  })
 }
 
 export const _inputStyle: Style = {layers: {primitive}}

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

@@ -7,7 +7,11 @@ const primitive: StyleRules = {
     'minHeight': 0,
 
     '@nest': {
-      '&:is(ul), &:is(ol)': {
+      'iframe&': {
+        border: 'none',
+      },
+
+      'ul&, ol&': {
         listStyle: 'none',
       },
 

package/src/css/primitives/box/box.ts

@@ -18,6 +18,7 @@ import {
   pointerEvents,
   position,
   radius,
+  textAlign,
   width,
 } from '../../aspects'
 import {BoxStyleProps} from './types'
@@ -47,6 +48,7 @@ export function box(props: BoxStyleProps): string | undefined {
     pointerEvents(props),
     position(props),
     radius(props),
+    textAlign(props),
     width(props),
   )
 }

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

@@ -16,6 +16,7 @@ import {
   PointerEventsStyleProps,
   PositionStyleProps,
   RadiusStyleProps,
+  TextAlignStyleProps,
   WidthStyleProps,
 } from '../../aspects'
 import {ResponsiveProp} from '../../types'
@@ -42,6 +43,7 @@ export interface BoxStyleProps
     PointerEventsStyleProps,
     PositionStyleProps,
     RadiusStyleProps,
+    TextAlignStyleProps,
     WidthStyleProps {
   muted?: boolean
   outline?: 'none'

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

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
+import {flexItem, font, textAlign} from '../../aspects'
 import {HeadingStyleProps} from './types'
 
 /** @public */
@@ -13,5 +13,6 @@ export function heading(props: HeadingStyleProps): string | undefined {
     props.muted && 'heading-muted',
     _resp(`heading`, props.size),
     flexItem(props),
+    textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
+import {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */
@@ -7,6 +7,7 @@ export type HeadingSize = number
 /** @public */
 export interface HeadingStyleProps extends FontStyleProps, FlexItemStyleProps {
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<HeadingSize>
 }

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

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {font} from '../../aspects'
+import {font, textAlign} from '../../aspects'
 import {LabelStyleProps} from './types'
 
 /** @public */
@@ -12,5 +12,6 @@ export function label(props: LabelStyleProps): string | undefined {
     props.accent && 'label-accent',
     props.muted && 'label-muted',
     _resp(`label`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,6 +1,6 @@
 import {FontLabelSize} from '@sanity/ui/theme'
 
-import {FontStyleProps} from '../../aspects'
+import {FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /**
@@ -12,6 +12,7 @@ export type LabelSize = number
 /** @public */
 export interface LabelStyleProps extends FontStyleProps {
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<FontLabelSize>
 }

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

@@ -39,13 +39,8 @@ const primitive: StyleRules = {
     },
   },
 
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-
   '.text-muted': {
     color: 'var(--color-muted-fg)',
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
   },
 }
 

package/src/css/primitives/text/text.ts

@@ -1,6 +1,6 @@
 import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
+import {flexItem, font, textAlign} from '../../aspects'
 import {TextStyleProps} from './types'
 
 /** @public */
@@ -13,5 +13,6 @@ export function text(props: TextStyleProps): string | undefined {
     props.accent && 'text-accent',
     props.muted && 'text-muted',
     _resp(`text`, props.size),
+    textAlign({textAlign: props.align}),
   )
 }

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

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
+import {FlexItemStyleProps, FontStyleProps, TextAlignStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 /** @public */
@@ -10,6 +10,7 @@ export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
    * @deprecated Will be removed in next major version
    */
   accent?: boolean
+  align?: TextAlignStyleProps['textAlign']
   muted?: boolean
   size?: ResponsiveProp<TextSize>
 }

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

@@ -42,126 +42,7 @@ const primitive: StyleRules = {
     },
   },
 
-  '.text-input-presentation': {
-    // position: 'absolute',
-    // top: 0,
-    // left: 0,
-    // right: 0,
-    // bottom: 0,
-    // display: 'block',
-    // pointerEvents: 'none',
-    // zIndex: 0,
-    // backgroundColor: 'var(--input-bg-color)',
-    // 'boxShadow': 'var(--input-box-shadow)',
-    // '--input-border-color': 'var(--color-input-default-enabled-border)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
-    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-    //   --card-bg-color: ${color.input.default.enabled.bg};
-    //   --card-fg-color: ${color.input.default.enabled.fg};
-    //   /* enabled */
-    //   *:not(:disabled) + &[data-border] {
-    //     --input-box-shadow: ${focusRingBorderStyle({
-    //       color: color.input.default.enabled.border,
-    //       width: input.border.width,
-    //     })};
-    //   }
-    //   /* invalid */
-    //   *:not(:disabled):invalid + & {
-    //     --card-bg-color: ${color.input.invalid.enabled.bg};
-    //     --card-fg-color: ${color.input.invalid.enabled.fg};
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.enabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* focused */
-    //   *:not(:disabled):focus + & {
-    //     &[data-border] {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({
-    //             border: {color: color.input.default.enabled.border, width: input.border.width},
-    //             focusRing: input.text.focusRing,
-    //           })};
-    //     }
-    //     &:not([data-border]) {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({focusRing: input.text.focusRing})};
-    //     }
-    //   }
-    //   /* disabled */
-    //   *:not(:invalid):disabled + & {
-    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   *:invalid:disabled + & {
-    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* readOnly */
-    //   *:not(:invalid):read-only + & {
-    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
-    //   }
-    //   *:invalid:read-only + & {
-    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
-    //   }
-    //   /* hovered */
-    //   @media (hover: hover) {
-    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-    //       --card-bg-color: ${color.input.default.hovered.bg};
-    //       --card-fg-color: ${color.input.default.hovered.fg};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):hover + & {
-    //       --card-bg-color: ${color.input.invalid.hovered.bg};
-    //       --card-fg-color: ${color.input.invalid.hovered.fg};
-    //     }
-    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    // }
-  },
+  '.text-input-presentation': {},
 }
 
 export const textInputStyle: Style = {layers: {primitive}}

package/src/css/aspects/height/rules.ts

@@ -1,7 +0,0 @@
-import {responsiveRules} from '../../responsiveRules'
-import {type Rules} from '../../types'
-
-export const heightRules: Rules = {
-  ...responsiveRules('h-fill', {height: '100%'}),
-  ...responsiveRules('h-stretch', {height: 'stretch'}),
-}

package/src/css/aspects/width/rules.ts

@@ -1,8 +0,0 @@
-import {Rules} from '../../types'
-
-export const widthRules: Rules = {
-  'w-fill': {
-    // @ts-expect-error - TODO: fix this
-    width: ['-moz-available', '-webkit-fill-available', 'stretch'],
-  },
-}

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

@@ -1,15 +0,0 @@
-import {Rules} from '../../types'
-import {vars} from '../../vars'
-
-export const menuRules: Rules = {
-  'menu': {
-    outline: 'none',
-  },
-
-  'menu-divider': {
-    height: `1px`,
-    border: 0,
-    backgroundColor: vars.color.border,
-    margin: 0,
-  },
-}

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

@@ -1,176 +0,0 @@
-import {AVATAR_SIZE, THEME_COLOR_AVATAR_COLORS} from '@sanity/ui/theme'
-
-import {responsiveRules} from '../../responsiveRules'
-import {Properties, Rules} from '../../types'
-import {varNames} from '../../varNames'
-import {vars} from '../../vars'
-
-export const avatarRules: Rules = {
-  '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_SIZE.reduce((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`avatar-${size}`, {
-        [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-        [varNames.avatar.size]: vars.avatar.sizes[size].size,
-      }),
-    }
-  }, {} as Rules) as Rules),
-
-  '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,
-      },
-    },
-  },
-}