VolkerE has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/311879

Change subject: Align UI elements to improved WCAG compliant color palette
......................................................................

Align UI elements to improved WCAG compliant color palette

Aligning user-interface elements of the Wikimedia Portal to improved
WCAG compliant color palette https://phabricator.wikimedia.org/M82
similar to
https://phabricator.wikimedia.org/rGOJUed9fef533beaf2191f1ea718a3210831541305d7
Integrating variables of v0.6.1 of 
https://phabricator.wikimedia.org/diffusion/WMUI/
to get the job done correctly.
Also removing obsolete `constructive` buttons - there are no `constructive` 
buttons
any more in our user interface (concepts).

Bug: T146231
Change-Id: Idbd1b01e5d7b0e2700c106a678624972443aa6de
---
M dev/wikipedia.org/assets/postcss/_buttons.css
M dev/wikipedia.org/assets/postcss/_lang-dropdown.css
M dev/wikipedia.org/assets/postcss/_vars.css
M dev/wikipedia.org/assets/postcss/_wm-portal.css
4 files changed, 183 insertions(+), 109 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/wikimedia/portals 
refs/changes/79/311879/1

diff --git a/dev/wikipedia.org/assets/postcss/_buttons.css 
b/dev/wikipedia.org/assets/postcss/_buttons.css
index cdc8883..6b1213f 100644
--- a/dev/wikipedia.org/assets/postcss/_buttons.css
+++ b/dev/wikipedia.org/assets/postcss/_buttons.css
@@ -22,14 +22,14 @@
     box-sizing: border-box;
 
     /* from OOjs UI */
-    background-color: #fff;
-    color: #555;
+    background-color: var( --background-color-framed );
+    color: var( --color-base );
     position: relative;
     min-height: 1.2em;
     min-width: 1em;
     margin: 0.1em 0;
-    border: 1px solid #cdcdcd;
-    border-radius: 2px;
+    border: var( --border-base );
+    border-radius: var( --border-radius-base );
     padding: 0.5em 1em;
     font-family: inherit;
     font-size: inherit;
@@ -47,18 +47,20 @@
 
 .pure-button-hover,
 .pure-button:hover {
-    background-color: #ebebeb;
-    outline: 0;
-}
-.pure-button:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.2 );
+    background-color: var( --background-color-framed-hover );
+    color: var( --color-base-hover );
+    border-color: var( --border-color-base-hover );
 }
 .pure-button-active,
 .pure-button:active {
     background-color: #d9d9d9;
-    border-color: #d9d9d9;
-    box-shadow: none;
+    color: var( --color-base-active );
+    border-color: var( --border-color-base-active );
+}
+.pure-button:focus {
+    border-color: var( --color-progressive-focus );
+    box-shadow: var( --box-shadow-base-focus );
+    outline: 0;
 }
 
 .pure-button[disabled],
@@ -98,7 +100,7 @@
 /*.pure-button-selected,*/
 /*a.pure-button-primary,*/
 /*a.pure-button-selected {*/
-    /*background-color: var( --c-primary );*/
+    /*background-color: var( --color-primary );*/
     /*color: #fff;*/
 /*}*/
 
@@ -106,50 +108,9 @@
     color: #fff;
 }
 
-/* Constructive Buttons */
-.pure-button-constructive {
-    color: #00af89;
-}
-.pure-button-constructive:hover {
-    background-color: #00af89;
-    background-color: rgba( 0, 171, 137, 0.1 );
-    border-color: #00af89;
-    border-color: #00af89 rgba( 0, 89, 70, 0.5 );
-}
-.pure-button-constructive:active {
-    color: #005946;
-    border-color: #005946;
-    box-shadow: none;
-}
-.pure-button-constructive:focus {
-    box-shadow: inset 0 0 0 1px #005946;
-    border-color: #005946;
-}
-
-.pure-button-primary-constructive {
-    color: #fff;
-    background-color: #00af89;
-    border-color: #00af89;
-}
-.pure-button-primary-constructive:hover {
-    background: #008064;
-    border-color: #008064;
-}
-.pure-button-primary-constructive:active {
-    color: #fff;
-    background-color: #005946;
-    border-color: #005946;
-    box-shadow: none;
-
-}
-.pure-button-primary-constructive:focus {
-    box-shadow: inset 0 0 0 1px #fff;
-    border-color: #00af89;
-}
-
 /* Destructive Buttons */
 .pure-button-destructive {
-    color: #d11d13;
+    color: var( --color-destructive );
 }
 .pure-button-destructive:hover {
     background-color: #73100a;
@@ -158,72 +119,72 @@
     border-color: rgba( 115, 16, 10, 0.5 );
 }
 .pure-button-destructive:active {
-    color: #73100a;
-    border-color: #73100a;
+    color: #873636;
+    border-color: #873636;
     box-shadow: none;
 }
 .pure-button-destructive:focus {
-    box-shadow: inset 0 0 0 1px #73100a;
-    border-color: #73100a;
+    box-shadow: inset 0 0 0 1px var( --color-destructive );
+    border-color: var( --color-destructive );
 }
 
 .pure-button-primary-destructive {
-    color: #fff;
-    background-color: #d11d13;
-    border-color: #d11d13;
+    color: var( --color-base-contrast );
+    background-color: var( --color-destructive );
+    border-color: var( --color-destructive );
 }
 .pure-button-primary-destructive:hover {
-    background: #8c130d;
-    border-color: #8c130d;
+    background: #e53939;
+    border-color: #e53939;
 }
 .pure-button-primary-destructive:active {
-    color: #fff;
+    color: var( --color-base-contrast );
     background-color: #73100a;
     border-color: #73100a;
     box-shadow: none;
-
 }
 .pure-button-primary-destructive:focus {
-    box-shadow: inset 0 0 0 1px #fff;
-    border-color: #d11d13;
+    box-shadow: inset 0 0 0 1px var( --color-base-contrast );
+    border-color: var( --color-destructive );
 }
 
+/* Primary Progressive Buttons */
 .pure-button-progressive {
-    color: var( --c-primary );
+    color: var( --color-primary );
 }
 .pure-button-progressive:hover {
-    background-color: var( --c-primary-hover );
-    border-color: var( --c-primary-hover );
+    background-color: var( --color-primary-hover );
+    border-color: var( --color-primary-hover );
 }
 .pure-button-progressive:active {
-    color: var( --c-primary-active );
-    border-color: var( --c-primary-active );
+    color: var( --color-primary-active );
+    border-color: var( --color-primary-active );
     box-shadow: none;
 }
 .pure-button-progressive:focus {
-    box-shadow: inset 0 0 0 1px var( --c-primary-focus );
-    border-color: var( --c-primary-focus );
+    box-shadow: inset 0 0 0 1px var( --color-primary-focus );
+    border-color: var( --color-primary-focus );
 }
 
 .pure-button-primary-progressive {
-    background-color: var( --c-primary );
-    border-color: var( --c-primary );
-    color: #fff;
+    background-color: var( --color-primary );
+    border-color: var( --color-primary );
+    color: var( --color-base-contrast );
 }
 .pure-button-primary-progressive:hover {
-    background: var( --c-primary-hover );
-    border-color: var( --c-primary-hover );
+    background: var( --color-primary-hover );
+    border-color: var( --color-primary-hover );
 }
 .pure-button-primary-progressive:active {
-    color: #fff;
-    background-color: var( --c-primary-active );
-    border-color: var( --c-primary-active );
+    color: var( --color-base-contrast );
+    background-color: var( --color-primary-active );
+    border-color: var( --color-primary-active );
     box-shadow: none;
 
 }
 .pure-button-primary-progressive:focus {
     box-shadow: inset 0 0 0 1px #fff;
-    border-color: var( --c-primary-focus );
+    border-color: var( --color-primary-focus );
 }
 
 .button-xsmall {
diff --git a/dev/wikipedia.org/assets/postcss/_lang-dropdown.css 
b/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
index 47f7af1..facaf8b 100644
--- a/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
+++ b/dev/wikipedia.org/assets/postcss/_lang-dropdown.css
@@ -47,22 +47,32 @@
     position: relative;
     padding: 0.5em 1em;
     margin: 0 auto;
-    color: var( --c-primary );
+    color: var( --color-primary );
     font-size: 0.8rem;
     line-height: 1;
     font-weight: normal;
     z-index: 1;
-    background-color: #fff;
-    border: 1px solid #ccc;
+    background-color: var( --background-color-framed );
+    border: var( --border-base );
     border-radius: 2px;
     outline: 1rem solid #fff;
     transition: outline-width 0.05s ease-in;
     transition-delay: 0.5s;
 }
 
+.lang-list-button:hover {
+    background-color: var( --background-color-framed-hover );
+    border-color: ( --border-color-base-hover );
+}
+
+.lang-list-button:focus {
+    border-color: var( --color-primary-focus );
+    box-shadow: inset 0 0 0 1px var( --color-primary-focus );
+}
+
 .lang-list-active .lang-list-button {
-    border: 1px solid #ccc;
-    background-color: var( --ss-c-grey-hover );
+    background-color: var( --background-color-framed-hover );
+    border-color: var( --border-color-base-active );
     outline: 1px solid #fff;
     transition-delay: 0s;
 }
@@ -77,16 +87,6 @@
     vertical-align: middle;
 }
 
-.lang-list-button:hover {
-    background-color: var( --ss-c-grey-hover );
-    border: 1px solid #ccc;
-}
-
-.lang-list-button:focus {
-    border: 1px solid var( --c-primary );
-    box-shadow: inset 0 0 0 1px var( --c-primary );
-}
-
 .no-js .lang-list-button,
 .no-js .lang-list-border {
     display: none;
@@ -99,7 +99,7 @@
     max-width: 460px;
     width: 80%;
     height: 1px;
-    background-color: #ccc;
+    background-color: #c8ccd1;
     transition: max-width 0.2s ease-out;
     transition-delay: 0.4s;
 }
diff --git a/dev/wikipedia.org/assets/postcss/_vars.css 
b/dev/wikipedia.org/assets/postcss/_vars.css
index eba878e..0ba0fac 100644
--- a/dev/wikipedia.org/assets/postcss/_vars.css
+++ b/dev/wikipedia.org/assets/postcss/_vars.css
@@ -1,15 +1,127 @@
 :root {
     /**
-     * MediaWiki Base CSS Variables
+     * Excerpt (everything besides `:root {}`) of
+     * WikimediaUI base v0.6.1
+     * Wikimedia Foundation user interface base variables
      *
-     * https://phabricator.wikimedia.org/diffusion/WMUI/browse/master/base.less
+     * 
https://phabricator.wikimedia.org/diffusion/WMUI/browse/master/wmui-base.css;v0.6.1
      */
-    --c-primary: #165c91;
-    --c-primary-hover: #18649e;
-    --c-primary-active: #134e7b;
-    --c-primary-focus: var( --c-primary );
 
-    /* Variables for the Search language picker / Styled Select */
+    /* stylelint-disable declaration-colon-space-after, max-empty-lines */
+    /* Colors */
+    /* Background Colors */
+    --background-color-base:      #fff;
+    --background-color-code:      #f8f9fa;
+    /* 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches...) */
+    --background-color-framed:    #f8f9fa;
+    --background-color-framed-hover: var( --background-color-base );
+
+    /* Foreground Colors */
+    --color-base:                 #222;
+    --color-base-hover:           #444;
+    --color-base-active:          #000;
+    --color-base-contrast:        #fff;
+    --color-base-emphasized:      var( --color-base-active );
+    --color-base-disabled:        #72777d; /* = HSB 210°, 9%, 49%; WCAG 2.0 
level AA at 4.52:1 contrast ratio on `#fff` */
+    --color-filled-disabled:      var( --color-base-contrast );
+    --color-placeholder:          #54595d; /* WCAG 2.0 level AAA at 7.09:1 
contrast ratio on `#fff` */
+    /* Primary 'Progressive' Color, Background Color and states */
+    --background-color-primary:   #eaf3ff;
+    --background-color-primary-hover: rgba( 41, 98, 204, 0.1 );
+    --color-primary:              #36c;    /* = HSB 220°, 75%, 80% */
+    --color-primary-hover:        #447ff5; /* = `filter: brightness( 109% )` */
+    --color-primary-active:       #2a4b8d; /* = `filter: brightness( 85% )` */
+    --color-primary-focus:        var( --color-primary );
+    /* 'Destructive' Color, Background Color and states */
+    --background-color-destructive: #fbe8e7;
+    --color-destructive:          #c33;    /* = HSB 360°, 75%, 80% */
+    --color-destructive-hover:    #e53939;
+    --color-destructive-active:   #873636;
+    --color-destructive-focus:    var( --color-destructive );
+    /* Secondary Color and states (links only) */
+    --color-secondary:            #00af89;
+    --color-secondary-hover:      #1c6665;
+    --color-secondary-active:     #134645;
+    --color-secondary-focus:      var( --color-secondary );
+    /* Colors RGBA including hex fallback on `#fff` for IE 6/7/8 */
+    --color-highlighted:          rgba( 255, 182, 13, 0.4 );
+    --color-highlighted-fallback: #ffe29e;
+
+
+    /* Opacity */
+    --opacity-base:               1;
+    --opacity-base-disabled:      0.51; /* = `#7d7d7d` on `background-color: 
#fff`; HSB 0°, 0%, 49% */
+
+
+    /* Positioning */
+    /* Z-Index */
+    --z-index-base:               0;
+
+
+    /* Box Model properties */
+    /* Max Widths */
+    --max-width-button:           28.75em; /* = `460px` at `16px` base, see 
T95367 */
+    --max-width-input-inline:     100%;
+
+    /* Border */
+    --border-base:                var( --border-width-base ) solid var( 
--border-color-base );
+    /* Border Colors */
+    --border-color-base:          #9aa0a7;
+    --border-color-base-hover:    #a2a9b1;
+    --border-color-base-active:   #72777d;
+    --border-color-base-disabled: var( --color-base-disabled );
+    --border-color-filled-disabled: var( --color-filled-disabled );
+    --border-color-primary-active: #859dcc;
+    --border-color-destructive-active: #b77c79;
+    --border-color-inset-focus:   var( --color-base-contrast );
+    --border-color-dialog:        #a2a9b1;
+    --border-color-heading:       #c8ccd1;
+    /* Border Widths */
+    --border-width-base:          1px;
+    /* Border Radius */
+    --border-radius-base:         2px;
+
+    /* Box Shadows */
+    --box-shadow-base-focus:      inset 0 0 0 1px var( --color-primary );
+    --box-shadow-inset-contrast:  inset 0 0 0 1px var( --color-base-contrast );
+    --box-shadow-filled-disabled: inset 0 0 0 1px var( --color-filled-disabled 
);
+    --box-shadow-dialog:          0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
+    --box-shadow-menu:            var( --box-shadow-dialog );
+
+
+    /* Typography incl. print properties */
+    /* Font Families */
+    --font-family-base:           var( --font-family-sans );
+    --font-family-heading-main:   var( --font-family-serif );
+    --font-family-sans:           'Helvetica Neue', 'Helvetica', 'Nimbus Sans 
L', 'Arial', 'Liberation Sans', sans-serif;
+    --font-family-serif:          'Linux Libertine', 'Georgia', 'Times', serif;
+    /* Line Heights */
+    --line-height-base:           1.6;
+    --line-height-heading:        1.25;
+    --text-decoration-link-hover: none;
+    /* Text Shadows */
+    --text-shadow-base:           0 1px 1px var( --color-base-contrast ); /* 
'coined' effect */
+    --text-shadow-base-disabled:  var( --text-shadow-base );
+
+
+    /* Other Properties */
+    /* Cursors */
+    --cursor-base-disabled:       default;
+
+
+    /* Animation & Transition */
+    /* Transitions */
+    --transition-base:            var( --transition-duration-base );
+    --transition-medium:          var( --transition-duration-medium );
+    /* Transitions > Durations */
+    --transition-duration-base:   100ms;
+    --transition-duration-medium: 250ms;
+
+
+    /**
+     * Portal specific variables
+     */
+    /* Search language picker / Styled Select */
     --ss-pos-top: 10px;
     --ss-pos-right: 12px;
     --ss-pos-bottom: 12px;
@@ -25,4 +137,5 @@
 
     --ss-select-z-index: 1;
     --ss-button-z-index: 2;
+    /* stylelint-enable */
 }
diff --git a/dev/wikipedia.org/assets/postcss/_wm-portal.css 
b/dev/wikipedia.org/assets/postcss/_wm-portal.css
index 2a0cc2e..b1ed74d 100644
--- a/dev/wikipedia.org/assets/postcss/_wm-portal.css
+++ b/dev/wikipedia.org/assets/postcss/_wm-portal.css
@@ -20,11 +20,11 @@
     unicode-bidi: embed;
     white-space: nowrap;
     outline: 0;
-    color: var( --c-primary );
+    color: var( --color-primary );
     text-decoration: none;
 }
 a:focus {
-    outline: 1px solid var( --c-primary );
+    outline: 1px solid var( --color-primary );
 }
 
 a:hover {

-- 
To view, visit https://gerrit.wikimedia.org/r/311879
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Idbd1b01e5d7b0e2700c106a678624972443aa6de
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/portals
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

Reply via email to