Refactor Button to token system

thunderstore-io · Oct 11, 2024 · 60d4195 · 60d4195
1 parent 0b492c5
commit 60d4195
Show file tree

Hide file tree

Showing 4 changed files with 423 additions and 184 deletions.
diff --git a/packages/cyberstorm-styles/src/styles/fonts.css b/packages/cyberstorm-styles/src/styles/fonts.css
@@ -15,3 +15,19 @@
   font-family: Hubot-Sans;
   src: url("../fonts/HubotSans.ttf") format("truetype-variations");
 }
+
+:root {
+  --global--line-height--auto: normal;
+  --global--line-height--body: 170%;
+  --global--font-size--xxs: 0.625rem;
+  --global--font-size--xs: 0.75rem;
+  --global--font-size--s: 0.875rem;
+  --global--font-size--m: 1rem;
+  --global--font-size--l: 1.5rem;
+  --global--font-weight--regular: 400;
+  --global--font-weight--medium: 500;
+  --global--font-weight--semiBold: 600;
+  --global--font-weight--bold: 700;
+  --global--font-family--inter: inter, sans-serif;
+  --global--font-family--hubot: Hubot-Sans, sans-serif;
+}
diff --git a/packages/cyberstorm/src/newComponents/Button/Button.tsx b/packages/cyberstorm/src/newComponents/Button/Button.tsx
@@ -10,31 +10,36 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { NewIcon } from "../..";
 
-interface ButtonProps extends Omit<ActionableButtonProps, "primitiveType"> {
+interface Modifiers {
+  dimmed?: boolean;
+  subtle?: boolean;
+  disabled?: boolean;
+}
+
+interface ButtonProps extends Omit<ActionableButtonProps, "primitiveType" | "csVariant">, Modifiers {
   csVariant?:
-    | "default"
-    | "defaultPeek"
     | "primary"
     | "secondary"
     | "tertiary"
-    | "minimal"
     | "accent"
-    | "special";
+    | "special"
+    | "info"
+    | "success"
+    | "warning"
+    | "danger";
   csSize?: "xs" | "s" | "m" | "l";
 }
 
 interface IconButtonProps
   extends Omit<
     ActionableButtonProps,
     "primitiveType" | "csVariant" | "csSize" | "children"
-  > {
+  >, Modifiers {
   csVariant?:
-    | "default"
-    | "defaultPeek"
     | "primary"
     | "secondary"
     | "tertiary"
-    | "tertiaryDimmed"
+    | "danger"
     | "minimal";
   csSize?: "xs" | "s" | "m";
   icon: IconProp;
@@ -51,7 +56,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
     if (icon) {
       const {
         csVariant = "default",
-        csColor = "purple",
         csSize = "m",
         ...fProps
       } = forwardedProps as IconButtonProps;
@@ -61,9 +65,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
           primitiveType="button"
           {...fProps}
           rootClasses={classnames(iconButtonStyles.iconButton, rootClasses)}
-          csColor={csColor}
-          csSize={csSize}
-          csVariant={csVariant}
           ref={forwardedRef}
         >
           <NewIcon csMode="inline" noWrapper>
@@ -75,36 +76,21 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
 
     const {
       children,
-      csVariant = "default",
-      csColor = "purple",
+      csVariant = "primary",
       csSize = "m",
       ...fProps
     } = forwardedProps as ButtonProps;
 
-    // TODO: Turn into a proper resolver function
-    // Same logic is in LinkButton too
-    const fontStyles = (size: typeof csSize) => {
-      if (size === "xs") {
-        return ["fontSizeXS", "fontWeightBold", "lineHeightAuto"];
-      } else if (size === "s") {
-        return ["fontSizeS", "fontWeightBold", "lineHeightAuto"];
-      } else {
-        return ["fontSizeM", "fontWeightBold", "lineHeightAuto"];
-      }
-    };
-
     return (
       <Actionable
         primitiveType="button"
         {...fProps}
         rootClasses={classnames(
-          ...(csTextStyles ? csTextStyles : fontStyles(csSize)),
           buttonStyles.button,
+          getSize(csSize),
+          getVariant(csVariant),
           rootClasses
         )}
-        csColor={csColor}
-        csSize={csSize}
-        csVariant={csVariant}
         ref={forwardedRef}
       >
         {children}
@@ -114,3 +100,26 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonComponentProps>(
 );
 
 Button.displayName = "Button";
+
+const getVariant = (scheme: string) => {
+  return {
+    primary: buttonStyles.button__primary,
+    secondary: buttonStyles.button__secondary,
+    tertiary: buttonStyles.button__tertiary,
+    accent: buttonStyles.button__accent,
+    special: buttonStyles.button__special,
+    info: buttonStyles.button__info,
+    success: buttonStyles.button__success,
+    warning: buttonStyles.button__warning,
+    danger: buttonStyles.button__danger,
+  }[scheme];
+};
+
+const getSize = (scheme: string) => {
+  return {
+    xs: buttonStyles["button--size-xs"],
+    s: buttonStyles["button--size-s"],
+    m: buttonStyles["button--size-m"],
+    l: buttonStyles["button--size-l"],
+  }[scheme];
+};