@maz-ui/themes 5.0.0-beta.39 → 5.0.0-beta.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{saveResolvedPresetName}from"../utils/cookie-storage.js";import{CSS_ID,generateCSS,injectCSS}from"../utils/css-generator.js";import{getPreset}from"../utils/get-preset.js";import{noTransition}from"../utils/no-transition.js";import{mergePresets}from"../utils/preset-merger.js";import{getSystemColorMode,saveResolvedColorMode}from"../utils/get-color-mode.js";import{isServer}from"@maz-ui/utils/helpers/isServer";import{setCookie}from"@maz-ui/utils/helpers/cookie";import{computed,getCurrentInstance,inject,ref,watch}from"vue";var themeState=ref();var colorMode=computed({get:()=>themeState.value?.colorMode,set:mode=>void setColorMode(mode)});var isDark=computed(()=>themeState.value?.isDark||!1);var strategy=computed(()=>themeState.value?.strategy);var mode=computed(()=>themeState.value?.mode);var darkModeStrategy=computed(()=>themeState.value?.darkModeStrategy);var preset=computed(()=>themeState.value?.preset);var presetName=computed(()=>preset.value?.name);async function updateTheme(preset){if(!themeState.value)return;let _preset=typeof preset==`string`?await getPreset(preset):preset;if(!_preset||!themeState.value.preset){console.error(`[@maz-ui/themes] No preset found — with buildtime strategy you must pass a full preset`);return}let newPreset=`name`in _preset&&_preset.name!==themeState.value.preset.name?_preset:mergePresets(themeState.value.preset,_preset);themeState.value.preset=newPreset,themeState.value.persistPreset&&saveResolvedPresetName(newPreset.name),themeState.value.strategy===`runtime
|
|
1
|
+
import{saveResolvedPresetName}from"../utils/cookie-storage.js";import{CSS_ID,generateCSS,injectCSS}from"../utils/css-generator.js";import{getPreset}from"../utils/get-preset.js";import{noTransition}from"../utils/no-transition.js";import{mergePresets}from"../utils/preset-merger.js";import{getSystemColorMode,saveResolvedColorMode}from"../utils/get-color-mode.js";import{isServer}from"@maz-ui/utils/helpers/isServer";import{setCookie}from"@maz-ui/utils/helpers/cookie";import{computed,getCurrentInstance,inject,ref,watch}from"vue";var themeState=ref();var colorMode=computed({get:()=>themeState.value?.colorMode,set:mode=>void setColorMode(mode)});var isDark=computed(()=>themeState.value?.isDark||!1);var strategy=computed(()=>themeState.value?.strategy);var mode=computed(()=>themeState.value?.mode);var darkModeStrategy=computed(()=>themeState.value?.darkModeStrategy);var preset=computed(()=>themeState.value?.preset);var presetName=computed(()=>preset.value?.name);async function updateTheme(preset){if(!themeState.value)return;let _preset=typeof preset==`string`?await getPreset(preset):preset;if(!_preset||!themeState.value.preset){console.error(`[@maz-ui/themes] No preset found — with buildtime strategy you must pass a full preset`);return}let newPreset=`name`in _preset&&_preset.name!==themeState.value.preset.name?_preset:mergePresets(themeState.value.preset,_preset);if(themeState.value.preset=newPreset,themeState.value.persistPreset&&saveResolvedPresetName(newPreset.name),themeState.value.strategy===`runtime`){let fullCSS=generateCSS(newPreset,{mode:themeState.value.mode,darkSelectorStrategy:themeState.value.darkModeStrategy,prefix:`maz`,darkClass:themeState.value.darkClass,lightClass:themeState.value.lightClass});injectCSS(CSS_ID,fullCSS)}}async function setColorMode(colorMode,options={}){if(!themeState.value)return;let apply=()=>{themeState.value.colorMode=colorMode,setCookie(`maz-color-mode`,colorMode),colorMode===`auto`&&saveResolvedColorMode(getSystemColorMode()===`dark`?`dark`:`light`)};if(options.animate){let{runViewTransition}=await import(`../utils/view-transition.js`);await runViewTransition(apply)}else apply()}function toggleDarkMode(options={}){return setColorMode(isDark.value?`light`:`dark`,options)}var stopInjectedWatch;function setThemeStateFromGlobalProperties(){themeState.value=void 0,stopInjectedWatch?.(),stopInjectedWatch=void 0;try{let injectedState=inject(`mazThemeState`,void 0);if(themeState.value=injectedState?.value,injectedState&&(stopInjectedWatch=watch(injectedState,newState=>{newState&&(themeState.value=newState)},{deep:!0})),!themeState.value)throw Error(`mazThemeState not found`)}catch{let instance=getCurrentInstance();instance?.appContext?.app?.config?.globalProperties&&(themeState.value=instance.appContext.app.config.globalProperties.$mazThemeState.value)}}function useTheme(){isServer()&&(themeState.value=void 0);try{if(themeState.value||setThemeStateFromGlobalProperties(),!themeState.value)throw Error(`[@maz-ui/themes] no theme state found`)}catch{throw Error(`[@maz-ui/themes] useTheme requires the MazUi/MazUiTheme plugin or a MazUiProvider wrapper`)}return{preset,presetName,colorMode,isDark,strategy,updateTheme(preset){return noTransition(updateTheme,preset)},setColorMode,toggleDarkMode,mode,darkModeStrategy,currentPreset:preset}}export{useTheme};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{deleteCookie,getCookie,setCookie}from"@maz-ui/utils/helpers/cookie";var PRESET_COOKIE=`maz-preset`;function getSavedPresetName(){return getCookie(PRESET_COOKIE)}function saveResolvedPresetName(name){
|
|
1
|
+
import{deleteCookie,getCookie,setCookie}from"@maz-ui/utils/helpers/cookie";var PRESET_COOKIE=`maz-preset`;function getSavedPresetName(){return getCookie(PRESET_COOKIE)}function saveResolvedPresetName(name){name&&getCookie(PRESET_COOKIE)!==name&&setCookie(PRESET_COOKIE,name)}function clearSavedPresetName(){deleteCookie(PRESET_COOKIE)}export{clearSavedPresetName,getSavedPresetName,saveResolvedPresetName};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
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(`
|
|
2
|
-
`)}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`]};`),components.dialog?.[`max-width`]&&lines.push(` --${prefix}-dialog-max-width: ${components.dialog[`max-width`]};`),components.dialog?.[`min-width`]&&lines.push(` --${prefix}-dialog-min-width: ${components.dialog[`min-width`]};`);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};
|
|
2
|
+
`)}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`]};`),components.dialog?.[`max-width`]&&lines.push(` --${prefix}-dialog-max-width: ${components.dialog[`max-width`]};`),components.dialog?.[`min-width`]&&lines.push(` --${prefix}-dialog-min-width: ${components.dialog[`min-width`]};`);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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{CSS_ID,generateCSS,injectCSS}from"./css-generator.js";function injectThemeCSS(finalPreset,config){typeof document
|
|
1
|
+
import{CSS_ID,generateCSS,injectCSS}from"./css-generator.js";function injectThemeCSS(finalPreset,config){typeof document<`u`&&config.strategy!==`buildtime`&&injectCSS(CSS_ID,generateCSS(finalPreset,{mode:config.mode,darkSelectorStrategy:config.darkModeStrategy,darkClass:config.darkClass,lightClass:config.lightClass}))}export{injectThemeCSS};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function mergePresets(base,overrides){return{name:overrides.name||base.name,foundation:{...base.foundation,...overrides.foundation},scales:mergeScales(base.scales,overrides.scales),components:mergeComponents(base.components,overrides.components),colors:{light:mergeColors(base.colors.light,overrides.colors?.light),dark:mergeColors(base.colors.dark,overrides.colors?.dark)}}}function mergeScales(base,overrides){return overrides?{rounded:{...base.rounded,...overrides.rounded},shadow:{...base.shadow,...overrides.shadow}}:base}function mergeComponents(base,overrides){if(
|
|
1
|
+
function mergePresets(base,overrides){return{name:overrides.name||base.name,foundation:{...base.foundation,...overrides.foundation},scales:mergeScales(base.scales,overrides.scales),components:mergeComponents(base.components,overrides.components),colors:{light:mergeColors(base.colors.light,overrides.colors?.light),dark:mergeColors(base.colors.dark,overrides.colors?.dark)}}}function mergeScales(base,overrides){return overrides?{rounded:{...base.rounded,...overrides.rounded},shadow:{...base.shadow,...overrides.shadow}}:base}function mergeComponents(base,overrides){if(base||overrides)return{btn:{...base?.btn,...overrides?.btn},container:{bg:{...base?.container?.bg,...overrides?.container?.bg}},input:{...base?.input,...overrides?.input,bg:{...base?.input?.bg,...overrides?.input?.bg}},dialog:{...base?.dialog,...overrides?.dialog}}}function mergeColors(base,overrides){return overrides?{...base,...overrides}:base}function deepMerge(target,source){let result={...target};for(let key in source){let sourceValue=source[key];let targetValue=result[key];sourceValue!==void 0&&(result[key]=isObject(sourceValue)&&isObject(targetValue)?deepMerge(targetValue,sourceValue):sourceValue)}return result}function isObject(value){return typeof value==`object`&&!!value&&!Array.isArray(value)}export{deepMerge,mergePresets};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/themes",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "5.0.0-beta.
|
|
4
|
+
"version": "5.0.0-beta.44",
|
|
5
5
|
"description": "Theme system for Maz-UI with TypeScript support and CSS variables",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"vue": ">=3.5.0 <4.0.0"
|
|
99
99
|
},
|
|
100
100
|
"dependencies": {
|
|
101
|
-
"@maz-ui/utils": "5.0.0-beta.
|
|
101
|
+
"@maz-ui/utils": "5.0.0-beta.44"
|
|
102
102
|
},
|
|
103
103
|
"devDependencies": {
|
|
104
104
|
"@maz-ui/vite-config": "0.0.0"
|
|
@@ -107,7 +107,6 @@
|
|
|
107
107
|
"*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|
|
108
108
|
},
|
|
109
109
|
"scripts": {
|
|
110
|
-
"codegen": "nx build",
|
|
111
110
|
"build": "vite build",
|
|
112
111
|
"build:watch": "vite build --watch --mode development",
|
|
113
112
|
"typecheck": "vue-tsc --noEmit",
|