@angular/material 20.1.0-next.0 → 20.1.0-next.2

package/menu/index.d.ts

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, OnDestroy, TemplateRef, EventEmitter, AfterViewInit, AfterContentInit, OnInit, QueryList } from '@angular/core';
+import { InjectionToken, OnDestroy, TemplateRef, EventEmitter, AfterViewInit, AfterContentInit, OnInit, QueryList, ElementRef } from '@angular/core';
 import { FocusOrigin, FocusableOption } from '@angular/cdk/a11y';
 import { Direction } from '@angular/cdk/bidi';
+import * as rxjs from 'rxjs';
 import { Subject, Observable } from 'rxjs';
 import * as i2 from '@angular/cdk/overlay';
-import { ScrollStrategy } from '@angular/cdk/overlay';
+import { ScrollStrategy, OverlayRef, FlexibleConnectedPositionStrategyOrigin } from '@angular/cdk/overlay';
 import { M as MatRippleModule } from '../index.d-C5neTPvr.js';
 import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
 import * as i5 from '@angular/cdk/scrolling';
@@ -327,10 +328,11 @@ declare const MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER: {
  */
 declare const MENU_PANEL_TOP_PADDING = 8;
 /** Directive applied to an element that should trigger a `mat-menu`. */
-declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
-    private _element;
+declare abstract class MatMenuTriggerBase implements OnDestroy {
+    private readonly _canHaveBackdrop;
+    protected _element: ElementRef<HTMLElement>;
     private _viewContainerRef;
-    private _menuItemInstance;
+    protected _menuItemInstance: MatMenuItem;
     private _dir;
     private _focusMonitor;
     private _ngZone;
@@ -338,25 +340,97 @@ declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
     private _scrollStrategy;
     private _changeDetectorRef;
     private _animationsDisabled;
-    private _cleanupTouchstart;
     private _portal;
-    private _overlayRef;
+    protected _overlayRef: OverlayRef | null;
     private _menuOpen;
     private _closingActionsSubscription;
-    private _hoverSubscription;
     private _menuCloseSubscription;
     private _pendingRemoval;
     /**
      * We're specifically looking for a `MatMenu` here since the generic `MatMenuPanel`
      * interface lacks some functionality around nested menus and animations.
      */
-    private _parentMaterialMenu;
+    protected _parentMaterialMenu: MatMenu | undefined;
     /**
      * Cached value of the padding of the parent menu panel.
      * Used to offset sub-menus to compensate for the padding.
      */
     private _parentInnerPadding;
-    _openedBy: Exclude<FocusOrigin, 'program' | null> | undefined;
+    protected _openedBy: Exclude<FocusOrigin, 'program' | null> | undefined;
+    /** Data that will be passed to the menu panel. */
+    abstract menuData: any;
+    /** Whether focus should be restored when the menu is closed. */
+    abstract restoreFocus: boolean;
+    /** Menu currently assigned to the trigger. */
+    protected get _menu(): MatMenuPanel | null;
+    protected set _menu(menu: MatMenuPanel | null);
+    private _menuInternal;
+    /** Event emitted when the associated menu is opened. */
+    abstract menuOpened: EventEmitter<void>;
+    /** Event emitted when the associated menu is closed. */
+    abstract menuClosed: EventEmitter<void>;
+    /** Gets the origin for the overlay. */
+    protected abstract _getOverlayOrigin(): FlexibleConnectedPositionStrategyOrigin;
+    protected abstract _getOutsideClickStream(overlayRef: OverlayRef): Observable<unknown>;
+    constructor(_canHaveBackdrop: boolean);
+    ngOnDestroy(): void;
+    /** Whether the menu is open. */
+    get menuOpen(): boolean;
+    /** The text direction of the containing app. */
+    get dir(): Direction;
+    /** Whether the menu triggers a sub-menu or a top-level one. */
+    protected _triggersSubmenu(): boolean;
+    protected _closeMenu(): void;
+    /** Internal method to open menu providing option to auto focus on first item. */
+    protected _openMenu(autoFocus: boolean): void;
+    /**
+     * Focuses the menu trigger.
+     * @param origin Source of the menu trigger's focus.
+     */
+    focus(origin?: FocusOrigin, options?: FocusOptions): void;
+    /** Closes the menu and does the necessary cleanup. */
+    protected _destroyMenu(reason: MenuCloseReason): void;
+    private _setIsMenuOpen;
+    /**
+     * This method creates the overlay from the provided menu's template and saves its
+     * OverlayRef so that it can be attached to the DOM when openMenu is called.
+     */
+    private _createOverlay;
+    /**
+     * This method builds the configuration object needed to create the overlay, the OverlayState.
+     * @returns OverlayConfig
+     */
+    private _getOverlayConfig;
+    /**
+     * Listens to changes in the position of the overlay and sets the correct classes
+     * on the menu based on the new position. This ensures the animation origin is always
+     * correct, even if a fallback position is used for the overlay.
+     */
+    private _subscribeToPositions;
+    /**
+     * Sets the appropriate positions on a position strategy
+     * so the overlay connects with the trigger correctly.
+     * @param positionStrategy Strategy whose position to update.
+     */
+    private _setPosition;
+    /** Returns a stream that emits whenever an action that should close the menu occurs. */
+    private _menuClosingActions;
+    /** Gets the portal that should be attached to the overlay. */
+    private _getPortal;
+    /**
+     * Determines whether the trigger owns a specific menu panel, at the current point in time.
+     * This allows us to distinguish the case where the same panel is passed into multiple triggers
+     * and multiple are open at a time.
+     */
+    private _ownsMenu;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuTriggerBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTriggerBase, never, never, {}, {}, never, never, true, never>;
+}
+
+/** Directive applied to an element that should trigger a `mat-menu`. */
+declare class MatMenuTrigger extends MatMenuTriggerBase implements AfterContentInit, OnDestroy {
+    private _cleanupTouchstart;
+    private _hoverSubscription;
     /**
      * @deprecated
      * @breaking-change 8.0.0
@@ -366,7 +440,6 @@ declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
     /** References the menu instance that the trigger is associated with. */
     get menu(): MatMenuPanel | null;
     set menu(menu: MatMenuPanel | null);
-    private _menu;
     /** Data to be passed along to any lazily-rendered content. */
     menuData: any;
     /**
@@ -392,58 +465,22 @@ declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
      */
     readonly onMenuClose: EventEmitter<void>;
     constructor(...args: unknown[]);
-    ngAfterContentInit(): void;
-    ngOnDestroy(): void;
-    /** Whether the menu is open. */
-    get menuOpen(): boolean;
-    /** The text direction of the containing app. */
-    get dir(): Direction;
     /** Whether the menu triggers a sub-menu or a top-level one. */
     triggersSubmenu(): boolean;
     /** Toggles the menu between the open and closed states. */
     toggleMenu(): void;
     /** Opens the menu. */
     openMenu(): void;
-    /** Internal method to open menu providing option to auto focus on first item. */
-    private _openMenu;
     /** Closes the menu. */
     closeMenu(): void;
-    /**
-     * Focuses the menu trigger.
-     * @param origin Source of the menu trigger's focus.
-     */
-    focus(origin?: FocusOrigin, options?: FocusOptions): void;
     /**
      * Updates the position of the menu to ensure that it fits all options within the viewport.
      */
     updatePosition(): void;
-    /** Closes the menu and does the necessary cleanup. */
-    private _destroyMenu;
-    private _setIsMenuOpen;
-    /**
-     * This method creates the overlay from the provided menu's template and saves its
-     * OverlayRef so that it can be attached to the DOM when openMenu is called.
-     */
-    private _createOverlay;
-    /**
-     * This method builds the configuration object needed to create the overlay, the OverlayState.
-     * @returns OverlayConfig
-     */
-    private _getOverlayConfig;
-    /**
-     * Listens to changes in the position of the overlay and sets the correct classes
-     * on the menu based on the new position. This ensures the animation origin is always
-     * correct, even if a fallback position is used for the overlay.
-     */
-    private _subscribeToPositions;
-    /**
-     * Sets the appropriate positions on a position strategy
-     * so the overlay connects with the trigger correctly.
-     * @param positionStrategy Strategy whose position to update.
-     */
-    private _setPosition;
-    /** Returns a stream that emits whenever an action that should close the menu occurs. */
-    private _menuClosingActions;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    protected _getOverlayOrigin(): i0.ElementRef<HTMLElement>;
+    protected _getOutsideClickStream(overlayRef: OverlayRef): rxjs.Observable<MouseEvent>;
     /** Handles mouse presses on the trigger. */
     _handleMousedown(event: MouseEvent): void;
     /** Handles key presses on the trigger. */
@@ -452,21 +489,68 @@ declare class MatMenuTrigger implements AfterContentInit, OnDestroy {
     _handleClick(event: MouseEvent): void;
     /** Handles the cases where the user hovers over the trigger. */
     private _handleHover;
-    /** Gets the portal that should be attached to the overlay. */
-    private _getPortal;
-    /**
-     * Determines whether the trigger owns a specific menu panel, at the current point in time.
-     * This allows us to distinguish the case where the same panel is passed into multiple triggers
-     * and multiple are open at a time.
-     */
-    private _ownsMenu;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], { "_deprecatedMatMenuTriggerFor": { "alias": "mat-menu-trigger-for"; "required": false; }; "menu": { "alias": "matMenuTriggerFor"; "required": false; }; "menuData": { "alias": "matMenuTriggerData"; "required": false; }; "restoreFocus": { "alias": "matMenuTriggerRestoreFocus"; "required": false; }; }, { "menuOpened": "menuOpened"; "onMenuOpen": "onMenuOpen"; "menuClosed": "menuClosed"; "onMenuClose": "onMenuClose"; }, never, never, true, never>;
 }
 
+/**
+ * Trigger that opens a menu whenever the user right-clicks within its host element.
+ */
+declare class MatContextMenuTrigger extends MatMenuTriggerBase implements OnDestroy {
+    private _point;
+    private _triggerPressedControl;
+    private _rootNode;
+    private _document;
+    private _viewportRuler;
+    private _scrollDispatcher;
+    private _scrollSubscription;
+    /** References the menu instance that the trigger is associated with. */
+    get menu(): MatMenuPanel | null;
+    set menu(menu: MatMenuPanel | null);
+    /** Data to be passed along to any lazily-rendered content. */
+    menuData: any;
+    /**
+     * Whether focus should be restored when the menu is closed.
+     * Note that disabling this option can have accessibility implications
+     * and it's up to you to manage focus, if you decide to turn it off.
+     */
+    restoreFocus: boolean;
+    /** Whether the context menu is disabled. */
+    disabled: boolean;
+    /** Event emitted when the associated menu is opened. */
+    readonly menuOpened: EventEmitter<void>;
+    /** Event emitted when the associated menu is closed. */
+    readonly menuClosed: EventEmitter<void>;
+    constructor();
+    ngOnDestroy(): void;
+    /** Handler for `contextmenu` events. */
+    protected _handleContextMenuEvent(event: MouseEvent): void;
+    protected _destroyMenu(reason: MenuCloseReason): void;
+    protected _getOverlayOrigin(): {
+        x: number;
+        y: number;
+        initialX: number;
+        initialY: number;
+        initialScrollX: number;
+        initialScrollY: number;
+    };
+    protected _getOutsideClickStream(overlayRef: OverlayRef): rxjs.Observable<MouseEvent>;
+    /** Checks whether an element is within the trigger or the opened overlay. */
+    private _isWithinMenuOrTrigger;
+    /** Opens the context menu. */
+    private _openContextMenu;
+    /** Initializes the point representing the origin relative to which the menu will be rendered. */
+    private _initializePoint;
+    /** Refreshes the position of the overlay. */
+    private _updatePosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatContextMenuTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatContextMenuTrigger, "[matContextMenuTriggerFor]", ["matContextMenuTrigger"], { "menu": { "alias": "matContextMenuTriggerFor"; "required": true; }; "menuData": { "alias": "matContextMenuTriggerData"; "required": false; }; "restoreFocus": { "alias": "matContextMenuTriggerRestoreFocus"; "required": false; }; "disabled": { "alias": "matContextMenuTriggerDisabled"; "required": false; }; }, { "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+
 declare class MatMenuModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatMenuModule, never, [typeof MatRippleModule, typeof MatCommonModule, typeof i2.OverlayModule, typeof MatMenu, typeof MatMenuItem, typeof MatMenuContent, typeof MatMenuTrigger], [typeof i5.CdkScrollableModule, typeof MatMenu, typeof MatCommonModule, typeof MatMenuItem, typeof MatMenuContent, typeof MatMenuTrigger]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatMenuModule, never, [typeof MatRippleModule, typeof MatCommonModule, typeof i2.OverlayModule, typeof MatMenu, typeof MatMenuItem, typeof MatMenuContent, typeof MatMenuTrigger, typeof MatContextMenuTrigger], [typeof i5.CdkScrollableModule, typeof MatMenu, typeof MatCommonModule, typeof MatMenuItem, typeof MatMenuContent, typeof MatMenuTrigger, typeof MatContextMenuTrigger]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatMenuModule>;
 }
 
@@ -495,5 +579,5 @@ declare const fadeInItems: any;
  */
 declare const transformMenu: any;
 
-export { MAT_MENU_CONTENT, MAT_MENU_DEFAULT_OPTIONS, MAT_MENU_PANEL, MAT_MENU_SCROLL_STRATEGY, MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER, MENU_PANEL_TOP_PADDING, MatMenu, MatMenuContent, MatMenuItem, MatMenuModule, MatMenuTrigger, fadeInItems, matMenuAnimations, transformMenu };
+export { MAT_MENU_CONTENT, MAT_MENU_DEFAULT_OPTIONS, MAT_MENU_PANEL, MAT_MENU_SCROLL_STRATEGY, MAT_MENU_SCROLL_STRATEGY_FACTORY_PROVIDER, MENU_PANEL_TOP_PADDING, MatContextMenuTrigger, MatMenu, MatMenuContent, MatMenuItem, MatMenuModule, MatMenuTrigger, fadeInItems, matMenuAnimations, transformMenu };
 export type { MatMenuDefaultOptions, MatMenuPanel, MenuCloseReason, MenuPositionX, MenuPositionY };

package/menu/testing/index.d.ts

@@ -12,6 +12,9 @@ interface MenuItemHarnessFilters extends BaseHarnessFilters {
     /** Only find instances that have a sub-menu. */
     hasSubmenu?: boolean;
 }
+/** A set of criteria that can be used to filter a list of `MatContextMenuHarness` instances. */
+interface ContextMenuHarnessFilters extends BaseHarnessFilters {
+}
 
 /** Harness for interacting with a mat-menu in tests. */
 declare class MatMenuHarness extends ContentContainerComponentHarness<string> {
@@ -87,5 +90,50 @@ declare class MatMenuItemHarness extends ContentContainerComponentHarness<string
     getSubmenu(): Promise<MatMenuHarness | null>;
 }
 
-export { MatMenuHarness, MatMenuItemHarness };
-export type { MenuHarnessFilters, MenuItemHarnessFilters };
+/** Harness for interacting with context menus in tests. */
+declare class MatContextMenuHarness extends ContentContainerComponentHarness<string> {
+    private _documentRootLocator;
+    /** The selector for the host element of a `MatContextMenu` instance. */
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a context menu with specific
+     * attributes.
+     * @param options Options for filtering which menu instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatContextMenuHarness>(this: ComponentHarnessConstructor<T>, options?: ContextMenuHarnessFilters): HarnessPredicate<T>;
+    /** Whether the menu is open. */
+    isOpen(): Promise<boolean>;
+    /**
+     * Opens the menu.
+     * @param relativeX X coordinate, relative to the element, to dispatch the opening click at.
+     * @param relativeY Y coordinate, relative to the element, to dispatch the opening click at.
+     */
+    open(relativeX?: number, relativeY?: number): Promise<void>;
+    /** Closes the menu. */
+    close(): Promise<void>;
+    /** Gets whether the context menu trigger is disabled. */
+    isDisabled(): Promise<boolean>;
+    /**
+     * Gets a list of `MatMenuItemHarness` representing the items in the menu.
+     * @param filters Optionally filters which menu items are included.
+     */
+    getItems(filters?: Omit<MenuItemHarnessFilters, 'ancestor'>): Promise<MatMenuItemHarness[]>;
+    /**
+     * Clicks an item in the menu, and optionally continues clicking items in subsequent sub-menus.
+     * @param itemFilter A filter used to represent which item in the menu should be clicked. The
+     *     first matching menu item will be clicked.
+     * @param subItemFilters A list of filters representing the items to click in any subsequent
+     *     sub-menus. The first item in the sub-menu matching the corresponding filter in
+     *     `subItemFilters` will be clicked.
+     */
+    clickItem(itemFilter: Omit<MenuItemHarnessFilters, 'ancestor'>, ...subItemFilters: Omit<MenuItemHarnessFilters, 'ancestor'>[]): Promise<void>;
+    protected getRootHarnessLoader(): Promise<HarnessLoader>;
+    /** Gets the menu panel associated with this menu. */
+    private _getMenuPanel;
+    /** Gets the id of the menu panel associated with this menu. */
+    private _getPanelId;
+}
+
+export { MatContextMenuHarness, MatMenuHarness, MatMenuItemHarness };
+export type { ContextMenuHarnessFilters, MenuHarnessFilters, MenuItemHarnessFilters };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/material",
-  "version": "20.1.0-next.0",
+  "version": "20.1.0-next.2",
   "description": "Angular Material",
   "repository": {
     "type": "git",
@@ -353,7 +353,7 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": "20.1.0-next.0",
+    "@angular/cdk": "20.1.0-next.2",
     "@angular/core": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
     "@angular/common": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
     "@angular/forms": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",

package/paginator/_m2-paginator.scss

@@ -3,6 +3,7 @@
 @use '../core/theming/theming';
 @use '../core/theming/inspection';
 @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.
@@ -18,21 +19,20 @@
     paginator-container-text-color: map.get($system, on-surface),
     paginator-container-background-color: map.get($system, surface),
     paginator-enabled-icon-color: map.get($system, on-surface-variant),
-    paginator-disabled-icon-color: inspection.get-theme-color($theme, foreground, base, 0.12),
+    paginator-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    paginator-container-text-font: inspection.get-theme-typography($theme, caption, font-family),
-    paginator-container-text-line-height:
-        inspection.get-theme-typography($theme, caption, line-height),
-    paginator-container-text-size: inspection.get-theme-typography($theme, caption, font-size),
-    paginator-container-text-tracking:
-        inspection.get-theme-typography($theme, caption, letter-spacing),
-    paginator-container-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
-    paginator-select-trigger-text-size: inspection.get-theme-typography($theme, caption, font-size),
+    paginator-container-text-font: map.get($system, body-small-font),
+    paginator-container-text-line-height: map.get($system, body-small-line-height),
+    paginator-container-text-size: map.get($system, body-small-size),
+    paginator-container-text-tracking: map.get($system, body-small-tracking),
+    paginator-container-text-weight: map.get($system, body-small-weight),
+    paginator-select-trigger-text-size: map.get($system, body-small-size),
   );
 }
 

package/paginator/_paginator-theme.scss

@@ -1,47 +1,44 @@
 @use 'sass:map';
 @use './m2-paginator';
 @use './m3-paginator';
-@use '../core/style/sass-utils';
 @use '../core/typography/typography';
-@use '../core/theming/theming';
 @use '../core/theming/inspection';
 @use '../core/tokens/token-utils';
 
 @mixin base($theme) {
+  $tokens: m2-paginator.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-paginator.get-tokens($theme), base));
-  } @else {
+    $tokens: map.get(m3-paginator.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: m2-paginator.get-color-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-paginator.get-tokens($theme), color));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-paginator.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-paginator.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: m2-paginator.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-paginator.get-tokens($theme), typography));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-paginator.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-paginator.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: m2-paginator.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-paginator.get-tokens($theme), density));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-paginator.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-paginator.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -59,23 +56,21 @@
 }
 
 @mixin theme($theme) {
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') {
-    @if inspection.get-theme-version($theme) == 1 {
-      @include base($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
       @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }

package/prebuilt-themes/azure-blue.css

@@ -1 +1 @@
-html{--mat-sys-background: #faf9fd;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #f2f0f4;--mat-sys-inverse-primary: #abc7ff;--mat-sys-inverse-surface: #2f3033;--mat-sys-on-background: #1a1b1f;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #93000a;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #00458f;--mat-sys-on-primary-fixed: #001b3f;--mat-sys-on-primary-fixed-variant: #00458f;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #3e4759;--mat-sys-on-secondary-fixed: #131c2b;--mat-sys-on-secondary-fixed-variant: #3e4759;--mat-sys-on-surface: #1a1b1f;--mat-sys-on-surface-variant: #44474e;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #0000ef;--mat-sys-on-tertiary-fixed: #00006e;--mat-sys-on-tertiary-fixed-variant: #0000ef;--mat-sys-outline: #74777f;--mat-sys-outline-variant: #c4c6d0;--mat-sys-primary: #005cbb;--mat-sys-primary-container: #d7e3ff;--mat-sys-primary-fixed: #d7e3ff;--mat-sys-primary-fixed-dim: #abc7ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #565e71;--mat-sys-secondary-container: #dae2f9;--mat-sys-secondary-fixed: #dae2f9;--mat-sys-secondary-fixed-dim: #bec6dc;--mat-sys-shadow: #000000;--mat-sys-surface: #faf9fd;--mat-sys-surface-bright: #faf9fd;--mat-sys-surface-container: #efedf0;--mat-sys-surface-container-high: #e9e7eb;--mat-sys-surface-container-highest: #e3e2e6;--mat-sys-surface-container-low: #f4f3f6;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #dbd9dd;--mat-sys-surface-tint: #005cbb;--mat-sys-surface-variant: #e0e2ec;--mat-sys-tertiary: #343dff;--mat-sys-tertiary-container: #e0e0ff;--mat-sys-tertiary-fixed: #e0e0ff;--mat-sys-tertiary-fixed-dim: #bec2ff;--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f}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;--mat-sys-display-large-font: Roboto;--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;--mat-sys-display-medium-font: Roboto;--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;--mat-sys-display-small-font: Roboto;--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;--mat-sys-headline-large-font: Roboto;--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;--mat-sys-headline-medium-font: Roboto;--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;--mat-sys-headline-small-font: Roboto;--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;--mat-sys-title-large-font: Roboto;--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: #faf9fd;--mat-sys-error: #ba1a1a;--mat-sys-error-container: #ffdad6;--mat-sys-inverse-on-surface: #f2f0f4;--mat-sys-inverse-primary: #abc7ff;--mat-sys-inverse-surface: #2f3033;--mat-sys-on-background: #1a1b1f;--mat-sys-on-error: #ffffff;--mat-sys-on-error-container: #93000a;--mat-sys-on-primary: #ffffff;--mat-sys-on-primary-container: #00458f;--mat-sys-on-primary-fixed: #001b3f;--mat-sys-on-primary-fixed-variant: #00458f;--mat-sys-on-secondary: #ffffff;--mat-sys-on-secondary-container: #3e4759;--mat-sys-on-secondary-fixed: #131c2b;--mat-sys-on-secondary-fixed-variant: #3e4759;--mat-sys-on-surface: #1a1b1f;--mat-sys-on-surface-variant: #44474e;--mat-sys-on-tertiary: #ffffff;--mat-sys-on-tertiary-container: #0000ef;--mat-sys-on-tertiary-fixed: #00006e;--mat-sys-on-tertiary-fixed-variant: #0000ef;--mat-sys-outline: #74777f;--mat-sys-outline-variant: #c4c6d0;--mat-sys-primary: #005cbb;--mat-sys-primary-container: #d7e3ff;--mat-sys-primary-fixed: #d7e3ff;--mat-sys-primary-fixed-dim: #abc7ff;--mat-sys-scrim: #000000;--mat-sys-secondary: #565e71;--mat-sys-secondary-container: #dae2f9;--mat-sys-secondary-fixed: #dae2f9;--mat-sys-secondary-fixed-dim: #bec6dc;--mat-sys-shadow: #000000;--mat-sys-surface: #faf9fd;--mat-sys-surface-bright: #faf9fd;--mat-sys-surface-container: #efedf0;--mat-sys-surface-container-high: #e9e7eb;--mat-sys-surface-container-highest: #e3e2e6;--mat-sys-surface-container-low: #f4f3f6;--mat-sys-surface-container-lowest: #ffffff;--mat-sys-surface-dim: #dbd9dd;--mat-sys-surface-tint: #005cbb;--mat-sys-surface-variant: #e0e2ec;--mat-sys-tertiary: #343dff;--mat-sys-tertiary-container: #e0e0ff;--mat-sys-tertiary-fixed: #e0e0ff;--mat-sys-tertiary-fixed-dim: #bec2ff;--mat-sys-neutral-variant20: #2d3038;--mat-sys-neutral10: #1a1b1f;--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;--mat-sys-display-large-font: Roboto;--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;--mat-sys-display-medium-font: Roboto;--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;--mat-sys-display-small-font: Roboto;--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;--mat-sys-headline-large-font: Roboto;--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;--mat-sys-headline-medium-font: Roboto;--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;--mat-sys-headline-small-font: Roboto;--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;--mat-sys-title-large-font: Roboto;--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/prebuilt-themes/cyan-orange.css

@@ -1 +1 @@
-html{--mat-sys-background: #101414;--mat-sys-error: #ffb4ab;--mat-sys-error-container: #93000a;--mat-sys-inverse-on-surface: #2d3131;--mat-sys-inverse-primary: #006a6a;--mat-sys-inverse-surface: #e0e3e2;--mat-sys-on-background: #e0e3e2;--mat-sys-on-error: #690005;--mat-sys-on-error-container: #ffdad6;--mat-sys-on-primary: #003737;--mat-sys-on-primary-container: #00fbfb;--mat-sys-on-primary-fixed: #002020;--mat-sys-on-primary-fixed-variant: #004f4f;--mat-sys-on-secondary: #1b3534;--mat-sys-on-secondary-container: #cce8e7;--mat-sys-on-secondary-fixed: #051f1f;--mat-sys-on-secondary-fixed-variant: #324b4b;--mat-sys-on-surface: #e0e3e2;--mat-sys-on-surface-variant: #dae5e4;--mat-sys-on-tertiary: #502400;--mat-sys-on-tertiary-container: #ffdcc7;--mat-sys-on-tertiary-fixed: #311300;--mat-sys-on-tertiary-fixed-variant: #723600;--mat-sys-outline: #889392;--mat-sys-outline-variant: #3f4948;--mat-sys-primary: #00dddd;--mat-sys-primary-container: #004f4f;--mat-sys-primary-fixed: #00fbfb;--mat-sys-primary-fixed-dim: #00dddd;--mat-sys-scrim: #000000;--mat-sys-secondary: #b0cccb;--mat-sys-secondary-container: #324b4b;--mat-sys-secondary-fixed: #cce8e7;--mat-sys-secondary-fixed-dim: #b0cccb;--mat-sys-shadow: #000000;--mat-sys-surface: #101414;--mat-sys-surface-bright: #363a39;--mat-sys-surface-container: #1c2020;--mat-sys-surface-container-high: #272b2a;--mat-sys-surface-container-highest: #313635;--mat-sys-surface-container-low: #191c1c;--mat-sys-surface-container-lowest: #0b0f0e;--mat-sys-surface-dim: #101414;--mat-sys-surface-tint: #00dddd;--mat-sys-surface-variant: #3f4948;--mat-sys-tertiary: #ffb787;--mat-sys-tertiary-container: #723600;--mat-sys-tertiary-fixed: #ffdcc7;--mat-sys-tertiary-fixed-dim: #ffb787;--mat-sys-neutral-variant20: #293232;--mat-sys-neutral10: #191c1c}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;--mat-sys-display-large-font: Roboto;--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;--mat-sys-display-medium-font: Roboto;--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;--mat-sys-display-small-font: Roboto;--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;--mat-sys-headline-large-font: Roboto;--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;--mat-sys-headline-medium-font: Roboto;--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;--mat-sys-headline-small-font: Roboto;--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;--mat-sys-title-large-font: Roboto;--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: #101414;--mat-sys-error: #ffb4ab;--mat-sys-error-container: #93000a;--mat-sys-inverse-on-surface: #2d3131;--mat-sys-inverse-primary: #006a6a;--mat-sys-inverse-surface: #e0e3e2;--mat-sys-on-background: #e0e3e2;--mat-sys-on-error: #690005;--mat-sys-on-error-container: #ffdad6;--mat-sys-on-primary: #003737;--mat-sys-on-primary-container: #00fbfb;--mat-sys-on-primary-fixed: #002020;--mat-sys-on-primary-fixed-variant: #004f4f;--mat-sys-on-secondary: #1b3534;--mat-sys-on-secondary-container: #cce8e7;--mat-sys-on-secondary-fixed: #051f1f;--mat-sys-on-secondary-fixed-variant: #324b4b;--mat-sys-on-surface: #e0e3e2;--mat-sys-on-surface-variant: #dae5e4;--mat-sys-on-tertiary: #502400;--mat-sys-on-tertiary-container: #ffdcc7;--mat-sys-on-tertiary-fixed: #311300;--mat-sys-on-tertiary-fixed-variant: #723600;--mat-sys-outline: #889392;--mat-sys-outline-variant: #3f4948;--mat-sys-primary: #00dddd;--mat-sys-primary-container: #004f4f;--mat-sys-primary-fixed: #00fbfb;--mat-sys-primary-fixed-dim: #00dddd;--mat-sys-scrim: #000000;--mat-sys-secondary: #b0cccb;--mat-sys-secondary-container: #324b4b;--mat-sys-secondary-fixed: #cce8e7;--mat-sys-secondary-fixed-dim: #b0cccb;--mat-sys-shadow: #000000;--mat-sys-surface: #101414;--mat-sys-surface-bright: #363a39;--mat-sys-surface-container: #1c2020;--mat-sys-surface-container-high: #272b2a;--mat-sys-surface-container-highest: #313635;--mat-sys-surface-container-low: #191c1c;--mat-sys-surface-container-lowest: #0b0f0e;--mat-sys-surface-dim: #101414;--mat-sys-surface-tint: #00dddd;--mat-sys-surface-variant: #3f4948;--mat-sys-tertiary: #ffb787;--mat-sys-tertiary-container: #723600;--mat-sys-tertiary-fixed: #ffdcc7;--mat-sys-tertiary-fixed-dim: #ffb787;--mat-sys-neutral-variant20: #293232;--mat-sys-neutral10: #191c1c;--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;--mat-sys-display-large-font: Roboto;--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;--mat-sys-display-medium-font: Roboto;--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;--mat-sys-display-small-font: Roboto;--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;--mat-sys-headline-large-font: Roboto;--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;--mat-sys-headline-medium-font: Roboto;--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;--mat-sys-headline-small-font: Roboto;--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;--mat-sys-title-large-font: Roboto;--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}