+/**
+ * Minimum available screen width at which a device can be considered a mobile device
+ * Many older feature phones have screens smaller than this value.
+ * Number is prone to change with new information.
+ * @since 1.31
+ */
+@width-breakpoint-mobile: 320px;
+
+/**
+ * Minimum available screen width at which a device can be considered a tablet
+ * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
+ * enough to cover iPad (768px). Number is prone to change with new information.
+ * @since 1.31
+ */
+@width-breakpoint-tablet: 720px;
+/**
+ * Minimum available screen width at which a device can be considered a desktop
+ * Number is prone to change with new information.
+ * @since 1.31
+ */
+@width-breakpoint-desktop: 1000px;
+
// Colors for use in mediawiki.ui and elsewhere
-// 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".
+// Although this defines many shades, be parsimonious in your own use of grays.
+// Prefer semantic color names such as `@colorText` below.
@colorGray1: #000; // darkest
@colorGray2: #222;
-@colorGray3: #333;
@colorGray4: #444;
@colorGray5: #54595d;
-@colorGray6: #666;
@colorGray7: #72777d;
-@colorGray8: #888;
-@colorGray9: #999;
@colorGray10: #a2a9b1;
-@colorGray11: #bbb;
@colorGray12: #c8ccd1;
-@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;
@colorButtonTextHighlight: @colorGray4;
@colorButtonTextActive: @colorGray1;
@colorDisabledText: @colorGray12;
-@colorErrorText: #c00;
+@colorErrorText: #d33;
@colorWarningText: #705000;
// UI colors
+@backgroundColorInputBinaryChecked: @colorProgressive;
+@backgroundColorInputBinaryActive: @colorProgressiveActive;
@colorFieldBorder: #a2a9b1;
@colorShadow: @colorGray14;
@colorPlaceholder: @colorGray10;
@colorNeutral: @colorGray7;
+// Border colors
+@borderColorInputBinaryChecked: @colorProgressive;
+@borderColorInputBinaryActive: @colorProgressiveActive;
+
+// Border widths
+@border-width-base: 1px;
+
+// 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;
+// Form input sizes, equal to OOUI at 14px base font-size
+@sizeInputBinary: 1.5625em;
+
+// Deprecated color variables from when WikimediaUI color palette wasn't around
+// See https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style_colors.html
+@colorGray3: #333;
+@colorGray6: #666;
+@colorGray8: #888;
+@colorGray9: #999;
+@colorGray11: #bbb;
+@colorGray13: #ddd;