@materializecss/materialize 2.0.4 → 2.1.0

package/sass/components/_variables.scss

@@ -1,268 +1,23 @@
-// ==========================================================================
-// Materialize variables
-// ==========================================================================
-//
-// Table of Contents:
-//
-//  1. Colors
-//  2. Badges
-//  3. Buttons
-//  4. Cards
-//  5. Carousel
-//  6. Collapsible
-//  7. Date + Time Picker
-//  8. Dropdown
-//  9. Forms
-//  10. Chips
-//  11. Global
-//  12. Grid
-//  13. Navigation Bar
-//  14. Side Navigation
-//  15. Photo Slider
-//  16. Spinners | Loaders
-//  17. Tabs
-//  18. Tables
-//  19. Toasts
-//  20. Tooltips
-//  21. Typography
-//  22. Footer
-//  23. Flow Text
-//  24. Collections
-//  25. Progress Bar
-
-
 // TypeScale
 $md_sys_typescale_body-large_size: 16px;
 
-
-// 1. Colors
-// ==========================================================================
-
 @use "sass:math";
 
-$primary-color: var(--primary-color) !default;
-$primary-color-dark: var(--primary-color-dark) !default;
-$primary-color-when-hovered-solid: var(--primary-color-raised-hover-solid) !default;
-$primary-color-when-focused-solid: var(--primary-color-raised-focus-solid) !default;
-$primary-color-font-emphasize-color: $primary-color !default;
-$primary-color-font-medium-color: var(--primary-color-font-medium-color) !default;
-$primary-color-font-disabled-color: var(--primary-color-font-disabled-color) !default;
-$primary-color-hover-opaque: var(--primary-color-hover-opaque) !default;
-$primary-color-focus-opaque: var(--primary-color-focus-opaque) !default;
-
-$font-color-main: var(--font-color-main) !default;
-$font-color-medium: var(--font-color-medium) !default;
-$font-color-disabled: var(--font-color-disabled) !default;
-
-$font-on-primary-color-main: var(--font-on-primary-color-main) !default;
-$font-on-primary-color-medium: var(--font-on-primary-color-medium) !default;
-$font-on-primary-color-disabled: var(--font-on-primary-color-disabled) !default;
-$font-on-secondary-color-main: var(--font-on-secondary-color-main) !default;
-
-$secondary-color: var(--secondary-color) !default;
-$secondary-color-when-hovered-solid: var(--secondary-color-hover-solid) !default;
-$secondary-color-when-focused-solid: var(--secondary-color-focus-solid) !default;
-$secondary-container-color: var(--secondary-container-color) !default;
-$font-on-secondary-container-color: var(--font-on-secondary-container-color) !default;
-
+// Colors
 $success-color: color("green", "base") !default;
-$error-color: var(--error-color) !default;
 $link-color: color("light-blue", "darken-1") !default;
 
-$surface-color: var(--surface-color) !default;
-$surface-hover-color-opaque: var(--hover-color) !default;
-$surface-focus-color-opaque: var(--focus-color) !default;
-
-$divider-color: var(--separator-color);
-
-// 2. Badges
-// ==========================================================================
-
-$badge-bg-color: $primary-color !default;
-$badge-height: 22px !default;
-$badge-color: var(--font-color-medium) !default;
-$badge-color-active: var(--font-on-primary-color-main) !default;
-$badge-color-new: $font-on-primary-color-main !default;
-
-// 3. Buttons
-// ==========================================================================
-
-// Raised buttons
-$button-raised-background: $primary-color !default;
-$button-raised-background-hover: $primary-color-when-hovered-solid !default;
-$button-raised-background-focus: $primary-color-when-focused-solid !default;
-$button-raised-color: $font-on-primary-color-main !default;
-
-// Shared styles
-$button-border: none !default;
-$button-background-focus: $button-raised-background-focus !default;
-$button-font-size: 14px !default;
-$button-icon-font-size: 18px !default;
-$button-height: 40px !default;
-$button-padding: 0 16px !default;
-$button-radius: 4px !default;
-
-// Disabled styles
-$button-disabled-background: var(--background-color-disabled) !default;
-$button-disabled-color: var(--font-color-disabled) !default;
-
-// Large buttons
-$button-large-font-size: 18px !default;
-$button-large-icon-font-size: 1.6rem !default;
-$button-large-height: $button-height * 1.5 !default;
-$button-floating-large-size: 56px !default;
-
-// Small buttons
-$button-small-font-size: 13px !default;
-$button-small-icon-font-size: 1.2rem !default;
-$button-small-height: $button-height * .75 !default;
-$button-small-padding: 0 8px !default;
-$button-floating-small-size: $button-height * .75 !default;
-
-// Flat buttons
-$button-flat-color: var(--font-color-medium) !default;
-$button-flat-hover-background-color: var(--hover-color) !default;
-$button-flat-focus-background-color: var(--focus-color) !default;
-$button-flat-disabled-color: var(--font-color-disabled) !default;
-
 // Floating buttons
-$button-floating-background: $secondary-color !default;
-$button-floating-background-hover: $secondary-color-when-hovered-solid !default;
-$button-floating-background-focus: $secondary-color-when-focused-solid !default;
-$button-floating-color: $font-on-secondary-color-main !default;
+$button-floating-background: var(--md-sys-color-secondary) !default;
+$button-floating-background-hover: var(--md-ref-palette-secondary70) !default;
+$button-floating-background-focus: var(--md-ref-palette-secondary80) !default;
+$button-floating-color: var(--md-sys-color-on-secondary) !default;
 $button-floating-size: 40px !default;
 $button-floating-radius: 16px !default;
 
-
-// 4. Cards
-// ==========================================================================
-
-$card-padding: 24px !default;
-$card-bg-color: var(--background-color-card) !default;
-$card-link-color: $primary-color !default;
-
-
-// 5. Carousel
-// ==========================================================================
-
-$carousel-height: 400px !default;
-$carousel-item-height: $carousel-height * 0.5 !default;
-$carousel-item-width: $carousel-item-height !default;
-
-$carousel-indicator-color: var(--carousel-indicator-color) !default;
-$carousel-indicator-color-active: var(--carousel-indicator-active-color) !default;
-
-// 6. Collapsible
-// ==========================================================================
-
-$collapsible-height: 3rem !default;
-$collapsible-line-height: $collapsible-height !default;
-$collapsible-border-color: $divider-color !default;
-$collapsible-bg-color: $surface-color !default;
-
-
-// 7. Date + Time Picker
-// ==========================================================================
-
-$datepicker-display-font-size: 2.8rem;
-$datepicker-calendar-header-color: $font-color-medium;
-$datepicker-year: $font-on-primary-color-main !default;
-$datepicker-day-focus: $primary-color-focus-opaque !default;
-$datepicker-day-hover: $primary-color-hover-opaque !default;
-$datepicker-day-font-color: $font-color-main !default;
-$datepicker-day-font-color-disabled: $font-color-disabled !default;
-
-$timepicker-clock-bg: $surface-color !default;
-$timepicker-clock-color: var(--font-color-main) !default;
-$timepicker-clock-plate-bg: var(--background-color-level-4dp) !default;
-
-
-// 8. Dropdown
-// ==========================================================================
-
-$dropdown-bg-color: $surface-color !default;
-$dropdown-hover-bg-color: $surface-hover-color-opaque !default;
-$dropdown-focus-bg-color: $surface-focus-color-opaque !default;
-$dropdown-color: $primary-color !default;
+// Dropdown
 $dropdown-item-height: 50px !default;
 
-
-// 9. Forms
-// ==========================================================================
-
-// Text Inputs + Textarea
-$input-height: 3rem !default;
-$input-border-color: var(--font-color-medium) !default;
-$input-color: var(--font-color-main) !default;
-$input-border: 2px solid $input-border-color !default;
-$input-error-color: $error-color !default;
-$input-success-color: $success-color !default;
-$input-focus-color: $primary-color !default;
-$input-font-size: 16px !default;
-$input-margin-bottom: 8px;
-$input-margin: 0 0 $input-margin-bottom 0 !default;
-$input-padding: 0 !default;
-$label-font-size: .8rem !default;
-$input-disabled-color: var(--font-color-disabled) !default;
-$input-disabled-solid-color: var(--font-color-disabled) !default;
-$input-disabled-border: 2px solid $input-disabled-color !default;
-$input-invalid-border: 2px solid $input-error-color !default;
-$input-icon-size: 2rem;
-$placeholder-text-color: var(--font-color-medium) !default;
-
-$textfield_disabled_containercolor: rgba(var(--md_sys_color_on-surface), 0.04);
-$textfield_disabled_outlinecolor: rgba(var(--md_sys_color_on-surface), 0.12);
-$textfield_disabled_color: rgba(var(--md_sys_color_on-surface), 0.38);
-
-// Radio Buttons
-$radio-fill-color: $primary-color !default;
-$radio-focus-color: $primary-color-focus-opaque !default;
-$radio-empty-color: var(--font-color-medium) !default;
-$radio-border: 2px solid $radio-fill-color !default;
-
-// Range
-$range-height: 14px !default;
-$range-width: 14px !default;
-$track-height: 3px !default;
-$range-track-color: var(--slider-track-color) !default;
-
-// Select
-$select-border: 1px solid var(--separator-color) !default;
-$select-background: $surface-color !default;
-$select-focus: 1px solid $primary-color-when-focused-solid !default;
-$select-option-hover: $surface-hover-color-opaque !default;
-$select-option-focus: $surface-focus-color-opaque !default;
-$select-option-selected: $surface-focus-color-opaque !default;
-$select-padding: 5px !default;
-$select-radius: 2px !default;
-$select-disabled-color: var(--font-color-disabled) !default;
-$select-input-color: var(--font-color-main) !default;
-
-// Switches
-$switch-thumb-checked-color: $primary-color !default;
-$switch-thumb-unchecked-color: var(--switch-thumb-off-color);
-$switch-reaction-checked-focus-color: $primary-color-focus-opaque !default;
-$switch-reaction-unchecked-focus-color: $surface-focus-color-opaque !default;
-$switch-reaction-checked-hover-color: $primary-color-hover-opaque !default;
-$switch-reaction-unchecked-hover-color: $surface-hover-color-opaque !default;
-$switch-track-checked-bg: rgba(var(--primary-color-numeric), 0.32) !default;
-$switch-track-unchecked-bg: var(--slider-track-color) !default;
-$switch-radius: 15px !default;
-
-// 10. Chips
-// ==========================================================================
-
-$chip-bg-color: var(--background-color-level-4dp) !default;
-$chip-border-color: $input-border-color !default;
-$chip-font-color: $font-color-medium !default;
-$chip-selected-color: $primary-color !default;
-$chip-selected-font-color: $font-on-primary-color-main !default;
-$chip-margin: 5px !default;
-
-
-// 11. Global
-// ==========================================================================
-
 // Media Query Ranges
 $small-screen-up: 601px !default;
 $medium-screen-up: 993px !default;
@@ -278,96 +33,16 @@ $small-and-down: "only screen and (max-width : #{$small-screen})" !default;
 $medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
 $medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
 
-
-// 12. Grid
-// ==========================================================================
-
+// Grid
 $num-cols: 12 !default;
 $gutter-width: 1.5rem !default;
 $element-top-margin: math.div($gutter-width, 3) !default;
-$element-bottom-margin: math.div($gutter-width*2, 3) !default;
-
-
-// 13. Navigation Bar
-// ==========================================================================
-
-$navbar-height: 64px !default;
-$navbar-line-height: $navbar-height !default;
-$navbar-height-mobile: 56px !default;
-$navbar-line-height-mobile: $navbar-height-mobile !default;
-$navbar-font-size: 1rem !default;
-$navbar-font-color: $font-on-primary-color-main !default;
-$navbar-bg-color-focus: $primary-color-when-focused-solid !default;
-$navbar-bg-color-hover: $primary-color-when-hovered-solid !default;
-$navbar-brand-font-size: 2.1rem !default;
-
-// 14. Side Navigation
-// ==========================================================================
-
-$sidenav-width: 300px !default;
-$sidenav-font-size: 14px !default;
-$sidenav-font-color: var(--font-color-main) !default;
-$sidenav-bg-color: var(--background-color-level-16dp-solid) !default;
-$sidenav-icon-color: var(--font-color-medium) !default;
-$sidenav-subheader-color: var(--font-color-medium) !default;
-$sidenav-padding: 16px !default;
-$sidenav-item-height: 48px !default;
-$sidenav-line-height: $sidenav-item-height !default;
-
-
-// 15. Photo Slider
-// ==========================================================================
-
-$slider-bg-color: $surface-color !default;
-$slider-indicator-color: var(--slider-track-color) !default;
-$slider-indicator-color-active: $primary-color !default;
-$slider-fullscreen-indicator-color: $carousel-indicator-color !default;
-$slider-fullscreen-indicator-color-active: $carousel-indicator-color-active !default;
-
-
-// 16. Spinners | Loaders
-// ==========================================================================
-
-$spinner-default-color: $primary-color !default;
-
-
-// 17. Tabs
-// ==========================================================================
-
-$tabs-text-active-color: $primary-color-font-emphasize-color !default;
-$tabs-text-inactive-color: $font-color-medium !default;
-$tabs-text-disabled-color: $font-color-disabled !default;
-$tabs-underline-color: $tabs-text-active-color !default;
-$tabs-bg-color: $surface-color !default;
-
-// 18. Tables
-// ==========================================================================
-
-$table-border-color: $divider-color !default;
-$table-striped-color: var(--background-color-slight-emphasis) !default;
-
-
-// 19. Toasts
-// ==========================================================================
-
-$toast-height: 48px !default;
-$toast-color: var(--tooltip-background-color) !default;
-$toast-text-color: var(--tooltip-font-color) !default;
-$toast-action-color: #eeff41;
-
-
-// 20. Tooltips
-// ==========================================================================
-
-$tooltip-bg-color: var(--md-sys-color-inverse-surface) !default;
-$tooltip-font-color: var(--md-sys-color-inverse-on-surface) !default;
-
-
-// 21. Typography
-// ==========================================================================
+$element-bottom-margin: math.div($gutter-width * 2, 3) !default;
 
+// Typography
 $font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
-$text-color: var(--font-color-main) !default;
+$text-color: var(--md-sys-color-on-background) !default;
+
 // Header Styles
 $h1-fontsize: 4.2rem !default;
 $h2-fontsize: 3.56rem !default;
@@ -376,45 +51,6 @@ $h4-fontsize: 2.28rem !default;
 $h5-fontsize: 1.64rem !default;
 $h6-fontsize: 1.15rem !default;
 
-
-// 22. Footer
-// ==========================================================================
-
-$footer-font-color: $font-on-primary-color-main !default;
-$footer-bg-color: $primary-color !default;
-$footer-copyright-font-color: var(--font-on-primary-color-dark-medium) !default;
-$footer-copyright-bg-color: $primary-color-dark !default;
-
-
-// 23. Flow Text
-// ==========================================================================
-
-$range: $large-screen - $small-screen !default;
+// Flow Text
 $intervals: 20 !default;
-$interval-size: math.div($range, $intervals) !default;
-
-
-// 24. Collections
-// ==========================================================================
-
-$collection-border-color: $divider-color !default;
-$collection-bg-color: transparent !default;
-$collection-active-bg-color: $primary-color !default;
-$collection-active-color: $font-on-primary-color-main !default;
-$collection-hover-bg-color: $surface-hover-color-opaque !default;
-$collection-link-color: $primary-color !default;
-$collection-line-height: 1.5rem !default;
-$collection-border-radius: 2px !default;
-$collection-avatar-circle-bg-color: var(--slider-track-color) !default;
-$collection-avatar-circle-icon-color: #fff !default;
-
-
-// 25. Progress Bar
-// ==========================================================================
-
-$progress-bar-color: $primary-color !default;
-$progress-bar-track-color: rgba(var(--primary-color-numeric), 40%) !default;
-
-// 26. Modal
-// ==========================================================================
-$modal-background-color: var(--background-color-level-16dp-solid) !default;
+$interval-size: math.div($large-screen - $small-screen, $intervals) !default;

package/sass/components/colors.module.scss

@@ -1,180 +1,74 @@
-.primary {
-  background-color: var(--md-sys-color-primary);
-}
-.primary-text {
-  color: var(--md-sys-color-primary);
-}
-.on-primary {
-  background-color: var(--md-sys-color-on-primary);
-}
-.on-primary-text {
-  color: var(--md-sys-color-on-primary);
-}
-.primary-container {
-  background-color: var(--md-sys-color-primary-container);
-}
-.primary-container-text {
-  color: var(--md-sys-color-primary-container);
-}
-.on-primary-container {
-  background-color: var(--md-sys-color-on-primary-container);
-}
-.on-primary-container-text {
-  color: var(--md-sys-color-on-primary-container);
-}
-.secondary {
-  background-color: var(--md-sys-color-secondary);
-}
-.secondary-text {
-  color: var(--md-sys-color-secondary);
-}
-.on-secondary {
-  background-color: var(--md-sys-color-on-secondary);
-}
-.on-secondary-text {
-  color: var(--md-sys-color-on-secondary);
-}
-.secondary-container {
-  background-color: var(--md-sys-color-secondary-container);
-}
-.secondary-container-text {
-  color: var(--md-sys-color-secondary-container);
-}
-.on-secondary-container {
-  background-color: var(--md-sys-color-on-secondary-container);
-}
-.on-secondary-container-text {
-  color: var(--md-sys-color-on-secondary-container);
-}
-.tertiary {
-  background-color: var(--md-sys-color-tertiary);
-}
-.tertiary-text {
-  color: var(--md-sys-color-tertiary);
-}
-.on-tertiary {
-  background-color: var(--md-sys-color-on-tertiary);
-}
-.on-tertiary-text {
-  color: var(--md-sys-color-on-tertiary);
-}
-.tertiary-container {
-  background-color: var(--md-sys-color-tertiary-container);
-}
-.tertiary-container-text {
-  color: var(--md-sys-color-tertiary-container);
-}
-.on-tertiary-container {
-  background-color: var(--md-sys-color-on-tertiary-container);
-}
-.on-tertiary-container-text {
-  color: var(--md-sys-color-on-tertiary-container);
-}
-.error {
-  background-color: var(--md-sys-color-error);
-}
-.error-text {
-  color: var(--md-sys-color-error);
-}
-.on-error {
-  background-color: var(--md-sys-color-on-error);
-}
-.on-error-text {
-  color: var(--md-sys-color-on-error);
-}
-.error-container {
-  background-color: var(--md-sys-color-error-container);
-}
-.error-container-text {
-  color: var(--md-sys-color-error-container);
-}
-.on-error-container {
-  background-color: var(--md-sys-color-on-error-container);
-}
-.on-error-container-text {
-  color: var(--md-sys-color-on-error-container);
-}
-.background {
-  background-color: var(--md-sys-color-background);
-}
-.background-text {
-  color: var(--md-sys-color-background);
-}
-.on-background {
-  background-color: var(--md-sys-color-on-background);
-}
-.on-background-text {
-  color: var(--md-sys-color-on-background);
-}
-.surface {
-  background-color: var(--md-sys-color-surface);
-}
-.surface-text {
-  color: var(--md-sys-color-surface);
-}
-.on-surface {
-  background-color: var(--md-sys-color-on-surface);
-}
-.on-surface-text {
-  color: var(--md-sys-color-on-surface);
-}
-.surface-variant {
-  background-color: var(--md-sys-color-surface-variant);
-}
-.surface-variant-text {
-  color: var(--md-sys-color-surface-variant);
-}
-.on-surface-variant {
-  background-color: var(--md-sys-color-on-surface-variant);
-}
-.on-surface-variant-text {
-  color: var(--md-sys-color-on-surface-variant);
-}
-.outline {
-  background-color: var(--md-sys-color-outline);
-}
-.outline-text {
-  color: var(--md-sys-color-outline);
-}
-.inverse-on-surface {
-  background-color: var(--md-sys-color-inverse-on-surface);
-}
-.inverse-on-surface-text {
-  color: var(--md-sys-color-inverse-on-surface);
-}
-.inverse-surface {
-  background-color: var(--md-sys-color-inverse-surface);
-}
-.inverse-surface-text {
-  color: var(--md-sys-color-inverse-surface);
-}
-.inverse-primary {
-  background-color: var(--md-sys-color-inverse-primary);
-}
-.inverse-primary-text {
-  color: var(--md-sys-color-inverse-primary);
-}
-.shadow {
-  background-color: var(--md-sys-color-shadow);
-}
-.shadow-text {
-  color: var(--md-sys-color-shadow);
-}
-.surface-tint {
-  background-color: var(--md-sys-color-surface-tint);
-}
-.surface-tint-text {
-  color: var(--md-sys-color-surface-tint);
-}
-.outline-variant {
-  background-color: var(--md-sys-color-outline-variant);
-}
-.outline-variant-text {
-  color: var(--md-sys-color-outline-variant);
-}
-.scrim {
-  background-color: var(--md-sys-color-scrim);
-}
-.scrim-text {
-  color: var(--md-sys-color-scrim);
-}
+.primary { background-color: var(--md-sys-color-primary); }
+.primary-text { color: var(--md-sys-color-primary); }
+.on-primary { background-color: var(--md-sys-color-on-primary); }
+.on-primary-text { color: var(--md-sys-color-on-primary); }
+.primary-container { background-color: var(--md-sys-color-primary-container); }
+.primary-container-text { color: var(--md-sys-color-primary-container); }
+.on-primary-container { background-color: var(--md-sys-color-on-primary-container); }
+.on-primary-container-text { color: var(--md-sys-color-on-primary-container); }
+
+.secondary { background-color: var(--md-sys-color-secondary); }
+.secondary-text { color: var(--md-sys-color-secondary); }
+.on-secondary { background-color: var(--md-sys-color-on-secondary); }
+.on-secondary-text { color: var(--md-sys-color-on-secondary); }
+.secondary-container { background-color: var(--md-sys-color-secondary-container); }
+.secondary-container-text { color: var(--md-sys-color-secondary-container); }
+.on-secondary-container { background-color: var(--md-sys-color-on-secondary-container); }
+.on-secondary-container-text { color: var(--md-sys-color-on-secondary-container); }
+
+.tertiary { background-color: var(--md-sys-color-tertiary); }
+.tertiary-text { color: var(--md-sys-color-tertiary); }
+.on-tertiary { background-color: var(--md-sys-color-on-tertiary); }
+.on-tertiary-text { color: var(--md-sys-color-on-tertiary); }
+.tertiary-container { background-color: var(--md-sys-color-tertiary-container); }
+.tertiary-container-text { color: var(--md-sys-color-tertiary-container); }
+.on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container); }
+.on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container); }
+
+.error { background-color: var(--md-sys-color-error); }
+.error-text { color: var(--md-sys-color-error); }
+.on-error { background-color: var(--md-sys-color-on-error); }
+.on-error-text { color: var(--md-sys-color-on-error); }
+.error-container { background-color: var(--md-sys-color-error-container); }
+.error-container-text { color: var(--md-sys-color-error-container); }
+.on-error-container { background-color: var(--md-sys-color-on-error-container); }
+.on-error-container-text { color: var(--md-sys-color-on-error-container); }
+
+.background { background-color: var(--md-sys-color-background); }
+.background-text { color: var(--md-sys-color-background); }
+.on-background { background-color: var(--md-sys-color-on-background); }
+.on-background-text { color: var(--md-sys-color-on-background); }
+
+.surface { background-color: var(--md-sys-color-surface); }
+.surface-text { color: var(--md-sys-color-surface); }
+.on-surface { background-color: var(--md-sys-color-on-surface); }
+.on-surface-text { color: var(--md-sys-color-on-surface); }
+
+.surface-variant { background-color: var(--md-sys-color-surface-variant); }
+.surface-variant-text { color: var(--md-sys-color-surface-variant); }
+.on-surface-variant { background-color: var(--md-sys-color-on-surface-variant); }
+.on-surface-variant-text { color: var(--md-sys-color-on-surface-variant); }
+
+.outline { background-color: var(--md-sys-color-outline); }
+.outline-text { color: var(--md-sys-color-outline); }
+
+.inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface); }
+.inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface); }
+
+.inverse-surface { background-color: var(--md-sys-color-inverse-surface); }
+.inverse-surface-text { color: var(--md-sys-color-inverse-surface); }
+
+.inverse-primary { background-color: var(--md-sys-color-inverse-primary); }
+.inverse-primary-text { color: var(--md-sys-color-inverse-primary); }
+
+.shadow { background-color: var(--md-sys-color-shadow); }
+.shadow-text { color: var(--md-sys-color-shadow); }
+
+.surface-tint { background-color: var(--md-sys-color-surface-tint); }
+.surface-tint-text { color: var(--md-sys-color-surface-tint); }
+
+.outline-variant { background-color: var(--md-sys-color-outline-variant); }
+.outline-variant-text { color: var(--md-sys-color-outline-variant); }
+
+.scrim { background-color: var(--md-sys-color-scrim); }
+.scrim-text { color: var(--md-sys-color-scrim); }