UNPKG

@dbs-portal/core-theme

Version:

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

855 lines (852 loc) 27.5 kB
import Me, { createContext as br, useState as ke, useEffect as Oe, useContext as yr } from "react"; import { ConfigProvider as Rr } from "antd"; import { c as i, f as Er } from "./breakpoints-C2XcSx1D.js"; import { designTokens as _r } from "./tokens.js"; const $ = { token: { // Color tokens colorPrimary: i.primary[500], colorSuccess: i.success[500], colorWarning: i.warning[500], colorError: i.error[500], colorInfo: i.info[500], // Background colors colorBgBase: i.white, colorBgContainer: i.white, colorBgElevated: i.white, colorBgLayout: i.neutral[50], colorBgSpotlight: i.neutral[100], colorBgMask: "rgba(0, 0, 0, 0.45)", // Text colors colorText: i.neutral[900], colorTextSecondary: i.neutral[600], colorTextTertiary: i.neutral[400], colorTextQuaternary: i.neutral[300], // Border colors colorBorder: i.neutral[200], colorBorderSecondary: i.neutral[100], // Typography fontFamily: Er.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: i.neutral[50], headerSplitColor: i.neutral[200], rowHoverBg: i.neutral[50] }, // Menu customization Menu: { borderRadius: 6, itemBorderRadius: 6, subMenuItemBorderRadius: 6 }, // Notification customization Notification: { borderRadius: 8 }, // Message customization Message: { borderRadius: 6 } } }, Tr = { ...$, token: { ...$.token, // Background colors for dark mode colorBgBase: i.neutral[900], colorBgContainer: i.neutral[800], colorBgElevated: i.neutral[700], colorBgLayout: i.neutral[950], colorBgSpotlight: i.neutral[800], colorBgMask: "rgba(0, 0, 0, 0.65)", // Text colors for dark mode colorText: i.neutral[100], colorTextSecondary: i.neutral[300], colorTextTertiary: i.neutral[400], colorTextQuaternary: i.neutral[500], // Border colors for dark mode colorBorder: i.neutral[700], colorBorderSecondary: i.neutral[800] }, components: { ...$.components, // Table customization for dark mode Table: { ...$.components?.Table, headerBg: i.neutral[800], headerSplitColor: i.neutral[700], rowHoverBg: i.neutral[800] } } }; var z = { exports: {} }, B = {}; /** * @license React * react-jsx-runtime.production.min.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var Pe; function Sr() { if (Pe) return B; Pe = 1; var f = Me, _ = Symbol.for("react.element"), g = Symbol.for("react.fragment"), T = Object.prototype.hasOwnProperty, w = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, y = { key: !0, ref: !0, __self: !0, __source: !0 }; function O(v, d, S) { var p, R = {}, C = null, I = null; S !== void 0 && (C = "" + S), d.key !== void 0 && (C = "" + d.key), d.ref !== void 0 && (I = d.ref); for (p in d) T.call(d, p) && !y.hasOwnProperty(p) && (R[p] = d[p]); if (v && v.defaultProps) for (p in d = v.defaultProps, d) R[p] === void 0 && (R[p] = d[p]); return { $$typeof: _, type: v, key: C, ref: I, props: R, _owner: w.current }; } return B.Fragment = g, B.jsx = O, B.jsxs = O, B; } var H = {}; /** * @license React * react-jsx-runtime.development.js * * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ var je; function xr() { return je || (je = 1, process.env.NODE_ENV !== "production" && function() { var f = Me, _ = Symbol.for("react.element"), g = Symbol.for("react.portal"), T = Symbol.for("react.fragment"), w = Symbol.for("react.strict_mode"), y = Symbol.for("react.profiler"), O = Symbol.for("react.provider"), v = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), S = Symbol.for("react.suspense"), p = Symbol.for("react.suspense_list"), R = Symbol.for("react.memo"), C = Symbol.for("react.lazy"), I = Symbol.for("react.offscreen"), W = Symbol.iterator, x = "@@iterator"; function Y(e) { if (e === null || typeof e != "object") return null; var r = W && e[W] || e[x]; return typeof r == "function" ? r : null; } var D = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; function h(e) { { for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++) t[n - 1] = arguments[n]; Ae("error", e, t); } } function Ae(e, r, t) { { var n = D.ReactDebugCurrentFrame, u = n.getStackAddendum(); u !== "" && (r += "%s", t = t.concat([u])); var s = t.map(function(o) { return String(o); }); s.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, s); } } var Be = !1, He = !1, $e = !1, We = !1, Ye = !1, ne; ne = Symbol.for("react.module.reference"); function Ve(e) { return !!(typeof e == "string" || typeof e == "function" || e === T || e === y || Ye || e === w || e === S || e === p || We || e === I || Be || He || $e || typeof e == "object" && e !== null && (e.$$typeof === C || e.$$typeof === R || e.$$typeof === O || e.$$typeof === v || e.$$typeof === d || // This needs to include all possible module reference object // types supported by any Flight configuration anywhere since // we don't know which Flight build this will end up being used // with. e.$$typeof === ne || e.getModuleId !== void 0)); } function Ge(e, r, t) { var n = e.displayName; if (n) return n; var u = r.displayName || r.name || ""; return u !== "" ? t + "(" + u + ")" : t; } function ae(e) { return e.displayName || "Context"; } function k(e) { if (e == null) return null; if (typeof e.tag == "number" && h("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function") return e.displayName || e.name || null; if (typeof e == "string") return e; switch (e) { case T: return "Fragment"; case g: return "Portal"; case y: return "Profiler"; case w: return "StrictMode"; case S: return "Suspense"; case p: return "SuspenseList"; } if (typeof e == "object") switch (e.$$typeof) { case v: var r = e; return ae(r) + ".Consumer"; case O: var t = e; return ae(t._context) + ".Provider"; case d: return Ge(e, e.render, "ForwardRef"); case R: var n = e.displayName || null; return n !== null ? n : k(e.type) || "Memo"; case C: { var u = e, s = u._payload, o = u._init; try { return k(o(s)); } catch { return null; } } } return null; } var P = Object.assign, L = 0, oe, ie, ue, se, le, ce, fe; function de() { } de.__reactDisabledLog = !0; function Ue() { { if (L === 0) { oe = console.log, ie = console.info, ue = console.warn, se = console.error, le = console.group, ce = console.groupCollapsed, fe = console.groupEnd; var e = { configurable: !0, enumerable: !0, value: de, writable: !0 }; Object.defineProperties(console, { info: e, log: e, warn: e, error: e, group: e, groupCollapsed: e, groupEnd: e }); } L++; } } function Ne() { { if (L--, L === 0) { var e = { configurable: !0, enumerable: !0, writable: !0 }; Object.defineProperties(console, { log: P({}, e, { value: oe }), info: P({}, e, { value: ie }), warn: P({}, e, { value: ue }), error: P({}, e, { value: se }), group: P({}, e, { value: le }), groupCollapsed: P({}, e, { value: ce }), groupEnd: P({}, e, { value: fe }) }); } L < 0 && h("disabledDepth fell below zero. This is a bug in React. Please file an issue."); } } var J = D.ReactCurrentDispatcher, q; function V(e, r, t) { { if (q === void 0) try { throw Error(); } catch (u) { var n = u.stack.trim().match(/\n( *(at )?)/); q = n && n[1] || ""; } return ` ` + q + e; } } var X = !1, G; { var ze = typeof WeakMap == "function" ? WeakMap : Map; G = new ze(); } function ve(e, r) { if (!e || X) return ""; { var t = G.get(e); if (t !== void 0) return t; } var n; X = !0; var u = Error.prepareStackTrace; Error.prepareStackTrace = void 0; var s; s = J.current, J.current = null, Ue(); try { if (r) { var o = function() { throw Error(); }; if (Object.defineProperty(o.prototype, "props", { set: function() { throw Error(); } }), typeof Reflect == "object" && Reflect.construct) { try { Reflect.construct(o, []); } catch (b) { n = b; } Reflect.construct(e, [], o); } else { try { o.call(); } catch (b) { n = b; } e.call(o.prototype); } } else { try { throw Error(); } catch (b) { n = b; } e(); } } catch (b) { if (b && n && typeof b.stack == "string") { for (var a = b.stack.split(` `), m = n.stack.split(` `), l = a.length - 1, c = m.length - 1; l >= 1 && c >= 0 && a[l] !== m[c]; ) c--; for (; l >= 1 && c >= 0; l--, c--) if (a[l] !== m[c]) { if (l !== 1 || c !== 1) do if (l--, c--, c < 0 || a[l] !== m[c]) { var E = ` ` + a[l].replace(" at new ", " at "); return e.displayName && E.includes("<anonymous>") && (E = E.replace("<anonymous>", e.displayName)), typeof e == "function" && G.set(e, E), E; } while (l >= 1 && c >= 0); break; } } } finally { X = !1, J.current = s, Ne(), Error.prepareStackTrace = u; } var M = e ? e.displayName || e.name : "", j = M ? V(M) : ""; return typeof e == "function" && G.set(e, j), j; } function Je(e, r, t) { return ve(e, !1); } function qe(e) { var r = e.prototype; return !!(r && r.isReactComponent); } function U(e, r, t) { if (e == null) return ""; if (typeof e == "function") return ve(e, qe(e)); if (typeof e == "string") return V(e); switch (e) { case S: return V("Suspense"); case p: return V("SuspenseList"); } if (typeof e == "object") switch (e.$$typeof) { case d: return Je(e.render); case R: return U(e.type, r, t); case C: { var n = e, u = n._payload, s = n._init; try { return U(s(u), r, t); } catch { } } } return ""; } var A = Object.prototype.hasOwnProperty, ge = {}, pe = D.ReactDebugCurrentFrame; function N(e) { if (e) { var r = e._owner, t = U(e.type, e._source, r ? r.type : null); pe.setExtraStackFrame(t); } else pe.setExtraStackFrame(null); } function Xe(e, r, t, n, u) { { var s = Function.call.bind(A); for (var o in e) if (s(e, o)) { var a = void 0; try { if (typeof e[o] != "function") { var m = Error((n || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."); throw m.name = "Invariant Violation", m; } a = e[o](r, o, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"); } catch (l) { a = l; } a && !(a instanceof Error) && (N(u), h("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, o, typeof a), N(null)), a instanceof Error && !(a.message in ge) && (ge[a.message] = !0, N(u), h("Failed %s type: %s", t, a.message), N(null)); } } } var Ke = Array.isArray; function K(e) { return Ke(e); } function Qe(e) { { var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object"; return t; } } function Ze(e) { try { return he(e), !1; } catch { return !0; } } function he(e) { return "" + e; } function me(e) { if (Ze(e)) return h("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Qe(e)), he(e); } var be = D.ReactCurrentOwner, er = { key: !0, ref: !0, __self: !0, __source: !0 }, ye, Re; function rr(e) { if (A.call(e, "ref")) { var r = Object.getOwnPropertyDescriptor(e, "ref").get; if (r && r.isReactWarning) return !1; } return e.ref !== void 0; } function tr(e) { if (A.call(e, "key")) { var r = Object.getOwnPropertyDescriptor(e, "key").get; if (r && r.isReactWarning) return !1; } return e.key !== void 0; } function nr(e, r) { typeof e.ref == "string" && be.current; } function ar(e, r) { { var t = function() { ye || (ye = !0, h("%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://reactjs.org/link/special-props)", r)); }; t.isReactWarning = !0, Object.defineProperty(e, "key", { get: t, configurable: !0 }); } } function or(e, r) { { var t = function() { Re || (Re = !0, h("%s: `ref` 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://reactjs.org/link/special-props)", r)); }; t.isReactWarning = !0, Object.defineProperty(e, "ref", { get: t, configurable: !0 }); } } var ir = function(e, r, t, n, u, s, o) { var a = { // This tag allows us to uniquely identify this as a React Element $$typeof: _, // Built-in properties that belong on the element type: e, key: r, ref: t, props: o, // Record the component responsible for creating this element. _owner: s }; return a._store = {}, Object.defineProperty(a._store, "validated", { configurable: !1, enumerable: !1, writable: !0, value: !1 }), Object.defineProperty(a, "_self", { configurable: !1, enumerable: !1, writable: !1, value: n }), Object.defineProperty(a, "_source", { configurable: !1, enumerable: !1, writable: !1, value: u }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a; }; function ur(e, r, t, n, u) { { var s, o = {}, a = null, m = null; t !== void 0 && (me(t), a = "" + t), tr(r) && (me(r.key), a = "" + r.key), rr(r) && (m = r.ref, nr(r, u)); for (s in r) A.call(r, s) && !er.hasOwnProperty(s) && (o[s] = r[s]); if (e && e.defaultProps) { var l = e.defaultProps; for (s in l) o[s] === void 0 && (o[s] = l[s]); } if (a || m) { var c = typeof e == "function" ? e.displayName || e.name || "Unknown" : e; a && ar(o, c), m && or(o, c); } return ir(e, a, m, u, n, be.current, o); } } var Q = D.ReactCurrentOwner, Ee = D.ReactDebugCurrentFrame; function F(e) { if (e) { var r = e._owner, t = U(e.type, e._source, r ? r.type : null); Ee.setExtraStackFrame(t); } else Ee.setExtraStackFrame(null); } var Z; Z = !1; function ee(e) { return typeof e == "object" && e !== null && e.$$typeof === _; } function _e() { { if (Q.current) { var e = k(Q.current.type); if (e) return ` Check the render method of \`` + e + "`."; } return ""; } } function sr(e) { return ""; } var Te = {}; function lr(e) { { var r = _e(); if (!r) { var t = typeof e == "string" ? e : e.displayName || e.name; t && (r = ` Check the top-level render call using <` + t + ">."); } return r; } } function Se(e, r) { { if (!e._store || e._store.validated || e.key != null) return; e._store.validated = !0; var t = lr(r); if (Te[t]) return; Te[t] = !0; var n = ""; e && e._owner && e._owner !== Q.current && (n = " It was passed a child from " + k(e._owner.type) + "."), F(e), h('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), F(null); } } function xe(e, r) { { if (typeof e != "object") return; if (K(e)) for (var t = 0; t < e.length; t++) { var n = e[t]; ee(n) && Se(n, r); } else if (ee(e)) e._store && (e._store.validated = !0); else if (e) { var u = Y(e); if (typeof u == "function" && u !== e.entries) for (var s = u.call(e), o; !(o = s.next()).done; ) ee(o.value) && Se(o.value, r); } } } function cr(e) { { var r = e.type; if (r == null || typeof r == "string") return; var t; if (typeof r == "function") t = r.propTypes; else if (typeof r == "object" && (r.$$typeof === d || // Note: Memo only checks outer props here. // Inner props are checked in the reconciler. r.$$typeof === R)) t = r.propTypes; else return; if (t) { var n = k(r); Xe(t, e.props, "prop", n, e); } else if (r.PropTypes !== void 0 && !Z) { Z = !0; var u = k(r); h("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", u || "Unknown"); } typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && h("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead."); } } function fr(e) { { for (var r = Object.keys(e.props), t = 0; t < r.length; t++) { var n = r[t]; if (n !== "children" && n !== "key") { F(e), h("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), F(null); break; } } e.ref !== null && (F(e), h("Invalid attribute `ref` supplied to `React.Fragment`."), F(null)); } } var we = {}; function Ce(e, r, t, n, u, s) { { var o = Ve(e); if (!o) { var a = ""; (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."); var m = sr(); m ? a += m : a += _e(); var l; e === null ? l = "null" : K(e) ? l = "array" : e !== void 0 && e.$$typeof === _ ? (l = "<" + (k(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : l = typeof e, h("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", l, a); } var c = ur(e, r, t, u, s); if (c == null) return c; if (o) { var E = r.children; if (E !== void 0) if (n) if (K(E)) { for (var M = 0; M < E.length; M++) xe(E[M], e); Object.freeze && Object.freeze(E); } else h("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 xe(E, e); } if (A.call(r, "key")) { var j = k(e), b = Object.keys(r).filter(function(mr) { return mr !== "key"; }), re = b.length > 0 ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}"; if (!we[j + re]) { var hr = b.length > 0 ? "{" + b.join(": ..., ") + ": ...}" : "{}"; h(`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} />`, re, j, hr, j), we[j + re] = !0; } } return e === T ? fr(c) : cr(c), c; } } function dr(e, r, t) { return Ce(e, r, t, !0); } function vr(e, r, t) { return Ce(e, r, t, !1); } var gr = vr, pr = dr; H.Fragment = T, H.jsx = gr, H.jsxs = pr; }()), H; } var De; function wr() { return De || (De = 1, process.env.NODE_ENV === "production" ? z.exports = Sr() : z.exports = xr()), z.exports; } var te = wr(); const Ie = br(void 0), Cr = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", kr = (f = "light", _) => { if (typeof window > "u") return f; try { const g = localStorage.getItem(_); if (g && ["light", "dark", "auto"].includes(g)) return g; } catch (g) { console.warn("Failed to read theme from localStorage:", g); } return f; }, Fe = (f) => f === "auto" ? Cr() : f, Fr = ({ children: f, defaultMode: _ = "light", storageKey: g = "dbs-portal-theme", className: T, ...w }) => { const [y, O] = ke(() => kr(_, g)), [v, d] = ke(() => Fe(y)); Oe(() => { const x = () => { d(Fe(y)); }; if (x(), y === "auto" && typeof window < "u") { const Y = window.matchMedia("(prefers-color-scheme: dark)"); return Y.addEventListener("change", x), () => Y.removeEventListener("change", x); } }, [y]), Oe(() => { if (typeof document < "u" && (document.documentElement.classList.remove("light", "dark"), document.documentElement.classList.add(v), document.documentElement.setAttribute("data-theme", v)), typeof localStorage < "u") try { localStorage.setItem(g, y); } catch (x) { console.warn("Failed to save theme to localStorage:", x); } }, [y, v, g]); const S = (x) => { O(x); }, p = () => { S(v === "light" ? "dark" : "light"); }, R = v === "dark" ? Tr : $, W = { mode: y, setMode: S, theme: R, tokens: _r, isDark: v === "dark", isLight: v === "light", toggleTheme: p }; return /* @__PURE__ */ te.jsx(Ie.Provider, { value: W, children: /* @__PURE__ */ te.jsx(Rr, { theme: R, children: /* @__PURE__ */ te.jsx("div", { className: T, "data-theme": v, ...w, children: f }) }) }); }, Le = () => { const f = yr(Ie); if (f === void 0) throw new Error("useTheme must be used within a ThemeProvider"); return f; }, Mr = () => { const { mode: f, setMode: _, isDark: g, isLight: T, toggleTheme: w } = Le(); return { mode: f, setMode: _, isDark: g, isLight: T, toggleTheme: w }; }, Ir = () => { const { tokens: f } = Le(); return f; }; export { Fr as T, Mr as a, Ir as b, Tr as d, $ as l, Le as u }; //# sourceMappingURL=theme-provider-FWep-c5B.js.map