@acorex/core 22.1.0-next.31 → 22.1.0-next.32

package/fesm2022/acorex-core-theme-builder.mjs

@@ -0,0 +1,1329 @@
+import * as culori from 'culori';
+
+/**
+ * Canonical role order for full-theme CSS export (must stay in sync with theme tail + `:root` generation).
+ */
+/** Roles that produce `--ax-sys-color-{role}-*` tokens under `:root` / `.ax-dark`. */
+const EXPORT_ROOT_ROLE_ORDER = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'surface',
+    'accent',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+    'accent5',
+    'accent6',
+];
+/**
+ * Roles mirrored in `@theme` and compound `@utility` blocks.
+ * Omits grayscale `surface` (handled via neutral tokens + `--ax-sys-color-surface-*` scale only).
+ */
+const EXPORT_TAIL_THEME_PALETTE_ORDER = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'accent',
+    'accent1',
+    'accent2',
+    'accent3',
+    'accent4',
+    'accent5',
+    'accent6',
+];
+
+/**
+ * Mirrors `packages/styles/themes/default.css` from `@theme inline {` through the end:
+ * `@theme inline`, `.ax-dark .ax-light` subtree overrides, `.ax-dark` color-alias re-declaration,
+ * role utilities, typography, headings, spacing.
+ * Only `--ax-sys-*` RGB triplets in `:root` / `.ax-dark` vary (handled in ThemeBuilderService).
+ * Extends the package theme with `accent1`…`accent6` after `accent` (seven accent palettes total).
+ */
+const SEMANTIC_LEVELS = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
+/**
+ * Default Tailwind scale (matches `ax-md`) wired to `--ax-sys-*-base` tokens.
+ * Mirrors `packages/styles/themes/default.css` `:root` and `@theme inline` blocks.
+ */
+function buildDefaultTailwindScaleBlock(scope = 'root') {
+    const comment = scope === 'theme'
+        ? '  /* Standard Tailwind scale (matches ax-md) — wired to base tokens so all utilities respond to theme changes */\n'
+        : '  /* Standard Tailwind type scale (matches ax-md) — used when no ax-* size class is applied */\n';
+    return (comment +
+        `  --spacing: var(--ax-sys-spacing-base);
+  --text-xs: var(--ax-sys-text-xs-base);
+  --text-sm: var(--ax-sys-text-sm-base);
+  --text-base: var(--ax-sys-body-font-size);
+  --text-lg: var(--ax-sys-text-lg-base);
+  --text-xl: var(--ax-sys-text-xl-base);
+  --leading-3: var(--ax-sys-leading-3-base);
+  --leading-4: var(--ax-sys-leading-4-base);
+  --leading-5: var(--ax-sys-leading-5-base);
+  --leading-6: var(--ax-sys-leading-6-base);
+
+`);
+}
+/** Verbatim Tailwind utilities after `ax-accent`; matches default.css § max-w-8xl … ax-xl */
+const THEME_TAIL_VERBATIM_FOOTER = `
+@utility max-w-8xl {
+  max-width: 90rem;
+}
+
+@utility ax-state-disabled {
+  @apply cursor-not-allowed opacity-50 *:cursor-not-allowed;
+}
+
+@utility ax-state-readonly {
+  @apply cursor-text opacity-70 *:cursor-text;
+}
+
+@utility ax-fill {
+  &.ax-default {
+    @apply light-surface dark:dark-surface;
+  }
+  &.ax-editor-container {
+    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+  }
+}
+
+@utility ax-flat {
+  @apply rounded-none;
+  &.ax-default {
+    @apply border-border-lightest dark:border-border-darkest border-b bg-transparent;
+  }
+  &.ax-editor-container {
+    @apply focus-within:border-primary!;
+  }
+}
+
+@utility ax-solid {
+  @apply bg-(--ax-comp-bg,var(--color-lightest)) text-(--ax-comp-text,var(--color-on-lightest)) dark:bg-(--ax-comp-bg,var(--color-darkest)) dark:text-(--ax-comp-text,var(--color-on-darkest));
+  &.ax-default {
+    @apply lightest-surface dark:darkest-surface border;
+  }
+  &.ax-state-selected {
+    @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
+  }
+  &.ax-editor-container {
+    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+  }
+}
+
+@utility ax-solid-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
+  }
+  @apply ax-solid transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      @apply bg-(--ax-comp-bg-dark,var(--color-lighter)) text-(--ax-comp-text-dark,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-dark,var(--color-darker)) dark:text-(--ax-comp-text-dark,var(--color-on-darker));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) ring-1 ring-(--ax-comp-bg-dark) ring-offset-1 dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
+  }
+}
+
+@utility ax-outline {
+  @apply border bg-transparent;
+  border-color: var(--ax-comp-edge, var(--ax-comp-bg, var(--color-border-lightest)));
+  color: var(--ax-comp-ink, var(--ax-comp-bg, var(--color-on-lightest)));
+  &.ax-default {
+    @apply border-border-lightest dark:border-border-darkest border;
+  }
+  &.ax-state-selected {
+    border-color: var(--ax-comp-edge-darker, var(--ax-comp-bg-darker, var(--color-border-light)));
+    color: var(--ax-comp-ink-darker, var(--ax-comp-bg-darker, var(--color-on-light)));
+  }
+  &.ax-editor-container {
+    @apply focus-within:ring-primary/30 focus-within:border-primary focus-within:ring-3;
+  }
+}
+
+@utility ax-outline-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-ink, var(--ax-comp-bg, var(--color-on-lightest))) 25%, transparent);
+  }
+  @apply ax-outline transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      border-color: var(--ax-comp-edge-dark, var(--ax-comp-bg-dark, var(--color-border-lighter)));
+      color: var(--ax-comp-ink-dark, var(--ax-comp-bg-dark, var(--color-on-lighter)));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    border-color: var(--ax-comp-edge-darker, var(--ax-comp-bg-darker, var(--color-border-light)));
+    color: var(--ax-comp-ink-darker, var(--ax-comp-bg-darker, var(--color-on-light)));
+  }
+}
+
+@utility ax-twotone {
+  @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
+  &.ax-state-selected {
+    @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
+  }
+}
+
+@utility ax-twotone-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-ink, var(--ax-comp-bg, var(--color-on-lightest))) 25%, transparent);
+  }
+  @apply ax-twotone transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      @apply bg-(--ax-comp-bg-lighter,var(--color-light)) text-(--ax-comp-text-lighter,var(--color-on-light)) dark:bg-(--ax-comp-bg-lighter,var(--color-dark)) dark:text-(--ax-comp-text-lighter,var(--color-on-dark));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
+  }
+}
+
+@utility ax-blank {
+  @apply bg-transparent;
+  color: var(--ax-comp-ink, var(--ax-comp-bg, var(--color-on-surface)));
+  &.ax-state-selected {
+    @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
+  }
+}
+
+@utility ax-blank-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-ink, var(--ax-comp-bg, var(--color-on-lightest))) 25%, transparent);
+  }
+  @apply ax-blank transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
+  }
+}
+
+@utility links {
+  @apply bg-transparent;
+  color: var(--ax-comp-ink, var(--ax-comp-bg, var(--color-on-surface)));
+  &.ax-state-selected {
+    color: var(--ax-comp-ink-darker, var(--ax-comp-bg-darker, var(--color-on-surface)));
+  }
+}
+
+@utility links-interactive {
+  @supports (color: color-mix(in lab, red, red)) {
+    --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-ink, var(--ax-comp-bg, var(--color-on-lightest))) 25%, transparent);
+  }
+  @apply links transition-colors;
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
+    &:hover,
+    &:focus,
+    &:focus-within,
+    &:focus-visible {
+      color: var(--ax-comp-ink-dark, var(--ax-comp-bg-dark, var(--color-on-surface)));
+    }
+  }
+  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
+    color: var(--ax-comp-ink-darker, var(--ax-comp-bg-darker, var(--color-on-surface)));
+  }
+}
+@utility h1 {
+  font-size: 2.5rem;
+  font-weight: 500;
+  line-height: 2.5rem;
+}
+@utility h2 {
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 2rem;
+}
+@utility h3 {
+  font-size: 1.75rem;
+  font-weight: 500;
+  line-height: 1.75rem;
+}
+@utility h4 {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+@utility h5 {
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.125rem;
+}
+@utility h6 {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1rem;
+}
+@utility heading {
+  width: 100%;
+  border-bottom: 1px solid;
+  border-color: rgba(var(--ax-sys-color-border-lightest-surface));
+  line-height: 0.1em;
+  margin: 1rem auto;
+}
+@utility heading-start {
+  text-align: start;
+}
+@utility heading-center {
+  text-align: center;
+}
+@utility heading-end {
+  text-align: end;
+}
+@utility subtitle {
+  opacity: 74%;
+  display: block;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.625rem;
+}
+@utility tabs-fit {
+  width: 100%;
+}
+@utility ax-xs {
+  /* Spacing */
+  --spacing: calc(var(--ax-sys-spacing-base) * 0.5);
+  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.5);
+
+  /* Typography */
+  --text-xs: calc(var(--ax-sys-text-xs-base) * 5 / 6);
+  --text-sm: calc(var(--ax-sys-text-sm-base) * 11 / 14);
+  --text-base: calc(var(--ax-sys-body-font-size) * 0.75);
+  --text-lg: calc(var(--ax-sys-text-lg-base) * 7 / 9);
+  --text-xl: calc(var(--ax-sys-text-xl-base) * 0.8);
+
+  /* Line Heights */
+  --leading-3: var(--ax-sys-leading-3-base);
+  --leading-4: calc(var(--ax-sys-leading-4-base) * 0.875);
+  --leading-5: calc(var(--ax-sys-leading-5-base) * 0.8);
+  --leading-6: calc(var(--ax-sys-leading-6-base) * 5 / 6);
+}
+
+@utility ax-sm {
+  /* Spacing */
+  --spacing: calc(var(--ax-sys-spacing-base) * 0.75);
+  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 0.75);
+
+  /* Typography */
+  --text-xs: calc(var(--ax-sys-text-xs-base) * 11 / 12);
+  --text-sm: calc(var(--ax-sys-text-sm-base) * 6 / 7);
+  --text-base: calc(var(--ax-sys-body-font-size) * 0.875);
+  --text-lg: calc(var(--ax-sys-text-lg-base) * 8 / 9);
+  --text-xl: calc(var(--ax-sys-text-xl-base) * 0.9);
+
+  /* Line Heights */
+  --leading-3: calc(var(--ax-sys-leading-3-base) * 7 / 6);
+  --leading-4: var(--ax-sys-leading-4-base);
+  --leading-5: calc(var(--ax-sys-leading-5-base) * 0.9);
+  --leading-6: calc(var(--ax-sys-leading-6-base) * 11 / 12);
+}
+
+@utility ax-md {
+  /* Tailwind Default Scale */
+  --spacing: var(--ax-sys-spacing-base);
+  --ax-sys-border-radius: var(--ax-sys-border-radius-base);
+
+  /* Typography */
+  --text-xs: var(--ax-sys-text-xs-base);
+  --text-sm: var(--ax-sys-text-sm-base);
+  --text-base: var(--ax-sys-body-font-size);
+  --text-lg: var(--ax-sys-text-lg-base);
+  --text-xl: var(--ax-sys-text-xl-base);
+
+  /* Line Heights */
+  --leading-3: var(--ax-sys-leading-3-base);
+  --leading-4: var(--ax-sys-leading-4-base);
+  --leading-5: var(--ax-sys-leading-5-base);
+  --leading-6: var(--ax-sys-leading-6-base);
+}
+
+@utility ax-lg {
+  /* Spacing */
+  --spacing: calc(var(--ax-sys-spacing-base) * 1.25);
+  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.25);
+
+  /* Typography */
+  --text-xs: calc(var(--ax-sys-text-xs-base) * 13 / 12);
+  --text-sm: calc(var(--ax-sys-text-sm-base) * 15 / 14);
+  --text-base: calc(var(--ax-sys-body-font-size) * 17 / 16);
+  --text-lg: calc(var(--ax-sys-text-lg-base) * 10 / 9);
+  --text-xl: calc(var(--ax-sys-text-xl-base) * 1.1);
+
+  /* Line Heights */
+  --leading-3: calc(var(--ax-sys-leading-3-base) * 4 / 3);
+  --leading-4: calc(var(--ax-sys-leading-4-base) * 1.125);
+  --leading-5: calc(var(--ax-sys-leading-5-base) * 1.1);
+  --leading-6: calc(var(--ax-sys-leading-6-base) * 13 / 12);
+}
+
+@utility ax-xl {
+  /* Spacing */
+  --spacing: calc(var(--ax-sys-spacing-base) * 1.5);
+  --ax-sys-border-radius: calc(var(--ax-sys-border-radius-base) * 1.5);
+
+  /* Typography */
+  --text-xs: calc(var(--ax-sys-text-xs-base) * 7 / 6);
+  --text-sm: calc(var(--ax-sys-text-sm-base) * 8 / 7);
+  --text-base: calc(var(--ax-sys-body-font-size) * 1.125);
+  --text-lg: calc(var(--ax-sys-text-lg-base) * 11 / 9);
+  --text-xl: calc(var(--ax-sys-text-xl-base) * 1.2);
+
+  /* Line Heights */
+  --leading-3: calc(var(--ax-sys-leading-3-base) * 1.5);
+  --leading-4: calc(var(--ax-sys-leading-4-base) * 1.25);
+  --leading-5: calc(var(--ax-sys-leading-5-base) * 1.2);
+  --leading-6: calc(var(--ax-sys-leading-6-base) * 7 / 6);
+}
+`;
+const SHADE_KEYS = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', '950'];
+function roleSectionTitle(role) {
+    if (role === 'accent')
+        return 'Accent Surfaces';
+    const accentN = /^accent(\d+)$/.exec(role);
+    if (accentN?.[1])
+        return `Accent ${accentN[1]} Surfaces`;
+    return `${role.charAt(0).toUpperCase()}${role.slice(1)} Surfaces`;
+}
+/** @theme semantic lines for neutral UI surfaces (matches default.css) */
+function neutralThemeSemanticBlock(options) {
+    let css = `\n`;
+    css += `  --color-lightest: rgba(var(--ax-sys-color-lightest-surface));\n`;
+    css += `  --color-on-lightest: rgba(var(--ax-sys-color-on-lightest-surface));\n`;
+    css += `  --color-border-lightest: rgba(var(--ax-sys-color-border-lightest-surface));\n`;
+    css += `  --color-lighter: rgba(var(--ax-sys-color-lighter-surface));\n`;
+    css += `  --color-on-lighter: rgba(var(--ax-sys-color-on-lighter-surface));\n`;
+    css += `  --color-border-lighter: rgba(var(--ax-sys-color-border-lighter-surface));\n`;
+    css += `  --color-light: rgba(var(--ax-sys-color-light-surface));\n`;
+    css += `  --color-on-light: rgba(var(--ax-sys-color-on-light-surface));\n`;
+    css += `  --color-border-light: rgba(var(--ax-sys-color-border-light-surface));\n`;
+    if (!options?.omitDuplicateSurfaceLine) {
+        css += `  --color-surface: rgba(var(--ax-sys-color-surface));\n`;
+    }
+    css += `  --color-on-surface: rgba(var(--ax-sys-color-on-surface));\n`;
+    css += `  --color-border-surface: rgba(var(--ax-sys-color-border-surface));\n`;
+    css += `  --color-dark: rgba(var(--ax-sys-color-dark-surface));\n`;
+    css += `  --color-on-dark: rgba(var(--ax-sys-color-on-dark-surface));\n`;
+    css += `  --color-border-dark: rgba(var(--ax-sys-color-border-dark-surface));\n`;
+    css += `  --color-darker: rgba(var(--ax-sys-color-darker-surface));\n`;
+    css += `  --color-on-darker: rgba(var(--ax-sys-color-on-darker-surface));\n`;
+    css += `  --color-border-darker: rgba(var(--ax-sys-color-border-darker-surface));\n`;
+    css += `  --color-darkest: rgba(var(--ax-sys-color-darkest-surface));\n`;
+    css += `  --color-on-darkest: rgba(var(--ax-sys-color-on-darkest-surface));\n`;
+    css += `  --color-border-darkest: rgba(var(--ax-sys-color-border-darkest-surface));\n`;
+    return css;
+}
+/** Matches default.css `@theme inline` block per palette role (ordering and duplicate `--color-{role}` lines). */
+function themeNumericAndSemanticForRole(role, options) {
+    let css = `  /* ${roleSectionTitle(role)} */\n`;
+    css += `  --color-${role}: rgba(var(--ax-sys-color-${role}-surface));\n`;
+    for (const shade of SHADE_KEYS) {
+        css += `  --color-${role}-${shade}: rgba(var(--ax-sys-color-${role}-${shade}));\n`;
+    }
+    css += `\n`;
+    const emitTriplet = (level) => {
+        css += `  --color-${role}-${level}: rgba(var(--ax-sys-color-${role}-${level}-surface));\n`;
+        css += `  --color-on-${role}-${level}: rgba(var(--ax-sys-color-on-${role}-${level}-surface));\n`;
+        css += `  --color-border-${role}-${level}: rgba(var(--ax-sys-color-border-${role}-${level}-surface));\n`;
+    };
+    emitTriplet('lightest');
+    emitTriplet('lighter');
+    emitTriplet('light');
+    if (!options?.omitMiddleRoleSurfaceColorDup) {
+        css += `  --color-${role}: rgba(var(--ax-sys-color-${role}-surface));\n`;
+    }
+    css += `  --color-on-${role}: rgba(var(--ax-sys-color-on-${role}-surface));\n`;
+    css += `  --color-border-${role}: rgba(var(--ax-sys-color-border-${role}-surface));\n`;
+    emitTriplet('dark');
+    emitTriplet('darker');
+    emitTriplet('darkest');
+    const last = EXPORT_TAIL_THEME_PALETTE_ORDER[EXPORT_TAIL_THEME_PALETTE_ORDER.length - 1];
+    if (role !== last)
+        css += `\n`;
+    return css;
+}
+/** Surface scale (--color-surface-50…) at top of @theme */
+function themeSurfaceScaleBlock() {
+    let css = `  /* Surface Surfaces */\n`;
+    css += `  --color-surface: rgba(var(--ax-sys-color-surface));\n`;
+    for (const shade of SHADE_KEYS) {
+        css += `  --color-surface-${shade}: rgba(var(--ax-sys-color-surface-${shade}));\n`;
+    }
+    css += `\n`;
+    return css;
+}
+function utilitiesPrefixBlock() {
+    return `@utility bg-default {
+  background-color: var(--color-bg-default);
+}
+
+@utility text-default {
+  color: var(--color-text-default);
+}
+
+@utility border-default {
+  border-color: var(--color-border-default);
+}
+
+@utility text {
+  color: var(--color-text-default);
+}
+
+@utility border-s-default {
+  border-inline-start-width: 1px;
+}
+
+@utility border-e-default {
+  border-inline-end-width: 1px;
+}
+
+@utility border-t-default {
+  border-top-width: 1px;
+}
+
+@utility border-b-default {
+  border-bottom-width: 1px;
+}
+
+@utility border-x-default {
+  border-left-width: 1px;
+  border-right-width: 1px;
+}
+
+@utility border-y-default {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+`;
+}
+function utilityClassName(role, level) {
+    return level === 'surface' ? `${role}-surface` : `${role}-${level}-surface`;
+}
+/** Background / foreground / border for one semantic level */
+function cssTripletVars(role, level) {
+    if (level === 'surface') {
+        return {
+            bg: `var(--color-${role})`,
+            fg: `var(--color-on-${role})`,
+            bd: `var(--color-border-${role})`,
+        };
+    }
+    return {
+        bg: `var(--color-${role}-${level})`,
+        fg: `var(--color-on-${role}-${level})`,
+        bd: `var(--color-border-${role}-${level})`,
+    };
+}
+const AX_DARK_THEME_ALIAS_COMMENT = `/*
+ * Re-declare every Tailwind theme color alias for the \`.ax-dark\` subtree.
+ * \`@theme inline\` resolves inner \`var(--ax-sys-*)\` at :root; this block recomputes \`--color-*\`
+ * on \`.ax-dark\` so localized dark regions track updated primitives.
+ * Static tokens (\`--radius-default\`, breakpoints) are omitted — same rationale as default.css.
+ */
+
+`;
+const AX_LIGHT_SUBTREE_COMMENT = `/*
+ * Re-declare light theme primitives and Tailwind color aliases for the \`.ax-light\` subtree.
+ * Mirrors the \`.ax-dark\` override pattern so localized light zones work inside a dark page.
+ */
+
+`;
+/** Shared \`--color-*\` alias body for \`@theme inline\`, \`.ax-dark .ax-light\`, and \`.ax-dark\` alias blocks. */
+function buildThemeColorAliasesBody(options) {
+    let css = `  --color-bg-default: rgba(var(--ax-sys-color-bg-default));\n`;
+    css += `  --color-text-default: rgba(var(--ax-sys-color-text-default));\n`;
+    css += `  --color-border-default: rgba(var(--ax-sys-color-border-default));\n\n`;
+    css += themeSurfaceScaleBlock();
+    css += neutralThemeSemanticBlock({ omitDuplicateSurfaceLine: options?.omitDuplicateSurfaceLine });
+    for (const role of EXPORT_TAIL_THEME_PALETTE_ORDER) {
+        css += themeNumericAndSemanticForRole(role, {
+            omitMiddleRoleSurfaceColorDup: options?.omitMiddleRoleSurfaceColorDup,
+        });
+    }
+    return css;
+}
+function buildAxDarkThemeColorAliases() {
+    let css = AX_DARK_THEME_ALIAS_COMMENT;
+    css += `.ax-dark {\n`;
+    css += `  --ax-sys-theme-isDark: 1;\n`;
+    css += buildThemeColorAliasesBody({
+        omitMiddleRoleSurfaceColorDup: true,
+        omitDuplicateSurfaceLine: true,
+    });
+    css += `}\n\n`;
+    return css;
+}
+/** Light subtree inside a dark page — primitives are generated from the light palette in ThemeBuilderService. */
+function buildAxLightSubtreeBlock(primitivesCss) {
+    let css = AX_LIGHT_SUBTREE_COMMENT;
+    css += `.ax-dark .ax-light {\n`;
+    css += `  --ax-sys-theme-isDark: 0;\n`;
+    css += `  --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));\n`;
+    css += `  --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));\n\n`;
+    css += primitivesCss;
+    css += buildThemeColorAliasesBody({
+        omitMiddleRoleSurfaceColorDup: true,
+        omitDuplicateSurfaceLine: true,
+    });
+    css += `}\n\n`;
+    return css;
+}
+function compoundSurfaceUtilities(role) {
+    let css = `/* ${roleSectionTitle(role)} */\n\n`;
+    for (const level of SEMANTIC_LEVELS) {
+        const name = utilityClassName(role, level);
+        const { bg, fg, bd } = cssTripletVars(role, level);
+        css += `@utility ${name} {
+  background-color: ${bg};
+  color: ${fg};
+  border-color: ${bd};
+}
+
+`;
+    }
+    css += `@utility ax-${role} {\n`;
+    for (const level of SEMANTIC_LEVELS) {
+        const suf = level === 'surface' ? '' : `-${level}`;
+        const refs = cssTripletVars(role, level);
+        css += `  --ax-comp-bg${suf}: ${refs.bg};\n`;
+        css += `  --ax-comp-text${suf}: ${refs.fg};\n`;
+        css += `  --ax-comp-border${suf}: ${refs.bd};\n`;
+    }
+    css += `  --ax-comp-ink: var(--color-${role});\n`;
+    css += `  --ax-comp-ink-dark: var(--color-${role}-dark);\n`;
+    css += `  --ax-comp-ink-darker: var(--color-${role}-darker);\n`;
+    css += `  --ax-comp-edge: var(--color-${role});\n`;
+    css += `  --ax-comp-edge-dark: var(--color-${role}-dark);\n`;
+    css += `  --ax-comp-edge-darker: var(--color-${role}-darker);\n`;
+    css += `}
+
+`;
+    return css;
+}
+/** Neutral lightest … darkest utilities (between Danger and Accent in default.css) */
+function neutralCompoundSurfaceUtilities() {
+    return `/* Surface Surfaces */
+
+@utility lightest-surface {
+  background-color: var(--color-lightest);
+  color: var(--color-on-lightest);
+  border-color: var(--color-border-lightest);
+}
+
+@utility lighter-surface {
+  background-color: var(--color-lighter);
+  color: var(--color-on-lighter);
+  border-color: var(--color-border-lighter);
+}
+
+@utility light-surface {
+  background-color: var(--color-light);
+  color: var(--color-on-light);
+  border-color: var(--color-border-light);
+}
+
+@utility surface {
+  background-color: var(--color-surface);
+  color: var(--color-on-surface);
+  border-color: var(--color-border-surface);
+}
+
+@utility dark-surface {
+  background-color: var(--color-dark);
+  color: var(--color-on-dark);
+  border-color: var(--color-border-dark);
+}
+
+@utility darker-surface {
+  background-color: var(--color-darker);
+  color: var(--color-on-darker);
+  border-color: var(--color-border-darker);
+}
+
+@utility darkest-surface {
+  background-color: var(--color-darkest);
+  color: var(--color-on-darkest);
+  border-color: var(--color-border-darkest);
+}
+
+@utility ax-surface {
+  --ax-comp-bg-lightest: var(--color-light);
+  --ax-comp-text-lightest: var(--color-on-light);
+  --ax-comp-border-lightest: var(--color-border-light);
+  --ax-comp-bg-lighter: var(--color-surface);
+  --ax-comp-text-lighter: var(--color-on-surface);
+  --ax-comp-border-lighter: var(--color-border-surface);
+  --ax-comp-bg-light: var(--color-dark);
+  --ax-comp-text-light: var(--color-on-dark);
+  --ax-comp-border-light: var(--color-border-dark);
+  --ax-comp-bg: var(--color-surface);
+  --ax-comp-text: var(--color-on-surface);
+  --ax-comp-border: var(--color-border-surface);
+  --ax-comp-bg-dark: var(--color-dark);
+  --ax-comp-text-dark: var(--color-on-dark);
+  --ax-comp-border-dark: var(--color-border-dark);
+  --ax-comp-bg-darker: var(--color-darker);
+  --ax-comp-text-darker: var(--color-on-darker);
+  --ax-comp-border-darker: var(--color-border-darker);
+  --ax-comp-bg-darkest: var(--color-darkest);
+  --ax-comp-text-darkest: var(--color-on-darkest);
+  --ax-comp-border-darkest: var(--color-border-darkest);
+  --ax-comp-ink: var(--color-on-surface);
+  --ax-comp-ink-dark: var(--color-on-dark);
+  --ax-comp-ink-darker: var(--color-on-darker);
+  --ax-comp-edge: var(--color-border-surface);
+  --ax-comp-edge-dark: var(--color-border-dark);
+  --ax-comp-edge-darker: var(--color-border-darker);
+}
+
+`;
+}
+/**
+ * Tailwind \`--color-*\` aliases for theme-builder live preview.
+ * Recomputes against container-scoped \`--ax-sys-color-*\` (same roles as default.css \`@theme inline\`).
+ */
+function buildPreviewThemeColorAliases() {
+    let css = `  --color-bg-default: rgba(var(--ax-sys-color-bg-default));\n`;
+    css += `  --color-text-default: rgba(var(--ax-sys-color-text-default));\n`;
+    css += `  --color-border-default: rgba(var(--ax-sys-color-border-default));\n`;
+    css += neutralThemeSemanticBlock();
+    for (const role of EXPORT_TAIL_THEME_PALETTE_ORDER) {
+        css += `  --color-${role}: rgba(var(--ax-sys-color-${role}-surface));\n`;
+        css += `  --color-on-${role}: rgba(var(--ax-sys-color-on-${role}-surface));\n`;
+        css += `  --color-border-${role}: rgba(var(--ax-sys-color-border-${role}-surface));\n`;
+    }
+    return css;
+}
+function buildDefaultThemeCssTailLikePackage(axLightPrimitives) {
+    let css = `@theme inline {
+  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
+  --color-text-default: rgba(var(--ax-sys-color-text-default));
+  --color-border-default: rgba(var(--ax-sys-color-border-default));
+  --radius-default: var(--ax-sys-border-radius);
+  --breakpoint-3xl: 1920px;
+  --breakpoint-4xl: 2560px;
+`;
+    css += themeSurfaceScaleBlock();
+    css += neutralThemeSemanticBlock();
+    for (const role of EXPORT_TAIL_THEME_PALETTE_ORDER) {
+        css += themeNumericAndSemanticForRole(role);
+    }
+    css += buildDefaultTailwindScaleBlock('theme');
+    css += `}
+
+`;
+    if (axLightPrimitives) {
+        css += buildAxLightSubtreeBlock(axLightPrimitives);
+    }
+    css += buildAxDarkThemeColorAliases();
+    css += utilitiesPrefixBlock();
+    for (const role of EXPORT_TAIL_THEME_PALETTE_ORDER) {
+        if (role.startsWith('accent'))
+            continue;
+        css += compoundSurfaceUtilities(role);
+    }
+    css += neutralCompoundSurfaceUtilities();
+    for (const role of EXPORT_TAIL_THEME_PALETTE_ORDER) {
+        if (role.startsWith('accent')) {
+            css += compoundSurfaceUtilities(role);
+        }
+    }
+    css += THEME_TAIL_VERBATIM_FOOTER;
+    return css;
+}
+
+const AX_THEME_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+const ROLE_SURFACE_SHADE_MAP = {
+    'lightest-surface': 100,
+    'lighter-surface': 200,
+    'light-surface': 300,
+    surface: 500,
+    'dark-surface': 600,
+    'darker-surface': 700,
+    'darkest-surface': 800,
+};
+const toOklch = culori.converter('oklch');
+const toRgb = culori.converter('rgb');
+const toHsl = culori.converter('hsl');
+const toGamut = culori.toGamut('rgb');
+const lightSurfaceColors = {
+    'lightest-surface': { bg: '255, 255, 255', on: '10, 10, 10', border: '233, 233, 233' },
+    'lighter-surface': { bg: '250, 250, 250', on: '10, 10, 10', border: '228, 228, 228' },
+    'light-surface': { bg: '245, 245, 245', on: '10, 10, 10', border: '223, 223, 223' },
+    surface: { bg: '240, 240, 241', on: '10, 10, 10', border: '218, 218, 218' },
+    'dark-surface': { bg: '235, 235, 236', on: '10, 10, 10', border: '213, 213, 213' },
+    'darker-surface': { bg: '230, 230, 231', on: '10, 10, 10', border: '208, 208, 208' },
+    'darkest-surface': { bg: '224, 224, 225', on: '10, 10, 10', border: '202, 202, 202' },
+};
+const darkSurfaceColors = {
+    'lightest-surface': { bg: '56, 56, 56', on: '245, 245, 245', border: '64, 64, 64' },
+    'lighter-surface': { bg: '49, 49, 49', on: '245, 245, 245', border: '56, 56, 56' },
+    'light-surface': { bg: '42, 42, 42', on: '245, 245, 245', border: '50, 50, 50' },
+    surface: { bg: '33, 33, 33', on: '245, 245, 245', border: '44, 44, 44' },
+    'dark-surface': { bg: '27, 27, 27', on: '245, 245, 245', border: '38, 38, 38' },
+    'darker-surface': { bg: '20, 20, 20', on: '245, 245, 245', border: '32, 32, 32' },
+    'darkest-surface': { bg: '10, 10, 10', on: '245, 245, 245', border: '28, 28, 28' },
+};
+const DEFAULT_EXPORT_SEEDS_LIGHT = {
+    primary: 'rgb(43, 127, 255)',
+    secondary: 'rgb(106, 114, 130)',
+    success: 'rgb(0, 188, 125)',
+    warning: 'rgb(253, 154, 0)',
+    danger: 'rgb(255, 32, 86)',
+    surface: 'rgb(194, 194, 194)',
+    accent: 'rgb(6, 182, 212)',
+    accent1: 'rgb(217, 70, 239)',
+    accent2: 'rgb(249, 115, 22)',
+    accent3: 'rgb(20, 184, 166)',
+    accent4: 'rgb(99, 102, 241)',
+    accent5: 'rgb(236, 72, 153)',
+    accent6: 'rgb(120, 113, 108)',
+};
+const DEFAULT_EXPORT_SEEDS_DARK = {
+    primary: 'rgb(43, 127, 255)',
+    secondary: 'rgb(153, 161, 175)',
+    success: 'rgb(0, 188, 125)',
+    warning: 'rgb(253, 154, 0)',
+    danger: 'rgb(255, 99, 126)',
+    surface: 'rgb(33, 33, 33)',
+    accent: 'rgb(6, 182, 212)',
+    accent1: 'rgb(217, 70, 239)',
+    accent2: 'rgb(249, 115, 22)',
+    accent3: 'rgb(20, 184, 166)',
+    accent4: 'rgb(99, 102, 241)',
+    accent5: 'rgb(236, 72, 153)',
+    accent6: 'rgb(120, 113, 108)',
+};
+const THEME_CSS_PREAMBLE = `@import 'tailwindcss';
+@import 'tw-animate';
+
+@custom-variant dark (&:where(.ax-dark, .ax-dark *):not(:where(.ax-light, .ax-light *)));
+@custom-variant hover (&:hover);
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+  -webkit-text-fill-color: inherit !important;
+  transition: background-color 9999s ease-in-out 0s;
+}
+
+@layer base {
+  * {
+    border-color: var(--color-border-default);
+    scrollbar-width: thin;
+    scrollbar-color: var(--ax-sys-scroller-thumb-color) var(--ax-sys-scroller-track-color);
+
+    ::-webkit-scrollbar {
+      width: var(--ax-sys-scroller-size);
+      height: var(--ax-sys-scroller-size);
+    }
+
+    ::-webkit-scrollbar-track {
+      background: var(--ax-sys-scroller-track-color);
+      border-radius: var(--ax-sys-scroller-size-radius);
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--ax-sys-scroller-thumb-color);
+      border-radius: var(--ax-sys-scroller-size-radius);
+    }
+  }
+}
+
+html {
+  background-color: rgba(var(--ax-sys-color-lightest-surface));
+  color: rgba(var(--ax-sys-color-on-lightest-surface));
+}
+
+html.ax-dark {
+  background-color: rgba(var(--ax-sys-color-darkest-surface));
+  color: rgba(var(--ax-sys-color-on-darkest-surface));
+}
+
+`;
+/** Size scope classes before \`:root\` (matches default.css). */
+const THEME_SIZE_SCOPE_CLASSES = `.ax-xs {
+  --ax-sys-size: ax-xs;
+}
+.ax-sm {
+  --ax-sys-size: ax-sm;
+}
+.ax-md {
+  --ax-sys-size: ax-md;
+}
+.ax-lg {
+  --ax-sys-size: ax-lg;
+}
+.ax-xl {
+  --ax-sys-size: ax-xl;
+}
+
+`;
+const THEME_EXPORT_ROOT_METADATA = `:root {
+  --ax-sys-theme-isDark: 0;
+  --ax-sys-icon-size: 100%;
+  --ax-sys-icon-weight: 400;
+  --ax-sys-size-base: 2.5rem;
+  --ax-overlay-full-width: 93;
+  --ax-sys-icon-width: inherit;
+  --ax-sys-icon-height: inherit;
+  --ax-sys-body-font-size: 1rem;
+  --ax-sys-border-radius-base: 0.5rem;
+  --ax-sys-spacing-base: 0.25rem;
+  --ax-sys-text-xs-base: 0.75rem;
+  --ax-sys-text-sm-base: 0.875rem;
+  --ax-sys-text-lg-base: 1.125rem;
+  --ax-sys-text-xl-base: 1.25rem;
+  --ax-sys-leading-3-base: 0.75rem;
+  --ax-sys-leading-4-base: 1rem;
+  --ax-sys-leading-5-base: 1.25rem;
+  --ax-sys-leading-6-base: 1.5rem;
+
+${buildDefaultTailwindScaleBlock('root')}  --ax-sys-border-radius: var(--ax-sys-border-radius-base);
+  --ax-sys-transition-duration: 150ms;
+  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --ax-sys-scroller-size: 5px;
+  --ax-sys-scroller-size-radius: 3px;
+  --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-light-surface));
+  --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-darkest-surface));
+
+`;
+function generateLightPalette(seedHex) {
+    const shadeValueMap = {
+        50: 40,
+        100: 90,
+        200: 160,
+        300: 270,
+        400: 410,
+        500: 500,
+        600: 590,
+        700: 700,
+        800: 790,
+        900: 860,
+        950: 1060,
+    };
+    const initialColor = toOklch(normalizeCssColor(seedHex));
+    if (!initialColor)
+        return {};
+    const { l: initialLightness, c: initialChroma, h: initialHue } = initialColor;
+    const lightModeTones = {};
+    AX_THEME_SHADES.forEach((shadeKey) => {
+        const shadeValue = shadeValueMap[shadeKey];
+        if (shadeValue <= 500) {
+            lightModeTones[shadeKey] = (-shadeValue + shadeValue * initialLightness + 500) / 500;
+        }
+        else {
+            lightModeTones[shadeKey] = (1 - (shadeValue - 500) / 500) * (initialLightness - 0.3) + 0.3;
+        }
+    });
+    const lightMode = {};
+    AX_THEME_SHADES.forEach((shade) => {
+        const oklchColor = {
+            l: lightModeTones[shade],
+            c: initialChroma,
+            h: initialHue ?? 0,
+            mode: 'oklch',
+        };
+        let gamutMappedColor = toGamut(oklchColor) || oklchColor;
+        if (shade === 950 || shade === 900 || shade === 800) {
+            const oklchGamutMapped = toOklch(gamutMappedColor);
+            if (oklchGamutMapped) {
+                if (shade === 950) {
+                    oklchGamutMapped.c *= 1 - 0.5;
+                }
+                else if (shade === 900) {
+                    oklchGamutMapped.c *= 1 - 0.33;
+                }
+                else if (shade === 800) {
+                    oklchGamutMapped.c *= 1 - 0.08;
+                }
+                gamutMappedColor = oklchGamutMapped;
+            }
+        }
+        const rgbColor = toRgb(gamutMappedColor);
+        if (rgbColor) {
+            lightMode[String(shade)] = formatRgbTriplet(rgbColor);
+        }
+    });
+    const color500 = parseRgbTriplet(lightMode['500']);
+    if (color500) {
+        lightMode['on'] = contrastText(color500, false);
+    }
+    lightMode['on-contrast'] = lightMode['900'];
+    return lightMode;
+}
+function generateDarkPalette(seedHex) {
+    const initialColor = toOklch(normalizeCssColor(seedHex));
+    if (!initialColor)
+        return {};
+    const { l: initialLightness, c: initialChroma, h: initialHue } = initialColor;
+    const darkModeTones = {};
+    AX_THEME_SHADES.forEach((shade) => {
+        if (shade <= 700) {
+            darkModeTones[shade] = (-shade + shade * initialLightness + 700) / 700;
+        }
+        else {
+            darkModeTones[shade] = (1 - (shade - 700) / 700) * (initialLightness - 0.3) + 0.3;
+        }
+    });
+    const darkMode = {};
+    AX_THEME_SHADES.forEach((shade) => {
+        const oklchColor = {
+            l: darkModeTones[shade],
+            c: initialChroma,
+            h: initialHue ?? 0,
+            mode: 'oklch',
+        };
+        const gamutMapped = toGamut(oklchColor) || oklchColor;
+        const rgbColor = toRgb(gamutMapped);
+        if (rgbColor) {
+            darkMode[String(shade)] = formatRgbTriplet(rgbColor);
+        }
+    });
+    const color500 = parseRgbTriplet(darkMode['500']);
+    const color200 = parseRgbTriplet(darkMode['200']);
+    if (color500) {
+        darkMode['on'] = contrastText(color500, true);
+    }
+    if (color200) {
+        darkMode['on-contrast'] = contrastText(color200, true);
+    }
+    return darkMode;
+}
+function lightnessCalc(hue) {
+    if (hue <= 80)
+        return 0.06 * hue + 75;
+    if (hue < 270)
+        return -0.07 * hue + 85.82;
+    return 0.09 * hue + 42.6;
+}
+function isDarkOnSurface(lightness, hue, isDark) {
+    const threshold = lightnessCalc(hue);
+    if (isDark) {
+        return lightness >= (threshold - 15) / 100;
+    }
+    return lightness >= threshold / 100;
+}
+function contrastText(color, isDark) {
+    const oklchColor = toOklch(color);
+    if (!oklchColor)
+        return '0, 0, 0';
+    const { l: oklchLightness, c: chroma, h: hue } = oklchColor;
+    let newLightness;
+    if (isDark) {
+        newLightness = isDarkOnSurface(oklchLightness, hue ?? 0, true) ? 0.2 : 0.995;
+    }
+    else {
+        newLightness = isDarkOnSurface(oklchLightness, hue ?? 0, false) ? 0.3 : 0.995;
+    }
+    const contrastOklch = { l: newLightness, c: chroma, h: hue, mode: 'oklch' };
+    const gamutMapped = toGamut(contrastOklch) || contrastOklch;
+    const finalRgb = toRgb(gamutMapped);
+    return formatRgbTriplet(finalRgb);
+}
+function borderColor(color, isDark) {
+    const hslColor = toHsl(color);
+    if (!hslColor)
+        return '0, 0, 0';
+    if (isDark) {
+        hslColor.l += 0.09;
+    }
+    else {
+        hslColor.l -= 0.07;
+    }
+    hslColor.l = Math.max(0, Math.min(1, hslColor.l));
+    const finalRgb = toRgb(hslColor);
+    return formatRgbTriplet(finalRgb);
+}
+function parseRgbTriplet(rgbStr) {
+    if (!rgbStr)
+        return undefined;
+    const [r, g, b] = rgbStr.split(',').map(Number);
+    return { mode: 'rgb', r: r / 255, g: g / 255, b: b / 255 };
+}
+function formatRgbTriplet(color) {
+    const r = Math.min(255, Math.max(0, Math.round(color.r * 255)));
+    const g = Math.min(255, Math.max(0, Math.round(color.g * 255)));
+    const b = Math.min(255, Math.max(0, Math.round(color.b * 255)));
+    return `${r}, ${g}, ${b}`;
+}
+/** Accepts `#hex`, `rgb()`, `rgba()`, named colors … for culori. */
+function normalizeCssColor(css) {
+    const t = css.trim();
+    const parsed = culori.parse(t);
+    if (!parsed)
+        return t;
+    const hex = culori.formatHex(parsed);
+    return hex ?? t;
+}
+/** Neutral UI surfaces for live preview (static values from default.css \`:root\`). */
+function buildPreviewNeutralSurfaces(isDark) {
+    return buildNeutralRgbVariables(isDark ? darkSurfaceColors : lightSurfaceColors);
+}
+/** Default bg/text/border primitives for live preview. */
+function buildPreviewSemanticDefaults(isDark) {
+    if (isDark) {
+        return (`  --ax-sys-color-bg-default: var(--ax-sys-color-darkest-surface);\n` +
+            `  --ax-sys-color-text-default: var(--ax-sys-color-on-darkest-surface);\n` +
+            `  --ax-sys-color-border-default: var(--ax-sys-color-border-darkest-surface);\n`);
+    }
+    return (`  --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);\n` +
+        `  --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);\n` +
+        `  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);\n`);
+}
+function generateCSSForRoles(palette, role) {
+    let css = '\n';
+    Object.entries(palette).forEach(([shade, rgbColor]) => {
+        if (shade === 'on') {
+            css += `  --ax-sys-color-on-${role}: ${rgbColor};\n`;
+        }
+        else if (shade === 'on-contrast') {
+            css += `  --ax-sys-color-on-contrast-${role}: ${rgbColor};\n`;
+        }
+        else {
+            css += `  --ax-sys-color-${role}-${shade}: ${rgbColor};\n`;
+        }
+    });
+    return css;
+}
+/**
+ * Produces CSS aligned with `packages/styles/themes/default.css`: same sections, directives,
+ * `@theme inline`, `.ax-dark .ax-light` / `.ax-dark` color-alias re-declaration, and utility layout.
+ * Only `--ax-sys-color-*` RGB triplets (and thus derived contrasts/borders) differ from the packaged default theme.
+ * Includes all roles in {@link EXPORT_ROOT_ROLE_ORDER}: `accent` plus `accent1`–`accent6`.
+ */
+function generateFullThemeCSS(seeds) {
+    const merged = mergeExportSeeds(seeds);
+    const allPalettes = {
+        light: {},
+        dark: {},
+    };
+    for (const role of EXPORT_ROOT_ROLE_ORDER) {
+        allPalettes.light[role] = generateLightPalette(merged.light[role]);
+        allPalettes.dark[role] = generateDarkPalette(merged.dark[role]);
+    }
+    let css = THEME_CSS_PREAMBLE;
+    css += THEME_SIZE_SCOPE_CLASSES;
+    css += THEME_EXPORT_ROOT_METADATA;
+    css += buildNeutralRgbVariables(lightSurfaceColors);
+    css += buildRoleRgbScales(allPalettes.light);
+    css += buildSemanticSurfaceRgbTuples(allPalettes.light, false);
+    css += `  --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);\n`;
+    css += `  --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);\n`;
+    css += `  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);\n`;
+    css += `}\n\n`;
+    css += `.ax-dark {
+  --ax-sys-theme-isDark: 1;
+  --ax-sys-scroller-track-color: rgba(var(--ax-sys-color-darker-surface));
+  --ax-sys-scroller-thumb-color: rgba(var(--ax-sys-color-lightest-surface));
+
+`;
+    css += buildNeutralRgbVariables(darkSurfaceColors);
+    css += buildRoleRgbScales(allPalettes.dark);
+    css += buildSemanticSurfaceRgbTuples(allPalettes.dark, true);
+    css += `  --ax-sys-color-bg-default: var(--ax-sys-color-darkest-surface);\n`;
+    css += `  --ax-sys-color-text-default: var(--ax-sys-color-on-darkest-surface);\n`;
+    css += `  --ax-sys-color-border-default: var(--ax-sys-color-border-darkest-surface);\n`;
+    css += `}\n\n`;
+    css += buildDefaultThemeCssTailLikePackage(buildAxLightPrimitivesBlock(allPalettes.light));
+    return css;
+}
+function buildAxLightPrimitivesBlock(palettes) {
+    let css = buildNeutralRgbVariables(lightSurfaceColors);
+    css += buildRoleRgbScales(palettes);
+    css += buildSemanticSurfaceRgbTuples(palettes, false);
+    css += `  --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);\n`;
+    css += `  --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);\n`;
+    css += `  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);\n\n`;
+    return css;
+}
+function mergeExportSeeds(seeds) {
+    const out = {
+        light: { ...DEFAULT_EXPORT_SEEDS_LIGHT },
+        dark: { ...DEFAULT_EXPORT_SEEDS_DARK },
+    };
+    for (const role of EXPORT_ROOT_ROLE_ORDER) {
+        const l = seeds.light[role]?.trim();
+        const d = seeds.dark[role]?.trim();
+        if (l)
+            out.light[role] = l;
+        if (d)
+            out.dark[role] = d;
+    }
+    return out;
+}
+function buildNeutralRgbVariables(surfaceColors) {
+    let css = '';
+    for (const [name, colors] of Object.entries(surfaceColors)) {
+        css += `  --ax-sys-color-${name}: ${colors.bg};\n`;
+        css += `  --ax-sys-color-on-${name}: ${colors.on};\n`;
+        css += `  --ax-sys-color-border-${name}: ${colors.border};\n\n`;
+    }
+    return css;
+}
+function buildRoleRgbScales(palettes) {
+    let css = '';
+    for (const role of EXPORT_ROOT_ROLE_ORDER) {
+        for (const shade of AX_THEME_SHADES) {
+            const v = palettes[role]?.[String(shade)];
+            if (v) {
+                css += `  --ax-sys-color-${role}-${shade}: ${v};\n`;
+            }
+        }
+        css += `\n`;
+    }
+    return css;
+}
+/** Semantic layering (`*-lightest-surface`, …): omitted for grayscale `surface` role (matches default.css). */
+function buildSemanticSurfaceRgbTuples(palettes, isDark) {
+    const surfaceMap = {
+        'lightest-surface': '100',
+        'lighter-surface': '200',
+        'light-surface': '300',
+        surface: '500',
+        'dark-surface': '600',
+        'darker-surface': '700',
+        'darkest-surface': '800',
+    };
+    let css = '';
+    for (const role of EXPORT_ROOT_ROLE_ORDER) {
+        if (role === 'surface')
+            continue;
+        for (const [surfName, shadeKey] of Object.entries(surfaceMap)) {
+            const surfaceColorStr = palettes[role]?.[shadeKey];
+            const surfaceRgb = surfaceColorStr ? parseRgbTriplet(surfaceColorStr) : undefined;
+            if (surfaceRgb) {
+                const suffix = surfName === 'surface' ? 'surface' : surfName;
+                css += `  --ax-sys-color-${role}-${suffix}: ${surfaceColorStr};\n`;
+                css += `  --ax-sys-color-on-${role}-${suffix}: ${contrastText(surfaceRgb, isDark)};\n`;
+                css += `  --ax-sys-color-border-${role}-${suffix}: ${borderColor(surfaceRgb, isDark)};\n\n`;
+            }
+        }
+    }
+    return css;
+}
+/** Resolves a flat color map into per-mode seed maps, applying user values to both modes. */
+function resolveSeedsFromFlat(colors) {
+    const out = {
+        light: { ...DEFAULT_EXPORT_SEEDS_LIGHT },
+        dark: { ...DEFAULT_EXPORT_SEEDS_DARK },
+    };
+    if (!colors) {
+        return out;
+    }
+    for (const role of EXPORT_ROOT_ROLE_ORDER) {
+        const value = colors[role]?.trim();
+        if (value) {
+            out.light[role] = value;
+            out.dark[role] = value;
+        }
+    }
+    return out;
+}
+/** Builds full light/dark palettes from resolved per-mode seeds. */
+function buildFullPalette(seeds, roles) {
+    const roleList = roles ?? [...EXPORT_ROOT_ROLE_ORDER];
+    const palette = {
+        light: {},
+        dark: {},
+    };
+    for (const role of roleList) {
+        palette.light[role] = generateLightPalette(seeds.light[role]);
+        palette.dark[role] = generateDarkPalette(seeds.dark[role]);
+    }
+    return palette;
+}
+function buildThemeVariableBlock(mode, variants, roles) {
+    const isDark = mode === 'dark';
+    let css = buildPreviewNeutralSurfaces(isDark);
+    for (const colorName of roles) {
+        const roleVariants = variants[colorName];
+        if (roleVariants) {
+            css += generateCSSForRoles(roleVariants, colorName);
+        }
+    }
+    css += buildSemanticSurfaceColorsForRoles(variants, roles, isDark);
+    css += buildPreviewSemanticDefaults(isDark);
+    css += buildPreviewThemeColorAliases();
+    return css;
+}
+function buildSemanticSurfaceColorsForRoles(variants, roles, isDark) {
+    let css = '';
+    for (const role of roles) {
+        if (role === 'surface')
+            continue;
+        const roleVariants = variants[role];
+        for (const [surfaceName, shade] of Object.entries(ROLE_SURFACE_SHADE_MAP)) {
+            const surfaceColorStr = roleVariants?.[String(shade)];
+            const surfaceRgb = surfaceColorStr ? parseRgbTriplet(surfaceColorStr) : undefined;
+            if (surfaceRgb) {
+                css += `  --ax-sys-color-${role}-${surfaceName}: ${surfaceColorStr};\n`;
+                css += `  --ax-sys-color-on-${role}-${surfaceName}: ${contrastText(surfaceRgb, isDark)};\n`;
+                css += `  --ax-sys-color-border-${role}-${surfaceName}: ${borderColor(surfaceRgb, isDark)};\n\n`;
+            }
+        }
+    }
+    return css;
+}
+/** Scoped CSS for live theme preview (variables only, no Tailwind layer). */
+function buildPreviewThemeCSS(palette, scope, roles) {
+    const roleList = roles ?? [...EXPORT_ROOT_ROLE_ORDER];
+    const lightScope = scope?.light ?? ':root';
+    const darkScope = scope?.dark ?? '.ax-dark';
+    let css = `${lightScope} {\n`;
+    css += buildThemeVariableBlock('light', palette.light, roleList);
+    css += '}\n\n';
+    css += `${darkScope} {\n`;
+    css += buildThemeVariableBlock('dark', palette.dark, roleList);
+    css += '}\n\n';
+    return css;
+}
+
+/**
+ * Creates an ACoreX theme from a flat map of role seed colors.
+ *
+ * Each provided color is applied to both light and dark modes; dark shades are
+ * derived via the dark-palette tone mapping. Omitted roles fall back to the
+ * packaged default seeds (which may differ per mode for `secondary`, `danger`, and `surface`).
+ */
+function createTheme(colors, options) {
+    const target = options?.target ?? 'file';
+    const seeds = resolveSeedsFromFlat(colors);
+    const roles = options?.roles;
+    const palette = buildFullPalette(seeds, roles);
+    const css = target === 'preview'
+        ? buildPreviewThemeCSS(palette, options?.scope, roles)
+        : generateFullThemeCSS({ light: seeds.light, dark: seeds.dark });
+    return { css, palette };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { createTheme };
+//# sourceMappingURL=acorex-core-theme-builder.mjs.map