CSS ComponentThe latest version of this package is: 0.1.1, Opens in new window

The Relax color palette is created with effiency in mind, and with inheritance with the core If Visual Identity

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-relax-core/color@0.1.1

Tokens

Color tokens

Base Color tokens

Name	Value	Is aliased in
rlx-color-base-grey-100`rgb(255, 255, 255)`	`rgb(255, 255, 255)`
rlx-color-base-grey-200`rgb(244, 244, 244)`	`rgb(244, 244, 244)`
rlx-color-base-grey-300`rgb(217, 217, 217)`	`rgb(217, 217, 217)`
rlx-color-base-grey-400`rgb(190, 190, 190)`	`rgb(190, 190, 190)`
rlx-color-base-grey-500`rgb(92, 92, 92)`	`rgb(92, 92, 92)`
rlx-color-base-grey-600`rgb(51, 51, 51)`	`rgb(51, 51, 51)`
rlx-color-base-brown-100`rgb(235, 227, 220)`	`rgb(235, 227, 220)`
rlx-color-base-brown-200`rgb(221, 208, 197)`	`rgb(221, 208, 197)`
rlx-color-base-brown-300`rgb(213, 196, 183)`	`rgb(213, 196, 183)`
rlx-color-base-brown-400`rgb(176, 162, 152)`	`rgb(176, 162, 152)`
rlx-color-base-brown-500`rgb(143, 131, 119)`	`rgb(143, 131, 119)`
rlx-color-base-brown-600`rgb(110, 100, 90)`	`rgb(110, 100, 90)`
rlx-color-base-brown-700`rgb(51, 42, 38)`	`rgb(51, 42, 38)`
rlx-color-base-red-100`rgb(240, 96, 100)`	`rgb(240, 96, 100)`
rlx-color-base-red-200`rgb(202, 60, 62)`	`rgb(202, 60, 62)`
rlx-color-base-pink-100`rgb(248, 198, 201)`	`rgb(248, 198, 201)`
rlx-color-base-pink-200`rgb(241, 108, 143)`	`rgb(241, 108, 143)`
rlx-color-base-yellow-100`rgb(255, 240, 158)`	`rgb(255, 240, 158)`
rlx-color-base-yellow-200`rgb(242, 184, 122)`	`rgb(242, 184, 122)`
rlx-color-base-turqois-100`rgb(208, 230, 195)`	`rgb(208, 230, 195)`
rlx-color-base-turqois-200`rgb(118, 187, 178)`	`rgb(118, 187, 178)`
rlx-color-base-green-100`rgb(145, 209, 105)`	`rgb(145, 209, 105)`
rlx-color-base-green-200`rgb(105, 156, 85)`	`rgb(105, 156, 85)`
rlx-color-base-blue-100`rgb(186, 221, 231)`	`rgb(186, 221, 231)`
rlx-color-base-blue-200`rgb(167, 192, 242)`	`rgb(167, 192, 242)`
rlx-color-base-blue-300`rgb(104, 170, 200)`	`rgb(104, 170, 200)`
rlx-color-base-purple-100`rgb(199, 144, 193)`	`rgb(199, 144, 193)`
rlx-color-base-purple-200`rgb(140, 57, 128)`	`rgb(140, 57, 128)`
rlx-color-base-slate-100`rgb(88, 94, 106)`	`rgb(88, 94, 106)`
rlx-color-base-slate-200`rgb(51, 58, 72)`	`rgb(51, 58, 72)`
rlx-color-base-slate-300`rgb(37, 45, 60)`	`rgb(37, 45, 60)`
rlx-color-base-slate-400`rgb(25, 33, 48)`	`rgb(25, 33, 48)`
rlx-color-base-slate-500`rgb(20, 28, 44)`	`rgb(20, 28, 44)`
rlx-color-base-beige-100`rgb(250, 249, 247)`	`rgb(250, 249, 247)`
rlx-color-base-beige-200`rgb(246, 243, 240)`	`rgb(246, 243, 240)`
rlx-color-base-beige-300`rgb(241, 236, 232)`	`rgb(241, 236, 232)`
rlx-color-base-beige-400`rgb(237, 230, 225)`	`rgb(237, 230, 225)`
rlx-color-base-beige-500`rgb(232, 224, 217)`	`rgb(232, 224, 217)`

Background Color tokens

Name	Value	Is aliased in
rlx-color-background-100-light	`rgb(250, 249, 247)`
rlx-color-background-100-dark	`rgb(20, 28, 44)`
rlx-color-background-200-light	`rgb(246, 243, 240)`
rlx-color-background-200-dark	`rgb(25, 33, 48)`
rlx-color-background-300-light	`rgb(241, 236, 232)`
rlx-color-background-300-dark	`rgb(37, 45, 60)`
rlx-color-background-400-light	`rgb(237, 230, 225)`
rlx-color-background-400-dark	`rgb(51, 58, 72)`
rlx-color-background-500-light	`rgb(232, 224, 217)`
rlx-color-background-500-dark	`rgb(88, 94, 106)`

Infographic Color tokens

Name	Value	Is aliased in
rlx-color-infographic-100	`rgb(240, 96, 100)`
rlx-color-infographic-200	`rgb(202, 60, 62)`
rlx-color-infographic-300	`rgb(145, 209, 105)`
rlx-color-infographic-400	`rgb(105, 156, 85)`
rlx-color-infographic-500	`rgb(186, 221, 231)`
rlx-color-infographic-600	`rgb(104, 170, 200)`
rlx-color-infographic-700	`rgb(208, 230, 195)`
rlx-color-infographic-800	`rgb(118, 187, 178)`
rlx-color-infographic-900	`rgb(248, 198, 201)`
rlx-color-infographic-1000	`rgb(241, 108, 143)`
rlx-color-infographic-1100	`rgb(199, 144, 193)`
rlx-color-infographic-1200	`rgb(140, 57, 128)`
rlx-color-infographic-1300	`rgb(255, 240, 158)`
rlx-color-infographic-1400	`rgb(242, 184, 122)`

States Color tokens

Name	Value	Is aliased in
rlx-color-states-disabled	`rgba(110,98,94,0.3)`
rlx-color-states-active	`rgb(0, 64, 128)`
rlx-color-states-hover	`rgb(0, 64, 128)`
rlx-color-states-focus	`rgb(0, 84, 240)`

Text Color tokens

Name	Value	Is aliased in
rlx-color-text-subtle	`rgb(110, 98, 94)`
rlx-color-text-primary-on-light	`rgb(51, 30, 17)`
rlx-color-text-primary-on-dark	`rgb(250, 249, 247)`
rlx-color-text-primary-normal	`rgb(51, 30, 17)`
rlx-color-text-primary-inverse	`rgb(250, 249, 247)`