RCFilters: Use mixins and variables in LESS files

Bug: T156164
Change-Id: Ie979926fe2fb0f840e5bd5dacedf254312a0aa17

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 7410f98..8dfae97 100644 (file)
--- 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 6c44cc4..f3d81b7 100644 (file)
--- 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 555631b..0fa3137 100644 (file)
--- 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 f9b32a2..4e04068 100644 (file)
--- 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 ea93247..0f858e6 100644 (file)
--- 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 b6fb0bb..3e32c83 100644 (file)
--- 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 4ecc22e..fafa697 100644 (file)
--- 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 0adec46..ee8ad85 100644 (file)
--- 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 75ea061..21a169c 100644 (file)
--- 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 04f4174..67664b5 100644 (file)
--- 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 24e062e..7dd78e7 100644 (file)
--- 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 6a20f56..a6f3644 100644 (file)
--- 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 2b713e1..e72fbda 100644 (file)
--- 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 26ea64c..0e7a635 100644 (file)
--- 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 1896103..3daea68 100644 (file)
--- 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 6fa3aa2..4307c6f 100644 (file)
--- 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 fc8c9ef..5f97e1e 100644 (file)
--- 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;