@masterteam/components 0.0.45 → 0.0.47

package/fesm2022/masterteam-components.mjs

@@ -73,71 +73,86 @@ function hslToHex(h, s, l) {
     return `#${f(0)}${f(8)}${f(4)}`;
 }
 /**
- * Generates a Tailwind-like color palette (50-950) from a primary color (assumed to be 500).
+ * Defines the "ideal" lightness and saturation adjustment for each shade.
+ * Lightness for 500 is set to 50 as a balanced default.
+ */
+const PALETTE_PROFILE = {
+    '0': { l: 98, s_adjust: -50 },
+    '50': { l: 95, s_adjust: -40 },
+    '100': { l: 90, s_adjust: -30 },
+    '200': { l: 80, s_adjust: -20 },
+    '300': { l: 70, s_adjust: -10 },
+    '400': { l: 60, s_adjust: -5 },
+    '500': { l: 50, s_adjust: 0 },
+    '600': { l: 45, s_adjust: 5 },
+    '700': { l: 35, s_adjust: 10 },
+    '800': { l: 25, s_adjust: 15 },
+    '900': { l: 15, s_adjust: 20 },
+    '950': { l: 8, s_adjust: 25 },
+};
+// Helper to ensure palette is always in the correct 50-950 order
+const ALL_SHADES = [
+    '0',
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+    '950',
+];
+/**
+ * Clamps a number between a min and max value.
+ */
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+/**
+ * Generates a Tailwind-like color palette (50-950) from any given base color.
  *
- * @param primaryColor500 - The hex string of the primary color (e.g., "#0284c7").
- * @returns An object representing the color palette, where keys are color numbers (e.g., "50", "100")
- * and values are hex color strings.
+ * @param baseColorHex - The hex string of the base color (e.g., "#0284c7").
+ * @param baseColorShade - The shade of the base color (e.g., "500", "700").
+ * @returns An object representing the full color palette.
  */
-function generateTailwindPalette(primaryColor500) {
-    const [h, s, _l] = hexToHsl(primaryColor500);
-    const palette = {
-        '500': primaryColor500,
-    };
-    // Define steps for lighter shades (50 - 400)
-    const lightnessStepsLighter = {
-        '50': 95,
-        '100': 90,
-        '200': 80,
-        '300': 70,
-        '400': 60,
-    };
-    const saturationReductionsLighter = {
-        '50': 40, // More desaturated
-        '100': 30,
-        '200': 20,
-        '300': 10,
-        '400': 5, // Slightly desaturated
-    };
-    for (const shade in lightnessStepsLighter) {
-        if (Object.prototype.hasOwnProperty.call(lightnessStepsLighter, shade)) {
-            const newL = lightnessStepsLighter[shade];
-            // Ensure saturation doesn't go below 0
-            const newS = Math.max(0, s - saturationReductionsLighter[shade]);
-            palette[shade] = hslToHex(h, newS, newL);
-        }
-    }
-    // Define steps for darker shades (600 - 950)
-    const lightnessStepsDarker = {
-        '600': 45,
-        '700': 35,
-        '800': 25,
-        '900': 15,
-        '950': 8, // More aggressive darkening for 950
-    };
-    const saturationIncreasesDarker = {
-        '600': 5,
-        '700': 10,
-        '800': 15,
-        '900': 20,
-        '950': 25, // Can increase saturation for darker shades
-    };
-    for (const shade in lightnessStepsDarker) {
-        if (Object.prototype.hasOwnProperty.call(lightnessStepsDarker, shade)) {
-            const newL = lightnessStepsDarker[shade];
-            // Ensure saturation doesn't exceed 100
-            const newS = Math.min(100, s + saturationIncreasesDarker[shade]);
-            palette[shade] = hslToHex(h, newS, newL);
-        }
-    }
-    // Sort the keys numerically to ensure consistent order
-    const sortedPalette = {};
-    Object.keys(palette)
-        .sort((a, b) => parseInt(a) - parseInt(b))
-        .forEach((key) => {
-        sortedPalette[key] = palette[key];
-    });
-    return sortedPalette;
+function generateTailwindPalette(baseColorHex, baseColorShade = '500') {
+    // 1. Get HSL of the input color
+    const [h_base, s_base, l_base] = hexToHsl(baseColorHex);
+    // 2. Find the anchors
+    const baseProfile = PALETTE_PROFILE[baseColorShade];
+    /** The Hue is constant across the entire palette. */
+    const h = h_base;
+    /**
+     * Calculate the 500-shade's saturation by "reversing" the adjustment
+     * from the base color.
+     * e.g., if base is 700 (s_adjust: +10) and s_base is 80,
+     * s_500 will be 70.
+     */
+    const s_500 = clamp(s_base - baseProfile.s_adjust, 0, 100);
+    /**
+     * Calculate the lightness "offset". This is the difference between
+     * the base color's actual lightness and its "ideal" lightness
+     * from the profile.
+     * e.g., if base is 700 (ideal L: 35) and l_base is 38,
+     * the offset is +3. This offset will be applied to all shades.
+     */
+    const l_offset = l_base - baseProfile.l;
+    // 3. Generate the full palette
+    const palette = {};
+    for (const shade of ALL_SHADES) {
+        const profile = PALETTE_PROFILE[shade];
+        // Calculate the new saturation and lightness for this shade
+        const newS = clamp(s_500 + profile.s_adjust, 0, 100);
+        const newL = clamp(profile.l + l_offset, 0, 100);
+        palette[shade] = hslToHex(h, newS, newL);
+    }
+    // 4. Ensure the originally provided color is used exactly
+    // (to avoid rounding errors from HSL conversion)
+    palette[baseColorShade] = baseColorHex;
+    return palette;
 }
 
 const toastStyle = {
@@ -158,111 +173,164 @@ function changePrimaryColor(color) {
         },
     });
 }
-const MTPreset = (primaryColor) => definePreset(Aura, {
-    options: {
-        prefix: 'mt',
-        cssLayer: {
-            name: 'primeng',
-            order: 'theme, base, primeng',
-        },
-    },
-    semantic: {
-        primary: generateTailwindPalette(primaryColor || '#334dff'),
-        content: {
-            borderRadius: '{border.radius.lg}',
-        },
-        formField: {
-            borderRadius: '{border.radius.lg}',
-        },
-    },
-    components: {
-        dialog: {
-            header: {
-                padding: '0',
-            },
-            content: {
-                padding: '0',
-            },
-            footer: {
-                padding: '0',
-            },
-        },
-        toast: {
-            root: {
-                borderRadius: '{border.radius.xl}',
-            },
+function changeBackgroundColor(color) {
+    if (color) {
+        const palette = generateTailwindPalette(color, '100');
+        console.log('the background palette', palette);
+        document.documentElement.style.setProperty('--app-background-light', palette['100']);
+        document.documentElement.style.setProperty('--app-background-dark', palette['950']);
+    }
+}
+function changeTextColor(color) {
+    const palette = generateTailwindPalette(color ?? '#334155', '700');
+    updatePreset({
+        semantic: {
             colorScheme: {
                 light: {
-                    success: toastStyle,
-                    info: toastStyle,
-                    warn: toastStyle,
-                    error: toastStyle,
-                    secondary: toastStyle,
+                    text: {
+                        color: palette['700'],
+                        hoverColor: palette['800'],
+                        hoverMutedColor: palette['600'],
+                        mutedColor: palette['500'],
+                    },
                 },
                 dark: {
-                    success: toastStyle,
-                    info: toastStyle,
-                    warn: toastStyle,
-                    error: toastStyle,
-                    secondary: toastStyle,
+                    text: {
+                        color: palette['0'],
+                        hoverColor: palette['0'],
+                        hoverMutedColor: palette['300'],
+                        mutedColor: palette['400'],
+                    },
                 },
             },
         },
-        togglebutton: {
-            root: {
-                padding: '1px',
+    });
+}
+const MTPreset = (themeOptions) => {
+    const textPalette = generateTailwindPalette(themeOptions?.textColor ?? '#334155', '700');
+    const configs = {
+        options: {
+            prefix: 'mt',
+            cssLayer: {
+                name: 'primeng',
+                order: 'theme, base, primeng',
             },
+        },
+        semantic: {
             colorScheme: {
                 light: {
-                    root: {
-                        checkedColor: '{primary.500}',
+                    text: {
+                        color: textPalette['700'],
+                        hoverColor: textPalette['800'],
+                        hoverMutedColor: textPalette['600'],
+                        mutedColor: textPalette['500'],
                     },
                 },
                 dark: {
-                    root: {
-                        checkedColor: '{primary.400}',
+                    text: {
+                        color: textPalette['0'],
+                        hoverColor: textPalette['0'],
+                        hoverMutedColor: textPalette['300'],
+                        mutedColor: textPalette['400'],
                     },
                 },
             },
-        },
-        selectbutton: {
-            root: {
+            primary: generateTailwindPalette(themeOptions?.primaryColor || '#334dff'),
+            content: {
                 borderRadius: '{border.radius.lg}',
             },
-        },
-        paginator: {
-            root: {
+            formField: {
                 borderRadius: '{border.radius.lg}',
-                padding: '0 .5rem',
             },
-            navButton: {
-                borderRadius: '0',
+        },
+        components: {
+            dialog: {
+                header: {
+                    padding: '0',
+                },
+                content: {
+                    padding: '0',
+                },
+                footer: {
+                    padding: '0',
+                },
             },
-            colorScheme: {
-                light: {
-                    navButton: {
-                        color: '{surface.600}',
-                        hoverBackground: '#fff',
-                        selectedBackground: '{surface.200}',
-                        selectedColor: '{surface.600}',
-                        focusRing: {
-                            color: '{surface.200}',
-                        },
+            toast: {
+                root: {
+                    borderRadius: '{border.radius.xl}',
+                },
+                colorScheme: {
+                    light: {
+                        success: toastStyle,
+                        info: toastStyle,
+                        warn: toastStyle,
+                        error: toastStyle,
+                        secondary: toastStyle,
+                    },
+                    dark: {
+                        success: toastStyle,
+                        info: toastStyle,
+                        warn: toastStyle,
+                        error: toastStyle,
+                        secondary: toastStyle,
                     },
                 },
-                dark: {
-                    navButton: {
-                        color: '{surface.200}',
-                        hoverBackground: 'transparent',
-                        selectedBackground: 'transparent',
-                        selectedColor: '#fff',
-                        focusRing: {
-                            color: '#fff',
+            },
+            togglebutton: {
+                root: {
+                    padding: '1px',
+                },
+                colorScheme: {
+                    light: {
+                        root: {
+                            checkedColor: '{primary.500}',
+                        },
+                    },
+                    dark: {
+                        root: {
+                            checkedColor: '{primary.400}',
                         },
                     },
                 },
             },
-            css: () => `
+            selectbutton: {
+                root: {
+                    borderRadius: '{border.radius.lg}',
+                },
+            },
+            paginator: {
+                root: {
+                    borderRadius: '{border.radius.lg}',
+                    padding: '0 .5rem',
+                },
+                navButton: {
+                    borderRadius: '0',
+                },
+                colorScheme: {
+                    light: {
+                        navButton: {
+                            color: '{surface.600}',
+                            hoverBackground: '#fff',
+                            selectedBackground: '{surface.200}',
+                            selectedColor: '{surface.600}',
+                            focusRing: {
+                                color: '{surface.200}',
+                            },
+                        },
+                    },
+                    dark: {
+                        navButton: {
+                            color: '{surface.200}',
+                            hoverBackground: 'transparent',
+                            selectedBackground: 'transparent',
+                            selectedColor: '#fff',
+                            focusRing: {
+                                color: '#fff',
+                            },
+                        },
+                    },
+                },
+                css: () => `
           .p-paginator {
             --p-paginator-gap: 0;
             --p-paginator-nav-button-width: 2.2rem;
@@ -324,35 +392,38 @@ const MTPreset = (primaryColor) => definePreset(Aura, {
             border-left-color: var(--p-surface-500);
           }
         `,
-        },
-        toggleswitch: {
-            root: {
-                width: '2.5rem',
-                height: '1.4rem',
             },
+            toggleswitch: {
+                root: {
+                    width: '2.5rem',
+                    height: '1.4rem',
+                },
+            },
+            // steps: {
+            //   item: {
+            //     link: {
+            //       gap: 'calc(50% + 0.25rem)',
+            //     },
+            //     number: {
+            //       font: {
+            //         size: '0.9rem',
+            //       },
+            //       active: {
+            //         color: 'white',
+            //         background: '{primary.500}',
+            //         border: {
+            //           color: '{primary.500}',
+            //         },
+            //       },
+            //     },
+            //   },
+            // },
         },
-        // steps: {
-        //   item: {
-        //     link: {
-        //       gap: 'calc(50% + 0.25rem)',
-        //     },
-        //     number: {
-        //       font: {
-        //         size: '0.9rem',
-        //       },
-        //       active: {
-        //         color: 'white',
-        //         background: '{primary.500}',
-        //         border: {
-        //           color: '{primary.500}',
-        //         },
-        //       },
-        //     },
-        //   },
-        // },
-    },
-});
-function provideMTComponents(primaryColor) {
+    };
+    return definePreset(Aura, configs);
+};
+function provideMTComponents(themeOptions) {
+    changeBackgroundColor(themeOptions?.backgroundColor);
     return providePrimeNG({
         zIndex: {
             modal: 1900,
@@ -361,7 +432,7 @@ function provideMTComponents(primaryColor) {
             tooltip: 1600,
         },
         theme: {
-            preset: MTPreset(primaryColor),
+            preset: MTPreset(themeOptions),
             options: {
                 darkModeSelector: '.dark',
             },
@@ -830,5 +901,5 @@ function wrapValidatorWithMessage(validator, errorKey, message) {
  * Generated bundle index. Do not edit.
  */
 
-export { BaseFieldConfig, CheckboxFieldConfig, ColorPickerFieldConfig, DateFieldConfig, EditorFieldConfig, IconFieldConfig, MultiSelectFieldConfig, NumberFieldConfig, PickListFieldConfig, RadioButtonFieldConfig, RadioCardsFieldConfig, SelectFieldConfig, SliderFieldConfig, SpacerFieldConfig, TextFieldConfig, TextareaFieldConfig, ToggleFieldConfig, UploadFileFieldConfig, UserSearchFieldConfig, ValidatorConfig, changePrimaryColor, createCustomValidator, generateTailwindPalette, isInvalid, provideMTComponents, provideMTMessages, wrapValidatorWithMessage };
+export { BaseFieldConfig, CheckboxFieldConfig, ColorPickerFieldConfig, DateFieldConfig, EditorFieldConfig, IconFieldConfig, MultiSelectFieldConfig, NumberFieldConfig, PickListFieldConfig, RadioButtonFieldConfig, RadioCardsFieldConfig, SelectFieldConfig, SliderFieldConfig, SpacerFieldConfig, TextFieldConfig, TextareaFieldConfig, ToggleFieldConfig, UploadFileFieldConfig, UserSearchFieldConfig, ValidatorConfig, changeBackgroundColor, changePrimaryColor, changeTextColor, createCustomValidator, generateTailwindPalette, isInvalid, provideMTComponents, provideMTMessages, wrapValidatorWithMessage };
 //# sourceMappingURL=masterteam-components.mjs.map