Change mw-ui anchors to require mw-ui-anchor base class, and introduce mw-ui-text base class

Introduced mw-ui-text base class for plain-text, non-interactable elements which require context colors (eg. icons)
Also added mw-ui-anchor for interactable elements (such as anchors)

Note: This is not supported by IE6 at current time.

Bug: 69212
Bug: 70801
Change-Id: I4d017d0a22cb4f3ca52b6228e45c0463c110ae64

2 files changed, 66 insertions, 36 deletions

diff --git a/resources/src/mediawiki.ui/components/anchors.less b/resources/src/mediawiki.ui/components/anchors.less
index e1b258dda847..1a58170308a1 100644
--- a/resources/src/mediawiki.ui/components/anchors.less
+++ b/resources/src/mediawiki.ui/components/anchors.less
@@ -3,13 +3,8 @@
 @import "mediawiki.ui/mixins";
 
 // Helpers
-.mw-ui-anchor( @mainColor ) {
-	// Make all context classes take the main color in IE6
-	.select-ie6-only& {
-		&:link, &:visited, &:hover, &:focus, &:active {
-			color: @mainColor;
-		}
-	}
+.mixin-mw-ui-anchor-styles( @mainColor ) {
+	color: @mainColor;
 
 	// Hover state
 	&:hover {
@@ -21,15 +16,13 @@
 		outline: none; // outline fix
 	}
 
-	color: @mainColor;
-
 	// Quiet mode is gray at first
 	&.mw-ui-quiet {
-		.mw-ui-anchor-quiet( @mainColor );
+		.mixin-mw-ui-anchor-styles-quiet( @mainColor );
 	}
 }
 
-.mw-ui-anchor-quiet( @mainColor ) {
+.mixin-mw-ui-anchor-styles-quiet( @mainColor ) {
 	color: @colorTextLight;
 	text-decoration: none;
 
@@ -42,36 +35,33 @@
 }
 
 /*
-Text & Anchors
-
-Allows you to give text a context as to the type of action it is indicating.
-
-Styleguide 6.
-*/
-
-/*
-Guidelines
+Anchors
 
-This context should only applied on elements without special behavior (DIV, SPAN, etc.), including A elements. These classes cannot be applied for styling purposes on other elements (such as form elements), except when used in combination with .mw-ui-button to alter a button context.
+The anchor base type can be applied to A elements when a basic context styling needs to be given to a link, without
+having to assign it as a button type. mw-ui-anchor only changes the text color, and should not be used in combination
+with other base classes, such as mw-ui-button.
 
 Markup:
-<a href=# class="mw-ui-progressive {$modifiers}">Progressive</a>
-<a href=# class="mw-ui-constructive {$modifiers}">Constructive</a>
-<a href=# class="mw-ui-destructive {$modifiers}">Destructive</a>
+<a href=# class="mw-ui-anchor mw-ui-progressive {$modifiers}">Progressive</a>
+<a href=# class="mw-ui-anchor mw-ui-constructive {$modifiers}">Constructive</a>
+<a href=# class="mw-ui-anchor mw-ui-destructive {$modifiers}">Destructive</a>
 
 .mw-ui-quiet - Quiet until interaction.
 
-Styleguide 6.1.
+Styleguide 6.2.
 */
-.mw-ui-progressive {
-	.mw-ui-anchor( @colorProgressive );
-}
-.mw-ui-constructive {
-	.mw-ui-anchor( @colorConstructive );
-}
-.mw-ui-destructive {
-	.mw-ui-anchor( @colorDestructive );
-}
-.mw-ui-quiet {
-	.mw-ui-anchor-quiet( @colorTextLight );
+
+// Setup compound anchor selectors (such as .mw-ui-anchor.my-ui-progressive)
+.mw-ui-anchor {
+	&.mw-ui-progressive {
+		.mixin-mw-ui-anchor-styles( @colorProgressive );
+	}
+
+	&.mw-ui-constructive {
+		.mixin-mw-ui-anchor-styles( @colorConstructive );
+	}
+
+	&.mw-ui-destructive {
+		.mixin-mw-ui-anchor-styles( @colorDestructive );
+	}
 }
diff --git a/resources/src/mediawiki.ui/components/text.less b/resources/src/mediawiki.ui/components/text.less
new file mode 100644
index 000000000000..500d42c4a43a
--- /dev/null
+++ b/resources/src/mediawiki.ui/components/text.less
@@ -0,0 +1,40 @@
+@import "mediawiki.mixins";
+@import "mediawiki.ui/variables";
+@import "mediawiki.ui/mixins";
+
+/*
+Text & Anchors
+
+Allows you to give text a context as to the type of action it is indicating.
+
+Styleguide 6.
+*/
+
+/*
+Text
+
+Context classes may be used on elements with only plain-text content with the mw-ui-text base. When the context classes
+are used on interactive and block-level elements, the appropriate alternative base type classes should also be used. For
+example, mw-ui-anchor with A, or mw-ui-button with buttons.
+
+Markup:
+<span class="mw-ui-text mw-ui-progressive">Progressive</span>
+<span class="mw-ui-text mw-ui-constructive">Constructive</span>
+<span class="mw-ui-text mw-ui-destructive">Destructive</span>
+
+Styleguide 6.1.
+*/
+
+.mw-ui-text {
+	// The selector order is like this on purpose; IE6 ignores the second selector,
+	// so we don't want to accidentally apply this color on all mw-ui-CONTEXT classes
+	.mw-ui-progressive& {
+		color: @colorProgressive;
+	}
+	.mw-ui-constructive& {
+		color: @colorConstructive;
+	}
+	.mw-ui-destructive& {
+		color: @colorDestructive;
+	}
+}
\ No newline at end of file