Global color tokens
On this page
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ffffff
|
Lightest surface (light theme) or primary text (dark theme) |
|
|
|
|
#000000
|
Brand black (avoid using) |
|
|
|
|
0 0% 100%
|
|
||
|
|
255 255 255
|
|
||
|
|
0 0% 0%
|
|
||
|
|
0 0 0
|
|
Accent
Theme Tokens
Base
Responsive accent-base color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-accent-base-on-light on a themable container with a light color palette and --rh-color-accent-base-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-accent-base-on-light, #0066cc), var(--rh-color-accent-base-on-dark, #92c5f9))
|
Responsive |
|
|
|
|
#0066cc
|
Inline link (light theme) |
|
|
|
|
#92c5f9
|
Inline link (dark theme) |
|
Brand
Responsive accent-brand color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-accent-brand-on-light on a themable container with a light color palette and --rh-color-accent-brand-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-accent-brand-on-light, #ee0000), var(--rh-color-accent-brand-on-dark, #ee0000))
|
Responsive |
|
|
|
|
#ee0000
|
Brand red (light theme) |
|
|
|
|
#ee0000
|
Brand red (dark theme) |
|
Brand
Theme Tokens
Red
Responsive brand-red color value. Typically read only - use a themable container e.g. <rh-surface> Resolves to --rh-color-brand-red-on-light on a themable container with a light color palette and --rh-color-brand-red-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-brand-red-on-light, #ee0000), var(--rh-color-brand-red-on-dark, #ee0000))
|
Responsive |
|
|
|
|
#ee0000
|
Brand red on light background |
|
|
|
|
#ee0000
|
Brand red on dark background |
|
|
|
|
#fbc5c5
|
Lightest brand red |
|
|
|
|
#f9a8a8
|
Lighter brand red |
|
|
|
|
#f56e6e
|
Light brand red |
|
|
|
|
#a60000
|
Dark brand red/Brand red hover |
|
|
|
|
#5f0000
|
Darker brand red |
|
|
|
|
#3f0000
|
Darkest brand red |
|
Green
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#e9f7df
|
Alert - success background |
|
|
|
|
#d1f1bb
|
Label - Filled (Green) border color |
|
|
|
|
#afdc8f
|
|
||
|
|
#87bb62
|
|
||
|
|
#63993d
|
|
||
|
|
#3d7317
|
Alert - Success accent |
|
|
|
|
#204d00
|
Alert - Success title text |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
95.00000000000003 60.00000000000004% 92.15686274509804%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-10) h s l / 10%) |
|
|
|
|
233 247 223
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-10) r g b / 10%) |
|
|
|
|
95.55555555555556 65.85365853658536% 83.92156862745097%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-20) h s l / 10%) |
|
|
|
|
209 241 187
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-20) r g b / 10%) |
|
|
|
|
95.06493506493506 52.380952380952394% 71.17647058823529%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-30) h s l / 10%) |
|
|
|
|
175 220 143
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-30) r g b / 10%) |
|
|
|
|
95.05617977528091 39.55555555555555% 55.88235294117647%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-40) h s l / 10%) |
|
|
|
|
135 187 98
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-40) r g b / 10%) |
|
|
|
|
95.21739130434783 42.99065420560747% 41.96078431372549%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-50) h s l / 10%) |
|
|
|
|
99 153 61
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-50) r g b / 10%) |
|
|
|
|
95.21739130434783 66.66666666666667% 27.058823529411764%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-60) h s l / 10%) |
|
|
|
|
61 115 23
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-60) r g b / 10%) |
|
|
|
|
95.06493506493506 100% 15.098039215686274%
|
Use color transforms instead e.g. hsla(from var(--rh-color-green-70) h s l / 10%) |
|
|
|
|
32 77 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-green-70) r g b / 10%) |
|
Orange
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ffe8cc
|
Label - Filled (Orange) background color |
|
|
|
|
#fccb8f
|
|
||
|
|
#f8ae54
|
Label - Filled (Orange) border color |
|
|
|
|
#f5921b
|
Label - Filled (Orange) accent color |
|
|
|
|
#ca6c0f
|
Label - Filled (Orange) accent color |
|
|
|
|
#9e4a06
|
|
||
|
|
#732e00
|
Label - Filled (Orange) text color |
|
|
|
|
#4d1f00
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
32.941176470588225 100% 90%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-10) h s l / 10%) |
|
|
|
|
255 232 204
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-10) r g b / 10%) |
|
|
|
|
33.02752293577981 94.78260869565219% 77.45098039215686%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-20) h s l / 10%) |
|
|
|
|
252 203 143
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-20) r g b / 10%) |
|
|
|
|
32.926829268292686 92.13483146067415% 65.09803921568627%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-30) h s l / 10%) |
|
|
|
|
248 174 84
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-30) r g b / 10%) |
|
|
|
|
32.752293577981646 91.5966386554622% 53.333333333333336%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-40) h s l / 10%) |
|
|
|
|
245 146 27
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-40) r g b / 10%) |
|
|
|
|
29.83957219251337 86.17511520737327% 42.549019607843135%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-50) h s l / 10%) |
|
|
|
|
202 108 15
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-50) r g b / 10%) |
|
|
|
|
26.842105263157904 92.68292682926828% 32.15686274509804%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-60) h s l / 10%) |
|
|
|
|
158 74 6
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-60) r g b / 10%) |
|
|
|
|
24 100% 22.54901960784314%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-70) h s l / 10%) |
|
|
|
|
115 46 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-70) r g b / 10%) |
|
|
|
|
24.155844155844157 100% 15.098039215686274%
|
Use color transforms instead e.g. hsla(from var(--rh-color-orange-80) h s l / 10%) |
|
|
|
|
77 31 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-orange-80) r g b / 10%) |
|
Canvas
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ffffff
|
Primary canvas (light theme) |
|
|
|
|
#151515
|
Primary canvas (dark theme) |
|
|
|
|
0 0% 100%
|
|
||
|
|
255 255 255
|
|
||
|
|
0 0% 0%
|
|
||
|
|
0 0 0
|
|
Blue
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#e0f0ff
|
Alert - Info background |
|
|
|
|
#b9dafc
|
Label - Filled (Blue) border color |
|
|
|
|
#92c5f9
|
Inline link (dark theme) |
|
|
|
|
#4394e5
|
Alert - Info accent |
|
|
|
|
#0066cc
|
Label - Filled (Blue) accent color |
|
|
|
|
#004d99
|
Inline link hover (light theme) |
|
|
|
|
#003366
|
Alert - Info title text |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
209.03225806451616 100% 93.92156862745098%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-10) h s l / 10%) |
|
|
|
|
224 240 255
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-10) r g b / 10%) |
|
|
|
|
210.44776119402988 91.78082191780825% 85.68627450980392%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-20) h s l / 10%) |
|
|
|
|
185 218 252
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-20) r g b / 10%) |
|
|
|
|
210.29126213592232 89.56521739130436% 77.45098039215685%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-30) h s l / 10%) |
|
|
|
|
146 197 249
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-30) r g b / 10%) |
|
|
|
|
210 75.70093457943923% 58.03921568627452%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-40) h s l / 10%) |
|
|
|
|
67 148 229
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-40) r g b / 10%) |
|
|
|
|
210 100% 40%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-50) h s l / 10%) |
|
|
|
|
0 102 204
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-50) r g b / 10%) |
|
|
|
|
209.80392156862746 100% 30%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-60) h s l / 10%) |
|
|
|
|
0 77 153
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-60) r g b / 10%) |
|
|
|
|
210 100% 20%
|
Use color transforms instead e.g. hsla(from var(--rh-color-blue-70) h s l / 10%) |
|
|
|
|
0 51 102
|
Use color transforms instead e.g. rgba(from var(--rh-color-blue-70) r g b / 10%) |
|
Gray
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#f2f2f2
|
Tertiary surface (light theme) |
|
|
|
|
#e0e0e0
|
Secondary surface (light theme) |
|
|
|
|
#c7c7c7
|
Subtle borders (light theme) |
|
|
|
|
#a3a3a3
|
Subtle icon (hover state) |
|
|
|
|
#707070
|
Subtle icon |
|
|
|
|
#4d4d4d
|
Secondary text (light theme) |
|
|
|
|
#383838
|
Tertiary surface (dark theme) |
|
|
|
|
#292929
|
Alternative tertiary surface (not available for use with context provider) |
|
|
|
|
#1f1f1f
|
Secondary surface (dark theme) |
|
|
|
|
#151515
|
Primary surface (dark theme) or primary text (light theme) |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
0 0% 94.90196078431372%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-10) h s l / 10%) |
|
|
|
|
242 242 242
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-10) r g b / 10%) |
|
|
|
|
0 0% 87.84313725490196%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-20) h s l / 10%) |
|
|
|
|
224 224 224
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-20) r g b / 10%) |
|
|
|
|
0 0% 78.03921568627452%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-30) h s l / 10%) |
|
|
|
|
199 199 199
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-30) r g b / 10%) |
|
|
|
|
0 0% 63.921568627450974%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-40) h s l / 10%) |
|
|
|
|
163 163 163
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-40) r g b / 10%) |
|
|
|
|
0 0% 43.92156862745098%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-50) h s l / 10%) |
|
|
|
|
112 112 112
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-50) r g b / 10%) |
|
|
|
|
0 0% 30.19607843137255%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-60) h s l / 10%) |
|
|
|
|
77 77 77
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-60) r g b / 10%) |
|
|
|
|
0 0% 21.96078431372549%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-70) h s l / 10%) |
|
|
|
|
56 56 56
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-70) r g b / 10%) |
|
|
|
|
0 0% 16.07843137254902%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-80) h s l / 10%) |
|
|
|
|
41 41 41
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-80) r g b / 10%) |
|
|
|
|
0 0% 12.156862745098039%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-90) h s l / 10%) |
|
|
|
|
31 31 31
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-90) r g b / 10%) |
|
|
|
|
0 0% 8.235294117647058%
|
Use color transforms instead e.g. hsla(from var(--rh-color-gray-95) h s l / 10%) |
|
|
|
|
21 21 21
|
Use color transforms instead e.g. rgba(from var(--rh-color-gray-95) r g b / 10%) |
|
Purple
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ece6ff
|
Label - Filled (Purple) background color |
|
|
|
|
#d0c5f4
|
Inline link visited hover (dark theme) |
|
|
|
|
#b6a6e9
|
|
||
|
|
#876fd4
|
Inline link visited (dark theme) |
|
|
|
|
#5e40be
|
|
||
|
|
#3d2785
|
Inline link visited (light theme) |
|
|
|
|
#21134d
|
Inline link visited hover (light theme) |
|
|
|
|
#1b0d33
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
254.4 100% 95.09803921568627%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-10) h s l / 10%) |
|
|
|
|
236 230 255
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-10) r g b / 10%) |
|
|
|
|
254.0425531914893 68.11594202898556% 86.47058823529412%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-20) h s l / 10%) |
|
|
|
|
208 197 244
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-20) r g b / 10%) |
|
|
|
|
254.32835820895522 60.36036036036033% 78.23529411764706%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-30) h s l / 10%) |
|
|
|
|
182 166 233
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-30) r g b / 10%) |
|
|
|
|
254.25742574257427 54.010695187165794% 63.33333333333333%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-40) h s l / 10%) |
|
|
|
|
135 111 212
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-40) r g b / 10%) |
|
|
|
|
254.2857142857143 49.60629921259843% 49.80392156862745%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-50) h s l / 10%) |
|
|
|
|
94 64 190
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-50) r g b / 10%) |
|
|
|
|
254.0425531914894 54.65116279069767% 33.72549019607843%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-60) h s l / 10%) |
|
|
|
|
61 39 133
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-60) r g b / 10%) |
|
|
|
|
254.48275862068965 60.416666666666664% 18.823529411764707%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-70) h s l / 10%) |
|
|
|
|
33 19 77
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-70) r g b / 10%) |
|
|
|
|
262.10526315789474 59.375000000000014% 12.549019607843137%
|
Use color transforms instead e.g. hsla(from var(--rh-color-purple-80) h s l / 10%) |
|
|
|
|
27 13 51
|
Use color transforms instead e.g. rgba(from var(--rh-color-purple-80) r g b / 10%) |
|
Red orange
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ffe3d9
|
|
||
|
|
#fbbea8
|
|
||
|
|
#f89b78
|
|
||
|
|
#f4784a
|
|
||
|
|
#f0561d
|
|
||
|
|
#b1380b
|
|
||
|
|
#731f00
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
15.789473684210513 100% 92.54901960784314%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-10) h s l / 10%) |
|
|
|
|
255 227 217
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-10) r g b / 10%) |
|
|
|
|
15.903614457831333 91.20879120879121% 82.15686274509804%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-20) h s l / 10%) |
|
|
|
|
251 190 168
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-20) r g b / 10%) |
|
|
|
|
16.406249999999996 90.14084507042254% 72.15686274509804%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-30) h s l / 10%) |
|
|
|
|
248 155 120
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-30) r g b / 10%) |
|
|
|
|
16.235294117647054 88.54166666666671% 62.35294117647059%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-40) h s l / 10%) |
|
|
|
|
244 120 74
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-40) r g b / 10%) |
|
|
|
|
16.208530805687207 87.55186721991701% 52.74509803921569%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-50) h s l / 10%) |
|
|
|
|
240 86 29
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-50) r g b / 10%) |
|
|
|
|
16.265060240963855 88.29787234042554% 36.86274509803921%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-60) h s l / 10%) |
|
|
|
|
177 56 11
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-60) r g b / 10%) |
|
|
|
|
16.17391304347826 100% 22.54901960784314%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-orange-70) h s l / 10%) |
|
|
|
|
115 31 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-orange-70) r g b / 10%) |
|
Red
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#fce3e3
|
|
||
|
|
#fbc5c5
|
Lightest brand red |
|
|
|
|
#f9a8a8
|
Lighter brand red |
|
|
|
|
#f56e6e
|
Light brand red |
|
|
|
|
#ee0000
|
Brand red (light and dark theme) |
|
|
|
|
#a60000
|
Dark brand red |
|
|
|
|
#5f0000
|
Darker brand red |
|
|
|
|
#3f0000
|
Darkest brand red |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
0 80.64516129032265% 93.92156862745098%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-10) h s l / 10%) |
|
|
|
|
252 227 227
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-10) r g b / 10%) |
|
|
|
|
0 87.09677419354838% 87.84313725490196%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-20) h s l / 10%) |
|
|
|
|
251 197 197
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-20) r g b / 10%) |
|
|
|
|
0 87.0967741935484% 81.76470588235294%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-30) h s l / 10%) |
|
|
|
|
249 168 168
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-30) r g b / 10%) |
|
|
|
|
0 87.09677419354841% 69.6078431372549%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-40) h s l / 10%) |
|
|
|
|
245 110 110
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-40) r g b / 10%) |
|
|
|
|
0 100% 46.666666666666664%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-50) h s l / 10%) |
|
|
|
|
238 0 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-50) r g b / 10%) |
|
|
|
|
0 100% 32.549019607843135%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-60) h s l / 10%) |
|
|
|
|
166 0 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-60) r g b / 10%) |
|
|
|
|
0 100% 18.627450980392158%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-70) h s l / 10%) |
|
|
|
|
95 0 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-70) r g b / 10%) |
|
|
|
|
0 100% 12.352941176470589%
|
Use color transforms instead e.g. hsla(from var(--rh-color-red-80) h s l / 10%) |
|
|
|
|
63 0 0
|
Use color transforms instead e.g. rgba(from var(--rh-color-red-80) r g b / 10%) |
|
Teal
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#daf2f2
|
Alert - Default background |
|
|
|
|
#b9e5e5
|
|
||
|
|
#9ad8d8
|
Label (Cyan) border color |
|
|
|
|
#63bdbd
|
|
||
|
|
#37a3a3
|
Alert - Default accent |
|
|
|
|
#147878
|
|
||
|
|
#004d4d
|
Alert - Default title text |
|
|
|
|
#003333
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
180 47.99999999999998% 90.19607843137254%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-10) h s l / 10%) |
|
|
|
|
218 242 242
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-10) r g b / 10%) |
|
|
|
|
180 45.833333333333336% 81.17647058823529%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-20) h s l / 10%) |
|
|
|
|
185 229 229
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-20) r g b / 10%) |
|
|
|
|
180 44.28571428571429% 72.54901960784314%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-30) h s l / 10%) |
|
|
|
|
154 216 216
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-30) r g b / 10%) |
|
|
|
|
180 40.54054054054054% 56.470588235294116%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-40) h s l / 10%) |
|
|
|
|
99 189 189
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-40) r g b / 10%) |
|
|
|
|
180 49.54128440366972% 42.745098039215684%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-50) h s l / 10%) |
|
|
|
|
55 163 163
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-50) r g b / 10%) |
|
|
|
|
180 71.42857142857142% 27.450980392156865%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-60) h s l / 10%) |
|
|
|
|
20 120 120
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-60) r g b / 10%) |
|
|
|
|
180 100% 15.098039215686274%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-70) h s l / 10%) |
|
|
|
|
0 77 77
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-70) r g b / 10%) |
|
|
|
|
180 100% 10%
|
Use color transforms instead e.g. hsla(from var(--rh-color-teal-80) h s l / 10%) |
|
|
|
|
0 51 51
|
Use color transforms instead e.g. rgba(from var(--rh-color-teal-80) r g b / 10%) |
|
Yellow
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#fff4cc
|
Alert - Warning background |
|
|
|
|
#ffe072
|
|
||
|
|
#ffcc17
|
|
||
|
|
#dca614
|
Alert - Warning accent |
|
|
|
|
#b98412
|
|
||
|
|
#96640f
|
|
||
|
|
#73480b
|
Alert - Warning title text |
|
|
|
|
#54330b
|
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
47.058823529411775 100% 90%
|
Use color transforms instead e.g. hsla(from var(--rh-color-yellow-10) h s l / 10%) |
|
|
|
|
255 244 204
|
Use color transforms instead e.g. rgba(from var(--rh-color-yellow-10) r g b / 10%) |
|
|
|
|
46.80851063829787 100% 72.35294117647058%
|
Use color transforms instead e.g. hsla(from var(--rh-color-yellow-20) h s l / 10%) |
|
|
|
|
255 224 114
|
Use color transforms instead e.g. rgba(from var(--rh-color-yellow-20) r g b / 10%) |
|
|
|
|
46.81034482758621 100% 54.509803921568626%
|
Use color transforms instead e.g. hsla(from var(--rh-color-yellow-30) h s l / 10%) |
|
|
|
|
255 204 23
|
Use color transforms instead e.g. rgba(from var(--rh-color-yellow-30) r g b / 10%) |
|
|
|
|
43.79999999999999 83.33333333333334% 47.05882352941176%
|
Use color transforms instead e.g. hsla(from var(--rh-color-yellow-40) h s l / 10%) |
|
|
|
|
220 166 20
|
Use color transforms instead e.g. rgba(from var(--rh-color-yellow-40) r g b / 10%) |
|
|
|
|
40.95808383233534 82.26600985221675% 39.80392156862745%
|
Use color transforms instead e.g. hsla(from var(--rh-color-yellow-50) h s l / 10%) |
|
|
|
|
185 132 18
|
Use color transforms instead e.g. rgba(from var(--rh-color-yellow-50) r g b / 10%) |
|
|
|
|
37.77777777777777 81.81818181818181% 32.35294117647059%
|
Use color transforms instead e.g. hsla(from var(--rh-color-yellow-60) h s l / 10%) |
|
|
|
|
150 100 15
|
Use color transforms instead e.g. rgba(from var(--rh-color-yellow-60) r g b / 10%) |
|
|
|
|
35.192307692307686 82.53968253968253% 24.705882352941178%
|
Use color transforms instead e.g. hsla(from var(--rh-color-yellow-70) h s l / 10%) |
|
|
|
|
115 72 11
|
Use color transforms instead e.g. rgba(from var(--rh-color-yellow-70) r g b / 10%) |
|
|
|
|
32.87671232876713 76.84210526315789% 18.627450980392158%
|
Use color transforms instead e.g. hsla(from var(--rh-color-yellow-80) h s l / 10%) |
|
|
|
|
84 51 11
|
Use color transforms instead e.g. rgba(from var(--rh-color-yellow-80) r g b / 10%) |
|
Interactive
Theme Tokens
Primary
Default
Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-primary-default-on-light, #0066cc), var(--rh-color-interactive-primary-default-on-dark, #92c5f9))
|
Responsive |
|
|
|
|
#0066cc
|
Primary interactive - default (Light theme) |
|
|
|
|
#92c5f9
|
Primary interactive - default (Dark theme) |
|
Hover
Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-hover-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-hover-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-primary-hover-on-light, #003366), var(--rh-color-interactive-primary-hover-on-dark, #b9dafc))
|
Responsive |
|
|
|
|
#003366
|
Primary interactive - hover (Light theme) |
|
|
|
|
#b9dafc
|
Primary interactive - hover (Dark theme) |
|
Active
Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-active-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-active-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-primary-active-on-light, #003366), var(--rh-color-interactive-primary-active-on-dark, #b9dafc))
|
Responsive |
|
|
|
|
#003366
|
Primary interactive - active (Light theme) |
|
|
|
|
#b9dafc
|
Primary interactive - active (Dark theme) |
|
Focus
Responsive interactive-primary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-focus-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-focus-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-primary-focus-on-light, #003366), var(--rh-color-interactive-primary-focus-on-dark, #b9dafc))
|
Responsive |
|
|
|
|
#003366
|
Primary interactive - focus (Light theme) |
|
|
|
|
#b9dafc
|
Primary interactive - focus (Dark theme) |
|
Visited
Default
Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-primary-visited-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-primary-visited-default-on-light, #5e40be), var(--rh-color-interactive-primary-visited-default-on-dark, #b6a6e9))
|
Responsive |
|
|
|
|
#5e40be
|
Primary interactive visited - default (Light theme) |
|
|
|
|
#b6a6e9
|
Primary interactive visited - default (Dark theme) |
|
Hover
Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-hover-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-visited-hover-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-primary-visited-hover-on-light, #21134d), var(--rh-color-interactive-primary-visited-hover-on-dark, #ece6ff))
|
Responsive |
|
|
|
|
#21134d
|
Primary interactive visited - hover (Light theme) |
|
|
|
|
#ece6ff
|
Primary interactive visited - hover (Dark theme) |
|
Active
Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-active-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-visited-active-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-primary-visited-active-on-light, #21134d), var(--rh-color-interactive-primary-visited-active-on-dark, #ece6ff))
|
Responsive |
|
|
|
|
#21134d
|
Primary interactive visited - active (Light theme) |
|
|
|
|
#ece6ff
|
Primary interactive visited - active (Dark theme) |
|
Focus
Responsive interactive-primary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-primary-visited-focus-on-light on a themable container with a light color palette
and to --rh-color-interactive-primary-visited-focus-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-primary-visited-focus-on-light, #21134d), var(--rh-color-interactive-primary-visited-focus-on-dark, #ece6ff))
|
Responsive |
|
|
|
|
#21134d
|
Primary interactive visited - focus (Light theme) |
|
|
|
|
#ece6ff
|
Primary interactive visited - focus (Dark theme) |
|
Secondary
Default
Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-secondary-default-on-light, #4d4d4d), var(--rh-color-interactive-secondary-default-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Secondary interactive - default (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive - default (Dark theme) |
|
Hover
Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-hover-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-hover-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-secondary-hover-on-light, #4d4d4d), var(--rh-color-interactive-secondary-hover-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Secondary interactive - hover (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive - hover (Dark theme) |
|
Active
Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-active-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-active-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-secondary-active-on-light, #4d4d4d), var(--rh-color-interactive-secondary-active-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Secondary interactive - active (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive - active (Dark theme) |
|
Focus
Responsive interactive-secondary (e.g. link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-focus-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-focus-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-secondary-focus-on-light, #4d4d4d), var(--rh-color-interactive-secondary-focus-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Secondary interactive - focus (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive - focus (Dark theme) |
|
Visited
Default
Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-default-on-light on a themable container with a light color palette and --rh-color-interactive-secondary-visited-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-secondary-visited-default-on-light, #4d4d4d), var(--rh-color-interactive-secondary-visited-default-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Secondary interactive visited - default (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive visited - default (Dark theme) |
|
Hover
Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-hover-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-visited-hover-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-secondary-visited-hover-on-light, #4d4d4d), var(--rh-color-interactive-secondary-visited-hover-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Secondary interactive visited - hover (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive visited - hover (Dark theme) |
|
Active
Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-active-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-visited-active-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-secondary-visited-active-on-light, #4d4d4d), var(--rh-color-interactive-secondary-visited-active-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Secondary interactive visited - active (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive visited - active (Dark theme) |
|
Focus
Responsive interactive-secondary-visited (e.g. visited link) color value. Typically read only - use a themable container e.g. <rh-surface>. Resolves to --rh-color-interactive-secondary-visited-focus-on-light on a themable container with a light color palette
and to --rh-color-interactive-secondary-visited-focus-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-interactive-secondary-visited-focus-on-light, #4d4d4d), var(--rh-color-interactive-secondary-visited-focus-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Secondary interactive visited - focus (Light theme) |
|
|
|
|
#c7c7c7
|
Secondary interactive visited - focus (Dark theme) |
|
Blue
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#b9dafc
|
Inline link hover (dark theme) |
|
|
|
|
#92c5f9
|
Inline link (dark theme) |
|
|
|
|
#0066cc
|
Inline link (light theme) |
|
|
|
|
#003366
|
Inline link hover (light theme) |
|
Purple
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
#ece6ff
|
Inline link visited hover (dark theme) |
|
|
|
|
#b6a6e9
|
Inline link visited (dark theme) |
|
|
|
|
#5e40be
|
Inline link visited (light theme) |
|
|
|
|
#ece6ff
|
Inline link visited hover (light theme) |
|
Status
Theme Tokens
Danger
Represents an action which could have destructive consequences, e.g. deleting a file.
Responsive status-danger color value. Typically read-only – use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-danger-on-light on a themable container with a light color palette and --rh-color-status-danger-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-status-danger-on-light, #b1380b), var(--rh-color-status-danger-on-dark, #f0561d))
|
Responsive |
|
|
|
|
#b1380b
|
Danger status color (light theme) |
|
|
|
|
#f0561d
|
Danger status color (dark theme) |
|
Caution
Represents an action or notice which should immediately draw the attention
Responsive status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-caution-on-light on a themable container with a light color palette and --rh-color-status-caution-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-status-caution-on-light, #ca6c0f), var(--rh-color-status-caution-on-dark, #f5921b))
|
Responsive |
|
|
|
|
#ca6c0f
|
Caution status color (light theme) |
|
|
|
|
#f5921b
|
Caution status color (dark theme) |
|
Warning
Represents an action or notice which elicits a warning of potential danger
Responsive status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-warning-on-light on a themable container with a light color palette and --rh-color-status-warning-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-status-warning-on-light, #dca614), var(--rh-color-status-warning-on-dark, #ffcc17))
|
Responsive |
|
|
|
|
#dca614
|
Warning status color (light theme) |
|
|
|
|
#ffcc17
|
Warning status color (dark theme) |
|
Neutral
Represents an action or notice which has neither positive nor negative connotations, is neither explicitly constructive or explicitly destructive.
Responsive status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-neutral-on-light on a themable container with a light color palette and --rh-color-status-neutral-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-status-neutral-on-light, #4d4d4d), var(--rh-color-status-neutral-on-dark, #c7c7c7))
|
Responsive |
|
|
|
|
#4d4d4d
|
Neutral accent color (light theme) |
|
|
|
|
#c7c7c7
|
Neutral accent color (dark theme) |
|
Note
Represents an action or notice which is informational, or a tip on how best to complete a task.
Responsive status-note color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-note-on-light on a themable container with a light color palette and --rh-color-status-note-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-status-note-on-light, #5e40be), var(--rh-color-status-note-on-dark, #b6a6e9))
|
Responsive |
|
|
|
|
#5e40be
|
Note/tip status color (light theme) |
|
|
|
|
#b6a6e9
|
Note/tip status color (dark theme) |
|
Info
Represents an action or notice which is informational, or a tip on how best to complete a task.
Responsive status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-info-on-light on a themable container with a light color palette and --rh-color-status-info-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-status-info-on-light, #5e40be), var(--rh-color-status-info-on-dark, #b6a6e9))
|
Responsive |
|
|
|
|
#5e40be
|
Info status color (light theme) |
|
|
|
|
#b6a6e9
|
Info status color (dark theme) |
|
Success
Represents a notice of success.
Responsive status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-status-success-on-light on a themable container with a light color palette and --rh-color-status-success-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-status-success-on-light, #3d7317), var(--rh-color-status-success-on-dark, #87bb62))
|
Responsive |
|
|
|
|
#3d7317
|
Success status color (light theme) |
|
|
|
|
#87bb62
|
Success status color (dark theme) |
|
Surface
Responsive surface color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to the surface color corresponding to the surface' color palette.
Theme Tokens
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-surface-lightest, #ffffff), var(--rh-color-surface-lighter, #f2f2f2))
|
Responsive |
|
|
|
|
#ffffff
|
Primary surface (light theme) |
|
|
|
|
#f2f2f2
|
Tertiary surface (light theme) |
|
|
|
|
#e0e0e0
|
Secondary surface (light theme) |
|
|
|
|
#383838
|
Tertiary surface (dark theme) |
|
|
|
|
#1f1f1f
|
Secondary surface (dark theme) |
|
|
|
|
#151515
|
Primary surface (dark theme) |
|
Deprecated tokens
| Ex. | Token name | Value | Deprecation reason | Actions |
|---|---|---|---|---|
|
|
oklch(from(--rh-color-surface-dark) calc(l * 0.82) c h)
|
Theme authors should use --rh-color-surface-dark. Element authors should use oklch(from var(--rh-color-surface-dark) calc(l * 0.82) c h). Alternative tertiary surface (not available for use with context provider) |
|
Status
Danger
Responsive surface-status-danger color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-danger-on-light on a themable container with a light color palette and --rh-color-surface-status-danger-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-surface-status-danger-on-light, #ffe3d9), var(--rh-color-surface-status-danger-on-dark, #ffe3d9))
|
Responsive |
|
|
|
|
#ffe3d9
|
Danger status surface color (light theme) |
|
|
|
|
#ffe3d9
|
Danger status surface color (dark theme) |
|
Caution
Responsive surface-status-caution color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-caution-on-light on a themable container with a light color palette and --rh-color-surface-status-caution-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-surface-status-caution-on-light, #ffe8cc), var(--rh-color-surface-status-caution-on-dark, #ffe8cc))
|
Responsive |
|
|
|
|
#ffe8cc
|
Caution status surface color (light theme) |
|
|
|
|
#ffe8cc
|
Caution status surface color (dark theme) |
|
Warning
Responsive surface-status-warning color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-warning-on-light on a themable container with a light color palette and --rh-color-surface-status-warning-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-surface-status-warning-on-light, #fff4cc), var(--rh-color-surface-status-warning-on-dark, #73480b))
|
Responsive |
|
|
|
|
#fff4cc
|
Warning status surface color (light theme) |
|
|
|
|
#73480b
|
Warning status surface color (dark theme) |
|
Default
Responsive surface-status-default color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-default-on-light on a themable container with a light color palette and --rh-color-surface-status-default-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-surface-status-default-on-light, #f2f2f2), var(--rh-color-surface-status-default-on-dark, #f2f2f2))
|
Responsive |
|
|
|
|
#f2f2f2
|
Default status surface color (light theme) |
|
|
|
|
#f2f2f2
|
Default status surface color (dark theme) |
|
Neutral
Responsive surface-status-neutral color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-neutral-on-light on a themable container with a light color palette and --rh-color-surface-status-neutral-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-surface-status-neutral-on-light, #f2f2f2), var(--rh-color-surface-status-neutral-on-dark, #f2f2f2))
|
Responsive |
|
|
|
|
#f2f2f2
|
Neutral status surface color (light theme) |
|
|
|
|
#f2f2f2
|
Neutral status surface color (dark theme) |
|
Info
Responsive surface-status-info color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-info-on-light on a themable container with a light color palette and --rh-color-surface-status-info-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-surface-status-info-on-light, #ece6ff), var(--rh-color-surface-status-info-on-dark, #ece6ff))
|
Responsive |
|
|
|
|
#ece6ff
|
Info status surface color (light theme) |
|
|
|
|
#ece6ff
|
Info status surface color (dark theme) |
|
Success
Responsive surface-status-success color value. Typically read-only - use a themable container, e.g. <rh-surface>. Resolves to --rh-color-surface-status-success-on-light on a themable container with a light color palette and --rh-color-surface-status-success-on-dark on a themable container with a dark color palette.
| Ex. | Token name | Value | Use case | Actions |
|---|---|---|---|---|
|
|
light-dark(var(--rh-color-surface-status-success-on-light, #e9f7df), var(--rh-color-surface-status-success-on-dark, #e9f7df))
|
Responsive |
|
|
|
|
#e9f7df
|
Success status surface color (light theme) |
|
|
|
|
#e9f7df
|
Success status surface color (dark theme) |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
