Baselayer UI - React Component Library

1. Exported Colors
2. Exported Text Classes

Exported Colors

The following colors are exported as CSS variables, with each color named in the format --color-tt-COLOR-WEIGHT. For example, --color-tt-gray-500 represents the color gray with a weight of 500.

| Base | | | -------- | ------- | | tt-white | #FEFEFF | | tt-black | #1F1F24 |

| Gradients | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | | ---------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | | tt-gray | #F7F3F7 | #E6E6EB | #D2D2D9 | #BEBDC5 | #A3A2AB | #898891 | #717078 | #5D5C63 | #44434A | #2D2D33 | | tt-blue | #F0F3FE | #DCE2FF | #BFC9FD | #A3B3FF | #798EFC | #5862FF | #3232FF | #1D00F5 | #1006C3 | #0B0489 | | tt-purple | | | | | | | #6C43FF | | | | | tt-fuchsia | | | | | | | | #DC00B4 | | | | tt-red | | | | | | | #FF2846 | | | | | tt-orange | | | #FFC8B9 | | | | #FF5A00 | | | | | tt-green | | | | | | #00D796 | | | | | | tt-brown | | | #E8DFD6 | | | | | | | | | tt-yellow | | | | | | #FFD100 | | | | |

Exported Text Classes

The following text classes are exported as CSS classes, with each font style named in the format text-STYLE. For example, text-body-base represents the base body font style.

| Class | Font Size | Line Height | Letter Spacing | Font Weight | | -------------- | --------- | ----------- | -------------- | ----------- | | text-body-xs | 0.69rem | 1.5rem | normal | 400 | | text-body-sm | 0.833rem | 1.5rem | normal | 400 | | text-body-base | 1rem | 1.5rem | normal | 400 | | text-body-lg | 1.2rem | 1.5rem | normal | 400 | | text-body-xl | 1.44rem | 1.5rem | normal | 400 | | text-body-2xl | 1.73rem | 1.5rem | normal | 400 |

These text classes can be used in your HTML markup to apply the corresponding font styles. For example, to apply the text-body-base style, you can use the class like this:

<p class="text-body-base">This is a paragraph with the base body font style applied.</p>