@touchtech/web-baselayer-ui NPM

Baselayer UI - React Component Library

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: