| CSS Variable | Lightmode | Darkmode | ||
|---|---|---|---|---|
| --color-base | #202122; | #eaecf0; | ||
| --color-base--hover | #404244; | #f8f9fa; | ||
| --color-emphasized | #000; | #f8f9fa; | ||
| --color-subtle | #54595d; | #a2a9b1; | ||
| --color-inverted | #fff; | #101418; | ||
| --color-progressive | #36c; | #6d8af2; | ||
| --color-progressive--hover | #447ff5; | #afb6e9; | ||
| --color-progressive--active | #2a4b8d; | #c2d1f0; | ||
| --color-destructive | #d73333; | #ff4242; | ||
| --color-destructive--hover | #ff4242; | #ef8174; | ||
| --color-destructive--active | #b32424; | #f8a397; | ||
| --color-visited | #6b4ba1; | #977dbd; | ||
| --color-destructive--visited | #a55858; | #b97876; | ||
| --color-error | #d73333; | #ff4242; | ||
| --color-warning | #edab00; | #fc3; | ||
| --color-success | #14866d; | #00af89; | ||
| --color-notice | #202122; | #f8f9fa; | ||
| --color-content-added | #096450; | #74c9ac; | ||
| --color-content-removed | #b32424; | #ef8174; | ||
| --box-shadow-color-base | #000; | #fff; | ||
| --box-shadow-color-inverted | #fff; | #000; | ||
| --background-color-interactive | #eaecf0; | #27292d; | ||
| --background-color-interactive-subtle | #f8f9fa; | #202122; | ||
| --background-color-disabled | #c8ccd1; | #54595d; | ||
| --background-color-disabled-subtle | #eaecf0; | #404244; | ||
| --background-color-progressive-subtle | #eaf3ff; | #1c2940; | ||
| --background-color-destructive-subtle | #fee7e6; | #421211; | ||
| --background-color-error | #d73333; | #ff4242; | ||
| --background-color-error--hover | #ff4242; | #ef8174; | ||
| --background-color-error--active | #b32424; | #f8a397; | ||
| --background-color-error-subtle | #fee7e6; | #421211; | ||
| --background-color-warning-subtle | #fef6e7; | #301d00; | ||
| --background-color-success-subtle | #d5fdf4; | #00261e; | ||
| --background-color-notice-subtle | #eaecf0; | #202122; | ||
| --background-color-content-added | #afb6e9; | #2a4b8d; | ||
| --background-color-content-removed | #fc3; | #a66200; | ||
| --background-color-backdrop-light | rgba(255,255,255,0.65); | rgba(0,0,0,0.65); | ||
| --background-color-backdrop-dark | rgba(0,0,0,0.65); | rgba(255,255,255,0.65); | ||
| --background-color-base | #fff; | #101418; | ||
| --background-color-neutral | #eaecf0; | #27292d; | ||
| --background-color-neutral-subtle | #f8f9fa; | #202122; | ||
| --background-color-inverted | #101418; | #f8f9fa; | ||
| --border-color-base | #a2a9b1; | #72777d; | ||
| --border-color-interactive | #72777d; | #a2a9b1; | ||
| --border-color-disabled | #c8ccd1; | #54595d; | ||
| --border-color-subtle | #c8ccd1; | #54595d; | ||
| --border-color-muted | #eaecf0; | #404244; | ||
| --border-color-inverted | #fff; | #101418; | ||
| --border-color-error | #b32424; | #ff4242; | ||
| --border-color-error--hover | #ff4242; | #ef8174; | ||
| --border-color-warning | #a66200; | #fc3; | ||
| --border-color-success | #096450; | #00af89; | ||
| --border-color-notice | #54595d; | #c8ccd1; | ||
| --border-color-content-added | #afb6e9; | #2a4b8d; | ||
| --border-color-content-removed | #fc3; | #a66200 | ||
