@dcodegroup-au/dsg-vue
Version:
Front-end Vue/Tailwind DSG for UntitledUI.
611 lines (610 loc) • 14.2 kB
JavaScript
import { g as S } from "./_commonjsHelpers-C6fGbg64.js";
import { C as a, h as g } from "./DsgColoursConfig-BseFo6-R.js";
var d = {}, c = {}, y;
function C() {
return y || (y = 1, function(e) {
Object.defineProperty(e, "__esModule", {
value: !0
}), Object.defineProperty(e, "default", {
enumerable: !0,
get: function() {
return t;
}
});
function r(s, l) {
return {
handler: s,
config: l
};
}
r.withOptions = function(s, l = () => ({})) {
const i = function(x) {
return {
__options: x,
handler: s(x),
config: l(x)
};
};
return i.__isOptionsFunction = !0, i.__pluginFunction = s, i.__configFunction = l, i;
};
const t = r;
}(c)), c;
}
var b;
function P() {
return b || (b = 1, function(e) {
Object.defineProperty(e, "__esModule", {
value: !0
}), Object.defineProperty(e, "default", {
enumerable: !0,
get: function() {
return s;
}
});
const r = /* @__PURE__ */ t(C());
function t(l) {
return l && l.__esModule ? l : {
default: l
};
}
const s = r.default;
}(d)), d;
}
var m, h;
function E() {
if (h) return m;
h = 1;
let e = P();
return m = (e.__esModule ? e : { default: e }).default, m;
}
var B = E();
const n = /* @__PURE__ */ S(B), o = {
"display-2xl": { fontSize: "4.5rem", lineHeight: "5.625rem", letterSpacing: "-0.09rem" },
"display-xl": { fontSize: "3.75rem", lineHeight: "4.5rem", letterSpacing: "-0.075rem" },
"display-lg": { fontSize: "3rem", lineHeight: "3.75rem", letterSpacing: "-0.06rem" },
"display-md": { fontSize: "2.25rem", lineHeight: "2.75rem", letterSpacing: "-0.045rem" },
"display-sm": { fontSize: "1.875rem", lineHeight: "2.375rem" },
"display-xs": { fontSize: "1.5rem", lineHeight: "2rem" }
}, p = {
xl: { fontSize: "1.125rem", lineHeight: "1.75rem" },
lg: { fontSize: "1.125rem", lineHeight: "1.75rem" },
md: { fontSize: "1rem", lineHeight: "1.5rem" },
sm: { fontSize: "0.875rem", lineHeight: "1.25rem" },
xs: { fontSize: "0.75rem", lineHeight: "1.125rem" }
}, D = [
{
classNames: ["display-2xl", "h1", "heading-1"],
styles: {
...o["display-2xl"]
}
},
{
classNames: ["display-xl", "h2", "heading-2"],
styles: {
...o["display-xl"]
}
},
{
classNames: ["display-lg", "h3", "heading-3"],
styles: {
...o["display-lg"]
}
},
{
classNames: ["display-md", "h4", "heading-4"],
styles: {
...o["display-md"]
}
},
{
classNames: ["display-sm", "h5", "heading-5"],
styles: {
...o["display-sm"]
}
},
{
classNames: ["display-xs", "h6", "heading-6"],
styles: {
...o["display-xs"]
}
},
{
classNames: ["body-xl", "text-xl", "lead-1"],
styles: {
...p.xl
}
},
{
classNames: ["body-lg", "text-lg", "lead-2"],
styles: {
...p.lg
}
},
{
classNames: ["body-md", "text-md", "body", "text-base"],
styles: {
...p.md
}
},
{
classNames: ["body-sm", "text-sm", "caption"],
styles: {
...p.sm
}
},
{
classNames: ["body-xs", "text-xs", "legal", "text-legal"],
styles: {
...p.xs
}
}
];
let F = {};
D.forEach((e) => {
e.classNames.forEach((r) => {
F["." + r] = e.styles;
});
});
const v = n(function({ addComponents: e }) {
return e(F);
}), k = n(() => {
}, {
theme: {
extend: {
borderRadius: {
none: "0rem",
xxs: "0.125rem",
xs: "0.25rem",
sm: "0.375rem",
md: "0.5rem",
lg: "0.625rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.25rem",
"4xl": "1.5rem",
full: "9999px"
}
}
}
}), w = [
// # Gray Radial Gradients
{
className: "gradient-gray-1",
colors: [a.gray[600], "#FFFFFF"],
angle: "0deg",
type: "linear"
},
{
className: "gradient-gray-2",
colors: [a.gray[600], a.gray[500]],
angle: "90deg",
type: "linear"
},
{
className: "gradient-gray-3",
colors: [a.gray[700], a.gray[600]],
angle: "45deg",
type: "linear"
},
{
className: "gradient-gray-4",
colors: [a.gray[800], a.gray[600]],
angle: "45deg",
type: "linear"
},
{
className: "gradient-gray-5",
colors: [a.gray[800], a.gray[600]],
angle: "90deg",
type: "linear"
},
{
className: "gradient-gray-6",
colors: [a.gray[800], a.gray[700]],
angle: "26.5deg",
type: "linear"
},
{
className: "gradient-gray-7",
colors: [a.gray[900], a.gray[600]],
angle: "45deg",
type: "linear"
},
// # Brand Radial Gradients
{
className: "gradient-brand-1",
colors: [a.brand[600], "#FFFFFF"],
angle: "0deg",
type: "linear"
},
{
className: "gradient-brand-2",
colors: [a.brand[600], a.brand[500]],
angle: "90deg",
type: "linear"
},
{
className: "gradient-brand-3",
colors: [a.brand[700], a.brand[600]],
angle: "45deg",
type: "linear"
},
{
className: "gradient-brand-4",
colors: [a.brand[800], a.brand[600]],
angle: "45deg",
type: "linear"
},
{
className: "gradient-brand-5",
colors: [a.brand[800], a.brand[600]],
angle: "90deg",
type: "linear"
},
{
className: "gradient-brand-6",
colors: [a.brand[800], a.brand[700]],
angle: "26.5deg",
type: "linear"
},
{
className: "gradient-brand-7",
colors: [a.brand[900], a.brand[700]],
angle: "45deg",
type: "linear"
},
// # Gray Neutral Liner Gradients
{
className: "gradient-gray-neutral-1",
colors: ["#FFFFFF", "#F3F5F7"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-neutral-2",
colors: ["#F9FAFB", "#EDF0F3"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-neutral-3",
colors: ["#EDF0F3", "#E7EBEF"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-neutral-4",
colors: ["#F3F5F7", "#E0E5EB"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-neutral-5",
colors: ["#EDF0F3", "#D4DBE2"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-neutral-6",
colors: ["#E7EBEF", "#C8D1DA"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-neutral-7",
colors: ["#E7EBEF", "#C8D1DA"],
angle: "180deg",
type: "linear"
},
// # Gray True Liner Gradients
{
className: "gradient-gray-true-1",
colors: ["#FFFFFF", "#F5F5F5"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-true-2",
colors: ["#FAFAFA", "#F0F0F0"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-true-3",
colors: ["#FAFAFA", "#EBEBEB"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-true-4",
colors: ["#F5F5F5", "#E5E5E5"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-true-5",
colors: ["#F0F0F0", "#DBDBDB"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-true-6",
colors: ["#EBEBEB", "#D1D1D1"],
angle: "180deg",
type: "linear"
},
{
className: "gradient-gray-true-7",
colors: ["#E5E5E5", "#C2C2C2"],
angle: "180deg",
type: "linear"
}
];
let N = {};
w.forEach((e) => {
const r = e.type === "linear" ? "linear-gradient" : "radial-gradient", t = e.colors.join(", ");
let s = r + "(" + e.angle + ", " + t + ")";
N["." + e.className] = { backgroundImage: s };
});
const _ = n(({ addComponents: e }) => {
e(N);
}), z = [
{
className: "backdrop-blur-light-sm",
background: "rgba(255, 255, 255, 0.60)",
blur: "4px"
},
{
className: "backdrop-blur-light-md",
background: "rgba(255, 255, 255, 0.60)",
blur: "8px"
},
{
className: "backdrop-blur-light-lg",
background: "rgba(255, 255, 255, 0.60)",
blur: "12px"
},
{
className: "backdrop-blur-light-xl",
background: "rgba(255, 255, 255, 0.60)",
blur: "20px"
},
{
className: "backdrop-blur-dark-sm",
background: "rgba(0, 0, 0, 0.60)",
blur: "4px"
},
{
className: "backdrop-blur-dark-md",
background: "rgba(0, 0, 0, 0.60)",
blur: "8px"
},
{
className: "backdrop-blur-dark-lg",
background: "rgba(0, 0, 0, 0.60)",
blur: "12px"
},
{
className: "backdrop-blur-dark-xl",
background: "rgba(0, 0, 0, 0.60)",
blur: "20px"
}
];
let f = {};
z.forEach((e) => {
f["." + e.className] = { backdropFilter: "blur(" + e.blur + ")", background: e.background };
});
const H = n(({ addComponents: e }) => {
e(f);
}), R = [
{
className: "shadow-xs",
value: "0px 1px 2px 0px rgba(16, 24, 40, 0.05)",
textShadowValue: "0px 1px 2px rgba(16, 24, 40, 0.05)"
},
{
className: "shadow-sm",
value: "0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06)",
textShadowValue: "0px 1px 3px rgba(16, 24, 40, 0.10)"
},
{
className: "shadow-md",
value: "0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)",
textShadowValue: "0px 4px 8px rgba(16, 24, 40, 0.10)"
},
{
className: "shadow-lg",
value: "0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)",
textShadowValue: "0px 12px 16px rgba(16, 24, 40, 0.12)"
},
{
className: "shadow-xl",
value: "0px 16px 32px -8px rgba(16, 24, 40, 0.18)",
textShadowValue: "0px 16px 32px rgba(16, 24, 40, 0.18)"
},
{
className: "shadow-2xl",
value: "0px 24px 48px -12px rgba(16, 24, 40, 0.18)",
textShadowValue: "0px 24px 48px rgba(16, 24, 40, 0.18)"
},
{
className: "shadow-3xl",
value: "0px 32px 64px -12px rgba(16, 24, 40, 0.14)",
textShadowValue: "0px 32px 64px rgba(16, 24, 40, 0.14)"
}
];
let u = {};
R.forEach((e) => {
u["." + e.className] = { boxShadow: e.value }, u[".text-" + e.className] = { textShadow: e.textShadowValue };
});
const A = n(({ addComponents: e }) => {
e(u);
});
function V(e) {
const r = {
brandColor: e?.brandColor || a.brand[500],
grayColor: e?.grayColor || a.gray[400],
errorColor: e?.errorColor || a.error[500]
}, t = [
{
className: "ring-brand",
value: "0px 0px 0px 4px " + g(r.brandColor, 0.24)
},
{
className: "ring-gray",
value: "0px 0px 0px 4px " + g(r.grayColor, 0.14)
},
{
className: "ring-gray-secondary",
value: "0px 0px 0px 4px " + g(r.grayColor, 0.2)
},
{
className: "ring-error",
value: "0px 0px 0px 4px " + g(r.errorColor, 0.24)
},
// # Refer: Shadow.ts - shadow-xs, shadow-sm
{
className: "ring-brand-shadow-xs",
value: "0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px " + g(r.brandColor, 0.24)
},
{
className: "ring-brand-shadow-sm",
value: "0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 0px 0px 4px " + g(r.brandColor, 0.24)
},
{
className: "ring-gray-shadow-xs",
value: "0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px " + g(r.grayColor, 0.14)
},
{
className: "ring-gray-shadow-sm",
value: "0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 0px 0px 4px " + g(r.grayColor, 0.14)
},
{
className: "ring-error-shadow-xs",
value: "0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px " + g(r.errorColor, 0.24)
},
{
className: "ring-error-shadow-sm",
value: "0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 0px 0px 4px " + g(r.errorColor, 0.24)
}
];
let s = {};
return t.forEach((l) => {
s["." + l.className] = { boxShadow: l.value };
}), n(({ addComponents: l }) => {
l(s);
});
}
const T = V, q = n(({ addBase: e, theme: r }) => {
}, {
theme: {
extend: {
container: {
center: !0,
padding: {
DEFAULT: "2rem",
md: "1rem"
}
}
}
}
}), O = n(({ addBase: e, theme: r }) => {
}, {
theme: {
extend: {
height: {
xxs: "0.5rem",
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.75rem"
}
}
}
}), G = n(({ addBase: e, theme: r }) => {
}, {
theme: {
extend: {
screens: {
"max-xl": { max: "1279px" },
"max-lg": { max: "1023px" },
"max-md": { max: "768px" },
"max-sm": { max: "639px" },
"max-xs": { max: "413px" },
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1600px"
}
}
}
}), M = n(({ addBase: e, theme: r }) => {
}, {
theme: {
extend: {
spacing: {
"3xlSpace": "96px",
"2xlSpace": "64px",
xlSpace: "32px",
lgSpace: "24px",
mdSpace: "16px",
smSpace: "12px",
xsSpace: "8px",
"2xsSpace": "4px",
"3xsSpace": "2px"
}
}
}
}), $ = n(({ addBase: e, theme: r }) => {
}, {
theme: {
extend: {
width: {
"2xs": "0.5rem",
xs: "0.75rem",
sm: "0.875rem",
md: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.75rem"
}
}
}
}), j = [
k,
v,
_,
H,
A,
T(),
q,
O,
G,
M,
$
], W = {
brand: ["Inter", "Source Sans Pro", "Helvetica Neue", "Roboto", "Arial", "sans-serif"],
inter: ["Inter", "Source Sans Pro", "Helvetica Neue", "Roboto", "Arial", "sans-serif"]
}, J = j, K = a, Q = a, X = W;
export {
H as DsgBackdropBlurPlugin,
Q as DsgColorConfig,
K as DsgColourConfig,
q as DsgContainerPlugin,
T as DsgFocusRingsPlugin,
X as DsgFontFamilyConfig,
_ as DsgGradientPlugin,
O as DsgHeightPlugin,
k as DsgRadiusPlugin,
G as DsgScreenPlugin,
A as DsgShadowsPlugin,
M as DsgSpacingPlugin,
J as DsgTailwindPlugin,
v as DsgTypographyPlugin,
$ as DsgWidthPlugin
};