Color

Text colors

List of design token names, values and metadata for `background-color`
Name	Value
color-base	`#202122` Defined in `src/codex-base.json` Refers to `color.gray700`
color-base--hover	`#404244` Defined in `src/codex-base.json` Refers to `color.gray650` Aimed to be replaced by `color.gray600` in future.
color-emphasized	`#000` Defined in `src/codex-base.json` Refers to `color.black`
color-subtle	`#54595d` Defined in `src/codex-base.json` Refers to `color.gray600`
color-placeholder	`#72777d` Defined in `src/codex-base.json` Refers to `color.gray500`
color-disabled	`#72777d` Defined in `src/codex-base.json` Refers to `color.gray500`
color-inverted	`#fff` Defined in `src/codex-base.json` Refers to `color.white`
color-progressive	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600` 'Progressive' Color and states
color-progressive--hover	`#447ff5` Defined in `src/codex-base.json` Refers to `color.blue500`
color-progressive--active	`#2a4b8d` Defined in `src/codex-base.json` Refers to `color.blue700`
color-progressive--focus	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600`
color-destructive	`#d73333` Defined in `src/codex-base.json` Refers to `color.red600` 'Destructive' Color and states
color-destructive--hover	`#ff4242` Defined in `src/codex-base.json` Refers to `color.red500`
color-destructive--active	`#b32424` Defined in `src/codex-base.json` Refers to `color.red700`
color-destructive--focus	`#d73333` Defined in `src/codex-base.json` Refers to `color.red600`
color-visited	`#6b4ba1` Defined in `src/codex-base.json` Refers to `color.purple` 'Visited' color. In combination with progressive. Used for default links.
color-error	`#d73333` Defined in `src/codex-base.json` Refers to `color.red600`
color-warning	`#edab00` Defined in `src/codex-base.json` Refers to `color.yellow600` Note, this is only meant for warning icon for contrast reasons.
color-success	`#14866d` Defined in `src/codex-base.json` Refers to `color.green600` Note, this needs to use a tone darker than Red and Yellow for contrast reasons with background White.
color-notice	`#202122` Defined in `src/codex-base.json` Refers to `color.gray700`
color-base--subtle deprecated	`#72777d` Defined in `src/codex-base.json` Refers to `color.gray500` Deprecated: Use `color-subtle` instead. Note, that `color-subtle` is using `color.gray600` instead of `color.gray500` now. (use `color-gray500` instead)
color-link-red	`#d73333` Defined in `src/codex-components.json` Refers to `color.red600` Red ('new') Link color and states
color-link-red--hover	`#ff4242` Defined in `src/codex-components.json` Refers to `color.red500`
color-link-red--active	`#b32424` Defined in `src/codex-components.json` Refers to `color.red700`
color-link-red--focus	`#d73333` Defined in `src/codex-components.json` Refers to `color.red600`
color-link-red--visited	`#a55858` Defined in `src/codex-components.json` Refers to `color.maroon`

Background colors

List of design token names, values and metadata for `background-color`
Name	Value
background-color-base	`#fff` Defined in `src/codex-base.json` Refers to `color.white`
background-color-interactive	`#eaecf0` Defined in `src/codex-base.json` Refers to `color.gray200`
background-color-interactive-subtle	`#f8f9fa` Defined in `src/codex-base.json` Refers to `color.gray100`
background-color-disabled	`#c8ccd1` Defined in `src/codex-base.json` Refers to `color.gray300` Components like Buttons, Checkboxes, Radios, ProgressBars….
background-color-disabled-subtle	`#eaecf0` Defined in `src/codex-base.json` Refers to `color.gray200` Components like TextInputs, Selects….
background-color-progressive	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600`
background-color-progressive--hover	`#447ff5` Defined in `src/codex-base.json` Refers to `color.blue500`
background-color-progressive--active	`#2a4b8d` Defined in `src/codex-base.json` Refers to `color.blue700`
background-color-progressive--focus	`#36c` Defined in `src/codex-base.json` Refers to `color.blue600`
background-color-progressive-subtle	`#eaf3ff` Defined in `src/codex-base.json` Refers to `color.blue100`
background-color-destructive	`#d73333` Defined in `src/codex-base.json` Refers to `color.red600`
background-color-destructive--hover	`#ff4242` Defined in `src/codex-base.json` Refers to `color.red500`
background-color-destructive--active	`#b32424` Defined in `src/codex-base.json` Refers to `color.red700`
background-color-destructive--focus	`#d73333` Defined in `src/codex-base.json` Refers to `color.red600`
background-color-destructive-subtle	`#fee7e6` Defined in `src/codex-base.json` Refers to `color.red100`
background-color-error	`#d73333` Defined in `src/codex-base.json` Refers to `color.red600`
background-color-error--hover	`#ff4242` Defined in `src/codex-base.json` Refers to `color.red500`
background-color-error--active	`#b32424` Defined in `src/codex-base.json` Refers to `color.red700`
background-color-error-subtle	`#fee7e6` Defined in `src/codex-base.json` Refers to `color.red100`
background-color-warning-subtle	`#fef6e7` Defined in `src/codex-base.json` Refers to `color.yellow100`
background-color-success-subtle	`#d5fdf4` Defined in `src/codex-base.json` Refers to `color.green100`
background-color-notice-subtle	`#eaecf0` Defined in `src/codex-base.json` Refers to `color.gray200`
background-color-backdrop-light	`rgba( 255, 255, 255, 0.65 )` Defined in `src/codex-base.json` Refers to `color.opacity-medium-light` 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 `src/codex-base.json` Refers to `color.opacity-medium-dark`
background-color-transparent	`rgba( 255, 255, 255, 0 )` Defined in `src/codex-base.json` Refers to `color.transparent-light`
background-color-button-quiet--hover	`rgba( 0, 24, 73, 0.027 )` Defined in `src/codex-components.json` Refers to `color.modifier-gray100-translucent`
background-color-button-quiet--active	`rgba( 0, 24, 73, 0.082 )` Defined in `src/codex-components.json` Refers to `color.modifier-gray200-translucent`
background-color-input-binary--checked	`#36c` Defined in `src/codex-components.json` Refers to `color.blue600`
background-color-primary--hover deprecated	`rgba( 51, 102, 204, 0.1 )` Defined in `src/codex-components.json` Refers to `color.modifier-blue600-translucent` 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. (use `color-modifier-blue600-translucent` instead)

Accent color

List of design token names, values and metadata for `background-color`
Name	Value
accent-color-base	`#36c` Defined in `src/codex-base.json` Refers to `color.accent`

Border and box-shadow colors

For information on border colors visit Border and for box-shadow colors Box-shadow token page.

Deprecated token aliases

WARNING

The tokens below are not available in Codex. There are only available as deprecated aliases in WikimediaUI Base.

List of design token names, values and metadata for `background-color`
Name	Value
color-base--active deprecated	`#000` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.emphasized` Deprecated: Use `color-emphasized` instead.
color-base--inverted deprecated	`#fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.inverted` Deprecated: Use `color-inverted` instead.
color-base--emphasized deprecated	`#000` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.emphasized` Deprecated: Use `color-emphasized` instead.
color-base--disabled deprecated	`#72777d` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.disabled` Deprecated: Use `color-disabled` instead.
color-filled--disabled deprecated	`#fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.inverted` Deprecated: Use `color-inverted` instead.
color-accessory deprecated	`#54595d` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.subtle` Deprecated: Use `color-subtle` instead.
color-primary deprecated	`#36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.progressive` Deprecated: Use `color-progressive` instead.
color-primary--hover deprecated	`#447ff5` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.progressive--hover` Deprecated: Use `color-progressive--hover` instead.
color-primary--active deprecated	`#2a4b8d` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.progressive--active` Deprecated: Use `color-progressive--active` instead.
color-primary--focus deprecated	`#36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `color.progressive--focus` Deprecated: Use `color-progressive--focus` instead.

List of design token names, values and metadata for `background-color`
Name	Value
background-color-base--hover deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive` Deprecated: Use `background-color-interactive` instead.
background-color-base--active deprecated	`#eaf3ff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.progressive-subtle` Deprecated: Use `background-color-progressive-subtle` instead.
background-color-base--disabled deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.disabled-subtle` Deprecated: Use `background-color-disabled-subtle` instead.
background-color-base--transparent deprecated	`rgba( 255, 255, 255, 0 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.transparent` Deprecated: Use `background-color-transparent` instead.
background-color-filled--disabled deprecated	`#c8ccd1` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.disabled` Deprecated: Use `background-color-disabled` instead.
background-color-framed deprecated	`#f8f9fa` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive-subtle` Deprecated: Use `background-color-interactive-subtle` instead.
background-color-framed--hover deprecated	`#fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.base` Deprecated: Use `background-color-base` instead.
background-color-framed--active deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive` Deprecated: Use `background-color-interactive` instead.
background-color-error--framed deprecated	`#fee7e6` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.error-subtle` Deprecated: Use `background-color-error-subtle` instead.
background-color-warning--framed deprecated	`#fef6e7` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.warning-subtle` Deprecated: Use `background-color-warning-subtle` instead.
background-color-success--framed deprecated	`#d5fdf4` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.success-subtle` Deprecated: Use `background-color-success-subtle` instead.
background-color-notice--framed deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.notice-subtle` Deprecated: Use `background-color-notice-subtle` instead.
background-color-primary deprecated	`#36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.progressive` Deprecated: Use `background-color-progressive` instead.
background-color-quiet deprecated	`rgba( 255, 255, 255, 0 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.transparent` Deprecated: Use `background-color-transparent` instead.
background-color-quiet--hover deprecated	`rgba( 0, 24, 73, 0.027 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.button.quiet--hover` Deprecated: Use `background-color-button-quiet--hover` instead.
background-color-quiet--active deprecated	`rgba( 0, 24, 73, 0.082 )` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.button.quiet--active` Deprecated: Use `background-color-button-quiet--active` instead.
background-color-message-notice deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.notice-subtle` Deprecated: Use `background-color-notice-subtle` instead.
background-color-message-error deprecated	`#fee7e6` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.error-subtle` Deprecated: Use `background-color-error-subtle` instead.
background-color-message-warning deprecated	`#fef6e7` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.warning-subtle` Deprecated: Use `background-color-warning-subtle` instead.
background-color-message-success deprecated	`#d5fdf4` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.success-subtle` Deprecated: Use `background-color-success-subtle` instead.
background-color-tabs-framed deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive` Deprecated: Use `background-color-interactive` instead.
background-color-toolbar deprecated	`#fff` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.base` Deprecated: Use `background-color-base` instead.
background-color-tool--hover deprecated	`#eaecf0` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.interactive` Deprecated: Use `background-color-interactive` instead.
background-color-tool--active deprecated	`#36c` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.progressive` Deprecated: Use `background-color-progressive` instead.
background-color-tool--active-hover deprecated	`#447ff5` Defined in `src/deprecated-aliases-wikimedia-ui-base.json` Refers to `background-color.progressive--hover` Deprecated: Use `background-color-progressive--hover` instead.

Color ​

Text colors ​

Background colors ​

Accent color ​

Border and box-shadow colors ​