Convert Button styles into CSS Modules

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/css/styles.css

@@ -298,122 +298,6 @@
     color: var(--bui-fg-primary);
   }
 
-  .bui-Button {
-    user-select: none;
-    font-family: var(--bui-font-regular);
-    font-weight: var(--bui-font-weight-bold);
-    cursor: pointer;
-    border-radius: var(--bui-radius-2);
-    justify-content: center;
-    align-items: center;
-    gap: var(--bui-space-1_5);
-    border: none;
-    flex-shrink: 0;
-    padding: 0;
-    display: inline-flex;
-
-    &[data-disabled="true"] {
-      cursor: not-allowed;
-    }
-  }
-
-  .bui-Button[data-variant="primary"] {
-    background-color: var(--bui-bg-solid);
-    color: var(--bui-fg-solid);
-
-    &:hover {
-      background-color: var(--bui-bg-solid-hover);
-      transition: background-color .15s;
-    }
-
-    &:active {
-      background-color: var(--bui-bg-solid-pressed);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--bui-ring);
-      outline-offset: 2px;
-    }
-
-    &[data-disabled="true"] {
-      background-color: var(--bui-bg-solid-disabled);
-      color: var(--bui-fg-solid-disabled);
-    }
-  }
-
-  .bui-Button[data-variant="secondary"] {
-    background-color: var(--bui-bg-surface-1);
-    box-shadow: inset 0 0 0 1px var(--bui-border);
-    color: var(--bui-fg-primary);
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px var(--bui-border-hover);
-      transition: box-shadow .15s;
-    }
-
-    &:active {
-      box-shadow: inset 0 0 0 1px var(--bui-border-pressed);
-    }
-
-    &:focus-visible {
-      box-shadow: inset 0 0 0 2px var(--bui-ring);
-      outline: none;
-      transition: none;
-    }
-
-    &[data-disabled="true"] {
-      box-shadow: inset 0 0 0 1px var(--bui-border-disabled);
-      color: var(--bui-fg-disabled);
-    }
-  }
-
-  .bui-Button[data-variant="tertiary"] {
-    color: var(--bui-fg-primary);
-    background-color: #0000;
-
-    &:hover {
-      background-color: var(--bui-bg-surface-1);
-      transition: background-color .2s;
-    }
-
-    &:active {
-      background-color: var(--bui-bg-surface-2);
-    }
-
-    &:focus-visible {
-      box-shadow: inset 0 0 0 2px var(--bui-ring);
-      outline: none;
-      transition: none;
-    }
-
-    &[data-disabled="true"] {
-      color: var(--bui-fg-disabled);
-      background-color: #0000;
-    }
-  }
-
-  .bui-Button[data-size="medium"] {
-    font-size: var(--bui-font-size-4);
-    padding: 0 var(--bui-space-3);
-    height: 2.5rem;
-  }
-
-  .bui-Button[data-size="small"] {
-    font-size: var(--bui-font-size-3);
-    padding: 0 var(--bui-space-2);
-    height: 2rem;
-  }
-
-  .bui-Button[data-size="small"] svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .bui-Button[data-size="medium"] svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
   .bui-ButtonIcon {
     justify-content: center;
     align-items: center;

packages/ui/src/components/Button/Button.tsx

@@ -19,6 +19,7 @@ import { forwardRef, Ref } from 'react';
 import { Button as RAButton } from 'react-aria-components';
 import type { ButtonProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Button.module.css';
 
 /** @public */
 export const Button = forwardRef(
@@ -33,7 +34,7 @@ export const Button = forwardRef(
 
     return (
       <RAButton
-        className={clsx(classNames.root, className)}
+        className={clsx(classNames.root, className, styles['bui-Button'])}
         ref={ref}
         {...dataAttributes}
         {...rest}

packages/ui/src/css/styles.css

@@ -26,7 +26,6 @@
 /* Components */
 @import '../components/Avatar/Avatar.styles.css';
 @import '../components/Box/styles.css';
-@import '../components/Button/styles.css';
 @import '../components/ButtonIcon/styles.css';
 @import '../components/Card/Card.styles.css';
 @import '../components/Checkbox/styles.css';