@maz-ui/themes 4.7.3 → 4.7.6-beta.0
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.
- package/dist/build/index.js +1 -58
- package/dist/composables/index.js +1 -10
- package/dist/composables/useTheme.js +1 -115
- package/dist/define-preset.js +1 -11
- package/dist/index.js +1 -40
- package/dist/plugin.js +1 -11
- package/dist/presets/index.js +1 -10
- package/dist/presets/mazUi.js +1 -62
- package/dist/presets/obsidian.js +1 -65
- package/dist/presets/ocean.js +1 -63
- package/dist/presets/pristine.js +1 -62
- package/dist/utils/color-utils.js +1 -68
- package/dist/utils/cookie-storage.js +1 -14
- package/dist/utils/css-generator.js +4 -181
- package/dist/utils/get-color-mode.js +1 -21
- package/dist/utils/get-preset.js +1 -28
- package/dist/utils/index.js +1 -33
- package/dist/utils/inject-theme-css.js +1 -29
- package/dist/utils/inject.js +1 -11
- package/dist/utils/no-transition.js +2 -15
- package/dist/utils/preset-merger.js +1 -34
- package/dist/utils/setup-theme.js +1 -104
- package/dist/utils/update-document-class.js +1 -9
- package/dist/utils/use-mutation-observer.js +1 -13
- package/package.json +2 -2
package/dist/build/index.js
CHANGED
|
@@ -1,58 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
function buildThemeCSS(options) {
|
|
3
|
-
const {
|
|
4
|
-
preset,
|
|
5
|
-
mode = "both",
|
|
6
|
-
darkSelector = "class",
|
|
7
|
-
prefix = "maz",
|
|
8
|
-
darkClass = "dark",
|
|
9
|
-
criticalOnly = !1
|
|
10
|
-
} = options, cssOptions = {
|
|
11
|
-
mode,
|
|
12
|
-
darkSelectorStrategy: darkSelector,
|
|
13
|
-
prefix,
|
|
14
|
-
darkClass
|
|
15
|
-
}, criticalCSS = generateCSS(preset, { ...cssOptions, onlyCritical: !0 });
|
|
16
|
-
if (criticalOnly)
|
|
17
|
-
return criticalCSS;
|
|
18
|
-
const fullCSS = generateCSS(preset, cssOptions);
|
|
19
|
-
return `${criticalCSS}
|
|
20
|
-
${fullCSS}`;
|
|
21
|
-
}
|
|
22
|
-
function generateThemeBundle(presets, options = {}) {
|
|
23
|
-
const {
|
|
24
|
-
mode = "both",
|
|
25
|
-
darkSelector = "class",
|
|
26
|
-
prefix = "maz",
|
|
27
|
-
criticalOnly = !1
|
|
28
|
-
} = options;
|
|
29
|
-
return presets.reduce((bundle, preset) => (bundle[preset.name] = buildThemeCSS({
|
|
30
|
-
preset,
|
|
31
|
-
mode,
|
|
32
|
-
darkSelector,
|
|
33
|
-
prefix,
|
|
34
|
-
criticalOnly
|
|
35
|
-
}), bundle), {});
|
|
36
|
-
}
|
|
37
|
-
function createThemeStylesheet(css, options = {}) {
|
|
38
|
-
const { id = "maz-theme", media } = options;
|
|
39
|
-
let styleTag = `<style id="${id}"`;
|
|
40
|
-
return media && (styleTag += ` media="${media}"`), styleTag += `>
|
|
41
|
-
${css}
|
|
42
|
-
</style>`, styleTag;
|
|
43
|
-
}
|
|
44
|
-
function buildSeparateThemeFiles(preset, options = {}) {
|
|
45
|
-
const { prefix = "maz", darkSelector = "class", darkClass = "dark" } = options, baseOptions = { prefix, darkSelectorStrategy: darkSelector, darkClass };
|
|
46
|
-
return {
|
|
47
|
-
critical: generateCSS(preset, { ...baseOptions, mode: "both", onlyCritical: !0 }),
|
|
48
|
-
full: generateCSS(preset, { ...baseOptions, mode: "both" }),
|
|
49
|
-
lightOnly: buildThemeCSS({ preset, mode: "light", ...options }),
|
|
50
|
-
darkOnly: buildThemeCSS({ preset, mode: "dark", ...options })
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
export {
|
|
54
|
-
buildSeparateThemeFiles,
|
|
55
|
-
buildThemeCSS,
|
|
56
|
-
createThemeStylesheet,
|
|
57
|
-
generateThemeBundle
|
|
58
|
-
};
|
|
1
|
+
import{generateCSS}from"../utils/css-generator.js";function buildThemeCSS(options){let{preset,mode=`both`,darkSelector=`class`,prefix=`maz`,darkClass=`dark`,criticalOnly=!1}=options;let cssOptions={mode,darkSelectorStrategy:darkSelector,prefix,darkClass};let criticalCSS=generateCSS(preset,{...cssOptions,onlyCritical:!0});return criticalOnly?criticalCSS:`${criticalCSS}\n${generateCSS(preset,cssOptions)}`}function generateThemeBundle(presets,options={}){let{mode=`both`,darkSelector=`class`,prefix=`maz`,criticalOnly=!1}=options;return presets.reduce((bundle,preset)=>(bundle[preset.name]=buildThemeCSS({preset,mode,darkSelector,prefix,criticalOnly}),bundle),{})}function createThemeStylesheet(css,options={}){let{id=`maz-theme`,media}=options;let styleTag=`<style id="${id}"`;return media&&(styleTag+=` media="${media}"`),styleTag+=`>\n${css}\n</style>`,styleTag}function buildSeparateThemeFiles(preset,options={}){let{prefix=`maz`,darkSelector=`class`,darkClass=`dark`}=options;let baseOptions={prefix,darkSelectorStrategy:darkSelector,darkClass};return{critical:generateCSS(preset,{...baseOptions,mode:`both`,onlyCritical:!0}),full:generateCSS(preset,{...baseOptions,mode:`both`}),lightOnly:buildThemeCSS({preset,mode:`light`,...options}),darkOnly:buildThemeCSS({preset,mode:`dark`,...options})}}export{buildSeparateThemeFiles,buildThemeCSS,createThemeStylesheet,generateThemeBundle};
|
|
@@ -1,10 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "vue";
|
|
3
|
-
import "../utils/cookie-storage.js";
|
|
4
|
-
import "../utils/css-generator.js";
|
|
5
|
-
import "../utils/get-preset.js";
|
|
6
|
-
import "../utils/preset-merger.js";
|
|
7
|
-
import { useTheme } from "./useTheme.js";
|
|
8
|
-
export {
|
|
9
|
-
useTheme
|
|
10
|
-
};
|
|
1
|
+
import{useTheme}from"./useTheme.js";export{useTheme};
|
|
@@ -1,115 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ref, computed, inject, watch, getCurrentInstance } from "vue";
|
|
3
|
-
import { setCookie } from "../utils/cookie-storage.js";
|
|
4
|
-
import { generateCSS, injectCSS, CSS_ID } from "../utils/css-generator.js";
|
|
5
|
-
import { getPreset } from "../utils/get-preset.js";
|
|
6
|
-
import { mergePresets } from "../utils/preset-merger.js";
|
|
7
|
-
const themeState = ref(), colorMode = computed({
|
|
8
|
-
get: () => themeState.value?.colorMode,
|
|
9
|
-
set: (mode2) => setColorMode(mode2)
|
|
10
|
-
}), isDark = computed(() => themeState.value?.isDark || !1), strategy = computed(() => themeState.value?.strategy), mode = computed(() => themeState.value?.mode), darkModeStrategy = computed(() => themeState.value?.darkModeStrategy), preset = computed(() => themeState.value?.preset), presetName = computed(() => preset.value?.name);
|
|
11
|
-
async function updateTheme(preset2) {
|
|
12
|
-
if (!themeState.value)
|
|
13
|
-
return;
|
|
14
|
-
const _preset = typeof preset2 == "string" ? await getPreset(preset2) : preset2;
|
|
15
|
-
if (!_preset || !themeState.value.preset) {
|
|
16
|
-
console.error("[@maz-ui/themes] No preset found - If you are using the buildtime strategy, you must provide a complete preset");
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
const newPreset = "name" in _preset && _preset.name !== themeState.value.preset.name ? _preset : mergePresets(themeState.value.preset, _preset);
|
|
20
|
-
if (themeState.value.preset = newPreset, themeState.value.strategy === "runtime" || themeState.value.strategy === "hybrid") {
|
|
21
|
-
const cssOptions = {
|
|
22
|
-
mode: themeState.value.mode,
|
|
23
|
-
darkSelectorStrategy: themeState.value.darkModeStrategy,
|
|
24
|
-
prefix: "maz",
|
|
25
|
-
darkClass: themeState.value.darkClass
|
|
26
|
-
}, fullCSS = generateCSS(newPreset, cssOptions);
|
|
27
|
-
injectCSS(CSS_ID, fullCSS);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
function setColorMode(colorMode2) {
|
|
31
|
-
themeState.value && (themeState.value.colorMode = colorMode2, setCookie("maz-color-mode", colorMode2));
|
|
32
|
-
}
|
|
33
|
-
function toggleDarkMode() {
|
|
34
|
-
setColorMode(isDark.value ? "light" : "dark");
|
|
35
|
-
}
|
|
36
|
-
let stopInjectedWatch;
|
|
37
|
-
function setThemeStateFromGlobalProperties() {
|
|
38
|
-
themeState.value = void 0, stopInjectedWatch?.(), stopInjectedWatch = void 0;
|
|
39
|
-
try {
|
|
40
|
-
const injectedState = inject("mazThemeState", void 0);
|
|
41
|
-
if (themeState.value = injectedState?.value, injectedState && (stopInjectedWatch = watch(injectedState, (newState) => {
|
|
42
|
-
newState && (themeState.value = newState);
|
|
43
|
-
}, { deep: !0 })), !themeState.value)
|
|
44
|
-
throw new Error("mazThemeState not found");
|
|
45
|
-
} catch {
|
|
46
|
-
const instance = getCurrentInstance();
|
|
47
|
-
instance?.appContext?.app?.config?.globalProperties && (themeState.value = instance.appContext.app.config.globalProperties.$mazThemeState.value);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
function useTheme() {
|
|
51
|
-
isServer() && (themeState.value = void 0);
|
|
52
|
-
try {
|
|
53
|
-
if (themeState.value || setThemeStateFromGlobalProperties(), !themeState.value)
|
|
54
|
-
throw new Error("[@maz-ui/themes] no theme state found");
|
|
55
|
-
} catch {
|
|
56
|
-
throw new Error("[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin, or wrap your components in a MazUiProvider, before using useTheme composable");
|
|
57
|
-
}
|
|
58
|
-
return {
|
|
59
|
-
/**
|
|
60
|
-
* Current theme preset
|
|
61
|
-
*/
|
|
62
|
-
preset,
|
|
63
|
-
/**
|
|
64
|
-
* Current theme name
|
|
65
|
-
*/
|
|
66
|
-
presetName,
|
|
67
|
-
/**
|
|
68
|
-
* Current color mode
|
|
69
|
-
* @description The color mode - Can be 'auto', 'dark' or 'light'
|
|
70
|
-
*/
|
|
71
|
-
colorMode,
|
|
72
|
-
/**
|
|
73
|
-
* Whether the current color mode is dark
|
|
74
|
-
*/
|
|
75
|
-
isDark,
|
|
76
|
-
/**
|
|
77
|
-
* Strategy used to apply the theme
|
|
78
|
-
*/
|
|
79
|
-
strategy,
|
|
80
|
-
/**
|
|
81
|
-
* Update the theme
|
|
82
|
-
* @param preset The new theme preset
|
|
83
|
-
* @description Update the theme with a new preset or override some tokens
|
|
84
|
-
*/
|
|
85
|
-
updateTheme,
|
|
86
|
-
/**
|
|
87
|
-
* Set the color mode
|
|
88
|
-
* @description Set the color mode - Can be 'auto', 'dark' or 'light'
|
|
89
|
-
* @param colorMode The new color mode
|
|
90
|
-
*/
|
|
91
|
-
setColorMode,
|
|
92
|
-
/**
|
|
93
|
-
* Toggle the dark mode
|
|
94
|
-
* @description Toggle the dark mode
|
|
95
|
-
*/
|
|
96
|
-
toggleDarkMode,
|
|
97
|
-
/**
|
|
98
|
-
* Mode
|
|
99
|
-
* @description Supported themes - Can be 'both', 'light' or 'dark'
|
|
100
|
-
*/
|
|
101
|
-
mode,
|
|
102
|
-
/**
|
|
103
|
-
* Dark mode strategy
|
|
104
|
-
* @description Strategy used to apply the dark mode - Can be 'class' or 'media'
|
|
105
|
-
*/
|
|
106
|
-
darkModeStrategy,
|
|
107
|
-
/**
|
|
108
|
-
* @deprecated use `preset` instead
|
|
109
|
-
*/
|
|
110
|
-
currentPreset: preset
|
|
111
|
-
};
|
|
112
|
-
}
|
|
113
|
-
export {
|
|
114
|
-
useTheme
|
|
115
|
-
};
|
|
1
|
+
import{setCookie}from"../utils/cookie-storage.js";import{CSS_ID,generateCSS,injectCSS}from"../utils/css-generator.js";import{getPreset}from"../utils/get-preset.js";import{mergePresets}from"../utils/preset-merger.js";import{isServer}from"@maz-ui/utils/helpers/isServer";import{computed,getCurrentInstance,inject,ref,watch}from"vue";var themeState=ref();var colorMode=computed({get:()=>themeState.value?.colorMode,set:mode=>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 - If you are using the buildtime strategy, you must provide a complete 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.strategy===`runtime`||themeState.value.strategy===`hybrid`)&&injectCSS(CSS_ID,generateCSS(newPreset,{mode:themeState.value.mode,darkSelectorStrategy:themeState.value.darkModeStrategy,prefix:`maz`,darkClass:themeState.value.darkClass}))}function setColorMode(colorMode){themeState.value&&(themeState.value.colorMode=colorMode,setCookie(`maz-color-mode`,colorMode))}function toggleDarkMode(){setColorMode(isDark.value?`light`:`dark`)}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] You must install the MazUi or MazUiTheme plugin, or wrap your components in a MazUiProvider, before using useTheme composable`)}return{preset,presetName,colorMode,isDark,strategy,updateTheme,setColorMode,toggleDarkMode,mode,darkModeStrategy,currentPreset:preset}}export{useTheme};
|
package/dist/define-preset.js
CHANGED
|
@@ -1,11 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getPreset } from "./utils/get-preset.js";
|
|
3
|
-
function definePreset({
|
|
4
|
-
base = "maz-ui",
|
|
5
|
-
overrides = {}
|
|
6
|
-
}) {
|
|
7
|
-
return typeof base == "string" ? getPreset(base).then((basePreset) => mergePresets(basePreset, overrides)) : mergePresets(base, overrides);
|
|
8
|
-
}
|
|
9
|
-
export {
|
|
10
|
-
definePreset
|
|
11
|
-
};
|
|
1
|
+
import{getPreset}from"./utils/get-preset.js";import{mergePresets}from"./utils/preset-merger.js";function definePreset({base=`maz-ui`,overrides={}}){return typeof base==`string`?getPreset(base).then(basePreset=>mergePresets(basePreset,overrides)):mergePresets(base,overrides)}export{definePreset};
|
package/dist/index.js
CHANGED
|
@@ -1,40 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useTheme } from "./composables/useTheme.js";
|
|
3
|
-
import { definePreset } from "./define-preset.js";
|
|
4
|
-
import { MazUiTheme } from "./plugin.js";
|
|
5
|
-
import { adjustColorLightness, formatHSL, generateColorScale, getContrastColor, parseHSL } from "./utils/color-utils.js";
|
|
6
|
-
import { CSS_ID, generateCSS, injectCSS, removeCSS } from "./utils/css-generator.js";
|
|
7
|
-
import { injectThemeCSS } from "./utils/inject-theme-css.js";
|
|
8
|
-
import { deepMerge, mergePresets } from "./utils/preset-merger.js";
|
|
9
|
-
import { defaultOptions, setupTheme } from "./utils/setup-theme.js";
|
|
10
|
-
import { mazUi } from "./presets/mazUi.js";
|
|
11
|
-
import { obsidian } from "./presets/obsidian.js";
|
|
12
|
-
import { ocean } from "./presets/ocean.js";
|
|
13
|
-
import { pristine } from "./presets/pristine.js";
|
|
14
|
-
export {
|
|
15
|
-
CSS_ID,
|
|
16
|
-
MazUiTheme,
|
|
17
|
-
adjustColorLightness,
|
|
18
|
-
buildSeparateThemeFiles,
|
|
19
|
-
buildThemeCSS,
|
|
20
|
-
createThemeStylesheet,
|
|
21
|
-
deepMerge,
|
|
22
|
-
defaultOptions,
|
|
23
|
-
definePreset,
|
|
24
|
-
formatHSL,
|
|
25
|
-
generateCSS,
|
|
26
|
-
generateColorScale,
|
|
27
|
-
generateThemeBundle,
|
|
28
|
-
getContrastColor,
|
|
29
|
-
injectCSS,
|
|
30
|
-
injectThemeCSS,
|
|
31
|
-
mazUi,
|
|
32
|
-
mergePresets,
|
|
33
|
-
obsidian,
|
|
34
|
-
ocean,
|
|
35
|
-
parseHSL,
|
|
36
|
-
pristine,
|
|
37
|
-
removeCSS,
|
|
38
|
-
setupTheme,
|
|
39
|
-
useTheme
|
|
40
|
-
};
|
|
1
|
+
import{adjustColorLightness,formatHSL,generateColorScale,getContrastColor,parseHSL}from"./utils/color-utils.js";import{CSS_ID,generateCSS,injectCSS,removeCSS}from"./utils/css-generator.js";import{injectThemeCSS}from"./utils/inject-theme-css.js";import{deepMerge,mergePresets}from"./utils/preset-merger.js";import{defaultOptions,setupTheme}from"./utils/setup-theme.js";import{MazUiTheme}from"./plugin.js";import{definePreset}from"./define-preset.js";import{pristine}from"./presets/pristine.js";import{ocean}from"./presets/ocean.js";import{obsidian}from"./presets/obsidian.js";import{mazUi}from"./presets/mazUi.js";import{useTheme}from"./composables/useTheme.js";import{buildSeparateThemeFiles,buildThemeCSS,createThemeStylesheet,generateThemeBundle}from"./build/index.js";import"./presets/index.js";export{CSS_ID,MazUiTheme,adjustColorLightness,buildSeparateThemeFiles,buildThemeCSS,createThemeStylesheet,deepMerge,defaultOptions,definePreset,formatHSL,generateCSS,generateColorScale,generateThemeBundle,getContrastColor,injectCSS,injectThemeCSS,mazUi,mergePresets,obsidian,ocean,parseHSL,pristine,removeCSS,setupTheme,useTheme};
|
package/dist/plugin.js
CHANGED
|
@@ -1,11 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { injectThemeState } from "./utils/inject.js";
|
|
3
|
-
const MazUiTheme = {
|
|
4
|
-
install(app, options) {
|
|
5
|
-
const { themeState } = setupTheme(options);
|
|
6
|
-
injectThemeState({ app, themeState });
|
|
7
|
-
}
|
|
8
|
-
};
|
|
9
|
-
export {
|
|
10
|
-
MazUiTheme
|
|
11
|
-
};
|
|
1
|
+
import{injectThemeState}from"./utils/inject.js";import{setupTheme}from"./utils/setup-theme.js";var MazUiTheme={install(app,options){let{themeState}=setupTheme(options);injectThemeState({app,themeState})}};export{MazUiTheme};
|
package/dist/presets/index.js
CHANGED
|
@@ -1,10 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { obsidian } from "./obsidian.js";
|
|
3
|
-
import { ocean } from "./ocean.js";
|
|
4
|
-
import { pristine } from "./pristine.js";
|
|
5
|
-
export {
|
|
6
|
-
mazUi,
|
|
7
|
-
obsidian,
|
|
8
|
-
ocean,
|
|
9
|
-
pristine
|
|
10
|
-
};
|
|
1
|
+
import{pristine}from"./pristine.js";import{ocean}from"./ocean.js";import{obsidian}from"./obsidian.js";import{mazUi}from"./mazUi.js";export{mazUi,obsidian,ocean,pristine};
|
package/dist/presets/mazUi.js
CHANGED
|
@@ -1,62 +1 @@
|
|
|
1
|
-
|
|
2
|
-
name: "maz-ui",
|
|
3
|
-
foundation: {
|
|
4
|
-
"base-font-size": "14px",
|
|
5
|
-
"font-family": "Manrope, sans-serif, system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
|
|
6
|
-
radius: "0.7rem",
|
|
7
|
-
"border-width": "1px"
|
|
8
|
-
},
|
|
9
|
-
colors: {
|
|
10
|
-
light: {
|
|
11
|
-
background: "0 0% 100%",
|
|
12
|
-
foreground: "210 8% 14%",
|
|
13
|
-
primary: "210 100% 56%",
|
|
14
|
-
"primary-foreground": "0 0% 100%",
|
|
15
|
-
secondary: "272 99% 54%",
|
|
16
|
-
"secondary-foreground": "0 0% 100%",
|
|
17
|
-
accent: "164 76% 46%",
|
|
18
|
-
"accent-foreground": "0 0% 100%",
|
|
19
|
-
success: "80 61% 50%",
|
|
20
|
-
"success-foreground": "210 8% 14%",
|
|
21
|
-
warning: "40 97% 59%",
|
|
22
|
-
"warning-foreground": "210 8% 14%",
|
|
23
|
-
destructive: "356.95 95.91% 57.73%",
|
|
24
|
-
"destructive-foreground": "0 0% 100%",
|
|
25
|
-
info: "188 78% 41%",
|
|
26
|
-
"info-foreground": "0 0% 100%",
|
|
27
|
-
contrast: "235 16% 15%",
|
|
28
|
-
"contrast-foreground": "255 0% 95%",
|
|
29
|
-
border: "220 13.04% 90.98%",
|
|
30
|
-
overlay: "0 0% 40%",
|
|
31
|
-
muted: "0 0% 54%",
|
|
32
|
-
shadow: "240 5.9% 10%"
|
|
33
|
-
},
|
|
34
|
-
dark: {
|
|
35
|
-
background: "235 16% 15%",
|
|
36
|
-
foreground: "0 0% 85%",
|
|
37
|
-
primary: "210 100% 56%",
|
|
38
|
-
"primary-foreground": "0 0% 100%",
|
|
39
|
-
secondary: "272 99% 54%",
|
|
40
|
-
"secondary-foreground": "0 0% 100%",
|
|
41
|
-
accent: "164 76% 46%",
|
|
42
|
-
"accent-foreground": "0 0% 100%",
|
|
43
|
-
success: "80 61% 50%",
|
|
44
|
-
"success-foreground": "210 8% 14%",
|
|
45
|
-
warning: "40 97% 59%",
|
|
46
|
-
"warning-foreground": "210 8% 14%",
|
|
47
|
-
destructive: "1 100% 71%",
|
|
48
|
-
"destructive-foreground": "0 0% 100%",
|
|
49
|
-
info: "188 78% 41%",
|
|
50
|
-
"info-foreground": "0 0% 100%",
|
|
51
|
-
contrast: "0 0% 100%",
|
|
52
|
-
"contrast-foreground": "210 8% 14%",
|
|
53
|
-
muted: "255 0% 54%",
|
|
54
|
-
border: "238 17% 25%",
|
|
55
|
-
overlay: "0 0% 15%",
|
|
56
|
-
shadow: "240 3.7% 15.9%"
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
export {
|
|
61
|
-
mazUi
|
|
62
|
-
};
|
|
1
|
+
var mazUi={name:`maz-ui`,foundation:{"base-font-size":`14px`,"font-family":`Manrope, sans-serif, system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`,radius:`0.7rem`,"border-width":`1px`},colors:{light:{background:`0 0% 100%`,foreground:`210 8% 14%`,primary:`210 100% 56%`,"primary-foreground":`0 0% 100%`,secondary:`272 99% 54%`,"secondary-foreground":`0 0% 100%`,accent:`164 76% 46%`,"accent-foreground":`0 0% 100%`,success:`80 61% 50%`,"success-foreground":`210 8% 14%`,warning:`40 97% 59%`,"warning-foreground":`210 8% 14%`,destructive:`356.95 95.91% 57.73%`,"destructive-foreground":`0 0% 100%`,info:`188 78% 41%`,"info-foreground":`0 0% 100%`,contrast:`235 16% 15%`,"contrast-foreground":`255 0% 95%`,border:`220 13.04% 90.98%`,overlay:`0 0% 40%`,muted:`0 0% 54%`,shadow:`240 5.9% 10%`},dark:{background:`235 16% 15%`,foreground:`0 0% 85%`,primary:`210 100% 56%`,"primary-foreground":`0 0% 100%`,secondary:`272 99% 54%`,"secondary-foreground":`0 0% 100%`,accent:`164 76% 46%`,"accent-foreground":`0 0% 100%`,success:`80 61% 50%`,"success-foreground":`210 8% 14%`,warning:`40 97% 59%`,"warning-foreground":`210 8% 14%`,destructive:`1 100% 71%`,"destructive-foreground":`0 0% 100%`,info:`188 78% 41%`,"info-foreground":`0 0% 100%`,contrast:`0 0% 100%`,"contrast-foreground":`210 8% 14%`,muted:`255 0% 54%`,border:`238 17% 25%`,overlay:`0 0% 15%`,shadow:`240 3.7% 15.9%`}}};export{mazUi};
|
package/dist/presets/obsidian.js
CHANGED
|
@@ -1,65 +1 @@
|
|
|
1
|
-
|
|
2
|
-
name: "obsidian",
|
|
3
|
-
foundation: {
|
|
4
|
-
"base-font-size": "14px",
|
|
5
|
-
radius: "0.6rem",
|
|
6
|
-
"border-width": "1px",
|
|
7
|
-
"font-family": "'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
|
|
8
|
-
},
|
|
9
|
-
colors: {
|
|
10
|
-
light: {
|
|
11
|
-
// On reste très sobre même en light mode, légèrement warm
|
|
12
|
-
background: "0 0% 98%",
|
|
13
|
-
foreground: "220 13% 15%",
|
|
14
|
-
primary: "220 100% 60%",
|
|
15
|
-
"primary-foreground": "0 0% 100%",
|
|
16
|
-
contrast: "220 13% 15%",
|
|
17
|
-
"contrast-foreground": "0 0% 100%",
|
|
18
|
-
secondary: "220 13% 90%",
|
|
19
|
-
"secondary-foreground": "220 13% 15%",
|
|
20
|
-
muted: "220 8% 50%",
|
|
21
|
-
accent: "280 100% 65%",
|
|
22
|
-
// une touche violet Linear-esque
|
|
23
|
-
"accent-foreground": "0 0% 100%",
|
|
24
|
-
destructive: "0 75% 55%",
|
|
25
|
-
"destructive-foreground": "0 0% 100%",
|
|
26
|
-
success: "160 60% 40%",
|
|
27
|
-
"success-foreground": "0 0% 100%",
|
|
28
|
-
warning: "40 100% 50%",
|
|
29
|
-
"warning-foreground": "0 0% 100%",
|
|
30
|
-
info: "200 100% 55%",
|
|
31
|
-
"info-foreground": "0 0% 100%",
|
|
32
|
-
border: "220 13% 90%",
|
|
33
|
-
overlay: "220 13% 15%",
|
|
34
|
-
shadow: "220 10% 20%"
|
|
35
|
-
},
|
|
36
|
-
dark: {
|
|
37
|
-
background: "220 13% 10%",
|
|
38
|
-
foreground: "0 0% 95%",
|
|
39
|
-
primary: "220 100% 70%",
|
|
40
|
-
"primary-foreground": "0 0% 10%",
|
|
41
|
-
contrast: "0 0% 100%",
|
|
42
|
-
"contrast-foreground": "220 13% 10%",
|
|
43
|
-
secondary: "220 13% 18%",
|
|
44
|
-
"secondary-foreground": "0 0% 95%",
|
|
45
|
-
muted: "220 8% 60%",
|
|
46
|
-
accent: "280 100% 65%",
|
|
47
|
-
// violet saturé (Linear)
|
|
48
|
-
"accent-foreground": "0 0% 100%",
|
|
49
|
-
destructive: "0 70% 60%",
|
|
50
|
-
"destructive-foreground": "0 0% 100%",
|
|
51
|
-
success: "160 60% 50%",
|
|
52
|
-
"success-foreground": "0 0% 100%",
|
|
53
|
-
warning: "40 100% 55%",
|
|
54
|
-
"warning-foreground": "0 0% 100%",
|
|
55
|
-
info: "200 100% 60%",
|
|
56
|
-
"info-foreground": "0 0% 100%",
|
|
57
|
-
border: "220 13% 20%",
|
|
58
|
-
overlay: "220 13% 10%",
|
|
59
|
-
shadow: "220 10% 5%"
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
export {
|
|
64
|
-
obsidian
|
|
65
|
-
};
|
|
1
|
+
var obsidian={name:`obsidian`,foundation:{"base-font-size":`14px`,radius:`0.6rem`,"border-width":`1px`,"font-family":`'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`},colors:{light:{background:`0 0% 98%`,foreground:`220 13% 15%`,primary:`220 100% 60%`,"primary-foreground":`0 0% 100%`,contrast:`220 13% 15%`,"contrast-foreground":`0 0% 100%`,secondary:`220 13% 90%`,"secondary-foreground":`220 13% 15%`,muted:`220 8% 50%`,accent:`280 100% 65%`,"accent-foreground":`0 0% 100%`,destructive:`0 75% 55%`,"destructive-foreground":`0 0% 100%`,success:`160 60% 40%`,"success-foreground":`0 0% 100%`,warning:`40 100% 50%`,"warning-foreground":`0 0% 100%`,info:`200 100% 55%`,"info-foreground":`0 0% 100%`,border:`220 13% 90%`,overlay:`220 13% 15%`,shadow:`220 10% 20%`},dark:{background:`220 13% 10%`,foreground:`0 0% 95%`,primary:`220 100% 70%`,"primary-foreground":`0 0% 10%`,contrast:`0 0% 100%`,"contrast-foreground":`220 13% 10%`,secondary:`220 13% 18%`,"secondary-foreground":`0 0% 95%`,muted:`220 8% 60%`,accent:`280 100% 65%`,"accent-foreground":`0 0% 100%`,destructive:`0 70% 60%`,"destructive-foreground":`0 0% 100%`,success:`160 60% 50%`,"success-foreground":`0 0% 100%`,warning:`40 100% 55%`,"warning-foreground":`0 0% 100%`,info:`200 100% 60%`,"info-foreground":`0 0% 100%`,border:`220 13% 20%`,overlay:`220 13% 10%`,shadow:`220 10% 5%`}}};export{obsidian};
|
package/dist/presets/ocean.js
CHANGED
|
@@ -1,63 +1 @@
|
|
|
1
|
-
|
|
2
|
-
name: "ocean",
|
|
3
|
-
foundation: {
|
|
4
|
-
"base-font-size": "16px",
|
|
5
|
-
radius: "1rem",
|
|
6
|
-
"border-width": "0.125rem",
|
|
7
|
-
"font-family": "'Poppins', 'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
|
|
8
|
-
},
|
|
9
|
-
colors: {
|
|
10
|
-
light: {
|
|
11
|
-
background: "200 40% 98%",
|
|
12
|
-
foreground: "210 20% 12%",
|
|
13
|
-
primary: "195 60% 45%",
|
|
14
|
-
"primary-foreground": "0 0% 100%",
|
|
15
|
-
contrast: "210 20% 12%",
|
|
16
|
-
"contrast-foreground": "200 40% 98%",
|
|
17
|
-
secondary: "180 35% 92%",
|
|
18
|
-
"secondary-foreground": "210 20% 12%",
|
|
19
|
-
muted: "200 15% 55%",
|
|
20
|
-
accent: "25 60% 70%",
|
|
21
|
-
// plus doux, légèrement pêche pastel
|
|
22
|
-
"accent-foreground": "210 20% 12%",
|
|
23
|
-
destructive: "5 65% 50%",
|
|
24
|
-
"destructive-foreground": "0 0% 100%",
|
|
25
|
-
success: "160 50% 38%",
|
|
26
|
-
"success-foreground": "0 0% 100%",
|
|
27
|
-
warning: "35 60% 55%",
|
|
28
|
-
"warning-foreground": "210 20% 12%",
|
|
29
|
-
info: "190 60% 50%",
|
|
30
|
-
"info-foreground": "0 0% 100%",
|
|
31
|
-
border: "180 25% 85%",
|
|
32
|
-
overlay: "210 20% 12%",
|
|
33
|
-
shadow: "195 20% 25%"
|
|
34
|
-
},
|
|
35
|
-
dark: {
|
|
36
|
-
background: "210 20% 10%",
|
|
37
|
-
foreground: "180 20% 92%",
|
|
38
|
-
primary: "180 60% 50%",
|
|
39
|
-
"primary-foreground": "210 20% 10%",
|
|
40
|
-
contrast: "180 20% 92%",
|
|
41
|
-
"contrast-foreground": "210 20% 10%",
|
|
42
|
-
secondary: "200 30% 18%",
|
|
43
|
-
"secondary-foreground": "180 20% 92%",
|
|
44
|
-
muted: "200 10% 60%",
|
|
45
|
-
accent: "25 50% 65%",
|
|
46
|
-
"accent-foreground": "210 20% 10%",
|
|
47
|
-
destructive: "5 60% 55%",
|
|
48
|
-
"destructive-foreground": "0 0% 100%",
|
|
49
|
-
success: "160 45% 40%",
|
|
50
|
-
"success-foreground": "0 0% 100%",
|
|
51
|
-
warning: "35 55% 55%",
|
|
52
|
-
"warning-foreground": "210 20% 10%",
|
|
53
|
-
info: "190 50% 55%",
|
|
54
|
-
"info-foreground": "0 0% 100%",
|
|
55
|
-
border: "200 20% 25%",
|
|
56
|
-
overlay: "210 20% 10%",
|
|
57
|
-
shadow: "195 10% 5%"
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
export {
|
|
62
|
-
ocean
|
|
63
|
-
};
|
|
1
|
+
var ocean={name:`ocean`,foundation:{"base-font-size":`16px`,radius:`1rem`,"border-width":`0.125rem`,"font-family":`'Poppins', 'Inter', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`},colors:{light:{background:`200 40% 98%`,foreground:`210 20% 12%`,primary:`195 60% 45%`,"primary-foreground":`0 0% 100%`,contrast:`210 20% 12%`,"contrast-foreground":`200 40% 98%`,secondary:`180 35% 92%`,"secondary-foreground":`210 20% 12%`,muted:`200 15% 55%`,accent:`25 60% 70%`,"accent-foreground":`210 20% 12%`,destructive:`5 65% 50%`,"destructive-foreground":`0 0% 100%`,success:`160 50% 38%`,"success-foreground":`0 0% 100%`,warning:`35 60% 55%`,"warning-foreground":`210 20% 12%`,info:`190 60% 50%`,"info-foreground":`0 0% 100%`,border:`180 25% 85%`,overlay:`210 20% 12%`,shadow:`195 20% 25%`},dark:{background:`210 20% 10%`,foreground:`180 20% 92%`,primary:`180 60% 50%`,"primary-foreground":`210 20% 10%`,contrast:`180 20% 92%`,"contrast-foreground":`210 20% 10%`,secondary:`200 30% 18%`,"secondary-foreground":`180 20% 92%`,muted:`200 10% 60%`,accent:`25 50% 65%`,"accent-foreground":`210 20% 10%`,destructive:`5 60% 55%`,"destructive-foreground":`0 0% 100%`,success:`160 45% 40%`,"success-foreground":`0 0% 100%`,warning:`35 55% 55%`,"warning-foreground":`210 20% 10%`,info:`190 50% 55%`,"info-foreground":`0 0% 100%`,border:`200 20% 25%`,overlay:`210 20% 10%`,shadow:`195 10% 5%`}}};export{ocean};
|
package/dist/presets/pristine.js
CHANGED
|
@@ -1,62 +1 @@
|
|
|
1
|
-
|
|
2
|
-
name: "pristine",
|
|
3
|
-
foundation: {
|
|
4
|
-
"base-font-size": "14px",
|
|
5
|
-
radius: "0.6rem",
|
|
6
|
-
"border-width": "1px",
|
|
7
|
-
"font-family": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif"
|
|
8
|
-
},
|
|
9
|
-
colors: {
|
|
10
|
-
light: {
|
|
11
|
-
background: "0 0% 99%",
|
|
12
|
-
foreground: "0 0% 10%",
|
|
13
|
-
primary: "220 10% 15%",
|
|
14
|
-
"primary-foreground": "0 0% 100%",
|
|
15
|
-
contrast: "0 0% 15%",
|
|
16
|
-
"contrast-foreground": "0 0% 95%",
|
|
17
|
-
secondary: "220 10% 92%",
|
|
18
|
-
"secondary-foreground": "0 0% 10%",
|
|
19
|
-
muted: "0 0% 60%",
|
|
20
|
-
accent: "210 15% 85%",
|
|
21
|
-
"accent-foreground": "0 0% 10%",
|
|
22
|
-
destructive: "0 70% 50%",
|
|
23
|
-
"destructive-foreground": "0 0% 100%",
|
|
24
|
-
success: "140 40% 45%",
|
|
25
|
-
"success-foreground": "0 0% 100%",
|
|
26
|
-
warning: "35 80% 55%",
|
|
27
|
-
"warning-foreground": "0 0% 10%",
|
|
28
|
-
info: "200 80% 50%",
|
|
29
|
-
"info-foreground": "0 0% 100%",
|
|
30
|
-
border: "220 10% 92%",
|
|
31
|
-
overlay: "0 0% 10%",
|
|
32
|
-
shadow: "0 0% 0%"
|
|
33
|
-
},
|
|
34
|
-
dark: {
|
|
35
|
-
background: "0 0% 10%",
|
|
36
|
-
foreground: "0 0% 95%",
|
|
37
|
-
primary: "0 0% 95%",
|
|
38
|
-
"primary-foreground": "0 0% 10%",
|
|
39
|
-
contrast: "220 10% 92%",
|
|
40
|
-
"contrast-foreground": "0 0% 10%",
|
|
41
|
-
secondary: "0 0% 18%",
|
|
42
|
-
"secondary-foreground": "0 0% 95%",
|
|
43
|
-
muted: "0 0% 60%",
|
|
44
|
-
accent: "210 15% 25%",
|
|
45
|
-
"accent-foreground": "0 0% 95%",
|
|
46
|
-
destructive: "0 70% 55%",
|
|
47
|
-
"destructive-foreground": "0 0% 100%",
|
|
48
|
-
success: "140 40% 45%",
|
|
49
|
-
"success-foreground": "0 0% 100%",
|
|
50
|
-
warning: "35 80% 55%",
|
|
51
|
-
"warning-foreground": "0 0% 10%",
|
|
52
|
-
info: "200 80% 55%",
|
|
53
|
-
"info-foreground": "0 0% 100%",
|
|
54
|
-
border: "0 0% 18%",
|
|
55
|
-
overlay: "0 0% 10%",
|
|
56
|
-
shadow: "0 0% 0%"
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
export {
|
|
61
|
-
pristine
|
|
62
|
-
};
|
|
1
|
+
var pristine={name:`pristine`,foundation:{"base-font-size":`14px`,radius:`0.6rem`,"border-width":`1px`,"font-family":`-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`},colors:{light:{background:`0 0% 99%`,foreground:`0 0% 10%`,primary:`220 10% 15%`,"primary-foreground":`0 0% 100%`,contrast:`0 0% 15%`,"contrast-foreground":`0 0% 95%`,secondary:`220 10% 92%`,"secondary-foreground":`0 0% 10%`,muted:`0 0% 60%`,accent:`210 15% 85%`,"accent-foreground":`0 0% 10%`,destructive:`0 70% 50%`,"destructive-foreground":`0 0% 100%`,success:`140 40% 45%`,"success-foreground":`0 0% 100%`,warning:`35 80% 55%`,"warning-foreground":`0 0% 10%`,info:`200 80% 50%`,"info-foreground":`0 0% 100%`,border:`220 10% 92%`,overlay:`0 0% 10%`,shadow:`0 0% 0%`},dark:{background:`0 0% 10%`,foreground:`0 0% 95%`,primary:`0 0% 95%`,"primary-foreground":`0 0% 10%`,contrast:`220 10% 92%`,"contrast-foreground":`0 0% 10%`,secondary:`0 0% 18%`,"secondary-foreground":`0 0% 95%`,muted:`0 0% 60%`,accent:`210 15% 25%`,"accent-foreground":`0 0% 95%`,destructive:`0 70% 55%`,"destructive-foreground":`0 0% 100%`,success:`140 40% 45%`,"success-foreground":`0 0% 100%`,warning:`35 80% 55%`,"warning-foreground":`0 0% 10%`,info:`200 80% 55%`,"info-foreground":`0 0% 100%`,border:`0 0% 18%`,overlay:`0 0% 10%`,shadow:`0 0% 0%`}}};export{pristine};
|
|
@@ -1,68 +1 @@
|
|
|
1
|
-
function parseHSL(hsl) {
|
|
2
|
-
const match = hsl.match(/^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/);
|
|
3
|
-
if (!match)
|
|
4
|
-
throw new Error(`Invalid HSL format: ${hsl}`);
|
|
5
|
-
return {
|
|
6
|
-
h: Number.parseFloat(match[1]),
|
|
7
|
-
s: Number.parseFloat(match[2]),
|
|
8
|
-
l: Number.parseFloat(match[3])
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
function formatHSL(h, s, l) {
|
|
12
|
-
const roundedH = Math.round(h * 10) / 10, roundedS = Math.round(s * 10) / 10, roundedL = Math.round(l * 10) / 10;
|
|
13
|
-
return `${roundedH} ${roundedS}% ${roundedL}%`;
|
|
14
|
-
}
|
|
15
|
-
const LUMINOSITY_OFFSETS = {
|
|
16
|
-
50: 37.5,
|
|
17
|
-
100: 30,
|
|
18
|
-
200: 22.5,
|
|
19
|
-
300: 15,
|
|
20
|
-
400: 7.5,
|
|
21
|
-
500: 0,
|
|
22
|
-
600: -7.5,
|
|
23
|
-
700: -15,
|
|
24
|
-
800: -22.5,
|
|
25
|
-
900: -30,
|
|
26
|
-
950: -37.5
|
|
27
|
-
};
|
|
28
|
-
function calculateSaturationMultiplier(baseVariant, targetVariant, baseSaturation) {
|
|
29
|
-
if (targetVariant === baseVariant)
|
|
30
|
-
return 1;
|
|
31
|
-
const saturationFactor = Math.min(baseSaturation / 100, 1), variantDiff = Math.abs(targetVariant - baseVariant);
|
|
32
|
-
if (targetVariant < baseVariant) {
|
|
33
|
-
const reduction = variantDiff / 500 * 0.25 * saturationFactor;
|
|
34
|
-
return Math.max(0.3, 1 - reduction);
|
|
35
|
-
} else {
|
|
36
|
-
const increase = variantDiff / 400 * 0.15 * saturationFactor;
|
|
37
|
-
return Math.min(1.3, 1 + increase);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
function generateColorScale(baseColor) {
|
|
41
|
-
const { h, s, l } = parseHSL(baseColor), baseVariant = 500, baseLuminosity = l, variants = Object.keys(LUMINOSITY_OFFSETS).map(Number), scale = {};
|
|
42
|
-
return variants.forEach((variant) => {
|
|
43
|
-
if (variant === baseVariant)
|
|
44
|
-
scale[variant] = formatHSL(h, s, l);
|
|
45
|
-
else {
|
|
46
|
-
const isUnderBase = variant < baseVariant, isOverBase = variant > baseVariant, luminosityOffset = LUMINOSITY_OFFSETS[variant];
|
|
47
|
-
let targetLuminosity;
|
|
48
|
-
isUnderBase && l >= 100 ? targetLuminosity = baseLuminosity : targetLuminosity = baseLuminosity + luminosityOffset, isOverBase && l <= 0 && (targetLuminosity = 0), targetLuminosity = Math.min(100, Math.max(0, targetLuminosity));
|
|
49
|
-
const saturationMultiplier = calculateSaturationMultiplier(baseVariant, variant, s), adjustedSaturation = Math.min(100, Math.max(5, s * saturationMultiplier));
|
|
50
|
-
scale[variant] = formatHSL(h, adjustedSaturation, targetLuminosity);
|
|
51
|
-
}
|
|
52
|
-
}), scale;
|
|
53
|
-
}
|
|
54
|
-
function getContrastColor(baseColor) {
|
|
55
|
-
const { l } = parseHSL(baseColor);
|
|
56
|
-
return l > 50 ? "0 0% 0%" : "0 0% 100%";
|
|
57
|
-
}
|
|
58
|
-
function adjustColorLightness(baseColor, adjustment) {
|
|
59
|
-
const { h, s, l } = parseHSL(baseColor), newL = Math.max(0, Math.min(100, l + adjustment));
|
|
60
|
-
return formatHSL(h, s, newL);
|
|
61
|
-
}
|
|
62
|
-
export {
|
|
63
|
-
adjustColorLightness,
|
|
64
|
-
formatHSL,
|
|
65
|
-
generateColorScale,
|
|
66
|
-
getContrastColor,
|
|
67
|
-
parseHSL
|
|
68
|
-
};
|
|
1
|
+
function parseHSL(hsl){let match=hsl.match(/^(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%$/);if(!match)throw Error(`Invalid HSL format: ${hsl}`);return{h:Number.parseFloat(match[1]),s:Number.parseFloat(match[2]),l:Number.parseFloat(match[3])}}function formatHSL(h,s,l){return`${Math.round(h*10)/10} ${Math.round(s*10)/10}% ${Math.round(l*10)/10}%`}var LUMINOSITY_OFFSETS={50:37.5,100:30,200:22.5,300:15,400:7.5,500:0,600:-7.5,700:-15,800:-22.5,900:-30,950:-37.5};function calculateSaturationMultiplier(baseVariant,targetVariant,baseSaturation){if(targetVariant===baseVariant)return 1;let saturationFactor=Math.min(baseSaturation/100,1);let variantDiff=Math.abs(targetVariant-baseVariant);if(targetVariant<baseVariant){let reduction=variantDiff/500*.25*saturationFactor;return Math.max(.3,1-reduction)}else{let increase=variantDiff/400*.15*saturationFactor;return Math.min(1.3,1+increase)}}function generateColorScale(baseColor){let{h,s,l}=parseHSL(baseColor);let baseLuminosity=l;let variants=Object.keys(LUMINOSITY_OFFSETS).map(Number);let scale={};return variants.forEach(variant=>{if(variant===500)scale[variant]=formatHSL(h,s,l);else{let isUnderBase=variant<500;let isOverBase=variant>500;let luminosityOffset=LUMINOSITY_OFFSETS[variant];let targetLuminosity;targetLuminosity=isUnderBase&&l>=100?baseLuminosity:baseLuminosity+luminosityOffset,isOverBase&&l<=0&&(targetLuminosity=0),targetLuminosity=Math.min(100,Math.max(0,targetLuminosity));let saturationMultiplier=calculateSaturationMultiplier(500,variant,s);scale[variant]=formatHSL(h,Math.min(100,Math.max(5,s*saturationMultiplier)),targetLuminosity)}}),scale}function getContrastColor(baseColor){let{l}=parseHSL(baseColor);return l>50?`0 0% 0%`:`0 0% 100%`}function adjustColorLightness(baseColor,adjustment){let{h,s,l}=parseHSL(baseColor);return formatHSL(h,s,Math.max(0,Math.min(100,l+adjustment)))}export{adjustColorLightness,formatHSL,generateColorScale,getContrastColor,parseHSL};
|
|
@@ -1,14 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
function getCookie(key) {
|
|
3
|
-
if (isServer())
|
|
4
|
-
return null;
|
|
5
|
-
const cookie = document.cookie.split(";").find((c) => c.trim().startsWith(`${key}=`));
|
|
6
|
-
return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
|
|
7
|
-
}
|
|
8
|
-
function setCookie(key, value) {
|
|
9
|
-
isServer() || (document.cookie = `${key}=${encodeURIComponent(value)}; path=/; max-age=${3600 * 24 * 365}; SameSite=Lax`);
|
|
10
|
-
}
|
|
11
|
-
export {
|
|
12
|
-
getCookie,
|
|
13
|
-
setCookie
|
|
14
|
-
};
|
|
1
|
+
import{isServer}from"@maz-ui/utils/helpers/isServer";function getCookie(key){if(isServer())return null;let cookie=document.cookie.split(`;`).find(c=>c.trim().startsWith(`${key}=`));return cookie?decodeURIComponent(cookie.split(`=`)[1]):null}function setCookie(key,value){isServer()||(document.cookie=`${key}=${encodeURIComponent(value)}; path=/; max-age=${3600*24*365}; SameSite=Lax`)}export{getCookie,setCookie};
|
|
@@ -1,181 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
"foreground",
|
|
6
|
-
"primary",
|
|
7
|
-
"primary-foreground",
|
|
8
|
-
"secondary",
|
|
9
|
-
"secondary-foreground",
|
|
10
|
-
"accent",
|
|
11
|
-
"accent-foreground",
|
|
12
|
-
"destructive",
|
|
13
|
-
"destructive-foreground",
|
|
14
|
-
"success",
|
|
15
|
-
"success-foreground",
|
|
16
|
-
"warning",
|
|
17
|
-
"warning-foreground",
|
|
18
|
-
"info",
|
|
19
|
-
"info-foreground",
|
|
20
|
-
"contrast",
|
|
21
|
-
"contrast-foreground",
|
|
22
|
-
"muted",
|
|
23
|
-
"shadow",
|
|
24
|
-
"border"
|
|
25
|
-
], DEFAULT_CRITICAL_FOUNDATION = [
|
|
26
|
-
"radius",
|
|
27
|
-
"font-family",
|
|
28
|
-
"base-font-size",
|
|
29
|
-
"border-width"
|
|
30
|
-
], scaleColors = ["primary", "secondary", "accent", "destructive", "success", "warning", "info", "contrast", "background", "foreground", "border", "muted", "overlay", "shadow"];
|
|
31
|
-
function generateCSS(preset, options = {
|
|
32
|
-
onlyCritical: !1,
|
|
33
|
-
mode: "both",
|
|
34
|
-
darkSelectorStrategy: "class",
|
|
35
|
-
darkClass: "dark"
|
|
36
|
-
}) {
|
|
37
|
-
const {
|
|
38
|
-
onlyCritical = !1,
|
|
39
|
-
criticalColors = DEFAULT_CRITICAL_COLORS,
|
|
40
|
-
criticalFoundation = DEFAULT_CRITICAL_FOUNDATION,
|
|
41
|
-
mode,
|
|
42
|
-
darkSelectorStrategy,
|
|
43
|
-
prefix = "maz",
|
|
44
|
-
includeColorScales = !0,
|
|
45
|
-
darkClass = "dark"
|
|
46
|
-
} = options;
|
|
47
|
-
let css = `@layer maz-ui-theme {
|
|
48
|
-
`;
|
|
49
|
-
return (mode === "light" || mode === "both") && (css += generateLightThemeVariables(preset, {
|
|
50
|
-
onlyCritical,
|
|
51
|
-
criticalColors,
|
|
52
|
-
criticalFoundation,
|
|
53
|
-
prefix,
|
|
54
|
-
includeColorScales
|
|
55
|
-
})), (mode === "dark" || mode === "both") && (css += generateDarkThemeVariables(preset, {
|
|
56
|
-
onlyCritical,
|
|
57
|
-
criticalColors,
|
|
58
|
-
criticalFoundation,
|
|
59
|
-
mode,
|
|
60
|
-
darkSelectorStrategy,
|
|
61
|
-
prefix,
|
|
62
|
-
includeColorScales,
|
|
63
|
-
darkClass
|
|
64
|
-
})), css += `}
|
|
65
|
-
`, css;
|
|
66
|
-
}
|
|
67
|
-
function generateLightThemeVariables(preset, options) {
|
|
68
|
-
const { onlyCritical, criticalColors, criticalFoundation, prefix, includeColorScales } = options, lightColors = onlyCritical ? extractCriticalVariables(preset.colors.light, criticalColors) : preset.colors.light, lightFoundation = onlyCritical ? extractCriticalFoundation(preset.foundation, criticalFoundation) : preset.foundation;
|
|
69
|
-
return generateVariablesBlock({
|
|
70
|
-
selector: ":root",
|
|
71
|
-
colors: lightColors,
|
|
72
|
-
foundation: lightFoundation,
|
|
73
|
-
prefix,
|
|
74
|
-
includeScales: !onlyCritical && includeColorScales,
|
|
75
|
-
preset: onlyCritical ? void 0 : preset
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
function generateDarkThemeVariables(preset, options) {
|
|
79
|
-
const { onlyCritical, criticalColors, criticalFoundation, mode, darkSelectorStrategy, prefix, includeColorScales, darkClass } = options, darkColors = onlyCritical ? extractCriticalVariables(preset.colors.dark, criticalColors) : preset.colors.dark, darkFoundation = getDarkFoundation(onlyCritical, mode, preset.foundation, criticalFoundation);
|
|
80
|
-
return generateVariablesBlock({
|
|
81
|
-
selector: darkSelectorStrategy === "media" ? ":root" : `.${darkClass}`,
|
|
82
|
-
mediaQuery: darkSelectorStrategy === "media" ? "@media (prefers-color-scheme: dark)" : void 0,
|
|
83
|
-
colors: darkColors,
|
|
84
|
-
foundation: darkFoundation,
|
|
85
|
-
prefix,
|
|
86
|
-
includeScales: !onlyCritical && includeColorScales,
|
|
87
|
-
preset: onlyCritical ? void 0 : preset,
|
|
88
|
-
isDark: !0
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
function getDarkFoundation(onlyCritical, mode, foundation, criticalFoundation) {
|
|
92
|
-
return onlyCritical ? extractCriticalFoundation(foundation, criticalFoundation) : mode === "dark" ? foundation : void 0;
|
|
93
|
-
}
|
|
94
|
-
function extractCriticalVariables(colors, criticalKeys) {
|
|
95
|
-
return Object.fromEntries(
|
|
96
|
-
criticalKeys.filter((key) => colors[key]).map((key) => [key, colors[key]])
|
|
97
|
-
);
|
|
98
|
-
}
|
|
99
|
-
function extractCriticalFoundation(foundation, criticalKeys) {
|
|
100
|
-
return foundation ? Object.fromEntries(
|
|
101
|
-
criticalKeys.filter((key) => foundation[key]).map((key) => [key, foundation[key]])
|
|
102
|
-
) : {};
|
|
103
|
-
}
|
|
104
|
-
function generateVariablesBlock({
|
|
105
|
-
selector,
|
|
106
|
-
mediaQuery,
|
|
107
|
-
colors,
|
|
108
|
-
foundation,
|
|
109
|
-
prefix,
|
|
110
|
-
includeScales = !1,
|
|
111
|
-
preset,
|
|
112
|
-
isDark = !1
|
|
113
|
-
}) {
|
|
114
|
-
const variables = [];
|
|
115
|
-
if (colors && Object.entries(colors).forEach(([key, value]) => {
|
|
116
|
-
value && variables.push(` --${prefix}-${key}: ${value};`);
|
|
117
|
-
}), foundation && Object.entries(foundation).forEach(([key, value]) => {
|
|
118
|
-
value && variables.push(` --${prefix}-${key}: ${value};`);
|
|
119
|
-
}), includeScales && preset) {
|
|
120
|
-
const sourceColors = isDark ? preset.colors.dark : preset.colors.light, colorScales = generateAllColorScales(sourceColors, prefix);
|
|
121
|
-
variables.push(...colorScales);
|
|
122
|
-
}
|
|
123
|
-
const content = variables.join(`
|
|
124
|
-
`);
|
|
125
|
-
return mediaQuery ? `
|
|
126
|
-
${mediaQuery} {
|
|
127
|
-
${selector} {
|
|
128
|
-
${content.replace(/^/gm, " ")}
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
` : `
|
|
132
|
-
${selector} {
|
|
133
|
-
${content}
|
|
134
|
-
}
|
|
135
|
-
`;
|
|
136
|
-
}
|
|
137
|
-
function generateAllColorScales(colors, prefix) {
|
|
138
|
-
const colorScales = [];
|
|
139
|
-
return scaleColors.forEach((colorName) => {
|
|
140
|
-
const baseColor = colors[colorName];
|
|
141
|
-
if (baseColor) {
|
|
142
|
-
const scale = generateColorScale(baseColor);
|
|
143
|
-
Object.entries(scale).forEach(([scaleKey, scaleValue]) => {
|
|
144
|
-
colorScales.push(` --${prefix}-${colorName}-${scaleKey}: ${scaleValue};`);
|
|
145
|
-
});
|
|
146
|
-
}
|
|
147
|
-
}), colorScales;
|
|
148
|
-
}
|
|
149
|
-
const CSS_ID = "maz-theme-css";
|
|
150
|
-
function injectCSS(id = CSS_ID, css) {
|
|
151
|
-
if (isServer())
|
|
152
|
-
return;
|
|
153
|
-
const styleElements = document.querySelectorAll(`#${id}`);
|
|
154
|
-
if (!styleElements || styleElements.length === 0) {
|
|
155
|
-
const element = document.createElement("style");
|
|
156
|
-
element.id = id, document.head.appendChild(element), element.textContent = css;
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
159
|
-
if (styleElements.length === 1) {
|
|
160
|
-
styleElements[0].textContent = css;
|
|
161
|
-
return;
|
|
162
|
-
}
|
|
163
|
-
if (styleElements.length > 1) {
|
|
164
|
-
for (let i = 0; i < styleElements.length - 1; i++)
|
|
165
|
-
styleElements[i].remove();
|
|
166
|
-
styleElements[styleElements.length - 1].textContent = css;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
function removeCSS(id = CSS_ID) {
|
|
170
|
-
if (isServer())
|
|
171
|
-
return;
|
|
172
|
-
const styleElements = document.querySelectorAll(`#${id}`);
|
|
173
|
-
for (const styleElement of styleElements)
|
|
174
|
-
styleElement && styleElement.remove();
|
|
175
|
-
}
|
|
176
|
-
export {
|
|
177
|
-
CSS_ID,
|
|
178
|
-
generateCSS,
|
|
179
|
-
injectCSS,
|
|
180
|
-
removeCSS
|
|
181
|
-
};
|
|
1
|
+
import{generateColorScale}from"./color-utils.js";import{isServer}from"@maz-ui/utils/helpers/isServer";var DEFAULT_CRITICAL_COLORS=[`background`,`foreground`,`primary`,`primary-foreground`,`secondary`,`secondary-foreground`,`accent`,`accent-foreground`,`destructive`,`destructive-foreground`,`success`,`success-foreground`,`warning`,`warning-foreground`,`info`,`info-foreground`,`contrast`,`contrast-foreground`,`muted`,`shadow`,`border`];var DEFAULT_CRITICAL_FOUNDATION=[`radius`,`font-family`,`base-font-size`,`border-width`];var scaleColors=[`primary`,`secondary`,`accent`,`destructive`,`success`,`warning`,`info`,`contrast`,`background`,`foreground`,`border`,`muted`,`overlay`,`shadow`];function generateCSS(preset,options={onlyCritical:!1,mode:`both`,darkSelectorStrategy:`class`,darkClass:`dark`}){let{onlyCritical=!1,criticalColors=DEFAULT_CRITICAL_COLORS,criticalFoundation=DEFAULT_CRITICAL_FOUNDATION,mode,darkSelectorStrategy,prefix=`maz`,includeColorScales=!0,darkClass=`dark`}=options;let css=`@layer maz-ui-theme {
|
|
2
|
+
`;return(mode===`light`||mode===`both`)&&(css+=generateLightThemeVariables(preset,{onlyCritical,criticalColors,criticalFoundation,prefix,includeColorScales})),(mode===`dark`||mode===`both`)&&(css+=generateDarkThemeVariables(preset,{onlyCritical,criticalColors,criticalFoundation,mode,darkSelectorStrategy,prefix,includeColorScales,darkClass})),css+=`}
|
|
3
|
+
`,css}function generateLightThemeVariables(preset,options){let{onlyCritical,criticalColors,criticalFoundation,prefix,includeColorScales}=options;return generateVariablesBlock({selector:`:root`,colors:onlyCritical?extractCriticalVariables(preset.colors.light,criticalColors):preset.colors.light,foundation:onlyCritical?extractCriticalFoundation(preset.foundation,criticalFoundation):preset.foundation,prefix,includeScales:!onlyCritical&&includeColorScales,preset:onlyCritical?void 0:preset})}function generateDarkThemeVariables(preset,options){let{onlyCritical,criticalColors,criticalFoundation,mode,darkSelectorStrategy,prefix,includeColorScales,darkClass}=options;let darkColors=onlyCritical?extractCriticalVariables(preset.colors.dark,criticalColors):preset.colors.dark;let darkFoundation=getDarkFoundation(onlyCritical,mode,preset.foundation,criticalFoundation);return generateVariablesBlock({selector:darkSelectorStrategy===`media`?`:root`:`.${darkClass}`,mediaQuery:darkSelectorStrategy===`media`?`@media (prefers-color-scheme: dark)`:void 0,colors:darkColors,foundation:darkFoundation,prefix,includeScales:!onlyCritical&&includeColorScales,preset:onlyCritical?void 0:preset,isDark:!0})}function getDarkFoundation(onlyCritical,mode,foundation,criticalFoundation){return onlyCritical?extractCriticalFoundation(foundation,criticalFoundation):mode===`dark`?foundation:void 0}function extractCriticalVariables(colors,criticalKeys){return Object.fromEntries(criticalKeys.filter(key=>colors[key]).map(key=>[key,colors[key]]))}function extractCriticalFoundation(foundation,criticalKeys){return foundation?Object.fromEntries(criticalKeys.filter(key=>foundation[key]).map(key=>[key,foundation[key]])):{}}function generateVariablesBlock({selector,mediaQuery,colors,foundation,prefix,includeScales=!1,preset,isDark=!1}){let variables=[];if(colors&&Object.entries(colors).forEach(([key,value])=>{value&&variables.push(` --${prefix}-${key}: ${value};`)}),foundation&&Object.entries(foundation).forEach(([key,value])=>{value&&variables.push(` --${prefix}-${key}: ${value};`)}),includeScales&&preset){let colorScales=generateAllColorScales(isDark?preset.colors.dark:preset.colors.light,prefix);variables.push(...colorScales)}let content=variables.join(`
|
|
4
|
+
`);return mediaQuery?`\n ${mediaQuery} {\n ${selector} {\n${content.replace(/^/gm,` `)}\n }\n }\n`:`\n ${selector} {\n${content}\n }\n`}function generateAllColorScales(colors,prefix){let colorScales=[];return scaleColors.forEach(colorName=>{let baseColor=colors[colorName];if(baseColor){let scale=generateColorScale(baseColor);Object.entries(scale).forEach(([scaleKey,scaleValue])=>{colorScales.push(` --${prefix}-${colorName}-${scaleKey}: ${scaleValue};`)})}}),colorScales}var CSS_ID=`maz-theme-css`;function injectCSS(id=CSS_ID,css){if(isServer())return;let styleElements=document.querySelectorAll(`#${id}`);if(!styleElements||styleElements.length===0){let element=document.createElement(`style`);element.id=id,document.head.appendChild(element),element.textContent=css;return}if(styleElements.length===1){styleElements[0].textContent=css;return}if(styleElements.length>1){for(let i=0;i<styleElements.length-1;i++)styleElements[i].remove();styleElements[styleElements.length-1].textContent=css}}function removeCSS(id=CSS_ID){if(isServer())return;let styleElements=document.querySelectorAll(`#${id}`);for(let styleElement of styleElements)styleElement&&styleElement.remove()}export{CSS_ID,generateCSS,injectCSS,removeCSS};
|
|
@@ -1,21 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getCookie } from "./cookie-storage.js";
|
|
3
|
-
function getSavedColorMode() {
|
|
4
|
-
const savedMode = getCookie("maz-color-mode");
|
|
5
|
-
if (savedMode && ["light", "dark", "auto"].includes(savedMode))
|
|
6
|
-
return savedMode;
|
|
7
|
-
}
|
|
8
|
-
function getColorMode(colorMode) {
|
|
9
|
-
if (colorMode && ["light", "dark"].includes(colorMode))
|
|
10
|
-
return colorMode;
|
|
11
|
-
const savedMode = getSavedColorMode();
|
|
12
|
-
return savedMode || "auto";
|
|
13
|
-
}
|
|
14
|
-
function getSystemColorMode() {
|
|
15
|
-
return isServer() || typeof globalThis.matchMedia != "function" ? "light" : globalThis.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
16
|
-
}
|
|
17
|
-
export {
|
|
18
|
-
getColorMode,
|
|
19
|
-
getSavedColorMode,
|
|
20
|
-
getSystemColorMode
|
|
21
|
-
};
|
|
1
|
+
import{getCookie}from"./cookie-storage.js";import{isServer}from"@maz-ui/utils/helpers/isServer";function getSavedColorMode(){let savedMode=getCookie(`maz-color-mode`);if(savedMode&&[`light`,`dark`,`auto`].includes(savedMode))return savedMode}function getColorMode(colorMode){return colorMode&&[`light`,`dark`].includes(colorMode)?colorMode:getSavedColorMode()||`auto`}function getSystemColorMode(){return isServer()||typeof globalThis.matchMedia!=`function`?`light`:globalThis.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`}export{getColorMode,getSavedColorMode,getSystemColorMode};
|
package/dist/utils/get-preset.js
CHANGED
|
@@ -1,28 +1 @@
|
|
|
1
|
-
function isPresetObject(preset) {
|
|
2
|
-
return typeof preset == "object" && preset !== null && !!preset.name;
|
|
3
|
-
}
|
|
4
|
-
async function getPreset(preset) {
|
|
5
|
-
if (isPresetObject(preset))
|
|
6
|
-
return preset;
|
|
7
|
-
if (preset === "mazUi" || !preset || preset === "maz-ui") {
|
|
8
|
-
const { mazUi } = await import("../presets/mazUi.js");
|
|
9
|
-
return mazUi;
|
|
10
|
-
}
|
|
11
|
-
if (preset === "ocean") {
|
|
12
|
-
const { ocean } = await import("../presets/ocean.js");
|
|
13
|
-
return ocean;
|
|
14
|
-
}
|
|
15
|
-
if (preset === "pristine") {
|
|
16
|
-
const { pristine } = await import("../presets/pristine.js");
|
|
17
|
-
return pristine;
|
|
18
|
-
}
|
|
19
|
-
if (preset === "obsidian") {
|
|
20
|
-
const { obsidian } = await import("../presets/obsidian.js");
|
|
21
|
-
return obsidian;
|
|
22
|
-
}
|
|
23
|
-
throw new TypeError(`[@maz-ui/themes] Preset ${preset} not found`);
|
|
24
|
-
}
|
|
25
|
-
export {
|
|
26
|
-
getPreset,
|
|
27
|
-
isPresetObject
|
|
28
|
-
};
|
|
1
|
+
function isPresetObject(preset){return typeof preset==`object`&&!!preset&&!!preset.name}async function getPreset(preset){if(isPresetObject(preset))return preset;if(preset===`mazUi`||!preset||preset===`maz-ui`){let{mazUi}=await import(`../presets/mazUi.js`);return mazUi}if(preset===`ocean`){let{ocean}=await import(`../presets/ocean.js`);return ocean}if(preset===`pristine`){let{pristine}=await import(`../presets/pristine.js`);return pristine}if(preset===`obsidian`){let{obsidian}=await import(`../presets/obsidian.js`);return obsidian}throw TypeError(`[@maz-ui/themes] Preset ${preset} not found`)}export{getPreset,isPresetObject};
|
package/dist/utils/index.js
CHANGED
|
@@ -1,33 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { getCookie, setCookie } from "./cookie-storage.js";
|
|
3
|
-
import { CSS_ID, generateCSS, injectCSS, removeCSS } from "./css-generator.js";
|
|
4
|
-
import { getPreset, isPresetObject } from "./get-preset.js";
|
|
5
|
-
import { injectThemeState } from "./inject.js";
|
|
6
|
-
import { injectThemeCSS } from "./inject-theme-css.js";
|
|
7
|
-
import { noTransition } from "./no-transition.js";
|
|
8
|
-
import { deepMerge, mergePresets } from "./preset-merger.js";
|
|
9
|
-
import { defaultOptions, setupTheme } from "./setup-theme.js";
|
|
10
|
-
import { updateDocumentClass } from "./update-document-class.js";
|
|
11
|
-
export {
|
|
12
|
-
CSS_ID,
|
|
13
|
-
adjustColorLightness,
|
|
14
|
-
deepMerge,
|
|
15
|
-
defaultOptions,
|
|
16
|
-
formatHSL,
|
|
17
|
-
generateCSS,
|
|
18
|
-
generateColorScale,
|
|
19
|
-
getContrastColor,
|
|
20
|
-
getCookie,
|
|
21
|
-
getPreset,
|
|
22
|
-
injectCSS,
|
|
23
|
-
injectThemeCSS,
|
|
24
|
-
injectThemeState,
|
|
25
|
-
isPresetObject,
|
|
26
|
-
mergePresets,
|
|
27
|
-
noTransition,
|
|
28
|
-
parseHSL,
|
|
29
|
-
removeCSS,
|
|
30
|
-
setCookie,
|
|
31
|
-
setupTheme,
|
|
32
|
-
updateDocumentClass
|
|
33
|
-
};
|
|
1
|
+
import{adjustColorLightness,formatHSL,generateColorScale,getContrastColor,parseHSL}from"./color-utils.js";import{getCookie,setCookie}from"./cookie-storage.js";import{CSS_ID,generateCSS,injectCSS,removeCSS}from"./css-generator.js";import{getPreset,isPresetObject}from"./get-preset.js";import{injectThemeState}from"./inject.js";import{injectThemeCSS}from"./inject-theme-css.js";import{noTransition}from"./no-transition.js";import{deepMerge,mergePresets}from"./preset-merger.js";import{updateDocumentClass}from"./update-document-class.js";import{defaultOptions,setupTheme}from"./setup-theme.js";export{CSS_ID,adjustColorLightness,deepMerge,defaultOptions,formatHSL,generateCSS,generateColorScale,getContrastColor,getCookie,getPreset,injectCSS,injectThemeCSS,injectThemeState,isPresetObject,mergePresets,noTransition,parseHSL,removeCSS,setCookie,setupTheme,updateDocumentClass};
|
|
@@ -1,29 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { generateCSS, injectCSS, CSS_ID } from "./css-generator.js";
|
|
3
|
-
function injectThemeCSS(finalPreset, config) {
|
|
4
|
-
if (typeof document > "u")
|
|
5
|
-
return;
|
|
6
|
-
const cssOptions = {
|
|
7
|
-
mode: config.mode,
|
|
8
|
-
darkSelectorStrategy: config.darkModeStrategy,
|
|
9
|
-
darkClass: config.darkClass
|
|
10
|
-
};
|
|
11
|
-
if (config.injectCriticalCSS) {
|
|
12
|
-
const criticalCSS = generateCSS(finalPreset, {
|
|
13
|
-
...cssOptions,
|
|
14
|
-
onlyCritical: !0
|
|
15
|
-
});
|
|
16
|
-
injectCSS(CSS_ID, criticalCSS);
|
|
17
|
-
}
|
|
18
|
-
if (!config.injectFullCSS)
|
|
19
|
-
return;
|
|
20
|
-
const fullCSS = generateCSS(finalPreset, cssOptions);
|
|
21
|
-
config.strategy === "runtime" ? injectCSS(CSS_ID, fullCSS) : config.strategy === "hybrid" && (typeof requestIdleCallback < "u" ? requestIdleCallback(() => {
|
|
22
|
-
injectCSS(CSS_ID, fullCSS);
|
|
23
|
-
}, { timeout: 100 }) : nextTick(() => {
|
|
24
|
-
injectCSS(CSS_ID, fullCSS);
|
|
25
|
-
}));
|
|
26
|
-
}
|
|
27
|
-
export {
|
|
28
|
-
injectThemeCSS
|
|
29
|
-
};
|
|
1
|
+
import{CSS_ID,generateCSS,injectCSS}from"./css-generator.js";import{nextTick}from"vue";function injectThemeCSS(finalPreset,config){if(typeof document>`u`)return;let cssOptions={mode:config.mode,darkSelectorStrategy:config.darkModeStrategy,darkClass:config.darkClass};if(config.injectCriticalCSS&&injectCSS(CSS_ID,generateCSS(finalPreset,{...cssOptions,onlyCritical:!0})),!config.injectFullCSS)return;let fullCSS=generateCSS(finalPreset,cssOptions);config.strategy===`runtime`?injectCSS(CSS_ID,fullCSS):config.strategy===`hybrid`&&(typeof requestIdleCallback<`u`?requestIdleCallback(()=>{injectCSS(CSS_ID,fullCSS)},{timeout:100}):nextTick(()=>{injectCSS(CSS_ID,fullCSS)}))}export{injectThemeCSS};
|
package/dist/utils/inject.js
CHANGED
|
@@ -1,11 +1 @@
|
|
|
1
|
-
function injectThemeState({
|
|
2
|
-
app,
|
|
3
|
-
themeState
|
|
4
|
-
}) {
|
|
5
|
-
if (!app)
|
|
6
|
-
throw new Error("[@maz-ui/themes](injectThemeState) No app provided");
|
|
7
|
-
app.provide("mazThemeState", themeState), app.config.globalProperties.$mazThemeState = themeState;
|
|
8
|
-
}
|
|
9
|
-
export {
|
|
10
|
-
injectThemeState
|
|
11
|
-
};
|
|
1
|
+
function injectThemeState({app,themeState}){if(!app)throw Error(`[@maz-ui/themes](injectThemeState) No app provided`);app.provide(`mazThemeState`,themeState),app.config.globalProperties.$mazThemeState=themeState}export{injectThemeState};
|
|
@@ -1,18 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
function noTransition(fn) {
|
|
3
|
-
if (isServer()) {
|
|
4
|
-
fn();
|
|
5
|
-
return;
|
|
6
|
-
}
|
|
7
|
-
const style = document.createElement("style");
|
|
8
|
-
style.textContent = `.no-transitions *,
|
|
1
|
+
import{isServer}from"@maz-ui/utils";function noTransition(fn){if(isServer()){fn();return}let style=document.createElement(`style`);style.textContent=`.no-transitions *,
|
|
9
2
|
.no-transitions *::before,
|
|
10
3
|
.no-transitions *::after {
|
|
11
4
|
transition-property: transform, opacity, scale, rotate, translate !important;
|
|
12
|
-
}`,
|
|
13
|
-
document.documentElement.classList.remove("no-transitions"), style.remove();
|
|
14
|
-
}, 500);
|
|
15
|
-
}
|
|
16
|
-
export {
|
|
17
|
-
noTransition
|
|
18
|
-
};
|
|
5
|
+
}`,document.head.appendChild(style),document.documentElement.classList.add(`no-transitions`),fn(),setTimeout(()=>{document.documentElement.classList.remove(`no-transitions`),style.remove()},500)}export{noTransition};
|
|
@@ -1,34 +1 @@
|
|
|
1
|
-
function mergePresets(base, overrides) {
|
|
2
|
-
return {
|
|
3
|
-
name: overrides.name || base.name,
|
|
4
|
-
foundation: {
|
|
5
|
-
...base.foundation,
|
|
6
|
-
...overrides.foundation
|
|
7
|
-
},
|
|
8
|
-
colors: {
|
|
9
|
-
light: mergeColors(base.colors.light, overrides.colors?.light),
|
|
10
|
-
dark: mergeColors(base.colors.dark, overrides.colors?.dark)
|
|
11
|
-
}
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
function mergeColors(base, overrides) {
|
|
15
|
-
return overrides ? {
|
|
16
|
-
...base,
|
|
17
|
-
...overrides
|
|
18
|
-
} : base;
|
|
19
|
-
}
|
|
20
|
-
function deepMerge(target, source) {
|
|
21
|
-
const result = { ...target };
|
|
22
|
-
for (const key in source) {
|
|
23
|
-
const sourceValue = source[key], targetValue = result[key];
|
|
24
|
-
sourceValue !== void 0 && (isObject(sourceValue) && isObject(targetValue) ? result[key] = deepMerge(targetValue, sourceValue) : result[key] = sourceValue);
|
|
25
|
-
}
|
|
26
|
-
return result;
|
|
27
|
-
}
|
|
28
|
-
function isObject(value) {
|
|
29
|
-
return value !== null && typeof value == "object" && !Array.isArray(value);
|
|
30
|
-
}
|
|
31
|
-
export {
|
|
32
|
-
deepMerge,
|
|
33
|
-
mergePresets
|
|
34
|
-
};
|
|
1
|
+
function mergePresets(base,overrides){return{name:overrides.name||base.name,foundation:{...base.foundation,...overrides.foundation},colors:{light:mergeColors(base.colors.light,overrides.colors?.light),dark:mergeColors(base.colors.dark,overrides.colors?.dark)}}}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&&(isObject(sourceValue)&&isObject(targetValue)?result[key]=deepMerge(targetValue,sourceValue):result[key]=sourceValue)}return result}function isObject(value){return typeof value==`object`&&!!value&&!Array.isArray(value)}export{deepMerge,mergePresets};
|
|
@@ -1,104 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ref, watch } from "vue";
|
|
3
|
-
import { getSavedColorMode, getSystemColorMode, getColorMode } from "./get-color-mode.js";
|
|
4
|
-
import { getPreset } from "./get-preset.js";
|
|
5
|
-
import { injectThemeCSS } from "./inject-theme-css.js";
|
|
6
|
-
import { mergePresets } from "./preset-merger.js";
|
|
7
|
-
import { updateDocumentClass } from "./update-document-class.js";
|
|
8
|
-
import { useMutationObserver } from "./use-mutation-observer.js";
|
|
9
|
-
function watchColorSchemeFromMedia(themeState) {
|
|
10
|
-
if (isServer())
|
|
11
|
-
return () => {
|
|
12
|
-
};
|
|
13
|
-
let mediaCleanup;
|
|
14
|
-
if (themeState.value && themeState.value.colorMode === "auto") {
|
|
15
|
-
const mediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)"), updateFromMedia = () => {
|
|
16
|
-
if (themeState.value.colorMode === "auto") {
|
|
17
|
-
const newColorMode = mediaQuery.matches ? "dark" : "light";
|
|
18
|
-
updateDocumentClass(newColorMode === "dark", themeState.value), themeState.value.isDark = newColorMode === "dark";
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
mediaQuery.addEventListener("change", updateFromMedia), mediaCleanup = () => mediaQuery.removeEventListener("change", updateFromMedia);
|
|
22
|
-
}
|
|
23
|
-
const stopWatch = watch(() => themeState.value.colorMode, (colorMode) => {
|
|
24
|
-
updateDocumentClass(
|
|
25
|
-
colorMode === "auto" ? getSystemColorMode() === "dark" : colorMode === "dark",
|
|
26
|
-
themeState.value
|
|
27
|
-
);
|
|
28
|
-
});
|
|
29
|
-
return () => {
|
|
30
|
-
mediaCleanup?.(), stopWatch();
|
|
31
|
-
};
|
|
32
|
-
}
|
|
33
|
-
function watchMutationClassOnHtmlElement(themeState) {
|
|
34
|
-
if (isServer())
|
|
35
|
-
return () => {
|
|
36
|
-
};
|
|
37
|
-
const { stop } = useMutationObserver(
|
|
38
|
-
document.documentElement,
|
|
39
|
-
() => {
|
|
40
|
-
if (isServer() || !themeState.value)
|
|
41
|
-
return;
|
|
42
|
-
const activeColorMode = document.documentElement.classList.contains(themeState.value.darkClass) ? "dark" : "light";
|
|
43
|
-
themeState.value.isDark = activeColorMode === "dark", themeState.value.colorMode !== activeColorMode && themeState.value.colorMode !== "auto" && (themeState.value.colorMode = activeColorMode);
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
attributes: !0
|
|
47
|
-
}
|
|
48
|
-
);
|
|
49
|
-
return stop;
|
|
50
|
-
}
|
|
51
|
-
const defaultOptions = {
|
|
52
|
-
strategy: "hybrid",
|
|
53
|
-
overrides: {},
|
|
54
|
-
darkModeStrategy: "class",
|
|
55
|
-
preset: void 0,
|
|
56
|
-
injectCriticalCSS: !0,
|
|
57
|
-
injectFullCSS: !0,
|
|
58
|
-
mode: "both",
|
|
59
|
-
darkClass: "dark",
|
|
60
|
-
colorMode: "auto"
|
|
61
|
-
};
|
|
62
|
-
function resolveConfig(options) {
|
|
63
|
-
return {
|
|
64
|
-
...defaultOptions,
|
|
65
|
-
...options,
|
|
66
|
-
colorMode: getSavedColorMode() ?? options.colorMode ?? (options.mode === "dark" ? "dark" : "auto")
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
function createThemeState(options, config) {
|
|
70
|
-
const isDark = config.colorMode === "auto" && config.mode === "both" ? getSystemColorMode() === "dark" || getColorMode(config.colorMode) === "dark" : getColorMode(config.colorMode) === "dark" || config.mode === "dark", themeState = ref({
|
|
71
|
-
strategy: config.strategy,
|
|
72
|
-
darkClass: config.darkClass,
|
|
73
|
-
darkModeStrategy: config.darkModeStrategy,
|
|
74
|
-
colorMode: config.colorMode,
|
|
75
|
-
mode: config.mode,
|
|
76
|
-
preset: void 0,
|
|
77
|
-
// @ts-expect-error _isDark is a private property
|
|
78
|
-
isDark: options._isDark || isDark
|
|
79
|
-
});
|
|
80
|
-
return updateDocumentClass(themeState.value.isDark, themeState.value), themeState;
|
|
81
|
-
}
|
|
82
|
-
function finalizeTheme(themeState, preset, config) {
|
|
83
|
-
const finalPreset = Object.keys(config.overrides).length > 0 && preset ? mergePresets(preset, config.overrides) : preset;
|
|
84
|
-
if (finalPreset && (themeState.value.preset = finalPreset), config.strategy === "buildtime" || !finalPreset)
|
|
85
|
-
return { themeState, cleanup: () => {
|
|
86
|
-
} };
|
|
87
|
-
injectThemeCSS(finalPreset, config);
|
|
88
|
-
const cleanupColorScheme = watchColorSchemeFromMedia(themeState), cleanupMutation = watchMutationClassOnHtmlElement(themeState);
|
|
89
|
-
return {
|
|
90
|
-
themeState,
|
|
91
|
-
cleanup: () => {
|
|
92
|
-
cleanupColorScheme(), cleanupMutation();
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
function setupTheme(options) {
|
|
97
|
-
const config = resolveConfig(options), themeState = createThemeState(options, config);
|
|
98
|
-
return config.preset && typeof config.preset != "string" || config.strategy === "buildtime" ? finalizeTheme(themeState, config.preset, config) : (getPreset(config.preset).then((preset) => finalizeTheme(themeState, preset, config)), { themeState, cleanup: () => {
|
|
99
|
-
} });
|
|
100
|
-
}
|
|
101
|
-
export {
|
|
102
|
-
defaultOptions,
|
|
103
|
-
setupTheme
|
|
104
|
-
};
|
|
1
|
+
import{getPreset}from"./get-preset.js";import{injectThemeCSS}from"./inject-theme-css.js";import{mergePresets}from"./preset-merger.js";import{getColorMode,getSavedColorMode,getSystemColorMode}from"./get-color-mode.js";import{updateDocumentClass}from"./update-document-class.js";import{useMutationObserver}from"./use-mutation-observer.js";import{ref,watch}from"vue";import{isServer}from"@maz-ui/utils";function watchColorSchemeFromMedia(themeState){if(isServer())return()=>{};let mediaCleanup;if(themeState.value&&themeState.value.colorMode===`auto`){let mediaQuery=globalThis.matchMedia(`(prefers-color-scheme: dark)`);let updateFromMedia=()=>{if(themeState.value.colorMode===`auto`){let newColorMode=mediaQuery.matches?`dark`:`light`;updateDocumentClass(newColorMode===`dark`,themeState.value),themeState.value.isDark=newColorMode===`dark`}};mediaQuery.addEventListener(`change`,updateFromMedia),mediaCleanup=()=>mediaQuery.removeEventListener(`change`,updateFromMedia)}let stopWatch=watch(()=>themeState.value.colorMode,colorMode=>{updateDocumentClass(colorMode===`auto`?getSystemColorMode()===`dark`:colorMode===`dark`,themeState.value)});return()=>{mediaCleanup?.(),stopWatch()}}function watchMutationClassOnHtmlElement(themeState){if(isServer())return()=>{};let{stop}=useMutationObserver(document.documentElement,()=>{if(isServer()||!themeState.value)return;let activeColorMode=document.documentElement.classList.contains(themeState.value.darkClass)?`dark`:`light`;themeState.value.isDark=activeColorMode===`dark`,themeState.value.colorMode!==activeColorMode&&themeState.value.colorMode!==`auto`&&(themeState.value.colorMode=activeColorMode)},{attributes:!0});return stop}var defaultOptions={strategy:`hybrid`,overrides:{},darkModeStrategy:`class`,preset:void 0,injectCriticalCSS:!0,injectFullCSS:!0,mode:`both`,darkClass:`dark`,colorMode:`auto`};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`;let themeState=ref({strategy:config.strategy,darkClass:config.darkClass,darkModeStrategy:config.darkModeStrategy,colorMode:config.colorMode,mode:config.mode,preset:void 0,isDark:options._isDark||isDark});return updateDocumentClass(themeState.value.isDark,themeState.value),themeState}function finalizeTheme(themeState,preset,config){let finalPreset=Object.keys(config.overrides).length>0&&preset?mergePresets(preset,config.overrides):preset;if(finalPreset&&(themeState.value.preset=finalPreset),config.strategy===`buildtime`||!finalPreset)return{themeState,cleanup:()=>{}};injectThemeCSS(finalPreset,config);let cleanupColorScheme=watchColorSchemeFromMedia(themeState);let cleanupMutation=watchMutationClassOnHtmlElement(themeState);return{themeState,cleanup:()=>{cleanupColorScheme(),cleanupMutation()}}}function setupTheme(options){let config=resolveConfig(options);let themeState=createThemeState(options,config);return config.preset&&typeof config.preset!=`string`||config.strategy===`buildtime`?finalizeTheme(themeState,config.preset,config):(getPreset(config.preset).then(preset=>finalizeTheme(themeState,preset,config)),{themeState,cleanup:()=>{}})}export{defaultOptions,setupTheme};
|
|
@@ -1,9 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
function updateDocumentClass(isDark, state) {
|
|
3
|
-
typeof document > "u" || !state || state.darkModeStrategy === "media" || state.mode === "light" || noTransition(() => {
|
|
4
|
-
isDark ? document.documentElement.classList.add(state.darkClass) : document.documentElement.classList.remove(state.darkClass);
|
|
5
|
-
});
|
|
6
|
-
}
|
|
7
|
-
export {
|
|
8
|
-
updateDocumentClass
|
|
9
|
-
};
|
|
1
|
+
import{noTransition}from"./no-transition.js";function updateDocumentClass(isDark,state){typeof document>`u`||!state||state.darkModeStrategy===`media`||state.mode===`light`||noTransition(()=>{isDark?document.documentElement.classList.add(state.darkClass):document.documentElement.classList.remove(state.darkClass)})}export{updateDocumentClass};
|
|
@@ -1,13 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
function useMutationObserver(target, callback, options = {}) {
|
|
3
|
-
if (isServer() || !("MutationObserver" in globalThis))
|
|
4
|
-
return { stop: () => {
|
|
5
|
-
} };
|
|
6
|
-
const observer = new MutationObserver(callback);
|
|
7
|
-
return observer.observe(target, options), { stop: () => {
|
|
8
|
-
observer.disconnect();
|
|
9
|
-
} };
|
|
10
|
-
}
|
|
11
|
-
export {
|
|
12
|
-
useMutationObserver
|
|
13
|
-
};
|
|
1
|
+
import{isServer}from"@maz-ui/utils";function useMutationObserver(target,callback,options={}){if(isServer()||!(`MutationObserver`in globalThis))return{stop:()=>{}};let observer=new MutationObserver(callback);return observer.observe(target,options),{stop:()=>{observer.disconnect()}}}export{useMutationObserver};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/themes",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.7.
|
|
4
|
+
"version": "4.7.6-beta.0",
|
|
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",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"vue": ">=3.5.0 <4.0.0"
|
|
79
79
|
},
|
|
80
80
|
"dependencies": {
|
|
81
|
-
"@maz-ui/utils": "4.7.
|
|
81
|
+
"@maz-ui/utils": "4.7.6-beta.0"
|
|
82
82
|
},
|
|
83
83
|
"lint-staged": {
|
|
84
84
|
"*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|