@kalink-ui/seedly 0.34.3 → 0.35.0

package/src/components/loader/loader.css.ts

@@ -8,21 +8,30 @@ import {
   sys,
   transition,
 } from '../../styles';
+import { components } from '../../styles/layers.css';
 
-export const loader = recipe({
+export const loaderRecipe = recipe({
   variants: {
     active: {
       true: {
-        opacity: 1,
-        visibility: 'visible',
-
-        animationPlayState: 'running',
+        '@layer': {
+          [components]: {
+            opacity: 1,
+            visibility: 'visible',
+
+            animationPlayState: 'running',
+          },
+        },
       },
       false: {
-        opacity: 0,
-        visibility: 'hidden',
-
-        animationPlayState: 'paused',
+        '@layer': {
+          [components]: {
+            opacity: 0,
+            visibility: 'hidden',
+
+            animationPlayState: 'paused',
+          },
+        },
       },
     },
   },
@@ -40,80 +49,108 @@ const loaderAnimation = keyframes({
 // Shared size variant styles for responsive overrides
 const loaderWrapperSizeStyles = {
   sm: {
-    vars: {
-      [size]: sys.spacing[4],
+    '@layer': {
+      [components]: {
+        vars: {
+          [size]: sys.spacing[4],
+        },
+      },
     },
   },
   md: {
-    vars: {
-      [size]: sys.spacing[5],
+    '@layer': {
+      [components]: {
+        vars: {
+          [size]: sys.spacing[5],
+        },
+      },
     },
   },
   lg: {
-    vars: {
-      [size]: sys.spacing[6],
+    '@layer': {
+      [components]: {
+        vars: {
+          [size]: sys.spacing[6],
+        },
+      },
     },
   },
 } as const;
 
-export const loaderWrapper = recipe({
+export const loaderWrapperRecipe = recipe({
   base: {
-    overflow: 'hidden',
-    width: size,
-    height: size,
-
-    animationName: loaderAnimation,
-    animationDuration: '1s',
-    animationIterationCount: 'infinite',
-    animationTimingFunction: 'linear',
-    animationFillMode: 'forwards',
-
-    transition: transition(['opacity', 'visibility']),
-    pointerEvents: 'none',
-
-    vars: {
-      [moonSize]: calc.divide(size, 7),
+    '@layer': {
+      [components]: {
+        overflow: 'hidden',
+        width: size,
+        height: size,
+
+        animationName: loaderAnimation,
+        animationDuration: '1s',
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'linear',
+        animationFillMode: 'forwards',
+
+        transition: transition(['opacity', 'visibility']),
+        pointerEvents: 'none',
+
+        vars: {
+          [moonSize]: calc.divide(size, 7),
+        },
+      },
     },
   },
 
   variants: {
     size: loaderWrapperSizeStyles,
   },
+
+  defaultVariants: {
+    size: 'md',
+  },
 });
 
 export const ellipse = style({
-  width: size,
-  height: size,
-
-  position: 'absolute',
-  insetBlockStart: 0,
-  insetInlineStart: 0,
-
-  borderRadius: '100%',
-  borderWidth: moonSize,
-  borderStyle: 'solid',
-  borderColor: `color-mix(in srgb, ${sys.color.foreground} 30%, transparent)`,
+  '@layer': {
+    [components]: {
+      width: size,
+      height: size,
+
+      position: 'absolute',
+      insetBlockStart: 0,
+      insetInlineStart: 0,
+
+      borderRadius: '100%',
+      borderWidth: moonSize,
+      borderStyle: 'solid',
+      borderColor: `color-mix(in srgb, ${sys.surface.foreground} 30%, transparent)`,
+    },
+  },
 });
 
 export const moon = style({
-  width: moonSize,
-  height: moonSize,
+  '@layer': {
+    [components]: {
+      width: moonSize,
+      height: moonSize,
 
-  position: 'absolute',
-  insetBlockStart: calc.subtract(
-    calc.divide(size, 2),
-    calc.divide(moonSize, 2),
-  ),
-  insetInlineStart: 0,
+      position: 'absolute',
+      insetBlockStart: calc.subtract(
+        calc.divide(size, 2),
+        calc.divide(moonSize, 2),
+      ),
+      insetInlineStart: 0,
 
-  backgroundColor: sys.color.foreground,
+      backgroundColor: sys.surface.foreground,
 
-  borderRadius: '100%',
+      borderRadius: '100%',
+    },
+  },
 });
 
-export type LoaderVariants = NonNullable<RecipeVariants<typeof loader>>;
+export type LoaderVariants = NonNullable<RecipeVariants<typeof loaderRecipe>>;
 export type MoonLoaderVariants = NonNullable<
-  RecipeVariants<typeof loaderWrapper>
+  RecipeVariants<typeof loaderWrapperRecipe>
 >;
 
 export const sizeAt = createResponsiveVariants({

package/src/components/loader/moon-loader.responsive.ts

@@ -1,9 +1,9 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { loaderWrapper, sizeAt } from './loader.css';
+import { loaderWrapperRecipe, sizeAt } from './loader.css';
 
 export const moonLoaderResponsive = responsiveRecipe({
-  recipe: loaderWrapper,
+  recipe: loaderWrapperRecipe,
   at: { size: sizeAt },
   order: defaultOrder,
 });

package/src/components/loader/moon-loader.tsx

@@ -1,4 +1,3 @@
-import { clsx } from 'clsx';
 import { ElementType } from 'react';
 
 import { Box, BoxProps } from '../box';
@@ -6,7 +5,7 @@ import { Box, BoxProps } from '../box';
 import {
   ellipse,
   moon,
-  loader,
+  loaderRecipe,
   LoaderVariants,
   MoonLoaderVariants,
 } from './loader.css';
@@ -38,9 +37,9 @@ export function MoonLoader<TUse extends ElementType>({
 
   return (
     <Box
-      className={clsx(
-        moonLoaderResponsive({ size }),
-        loader({ active }),
+      className={moonLoaderResponsive(
+        { size },
+        loaderRecipe({ active }),
         className,
       )}
       {...props}

package/src/components/loader-overlay/loader-overlay.css.ts

@@ -3,7 +3,7 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { sys } from '../../styles';
 import { components } from '../../styles/layers.css';
 
-export const loaderOverlay = recipe({
+export const loaderOverlayRecipe = recipe({
   base: {
     '@layer': {
       [components]: {
@@ -16,7 +16,7 @@ export const loaderOverlay = recipe({
 
         zIndex: 1000,
 
-        backgroundColor: `color-mix(in srgb, ${sys.color.foreground} 5%, transparent)`,
+        backgroundColor: `color-mix(in srgb, ${sys.surface.foreground} 5%, transparent)`,
       },
     },
   },
@@ -44,5 +44,5 @@ export const loaderOverlay = recipe({
 });
 
 export type LoaderOverlayVariants = NonNullable<
-  RecipeVariants<typeof loaderOverlay>
+  RecipeVariants<typeof loaderOverlayRecipe>
 >;

package/src/components/loader-overlay/loader-overlay.tsx

@@ -6,7 +6,10 @@ import { MoonLoader } from '../loader';
 import { Stack, StackProps } from '../stack';
 import { Text } from '../text';
 
-import { loaderOverlay, LoaderOverlayVariants } from './loader-overlay.css';
+import {
+  loaderOverlayRecipe,
+  LoaderOverlayVariants,
+} from './loader-overlay.css';
 
 interface LoaderOverlayProps extends LoaderOverlayVariants {
   text?: string;
@@ -23,7 +26,7 @@ export function LoaderOverlay({
   return (
     <Box
       spacing={spacing}
-      className={clsx(loaderOverlay({ position }), className)}
+      className={clsx(loaderOverlayRecipe({ position }), className)}
     >
       <Stack use={Center} align="center" spacing={spacing} intrinsic andText>
         <MoonLoader active forceMount />

package/src/components/menu/index.ts

@@ -1,2 +1,2 @@
-export { menuItem, menuItemIcon } from './menu-item.css';
-export { menuSeparator } from './menu-separator.css';
+export { menuItemRecipe, menuItemIcon, menuItemVars } from './menu-item.css';
+export { menuSeparatorRecipe } from './menu-separator.css';

package/src/components/menu/menu-item.css.ts

@@ -1,79 +1,135 @@
-import { style } from '@vanilla-extract/css';
+import { assignVars, createThemeContract, style } 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 menuItemVars = createThemeContract({
+  color: {
+    foreground: null,
+    overlay: null,
+  },
+});
+
+const menuItemToneVars = createThemeContract({
+  base: null,
+  onBase: null,
+});
+
+const menuItemColorDefaults = assignVars(menuItemVars.color, {
+  foreground: sys.surface.foreground,
+  overlay: sys.surface.foreground,
+});
 
-export const menuItem = recipe({
-  base: [
-    typography.body.medium,
-    {
-      display: 'flex',
-      alignItems: 'center',
-      gap: sys.spacing[2],
+const menuItemToneAssignments = createToneAssignments(menuItemToneVars);
 
-      paddingInline: sys.spacing[2],
-      paddingBlock: sys.spacing[1],
-      width: '100%',
+const menuToneStyles = createToneStyles(menuItemToneVars, ({ base }) => ({
+  ...menuItemColorDefaults,
+  ...assignVars(menuItemVars.color, {
+    foreground: base,
+    overlay: base,
+  }),
+}));
 
-      position: 'relative',
+export const menuItemRecipe = recipe({
+  base: {
+    '@layer': {
+      [components]: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: sys.spacing[2],
 
-      textAlign: 'start',
+        paddingInline: sys.spacing[2],
+        paddingBlock: sys.spacing[1],
+        width: '100%',
 
-      borderRadius: sys.shape.corner.small,
+        position: 'relative',
 
-      cursor: 'pointer',
-      userSelect: 'none',
+        textAlign: 'start',
 
-      selectors: {
-        '&[data-disabled="true"], &[aria-disabled="true"]': {
-          pointerEvents: 'none',
-          opacity: 0.5,
+        borderRadius: sys.shape.corner.small,
+
+        cursor: 'pointer',
+        userSelect: 'none',
+
+        vars: {
+          ...menuItemColorDefaults,
+          ...menuItemToneAssignments.neutral,
         },
 
-        '&:before': {
-          content: '""',
+        selectors: {
+          '&[data-disabled="true"], &[aria-disabled="true"]': {
+            pointerEvents: 'none',
+            opacity: 0.6,
+          },
 
-          width: '100%',
-          height: '100%',
+          '&:before': {
+            content: '""',
 
-          position: 'absolute',
-          top: 0,
-          left: 0,
+            width: '100%',
+            height: '100%',
 
-          backgroundColor: sys.color.foreground,
-          opacity: 0,
-          borderRadius: 'inherit',
+            position: 'absolute',
+            top: 0,
+            left: 0,
 
-          pointerEvents: 'none',
-        },
+            backgroundColor: menuItemVars.color.overlay,
+            opacity: 0,
+            borderRadius: 'inherit',
 
-        '&:hover::before': {
-          opacity: sys.state.hovered.opacity,
-        },
+            pointerEvents: 'none',
+          },
 
-        '&:is(:focus, :focus-visible, [aria-selected="true"])': {
-          outline: 'none',
-        },
+          '&:hover::before': {
+            opacity: sys.state.hovered.opacity,
+          },
 
-        '&:focus::before, &:focus-visible::before, &[aria-selected="true"]::before':
-          {
-            opacity: sys.state.focused.opacity,
+          '&:is(:focus, :focus-visible, [aria-selected="true"])': {
+            outline: 'none',
           },
+
+          '&:focus::before, &:focus-visible::before, &[aria-selected="true"]::before':
+            {
+              opacity: sys.state.focused.opacity,
+            },
+        },
       },
     },
-  ],
+  },
 
   variants: {
+    size: {
+      sm: typography.body.small,
+      md: typography.body.medium,
+      lg: typography.body.large,
+    },
     inset: {
       true: {
-        paddingInlineStart: sys.spacing[4],
+        '@layer': {
+          [components]: {
+            paddingInlineStart: sys.spacing[4],
+          },
+        },
       },
     },
+    tone: menuToneStyles,
+  },
+
+  defaultVariants: {
+    tone: 'neutral',
+    size: 'md',
   },
 });
 
 export const menuItemIcon = style({
-  color: sys.color.foreground,
+  color: menuItemToneVars.onBase,
 });
 
-export type MenuItemVariants = NonNullable<RecipeVariants<typeof menuItem>>;
+export type MenuItemVariants = NonNullable<
+  RecipeVariants<typeof menuItemRecipe>
+>;

package/src/components/menu/menu-separator.css.ts

@@ -26,33 +26,45 @@ export const menuSeparatorSpacingStyles = mapContractVars(
   }),
 );
 
-export const menuSeparator = recipe({
+export const menuSeparatorRecipe = recipe({
   base: {
-    paddingBlock: spaceVar,
-    marginInline: sys.spacing[2],
+    '@layer': {
+      [components]: {
+        paddingBlock: spaceVar,
+        marginInline: sys.spacing[2],
 
-    position: 'relative',
+        position: 'relative',
+
+        vars: {
+          [spaceVar]: sys.spacing[2],
+        },
 
-    '::after': {
-      content: '""',
+        '::after': {
+          content: '""',
 
-      height: '1px',
-      width: '100%',
+          height: '1px',
+          width: '100%',
 
-      position: 'absolute',
-      top: '50%',
+          position: 'absolute',
+          top: '50%',
 
-      backgroundColor: sys.color.foreground,
+          backgroundColor: sys.surface.foreground,
 
-      transform: 'translateY(-50%)',
+          transform: 'translateY(-50%)',
+        },
+      },
     },
   },
 
   variants: {
     offset: {
       true: {
-        marginInline: calc.negate(sys.spacing[2]),
-        marginBlock: calc.negate(sys.spacing[2]),
+        '@layer': {
+          [components]: {
+            marginInline: calc.negate(sys.spacing[2]),
+            marginBlock: calc.negate(sys.spacing[2]),
+          },
+        },
       },
     },
 
@@ -61,7 +73,7 @@ export const menuSeparator = recipe({
 });
 
 export type MenuSeparatorVariants = NonNullable<
-  RecipeVariants<typeof menuSeparator>
+  RecipeVariants<typeof menuSeparatorRecipe>
 >;
 
 export const spacingAt = createResponsiveVariants({

package/src/components/menu/menu-separator.responsive.ts

@@ -1,9 +1,9 @@
 import { defaultOrder, responsiveRecipe } from '../../styles/responsive';
 
-import { menuSeparator, spacingAt } from './menu-separator.css';
+import { menuSeparatorRecipe, spacingAt } from './menu-separator.css';
 
 export const menuSeparatorResponsive = responsiveRecipe({
-  recipe: menuSeparator,
+  recipe: menuSeparatorRecipe,
   at: { spacing: spacingAt },
   order: defaultOrder,
 });

package/src/components/overlay/overlay.css.ts

@@ -29,7 +29,7 @@ export const overlay = style({
       position: 'fixed',
       inset: 0,
 
-      backgroundColor: `color(from ${sys.color.background} srgb r g b / 0.5)`,
+      backgroundColor: `color-mix(in srgb, ${sys.surface.background} 50%, transparent)`,
 
       animationDuration: sys.motion.duration.medium[2],
       animationTimingFunction: sys.motion.easing.standard,

package/src/components/popover/index.ts

@@ -1,3 +1,3 @@
 export { Popover, PopoverTrigger } from './popover';
 export { PopoverContent } from './popover-content';
-export { popoverContent } from './popover-content.css';
+export { popoverContentRecipe } from './popover-content.css';