CodexColor
Text colors
| Name | Value |
|---|---|
| color-base | #202122 Defined in Refers to |
| color-base--hover | #404244 Defined in Refers to Aimed to be replaced by `color.gray600` in future. |
| color-emphasized | #000 Defined in Refers to |
| color-subtle | #54595d Defined in Refers to |
| color-placeholder | #72777d Defined in Refers to |
| color-disabled | #72777d Defined in Refers to |
| color-inverted | #fff Defined in Refers to |
| color-progressive | #36c Defined in Refers to 'Progressive' Color and states |
| color-progressive--hover | #447ff5 Defined in Refers to |
| color-progressive--active | #2a4b8d Defined in Refers to |
| color-progressive--focus | #36c Defined in Refers to |
| color-destructive | #d33 Defined in Refers to 'Destructive' Color and states |
| color-destructive--hover | #ff4242 Defined in Refers to |
| color-destructive--active | #b32424 Defined in Refers to |
| color-destructive--focus | #d33 Defined in Refers to |
| color-visited | #6b4ba1 Defined in Refers to 'Visited' color. In combination with progressive. Used for default links. |
| color-error | #d33 Defined in Refers to |
| color-warning | #fc3 Defined in Refers to Note, this is only meant for warning icon for contrast reasons. |
| color-success | #14866d Defined in Refers to Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White. |
| color-notice | #202122 Defined in Refers to |
| color-base--active deprecated | #000 Defined in Refers to Deprecated: Use `color-emphasized` instead. |
| color-base--inverted deprecated | #fff Defined in Refers to Deprecated: Use `color-inverted` instead. |
| color-base--emphasized deprecated | #000 Defined in Refers to Deprecated: Use `color-emphasized` instead. |
| color-base--subtle deprecated | #72777d Defined in Refers to Deprecated: Use `color-subtle` instead. Note, that `color-subtle` is using `color.gray600` instead of `color.gray500` now. |
| color-base--disabled deprecated | #72777d Defined in Refers to Deprecated: Use `color-disabled` instead. |
| color-filled--disabled deprecated | #fff Defined in Refers to Deprecated: Use `color-inverted` instead. |
| color-accessory deprecated | #54595d Defined in Refers to Deprecated: Use `color-subtle` instead. |
| color-primary deprecated | #36c Defined in Refers to Deprecated: In use in many non-button applications as references in WikimediaUI Base. Note that we have to replace those before removing tokens group here. |
| color-primary--hover deprecated | #447ff5 Defined in Refers to |
| color-primary--active deprecated | #2a4b8d Defined in Refers to |
| color-primary--focus deprecated | #36c Defined in Refers to |
| color-link-red | #d33 Defined in Refers to Red ('new') Link color and states |
| color-link-red--hover | #ff4242 Defined in Refers to |
| color-link-red--active | #b32424 Defined in Refers to |
| color-link-red--focus | #d33 Defined in Refers to |
| color-link-red--visited | #a55858 Defined in Refers to |
Background colors
| Name | Value |
|---|---|
| background-color-base | #fff Defined in Refers to |
| background-color-interactive | #eaecf0 Defined in Refers to |
| background-color-interactive-subtle | #f8f9fa Defined in Refers to |
| background-color-disabled | #c8ccd1 Defined in Refers to Components like Buttons, Checkboxes, Radios, ProgressBars…. |
| background-color-disabled-subtle | #eaecf0 Defined in Refers to Components like TextInputs, Selects…. |
| background-color-progressive | #36c Defined in Refers to |
| background-color-progressive--hover | #447ff5 Defined in Refers to |
| background-color-progressive--active | #2a4b8d Defined in Refers to |
| background-color-progressive--focus | #36c Defined in Refers to |
| background-color-progressive-subtle | #eaf3ff Defined in Refers to |
| background-color-destructive | #d33 Defined in Refers to |
| background-color-destructive--hover | #ff4242 Defined in Refers to |
| background-color-destructive--active | #b32424 Defined in Refers to |
| background-color-destructive--focus | #d33 Defined in Refers to |
| background-color-destructive-subtle | #fee7e6 Defined in Refers to |
| background-color-error-subtle | #fee7e6 Defined in Refers to |
| background-color-warning-subtle | #fef6e7 Defined in Refers to |
| background-color-success-subtle | #d5fdf4 Defined in Refers to |
| background-color-notice-subtle | #eaecf0 Defined in Refers to |
| background-color-backdrop-light | rgba( 255, 255, 255, 0.65 ) Defined in Refers to Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. |
| background-color-backdrop-dark | rgba( 0, 0, 0, 0.65 ) Defined in Refers to |
| background-color-transparent | rgba( 255, 255, 255, 0 ) Defined in Refers to |
| background-color-base--hover deprecated | #eaecf0 Defined in Refers to Deprecated: Use `background-color-interactive` instead. |
| background-color-base--active deprecated | #eaf3ff Defined in Refers to Deprecated: Use `background-color-progressive-subtle` instead. |
| background-color-base--disabled deprecated | #eaecf0 Defined in Refers to Deprecated: Use `background-color-disabled-subtle` instead. |
| background-color-base--transparent deprecated | rgba( 255, 255, 255, 0 ) Defined in Refers to Deprecated: Use `background-color-transparent` instead. |
| background-color-filled--disabled deprecated | #c8ccd1 Defined in Refers to Deprecated: Use `background-color-disabled` instead. |
| background-color-framed deprecated | #f8f9fa Defined in Refers to Deprecated: Use `background-color-interactive-subtle` instead. |
| background-color-framed--hover deprecated | #fff Defined in Refers to Deprecated: Use `background-color-base` instead. |
| background-color-framed--active deprecated | #eaecf0 Defined in Refers to Deprecated: Use `background-color-interactive` with buttons' active state instead. |
| background-color-error--framed deprecated | #fee7e6 Defined in Refers to Deprecated: Use `background-color-error-subtle` instead. |
| background-color-warning--framed deprecated | #fef6e7 Defined in Refers to Deprecated: Use `background-color-warning-subtle` instead. |
| background-color-success--framed deprecated | #d5fdf4 Defined in Refers to Deprecated: Use `background-color-success-subtle` instead. |
| background-color-notice--framed deprecated | #eaecf0 Defined in Refers to Deprecated: Use `background-color-notice-subtle` instead. |
| background-color-button-quiet--hover | rgba( 0, 24, 73, calc( 7 / 255 ) ) Defined in Refers to |
| background-color-button-quiet--active | rgba( 0, 24, 73, calc( 21 / 255 ) ) Defined in Refers to |
| background-color-input-binary--checked | #36c Defined in Refers to |
| background-color-primary deprecated | #36c Defined in Refers to Deprecated: Use `background-color-progressive` instead. |
| background-color-primary--hover deprecated | rgba( 51, 102, 204, 0.1 ) Defined in Refers to Deprecated: No replacement for this token. Only used in non-Codex products and design decision is to need to rely on background for this state. |
| background-color-quiet deprecated | rgba( 255, 255, 255, 0 ) Defined in Refers to Deprecated: Use `background-color-transparent` instead. |
| background-color-quiet--hover deprecated | rgba( 0, 24, 73, calc( 7 / 255 ) ) Defined in Refers to Deprecated: Use `background-color-button-quiet--hover` instead. |
| background-color-quiet--active deprecated | rgba( 0, 24, 73, calc( 21 / 255 ) ) Defined in Refers to Deprecated: Use `background-color-button-quiet--active` instead. |
| background-color-message-notice deprecated | #eaecf0 Defined in Refers to Deprecated: Use `background-color-notice-subtle` instead. |
| background-color-message-error deprecated | #fee7e6 Defined in Refers to Deprecated: Use `background-color-error-subtle` instead. |
| background-color-message-warning deprecated | #fef6e7 Defined in Refers to Deprecated: Use `background-color-warning-subtle` instead. |
| background-color-message-success deprecated | #d5fdf4 Defined in Refers to Deprecated: Use `background-color-success-subtle` instead. |
| background-color-tabs-framed deprecated | #eaecf0 Defined in Refers to Deprecated: Former Tabs bar background color token. Use `background-color-interactive` instead. |
| background-color-toolbar deprecated | #fff Defined in Refers to Deprecated: Former Toolbar background color token. Use `background-color-base` instead. |
| background-color-tool--hover deprecated | #eaecf0 Defined in Refers to Deprecated: Former Toolbar tools background color token. Use `background-color-base` instead. |
| background-color-tool--active deprecated | #36c Defined in Refers to Deprecated: Use `background-color-progressive` instead. |
| background-color-tool--active-hover deprecated | #447ff5 Defined in Refers to Deprecated: Use `background-color-progressive--hover` instead. |
Border and box-shadow colors
For information on border colors visit Border and for box-shadow colors Box-shadow token page.