Text

Enums

The Styles Generator module provides the following enums for customizing text styles:

• TextWeight: Enum for defining the weight of the text. Available options are Heavy and Normal.
• TextSize: Enum for specifying the size of the text. Options range from Size1 to Size8.
• TextColors: Enum representing text color options based on predefined color constants.

TextProps

TextProps is an interface that combines various style-related props for text elements. It includes:

• color: Specifies the color of the text. You can use values from the COLORS (@upbound/constants).
• weight: Defines the weight of the text using the TextWeight enum.
• size: Specifies the size of the text using the TextSize enum.

Functions

createTextStyles

This is the main function responsible for generating the complete text styles based on the provided TextProps. It combines the font-weight, font-size, and color styles. The resulting styles are returned as Emotion's SerializedStyles.

How to Use

1. Import the necessary components and enums.

import { SerializedStyles } from '@emotion/react';
import { COLORS, TextProps, TextWeight, TextSize, createTextStyles } from '@upbound/constants';

2. Create a TextProps object with the desired styling options:

const textProps: TextProps = {
  color: COLORS.Neutral[600],
  weight: TextWeight.Heavy,
  size: TextSize.Size3,
};

3. Generate the text styles using the createTextStyles function:

const textStyles: SerializedStyles = createTextStyles(textProps);

4. Apply the generated styles to your text element:

const MyStyledText = styled.p`
  ${textStyles}
`;

Now, the MyStyledText component will have the specified text styles.

Example

Here's an example of how to use the Styles Generator to style a text element:

import { TextProps, TextWeight, TextSize, COLORS, createTextStyles } from '@upbound/constants';

const MyComponent = () => {
  const textProps: TextProps = {
    color: COLORS.Blue.Primary,
    weight: TextWeight.Normal,
    size: TextSize.Size4,
  };

  return (
    <div>
      <p css={createTextStyles(textProps)}>Styled Text Example</p>
    </div>
  );
};

export default MyComponent;