Merge pull request #111 from subquery/feat/enhance-typography

feat: enhance typography
subquery · Apr 24, 2024 · 0f67800 · 0f67800
2 parents 0c1ed89 + 4da943f
commit 0f67800
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/components/common/typography/Typography.less b/components/common/typography/Typography.less
@@ -70,13 +70,18 @@
   &__success {
     color: var(--sq-success);
   }
+
+  &__info {
+    color: var(--sq-blue600);
+  }
 
   &__warning {
     color: var(--sq-warning);
   }
 
   &__danger {
     color: var(--sq-error);
+
   }
 
   &__secondary {
@@ -140,22 +145,61 @@
     }
   }
 
+  &--disabled {
+    color: var(--sq-gray400);
+    cursor: not-allowed;
+  }
+
   &-link {
     cursor: pointer;
     .subql-typography {
       transition: .1s all linear;
       color: var(--sq-gray600);
+
+      &__info {
+        color: var(--sq-blue600);
+      }
+
+      &__danger {
+        color: var(--sq-error);
+      }
+
+      &--disabled {
+        color: var(--sq-gray400);
+      }
     }
+
     &:hover {
       .subql-typography {
         color: var(--sq-blue400);
+
+        &__info {
+          color: var(--sq-blue400);
+        }
+
+        &__danger {
+          color: var(--sq-error-hover);
+        }
+
+        &--disabled {
+          color: var(--sq-gray400);
+        }
       }
     }
 
     &--active {
       .subql-typography {
         color: var(--sq-blue400);
+
+        &__info {
+          color: var(--sq-blue400);
+        }
+
+        &__danger {
+          color: var(--sq-error-hover);
+        }
       }
     }
+
   }
 }
diff --git a/components/common/typography/Typography.tsx b/components/common/typography/Typography.tsx
@@ -11,17 +11,19 @@ import { attachPropertiesToComponent } from 'components/utilities/attachProperti
 
 export type TypographProps = {
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'large' | 'text' | 'medium' | 'small' | 'overline';
-  type?: 'default' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+  type?: 'default' | 'info' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
   weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
   tooltip?: string;
   className?: string;
   tooltipIcon?: React.ReactNode;
+  disabled?: boolean;
 } & React.HTMLProps<HTMLParagraphElement>;
 
 export interface LinkProps extends TypographProps {
   href?: string;
   children?: React.ReactNode;
   active?: boolean;
+  type?: 'default' | 'info' | 'danger';
 }
 
 const bem = createBEM('subql-typography');
@@ -35,6 +37,7 @@ const TypographyInner: React.FC<TypographProps> = ({
   tooltip,
   tooltipIcon,
   className,
+  disabled,
   ...htmlProps
 }) => {
   const { theme } = React.useContext(Context);
@@ -48,6 +51,7 @@ const TypographyInner: React.FC<TypographProps> = ({
         bem(variant),
         bem(type),
         bem(`w${weight}`),
+        bem({ disabled }),
         className,
       )}
     >
@@ -59,7 +63,7 @@ const TypographyInner: React.FC<TypographProps> = ({
   }
   return (
     <Tooltip title={tooltip} placement="topLeft" className={tooltip && clsx(bem({ tooltip: 'tooltip' }))}>
-      <Space>
+      <Space className={clsx(bem({ space: 'space' }))}>
         {inner()}
 
         {tooltipIcon}

diff --git a/components/styles.css b/components/styles.css
@@ -62,6 +62,7 @@
   --sq-warning: #f87c4f;
   --sq-error: #f1585b;
   --sq-info: #3aa0ff;
+  --sq-error-hover: #f37174;
 
   /* RGB versions to allow adding opacity */
   --sq-primary-blue-rgb: 67, 136, 221;
@@ -88,6 +89,8 @@
   --sq-font-body: 16px;
   --sq-line-body: 24px;
 
+  --sq-border-radius: 8px;
+
   /* Family */
   --sq-font-family: 'Inter', sans-serif;
   --sq-font-family-header: 'Futura';