@vinicunca/unocss-preset 1.27.0 → 1.28.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/{akar-B30zjk5t.js → akar-CrM37MRC.js} +34 -79
- package/dist/index.js +23 -7
- package/package.json +1 -1
|
@@ -1,99 +1,54 @@
|
|
|
1
1
|
import { compressCSS } from "./utils-DZIu2j5I.js";
|
|
2
|
-
import { isString } from "@vinicunca/perkakas";
|
|
3
|
-
import { theme } from "unocss/preset-wind4";
|
|
4
2
|
|
|
5
3
|
//#region src/presets/akar/akar.brand-css-variables.ts
|
|
6
|
-
function isHexColor(value) {
|
|
7
|
-
return /^#([A-F0-9]{6}|[A-F0-9]{3})$/i.test(value);
|
|
8
|
-
}
|
|
9
4
|
function getAkarPreflight(options) {
|
|
10
5
|
return {
|
|
11
6
|
layer: "theme",
|
|
12
7
|
getCSS: () => {
|
|
13
|
-
|
|
14
|
-
const lightVars = [];
|
|
15
|
-
const darkVars = [];
|
|
16
|
-
addBrandsVariables({
|
|
17
|
-
brands,
|
|
18
|
-
lightVars,
|
|
19
|
-
darkVars
|
|
20
|
-
});
|
|
21
|
-
const { lightVars: pohonLightVars, darkVars: pohonDarkVars } = addPohonNeutralVariables(options);
|
|
22
|
-
lightVars.push(...pohonLightVars);
|
|
23
|
-
darkVars.push(...pohonDarkVars);
|
|
8
|
+
if (!Boolean(options.pohonThemes)) return "";
|
|
24
9
|
return compressCSS(`
|
|
25
10
|
:root {
|
|
26
|
-
${
|
|
11
|
+
${[
|
|
12
|
+
"--pohon-text-muted: var(--pohon-color-neutral-500);",
|
|
13
|
+
"--pohon-text-toned: var(--pohon-color-neutral-600);",
|
|
14
|
+
"--pohon-text: var(--pohon-color-neutral-700);",
|
|
15
|
+
"--pohon-text-highlighted: var(--pohon-color-neutral-900);",
|
|
16
|
+
"--pohon-text-inverted: var(--pohon-color-neutral-100);",
|
|
17
|
+
"--pohon-bg: var(--pohon-color-neutral-100);",
|
|
18
|
+
"--pohon-bg-muted: var(--pohon-color-neutral-50);",
|
|
19
|
+
"--pohon-bg-elevated: var(--pohon-color-neutral-100);",
|
|
20
|
+
"--pohon-bg-accented: var(--pohon-color-neutral-200);",
|
|
21
|
+
"--pohon-bg-inverted: var(--pohon-color-neutral-900);",
|
|
22
|
+
"--pohon-border: var(--pohon-color-neutral-200);",
|
|
23
|
+
"--pohon-border-muted: var(--pohon-color-neutral-200);",
|
|
24
|
+
"--pohon-border-accented: var(--pohon-color-neutral-300);",
|
|
25
|
+
"--pohon-border-inverted: var(--pohon-color-neutral-900);"
|
|
26
|
+
].join("\n ")}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
.dark {
|
|
30
|
-
${
|
|
30
|
+
${[
|
|
31
|
+
"--pohon-text-dimmed: var(--pohon-color-neutral-500);",
|
|
32
|
+
"--pohon-text-muted: var(--pohon-color-neutral-400);",
|
|
33
|
+
"--pohon-text-toned: var(--pohon-color-neutral-300);",
|
|
34
|
+
"--pohon-text: var(--pohon-color-neutral-200);",
|
|
35
|
+
"--pohon-text-highlighted: var(--pohon-color-neutral-100);",
|
|
36
|
+
"--pohon-text-inverted: var(--pohon-color-neutral-900);",
|
|
37
|
+
"--pohon-bg: var(--pohon-color-neutral-900);",
|
|
38
|
+
"--pohon-bg-muted: var(--pohon-color-neutral-800);",
|
|
39
|
+
"--pohon-bg-elevated: var(--pohon-color-neutral-800);",
|
|
40
|
+
"--pohon-bg-accented: var(--pohon-color-neutral-700);",
|
|
41
|
+
"--pohon-bg-inverted: var(--pohon-color-neutral-100);",
|
|
42
|
+
"--pohon-border: var(--pohon-color-neutral-800);",
|
|
43
|
+
"--pohon-border-muted: var(--pohon-color-neutral-700);",
|
|
44
|
+
"--pohon-border-accented: var(--pohon-color-neutral-700);",
|
|
45
|
+
"--pohon-border-inverted: var(--pohon-color-neutral-100);"
|
|
46
|
+
].join("\n ")}
|
|
31
47
|
}
|
|
32
48
|
`);
|
|
33
49
|
}
|
|
34
50
|
};
|
|
35
51
|
}
|
|
36
|
-
function addBrandsVariables({ brands = {}, lightVars, darkVars }) {
|
|
37
|
-
Object.entries(brands).forEach(([brandName, value]) => {
|
|
38
|
-
let lightBrand, darkBrand;
|
|
39
|
-
/**
|
|
40
|
-
* If the value is a hex color, use it directly.
|
|
41
|
-
*/
|
|
42
|
-
if (isString(value) && isHexColor(value)) {
|
|
43
|
-
lightBrand = value;
|
|
44
|
-
darkBrand = value;
|
|
45
|
-
} else {
|
|
46
|
-
const colorValue = theme.colors[value];
|
|
47
|
-
lightBrand = colorValue?.[500];
|
|
48
|
-
darkBrand = colorValue?.[400];
|
|
49
|
-
}
|
|
50
|
-
lightVars.push(`--akar-brand-${brandName}: ${lightBrand};`);
|
|
51
|
-
darkVars.push(`--akar-brand-${brandName}: ${darkBrand};`);
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
function addPohonNeutralVariables(options) {
|
|
55
|
-
if (!Boolean(options.pohonThemes)) return {
|
|
56
|
-
lightVars: [],
|
|
57
|
-
darkVars: []
|
|
58
|
-
};
|
|
59
|
-
const brandColor = options.brands?.neutral;
|
|
60
|
-
const neutralColor = theme.colors[brandColor ?? "slate"];
|
|
61
|
-
return {
|
|
62
|
-
lightVars: [
|
|
63
|
-
`--pohon-text-muted: ${neutralColor[500]}`,
|
|
64
|
-
`--pohon-text-toned: ${neutralColor[600]}`,
|
|
65
|
-
`--pohon-text: ${neutralColor[700]}`,
|
|
66
|
-
`--pohon-text-highlighted: ${neutralColor[900]}`,
|
|
67
|
-
`--pohon-text-inverted: ${neutralColor[100]}`,
|
|
68
|
-
`--pohon-bg: ${neutralColor[100]}`,
|
|
69
|
-
`--pohon-bg-muted: ${neutralColor[50]}`,
|
|
70
|
-
`--pohon-bg-elevated: ${neutralColor[100]}`,
|
|
71
|
-
`--pohon-bg-accented: ${neutralColor[200]}`,
|
|
72
|
-
`--pohon-bg-inverted: ${neutralColor[900]}`,
|
|
73
|
-
`--pohon-border: ${neutralColor[200]}`,
|
|
74
|
-
`--pohon-border-muted: ${neutralColor[200]}`,
|
|
75
|
-
`--pohon-border-accented: ${neutralColor[300]}`,
|
|
76
|
-
`--pohon-border-inverted: ${neutralColor[900]}`
|
|
77
|
-
],
|
|
78
|
-
darkVars: [
|
|
79
|
-
`--pohon-text-dimmed: ${neutralColor[500]}`,
|
|
80
|
-
`--pohon-text-muted: ${neutralColor[400]}`,
|
|
81
|
-
`--pohon-text-toned: ${neutralColor[300]}`,
|
|
82
|
-
`--pohon-text: ${neutralColor[200]}`,
|
|
83
|
-
`--pohon-text-highlighted: ${neutralColor[100]}`,
|
|
84
|
-
`--pohon-text-inverted: ${neutralColor[900]}`,
|
|
85
|
-
`--pohon-bg: ${neutralColor[900]}`,
|
|
86
|
-
`--pohon-bg-muted: ${neutralColor[800]}`,
|
|
87
|
-
`--pohon-bg-elevated: ${neutralColor[800]}`,
|
|
88
|
-
`--pohon-bg-accented: ${neutralColor[700]}`,
|
|
89
|
-
`--pohon-bg-inverted: ${neutralColor[100]}`,
|
|
90
|
-
`--pohon-border: ${neutralColor[800]}`,
|
|
91
|
-
`--pohon-border-muted: ${neutralColor[700]}`,
|
|
92
|
-
`--pohon-border-accented: ${neutralColor[700]}`,
|
|
93
|
-
`--pohon-border-inverted: ${neutralColor[100]}`
|
|
94
|
-
]
|
|
95
|
-
};
|
|
96
|
-
}
|
|
97
52
|
|
|
98
53
|
//#endregion
|
|
99
54
|
//#region src/presets/akar/akar.drawer-preflights.ts
|
package/dist/index.js
CHANGED
|
@@ -702,8 +702,26 @@ const DEFAULT_PRESET_OPTIONS = {
|
|
|
702
702
|
function isHexColor(value) {
|
|
703
703
|
return /^#([A-F0-9]{6}|[A-F0-9]{3})$/i.test(value);
|
|
704
704
|
}
|
|
705
|
-
|
|
706
|
-
|
|
705
|
+
/**
|
|
706
|
+
* We want to generate the brand colors and inject them in to the theme.
|
|
707
|
+
* Please refer to the `DEFAULT_AKAR_OPTIONS.brands` for the default brand colors.
|
|
708
|
+
*
|
|
709
|
+
* So when there's an option like this: `primary: 'violet'`,
|
|
710
|
+
* we want to resolve it to the actual color value from the `unocss/preset-wind4` theme
|
|
711
|
+
* including all the shades, like `primary-100`, `primary-200`, etc.
|
|
712
|
+
*
|
|
713
|
+
* If the brand value is a hex color, we will use it directly as `DEFAULT` shade.
|
|
714
|
+
* e.g. `primary: '#7C3AED'` will be resolved to `{ primary: { DEFAULT: '#7C3AED' } }`
|
|
715
|
+
*
|
|
716
|
+
* TODO: It would be nice to also auto generate all the shades from the hex color,
|
|
717
|
+
* or the user can define the nested object themselves.
|
|
718
|
+
*
|
|
719
|
+
* This function will return an object that can be directly used in the UnoCSS theme colors.
|
|
720
|
+
*/
|
|
721
|
+
function getAkarBrandColors(options) {
|
|
722
|
+
let akarBrands = DEFAULT_AKAR_OPTIONS.brands ?? {};
|
|
723
|
+
if (isObjectType(options.akar)) akarBrands = mergeDeep(akarBrands, options.akar.brands ?? {});
|
|
724
|
+
return Object.entries(akarBrands).reduce((acc, [brandKey, brandValue]) => {
|
|
707
725
|
if (isString(brandValue) && isHexColor(brandValue)) acc[brandKey] = { DEFAULT: brandValue };
|
|
708
726
|
else acc[brandKey] = theme.colors[brandValue];
|
|
709
727
|
return acc;
|
|
@@ -738,10 +756,8 @@ function resolveTheme(options) {
|
|
|
738
756
|
const enableAkar = Boolean(options.akar);
|
|
739
757
|
let baseTheme = options.theme;
|
|
740
758
|
if (!enableAkar) return baseTheme;
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
const akarTheme = getAkarTheme(akarBrands);
|
|
744
|
-
baseTheme = mergeDeep(baseTheme, { colors: akarTheme });
|
|
759
|
+
const akarBrands = getAkarBrandColors(options);
|
|
760
|
+
baseTheme = mergeDeep(baseTheme, { colors: akarBrands });
|
|
745
761
|
return baseTheme;
|
|
746
762
|
}
|
|
747
763
|
async function resolvePresets(options) {
|
|
@@ -756,7 +772,7 @@ async function resolvePresets(options) {
|
|
|
756
772
|
magicCss: import("./magic-css-BxO5zv5z.js").then((mod) => mod.presetMagicss),
|
|
757
773
|
animation: import("./animation-KZDlcVMl.js").then((mod) => mod.presetAnimation),
|
|
758
774
|
fluid: import("./fluid-Ne2qtSnB.js").then((mod) => mod.presetFluid),
|
|
759
|
-
akar: import("./akar-
|
|
775
|
+
akar: import("./akar-CrM37MRC.js").then((mod) => mod.presetAkar)
|
|
760
776
|
};
|
|
761
777
|
for (const [key, preset] of Object.entries(presetMap)) {
|
|
762
778
|
const option = options[key];
|