@kalink-ui/seedly 0.34.3 → 0.35.0

package/src/components/command/command-group.css.ts

@@ -1,11 +1,11 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { globalStyle } from '@vanilla-extract/css';
+import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { sys, typography } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const commandGroup = style([
-  typography.label.small,
-  {
+export const commandGroupRecipe = recipe({
+  base: {
     '@layer': {
       [components]: {
         display: 'flex',
@@ -22,17 +22,33 @@ export const commandGroup = style([
       },
     },
   },
-]);
 
-globalStyle(`${commandGroup} [cmdk-group-heading]`, {
+  variants: {
+    size: {
+      sm: typography.label.small,
+      md: typography.label.medium,
+      lg: typography.label.large,
+    },
+  },
+
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+globalStyle(`${commandGroupRecipe.classNames.base} [cmdk-group-heading]`, {
   '@layer': {
     [components]: {
       position: 'relative',
 
-      color: `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.muted.light} * 100%), transparent)`,
+      color: `color-mix(in srgb, ${sys.surface.foreground} calc(${sys.state.muted.text} * 100%), transparent)`,
 
       cursor: 'default',
       userSelect: 'none',
     },
   },
 });
+
+export type CommandGroupVariants = NonNullable<
+  RecipeVariants<typeof commandGroupRecipe>
+>;

package/src/components/command/command-group.tsx

@@ -4,15 +4,39 @@ import { clsx } from 'clsx';
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentPropsWithRef } from 'react';
 
-import { commandGroup } from './command-group.css';
+import {
+  buildTypographyOverrides,
+  getResponsiveBase,
+  mapResponsiveSizeToTypography,
+  type Responsive,
+} from '../../styles';
+
+import {
+  commandGroupRecipe,
+  type CommandGroupVariants,
+} from './command-group.css';
+
+export type CommandGroupProps = ComponentPropsWithRef<
+  typeof CommandPrimitive.Group
+> & {
+  size?: Responsive<NonNullable<CommandGroupVariants['size']>>;
+};
+
+export function CommandGroup({ className, size, ...props }: CommandGroupProps) {
+  const baseSize = getResponsiveBase(size) ?? 'sm';
+  const typographySize = mapResponsiveSizeToTypography(size);
+  const typographyOverrides = buildTypographyOverrides({
+    variant: 'label',
+    size: typographySize,
+  });
 
-export function CommandGroup({
-  className,
-  ...props
-}: ComponentPropsWithRef<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
-      className={clsx(commandGroup, className)}
+      className={clsx(
+        commandGroupRecipe({ size: baseSize }),
+        typographyOverrides,
+        className,
+      )}
       {...props}
     />
   );

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

@@ -23,13 +23,13 @@ export const commandInputWrapper = style({
           boxShadow: 'unset',
 
           vars: {
-            [outlineColor]: sys.color.foreground,
+            [outlineColor]: sys.surface.foreground,
           },
         },
       },
 
       vars: {
-        [outlineColor]: sys.color.foreground,
+        [outlineColor]: sys.surface.foreground,
       },
     },
   },

package/src/components/command/command-item.tsx

@@ -4,14 +4,25 @@ import { clsx } from 'clsx';
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentPropsWithRef, ComponentType } from 'react';
 
+import {
+  buildTypographyOverrides,
+  getResponsiveBase,
+  mapResponsiveSizeToTypography,
+  type Responsive,
+  type Tone,
+} from '../../styles';
 import { Cluster } from '../cluster';
-import { menuItem, menuItemIcon } from '../menu/menu-item.css';
+import { menuItemRecipe, menuItemIcon } from '../menu/menu-item.css';
+
+import type { MenuItemVariants } from '../menu/menu-item.css';
 
 export type CommandItemProps = ComponentPropsWithRef<
   typeof CommandPrimitive.Item
 > & {
   inset?: boolean;
   icon?: ComponentType<{ className?: string }>;
+  tone?: Tone;
+  size?: Responsive<NonNullable<MenuItemVariants['size']>>;
 };
 
 export function CommandItem({
@@ -19,11 +30,24 @@ export function CommandItem({
   inset,
   icon: IconComp,
   children,
+  tone,
+  size,
   ...props
 }: CommandItemProps) {
+  const baseSize = getResponsiveBase(size) ?? 'md';
+  const typographySize = mapResponsiveSizeToTypography(size);
+  const typographyOverrides = buildTypographyOverrides({
+    variant: 'body',
+    size: typographySize,
+  });
+
   return (
     <CommandPrimitive.Item
-      className={clsx(menuItem({ inset }), className)}
+      className={clsx(
+        menuItemRecipe({ inset, tone, size: baseSize }),
+        typographyOverrides,
+        className,
+      )}
       {...props}
     >
       <Cluster spacing={2} align="center">

package/src/components/command/command-list.css.ts

@@ -23,7 +23,7 @@ export const commandListSpacingStyles = mapContractVars(sys.spacing, (key) => ({
   },
 }));
 
-export const commandList = recipe({
+export const commandListRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
@@ -48,7 +48,7 @@ export const commandList = recipe({
   },
 });
 
-globalStyle(`${commandList.classNames.base} [cmdk-list-sizer]`, {
+globalStyle(`${commandListRecipe.classNames.base} [cmdk-list-sizer]`, {
   '@layer': {
     [components]: {
       display: 'flex',

package/src/components/command/command-list.responsive.ts

@@ -1,9 +1,9 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { commandList, spacingAt } from './command-list.css';
+import { commandListRecipe, spacingAt } from './command-list.css';
 
 export const commandListResponsive = responsiveRecipe({
-  recipe: commandList,
+  recipe: commandListRecipe,
   at: { spacing: spacingAt },
   order: defaultOrder,
 });

package/src/components/command/command-list.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { clsx } from 'clsx';
 import { Command as CommandPrimitive } from 'cmdk';
 import { ComponentPropsWithRef } from 'react';
 
@@ -19,7 +18,7 @@ export function CommandList({
 }: CommandListProps) {
   return (
     <CommandPrimitive.List
-      className={clsx(commandListResponsive({ spacing }), className)}
+      className={commandListResponsive({ spacing }, className)}
       asChild
       {...props}
     />

package/src/components/command/command-separator.tsx

@@ -6,7 +6,7 @@ import { ComponentPropsWithRef } from 'react';
 
 import {
   MenuSeparatorVariants,
-  menuSeparator,
+  menuSeparatorRecipe,
 } from '../menu/menu-separator.css';
 
 export type CommandSeparatorProps = ComponentPropsWithRef<
@@ -20,9 +20,11 @@ export function CommandSeparator({
   ...props
 }: CommandSeparatorProps) {
   return (
-    <CommandPrimitive.Separator
-      className={clsx(menuSeparator({ offset }), className)}
-      {...props}
-    />
+    <CommandPrimitive.Separator {...props} asChild>
+      <div
+        className={clsx(menuSeparatorRecipe({ offset }), className)}
+        role="presentation"
+      />
+    </CommandPrimitive.Separator>
   );
 }

package/src/components/cover/cover.css.ts

@@ -1,23 +1,43 @@
-import { createVar, globalStyle } from '@vanilla-extract/css';
+import {
+  assignVars,
+  createThemeContract,
+  globalStyle,
+} from '@vanilla-extract/css';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import {
   createResponsiveVariants,
   defaultMedia,
-  sys,
   mapContractVars,
+  sys,
 } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-const spaceVar = createVar();
-export const minSizeVar = createVar();
+export const coverVars = createThemeContract({
+  spacing: {
+    block: null,
+  },
+  layout: {
+    minBlockSize: null,
+  },
+});
+
+const coverSpacingDefaults = assignVars(coverVars.spacing, {
+  block: sys.spacing[0],
+});
+
+const coverLayoutDefaults = assignVars(coverVars.layout, {
+  minBlockSize: '100vh',
+});
 
 // Shared variant style maps so we can reuse them for responsive overrides
 export const coverSpacingStyles = mapContractVars(sys.spacing, (key) => ({
   '@layer': {
     [components]: {
       vars: {
-        [spaceVar]: sys.spacing[key],
+        ...assignVars(coverVars.spacing, {
+          block: sys.spacing[key],
+        }),
       },
     },
   },
@@ -30,10 +50,11 @@ export const coverRecipe = recipe({
         display: 'flex',
         flexDirection: 'column',
 
-        minBlockSize: minSizeVar,
+        minBlockSize: coverVars.layout.minBlockSize,
 
         vars: {
-          [minSizeVar]: '100vh',
+          ...coverSpacingDefaults,
+          ...coverLayoutDefaults,
         },
       },
     },
@@ -50,7 +71,7 @@ export const coverRecipe = recipe({
 globalStyle(`${coverRecipe.classNames.base} > *`, {
   '@layer': {
     [components]: {
-      marginBlock: spaceVar,
+      marginBlock: coverVars.spacing.block,
     },
   },
 });

package/src/components/cover/cover.tsx

@@ -2,22 +2,22 @@
 
 import { PolymorphicComponentProps } from '@kalink-ui/dibbly';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
-import { CoverVariants, minSizeVar } from './cover.css';
+import { coverVars, CoverVariants } from './cover.css';
 import { coverResponsive } from './cover.responsive';
 
 import type { Responsive } from '../../styles/responsive';
 
-type CoverProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
-  Omit<CoverVariants, 'spacing'> & {
-    /**
-     * The minimum height of the cover
-     */
-    minSize?: string;
-    spacing?: Responsive<NonNullable<CoverVariants['spacing']>>;
-  };
+export type CoverProps<TUse extends ElementType> =
+  PolymorphicComponentProps<TUse> &
+    Omit<CoverVariants, 'spacing'> & {
+      /**
+       * The minimum height of the cover
+       */
+      minSize?: string;
+      spacing?: Responsive<NonNullable<CoverVariants['spacing']>>;
+    };
 
 /**
  * A custom element for covering a block-level element horizontally,
@@ -28,7 +28,7 @@ type CoverProps<TUse extends ElementType> = PolymorphicComponentProps<TUse> &
  *
  * https://every-layout.dev/layouts/cover
  */
-export function Cover<TUse extends ElementType>({
+export function Cover<TUse extends ElementType = 'div'>({
   spacing,
   minSize,
   className,
@@ -38,9 +38,9 @@ export function Cover<TUse extends ElementType>({
 
   return (
     <Comp
-      className={clsx(coverResponsive({ spacing }), className)}
+      className={coverResponsive({ spacing }, className)}
       style={assignInlineVars({
-        ...(minSize && { [minSizeVar]: minSize }),
+        ...(minSize && { [coverVars.layout.minBlockSize]: minSize }),
       })}
       {...rest}
     />

package/src/components/cover/index.ts

@@ -1,2 +1,2 @@
-export { Cover } from './cover';
-export { coverRecipe, minSizeVar, type CoverVariants } from './cover.css';
+export { Cover, type CoverProps } from './cover';
+export { coverRecipe, coverVars, type CoverVariants } from './cover.css';

package/src/components/divider/divider.css.ts

@@ -1,11 +1,16 @@
 import { style } from '@vanilla-extract/css';
 
 import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
 
 export const divider = style({
-  height: 1,
-  width: '100%',
+  '@layer': {
+    [components]: {
+      height: 1,
+      width: '100%',
 
-  border: 'none',
-  backgroundColor: sys.color.foreground,
+      border: 'none',
+      backgroundColor: sys.surface.foreground,
+    },
+  },
 });

package/src/components/form-field/form-field-context.ts

@@ -2,6 +2,8 @@
 
 import { createRequiredContext } from '@kalink-ui/dibbly';
 
+import type { Tone } from '../../styles';
+
 interface FormFieldContext {
   name: string;
   registerMessageId: (id: string) => void;
@@ -12,6 +14,7 @@ interface FormFieldContext {
   label: string;
   disabled?: boolean;
   hideLabel: boolean;
+  tone?: Tone;
 }
 
 export const [useFormFieldContext, FormFieldContextProvider] =

package/src/components/form-field/form-field-item.tsx

@@ -6,7 +6,7 @@ import { ElementType, useId } from 'react';
 
 import { useFormFieldContext } from './form-field-context';
 import { FormFieldItemContextProvider } from './form-field-item-context';
-import { formFieldStyle } from './form-field.css';
+import { formFieldRecipe } from './form-field.css';
 
 export type FormFieldItemProps<TUse extends ElementType = 'div'> =
   PolymorphicComponentProps<TUse>;
@@ -15,7 +15,7 @@ export function FormFieldItem<TUse extends ElementType = 'div'>(
   props: FormFieldItemProps<TUse>,
 ) {
   const id = useId();
-  const { errors, disabled } = useFormFieldContext();
+  const { errors, disabled, tone } = useFormFieldContext();
 
   const { use: Comp = 'div', className, children, ...rest } = props;
 
@@ -23,7 +23,7 @@ export function FormFieldItem<TUse extends ElementType = 'div'>(
     <FormFieldItemContextProvider value={{ id }}>
       <Comp
         className={clsx(
-          formFieldStyle({ error: !!errors, disabled }),
+          formFieldRecipe({ error: !!errors, disabled, tone }),
           className,
         )}
         {...rest}

package/src/components/form-field/form-field-message.tsx

@@ -1,13 +1,25 @@
 'use client';
 
+import { clsx } from 'clsx';
 import { HTMLAttributes, useEffect } from 'react';
 
+import {
+  buildTypographyOverrides,
+  getResponsiveBase,
+  mapResponsiveSizeToTypography,
+  type Responsive,
+} from '../../styles';
+
 import { useFormFieldContext } from './form-field-context';
-import { formFieldMessageStyle } from './form-field.css';
+import {
+  formFieldMessageRecipe,
+  type FormFieldMessageVariants,
+} from './form-field.css';
 
 export type FormFieldMessageProps = HTMLAttributes<HTMLDivElement> & {
   id: string;
   error?: boolean;
+  size?: Responsive<NonNullable<FormFieldMessageVariants['size']>>;
 };
 
 export function FormFieldMessage({
@@ -15,9 +27,11 @@ export function FormFieldMessage({
   children,
   id,
   error,
+  size,
   ...props
 }: FormFieldMessageProps) {
-  const { registerMessageId, unRegisterMessageId } = useFormFieldContext();
+  const { registerMessageId, unRegisterMessageId, tone, errors } =
+    useFormFieldContext();
 
   useEffect(() => {
     registerMessageId(id);
@@ -25,8 +39,25 @@ export function FormFieldMessage({
     return () => unRegisterMessageId(id);
   }, [id, registerMessageId, unRegisterMessageId]);
 
+  const messageColor = error || errors ? 'destructive' : (tone ?? 'neutral');
+  const baseSize = getResponsiveBase(size) ?? 'sm';
+  const typographySize = mapResponsiveSizeToTypography(size);
+  const typographyOverrides = buildTypographyOverrides({
+    variant: 'body',
+    size: typographySize,
+  });
+
   return (
-    <div id={id} className={formFieldMessageStyle} {...props}>
+    <div
+      id={id}
+      className={clsx(
+        formFieldMessageRecipe({ size: baseSize }),
+        typographyOverrides,
+        className,
+      )}
+      data-tone={messageColor}
+      {...props}
+    >
       {children}
     </div>
   );

package/src/components/form-field/form-field.css.ts

@@ -1,7 +1,12 @@
-import { assignVars, createThemeContract, style } from '@vanilla-extract/css';
+import { assignVars, createThemeContract } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { sys, typography } from '../../styles';
+import {
+  createToneAssignments,
+  createToneStyles,
+  sys,
+  typography,
+} from '../../styles';
 import { components } from '../../styles/layers.css';
 
 export const formFieldVars = createThemeContract({
@@ -16,7 +21,20 @@ export const formFieldVars = createThemeContract({
   },
 });
 
-export const formFieldStyle = recipe({
+const formFieldToneVars = createThemeContract({
+  base: null,
+  onBase: null,
+});
+
+const formFieldToneAssignments = createToneAssignments(formFieldToneVars);
+const formFieldToneDefaults = formFieldToneAssignments.neutral;
+
+const formFieldToneStyles = createToneStyles(formFieldToneVars, ({ base }) => ({
+  [formFieldVars.color.foreground]: base,
+  [formFieldVars.color.outline]: base,
+}));
+
+export const formFieldRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
@@ -31,11 +49,11 @@ export const formFieldStyle = recipe({
 
         vars: {
           ...assignVars(formFieldVars.color, {
-            foreground: sys.color.foreground,
-            background: sys.color.background,
-            outline: sys.color.foreground,
+            foreground: sys.surface.foreground,
+            background: sys.surface.background,
+            outline: sys.surface.foreground,
           }),
-
+          ...formFieldToneDefaults,
           ...assignVars(formFieldVars.spacing, {
             vertical: sys.spacing[2],
           }),
@@ -47,13 +65,17 @@ export const formFieldStyle = recipe({
 
             vars: {
               [formFieldVars.color.foreground]:
-                `color-mix(in srgb, ${sys.color.foreground} calc(${sys.state.muted.light} * 75%), transparent)`,
+                `color-mix(in srgb, ${sys.surface.foreground} calc(${sys.state.disabled.text} * 100%), transparent)`,
+              [formFieldVars.color.outline]:
+                `color-mix(in srgb, ${sys.surface.foreground} calc(${sys.state.disabled.border} * 100%), transparent)`,
             },
           },
 
           '&[aria-invalid], &:has([aria-invalid])': {
             vars: {
-              [formFieldVars.color.foreground]: '#d80000',
+              [formFieldVars.color.foreground]: sys.tone.destructive,
+              [formFieldVars.color.outline]: sys.tone.destructive,
+              ...formFieldToneAssignments.destructive,
             },
           },
         },
@@ -62,12 +84,16 @@ export const formFieldStyle = recipe({
   },
 
   variants: {
+    tone: formFieldToneStyles,
+
     error: {
       true: {
         '@layer': {
           [components]: {
             vars: {
-              [formFieldVars.color.foreground]: '#d80000',
+              [formFieldVars.color.foreground]: sys.tone.destructive,
+              [formFieldVars.color.outline]: sys.tone.destructive,
+              ...formFieldToneAssignments.destructive,
             },
           },
         },
@@ -82,26 +108,62 @@ export const formFieldStyle = recipe({
 
             vars: {
               [formFieldVars.color.foreground]:
-                `color(from ${sys.color.foreground} srgb r g b / ${sys.state.muted.light})`,
+                `color-mix(in srgb, ${sys.surface.foreground} calc(${sys.state.disabled.text} * 100%), transparent)`,
+              [formFieldVars.color.outline]:
+                `color-mix(in srgb, ${sys.surface.foreground} calc(${sys.state.disabled.border} * 100%), transparent)`,
             },
           },
         },
       },
     },
   },
+
+  defaultVariants: {
+    tone: 'neutral',
+  },
 });
 
-export const formFieldMessageStyle = style([
-  typography.body.small,
-  {
+export const formFieldMessageRecipe = recipe({
+  base: {
     '@layer': {
       [components]: {
         display: 'block',
+
+        selectors: {
+          '&[data-tone="neutral"]': {
+            color: sys.tone.neutral,
+          },
+          '&[data-tone="primary"]': {
+            color: sys.tone.primary,
+          },
+          '&[data-tone="destructive"]': {
+            color: sys.tone.destructive,
+          },
+          '&[data-tone="success"]': {
+            color: sys.tone.success,
+          },
+        },
       },
     },
   },
-]);
+
+  variants: {
+    size: {
+      sm: typography.body.small,
+      md: typography.body.medium,
+      lg: typography.body.large,
+    },
+  },
+
+  defaultVariants: {
+    size: 'sm',
+  },
+});
 
 export type FormFieldVariants = NonNullable<
-  RecipeVariants<typeof formFieldStyle>
+  RecipeVariants<typeof formFieldRecipe>
+>;
+
+export type FormFieldMessageVariants = NonNullable<
+  RecipeVariants<typeof formFieldMessageRecipe>
 >;