Codex Direction:
Color
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 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 | #000 deprecated Defined in Refers to Deprecated: Use `color-emphasized` instead. |
| color-base--inverted | #fff deprecated Defined in Refers to Deprecated: Use `color-inverted` instead. |
| color-base--emphasized | #000 deprecated Defined in Refers to Deprecated: Use `color-emphasized` instead. |
| color-base--subtle | #72777d deprecated 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 | #72777d deprecated Defined in Refers to Deprecated: Use `color-disabled` instead. |
| color-filled--disabled | #fff deprecated Defined in Refers to Deprecated: Use `color-inverted` instead. |
| color-accessory | #54595d deprecated Defined in Refers to Deprecated: Use `color-subtle` instead. |
| color-primary | #36c deprecated 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 | #447ff5 deprecated Defined in Refers to |
| color-primary--active | #2a4b8d deprecated Defined in Refers to |
| color-primary--focus | #36c deprecated 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-transparent | rgba( 255, 255, 255, 0 ) Defined in Refers to |
| background-color-base--hover | #eaecf0 deprecated Defined in Refers to Deprecated: Use `background-color-interactive` instead. |
| background-color-base--active | #eaf3ff deprecated Defined in Refers to Deprecated: Use `background-color-progressive-subtle` instead. |
| background-color-base--disabled | #eaecf0 deprecated Defined in Refers to Deprecated: Use `background-color-disabled-subtle` instead. |
| background-color-base--transparent | rgba( 255, 255, 255, 0 ) deprecated Defined in Refers to Deprecated: Use `background-color-transparent` instead. |
| background-color-filled--disabled | #c8ccd1 deprecated Defined in Refers to Deprecated: Use `background-color-disabled` instead. |
| background-color-framed | #f8f9fa deprecated Defined in Refers to Deprecated: Use `background-color-interactive-subtle` instead. |
| background-color-framed--hover | #fff deprecated Defined in Refers to Deprecated: Use `background-color-base` instead. |
| background-color-framed--active | #c8ccd1 deprecated Defined in Refers to Deprecated: Use `background-color-interactive` with buttons' active state instead. |
| background-color-error--framed | #fee7e6 deprecated Defined in Refers to Deprecated: Use `background-color-error-subtle` instead. |
| background-color-warning--framed | #fef6e7 deprecated Defined in Refers to Deprecated: Use `background-color-warning-subtle` instead. |
| background-color-success--framed | #d5fdf4 deprecated Defined in Refers to Deprecated: Use `background-color-success-subtle` instead. |
| background-color-notice--framed | #eaecf0 deprecated Defined in Refers to Deprecated: Use `background-color-notice-subtle` instead. |
| background-color-primary | #36c Defined in Refers to |
| background-color-primary--hover | rgba( 51, 102, 204, 0.1 ) Defined in Refers to |
| background-color-quiet | #202122 Defined in Refers to |
| background-color-quiet--hover | rgba( 0, 24, 73, calc( 7 / 255 ) ) Defined in Refers to |
| background-color-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-message-notice | #eaecf0 deprecated Defined in Refers to Deprecated: Use `background-color-notice-subtle` instead. |
| background-color-message-error | #fee7e6 deprecated Defined in Refers to Deprecated: Use `background-color-error-subtle` instead. |
| background-color-message-warning | #fef6e7 deprecated Defined in Refers to Deprecated: Use `background-color-warning-subtle` instead. |
| background-color-message-success | #d5fdf4 deprecated Defined in Refers to Deprecated: Use `background-color-success-subtle` instead. |
| background-color-tabs-framed | #eaecf0 deprecated Defined in Refers to Deprecated: Former Tabs bar background color token. Use `background-color-interactive` instead. |
| background-color-toolbar | #fff deprecated Defined in Refers to Deprecated: Former Toolbar background color token. Use `background-color-base` instead. |
| background-color-tool--hover | #eaecf0 deprecated Defined in Refers to Deprecated: Former Toolbar tools background color token. Use `background-color-base` instead. |
| background-color-tool--active | #36c deprecated Defined in Refers to Deprecated: Use `background-color-progressive` instead. |
| background-color-tool--active-hover | #447ff5 deprecated 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.