chore: compose styles of button

umputun · Jan 13, 2024 · 3b1abfe · 3b1abfe
1 parent cbd7386
commit 3b1abfe
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 65 deletions.
diff --git a/frontend/apps/remark42/app/components/button/_kind/_link/button_kind_link.css b/frontend/apps/remark42/app/components/button/_kind/_link/button_kind_link.css
diff --git a/frontend/apps/remark42/app/components/button/_kind/_primary/button_kind_primary.css b/frontend/apps/remark42/app/components/button/_kind/_primary/button_kind_primary.css
diff --git a/frontend/apps/remark42/app/components/button/_kind/_secondary/button_kind_secondary.css b/frontend/apps/remark42/app/components/button/_kind/_secondary/button_kind_secondary.css
diff --git a/frontend/apps/remark42/app/components/button/_size/_large/button_size_large.css b/frontend/apps/remark42/app/components/button/_size/_large/button_size_large.css
diff --git a/frontend/apps/remark42/app/components/button/_size/_middle/button_size_middle.css b/frontend/apps/remark42/app/components/button/_size/_middle/button_size_middle.css
diff --git a/frontend/apps/remark42/app/components/button/_theme/_dark/button_theme_dark.css b/frontend/apps/remark42/app/components/button/_theme/_dark/button_theme_dark.css
diff --git a/frontend/apps/remark42/app/components/button/button.css b/frontend/apps/remark42/app/components/button/button.css
@@ -19,3 +19,65 @@
     cursor: default;
   }
 }
+
+.button_kind_primary {
+  background: var(--color15);
+  color: var(--color6);
+
+  &:hover {
+    background: var(--color33);
+  }
+
+  &:hover:disabled {
+    background: var(--color15);
+  }
+}
+
+.button_kind_secondary {
+  background: var(--color6);
+  color: inherit;
+
+  &:hover {
+    box-shadow: inset 0 0 0 2px var(--color33);
+  }
+}
+
+.button_kind_link {
+  background: transparent;
+  font-weight: 600;
+  color: var(--color9);
+
+  &:hover {
+    color: var(--color33);
+  }
+
+  &:disabled,
+  &:hover:disabled {
+    color: var(--color9);
+  }
+}
+
+.button_size_large {
+  height: 36px;
+  padding: 0 12px;
+  font-size: 16px;
+}
+
+.button_size_middle {
+  height: 2rem;
+  padding: 0 12px;
+}
+
+.dark .button {
+  &.button_kind_secondary {
+    background: var(--color8);
+    color: var(--color20);
+  }
+
+  &.button_kind_link {
+    &:disabled,
+    &:hover:disabled {
+      color: var(--color6);
+    }
+  }
+}
diff --git a/frontend/apps/remark42/app/components/button/button.tsx b/frontend/apps/remark42/app/components/button/button.tsx
@@ -18,7 +18,7 @@ export type ButtonProps = Omit<JSX.HTMLAttributes, 'size' | 'className'> & {
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ children, theme, mods, mix, kind, type = 'button', size, className, ...props }, ref) => (
     <button
-      className={clsx(b('button', { mods: { kind, size, theme }, mix }, { ...mods }), className)}
+      className={clsx(b('button', { mods: { kind, size }, mix }, { ...mods }), className)}
       type={type}
       {...props}
       ref={ref}

diff --git a/frontend/apps/remark42/app/components/button/index.ts b/frontend/apps/remark42/app/components/button/index.ts
@@ -1,12 +1,2 @@
 import './button.css';
-
-import './_kind/_link/button_kind_link.css';
-import './_kind/_primary/button_kind_primary.css';
-import './_kind/_secondary/button_kind_secondary.css';
-
-import './_size/_large/button_size_large.css';
-import './_size/_middle/button_size_middle.css';
-
-import './_theme/_dark/button_theme_dark.css';
-
 export { Button } from './button';