Merge pull request #1201 from thunderstore-io/09-12-Seprate_text_styl…

…es_to_own_system Seprate text styles to own system
thunderstore-io · Sep 12, 2024 · a24cd92 · a24cd92
2 parents 3ea8af2 + 53927d8
commit a24cd92
Show file tree

Hide file tree

Showing 30 changed files with 339 additions and 407 deletions.
diff --git a/apps/cyberstorm-remix/app/communities/communities.tsx b/apps/cyberstorm-remix/app/communities/communities.tsx
@@ -126,9 +126,7 @@ export default function CommunitiesPage() {
         <Container
           rootClasses={searchAndOrderStyles.root}
           csVariant="tertiary"
-          csSize="s"
-          csWeight="bold"
-          csMode="auto"
+          csTextStyles={["fontWeightBold", "lineHeightAuto", "fontSizeS"]}
         >
           <div className={searchAndOrderStyles.searchTextInput}>
             Search

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/DevelopersDropDown.tsx
@@ -14,7 +14,7 @@ export function DevelopersDropDown() {
     <>
       <DropDown
         trigger={
-          <NewButton size="l" variant="tertiary" color="surface">
+          <NewButton csSize="l" csVariant="tertiary" csColor="surface">
             Developers
             <Icon inline>
               <FontAwesomeIcon icon={faCaretDown} />

diff --git a/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx b/apps/cyberstorm-remix/cyberstorm/navigation/Navigation.tsx
@@ -36,7 +36,6 @@ export function Navigation() {
                 rootClasses={styles.logoWrapper}
                 csVariant="default"
                 csColor="cyber-green"
-                csMode="body"
               >
                 <Icon noWrapper>
                   <ThunderstoreLogo />

diff --git a/packages/cyberstorm-styles/src/index.tsx b/packages/cyberstorm-styles/src/index.tsx
@@ -3,3 +3,4 @@ import "./styles/colors.css";
 import "./styles/fonts.css";
 import "./styles/theme.css";
 import "./styles/globals.css";
+import "./styles/common.css";
diff --git a/packages/cyberstorm-styles/src/styles/common.css b/packages/cyberstorm-styles/src/styles/common.css
@@ -0,0 +1,47 @@
+.lineHeightAuto {
+  line-height: normal;
+}
+
+.lineHeightBody {
+  line-height: 170%;
+}
+
+.fontSizeXS {
+  font-size: 0.75rem;
+}
+
+.fontSizeS {
+  font-size: 0.875rem;
+}
+
+.fontSizeM {
+  font-size: 1rem;
+}
+
+.fontSizeL {
+  font-size: 1.5rem;
+}
+
+.fontWeightRegular {
+  font-weight: 400;
+}
+
+.fontWeightMedium {
+  font-weight: 500;
+}
+
+.fontWeightSemiBold {
+  font-weight: 600;
+}
+
+.fontWeightBold {
+  font-weight: 700;
+}
+
+.fontFamilyInter {
+  font-family: inter, sans-serif;
+}
+
+.fontFamilyHubot {
+  font-family: Hubot-Sans, sans-serif;
+}
diff --git a/packages/cyberstorm-styles/src/styles/globals.css b/packages/cyberstorm-styles/src/styles/globals.css
@@ -116,7 +116,7 @@ a {
 body {
   color: var(--color-text--default);
   font: var(--font-body);
-  line-height: var(--line-height--m);
+  line-height: normal;
   background-color: var(--color-background);
 }
 

diff --git a/packages/cyberstorm/src/components/Footer/Footer.module.css b/packages/cyberstorm/src/components/Footer/Footer.module.css
@@ -109,8 +109,8 @@
 }
 
 .adDescription {
-  max-width: 28rem;
-  font-weight: 600;
+  max-width: 29rem;
+  font-weight: 400;
   font-size: 1.125rem;
   line-height: 160%;
 }

diff --git a/packages/cyberstorm/src/components/Footer/Footer.tsx b/packages/cyberstorm/src/components/Footer/Footer.tsx
@@ -58,7 +58,7 @@ export function Footer() {
                   <Heading variant="primary" mode="heading" level="4">
                     Thunderstore
                   </Heading>
-                  <List.Root csMode="body">
+                  <List.Root csTextStyles={["lineHeightBody", "fontSizeS"]}>
                     <List.ListItem>
                       <NewLink
                         primitiveType="cyberstormLink"
@@ -74,7 +74,7 @@ export function Footer() {
                   <Heading variant="primary" mode="heading" level="4">
                     Developers
                   </Heading>
-                  <List.Root csMode="body">
+                  <List.Root csTextStyles={["lineHeightBody", "fontSizeS"]}>
                     <List.ListItem>
                       <NewLink
                         primitiveType="link"
@@ -174,9 +174,7 @@ export function Footer() {
         <div className={styles.footnoteInner}>
           <Container
             csVariant="accent"
-            csMode="body"
-            csSize="xs"
-            csWeight="regular"
+            csTextStyles={["lineHeightBody", "fontWeightRegular", "fontSizeXS"]}
             rootClasses={styles.footnoteCopyright}
           >
             © 2024 Thunderstore and contributors. This page is{" "}

diff --git a/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx b/packages/cyberstorm/src/primitiveComponents/Actionable/Actionable.tsx
@@ -1,116 +1,72 @@
-import { PropsWithChildren } from "react";
 import {
   CyberstormLink,
   CyberstormLinkIds,
 } from "../../components/Links/Links";
 import React from "react";
-import { Tooltip } from "../../components/Tooltip/Tooltip";
 import { ThunderstoreLinkProps } from "../../components/Links/LinkingProvider";
+import { PrimitiveComponentDefaultProps, TooltipWrapper } from "../utils/utils";
+import { classnames } from "../../utils/utils";
 
-type variants =
-  | "default"
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "accent"
-  | "special";
-type colors =
-  | "surface"
-  | "surface-alpha"
-  | "blue"
-  | "pink"
-  | "red"
-  | "orange"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "cyber-green";
-type sizes = "xs" | "s" | "m" | "l";
-type modes = "auto" | "body";
-type weights = "regular" | "medium" | "semiBold" | "bold";
-
-export interface ActionableDefaultProps extends PropsWithChildren {
-  csColor?: colors;
-  csSize?: sizes;
-  csVariant?: variants;
-  csMode?: modes;
-  csWeight?: weights;
-  rootClasses?: string;
-  tooltipText?: string;
-  tooltipSide?: "bottom" | "left" | "right" | "top";
-}
-
-interface ButtonProps
+export interface ActionableButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    ActionableDefaultProps {
+    PrimitiveComponentDefaultProps {
   primitiveType: "button";
 }
 
 export interface ActionableLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    ActionableDefaultProps {
+    PrimitiveComponentDefaultProps {
   primitiveType: "link";
   href: string;
 }
 
 export interface ActionableCyberstormLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
-    ActionableDefaultProps,
+    PrimitiveComponentDefaultProps,
     ThunderstoreLinkProps {
   primitiveType: "cyberstormLink";
   linkId: CyberstormLinkIds;
 }
 
-interface TooltipWrapperProps extends PropsWithChildren {
-  tooltipText?: string;
-  side?: "bottom" | "left" | "right" | "top";
-}
-
-const TooltipWrapper = (props: TooltipWrapperProps) =>
-  props.tooltipText ? (
-    <Tooltip content={props.tooltipText} side={props.side ?? "bottom"}>
-      {props.children}
-    </Tooltip>
-  ) : (
-    <>{props.children}</>
-  );
-
 export const Actionable = React.forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
-  ButtonProps | ActionableLinkProps | ActionableCyberstormLinkProps
+  ActionableButtonProps | ActionableLinkProps | ActionableCyberstormLinkProps
 >(
   (
-    props: ButtonProps | ActionableLinkProps | ActionableCyberstormLinkProps,
+    props:
+      | ActionableButtonProps
+      | ActionableLinkProps
+      | ActionableCyberstormLinkProps,
     forwardedRef
   ) => {
     const {
       children,
       primitiveType,
       rootClasses,
       csColor,
-      csSize,
       csVariant,
-      csMode,
-      csWeight,
+      csSize,
+      csTextStyles,
       tooltipText,
       tooltipSide,
       ...forwardedProps
     } = props;
 
     if (primitiveType === "button") {
       const fRef = forwardedRef as React.ForwardedRef<HTMLButtonElement>;
-      const fProps = forwardedProps as ButtonProps;
+      const fProps = forwardedProps as ActionableButtonProps;
 
       return (
-        <TooltipWrapper tooltipText={tooltipText} side={tooltipSide}>
+        <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
           <button
             {...fProps}
-            className={rootClasses}
+            className={classnames(
+              ...(csTextStyles ? csTextStyles : []),
+              rootClasses
+            )}
             data-color={csColor}
             data-size={csSize}
             data-variant={csVariant}
-            data-mode={csMode}
-            data-weight={csWeight}
             ref={fRef}
           >
             {children}
@@ -122,15 +78,16 @@ export const Actionable = React.forwardRef<
       const fRef = forwardedRef as React.ForwardedRef<HTMLAnchorElement>;
       const fProps = forwardedProps as ActionableLinkProps;
       return (
-        <TooltipWrapper tooltipText={tooltipText} side={tooltipSide}>
+        <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
           <a
             {...fProps}
-            className={rootClasses}
+            className={classnames(
+              ...(csTextStyles ? csTextStyles : []),
+              rootClasses
+            )}
             data-color={csColor}
-            data-size={csSize}
             data-variant={csVariant}
-            data-mode={csMode}
-            data-weight={csWeight}
+            data-size={csSize}
             ref={fRef}
           >
             {children}
@@ -143,15 +100,16 @@ export const Actionable = React.forwardRef<
       const { linkId, ...strippedForwardedProps } =
         forwardedProps as ActionableCyberstormLinkProps;
       return (
-        <TooltipWrapper tooltipText={tooltipText} side={tooltipSide}>
+        <TooltipWrapper tooltipText={tooltipText} tooltipSide={tooltipSide}>
           <CyberstormLink
             {...strippedForwardedProps}
-            className={rootClasses}
+            className={classnames(
+              ...(csTextStyles ? csTextStyles : []),
+              rootClasses
+            )}
             data-color={csColor}
-            data-size={csSize}
             data-variant={csVariant}
-            data-mode={csMode}
-            data-weight={csWeight}
+            data-size={csSize}
             linkId={linkId}
             ref={fRef}
           >

diff --git a/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css b/packages/cyberstorm/src/primitiveComponents/Frame/Display.module.css
@@ -19,7 +19,7 @@ h2.display {
 }
 
 h3.display {
-  font-weight: var(--font-weight-bold);
+  font-weight: 700;
   font-size: calc(var(--space--38) * var(--scaling, 1));
   font-family: Hubot-Sans, sans-serif;
 }