feat(button): add button component

src/components/Button/Button.mdx

@@ -5,6 +5,7 @@ route: /button
 ---
 
 import { Playground, Props } from 'docz'
+import { Activity } from '../../index.ts'
 import Button from './Button.tsx'
 
 # Button
@@ -32,12 +33,24 @@ Buttons make common actions more obvious and help users more easily perform them
   <Button type="secondary">Click me</Button>
 </Playground>
 
+## Button disabled
+
+<Playground>
+  <Button isDisabled>Click me</Button>
+</Playground>
+
 ## Button loading
 
 <Playground>
   <Button isLoading>Click me</Button>
 </Playground>
 
+## Button with icon
+
+<Playground>
+  <Button suffixIcon={<Activity size={14}/>}>Click me</Button>
+</Playground>
+
 ## API
 
 <Props of={Button} />

src/components/Button/Button.module.css

@@ -1,6 +1,6 @@
 .base {
-    border-radius: var(--button-border-radius);
-    line-height: var(--button-line-height);
+    border-radius: var(--border-radius-small);
+    line-height: 32px;
     font-size: 14px;
     padding: 0 16px;
     border: none;
@@ -10,25 +10,51 @@
     align-items: center;
 }
 
-.prefix
+.typePrimary:hover {
+    background-color: rgba(67, 90, 111, 0.1);
+}
 
-.typePrimary {
-    background-color: var(--button-primary-background);
+.typeSecondary:hover {
+    background-color: rgba(67, 90, 111, 0.06);
 }
 
-.typeScondary {
-  background-color: var(--button-primary-background);
+.typePrimary:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-primary-contrast);
 }
 
-.typePrimary:hover {
-    background-color: rgba(67, 90, 111, 0.1);
+.typeSecondary:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--color-primary-contrast);
 }
 
-.typeSecondary:hover {
-    background-color: rgba(67, 90, 111, 0.06);
+.typePrimary, .typePrimary:active {
+  background-color: var(--color-primary);
+}
+
+.typeSecondary, .typeSecondary:active {
+background-color: var(--color-secondary);
+}
+
+.base:disabled {
+  color: var(--color-disabled-font);
+  background-color: var(--color-disabled);
+  cursor: default;
+}
+
+.label {
+  text-align: center;
+}
+
+.labelWithPrefixIcon {
+  margin-left: 8px;
+}
+
+.labelWithSuffixIcon {
+  margin-right: 8px;
 }
 
 .spinner {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
 }

src/components/Button/Button.tsx

@@ -27,20 +27,25 @@ const Button: React.FC<Props> = ({
   name,
 }: Props) => {
   const buttonClassNames = classNames(styles.base, {
-    [styles.typePrimary]: type === 'primary',
-    [styles.typeSecondary]: type === 'secondary',
+    [styles.typePrimary]: (!isDisabled || !isLoading) && type === 'primary',
+    [styles.typeSecondary]: (!isDisabled || !isLoading) && type === 'secondary',
+  });
+
+  const labelClassNames = classNames(styles.label, {
+    [styles.labelWithPrefixIcon]: Boolean(prefixIcon) || isLoading,
+    [styles.labelWithSuffixIcon]: Boolean(suffixIcon),
   });
 
   return (
     <button
-      disabled={isDisabled}
+      disabled={isDisabled || isLoading}
       className={buttonClassNames}
       type="button"
       onClick={onClick}
       data-testid={name}
     >
       {isLoading ? <Spinner className={styles.spinner} /> : prefixIcon}
-      {children}
+      <span className={labelClassNames}>{children}</span>
       {isLoading || suffixIcon}
     </button>
   );

src/components/Input/Input.module.css

@@ -18,15 +18,15 @@
 
 .input:focus {
   outline: none;
-  box-shadow: 0 0 0 4px var(--color-primary-light);
+  box-shadow: 0 0 0 2px var(--color-primary-contrast);
 }
 
 .containsError {
   border-color: var(--color-error);
 }
 
 .containsError:focus {
-  box-shadow: 0 0 0 4px var(--color-error-light);
+  box-shadow: 0 0 0 2px var(--color-error-contrast);
 }
 
 .errorMessage {

src/components/utils/Spinner/Spinner.module.css

@@ -24,7 +24,7 @@
 .circle {
   stroke-dashoffset: 6;
   stroke-dasharray: 300;
-  stroke-width: 12;
+  stroke-width: 16;
   stroke-miterlimit: 10;
   stroke-linecap: 10;
   animation: loadingCircleKeyFrames 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;

src/index.css

@@ -3,5 +3,5 @@
 body {
   font-family: var(--font-family);
   font-size: var(--font-size);
-  color: var(--color-neutral-8);
+  color: var(--font-color);
 }

src/theme.css

@@ -1,5 +1,7 @@
 :root {
-  /* Colors */
+  /* ==================
+         Colors
+  ================== */
   --color-neutral-1: #ffffff;
   --color-neutral-2: #f4f4f4;
   --color-neutral-3: #ebebeb;
@@ -10,17 +12,35 @@
   --color-neutral-8: #2e2e2e;
   --color-neutral-9: #000000;
 
-  --color-primary: #f4f4f4;
-  --color-primary-text: #2e2e2e;
-  --color-primary-light: #f4f4f4;
-  --color-primary-light-text: #2e2e2e;
+  --color-error-1:#ffe2e2;
+  --color-error-2: #eb3737;
 
-  --color-error: #eb3737;
-  --color-error-light: #ffe2e2;
+  /* ==================
+         Theme
+  ================== */
+
+  --color-primary: var(--color-neutral-2);
+  --color-primary-text: var(--color-neutral-8);
+  --color-primary-contrast: var(--color-neutral-3);
+  --color-primary-contrast-font: var(--color-neutral-8);
+  --color-primary-hover: var(--color-neutral-3);
+
+  --color-secondary: var(--color-neutral-1);
+  --color-secondary-text: var(--color-neutral-8);
+  --color-secondary-contrast: var(--color-neutral-3);
+  --color-secondary-contrast-font: var(--color-neutral-8);
+  --color-primary-hover: var(--color-neutral-2);
+
+  --color-error: var(--color-error-2);
+  --color-error-contrast: var(--color-error-1);
+
+  --color-disabled: var(--color-neutral-2);
+  --color-disabled-font: var(--color-neutral-5);
 
   /* Font */
   --font-family: Lato, sans-serif;
   --font-size: 14px;
+  --font-color: var(--color-neutral-8);
 
   /* Border */
   --border-radius-small: 3px;