diff --git a/src/theme/default/accordion-pane.m.css b/src/theme/default/accordion-pane.m.css
index c3a2af6391..5c381c945b 100644
--- a/src/theme/default/accordion-pane.m.css
+++ b/src/theme/default/accordion-pane.m.css
@@ -1,2 +1,3 @@
+/* The root class of the accordion pane */
 .root {
 }
diff --git a/src/theme/default/base.m.css b/src/theme/default/base.m.css
index de3719ad0e..86deebce30 100644
--- a/src/theme/default/base.m.css
+++ b/src/theme/default/base.m.css
@@ -1,3 +1,4 @@
+/* visually hides an element while remaining accessible to screen readers */
 .visuallyHidden {
 	border: 0;
 	clip: rect(0 0 0 0);
diff --git a/src/theme/default/button.m.css b/src/theme/default/button.m.css
index b364f9030e..5214a92a6b 100644
--- a/src/theme/default/button.m.css
+++ b/src/theme/default/button.m.css
@@ -1,11 +1,13 @@
 @import './variables.css';
 
+/* The root class for the button ensures button-like behavior */
 .root {
 	cursor: pointer;
 	display: inline-block;
 	padding: 10px;
 }
 
+/* indicates that the button has been pressed */
 .pressed::before {
 	border-bottom: 2px solid black;
 	border-right: 2px solid black;
@@ -24,6 +26,7 @@
 .addon {
 }
 
+/* Addded to a disabled button */
 .disabled,
 .disabled:hover {
 	cursor: default;
diff --git a/src/theme/default/calendar.m.css b/src/theme/default/calendar.m.css
index 9bef589a48..19c277ee89 100644
--- a/src/theme/default/calendar.m.css
+++ b/src/theme/default/calendar.m.css
@@ -1,31 +1,38 @@
 @import './variables.css';
 
+/* The root class of the calendar */
 .root {
 	box-sizing: border-box;
 	display: inline-block;
 }
 
+/* Added to inactive dates (disabled or out of range) */
 .inactiveDate {
 	background-color: var(--disabled-color);
 }
 
+/* Added to dates outside of the allowed min/max dates */
 .outOfRange {
 }
 
+/* The currently selected date */
 .selectedDate {
 	background-color: var(--selected-background);
 	color: var(--selected-color);
 }
 
+/* Added to today's date */
 .todayDate {
 }
 
+/* Added to all dates */
 .date {
 	cursor: pointer;
 	padding: 10px 20px;
 	text-align: center;
 }
 
+/* Hover style for all dates */
 .date:hover {
 	background-color: var(--disabled-color); /* TODO: better hover color variable? */
 }
@@ -34,12 +41,10 @@
 .dateGrid {
 }
 
+/* Added the days of the week header (e.g. Sun, Mon, Tue) */
 .weekday {
 	padding: 10px 20px;
 	text-align: center;
-}
-
-.weekday {
 	color: var(--disabled-color);
 	font-weight: normal;
 	text-transform: uppercase;
@@ -48,43 +53,63 @@
 /* Date picker  */
 .datePicker {
 }
+/* Contains the month and year of the DatePicker */
 .topMatter {
 }
+/* Added to the month trigger in the DatePicker */
 .monthTrigger {
 }
+/* Added to the year trigger in the DatePicker */
 .yearTrigger {
 }
+/* Contains all controls in DatePicker and Calendar */
 .controls {
 }
+/* Added to the previous arrow selector for years and months */
 .previous {
 }
+/* Added to the next arrow selector for years and months */
 .next {
 }
+/* Contains the month grid of the DatePicker */
 .monthGrid {
 }
+/* Added to each month in the month grid of the DatePicker */
 .monthFields {
 }
+/* Contains the year grid of the DatePicker */
 .yearGrid {
 }
+/* Added to each year in the year grid of the DatePicker */
 .yearFields {
 }
+/* Added to the label of each month field in the month grid of the DatePicker */
 .monthRadio {
 }
+/* Added to the label of each year field in the year grid of the DatePicker */
 .yearRadio {
 }
+/* Added to the selected month in the month grid of the DatePicker */
 .monthRadioChecked {
 }
+/* Added to the selected year in the year grid of the DatePicker */
 .yearRadioChecked {
 }
+/* Added to the input for each month in the month grid of the DatePicker */
 .monthRadioInput {
 }
+/* Added to each month name in the month grid of the DatePicker */
 .monthRadioLabel {
 }
+/* Added to the input for each year in the year grid of the DatePicker */
 .yearRadioInput {
 }
+/* Added to each year name in the year grid of the DatePicker */
 .yearRadioLabel {
 }
+/* Added to the month button when the month grid is open */
 .monthTriggerActive {
 }
+/* Added to the year button when the year grid is open */
 .yearTriggerActive {
 }
diff --git a/src/theme/default/card.m.css b/src/theme/default/card.m.css
index 2a11db7c49..2cdcccba69 100644
--- a/src/theme/default/card.m.css
+++ b/src/theme/default/card.m.css
@@ -1,24 +1,29 @@
+/* The root class for the card */
 .root {
 	display: flex;
 	flex-direction: column;
 }
 
+/* Contains the Card's actions */
 .actions {
 	display: flex;
 	flex-direction: row;
 }
 
+/* May be added to action buttons supplied by the actionsRenderer */
 .actionButtons {
 	display: flex;
 	align-items: center;
 }
 
+/* May be added to action icons supplied by the actionsRenderer */
 .actionIcons {
 	display: flex;
 	align-items: center;
 	flex-grow: 1;
 }
 
+/* May be added to an action to indiciate the desired CTA */
 .primaryAction {
 	position: relative;
 	display: flex;
@@ -26,27 +31,34 @@
 	overflow: hidden;
 }
 
+/* May contain media content */
 .media {
 }
 
+/* May be added to media content */
 .mediaContent {
 }
 
+/* May be added to square media */
 .mediaSquare::before {
 	margin-top: 100%;
 }
 
+/* May be added to 16:9 media */
 .media16by9::before {
 	margin-top: 56.25%;
 }
 
+/* May wrap media content */
 .media::before {
 	display: block;
 	content: '';
 }
 
+/* May indicate primary actions */
 .primary {
 }
 
+/* May indicate secondary actions */
 .secondary {
 }
diff --git a/src/theme/default/checkbox-group.m.css b/src/theme/default/checkbox-group.m.css
index 1675d066c8..d3c45bb52f 100644
--- a/src/theme/default/checkbox-group.m.css
+++ b/src/theme/default/checkbox-group.m.css
@@ -1,5 +1,7 @@
+/* The root class for the checkbox group */
 .root {
 }
 
+/* Added to the legend of the CheckboxGroup */
 .legend {
 }
diff --git a/src/theme/default/checkbox.m.css b/src/theme/default/checkbox.m.css
index f1f8095281..e97550a574 100644
--- a/src/theme/default/checkbox.m.css
+++ b/src/theme/default/checkbox.m.css
@@ -1,22 +1,30 @@
 @import './variables.css';
 
+/* The root class for the Checkbox */
 .root {
 	display: block;
 	position: relative;
 }
 
+/* Added to the input of the control */
 .input {
 }
+/* Contains the input */
 .inputWrapper {
 }
+/* Added to a checked control */
 .checked {
 }
+/* Added to a disabled control */
 .disabled {
 }
+/* Added to a focused control */
 .focused {
 }
+/* Added to a read-only control */
 .readonly {
 }
+/* Added to a required control */
 .required {
 }
 
@@ -36,11 +44,15 @@
 	background-color: var(--success-color);
 }
 
+/* Added to a toggle-style Checkbox */
 .toggle {
 }
+/* Added to the label of a toggle-style Checkbox when checked */
 .onLabel {
 }
+/* Added to the label of a toggle-style Checkbox when not checked */
 .offLabel {
 }
+/* Added to the toggle switch of a toggle-style Checkbox */
 .toggleSwitch {
 }
diff --git a/src/theme/default/chip.m.css b/src/theme/default/chip.m.css
index 86ac3f8814..a4f140d83f 100644
--- a/src/theme/default/chip.m.css
+++ b/src/theme/default/chip.m.css
@@ -1,19 +1,25 @@
+/* The root class for a Chip */
 .root {
 }
 
+/* Contains the rendered icon */
 .iconWrapper {
 }
 
+/* Contains the label */
 .label {
 }
 
+/* Contains the close icon */
 .closeIconWrapper {
 	cursor: pointer;
 }
 
+/* Added to clickable Chips */
 .clickable {
 	cursor: pointer;
 }
 
+/* Added to disabled Chips */
 .disabled {
 }
diff --git a/src/theme/default/combobox.m.css b/src/theme/default/combobox.m.css
index 9ff8018947..d198ddb519 100644
--- a/src/theme/default/combobox.m.css
+++ b/src/theme/default/combobox.m.css
@@ -1,5 +1,6 @@
 @import './variables.css';
 
+/* The root class for the Combobox */
 .root {
 	position: relative;
 	display: inline-block;
@@ -7,10 +8,12 @@
 	width: 200px;
 }
 
+/* Contains the controls of the ComboBox */
 .controls {
 	position: relative;
 }
 
+/* Contains the drop-down of the ComboBox */
 .dropdown {
 	border: 1px solid var(--component-color);
 	background: var(--component-background);
@@ -19,6 +22,7 @@
 	z-index: var(--zindex-dropdown);
 }
 
+/* Common styling for buttons */
 .clear,
 .trigger {
 	position: absolute;
@@ -30,21 +34,28 @@
 	padding: 0;
 }
 
+/* Added to the trigger button */
 .trigger {
 	right: 7px;
 }
 
+/* Added to the clear button */
 .clear {
 	right: 27px;
 }
 
+/* Added when the control is focused */
 .focused {
 }
+/* Added when the control is valid */
 .valid {
 }
+/* Added when the control is invalid */
 .invalid {
 }
+/* Added when the Combobox is open */
 .open {
 }
+/* Added when the Combobox may be cleared */
 .clearable {
 }
diff --git a/src/theme/default/dialog.m.css b/src/theme/default/dialog.m.css
index c9df0e9fc0..4fbf614d6f 100644
--- a/src/theme/default/dialog.m.css
+++ b/src/theme/default/dialog.m.css
@@ -1,8 +1,10 @@
 @import './variables.css';
 
+/* The root class for the Dialog */
 .root {
 }
 
+/* Contains the dialog */
 .main {
 	position: fixed;
 	top: 50%;
@@ -16,13 +18,16 @@
 	z-index: calc(var(--zindex-dialog) + 1);
 }
 
+/* Contains the title of the Dialog */
 .title {
 	position: relative;
 }
 
+/* Added to an open dialog */
 .open {
 }
 
+/* Added to the close control */
 .close {
 	position: absolute;
 	top: 50%;
@@ -34,13 +39,16 @@
 	background: none;
 }
 
+/* Added to the close icon */
 .closeIcon {
 	font-size: 14px;
 }
 
+/* Contains the content of the Dialog */
 .content {
 }
 
+/* Added when a visible underlay is used */
 .underlayVisible {
 	background: var(--underlay-background);
 	z-index: var(--zindex-dialog);
@@ -55,7 +63,9 @@
 	}
 }
 
+/* Enter animation for the Dialog */
 .enter,
+/* Enter animation for the Dialog's underlay */
 .underlayEnter {
 	animation-duration: var(--short-animation-duration);
 	animation-fill-mode: both;
@@ -71,7 +81,9 @@
 	}
 }
 
+/* Exit animation for the Dialog */
 .exit,
+/* Exit animation for the Dialog's underlay */
 .underlayExit {
 	animation-duration: var(--short-animation-duration);
 	animation-fill-mode: both;
diff --git a/src/theme/default/grid-body.m.css b/src/theme/default/grid-body.m.css
index 318474c965..f648e209be 100644
--- a/src/theme/default/grid-body.m.css
+++ b/src/theme/default/grid-body.m.css
@@ -1,5 +1,6 @@
 @import './variables.css';
 
+/* The root class of the grid's Body */
 .root {
 	background: var(--component-background);
 	border-bottom: 1px solid var(--component-color);
diff --git a/src/theme/default/grid-cell.m.css b/src/theme/default/grid-cell.m.css
index 9b881c7bc1..c508f1036b 100644
--- a/src/theme/default/grid-cell.m.css
+++ b/src/theme/default/grid-cell.m.css
@@ -1,5 +1,6 @@
 @import './variables.css';
 
+/* The root class of the grid's Cell */
 .root {
 	border: 1px solid var(--component-color);
 	border-top-style: none;
@@ -9,11 +10,13 @@
 	min-width: 100px;
 }
 
+/* Added to the input while editing */
 .input {
 	background: var(--component-background);
 	color: var(--component-color);
 }
 
+/* Added to the edit button */
 .edit {
 	composes: visuallyHidden focusable from './base.m.css';
 }
diff --git a/src/theme/default/grid-footer.m.css b/src/theme/default/grid-footer.m.css
index ab9ca4e813..93319167b0 100644
--- a/src/theme/default/grid-footer.m.css
+++ b/src/theme/default/grid-footer.m.css
@@ -1,5 +1,6 @@
 @import './variables.css';
 
+/* The root class of the grid Footer */
 .root {
 	background: var(--component-background);
 	color: var(--component-color);
diff --git a/src/theme/default/grid-header.m.css b/src/theme/default/grid-header.m.css
index 003f3ba5fb..05a8c733ac 100644
--- a/src/theme/default/grid-header.m.css
+++ b/src/theme/default/grid-header.m.css
@@ -1,8 +1,10 @@
 @import './variables.css';
 
+/* The root class of the grid Header */
 .root {
 }
 
+/* Contains the header cell for a column */
 .cell {
 	border: 1px solid var(--component-color);
 	border-top-style: none;
@@ -17,20 +19,25 @@
 	min-width: 100px;
 }
 
+/* Added to a sortable column */
 .sortable {
 	cursor: pointer;
 }
 
+/* Added to a sorted column */
 .sorted {
 	color: var(--success-color);
 }
 
+/* Added to a column sorted in descending order */
 .desc {
 }
 
+/* Added to a column sorted in ascending order */
 .asc {
 }
 
+/* Added to the sort button */
 .sort {
 	margin-left: 4px;
 	opacity: 0;
@@ -41,6 +48,7 @@
 	opacity: 1;
 }
 
+/* Added to the filter control */
 .filter {
 	margin-top: 4px;
 	width: 100%;
diff --git a/src/theme/default/grid-placeholder-row.m.css b/src/theme/default/grid-placeholder-row.m.css
index d655d2d2f1..839c046d50 100644
--- a/src/theme/default/grid-placeholder-row.m.css
+++ b/src/theme/default/grid-placeholder-row.m.css
@@ -1,5 +1,6 @@
 @import './variables.css';
 
+/* The root class for the PlaceholderRow */
 .root {
 	composes: root from './grid-row.m.css';
 	line-height: 30px;
@@ -10,6 +11,7 @@
 	text-overflow: ellipsis;
 }
 
+/* Added to the loading row */
 .loading {
 	margin: 6px;
 	width: 12px;
diff --git a/src/theme/default/grid-row.m.css b/src/theme/default/grid-row.m.css
index b46657c263..d2dce87c5a 100644
--- a/src/theme/default/grid-row.m.css
+++ b/src/theme/default/grid-row.m.css
@@ -1,3 +1,4 @@
+/* The root class of the grid Row */
 .root {
 	box-sizing: border-box;
 	height: 30px;
diff --git a/src/theme/default/grid.m.css b/src/theme/default/grid.m.css
index 2a26f5b664..14da2edead 100644
--- a/src/theme/default/grid.m.css
+++ b/src/theme/default/grid.m.css
@@ -1,11 +1,13 @@
 @import './variables.css';
 
+/* The root class of the Grid */
 .root {
 	border-top: 1px solid var(--component-color);
 	border-bottom: 1px solid var(--component-color);
 	background: var(--component-background);
 }
 
+/* Contains the header */
 .header {
 	border-bottom: 1px solid var(--component-color);
 	background: var(--component-background);
@@ -13,6 +15,7 @@
 	height: 32px;
 }
 
+/* Added to the header container when there are filters */
 .filterGroup {
 	height: 64px;
 }
diff --git a/src/theme/default/helper-text.m.css b/src/theme/default/helper-text.m.css
index 2b1b15cb1d..a96675926c 100644
--- a/src/theme/default/helper-text.m.css
+++ b/src/theme/default/helper-text.m.css
@@ -1,12 +1,16 @@
 @import './variables.css';
 
+/* The root class of the HelperText */
 .root {
 }
+/* Added to the helper text */
 .text {
 }
+/* Added when the helper text indicates a valid state */
 .valid {
 	color: var(--success-color);
 }
+/* Added when the helper text indicates an invalid state */
 .invalid {
 	color: var(--error-color);
 }
diff --git a/src/theme/default/icon.m.css b/src/theme/default/icon.m.css
index b8aa232959..304b5f744b 100644
--- a/src/theme/default/icon.m.css
+++ b/src/theme/default/icon.m.css
@@ -7,9 +7,11 @@
 	font-style: normal;
 }
 
+/* The root class of the Icon */
 .root {
 }
 
+/* Added to the icon */
 .icon {
 	/* use !important to prevent issues with browser extensions that change fonts */
 	font-family: 'dojo' !important;
@@ -24,102 +26,127 @@
 	-moz-osx-font-smoothing: grayscale;
 }
 
+/* A down icon */
 .downIcon:before {
 	content: '\f078';
 }
 
+/* A left icon */
 .leftIcon:before {
 	content: '\f053';
 }
 
+/* A right icon */
 .rightIcon:before {
 	content: '\f054';
 }
 
+/* A close icon */
 .closeIcon:before {
 	content: '\f00d';
 }
 
+/* A plus icon */
 .plusIcon:before {
 	content: '\f067';
 }
 
+/* A minus icon */
 .minusIcon:before {
 	content: '\f068';
 }
 
+/* A checkmark icon */
 .checkIcon:before {
 	content: '\f00c';
 }
 
+/* An up icon */
 .upIcon:before {
 	content: '\f077';
 }
 
+/* An alternative up icon */
 .upAltIcon:before {
 	content: '\f0d8';
 }
 
+/* A down icon in the same styling as the alternative up icon */
 .downAltIcon:before {
 	content: '\f0d7';
 }
 
+/* A search icon */
 .searchIcon:before {
 	content: '\f002';
 }
 
+/* A bar icon */
 .barsIcon:before {
 	content: '\f0c9';
 }
 
+/* A settings icon */
 .settingsIcon:before {
 	content: '\f013';
 }
 
+/* An alert icon */
 .alertIcon:before {
 	content: '\f06a';
 }
 
+/* A help icon */
 .helpIcon:before {
 	content: '\f059';
 }
 
+/* An info icon */
 .infoIcon:before {
 	content: '\f05a';
 }
 
+/* A phone icon */
 .phoneIcon:before {
 	content: '\f095';
 }
 
+/* An edit icon */
 .editIcon:before {
 	content: '\f040';
 }
 
+/* A date icon */
 .dateIcon:before {
 	content: '\f133';
 }
 
+/* A link icon */
 .linkIcon:before {
 	content: '\f127';
 }
 
+/* A location icon */
 .locationIcon:before {
 	content: '\f041';
 }
 
+/* A secure icon */
 .secureIcon:before {
 	content: '\f023';
 }
 
+/* A mail icon */
 .mailIcon:before {
 	content: '\f0e0';
 }
 
+/* An eye icon */
 .eyeIcon:before {
 	content: '\f06e';
 }
 
+/* An eye icon with a slash through it (indicating not visible) */
 .eyeSlashIcon:before {
 	content: '\f070';
 }
diff --git a/src/theme/default/label.m.css b/src/theme/default/label.m.css
index 781c85adcf..65e78a660c 100644
--- a/src/theme/default/label.m.css
+++ b/src/theme/default/label.m.css
@@ -1,22 +1,31 @@
 @import './variables.css';
 
+/* The root class of the Label */
 .root {
 }
+/* Added to a read-only Label */
 .readonly {
 }
+/* Added to indicate an invalid state */
 .invalid {
 }
+/* Added to indicate a valid state */
 .valid {
 }
+/* Added to indicate the associated input is required */
 .required {
 }
+/* Added to a disabled Label */
 .disabled {
 }
+/* Added to a focused Label */
 .focused {
 }
+/* Added to a secondary Label */
 .secondary {
 }
 
+/* Visual indicator for a required field */
 .required::after {
 	content: '*';
 	color: var(--error-color);
diff --git a/src/theme/default/listbox.m.css b/src/theme/default/listbox.m.css
index af4118292a..b076c0b0fa 100644
--- a/src/theme/default/listbox.m.css
+++ b/src/theme/default/listbox.m.css
@@ -1,5 +1,6 @@
 @import './variables.css';
 
+/* The root class of the Listbox */
 .root {
 	border: 1px solid var(--component-color);
 	background: var(--component-background);
@@ -8,22 +9,27 @@
 	position: relative;
 }
 
+/* Added to a focused Listbox */
 .focused {
 }
 
+/* Contains the ListboxOption */
 .option {
 	cursor: pointer;
 }
 
+/* Added to a focused ListboxOption */
 .focused .activeOption,
 .root:focus .activeOption {
 	box-shadow: inset 0 0 1px 0 var(--component-background);
 	outline: 4px auto var(--selected-background);
 }
+/* Added to a disabled ListboxOption */
 .disabledOption {
 	background-color: var(--disabled-color);
 	cursor: default;
 }
+/* Added to a selected ListboxOption */
 .selectedOption {
 	background-color: var(--selected-background);
 	color: var(--selected-color);
diff --git a/src/theme/default/progress.m.css b/src/theme/default/progress.m.css
index ccdacc81be..807a1b4455 100644
--- a/src/theme/default/progress.m.css
+++ b/src/theme/default/progress.m.css
@@ -1,16 +1,20 @@
 @import './variables.css';
 
+/* The root class of Progress */
 .root {
 }
 
+/* Added to the output text */
 .output {
 }
 
+/* Added to the progress bar */
 .bar {
 	border: 1px solid black;
 	height: 24px;
 }
 
+/* Added to the progress portion of the progress bar */
 .progress {
 	height: 100%;
 	background: var(--selected-background);
diff --git a/src/theme/default/radio.m.css b/src/theme/default/radio.m.css
index efa469cd95..c6baa7bde0 100644
--- a/src/theme/default/radio.m.css
+++ b/src/theme/default/radio.m.css
@@ -1,29 +1,40 @@
 @import './variables.css';
 
+/* The root class of the Radio */
 .root {
 	display: block;
 	position: relative;
 }
 
+/* Added to the input */
 .input {
 }
+/* Contains the input element */
 .inputWrapper {
 }
+/* Added to a checked radio */
 .checked {
 }
+/* Added to a focused radio */
 .focused {
 }
+/* Added to a disabled radio */
 .disabled {
 }
+/* Added to a read-only radio */
 .readonly {
 }
+/* Added to a required radio */
 .required {
 }
+/* Added after the input */
 .radioBackground {
 	display: none;
 }
+/* Added after the input */
 .radioOuter {
 }
+/* Added after the input but before the label */
 .radioInner {
 }
 
diff --git a/src/theme/default/range-slider.m.css b/src/theme/default/range-slider.m.css
index 472a26d968..c4f892527e 100644
--- a/src/theme/default/range-slider.m.css
+++ b/src/theme/default/range-slider.m.css
@@ -4,24 +4,30 @@
 	--slider-height: 13px;
 }
 
+/* The root class of the RangeSlider */
 .root {
 	padding-bottom: calc(var(--slider-height) / 2);
 }
 
+/* Added when there is output to show */
 .hasOutput {
 	padding-bottom: calc(calc(var(--slider-height) / 2) + var(--slider-height));
 }
 
+/* Contains the range slider */
 .inputWrapper {
 	height: var(--slider-height);
 	background-color: var(--component-background);
 	border: 1px solid var(--selected-background);
 }
 
+/* Added when the controls are focused */
 .focused {
 }
 
+/* Added to a disabled control */
 .disabled .inputWrapper,
+/* Added to a read-only control */
 .readonly .inputWrapper {
 	background-color: var(--disabled-color);
 }
@@ -42,15 +48,18 @@
 	background-color: var(--success-color);
 }
 
+/* Added to a focused input */
 .focused .input {
 	outline: none;
 }
 
+/* Added to the thumb when focused */
 .focused .thumb.focused {
 	box-shadow: 0 0 7px 3px var(--selected-background);
 	border-color: white;
 }
 
+/* Added to the thumb */
 .thumb {
 	background-color: #ffffff;
 	border: 1px solid var(--selected-background);
@@ -59,38 +68,46 @@
 	transform: translate(-50%, -25%);
 }
 
+/* Added to the track between the two thumbs */
 .filled {
 	background-color: var(--selected-background);
 }
 
+/* Styles the thumb on IE */
 .input::-ms-thumb {
 	height: 2em;
 	width: 2em;
 }
 
+/* Styles the thumb on FF */
 .input::-moz-range-thumb {
 	height: 2em;
 	width: 2em;
 }
 
+/* Styles the thumb on Safari */
 .input::-webkit-slider-thumb {
 	height: 2em;
 	width: 2em;
 }
 
+/* Added if the output is a tooltip */
 .outputTooltip {
 	left: 2.5em;
 	position: absolute;
 	top: 0;
 }
 
+/* Contains the output */
 .output {
 	display: block;
 	margin-top: 16px;
 }
 
+/* Added to the left thumb */
 .leftThumb {
 }
 
+/* Added to the right thumb */
 .rightThumb {
 }
diff --git a/src/theme/default/select.m.css b/src/theme/default/select.m.css
index 68a4df2a7b..2b57b7417b 100644
--- a/src/theme/default/select.m.css
+++ b/src/theme/default/select.m.css
@@ -1,8 +1,10 @@
 @import './variables.css';
 
+/* The root style for Select */
 .root {
 }
 
+/* Contains the select element */
 .inputWrapper {
 	display: inline-block;
 	position: relative;
@@ -24,11 +26,14 @@
 	color: var(--selected-background);
 }
 
+/* Added to a placeholder select option (custom select only) */
 .placeholder {
 }
+/* Added to a required Select */
 .required {
 }
 
+/* Contains the dropdown of a custom Select */
 .dropdown {
 	background: var(--component-background);
 	border: 1px solid var(--component-color);
@@ -39,9 +44,11 @@
 	width: 100%;
 }
 
+/* Added to an open custom Select */
 .open {
 }
 
+/* Contains the drop-down of an open custom Select */
 .open .dropdown {
 	display: block;
 	z-index: var(--zindex-dropdown);
@@ -65,10 +72,12 @@
 	width: 200px;
 }
 
+/* Focus for a native Select */
 .input:focus {
 	border-color: var(--selected-background);
 }
 
+/* Added to the expand icon */
 .arrow {
 	bottom: 0;
 	pointer-events: none;
@@ -82,25 +91,32 @@
 	color: var(--selected-background);
 }
 
-/* State classes */
+/* Added to a focused Select */
 .focused {
 }
+/* Added to a disabled native Select */
 .disabled .input,
+/* Added to a read-only native Select */
 .readonly .input {
 	background-color: var(--disabled-color);
 }
 
+/* Added to an invalid native Select */
 .invalid .input {
 	border-color: var(--error-color);
 }
+/* Styles the arrow when the Select is invalid */
 .invalid .arrow {
 	background-color: var(--error-color);
 }
+/* Added to a required Select */
 .required {
 }
+/* Added to a valid native Select */
 .valid .input {
 	border-color: var(--success-color);
 }
+/* Style the arrow when the Select is valid */
 .valid .arrow {
 	background-color: var(--success-color);
 }
diff --git a/src/theme/default/slide-pane.m.css b/src/theme/default/slide-pane.m.css
index a3950bb837..3d32372531 100644
--- a/src/theme/default/slide-pane.m.css
+++ b/src/theme/default/slide-pane.m.css
@@ -1,33 +1,42 @@
 @import './variables.css';
 
+/* The root style of SlidePane */
 .root {
 }
 
+/* Animation for sliding the SlidePane in */
 .slideIn,
+/* Animation for sliding the SlidePane out */
 .slideOut {
 	transition: transform ease-in-out var(--short-animation-duration);
 }
 
+/* Added when a visible underlay is used */
 .underlayVisible {
 	background: var(--underlay-background);
 	z-index: var(--zindex-dialog);
 }
 
+/* Contains the children of the SlidePane */
 .content {
 }
 
+/* Added to an open slide pane */
 .open {
 }
 
+/* Contains the pane */
 .pane {
 	background-color: var(--component-background);
 	z-index: calc(var(--zindex-dialog) + 1);
 }
 
+/* Added to the title */
 .title {
 	position: relative;
 }
 
+/* Added to the close button */
 .close {
 	position: absolute;
 	top: 50%;
@@ -39,18 +48,23 @@
 	background: none;
 }
 
+/* Added to the close icon */
 .closeIcon {
 	font-size: 14px;
 }
 
+/* Added to a left-aligned pane */
 .left {
 }
 
+/* Added to a right-aligned pane */
 .right {
 }
 
+/* Added to a top-aligned pane */
 .top {
 }
 
+/* Added to a bottom-aligned pane */
 .bottom {
 }
diff --git a/src/theme/default/slider.m.css b/src/theme/default/slider.m.css
index a6b8d71275..b9d14320a5 100644
--- a/src/theme/default/slider.m.css
+++ b/src/theme/default/slider.m.css
@@ -1,8 +1,10 @@
 @import './variables.css';
 
+/* The root class of the Slider */
 .root {
 }
 
+/* Added to the output when rendered as a tooltip */
 .outputTooltip {
 	left: 2.5em;
 	position: absolute;
@@ -38,50 +40,61 @@
 	background-color: var(--success-color);
 }
 
+/* Added to a focused Slider */
 .focused {
 }
 
+/* Contains the input */
 .inputWrapper {
 }
 
+/* Styles the input when the Slider is focused */
 .focused .input {
 	outline: none;
 }
 
+/* Styles the thumb when the Slider if focused */
 .focused .thumb {
 	box-shadow: 0 0 7px 3px var(--selected-background);
 	border-color: white;
 }
 
+/* Added to the track of the slider */
 .track {
 	background-color: var(--component-background);
 	border: 1px solid var(--component-color);
 	height: 0.75em;
 }
 
+/* Indicates the filled portion of the track */
 .fill {
 	background-color: var(--selected-background);
 }
 
+/* Added to the input */
 .input {
 	height: 0.75em;
 }
 
+/* Styles the thumb in IE */
 .input::-ms-thumb {
 	height: 2em;
 	width: 2em;
 }
 
+/* Styles the thumb in FF */
 .input::-moz-range-thumb {
 	height: 2em;
 	width: 2em;
 }
 
+/* Styles the thumb in Safari */
 .input::-webkit-slider-thumb {
 	height: 2em;
 	width: 2em;
 }
 
+/* Added to the thumb */
 .thumb {
 	background-color: var(--component-background);
 	border: 1px solid var(--component-color);
@@ -92,5 +105,6 @@
 	width: 2em;
 }
 
+/* Added to the output text */
 .output {
 }
diff --git a/src/theme/default/snackbar.m.css b/src/theme/default/snackbar.m.css
index fe565ac4a4..85c4a10fc5 100644
--- a/src/theme/default/snackbar.m.css
+++ b/src/theme/default/snackbar.m.css
@@ -1,43 +1,53 @@
 @import './variables.css';
 
+/* The root class of the Snackbar */
 .root {
 	display: none;
 }
 
+/* Contains the contents of the snackbar */
 .content {
 	display: flex;
 	opacity: 0;
 }
 
+/* Contains the message of the snackbar */
 .label {
 	flex-grow: 1;
 	margin: 0;
 }
 
+/* Contains the actions of the snackbar */
 .actions {
 	display: flex;
 	flex-shrink: 0;
 }
 
+/* Added to an open snackbar */
 .open {
 	display: flex;
 }
 
+/* Styles the content of an open snackbar */
 .open .content {
 	opacity: 1;
 }
 
+/* Added when a successful message is displayed */
 .success .label {
 	color: var(--success-color);
 }
 
+/* Added when an error message is displayed */
 .error .label {
 	color: var(--error-color);
 }
 
+/* Added to justify the contents of the snackbar */
 .leading {
 	justify-content: flex-start;
 }
+/* Added to display snackbar messages stacked */
 .stacked .content {
 	flex-direction: column;
 	align-items: flex-start;
diff --git a/src/theme/default/split-pane.m.css b/src/theme/default/split-pane.m.css
index 541b306af3..453a8c407e 100644
--- a/src/theme/default/split-pane.m.css
+++ b/src/theme/default/split-pane.m.css
@@ -1,23 +1,30 @@
 @import './variables.css';
 
+/* The root class of SplitPane */
 .root {
 }
 
+/* Added to a pane oriented as a column */
 .column {
 }
 
+/* Added to the pane divider */
 .divider {
 	background-color: var(--component-color);
 }
 
+/* Added to the left-side of the divider */
 .leading {
 }
 
+/* Added to a pane oriented as a row */
 .row {
 }
 
+/* Added to the right-side of the divider */
 .trailing {
 }
 
+/* Added to a collapsed pane */
 .collapsed {
 }
diff --git a/src/theme/default/tab-controller.m.css b/src/theme/default/tab-controller.m.css
index 435402d0b4..194ada680d 100644
--- a/src/theme/default/tab-controller.m.css
+++ b/src/theme/default/tab-controller.m.css
@@ -1,11 +1,13 @@
 @import './variables.css';
 
+/* root class of a Tab */
 .tab {
 	position: relative;
 	border: 1px solid black;
 	background: #fff;
 }
 
+/* Added to the close control on a TabButton */
 .close {
 	position: absolute;
 	top: 50%;
@@ -18,31 +20,39 @@
 	padding: 1px 3px;
 }
 
+/* Added to a hidden Tab */
 .hidden {
 	display: none;
 }
 
+/* Styles the content of the close button */
 .close:after {
 	content: '✕';
 	display: block;
 	font-size: 14px;
 }
 
+/* Added to a closable TabButton */
 .closeable {
 }
 
+/* Added to a close indicator on a TabButton */
 .indicator {
 	display: none;
 }
 
+/* Added to an active TabButton */
 .indicatorActive {
 }
+/* Added to the contents of a TabButton indicator */
 .indicatorContent {
 }
 
+/* Contains the contents of a TabButton */
 .tabButtonContent {
 }
 
+/* Added to an active TabButton */
 .activeTabButton {
 	background: #fff;
 	border-color: black;
@@ -50,10 +60,12 @@
 	z-index: calc(var(--zindex-base) + 1);
 }
 
+/* The root class of the TabController */
 .root {
 	box-sizing: border-box;
 }
 
+/* The root class of the TabButton */
 .tabButton {
 	border: 1px solid transparent;
 	border-top: 2px solid transparent;
@@ -69,26 +81,31 @@
 	top: 1px;
 }
 
+/* Focus for a TabButton when not disabled */
 .tabButton:focus:not(.disabledTabButton) {
 	font-weight: bold;
 }
 
+/* Added to a disabled TabButton */
 .disabledTabButton {
 	font-style: italic;
 	cursor: default;
 	color: var(--disabled-color);
 }
 
+/* Added to align the tabs to the left */
 .alignLeft .tabs {
 	display: inline-block;
 	vertical-align: top;
 }
 
+/* Contains left-aligned TabButtons */
 .alignLeft .tabButtons {
 	display: inline-block;
 	vertical-align: top;
 }
 
+/* Added to a left-aligned TabButton */
 .alignLeft .tabButton {
 	border-top: 1px solid transparent;
 	border-left: 2px solid transparent;
@@ -99,6 +116,7 @@
 	left: 1px;
 }
 
+/* Added to an active left-aligned TabButton */
 .alignLeft .activeTabButton {
 	border-top-color: var(--selected-background);
 	border-left-color: var(--selected-background);
@@ -106,26 +124,31 @@
 	border-right: 1px solid #fff;
 }
 
+/* Added to a bottom-aligned TabButton */
 .alignBottom .tabButton {
 	border-top: none;
 	border-bottom: 2px solid transparent;
 	top: -1px;
 }
 
+/* Added to an active bottom-aligned TabButton */
 .alignBottom .activeTabButton {
 	border-bottom-color: var(--selected-background);
 }
 
+/* Contains right-aligned Tabs */
 .alignRight .tabs {
 	display: inline-block;
 	vertical-align: top;
 }
 
+/* Contains right-aligned TabButtons */
 .alignRight .tabButtons {
 	display: inline-block;
 	vertical-align: top;
 }
 
+/* Added to a right-aligned TabButton */
 .alignRight .tabButton {
 	border-top: 1px solid transparent;
 	border-right: 2px solid transparent;
@@ -136,6 +159,7 @@
 	left: -1px;
 }
 
+/* Added to an active right-aligned TabButton */
 .alignRight .activeTabButton {
 	border-top-color: var(--selected-background);
 	border-right-color: var(--selected-background);
diff --git a/src/theme/default/text-area.m.css b/src/theme/default/text-area.m.css
index 834602bb15..6819b6d747 100644
--- a/src/theme/default/text-area.m.css
+++ b/src/theme/default/text-area.m.css
@@ -1,28 +1,37 @@
 @import './variables.css';
 
+/* The root node of TextArea */
 .root {
 }
 
+/* Added to the textarea element */
 .input {
 	max-width: 100%;
 }
 
+/* Contains the textarea element */
 .inputWrapper {
 }
 
+/* Added to a disabled control */
 .disabled {
 }
+/* Added to a focused control */
 .focused {
 }
+/* Added to a read-only control */
 .readonly {
 }
+/* Added to a required control */
 .required {
 }
 
+/* Added when the contents of a textarea are invalid */
 .invalid .input {
 	border-color: var(--error-color);
 }
 
+/* Added when the contents of a textarea are valid */
 .valid .input {
 	border-color: var(--success-color);
 }
diff --git a/src/theme/default/text-input.m.css b/src/theme/default/text-input.m.css
index 69892ddea3..ce36322ebd 100644
--- a/src/theme/default/text-input.m.css
+++ b/src/theme/default/text-input.m.css
@@ -1,38 +1,53 @@
 @import './variables.css';
 
+/* Added to the input */
 .input {
 }
+/* The root class of TextInput */
 .root {
 }
+/* Contains the input element */
 .inputWrapper {
 }
+/* Added to a disabled TextInput */
 .disabled {
 }
+/* Added to a focused input */
 .focused {
 }
+/* Added to a read-only input */
 .readonly {
 }
+/* Added to a required input */
 .required {
 }
+/* Added when the contents of the TextInput are invalid */
 .invalid {
 }
+/* Contains leading content */
 .leading {
 }
+/* Contains trailing content */
 .trailing {
 }
+/* Added at the root when there is leading content */
 .hasLeading {
 }
+/* Added at the root when there is trailing content */
 .hasTrailing {
 }
 
+/* Styles the helper text when the input is invalid */
 .invalid .helperText {
 	color: var(--error-color);
 }
 
+/* Styles the input when the input is invalid */
 .invalid .input {
 	border-color: var(--error-color);
 }
 
+/* Styles the input when the input is valid */
 .valid .input {
 	border-color: var(--success-color);
 }
diff --git a/src/theme/default/time-picker.m.css b/src/theme/default/time-picker.m.css
index 70c8a987fc..4db354f286 100644
--- a/src/theme/default/time-picker.m.css
+++ b/src/theme/default/time-picker.m.css
@@ -1,25 +1,28 @@
 @import './variables.css';
 
+/* The root class of the TimePicker */
 .root {
 	box-sizing: border-box;
-}
-
-.root {
 	display: inline-block;
 }
 
+/* Styles the input when focused */
 .input:focus {
 	outline: none;
 }
 
-/* State classes */
+/* Added when the TimePicker is disabled */
 .disabled {
 }
+/* Added when focused */
 .focused {
 }
+/* Added when the value is invalid */
 .invalid {
 }
+/* Added to a read-only TimePicker */
 .readonly {
 }
+/* Added when the valid is required */
 .required {
 }
diff --git a/src/theme/default/title-pane.m.css b/src/theme/default/title-pane.m.css
index 16c387e9ba..6b59cf5267 100644
--- a/src/theme/default/title-pane.m.css
+++ b/src/theme/default/title-pane.m.css
@@ -1,27 +1,35 @@
 @import './variables.css';
 
+/* Contains the title */
 .title {
 	background-color: var(--component-background);
 }
 
+/* Added to a closable pane */
 .closeable {
 }
 
+/* Contains the arrow icon */
 .arrow {
 }
 
+/* The root class of the TitlePane */
 .root {
 }
 
+/* Added when the pane is open */
 .open {
 }
 
+/* Contains the content */
 .content {
 }
 
+/* Added to the title button */
 .titleButton {
 }
 
+/* Style the content animation */
 .contentTransition {
 	transition: margin-top ease-in-out var(--short-animation-duration);
 }
diff --git a/src/theme/default/toolbar.m.css b/src/theme/default/toolbar.m.css
index fb5407ab32..7f06f0313b 100644
--- a/src/theme/default/toolbar.m.css
+++ b/src/theme/default/toolbar.m.css
@@ -1,15 +1,20 @@
+/* Contains the actions of the Toolbar */
 .actions {
 	display: flex;
 	flex-direction: row;
 }
 
+/* Added to a collapsed Toolbar */
 .collapsed .actions {
 	flex-direction: column;
 }
 
+/* Added to the menu button */
 .menuButton {
 }
+/* The root class of the Toolbar */
 .root {
 }
+/* Added to the heading */
 .title {
 }
diff --git a/src/theme/default/tooltip.m.css b/src/theme/default/tooltip.m.css
index 6e1b42dfc4..579d2a2074 100644
--- a/src/theme/default/tooltip.m.css
+++ b/src/theme/default/tooltip.m.css
@@ -1,17 +1,23 @@
+/* The root class of the Tooltip */
 .root {
 }
 
+/* Contains the content of the Tooltip */
 .content {
 }
 
+/* Added to a top-aligned tip */
 .top {
 }
 
+/* Added to a right-aligned tip */
 .right {
 }
 
+/* Added to a left-aligned tip */
 .left {
 }
 
+/* Added to a bottom-aligned tip */
 .bottom {
 }