feat: add outlined and filled variant options to button component

packages/lsd-react/src/components/Button/Button.classes.ts

@@ -5,6 +5,8 @@ export const buttonClasses = {
   medium: `lsd-button--medium`,
   small: `lsd-button--small`,
   withIcon: `lsd-button--with-icon`,
+  outlined: 'lsd-button--outlined',
+  filled: 'lsd-button--filled',
 
   text: `lsd-button__text`,
   icon: `lsd-button__icon`,

packages/lsd-react/src/components/Button/Button.styles.ts

@@ -4,9 +4,6 @@ import { buttonClasses } from './Button.classes'
 export const ButtonStyles = css`
   .${buttonClasses.root} {
     width: auto;
-    color: rgb(var(--lsd-text-primary));
-    background: none;
-    border: 1px solid rgb(var(--lsd-border-primary));
 
     cursor: pointer;
     padding: 6px 24px;
@@ -65,4 +62,16 @@ export const ButtonStyles = css`
       margin-left: 10px;
     }
   }
+
+  .${buttonClasses.outlined} {
+    background: none;
+    color: rgb(var(--lsd-text-primary));
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
+
+  .${buttonClasses.filled} {
+    background: rgb(var(--lsd-surface-secondary));
+    color: rgb(var(--lsd-text-secondary));
+    border: 1px solid rgb(var(--lsd-border-primary));
+  }
 `

packages/lsd-react/src/components/Button/Button.tsx

@@ -6,12 +6,13 @@ import { buttonClasses } from './Button.classes'
 export type ButtonProps = CommonProps &
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: 'large' | 'medium' | 'small'
+    variant?: 'outlined' | 'filled'
     icon?: React.ReactNode
   }
 
 export const Button: React.FC<ButtonProps> & {
   classes: typeof buttonClasses
-} = ({ size = 'medium', icon, children, ...props }) => {
+} = ({ size = 'medium', variant = 'outlined', icon, children, ...props }) => {
   const commonProps = useCommonProps(props)
 
   return (
@@ -23,6 +24,7 @@ export const Button: React.FC<ButtonProps> & {
           props.className,
           buttonClasses.root,
           buttonClasses[size],
+          buttonClasses[variant],
           props.disabled && buttonClasses.disabled,
           icon && buttonClasses.withIcon,
         )}