@angular/material 19.0.1 → 19.1.0-next.0

package/schematics/ng-generate/theme-color/index_bundled.js

@@ -54,7 +54,12 @@ var __async = (__this, __arguments, generator) => {
 var theme_color_exports = {};
 __export(theme_color_exports, {
   default: () => theme_color_default,
-  generateSCSSTheme: () => generateSCSSTheme
+  generateSCSSTheme: () => generateSCSSTheme,
+  getAllSysVariablesCSS: () => getAllSysVariablesCSS,
+  getColorPalettes: () => getColorPalettes,
+  getHctFromHex: () => getHctFromHex,
+  getHighContrastOverridesCSS: () => getHighContrastOverridesCSS,
+  getMaterialDynamicScheme: () => getMaterialDynamicScheme
 });
 module.exports = __toCommonJS(theme_color_exports);
 
@@ -2588,6 +2593,13 @@ var NEUTRAL_HUES = /* @__PURE__ */ new Map([
   [96, { prev: 95, next: 98 }]
 ]);
 var NEUTRAL_HUE_TONES = [...HUE_TONES, ...NEUTRAL_HUES.keys()];
+function getHctFromHex(color) {
+  try {
+    return Hct.fromInt(argbFromHex(color));
+  } catch (e) {
+    throw new Error("Cannot parse the specified color " + color + ". Please verify it is a hex color (ex. #ffffff or ffffff).");
+  }
+}
 function getMaterialDynamicScheme(primaryPalette, secondaryPalette, tertiaryPalette, neutralPalette, neutralVariantPalette, isDark, contrastLevel) {
   return new DynamicScheme({
     sourceColorArgb: primaryPalette.keyColor.toInt(),
@@ -2601,20 +2613,38 @@ function getMaterialDynamicScheme(primaryPalette, secondaryPalette, tertiaryPale
     neutralVariantPalette
   });
 }
-function getColorPalettesSCSS(colorPalettes) {
-  let scss = "(\n";
-  for (const [variant, palette] of colorPalettes.entries()) {
-    scss += "  " + variant + ": (\n";
-    for (const [key, value] of palette.entries()) {
-      scss += "    " + key + ": " + value + ",\n";
-    }
-    scss += "  ),\n";
+function getColorPalettes(primaryColor, secondaryColor, tertiaryColor, neutralColor) {
+  const primaryColorHct = getHctFromHex(primaryColor);
+  const primaryPalette = TonalPalette.fromHct(primaryColorHct);
+  let secondaryPalette;
+  if (secondaryColor) {
+    secondaryPalette = TonalPalette.fromHct(getHctFromHex(secondaryColor));
+  } else {
+    secondaryPalette = TonalPalette.fromHueAndChroma(primaryColorHct.hue, Math.max(primaryColorHct.chroma - 32, primaryColorHct.chroma * 0.5));
   }
-  scss += ");";
-  return scss;
-}
-function getMapFromColorTonalPalettes(primaryPalette, secondaryPalette, tertiaryPalette, neutralPalette, neutralVariantPalette, errorPalette) {
-  const tonalPalettes = {
+  let tertiaryPalette;
+  if (tertiaryColor) {
+    tertiaryPalette = TonalPalette.fromHct(getHctFromHex(tertiaryColor));
+  } else {
+    tertiaryPalette = TonalPalette.fromInt(DislikeAnalyzer.fixIfDisliked(new TemperatureCache(primaryColorHct).analogous(3, 6)[2]).toInt());
+  }
+  let neutralPalette;
+  if (neutralColor) {
+    neutralPalette = TonalPalette.fromHct(getHctFromHex(neutralColor));
+  } else {
+    neutralPalette = TonalPalette.fromHueAndChroma(primaryColorHct.hue, primaryColorHct.chroma / 8);
+  }
+  const neutralVariantPalette = TonalPalette.fromHueAndChroma(primaryColorHct.hue, primaryColorHct.chroma / 8 + 4);
+  const errorPalette = getMaterialDynamicScheme(
+    primaryPalette,
+    secondaryPalette,
+    tertiaryPalette,
+    neutralPalette,
+    neutralVariantPalette,
+    false,
+    0
+  ).errorPalette;
+  return {
     primary: primaryPalette,
     secondary: secondaryPalette,
     tertiary: tertiaryPalette,
@@ -2622,18 +2652,21 @@ function getMapFromColorTonalPalettes(primaryPalette, secondaryPalette, tertiary
     neutralVariant: neutralVariantPalette,
     error: errorPalette
   };
-  const palettes = /* @__PURE__ */ new Map();
-  for (const [key, palette] of Object.entries(tonalPalettes)) {
-    const paletteKey = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function getColorPalettesSCSS(colorPalettes) {
+  let scss = "(\n";
+  for (const [variant, palette] of Object.entries(colorPalettes)) {
+    const paletteKey = variant.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    scss += "  " + paletteKey + ": (\n";
     const tones = paletteKey === "neutral" ? NEUTRAL_HUE_TONES : HUE_TONES;
-    const colorPalette = /* @__PURE__ */ new Map();
     for (const tone of tones) {
       const color = hexFromArgb(palette.tone(tone));
-      colorPalette.set(tone, color);
+      scss += "    " + tone + ": " + color + ",\n";
     }
-    palettes.set(paletteKey, colorPalette);
+    scss += "  ),\n";
   }
-  return palettes;
+  scss += ");";
+  return scss;
 }
 function generateSCSSTheme(colorPalettes, colorComment) {
   let scss = [
@@ -2658,76 +2691,59 @@ function generateSCSSTheme(colorPalettes, colorComment) {
   ];
   return scss.join("\n");
 }
-function getHighContrastOverides(primaryPalette, secondaryPalette, tertiaryPalette, neutralPalette, neutralVariantPalette, isDark) {
-  const scheme = getMaterialDynamicScheme(primaryPalette, secondaryPalette, tertiaryPalette, neutralPalette, neutralVariantPalette, isDark, 1);
+function getHighContrastOverides(colorScheme) {
   const overrides = /* @__PURE__ */ new Map();
-  overrides.set("primary", hexFromArgb(scheme.primary));
-  overrides.set("on-primary", hexFromArgb(scheme.onPrimary));
-  overrides.set("primary-container", hexFromArgb(scheme.primaryContainer));
-  overrides.set("on-primary-container", hexFromArgb(scheme.onPrimaryContainer));
-  overrides.set("inverse-primary", hexFromArgb(scheme.inversePrimary));
-  overrides.set("primary-fixed", hexFromArgb(scheme.primaryFixed));
-  overrides.set("primary-fixed-dim", hexFromArgb(scheme.primaryFixedDim));
-  overrides.set("on-primary-fixed", hexFromArgb(scheme.onPrimaryFixed));
-  overrides.set("on-primary-fixed-variant", hexFromArgb(scheme.onPrimaryFixedVariant));
-  overrides.set("secondary", hexFromArgb(scheme.secondary));
-  overrides.set("on-secondary", hexFromArgb(scheme.onSecondary));
-  overrides.set("secondary-container", hexFromArgb(scheme.secondaryContainer));
-  overrides.set("on-secondary-container", hexFromArgb(scheme.onSecondaryContainer));
-  overrides.set("secondary-fixed", hexFromArgb(scheme.secondaryFixed));
-  overrides.set("secondary-fixed-dim", hexFromArgb(scheme.secondaryFixedDim));
-  overrides.set("on-secondary-fixed", hexFromArgb(scheme.onSecondaryFixed));
-  overrides.set("on-secondary-fixed-variant", hexFromArgb(scheme.onSecondaryFixedVariant));
-  overrides.set("tertiary", hexFromArgb(scheme.tertiary));
-  overrides.set("on-tertiary", hexFromArgb(scheme.onTertiary));
-  overrides.set("tertiary-container", hexFromArgb(scheme.tertiaryContainer));
-  overrides.set("on-tertiary-container", hexFromArgb(scheme.onTertiaryContainer));
-  overrides.set("tertiary-fixed", hexFromArgb(scheme.tertiaryFixed));
-  overrides.set("tertiary-fixed-dim", hexFromArgb(scheme.tertiaryFixedDim));
-  overrides.set("on-tertiary-fixed", hexFromArgb(scheme.onTertiaryFixed));
-  overrides.set("on-tertiary-fixed-variant", hexFromArgb(scheme.onTertiaryFixedVariant));
-  overrides.set("background", hexFromArgb(scheme.background));
-  overrides.set("on-background", hexFromArgb(scheme.onBackground));
-  overrides.set("surface", hexFromArgb(scheme.surface));
-  overrides.set("surface-dim", hexFromArgb(scheme.surfaceDim));
-  overrides.set("surface-bright", hexFromArgb(scheme.surfaceBright));
-  overrides.set("surface-container-lowest", hexFromArgb(scheme.surfaceContainerLowest));
-  overrides.set("surface-container", hexFromArgb(scheme.surfaceContainer));
-  overrides.set("surface-container-high", hexFromArgb(scheme.surfaceContainerHigh));
-  overrides.set("surface-container-highest", hexFromArgb(scheme.surfaceContainerHighest));
-  overrides.set("on-surface", hexFromArgb(scheme.onSurface));
-  overrides.set("shadow", hexFromArgb(scheme.shadow));
-  overrides.set("scrim", hexFromArgb(scheme.scrim));
-  overrides.set("surface-tint", hexFromArgb(scheme.surfaceTint));
-  overrides.set("inverse-surface", hexFromArgb(scheme.inverseSurface));
-  overrides.set("inverse-on-surface", hexFromArgb(scheme.inverseOnSurface));
-  overrides.set("outline", hexFromArgb(scheme.outline));
-  overrides.set("outline-variant", hexFromArgb(scheme.outlineVariant));
-  overrides.set("error", hexFromArgb(scheme.error));
-  overrides.set("on-error", hexFromArgb(scheme.onError));
-  overrides.set("error-container", hexFromArgb(scheme.errorContainer));
-  overrides.set("on-error-container", hexFromArgb(scheme.onErrorContainer));
-  overrides.set("surface-variant", hexFromArgb(scheme.surfaceVariant));
-  overrides.set("on-surface-variant", hexFromArgb(scheme.onSurfaceVariant));
+  overrides.set("primary", hexFromArgb(colorScheme.primary));
+  overrides.set("on-primary", hexFromArgb(colorScheme.onPrimary));
+  overrides.set("primary-container", hexFromArgb(colorScheme.primaryContainer));
+  overrides.set("on-primary-container", hexFromArgb(colorScheme.onPrimaryContainer));
+  overrides.set("inverse-primary", hexFromArgb(colorScheme.inversePrimary));
+  overrides.set("primary-fixed", hexFromArgb(colorScheme.primaryFixed));
+  overrides.set("primary-fixed-dim", hexFromArgb(colorScheme.primaryFixedDim));
+  overrides.set("on-primary-fixed", hexFromArgb(colorScheme.onPrimaryFixed));
+  overrides.set("on-primary-fixed-variant", hexFromArgb(colorScheme.onPrimaryFixedVariant));
+  overrides.set("secondary", hexFromArgb(colorScheme.secondary));
+  overrides.set("on-secondary", hexFromArgb(colorScheme.onSecondary));
+  overrides.set("secondary-container", hexFromArgb(colorScheme.secondaryContainer));
+  overrides.set("on-secondary-container", hexFromArgb(colorScheme.onSecondaryContainer));
+  overrides.set("secondary-fixed", hexFromArgb(colorScheme.secondaryFixed));
+  overrides.set("secondary-fixed-dim", hexFromArgb(colorScheme.secondaryFixedDim));
+  overrides.set("on-secondary-fixed", hexFromArgb(colorScheme.onSecondaryFixed));
+  overrides.set("on-secondary-fixed-variant", hexFromArgb(colorScheme.onSecondaryFixedVariant));
+  overrides.set("tertiary", hexFromArgb(colorScheme.tertiary));
+  overrides.set("on-tertiary", hexFromArgb(colorScheme.onTertiary));
+  overrides.set("tertiary-container", hexFromArgb(colorScheme.tertiaryContainer));
+  overrides.set("on-tertiary-container", hexFromArgb(colorScheme.onTertiaryContainer));
+  overrides.set("tertiary-fixed", hexFromArgb(colorScheme.tertiaryFixed));
+  overrides.set("tertiary-fixed-dim", hexFromArgb(colorScheme.tertiaryFixedDim));
+  overrides.set("on-tertiary-fixed", hexFromArgb(colorScheme.onTertiaryFixed));
+  overrides.set("on-tertiary-fixed-variant", hexFromArgb(colorScheme.onTertiaryFixedVariant));
+  overrides.set("background", hexFromArgb(colorScheme.background));
+  overrides.set("on-background", hexFromArgb(colorScheme.onBackground));
+  overrides.set("surface", hexFromArgb(colorScheme.surface));
+  overrides.set("surface-dim", hexFromArgb(colorScheme.surfaceDim));
+  overrides.set("surface-bright", hexFromArgb(colorScheme.surfaceBright));
+  overrides.set("surface-container-lowest", hexFromArgb(colorScheme.surfaceContainerLowest));
+  overrides.set("surface-container", hexFromArgb(colorScheme.surfaceContainer));
+  overrides.set("surface-container-high", hexFromArgb(colorScheme.surfaceContainerHigh));
+  overrides.set("surface-container-highest", hexFromArgb(colorScheme.surfaceContainerHighest));
+  overrides.set("on-surface", hexFromArgb(colorScheme.onSurface));
+  overrides.set("shadow", hexFromArgb(colorScheme.shadow));
+  overrides.set("scrim", hexFromArgb(colorScheme.scrim));
+  overrides.set("surface-tint", hexFromArgb(colorScheme.surfaceTint));
+  overrides.set("inverse-surface", hexFromArgb(colorScheme.inverseSurface));
+  overrides.set("inverse-on-surface", hexFromArgb(colorScheme.inverseOnSurface));
+  overrides.set("outline", hexFromArgb(colorScheme.outline));
+  overrides.set("outline-variant", hexFromArgb(colorScheme.outlineVariant));
+  overrides.set("error", hexFromArgb(colorScheme.error));
+  overrides.set("on-error", hexFromArgb(colorScheme.onError));
+  overrides.set("error-container", hexFromArgb(colorScheme.errorContainer));
+  overrides.set("on-error-container", hexFromArgb(colorScheme.onErrorContainer));
+  overrides.set("surface-variant", hexFromArgb(colorScheme.surfaceVariant));
+  overrides.set("on-surface-variant", hexFromArgb(colorScheme.onSurfaceVariant));
   return overrides;
 }
-function generateHighContrastOverrideMixinsSCSS(primaryPalette, secondaryPalette, tertiaryPalette, neutralPalette, neutralVariantPalette) {
-  const lightOverrides = getHighContrastOverides(
-    primaryPalette,
-    secondaryPalette,
-    tertiaryPalette,
-    neutralPalette,
-    neutralVariantPalette,
-    false
-  );
-  const darkOverrides = getHighContrastOverides(
-    primaryPalette,
-    secondaryPalette,
-    tertiaryPalette,
-    neutralPalette,
-    neutralVariantPalette,
-    true
-  );
+function generateHighContrastOverrideMixinsSCSS(lightHighContrastColorScheme, darkHighContrastColorScheme) {
   let scss = "\n";
   scss += "\n@function _high-contrast-value($light, $dark, $theme-type) {\n";
   scss += "  @if ($theme-type == light) {\n";
@@ -2741,6 +2757,8 @@ function generateHighContrastOverrideMixinsSCSS(primaryPalette, secondaryPalette
   scss += "  }\n";
   scss += "  \n  @error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme';\n";
   scss += "}\n";
+  const lightOverrides = getHighContrastOverides(lightHighContrastColorScheme);
+  const darkOverrides = getHighContrastOverides(darkHighContrastColorScheme);
   scss += "\n@mixin high-contrast-overrides($theme-type) {\n";
   scss += "  @include mat.theme-overrides((\n";
   for (const [key, value] of lightOverrides.entries()) {
@@ -2750,56 +2768,341 @@ function generateHighContrastOverrideMixinsSCSS(primaryPalette, secondaryPalette
   scss += " }\n";
   return scss;
 }
-function getHctFromHex(color) {
-  try {
-    return Hct.fromInt(argbFromHex(color));
-  } catch (e) {
-    throw new Error("Cannot parse the specified color " + color + ". Please verify it is a hex color (ex. #ffffff or ffffff).");
-  }
+function createLightDarkVar(leftSpacing, variableName, lightColor, darkColor, comment) {
+  const commentContent = comment ? " /* " + comment + " */" : "";
+  const lightDarkValue = "light-dark(" + hexFromArgb(lightColor) + ", " + hexFromArgb(darkColor) + ");";
+  return leftSpacing + "--mat-sys-" + variableName + ": " + lightDarkValue + commentContent + "\n";
+}
+function getColorSysVariablesCSS(lightScheme, darkScheme, isHighContrast = false) {
+  let css = "";
+  let leftSpacing = " ".repeat(isHighContrast ? 4 : 2);
+  css += leftSpacing + "/* Primary palette variables */\n";
+  css += createLightDarkVar(leftSpacing, "primary", isHighContrast ? lightScheme.primary : lightScheme.primaryPalette.tone(40), isHighContrast ? darkScheme.primary : lightScheme.primaryPalette.tone(80));
+  css += createLightDarkVar(leftSpacing, "on-primary", isHighContrast ? lightScheme.onPrimary : lightScheme.primaryPalette.tone(100), isHighContrast ? darkScheme.onPrimary : darkScheme.primaryPalette.tone(20));
+  css += createLightDarkVar(leftSpacing, "primary-container", isHighContrast ? lightScheme.primaryContainer : lightScheme.primaryPalette.tone(90), isHighContrast ? darkScheme.primaryContainer : darkScheme.primaryPalette.tone(30));
+  css += createLightDarkVar(leftSpacing, "on-primary-container", isHighContrast ? lightScheme.onPrimaryContainer : lightScheme.primaryPalette.tone(10), isHighContrast ? darkScheme.onPrimaryContainer : darkScheme.primaryPalette.tone(90));
+  css += createLightDarkVar(leftSpacing, "inverse-primary", lightScheme.inversePrimary, darkScheme.inversePrimary);
+  css += createLightDarkVar(leftSpacing, "primary-fixed", isHighContrast ? lightScheme.primaryFixed : lightScheme.primaryPalette.tone(90), isHighContrast ? darkScheme.primaryFixed : darkScheme.primaryPalette.tone(90));
+  css += createLightDarkVar(leftSpacing, "primary-fixed-dim", isHighContrast ? lightScheme.primaryFixedDim : lightScheme.primaryPalette.tone(80), isHighContrast ? darkScheme.primaryFixedDim : darkScheme.primaryPalette.tone(80));
+  css += createLightDarkVar(leftSpacing, "on-primary-fixed", lightScheme.onPrimaryFixed, darkScheme.onPrimaryFixed);
+  css += createLightDarkVar(leftSpacing, "on-primary-fixed-variant", lightScheme.onPrimaryFixedVariant, darkScheme.onPrimaryFixedVariant);
+  css += "\n" + leftSpacing + "/* Secondary palette variables */\n";
+  css += createLightDarkVar(leftSpacing, "secondary", isHighContrast ? lightScheme.secondary : lightScheme.secondaryPalette.tone(40), isHighContrast ? darkScheme.secondary : darkScheme.secondaryPalette.tone(80));
+  css += createLightDarkVar(leftSpacing, "on-secondary", isHighContrast ? lightScheme.onSecondary : lightScheme.secondaryPalette.tone(100), isHighContrast ? darkScheme.onSecondary : darkScheme.secondaryPalette.tone(20));
+  css += createLightDarkVar(leftSpacing, "secondary-container", isHighContrast ? lightScheme.secondaryContainer : lightScheme.secondaryPalette.tone(90), isHighContrast ? darkScheme.secondaryContainer : darkScheme.secondaryPalette.tone(30));
+  css += createLightDarkVar(leftSpacing, "on-secondary-container", isHighContrast ? lightScheme.onSecondaryContainer : lightScheme.secondaryPalette.tone(10), isHighContrast ? darkScheme.onSecondaryContainer : darkScheme.secondaryPalette.tone(90));
+  css += createLightDarkVar(leftSpacing, "secondary-fixed", isHighContrast ? lightScheme.secondaryFixed : lightScheme.secondaryPalette.tone(90), isHighContrast ? darkScheme.secondaryFixed : darkScheme.secondaryPalette.tone(90));
+  css += createLightDarkVar(leftSpacing, "secondary-fixed-dim", isHighContrast ? lightScheme.secondaryFixedDim : lightScheme.secondaryPalette.tone(80), isHighContrast ? darkScheme.secondaryFixedDim : darkScheme.secondaryPalette.tone(80));
+  css += createLightDarkVar(leftSpacing, "on-secondary-fixed", lightScheme.onSecondaryFixed, darkScheme.onSecondaryFixed);
+  css += createLightDarkVar(leftSpacing, "on-secondary-fixed-variant", lightScheme.onSecondaryFixedVariant, darkScheme.onSecondaryFixedVariant);
+  css += "\n" + leftSpacing + "/* Tertiary palette variables */\n";
+  css += createLightDarkVar(leftSpacing, "tertiary", isHighContrast ? lightScheme.tertiary : lightScheme.tertiaryPalette.tone(40), isHighContrast ? darkScheme.tertiary : darkScheme.tertiaryPalette.tone(80));
+  css += createLightDarkVar(leftSpacing, "on-tertiary", isHighContrast ? lightScheme.tertiary : lightScheme.tertiaryPalette.tone(100), isHighContrast ? darkScheme.tertiary : darkScheme.tertiaryPalette.tone(20));
+  css += createLightDarkVar(leftSpacing, "tertiary-container", isHighContrast ? lightScheme.tertiaryContainer : lightScheme.tertiaryPalette.tone(90), isHighContrast ? darkScheme.tertiaryContainer : darkScheme.tertiaryPalette.tone(30));
+  css += createLightDarkVar(leftSpacing, "on-tertiary-container", isHighContrast ? lightScheme.onTertiaryContainer : lightScheme.tertiaryPalette.tone(10), isHighContrast ? darkScheme.onTertiaryContainer : darkScheme.tertiaryPalette.tone(90));
+  css += createLightDarkVar(leftSpacing, "tertiary-fixed", isHighContrast ? lightScheme.tertiaryFixed : lightScheme.tertiaryPalette.tone(90), isHighContrast ? darkScheme.tertiaryFixed : darkScheme.tertiaryPalette.tone(90));
+  css += createLightDarkVar(leftSpacing, "tertiary-fixed-dim", isHighContrast ? lightScheme.tertiaryFixedDim : lightScheme.tertiaryPalette.tone(80), isHighContrast ? darkScheme.tertiaryFixedDim : darkScheme.tertiaryPalette.tone(80));
+  css += createLightDarkVar(leftSpacing, "on-tertiary-fixed", lightScheme.onTertiaryFixed, darkScheme.onTertiaryFixed);
+  css += createLightDarkVar(leftSpacing, "on-tertiary-fixed-variant", lightScheme.onTertiaryFixedVariant, darkScheme.onTertiaryFixedVariant);
+  css += "\n" + leftSpacing + "/* Neutral palette variables */\n";
+  css += createLightDarkVar(leftSpacing, "background", lightScheme.background, darkScheme.background);
+  css += createLightDarkVar(leftSpacing, "on-background", lightScheme.onBackground, darkScheme.onBackground);
+  css += createLightDarkVar(leftSpacing, "surface", lightScheme.surface, darkScheme.surface);
+  css += createLightDarkVar(leftSpacing, "surface-dim", lightScheme.surfaceDim, darkScheme.surfaceDim);
+  css += createLightDarkVar(leftSpacing, "surface-bright", lightScheme.surfaceBright, darkScheme.surfaceBright);
+  css += createLightDarkVar(leftSpacing, "surface-container-lowest", lightScheme.surfaceContainerLowest, darkScheme.surfaceContainerLowest);
+  css += createLightDarkVar(leftSpacing, "surface-container", lightScheme.surfaceContainer, darkScheme.surfaceContainer);
+  css += createLightDarkVar(leftSpacing, "surface-container-high", lightScheme.surfaceContainerHigh, darkScheme.surfaceContainerHigh);
+  css += createLightDarkVar(leftSpacing, "surface-container-highest", lightScheme.surfaceContainerHighest, darkScheme.surfaceContainerHighest);
+  css += createLightDarkVar(leftSpacing, "on-surface", lightScheme.onSurface, darkScheme.onSurface);
+  css += createLightDarkVar(leftSpacing, "shadow", lightScheme.shadow, darkScheme.shadow);
+  css += createLightDarkVar(leftSpacing, "scrim", lightScheme.scrim, darkScheme.scrim);
+  css += createLightDarkVar(leftSpacing, "surface-tint", lightScheme.surfaceTint, darkScheme.surfaceTint);
+  css += createLightDarkVar(leftSpacing, "inverse-surface", lightScheme.inverseSurface, darkScheme.inverseSurface);
+  css += createLightDarkVar(leftSpacing, "inverse-on-surface", lightScheme.inverseOnSurface, darkScheme.inverseOnSurface);
+  css += createLightDarkVar(leftSpacing, "outline", lightScheme.outline, darkScheme.outline);
+  css += createLightDarkVar(leftSpacing, "outline-variant", lightScheme.outlineVariant, darkScheme.outlineVariant);
+  css += createLightDarkVar(leftSpacing, "neutral10", lightScheme.neutralPalette.tone(10), darkScheme.neutralPalette.tone(10), "Variable used for the form field native select option text color");
+  css += "\n" + leftSpacing + "/* Error palette variables */\n";
+  css += createLightDarkVar(leftSpacing, "error", isHighContrast ? lightScheme.error : lightScheme.errorPalette.tone(40), isHighContrast ? darkScheme.error : darkScheme.errorPalette.tone(80));
+  css += createLightDarkVar(leftSpacing, "on-error", lightScheme.onError, darkScheme.onError);
+  css += createLightDarkVar(leftSpacing, "error-container", isHighContrast ? lightScheme.errorContainer : lightScheme.errorPalette.tone(90), isHighContrast ? darkScheme.errorContainer : darkScheme.errorPalette.tone(30));
+  css += createLightDarkVar(leftSpacing, "on-error-container", isHighContrast ? lightScheme.onErrorContainer : lightScheme.errorPalette.tone(10), isHighContrast ? darkScheme.onErrorContainer : darkScheme.errorPalette.tone(90));
+  css += "\n" + leftSpacing + "/* Neutral variant palette variables */\n";
+  css += createLightDarkVar(leftSpacing, "surface-variant", lightScheme.surfaceVariant, darkScheme.surfaceVariant);
+  css += createLightDarkVar(leftSpacing, "on-surface-variant", lightScheme.onSurfaceVariant, darkScheme.onSurfaceVariant);
+  css += createLightDarkVar(leftSpacing, "neutral-variant20", lightScheme.neutralVariantPalette.tone(20), darkScheme.neutralVariantPalette.tone(20), "Variable used for the sidenav scrim (container background shadow when opened)");
+  return css;
+}
+function getTypographySysVariablesCSS() {
+  let css = "";
+  css += "\n  /* Typography variables. Only used in the different typescale system variables. */\n";
+  css += "  --mat-sys-brand-font-family: Roboto; /* The font-family to use for brand text. */\n";
+  css += "  --mat-sys-plain-font-family: Roboto; /* The font-family to use for plain text. */\n";
+  css += "  --mat-sys-bold-font-weight: 700; /* The font-weight to use for bold text. */\n";
+  css += "  --mat-sys-medium-font-weight: 500; /* The font-weight to use for medium text. */\n";
+  css += "  --mat-sys-regular-font-weight: 400; /* The font-weight to use for regular text. */\n\n";
+  css += "  /* Typescale variables. */\n";
+  css += "  /* Warning: Risk of reduced fidelity from using the composite typography tokens (ex. --mat-sys-body-large) since\n";
+  css += '     tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */\n';
+  css += "  --mat-sys-body-large: var(--mat-sys-body-large-weight) var(--mat-sys-body-large-size) / var(--mat-sys-body-large-line-height) var(--mat-sys-body-large-font);\n";
+  css += "  --mat-sys-body-large-font: var(--mat-sys-plain-font-family);\n";
+  css += "  --mat-sys-body-large-line-height: 1.5rem;\n";
+  css += "  --mat-sys-body-large-size: 1rem;\n";
+  css += "  --mat-sys-body-large-tracking: 0.031rem;\n";
+  css += "  --mat-sys-body-large-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Body medium typescale */\n";
+  css += "  --mat-sys-body-medium: var(--mat-sys-body-medium-weight) var(--mat-sys-body-medium-size) / var(--mat-sys-body-medium-line-height) var(--mat-sys-body-medium-font);\n";
+  css += "  --mat-sys-body-medium-font: var(--mat-sys-plain-font-family);\n";
+  css += "  --mat-sys-body-medium-line-height: 1.25rem;\n";
+  css += "  --mat-sys-body-medium-size: 0.875rem;\n";
+  css += "  --mat-sys-body-medium-tracking: 0.016rem;\n";
+  css += "  --mat-sys-body-medium-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Body small typescale */\n";
+  css += "  --mat-sys-body-small: var(--mat-sys-body-small-weight) var(--mat-sys-body-small-size) / var(--mat-sys-body-small-line-height) var(--mat-sys-body-small-font);\n";
+  css += "  --mat-sys-body-small-font: var(--mat-sys-plain-font-family);\n";
+  css += "  --mat-sys-body-small-line-height: 1rem;\n";
+  css += "  --mat-sys-body-small-size: 0.75rem;\n";
+  css += "  --mat-sys-body-small-tracking: 0.025rem;\n";
+  css += "  --mat-sys-body-small-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Display large typescale */\n";
+  css += "  --mat-sys-display-large: var(--mat-sys-display-large-weight) var(--mat-sys-display-large-size) / var(--mat-sys-display-large-line-height) var(--mat-sys-display-large-font);\n";
+  css += "  --mat-sys-display-large-font: var(--mat-sys-brand-font-family);\n";
+  css += "  --mat-sys-display-large-line-height: 4rem;\n";
+  css += "  --mat-sys-display-large-size: 3.562rem;\n";
+  css += "  --mat-sys-display-large-tracking: -0.016rem;\n";
+  css += "  --mat-sys-display-large-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Display medium typescale */\n";
+  css += "  --mat-sys-display-medium: var(--mat-sys-display-medium-weight) var(--mat-sys-display-medium-size) / var(--mat-sys-display-medium-line-height) var(--mat-sys-display-medium-font);\n";
+  css += "  --mat-sys-display-medium-font: var(--mat-sys-brand-font-family);\n";
+  css += "  --mat-sys-display-medium-line-height: 3.25rem;\n";
+  css += "  --mat-sys-display-medium-size: 2.812rem;\n";
+  css += "  --mat-sys-display-medium-tracking: 0;\n";
+  css += "  --mat-sys-display-medium-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Display small typescale */\n";
+  css += "  --mat-sys-display-small: var(--mat-sys-display-small-weight) var(--mat-sys-display-small-size) / var(--mat-sys-display-small-line-height) var(--mat-sys-display-small-font);\n";
+  css += "  --mat-sys-display-small-font: var(--mat-sys-brand-font-family);\n";
+  css += "  --mat-sys-display-small-line-height: 2.75rem;\n";
+  css += "  --mat-sys-display-small-size: 2.25rem;\n";
+  css += "  --mat-sys-display-small-tracking: 0;\n";
+  css += "  --mat-sys-display-small-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Headline large typescale */\n";
+  css += "  --mat-sys-headline-large: var(--mat-sys-headline-large-weight) var(--mat-sys-headline-large-size) / var(--mat-sys-headline-large-line-height) var(--mat-sys-headline-large-font);\n";
+  css += "  --mat-sys-headline-large-font: var(--mat-sys-brand-font-family);\n";
+  css += "  --mat-sys-headline-large-line-height: 2.5rem;\n";
+  css += "  --mat-sys-headline-large-size: 2rem;\n";
+  css += "  --mat-sys-headline-large-tracking: 0;\n";
+  css += "  --mat-sys-headline-large-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Headline medium typescale */\n";
+  css += "  --mat-sys-headline-medium: var(--mat-sys-headline-medium-weight) var(--mat-sys-headline-medium-size) / var(--mat-sys-headline-medium-line-height) var(--mat-sys-headline-medium-font);\n";
+  css += "  --mat-sys-headline-medium-font: var(--mat-sys-brand-font-family);\n";
+  css += "  --mat-sys-headline-medium-line-height: 2.25rem;\n";
+  css += "  --mat-sys-headline-medium-size: 1.75rem;\n";
+  css += "  --mat-sys-headline-medium-tracking: 0;\n";
+  css += "  --mat-sys-headline-medium-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Headline small typescale */\n";
+  css += "  --mat-sys-headline-small: var(--mat-sys-headline-small-weight) var(--mat-sys-headline-small-size) / var(--mat-sys-headline-small-line-height) var(--mat-sys-headline-small-font);\n";
+  css += "  --mat-sys-headline-small-font: var(--mat-sys-brand-font-family);\n";
+  css += "  --mat-sys-headline-small-line-height: 2rem;\n";
+  css += "  --mat-sys-headline-small-size: 1.5rem;\n";
+  css += "  --mat-sys-headline-small-tracking: 0;\n";
+  css += "  --mat-sys-headline-small-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Label large typescale */\n";
+  css += "  --mat-sys-label-large: var(--mat-sys-label-large-weight) var(--mat-sys-label-large-size) / var(--mat-sys-label-large-line-height) var(--mat-sys-label-large-font);\n";
+  css += "  --mat-sys-label-large-font: var(--mat-sys-plain-font-family);\n";
+  css += "  --mat-sys-label-large-line-height: 1.25rem;\n";
+  css += "  --mat-sys-label-large-size: 0.875rem;\n";
+  css += "  --mat-sys-label-large-tracking: 0.006rem;\n";
+  css += "  --mat-sys-label-large-weight: var(--mat-sys-medium-font-weight);\n";
+  css += "  --mat-sys-label-large-weight-prominent: var(--mat-sys-bold-font-weight);\n";
+  css += "\n  /* Label medium typescale */\n";
+  css += "  --mat-sys-label-medium: var(--mat-sys-label-medium-weight) var(--mat-sys-label-medium-size) / var(--mat-sys-label-medium-line-height) var(--mat-sys-label-medium-font);\n";
+  css += "  --mat-sys-label-medium-font: var(--mat-sys-plain-font-family);\n";
+  css += "  --mat-sys-label-medium-line-height: 1rem;\n";
+  css += "  --mat-sys-label-medium-size: 0.75rem;\n";
+  css += "  --mat-sys-label-medium-tracking: 0.031rem;\n";
+  css += "  --mat-sys-label-medium-weight: var(--mat-sys-medium-font-weight);\n";
+  css += "  --mat-sys-label-medium-weight-prominent: var(--mat-sys-bold-font-weight);\n";
+  css += "\n  /* Label small typescale */\n";
+  css += "  --mat-sys-label-small: var(--mat-sys-label-small-weight) var(--mat-sys-label-small-size) / var(--mat-sys-label-small-line-height) var(--mat-sys-label-small-font);\n";
+  css += "  --mat-sys-label-small-font: var(--mat-sys-plain-font-family);\n";
+  css += "  --mat-sys-label-small-line-height: 1rem;\n";
+  css += "  --mat-sys-label-small-size: 0.688rem;\n";
+  css += "  --mat-sys-label-small-tracking: 0.031rem;\n";
+  css += "  --mat-sys-label-small-weight: var(--mat-sys-medium-font-weight);\n";
+  css += "\n  /* Title large typescale */\n";
+  css += "  --mat-sys-title-large: var(--mat-sys-title-large-weight) var(--mat-sys-title-large-size) / var(--mat-sys-title-large-line-height) var(--mat-sys-title-large-font);\n";
+  css += "  --mat-sys-title-large-font: var(--mat-sys-brand-font-family);\n";
+  css += "  --mat-sys-title-large-line-height: 1.75rem;\n";
+  css += "  --mat-sys-title-large-size: 1.375rem;\n";
+  css += "  --mat-sys-title-large-tracking: 0;\n";
+  css += "  --mat-sys-title-large-weight: var(--mat-sys-regular-font-weight);\n";
+  css += "\n  /* Title medium typescale */\n";
+  css += "  --mat-sys-title-medium: var(--mat-sys-title-medium-weight) var(--mat-sys-title-medium-size) / var(--mat-sys-title-medium-line-height) var(--mat-sys-title-medium-font);\n";
+  css += "  --mat-sys-title-medium-font: var(--mat-sys-plain-font-family);\n";
+  css += "  --mat-sys-title-medium-line-height: 1.5rem;\n";
+  css += "  --mat-sys-title-medium-size: 1rem;\n";
+  css += "  --mat-sys-title-medium-tracking: 0.009rem;\n";
+  css += "  --mat-sys-title-medium-weight: var(--mat-sys-medium-font-weight);\n";
+  css += "\n  /* Title small typescale */\n";
+  css += "  --mat-sys-title-small: var(--mat-sys-title-small-weight) var(--mat-sys-title-small-size) / var(--mat-sys-title-small-line-height) var(--mat-sys-title-small-font);\n";
+  css += "  --mat-sys-title-small-font: var(--mat-sys-plain-font-family);\n";
+  css += "  --mat-sys-title-small-line-height: 1.25rem;\n";
+  css += "  --mat-sys-title-small-size: 0.875rem;\n";
+  css += "  --mat-sys-title-small-tracking: 0.006rem;\n";
+  css += "  --mat-sys-title-small-weight: var(--mat-sys-medium-font-weight);\n";
+  return css;
+}
+function getElevationSysVariablesCSS() {
+  let css = "";
+  css += "\n  /* Box shadow colors. Only used in the elevation level system variables. */\n";
+  css += "  --mat-sys-umbra-color: color-mix(in srgb, var(--mat-sys-shadow), transparent 80%);\n";
+  css += "  --mat-sys-penumbra-color: color-mix(in srgb, var(--mat-sys-shadow), transparent 86%);\n";
+  css += "  --mat-sys-ambient-color: color-mix(in srgb, var(--mat-sys-shadow), transparent 88%);\n";
+  css += "\n  /* Elevation level system variables. These are used as the value for box-shadow CSS property. */\n";
+  css += "  --mat-sys-level0: 0px 0px 0px 0px var(--mat-sys-umbra-color), 0px 0px 0px 0px var(--mat-sys-penumbra-color), 0px 0px 0px 0px var(--mat-sys-ambient-color);\n";
+  css += "  --mat-sys-level1: 0px 2px 1px -1px var(--mat-sys-umbra-color), 0px 1px 1px 0px var(--mat-sys-penumbra-color), 0px 1px 3px 0px var(--mat-sys-ambient-color);\n";
+  css += "  --mat-sys-level2: 0px 3px 3px -2px var(--mat-sys-umbra-color), 0px 3px 4px 0px var(--mat-sys-penumbra-color), 0px 1px 8px 0px var(--mat-sys-ambient-color);\n";
+  css += "  --mat-sys-level3: 0px 3px 5px -1px var(--mat-sys-umbra-color), 0px 6px 10px 0px var(--mat-sys-penumbra-color), 0px 1px 18px 0px var(--mat-sys-ambient-color);\n";
+  css += "  --mat-sys-level4: 0px 5px 5px -3px var(--mat-sys-umbra-color), 0px 8px 10px 1px var(--mat-sys-penumbra-color), 0px 3px 14px 2px var(--mat-sys-ambient-color);\n";
+  css += "  --mat-sys-level5: 0px 7px 8px -4px var(--mat-sys-umbra-color), 0px 12px 17px 2px var(--mat-sys-penumbra-color), 0px 5px 22px 4px var(--mat-sys-ambient-color);\n";
+  return css;
+}
+function getShapeSysVariablesCSS() {
+  let css = "";
+  css += "  --mat-sys-corner-extra-large: 28px;\n";
+  css += "  --mat-sys-corner-extra-large-top: 28px 28px 0 0;\n";
+  css += "  --mat-sys-corner-extra-small: 4px;\n";
+  css += "  --mat-sys-corner-extra-small-top: 4px 4px 0 0;\n";
+  css += "  --mat-sys-corner-full: 9999px;\n";
+  css += "  --mat-sys-corner-large: 16px;\n";
+  css += "  --mat-sys-corner-large-end: 0 16px 16px 0;\n";
+  css += "  --mat-sys-corner-large-start: 16px 0 0 16px;\n";
+  css += "  --mat-sys-corner-large-top: 16px 16px 0 0;\n";
+  css += "  --mat-sys-corner-medium: 12px;\n";
+  css += "  --mat-sys-corner-none: 0;\n";
+  css += "  --mat-sys-corner-small: 8px;\n";
+  return css;
 }
-function createThemeFile(scss, tree, directory) {
-  const filePath = directory ? directory + "_theme-colors.scss" : "_theme-colors.scss";
-  tree.create(filePath, scss);
+function getStateSysVariablesCSS() {
+  let css = "";
+  css += "  --mat-sys-dragged-state-layer-opacity: 0.16;\n";
+  css += "  --mat-sys-focus-state-layer-opacity: 0.12;\n";
+  css += "  --mat-sys-hover-state-layer-opacity: 0.08;\n";
+  css += "  --mat-sys-pressed-state-layer-opacity: 0.12;\n";
+  return css;
+}
+function getAllSysVariablesCSS(lightColorScheme, darkColorScheme) {
+  let css = "";
+  css += "  /* COLOR SYSTEM VARIABLES */\n";
+  css += "  color-scheme: light;\n\n";
+  css += getColorSysVariablesCSS(lightColorScheme, darkColorScheme);
+  css += "\n  /* TYPOGRAPHY SYSTEM VARIABLES */\n";
+  css += getTypographySysVariablesCSS();
+  css += "\n  /* ELEVATION SYSTEM VARIABLES */\n";
+  css += getElevationSysVariablesCSS();
+  css += "\n  /* SHAPE SYSTEM VARIABLES */\n";
+  css += getShapeSysVariablesCSS();
+  css += "\n  /* STATE SYSTEM VARIABLES */\n";
+  css += getStateSysVariablesCSS();
+  return css;
+}
+function getHighContrastOverridesCSS(lightColorScheme, darkColorScheme) {
+  let css = "\n";
+  css += "  @media (prefers-contrast: more) {\n";
+  css += getColorSysVariablesCSS(lightColorScheme, darkColorScheme, true);
+  css += "  }\n";
+  return css;
+}
+function createThemeFile(content, tree, directory, isScss = true) {
+  const fileName = isScss ? "_theme-colors.scss" : "theme.css";
+  const filePath = directory ? directory + fileName : fileName;
+  tree.create(filePath, content);
+}
+function getColorComment(primaryColor, secondaryColor, tertiaryColor, neutralColor) {
+  let colorComment = "Color palettes are generated from primary: " + primaryColor;
+  if (secondaryColor) {
+    colorComment += ", secondary: " + secondaryColor;
+  }
+  if (tertiaryColor) {
+    colorComment += ", tertiary: " + tertiaryColor;
+  }
+  if (neutralColor) {
+    colorComment += ", neutral: " + neutralColor;
+  }
+  return colorComment;
 }
 function theme_color_default(options) {
   return (tree, context) => __async(this, null, function* () {
-    let colorComment = "Color palettes are generated from primary: " + options.primaryColor;
-    const primaryColorHct = getHctFromHex(options.primaryColor);
-    const primaryPalette = TonalPalette.fromHct(primaryColorHct);
-    let secondaryPalette;
-    if (options.secondaryColor) {
-      colorComment += ", secondary: " + options.secondaryColor;
-      secondaryPalette = TonalPalette.fromHct(getHctFromHex(options.secondaryColor));
-    } else {
-      secondaryPalette = TonalPalette.fromHueAndChroma(primaryColorHct.hue, Math.max(primaryColorHct.chroma - 32, primaryColorHct.chroma * 0.5));
-    }
-    let tertiaryPalette;
-    if (options.tertiaryColor) {
-      colorComment += ", tertiary: " + options.tertiaryColor;
-      tertiaryPalette = TonalPalette.fromHct(getHctFromHex(options.tertiaryColor));
-    } else {
-      tertiaryPalette = TonalPalette.fromInt(DislikeAnalyzer.fixIfDisliked(new TemperatureCache(primaryColorHct).analogous(3, 6)[2]).toInt());
-    }
-    let neutralPalette;
-    if (options.neutralColor) {
-      colorComment += ", neutral: " + options.neutralColor;
-      neutralPalette = TonalPalette.fromHct(getHctFromHex(options.neutralColor));
-    } else {
-      neutralPalette = TonalPalette.fromHueAndChroma(primaryColorHct.hue, primaryColorHct.chroma / 8);
-    }
-    const neutralVariantPalette = TonalPalette.fromHueAndChroma(primaryColorHct.hue, primaryColorHct.chroma / 8 + 4);
-    const errorPalette = getMaterialDynamicScheme(primaryPalette, secondaryPalette, tertiaryPalette, neutralPalette, neutralVariantPalette, false, 0).errorPalette;
-    const colorPalettes = getMapFromColorTonalPalettes(primaryPalette, secondaryPalette, tertiaryPalette, neutralPalette, neutralVariantPalette, errorPalette);
-    let themeScss = generateSCSSTheme(colorPalettes, colorComment);
+    const colorComment = getColorComment(options.primaryColor, options.secondaryColor, options.tertiaryColor, options.neutralColor);
+    const colorPalettes = getColorPalettes(options.primaryColor, options.secondaryColor, options.tertiaryColor, options.neutralColor);
+    let lightHighContrastColorScheme;
+    let darkHighContrastColorScheme;
     if (options.includeHighContrast) {
-      themeScss += generateHighContrastOverrideMixinsSCSS(primaryPalette, secondaryPalette, tertiaryPalette, neutralPalette, neutralVariantPalette);
+      lightHighContrastColorScheme = getMaterialDynamicScheme(
+        colorPalettes.primary,
+        colorPalettes.secondary,
+        colorPalettes.tertiary,
+        colorPalettes.neutral,
+        colorPalettes.neutralVariant,
+        false,
+        1
+      );
+      darkHighContrastColorScheme = getMaterialDynamicScheme(
+        colorPalettes.primary,
+        colorPalettes.secondary,
+        colorPalettes.tertiary,
+        colorPalettes.neutral,
+        colorPalettes.neutralVariant,
+        true,
+        1
+      );
+    }
+    if (options.isScss) {
+      let themeScss = generateSCSSTheme(colorPalettes, colorComment);
+      if (options.includeHighContrast) {
+        themeScss += generateHighContrastOverrideMixinsSCSS(lightHighContrastColorScheme, darkHighContrastColorScheme);
+      }
+      createThemeFile(themeScss, tree, options.directory);
+    } else {
+      let themeCss = "";
+      themeCss += "/* Note: " + colorComment + " */\n";
+      themeCss += "html {\n";
+      const lightColorScheme = getMaterialDynamicScheme(
+        colorPalettes.primary,
+        colorPalettes.secondary,
+        colorPalettes.tertiary,
+        colorPalettes.neutral,
+        colorPalettes.neutralVariant,
+        false,
+        0
+      );
+      const darkColorScheme = getMaterialDynamicScheme(
+        colorPalettes.primary,
+        colorPalettes.secondary,
+        colorPalettes.tertiary,
+        colorPalettes.neutral,
+        colorPalettes.neutralVariant,
+        true,
+        0
+      );
+      themeCss += getAllSysVariablesCSS(lightColorScheme, darkColorScheme);
+      if (options.includeHighContrast) {
+        themeCss += getHighContrastOverridesCSS(lightHighContrastColorScheme, darkHighContrastColorScheme);
+      }
+      themeCss += "}\n";
+      createThemeFile(themeCss, tree, options.directory, false);
     }
-    createThemeFile(themeScss, tree, options.directory);
   });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  generateSCSSTheme
+  generateSCSSTheme,
+  getAllSysVariablesCSS,
+  getColorPalettes,
+  getHctFromHex,
+  getHighContrastOverridesCSS,
+  getMaterialDynamicScheme
 });
 /**
  * @license