@dbs-portal/core-theme
Version:
Theme management, styling utilities, and design tokens for DBS Portal
510 lines (509 loc) • 15.4 kB
JavaScript
import le, { createContext as ce, useState as $, useEffect as z, useContext as ue } from "react";
import { ConfigProvider as de } from "antd";
import { c as t, f as fe } from "./breakpoints-Co_h6qP4.js";
import { designTokens as me } from "./tokens.js";
const S = {
token: {
// Color tokens
colorPrimary: t.primary[500],
colorSuccess: t.success[500],
colorWarning: t.warning[500],
colorError: t.error[500],
colorInfo: t.info[500],
// Background colors
colorBgBase: t.white,
colorBgContainer: t.white,
colorBgElevated: t.white,
colorBgLayout: t.neutral[50],
colorBgSpotlight: t.neutral[100],
colorBgMask: "rgba(0, 0, 0, 0.45)",
// Text colors
colorText: t.neutral[900],
colorTextSecondary: t.neutral[600],
colorTextTertiary: t.neutral[400],
colorTextQuaternary: t.neutral[300],
// Border colors
colorBorder: t.neutral[200],
colorBorderSecondary: t.neutral[100],
// Typography
fontFamily: fe.sans.join(", "),
fontSize: 14,
// Base font size
fontSizeHeading1: 38,
fontSizeHeading2: 30,
fontSizeHeading3: 24,
fontSizeHeading4: 20,
fontSizeHeading5: 16,
// Spacing
padding: 16,
paddingXS: 8,
paddingSM: 12,
paddingLG: 24,
paddingXL: 32,
margin: 16,
marginXS: 8,
marginSM: 12,
marginLG: 24,
marginXL: 32,
// Border radius
borderRadius: 6,
borderRadiusXS: 2,
borderRadiusSM: 4,
borderRadiusLG: 8,
// Shadows
boxShadow: "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)",
boxShadowSecondary: "0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)",
// Line height
lineHeight: 1.5714285714285714,
lineHeightHeading1: 1.210526315789474,
lineHeightHeading2: 1.2666666666666666,
lineHeightHeading3: 1.3333333333333333,
lineHeightHeading4: 1.4,
lineHeightHeading5: 1.5,
// Control heights
controlHeight: 32,
controlHeightSM: 24,
controlHeightLG: 40,
// Motion
motionDurationFast: "0.1s",
motionDurationMid: "0.2s",
motionDurationSlow: "0.3s"
},
components: {
// Button customization
Button: {
borderRadius: 6,
controlHeight: 32,
controlHeightSM: 24,
controlHeightLG: 40,
paddingInline: 15,
paddingInlineSM: 7,
paddingInlineLG: 15
},
// Input customization
Input: {
borderRadius: 6,
controlHeight: 32,
controlHeightSM: 24,
controlHeightLG: 40,
paddingInline: 11,
paddingInlineSM: 7,
paddingInlineLG: 11
},
// Card customization
Card: {
borderRadius: 8,
paddingLG: 24,
headerBg: "transparent"
},
// Modal customization
Modal: {
borderRadius: 8,
paddingLG: 24
},
// Table customization
Table: {
borderRadius: 6,
headerBg: t.neutral[50],
headerSplitColor: t.neutral[200],
rowHoverBg: t.neutral[50]
},
// Menu customization
Menu: {
borderRadius: 6,
itemBorderRadius: 6,
subMenuItemBorderRadius: 6
},
// Notification customization
Notification: {
borderRadius: 8
},
// Message customization
Message: {
borderRadius: 6
}
}
}, ge = {
...S,
token: {
...S.token,
// Background colors for dark mode
colorBgBase: t.neutral[900],
colorBgContainer: t.neutral[800],
colorBgElevated: t.neutral[700],
colorBgLayout: t.neutral[950],
colorBgSpotlight: t.neutral[800],
colorBgMask: "rgba(0, 0, 0, 0.65)",
// Text colors for dark mode
colorText: t.neutral[100],
colorTextSecondary: t.neutral[300],
colorTextTertiary: t.neutral[400],
colorTextQuaternary: t.neutral[500],
// Border colors for dark mode
colorBorder: t.neutral[700],
colorBorderSecondary: t.neutral[800]
},
components: {
...S.components,
// Table customization for dark mode
Table: {
...S.components?.Table,
headerBg: t.neutral[800],
headerSplitColor: t.neutral[700],
rowHoverBg: t.neutral[800]
}
}
};
var w = { exports: {} }, R = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var W;
function pe() {
if (W) return R;
W = 1;
var n = Symbol.for("react.transitional.element"), f = Symbol.for("react.fragment");
function i(g, c, a) {
var h = null;
if (a !== void 0 && (h = "" + a), c.key !== void 0 && (h = "" + c.key), "key" in c) {
a = {};
for (var u in c)
u !== "key" && (a[u] = c[u]);
} else a = c;
return c = a.ref, {
$$typeof: n,
type: g,
key: h,
ref: c !== void 0 ? c : null,
props: a
};
}
return R.Fragment = f, R.jsx = i, R.jsxs = i, R;
}
var v = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var U;
function he() {
return U || (U = 1, process.env.NODE_ENV !== "production" && function() {
function n(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === ae ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case d:
return "Fragment";
case Q:
return "Profiler";
case k:
return "StrictMode";
case re:
return "Suspense";
case te:
return "SuspenseList";
case ne:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case O:
return "Portal";
case K:
return (e.displayName || "Context") + ".Provider";
case Z:
return (e._context.displayName || "Context") + ".Consumer";
case ee:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case oe:
return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
case H:
r = e._payload, e = e._init;
try {
return n(e(r));
} catch {
}
}
return null;
}
function f(e) {
return "" + e;
}
function i(e) {
try {
f(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var o = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return o.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
s
), f(e);
}
}
function g(e) {
if (e === d) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === H)
return "<...>";
try {
var r = n(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function c() {
var e = A.A;
return e === null ? null : e.getOwner();
}
function a() {
return Error("react-stack-top-frame");
}
function h(e) {
if (B.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function u(e, r) {
function o() {
I || (I = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
o.isReactWarning = !0, Object.defineProperty(e, "key", {
get: o,
configurable: !0
});
}
function y() {
var e = n(this.type);
return D[e] || (D[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function x(e, r, o, s, p, m, M, C) {
return o = m.ref, e = {
$$typeof: P,
type: e,
key: r,
props: m,
_owner: p
}, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: y
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: M
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: C
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function _(e, r, o, s, p, m, M, C) {
var l = r.children;
if (l !== void 0)
if (s)
if (ie(l)) {
for (s = 0; s < l.length; s++)
T(l[s]);
Object.freeze && Object.freeze(l);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else T(l);
if (B.call(r, "key")) {
l = n(e);
var b = Object.keys(r).filter(function(se) {
return se !== "key";
});
s = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", G[l + s] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
s,
l,
b,
l
), G[l + s] = !0);
}
if (l = null, o !== void 0 && (i(o), l = "" + o), h(r) && (i(r.key), l = "" + r.key), "key" in r) {
o = {};
for (var L in r)
L !== "key" && (o[L] = r[L]);
} else o = r;
return l && u(
o,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), x(
e,
l,
m,
p,
c(),
o,
M,
C
);
}
function T(e) {
typeof e == "object" && e !== null && e.$$typeof === P && e._store && (e._store.validated = 1);
}
var E = le, P = Symbol.for("react.transitional.element"), O = Symbol.for("react.portal"), d = Symbol.for("react.fragment"), k = Symbol.for("react.strict_mode"), Q = Symbol.for("react.profiler"), Z = Symbol.for("react.consumer"), K = Symbol.for("react.context"), ee = Symbol.for("react.forward_ref"), re = Symbol.for("react.suspense"), te = Symbol.for("react.suspense_list"), oe = Symbol.for("react.memo"), H = Symbol.for("react.lazy"), ne = Symbol.for("react.activity"), ae = Symbol.for("react.client.reference"), A = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, B = Object.prototype.hasOwnProperty, ie = Array.isArray, j = console.createTask ? console.createTask : function() {
return null;
};
E = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var I, D = {}, Y = E.react_stack_bottom_frame.bind(
E,
a
)(), F = j(g(a)), G = {};
v.Fragment = d, v.jsx = function(e, r, o, s, p) {
var m = 1e4 > A.recentlyCreatedOwnerStacks++;
return _(
e,
r,
o,
!1,
s,
p,
m ? Error("react-stack-top-frame") : Y,
m ? j(g(e)) : F
);
}, v.jsxs = function(e, r, o, s, p) {
var m = 1e4 > A.recentlyCreatedOwnerStacks++;
return _(
e,
r,
o,
!0,
s,
p,
m ? Error("react-stack-top-frame") : Y,
m ? j(g(e)) : F
);
};
}()), v;
}
var X;
function be() {
return X || (X = 1, process.env.NODE_ENV === "production" ? w.exports = pe() : w.exports = he()), w.exports;
}
var N = be();
const J = ce(void 0), Te = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", Ee = (n = "light", f) => {
if (typeof window > "u") return n;
try {
const i = localStorage.getItem(f);
if (i && ["light", "dark", "auto"].includes(i))
return i;
} catch (i) {
console.warn("Failed to read theme from localStorage:", i);
}
return n;
}, q = (n) => n === "auto" ? Te() : n, _e = ({
children: n,
defaultMode: f = "light",
storageKey: i = "dbs-portal-theme",
className: g,
...c
}) => {
const [a, h] = $(
() => Ee(f, i)
), [u, y] = $(
() => q(a)
);
z(() => {
const d = () => {
y(q(a));
};
if (d(), a === "auto" && typeof window < "u") {
const k = window.matchMedia("(prefers-color-scheme: dark)");
return k.addEventListener("change", d), () => k.removeEventListener("change", d);
}
}, [a]), z(() => {
if (typeof document < "u" && (document.documentElement.classList.remove("light", "dark"), document.documentElement.classList.add(u), document.documentElement.setAttribute("data-theme", u)), typeof localStorage < "u")
try {
localStorage.setItem(i, a);
} catch (d) {
console.warn("Failed to save theme to localStorage:", d);
}
}, [a, u, i]);
const x = (d) => {
h(d);
}, _ = () => {
x(u === "light" ? "dark" : "light");
}, T = u === "dark" ? ge : S, O = {
mode: a,
setMode: x,
theme: T,
tokens: me,
isDark: u === "dark",
isLight: u === "light",
toggleTheme: _
};
return /* @__PURE__ */ N.jsx(J.Provider, { value: O, children: /* @__PURE__ */ N.jsx(de, { theme: T, children: /* @__PURE__ */ N.jsx("div", { className: g, "data-theme": u, ...c, children: n }) }) });
}, V = () => {
const n = ue(J);
if (n === void 0)
throw new Error("useTheme must be used within a ThemeProvider");
return n;
}, ke = () => {
const { mode: n, setMode: f, isDark: i, isLight: g, toggleTheme: c } = V();
return { mode: n, setMode: f, isDark: i, isLight: g, toggleTheme: c };
}, we = () => {
const { tokens: n } = V();
return n;
};
export {
_e as T,
ke as a,
we as b,
ge as d,
S as l,
V as u
};
//# sourceMappingURL=theme-provider-MhQW7AZf.js.map