githubmirror/components

src/dev-app/theme.scss
84 строки3 KB
Andrew Seguin
fix(material/core): rename utility-classes to system-classes (#31745)
21 авг 2025, 18:34
21 авг 2025, 18:34605e2c9
@use '@angular/material' as mat;
@use '@angular/material-experimental' as experimental;

// Plus imports for other components in your app.

// Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API.
mat.$theme-legacy-inspection-api-compatibility: false;

// Define the default (light) theme.
$candy-app-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
$candy-app-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
$candy-app-theme: mat.m2-define-light-theme((
  // Define the default colors for our app.
  color: (
    primary: $candy-app-primary,
    accent: $candy-app-accent
  ),
  // Define the default typography for our app.
  typography: mat.m2-define-typography-config(),
  // Define the default density level for our app.
  density: 0,
));

@include mat.app-background();
@include mat.elevation-classes();
@include mat.m2-theme($candy-app-theme);
@include mat.system-classes();

// Include the default theme styles.
@include mat.all-component-themes($candy-app-theme);
@include experimental.column-resize-theme($candy-app-theme);
@include experimental.popover-edit-theme($candy-app-theme);

@include mat.typography-hierarchy($candy-app-theme);

.demo-strong-focus {
  // Note: we can theme the indicators directly through `strong-focus-indicators` as well.
  // Use the theme so we have some coverage over the entire API surface.
  @include mat.strong-focus-indicators();
  @include mat.strong-focus-indicators-theme($candy-app-theme);
}

// Include the alternative theme styles inside of a block with a CSS class. You can make this
// CSS class whatever you want. In this example, any component inside of an element with
// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
// default theme.
.demo-unicorn-dark-theme {
  // Create the color palettes used in our dark theme.
  $dark-primary: mat.m2-define-palette(mat.$m2-blue-grey-palette);
  $dark-accent: mat.m2-define-palette(mat.$m2-amber-palette, A200, A100, A400);
  $dark-warn: mat.m2-define-palette(mat.$m2-deep-orange-palette);
  $dark-colors: mat.m2-define-dark-theme(
      (
        color: (
          primary: $dark-primary,
          accent: $dark-accent,
          warn: $dark-warn
        ),
        density: 0,
        typography: mat.m2-define-typography-config(),
      )
  );
  @include mat.m2-theme($dark-colors);

  // Include the dark theme color styles.
  @include mat.all-component-colors($dark-colors);
  @include experimental.column-resize-color($dark-colors);
  @include experimental.popover-edit-color($dark-colors);

  // Include the dark theme colors for focus indicators.
  &.demo-strong-focus {
    @include mat.strong-focus-indicators-color($dark-colors);
  }
}

// Create classes for all density scales which are supported by all MDC-based components.
// The classes are applied conditionally based on the selected density in the dev-app layout
// component.
$density-scales: (-1, -2, -3, -4, minimum, maximum);
@each $density in $density-scales {
  .demo-density-#{$density} {
    @include mat.all-component-densities($density);
  }
}