From 29a388f4c6a5d54a0fb0f4e6e2edcc0c2ed7cd2b Mon Sep 17 00:00:00 2001 From: kaldari Date: Wed, 5 Mar 2014 15:02:34 -0800 Subject: [PATCH] mediawiki.ui: Update color palette New variables have been added to encourage reuse of the preferred color palette. See https://trello.com/c/IRqbu8p4/15-color-swatches Also replacing deprecated LESS variables. Change-Id: I03620cc4acb1ea0c7c0d2e951a9913396276c27a --- .../mediawiki.less/mediawiki.ui/mixins.less | 27 ++++--- .../mediawiki.ui/variables.less | 74 ++++++++++++------- .../src/mediawiki.ui/components/buttons.less | 6 +- 3 files changed, 64 insertions(+), 43 deletions(-) diff --git a/resources/src/mediawiki.less/mediawiki.ui/mixins.less b/resources/src/mediawiki.less/mediawiki.ui/mixins.less index bda4043f34..ae08c9f6a8 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/mixins.less +++ b/resources/src/mediawiki.less/mediawiki.ui/mixins.less @@ -5,7 +5,7 @@ // Font is not included. .agora-field-styling() { - border: 1px solid @colorGrayLight; + border: 1px solid @colorFieldBorder; &:focus { // Styling focus of native checkboxes etc on Mac is almost impossible. @@ -13,9 +13,9 @@ outline: 0; // Removes OS field focus } - box-shadow: @colorProgressiveShadow 0 0 5px; + box-shadow: lighten(@colorProgressive, 6%) 0 0 5px; - border-color: @colorProgressiveShadow; + border-color: lighten(@colorProgressive, 6%); } color: @colorText; @@ -26,9 +26,8 @@ } .agora-label-styling() { - //font-weight: bold; font-size: 0.9em; - color: darken(@colorGrayLight, 50%); + color: @colorText; * { font-weight: normal; @@ -49,7 +48,7 @@ height: auto; margin: 0 0.1em 0 0; padding: 0; - border: 1px solid @colorGrayLight; + border: 1px solid @colorFieldBorder; cursor: pointer; } } @@ -84,11 +83,11 @@ } .button-colors(@bgColor) when (lightness(@bgColor) >= 70%) { - color: @colorGrayDark; - border: 1px solid @colorGrayLight; + color: @colorButtonText; + border: 1px solid @colorGray12; &:disabled { - color: @colorGrayLight; + color: @colorDisabledText; // make sure disabled buttons don't have hover and active states &:hover, @@ -100,7 +99,7 @@ } .button-colors(@bgColor) when (lightness(@bgColor) < 70%) { - color: @colorWhite; + color: #fff; // border of the same color as background so that light background and // dark background buttons are the same height (only top and bottom to // make box shadow on hover cover the corners too) @@ -110,8 +109,8 @@ text-shadow: 0 1px rgba(0, 0, 0, .1); &:disabled { - background: @colorGrayLight; - border-color: @colorGrayLight; + background: @colorGray12; + border-color: @colorGray12; // make sure disabled buttons don't have hover and active states &:hover, @@ -125,7 +124,7 @@ .button-colors-quiet(@textColor) { // Quiet buttons all start gray, and reveal // constructive/progressive/destructive color on hover and active. - color: @colorGrayDark; + color: @colorButtonText; &:hover, &:focus { @@ -142,6 +141,6 @@ } &:disabled { - color: @colorGrayLight; + color: @colorDisabledText; } } diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less index ccf869df82..8a2741d26e 100644 --- a/resources/src/mediawiki.less/mediawiki.ui/variables.less +++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less @@ -1,37 +1,59 @@ -@baseFontSize: 1em; +// Colors for use in mediawiki.ui and elsewhere -// FIXME: remove @colorProgressiveShadow (shadows should be generated -// in LESS by dimming the original colors) -@colorProgressiveShadow: #4091ed; - -// White; for background use, and text use on dark backgrounds -@colorWhite: #fff; -// Off-white; for background use on white backgrounds -@colorOffWhite: #fafafa; -// Dark gray; for non-text use -@colorGrayDark: #898989; -// Light gray; for non-text use -@colorGrayLight: #ccc; -// Very light gray; for non-text use -@colorGrayLighter: #ddd; -// Lightest gray; for non-text use -@colorGrayLightest: #eee; - -// Dark gray; for body text -@colorText: #252525; -// Light gray; for less important body text and links -@colorTextLight: #696969; +// Although this defines many shades, be parsimonious in your own use of grays. Prefer +// colors already in use in MediaWiki. Prefer semantic color names such as "@colorText". +@colorGray1: #111; // darkest +@colorGray2: #222; +@colorGray3: #333; +@colorGray4: #444; +@colorGray5: #555; +@colorGray6: #666; +@colorGray7: #777; +@colorGray8: #888; +@colorGray9: #999; +@colorGray10: #AAA; +@colorGray11: #BBB; +@colorGray12: #CCC; +@colorGray13: #DDD; +@colorGray14: #EEE; +@colorGray15: #F9F9F9; // lightest +// Semantic background colors // Blue; for contextual use of a continuing action @colorProgressive: #347bff; -// Orange; for contextual use of returning to a past action -@colorRegressive: #ff7e1e; // Green; for contextual use of a positive finalizing action @colorConstructive: #00af89; -// Red; for contextual use of a negative finalizing action +// Orange; for contextual use of returning to a past action +@colorRegressive: #FF5D00; +// Red; for contextual use of a negative action of high severity @colorDestructive: #d11d13; +// Orange; for contextual use of a potentially negative action of medium severity +@colorMediumSevere: #FF5D00; +// Yellow; for contextual use of a potentially negative action of low severity +@colorLowSevere: #FFB50D; // Used in mixins to darken contextual colors by the same amount (eg. focus) @colorDarkenPercentage: 13.5%; // Used in mixins to lighten contextual colors by the same amount (eg. hover) -@colorLightenPercentage: 13.5%; \ No newline at end of file +@colorLightenPercentage: 13.5%; + +// Text colors +@colorText: @colorGray2; +@colorTextLight: @colorGray6; +@colorButtonText: @colorGray8; +@colorDisabledText: @colorGray12; +@colorErrorText: #CC0000; + +// UI colors +@colorFieldBorder: @colorGray12; +@colorShadow: @colorGray14; +@colorPlaceholder: @colorGray10; +@colorNeutral: @colorGray7; + +// The following rules are deprecated +@colorWhite: #fff; +@colorOffWhite: #fafafa; +@colorGrayDark: #898989; +@colorGrayLight: #ccc; +@colorGrayLighter: #ddd; +@colorGrayLightest: #eee; diff --git a/resources/src/mediawiki.ui/components/buttons.less b/resources/src/mediawiki.ui/components/buttons.less index ec08413ae4..189dae8329 100644 --- a/resources/src/mediawiki.ui/components/buttons.less +++ b/resources/src/mediawiki.ui/components/buttons.less @@ -39,7 +39,7 @@ zoom: 1; // Container styling - .button-colors(@colorWhite); + .button-colors(#FFF); border-radius: @buttonBorderRadius; // Ensure that buttons and inputs are nicely aligned when they have differing heights @@ -75,7 +75,7 @@ // // Styleguide 2.1.6. &.mw-ui-big { - font-size: @baseFontSize * 1.3; + font-size: 1.3em; } // Block buttons @@ -169,7 +169,7 @@ background: transparent; border: none; text-shadow: none; - .button-colors-quiet(@colorGrayDark); + .button-colors-quiet(@colorButtonText); &:hover, &:focus { -- 2.20.1