VolkerE has uploaded a new change for review. https://gerrit.wikimedia.org/r/317750
Change subject: Follow overhauled color palette ...................................................................... Follow overhauled color palette Replacing colors with ones from the overhauled WCAG 2.0 level AA compliant color palette https://phabricator.wikimedia.org/M82 Applying Less variables where possible for better flexibility in future design maintenance. Also introducing some variables from WikimediaUI Base. Bug: T147365 Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699 Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41 --- M modules/echo.variables.less M modules/nojs/mw.echo.notifications.less M modules/nojs/mw.echo.special.less M modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less M modules/styles/mw.echo.ui.DatedSubGroupListWidget.less M modules/styles/mw.echo.ui.MenuItemWidget.less M modules/styles/mw.echo.ui.NotificationItemWidget.less M modules/styles/mw.echo.ui.NotificationsListWidget.less M modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less M modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less 10 files changed, 59 insertions(+), 45 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo refs/changes/50/317750/1 diff --git a/modules/echo.variables.less b/modules/echo.variables.less index a24ba39..62b6b86 100644 --- a/modules/echo.variables.less +++ b/modules/echo.variables.less @@ -1,17 +1,36 @@ +// Taken from WikimediaUI base v0.6.1 +// Background Colors +@background-color-base: #fff; + +// Foreground Colors +@color-base: #222; +@color-base-active: #000; +@color-base-emphasized: @color-base-active; + +@color-primary: #36c; + +@color-destructive: #c33; + +@border-color-heading: #c8ccd1; + +// Echo's original variables +@grey-light: #72777d; +@grey-medium: #54595d; + @badge-padding: 0.12em; @badge-icon-size: 1.1em; @badge-distance-adjustment: 1em; @notification-background-unseen: #dce8ff; -@notification-background-unread: #fff; -@notification-background-read: #f1f1f1; +@notification-background-unread: @background-color-base; +@notification-background-read: #eaecf0; -@badge-counter-background-seen: #71777d; -@badge-counter-background-unseen-alert: #c33; -@badge-counter-background-unseen-message: #36c; +@badge-counter-background-seen: #72777d; +@badge-counter-background-unseen-alert: @color-destructive; +@badge-counter-background-unseen-message: @color-primary; -@notification-text-color: #111; -@notification-body-color: #777; +@notification-text-color: @color-base-emphasized; +@notification-body-color: #72777d; @bundle-group-padding: 0.7em; @notification-popup-width: 500px; @@ -26,9 +45,4 @@ @specialpage-width: 1000px; -@grey-light: #777; -@grey-medium: #555; -@grey-dark: #333; -@grey-darkest: #000; - -@border-color: #ccc; +@border-color: @border-color-heading; diff --git a/modules/nojs/mw.echo.notifications.less b/modules/nojs/mw.echo.notifications.less index 7c69be5..6702845 100644 --- a/modules/nojs/mw.echo.notifications.less +++ b/modules/nojs/mw.echo.notifications.less @@ -21,13 +21,13 @@ margin-left: 10px; } .mw-echo-notification { + background-color: @background-color-base; + color: #72777d; clear: both; display: block; - color: #6d6d6d; line-height: 90%; margin: 0; min-height: 30px; - background-color: #fff; position: relative; padding-top: 15px; padding-bottom: 10px; @@ -42,7 +42,7 @@ } .mw-echo-notifications { - background-color: #eee; + background-color: #eaecf0; } .mw-echo-content { @@ -75,7 +75,7 @@ } .mw-echo-notification-footer { - color: #6d6d6d; + color: #72777d; font-size: 11px; margin-top: 0.2em; diff --git a/modules/nojs/mw.echo.special.less b/modules/nojs/mw.echo.special.less index 0630fd7..ef999f5 100644 --- a/modules/nojs/mw.echo.special.less +++ b/modules/nojs/mw.echo.special.less @@ -43,9 +43,9 @@ } .mw-echo-date-section { - border-bottom: 1px solid #c9c9c9; + border-bottom: 1px solid @border-color; margin: 20px 0 5px 0; - color: #686868; + color: #72777d; display: inline-block; width: 100%; padding-bottom: 0.5em; @@ -77,7 +77,7 @@ .mw-echo-special-navbar-bottom { margin-top: 20px; padding-top: 10px; - border-top: solid 1px #c9c9c9; + border-top: 1px solid @border-color; } .mw-echo-notification { @@ -114,7 +114,7 @@ overflow-y: auto; .mw-echo-notification { - background-color: #f1f1f1; + background-color: #f8f9fa; &:hover { /* Fallback for IE<=8 */ @@ -123,7 +123,7 @@ } &-unread { - color: #252525; + color: @color-base; background-color: transparent; padding-right: 0; diff --git a/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less b/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less index 7f4758e..65b7139 100644 --- a/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less +++ b/modules/styles/mw.echo.ui.CrossWikiNotificationItemWidget.less @@ -53,7 +53,7 @@ &-group { cursor: default; padding: @bundle-group-padding; - background-color: #f8f8f8; + background-color: #f8f9fa; -webkit-box-shadow: inset 0 -2px 0 0 rgba( 0, 0, 0, 0.05 ), inset 0 2px 0 0 rgba( 0, 0, 0, 0.05 ); -moz-box-shadow: inset 0 -2px 0 0 rgba( 0, 0, 0, 0.05 ), inset 0 2px 0 0 rgba( 0, 0, 0, 0.05 ); box-shadow: inset 0 -2px 0 0 rgba( 0, 0, 0, 0.05 ), inset 0 2px 0 0 rgba( 0, 0, 0, 0.05 ); @@ -68,7 +68,7 @@ // Override OOUI's line height for labels line-height: 1em !important; font-weight: bold; - color: #666; + color: #54595d; } } } diff --git a/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less b/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less index 4808d13..28dd0f6 100644 --- a/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less +++ b/modules/styles/mw.echo.ui.DatedSubGroupListWidget.less @@ -15,7 +15,7 @@ &-secondary { font-size: 1.5em; - color: #777; + color: #72777d; } } diff --git a/modules/styles/mw.echo.ui.MenuItemWidget.less b/modules/styles/mw.echo.ui.MenuItemWidget.less index 8a0701d..6c955fd 100644 --- a/modules/styles/mw.echo.ui.MenuItemWidget.less +++ b/modules/styles/mw.echo.ui.MenuItemWidget.less @@ -22,7 +22,7 @@ // We have to override oojs-ui's color, which uses // a very specific selector font-weight: normal !important; - color: #333 !important; + color: @color-base !important; // Set max-width so buttons are truncated max-width: 15em; @@ -41,17 +41,17 @@ padding: 1.5em; &:hover { - background: #fff; - } - - .mw-echo-ui-menuItemWidget-content span.oo-ui-labelElement-label { - white-space: normal; - overflow: visible; + background-color: @background-color-base; } .mw-echo-ui-menuItemWidget-content { &-description { padding-top: 1em; + } + + span.oo-ui-labelElement-label { + white-space: normal; + overflow: visible; } } } @@ -62,7 +62,7 @@ padding: 0.7em; &:hover { - background: #eee; + background-color: #eaecf0; } &-icon { diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.less b/modules/styles/mw.echo.ui.NotificationItemWidget.less index e9615d3..e89cf73 100644 --- a/modules/styles/mw.echo.ui.NotificationItemWidget.less +++ b/modules/styles/mw.echo.ui.NotificationItemWidget.less @@ -21,10 +21,10 @@ } &-unread { - background-color: #fff; + background-color: @background-color-base; &:hover { - background-color: #fafafa; + background-color: #f8f9fa; } } @@ -121,7 +121,7 @@ display: table-cell; vertical-align: bottom; text-align: right; - color: #000; + color: @color-base-emphasized; opacity: @opacity-low; white-space: nowrap; width: 100%; diff --git a/modules/styles/mw.echo.ui.NotificationsListWidget.less b/modules/styles/mw.echo.ui.NotificationsListWidget.less index 147cdb7..ced6f2d 100644 --- a/modules/styles/mw.echo.ui.NotificationsListWidget.less +++ b/modules/styles/mw.echo.ui.NotificationsListWidget.less @@ -12,11 +12,11 @@ > a, &:hover > a { text-decoration: none; - color: #666; + color: @grey-medium; } &:not( :hover ) a, #p-personal &:not( :hover ) a.new { - color: #666; + color: @grey-medium; } } diff --git a/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less b/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less index dc67fd5..147ba91 100644 --- a/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less +++ b/modules/styles/mw.echo.ui.PageNotificationsOptionWidget.less @@ -11,18 +11,18 @@ &-highlighted { background-color: #eaecf0; - color: #000; + color: @color-base-active; } &-selected { - background-color: #eaf3ff; - color: #36c; + background-color: #eaecf0; + color: @color-primary; } &-selected&-highlighted, &-pressed&-highlighted { background-color: rgba( 41, 98, 204, 0.1 ); - color: #36c; + color: @color-primary; } } @@ -38,12 +38,12 @@ } &-count { + background-color: #eaecf0; + color: @grey-medium; float: right; padding: 0.2em 0.5em; margin-left: 0.5em; - background-color: #eee; border-radius: 2px; - color: @grey-medium; .oo-ui-optionWidget-selected & { background-color: #bbb; diff --git a/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less b/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less index 880effe..cc58e0a 100644 --- a/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less +++ b/modules/styles/mw.echo.ui.ToggleReadCircleButtonWidget.less @@ -18,7 +18,7 @@ // Mark as unread &-unread { background-color: #eaecf0; - border: 1px solid #71777d; + border: 1px solid #72777d; } } -- To view, visit https://gerrit.wikimedia.org/r/317750 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41 Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/Echo 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
