Color
Text colors
| Name | Value |
|---|---|
| color-base | #202122 Defined in Refers to |
| color-base--hover | #404244 Defined in Refers to |
| color-base--active | #000 Defined in Refers to |
| color-base--inverted | #fff Defined in Refers to |
| color-base--emphasized | #000 Defined in Refers to |
| color-base--subtle | #72777d Defined in Refers to |
| color-base--disabled | #72777d Defined in Refers to |
| color-filled--disabled | #fff Defined in Refers to |
| color-accessory | #54595d Defined in Refers to TODO: Unclear if `accessory` is fitting in with all the `base--` modifiers. |
| color-placeholder | #72777d 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-primary | #36c Defined in Refers to Deprecated: Replace by `color-progressive`. In use in many non-button applications. |
| color-primary--hover | #447ff5 Defined in Refers to Deprecated: Replace by `color-progressive--hover`. |
| color-primary--active | #2a4b8d Defined in Refers to Deprecated: Replace by `color-progressive--active`. |
| color-primary--focus | #36c Defined in Refers to Deprecated: Replace by `color-progressive--focus`. |
| 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-error | #d33 Defined in Refers to |
| color-success | #14866d Defined in Refers to |
| color-base0 | #000 Defined in |
| color-base10 | #202122 Defined in |
| color-base20 | #54595d Defined in |
| color-base30 | #72777d Defined in |
| color-base50 | #a2a9b1 Defined in |
| color-base70 | #c8ccd1 Defined in |
| color-base80 | #eaecf0 Defined in |
| color-base90 | #f8f9fa Defined in |
| color-base100 | #fff Defined in |
| color-accent30 | #2a4b8d Defined in |
| color-accent50 | #36c Defined in |
| color-accent90 | #eaf3ff Defined in |
| color-utility-red30 | #b32424 Defined in |
| color-utility-red50 | #d33 Defined in |
| color-utility-red90 | #fee7e6 Defined in |
| color-utility-yellow30 | #ac6600 Defined in |
| color-utility-yellow50 | #fc3 Defined in |
| color-utility-yellow90 | #fef6e7 Defined in |
| color-utility-green30 | #14866d Defined in |
| color-utility-green50 | #00af89 Defined in |
| color-utility-green90 | #d5fdf4 Defined in |
| color-modifier-base10-lighten | #404244 Defined in |
| color-modifier-base90-translucent | rgba( 0, 24, 73, 0.02 ) Defined in TODO: Not part of DS Figma yet. Equals `@wmui-color-base90` on white. Note, that in WikimediaUI Base Less it was a calculated value `rgba( 0, 24, 73, ( 7 / 255 ) )`. |
| color-modifier-base80-translucent | rgba( 0, 24, 73, 0.02 ) Defined in TODO: Not part of DS Figma yet. Equals `@wmui-color-base80` on white. Note, that in WikimediaUI Base Less it was a calculated value `rgba( 0, 36, 73, ( 21 / 255 ) )`. |
| color-modifier-accent50-lighten | #447ff5 Defined in |
| color-modifier-accent50-translucent | rgba( 51, 102, 204, 0.1 ) Defined in TODO: Not part of DS Figma yet. Note, that WikimediaUI Base's `rgba( 41, 98, 204, 0.1 )` was not a modifier of Accent50, while this is. |
| color-modifier-utility-red50-lighten | #ff4242 Defined in |
| color-modifier-utility-green50-lighten | #ff4242 Defined in |
| color-modifier-purple | #6b4ba1 Defined in |
| color-transparent | transparent Defined in |
Background colors
| Name | Value |
|---|---|
| background-color-base | #fff Defined in Refers to |
| background-color-base--hover | #eaecf0 Defined in Refers to |
| background-color-base--active | #eaf3ff Defined in Refers to |
| background-color-base--transparent | transparent Defined in Refers to |
| background-color-base--disabled | #c8ccd1 Defined in Refers to |
| 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-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 | #fee7e6 Defined in Refers to |
| background-color-framed | #f8f9fa Defined in Refers to |
| background-color-framed--hover | #f8f9fa Defined in Refers to |
| background-color-framed--active | #c8ccd1 Defined in Refers to |
| background-color-filled--disabled | #c8ccd1 Defined in Refers to 'Filled' UI elements (Checkboxes, Radios, ProgressBars…) |
| 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, 0.02 ) Defined in Refers to |
| background-color-quiet--active | rgba( 0, 24, 73, 0.02 ) Defined in Refers to |
| background-color-quiet-progressive--hover | #eaf3ff Defined in Refers to |
| background-color-progressive-quiet--hover | #eaf3ff Defined in Refers to Deprecated key. Use 'background-color.quiet-progressive--hover' key instead. |
| background-color-message-notice | #eaecf0 Defined in Refers to |
| background-color-message-error | #fee7e6 Defined in Refers to |
| background-color-message-warning | #fef6e7 Defined in Refers to |
| background-color-message-success | #d5fdf4 Defined in Refers to |
| background-color-tabs-framed | #eaecf0 Defined in Refers to Tabs bar background color. |
| background-color-toolbar | #fff Defined in Refers to Toolbar. |
| background-color-tool--hover | #eaecf0 Defined in Refers to Toolbar tools. |
| background-color-tool--active | #36c Defined in Refers to |
| background-color-tool--active-hover | #447ff5 Defined in Refers to |