import { SharedUtils, dt, toVariables } from 'primevue/themes'; export default { getCommon({ name = '', theme = {}, params, defaults }) { const { base, preset } = theme; let primitive_css, semantic_css, global_css; if (SharedUtils.object.isNotEmpty(preset)) { const { options, extend } = theme; const { primitive, semantic } = preset; const { colorScheme, ...sRest } = semantic || {}; const { dark, ...csRest } = colorScheme || {}; const { primitive: primitiveExt, semantic: semanticExt } = extend || {}; const { colorScheme: colorSchemeExt, ...sRestExt } = semanticExt || {}; const { dark: darkExt, ...csRestExt } = colorSchemeExt || {}; const prim_css = SharedUtils.object.isNotEmpty(primitive) ? this._toVariables({ primitive: { ...primitive, ...primitiveExt } }, options).declarations : ''; const sRest_css = SharedUtils.object.isNotEmpty(sRest) ? this._toVariables({ semantic: { ...sRest, ...sRestExt } }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : ''; primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, defaults); semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, defaults)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, defaults)}`; } global_css = SharedUtils.object.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); return { primitive: primitive_css, semantic: semantic_css, global: global_css }; }, getPresetC({ name = '', theme = {}, params, defaults }) { const { preset, options, extend } = theme; const { colorScheme, ...vRest } = preset?.components?.[name] || {}; const { dark, ...csRest } = colorScheme || {}; const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.components?.[name] || {}; const { dark: darkExt, ...csRestExt } = colorSchemeExt || {}; const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : ''; return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`; }, getBaseC({ name = '', theme = {}, params, defaults }) { const { base, options } = theme; const { css } = base?.components?.[name] || {}; const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); return this._transformCSS(name, computed_css, undefined, 'style', options, defaults); }, getPresetD({ name = '', theme = {}, params, defaults }) { const { preset, options, extend } = theme; const { colorScheme, ...vRest } = preset?.directives?.[name] || {}; const { dark, ...csRest } = colorScheme || {}; const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.directives?.[name] || {}; const { dark: darkExt, ...csRestExt } = colorSchemeExt || {}; const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : ''; const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : ''; const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : ''; return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`; }, getBaseD({ name = '', theme = {}, params, defaults }) { const { base, options } = theme; const { css } = base?.directives?.[name] || {}; const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) }); return this._transformCSS(name, computed_css, undefined, 'style', options, defaults); }, getColorSchemeOption(colorScheme, defaults) { let options = { ...defaults.colorScheme }; if (colorScheme) { if (SharedUtils.object.isObject(colorScheme)) { options.light = { ...options.light, ...colorScheme.light }; options.dark = { ...options.dark, ...colorScheme.dark }; } else { options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' }; options.dark = { ...options.dark, default: colorScheme === 'dark' }; } } return options; }, applyColorScheme(options = {}, currentColorScheme, defaults) { const colorSchemeOption = this.getColorSchemeOption(options.colorScheme, defaults); const isClient = SharedUtils.dom.isClient(); const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default; const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)').matches : colorSchemeOption.dark?.default; const defaultDocument = isClient ? window.document : undefined; if (isDark && defaultDocument) { SharedUtils.dom.addClass(defaultDocument.documentElement, colorSchemeOption.dark?.class); } return isDark ? 'dark' : 'light'; }, toggleColorScheme(options = {}, currentColorScheme, defaults) { const newColorScheme = currentColorScheme === 'dark' ? 'light' : 'dark'; const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined; if (defaultDocument) { const colorSchemeOption = this.getColorSchemeOption(options.colorScheme, defaults); const [lightClass, darkClass] = [colorSchemeOption.light.class, colorSchemeOption.dark.class]; SharedUtils.dom.removeMultipleClasses(defaultDocument.documentElement, [lightClass, darkClass]); SharedUtils.dom.addClass(defaultDocument.documentElement, newColorScheme === 'dark' ? darkClass : lightClass); } return newColorScheme; }, getCommonStyleSheet(name, theme = {}, params, props = {}) { const { preset, base } = theme; const common_css = this.getCommon(preset, base, params, theme); const _props = Object.entries(props) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .join(' '); return Object.entries(common_css || {}) .reduce((acc, [key, value]) => { if (value) { const _css = SharedUtils.object.minifyCSS(value); acc.push(``); } return acc; }, []) .join(''); }, getStyleSheet(name, theme = {}, params, props = {}) { const { preset, base } = theme; const presetCTheme = preset?.components?.[name]; const baseCTheme = base?.components?.[name]; const presetC_css = this.getPresetC(name, presetCTheme, theme); const baseC_css = this.getBaseC(name, baseCTheme, params, theme); const _props = Object.entries(props) .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, []) .join(' '); let css = []; presetC_css && css.push(``); baseC_css && css.push(``); return css.join(''); }, _toVariables(theme, options) { return toVariables(theme, { prefix: options?.prefix }); }, _transformCSS(name, css, mode, type, options = {}, defaults) { if (SharedUtils.object.isNotEmpty(css)) { const { layer, colorScheme } = options; if (type !== 'style') { const colorSchemeOption = this.getColorSchemeOption(colorScheme, defaults); mode = mode === 'dark' ? 'dark' : 'light'; css = colorSchemeOption[mode]?.rule?.replace('[CSS]', css); } if (layer) { let layerOptions = { ...defaults.layer }; SharedUtils.object.isObject(layer) && (layerOptions.name = SharedUtils.object.getItemValue(layer.name, { name, type })); css = SharedUtils.object.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css; } return css; } return ''; } };