Merge "Restyle parameter pages"

2024-09-25 11:16:51 +00:00 · 2014-04-30 23:32:44 +00:00 · 2014-04-30 23:32:44 +00:00 · e52883df5a
parent a7207def4c 853e4872b4
commit e52883df5a
15 changed files with 202 additions and 104 deletions
--- a/VisualEditor.php
+++ b/VisualEditor.php
@ -1043,17 +1043,22 @@ $wgResourceModules += array(
 			'visualeditor-dialog-transclusion-add-param',
 			'visualeditor-dialog-transclusion-add-template',
 			'visualeditor-dialog-transclusion-content',
+			'visualeditor-dialog-transclusion-deprecated-parameter',
+			'visualeditor-dialog-transclusion-deprecated-parameter-description',
 			'visualeditor-dialog-transclusion-insert-template',
 			'visualeditor-dialog-transclusion-insert-transclusion',
 			'visualeditor-dialog-transclusion-loading',
 			'visualeditor-dialog-transclusion-multiple-mode',
 			'visualeditor-dialog-transclusion-no-template-description',
 			'visualeditor-dialog-transclusion-options',
+			'visualeditor-dialog-transclusion-param-info',
+			'visualeditor-dialog-transclusion-param-info-missing',
 			'visualeditor-dialog-transclusion-placeholder',
 			'visualeditor-dialog-transclusion-remove-content',
 			'visualeditor-dialog-transclusion-remove-param',
 			'visualeditor-dialog-transclusion-remove-template',
 			'visualeditor-dialog-transclusion-required-parameter',
+			'visualeditor-dialog-transclusion-required-parameter-description',
 			'visualeditor-dialog-transclusion-single-mode',
 			'visualeditor-dialog-transclusion-title',
 			'visualeditor-dialog-transclusion-wikitext-label',
--- a/modules/ve-mw/dm/models/ve.dm.MWParameterModel.js
+++ b/modules/ve-mw/dm/models/ve.dm.MWParameterModel.js
@ -44,7 +44,6 @@ OO.mixinClass( ve.dm.MWParameterModel, OO.EventEmitter );
 * Check if parameter is required.
 *
 * @method
- * @param {string} name Parameter name
 * @returns {boolean} Parameter is required
 */
 ve.dm.MWParameterModel.prototype.isRequired = function () {
@ -52,7 +51,7 @@ ve.dm.MWParameterModel.prototype.isRequired = function () {
 };

 /**
- * Check if parameter is suggestyed.
+ * Check if parameter is suggested.
 *
 * @method
 * @param {string} name Parameter name
@ -63,7 +62,17 @@ ve.dm.MWParameterModel.prototype.isSuggested = function () {
 };

 /**
- * Get template parameter is part of.
+ * Check if parameter is deprecated.
+ *
+ * @method
+ * @returns {boolean} Parameter is deprecated
+ */
+ve.dm.MWParameterModel.prototype.isDeprecated = function () {
+	return this.template.getSpec().isParameterDeprecated( this.name );
+};
+
+/**
+ * Get template of which this parameter is part.
 *
 * @returns {ve.dm.MWTemplateModel} Template
 */
--- a/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js
+++ b/modules/ve-mw/dm/models/ve.dm.MWTemplateSpecModel.js
@ -281,10 +281,12 @@ ve.dm.MWTemplateSpecModel.prototype.isParameterDeprecated = function ( name ) {
 * Get parameter deprecation description.
 *
 * @param {string} name Parameter name
- * @returns {string} Explaining of why parameter is deprecated, empty if parameter is not deprecated
+ * @returns {string} Explaining of why parameter is deprecated, empty if parameter is either not
+ *   deprecated or no description has been specified
 */
 ve.dm.MWTemplateSpecModel.prototype.getParameterDeprecationDescription = function ( name ) {
-	return this.params[name].deprecated || '';
+	return typeof this.params[name].deprecated === 'string' ?
+		this.params[name].deprecated : '';
 };

 /**
--- a/modules/ve-mw/i18n/en.json
+++ b/modules/ve-mw/i18n/en.json
@ -127,17 +127,22 @@
    "visualeditor-dialog-transclusion-add-param": "Add parameter",
    "visualeditor-dialog-transclusion-add-template": "Add template",
    "visualeditor-dialog-transclusion-content": "Content",
+    "visualeditor-dialog-transclusion-deprecated-parameter": "Deprecated parameter",
+    "visualeditor-dialog-transclusion-deprecated-parameter-description": "Parameter is deprecated. $1",
    "visualeditor-dialog-transclusion-insert-template": "Insert template",
    "visualeditor-dialog-transclusion-insert-transclusion": "Insert transclusion",
    "visualeditor-dialog-transclusion-loading": "Loading...",
    "visualeditor-dialog-transclusion-multiple-mode": "Show options",
    "visualeditor-dialog-transclusion-no-template-description": "{{GENDER:$3|You are adding}} the \"$1\" template to this page. It doesn't yet have a description, but there might be some information on the <a $2>template's page</a>.",
    "visualeditor-dialog-transclusion-options": "Options",
+    "visualeditor-dialog-transclusion-param-info": "Parameter description",
+    "visualeditor-dialog-transclusion-param-info-missing": "No parameter description available",
    "visualeditor-dialog-transclusion-placeholder": "New template",
    "visualeditor-dialog-transclusion-remove-content": "Remove content",
    "visualeditor-dialog-transclusion-remove-param": "Remove parameter",
    "visualeditor-dialog-transclusion-remove-template": "Remove template",
    "visualeditor-dialog-transclusion-required-parameter": "Required parameter",
+    "visualeditor-dialog-transclusion-required-parameter-description": "Parameter is required.",
    "visualeditor-dialog-transclusion-single-mode": "Hide options",
    "visualeditor-dialog-transclusion-title": "Transclusion",
    "visualeditor-dialogbutton-media-tooltip": "Media",
--- a/modules/ve-mw/i18n/qqq.json
+++ b/modules/ve-mw/i18n/qqq.json
@ -131,6 +131,8 @@
 	"visualeditor-dialog-transclusion-add-content": "Label for button that adds parameter content to a transclusion.",
 	"visualeditor-dialog-transclusion-add-param": "Label for button that adds parameter a parameter to a template.\n{{Identical|Add parameter}}",
 	"visualeditor-dialog-transclusion-add-template": "Label for button that adds parameter a template to a transclusion.\n{{Identical|Add template}}",
+	"visualeditor-dialog-transclusion-deprecated-parameter": "Tooltip for deprecated parameter indicator",
+	"visualeditor-dialog-transclusion-deprecated-parameter-description": "Label describing that a parameter is deprecated.\n\nParameters:\n* $1 - Description given in TemplateData for why parameter is deprecated, which may be empty.",
 	"visualeditor-dialog-transclusion-content": "Label for editor of content between transclusion parts.\n{{Identical|Content}}",
 	"visualeditor-dialog-transclusion-insert-template": "Label for button in the transclusion dialog while in single mode that closes the dialog inserts a template.\n{{Identical|Insert template}}",
 	"visualeditor-dialog-transclusion-insert-transclusion": "Label for button in the transclusion dialog while in multiple mode that closes the dialog inserts a transclusion",
@ -138,11 +140,14 @@
 	"visualeditor-dialog-transclusion-multiple-mode": "Label for button that shows advanced options in transclusion dialog",
 	"visualeditor-dialog-transclusion-no-template-description": "Message to user that no template information is available for the template.\n\nParameters:\n* $1 - the title of the template\n* $2 - contains attributes for the link to the template's page. e.g. 'target=\"_blank\" href=\"...\"'\n* $3 - user object for GENDER.",
 	"visualeditor-dialog-transclusion-options": "Label for section with options for templates, content or parameters.\n{{Identical|Options}}",
+	"visualeditor-dialog-transclusion-param-info": "Title of button that hides and shows parameter descriptions",
+	"visualeditor-dialog-transclusion-param-info-missing": "Title of button that hides and shows parameter descriptions when no description is available",
 	"visualeditor-dialog-transclusion-placeholder": "Label for section with options for adding a new template to a multi part transclusion",
 	"visualeditor-dialog-transclusion-remove-content": "Label for button that removes content between transclusion parts",
 	"visualeditor-dialog-transclusion-remove-param": "Label for button that removes a parameter from a template",
 	"visualeditor-dialog-transclusion-remove-template": "Label for button that removes a template from a transclusion.\n{{Identical|Remove template}}",
 	"visualeditor-dialog-transclusion-required-parameter": "Tooltip for required parameter indicator",
+	"visualeditor-dialog-transclusion-required-parameter-description": "Label describing that a parameter is required.",
 	"visualeditor-dialog-transclusion-single-mode": "Label for button that hides advanced options in transclusion dialog",
 	"visualeditor-dialog-transclusion-title": "{{Identical|Transclusion}}",
 	"visualeditor-dialogbutton-media-tooltip": "{{Identical|Media}}",
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWTemplateDialog.js
@ -45,7 +45,8 @@ ve.ui.MWTemplateDialog.static.modelClasses = [ ve.dm.MWTransclusionNode ];
 */
 ve.ui.MWTemplateDialog.static.bookletLayoutConfig = {
 	'continuous': true,
-	'outlined': false
+	'outlined': false,
+	'autoFocus': true
 };

 /* Methods */
--- a/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWTransclusionDialog.js
@ -48,11 +48,7 @@ ve.ui.MWTransclusionDialog.static.modeCssClasses = {
 ve.ui.MWTransclusionDialog.static.bookletLayoutConfig = ve.extendObject(
 	{},
 	ve.ui.MWTemplateDialog.static.bookletLayoutConfig,
-	{
-		'autoFocus': true,
-		'outlined': true,
-		'editable': true
-	}
+	{ 'outlined': true, 'editable': true }
 );

 /* Methods */
@ -64,7 +60,6 @@ ve.ui.MWTransclusionDialog.prototype.onTransclusionReady = function () {
 	// Parent method
 	ve.ui.MWTransclusionDialog.super.prototype.onTransclusionReady.call( this );

-	this.modeButton.setDisabled( false );
 	this.setMode( 'auto' );
 };

@ -232,11 +227,13 @@ ve.ui.MWTransclusionDialog.prototype.setMode = function ( mode ) {
 	}
 	this.setSize( single ? 'medium' : 'large' );
 	this.bookletLayout.toggleOutline( !single );
-	this.modeButton.setLabel( ve.msg(
-		single ?
-			'visualeditor-dialog-transclusion-multiple-mode' :
-			'visualeditor-dialog-transclusion-single-mode'
-	) );
+	this.modeButton
+		.setLabel( ve.msg(
+			single ?
+				'visualeditor-dialog-transclusion-multiple-mode' :
+				'visualeditor-dialog-transclusion-single-mode'
+		) )
+		.setDisabled( !this.isSingleTemplateTransclusion() );
 	this.updateTitle();
 };

--- a/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWParameterPage.js
@ -19,6 +19,11 @@
 ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config ) {
 	var paramName = parameter.getName();

+	// Configuration initialization
+	config = ve.extendObject( {
+		'scrollable': false
+	}, config );
+
 	// Parent constructor
 	OO.ui.PageLayout.call( this, name, config );

@ -26,13 +31,12 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
 	this.parameter = parameter;
 	this.spec = parameter.getTemplate().getSpec();
 	this.defaultValue = this.spec.getParameterDefaultValue( paramName );
+	this.$info = this.$( '<div>' );
+	this.$actions = this.$( '<div>' );
 	this.$label = this.$( '<div>' );
 	this.$field = this.$( '<div>' );
-	this.$actions = this.$( '<div>' );
-	this.$indicators = this.$( '<div>' );
-	this.$info = this.$( '<div>' );
-	this.$description = this.$( '<div>' );
 	this.$more = this.$( '<div>' );
+	this.$description = this.$( '<div>' );
 	this.valueInput = new OO.ui.TextInputWidget( {
 			'$': this.$,
 			'multiline': true,
@ -46,9 +50,18 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
 			'frameless': true,
 			'icon': 'remove',
 			'title': ve.msg( 'visualeditor-dialog-transclusion-remove-param' ),
-			'tabIndex': -1
+			'tabIndex': -1,
+			'classes': [ 've-ui-mwParameterPage-removeButton' ]
 		} )
 		.connect( this, { 'click': 'onRemoveButtonClick' } );
+	this.infoButton = new OO.ui.PopupButtonWidget( {
+			'$': this.$,
+			'frameless': true,
+			'icon': 'info',
+			'title': ve.msg( 'visualeditor-dialog-transclusion-param-info' ),
+			'tabIndex': -1,
+			'classes': [ 've-ui-mwParameterPage-infoButton' ]
+		} );
 	this.addButton = new OO.ui.ButtonWidget( {
 			'$': this.$,
 			'frameless': true,
@ -57,9 +70,11 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
 			'tabIndex': -1
 		} )
 		.connect( this, { 'click': 'onAddButtonClick' } );
-	this.requiredIndicator = new OO.ui.IndicatorWidget( { '$': this.$ } );
+	this.statusIndicator = new OO.ui.IndicatorWidget( {
+		'$': this.$,
+		'classes': [ 've-ui-mwParameterPage-statusIndicator' ]
+	} );

-	// TODO: Use spec.deprecation
 	// TODO: Use spec.type

 	// Events
@ -67,37 +82,68 @@ ve.ui.MWParameterPage = function VeUiMWParameterPage( parameter, name, config )
 	this.$description.on( 'click', ve.bind( this.onDescriptionClick, this ) );

 	// Initialization
+	this.$info
+		.addClass( 've-ui-mwParameterPage-info' )
+		.append( this.$label, this.statusIndicator.$element );
+	this.$actions
+		.addClass( 've-ui-mwParameterPage-actions' )
+		.append( this.infoButton.$element, this.removeButton.$element );
 	this.$label
 		.addClass( 've-ui-mwParameterPage-label' )
 		.text( this.spec.getParameterLabel( paramName ) );
-	this.$actions
-		.addClass( 've-ui-mwParameterPage-actions' )
-		.append( this.removeButton.$element );
-	this.$indicators
-		.addClass( 've-ui-mwParameterPage-indicators' )
-		.append( this.requiredIndicator.$element );
-	this.$description
-		.addClass( 've-ui-mwParameterPage-description' )
-		.text( this.spec.getParameterDescription( paramName ) || '' );
-	this.$info
-		.addClass( 've-ui-mwParameterPage-info' )
-		.append( this.$description );
 	this.$field
 		.addClass( 've-ui-mwParameterPage-field' )
-		.append( this.valueInput.$element, this.$indicators, this.$actions, this.$info );
+		.append(
+			this.valueInput.$element
+		);
 	this.$more
 		.addClass( 've-ui-mwParameterPage-more' )
 		.append( this.addButton.$element );
 	this.$element
 		.addClass( 've-ui-mwParameterPage' )
-		.append( this.$label, this.$field, this.$more );
+		.append( this.$info, this.$actions, this.$field, this.$more );
+	this.$description
+		.addClass( 've-ui-mwParameterPage-description' )
+		.append( this.$( '<p>' ).text( this.spec.getParameterDescription( paramName ) || '' ) );

 	if ( this.parameter.isRequired() ) {
-		this.requiredIndicator
+		this.statusIndicator
 			.setIndicator( 'required' )
 			.setIndicatorTitle(
 				ve.msg( 'visualeditor-dialog-transclusion-required-parameter' )
 			);
+		this.$description.append(
+			this.$( '<p>' )
+				.addClass( 've-ui-mwParameterPage-description-required' )
+				.text(
+					ve.msg( 'visualeditor-dialog-transclusion-required-parameter-description' )
+				)
+		);
+	} else if ( this.parameter.isDeprecated() ) {
+		this.statusIndicator
+			.setIndicator( 'alert' )
+			.setIndicatorTitle(
+				ve.msg( 'visualeditor-dialog-transclusion-deprecated-parameter' )
+			);
+		this.$description.append(
+			this.$( '<p>' )
+				.addClass( 've-ui-mwParameterPage-description-deprecated' )
+				.text(
+					ve.msg(
+						'visualeditor-dialog-transclusion-deprecated-parameter-description',
+						this.spec.getParameterDeprecationDescription( paramName )
+					)
+				)
+		);
+	}
+	if ( this.$description.text() === '' ) {
+		this.infoButton
+			.setDisabled( true )
+			.setTitle(
+				ve.msg( 'visualeditor-dialog-transclusion-param-info-missing' )
+			);
+	} else {
+		this.infoButton.getPopup().$body.append( this.$description );
 	}
 };

@ -134,11 +180,6 @@ ve.ui.MWParameterPage.prototype.onLabelClick = function () {
 	this.valueInput.simulateLabelClick();
 };

-ve.ui.MWParameterPage.prototype.onDescriptionClick = function () {
-	this.valueInput.simulateLabelClick();
-	this.$description.toggleClass( 've-ui-mwParameterPage-description-all' );
-};
-
 /**
 * @inheritdoc
 */
@ -162,5 +203,12 @@ ve.ui.MWParameterPage.prototype.setOutlineItem = function ( outlineItem ) {
 					ve.msg( 'visualeditor-dialog-transclusion-required-parameter' )
 				);
 		}
+		if ( this.parameter.isDeprecated() ) {
+			this.outlineItem
+				.setIndicator( 'alert' )
+				.setIndicatorTitle(
+					ve.msg( 'visualeditor-dialog-transclusion-deprecated-parameter' )
+				);
+		}
 	}
 };
--- a/modules/ve-mw/ui/pages/ve.ui.MWParameterPlaceholderPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWParameterPlaceholderPage.js
@ -17,6 +17,11 @@
 * @param {Object} [config] Configuration options
 */
 ve.ui.MWParameterPlaceholderPage = function VeUiMWParameterPlaceholderPage( parameter, name, config ) {
+	// Configuration initialization
+	config = ve.extendObject( {
+		'scrollable': false
+	}, config );
+
 	// Parent constructor
 	OO.ui.PageLayout.call( this, name, config );

--- a/modules/ve-mw/ui/pages/ve.ui.MWTemplatePage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWTemplatePage.js
@ -21,6 +21,11 @@
 ve.ui.MWTemplatePage = function VeUiMWTemplatePage( template, name, config ) {
 	var title;

+	// Configuration initialization
+	config = ve.extendObject( {
+		'scrollable': false
+	}, config );
+
 	// Parent constructor
 	OO.ui.PageLayout.call( this, name, config );

--- a/modules/ve-mw/ui/pages/ve.ui.MWTemplatePlaceholderPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWTemplatePlaceholderPage.js
@ -17,6 +17,11 @@
 * @param {Object} [config] Configuration options
 */
 ve.ui.MWTemplatePlaceholderPage = function VeUiMWTemplatePlaceholderPage( placeholder, name, config ) {
+	// Configuration initialization
+	config = ve.extendObject( {
+		'scrollable': false
+	}, config );
+
 	// Parent constructor
 	OO.ui.PageLayout.call( this, name, config );

--- a/modules/ve-mw/ui/pages/ve.ui.MWTransclusionContentPage.js
+++ b/modules/ve-mw/ui/pages/ve.ui.MWTransclusionContentPage.js
@ -17,6 +17,11 @@
 * @param {Object} [config] Configuration options
 */
 ve.ui.MWTransclusionContentPage = function VeUiMWTransclusionContentPage( content, name, config ) {
+	// Configuration initialization
+	config = ve.extendObject( {
+		'scrollable': false
+	}, config );
+
 	// Parent constructor
 	OO.ui.PageLayout.call( this, name, config );

--- a/modules/ve-mw/ui/styles/pages/ve.ui.MWParameterPage.css
+++ b/modules/ve-mw/ui/styles/pages/ve.ui.MWParameterPage.css
@ -18,85 +18,86 @@
 	background-color: #f3f3f3;
 }

-.ve-ui-mwParameterPage-label,
-.ve-ui-mwParameterPage-field,
-.ve-ui-mwParameterPage-info,
-.ve-ui-mwParameterPage-actions,
-.ve-ui-mwParameterPage-indicators,
-.ve-ui-mwParameterPage .oo-ui-textInputWidget {
-	display: inline-block;
-	vertical-align: top;
+.ve-ui-mwParameterPage-info {
+	float: left;
+	cursor: default;
+	padding-left: 2.5em;
+	width: 80%;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ve-ui-mwParameterPage-actions {
+	float: right;
+	cursor: default;
+	padding-right: 2.5em;
+	width: 20%;
+	text-align: right;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }

 .ve-ui-mwParameterPage-label {
-	width: 20%;
-	padding: 1.33em 1em;
-	text-align: right;
-	cursor: default;
+	display: inline;
+	vertical-align: middle;
+	font-size: 1.1em;
+	font-weight: bold;
+}
+
+.ve-ui-mwParameterPage-statusIndicator {
+	display: inline-block;
+	vertical-align: middle;
+	opacity: 0.5;
+}
+
+.ve-ui-mwParameterPage-description {
+	font-size: 0.9em;
+	line-height: 1.5em;
+	padding: 0.25em 1em;
+}
+
+.ve-ui-mwParameterPage-description-required,
+.ve-ui-mwParameterPage-description-deprecated {
+	font-style: italic;
+	color: #555;
+}
+
+.ve-ui-mwParameterPage-infoButton,
+.ve-ui-mwParameterPage-removeButton {
+	display: none;
+}
+
+.ve-ui-mwParameterPage-infoButton .oo-ui-popupWidget {
+	z-index: 100;
+	text-align: left;
+}
+
+.oo-ui-pageLayout-active .ve-ui-mwParameterPage-infoButton,
+.oo-ui-pageLayout-active .ve-ui-mwParameterPage-removeButton {
+	display: inline-block;
 }

 .ve-ui-mwParameterPage-field {
-	width: 80%;
 	position: relative;
-	padding-top: 0.75em;
+	padding: 0.75em 2.5em;
+	clear: both;
 }

 .ve-ui-mwParameterPage .oo-ui-textInputWidget {
-	width: 86%;
+	display: inline-block;
+	vertical-align: top;
+	width: 100%;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
 }

 .ve-ui-mwParameterPage .oo-ui-textInputWidget textarea {
 	height: 2.5em;
 }

-.ve-ui-mwParameterPage-indicators,
-.ve-ui-mwParameterPage-actions {
-	width: 7%;
-	padding: 0.33em 0;
-	text-align: right;
-}
-
-.ve-ui-mwParameterPage-actions {
-	display: none;
-}
-
-.ve-ui-mwParameterPage.oo-ui-pageLayout-active .ve-ui-mwParameterPage-actions {
-	display: inline-block;
-}
-
-.ve-ui-mwParameterPage-info {
-	position: relative;
-	width: 90%;
-	padding-bottom: 0.75em;
-	cursor: default;
-}
-
-.ve-ui-mwParameterPage-description {
-	color: #ddd;
-	font-size: 0.9em;
-	line-height: 1.5em;
-	height: 1.5em;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	-webkit-transition: color 200ms;
-	-moz-transition: color 200ms;
-	-o-transition: color 200ms;
-	transition: color 200ms;
-}
-
-.ve-ui-mwParameterPage-description-all {
-	height: auto;
-	white-space: normal;
-}
-
-.ve-ui-mwParameterPage.oo-ui-pageLayout-active .ve-ui-mwParameterPage-description {
-	color: #999;
-}
-
 .ve-ui-mwParameterPage-more {
 	display: none;
 	margin: 1em 0 0.5em 0;
--- a/modules/ve-mw/ui/styles/pages/ve.ui.MWTemplatePage.css
+++ b/modules/ve-mw/ui/styles/pages/ve.ui.MWTemplatePage.css
@ -14,6 +14,10 @@
 	display: block;
 }

+.ve-ui-mwTemplatePage-description {
+	color: #555;
+}
+
 .ve-ui-mwTemplatePage-description-missing {
 	font-style: italic;
 }
--- a/modules/ve-mw/ui/styles/widgets/ve.ui.MWParameterResultWidget.css
+++ b/modules/ve-mw/ui/styles/widgets/ve.ui.MWParameterResultWidget.css
@ -49,4 +49,5 @@

 .ve-ui-mwParameterResultWidget-description {
 	clear: both;
+	color: #555;
 }