mediawiki.ui: Bring checkbox and radio on par with WikimediaUI design

[lhc/web/wiklou.git] / resources / src / mediawiki.less / mediawiki.ui / variables.less

diff --git a/resources/src/mediawiki.less/mediawiki.ui/variables.less b/resources/src/mediawiki.less/mediawiki.ui/variables.less
index 676ecca..56824f2 100644 (file)
--- a/resources/src/mediawiki.less/mediawiki.ui/variables.less
+++ b/resources/src/mediawiki.less/mediawiki.ui/variables.less
@@ -17,8 +17,9 @@
 @colorGray13: #ddd;
 @colorGray14: #eaecf0;
 @colorGray15: #f8f9fa; // lightest
+@colorBaseInverted: #fff;
 
-// Semantic background colors
+// Semantic colors
 // Blue; for contextual use of a continuing action
 @colorProgressive: #36c;
 @colorProgressiveHighlight: #447ff5;
@@ -26,9 +27,9 @@
 // Orange; for contextual use of returning to a past action
 @colorRegressive: #ff5d00;
 // Red; for contextual use of a negative action of high severity
-@colorDestructive: #c33;
-@colorDestructiveHighlight: #e53939;
-@colorDestructiveActive: #873636;
+@colorDestructive: #d33;
+@colorDestructiveHighlight: #ff4242;
+@colorDestructiveActive: #b32424;
 // 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
@@ -41,7 +42,7 @@
 
 // Text colors
 @colorText: @colorGray2;
-@colorTextLight: @colorGray6;
+@colorTextLight: @colorGray5;
 @colorButtonText: @colorGray2;
 @colorButtonTextHighlight: @colorGray4;
 @colorButtonTextActive: @colorGray1;
@@ -50,31 +51,32 @@
 @colorWarningText: #705000;
 
 // UI colors
+@backgroundColorInputBinaryChecked: @colorProgressive;
+@backgroundColorInputBinaryActive: @colorProgressiveActive;
 @colorFieldBorder: #a2a9b1;
 @colorShadow: @colorGray14;
 @colorPlaceholder: @colorGray10;
 @colorNeutral: @colorGray7;
 
+// Border colors
+@borderColorInputBinaryChecked: @colorProgressive;
+@borderColorInputBinaryActive: @colorProgressiveActive;
+
+// Checked radio input border-width, equal to OOUI at 14px base font-size
+@borderWidthRadioChecked: 0.4285em;
+
 // Global border radius to be used to buttons and inputs
 @borderRadius: 2px;
 
+// Box shadows
+@boxShadowWidget: inset 0 0 0 1px transparent;
+@boxShadowWidgetFocus: inset 0 0 0 1px @colorProgressive;
+@boxShadowProgressiveFocus: inset 0 0 0 1px @colorProgressive, inset 0 0 0 2px @colorBaseInverted;
+@boxShadowInputBinaryActive: inset 0 0 0 1px @colorProgressiveActive;
+
 // Icon related variables
 @iconSize: 1.5em;
 @iconGutterWidth: 1em;
 
-// Form input sizes
-@checkboxSize: 2em;
-@radioSize: 2em;
-
-// The following rules are deprecated
-@colorWhite: #fff;
-@colorOffWhite: #fafafa;
-@colorGrayDark: #898989;
-@colorGrayLight: #ccc;
-@colorGrayLighter: #ddd;
-@colorGrayLightest: #eee;
-// Green; for contextual use of a positive finalizing action
-@colorConstructive: #00af89;
-@colorConstructiveHighlight: #1c6665;
-@colorConstructiveActive: #134645;
-
+// Form input sizes, equal to OOUI at 14px base font-size
+@sizeInputBinary: 1.5625em;