@ng-matero/extensions 19.4.0 → 20.0.0

package/_index.scss

@@ -27,7 +27,7 @@ tooltip-color, tooltip-typography, tooltip-density, tooltip-base, tooltip-overri
 define-density;
 @forward './core/theming/color-api-backwards-compatibility' show color-variants-backwards-compatibility;
 
-@forward './core/tokens/m2' show m2-tokens-from-theme;
+@forward './core/tokens/m2-tokens' show m2-tokens-from-theme;
 @forward './core/tokens/m3-system' show system-level-colors,
 system-level-typography, system-level-elevation, system-level-shape,
 system-level-motion, system-level-state, theme, theme-overrides;

package/alert/_alert-theme.scss

@@ -1,70 +1,74 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/alert' as tokens-mtx-alert;
+@use './m2-alert';
+@use './m3-alert';
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-alert.get-tokens($theme), base));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-alert.$prefix,
-        tokens-mtx-alert.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-alert.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-alert.get-tokens($theme), color));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-alert.$prefix,
-        tokens-mtx-alert.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-alert.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-alert.get-tokens($theme), typography));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-alert.get-typography-tokens($theme));
+    }
   }
-  @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(map.get(m3-alert.get-tokens($theme), density));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-alert.get-density-tokens($theme));
+    }
   }
-  @else {}
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mtx-alert.$prefix,
-      tokens: tokens-mtx-alert.get-token-slots(),
+      namespace: alert,
+      tokens: token-utils.get-overrides(m3-alert.get-tokens(), alert),
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
-@mixin theme($theme) {
+@mixin theme($theme, $color-variant: null) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-alert') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     }
     @else {
       @include base($theme);
@@ -80,12 +84,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(tokens-mtx-alert.$prefix,
-      map.get($tokens, tokens-mtx-alert.$prefix));
-  }
-}

package/alert/_m2-alert.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core/tokens/m2-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 (
+    alert-container-shape: 4px,
+  );
+}
+
+// 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 (
+    alert-outline-color: transparent,
+    alert-background-color: mat.m2-get-color-from-palette(mat.$m2-gray-palette, if($is-dark, 900, 100)),
+    alert-text-color: mat.get-theme-color($theme, foreground, text),
+
+    alert-info-outline-color: transparent,
+    alert-info-background-color: mat.m2-get-color-from-palette(mat.$m2-blue-palette, if($is-dark, 900, 100)),
+    alert-info-text-color: mat.get-theme-color($theme, foreground, text),
+
+    alert-success-outline-color: transparent,
+    alert-success-background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, if($is-dark, 900, 100)),
+    alert-success-text-color: mat.get-theme-color($theme, foreground, text),
+
+    alert-warning-outline-color: transparent,
+    alert-warning-background-color: mat.m2-get-color-from-palette(mat.$m2-amber-palette, if($is-dark, 900, 100)),
+    alert-warning-text-color: mat.get-theme-color($theme, foreground, text),
+
+    alert-danger-outline-color: transparent,
+    alert-danger-background-color: mat.m2-get-color-from-palette(mat.$m2-red-palette, if($is-dark, 900, 100)),
+    alert-danger-text-color: mat.get-theme-color($theme, foreground, text),
+  );
+}
+
+// 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)
+  );
+}

package/alert/_m3-alert.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core/tokens/m3-utils';
+@use '../core/tokens/m3';
+
+/// Generates custom tokens for the mtx-alert.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+  $is-dark: map.get($system, md-sys-type) == dark;
+
+  $tokens: (
+    base: (
+      alert-container-shape: map.get($system, corner-small),
+    ),
+    color: (
+      alert-outline-color: map.get($system, outline-variant),
+      alert-background-color: map.get($system, surface-container),
+      alert-text-color: map.get($system, on-surface),
+
+      alert-info-outline-color: light-dark(map.get(mat.$azure-palette, 80), map.get(mat.$azure-palette, 40)),
+      alert-info-background-color: light-dark(map.get(mat.$azure-palette, 90), map.get(mat.$azure-palette, 20)),
+      alert-info-text-color: light-dark(map.get(mat.$azure-palette, 20), map.get(mat.$azure-palette, 90)),
+
+      alert-success-outline-color: light-dark(map.get(mat.$green-palette, 80), map.get(mat.$green-palette, 40)),
+      alert-success-background-color: light-dark(map.get(mat.$green-palette, 95), map.get(mat.$green-palette, 20)),
+      alert-success-text-color: light-dark(map.get(mat.$green-palette, 20), map.get(mat.$green-palette, 95)),
+
+      alert-warning-outline-color: light-dark(map.get(mat.$yellow-palette, 80), map.get(mat.$yellow-palette, 40)),
+      alert-warning-background-color: light-dark(map.get(mat.$yellow-palette, 98), map.get(mat.$yellow-palette, 20)),
+      alert-warning-text-color: light-dark(map.get(mat.$yellow-palette, 20), map.get(mat.$yellow-palette, 98)),
+
+      alert-danger-outline-color: light-dark(map.get(mat.$red-palette, 80), map.get(mat.$red-palette, 40)),
+      alert-danger-background-color: light-dark(map.get(mat.$red-palette, 90), map.get(mat.$red-palette, 20)),
+      alert-danger-text-color: light-dark(map.get(mat.$red-palette, 20), map.get(mat.$red-palette, 90)),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/alert/alert.scss

@@ -1,5 +1,7 @@
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/alert' as tokens-mtx-alert;
+@use './m3-alert';
+
+$fallbacks: m3-alert.get-tokens();
 
 .mtx-alert {
   position: relative;
@@ -7,39 +9,33 @@
   padding: .75rem 1rem;
   margin-bottom: 1rem;
   line-height: 1.5;
+  border: 1px solid token-utils.slot(alert-outline-color, $fallbacks);
+  border-radius: token-utils.slot(alert-container-shape, $fallbacks);
+  background-color: token-utils.slot(alert-background-color, $fallbacks);
+  color: token-utils.slot(alert-text-color, $fallbacks);
+
+  &.mtx-alert-info {
+    border-color: token-utils.slot(alert-info-outline-color, $fallbacks);
+    background-color: token-utils.slot(alert-info-background-color, $fallbacks);
+    color: token-utils.slot(alert-info-text-color, $fallbacks);
+  }
 
-  @include token-utils.use-tokens(tokens-mtx-alert.$prefix, tokens-mtx-alert.get-token-slots()) {
-    $border-color: token-utils.get-token-variable(outline-color);
-
-    border: 1px solid $border-color;
-
-    @include token-utils.create-token-slot(border-radius, container-shape);
-    @include token-utils.create-token-slot(background-color, background-color);
-    @include token-utils.create-token-slot(color, text-color);
-
-    &.mtx-alert-info {
-      @include token-utils.create-token-slot(border-color, info-outline-color);
-      @include token-utils.create-token-slot(background-color, info-background-color);
-      @include token-utils.create-token-slot(color, info-text-color);
-    }
-
-    &.mtx-alert-success {
-      @include token-utils.create-token-slot(border-color, success-outline-color);
-      @include token-utils.create-token-slot(background-color, success-background-color);
-      @include token-utils.create-token-slot(color, success-text-color);
-    }
+  &.mtx-alert-success {
+    border-color: token-utils.slot(alert-success-outline-color, $fallbacks);
+    background-color: token-utils.slot(alert-success-background-color, $fallbacks);
+    color: token-utils.slot(alert-success-text-color, $fallbacks);
+  }
 
-    &.mtx-alert-warning {
-      @include token-utils.create-token-slot(border-color, warning-outline-color);
-      @include token-utils.create-token-slot(background-color, warning-background-color);
-      @include token-utils.create-token-slot(color, warning-text-color);
-    }
+  &.mtx-alert-warning {
+    border-color: token-utils.slot(alert-warning-outline-color, $fallbacks);
+    background-color: token-utils.slot(alert-warning-background-color, $fallbacks);
+    color: token-utils.slot(alert-warning-text-color, $fallbacks);
+  }
 
-    &.mtx-alert-danger {
-      @include token-utils.create-token-slot(border-color, danger-outline-color);
-      @include token-utils.create-token-slot(background-color, danger-background-color);
-      @include token-utils.create-token-slot(color, danger-text-color);
-    }
+  &.mtx-alert-danger {
+    border-color: token-utils.slot(alert-danger-outline-color, $fallbacks);
+    background-color: token-utils.slot(alert-danger-background-color, $fallbacks);
+    color: token-utils.slot(alert-danger-text-color, $fallbacks);
   }
 }
 

package/alert/index.d.ts

@@ -1,5 +1,30 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ng-matero/extensions/alert" />
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import * as i1 from '@angular/common';
+
+type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';
+declare class MtxAlert {
+    private _changeDetectorRef;
+    get hostClassList(): string;
+    /** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
+    type: MtxAlertType;
+    /** Whether to display an inline close button. */
+    dismissible: boolean;
+    /** The alert's elevation (0~24). */
+    elevation: number;
+    /** Event emitted when the alert closed. */
+    closed: EventEmitter<MtxAlert>;
+    _onClosed(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxAlert, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxAlert, "mtx-alert", ["mtxAlert"], { "type": { "alias": "type"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "elevation": { "alias": "elevation"; "required": false; }; }, { "closed": "closed"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_dismissible: unknown;
+}
+
+declare class MtxAlertModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxAlertModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxAlertModule, never, [typeof i1.CommonModule, typeof MtxAlert], [typeof MtxAlert]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxAlertModule>;
+}
+
+export { MtxAlert, MtxAlertModule };
+export type { MtxAlertType };

package/button/index.d.ts

@@ -1,5 +1,31 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ng-matero/extensions/button" />
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { OnChanges, SimpleChanges } from '@angular/core';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/material/button';
+import * as i3 from '@angular/material/progress-spinner';
+import { ThemePalette } from '@angular/material/core';
+
+declare class MatButtonLoading implements OnChanges {
+    private _elementRef;
+    private _viewContainerRef;
+    private _renderer;
+    private spinner;
+    loading: boolean;
+    disabled: boolean;
+    color: ThemePalette;
+    ngOnChanges(changes: SimpleChanges): void;
+    private createSpinner;
+    private destroySpinner;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonLoading, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonLoading, "[mat-button][loading],             [mat-raised-button][loading],             [mat-stroked-button][loading],             [mat-flat-button][loading],             [mat-icon-button][loading],             [mat-fab][loading],             [mat-mini-fab][loading]", never, { "loading": { "alias": "loading"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+declare class MtxButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxButtonModule, never, [typeof i1.CommonModule, typeof i2.MatButtonModule, typeof i3.MatProgressSpinnerModule, typeof MatButtonLoading], [typeof MatButtonLoading]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxButtonModule>;
+}
+
+export { MatButtonLoading, MtxButtonModule };

package/checkbox-group/index.d.ts

@@ -1,5 +1,117 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@ng-matero/extensions/checkbox-group" />
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnDestroy, QueryList, TrackByFunction, EventEmitter } from '@angular/core';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/forms';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i3 from '@angular/material/checkbox';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
+import * as i4 from '@ng-matero/extensions/core';
+
+interface MtxCheckboxGroupOption {
+    ariaDescribedby?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    label?: any;
+    value?: any;
+    color?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    disableRipple?: boolean;
+    indeterminate?: boolean;
+    labelPosition?: 'before' | 'after';
+    id?: string;
+    name?: string | null;
+    required?: boolean;
+    [k: string]: any;
+}
+
+declare class MtxCheckboxBase {
+    label?: any | undefined;
+    value?: any | undefined;
+    constructor(label?: any | undefined, value?: any | undefined);
+}
+declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {
+    private _changeDetectorRef;
+    private _focusMonitor;
+    private _elementRef;
+    _checkboxes: QueryList<MatCheckbox>;
+    /**
+     * Tracking function that will be used to check the differences in data changes. Used similarly
+     * to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data
+     * relative to the function to know if a row should be added/removed/moved.
+     * Accepts a function that takes two parameters, `index` and `item`.
+     */
+    get trackBy(): TrackByFunction<any> | undefined;
+    set trackBy(fn: TrackByFunction<any> | undefined);
+    private _trackByFn?;
+    get items(): any[];
+    set items(value: any[]);
+    private _items;
+    private _originalItems;
+    bindLabel: string;
+    bindValue: string;
+    showSelectAll: boolean;
+    selectAllLabel: string;
+    get compareWith(): ((o1: any, o2: any) => boolean) | undefined;
+    set compareWith(fn: ((o1: any, o2: any) => boolean) | undefined);
+    private _compareWith?;
+    disabled: boolean;
+    change: EventEmitter<{
+        model: MtxCheckboxGroupOption[];
+        index: number;
+    }>;
+    selectAll: boolean;
+    selectAllIndeterminate: boolean;
+    selectedItems: MtxCheckboxGroupOption[];
+    _onChange: (value: MtxCheckboxGroupOption[]) => void;
+    _onTouched: () => void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Finds and selects and option based on its value.
+     * @returns Option that has the corresponding value.
+     */
+    private _selectValue;
+    /**
+     * Sets the model value. Implemented as part of ControlValueAccessor.
+     * @param value New value to be written to the model.
+     */
+    writeValue(value: any[]): void;
+    /**
+     * Registers a callback to be triggered when the model value changes.
+     * Implemented as part of ControlValueAccessor.
+     * @param fn Callback to be registered.
+     */
+    registerOnChange(fn: (value: MtxCheckboxGroupOption[]) => Record<string, unknown>): void;
+    /**
+     * Registers a callback to be triggered when the control is touched.
+     * Implemented as part of ControlValueAccessor.
+     * @param fn Callback to be registered.
+     */
+    registerOnTouched(fn: () => Record<string, unknown>): void;
+    /**
+     * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
+     * @param isDisabled Whether the control should be disabled.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    private _checkMasterCheckboxState;
+    private _getSelectedItems;
+    /** Handle normal checkbox toggle */
+    _updateNormalCheckboxState(e: MatCheckboxChange, index: number): void;
+    /** Handle master checkbox toggle */
+    _updateMasterCheckboxState(e: MatCheckboxChange, index: number): void;
+    _trackBy: (index: number, item: any) => any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCheckboxGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCheckboxGroup, "mtx-checkbox-group", ["mtxCheckboxGroup"], { "trackBy": { "alias": "trackBy"; "required": false; }; "items": { "alias": "items"; "required": false; }; "bindLabel": { "alias": "bindLabel"; "required": false; }; "bindValue": { "alias": "bindValue"; "required": false; }; "showSelectAll": { "alias": "showSelectAll"; "required": false; }; "selectAllLabel": { "alias": "selectAllLabel"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["_checkboxes"], never, true, never>;
+    static ngAcceptInputType_showSelectAll: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+declare class MtxCheckboxGroupModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCheckboxGroupModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxCheckboxGroupModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.MatCheckboxModule, typeof i4.MtxPipesModule, typeof MtxCheckboxGroup], [typeof MtxCheckboxGroup, typeof i4.MtxPipesModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxCheckboxGroupModule>;
+}
+
+export { MtxCheckboxBase, MtxCheckboxGroup, MtxCheckboxGroupModule };
+export type { MtxCheckboxGroupOption };

package/colorpicker/_colorpicker-theme.scss

@@ -1,46 +1,39 @@
 @use 'sass:color';
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/theming/inspection';
-@use '../core/theming/validation';
 @use '../core/tokens/token-utils';
-@use '../core/tokens/m2/mtx/colorpicker' as tokens-mtx-colorpicker;
+@use './m2-colorpicker';
+@use './m3-colorpicker';
 
 @mixin base($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-colorpicker.get-tokens($theme), base));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-colorpicker.$prefix,
-        tokens-mtx-colorpicker.get-unthemable-tokens()
-      );
+      @include token-utils.create-token-values-mixed(m2-colorpicker.get-unthemable-tokens());
     }
   }
 }
 
-@mixin color($theme) {
+@mixin color($theme, $color-variant: null) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @include token-utils.create-token-values(map.get(m3-colorpicker.get-tokens($theme), color));
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(
-        tokens-mtx-colorpicker.$prefix,
-        tokens-mtx-colorpicker.get-color-tokens($theme)
-      );
+      @include token-utils.create-token-values-mixed(m2-colorpicker.get-color-tokens($theme));
     }
 
     .mtx-colorpicker-toggle-active {
       &.mat-accent {
-        $accent-tokens: tokens-mtx-colorpicker.private-get-toggle-color-palette-color-tokens($theme, accent);
-        @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix, $accent-tokens);
+        $accent-tokens: m2-colorpicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values-mixed($accent-tokens);
       }
 
       &.mat-warn {
-        $warn-tokens: tokens-mtx-colorpicker.private-get-toggle-color-palette-color-tokens($theme, warn);
-        @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix, $warn-tokens);
+        $warn-tokens: m2-colorpicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values-mixed($warn-tokens);
       }
     }
   }
@@ -48,36 +41,47 @@
 
 @mixin typography($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @include token-utils.create-token-values(map.get(m3-colorpicker.get-tokens($theme), typography));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-colorpicker.get-typography-tokens($theme));
+    }
   }
-  @else {}
 }
 
 @mixin density($theme) {
   @if mat.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
+    @include token-utils.create-token-values(map.get(m3-colorpicker.get-tokens($theme), density));
+  }
+  @else {
+    @include mat.private-current-selector-or-root() {
+      @include token-utils.create-token-values-mixed(m2-colorpicker.get-density-tokens($theme));
+    }
   }
-  @else {}
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
   @return (
     (
-      namespace: tokens-mtx-colorpicker.$prefix,
-      tokens: tokens-mtx-colorpicker.get-token-slots(),
+      namespace: colorpicker,
+      tokens: token-utils.get-overrides(m3-colorpicker.get-tokens(), colorpicker),
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
-@mixin theme($theme) {
+@mixin theme($theme, $color-variant: null) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-colorpicker') {
     @if mat.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     }
     @else {
       @include base($theme);
@@ -93,12 +97,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(tokens-mtx-colorpicker.$prefix,
-      map.get($tokens, tokens-mtx-colorpicker.$prefix));
-  }
-}

package/{core/tokens/m2/mtx/_colorpicker.scss → colorpicker/_m2-colorpicker.scss}

@@ -1,15 +1,11 @@
 @use 'sass:color';
 @use 'sass:map';
-@use 'sass:meta';
 @use '@angular/material' as mat;
-@use '../../token-definition';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mtx, colorpicker);
+@use '../core/tokens/m2-utils';
 
 @function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
   @return (
-    toggle-active-state-icon-color: mat.get-theme-color($theme, $palette-name, text),
+    colorpicker-toggle-active-state-icon-color: mat.get-theme-color($theme, $palette-name, text),
   );
 }
 
@@ -25,7 +21,7 @@ $prefix: (mtx, colorpicker);
   $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
 
   @return mat.private-merge-all($toggle-tokens, (
-    toggle-icon-color: $inactive-icon-color
+    colorpicker-toggle-icon-color: $inactive-icon-color
   ));
 }
 
@@ -44,8 +40,8 @@ $prefix: (mtx, colorpicker);
 @function get-token-slots() {
   @return mat.private-deep-merge-all(
     get-unthemable-tokens(),
-    get-color-tokens(token-definition.$placeholder-color-config),
-    get-typography-tokens(token-definition.$placeholder-typography-config),
-    get-density-tokens(token-definition.$placeholder-density-config)
+    get-color-tokens(m2-utils.$placeholder-color-config),
+    get-typography-tokens(m2-utils.$placeholder-typography-config),
+    get-density-tokens(m2-utils.$placeholder-density-config)
   );
 }