refactor(ui): Mosaic input component

.changeset/migrate-mosaic-input-to-stylex.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/stories/input.stories.tsx

@@ -1,6 +1,5 @@
-/** @jsxImportSource @emotion/react */
 import type { InputProps } from '@clerk/ui/mosaic/components/input';
-import { Input, inputRecipe } from '@clerk/ui/mosaic/components/input';
+import { Input } from '@clerk/ui/mosaic/components/input';
 
 import type { StoryMeta } from '@/lib/types';
 
@@ -11,8 +10,16 @@ export { default as __source } from './input.stories?raw';
 export const meta: StoryMeta = {
   group: 'Components',
   title: 'Input',
-  source: 'packages/ui/src/mosaic/components/input.tsx',
-  styles: inputRecipe,
+  source: 'packages/ui/src/mosaic/components/input/input.tsx',
+  styleEngine: 'stylex',
+  styles: {
+    _variants: {
+      size: { sm: {}, md: {}, lg: {} },
+    },
+    _defaultVariants: {
+      size: 'md',
+    },
+  },
 };
 
 function knobsAsProps(props: Record<string, unknown>) {
@@ -41,6 +48,11 @@ export function Sizes(props: Record<string, unknown>) {
         size='md'
         placeholder='Medium'
       />
+      <Input
+        {...knobsAsProps(props)}
+        size='lg'
+        placeholder='Large'
+      />
     </div>
   );
 }

packages/ui/src/mosaic/block/destructive.tsx

@@ -90,9 +90,7 @@ export function Destructive({
                 value={confirmValue}
                 onChange={e => setConfirmValue(e.target.value)}
                 disabled={isDeleting}
-                sx={t => ({
-                  marginBlockStart: t.spacing(1),
-                })}
+                style={{ marginBlockStart: 'var(--cl-spacing)' }}
               />
             </Box>
             <Box

packages/ui/src/mosaic/components/avatar/avatar.styles.ts

@@ -1,6 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, fontWeightVars, radiusVars, space } from '../../tokens.stylex';
+import { colorVars, fontFamilyVars, fontWeightVars, radiusVars, space } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   // root — clips its parts to the shape/size; fill comes from the image or fallback
@@ -11,7 +11,7 @@ export const styles = stylex.create({
     boxSizing: 'border-box',
     display: 'inline-flex',
     flexShrink: 0,
-    fontFamily: 'inherit',
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
     fontWeight: fontWeightVars['--cl-font-medium'],
     justifyContent: 'center',
     lineHeight: 1,

packages/ui/src/mosaic/components/badge/badge.styles.ts

@@ -1,6 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
+import { colorVars, fontFamilyVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
 
 // warning/negative/positive tint a faded fill and use the saturated token as text;
 // primary/neutral fill with the solid token and use its `-foreground` for text.
@@ -12,7 +12,7 @@ export const styles = stylex.create({
     alignItems: 'center',
     boxSizing: 'border-box',
     display: 'inline-flex',
-    fontFamily: 'inherit',
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
     fontSize: typeScaleVars['--cl-text-xs-size'],
     fontWeight: fontWeightVars['--cl-font-medium'],
     justifyContent: 'center',

packages/ui/src/mosaic/components/button/button.styles.ts

@@ -3,6 +3,7 @@ import * as stylex from '@stylexjs/stylex';
 import {
   colorVars,
   durationVars,
+  fontFamilyVars,
   fontWeightVars,
   radiusVars,
   space,
@@ -82,7 +83,7 @@ export const styles = stylex.create({
     display: 'inline-flex',
     // A button is sized by its own axis, not by whatever row it lands in.
     flexShrink: 0,
-    fontFamily: 'inherit',
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
     fontWeight: fontWeightVars['--cl-font-medium'],
     justifyContent: 'center',
     outlineOffset: '2px',

packages/ui/src/mosaic/components/heading/heading.tsx

@@ -6,8 +6,8 @@ import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { useContextProps } from '../../utils/context';
 import type { TypographyColor, TypographySize } from '../typography.styles';
-import { colors, sizes } from '../typography.styles';
-import { styles } from './heading.styles';
+import { colors, sizes, styles as typographyStyles } from '../typography.styles';
+import { styles as headingStyles } from './heading.styles';
 
 export interface HeadingProps extends MosaicComponentProps<'h2'> {
   size?: TypographySize;
@@ -33,7 +33,7 @@ export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(functi
   const props = {
     ...mergeStyleProps(
       themeProps('heading', { size, color }),
-      stylex.props(styles.base, sizes[size], colors[color]),
+      stylex.props(typographyStyles.base, headingStyles.base, sizes[size], colors[color]),
       className,
       style,
     ),

packages/ui/src/mosaic/components/input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './input';
+export type { InputProps } from './input';

packages/ui/src/mosaic/components/input/input.styles.ts

@@ -0,0 +1,101 @@
+import * as stylex from '@stylexjs/stylex';
+
+import {
+  colorVars,
+  durationVars,
+  fontFamilyVars,
+  fontWeightVars,
+  radiusVars,
+  space,
+  typeScaleVars,
+} from '../../tokens.stylex';
+
+const disabledBackgroundColor = `color-mix(in oklab, ${colorVars['--cl-color-primary']} 5%, transparent)`;
+const interactionBorderColor = `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 20%, transparent)`;
+
+export const styles = stylex.create({
+  base: {
+    borderColor: {
+      default: colorVars['--cl-color-border'],
+      ':focus-visible': interactionBorderColor,
+      ':focus-visible:where([aria-invalid="true"])': colorVars['--cl-color-negative'],
+      ':where([aria-invalid="true"])': colorVars['--cl-color-negative'],
+      '@media (hover: hover)': {
+        ':hover:not([aria-invalid="true"])': interactionBorderColor,
+      },
+    },
+    borderStyle: 'solid',
+    borderWidth: {
+      default: '1px',
+      ':where([aria-invalid="true"])': '2px',
+    },
+    outline: {
+      default: 'none',
+      ':focus-visible': `2px solid ${colorVars['--cl-color-primary']}`,
+      ':focus-visible:where([aria-invalid="true"])': 'none',
+    },
+    backgroundColor: colorVars['--cl-color-input'],
+    boxSizing: 'border-box',
+    color: 'inherit',
+    display: 'block',
+    fontFamily: fontFamilyVars['--cl-font-family-sans'],
+    outlineOffset: '2px',
+    transitionDuration: durationVars['--cl-duration-base'],
+    transitionProperty: 'color, background-color, border-color',
+    minWidth: 0,
+    width: '100%',
+    '::file-selector-button': {
+      borderStyle: 'none',
+      borderWidth: 0,
+      backgroundColor: 'transparent',
+      color: 'inherit',
+      display: 'inline-flex',
+      fontSize: typeScaleVars['--cl-text-sm-size'],
+      fontWeight: fontWeightVars['--cl-font-medium'],
+      lineHeight: typeScaleVars['--cl-text-sm-leading'],
+      height: space['6'],
+    },
+    '::placeholder': {
+      color: colorVars['--cl-color-input-placeholder'],
+    },
+  },
+  disabled: {
+    backgroundColor: disabledBackgroundColor,
+    cursor: 'not-allowed',
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+});
+
+export const sizes = stylex.create({
+  sm: {
+    borderRadius: radiusVars['--cl-radius-control'],
+    paddingInline: space['3'],
+    fontSize: {
+      default: typeScaleVars['--cl-text-xs-size'],
+      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--cl-text-xs-size']})`,
+    },
+    lineHeight: typeScaleVars['--cl-text-xs-leading'],
+    height: space['7'],
+  },
+  md: {
+    borderRadius: radiusVars['--cl-radius-control'],
+    paddingInline: space['3'],
+    fontSize: {
+      default: typeScaleVars['--cl-text-sm-size'],
+      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--cl-text-sm-size']})`,
+    },
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    height: space['8'],
+  },
+  lg: {
+    borderRadius: radiusVars['--cl-radius-element'],
+    paddingInline: space['3'],
+    fontSize: {
+      default: typeScaleVars['--cl-text-base-size'],
+      '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--cl-text-base-size']})`,
+    },
+    lineHeight: 1.375,
+    height: space['9'],
+  },
+});