Merge pull request #4 from Rue-pro/ui-button-component

UI button component
Rue-pro · Mar 14, 2024 · 4d64c3c · 4d64c3c
2 parents 706690a + af2ec9a
commit 4d64c3c
Show file tree

Hide file tree

Showing 3 changed files with 194 additions and 12 deletions.
diff --git a/src/app/popup/styles.scss b/src/app/popup/styles.scss
@@ -5,27 +5,78 @@
 }
 
 * {
-  margin: 0;
   padding: 0;
+  margin: 0;
   font: inherit;
 }
 
 :root {
-  --spacing-1: 0.25rem; // 4px
-  --spacing-2: 0.5rem; // 8px
-  --spacing-3: 0.75rem; // 12px
-  --spacing-4: 1rem; // 16px
-  --spacing-5: 1.25rem; // 20px
-  --spacing-6: 1.5rem; // 24px
-  --spacing-7: 1.75rem; // 28px
-
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
   --horizontal-space: var(--spacing-5);
-
-  color-scheme: light dark;
+  --radius-1: 0.25rem;
+  --outline: 3px;
+  --color-brand-50: #faf5ff;
+  --color-brand-100: #f3e8ff;
+  --color-brand-200: #e9d5ff;
+  --color-brand-300: #d8b4fe;
+  --color-brand-400: #c084fc;
+  --color-brand-500: #a855f7;
+  --color-brand-600: #9333ea;
+  --color-brand-700: #7e22ce;
+  --color-brand-800: #6b21a8;
+  --color-brand-900: #581c87;
+  --color-success-50: #f0fdfa;
+  --color-success-100: #ccfbf1;
+  --color-success-200: #99f6e4;
+  --color-success-300: #5eead4;
+  --color-success-400: #2dd4bf;
+  --color-success-500: #14b8a6;
+  --color-success-600: #0d9488;
+  --color-success-700: #0f766e;
+  --color-success-800: #115e59;
+  --color-success-900: #134e4a;
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-400: #f87171;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+  --color-error-800: #991b1b;
+  --color-error-900: #7f1d1d;
+  --color-info-50: #eef2ff;
+  --color-info-100: #e0e7ff;
+  --color-info-200: #c7d2fe;
+  --color-info-300: #a5b4fc;
+  --color-info-400: #818cf8;
+  --color-info-500: #6366f1;
+  --color-info-600: #4f46e5;
+  --color-info-700: #4338ca;
+  --color-info-800: #3730a3;
+  --color-info-900: #312e81;
+  --color-neutral-50: #fafafa;
+  --color-neutral-100: #f4f4f5;
+  --color-neutral-200: #e4e4e7;
+  --color-neutral-300: #d4d4d8;
+  --color-neutral-400: #a1a1aa;
+  --color-neutral-500: #71717a;
+  --color-neutral-600: #52525b;
+  --color-neutral-700: #3f3f46;
+  --color-neutral-800: #27272a;
+  --color-neutral-900: #18181b;
+  --color-text: var(--color-neutral-800);
+  --color-text-inverted: #fff;
 
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  font-weight: 400;
   font-size: 1rem;
+  font-weight: 400;
 }
 
 .h1,

diff --git a/src/shared/ui/Button/index.tsx b/src/shared/ui/Button/index.tsx
@@ -0,0 +1,35 @@
+import cn from 'classnames'
+import { JSXInternal } from 'node_modules/preact/src/jsx'
+import { ComponentChild } from 'preact'
+
+import styles from './styles.module.scss'
+
+interface Props extends JSXInternal.HTMLAttributes<HTMLButtonElement> {
+  startIcon?: ComponentChild
+  endIcon?: ComponentChild
+  variant?: 'primary' | 'secondary'
+  color?: 'accent' | 'success' | 'error' | 'info'
+}
+
+export const Button = ({
+  children,
+  startIcon,
+  endIcon,
+  variant = 'primary',
+  color = 'accent',
+  ...rest
+}: Props) => {
+  const buttonClass = cn(
+    styles.button,
+    styles[`button--variant-${variant}`],
+    styles[`button--color-${color}`],
+  )
+
+  return (
+    <button type="button" className={buttonClass} {...rest}>
+      {startIcon}
+      {children}
+      {endIcon}
+    </button>
+  )
+}
diff --git a/src/shared/ui/Button/styles.module.scss b/src/shared/ui/Button/styles.module.scss
@@ -0,0 +1,96 @@
+.button {
+  display: flex;
+  gap: var(--spacing-1);
+  align-items: center;
+  padding: var(--spacing-2);
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid;
+  border-radius: var(--radius-1);
+  transition: border-color 0.25s;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: var(--outline) solid;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  &--variant {
+    &-primary {
+      color: var(--color-text-inverted);
+      background-color: var(--background);
+      border-color: var(--background);
+
+      &:disabled {
+        background-color: var(--background-disabled);
+        border-color: var(--background-disabled);
+      }
+
+      &:focus,
+      &:focus-visible {
+        border-color: var(--accent-color);
+        outline-color: var(--accent-color);
+      }
+
+      &:hover:where(:not(:disabled)) {
+        border-color: var(--accent-color);
+      }
+    }
+
+    &-secondary {
+      color: var(--accent-color);
+      background-color: transparent;
+      border-color: var(--accent-color);
+
+      &:disabled {
+        color: var(--background-disabled);
+        border-color: var(--background-disabled);
+      }
+
+      &:focus,
+      &:focus-visible {
+        border-color: var(--accent-color);
+        outline-color: var(--accent-color);
+      }
+
+      &:hover:where(:not(:disabled)) {
+        border-color: var(--accent-color);
+      }
+    }
+  }
+
+  &--color {
+    &-accent {
+      --background: var(--color-brand-500);
+      --background-disabled: var(--color-brand-300);
+      --accent-color: var(--color-brand-700);
+    }
+
+    &-success {
+      --background: var(--color-success-500);
+      --background-disabled: var(--color-success-300);
+      --accent-color: var(--color-success-700);
+    }
+
+    &-error {
+      --background: var(--color-error-500);
+      --background-disabled: var(--color-error-300);
+      --accent-color: var(--color-error-700);
+    }
+
+    &-info {
+      --background: var(--color-info-500);
+      --background-disabled: var(--color-info-300);
+      --accent-color: var(--color-info-700);
+    }
+  }
+}