feat(Interaction): new Interaction component

packages/core/src/components/button/button.css.ts

@@ -1,7 +1,6 @@
 import { createVar } from '@vanilla-extract/css';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 
-import { interaction } from '~/styles/mixins/interactions.css';
 import { componentRecipe } from '~/styles/mixins/layer-style.css';
 import { when } from '~/styles/mixins/logical-states';
 import { typography } from '~/styles/mixins/typography.css';
@@ -17,8 +16,6 @@ const variables = {
 
 export const root = componentRecipe({
     base: [
-        interaction(),
-
         {
             display: 'inline-flex',
             alignItems: 'center',

packages/core/src/components/button/button.tsx

@@ -7,6 +7,7 @@ import { createSplitProps } from '~/utils/create-split-props';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VaporUIComponentProps } from '~/utils/types';
 
+import { Interaction } from '../interaction';
 import type { ButtonVariants } from './button.css';
 import * as styles from './button.css';
 
@@ -22,11 +23,13 @@ export const Button = forwardRef<HTMLElement, Button.Props>((props, ref) => {
     ]);
 
     return (
-        <BaseButton
-            ref={ref}
-            className={cn(styles.root(variantsProps), className)}
-            {...otherProps}
-        />
+        <Interaction>
+            <BaseButton
+                ref={ref}
+                className={cn(styles.root(variantsProps), className)}
+                {...otherProps}
+            />
+        </Interaction>
     );
 });
 Button.displayName = 'Button';

packages/core/src/components/checkbox/checkbox.css.ts

@@ -1,7 +1,6 @@
 import { createVar } from '@vanilla-extract/css';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 
-import { interaction } from '~/styles/mixins/interactions.css';
 import { componentRecipe, componentStyle } from '~/styles/mixins/layer-style.css';
 import { when } from '~/styles/mixins/logical-states';
 import { vars } from '~/styles/themes.css';
@@ -10,7 +9,6 @@ const boxShadowColor = createVar('box-shadow-color');
 
 export const root = componentRecipe({
     base: [
-        interaction(),
         {
             position: 'relative',
 

packages/core/src/components/checkbox/checkbox.tsx

@@ -14,6 +14,7 @@ import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VaporUIComponentProps } from '~/utils/types';
 
+import { Interaction } from '../interaction';
 import type { RootVariants } from './checkbox.css';
 import * as styles from './checkbox.css';
 
@@ -58,7 +59,11 @@ export const CheckboxRoot = forwardRef<HTMLElement, CheckboxRoot.Props>((props,
         },
     });
 
-    return <CheckboxProvider value={{ size, indeterminate }}>{root}</CheckboxProvider>;
+    return (
+        <CheckboxProvider value={{ size, indeterminate }}>
+            <Interaction>{root}</Interaction>
+        </CheckboxProvider>
+    );
 });
 CheckboxRoot.displayName = 'Checkbox.Root';
 

packages/core/src/components/interaction/index.ts

@@ -0,0 +1 @@
+export * from './interaction';

packages/core/src/components/interaction/interaction.css.ts

@@ -0,0 +1,94 @@
+import { createGlobalVar } from '@vanilla-extract/css';
+import { calc } from '@vanilla-extract/css-utils';
+import type { RecipeVariants } from '@vanilla-extract/recipes';
+
+import { componentRecipe, componentStyle } from '~/styles/mixins/layer-style.css';
+import { vars } from '~/styles/themes.css';
+
+const variables = {
+    ratio: createGlobalVar('ratio'),
+    opacity: createGlobalVar('overlay-opacity'),
+};
+
+export const overlay = componentStyle({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    transition: 'opacity 150ms ease',
+    opacity: variables.opacity,
+    border: 'none',
+    borderRadius: 'inherit',
+    backgroundColor: vars.color.gray[900],
+    pointerEvents: 'none',
+    width: '100%',
+    height: '100%',
+});
+
+export const root = componentRecipe({
+    base: {
+        position: 'relative',
+        selectors: {
+            '&:focus': { outline: 'none' },
+            '&:focus-visible': { outline: 'none' },
+        },
+        vars: {
+            [variables.ratio]: '0.08',
+            [variables.opacity]: '0',
+        },
+    },
+    defaultVariants: { scale: 'normal', type: 'default' },
+    variants: {
+        scale: {
+            normal: {},
+            light: { vars: { [variables.ratio]: '0.04' } },
+        },
+        type: {
+            default: {
+                selectors: {
+                    '&:active': {
+                        vars: { [variables.opacity]: calc.multiply(variables.ratio, 2) },
+                    },
+                    '&:focus-visible': {
+                        outline: `2px solid ${vars.color.foreground.normal[200]}`,
+                        outlineOffset: '2px',
+                    },
+                },
+                '@media': {
+                    '(hover: hover)': {
+                        selectors: {
+                            '&:hover': { vars: { [variables.opacity]: variables.ratio } },
+                            '&:active': {
+                                vars: { [variables.opacity]: calc.multiply(variables.ratio, 2) },
+                            },
+                        },
+                    },
+                },
+            },
+            form: {
+                transition: 'box-shadow 150ms cubic-bezier(.4,0,.2,1)',
+                selectors: {
+                    '&:focus': {
+                        boxShadow: `inset 0 0 0 0.0625rem ${vars.color.border.primary}`,
+                    },
+                },
+                '@media': {
+                    '(hover: hover)': {
+                        selectors: {
+                            '&:hover:not(:focus)': {
+                                boxShadow: `inset 0 0 0 0.0625rem color-mix(in srgb, ${vars.color.gray[900]} 32%, transparent)`,
+                            },
+                        },
+                    },
+                },
+            },
+            roving: {
+                selectors: {
+                    '&[data-highlighted]': { vars: { [variables.opacity]: '0.08' } },
+                    '&[data-highlighted]:active': { vars: { [variables.opacity]: '0.16' } },
+                },
+            },
+        },
+    },
+});
+
+export type InteractionVariants = NonNullable<RecipeVariants<typeof root>>;

packages/core/src/components/interaction/interaction.stories.tsx

@@ -0,0 +1,109 @@
+import type { CSSProperties } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Interaction } from './interaction';
+
+export default {
+    title: 'Interaction',
+    component: Interaction,
+    argTypes: {
+        scale: { control: 'inline-radio', options: ['normal', 'light'] },
+        type: { control: 'inline-radio', options: ['default', 'form', 'roving'] },
+    },
+} as Meta<typeof Interaction>;
+
+type Story = StoryObj<typeof Interaction>;
+
+const buttonStyle: CSSProperties = {
+    padding: '0.5rem 1rem',
+    border: '1px solid #ccc',
+    borderRadius: '0.375rem',
+    background: '#fff',
+    cursor: 'pointer',
+};
+
+const inputStyle: CSSProperties = {
+    padding: '0.5rem 0.75rem',
+    border: '1px solid #ccc',
+    borderRadius: '0.375rem',
+    outline: 'none',
+};
+
+const itemStyle: CSSProperties = {
+    padding: '0.5rem 0.75rem',
+    borderRadius: '0.375rem',
+    userSelect: 'none',
+    cursor: 'pointer',
+};
+
+export const Default: Story = {
+    render: (args) => (
+        <Interaction {...args}>
+            <button type="button" style={buttonStyle}>
+                Interactive button
+            </button>
+        </Interaction>
+    ),
+};
+
+export const ScaleLight: Story = {
+    args: { scale: 'light' },
+    render: (args) => (
+        <Interaction {...args}>
+            <button type="button" style={buttonStyle}>
+                Light scale
+            </button>
+        </Interaction>
+    ),
+};
+
+export const TypeForm: Story = {
+    args: { type: 'form' },
+    render: (args) => (
+        <Interaction {...args}>
+            <input type="text" placeholder="Form input" style={inputStyle} />
+        </Interaction>
+    ),
+};
+
+export const TypeRoving: Story = {
+    args: { type: 'roving' },
+    render: (args) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+            <Interaction {...args}>
+                <div data-highlighted style={itemStyle}>
+                    Highlighted item
+                </div>
+            </Interaction>
+            <Interaction {...args}>
+                <div style={itemStyle}>Regular item</div>
+            </Interaction>
+        </div>
+    ),
+};
+
+export const TestBed: Story = {
+    render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <Interaction>
+                <button type="button" style={buttonStyle}>
+                    default / normal
+                </button>
+            </Interaction>
+            <Interaction scale="light">
+                <button type="button" style={buttonStyle}>
+                    default / light
+                </button>
+            </Interaction>
+            <Interaction type="form">
+                <input type="text" placeholder="form / normal" style={inputStyle} />
+            </Interaction>
+            <Interaction type="roving">
+                <div data-highlighted style={itemStyle}>
+                    roving (highlighted)
+                </div>
+            </Interaction>
+        </div>
+    ),
+};