VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/309483
Change subject: MediaWiki theme: Enhance button styles and align them to new
color palette
......................................................................
MediaWiki theme: Enhance button styles and align them to new color palette
Together with aligning buttons to new WCAG 2.0 level AA compliant
color palette we're also enhancing button appearance to address
several issues:
- simplifying visual distinction between input fields and buttons,
- aligning icon/indicator with text color,
- increasing contrast of disabled elements and widgets further for
people with visual disabilities without negatively affecting distinction for
others and
- visually clarifying selected elements in ButtonSelect- and ToggleButtonWidget.
Bug: T86047
Bug: T88038
Bug: T109915
Bug: T136590
Change-Id: Ic89d4c4adfc0ae07a81920e4797842677ad11c75
---
M php/themes/MediaWikiTheme.php
M src/themes/mediawiki/MediaWikiTheme.js
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/tools.less
M src/themes/mediawiki/widgets.less
6 files changed, 111 insertions(+), 48 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/83/309483/1
diff --git a/php/themes/MediaWikiTheme.php b/php/themes/MediaWikiTheme.php
index 939b728..c3a1745 100644
--- a/php/themes/MediaWikiTheme.php
+++ b/php/themes/MediaWikiTheme.php
@@ -27,7 +27,7 @@
} elseif ( !$isFramed && $element->isDisabled() ) {
// Frameless disabled button, always use black
icon regardless of flags
$variants['invert'] = false;
- } else {
+ } elseif ( !$element->isDisabled() ) {
// Any other kind of button, use the right
colored icon if available
$variants['progressive'] = $element->hasFlag(
'progressive' );
$variants['constructive'] = $element->hasFlag(
'constructive' );
diff --git a/src/themes/mediawiki/MediaWikiTheme.js
b/src/themes/mediawiki/MediaWikiTheme.js
index 07d2e6e..92ce306 100644
--- a/src/themes/mediawiki/MediaWikiTheme.js
+++ b/src/themes/mediawiki/MediaWikiTheme.js
@@ -40,7 +40,7 @@
} else if ( !isFramed && element.isDisabled() ) {
// Frameless disabled button, always use black icon
regardless of flags
variants.invert = false;
- } else {
+ } else if ( !element.isDisabled() ) {
// Any other kind of button, use the right colored icon
if available
variants.progressive = element.hasFlag( 'progressive' );
variants.constructive = element.hasFlag( 'constructive'
);
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 69287d7..1af09b8 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -3,17 +3,17 @@
@oo-ui-default-image-path: 'themes/mediawiki/images';
@background-color-default: #fff;
-@background-color-default-hover: #eee;
-@background-color-active: #999;
+@background-color-default-hover: #eaecf0;
+@background-color-default-active: #9aa0a7;
@color-default: #222;
@color-default-active: #000;
@color-default-light: #fff;
@color-emphasized: @color-default-active;
-@color-placeholder: #595959; // aligns to WCAG 2.0 level AAA 7:1 contrast ratio
+@color-placeholder: #54595d; // aligns to WCAG 2.0 level AAA 7:1 contrast ratio
// Primary 'Progressive' and 'Destructive' Colors
-@background-color-progressive: #ebf2ff; // equals rgba output in `fade(
@color-progressive, 10% )`
+@background-color-progressive: #eaf3ff; // equals rgba output in `fade(
@color-progressive, 10% )`
@background-color-progressive-hover: rgba( 41, 98, 204, 0.1 );
@color-progressive: #36c; // equals HSB 220°/75%/80%
@color-progressive-hover: #447ff5; // equals HSB 220°/72%/96%
@@ -27,14 +27,21 @@
@color-destructive-focus: @color-destructive;
// Disabled Widgets
-@background-color-disabled: #f3f3f3;
-@background-color-disabled-filled: #ddd;
-@color-disabled: #ccc;
-@color-disabled-filled: #fff;
-@opacity-disabled: 0.2;
+@background-color-disabled: #eaecf0;
+@background-color-disabled-filled: #c8ccd1;
+@color-disabled: #7d8389;
+@color-disabled-filled: @color-default-light;
+@opacity-disabled: 0.53; // `0.53` equals `#7b7b7b` on background-color `#fff`
+@opacity-disabled-filled: 1;
+@opacity-disabled-indicator: 0.15; // equals `#c7c8cc` on background-color
`#fff`
+@opacity-disabled-tool: 0.3;
// Invalid Widget (validation error feedback)
@color-invalid: #f00;
+
+// "Framed" Widgets (Framed ButtonWidget, ToggleSwitchWidget...)
+@background-color-framed: #f8f9fa;
+@background-color-framed-hover: @background-color-default; //fade(
@color-default, 10% );
// Toolbar, Tools & Menus
@background-color-toolbar: @background-color-default;
@@ -42,6 +49,7 @@
@background-color-tool-active: @background-color-progressive;
@background-color-tool-active-hover: @background-color-progressive-hover;
@color-tool-active: @color-progressive;
+@border-toolbar: @border-width-default solid #c8ccd1;
// Box Sizes
@min-height-toggleswitch: 26px; // equals `16px` @size-toggleswitch-grip-min +
4px*2 distance top/bottom + 1px*2 border top/bottom
@@ -59,16 +67,16 @@
@border-dialog: @border-width-default solid @border-color-dialog;
@border-menu: @border-dialog;
-@border-color-default: #ccc;
-@border-color-default-hover: #aaa;
+@border-color-default: #9aa0a7;
+@border-color-default-hover: #a2a9b1;
+@border-color-default-active: #7d8389;
@border-color-default-focus: @color-progressive-focus;
-@border-color-disabled: #ddd;
+@border-color-disabled: #c8ccd1;
@border-color-disabled-filled: @color-disabled-filled;
@border-color-progressive-active: #859dcc; // equals `fade(
@color-progressive-active, 50% )`
@border-color-destructive-active: #b77c79; // equals `fade(
@color-destructive-active, 50% )`
@border-color-focus-inset: @color-default-light;
-@border-color-dialog: #aaa;
-@border-color-buttonelement-active: @background-color-active;
+@border-color-dialog: #a2a9b1;
@border-radius-default: 2px;
@@ -79,12 +87,16 @@
@box-shadow-focus-default: inset 0 0 0 1px @color-progressive;
@box-shadow-focus-inset: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px
@color-default-light;
@box-shadow-disabled-filled: inset 0 0 0 1px @color-disabled-filled;
+@box-shadow-light-inset: inset 0 0 0 1px @color-default-light;
@line-height-default: 1.4;
@text-shadow-default: 0 1px 1px @color-default-light; // 'coined' effect
@text-shadow-disabled: @text-shadow-default;
+@opacity-icon-default: 0.87; // equals `#222` on background-color `#fff`
+@opacity-icon-selected: 1;
+
// Transition variables
// Some of these values are duplicated in OO.ui.MediaWikiTheme
@transition-ease-quick: 100ms; // `ease` is the initial value
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index 8f00b16..750530a 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -24,6 +24,17 @@
}
}
+ &.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
+ > .oo-ui-iconElement-icon,
+ > .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-icon-default;
+
+ &.oo-ui-image-invert {
+ opacity: @opacity-icon-selected;
+ }
+ }
+ }
+
&-frameless {
> .oo-ui-buttonElement-button {
.oo-ui-indicatorElement-indicator {
@@ -161,12 +172,14 @@
&.oo-ui-widget-enabled {
& > .oo-ui-buttonElement-button {
- background-color: @background-color-default;
+ background-color: @background-color-framed;
color: @color-default;
border: @border-default;
&:hover {
- background-color: darken(
@background-color-default, 8% );
+ background-color:
@background-color-framed-hover;
+ color: lighten( @color-default, 15% );
+ border-color:
@border-color-default-hover;
}
&:focus {
@@ -178,46 +191,58 @@
& > .oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button {
background-color: darken(
@background-color-default, 15% );
- border-color: darken(
@background-color-default, 15% );
+ color: @color-default-active;
+ border-color: @border-color-default-active;
}
&.oo-ui-buttonElement-active >
.oo-ui-buttonElement-button {
- background-color: @background-color-active;
+ background-color: @color-progressive-active;
color: @color-default-light;
- border-color:
@border-color-buttonelement-active;
+ border-color: @border-color-default-active;
z-index: 3;
&:focus {
border-color: @color-progressive-focus;
+ box-shadow: inset 0 0 0 1px
@color-progressive-focus, inset 0 0 0 2px @color-default-light;
}
}
&.oo-ui-flaggedElement {
&-progressive {
- .mw-framed-button-colored(
@color-progressive, @background-color-progressive, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
+ .mw-framed-button-colored(
@color-progressive, @background-color-framed-hover, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
}
// Deprecated in 0.16.1
&-constructive {
- .mw-framed-button-colored(
@color-progressive, @background-color-progressive, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
+ .mw-framed-button-colored(
@color-progressive, @background-color-framed-hover, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
}
&-destructive {
.mw-framed-button-colored(
@color-destructive, @background-color-destructive, @color-destructive-active,
@border-color-destructive-active, @color-destructive-focus );
}
}
- &.oo-ui-flaggedElement-primary.oo-ui-flaggedElement {
- &-progressive {
- .mw-framed-primary-button-colored(
@color-progressive, @color-progressive-hover, @color-progressive-active,
@color-progressive-focus );
+
+ &.oo-ui-flaggedElement-primary {
+ &.oo-ui-flaggedElement {
+ &-progressive {
+
.mw-framed-primary-button-colored( @color-progressive,
@color-progressive-hover, @color-progressive-active, @color-progressive-focus );
+ }
+
+ // Deprecated in 0.16.1
+ &-constructive {
+
.mw-framed-primary-button-colored( @color-progressive,
@color-progressive-hover, @color-progressive-active, @color-progressive-focus );
+ }
+
+ &-destructive {
+
.mw-framed-primary-button-colored( @color-destructive,
@color-destructive-hover, @color-destructive-active, @color-destructive-focus );
+ }
}
- // Deprecated in 0.16.1
- &-constructive {
- .mw-framed-primary-button-colored(
@color-progressive, @color-progressive-hover, @color-progressive-active,
@color-progressive-focus );
- }
-
- &-destructive {
- .mw-framed-primary-button-colored(
@color-destructive, @color-destructive-hover, @color-destructive-active,
@color-destructive-focus );
+ & > .oo-ui-buttonElement-button {
+ > .oo-ui-iconElement-icon,
+ > .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-icon-selected;
+ }
}
}
}
@@ -261,13 +286,14 @@
> .oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
+ background-color: lighten( @active, 60% ); // FIXME
color: @active;
border-color: @active;
box-shadow: none;
}
&.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
- background-color: @background-color-active;
+ //background-color: @background-color-default-active;
color: @color-default-light;
}
@@ -300,7 +326,7 @@
}
&.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
- background-color: @background-color-active;
+ background-color: @background-color-default-active;
color: @color-default-light;
}
diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less
index 8716bcf..ca3c2fd 100644
--- a/src/themes/mediawiki/tools.less
+++ b/src/themes/mediawiki/tools.less
@@ -2,7 +2,7 @@
.theme-oo-ui-toolbar () {
&-bar {
- border-bottom: @border-default;
+ border-bottom: @border-toolbar;
background-color: @background-color-toolbar;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.1 );
font-weight: 500;
@@ -75,7 +75,7 @@
}
.theme-oo-ui-toolGroup () {
- border-right: @border-default;
+ border-right: @border-toolbar;
.oo-ui-toolbar-narrow & {
+ .oo-ui-toolGroup {
@@ -138,7 +138,7 @@
}
.oo-ui-iconElement-icon {
- opacity: @opacity-disabled;
+ opacity: @opacity-disabled-tool;
}
}
}
@@ -332,7 +332,7 @@
&.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
&.oo-ui-widget-disabled .oo-ui-iconElement-icon,
.oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
- opacity: @opacity-disabled;
+ opacity: @opacity-disabled-tool;
}
}
@@ -378,6 +378,6 @@
&.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
&.oo-ui-widget-disabled .oo-ui-iconElement-icon,
.oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
- opacity: @opacity-disabled;
+ opacity: @opacity-disabled-tool;
}
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index eeb1816..01799c0 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -135,14 +135,16 @@
&.oo-ui-widget-enabled {
.oo-ui-dropdownWidget-handle {
- background-color: @background-color-default;
- color: @color-default;
+ background-color: @background-color-framed;
+ color: @color-default; //FIXME
.oo-ui-transition(
+ background-color @transition-ease-quick,
border-color @transition-ease-quick,
box-shadow @transition-ease-quick
);
&:hover {
+ background-color:
@background-color-framed-hover;
border-color: @border-color-default-hover;
}
@@ -150,6 +152,12 @@
border-color: @border-color-default-focus;
outline: 0;
box-shadow: @box-shadow-focus-default;
+ }
+ }
+
+ &.oo-ui-dropdownWidget-open {
+ .oo-ui-dropdownWidget-handle {
+ background-color:
@background-color-framed-hover;
}
}
}
@@ -166,7 +174,7 @@
}
}
.oo-ui-indicatorElement-indicator {
- opacity: @opacity-disabled;
+ opacity: @opacity-disabled-indicator;
}
}
@@ -662,10 +670,10 @@
&.oo-ui-widget-disabled {
input,
textarea {
+ background-color: @background-color-disabled;
color: @color-disabled;
text-shadow: @text-shadow-disabled;
border-color: @border-color-disabled;
- background-color: @background-color-disabled;
}
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
@@ -740,6 +748,12 @@
&:focus {
border-color: @border-color-default-focus;
}
+ }
+ }
+
+ &.oo-ui-widget-disabled {
+ .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-disabled-indicator;
}
}
}
@@ -835,9 +849,12 @@
border-color: @border-color-disabled;
background-color: @background-color-disabled;
- > .oo-ui-iconElement-icon,
- > .oo-ui-indicatorElement-indicator {
+ > .oo-ui-iconElement-icon {
opacity: @opacity-disabled;
+ }
+
+ > .oo-ui-indicatorElement-indicator {
+ opacity: @opacity-disabled-indicator;
}
}
}
@@ -912,6 +929,10 @@
// Don't add `highlighted` or `selected` modifications here
// as it inherits to various visually opposite widgets.
+
+ &-selected .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
+ opacity: @opacity-icon-selected;
+ }
&.oo-ui-widget-disabled {
color: @color-disabled;
@@ -1233,7 +1254,7 @@
.oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected {
.oo-ui-buttonElement-button {
border-color:
@border-color-default-focus;
- box-shadow: @box-shadow-focus-default;
+ box-shadow: @box-shadow-focus-inset;
}
}
}
@@ -1294,12 +1315,12 @@
.theme-oo-ui-toggleSwitchWidget () {
@travelDistance: 1.5em;
+ background-color: @background-color-framed;
width: @travelDistance + 2em;
min-height: @min-height-toggleswitch;
height: 2em;
border: @border-input-binary;
border-radius: 1em;
- background-color: @background-color-default;
.oo-ui-inline-spacing( 0.5em );
.oo-ui-transition(
background-color @transition-ease-quick,
@@ -1330,6 +1351,7 @@
height: 1.25em;
border-radius: 1.25em;
.oo-ui-transition(
+ background-color @transition-ease-quick,
left @transition-ease-quick,
margin-left @transition-ease-quick
);
@@ -1356,13 +1378,16 @@
&.oo-ui-widget-enabled {
.oo-ui-toggleSwitchWidget-grip {
+ background-color: @background-color-framed;
border: @border-input-binary;
}
&:hover {
+ background-color: @background-color-framed-hover;
border-color: @color-progressive-hover;
.oo-ui-toggleSwitchWidget-grip {
+ background-color:
@background-color-framed-hover;
border-color: @color-progressive-hover;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/309483
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic89d4c4adfc0ae07a81920e4797842677ad11c75
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
