Added label text

README.md

@@ -37,6 +37,13 @@ Never used by itself; always in support of another piece of content on the page.
 
 ![screenshot of small text](/screenshots/small.png?raw=true)
 
+### Label Text
+
+Used for labels. Its font size/line spacing is relative to the root font
+and respond to viewport width changes.
+
+![screenshot of small text](/screenshots/label.png?raw=true)
+
 ### Headings
 
 There are four available heading styles. These would typically be applied to the `<h1>`, `<h2>`, `<h3>` and `<h4>` HTML elements, though it's not a requirement.
@@ -76,6 +83,10 @@ Mixins are also available for standard body, compact body, small body and headin
 	@include d2l-body-small();
 }
 
+.label {
+	@include d2l-label-text();
+}
+
 h1 {
 	@include d2l-heading-1();
 }
@@ -123,6 +134,9 @@ Additional CSS classes are available for standard body, compact body, small body
 <div class="d2l-body-small">
 	...
 </div>
+<!-- label text -->
+<label class="d2l-label-text">Lorem Ipsum</label>
+
 <!-- compact body -->
 <div class="d2l-body-compact">
 	...

d2l-typography-shared-styles.html

@@ -52,6 +52,12 @@
 				margin: 1.5rem 0 1.5rem 0;
 			};
 
+			--d2l-label-text: {
+				font-size: 0.8rem;
+				line-height: 1rem;
+				font-weight: 700;
+				letter-spacing: 0.2px;
+			};
 		}
 	</style>
 </custom-style>

d2l-typography.html

@@ -30,6 +30,10 @@
 				@apply --d2l-body-small-text;
 			}
 
+			.d2l-typography .d2l-label-text {
+				@apply --d2l-label-text;
+			}
+
 			.d2l-typography p,
 			.vui-typography p {
 				margin: 1rem 0;
@@ -130,6 +134,10 @@
 					font-size: 0.6rem;
 					line-height: 0.9rem;
 				}
+				.d2l-typography .d2l-label-text {
+					font-size: 0.7rem;
+					line-height: 0.9rem;
+				}
 			}
 
 		</style>

d2l-typography.scss

@@ -160,3 +160,16 @@
 		line-height: 1.2rem;
 	}
 }
+
+@mixin d2l-label-text() {
+	font-size: 0.8rem;
+	line-height: 1rem;
+	font-weight: 700;
+	letter-spacing: 0.2px;
+	@media (max-width: 615px) {
+		font-size: 0.7rem;
+		line-height: 0.9rem;
+		font-weight: 700;
+		letter-spacing: 0.2px;
+	}
+}

demo/index.html

@@ -65,6 +65,12 @@ <h4 class="d2l-heading-4">Heading 4</h4>
 						<p class="d2l-body-small">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</p>
 					</td>
 				</tr>
+				<tr>
+					<th>Label Text</th>
+					<td>
+						<label class="d2l-label-text">Lorem Ipsum</label>
+					</td>
+				</tr>
 			</tbody>
 		</table>
 	</body>