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

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

@@ -0,0 +1,64 @@
+import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
+
+import {_responsiveRule} from '../../_responsiveRule'
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const primitive: StyleRules = {
+  '.text': {
+    '--font-weight-regular': `var(--font-text-weight-regular)`,
+    '--font-weight-medium': `var(--font-text-weight-medium)`,
+    '--font-weight-semibold': `var(--font-text-weight-semibold)`,
+    '--font-weight-bold': `var(--font-text-weight-bold)`,
+
+    '--font-family': `var(--font-text-family)`,
+    '--font-feature-settings': `var(--font-text-feature-settings)`,
+
+    'color': 'var(--color-fg)',
+
+    '@nest': {
+      '& a': {
+        color: 'var(--color-link-fg)',
+        textDecoration: 'none',
+      },
+
+      '& a:hover': {
+        color: 'var(--color-fg)',
+      },
+
+      '& code': {
+        fontFamily: vars.font.code.family,
+        color: 'var(--color-code-fg)',
+        backgroundColor: 'var(--color-muted-bg)',
+        borderRadius: vars.radius[2],
+      },
+
+      '& svg': {
+        color: 'var(--color-muted-fg)',
+      },
+    },
+  },
+
+  // 'text-accent': {
+  //   '--color-fg': 'var(--color-accent-fg)',
+  // },
+
+  '.text-muted': {
+    color: 'var(--color-muted-fg)',
+    // '--color-fg': 'var(--color-tinted-default-fg-4)',
+  },
+}
+
+for (const size of FONT_TEXT_SIZE) {
+  _responsiveRule(primitive, `text-${size}`, {
+    '--font-size': `var(--font-text-${size}-size)`,
+    '--font-line-height': `var(--font-text-${size}-line-height)`,
+    '--font-letter-spacing': `var(--font-text-${size}-letter-spacing)`,
+    '--font-icon-size': `var(--font-text-${size}-icon-size)`,
+    '--font-ascender-height': `var(--font-text-${size}-ascender-height)`,
+    '--font-descender-height': `var(--font-text-${size}-descender-height)`,
+    // '--font-cap-height': `var(--font-text-${size}-cap-height)`,
+  })
+}
+
+export const textStyle: Style = {layers: {primitive}}

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

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

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

@@ -1,10 +1,10 @@
-import {FontStyleProps} from '@sanity/ui/css'
+import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
 import {ResponsiveProp} from '../../types'
 
 export type TextSize = number
 
 /** @public */
-export interface TextStyleProps extends FontStyleProps {
+export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<TextSize>

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

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

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

@@ -1,5 +1,7 @@
 import {Rules} from '../../types'
 
 export const textAreaRules: Rules = {
-  //
+  'text-area': {
+    //
+  },
 }

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

@@ -0,0 +1,9 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.text-area': {
+    // todo
+  },
+}
+
+export const textAreaStyle: Style = {layers: {primitive}}

package/src/css/primitives/textArea/textArea.ts

@@ -1,5 +1,8 @@
+import {_comp} from '../../_comp'
 import {composeClassNames} from '../../composeClassNames'
+import {_input} from '../_input'
+import {TextAreaStyleProps} from './types'
 
-export function textArea(): string {
-  return composeClassNames('text-area')
+export function textArea(props: TextAreaStyleProps): string | undefined {
+  return composeClassNames(_comp('text-area'), _input(props))
 }

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

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

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

@@ -1,112 +1,23 @@
-import {FONT_TEXT_SIZE, SPACE} from '@sanity/ui/theme'
-// import {_resp} from '../../_resp'
-import {responsiveRules} from '../../responsiveRules'
 import {Rules} from '../../types'
 import {vars} from '../../vars'
 
 export const textInputRules: Rules = {
   'text-input': {
     '--font-family': vars.font.text.family,
-  },
-
-  ...SPACE.reduce<Rules>((acc, space) => {
-    return {
-      ...acc,
-      ...responsiveRules(`text-input-p-${space}`.replace('.', '_'), {
-        '--padding-top': `calc(${vars.space[space]} - var(--font-ascender-height))`,
-        '--padding-right': vars.space[space],
-        '--padding-bottom': `calc(${vars.space[space]} - var(--font-descender-height))`,
-        '--padding-left': vars.space[space],
-      }),
-    }
-  }, {}),
-
-  ...FONT_TEXT_SIZE.reduce<Rules>((acc, size) => {
-    return {
-      ...acc,
-      ...responsiveRules(`text-input-${size}`, {
-        '--font-size': vars.font.text.sizes[size].fontSize,
-        '--font-line-height': vars.font.text.sizes[size].lineHeight,
-        '--font-letter-spacing': vars.font.text.sizes[size].letterSpacing,
-        '--font-ascender-height': vars.font.text.sizes[size].ascenderHeight,
-        '--font-descender-height': vars.font.text.sizes[size].descenderHeight,
-      }),
-    }
-  }, {}),
-
-  'text-input-element': {
-    'appearance': 'none',
-    'background': 'none',
-    'border': 0,
-    'borderRadius': 0,
-    'outline': 'none',
-    'width': '100%',
-    'boxSizing': 'border-box',
-    'fontFamily': 'var(--font-family)',
-    'fontSize': 'var(--font-size)',
-    'fontWeight': 'var(--font-weight)',
-    'lineHeight': 'var(--font-line-height)',
-    'letterSpacing': 'var(--font-letter-spacing)',
-    'margin': 0,
-    'position': 'relative',
-    'zIndex': 1,
-    'display': 'block',
-    'color': 'var(--input-fg-color)',
-    'paddingTop': 'var(--padding-top)',
-    'paddingRight': 'var(--padding-right)',
-    'paddingBottom': 'var(--padding-bottom)',
-    'paddingLeft': 'var(--padding-left)',
-
-    '--input-fg-color': 'var(--color-input-default-enabled-fg)',
 
     '@nest': {
-      // NOTE: This is a hack to disable Chrome’s autofill styles
-      '&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
-        {
-          WebkitTextFillColor: 'var(--input-fg-color) !important',
-          transition: 'background-color 5000s',
-          transitionDelay: '86400s', // 24h
-        },
-
-      /* &:is(textarea) */
-      // '&[data-as="textarea"]': {
-      //   resize: 'none',
-      // },
-
-      '&::placeholder': {
-        color: 'var(--input-placeholder-color)',
+      '& > span': {
+        borderRadius: 'inherit',
       },
-
-      // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
-      //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-      //   /* enabled */
-      //   &:not(:invalid):not(:disabled):not(:read-only) {
-      //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-      //   }
-      //   /* disabled */
-      //   &:not(:invalid):disabled {
-      //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
-      //   }
-      //   /* invalid */
-      //   &:invalid {
-      //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
-      //   }
-      //   /* readOnly */
-      //   &:read-only {
-      //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
-      //   }
-      // }
     },
   },
 
   'text-input-prefix': {
-    'borderTopRightRadius': 0,
-    'borderBottomRightRadius': 0,
+    'borderTop': '1px solid var(--color-border)',
+    'borderLeft': '1px solid var(--color-border)',
+    'borderBottom': '1px solid var(--color-border)',
+    'borderTopRightRadius': '0 !important',
+    'borderBottomRightRadius': '0 !important',
 
     '@nest': {
       '& > span': {
@@ -117,8 +28,11 @@ export const textInputRules: Rules = {
   },
 
   'text-input-suffix': {
-    'borderTopLeftRadius': 0,
-    'borderBottomLeftRadius': 0,
+    'borderTop': '1px solid var(--color-border)',
+    'borderRight': '1px solid var(--color-border)',
+    'borderBottom': '1px solid var(--color-border)',
+    'borderTopLeftRadius': '0 !important',
+    'borderBottomLeftRadius': '0 !important',
 
     '@nest': {
       '& > span': {
@@ -129,31 +43,34 @@ export const textInputRules: Rules = {
   },
 
   'text-input-presentation': {
-    '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-
-    '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)',
-
+    // 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({
@@ -161,12 +78,10 @@ export const textInputRules: Rules = {
     //       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,
@@ -174,7 +89,6 @@ export const textInputRules: Rules = {
     //       })};
     //     }
     //   }
-
     //   /* focused */
     //   *:not(:disabled):focus + & {
     //     &[data-border] {
@@ -185,20 +99,17 @@ export const textInputRules: Rules = {
     //             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,
@@ -206,12 +117,10 @@ export const textInputRules: Rules = {
     //       })};
     //     }
     //   }
-
     //   *: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,
@@ -219,37 +128,31 @@ export const textInputRules: Rules = {
     //       })};
     //     }
     //   }
-
     //   /* 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,

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

@@ -0,0 +1,167 @@
+import {Style, StyleRules} from '../../types'
+import {vars} from '../../vars'
+
+const primitive: StyleRules = {
+  '.text-input': {
+    '--font-family': vars.font.text.family,
+
+    '@nest': {
+      '& > span': {
+        borderRadius: 'inherit',
+      },
+    },
+  },
+
+  '.text-input-prefix': {
+    'borderTop': '1px solid var(--color-border)',
+    'borderLeft': '1px solid var(--color-border)',
+    'borderBottom': '1px solid var(--color-border)',
+    'borderTopRightRadius': '0 !important',
+    'borderBottomRightRadius': '0 !important',
+
+    '@nest': {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  '.text-input-suffix': {
+    'borderTop': '1px solid var(--color-border)',
+    'borderRight': '1px solid var(--color-border)',
+    'borderBottom': '1px solid var(--color-border)',
+    'borderTopLeftRadius': '0 !important',
+    'borderBottomLeftRadius': '0 !important',
+
+    '@nest': {
+      '& > span': {
+        display: 'block',
+        margin: '-1px',
+      },
+    },
+  },
+
+  '.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,
+    //       })};
+    //     }
+    //   }
+    // }
+  },
+}
+
+export const textInputStyle: Style = {layers: {primitive}}

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

@@ -1,15 +1,8 @@
-import {_resp} from '../../_resp'
+import {_comp} from '../../_comp'
 import {composeClassNames} from '../../composeClassNames'
+import {_input} from '../_input'
 import {TextInputStyleProps} from './types'
 
-export function textInput(props: TextInputStyleProps): string {
-  return composeClassNames(
-    'text-input',
-    _resp('text-input', props.size),
-    _resp('text-input-p', props.padding),
-  )
-}
-
-export function textInputElement(): string {
-  return composeClassNames('text-input-element')
+export function textInput(props: TextInputStyleProps): string | undefined {
+  return composeClassNames(_input(props), _comp('text-input'))
 }

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

@@ -1,8 +1,11 @@
-import {FontTextSize, Space} from '@sanity/ui/theme'
-import {ResponsiveProp} from '../../types'
+// import {FontTextSize, Space} from '@sanity/ui/theme'
+// import {ResponsiveProp} from '../../types'
+
+import {InputStyleProps} from '../_input'
 
 /** @public */
-export interface TextInputStyleProps {
-  padding: ResponsiveProp<Space>
-  size: ResponsiveProp<FontTextSize>
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TextInputStyleProps extends InputStyleProps {
+  // padding: ResponsiveProp<Space>
+  // fontSize: ResponsiveProp<FontTextSize>
 }