VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/390159 )
Change subject: Clarify referencing color palette vars & use LESS style comments
......................................................................
Clarify referencing color palette vars & use LESS style comments
Clarifying variables intended usage in extended comment and
move towards LESS style comments in LESS file to make compiler completely
remove them.
Change-Id: Ib4b5fa013a23ab45037cbd6eda05ffd45958d57e
---
M wikimedia-ui-base.css
M wikimedia-ui-base.less
2 files changed, 44 insertions(+), 37 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia-ui-base
refs/changes/59/390159/1
diff --git a/wikimedia-ui-base.css b/wikimedia-ui-base.css
index 2e712d6..3957f9b 100644
--- a/wikimedia-ui-base.css
+++ b/wikimedia-ui-base.css
@@ -4,6 +4,7 @@
*/
:root {
+ /* == Breakpoints == */
/**
* Minimum available screen width at which a device can be considered a
mobile device
* Many older feature phones have screens smaller than this value.
@@ -37,8 +38,12 @@
--width-breapoint-desktop-extrawide: 2000px;
- /* Colors */
- /* WikimediaUI (WMUI) color palette */
+ /* == Colors == */
+ /**
+ * WikimediaUI (WMUI) color palette
+ * Don't use those variables directly, instead define your vars
+ * referring to them as applied further below
+ */
--wmui-color-base0: #000; /* = HSB 0°, 0%, 0% */
--wmui-color-base10: #222; /* = HSB 0°, 0%, 13% */
--wmui-color-base20: #54595d; /* = HSB 207°, 10%, 36%; WCAG 2.0 level
AAA 7.09:1 contrast ratio on `#fff` */
@@ -118,12 +123,12 @@
--opacity-icon-base--selected: 1;
- /* Positioning */
+ /* == Positioning == */
/* Z-Index */
--z-index-base: 0;
- /* Box Model properties */
+ /* == Box Model properties == */
/* Max Widths */
--max-width-button: 28.75em; /* = `460px` at `16px` base,
see T95367 */
--max-width-input-inline: 100%;
@@ -158,7 +163,7 @@
--box-shadow-menu: var( --box-shadow-dialog );
- /* Typography incl. print properties */
+ /* == Typography incl. print properties == */
/* Font Families */
--font-family-base: var( --font-family-sans );
--font-family-heading-main: var( --font-family-serif );
@@ -176,12 +181,12 @@
--text-shadow-base--disabled: var( --text-shadow-base );
- /* Other Properties */
+ /* == Other Properties == */
/* Cursors */
--cursor-base--disabled: default;
- /* Animation & Transition */
+ /* == Animation & Transition == */
/* Transitions */
--transition-base: var( --transition-duration-base );
--transition-medium: var( --transition-duration-medium );
diff --git a/wikimedia-ui-base.less b/wikimedia-ui-base.less
index 1f11564..9316f34 100644
--- a/wikimedia-ui-base.less
+++ b/wikimedia-ui-base.less
@@ -3,42 +3,44 @@
* Wikimedia Foundation user interface base variables
*/
-/* Breakpoints */
-/**
- * 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.
- */
+// == Breakpoints ==
+// 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.
+
@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.
- */
+
+// 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.
+
@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.
- */
+
+// Minimum available screen width at which a device can be considered a desktop
+// Number is prone to change with new information.
+
@width-breakpoint-desktop: 1000px;
-/**
- * Wider desktop breakpoint, currently used in Flow.
- * Number is prone to change with new information.
- */
+
+// Wider desktop breakpoint, currently used in Flow.
+// Number is prone to change with new information.
+
@width-breakpoint-desktop-wide: 1200px;
-/**
- * Extra wide desktop breakpoint
- * Number is prone to change with new information.
- */
+
+// Extra wide desktop breakpoint
+// Number is prone to change with new information.
+
@width-breapoint-desktop-extrawide: 2000px;
-/* Colors */
+// == Colors ==
// WikimediaUI (WMUI) color palette
+// Don't use those variables directly, instead define your vars
+// referring to them as applied further below
+
@wmui-color-base0: #000; // = HSB 0°, 0%, 0%
@wmui-color-base10: #222; // = HSB 0°, 0%, 13%
@wmui-color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA
7.09:1 contrast ratio on `#fff`
@@ -118,13 +120,13 @@
@opacity-icon-base--selected: 1;
-/* Positioning */
+// == Positioning ==
// Z-Index
@z-index-base: 0;
-/* Box Model properties */
-/* Max Widths */
+// == Box Model properties ==
+// Max Widths
@max-width-button: 28.75em; // = `460px` at `16px` base, see T95367
@max-width-input-inline: 100%;
@@ -158,7 +160,7 @@
@box-shadow-menu: @box-shadow-dialog;
-/* Typography incl. print properties */
+// == Typography incl. print properties ==
// Font Families
@font-family-base: @font-family-sans;
@font-family-heading-main: @font-family-serif;
@@ -176,12 +178,12 @@
@text-shadow-base--disabled: @text-shadow-base;
-/* Other Properties */
+// == Other Properties ==
// Cursors
@cursor-base--disabled: default;
-/* Animation & Transition */
+// == Animation & Transition ==
// Transitions
@transition-base: @transition-duration-base;
@transition-medium: @transition-duration-medium;
--
To view, visit https://gerrit.wikimedia.org/r/390159
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ib4b5fa013a23ab45037cbd6eda05ffd45958d57e
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia-ui-base
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
