feat: typography standard colors (#549)

project44 · Sep 23, 2024 · 7dcd35d · 7dcd35d
1 parent fea5821
commit 7dcd35d
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 6 deletions.
diff --git a/.changeset/fluffy-pumpkins-exist.md b/.changeset/fluffy-pumpkins-exist.md
@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react': minor
+---
+
+typography standard colors
diff --git a/packages/react/src/components/FormControl/FormControl.tsx b/packages/react/src/components/FormControl/FormControl.tsx
@@ -73,8 +73,9 @@ export const FormControl = createComponent<FormControlOptions>((props, forwarded
         <Typography
           as="label"
           className="manifest-form-control__label"
-          variant="subtextBold"
           {...labelProps}
+          color="primary"
+          variant="subtextBold"
         >
           {label}
           {!isRequired && (
@@ -90,8 +91,9 @@ export const FormControl = createComponent<FormControlOptions>((props, forwarded
       {helperText && (
         <Typography
           className="manifest-form-control__helper-text"
-          variant="caption"
           {...helperTextProps}
+          color="primary"
+          variant="subtextBold"
         >
           {helperText}
         </Typography>

diff --git a/packages/react/src/components/Typography/Typography.styles.ts b/packages/react/src/components/Typography/Typography.styles.ts
@@ -21,9 +21,15 @@ export const useStyles = css({
       caption: { typography: '$caption' },
       captionBold: { typography: '$caption-bold' },
     },
+    color: {
+      primary: { color: '$text-primary' },
+      secondary: { color: '$text-secondary' },
+      tertiary: { color: '$text-tertiary' },
+    },
   },
 
   defaultVariants: {
     variant: 'body',
+    color: 'primary',
   },
 });
diff --git a/packages/react/src/components/Typography/Typography.tsx b/packages/react/src/components/Typography/Typography.tsx
@@ -11,7 +11,7 @@ export interface TypographyOptions<T extends As = TypographyElement>
   /**
    * The display variant of the text.
    *
-   * @default 'primary'
+   * @default 'body'
    */
   variant?:
     | 'body'
@@ -24,14 +24,28 @@ export interface TypographyOptions<T extends As = TypographyElement>
     | 'subtextBold'
     | 'subtitle'
     | 'title';
+
+  /**
+   * The display color of the text.
+   *
+   * @default 'primary'
+   */
+  color?: 'primary' | 'secondary' | 'tertiary';
 }
 
 export type TypographyProps<T extends As = TypographyElement> = Props<TypographyOptions<T>>;
 
 export const Typography = createComponent<TypographyOptions>((props, forwardedRef) => {
-  const { as: Comp = 'span', className: classNameProp, css, variant = 'body', ...other } = props;
-
-  const { className } = useStyles({ css, variant });
+  const {
+    as: Comp = 'span',
+    className: classNameProp,
+    css,
+    variant = 'body',
+    color = 'primary',
+    ...other
+  } = props;
+
+  const { className } = useStyles({ css, color, variant });
 
   const classes = cx(className, classNameProp, {
     'manifest-typography': true,

diff --git a/packages/react/src/components/Typography/story/Typography.stories.tsx b/packages/react/src/components/Typography/story/Typography.stories.tsx
@@ -0,0 +1,14 @@
+import { Typography } from '../../..';
+
+export default {
+  title: 'Components/Typography',
+  component: Typography,
+};
+
+export function Default() {
+  return <Typography>Lorem ipsum</Typography>;
+}
+
+export function Tertiary() {
+  return <Typography color="tertiary">Lorem ipsum</Typography>;
+}