components
Text
v.1.0.0 | SaturnUsage
The name of the object of tokens to style text is TEXT_STYLES.
You can not change the name of the object of tokens.
text component style can be configured through the variant prop.
Variants
Variants can modify the styles for the text.
The available tokens for each variant are:
- color?: string;
- cursor?: string;
- decoration?: TextDecorationType;
- display?: TextDisplayType;
- $transform?: TextTransformType;
- align?: string;
- weight?: number;
- isDisabled?: boolean;
- font_family: string;
- font_weight?: number | string;
- typography: TypographyMediaType;
123456
const TEXT_STYLES = { [VARIANT]: { font_family?: string; typography?: TypographyMediaType; } }
Types
- TypographyMediaType
123
type TypographyMediaType = { [key in DeviceBreakpointsType]?: TypographyType; };
- TypographyType
123456
type TypographyType = { font_size: string; line_height: string; sup?: { font_size: string }; sub?: { font_size: string }; };
Example
text theme object example:
123456
const TEXT_STYLES = { [VARIANT]: { font_family: 'font_family', typography: 'typography', } }