@latte-macchiat-io/latte-vanilla-components 0.0.200 → 0.0.202

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.200",
+  "version": "0.0.202",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Actions/export.tsx

@@ -1,4 +1,2 @@
-// export { Actions } from '.';
-// export type { ActionsProps } from '.';
-
-// export { styles as ActionsStyles } from './styles.css';
+export { Actions, type ActionsProps } from './';
+export { type ActionsVariants } from './styles.css';

package/src/components/Actions/index.tsx

@@ -1,20 +1,12 @@
-'use client';
-
 import { clsx } from 'clsx';
-import { forwardRef } from 'react';
 
 import { actionsRecipe, type ActionsVariants } from './styles.css';
 
 export type ActionsProps = React.HTMLAttributes<HTMLDivElement> &
   ActionsVariants & {
-    css?: string;
     children: React.ReactNode;
   };
 
-export const Actions = forwardRef<HTMLDivElement, ActionsProps>(({ align, direction, css, className, children }, ref) => (
-  <div ref={ref} className={clsx(actionsRecipe({ align, direction }), css, className)}>
-    {children}
-  </div>
-));
-
-Actions.displayName = 'Actions';
+export const Actions = ({ align, direction, className, children }: ActionsProps) => (
+  <div className={clsx(actionsRecipe({ align, direction }), className)}>{children}</div>
+);

package/src/components/Actions/stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Button } from '../Button';
+import { Actions } from '.';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Actions> = {
+  title: 'Latte Components / 1. Global / Actions',
+  component: Actions,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Button>hello</Button>
+        <Button>hello</Button>
+      </>
+    ),
+  },
+};

package/src/components/Actions/styles.css.ts

@@ -35,6 +35,7 @@ export const actionsRecipe = recipe({
         justifyContent: 'flex-end',
       },
     },
+
     direction: {
       row: {
         flexDirection: 'row',

package/src/components/Actions/theme.ts

@@ -0,0 +1,40 @@
+const themeActionsBase = {
+  actions: {
+    gap: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingTop: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingBottom: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+  },
+};
+
+export const themeActionsLight = {
+  actions: {
+    ...themeActionsBase.actions,
+  },
+};
+
+export const themeActionsDark = {
+  actions: {
+    ...themeActionsBase.actions,
+  },
+};

package/src/components/Button/export.tsx

@@ -1,5 +1,2 @@
-// export { Button } from './Button';
-// export type { ButtonProps } from '.';
-// export { Type as ButtonType, Size as ButtonSize, Style as ButtonStyle, Variant as ButtonVariant } from './types';
-
-// export { styles as ButtonStyles } from './styles.css';
+export { Button, type ButtonProps } from './';
+export { type ButtonVariants } from './styles.css';

package/src/components/Button/index.tsx

@@ -1,29 +1,32 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { buttonRecipe, type ButtonVariants } from './styles.css';
 
-export type ButtonProps = ComponentPropsWithoutRef<'button'> &
+export type ButtonProps = React.HTMLAttributes<HTMLButtonElement> &
   ButtonVariants & {
     css?: string;
     isPending?: boolean;
     isDisabled?: boolean;
+    translation?: {
+      isPendingLabel: string;
+    };
   };
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant, style, size, fullWidth, isPending = false, isDisabled, css, className, children, onClick }, ref) => {
-    return (
-      <button
-        ref={ref}
-        onClick={onClick}
-        disabled={isDisabled || isPending}
-        className={clsx(buttonRecipe({ variant, style, size, fullWidth }), css, className)}>
-        {isPending ? 'Loading…' : children}
-      </button>
-    );
-  }
+export const Button = ({
+  size,
+  style,
+  variant,
+  onClick,
+  children,
+  fullWidth,
+  className,
+  isPending = false,
+  isDisabled = false,
+  translation = { isPendingLabel: 'Loading...' },
+}: ButtonProps) => (
+  <button onClick={onClick} disabled={isDisabled || isPending} className={clsx(buttonRecipe({ variant, style, size, fullWidth }), className)}>
+    {isPending ? translation.isPendingLabel : children}
+  </button>
 );
-
-Button.displayName = 'Button';

package/src/components/Button/stories.tsx

@@ -1,235 +1,28 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { Section } from '../Section';
+
 import { Button } from '.';
 
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Button> = {
-  title: 'Interactive Components/Button',
+  title: 'Latte Components / 1. Global / Button',
   component: Button,
   parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
-    docs: {
-      description: {
-        component: `
-The Button component is a versatile, accessible button that supports multiple variants, sizes, and states.
-
-## Features
-- Multiple variants (primary, secondary, ghost, destructive)
-- Different sizes (small, medium, large)
-- Full width option
-- Loading/pending state
-- Fully accessible (ARIA compliant)
-- Theme-aware colors
-- TypeScript support
-        `,
-      },
-    },
   },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['primary', 'secondary', 'ghost', 'destructive'],
-      description: 'Visual style of the button',
-    },
-    size: {
-      control: 'select',
-      options: ['small', 'medium', 'large'],
-      description: 'Size of the button',
-    },
-    fullWidth: {
-      control: 'boolean',
-      description: 'Whether the button should take full width of its container',
-    },
-    isPending: {
-      control: 'boolean',
-      description: 'Shows loading state',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disables the button',
-    },
-    children: {
-      control: 'text',
-      description: 'Button content',
-    },
-  },
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {},
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
 };
 
 export default meta;
-type Story = StoryObj<typeof Button>;
-
-// Basic Stories
-export const Primary: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Primary Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: 'secondary',
-    children: 'Secondary Button',
-  },
-};
-
-// Size Variants
-export const Small: Story = {
-  args: {
-    variant: 'primary',
-    size: 'sm',
-    children: 'Small Button',
-  },
-};
+type Story = StoryObj<typeof meta>;
 
-export const Medium: Story = {
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
   args: {
-    variant: 'primary',
-    size: 'md',
-    children: 'Medium Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    variant: 'primary',
-    size: 'lg',
-    children: 'Large Button',
-  },
-};
-
-// States
-export const Loading: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Loading Button',
-    isPending: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Disabled Button',
-    disabled: true,
-  },
-};
-
-export const FullWidth: Story = {
-  args: {
-    variant: 'primary',
-    children: 'Full Width Button',
-    fullWidth: true,
-  },
-  parameters: {
-    layout: 'padded',
-  },
-};
-
-// All Variants Showcase
-export const AllVariants: Story = {
-  render: () => (
-    <Section>
-      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
-        <Button variant="primary">Primary</Button>
-        <Button variant="secondary">Secondary</Button>
-      </div>
-    </Section>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'All available button variants displayed together.',
-      },
-    },
-  },
-};
-
-// All Sizes Showcase
-export const AllSizes: Story = {
-  render: () => (
-    <Section>
-      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
-        <Button variant="primary" size="sm">
-          Small
-        </Button>
-        <Button variant="primary" size="md">
-          Medium
-        </Button>
-        <Button variant="primary" size="lg">
-          Large
-        </Button>
-      </div>
-    </Section>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'All available button sizes displayed together.',
-      },
-    },
-  },
-};
-
-// Interactive Example
-export const InteractiveExample: Story = {
-  render: () => (
-    <Section>
-      <div style={{ display: 'grid', gap: '2rem' }}>
-        <div>
-          <h3>Call to Action</h3>
-          <div style={{ display: 'flex', gap: '1rem' }}>
-            <Button variant="primary" size="lg">
-              Get Started
-            </Button>
-            <Button variant="secondary" size="lg">
-              Learn More
-            </Button>
-          </div>
-        </div>
-
-        <div>
-          <h3>Form Actions</h3>
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <Button variant="primary">Save</Button>
-            <Button variant="secondary">Cancel</Button>
-          </div>
-        </div>
-
-        <div>
-          <h3>Navigation</h3>
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <Button variant="primary">Next →</Button>
-          </div>
-        </div>
-      </div>
-    </Section>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Real-world usage examples showing different button combinations.',
-      },
-    },
-  },
-};
-
-// With Custom Styling
-export const WithCustomStyling: Story = {
-  render: () => (
-    <Section>
-      <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
-        <Button variant="primary">Rounded Button</Button>
-        <Button variant="secondary">Large Text Button</Button>
-      </div>
-    </Section>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Buttons with custom styling using sprinkles utilities.',
-      },
-    },
+    children: 'Button',
   },
 };

package/src/components/Button/theme.ts

@@ -0,0 +1,149 @@
+const themeButtonBase = {
+  button: {
+    minWidth: '100',
+    fontWeight: '500',
+    letterSpacing: '0.2',
+    borderRadius: '15px',
+    fontFamily: 'system-ui, sans-serif',
+    transition: 'all 0.3s ease-in-out',
+
+    size: {
+      small: {
+        paddingTop: {
+          mobile: '5px',
+          sm: '5px',
+          md: '5px',
+          lg: '5px',
+          xl: '5px',
+          '2xl': '5px',
+        },
+        paddingLeft: {
+          mobile: '5px',
+          sm: '5px',
+          md: '5px',
+          lg: '5px',
+          xl: '5px',
+          '2xl': '5px',
+        },
+        paddingRight: {
+          mobile: '5px',
+          sm: '5px',
+          md: '5px',
+          lg: '5px',
+          xl: '5px',
+          '2xl': '5px',
+        },
+        paddingBottom: {
+          mobile: '5px',
+          sm: '5px',
+          md: '5px',
+          lg: '5px',
+          xl: '5px',
+          '2xl': '5px',
+        },
+      },
+      medium: {
+        paddingTop: {
+          mobile: '5px',
+          sm: '5px',
+          md: '10px',
+          lg: '10px',
+          xl: '15px',
+          '2xl': '15px',
+        },
+        paddingLeft: {
+          mobile: '5px',
+          sm: '5px',
+          md: '10px',
+          lg: '10px',
+          xl: '15px',
+          '2xl': '15px',
+        },
+        paddingRight: {
+          mobile: '5px',
+          sm: '5px',
+          md: '10px',
+          lg: '10px',
+          xl: '15px',
+          '2xl': '15px',
+        },
+        paddingBottom: {
+          mobile: '5px',
+          sm: '5px',
+          md: '10px',
+          lg: '10px',
+          xl: '15px',
+          '2xl': '15px',
+        },
+      },
+      large: {
+        paddingTop: {
+          mobile: '10px',
+          sm: '10px',
+          md: '15px',
+          lg: '15px',
+          xl: '20px',
+          '2xl': '20px',
+        },
+        paddingLeft: {
+          mobile: '10px',
+          sm: '10px',
+          md: '15px',
+          lg: '15px',
+          xl: '20px',
+          '2xl': '20px',
+        },
+        paddingRight: {
+          mobile: '10px',
+          sm: '10px',
+          md: '15px',
+          lg: '15px',
+          xl: '20px',
+          '2xl': '20px',
+        },
+        paddingBottom: {
+          mobile: '10px',
+          sm: '10px',
+          md: '15px',
+          lg: '15px',
+          xl: '20px',
+          '2xl': '20px',
+        },
+      },
+    },
+  },
+};
+
+export const themeButtonLight = {
+  button: {
+    ...themeButtonBase.button,
+
+    variant: {
+      primary: {
+        color: '#FF7377',
+        backgroundColor: '#FF7377',
+      },
+      secondary: {
+        color: '#FF7377',
+        backgroundColor: '#FF7377',
+      },
+    },
+  },
+};
+
+export const themeButtonDark = {
+  button: {
+    ...themeButtonBase.button,
+
+    variant: {
+      primary: {
+        color: '#FF7377',
+        backgroundColor: '#FF7377',
+      },
+      secondary: {
+        color: '#FF7377',
+        backgroundColor: '#FF7377',
+      },
+    },
+  },
+};

package/src/components/Carousel/index.tsx

@@ -227,5 +227,3 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
     );
   }
 );
-
-Carousel.displayName = 'Carousel';

package/src/components/Columns/index.tsx

@@ -32,5 +32,3 @@ export const Columns = forwardRef<HTMLDivElement, ColumnsProps>(({ align, vAlign
     </div>
   );
 });
-
-Columns.displayName = 'Columns';

package/src/components/ConsentCookie/ConsentCookie.tsx

@@ -198,5 +198,3 @@ export const ConsentCookie = forwardRef<HTMLDivElement, ConsentCookieProps>(
     );
   }
 );
-
-ConsentCookie.displayName = 'ConsentCookie';

package/src/components/Footer/index.tsx

@@ -15,5 +15,3 @@ export const Footer = forwardRef<HTMLDivElement, FooterProps>(({ children, css,
     </footer>
   );
 });
-
-Footer.displayName = 'Footer';

package/src/components/Form/Form.tsx

@@ -123,5 +123,3 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(
     );
   }
 );
-
-Form.displayName = 'Form';

package/src/components/Form/Row/Row.tsx

@@ -133,5 +133,3 @@ export const Row = forwardRef<HTMLDivElement, RowProps>(
     );
   }
 );
-
-Row.displayName = 'Row';

package/src/components/Form/TextField/Input/Input.tsx

@@ -135,5 +135,3 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   }
 );
-
-Input.displayName = 'Input';

package/src/components/Form/TextField/Label/Label.tsx

@@ -129,5 +129,3 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(
     );
   }
 );
-
-Label.displayName = 'Label';

package/src/components/Form/TextField/Textarea/Textarea.tsx

@@ -131,5 +131,3 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     );
   }
 );
-
-Textarea.displayName = 'Textarea';

package/src/components/Header/index.tsx

@@ -49,5 +49,3 @@ export const Header = forwardRef<HTMLDivElement, HeaderProps>(
     );
   }
 );
-
-Header.displayName = 'Header';

package/src/components/KeyNumber/index.tsx

@@ -47,5 +47,3 @@ export const KeyNumber = forwardRef<HTMLDivElement, KeyNumberProps>(
     );
   }
 );
-
-KeyNumber.displayName = 'KeyNumber';

package/src/components/LanguageSwitcher/index.tsx

@@ -76,5 +76,3 @@ export const LanguageSwitcher = forwardRef<HTMLDivElement, LanguageSwitcherProps
     );
   }
 );
-
-LanguageSwitcher.displayName = 'LanguageSwitcher';

package/src/components/Modal/index.tsx

@@ -38,5 +38,3 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(({ triggerLabel, css
     </>
   );
 });
-
-Modal.displayName = 'Modal';

package/src/components/Nav/index.tsx

@@ -18,5 +18,3 @@ export const Nav = forwardRef<HTMLDivElement, NavProps>(({ children, css, classN
     </div>
   );
 });
-
-Nav.displayName = 'Nav';

package/src/components/NavLegal/index.tsx

@@ -13,5 +13,3 @@ export const NavLegal = forwardRef<HTMLDivElement, NavLegalProps>(({ css, classN
     {children}
   </div>
 ));
-
-NavLegal.displayName = 'NavLegal';

package/src/components/NavSocial/index.tsx

@@ -28,5 +28,3 @@ export const NavSocial = forwardRef<HTMLDivElement, NavSocialProps>(({ navSocial
     </div>
   );
 });
-
-NavSocial.displayName = 'NavSocial';

package/src/components/Section/index.tsx

@@ -16,5 +16,3 @@ export const Section = forwardRef<HTMLElement, SectionProps>(
     </section>
   )
 );
-
-Section.displayName = 'Section';

package/src/components/Video/index.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-/* eslint-disable jsx-a11y/media-has-caption */
-
 import { clsx } from 'clsx';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import {
@@ -113,5 +111,3 @@ export const Video = forwardRef<HTMLDivElement, VideoProps>(
     );
   }
 );
-
-Video.displayName = 'Video';

package/src/index.ts

@@ -10,8 +10,8 @@ export { breakpoints, queries } from './styles/mediaqueries';
 // Components
 export { ThemeToggle } from './components/ThemeToggle';
 
-export { Button, type ButtonProps } from './components/Button';
-export { type ButtonVariants } from './components/Button/styles.css';
+export * from './components/Button/export';
+export * from './components/Actions/export';
 
 export { Section, type SectionProps } from './components/Section';
 export { type SectionVariants } from './components/Section/styles.css';
@@ -35,9 +35,6 @@ export { Logo, type LogoProps } from './components/Logo';
 
 export { Columns, type ColumnsProps } from './components/Columns';
 
-export { Actions, type ActionsProps } from './components/Actions';
-export { type ActionsVariants } from './components/Actions/styles.css';
-
 export { Carousel, type CarouselProps } from './components/Carousel';
 export { type CarouselVariants } from './components/Carousel/styles.css';
 

package/src/theme/baseThemeValues.ts

@@ -1,3 +1,6 @@
+import { themeActionsDark, themeActionsLight } from '../components/Actions/theme';
+import { themeButtonDark, themeButtonLight } from '../components/Button/theme';
+
 // Base theme values that can be imported and extended by apps
 export const baseLightTheme = {
   colors: {
@@ -208,157 +211,8 @@ export const baseLightTheme = {
     },
   },
 
-  actions: {
-    gap: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-    paddingTop: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-    paddingBottom: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-  },
-
-  button: {
-    minWidth: '100',
-    fontWeight: '500',
-    letterSpacing: '0.2',
-    borderRadius: '15px',
-    fontFamily: 'system-ui, sans-serif',
-    transition: 'all 0.3s ease-in-out',
-
-    variant: {
-      primary: {
-        color: '#FF7377',
-        backgroundColor: '#FF7377',
-      },
-      secondary: {
-        color: '#FF7377',
-        backgroundColor: '#FF7377',
-      },
-    },
-
-    size: {
-      small: {
-        paddingTop: {
-          mobile: '5px',
-          sm: '5px',
-          md: '5px',
-          lg: '5px',
-          xl: '5px',
-          '2xl': '5px',
-        },
-        paddingLeft: {
-          mobile: '5px',
-          sm: '5px',
-          md: '5px',
-          lg: '5px',
-          xl: '5px',
-          '2xl': '5px',
-        },
-        paddingRight: {
-          mobile: '5px',
-          sm: '5px',
-          md: '5px',
-          lg: '5px',
-          xl: '5px',
-          '2xl': '5px',
-        },
-        paddingBottom: {
-          mobile: '5px',
-          sm: '5px',
-          md: '5px',
-          lg: '5px',
-          xl: '5px',
-          '2xl': '5px',
-        },
-      },
-      medium: {
-        paddingTop: {
-          mobile: '5px',
-          sm: '5px',
-          md: '10px',
-          lg: '10px',
-          xl: '15px',
-          '2xl': '15px',
-        },
-        paddingLeft: {
-          mobile: '5px',
-          sm: '5px',
-          md: '10px',
-          lg: '10px',
-          xl: '15px',
-          '2xl': '15px',
-        },
-        paddingRight: {
-          mobile: '5px',
-          sm: '5px',
-          md: '10px',
-          lg: '10px',
-          xl: '15px',
-          '2xl': '15px',
-        },
-        paddingBottom: {
-          mobile: '5px',
-          sm: '5px',
-          md: '10px',
-          lg: '10px',
-          xl: '15px',
-          '2xl': '15px',
-        },
-      },
-      large: {
-        paddingTop: {
-          mobile: '10px',
-          sm: '10px',
-          md: '15px',
-          lg: '15px',
-          xl: '20px',
-          '2xl': '20px',
-        },
-        paddingLeft: {
-          mobile: '10px',
-          sm: '10px',
-          md: '15px',
-          lg: '15px',
-          xl: '20px',
-          '2xl': '20px',
-        },
-        paddingRight: {
-          mobile: '10px',
-          sm: '10px',
-          md: '15px',
-          lg: '15px',
-          xl: '20px',
-          '2xl': '20px',
-        },
-        paddingBottom: {
-          mobile: '10px',
-          sm: '10px',
-          md: '15px',
-          lg: '15px',
-          xl: '20px',
-          '2xl': '20px',
-        },
-      },
-    },
-  },
+  ...themeActionsLight,
+  ...themeButtonLight,
 
   icon: {
     color: '#FF7377',
@@ -851,161 +705,12 @@ export const baseDarkTheme = {
     },
   },
 
-  button: {
-    minWidth: '100',
-    fontWeight: '500',
-    letterSpacing: '0.2',
-    borderRadius: '15px',
-    fontFamily: 'system-ui, sans-serif',
-    transition: 'all 0.3s ease-in-out',
-
-    variant: {
-      primary: {
-        color: '#FF7377',
-        backgroundColor: '#FF7377',
-      },
-      secondary: {
-        color: '#FF7377',
-        backgroundColor: '#FF7377',
-      },
-    },
-
-    size: {
-      small: {
-        paddingTop: {
-          mobile: '5px',
-          sm: '5px',
-          md: '5px',
-          lg: '5px',
-          xl: '5px',
-          '2xl': '5px',
-        },
-        paddingLeft: {
-          mobile: '5px',
-          sm: '5px',
-          md: '5px',
-          lg: '5px',
-          xl: '5px',
-          '2xl': '5px',
-        },
-        paddingRight: {
-          mobile: '5px',
-          sm: '5px',
-          md: '5px',
-          lg: '5px',
-          xl: '5px',
-          '2xl': '5px',
-        },
-        paddingBottom: {
-          mobile: '5px',
-          sm: '5px',
-          md: '5px',
-          lg: '5px',
-          xl: '5px',
-          '2xl': '5px',
-        },
-      },
-      medium: {
-        paddingTop: {
-          mobile: '5px',
-          sm: '5px',
-          md: '10px',
-          lg: '10px',
-          xl: '15px',
-          '2xl': '15px',
-        },
-        paddingLeft: {
-          mobile: '5px',
-          sm: '5px',
-          md: '10px',
-          lg: '10px',
-          xl: '15px',
-          '2xl': '15px',
-        },
-        paddingRight: {
-          mobile: '5px',
-          sm: '5px',
-          md: '10px',
-          lg: '10px',
-          xl: '15px',
-          '2xl': '15px',
-        },
-        paddingBottom: {
-          mobile: '5px',
-          sm: '5px',
-          md: '10px',
-          lg: '10px',
-          xl: '15px',
-          '2xl': '15px',
-        },
-      },
-      large: {
-        paddingTop: {
-          mobile: '10px',
-          sm: '10px',
-          md: '15px',
-          lg: '15px',
-          xl: '20px',
-          '2xl': '20px',
-        },
-        paddingLeft: {
-          mobile: '10px',
-          sm: '10px',
-          md: '15px',
-          lg: '15px',
-          xl: '20px',
-          '2xl': '20px',
-        },
-        paddingRight: {
-          mobile: '10px',
-          sm: '10px',
-          md: '15px',
-          lg: '15px',
-          xl: '20px',
-          '2xl': '20px',
-        },
-        paddingBottom: {
-          mobile: '10px',
-          sm: '10px',
-          md: '15px',
-          lg: '15px',
-          xl: '20px',
-          '2xl': '20px',
-        },
-      },
-    },
-  },
-
   icon: {
     color: '#FF7377',
   },
 
-  actions: {
-    gap: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-    paddingTop: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-    paddingBottom: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-  },
+  ...themeActionsDark,
+  ...themeButtonDark,
 
   modal: {
     border: 'none',