Vector: New beta module with new typography styles

To enable install Extension:BetaFeatures and Extension:VectorBeta
in LocalSettings.php

Changes to core:
* Refactor screen.less to make use of variables

Introduce dormant skins.vector.beta module
* Activated by https://gerrit.wikimedia.org/r/#/admin/projects/mediawiki/extensions/VectorBeta
* Load different environment variables depending on whether in a beta
  experiment or not
* Switch global fonts for text from browser default sans-serif to a
  specific sans-serif stack.
* Switch global fonts for headings to Georgia/serif
* Cleanup over-specific specifiers in process
* Adjust styling of navigation menus to focus on content
* Adjust styling of collapsible navigation menu to be less prominent

See https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Typography

Change-Id: Ica0b69ad95051e15cd8ed9888927e034c13fbf92

diff --git a/resources/Resources.php b/resources/Resources.php
index 050e933..ff933f6 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -92,9 +92,18 @@ return array(
                        'common/commonElements.css' => array( 'media' => 'screen' ),
                        'common/commonContent.css' => array( 'media' => 'screen' ),
                        'common/commonInterface.css' => array( 'media' => 'screen' ),
-                       'vector/screen.less' => array( 'media' => 'screen' ),
-                       'vector/externalLinks.less' => array( 'media' => 'screen' ),
-                       'vector/screen-hd.css' => array( 'media' => 'screen and (min-width: 982px)' ),
+                       'vector/styles.less',
+               ),
+               'remoteBasePath' => $GLOBALS['wgStylePath'],
+               'localBasePath' => $GLOBALS['wgStyleDirectory'],
+       ),
+       'skins.vector.beta' => array(
+               // Keep in sync with skins.vector
+               'styles' => array(
+                       'common/commonElements.css' => array( 'media' => 'screen' ),
+                       'common/commonContent.css' => array( 'media' => 'screen' ),
+                       'common/commonInterface.css' => array( 'media' => 'screen' ),
+                       'vector/styles-beta.less' => array( 'media' => 'screen' ),
                ),
                'remoteBasePath' => $GLOBALS['wgStylePath'],
                'localBasePath' => $GLOBALS['wgStyleDirectory'],
@@ -110,9 +119,6 @@ return array(
                'localBasePath' => $GLOBALS['wgStyleDirectory'],
        ),
        'skins.vector.collapsibleNav' => array(
-               'styles' => array(
-                       'vector/collapsibleNav.less',
-               ),
                'scripts' => array(
                        'vector/collapsibleNav.js',
                ),

diff --git a/skins/Vector.php b/skins/Vector.php
index c07a593..288b5fd 100644 (file)
--- a/skins/Vector.php
+++ b/skins/Vector.php
@@ -66,7 +66,10 @@ class SkinVector extends SkinTemplate {
         */
        function setupSkinUserCss( OutputPage $out ) {
                parent::setupSkinUserCss( $out );
-               $out->addModuleStyles( 'skins.vector' );
+
+               $styles = array( 'skins.vector' );
+               wfRunHooks( 'SkinVectorStyleModules', array( &$this, &$styles ) );
+               $out->addModuleStyles( $styles );
        }
 
        /**

diff --git a/skins/vector/beta/screen.less b/skins/vector/beta/screen.less
new file mode 100644 (file)
index 0000000..6d56cd5
--- /dev/null
+++ b/skins/vector/beta/screen.less
@@ -0,0 +1,75 @@
+/* Content */
+#content {
+       line-height: 1.5em;
+       .mw-editsection {
+               font-family: @content-font-family;
+       }
+
+       h1,
+       #firstHeading {
+               font-family: @content-heading-font-family;
+               font-size: 1.833em;
+               line-height: 22pt;
+               padding: 0;
+               margin-bottom: 4pt;
+       }
+
+       h2 {
+               font-size: 1.5em;
+               line-height: 22pt;
+       }
+
+       h2,
+       h3,
+       h4,
+       h5,
+       h6 {
+               font-family: @content-heading-font-family;
+               padding: 0;
+               margin-bottom: 4pt;
+               margin-top: 14pt;
+       }
+
+       h3 {
+               font-size: 1.17em;
+               line-height: 22pt;
+       }
+
+       h3,
+       h4 {
+               font-weight: bold;
+       }
+
+       h4,
+       h5,
+       h6 {
+               font-size: 100%; /* (reset) */
+       }
+
+       h6 {
+               font-style: italic;
+       }
+
+       p {
+               margin-bottom: 8pt;
+       }
+
+       // FIXME: this is hacky
+       #toc h2 {
+               font-size: 100%;
+       }
+}
+
+/* Personal menu */
+#p-personal a {
+       color: #555;
+}
+
+/* Main menu */
+div#mw-panel div.portal {
+       margin-left: 1.25em;
+       h3 {
+               margin: 0;
+               line-height: 1;
+       }
+}

diff --git a/skins/vector/beta/variables.less b/skins/vector/beta/variables.less
new file mode 100644 (file)
index 0000000..3462795
--- /dev/null
+++ b/skins/vector/beta/variables.less
@@ -0,0 +1,37 @@
+@html-font-size: 90%;
+
+@body-font-size: inherit;
+@body-font-color: inherit;
+
+// Page content
+@content-font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
+@content-font-size: 0.9em;
+@content-line-height: inherit;
+@content-padding: 1em;
+@content-heading-font-size: 1.6em;
+@content-heading-font-family: Georgia, "DejaVu Serif", serif;
+
+// Common menu
+@menu-link-color: #555;
+
+// Main menu
+@menu-main-font-size: 0.82em;
+@menu-main-heading-font-size: 100%;
+@menu-main-heading-padding: 5px 0;
+
+@menu-main-body-font-size: inherit;
+@menu-main-body-link-color: inherit;
+@menu-main-body-link-visited-color: inherit;
+@menu-main-body-margin: 0;
+@menu-main-body-padding: 0 0 10px;
+@menu-main-logo-left: 1.6em;
+
+// Personal menu
+@menu-personal-font-size: 0.75em;
+
+// Collapsible nav
+@collapsible-nav-heading-color: #555;
+@collapsible-nav-heading-collapsed-color: inherit;
+
+@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
+@collapsible-nav-body-margin: 0 0 0 1.25em;

diff --git a/skins/vector/collapsibleNav.less b/skins/vector/collapsibleNav.less
index 25ebec7..e6f5c9a 100644 (file)
--- a/skins/vector/collapsibleNav.less
+++ b/skins/vector/collapsibleNav.less
@@ -12,12 +12,13 @@
                margin: -11px 9px 10px 11px;
 
                h3 {
-                       color: #4D4D4D;
+                       font-size: @menu-main-heading-font-size;
+                       color: @collapsible-nav-heading-color;
                        font-weight: normal;
                        background-position: left center;
                        background-repeat: no-repeat;
                        .background-image-svg('images/arrow-expanded.svg', 'images/arrow-expanded.png');
-                       padding: 4px 0 3px 1.5em;
+                       padding: @collapsible-nav-heading-padding;
                        margin-bottom: 0;
 
                        &:hover {
@@ -26,12 +27,13 @@
                        }
 
                        a {
-                               color: #4D4D4D;
+                               color: @collapsible-nav-heading-color;
                                text-decoration: none;
                        }
                }
 
                .body {
+                       margin: @collapsible-nav-body-margin;
                        background-image: none !important;
                        padding-top: 0;
                        display: none;
@@ -70,7 +72,7 @@
                /* Collapsed */
                &.collapsed {
                        h3 {
-                               color: #0645AD;
+                               color: @collapsible-nav-heading-collapsed-color;
                                background-position: left center;
                                background-repeat: no-repeat;
                                .background-image-svg('images/arrow-collapsed-ltr.svg', 'images/arrow-collapsed-ltr.png');
@@ -81,7 +83,7 @@
                                }
 
                                a {
-                                       color: #0645AD;
+                                       color: @collapsible-nav-heading-collapsed-color;
                                }
                        }
                }

diff --git a/skins/vector/screen-hd.css b/skins/vector/screen-hd.css
deleted file mode 100644 (file)
index 7dbb1ba..0000000
--- a/skins/vector/screen-hd.css
+++ /dev/null
@@ -1,28 +0,0 @@
-/* Vector screen styles for high definition displays */
-
-div#content {
-       margin-left: 11em;
-       padding: 1.25em 1.5em 1.5em 1.5em;
-}
-#p-logo {
-       left: 0.5em;
-}
-div#footer {
-       margin-left: 11em;
-       padding: 1.25em;
-}
-#mw-panel {
-       padding-left: 0.5em;
-}
-#p-search {
-       margin-right: 1em;
-}
-#left-navigation {
-       margin-left: 11em;
-}
-#p-personal {
-       right: 1em;
-}
-#mw-head-base {
-       margin-left: 11em;
-}

diff --git a/skins/vector/screen-hd.less b/skins/vector/screen-hd.less
new file mode 100644 (file)
index 0000000..5a1fc05
--- /dev/null
+++ b/skins/vector/screen-hd.less
@@ -0,0 +1,28 @@
+/* Vector screen styles for high definition displays */
+
+div#content {
+       margin-left: 11em;
+       padding: 1.25em 1.5em 1.5em 1.5em;
+}
+#p-logo {
+       left: @menu-main-logo-left;
+}
+div#footer {
+       margin-left: 11em;
+       padding: 1.25em;
+}
+#mw-panel {
+       padding-left: 0.5em;
+}
+#p-search {
+       margin-right: 1em;
+}
+#left-navigation {
+       margin-left: 11em;
+}
+#p-personal {
+       right: 1em;
+}
+#mw-head-base {
+       margin-left: 11em;
+}

diff --git a/skins/vector/screen.less b/skins/vector/screen.less
index 0b65627..f919bda 100644 (file)
--- a/skins/vector/screen.less
+++ b/skins/vector/screen.less
@@ -13,28 +13,32 @@
 @import "mediawiki.mixins.less";
 
 /* Framework */
+html {
+       font-size: @html-font-size;
+}
 html,
 body {
        height: 100%;
        margin: 0;
        padding: 0;
-       font-family: sans-serif;
-       font-size: 1em;
+       font-family: @content-font-family;
 }
 body {
        background-color: #f6f6f6;
+       font-size: @body-font-size;
 }
 /* Content */
 div#content {
+       line-height: @content-line-height;
        margin-left: 10em;
-       padding: 1em;
+       padding: @content-padding;
        /* Border on top, left, and bottom side */
        border: 1px solid #a7d7f9;
        border-right-width: 0;
        /* Merge the border with tabs' one (in their background image) */
        margin-top: -1px;
        background-color: white;
-       color: black;
+       color: @body-font-color;
        direction: ltr;
 }
 /* Hide, but keep accessible for screen-readers */
@@ -95,7 +99,7 @@ div.emptyPortlet {
 #p-personal li {
        margin-left: 0.75em;
        margin-top: 0.5em;
-       font-size: 0.75em;
+       font-size: @menu-personal-font-size;
        white-space: nowrap;
 }
 /* Navigation Containers */
@@ -174,7 +178,7 @@ div.vectorTabs li a {
        height: 1.9em;
        padding-left: 0.5em;
        padding-right: 0.5em;
-       color: #0645ad;
+       color: @menu-link-color;
        cursor: pointer;
        font-size: 0.8em;
 }
@@ -340,7 +344,7 @@ div.vectorMenu li a {
        display: inline-block;
        padding: 0.5em;
        white-space: nowrap;
-       color: #0645ad;
+       color: @menu-link-color;
        cursor: pointer;
        font-size: 0.8em;
 }
@@ -448,6 +452,7 @@ div#simpleSearch button#searchButton > img {
 }
 /* Panel */
 div#mw-panel {
+       font-size: @menu-main-font-size;
        position: absolute;
        top: 160px;
        padding-top: 1em;
@@ -461,17 +466,15 @@ div#mw-panel div.portal {
 div#mw-panel div.portal h3 {
        font-weight: normal;
        color: #444;
-       padding: 0.25em;
-       padding-top: 0;
-       padding-left: 1.75em;
+       padding: @menu-main-heading-padding;
        cursor: default;
        border: none;
-       font-size: 0.75em;
+       font-size: @menu-main-heading-font-size;
 }
 div#mw-panel div.portal div.body {
-       margin: 0;
        padding-top: 0.5em;
-       margin-left: 1.25em;
+       margin: @menu-main-body-margin;
+
        .background-image('images/portal-break.png');
        background-repeat: no-repeat;
        background-position: top left;
@@ -479,7 +482,7 @@ div#mw-panel div.portal div.body {
 div#mw-panel div.portal div.body ul {
        list-style-type: none;
        list-style-image: none;
-       padding: 0;
+       padding: @menu-main-body-padding;
        margin: 0;
 }
 div#mw-panel div.portal div.body ul li {
@@ -487,15 +490,16 @@ div#mw-panel div.portal div.body ul li {
        padding: 0;
        padding-bottom: 0.5em;
        margin: 0;
-       font-size: 0.75em;
+       font-size: @menu-main-body-font-size;
        word-wrap: break-word;
 }
 div#mw-panel div.portal div.body ul li a {
-       color: #0645ad;
-}
-div#mw-panel div.portal div.body ul li a:visited {
-       color: #0b0080;
+       color: @menu-main-body-link-color;
+       &:visited {
+               color: @menu-main-body-link-visited-color;
+       }
 }
+
 /* Footer */
 div#footer {
        margin-left: 10em;
@@ -596,7 +600,7 @@ div#footer #footer-places li {
        #preftoc a:active {
                display: inline-block;
                position: relative;
-               color: #0645ad;
+               color: @menu-link-color;
                padding: 0.5em;
                text-decoration: none;
                background-image: none;
@@ -653,16 +657,6 @@ div#footer #footer-places li {
        margin-right: 0.25em;
 }
 
-/**
- * The following code is slightly modified from monobook
- */
-div#content {
-       line-height: 1.5em;
-}
-#bodyContent {
-       font-size: 0.8em;
-}
-
 ul {
        list-style-type: disc;
        .list-style-image('images/bullet-icon.png');
@@ -679,7 +673,7 @@ pre, .mw-code {
 #firstHeading {
        padding-top: 0;
        margin-top: 0;
-       font-size: 1.6em;
+       font-size: @content-heading-font-size;
 }
 
 /* Icon for Usernames */
@@ -705,9 +699,12 @@ pre, .mw-code {
 #bodyContent {
        position: relative;
        width: 100%;
-}
-div#bodyContent {
-       line-height: 1.5em;
+
+       // FIXME: Seems overly specific. Not sure why this is needed.
+       &div {
+               line-height: 1.5em;
+               font-size: @content-font-size;
+       }
 }
 
 /* mediawiki.notification */

diff --git a/skins/vector/styles-beta.less b/skins/vector/styles-beta.less
new file mode 100644 (file)
index 0000000..62e3d55
--- /dev/null
+++ b/skins/vector/styles-beta.less
@@ -0,0 +1,9 @@
+@import "variables.less";
+@import "beta/variables.less";
+@import "screen.less";
+@import "beta/screen.less";
+@import "externalLinks.less";
+@import "collapsibleNav.less";
+@media screen and (min-width: 982px) {
+       @import "screen-hd.less";
+}

diff --git a/skins/vector/styles.less b/skins/vector/styles.less
new file mode 100644 (file)
index 0000000..a5db63c
--- /dev/null
+++ b/skins/vector/styles.less
@@ -0,0 +1,8 @@
+@import "variables.less";
+@import "screen.less";
+@import "externalLinks.less";
+@import "collapsibleNav.less";
+
+@media screen and (min-width: 982px) {
+       @import "screen-hd.less";
+}

diff --git a/skins/vector/variables.less b/skins/vector/variables.less
new file mode 100644 (file)
index 0000000..fac7f82
--- /dev/null
+++ b/skins/vector/variables.less
@@ -0,0 +1,37 @@
+@html-font-size: 1em;
+
+@body-font-size: 1em;
+@body-font-color: #252525;
+
+// Page content
+@content-font-family: sans-serif;
+@content-font-size: 0.8em;
+@content-line-height: 1.5em;
+@content-padding: 1.5em 1.5em 1.5em 1.75em;
+@content-heading-font-size: 1.6em;
+@content-heading-font-family: sans-serif;
+
+// Common menu
+@menu-link-color: #0645ad;
+
+// Main menu
+@menu-main-font-size: inherit;
+@menu-main-heading-font-size: 0.75em;
+@menu-main-heading-padding: 0 1.75em 0.25em 0.25em;
+
+@menu-main-body-font-size: 0.75em;
+@menu-main-body-link-color: #0645ad;
+@menu-main-body-link-visited-color: #0b0080;
+@menu-main-body-margin: 0 0 0 1.25em;
+@menu-main-body-padding: 0;
+@menu-main-logo-left: 0.5em;
+
+// Personal menu
+@menu-personal-font-size: 0.75em;
+
+// Collapsible nav
+@collapsible-nav-heading-color: #4D4D4D;
+@collapsible-nav-heading-collapsed-color: #0645AD;
+
+@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
+@collapsible-nav-body-margin: 0 0 0 1.25em;