Tokens

Color

컬러 토큰은 브랜드의 정체성과 사용자 경험을 지원하는 다양한 색상을 정의합니다.

black

#000000--vapor-color-black

white

#FFFFFF--vapor-color-white

gray

#F0F0F5--vapor-color-gray-100

#E8E8EE--vapor-color-gray-200

#E1E1E8--vapor-color-gray-300

#CDCED6--vapor-color-gray-400

#8C8F9F--vapor-color-gray-500

#6C6E7E--vapor-color-gray-600

#525463--vapor-color-gray-700

#3E404C--vapor-color-gray-800

#2B2D36--vapor-color-gray-900

#252730--vapor-color-gray-950

#FFFFFF--vapor-color-gray-000

#F7F7FA--vapor-color-gray-050

red

#F9D6D7--vapor-color-red-100

#F2ADAF--vapor-color-red-200

#EC8587--vapor-color-red-300

#E55C5F--vapor-color-red-400

#DF3337--vapor-color-red-500

#BE2B2F--vapor-color-red-600

#9C2427--vapor-color-red-700

#861F21--vapor-color-red-800

#701A1C--vapor-color-red-900

#FCEBEB--vapor-color-red-050

pink

#F8D5E3--vapor-color-pink-100

#F0ACC7--vapor-color-pink-200

#E982AC--vapor-color-pink-300

#E15990--vapor-color-pink-400

#DA2F74--vapor-color-pink-500

#B92863--vapor-color-pink-600

#992151--vapor-color-pink-700

#831C46--vapor-color-pink-800

#6D183A--vapor-color-pink-900

#FBEAF1--vapor-color-pink-050

grape

#F2D5F9--vapor-color-grape-100

#E5ABF3--vapor-color-grape-200

#D880EE--vapor-color-grape-300

#CB56E8--vapor-color-grape-400

#BE2CE2--vapor-color-grape-500

#A225C0--vapor-color-grape-600

#851F9E--vapor-color-grape-700

#721A88--vapor-color-grape-800

#5F1671--vapor-color-grape-900

#F8EAFC--vapor-color-grape-050

violet

#E7DDFE--vapor-color-violet-100

#CFBBFD--vapor-color-violet-200

#B798FB--vapor-color-violet-300

#9F76FA--vapor-color-violet-400

#8754F9--vapor-color-violet-500

#7347D4--vapor-color-violet-600

#5F3BAE--vapor-color-violet-700

#513295--vapor-color-violet-800

#442A7D--vapor-color-violet-900

#F3EEFE--vapor-color-violet-050

blue

#D4E2FD--vapor-color-blue-100

#AAC5FA--vapor-color-blue-200

#7FA9F8--vapor-color-blue-300

#558CF5--vapor-color-blue-400

#2A6FF3--vapor-color-blue-500

#245ECF--vapor-color-blue-600

#1D4EAA--vapor-color-blue-700

#194392--vapor-color-blue-800

#15387A--vapor-color-blue-900

#EAF1FE--vapor-color-blue-050

cyan

#CFE6EC--vapor-color-cyan-100

#9FCDD9--vapor-color-cyan-200

#6EB3C6--vapor-color-cyan-300

#3E9AB3--vapor-color-cyan-400

#0E81A0--vapor-color-cyan-500

#0C6E88--vapor-color-cyan-600

#0A5A70--vapor-color-cyan-700

#084D60--vapor-color-cyan-800

#074150--vapor-color-cyan-900

#E7F2F5--vapor-color-cyan-050

green

#CEE7E3--vapor-color-green-100

#9DCFC7--vapor-color-green-200

#6CB6AA--vapor-color-green-300

#3B9E8E--vapor-color-green-400

#0A8672--vapor-color-green-500

#097261--vapor-color-green-600

#075E50--vapor-color-green-700

#065044--vapor-color-green-800

#054339--vapor-color-green-900

#E6F3F1--vapor-color-green-050

lime

#E9F6D4--vapor-color-lime-100

#D2EDA9--vapor-color-lime-200

#BCE57D--vapor-color-lime-300

#A5DC52--vapor-color-lime-400

#8FD327--vapor-color-lime-500

#7AB321--vapor-color-lime-600

#64941B--vapor-color-lime-700

#567F17--vapor-color-lime-800

#486A14--vapor-color-lime-900

#F4FBE9--vapor-color-lime-050

yellow

#FEF1CC--vapor-color-yellow-100

#FDE499--vapor-color-yellow-200

#FCD666--vapor-color-yellow-300

#FBC933--vapor-color-yellow-400

#FABB00--vapor-color-yellow-500

#D59F00--vapor-color-yellow-600

#AF8300--vapor-color-yellow-700

#967000--vapor-color-yellow-800

#7D5E00--vapor-color-yellow-900

#FEF8E5--vapor-color-yellow-050

orange

#F6DBCD--vapor-color-orange-100

#EDB69B--vapor-color-orange-200

#E39269--vapor-color-orange-300

#DA6D37--vapor-color-orange-400

#D14905--vapor-color-orange-500

#B23E04--vapor-color-orange-600

#923304--vapor-color-orange-700

#7D2C03--vapor-color-orange-800

#692503--vapor-color-orange-900

#FAEDE6--vapor-color-orange-050

Theming

Vapor UI 테마 시스템을 설정하는 방법

Size

요소의 크기,여백과 관련된 값을 정의하여 일관된 디자인을 유지하는 데 도움을 줍니다.