[Custom Properties] Allow for more custom property-based theming

[una]

Bug report

Steps to reproduce

1. Go to https://material-theme-builder.glitch.me
2. Try to theme with custom properties

Actual behavior

The following components do not get accurate color styles:

• Data tables (selected backgrounds)
• Active list items
• Selected List items
• Menu bar header
• Active Input labels

None of the components are getting the correct shape styling or typography styling via custom properties.

Additional context

See also this bandaids file I made when building a custom-property based Material demo: https://glitch.com/edit/#!/material-theme-generator?path=public/bandaids.css:1:18

Possible solution

The following components fo not get on-color styles. A potential fix:

.mdc-card .mdc-typography,
.mdc-menu .mdc-list,
.mdc-dialog .mdc-dialog__title,
.mdc-dialog .mdc-dialog__content,
.mdc-chip__text,
.mdc-chip--selected .mdc-chip__checkmark-path {
  color: var(--mdc-theme-on-surface);
}

.mdc-top-app-bar {
  color: var(--mdc-theme-on-primary);
}

The following components do not get shape styles. A potential fix:

.mdc-button,
.mdc-text-field {
  border-radius: var(--mdc-shape-small);
}  

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,
.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
  border-radius: 0 var(--mdc-shape-small) var(--mdc-shape-small) 0;
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading {
  border-radius: var(--mdc-shape-small) 0 0 var(--mdc-shape-small);
}

.mdc-select, .mdc-select__native-control {
  border-radius: var(--mdc-shape-small) var(--mdc-shape-small) 0 0;
}

.mdc-card,
.mdc-dialog .mdc-dialog__surface {
  border-radius: var(--mdc-shape-medium);
}

.mdc-drawer {
  border-radius: 0 var(--mdc-shape-large) var(--mdc-shape-large) 0;
}

.mdc-menu {
  border-radius: var(--mdc-shape-medium);
}

The following components do not get typography styles. A potential fix:

.mdc-typography--headline1,
.mdc-typography--headline2,
.mdc-typography--headline3,
.mdc-typography--headline4,
.mdc-typography--headline5,
.mdc-typography--headline6,
.mdc-typography--subtitle1,
.mdc-typography--subtitle2,
.mdc-typography--body1,
.mdc-typography--body2,
.mdc-typography--button,
.mdc-typography--caption,
.mdc-typography--overline,
.mdc-top-app-bar__title,
.mdc-button,
.mdc-fab,
.mdc-typography,
.mdc-drawer__title,
.mdc-drawer__subtitle,
.mdc-list-item__text,
.mdc-text-field__input,
.mdc-floating-label,
.mdc-tab,
.mdc-snackbar__label,
.mdc-dialog__title,
.mdc-dialog__content,
.mdc-chip__text,
.mdc-list-item__primary-text,
.mdc-list-item__secondary-text,
.mdc-data-table,
.mdc-data-table__header-cell,
.mdc-data-table__cell  {
  font-family: var(--mdc-typography--font-family);
}

Base family above, and individual variables per each.

[una]

See also #5242

[asyncliz]

Closing this as fixed in Material 3 with tokens!