@acorex/platform 21.0.0-next.59 → 21.0.0-next.63

package/fesm2022/acorex-platform-themes-shared.mjs

@@ -1671,21 +1671,6 @@ function hexToRgb(hex) {
         parseInt(full.slice(4, 6), 16),
     ];
 }
-function rgbToHex(r, g, b) {
-    const clamp = (n) => Math.max(0, Math.min(255, Math.round(n)));
-    return `#${[clamp(r), clamp(g), clamp(b)]
-        .map((c) => c.toString(16).padStart(2, '0'))
-        .join('')}`;
-}
-/**
- * Linear RGB mix: ratio 0 → `from`, ratio 1 → `to`.
- */
-function mixHex(from, to, ratio) {
-    const t = Math.max(0, Math.min(1, ratio));
-    const [r0, g0, b0] = hexToRgb(from);
-    const [r1, g1, b1] = hexToRgb(to);
-    return rgbToHex(r0 + (r1 - r0) * t, g0 + (g1 - g0) * t, b0 + (b1 - b0) * t);
-}
 function relativeLuminance(hex) {
     const [r, g, b] = hexToRgb(hex).map((c) => {
         const s = c / 255;
@@ -1706,28 +1691,6 @@ function titleCase(str) {
  * canvas `light` and `dark` as poles so swatches stay aligned with `AXPThemePaletteProvider` data.
  */
 const SURFACE_VARIANTS = ['lightest', 'lighter', 'light', 'surface', 'dark', 'darker', 'darkest'];
-function tonalBackgroundHex(base, variant, canvas) {
-    switch (variant) {
-        case 'lightest':
-            return mixHex(base, canvas.light, 0.85);
-        case 'lighter':
-            return mixHex(base, canvas.light, 0.62);
-        case 'light':
-            return mixHex(base, canvas.light, 0.38);
-        case 'surface':
-            return base;
-        case 'dark':
-            return mixHex(base, canvas.dark, 0.35);
-        case 'darker':
-            return mixHex(base, canvas.dark, 0.58);
-        case 'darkest':
-            return mixHex(base, canvas.dark, 0.8);
-        default: {
-            const _exhaustive = variant;
-            return _exhaustive;
-        }
-    }
-}
 function styleTitlePrefix(style) {
     const accentMatch = /^accent(\d+)$/.exec(style);
     if (accentMatch) {
@@ -1741,17 +1704,26 @@ function surfaceVariantTitle(style, variant) {
     }
     return `${styleTitlePrefix(style)} ${titleCase(variant)}`;
 }
-function pushVariantScale(entries, styleKey, baseHex, canvas) {
+/** Tailwind utility triplet stored by theme-color-chooser and outcome display rules. */
+function buildThemeSurfaceColorTriplet(styleKey, variant) {
+    return {
+        color: `ax-text-${styleKey}-on-${variant}`,
+        background: `ax-bg-${styleKey}-${variant}`,
+        border: `ax-border-${styleKey}-${variant}`,
+    };
+}
+/** Ordered `"foreground background border"` string for theme-color-chooser values. */
+function buildThemeSurfaceColorValue(styleKey, variant = 'lightest') {
+    const triplet = buildThemeSurfaceColorTriplet(styleKey, variant);
+    return `${triplet.color} ${triplet.background} ${triplet.border}`;
+}
+function pushVariantScale(entries, styleKey, _baseHex, _canvas) {
     for (const variant of SURFACE_VARIANTS) {
-        const background = tonalBackgroundHex(baseHex, variant, canvas);
-        const color = contrastForeground(background);
         const name = `${styleKey}-${variant}`;
         entries.push({
             title: surfaceVariantTitle(styleKey, variant),
             name,
-            color,
-            background,
-            border: background,
+            ...buildThemeSurfaceColorTriplet(styleKey, variant),
         });
     }
 }
@@ -1861,11 +1833,21 @@ class AXPColorChooserWidgetEditComponent extends AXPValueWidgetComponent {
             return null;
         }
         const [color, background, border] = parts;
-        const match = this.colors().find((c) => c.color === color && c.background === background && c.border === border);
-        return match?.name ?? null;
+        const exactMatch = this.colors().find((entry) => entry.color === color && entry.background === background && entry.border === border);
+        if (exactMatch) {
+            return exactMatch.name;
+        }
+        const backgroundMatch = /^ax-bg-(.+)-(.+)$/.exec(background);
+        if (backgroundMatch) {
+            const name = `${backgroundMatch[1]}-${backgroundMatch[2]}`;
+            if (this.colors().some((entry) => entry.name === name)) {
+                return name;
+            }
+        }
+        return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPColorChooserWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPColorChooserWidgetEditComponent, isStandalone: true, selector: "ax-color-chooser-widget", host: { classAttribute: "ax-block ax-flex-1 ax-w-full" }, usesInheritance: true, ngImport: i0, template: `
       <ax-form [messageStyle]="'float'" [updateOn]="'change'">
         <ax-form-field>
           <ax-select-box
@@ -1952,6 +1934,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </ax-form-field>
       </ax-form>
   `,
+                    host: {
+                        class: 'ax-block ax-flex-1 ax-w-full',
+                    },
                     imports: [AXSelectBoxModule, AXFormModule, CommonModule, AXSearchBoxModule, AXButtonModule, FormsModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]