@maz-ui/themes 5.0.0-beta.18 → 5.0.0-beta.20

package/dist/utils/css-generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/utils/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiD,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAKrG,MAAM,WAAW,UAAU;IACzB,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,8EAA8E;IAC9E,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAA;IACvC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAID,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CAuB5E;AAwFD,eAAO,MAAM,MAAM,kBAAkB,CAAA;AAErC,wBAAgB,SAAS,CAAC,EAAE,oBAAS,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAiBxD;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAI3C"}
+{"version":3,"file":"css-generator.d.ts","sourceRoot":"","sources":["../../src/utils/css-generator.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiD,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAKrG,MAAM,WAAW,UAAU;IACzB,6BAA6B;IAC7B,IAAI,EAAE,SAAS,CAAA;IACf,8EAA8E;IAC9E,oBAAoB,EAAE,OAAO,GAAG,OAAO,CAAA;IACvC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAID,wBAAgB,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,GAAG,MAAM,CA6B5E;AAwFD,eAAO,MAAM,MAAM,kBAAkB,CAAA;AAErC,wBAAgB,SAAS,CAAC,EAAE,oBAAS,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAiBxD;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAI3C"}

package/dist/utils/css-generator.js

@@ -1,2 +1,2 @@
-import{normalizeColor}from"./color-parser.js";import{DEFAULT_ROUNDED_RATIOS}from"../presets/_defaults.js";import{isServer}from"@maz-ui/utils/helpers/isServer";var ROUNDED_KEYS=[`xs`,`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`];function generateCSS(preset,options){let prefix=options.prefix??`maz`;let lightClass=options.lightClass??`light`;let{mode}=options;let lines=[`@layer theme {`,`  :root {`];let colorScheme=mode===`both`?`light dark`:`only ${mode}`;return lines.push(`    color-scheme: ${colorScheme};`),appendFoundation(lines,preset.foundation,prefix),appendScales(lines,preset.scales,prefix),appendComponents(lines,preset,prefix,mode),appendColorVariables(lines,preset.colors,mode,prefix),lines.push(`  }`),options.darkSelectorStrategy===`class`&&mode===`both`&&(lines.push(`  .${options.darkClass} { color-scheme: only dark; }`),lines.push(`  .${lightClass} { color-scheme: only light; }`)),lines.push(`}`),lines.join(`
+import{normalizeColor}from"./color-parser.js";import{DEFAULT_ROUNDED_RATIOS}from"../presets/_defaults.js";import{isServer}from"@maz-ui/utils/helpers/isServer";var ROUNDED_KEYS=[`xs`,`sm`,`md`,`lg`,`xl`,`2xl`,`3xl`];function generateCSS(preset,options){let prefix=options.prefix??`maz`;let lightClass=options.lightClass??`light`;let{mode}=options;let lines=[`@layer theme {`,`  :root {`];let colorScheme=mode===`both`?options.darkSelectorStrategy===`class`?`light`:`light dark`:`only ${mode}`;return lines.push(`    color-scheme: ${colorScheme};`),appendFoundation(lines,preset.foundation,prefix),appendScales(lines,preset.scales,prefix),appendComponents(lines,preset,prefix,mode),appendColorVariables(lines,preset.colors,mode,prefix),lines.push(`  }`),options.darkSelectorStrategy===`class`&&mode===`both`&&(lines.push(`  .${options.darkClass} { color-scheme: only dark; }`),lines.push(`  .${lightClass} { color-scheme: only light; }`)),lines.push(`}`),lines.join(`
 `)}function appendColorVariables(lines,colors,mode,prefix){for(let[key,lightValue]of Object.entries(colors.light))if(lightValue)if(mode===`both`){let dark=colors.dark[key]??lightValue;lines.push(`    --${prefix}-${key}: light-dark(${normalizeColor(lightValue)}, ${normalizeColor(dark)});`)}else lines.push(`    --${prefix}-${key}: ${normalizeColor(mode===`dark`?colors.dark[key]??lightValue:lightValue)};`)}function appendFoundation(lines,foundation,prefix){if(foundation)for(let[key,value]of Object.entries(foundation))value&&lines.push(`    --${prefix}-${key}: ${value};`)}function appendScales(lines,scales,prefix){if(scales){for(let key of ROUNDED_KEYS){let value=scales.rounded?.[key];value?lines.push(`    --${prefix}-rounded-${key}: ${value};`):key!==`md`&&lines.push(`    --${prefix}-rounded-${key}: calc(var(--${prefix}-rounded-md) * ${DEFAULT_ROUNDED_RATIOS[key]});`)}for(let[key,value]of Object.entries(scales.shadow??{}))value&&lines.push(`    --${prefix}-shadow-style-${key}: ${value};`)}}function appendComponents(lines,preset,prefix,mode){let components=preset.components;if(!components)return;components.btn?.[`font-weight`]&&lines.push(`    --${prefix}-btn-font-weight: ${components.btn[`font-weight`]};`);let emitBg=(componentKey,cssKey)=>{let bg=components[componentKey]?.bg;if(bg)if(mode===`both`){let fallback=bg.light??bg.dark;if(!fallback)return;let light=normalizeColor(bg.light??fallback);let dark=normalizeColor(bg.dark??fallback);let value=light===dark?light:`light-dark(${light}, ${dark})`;lines.push(`    --${prefix}-${cssKey}: ${value};`)}else bg[mode]&&lines.push(`    --${prefix}-${cssKey}: ${normalizeColor(bg[mode])};`)};emitBg(`container`,`container-bg`),emitBg(`input`,`input-bg`);let inputTopLabelFw=components.input?.[`top-label-font-weight`];inputTopLabelFw&&lines.push(`    --${prefix}-input-top-label-font-weight: ${inputTopLabelFw};`)}var CSS_ID=`maz-theme-css`;function injectCSS(id=CSS_ID,css){if(isServer())return;let styleElements=document.querySelectorAll(`#${id}`);let target=styleElements[styleElements.length-1];for(let i=0;i<styleElements.length-1;i++)styleElements[i].remove();target||(target=document.createElement(`style`),target.id=id,document.head.appendChild(target)),target.textContent=css}function removeCSS(id=CSS_ID){isServer()||document.querySelectorAll(`#${id}`).forEach(el=>el.remove())}export{CSS_ID,generateCSS,injectCSS,removeCSS};

package/dist/utils/setup-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup-theme.d.ts","sourceRoot":"","sources":["../../src/utils/setup-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,KAAK,EAAgC,UAAU,EAAE,MAAM,UAAU,CAAA;AAmExE,eAAO,MAAM,cAAc;;;;;;;;;;CAUgE,CAAA;AAE3F,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,GAAG,CAAC,UAAU,CAAC,CAAA;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAkFD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAoCvE"}
+{"version":3,"file":"setup-theme.d.ts","sourceRoot":"","sources":["../../src/utils/setup-theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAClD,OAAO,KAAK,EAAgC,UAAU,EAAE,MAAM,UAAU,CAAA;AA8DxE,eAAO,MAAM,cAAc;;;;;;;;;;CAUgE,CAAA;AAE3F,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,GAAG,CAAC,UAAU,CAAC,CAAA;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AA8FD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,gBAAgB,CAoCvE"}

package/dist/utils/setup-theme.js

@@ -1 +1 @@
-import{injectColorSchemeMeta,resolveColorSchemeContent}from"./color-scheme-meta.js";import{clearSavedPresetName,getSavedPresetName,saveResolvedPresetName}from"./cookie-storage.js";import{getPreset}from"./get-preset.js";import{injectThemeCSS}from"./inject-theme-css.js";import{mergePresets}from"./preset-merger.js";import{getColorMode,getSavedColorMode,getSystemColorMode,saveResolvedColorMode}from"./get-color-mode.js";import{updateDocumentClass}from"./update-document-class.js";import{useMutationObserver}from"./use-mutation-observer.js";import{isServer}from"@maz-ui/utils/helpers/isServer";import{ref,watch}from"vue";function noop(){}function watchColorSchemeFromMedia(themeState){if(isServer())return noop;let mediaCleanup;if(themeState.value?.colorMode===`auto`){let mediaQuery=globalThis.matchMedia(`(prefers-color-scheme: dark)`);let onChange=()=>{if(themeState.value.colorMode!==`auto`)return;let next=mediaQuery.matches?`dark`:`light`;updateDocumentClass(next,themeState.value),themeState.value.isDark=next===`dark`,saveResolvedColorMode(next)};mediaQuery.addEventListener(`change`,onChange),mediaCleanup=()=>mediaQuery.removeEventListener(`change`,onChange)}let stopWatch=watch(()=>themeState.value.colorMode,colorMode=>{let isDark=colorMode===`auto`?getSystemColorMode()===`dark`:colorMode===`dark`;updateDocumentClass(colorMode,themeState.value),injectColorSchemeMeta(resolveColorSchemeContent(themeState.value.mode,colorMode)),colorMode===`auto`&&saveResolvedColorMode(isDark?`dark`:`light`)});return()=>{mediaCleanup?.(),stopWatch()}}function watchMutationClassOnHtmlElement(themeState){return isServer()?noop:useMutationObserver(document.documentElement,()=>{if(isServer()||!themeState.value)return;let active=document.documentElement.classList.contains(themeState.value.darkClass)?`dark`:`light`;themeState.value.isDark=active===`dark`,themeState.value.colorMode!==active&&themeState.value.colorMode!==`auto`&&(themeState.value.colorMode=active)},{attributes:!0}).stop}var defaultOptions={strategy:`runtime`,overrides:{},darkModeStrategy:`class`,preset:void 0,mode:`both`,darkClass:`dark`,lightClass:`light`,colorMode:`auto`,persistPreset:!0};function resolveConfig(options){return{...defaultOptions,...options,colorMode:getSavedColorMode()??options.colorMode??(options.mode===`dark`?`dark`:`auto`)}}function createThemeState(options,config){let isDark=config.colorMode===`auto`&&config.mode===`both`?getSystemColorMode()===`dark`||getColorMode(config.colorMode)===`dark`:getColorMode(config.colorMode)===`dark`||config.mode===`dark`;!isServer()&&config.colorMode===`auto`&&saveResolvedColorMode(isDark?`dark`:`light`);let themeState=ref({strategy:config.strategy,darkClass:config.darkClass,lightClass:config.lightClass,darkModeStrategy:config.darkModeStrategy,colorMode:config.colorMode,mode:config.mode,preset:void 0,persistPreset:config.persistPreset,isDark:options._isDark||isDark});return updateDocumentClass(themeState.value.colorMode,themeState.value),themeState}function finalizeTheme(themeState,preset,config){let finalPreset=preset&&Object.keys(config.overrides).length>0?mergePresets(preset,config.overrides):preset;if(finalPreset&&(themeState.value.preset=finalPreset,config.persistPreset&&saveResolvedPresetName(finalPreset.name)),config.strategy===`buildtime`||!finalPreset)return{themeState,cleanup:noop};injectThemeCSS(finalPreset,config);let stopMedia=watchColorSchemeFromMedia(themeState);let stopMutation=watchMutationClassOnHtmlElement(themeState);return{themeState,cleanup:()=>{stopMedia(),stopMutation()}}}function swapPreset(themeState,preset,config){let final=Object.keys(config.overrides).length>0?mergePresets(preset,config.overrides):preset;themeState.value.preset=final,saveResolvedPresetName(final.name),injectThemeCSS(final,config)}function setupTheme(options){let config=resolveConfig(options);let themeState=createThemeState(options,config);injectColorSchemeMeta(resolveColorSchemeContent(themeState.value.mode,themeState.value.colorMode));let savedName=config.persistPreset?getSavedPresetName():null;let presetObject=config.preset&&typeof config.preset!=`string`?config.preset:null;if(presetObject||config.strategy===`buildtime`){let setup=finalizeTheme(themeState,presetObject??config.preset,config);return savedName&&config.strategy!==`buildtime`&&(!presetObject||savedName!==presetObject.name)&&getPreset(savedName).then(preset=>swapPreset(themeState,preset,config)).catch(()=>clearSavedPresetName()),setup}return(savedName?getPreset(savedName).catch(()=>(clearSavedPresetName(),getPreset(config.preset))):getPreset(config.preset)).catch(error=>{console.error(`[@maz-ui/themes] Failed to resolve preset`,error)}).then(preset=>finalizeTheme(themeState,preset,config)),{themeState,cleanup:noop}}export{defaultOptions,setupTheme};
+import{injectColorSchemeMeta,resolveColorSchemeContent}from"./color-scheme-meta.js";import{clearSavedPresetName,getSavedPresetName,saveResolvedPresetName}from"./cookie-storage.js";import{getPreset}from"./get-preset.js";import{injectThemeCSS}from"./inject-theme-css.js";import{mergePresets}from"./preset-merger.js";import{getColorMode,getSavedColorMode,getSystemColorMode,saveResolvedColorMode}from"./get-color-mode.js";import{updateDocumentClass}from"./update-document-class.js";import{useMutationObserver}from"./use-mutation-observer.js";import{isServer}from"@maz-ui/utils/helpers/isServer";import{ref,watch}from"vue";function noop(){}function watchColorSchemeFromMedia(themeState){if(isServer())return noop;let mediaQuery=globalThis.matchMedia(`(prefers-color-scheme: dark)`);let onChange=()=>{if(themeState.value.colorMode!==`auto`)return;let next=mediaQuery.matches?`dark`:`light`;updateDocumentClass(`auto`,themeState.value),themeState.value.isDark=next===`dark`,saveResolvedColorMode(next)};mediaQuery.addEventListener(`change`,onChange);let stopWatch=watch(()=>themeState.value.colorMode,colorMode=>{let isDark=colorMode===`auto`?getSystemColorMode()===`dark`:colorMode===`dark`;updateDocumentClass(colorMode,themeState.value),injectColorSchemeMeta(resolveColorSchemeContent(themeState.value.mode,colorMode)),colorMode===`auto`&&saveResolvedColorMode(isDark?`dark`:`light`)});return()=>{mediaQuery.removeEventListener(`change`,onChange),stopWatch()}}function watchMutationClassOnHtmlElement(themeState){return isServer()?noop:useMutationObserver(document.documentElement,()=>{if(isServer()||!themeState.value)return;let active=document.documentElement.classList.contains(themeState.value.darkClass)?`dark`:`light`;themeState.value.isDark=active===`dark`,themeState.value.colorMode!==active&&themeState.value.colorMode!==`auto`&&(themeState.value.colorMode=active)},{attributes:!0}).stop}var defaultOptions={strategy:`runtime`,overrides:{},darkModeStrategy:`class`,preset:void 0,mode:`both`,darkClass:`dark`,lightClass:`light`,colorMode:`auto`,persistPreset:!0};function resolveConfig(options){return{...defaultOptions,...options,colorMode:getSavedColorMode()??options.colorMode??(options.mode===`dark`?`dark`:`auto`)}}function createThemeState(options,config){let isDark=config.colorMode===`auto`&&config.mode===`both`?getSystemColorMode()===`dark`||getColorMode(config.colorMode)===`dark`:getColorMode(config.colorMode)===`dark`||config.mode===`dark`;!isServer()&&config.colorMode===`auto`&&saveResolvedColorMode(isDark?`dark`:`light`);let themeState=ref({strategy:config.strategy,darkClass:config.darkClass,lightClass:config.lightClass,darkModeStrategy:config.darkModeStrategy,colorMode:config.colorMode,mode:config.mode,preset:void 0,persistPreset:config.persistPreset,isDark:options._isDark||isDark});if(!isServer()&&config.darkModeStrategy===`class`&&config.mode===`both`){let html=document.documentElement;html.classList.contains(config.darkClass)||html.classList.contains(config.lightClass)||updateDocumentClass(themeState.value.colorMode,themeState.value)}else updateDocumentClass(themeState.value.colorMode,themeState.value);return themeState}function finalizeTheme(themeState,preset,config){let finalPreset=preset&&Object.keys(config.overrides).length>0?mergePresets(preset,config.overrides):preset;if(finalPreset&&(themeState.value.preset=finalPreset,config.persistPreset&&saveResolvedPresetName(finalPreset.name)),config.strategy===`buildtime`||!finalPreset)return{themeState,cleanup:noop};injectThemeCSS(finalPreset,config);let stopMedia=watchColorSchemeFromMedia(themeState);let stopMutation=watchMutationClassOnHtmlElement(themeState);return{themeState,cleanup:()=>{stopMedia(),stopMutation()}}}function swapPreset(themeState,preset,config){let final=Object.keys(config.overrides).length>0?mergePresets(preset,config.overrides):preset;themeState.value.preset=final,saveResolvedPresetName(final.name),injectThemeCSS(final,config)}function setupTheme(options){let config=resolveConfig(options);let themeState=createThemeState(options,config);injectColorSchemeMeta(resolveColorSchemeContent(themeState.value.mode,themeState.value.colorMode));let savedName=config.persistPreset?getSavedPresetName():null;let presetObject=config.preset&&typeof config.preset!=`string`?config.preset:null;if(presetObject||config.strategy===`buildtime`){let setup=finalizeTheme(themeState,presetObject??config.preset,config);return savedName&&config.strategy!==`buildtime`&&(!presetObject||savedName!==presetObject.name)&&getPreset(savedName).then(preset=>swapPreset(themeState,preset,config)).catch(()=>clearSavedPresetName()),setup}return(savedName?getPreset(savedName).catch(()=>(clearSavedPresetName(),getPreset(config.preset))):getPreset(config.preset)).catch(error=>{console.error(`[@maz-ui/themes] Failed to resolve preset`,error)}).then(preset=>finalizeTheme(themeState,preset,config)),{themeState,cleanup:noop}}export{defaultOptions,setupTheme};

package/dist/utils/update-document-class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"update-document-class.d.ts","sourceRoot":"","sources":["../../src/utils/update-document-class.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAGrD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAalF"}
+{"version":3,"file":"update-document-class.d.ts","sourceRoot":"","sources":["../../src/utils/update-document-class.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAIrD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAalF"}

package/dist/utils/update-document-class.js

@@ -1 +1 @@
-import{noTransition}from"./no-transition.js";function updateDocumentClass(colorMode,state){typeof document>`u`||!state||state.darkModeStrategy===`media`||state.mode!==`both`||noTransition(()=>{let html=document.documentElement;html.classList.remove(state.darkClass,state.lightClass),colorMode===`dark`?html.classList.add(state.darkClass):colorMode===`light`&&html.classList.add(state.lightClass)})}export{updateDocumentClass};
+import{noTransition}from"./no-transition.js";import{getSystemColorMode}from"./get-color-mode.js";function updateDocumentClass(colorMode,state){if(typeof document>`u`||!state||state.darkModeStrategy===`media`||state.mode!==`both`)return;let classToAdd=(colorMode===`auto`?getSystemColorMode():colorMode)===`dark`?state.darkClass:state.lightClass;noTransition(()=>{let html=document.documentElement;html.classList.remove(state.darkClass,state.lightClass),html.classList.add(classToAdd)})}export{updateDocumentClass};

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@maz-ui/themes",
   "type": "module",
-  "version": "5.0.0-beta.18",
+  "version": "5.0.0-beta.20",
   "description": "Theme system for Maz-UI with TypeScript support and CSS variables",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
-  "homepage": "https://maz-ui.com/guide/themes",
+  "homepage": "https://maz-ui.com/ecosystem/themes",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/LouisMazel/maz-ui.git"