VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/264198
Change subject: MediaWiki theme: Make colors comply with WCAG 2.0 level AA
......................................................................
MediaWiki theme: Make colors comply with WCAG 2.0 level AA
Establishing Web Accessibility Guidelines level AA color contrast
compliance by broadly agreed-on colors.
Also aligning Less button mixins and CSS values to CSS/Less coding
guidelines and clarifying button states by following CSS standard.
Bug: T109915
Change-Id: I26246fe3fae50f9fba4318c94e864e1a4f8393b0
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/icons-editing-core.json
M src/themes/mediawiki/icons-layout.json
M src/themes/mediawiki/icons-moderation.json
M src/themes/mediawiki/icons.json
6 files changed, 52 insertions(+), 51 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/98/264198/1
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 8c2fae0..09e6b42 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -8,19 +8,19 @@
@background-color-selected: #d8e6fe;
-@progressive: #347bff;
-@progressive-hover: #2962cc;
-@progressive-selected: #1f4999;
+@progressive: #165c91;
+@progressive-hover: #18649e;
+@progressive-selected: #134e7b;
@progressive-fade: rgba( 52, 123, 255, 0.1 );
-@constructive: #00af89;
-@constructive-hover: #008064;
-@constructive-selected: #005946;
+@constructive: #195a59;
+@constructive-hover: #1c6665;
+@constructive-selected: #134645;
@constructive-fade: rgba( 0, 171, 137, 0.1 );
-@destructive: #d11d13;
-@destructive-hover: #8c130d;
-@destructive-selected: #73100a;
+@destructive: #ab1f1d;
+@destructive-hover: #b8211f;
+@destructive-selected: #951b19;
@destructive-fade: rgba( 209, 29, 19, 0.1 );
@color-default: #555;
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index 9341541..84cf018 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -70,15 +70,15 @@
&.oo-ui-flaggedElement {
&-progressive {
-
.mediawiki-frameless-button-colored(@progressive, @progressive-hover,
@progressive-selected);
+ .mw-frameless-button-colored(
@progressive, @progressive-hover, @progressive-selected );
}
&-constructive {
-
.mediawiki-frameless-button-colored(@constructive, @constructive-hover,
@constructive-selected);
+ .mw-frameless-button-colored(
@constructive, @constructive-hover, @constructive-selected );
}
&-destructive {
-
.mediawiki-frameless-button-colored(@destructive, @destructive-hover,
@destructive-selected);
+ .mw-frameless-button-colored(
@destructive, @destructive-hover, @destructive-selected );
}
}
}
@@ -98,8 +98,9 @@
}
&-framed {
- &.oo-ui-iconElement.oo-ui-labelElement,
&.oo-ui-iconElement.oo-ui-indicatorElement {
- > .oo-ui-buttonElement-button{
+ &.oo-ui-iconElement.oo-ui-labelElement,
+ &.oo-ui-iconElement.oo-ui-indicatorElement {
+ > .oo-ui-buttonElement-button {
padding-left: 2.4em;
}
}
@@ -136,7 +137,7 @@
position: absolute;
top: 0.2em;
// This centers the icon in icon-only buttons
- left: 1.5em - @icon-size/2;
+ left: 1.5em - @icon-size / 2;
}
&.oo-ui-labelElement > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
@@ -164,7 +165,7 @@
}
&.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
- background: @background-color-filled-disabled;
+ background-color: @background-color-filled-disabled;
color: @color-disabled-framed;
border: 1px solid @border-color-disabled;
}
@@ -198,35 +199,35 @@
&.oo-ui-flaggedElement {
&-progressive {
-
.mediawiki-framed-button-colored(@progressive, @progressive-fade,
@progressive-selected);
+ .mw-framed-button-colored(
@progressive, @progressive-fade, @progressive-selected );
}
&-constructive {
-
.mediawiki-framed-button-colored(@constructive, @constructive-fade,
@constructive-selected);
+ .mw-framed-button-colored(
@constructive, @constructive-fade, @constructive-selected );
}
&-destructive {
-
.mediawiki-framed-button-colored(@destructive, @destructive-fade,
@destructive-selected);
+ .mw-framed-button-colored(
@destructive, @destructive-fade, @destructive-selected );
}
}
&.oo-ui-flaggedElement-primary.oo-ui-flaggedElement {
&-progressive {
-
.mediawiki-framed-primary-button-colored(@progressive, @progressive-hover,
@progressive-selected);
+ .mw-framed-primary-button-colored(
@progressive, @progressive-hover, @progressive-selected );
}
&-constructive {
-
.mediawiki-framed-primary-button-colored(@constructive, @constructive-hover,
@constructive-selected);
+ .mw-framed-primary-button-colored(
@constructive, @constructive-hover, @constructive-selected );
}
&-destructive {
-
.mediawiki-framed-primary-button-colored(@destructive, @destructive-hover,
@destructive-selected);
+ .mw-framed-primary-button-colored(
@destructive, @destructive-hover, @destructive-selected );
}
}
}
}
}
-.mediawiki-frameless-button-colored( @neutral, @hover, @pressed ) {
+.mw-frameless-button-colored( @link, @hover, @active ) { // following CSS
Pseudo Classes
> .oo-ui-buttonElement-button {
&:hover,
&:focus {
@@ -236,39 +237,39 @@
}
> .oo-ui-labelElement-label {
- color: @neutral;
+ color: @link;
}
}
&.oo-ui-widget-enabled {
& > .oo-ui-buttonElement-button:active >
.oo-ui-labelElement-label,
&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button >
.oo-ui-labelElement-label {
- color: @pressed;
+ color: @active;
box-shadow: none;
}
}
}
-.mediawiki-framed-button-colored( @neutral, @hover, @pressed ) {
+.mw-framed-button-colored( @link, @hover, @active ) {
> .oo-ui-buttonElement-button {
- color: @neutral;
+ color: @link;
&:hover {
background-color: @hover;
- border-color: fade(@pressed,50%);
+ border-color: fade( @active, 50% );
}
&:focus {
- box-shadow: inset 0 0 0 1px @pressed;
- border-color: @pressed;
+ box-shadow: inset 0 0 0 1px @active;
+ border-color: @active;
}
}
&.oo-ui-widget-enabled {
> .oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
- color: @pressed;
- border-color: @pressed;
+ color: @active;
+ border-color: @active;
box-shadow: none;
}
@@ -279,11 +280,11 @@
}
}
-.mediawiki-framed-primary-button-colored( @neutral, @hover, @pressed ) {
+.mw-framed-primary-button-colored( @link, @hover, @active ) {
> .oo-ui-buttonElement-button {
color: @color-default-light;
- background-color: @neutral;
- border-color: @neutral;
+ background-color: @link;
+ border-color: @link;
&:hover {
background: @hover;
@@ -292,7 +293,7 @@
&:focus {
box-shadow: @box-shadow-light-inset;
- border-color: @neutral;
+ border-color: @link;
}
}
@@ -300,8 +301,8 @@
> .oo-ui-buttonElement-button:active,
&.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
color: @color-default-light;
- background-color: @pressed;
- border-color: @pressed;
+ background-color: @active;
+ border-color: @active;
box-shadow: none;
}
@@ -340,6 +341,6 @@
.theme-oo-ui-pendingElement () {
&-pending {
-
.oo-ui-background-image('@{oo-ui-default-image-path}/textures/pending.gif');
+ .oo-ui-background-image(
'@{oo-ui-default-image-path}/textures/pending.gif' );
}
}
diff --git a/src/themes/mediawiki/icons-editing-core.json
b/src/themes/mediawiki/icons-editing-core.json
index 3bacb60..66b5a36 100644
--- a/src/themes/mediawiki/icons-editing-core.json
+++ b/src/themes/mediawiki/icons-editing-core.json
@@ -7,13 +7,13 @@
"global": true
},
"progressive": {
- "color": "#347BFF"
+ "color": "#165C91"
},
"constructive": {
- "color": "#00AF89"
+ "color": "#195A59"
},
"destructive": {
- "color": "#D11D13"
+ "color": "#AB1F1D"
},
"warning": {
"color": "#FF5D00"
diff --git a/src/themes/mediawiki/icons-layout.json
b/src/themes/mediawiki/icons-layout.json
index c507284..39fb6e7 100644
--- a/src/themes/mediawiki/icons-layout.json
+++ b/src/themes/mediawiki/icons-layout.json
@@ -7,13 +7,13 @@
"global": true
},
"progressive": {
- "color": "#347BFF"
+ "color": "#165C91"
},
"constructive": {
- "color": "#00AF89"
+ "color": "#195A59"
},
"destructive": {
- "color": "#D11D13"
+ "color": "#AB1F1D"
},
"warning": {
"color": "#FF5D00"
diff --git a/src/themes/mediawiki/icons-moderation.json
b/src/themes/mediawiki/icons-moderation.json
index fb1deb1..0ba2139 100644
--- a/src/themes/mediawiki/icons-moderation.json
+++ b/src/themes/mediawiki/icons-moderation.json
@@ -7,13 +7,13 @@
"global": true
},
"progressive": {
- "color": "#347BFF"
+ "color": "#165C91"
},
"constructive": {
- "color": "#00AF89"
+ "color": "#195A59"
},
"destructive": {
- "color": "#D11D13"
+ "color": "#AB1F1D"
},
"warning": {
"color": "#FF5D00"
diff --git a/src/themes/mediawiki/icons.json b/src/themes/mediawiki/icons.json
index 0c3b4eb..3bac1bf 100644
--- a/src/themes/mediawiki/icons.json
+++ b/src/themes/mediawiki/icons.json
@@ -8,13 +8,13 @@
"global": true
},
"progressive": {
- "color": "#347BFF"
+ "color": "#165C91"
},
"constructive": {
- "color": "#00AF89"
+ "color": "#195A59"
},
"destructive": {
- "color": "#D11D13"
+ "color": "#AB1F1D"
},
"warning": {
"color": "#FF5D00"
--
To view, visit https://gerrit.wikimedia.org/r/264198
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I26246fe3fae50f9fba4318c94e864e1a4f8393b0
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
