@dndbuilder.com/react
Version:
Drag and drop builder for React
350 lines (349 loc) • 12.9 kB
JavaScript
import { PseudoClass as C } from "../types/style.js";
import { createStyle as s } from "../../../../utils.js";
import { generateTypographyStyles as v, generateResponsiveStyle as tt, generatePseudoStyle as F, generateBoxShadow as A, generateUnitValue as L, generateSpacingValue as U } from "./style.js";
import { colord as w } from "../../../../node_modules/.pnpm/colord@2.9.3/node_modules/colord/index.js";
import { l as rt } from "../../../../_virtual/lodash.js";
const gt = ({
settings: o,
breakpoints: r
}) => {
var J, K, M, N, Q, X;
const { color: i, typography: e, button: c, link: l, form: n, customCss: x } = o, R = {
// Color
...et(i),
// Typography
...$({
prefix: "body",
value: e.body ?? {},
breakpoints: r
}),
...$({
prefix: "h1",
value: e.h1 ?? {},
breakpoints: r
}),
...$({
prefix: "h2",
value: e.h2 ?? {},
breakpoints: r
}),
...$({
prefix: "h3",
value: e.h3 ?? {},
breakpoints: r
}),
...$({
prefix: "h4",
value: e.h4 ?? {},
breakpoints: r
}),
...$({
prefix: "h5",
value: e.h5 ?? {},
breakpoints: r
}),
...$({
prefix: "h6",
value: e.h6 ?? {},
breakpoints: r
}),
// Typography Presets
...nt(e.presets ?? [], r),
// Button
...$({
prefix: "button",
value: c.typography ?? {},
breakpoints: r
}),
...D((t) => {
var T, B, j, O, P, E, Y, Z;
const {
top: d,
right: a,
bottom: b,
left: y
} = U((T = c.borderWidth) == null ? void 0 : T[t]), {
top: u,
right: h,
bottom: g,
left: m
} = U((B = c.borderRadius) == null ? void 0 : B[t]);
return {
[`--button-${t}-color`]: (j = c.color) == null ? void 0 : j[t],
[`--button-${t}-background-color`]: (P = (O = c.background) == null ? void 0 : O.color) == null ? void 0 : P[t],
[`--button-${t}-border-color`]: (E = c.borderColor) == null ? void 0 : E[t],
[`--button-${t}-border-style`]: (Y = c.borderStyle) == null ? void 0 : Y[t],
// [`--button-${pseudoClass}-border-width`]: generateUnitValue(button.borderWidth?.[pseudoClass]),
[`--button-${t}-border-width`]: `${d ?? "0px"} ${a ?? "0px"} ${b ?? "0px"} ${y ?? "0px"}`,
// [`--button-${pseudoClass}-border-radius`]: generateUnitValue(button.borderRadius?.[pseudoClass]),
[`--button-${t}-border-radius`]: `${u ?? "0px"} ${h ?? "0px"} ${g ?? "0px"} ${m ?? "0px"}`,
[`--button-${t}-box-shadow`]: A((Z = c.boxShadow) == null ? void 0 : Z[t])
};
}),
...G(r, (t) => ({
...D((d) => {
var h, g;
const {
top: a,
right: b,
bottom: y,
left: u
} = U((g = (h = c.padding) == null ? void 0 : h[t]) == null ? void 0 : g[d]);
return {
[`--button-${d}-${t}-padding`]: `${a ?? "0px"} ${b ?? "0px"} ${y ?? "0px"} ${u ?? "0px"}`
};
})
})),
// Button Presets
...ct(c.presets ?? [], r),
// Link
...D((t) => {
var d;
return {
[`--link-${t}-color`]: (d = l.color) == null ? void 0 : d[t]
};
}),
...$({
prefix: "link",
value: l.typography ?? {},
breakpoints: r
}),
// Form Label
"--label-color": (J = n.label) == null ? void 0 : J.color,
...$({
prefix: "label",
value: ((K = n.label) == null ? void 0 : K.typography) ?? {},
breakpoints: r
}),
// Form Input
...$({
prefix: "input",
value: ((M = n.input) == null ? void 0 : M.typography) ?? {},
breakpoints: r
}),
...D((t) => {
var d, a, b, y, u, h, g, m, T, B, j, O, P, E;
return {
[`--input-${t}-color`]: (a = (d = n.input) == null ? void 0 : d.color) == null ? void 0 : a[t],
[`--input-${t}-background-color`]: (y = (b = n.input) == null ? void 0 : b.backgroundColor) == null ? void 0 : y[t],
[`--input-${t}-border-color`]: (h = (u = n.input) == null ? void 0 : u.borderColor) == null ? void 0 : h[t],
[`--input-${t}-border-style`]: (m = (g = n.input) == null ? void 0 : g.borderStyle) == null ? void 0 : m[t],
[`--input-${t}-border-width`]: L(
(B = (T = n.input) == null ? void 0 : T.borderWidth) == null ? void 0 : B[t]
),
[`--input-${t}-border-radius`]: L(
(O = (j = n.input) == null ? void 0 : j.borderRadius) == null ? void 0 : O[t]
),
[`--input-${t}-box-shadow`]: A(
(E = (P = n.input) == null ? void 0 : P.boxShadow) == null ? void 0 : E[t]
)
};
}),
// Breakpoints
...it(r)
}, V = {
backgroundColor: i.backgroundColor && "var(--background-color)",
color: i.textColor && "var(--text-color)",
...v("body", e.body ?? {}, r)
}, W = v("h1", e.h1 ?? {}, r), H = v("h2", e.h2 ?? {}, r), f = v("h3", e.h3 ?? {}, r), S = v("h4", e.h4 ?? {}, r), z = v("h5", e.h5 ?? {}, r), _ = v("h6", e.h6 ?? {}, r), I = {
display: "inline-flex",
...v("button", c.typography ?? {}, r),
...F((t) => {
var d, a, b, y, u, h, g, m;
return {
color: ((d = c.color) == null ? void 0 : d[t]) && `var(--button-${t}-color)`,
backgroundColor: ((b = (a = c.background) == null ? void 0 : a.color) == null ? void 0 : b[t]) && `var(--button-${t}-background-color)`,
borderColor: ((y = c.borderColor) == null ? void 0 : y[t]) && `var(--button-${t}-border-color)`,
borderStyle: (u = c.borderStyle) != null && u[t] ? `var(--button-${t}-border-style)` : void 0,
borderWidth: ((h = c.borderWidth) == null ? void 0 : h[t]) && `var(--button-${t}-border-width)`,
borderRadius: ((g = c.borderRadius) == null ? void 0 : g[t]) && `var(--button-${t}-border-radius)`,
boxShadow: ((m = c.boxShadow) == null ? void 0 : m[t]) && `var(--button-${t}-box-shadow)`
};
}),
...tt(r, (t) => ({
...F((d) => {
var a, b;
return {
padding: ((b = (a = c.padding) == null ? void 0 : a[t]) == null ? void 0 : b[d]) && `var(--button-${d}-${t}-padding)`
};
})
}))
}, p = {
...v("link", l.typography ?? {}, r),
...F((t) => {
var d;
return {
color: ((d = l.color) == null ? void 0 : d[t]) && `var(--link-${t}-color)`
};
})
}, k = {
color: ((N = n.label) == null ? void 0 : N.color) && "var(--label-color)",
...v("label", ((Q = n.label) == null ? void 0 : Q.typography) ?? {}, r)
};
({
...v("input", ((X = n.input) == null ? void 0 : X.typography) ?? {}, r),
...F((t) => {
var d, a, b, y, u, h, g, m, T, B, j, O, P, E;
return {
color: ((a = (d = n.input) == null ? void 0 : d.color) == null ? void 0 : a[t]) && `var(--input-${t}-color)`,
backgroundColor: ((y = (b = n.input) == null ? void 0 : b.backgroundColor) == null ? void 0 : y[t]) && `var(--input-${t}-background-color)`,
borderColor: ((h = (u = n.input) == null ? void 0 : u.borderColor) == null ? void 0 : h[t]) && `var(--input-${t}-border-color)`,
borderStyle: (m = (g = n.input) == null ? void 0 : g.borderStyle) != null && m[t] ? `var(--input-${t}-border-style)` : void 0,
borderWidth: ((B = (T = n.input) == null ? void 0 : T.borderWidth) == null ? void 0 : B[t]) && `var(--input-${t}-border-width)`,
borderRadius: ((O = (j = n.input) == null ? void 0 : j.borderRadius) == null ? void 0 : O[t]) && `var(--input-${t}-border-radius)`,
boxShadow: ((E = (P = n.input) == null ? void 0 : P.boxShadow) == null ? void 0 : E[t]) && `var(--input-${t}-box-shadow)`
};
})
});
const q = s();
return q.register({
$global: !0,
":root": R,
body: V,
"h1:not(.reset-style)": W,
"h2:not(.reset-style)": H,
"h3:not(.reset-style)": f,
"h4:not(.reset-style)": S,
"h5:not(.reset-style)": z,
"h6:not(.reset-style)": _,
// button: buttionStyles,
// '.btn': buttionStyles,
"button:not(.reset-style)": I,
".btn:not(.reset-style)": I,
"a:not(.reset-style)": p,
"label:not(.reset-style)": k,
// input: inputStyles,
'[type="checkbox"]:focus': {
color: "var(--accent-color)"
}
}), x ? q.get() + x : q.get();
}, ot = (o) => o == null ? void 0 : o.reduce(
(r, i) => (r[`--color-preset-${i.id}`] = i.value, r),
{}
), et = (o) => ({
// Color
"--accent-color": o.accentColor,
"--accent-color-50": w(o.accentColor).lighten(0.5).toHex(),
"--accent-color-100": w(o.accentColor).lighten(0.3).toHex(),
"--accent-color-200": w(o.accentColor).lighten(0.2).toHex(),
"--accent-color-300": w(o.accentColor).lighten(0.15).toHex(),
"--accent-color-400": w(o.accentColor).lighten(0.1).toHex(),
"--accent-color-500": o.accentColor,
"--accent-color-600": w(o.accentColor).darken(0.1).toHex(),
"--accent-color-700": w(o.accentColor).darken(0.15).toHex(),
"--accent-color-800": w(o.accentColor).darken(0.2).toHex(),
"--accent-color-900": w(o.accentColor).darken(0.3).toHex(),
"--accent-color-950": w(o.accentColor).darken(0.4).toHex(),
"--background-color": o.backgroundColor,
"--text-color": o.textColor,
// Color Presets
...ot(o.presets ?? [])
}), $ = ({
prefix: o,
value: r,
breakpoints: i
}) => {
const e = {};
if (rt.isEmpty(r))
return e;
const c = G(i, (l) => {
var n, x, R, V, W, H, f, S, z;
return {
[`--${o}-${l}-font-family`]: (n = r.fontFamily) == null ? void 0 : n[l],
[`--${o}-${l}-font-weight`]: (x = r.fontWeight) == null ? void 0 : x[l],
[`--${o}-${l}-text-transform`]: (R = r.textTransform) == null ? void 0 : R[l],
[`--${o}-${l}-font-style`]: (V = r.fontStyle) == null ? void 0 : V[l],
[`--${o}-${l}-text-decoration`]: (W = r.textDecoration) == null ? void 0 : W[l],
[`--${o}-${l}-font-size`]: L((H = r.fontSize) == null ? void 0 : H[l]),
[`--${o}-${l}-line-height`]: L((f = r.lineHeight) == null ? void 0 : f[l]),
[`--${o}-${l}-letter-spacing`]: L(
(S = r.letterSpacing) == null ? void 0 : S[l]
),
[`--${o}-${l}-word-spacing`]: L(
(z = r.wordSpacing) == null ? void 0 : z[l]
)
};
});
return Object.assign(e, c), e;
}, nt = (o, r) => o == null ? void 0 : o.reduce((i, e) => {
const c = $({
prefix: `typography-preset-${e.id}`,
value: e.value,
breakpoints: r
});
return Object.assign(i, c), i;
}, {}), ct = (o, r) => o == null ? void 0 : o.reduce((i, e) => {
const c = D((n) => {
var x, R, V, W, H, f, S, z;
return {
...$({
prefix: `button-preset-${e.id}`,
value: e.value.typography ?? {},
breakpoints: r
}),
[`--button-preset-${e.id}-${n}-color`]: (x = e.value.color) == null ? void 0 : x[n],
[`--button-preset-${e.id}-${n}-background-color`]: (V = (R = e.value.background) == null ? void 0 : R.color) == null ? void 0 : V[n],
[`--button-preset-${e.id}-${n}-border-color`]: (W = e.value.borderColor) == null ? void 0 : W[n],
[`--button-preset-${e.id}-${n}-border-style`]: (H = e.value.borderStyle) == null ? void 0 : H[n],
[`--button-preset-${e.id}-${n}-border-width`]: L(
(f = e.value.borderWidth) == null ? void 0 : f[n]
),
[`--button-preset-${e.id}-${n}-border-radius`]: L(
(S = e.value.borderRadius) == null ? void 0 : S[n]
),
[`--button-preset-${e.id}-${n}-box-shadow`]: A(
(z = e.value.boxShadow) == null ? void 0 : z[n]
)
};
});
Object.assign(i, c);
const l = G(r, (n) => ({
...D((x) => {
var f, S;
const {
top: R,
right: V,
bottom: W,
left: H
} = U((S = (f = e.value.padding) == null ? void 0 : f[n]) == null ? void 0 : S[x]);
return {
[`--button-preset-${e.id}-${x}-${n}-padding`]: {
paddingTop: R,
paddingRight: V,
paddingBottom: W,
paddingLeft: H
}
};
})
}));
return Object.assign(i, l), i;
}, {}), D = (o) => {
const r = {};
return Object.values(C).forEach((e) => {
const c = o(e);
Object.assign(r, c);
}), r;
}, G = (o, r) => {
const i = {};
return o.forEach((e) => {
const c = r(e.key);
Object.assign(i, c);
}), i;
}, it = (o) => {
const r = {};
return o.forEach((i) => {
i.maxWidth && (r[`--breakpoint-${i.key}-max-width`] = `${i.maxWidth}px`), i.minWidth && (r[`--breakpoint-${i.key}-min-width`] = `${i.minWidth}px`);
}), r;
};
export {
it as generateBreakpointVariables,
ct as generateButtonPresetsVariables,
ot as generateColorPresetsVariables,
et as generateColorVariables,
D as generatePseudoVariables,
G as generateResponsiveVariables,
gt as generateThemeStyles,
nt as generateTypographyPresetsVariables,
$ as generateTypographyVariables
};
//# sourceMappingURL=theme.js.map