@dbs-portal/core-theme/dist/css-utils.js

Theme management, styling utilities, and design tokens for DBS Portal

import { c as l, s as b, g, f as h, a as y, i as c, m as p } from "./breakpoints-C2XcSx1D.js";
const m = (e = "light") => {
  const t = {};
  Object.entries(l).forEach(([i, r]) => {
    typeof r == "string" ? t[`--color-${i}`] = r : typeof r == "object" && Object.entries(r).forEach(([f, u]) => {
      t[`--color-${i}-${f}`] = u;
    });
  });
  const n = {};
  Object.entries(b).forEach(([i, r]) => {
    n[`--spacing-${i}`] = r;
  });
  const s = {};
  Object.entries(g).forEach(([i, r]) => {
    s[`--radius-${i}`] = r;
  });
  const o = {};
  Object.entries(h).forEach(([i, r]) => {
    o[`--font-${i}`] = Array.isArray(r) ? r.join(", ") : String(r);
  });
  const a = {};
  return Object.entries(y).forEach(([i, r]) => {
    Array.isArray(r) ? (a[`--font-size-${i}`] = r[0], r[1] && typeof r[1] == "object" && "lineHeight" in r[1] && (a[`--line-height-${i}`] = r[1].lineHeight)) : a[`--font-size-${i}`] = String(r);
  }), {
    ...t,
    ...n,
    ...s,
    ...o,
    ...a
  };
}, x = (e = "light") => {
  if (typeof document > "u") return;
  const t = m(e), n = document.documentElement;
  Object.entries(t).forEach(([s, o]) => {
    n.style.setProperty(s, o);
  });
}, O = () => {
  if (typeof document > "u") return;
  const e = m(), t = document.documentElement;
  Object.keys(e).forEach((n) => {
    t.style.removeProperty(n);
  });
}, S = (e) => typeof document > "u" ? "" : getComputedStyle(document.documentElement).getPropertyValue(e).trim(), E = (e, t) => {
  typeof document > "u" || document.documentElement.style.setProperty(e, t);
}, $ = {
  // Color helpers
  color: (e, t) => `var(${t ? `--color-${e}-${t}` : `--color-${e}`})`,
  // Spacing helpers
  spacing: (e) => `var(--spacing-${e})`,
  // Border radius helpers
  radius: (e) => `var(--radius-${e})`,
  // Font helpers
  font: (e) => `var(--font-${e})`,
  fontSize: (e) => `var(--font-size-${e})`,
  lineHeight: (e) => `var(--line-height-${e})`,
  // Generic helper
  get: (e) => `var(--${e})`
}, v = (e = "light") => ({
  ":root": m(e),
  '[data-theme="light"]': m("light"),
  '[data-theme="dark"]': m("dark")
}), V = (e) => typeof window > "u" ? !1 : window.matchMedia(e).matches, w = () => {
  if (typeof window > "u") return "xs";
  const e = window.innerWidth;
  return e >= Number.parseInt(c.xxl) ? "xxl" : e >= Number.parseInt(c.xl) ? "xl" : e >= Number.parseInt(c.lg) ? "lg" : e >= Number.parseInt(c.md) ? "md" : e >= Number.parseInt(c.sm) ? "sm" : "xs";
}, I = (e) => typeof window > "u" ? !1 : window.innerWidth >= Number.parseInt(c[e]), N = (e) => typeof window > "u" ? !1 : window.innerWidth < Number.parseInt(c[e]), C = (e, t) => {
  if (typeof window > "u") return !1;
  const n = window.innerWidth;
  return n >= Number.parseInt(c[e]) && n < Number.parseInt(c[t]);
}, k = (e, t) => {
  if (typeof e != "object" || e === null)
    return e;
  const n = t || w(), s = e, o = ["xxl", "xl", "lg", "md", "sm", "xs"], a = o.indexOf(n);
  for (let r = a; r < o.length; r++) {
    const f = o[r];
    if (f && s[f] !== void 0)
      return s[f];
  }
  return Object.values(s).filter((r) => r !== void 0)[0];
}, d = (e) => {
  const t = {};
  return Object.entries(e).forEach(([n, s]) => {
    const o = n, a = p[o];
    o === "xs" ? Object.assign(t, s) : t[a] = s;
  }), t;
}, z = (e, t) => {
  const n = {};
  return Object.entries(e).forEach(([s, o]) => {
    const a = s, i = a === "xs" ? "" : p[a], r = {
      display: "grid",
      gridTemplateColumns: `repeat(${o}, 1fr)`,
      ...t?.[a] && { gap: t[a] }
    };
    i ? n[i] = r : Object.assign(n, r);
  }), n;
}, Q = {
  sm: "@container (min-width: 384px)",
  md: "@container (min-width: 448px)",
  lg: "@container (min-width: 512px)",
  xl: "@container (min-width: 768px)",
  xxl: "@container (min-width: 1024px)"
}, A = {
  // Responsive font sizes
  fontSize: (e) => d(
    Object.fromEntries(Object.entries(e).map(([t, n]) => [t, { fontSize: n }]))
  ),
  // Responsive line heights
  lineHeight: (e) => d(
    Object.fromEntries(Object.entries(e).map(([t, n]) => [t, { lineHeight: n }]))
  ),
  // Responsive text alignment
  textAlign: (e) => d(
    Object.fromEntries(
      Object.entries(e).map(([t, n]) => [t, { textAlign: n }])
    )
  )
}, B = {
  // Responsive padding
  padding: (e) => d(
    Object.fromEntries(Object.entries(e).map(([t, n]) => [t, { padding: n }]))
  ),
  // Responsive margin
  margin: (e) => d(
    Object.fromEntries(Object.entries(e).map(([t, n]) => [t, { margin: n }]))
  ),
  // Responsive gap
  gap: (e) => d(
    Object.fromEntries(Object.entries(e).map(([t, n]) => [t, { gap: n }]))
  )
};
export {
  x as applyCSSVariables,
  Q as containerQueries,
  v as createCSSVariableStyles,
  z as createResponsiveGrid,
  d as createResponsiveStyles,
  $ as cssVar,
  m as generateCSSVariables,
  S as getCSSVariable,
  w as getCurrentBreakpoint,
  C as isBreakpointBetween,
  N as isBreakpointDown,
  I as isBreakpointUp,
  O as removeCSSVariables,
  k as resolveResponsiveValue,
  B as responsiveSpacing,
  A as responsiveText,
  E as setCSSVariable,
  V as useMediaQuery
};
//# sourceMappingURL=css-utils.js.map