From bebb0dd046933d63479baa7263c533b3086feffa Mon Sep 17 00:00:00 2001 From: petarpetkovic Date: Tue, 10 Oct 2017 15:57:38 +0200 Subject: [PATCH] RCFilters: Use mixins and variables in LESS files Bug: T156164 Change-Id: Ie979926fe2fb0f840e5bd5dacedf254312a0aa17 --- .../styles/mw.rcfilters.less | 11 ++++++----- .../styles/mw.rcfilters.mixins.less | 3 ++- ...w.rcfilters.ui.ChangesListWrapperWidget.less | 14 ++++++++------ .../mw.rcfilters.ui.FilterMenuHeaderWidget.less | 8 ++++---- .../mw.rcfilters.ui.FilterMenuOptionWidget.less | 9 +++++---- ...ilters.ui.FilterMenuSectionOptionWidget.less | 7 ++++--- ...rcfilters.ui.FilterTagMultiselectWidget.less | 17 +++++++++-------- ...rcfilters.ui.HighlightColorPickerWidget.less | 3 ++- .../mw.rcfilters.ui.ItemMenuOptionWidget.less | 16 +++++++++------- .../mw.rcfilters.ui.LiveUpdateButtonWidget.less | 8 +++++--- .../mw.rcfilters.ui.MenuSelectWidget.less | 7 ++++--- ...w.rcfilters.ui.SavedLinksListItemWidget.less | 8 +++++--- .../mw.rcfilters.ui.SavedLinksListWidget.less | 4 +++- .../styles/mw.rcfilters.ui.TagItemWidget.less | 16 +++++++++------- .../mw.rcfilters.ui.ViewSwitchWidget.less | 4 +++- ....rcfilters.ui.WatchlistTopSectionWidget.less | 4 +++- .../styles/mw.rcfilters.variables.less | 8 ++++++++ 17 files changed, 89 insertions(+), 58 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less index 7410f981f8..8dfae97745 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less @@ -1,4 +1,5 @@ @import 'mediawiki.mixins.animation'; +@import 'mediawiki.ui/variables'; @import 'mw.rcfilters.mixins'; @rcfilters-spinner-width: 70px; @@ -26,7 +27,7 @@ &:not( .mw-recentchanges-toplinks-collapsed ) { // Same as the legend - border: 1px solid #ddd; + border: 1px solid @colorGray12; } } @@ -94,7 +95,7 @@ display: inline-block; width: 12px; height: 12px; - background-color: #c8ccd1; + background-color: @colorGray12; border-radius: 100%; .animation( rcfiltersBouncedelay 1.5s ease-in-out -0.16s infinite both ); } @@ -142,7 +143,7 @@ transform: scale( 0.7 ); } 40% { - background-color: #a2a9b1; + background-color: @colorGray10; -webkit-transform: scale( 1 ); transform: scale( 1 ); } @@ -156,7 +157,7 @@ transform: scale( 0.7 ); } 40% { - background-color: #a2a9b1; + background-color: @colorGray10; -moz-transform: scale( 0.7 ); transform: scale( 1 ); } @@ -169,7 +170,7 @@ transform: scale( 0.7 ); } 40% { - background-color: #a2a9b1; + background-color: @colorGray10; transform: scale( 1 ); } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less index 6c44cc435b..f3d81b7638 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less @@ -1,4 +1,5 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; @import 'mw.rcfilters.variables'; .animation-delay( ... ) { @@ -8,7 +9,7 @@ } // This is a general mixin for a color circle -.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: #54595d, @emptyBackground: false ) { +.mw-rcfilters-mixin-circle( @color: @color-base--inverted, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: @colorGray5, @emptyBackground: false ) { .box-sizing( border-box ); min-width: @diameter; width: @diameter; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less index 555631be14..0fa3137569 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less @@ -1,11 +1,13 @@ +@import 'mediawiki.ui/variables'; @import 'mw.rcfilters.mixins'; +@import 'mw.rcfilters.variables'; @keyframes fadeBlue { 60% { - border-top-color: #36c; + border-top-color: @colorProgressive; } 100% { - border-top-color: #c8ccd1; + border-top-color: @colorGray12; } } @@ -19,7 +21,7 @@ &-previousChangesIndicator { margin: 10px 0; - border-top: 2px solid #c8ccd1; + border-top: 2px solid @colorGray12; animation: 1s ease fadeBlue; } @@ -38,7 +40,7 @@ // We want the expand button to appear outside the color // to match the way the general highlight background appears &-enhanced-grey td:not( :nth-child( -n+2 ) ) { - background-color: #dee0e3; + background-color: @light-gray; } &-highlighted { @@ -52,7 +54,7 @@ } .mw-changeslist-legend { - background-color: #fff; + background-color: @background-color-base; } // Correction for Enhanced RC @@ -140,7 +142,7 @@ // a custom color rather than the computed tint // see https://phabricator.wikimedia.org/T161267 .mw-rcfilters-highlight-color-c1.mw-rcfilters-highlight-color-c3 { - .highlight-changesListWrapperWidget( #ccdecc ); + .highlight-changesListWrapperWidget( @light-green ); } .highlight-color-mix( c1, c4 ); .highlight-color-mix( c1, c5 ); diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less index f9b32a2f16..4e040682a9 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less @@ -1,12 +1,12 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-filterMenuHeaderWidget { &-title { display: inline-block; font-size: 1.2em; padding: 0.75em 0 0.75em 0.5em; - // TODO: Unify colors with official design palette - color: #54595d; + color: @colorGray5; } &-helpIcon { @@ -30,8 +30,8 @@ } &-header { - border-bottom: 1px solid #c8ccd1; - background: #f8f9fa; + border-bottom: 1px solid @colorGray12; + background-color: @colorGray15; &-invert, &-highlight { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less index ea93247ac0..0f858e6cd4 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less @@ -1,4 +1,5 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-filterMenuOptionWidget { &.oo-ui-flaggedElement-muted { @@ -7,19 +8,19 @@ // are also inverted, so if they are also selected, we // should make sure the selected background is shown rather // than the muted one - background-color: #f8f9fa; // Base90 AAA + background-color: @colorGray15; } .mw-rcfilters-ui-itemMenuOptionWidget-label-title, .mw-rcfilters-ui-itemMenuOptionWidget-label-desc { - color: #54595d; // Base20 AAA + color: @colorGray5; } &.oo-ui-optionWidget-highlighted { // Copying over styles from OOUI, since it must // override our 'muted' state - background-color: #eaecf0; - color: #000; + background-color: @colorGray14; + color: @colorGray1; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less index b6fb0bbc10..3e32c83175 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuSectionOptionWidget.less @@ -1,14 +1,15 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-filterMenuSectionOptionWidget { - background: #eaecf0; + background: @colorGray14; padding-bottom: 0.7em; &-header { padding: 0 0.75em; // Use a high specificity to override OOUI .oo-ui-optionWidget.oo-ui-labelElement &-title.oo-ui-labelElement-label { - color: #54595d; + color: @colorGray5; .box-sizing( border-box ); display: inline-block; } @@ -23,7 +24,7 @@ padding: 0; &:focus { - box-shadow: none; + .box-shadow( none ); outline: 0; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less index 4ecc22e952..fafa69701f 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less @@ -1,5 +1,6 @@ @import 'mediawiki.mixins'; @import 'mediawiki.ui/variables'; +@import 'mw.rcfilters.variables'; .mw-rcfilters-ui-filterTagMultiselectWidget { max-width: none; @@ -12,9 +13,9 @@ } &.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle { - border: 1px solid #a2a9b1; + border: 1px solid @colorGray10; border-bottom: 0; - background-color: #f8f9fa; + background-color: @colorGray15; border-radius: 2px 2px 0 0; padding: 0.6em; margin-top: 1em; @@ -26,7 +27,7 @@ } .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle { - background-color: #eaf3ff; // Accent90 + background-color: @background-color-primary; } &-wrapper { @@ -37,11 +38,11 @@ &-content { &-title { font-weight: bold; - color: #54595d; + color: @colorGray5; } &-savedQueryTitle { - color: #222; // Base10 + color: @colorGray2; font-weight: bold; vertical-align: top; margin-left: 1em; @@ -62,7 +63,7 @@ width: 1em; &-widget.oo-ui-widget { - border: 1px solid #a2a9b1; + border: 1px solid @colorGray10; border-left-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; @@ -71,7 +72,7 @@ display: block; text-align: right; height: 2.5em; - box-sizing: border-box; + .box-sizing( border-box ); .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child { margin-left: 0; @@ -90,7 +91,7 @@ } &-emptyFilters { - color: #72777d; + color: @colorGray7; } &-cell-filters { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less index 0adec46596..ee8ad85818 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.HighlightColorPickerWidget.less @@ -1,3 +1,4 @@ +@import 'mediawiki.ui/variables'; @import 'mw.rcfilters.mixins'; .mw-rcfilters-ui-highlightColorPickerWidget { @@ -38,7 +39,7 @@ .mw-rcfilters-mixin-circle( @highlight-none, 2em, 0.5em, true ); // Override border to dashed - border: 1px dashed #54595d; + border: 1px dashed @colorGray5; &.oo-ui-buttonOptionWidget.oo-ui-buttonElement-active, &.oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less index 75ea061aae..21a169ced6 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ItemMenuOptionWidget.less @@ -1,4 +1,6 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; +@import 'mw.rcfilters.variables'; .mw-rcfilters-ui-itemMenuOptionWidget { min-height: 3.5em; @@ -6,11 +8,11 @@ .box-sizing( border-box ); &:not( :last-child ) { - border-bottom: 1px solid #eaecf0; // Base80 AAA + border-bottom: 1px solid @colorGray14; } &-view-namespaces { - border-top: 5px solid #c8ccd1; + border-top: 5px solid @colorGray12; &:first-child, &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-subject + &.mw-rcfilters-ui-itemMenuOptionWidget-identifier-talk { @@ -19,7 +21,7 @@ } &:hover { - background-color: #f8f9fa; + background-color: @colorGray15; } .mw-rcfilters-ui-table { @@ -27,17 +29,17 @@ } &.oo-ui-optionWidget-selected { - background-color: #eaf3ff; // Accent90 AAA + background-color: @background-color-primary; } &-label { &-title { font-weight: bold; font-size: 1.15em; - color: #222; + color: @colorGray2; } &-desc { - color: #54595d; + color: @colorGray5; white-space: normal; } } @@ -61,7 +63,7 @@ &-excludeLabel { width: 5em; padding-left: 1em; - color: #54595d; // Base20 AAA + color: @colorGray5; } &-highlightButton { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less index 04f4174d83..67664b5779 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less @@ -1,3 +1,5 @@ +@import 'mediawiki.mixins'; + .mw-rcfilters-ui-liveUpdateButtonWidget { margin-left: 1em; @@ -26,15 +28,15 @@ @keyframes ripple { 0%, 35% { - transform: scale( 0 ); + .transform( scale( 0 ) ); opacity: 1; } 50% { - transform: scale( 1.5 ); + .transform( scale( 1.5 ) ); opacity: 0.8; } 100% { opacity: 0; - transform: scale( 4 ); + .transform( scale( 4 ) ); } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less index 24e062e6b8..7dd78e78b9 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.MenuSelectWidget.less @@ -1,4 +1,5 @@ @import 'mediawiki.mixins'; +@import 'mediawiki.ui/variables'; .mw-rcfilters-ui-menuSelectWidget { z-index: auto; @@ -11,7 +12,7 @@ &-noresults { display: none; padding: 0.5em; - color: #54595d; + color: @colorGray5; .oo-ui-menuSelectWidget-invisible & { display: inline-block; @@ -24,8 +25,8 @@ &-footer { padding: 0.5em; - background-color: #f8f9fa; - border-top: 1px solid #c8ccd1; + background-color: @colorGray15; + border-top: 1px solid @colorGray12; & + & { border-top: 0; diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less index 6a20f5616f..a6f36447ee 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less @@ -1,11 +1,13 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-savedLinksListItemWidget { padding: 0 0.5em; line-height: normal; &:hover { // Mimicking optionWidget styles - background-color: #eaecf0; - color: #000; + background-color: @colorGray14; + color: @colorGray1; } .mw-rcfilters-ui-cell { @@ -43,7 +45,7 @@ overflow: hidden; cursor: pointer; margin-left: 0.5px; - color: #36c; // Accent50; + color: @colorProgressive; } &-icon, diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less index 2b713e1a47..e72fbda62f 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less @@ -1,3 +1,5 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-savedLinksListWidget { &-menu { width: 100%; @@ -12,7 +14,7 @@ // Extra specificity needed to override OOUI rule that sets white-space: nowrap; // on labels inside options &.oo-ui-optionWidget .oo-ui-labelElement-label { - color: #72777d; + color: @colorGray7; white-space: normal; } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less index 26ea64cfb4..0e7a635db6 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.TagItemWidget.less @@ -1,15 +1,17 @@ +@import 'mediawiki.ui/variables'; @import 'mw.rcfilters.mixins'; +@import 'mw.rcfilters.variables'; .mw-rcfilters-ui-tagItemWidget { // Background and color of the capsule widget need a bit // more specificity to override OOUI internals &.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled { // Muted state - background-color: #eaecf0; - border-color: #c8ccd1; + background-color: @colorGray14; + border-color: @colorGray12; .oo-ui-labelElement-label { - color: #72777d; + color: @colorGray7; } .oo-ui-buttonWidget { opacity: @muted-opacity; @@ -18,7 +20,7 @@ &.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled { .oo-ui-labelElement-label { - color: #b32424; + color: @colorDestructiveActive; } } @@ -27,13 +29,13 @@ // The specificity is fixed in the patch: https://gerrit.wikimedia.org/r/#/c/349525/ // and will be available in the next OOUI release. .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled { - background-color: #eaf3ff; - border-color: #36c; + background-color: @background-color-primary; + border-color: @colorProgressive; } &-popup-content { padding: 0.5em; - color: #54595d; + color: @colorGray5; } &.oo-ui-labelElement .oo-ui-labelElement-label { diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less index 1896103970..3daea681f9 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less @@ -1,6 +1,8 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-viewSwitchWidget { label.oo-ui-labelWidget { - color: #54595d; + color: @colorGray5; font-weight: bold; } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less index 6fa3aa2dec..4307c6f7c6 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.WatchlistTopSectionWidget.less @@ -1,3 +1,5 @@ +@import 'mediawiki.ui/variables'; + .mw-rcfilters-ui-watchlistTopSectionWidget { &-watchlistDetails { width: 100%; @@ -22,6 +24,6 @@ &-separator { margin-top: 1em; - border-top: 2px solid #eaecf0; // Base80 AAA + border-top: 2px solid @colorGray14; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less index fc8c9efe11..5f97e1e3f6 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less @@ -1,3 +1,11 @@ +@background-color-base: #fff; +@background-color-primary: #eaf3ff; +@color-base--inverted: #fff; + +// Colors not on WikimediaUI color palette +@light-gray: #dee0e3; +@light-green: #ccdecc; + // Highlight color definitions @highlight-none: #fff; @highlight-c1: #36c; -- 2.20.1