feat: add shadow prop to Button component

Author: andrepat0

src/components/Button/Button.stories.tsx

@@ -43,6 +43,12 @@ const meta = {
       },
       description: 'Whether the button should take full width',
     },
+    shadow: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether to apply a box shadow to the button',
+    },
     loading: {
       control: {
         type: 'boolean',
@@ -170,6 +176,17 @@ export const FullWidth: Story = {
   },
 }
 
+/**
+ * Button with shadow applied.
+ */
+export const WithShadow: Story = {
+  args: {
+    children: 'Button with Shadow',
+    variant: 'primary',
+    shadow: true,
+  },
+}
+
 /**
  * Disabled button state.
  */

src/components/Button/Button.tsx

@@ -52,6 +52,11 @@ export interface ButtonProps
    * @default 'default'
    */
   shape?: 'default' | 'round' | 'circle'
+  /**
+   * Whether to apply a box shadow to the button
+   * @default false
+   */
+  shadow?: boolean
   /**
    * Whether the button is in an active/pressed state (for toggle buttons)
    */
@@ -91,6 +96,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       icon,
       iconPosition = 'left',
       shape = 'default',
+      shadow = false,
       active = false,
       danger = false,
       className,
@@ -151,6 +157,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           sizeClass,
           shapeClass,
           fullWidth && 'memori-button--full-width',
+          shadow && 'memori-button--shadow',
           isDisabled && 'memori-button--disabled',
           loading && 'memori-button--loading',
           active && 'memori-button--active',

src/components/Button/styles.css

@@ -310,6 +310,24 @@
    STATES
    ============================================ */
 
+.memori-button--shadow {
+    box-shadow:
+        0 4px 6px -1px rgb(0 0 0 / 10%),
+        0 2px 4px -2px rgb(0 0 0 / 10%);
+}
+
+.memori-button--shadow:hover:not(:disabled) {
+    box-shadow:
+        0 6px 10px -2px rgb(0 0 0 / 12%),
+        0 4px 6px -3px rgb(0 0 0 / 10%);
+}
+
+.memori-button--shadow:active:not(:disabled) {
+    box-shadow:
+        0 2px 4px -2px rgb(0 0 0 / 8%),
+        0 1px 2px -1px rgb(0 0 0 / 6%);
+}
+
 .memori-button--full-width {
     width: 100%;
 }

src/components/Card/Card.tsx

@@ -26,7 +26,7 @@ export interface CardProps extends Omit<
    * Visual variant of the card
    * @default 'elevated'
    */
-  variant?: 'elevated' | 'outlined'
+  variant?: 'elevated' | 'outlined' | 'flat'
 
   /**
    * Controls the padding inside the card body
@@ -96,11 +96,15 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(
     const isInteractive = !!onClick || focusable === true || hoverable === true
     const tabIndex = isInteractive || focusable ? 0 : undefined
 
-    const rootClassName = cx(
-      'memori-card',
+    const variantClass =
       variant === 'elevated'
         ? 'memori-card--elevated'
-        : 'memori-card--outlined',
+        : variant === 'flat'
+          ? 'memori-card--flat'
+          : 'memori-card--outlined'
+    const rootClassName = cx(
+      'memori-card',
+      variantClass,
       isInteractive && 'memori-card--interactive',
       className,
     )

src/components/Card/styles.css

@@ -10,10 +10,11 @@
     width: 100%;
     box-sizing: border-box;
     flex-direction: column;
-    padding: 0;
+    padding: var(--memori-spacing-lg);
     border-radius: var(--memori-radius-box);
     margin: 0;
     background-color: var(--memori-main-background);
+    box-shadow: var(--memori-shadow-md);
     color: var(--memori-text-color);
     font-family: var(--memori-font-family);
     text-align: left;
@@ -65,12 +66,10 @@
    VARIANTS
    ============================================ */
 
-/* Elevated: Shadow, no border (usually) */
+/* Elevated: stronger shadow */
 .memori-card--elevated {
     border: 1px solid transparent;
-
-    /* Keeps sizing consistent with outlined */
-    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
+    box-shadow: var(--memori-shadow-xl);
 }
 
 /* Dark mode: add subtle border for better visibility */
@@ -79,6 +78,12 @@
     border-color: var(--memori-border-color);
 }
 
+/* Flat: no shadow, border only */
+.memori-card--flat {
+    border: var(--memori-border) solid var(--memori-border-color);
+    box-shadow: none;
+}
+
 /* Outlined: Border, no shadow */
 .memori-card--outlined {
     border: 1px solid var(--memori-border-color);

src/components/Drawer/styles.css

@@ -24,7 +24,6 @@
 
 .memori-drawer__backdrop {
     position: fixed;
-    z-index: 1200;
     animation: memori-drawer-fade-in var(--memori-motion-duration-slow) var(--memori-motion-ease-in);
     backdrop-filter: blur(2px);
     background-color: rgb(0 0 0 / 45%);
@@ -37,7 +36,7 @@
 
 .memori-drawer {
     position: fixed;
-    z-index: 1300;
+    z-index: 1001;
     display: flex;
     box-sizing: border-box;
     flex-direction: column;

src/components/Dropdown/styles.css

@@ -139,7 +139,7 @@
 
 .memori-dropdown__item:hover:not([data-disabled]),
 .memori-dropdown__item[data-highlighted]:not([data-disabled]) {
-    background-color: var(--memori-primary-subtle);
+    background-color: var(--memori-border-color);
     color: var(--memori-text-color);
 }
 

src/components/Input/styles.css

@@ -11,25 +11,36 @@
     font-weight: var(--memori-text-weight-normal);
     line-height: var(--memori-text-line-normal);
     outline: none;
-    transition:
-        border-color var(--memori-motion-duration-normal) var(--memori-motion-ease-in-out),
-        box-shadow var(--memori-motion-duration-normal) var(--memori-motion-ease-in-out),
-        background-color var(--memori-motion-duration-normal) var(--memori-motion-ease-in-out),
-        color var(--memori-motion-duration-normal) var(--memori-motion-ease-in-out),
-        outline-color var(--memori-motion-duration-normal) var(--memori-motion-ease-in-out);
-}
-
-.memori-input::placeholder {
-    color: var(--memori-neutral);
+    transition: all var(--memori-motion-duration-normal) var(--memori-motion-ease);
 }
 
 .memori-input:focus,
 .memori-input:focus-within {
     border-color: var(--memori-primary);
-    box-shadow: 0 0 0 2px oklch(from var(--memori-primary) l c h / 20%);
+    box-shadow: var(--memori-focus-ring);
     isolation: isolate;
-    outline: 2px solid var(--memori-primary);
-    outline-offset: 2px;
+}
+
+.memori-input::placeholder {
+    color: var(--memori-neutral);
+}
+
+.memori-input--disabled,
+.memori-input:disabled {
+    border-color: var(--memori-border-color);
+    background-color: var(--memori-primary-subtle);
+    color: var(--memori-neutral);
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.memori-input--disabled::placeholder,
+.memori-input:disabled::placeholder {
+    color: var(--memori-neutral);
+}
+
+.memori-input:hover:not(:disabled) {
+    border-color: var(--memori-primary-hover);
 }
 
 /* ============================================
@@ -61,21 +72,6 @@
     color: var(--memori-error);
 }
 
-/* Disabled Variant */
-.memori-input--disabled,
-.memori-input:disabled {
-    border-color: var(--memori-border-color);
-    background-color: var(--memori-primary-subtle);
-    color: var(--memori-neutral);
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.memori-input--disabled::placeholder,
-.memori-input:disabled::placeholder {
-    color: var(--memori-neutral);
-}
-
 /* ============================================
    SIZES
    ============================================ */

src/components/SelectBox/styles.css

@@ -31,16 +31,13 @@
     font-size: var(--memori-text-size-base);
     line-height: var(--memori-text-line-normal);
     outline: none;
-    transition:
-        background-color var(--memori-motion-duration-normal) var(--memori-motion-ease-in-out),
-        border-color var(--memori-motion-duration-normal) var(--memori-motion-ease-in-out),
-        box-shadow var(--memori-motion-duration-normal) var(--memori-motion-ease),
-        transform var(--memori-motion-duration-fast) var(--memori-motion-ease);
+    transition: all var(--memori-motion-duration-normal) var(--memori-motion-ease);
 }
 
+.memori-select__trigger:focus,
 .memori-select__trigger:focus-visible {
     border-color: var(--memori-primary);
-    box-shadow: 0 0 0 2px oklch(from var(--memori-primary) l c h / 20%);
+    box-shadow: var(--memori-focus-ring);
 }
 
 .memori-select__trigger:disabled {
@@ -50,6 +47,10 @@
     cursor: not-allowed;
 }
 
+.memori-select__trigger:hover:not(:disabled) {
+    border-color: var(--memori-primary-hover);
+}
+
 .memori-select__portal {
     z-index: 999;
 }
@@ -63,11 +64,6 @@
     transform: scale(0.98);
 }
 
-.memori-select__trigger:hover:not(:disabled) {
-    border-color: var(--memori-primary);
-    background-color: var(--memori-main-background);
-}
-
 .memori-select__trigger[data-popup-open] {
     border-color: var(--memori-primary);
 }
@@ -110,6 +106,7 @@
     border-radius: 0.375rem;
     background-clip: padding-box;
     background-color: var(--memori-main-background);
+    box-shadow: var(--memori-shadow-lg);
     color: var(--memori-text-color);
     font-family: var(--memori-font-family);
     transform-origin: var(--transform-origin);

src/theme/variables.css

@@ -12,8 +12,12 @@
 
     /* Base colors - used for backgrounds and surfaces */
     --memori-main-background: oklch(100% 0 0deg); /* Main background color (white) */
-    --memori-primary-subtle: oklch(
-        68.7% 0.213 297deg / 25%
+
+    /* Primary subtle is computed as a translucent/lightened version of the primary color */
+    --memori-primary-subtle: color-mix(
+        in oklch,
+        var(--memori-primary) 40%,
+        white 60%
     ); /* Primary subtle – secondary/tertiary backgrounds, hover */
 
     --memori-text-color: oklch(20% 0.05 240deg); /* Text color on base backgrounds (dark gray) */
@@ -22,6 +26,11 @@
     --memori-primary: var(--memori-primary-color, oklch(48% 0.19 297deg)); /* Primary actions, links, highlights */
     --memori-primary-content: oklch(98% 0.01 240deg); /* Text/icon color on primary background */
 
+    /* Primary interactive states */
+    --memori-primary-hover: color-mix(in oklch, var(--memori-primary), black 15%);
+    --memori-primary-active: color-mix(in oklch, var(--memori-primary), black 25%);
+    --memori-primary-disabled: color-mix(in oklch, var(--memori-primary), transparent 60%);
+
     /* Secondary colors - secondary brand color */
     --memori-secondary: var(--memori-secondary-color, oklch(70% 0.15 200deg)); /* Secondary actions, accents */
     --memori-secondary-content: oklch(98% 0.01 200deg); /* Text/icon color on secondary background */
@@ -35,6 +44,10 @@
     --memori-neutral-content: oklch(98% 0.01 240deg); /* Text/icon color on neutral background */
     --memori-border-color: rgb(73 103 125 / 16%); /* Component borders and dividers */
 
+    /* Focus states */
+    --memori-focus-ring: 0 0 0 3px color-mix(in oklch, var(--memori-primary), transparent 80%);
+    --memori-focus-ring-offset: 2px;
+
     /* Semantic colors - Info */
     --memori-info: oklch(70% 0.2 220deg); /* Informational messages, badges */
     --memori-info-content: oklch(98% 0.01 220deg); /* Text/icon color on info background */
@@ -57,8 +70,10 @@
     --memori-spacing-md: 16px;
     --memori-spacing-lg: 24px;
     --memori-spacing-xl: 32px;
-    --memori-spacing-2xl: 48px;
-    --memori-spacing-3xl: 64px;
+    --memori-spacing-2xl: 40px;
+    --memori-spacing-3xl: 48px;
+    --memori-spacing-4xl: 64px;
+    --memori-spacing-5xl: 80px;
 
     /* Typography - Font Sizes */
     --memori-text-size-small: 0.875rem; /* 14px - Small text, labels */
@@ -97,8 +112,16 @@
     --memori-modal-size-md: 600px;
     --memori-modal-size-lg: 800px;
 
-    /* Effects */
-    --memori-depth: 1; /* Shadow depth/elevation level (for box-shadow calculations) */
+    /* Effects - Shadows */
+    --memori-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
+    --memori-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
+    --memori-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+    --memori-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+    --memori-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+    --memori-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
+
+    /* Brand-colored shadow - adapts to primary color overrides */
+    --memori-shadow-primary: 0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%);
     --memori-noise: 0; /* Noise/grain effect intensity (0 = no noise) */
 
     /* Motion - for hover/focus and micro-interactions (under 300ms) */
@@ -125,4 +148,12 @@
     --memori-neutral: oklch(50% 0.05 240deg);
     --memori-neutral-content: oklch(98% 0.01 240deg);
     --memori-border-color: rgb(73 103 125 / 16%);
+
+    /* Dark theme shadows */
+    --memori-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 30%);
+    --memori-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 30%);
+    --memori-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 50%), 0 2px 4px -2px rgb(0 0 0 / 40%);
+    --memori-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 60%), 0 4px 6px -4px rgb(0 0 0 / 50%);
+    --memori-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 70%), 0 8px 10px -6px rgb(0 0 0 / 60%);
+    --memori-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 80%);
 }