{"version":3,"file":"createTheme.cjs","sources":["../src/createTheme.js"],"sourcesContent":["import css from './css.js';\nimport StyleSheet from './StyleSheet.js';\nimport isObject from './utils/isObject.js';\n\n/**\n * Flattens a nested theme object into a map of CSS variable names to values.\n * Nested keys are joined with `-` (e.g. `{ colors: { primary: 'blue' } }` → `--prefix-colors-primary`).\n * @private\n * @param {Object} [theme={}] - Nested theme object.\n * @param {string|null} [prefix] - Prefix for variable names (e.g. `fun` → `--fun-key`). Omit or pass `null`/`''` for no prefix.\n * @returns {Object} Map of CSS variable names (e.g. `--fun-color`) to values.\n */\nconst makeCssVars = (theme = {}, prefix) => {\n    function build(theme, nameAcc) {\n        return Object.keys(theme).reduce((acc, key) => {\n            const value = theme[key];\n            const name = nameAcc ? `${nameAcc}-${key}` : prefix ? `--${prefix}-${key}` : `--${key}`;\n\n            if (isObject(value)) {\n                Object.assign(acc, build(value, name));\n            } else if (typeof value !== 'undefined' && value !== null) {\n                acc[name] = value;\n            }\n\n            return acc;\n        }, {});\n    }\n    return build(theme);\n};\n\n/**\n * Returns keys that differ between two objects, with each side’s value.\n * @private\n * @param {Object} left - First object.\n * @param {Object} right - Second object.\n * @returns {{ left: Object, right: Object }} Objects containing only the differing keys and their values per side.\n */\nconst getDiff = (left, right) => {\n    return Object.keys(left).reduce((acc, key) => {\n        if (left[key] !== right[key]) {\n            acc.left[key] = left[key];\n            acc.right[key] = right[key];\n        }\n        return acc;\n    }, { left : {}, right : {} });\n};\n\n/**\n * The `createTheme` function generates a theme StyleSheet instance with CSS variables \n * based on the provided themes and options. It supports multiple color schemes, \n * including `light`, `dark`, `light dark`, and `normal`. \n * \n * The `themes` object defines the styles for these color schemes. Each key in the object \n * corresponds to a color scheme (`light`, `dark`, `normal`), and its value is an object \n * containing key-value pairs that will be converted into CSS variables. Nested keys are \n * concatenated with `-` to form the variable name. For example, `{ light : { colors : { primary : 'blue' } } }` \n * generates `--fun-colors-primary : blue`.\n * \n * @module\n * @function\n * @param {Object} themes - An object defining styles for color schemes (`light`, `dark`, `normal`). \n * Each key corresponds to a color scheme, and its value is an object of key-value pairs converted \n * to CSS variables. Nested keys are concatenated with `-` to form variable names.\n * \n * @param {Object} [options] - An optional object to customize the theme generation. It includes options \n * for selecting color schemes, customizing CSS variable prefixes, and controlling StyleSheet creation.\n * \n * @param {String} [options.colorScheme] - Specifies the color scheme(s) to use. Possible values are: \n * `light` (uses the `light` theme only), `dark` (uses the `dark` theme only), `light dark` (default, \n * supports both `light` and `dark` themes, adapting to system preferences; can override system \n * preference with `data-color-scheme` set to `light` or `dark`), and `normal` (uses the `normal` theme only).\n * \n * @param {String|null} [options.cssVarsPrefix] - Prefix for the generated CSS variables. Defaults to `StyleSheet.prefix`.\n * Pass `null` or `''` to generate variables without a prefix (e.g. `--color` instead of `--fun-color`).\n * \n * @param {Function} [options.createStyleSheet] - A function used to create a new StyleSheet instance. \n * By default, it uses the `css` function.\n * \n * @param {Object} [options.styleSheetOptions] - Options to pass when creating the StyleSheet instance. \n * Default is `system`.\n * \n * @returns {StyleSheet} The theme StyleSheet instance. Use `classes.root` to get the theme class name. \n * Apply this class to the element you want to theme. The CSS variables will be available for all \n * its descendants.\n * \n * @example\n * // Create a theme with light and dark color schemes and apply it to the entire page.\n * const theme = createTheme({\n *     light : {\n *         colorPrimary : 'black',\n *         backgroundLevel1 : 'white'\n *     },\n *     dark : {\n *         colorPrimary : 'white',\n *         backgroundLevel1 : 'black'\n *     }\n * });\n * \n * // Add the `root` class (the theme class) to the body element.\n * // This will apply the theme to the entire page.\n * document.body.classList.add(theme.classes.root);\n * \n * // Add some styles using the theme CSS variables.\n * const { classes } = css({\n *     button : {\n *         color : 'var(--fun-colorPrimary)', // Use the CSS variable generated from the theme.\n *         backgroundColor : 'var(--fun-backgroundLevel1)'\n *     }\n * });\n * \n * // Add the `button` class to a button component.\n * // The button will use the CSS variables defined in the theme for its styles.\n * // Once the theme is applied, the button will automatically update its styles.\n * // If the system color scheme changes (e.g., from light to dark), the button will \n * // dynamically update to reflect the new theme without requiring additional code.\n * const Button = ({ label }) => <button className={classes.button}>{label}</button>;\n */\nconst createTheme = (themes = {}, options = {}) => {\n    const colorScheme = options.colorScheme || 'light dark';\n    const prefix = 'cssVarsPrefix' in options ? options.cssVarsPrefix : StyleSheet.prefix;\n\n    let styles;\n\n    if (colorScheme === 'light dark') {\n        const cssVars = {\n            light : makeCssVars(themes.light, prefix),\n            dark : makeCssVars(themes.dark, prefix)\n        };\n\n        const diff = getDiff(cssVars.light, cssVars.dark);\n\n        styles = {\n            root : {\n                ':where(&)' : Object.assign({ colorScheme : 'light' }, cssVars.light),\n                ':where([data-color-scheme=\"dark\"] &)' : Object.assign({ colorScheme : 'dark' }, diff.right),\n            },\n            '@media (prefers-color-scheme: dark)' : {\n                ':where($root)' : Object.assign({ colorScheme : 'dark' }, diff.right),\n                ':where([data-color-scheme=\"light\"] $root)' : Object.assign({ colorScheme : 'light' }, diff.left)\n            }\n        };\n    } else {\n        styles = {\n            root : {\n                ':where(&)' : Object.assign({ colorScheme }, makeCssVars(themes[colorScheme], prefix))\n            }\n        };\n    }\n\n    return (options.createStyleSheet || css)(styles, options.styleSheetOptions);\n};\n\nexport default createTheme;\n"],"names":["isObject"],"mappings":"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"}