@ng-matero/extensions 20.1.1 → 20.2.1

package/prebuilt-themes/purple-green.css

@@ -1 +1 @@
-.mat-button-loading .mdc-button__label,.mat-button-loading .mat-icon{visibility:hidden}.mat-button-loading .mat-mdc-progress-spinner{position:absolute;top:calc(50% - 12px);left:calc(50% - 12px)}html{--mtx-alert-container-shape: 4px}html{--mtx-alert-outline-color: transparent;--mtx-alert-background-color: #212121;--mtx-alert-text-color: white;--mtx-alert-info-outline-color: transparent;--mtx-alert-info-background-color: #0d47a1;--mtx-alert-info-text-color: white;--mtx-alert-success-outline-color: transparent;--mtx-alert-success-background-color: #1b5e20;--mtx-alert-success-text-color: white;--mtx-alert-warning-outline-color: transparent;--mtx-alert-warning-background-color: #ff6f00;--mtx-alert-warning-text-color: white;--mtx-alert-danger-outline-color: transparent;--mtx-alert-danger-background-color: #b71c1c;--mtx-alert-danger-text-color: white}html{--mtx-colorpicker-toggle-active-state-icon-color: #7b1fa2;--mtx-colorpicker-toggle-icon-color: white}.mtx-colorpicker-toggle-active.mat-accent{--mtx-colorpicker-toggle-active-state-icon-color: #69f0ae}.mtx-colorpicker-toggle-active.mat-warn{--mtx-colorpicker-toggle-active-state-icon-color: #f44336}html{--mtx-datetimepicker-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mtx-datetimepicker-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mtx-datetimepicker-container-shape: 4px;--mtx-datetimepicker-container-touch-shape: 4px;--mtx-datetimepicker-selector-container-shape: 4px}html{--mtx-datetimepicker-calendar-header-background-color: #7b1fa2;--mtx-datetimepicker-calendar-date-selected-state-text-color: white;--mtx-datetimepicker-calendar-date-selected-state-background-color: #7b1fa2;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: rgba(123, 31, 162, 0.4);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: white;--mtx-datetimepicker-calendar-date-focus-state-background-color: rgba(123, 31, 162, 0.3);--mtx-datetimepicker-calendar-date-hover-state-background-color: rgba(123, 31, 162, 0.3);--mtx-datetimepicker-clock-hand-background-color: #7b1fa2;--mtx-datetimepicker-clock-cell-selected-state-background-color: #7b1fa2;--mtx-datetimepicker-time-input-active-state-text-color: #7b1fa2;--mtx-datetimepicker-time-input-active-state-background-color: rgba(123, 31, 162, 0.2);--mtx-datetimepicker-time-input-focus-state-outline-color: #7b1fa2;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: rgba(123, 31, 162, 0.6);--mtx-datetimepicker-time-ampm-selected-state-background-color: rgba(123, 31, 162, 0.2);--mtx-datetimepicker-toggle-active-state-icon-color: #7b1fa2;--mtx-datetimepicker-toggle-icon-color: white;--mtx-datetimepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-body-week-number-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-header-text-color: white;--mtx-datetimepicker-calendar-header-divider-color: transparent;--mtx-datetimepicker-calendar-table-header-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.5);--mtx-datetimepicker-calendar-date-text-color: white;--mtx-datetimepicker-calendar-date-outline-color: transparent;--mtx-datetimepicker-calendar-date-disabled-state-text-color: rgba(255, 255, 255, 0.5);--mtx-datetimepicker-container-background-color: #424242;--mtx-datetimepicker-container-text-color: white;--mtx-datetimepicker-clock-dial-background-color: rgba(255, 255, 255, 0.12);--mtx-datetimepicker-clock-cell-text-color: white;--mtx-datetimepicker-clock-cell-hover-state-background-color: rgba(255, 255, 255, 0.04);--mtx-datetimepicker-clock-cell-disabled-state-text-color: rgba(255, 255, 255, 0.5);--mtx-datetimepicker-time-input-text-color: white;--mtx-datetimepicker-time-input-background-color: rgba(255, 255, 255, 0.12);--mtx-datetimepicker-time-input-focus-state-background-color: #303030;--mtx-datetimepicker-time-input-warn-state-outline-color: #f44336;--mtx-datetimepicker-time-ampm-text-color: rgba(255, 255, 255, 0.75);--mtx-datetimepicker-time-ampm-outline-color: rgba(255, 255, 255, 0.5);--mtx-datetimepicker-time-ampm-selected-state-text-color: white}.mtx-datetimepicker-content.mat-accent{--mtx-datetimepicker-calendar-header-background-color: #69f0ae;--mtx-datetimepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-selected-state-background-color: #69f0ae;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: rgba(105, 240, 174, 0.4);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-focus-state-background-color: rgba(105, 240, 174, 0.3);--mtx-datetimepicker-calendar-date-hover-state-background-color: rgba(105, 240, 174, 0.3);--mtx-datetimepicker-clock-hand-background-color: #69f0ae;--mtx-datetimepicker-clock-cell-selected-state-background-color: #69f0ae;--mtx-datetimepicker-time-input-active-state-text-color: #69f0ae;--mtx-datetimepicker-time-input-active-state-background-color: rgba(105, 240, 174, 0.2);--mtx-datetimepicker-time-input-focus-state-outline-color: #69f0ae;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: rgba(105, 240, 174, 0.6);--mtx-datetimepicker-time-ampm-selected-state-background-color: rgba(105, 240, 174, 0.2)}.mtx-datetimepicker-content.mat-warn{--mtx-datetimepicker-calendar-header-background-color: #f44336;--mtx-datetimepicker-calendar-date-selected-state-text-color: white;--mtx-datetimepicker-calendar-date-selected-state-background-color: #f44336;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: rgba(244, 67, 54, 0.4);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: white;--mtx-datetimepicker-calendar-date-focus-state-background-color: rgba(244, 67, 54, 0.3);--mtx-datetimepicker-calendar-date-hover-state-background-color: rgba(244, 67, 54, 0.3);--mtx-datetimepicker-clock-hand-background-color: #f44336;--mtx-datetimepicker-clock-cell-selected-state-background-color: #f44336;--mtx-datetimepicker-time-input-active-state-text-color: #f44336;--mtx-datetimepicker-time-input-active-state-background-color: rgba(244, 67, 54, 0.2);--mtx-datetimepicker-time-input-focus-state-outline-color: #f44336;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: rgba(244, 67, 54, 0.6);--mtx-datetimepicker-time-ampm-selected-state-background-color: rgba(244, 67, 54, 0.2)}.mtx-datetimepicker-toggle-active.mat-accent{--mtx-datetimepicker-toggle-active-state-icon-color: #69f0ae}.mtx-datetimepicker-toggle-active.mat-warn{--mtx-datetimepicker-toggle-active-state-icon-color: #f44336}html{--mtx-datetimepicker-calendar-text-font: Roboto, sans-serif;--mtx-datetimepicker-calendar-text-size: 13px;--mtx-datetimepicker-calendar-body-label-text-size: 14px;--mtx-datetimepicker-calendar-body-label-text-weight: 500;--mtx-datetimepicker-calendar-period-button-text-size: 14px;--mtx-datetimepicker-calendar-period-button-text-weight: 500;--mtx-datetimepicker-calendar-table-header-text-size: 11px;--mtx-datetimepicker-calendar-table-header-text-weight: 400;--mtx-datetimepicker-clock-text-size: 14px}html{--mtx-drawer-container-shape: 0;--mtx-drawer-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)}html{--mtx-drawer-container-background-color: #424242;--mtx-drawer-container-text-color: white}html{--mtx-grid-container-shape: 0;--mtx-grid-table-cell-min-width: 80px}html{--mtx-grid-outline-color: rgba(255, 255, 255, 0.2);--mtx-grid-column-menu-text-color: white;--mtx-grid-column-menu-divider-color: rgba(255, 255, 255, 0.12);--mtx-grid-table-footer-background-color: #212121;--mtx-grid-table-row-striped-background-color: #3a3a3a;--mtx-grid-table-row-hover-background-color: #2a2a2a;--mtx-grid-table-row-selected-background-color: #2a2a2a;--mtx-grid-table-row-selected-hover-background-color: #1a1a1a;--mtx-grid-table-cell-selected-outline-color: #69f0ae;--mtx-grid-resizable-handle-active-background-color: #7b1fa2;--mtx-grid-resizable-handle-hover-background-color: #7b1fa2;--mtx-grid-resizable-handle-disabled-background-color: rgba(255, 255, 255, 0.12)}html{--mtx-grid-row-expand-button-size: 48px}html{--mtx-loader-backdrop-background-color: rgba(48, 48, 48, 0.75)}html{--mtx-popover-container-shape: 4px;--mtx-popover-base-elevation-level: 8}html{--mtx-popover-outline-color: rgba(255, 255, 255, 0.12);--mtx-popover-background-color: #424242;--mtx-popover-text-color: white}html{--mtx-progress-container-shape: 4px}html{--mtx-progress-track-color: rgba(255, 255, 255, 0.04);--mtx-progress-indicator-color: rgba(255, 255, 255, 0.12);--mtx-progress-text-color: white;--mtx-progress-info-indicator-color: #0d47a1;--mtx-progress-info-text-color: white;--mtx-progress-success-indicator-color: #1b5e20;--mtx-progress-success-text-color: white;--mtx-progress-warning-indicator-color: #e65100;--mtx-progress-warning-text-color: white;--mtx-progress-danger-indicator-color: #b71c1c;--mtx-progress-danger-text-color: white}html{--mtx-progress-text-size: 12px}html{--mtx-select-container-shape: 4px;--mtx-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mtx-select-option-selected-state-text-color: #7b1fa2;--mtx-select-container-text-color: white;--mtx-select-placeholder-text-color: rgba(255, 255, 255, 0.5);--mtx-select-disabled-text-color: rgba(255, 255, 255, 0.5);--mtx-select-multiple-value-background-color: #616161;--mtx-select-multiple-value-outline-color: rgba(255, 255, 255, 0.12);--mtx-select-multiple-value-disabled-outline-color: rgba(255, 255, 255, 0.06);--mtx-select-multiple-value-icon-hover-background-color: rgba(255, 255, 255, 0.12);--mtx-select-clear-icon-color: rgba(255, 255, 255, 0.7);--mtx-select-clear-icon-hover-color: #f44336;--mtx-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);--mtx-select-disabled-arrow-color: rgba(255, 255, 255, 0.5);--mtx-select-invalid-arrow-color: #f44336;--mtx-select-panel-background-color: #424242;--mtx-select-panel-divider-color: rgba(255, 255, 255, 0.12);--mtx-select-optgroup-label-text-color: rgba(255, 255, 255, 0.7);--mtx-select-option-label-text-color: white;--mtx-select-option-selected-state-background-color: rgba(255, 255, 255, 0.04);--mtx-select-option-hover-state-background-color: rgba(255, 255, 255, 0.04);--mtx-select-option-disabled-state-text-color: rgba(255, 255, 255, 0.5)}.ng-dropdown-panel.mat-accent{--mtx-select-option-selected-state-text-color: #69f0ae}.ng-dropdown-panel.mat-warn{--mtx-select-option-selected-state-text-color: #f44336}html{--mtx-split-gutter-hover-state-background-color: #7b1fa2;--mtx-split-gutter-background-color: rgba(255, 255, 255, 0.12)}.mtx-split>.mtx-split-gutter.mat-accent:hover{--mtx-split-gutter-hover-state-background-color: #69f0ae}.mtx-split>.mtx-split-gutter.mat-warn:hover{--mtx-split-gutter-hover-state-background-color: #f44336}html{--mtx-tooltip-container-shape: 4px;--mtx-tooltip-supporting-text-line-height: 16px}html{--mtx-tooltip-container-color: #616161;--mtx-tooltip-supporting-text-color: #fff}html{--mtx-tooltip-supporting-text-font: Roboto, sans-serif;--mtx-tooltip-supporting-text-size: 12px;--mtx-tooltip-supporting-text-weight: 400;--mtx-tooltip-supporting-text-tracking: 0.0333333333em}
+.mat-button-loading .mdc-button__label,.mat-button-loading .mat-icon{visibility:hidden}.mat-button-loading .mat-mdc-progress-spinner{position:absolute;top:calc(50% - 12px);left:calc(50% - 12px)}html{--mtx-alert-container-shape: 4px}html{--mtx-alert-outline-color: transparent;--mtx-alert-background-color: #212121;--mtx-alert-text-color: white;--mtx-alert-info-outline-color: transparent;--mtx-alert-info-background-color: #0d47a1;--mtx-alert-info-text-color: white;--mtx-alert-success-outline-color: transparent;--mtx-alert-success-background-color: #1b5e20;--mtx-alert-success-text-color: white;--mtx-alert-warning-outline-color: transparent;--mtx-alert-warning-background-color: #ff6f00;--mtx-alert-warning-text-color: white;--mtx-alert-danger-outline-color: transparent;--mtx-alert-danger-background-color: #b71c1c;--mtx-alert-danger-text-color: white}html{--mtx-colorpicker-toggle-active-state-icon-color: #7b1fa2;--mtx-colorpicker-toggle-icon-color: rgba(255, 255, 255, 0.7)}.mtx-colorpicker-toggle-active.mat-accent{--mtx-colorpicker-toggle-active-state-icon-color: #69f0ae;--mtx-colorpicker-toggle-icon-color: rgba(255, 255, 255, 0.7)}.mtx-colorpicker-toggle-active.mat-warn{--mtx-colorpicker-toggle-active-state-icon-color: #f44336;--mtx-colorpicker-toggle-icon-color: rgba(255, 255, 255, 0.7)}html{--mtx-datetimepicker-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);--mtx-datetimepicker-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);--mtx-datetimepicker-container-shape: 4px;--mtx-datetimepicker-container-touch-shape: 4px;--mtx-datetimepicker-selector-container-shape: 4px}html{--mtx-datetimepicker-calendar-date-selected-state-text-color: white;--mtx-datetimepicker-calendar-date-selected-state-background-color: #7b1fa2;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #7b1fa2 38%, transparent);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: white;--mtx-datetimepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #7b1fa2 12%, transparent);--mtx-datetimepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #7b1fa2 12%, transparent);--mtx-datetimepicker-toggle-active-state-icon-color: #7b1fa2;--mtx-datetimepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-header-divider-color: transparent;--mtx-datetimepicker-calendar-header-text-color: white;--mtx-datetimepicker-calendar-body-week-number-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-header-background-color: #7b1fa2;--mtx-datetimepicker-calendar-table-header-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-date-text-color: white;--mtx-datetimepicker-calendar-date-outline-color: transparent;--mtx-datetimepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-container-background-color: #424242;--mtx-datetimepicker-container-text-color: white;--mtx-datetimepicker-clock-dial-background-color: rgba(255, 255, 255, 0.12);--mtx-datetimepicker-clock-cell-text-color: white;--mtx-datetimepicker-clock-cell-hover-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-datetimepicker-clock-cell-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-clock-cell-selected-state-background-color: #7b1fa2;--mtx-datetimepicker-clock-hand-background-color: #7b1fa2;--mtx-datetimepicker-time-input-active-state-text-color: #7b1fa2;--mtx-datetimepicker-time-input-active-state-background-color: color-mix(in srgb, #7b1fa2 20%, transparent);--mtx-datetimepicker-time-input-focus-state-outline-color: #7b1fa2;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: color-mix(in srgb, #7b1fa2 60%, transparent);--mtx-datetimepicker-time-input-text-color: white;--mtx-datetimepicker-time-input-background-color: rgba(255, 255, 255, 0.12);--mtx-datetimepicker-time-input-warn-state-outline-color: #f44336;--mtx-datetimepicker-time-ampm-text-color: color-mix(in srgb, white 75%, transparent);--mtx-datetimepicker-time-ampm-outline-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-time-ampm-selected-state-text-color: white;--mtx-datetimepicker-time-ampm-selected-state-background-color: color-mix(in srgb, #7b1fa2 20%, transparent)}.mtx-datetimepicker-content.mat-accent,.mtx-datetimepicker-toggle-active.mat-accent{--mtx-datetimepicker-calendar-date-selected-state-text-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-selected-state-background-color: #69f0ae;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #69f0ae 38%, transparent);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: rgba(0, 0, 0, 0.87);--mtx-datetimepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #69f0ae 12%, transparent);--mtx-datetimepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #69f0ae 12%, transparent);--mtx-datetimepicker-toggle-active-state-icon-color: #69f0ae;--mtx-datetimepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-header-divider-color: transparent;--mtx-datetimepicker-calendar-header-text-color: white;--mtx-datetimepicker-calendar-body-week-number-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-header-background-color: #69f0ae;--mtx-datetimepicker-calendar-table-header-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-date-text-color: white;--mtx-datetimepicker-calendar-date-outline-color: transparent;--mtx-datetimepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-container-background-color: #424242;--mtx-datetimepicker-container-text-color: white;--mtx-datetimepicker-clock-dial-background-color: rgba(255, 255, 255, 0.12);--mtx-datetimepicker-clock-cell-text-color: white;--mtx-datetimepicker-clock-cell-hover-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-datetimepicker-clock-cell-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-clock-cell-selected-state-background-color: #69f0ae;--mtx-datetimepicker-clock-hand-background-color: #69f0ae;--mtx-datetimepicker-time-input-active-state-text-color: #69f0ae;--mtx-datetimepicker-time-input-active-state-background-color: color-mix(in srgb, #69f0ae 20%, transparent);--mtx-datetimepicker-time-input-focus-state-outline-color: #69f0ae;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: color-mix(in srgb, #69f0ae 60%, transparent);--mtx-datetimepicker-time-input-text-color: white;--mtx-datetimepicker-time-input-background-color: rgba(255, 255, 255, 0.12);--mtx-datetimepicker-time-input-warn-state-outline-color: #f44336;--mtx-datetimepicker-time-ampm-text-color: color-mix(in srgb, white 75%, transparent);--mtx-datetimepicker-time-ampm-outline-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-time-ampm-selected-state-text-color: white;--mtx-datetimepicker-time-ampm-selected-state-background-color: color-mix(in srgb, #69f0ae 20%, transparent)}.mtx-datetimepicker-content.mat-warn,.mtx-datetimepicker-toggle-active.mat-warn{--mtx-datetimepicker-calendar-date-selected-state-text-color: white;--mtx-datetimepicker-calendar-date-selected-state-background-color: #f44336;--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, #f44336 38%, transparent);--mtx-datetimepicker-calendar-date-today-selected-state-outline-color: white;--mtx-datetimepicker-calendar-date-focus-state-background-color: color-mix(in srgb, #f44336 12%, transparent);--mtx-datetimepicker-calendar-date-hover-state-background-color: color-mix(in srgb, #f44336 12%, transparent);--mtx-datetimepicker-toggle-active-state-icon-color: #f44336;--mtx-datetimepicker-toggle-icon-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-body-label-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-header-divider-color: transparent;--mtx-datetimepicker-calendar-header-text-color: white;--mtx-datetimepicker-calendar-body-week-number-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-header-background-color: #f44336;--mtx-datetimepicker-calendar-table-header-text-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-date-today-outline-color: rgba(255, 255, 255, 0.7);--mtx-datetimepicker-calendar-date-text-color: white;--mtx-datetimepicker-calendar-date-outline-color: transparent;--mtx-datetimepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-container-background-color: #424242;--mtx-datetimepicker-container-text-color: white;--mtx-datetimepicker-clock-dial-background-color: rgba(255, 255, 255, 0.12);--mtx-datetimepicker-clock-cell-text-color: white;--mtx-datetimepicker-clock-cell-hover-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-datetimepicker-clock-cell-disabled-state-text-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-clock-cell-selected-state-background-color: #f44336;--mtx-datetimepicker-clock-hand-background-color: #f44336;--mtx-datetimepicker-time-input-active-state-text-color: #f44336;--mtx-datetimepicker-time-input-active-state-background-color: color-mix(in srgb, #f44336 20%, transparent);--mtx-datetimepicker-time-input-focus-state-outline-color: #f44336;--mtx-datetimepicker-time-input-focus-state-placeholder-text-color: color-mix(in srgb, #f44336 60%, transparent);--mtx-datetimepicker-time-input-text-color: white;--mtx-datetimepicker-time-input-background-color: rgba(255, 255, 255, 0.12);--mtx-datetimepicker-time-input-warn-state-outline-color: #f44336;--mtx-datetimepicker-time-ampm-text-color: color-mix(in srgb, white 75%, transparent);--mtx-datetimepicker-time-ampm-outline-color: color-mix(in srgb, white 38%, transparent);--mtx-datetimepicker-time-ampm-selected-state-text-color: white;--mtx-datetimepicker-time-ampm-selected-state-background-color: color-mix(in srgb, #f44336 20%, transparent)}html{--mtx-datetimepicker-calendar-text-font: Roboto, sans-serif;--mtx-datetimepicker-calendar-text-size: 13px;--mtx-datetimepicker-calendar-body-label-text-size: 14px;--mtx-datetimepicker-calendar-body-label-text-weight: 500;--mtx-datetimepicker-calendar-period-button-text-size: 14px;--mtx-datetimepicker-calendar-period-button-text-weight: 500;--mtx-datetimepicker-calendar-table-header-text-size: 11px;--mtx-datetimepicker-calendar-table-header-text-weight: 400;--mtx-datetimepicker-clock-text-size: 14px}html{--mtx-drawer-container-shape: 0;--mtx-drawer-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12)}html{--mtx-drawer-container-background-color: #424242;--mtx-drawer-container-text-color: white}html{--mtx-grid-container-shape: 0;--mtx-grid-table-cell-min-width: 80px}html{--mtx-grid-outline-color: color-mix(in srgb, white 20%, transparent);--mtx-grid-column-menu-text-color: white;--mtx-grid-column-menu-divider-color: rgba(255, 255, 255, 0.12);--mtx-grid-table-footer-background-color: #424242;--mtx-grid-table-row-striped-background-color: #3a3a3a;--mtx-grid-table-row-hover-background-color: #2a2a2a;--mtx-grid-table-row-selected-background-color: #2a2a2a;--mtx-grid-table-row-selected-hover-background-color: #1a1a1a;--mtx-grid-table-cell-selected-outline-color: #69f0ae;--mtx-grid-resizable-handle-active-background-color: #7b1fa2;--mtx-grid-resizable-handle-hover-background-color: #7b1fa2;--mtx-grid-resizable-handle-disabled-background-color: rgba(255, 255, 255, 0.12)}html{--mtx-grid-row-expand-button-size: 48px}html{--mtx-loader-backdrop-background-color: color-mix(in srgb, #424242 75%, transparent)}html{--mtx-popover-container-shape: 4px;--mtx-popover-base-elevation-level: 8}html{--mtx-popover-outline-color: rgba(255, 255, 255, 0.12);--mtx-popover-background-color: #424242;--mtx-popover-text-color: white}html{--mtx-progress-container-shape: 4px}html{--mtx-progress-track-color: color-mix(in srgb, white 4%, transparent);--mtx-progress-indicator-color: rgba(255, 255, 255, 0.12);--mtx-progress-text-color: white;--mtx-progress-info-indicator-color: #0d47a1;--mtx-progress-info-text-color: white;--mtx-progress-success-indicator-color: #1b5e20;--mtx-progress-success-text-color: white;--mtx-progress-warning-indicator-color: #e65100;--mtx-progress-warning-text-color: white;--mtx-progress-danger-indicator-color: #b71c1c;--mtx-progress-danger-text-color: white}html{--mtx-progress-text-size: 12px}html{--mtx-select-container-shape: 4px;--mtx-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mtx-select-container-text-color: white;--mtx-select-placeholder-text-color: color-mix(in srgb, white 38%, transparent);--mtx-select-disabled-text-color: color-mix(in srgb, white 38%, transparent);--mtx-select-multiple-value-background-color: rgba(255, 255, 255, 0.12);--mtx-select-multiple-value-outline-color: rgba(255, 255, 255, 0.12);--mtx-select-multiple-value-disabled-outline-color: color-mix(in srgb, rgba(255, 255, 255, 0.12) 38%, transparent);--mtx-select-multiple-value-icon-hover-background-color: rgba(255, 255, 255, 0.12);--mtx-select-clear-icon-color: rgba(255, 255, 255, 0.7);--mtx-select-clear-icon-hover-color: #f44336;--mtx-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);--mtx-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);--mtx-select-invalid-arrow-color: #f44336;--mtx-select-panel-background-color: #424242;--mtx-select-panel-divider-color: rgba(255, 255, 255, 0.12);--mtx-select-optgroup-label-text-color: rgba(255, 255, 255, 0.7);--mtx-select-option-label-text-color: white;--mtx-select-option-selected-state-text-color: #7b1fa2;--mtx-select-option-selected-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-select-option-hover-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-select-option-disabled-state-text-color: color-mix(in srgb, white 38%, transparent)}.ng-dropdown-panel.mat-accent{--mtx-select-container-text-color: white;--mtx-select-placeholder-text-color: color-mix(in srgb, white 38%, transparent);--mtx-select-disabled-text-color: color-mix(in srgb, white 38%, transparent);--mtx-select-multiple-value-background-color: rgba(255, 255, 255, 0.12);--mtx-select-multiple-value-outline-color: rgba(255, 255, 255, 0.12);--mtx-select-multiple-value-disabled-outline-color: color-mix(in srgb, rgba(255, 255, 255, 0.12) 38%, transparent);--mtx-select-multiple-value-icon-hover-background-color: rgba(255, 255, 255, 0.12);--mtx-select-clear-icon-color: rgba(255, 255, 255, 0.7);--mtx-select-clear-icon-hover-color: #f44336;--mtx-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);--mtx-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);--mtx-select-invalid-arrow-color: #f44336;--mtx-select-panel-background-color: #424242;--mtx-select-panel-divider-color: rgba(255, 255, 255, 0.12);--mtx-select-optgroup-label-text-color: rgba(255, 255, 255, 0.7);--mtx-select-option-label-text-color: white;--mtx-select-option-selected-state-text-color: #69f0ae;--mtx-select-option-selected-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-select-option-hover-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-select-option-disabled-state-text-color: color-mix(in srgb, white 38%, transparent)}.ng-dropdown-panel.mat-warn{--mtx-select-container-text-color: white;--mtx-select-placeholder-text-color: color-mix(in srgb, white 38%, transparent);--mtx-select-disabled-text-color: color-mix(in srgb, white 38%, transparent);--mtx-select-multiple-value-background-color: rgba(255, 255, 255, 0.12);--mtx-select-multiple-value-outline-color: rgba(255, 255, 255, 0.12);--mtx-select-multiple-value-disabled-outline-color: color-mix(in srgb, rgba(255, 255, 255, 0.12) 38%, transparent);--mtx-select-multiple-value-icon-hover-background-color: rgba(255, 255, 255, 0.12);--mtx-select-clear-icon-color: rgba(255, 255, 255, 0.7);--mtx-select-clear-icon-hover-color: #f44336;--mtx-select-enabled-arrow-color: rgba(255, 255, 255, 0.7);--mtx-select-disabled-arrow-color: color-mix(in srgb, white 38%, transparent);--mtx-select-invalid-arrow-color: #f44336;--mtx-select-panel-background-color: #424242;--mtx-select-panel-divider-color: rgba(255, 255, 255, 0.12);--mtx-select-optgroup-label-text-color: rgba(255, 255, 255, 0.7);--mtx-select-option-label-text-color: white;--mtx-select-option-selected-state-text-color: #f44336;--mtx-select-option-selected-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-select-option-hover-state-background-color: color-mix(in srgb, white 4%, transparent);--mtx-select-option-disabled-state-text-color: color-mix(in srgb, white 38%, transparent)}html{--mtx-split-gutter-background-color: rgba(255, 255, 255, 0.12);--mtx-split-gutter-hover-state-background-color: #7b1fa2}.mtx-split>.mtx-split-gutter.mat-accent:hover{--mtx-split-gutter-background-color: rgba(255, 255, 255, 0.12);--mtx-split-gutter-hover-state-background-color: #69f0ae}.mtx-split>.mtx-split-gutter.mat-warn:hover{--mtx-split-gutter-background-color: rgba(255, 255, 255, 0.12);--mtx-split-gutter-hover-state-background-color: #f44336}html{--mtx-tooltip-container-shape: 4px;--mtx-tooltip-supporting-text-line-height: 16px}html{--mtx-tooltip-container-color: white;--mtx-tooltip-supporting-text-color: rgba(0, 0, 0, 0.87)}html{--mtx-tooltip-supporting-text-font: Roboto, sans-serif;--mtx-tooltip-supporting-text-size: 12px;--mtx-tooltip-supporting-text-weight: 400;--mtx-tooltip-supporting-text-tracking: 0.0333333333em}

package/prebuilt-themes/rose-red.css

@@ -1 +1 @@
-html{--mat-sys-background: #fff8f8;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #faeeef;--mat-sys-inverse-primary: #ffb1c5;--mat-sys-inverse-surface: #352f30;--mat-sys-on-background: #201a1b;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #93000a;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #8f0045;--mat-sys-on-primary-fixed: #3f001b;--mat-sys-on-primary-fixed-variant: #8f0045;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #5b3f46;--mat-sys-on-secondary-fixed: #2b151b;--mat-sys-on-secondary-fixed-variant: #5b3f46;--mat-sys-on-surface: #201a1b;--mat-sys-on-surface-variant: #514346;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #930100;--mat-sys-on-tertiary-fixed: #410000;--mat-sys-on-tertiary-fixed-variant: #930100;--mat-sys-outline: #847376;--mat-sys-outline-variant: #d6c2c5;--mat-sys-primary: #ba005c;--mat-sys-primary-container: #ffd9e1;--mat-sys-primary-fixed: #ffd9e1;--mat-sys-primary-fixed-dim: #ffb1c5;--mat-sys-scrim: #000000;--mat-sys-secondary: #74565d;--mat-sys-secondary-container: #ffd9e1;--mat-sys-secondary-fixed: #ffd9e1;--mat-sys-secondary-fixed-dim: #e3bdc5;--mat-sys-shadow: #000000;--mat-sys-surface: #fff8f8;--mat-sys-surface-bright: #fff8f8;--mat-sys-surface-container: #f7ebec;--mat-sys-surface-container-high: #f1e5e6;--mat-sys-surface-container-highest: #ece0e1;--mat-sys-surface-container-low: #fdf1f2;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #e3d7d8;--mat-sys-surface-tint: #ba005c;--mat-sys-surface-variant: #f3dde1;--mat-sys-tertiary: #c00100;--mat-sys-tertiary-container: #ffdad4;--mat-sys-tertiary-fixed: #ffdad4;--mat-sys-tertiary-fixed-dim: #ffb4a8;--mat-sys-neutral-variant20: #3a2d30;--mat-sys-neutral10: #201a1b}html{--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12)}html{--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)}html{--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)}html{--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: 0.031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: 0.875rem;--mat-sys-body-medium-tracking: 0.016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 0.75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: 0.75rem;--mat-sys-body-small-tracking: 0.025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto, sans-serif;--mat-sys-display-large-font: Roboto, sans-serif;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -0.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto, sans-serif;--mat-sys-display-medium-font: Roboto, sans-serif;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto, sans-serif;--mat-sys-display-small-font: Roboto, sans-serif;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto, sans-serif;--mat-sys-headline-large-font: Roboto, sans-serif;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto, sans-serif;--mat-sys-headline-medium-font: Roboto, sans-serif;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto, sans-serif;--mat-sys-headline-small-font: Roboto, sans-serif;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: 0.875rem;--mat-sys-label-large-tracking: 0.006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 0.75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: 0.75rem;--mat-sys-label-medium-tracking: 0.031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 0.688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: 0.688rem;--mat-sys-label-small-tracking: 0.031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;--mat-sys-title-large-font: Roboto, sans-serif;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: 0.009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: 0.875rem;--mat-sys-title-small-tracking: 0.006rem;--mat-sys-title-small-weight: 500}html{--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px}html{--mat-sys-dragged-state-layer-opacity: 0.16;--mat-sys-focus-state-layer-opacity: 0.12;--mat-sys-hover-state-layer-opacity: 0.08;--mat-sys-pressed-state-layer-opacity: 0.12}
+html{--mat-sys-background: #fff8f8;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #faeeef;--mat-sys-inverse-primary: #ffb1c5;--mat-sys-inverse-surface: #352f30;--mat-sys-on-background: #201a1b;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #93000a;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #8f0045;--mat-sys-on-primary-fixed: #3f001b;--mat-sys-on-primary-fixed-variant: #8f0045;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #5b3f46;--mat-sys-on-secondary-fixed: #2b151b;--mat-sys-on-secondary-fixed-variant: #5b3f46;--mat-sys-on-surface: #201a1b;--mat-sys-on-surface-variant: #514346;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #930100;--mat-sys-on-tertiary-fixed: #410000;--mat-sys-on-tertiary-fixed-variant: #930100;--mat-sys-outline: #847376;--mat-sys-outline-variant: #d6c2c5;--mat-sys-primary: #ba005c;--mat-sys-primary-container: #ffd9e1;--mat-sys-primary-fixed: #ffd9e1;--mat-sys-primary-fixed-dim: #ffb1c5;--mat-sys-scrim: #000000;--mat-sys-secondary: #74565d;--mat-sys-secondary-container: #ffd9e1;--mat-sys-secondary-fixed: #ffd9e1;--mat-sys-secondary-fixed-dim: #e3bdc5;--mat-sys-shadow: #000000;--mat-sys-surface: #fff8f8;--mat-sys-surface-bright: #fff8f8;--mat-sys-surface-container: #f7ebec;--mat-sys-surface-container-high: #f1e5e6;--mat-sys-surface-container-highest: #ece0e1;--mat-sys-surface-container-low: #fdf1f2;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #e3d7d8;--mat-sys-surface-tint: #ba005c;--mat-sys-surface-variant: #f3dde1;--mat-sys-tertiary: #c00100;--mat-sys-tertiary-container: #ffdad4;--mat-sys-tertiary-fixed: #ffdad4;--mat-sys-tertiary-fixed-dim: #ffb4a8;--mat-sys-neutral-variant20: #3a2d30;--mat-sys-neutral10: #201a1b;--mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);--mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);--mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);--mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);--mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);--mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);--mat-sys-body-large: 400 1rem / 1.5rem Roboto;--mat-sys-body-large-font: Roboto;--mat-sys-body-large-line-height: 1.5rem;--mat-sys-body-large-size: 1rem;--mat-sys-body-large-tracking: 0.031rem;--mat-sys-body-large-weight: 400;--mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;--mat-sys-body-medium-font: Roboto;--mat-sys-body-medium-line-height: 1.25rem;--mat-sys-body-medium-size: 0.875rem;--mat-sys-body-medium-tracking: 0.016rem;--mat-sys-body-medium-weight: 400;--mat-sys-body-small: 400 0.75rem / 1rem Roboto;--mat-sys-body-small-font: Roboto;--mat-sys-body-small-line-height: 1rem;--mat-sys-body-small-size: 0.75rem;--mat-sys-body-small-tracking: 0.025rem;--mat-sys-body-small-weight: 400;--mat-sys-display-large: 400 3.562rem / 4rem Roboto, sans-serif;--mat-sys-display-large-font: Roboto, sans-serif;--mat-sys-display-large-line-height: 4rem;--mat-sys-display-large-size: 3.562rem;--mat-sys-display-large-tracking: -0.016rem;--mat-sys-display-large-weight: 400;--mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto, sans-serif;--mat-sys-display-medium-font: Roboto, sans-serif;--mat-sys-display-medium-line-height: 3.25rem;--mat-sys-display-medium-size: 2.812rem;--mat-sys-display-medium-tracking: 0;--mat-sys-display-medium-weight: 400;--mat-sys-display-small: 400 2.25rem / 2.75rem Roboto, sans-serif;--mat-sys-display-small-font: Roboto, sans-serif;--mat-sys-display-small-line-height: 2.75rem;--mat-sys-display-small-size: 2.25rem;--mat-sys-display-small-tracking: 0;--mat-sys-display-small-weight: 400;--mat-sys-headline-large: 400 2rem / 2.5rem Roboto, sans-serif;--mat-sys-headline-large-font: Roboto, sans-serif;--mat-sys-headline-large-line-height: 2.5rem;--mat-sys-headline-large-size: 2rem;--mat-sys-headline-large-tracking: 0;--mat-sys-headline-large-weight: 400;--mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto, sans-serif;--mat-sys-headline-medium-font: Roboto, sans-serif;--mat-sys-headline-medium-line-height: 2.25rem;--mat-sys-headline-medium-size: 1.75rem;--mat-sys-headline-medium-tracking: 0;--mat-sys-headline-medium-weight: 400;--mat-sys-headline-small: 400 1.5rem / 2rem Roboto, sans-serif;--mat-sys-headline-small-font: Roboto, sans-serif;--mat-sys-headline-small-line-height: 2rem;--mat-sys-headline-small-size: 1.5rem;--mat-sys-headline-small-tracking: 0;--mat-sys-headline-small-weight: 400;--mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;--mat-sys-label-large-font: Roboto;--mat-sys-label-large-line-height: 1.25rem;--mat-sys-label-large-size: 0.875rem;--mat-sys-label-large-tracking: 0.006rem;--mat-sys-label-large-weight: 500;--mat-sys-label-large-weight-prominent: 700;--mat-sys-label-medium: 500 0.75rem / 1rem Roboto;--mat-sys-label-medium-font: Roboto;--mat-sys-label-medium-line-height: 1rem;--mat-sys-label-medium-size: 0.75rem;--mat-sys-label-medium-tracking: 0.031rem;--mat-sys-label-medium-weight: 500;--mat-sys-label-medium-weight-prominent: 700;--mat-sys-label-small: 500 0.688rem / 1rem Roboto;--mat-sys-label-small-font: Roboto;--mat-sys-label-small-line-height: 1rem;--mat-sys-label-small-size: 0.688rem;--mat-sys-label-small-tracking: 0.031rem;--mat-sys-label-small-weight: 500;--mat-sys-title-large: 400 1.375rem / 1.75rem Roboto, sans-serif;--mat-sys-title-large-font: Roboto, sans-serif;--mat-sys-title-large-line-height: 1.75rem;--mat-sys-title-large-size: 1.375rem;--mat-sys-title-large-tracking: 0;--mat-sys-title-large-weight: 400;--mat-sys-title-medium: 500 1rem / 1.5rem Roboto;--mat-sys-title-medium-font: Roboto;--mat-sys-title-medium-line-height: 1.5rem;--mat-sys-title-medium-size: 1rem;--mat-sys-title-medium-tracking: 0.009rem;--mat-sys-title-medium-weight: 500;--mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;--mat-sys-title-small-font: Roboto;--mat-sys-title-small-line-height: 1.25rem;--mat-sys-title-small-size: 0.875rem;--mat-sys-title-small-tracking: 0.006rem;--mat-sys-title-small-weight: 500;--mat-sys-corner-extra-large: 28px;--mat-sys-corner-extra-large-top: 28px 28px 0 0;--mat-sys-corner-extra-small: 4px;--mat-sys-corner-extra-small-top: 4px 4px 0 0;--mat-sys-corner-full: 9999px;--mat-sys-corner-large: 16px;--mat-sys-corner-large-end: 0 16px 16px 0;--mat-sys-corner-large-start: 16px 0 0 16px;--mat-sys-corner-large-top: 16px 16px 0 0;--mat-sys-corner-medium: 12px;--mat-sys-corner-none: 0;--mat-sys-corner-small: 8px;--mat-sys-dragged-state-layer-opacity: 0.16;--mat-sys-focus-state-layer-opacity: 0.12;--mat-sys-hover-state-layer-opacity: 0.08;--mat-sys-pressed-state-layer-opacity: 0.12}

package/progress/_m2-progress.scss

@@ -1,53 +1,38 @@
 @use 'sass:map';
+@use 'sass:meta';
 @use '@angular/material' as mat;
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return (
-    progress-container-shape: 4px,
-  );
-}
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
 
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $is-dark: mat.get-theme-type($theme) == dark;
-
-  @return (
-    progress-track-color: mat.get-theme-color($theme, background, hover),
-    progress-indicator-color: mat.get-theme-color($theme, foreground, divider),
-    progress-text-color: mat.get-theme-color($theme, foreground, text),
-    progress-info-indicator-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 500)),
-    progress-info-text-color: white,
-    progress-success-indicator-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 500)),
-    progress-success-text-color: white,
-    progress-warning-indicator-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, if($is-dark, 900, 500)),
-    progress-warning-text-color: white,
-    progress-danger-indicator-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 500)),
-    progress-danger-text-color: white,
-  );
-}
+  $is-dark: false;
+  @if meta.type-of($theme) == 'map' {
+    $is-dark: mat.get-theme-type($theme) == dark;
+  }
 
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
   @return (
-    progress-text-size: 12px,
-  );
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return mat.private-deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
+    base: (
+      progress-container-shape: 4px,
+    ),
+    color: (
+      progress-track-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+      progress-indicator-color: map.get($system, outline),
+      progress-text-color: map.get($system, on-surface),
+      progress-info-indicator-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 500)),
+      progress-info-text-color: white,
+      progress-success-indicator-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 500)),
+      progress-success-text-color: white,
+      progress-warning-indicator-color: mat.m2-get-color-from-palette(mat.$m2-orange-palette, if($is-dark, 900, 500)),
+      progress-warning-text-color: white,
+      progress-danger-indicator-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 500)),
+      progress-danger-text-color: white,
+    ),
+    typography: (
+      progress-text-size: 12px,
+    ),
+    density: ()
   );
 }

package/progress/_progress-theme.scss

@@ -5,47 +5,39 @@
 @use './m3-progress';
 
 @mixin base($theme) {
+  $tokens: map.get(m2-progress.get-tokens($theme), base);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-progress.get-tokens($theme), base));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-progress.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-progress.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: map.get(m2-progress.get-tokens($theme), color);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-progress.get-tokens($theme), color));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(m2-progress.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-progress.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: map.get(m2-progress.get-tokens($theme), typography);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-progress.get-tokens($theme), typography));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(m2-progress.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-progress.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: map.get(m2-progress.get-tokens($theme), density);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-progress.get-tokens($theme), density));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-progress.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-progress.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -68,8 +60,7 @@
     @include color($theme);
     @include density($theme);
     @include typography($theme);
-  }
-  @else {
+  } @else {
     @include base($theme);
     @if mat.theme-has($theme, color) {
       @include color($theme);

package/select/_m2-select.scss

@@ -1,79 +1,52 @@
 @use 'sass:map';
-@use 'sass:math';
-@use '@angular/material' as mat;
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/style/elevation';
 
-// Generates the tokens used to theme the option based on a palette.
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
+@function get-tokens($theme) {
   @return (
-    select-option-selected-state-text-color: mat.get-theme-color($theme, $palette-name),
-  );
-}
-
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return (
-    select-container-shape: 4px,
-    select-container-elevation-shadow: elevation.get-box-shadow(8),
+    base: (
+      select-container-shape: 4px,
+      select-container-elevation-shadow: elevation.get-box-shadow(8),
+    ),
+    color: private-get-color-palette-color-tokens($theme, primary),
+    typography: (),
+    density: ()
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $text-color: mat.get-theme-color($theme, foreground, text);
-  $hint-text-color: mat.get-theme-color($theme, foreground, hint-text);
-  $secondary-text-color: mat.get-theme-color($theme, foreground, secondary-text);
-  $disabled-text-color: mat.get-theme-color($theme, foreground, disabled-text);
-  $divider-color: mat.get-theme-color($theme, foreground, divider);
-  $hover-color: mat.get-theme-color($theme, background, hover);
-  $palette-tokens: private-get-color-palette-color-tokens($theme, primary);
-
-  @return map.merge($palette-tokens, (
-    select-container-text-color: $text-color,
-    select-placeholder-text-color: $hint-text-color,
-    select-disabled-text-color: $hint-text-color,
-
-    select-multiple-value-background-color: mat.get-theme-color($theme, background, unselected-chip),
-    select-multiple-value-outline-color: $divider-color,
-    select-multiple-value-disabled-outline-color: mat.get-theme-color($theme, foreground, divider, 0.06),
-    select-multiple-value-icon-hover-background-color: $divider-color,
-
-    select-clear-icon-color: $secondary-text-color,
-    select-clear-icon-hover-color: mat.get-theme-color($theme, warn),
-
-    select-enabled-arrow-color: $secondary-text-color,
-    select-disabled-arrow-color: $disabled-text-color,
-    select-invalid-arrow-color: mat.get-theme-color($theme, warn),
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
-    select-panel-background-color: mat.get-theme-color($theme, background, card),
-    select-panel-divider-color: $divider-color,
-    select-optgroup-label-text-color: $secondary-text-color,
-    select-option-label-text-color: $text-color,
-    select-option-selected-state-background-color: $hover-color,
-    select-option-hover-state-background-color: $hover-color,
-    select-option-disabled-state-text-color: $hint-text-color,
-  ));
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return mat.private-deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
+  @return (
+    select-container-text-color: map.get($system, on-surface),
+    select-placeholder-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    select-disabled-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+
+    select-multiple-value-background-color: map.get($system, outline),
+    select-multiple-value-outline-color: map.get($system, outline),
+    select-multiple-value-disabled-outline-color: m3-utils.color-with-opacity(map.get($system, outline), 38%),
+    select-multiple-value-icon-hover-background-color: map.get($system, outline),
+
+    select-clear-icon-color: map.get($system, on-surface-variant),
+    select-clear-icon-hover-color: map.get($system, error),
+
+    select-enabled-arrow-color: map.get($system, on-surface-variant),
+    select-disabled-arrow-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    select-invalid-arrow-color: map.get($system, error),
+
+    select-panel-background-color: map.get($system, surface),
+    select-panel-divider-color: map.get($system, outline),
+    select-optgroup-label-text-color: map.get($system, on-surface-variant),
+    select-option-label-text-color: map.get($system, on-surface),
+    select-option-selected-state-text-color: map.get($system, primary),
+    select-option-selected-state-background-color: m3-utils.color-with-opacity(
+      map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+    select-option-hover-state-background-color: m3-utils.color-with-opacity(
+      map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+    select-option-disabled-state-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
   );
 }
+

package/select/_m3-select.scss

@@ -35,7 +35,8 @@
       select-option-label-text-color: map.get($system, on-surface),
       select-option-selected-state-background-color: map.get($system, secondary-container),
       select-option-selected-state-text-color: map.get($system, on-surface),
-      select-option-hover-state-background-color: m3-utils.color-with-opacity(map.get($system, on-surface), map.get($system,hover-state-layer-opacity)),
+      select-option-hover-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system,hover-state-layer-opacity)),
       select-option-disabled-state-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
     ),
     typography: (),

package/select/_select-theme.scss

@@ -5,59 +5,53 @@
 @use './m3-select';
 
 @mixin base($theme) {
+  $tokens: map.get(m2-select.get-tokens($theme), base);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-select.get-tokens($theme), base));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-select.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-select.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-select.get-tokens($theme), color);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-select.get-tokens($theme, $color-variant), color));
+    $tokens: map.get(m3-select.get-tokens($theme, $color-variant), color);
   }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-select.get-color-tokens($theme));
-    }
 
+  @include token-utils.values($tokens);
+
+  @if mat.get-theme-version($theme) != 1 {
     .ng-dropdown-panel {
       &.mat-accent {
-        $accent-tokens: m2-select.private-get-color-palette-color-tokens($theme, accent);
-        @include token-utils.create-token-values-mixed($accent-tokens);
+        $tokens: m2-select.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
       }
 
       &.mat-warn {
-        $warn-tokens: m2-select.private-get-color-palette-color-tokens($theme, warn);
-        @include token-utils.create-token-values-mixed($warn-tokens);
+        $tokens: m2-select.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values($tokens);
       }
     }
   }
 }
 
 @mixin typography($theme) {
+  $tokens: map.get(m2-select.get-tokens($theme), typography);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-select.get-tokens($theme), typography));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-select.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-select.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: map.get(m2-select.get-tokens($theme), density);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-select.get-tokens($theme), density));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-select.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-select.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -80,8 +74,7 @@
     @include color($theme, $color-variant);
     @include density($theme);
     @include typography($theme);
-  }
-  @else {
+  } @else {
     @include base($theme);
     @if mat.theme-has($theme, color) {
       @include color($theme);

package/split/_m2-split.scss

@@ -3,45 +3,24 @@
 @use 'sass:meta';
 @use '@angular/material' as mat;
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 
-@function private-get-color-palette-color-tokens($theme, $palette-name) {
+@function get-tokens($theme) {
   @return (
-    split-gutter-hover-state-background-color: mat.get-theme-color($theme, $palette-name, text),
+    base: (),
+    color: private-get-color-palette-color-tokens($theme, primary),
+    typography: (),
+    density: ()
   );
 }
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return ();
-}
-
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $gutter-tokens: private-get-color-palette-color-tokens($theme, primary);
-
-  @return mat.private-merge-all($gutter-tokens, (
-    split-gutter-background-color: mat.get-theme-color($theme, foreground, divider),
-  ));
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return mat.private-deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
-  );
+  @return (
+    split-gutter-background-color: map.get($system, outline),
+    split-gutter-hover-state-background-color: map.get($system, primary),
+  )
 }

package/split/_split-theme.scss

@@ -5,59 +5,51 @@
 @use './m3-split';
 
 @mixin base($theme) {
+  $tokens: map.get(m2-split.get-tokens($theme), base);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-split.get-tokens($theme), base));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-split.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-split.get-tokens($theme), base);
   }
 }
 
 @mixin color($theme, $color-variant: null) {
+  $tokens: map.get(m2-split.get-tokens($theme), color);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-split.get-tokens($theme, $color-variant), color));
+    $tokens: map.get(m3-split.get-tokens($theme, $color-variant), color);
   }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-split.get-color-tokens($theme));
-    }
 
-    .mtx-split>.mtx-split-gutter {
+  @include token-utils.values($tokens);
+
+  @if mat.get-theme-version($theme) != 1 {
+    .mtx-split > .mtx-split-gutter {
       &.mat-accent:hover {
-        $accent-tokens: m2-split.private-get-color-palette-color-tokens($theme, accent);
-        @include token-utils.create-token-values-mixed($accent-tokens);
+        $tokens: m2-split.private-get-color-palette-color-tokens($theme, secondary);
+        @include token-utils.values($tokens);
       }
 
       &.mat-warn:hover {
-        $warn-tokens: m2-split.private-get-color-palette-color-tokens($theme, warn);
-        @include token-utils.create-token-values-mixed($warn-tokens);
+        $tokens: m2-split.private-get-color-palette-color-tokens($theme, error);
+        @include token-utils.values($tokens);
       }
     }
   }
 }
 
 @mixin typography($theme) {
+  $tokens: map.get(m2-split.get-tokens($theme), typography);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-split.get-tokens($theme), typography));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-split.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-split.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: map.get(m2-split.get-tokens($theme), density);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-split.get-tokens($theme), density));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-split.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-split.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -80,8 +72,7 @@
     @include color($theme, $color-variant);
     @include density($theme);
     @include typography($theme);
-  }
-  @else {
+  } @else {
     @include base($theme);
     @if mat.theme-has($theme, color) {
       @include color($theme);