@kalink-ui/seedly 0.34.3 → 0.35.0

package/src/components/heading/heading.css.ts

@@ -43,7 +43,7 @@ export const headingAlignStyles = {
   },
 } as const;
 
-export const headingRoot = recipe({
+export const headingRootRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
@@ -66,7 +66,7 @@ export const pretitleSpacingStyles = mapContractVars(sys.spacing, (key) => ({
   },
 }));
 
-export const pretitle = recipe({
+export const pretitleRecipe = recipe({
   variants: {
     spacing: pretitleSpacingStyles,
   },
@@ -80,14 +80,14 @@ export const subtitleSpacingStyles = mapContractVars(sys.spacing, (key) => ({
   },
 }));
 
-export const subtitle = recipe({
+export const subtitleRecipe = recipe({
   variants: {
     spacing: subtitleSpacingStyles,
   },
 });
 
 export type HeadingRootVariants = NonNullable<
-  RecipeVariants<typeof headingRoot>
+  RecipeVariants<typeof headingRootRecipe>
 >;
 
 export const alignAt = createResponsiveVariants({

package/src/components/heading/heading.responsive.ts

@@ -2,27 +2,27 @@ import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
 import {
   alignAt,
-  headingRoot,
-  pretitle,
+  headingRootRecipe,
+  pretitleRecipe,
   pretitleSpacingAt,
-  subtitle,
+  subtitleRecipe,
   subtitleSpacingAt,
 } from './heading.css';
 
 export const headingRootResponsive = responsiveRecipe({
-  recipe: headingRoot,
+  recipe: headingRootRecipe,
   at: { align: alignAt },
   order: defaultOrder,
 });
 
 export const pretitleResponsive = responsiveRecipe({
-  recipe: pretitle,
+  recipe: pretitleRecipe,
   at: { spacing: pretitleSpacingAt },
   order: defaultOrder,
 });
 
 export const subtitleResponsive = responsiveRecipe({
-  recipe: subtitle,
+  recipe: subtitleRecipe,
   at: { spacing: subtitleSpacingAt },
   order: defaultOrder,
 });

package/src/components/heading/heading.tsx

@@ -1,5 +1,4 @@
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
-import { clsx } from 'clsx';
 import { ElementType, ReactElement, ReactNode } from 'react';
 
 import { Spacing, TypographySize, TypographyVariant } from '../../styles';
@@ -84,7 +83,7 @@ export function Heading<TUse extends HeadingTypes>(props: HeadingProps<TUse>) {
       ref={ref}
       use={'hgroup'}
       condition={!!pretitle || !!subtitle}
-      className={clsx(headingRootResponsive({ align }), rootClassName)}
+      className={headingRootResponsive({ align }, rootClassName)}
     >
       {pretitle}
 
@@ -123,7 +122,7 @@ Heading.Pretitle = function HeadingPretitle({
         use="p"
         variant={variant}
         size={size}
-        className={clsx(pretitleResponsive({ spacing }), className)}
+        className={pretitleResponsive({ spacing }, className)}
         {...rest}
       >
         {children}
@@ -151,7 +150,7 @@ Heading.Subtitle = function HeadingSubtitle({
         use="p"
         variant={variant}
         size={size}
-        className={clsx(subtitleResponsive({ spacing }), className)}
+        className={subtitleResponsive({ spacing }, className)}
         {...rest}
       >
         {children}

package/src/components/heading/index.ts

@@ -5,4 +5,4 @@ export {
   type HeadingSubtitleProps,
   type HeadingPretitleProps,
 } from './heading';
-export { headingRoot, type HeadingRootVariants } from './heading.css';
+export { headingRootRecipe, type HeadingRootVariants } from './heading.css';

package/src/components/input/index.ts

@@ -1,2 +1,5 @@
 export { Input, type InputProps } from './input';
-export { inputAppearance, type InputAppearanceVariants } from './input.css';
+export {
+  inputAppearanceRecipe,
+  type InputAppearanceVariants,
+} from './input.css';

package/src/components/input/input-wrapper.tsx

@@ -1,4 +1,3 @@
-import { clsx } from 'clsx';
 import {
   ComponentPropsWithRef,
   ForwardedRef,
@@ -9,17 +8,22 @@ import {
 } from 'react';
 
 import {
-  inputAppearance,
-  InputAppearanceVariants,
-  inputWrapper,
-} from './input.css';
+  buildTypographyOverrides,
+  mapResponsiveSizeToTypography,
+  type Responsive,
+} from '../../styles';
+
+import { InputAppearanceVariants, inputWrapper } from './input.css';
+import { inputAppearanceResponsive } from './input.responsive';
 
 export type InputWrapperProps = ComponentPropsWithRef<'div'> & {
   children: ReactNode;
   className?: string;
   inputRef: RefObject<HTMLInputElement | null>;
   disabled?: boolean;
-} & InputAppearanceVariants;
+} & Omit<InputAppearanceVariants, 'size'> & {
+    size?: Responsive<NonNullable<InputAppearanceVariants['size']>>;
+  };
 
 export function InputWrapper({
   children,
@@ -28,8 +32,15 @@ export function InputWrapper({
   disabled,
   variant = 'outlined',
   size = 'md',
+  tone = 'neutral',
   ref,
 }: InputWrapperProps) {
+  const typographySize = mapResponsiveSizeToTypography(size);
+  const typographyOverrides = buildTypographyOverrides({
+    variant: 'body',
+    size: typographySize,
+  });
+
   const handleInputFocus = useCallback<MouseEventHandler<HTMLElement>>(
     (e) => {
       if (disabled || !inputRef?.current || e.target === inputRef.current) {
@@ -45,8 +56,9 @@ export function InputWrapper({
   return (
     <div
       ref={ref as ForwardedRef<HTMLDivElement>}
-      className={clsx(
-        inputAppearance({ variant, size }),
+      className={inputAppearanceResponsive(
+        { variant, size, tone },
+        typographyOverrides,
         inputWrapper,
         className,
       )}

package/src/components/input/input.css.ts

@@ -3,13 +3,19 @@ import {
   globalStyle,
   createThemeContract,
   assignVars,
-  fallbackVar,
+  type StyleRule,
 } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys, transition, typography } from '../../styles';
+import {
+  createToneAssignments,
+  createToneStyles,
+  createResponsiveVariants,
+  defaultMedia,
+  sys,
+  transition,
+} from '../../styles';
 import { components } from '../../styles/layers.css';
-import { formFieldVars } from '../form-field';
 
 export const inputVars = createThemeContract({
   color: {
@@ -28,7 +34,95 @@ export const inputVars = createThemeContract({
   },
 });
 
-export const inputAppearance = recipe({
+const inputToneVars = createThemeContract({
+  base: null,
+  onBase: null,
+});
+
+const inputColorDefaults = assignVars(inputVars.color, {
+  foreground: sys.surface.foreground,
+  background: sys.surface.background,
+  outline: sys.surface.foreground,
+});
+
+const inputToneAssignments = createToneAssignments(inputToneVars);
+const inputToneDefaults = inputToneAssignments.neutral;
+
+const inputToneStyles = createToneStyles(inputToneVars, ({ base }) => ({
+  ...inputColorDefaults,
+  [inputVars.color.foreground]: base,
+  [inputVars.color.outline]: base,
+}));
+
+const inputSizeStyles = {
+  sm: {
+    '@layer': {
+      [components]: {
+        fontFamily: sys.typography.body.small.font,
+        fontWeight: sys.typography.body.small.weight,
+        lineHeight: sys.typography.body.small.lineHeight,
+        letterSpacing: sys.typography.body.small.tracking,
+        /**
+         * Force the font size to 16px to avoid zooming on mobile
+         */
+        fontSize: `max(16px, ${sys.typography.body.small.size})`,
+
+        vars: {
+          ...assignVars(inputVars.spacing, {
+            block: sys.spacing[1],
+            inline: sys.spacing[1],
+          }),
+        },
+      },
+    },
+  },
+
+  md: {
+    '@layer': {
+      [components]: {
+        fontFamily: sys.typography.body.medium.font,
+        fontWeight: sys.typography.body.medium.weight,
+        lineHeight: sys.typography.body.medium.lineHeight,
+        letterSpacing: sys.typography.body.medium.tracking,
+        /**
+         * Force the font size to 16px to avoid zooming on mobile
+         */
+        fontSize: `max(16px, ${sys.typography.body.medium.size})`,
+
+        vars: {
+          ...assignVars(inputVars.spacing, {
+            block: sys.spacing[2],
+            inline: sys.spacing[2],
+          }),
+        },
+      },
+    },
+  },
+
+  lg: {
+    '@layer': {
+      [components]: {
+        fontFamily: sys.typography.body.large.font,
+        fontWeight: sys.typography.body.large.weight,
+        lineHeight: sys.typography.body.large.lineHeight,
+        letterSpacing: sys.typography.body.large.tracking,
+        /**
+         * Force the font size to 16px to avoid zooming on mobile
+         */
+        fontSize: `max(16px, ${sys.typography.body.large.size})`,
+
+        vars: {
+          ...assignVars(inputVars.spacing, {
+            block: sys.spacing[3],
+            inline: sys.spacing[3],
+          }),
+        },
+      },
+    },
+  },
+} satisfies Record<'sm' | 'md' | 'lg', StyleRule | StyleRule[]>;
+
+export const inputAppearanceRecipe = recipe({
   base: [
     {
       '@layer': {
@@ -52,11 +146,13 @@ export const inputAppearance = recipe({
 
           selectors: {
             '&:disabled, &:has(:disabled)': {
-              backgroundColor: `color-mix(in srgb, ${inputVars.color.foreground} calc(${sys.state.muted.dark} * 100%), transparent)`,
+              backgroundColor: `color-mix(in srgb, ${inputToneVars.base} calc(${sys.state.disabled.background} * 100%), transparent)`,
 
               vars: {
                 [inputVars.color.foreground]:
-                  `color(from ${sys.color.foreground} srgb r g b / 0.38)`,
+                  `color-mix(in srgb, ${inputToneVars.base} calc(${sys.state.disabled.text} * 100%), transparent)`,
+                [inputVars.color.outline]:
+                  `color-mix(in srgb, ${inputToneVars.base} calc(${sys.state.disabled.border} * 100%), transparent)`,
               },
             },
 
@@ -67,36 +163,23 @@ export const inputAppearance = recipe({
 
             '&[aria-invalid], &:has([aria-invalid])': {
               vars: {
-                [inputVars.color.foreground]: fallbackVar(
-                  formFieldVars.color.foreground,
-                  'red',
-                ),
+                ...inputColorDefaults,
+                [inputVars.color.foreground]: sys.tone.destructive,
+                [inputVars.color.outline]: sys.tone.destructive,
+                ...inputToneAssignments.destructive,
               },
             },
           },
 
           vars: {
-            ...assignVars(inputVars.color, {
-              foreground: fallbackVar(
-                formFieldVars.color.foreground,
-                sys.color.foreground,
-              ),
-              background: fallbackVar(
-                formFieldVars.color.background,
-                sys.color.background,
-                'transparent',
-              ),
-              outline: fallbackVar(
-                formFieldVars.color.outline,
-                sys.color.foreground,
-              ),
-            }),
-
+            ...inputColorDefaults,
+            [inputVars.color.foreground]: inputToneVars.base,
+            [inputVars.color.outline]: inputToneVars.base,
+            ...inputToneDefaults,
             ...assignVars(inputVars.spacing, {
               block: sys.spacing[2],
               inline: sys.spacing[4],
             }),
-
             ...assignVars(inputVars.shape, {
               corner: sys.shape.corner.none,
             }),
@@ -132,7 +215,7 @@ export const inputAppearance = recipe({
 
             vars: {
               [inputVars.color.background]:
-                `color-mix(in srgb, ${inputVars.color.foreground} calc(${sys.state.muted.dark} * 100%), transparent)`,
+                `color-mix(in srgb, ${inputVars.color.foreground} calc(${sys.state.muted.surface} * 100%), transparent)`,
             },
           },
         },
@@ -141,75 +224,15 @@ export const inputAppearance = recipe({
       bare: {},
     },
 
-    size: {
-      sm: [
-        typography.body.small,
-        {
-          '@layer': {
-            [components]: {
-              /**
-               * Force the font size to 16px to avoid zooming on mobile
-               */
-              fontSize: `max(16px, ${sys.typography.body.small.size})`,
+    tone: inputToneStyles,
 
-              vars: {
-                ...assignVars(inputVars.spacing, {
-                  block: sys.spacing[1],
-                  inline: sys.spacing[1],
-                }),
-              },
-            },
-          },
-        },
-      ],
-
-      md: [
-        typography.body.medium,
-        {
-          '@layer': {
-            [components]: {
-              /**
-               * Force the font size to 16px to avoid zooming on mobile
-               */
-              fontSize: `max(16px, ${sys.typography.body.medium.size})`,
-
-              vars: {
-                ...assignVars(inputVars.spacing, {
-                  block: sys.spacing[2],
-                  inline: sys.spacing[2],
-                }),
-              },
-            },
-          },
-        },
-      ],
-
-      lg: [
-        typography.body.large,
-        {
-          '@layer': {
-            [components]: {
-              /**
-               * Force the font size to 16px to avoid zooming on mobile
-               */
-              fontSize: `max(16px, ${sys.typography.body.large.size})`,
-
-              vars: {
-                ...assignVars(inputVars.spacing, {
-                  block: sys.spacing[3],
-                  inline: sys.spacing[3],
-                }),
-              },
-            },
-          },
-        },
-      ],
-    },
+    size: inputSizeStyles,
   },
 
   defaultVariants: {
     variant: 'outlined',
     size: 'md',
+    tone: 'neutral',
   },
 });
 
@@ -267,7 +290,7 @@ export const inputAddornment = style({
 });
 
 globalStyle(
-  `${inputAppearance.classNames.base} input:is(:focus, :focus-visible)`,
+  `${inputAppearanceRecipe.classNames.base} input:is(:focus, :focus-visible)`,
   {
     '@layer': {
       [components]: {
@@ -278,5 +301,10 @@ globalStyle(
 );
 
 export type InputAppearanceVariants = NonNullable<
-  RecipeVariants<typeof inputAppearance>
+  RecipeVariants<typeof inputAppearanceRecipe>
 >;
+
+export const sizeAt = createResponsiveVariants({
+  styles: inputSizeStyles,
+  media: defaultMedia,
+});

package/src/components/input/input.responsive.ts

@@ -0,0 +1,9 @@
+import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
+
+import { inputAppearanceRecipe, sizeAt } from './input.css';
+
+export const inputAppearanceResponsive = responsiveRecipe({
+  recipe: inputAppearanceRecipe,
+  at: { size: sizeAt },
+  order: defaultOrder,
+});

package/src/components/input/input.tsx

@@ -9,11 +9,15 @@ import { useFormFieldContext } from '../form-field/form-field-context';
 import { InputWrapper } from './input-wrapper';
 import { InputAppearanceVariants, input, inputAddornment } from './input.css';
 
+import type { Responsive } from '../../styles';
+
 export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
   startAdornment?: ReactNode;
   endAdornment?: ReactNode;
   inputRef?: RefObject<HTMLInputElement>;
-} & InputAppearanceVariants;
+} & Omit<InputAppearanceVariants, 'size'> & {
+    size?: Responsive<NonNullable<InputAppearanceVariants['size']>>;
+  };
 
 export function Input({
   className,
@@ -25,6 +29,7 @@ export function Input({
   children,
   variant,
   size,
+  tone,
   ref,
   ...props
 }: InputProps) {
@@ -38,6 +43,7 @@ export function Input({
       disabled={disabled}
       variant={variant}
       size={size}
+      tone={tone}
     >
       {startAdornment && (
         <div className={inputAddornment}>{startAdornment}</div>

package/src/components/label/label.css.ts

@@ -3,7 +3,7 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { typography } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const label = recipe({
+export const labelRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
@@ -34,4 +34,4 @@ export const label = recipe({
   },
 });
 
-export type LabelVariants = NonNullable<RecipeVariants<typeof label>>;
+export type LabelVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;

package/src/components/label/label.tsx

@@ -1,11 +1,20 @@
 import { clsx } from 'clsx';
 import { ComponentPropsWithRef } from 'react';
 
-import { label, LabelVariants } from './label.css';
+import {
+  buildTypographyOverrides,
+  getResponsiveBase,
+  mapResponsiveSizeToTypography,
+  type Responsive,
+} from '../../styles';
+
+import { labelRecipe, LabelVariants } from './label.css';
 
 export type LabelProps = ComponentPropsWithRef<'label'> & {
   required?: boolean;
-} & LabelVariants;
+} & Omit<LabelVariants, 'size'> & {
+    size?: Responsive<NonNullable<LabelVariants['size']>>;
+  };
 
 export function Label({
   className,
@@ -14,9 +23,20 @@ export function Label({
   size = 'md',
   ...props
 }: LabelProps) {
+  const baseSize = getResponsiveBase(size) ?? 'md';
+  const typographySize = mapResponsiveSizeToTypography(size);
+  const typographyOverrides = buildTypographyOverrides({
+    variant: 'label',
+    size: typographySize,
+  });
+
   return (
     <label
-      className={clsx(label({ disabled, error, size }), className)}
+      className={clsx(
+        labelRecipe({ disabled, error, size: baseSize }),
+        typographyOverrides,
+        className,
+      )}
       {...props}
     />
   );

package/src/components/layout-maps.ts

@@ -0,0 +1,120 @@
+import { assignVars, type StyleRule } from '@vanilla-extract/css';
+
+import { mapContractVars, sys } from '../styles';
+import { components } from '../styles/layers.css';
+
+interface GapVars {
+  gap: string;
+}
+
+export const createSpacingVarStyles = (
+  vars: GapVars,
+  property?: 'gap' | 'columnGap' | 'rowGap',
+) =>
+  mapContractVars(sys.spacing, (key) => ({
+    '@layer': {
+      [components]: {
+        ...(property ? { [property]: vars.gap } : {}),
+        vars: assignVars(
+          vars as never,
+          {
+            gap: sys.spacing[key],
+          } as never,
+        ),
+      },
+    },
+  }));
+
+const createLayeredStyleMap = <T extends string>(
+  property: string,
+  values: Record<T, string>,
+) =>
+  Object.fromEntries(
+    Object.entries(values).map(([key, value]) => [
+      key,
+      {
+        '@layer': {
+          [components]: {
+            [property]: value,
+          },
+        },
+      },
+    ]),
+  ) as Record<T, StyleRule>;
+
+const flexAlignItemsValues = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+} as const;
+
+const flexAlignItemsBaselineValues = {
+  ...flexAlignItemsValues,
+  baseline: 'baseline',
+} as const;
+
+const flexJustifyContentValues = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+  spaceBetween: 'space-between',
+  spaceAround: 'space-around',
+  spaceEvenly: 'space-evenly',
+} as const;
+
+const gridAxisValues = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  stretch: 'stretch',
+} as const;
+
+const gridContentValues = {
+  start: 'start',
+  end: 'end',
+  center: 'center',
+  spaceBetween: 'space-between',
+  spaceAround: 'space-around',
+  spaceEvenly: 'space-evenly',
+} as const;
+
+const gridContentStretchValues = {
+  ...gridContentValues,
+  stretch: 'stretch',
+} as const;
+
+export const flexAlignItemsStyles = createLayeredStyleMap(
+  'alignItems',
+  flexAlignItemsValues,
+);
+
+export const flexAlignItemsWithBaselineStyles = createLayeredStyleMap(
+  'alignItems',
+  flexAlignItemsBaselineValues,
+);
+
+export const flexJustifyContentStyles = createLayeredStyleMap(
+  'justifyContent',
+  flexJustifyContentValues,
+);
+
+export const gridAlignItemsStyles = createLayeredStyleMap(
+  'alignItems',
+  gridAxisValues,
+);
+
+export const gridJustifyItemsStyles = createLayeredStyleMap(
+  'justifyItems',
+  gridAxisValues,
+);
+
+export const gridJustifyContentStyles = createLayeredStyleMap(
+  'justifyContent',
+  gridContentValues,
+);
+
+export const gridAlignContentStyles = createLayeredStyleMap(
+  'alignContent',
+  gridContentStretchValues,
+);

package/src/components/loader/index.ts

@@ -1 +1,2 @@
-export { MoonLoader } from './moon-loader';
+export { MoonLoader, type LoaderProps } from './moon-loader';
+export type { LoaderVariants, MoonLoaderVariants } from './loader.css';