Added descriptions to all default theme styles (#949)

* A bunch of theme descriptions

* The rest of the descriptions

src/theme/default/accordion-pane.m.css

@@ -1,2 +1,3 @@
+/* The root class of the accordion pane */
 .root {
 }

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);

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;

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 {
 }

src/theme/default/card.m.css

@@ -1,52 +1,64 @@
+/* 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;
 	flex-direction: column;
 	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 {
 }

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 {
 }

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 {
 }

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 {
 }

src/theme/default/combobox.m.css

@@ -1,16 +1,19 @@
 @import './variables.css';
 
+/* The root class for the Combobox */
 .root {
 	position: relative;
 	display: inline-block;
 	box-sizing: border-box;
 	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 {
 }