@dashadmin/dash-styles 1.3.25 → 1.3.26

package/dist/index.js

@@ -1,91 +1,103 @@
-import { defaultTheme as u } from "react-admin";
-import { deepmerge as g } from "@mui/utils";
-import { theme as v } from "antd";
-const h = (n) => {
-  const c = {};
-  for (let a = 0; a < document.styleSheets.length; a++)
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/index.tsx
+import { defaultTheme } from "react-admin";
+import { deepmerge } from "@mui/utils";
+import { theme as antdTheme } from "antd";
+var getAllCssVariablesFromStyleSheets = (selector) => {
+  var _a;
+  const cssVariables = {};
+  for (let i = 0; i < document.styleSheets.length; i++) {
     try {
-      const e = document.styleSheets[a];
-      if (e.ownerNode?.id === "dash-theme-variables" || !e.cssRules) continue;
-      for (let o = 0; o < e.cssRules.length; o++) {
-        const l = e.cssRules[o];
-        if (l.selectorText === n) {
-          const r = l.style;
-          for (let i = 0; i < r.length; i++) {
-            const t = r[i];
-            t.startsWith("--") && (c[t] = r.getPropertyValue(t).trim());
+      const styleSheet = document.styleSheets[i];
+      if (((_a = styleSheet.ownerNode) == null ? void 0 : _a.id) === "dash-theme-variables") continue;
+      if (!styleSheet.cssRules) continue;
+      for (let j = 0; j < styleSheet.cssRules.length; j++) {
+        const rule = styleSheet.cssRules[j];
+        if (rule.selectorText === selector) {
+          const style = rule.style;
+          for (let k = 0; k < style.length; k++) {
+            const prop = style[k];
+            if (prop.startsWith("--")) {
+              cssVariables[prop] = style.getPropertyValue(prop).trim();
+            }
           }
         }
       }
     } catch (e) {
       console.warn("Could not access stylesheet:", e);
     }
-  return c;
-}, p = (n) => {
-  const { tenantSettings: c, colors: a, ...e } = n || {}, o = document.documentElement.getAttribute("data-theme") || "dark", l = h(":root"), r = (t, s, b = null) => {
-    if (a) {
-      const d = a[`${s}--${b || o}`];
-      return d ? { [t]: d } : {};
-    } else if (l[`--${s}--${b || o}`]) {
-      const d = l[`--${s}--${b || o}`];
-      return d ? { [t]: d } : {};
-    } else
+  }
+  return cssVariables;
+};
+var defaultOptions = (options) => {
+  const _a = options || {}, { tenantSettings, colors } = _a, otherOptions = __objRest(_a, ["tenantSettings", "colors"]);
+  const currentTheme = document.documentElement.getAttribute("data-theme") || "dark";
+  const cssVars = getAllCssVariablesFromStyleSheets(":root");
+  const _color = (key, colorKey, mode = null) => {
+    if (colors) {
+      const colorValue = colors[`${colorKey}--${mode || currentTheme}`];
+      return colorValue ? { [key]: colorValue } : {};
+    } else if (cssVars[`--${colorKey}--${mode || currentTheme}`]) {
+      const cssVarValue = cssVars[`--${colorKey}--${mode || currentTheme}`];
+      return cssVarValue ? { [key]: cssVarValue } : {};
+    } else {
       return {};
-  }, i = (t = "light") => {
-    const s = {
-      mode: t,
-      background: {
-        ...r("default", "module-bg", t),
-        ...r("paper", "module-bg", t)
-      },
-      primary: {
-        //..._color('main', 'primary-color', mode),
-        //..._color('main', 'highlight-color', mode),
-        ...r("main", "btn-bg", t),
-        ...r("contrastText", "primary-contrast", t)
-      },
-      secondary: {
-        ...r("main", "secondary-color", t)
-      },
-      text: {
-        ...r("primary", "text-color", t),
-        ...r("secondary", "text-light", t),
-        ...r("disabled", "disabled-color", t)
-      },
-      action: {
-        ...r("active", "component-active-bg", t),
-        ...r("hover", "component-hover-bg", t),
-        ...r("disabled", "disabled-color", t),
-        ...r("disabledBackground", "disabled-bg", t)
-      },
-      //..._color('divider', 'component-border-split', mode),
-      ...r("border", "border-color", t),
-      error: {
-        ...r("main", "alert-error-bg", t),
-        ...r("contrastText", "alert-error-title", t)
-      },
-      warning: {
-        ...r("main", "alert-warning-bg", t),
-        ...r("contrastText", "alert-warning-title", t)
-      },
-      info: {
-        ...r("main", "alert-info-bg", t),
-        ...r("contrastText", "alert-info-title", t)
-      },
-      success: {
-        ...r("main", "alert-success-bg", t),
-        ...r("contrastText", "alert-success-title", t)
-      },
-      common: {
-        ...r("black", "text-color", t),
-        ...r("white", "text-contrast", t)
-      },
-      variant: {
-        ...r("containedBg", "btn-bg", t)
-      }
-    };
+    }
+  };
+  const createPalette = (mode = "light") => {
+    const palette = __spreadProps(__spreadValues({
+      mode,
+      background: __spreadValues(__spreadValues({}, _color("default", "module-bg", mode)), _color("paper", "module-bg", mode)),
+      primary: __spreadValues(__spreadValues({}, _color("main", "btn-bg", mode)), _color("contrastText", "primary-contrast", mode)),
+      secondary: __spreadValues({}, _color("main", "secondary-color", mode)),
+      text: __spreadValues(__spreadValues(__spreadValues({}, _color("primary", "text-color", mode)), _color("secondary", "text-light", mode)), _color("disabled", "disabled-color", mode)),
+      action: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _color("active", "component-active-bg", mode)), _color("hover", "component-hover-bg", mode)), _color("disabled", "disabled-color", mode)), _color("disabledBackground", "disabled-bg", mode))
+    }, _color("border", "border-color", mode)), {
+      error: __spreadValues(__spreadValues({}, _color("main", "alert-error-bg", mode)), _color("contrastText", "alert-error-title", mode)),
+      warning: __spreadValues(__spreadValues({}, _color("main", "alert-warning-bg", mode)), _color("contrastText", "alert-warning-title", mode)),
+      info: __spreadValues(__spreadValues({}, _color("main", "alert-info-bg", mode)), _color("contrastText", "alert-info-title", mode)),
+      success: __spreadValues(__spreadValues({}, _color("main", "alert-success-bg", mode)), _color("contrastText", "alert-success-title", mode)),
+      common: __spreadValues(__spreadValues({}, _color("black", "text-color", mode)), _color("white", "text-contrast", mode)),
+      variant: __spreadValues({}, _color("containedBg", "btn-bg", mode))
+    });
     return Object.fromEntries(
-      Object.entries(s).filter(([b, d]) => typeof d == "object" && d !== null ? Object.keys(d).length > 0 : d !== void 0)
+      Object.entries(palette).filter(([_, value]) => {
+        if (typeof value === "object" && value !== null) {
+          return Object.keys(value).length > 0;
+        }
+        return value !== void 0;
+      })
     );
   };
   return {
@@ -100,14 +112,14 @@ const h = (n) => {
     // Enable both light and dark color schemes - NO 'system' to force light/dark only
     colorSchemes: {
       light: {
-        palette: i("light")
+        palette: createPalette("light")
       },
       dark: {
-        palette: i("dark")
+        palette: createPalette("dark")
       }
     },
-    defaultColorScheme: o || "dark",
-    palette: i(o),
+    defaultColorScheme: currentTheme || "dark",
+    palette: createPalette(currentTheme),
     // Don't put your custom CSS variables in the palette
     // Instead, use them directly in component overrides
     typography: {
@@ -804,124 +816,139 @@ const h = (n) => {
       }
     }
   };
-}, x = (n) => {
-  const c = p(n || {}), { palette: a, colorSchemes: e, defaultColorScheme: o, cssVariables: l, ...r } = c;
-  return r;
-}, M = (n, c) => {
-  const { tenantSettings: a, colors: e, ...o } = c || {}, l = {
-    cssVariables: !0,
-    ...p(c)
+};
+var defaultComponentOverrides = (options) => {
+  const full = defaultOptions(options || {});
+  const _a = full, { palette, colorSchemes, defaultColorScheme, cssVariables } = _a, safeOptions = __objRest(_a, ["palette", "colorSchemes", "defaultColorScheme", "cssVariables"]);
+  return safeOptions;
+};
+var appTheme = (muiThemeOptions, options) => {
+  const _a = options || {}, { tenantSettings, colors } = _a, otherOptions = __objRest(_a, ["tenantSettings", "colors"]);
+  const baseTheme = __spreadValues({
+    cssVariables: true
+  }, defaultOptions(options));
+  const theme = muiThemeOptions ? deepmerge(deepmerge(defaultTheme, baseTheme), muiThemeOptions) : deepmerge(defaultTheme, baseTheme);
+  return theme;
+};
+var getAntTheme = (options) => {
+  const { colors } = options || {};
+  const currentTheme = document.documentElement.getAttribute("data-theme") || "dark";
+  const cssVars = getAllCssVariablesFromStyleSheets(":root");
+  const resolve = (colorKey) => {
+    const suffixed = `--${colorKey}--${currentTheme}`;
+    if (colors == null ? void 0 : colors[`${colorKey}--${currentTheme}`]) {
+      return colors[`${colorKey}--${currentTheme}`];
+    }
+    if (cssVars[suffixed]) {
+      return cssVars[suffixed];
+    }
+    if (cssVars[`--${colorKey}`]) {
+      return cssVars[`--${colorKey}`];
+    }
+    return void 0;
   };
-  return n ? g(g(u, l), n) : g(u, l);
-}, k = (n) => {
-  const { colors: c } = n || {}, a = document.documentElement.getAttribute("data-theme") || "dark", e = h(":root"), o = (r) => {
-    const i = `--${r}--${a}`;
-    if (c?.[`${r}--${a}`])
-      return c[`${r}--${a}`];
-    if (e[i])
-      return e[i];
-    if (e[`--${r}`])
-      return e[`--${r}`];
-  }, l = {
+  const token = {
     // Core
-    colorPrimary: o("btn-bg"),
-    colorSuccess: o("alert-success-bg"),
-    colorWarning: o("alert-warning-bg"),
-    colorError: o("alert-error-bg"),
-    colorInfo: o("alert-info-bg"),
+    colorPrimary: resolve("btn-bg"),
+    colorSuccess: resolve("alert-success-bg"),
+    colorWarning: resolve("alert-warning-bg"),
+    colorError: resolve("alert-error-bg"),
+    colorInfo: resolve("alert-info-bg"),
     // Text
-    colorText: o("text-color"),
-    colorTextSecondary: o("text-light-color"),
-    colorTextDisabled: o("disabled-color"),
+    colorText: resolve("text-color"),
+    colorTextSecondary: resolve("text-light-color"),
+    colorTextDisabled: resolve("disabled-color"),
     // Background
-    colorBgBase: o("bodybg-primary"),
-    colorBgContainer: o("component-bg"),
-    colorBgElevated: o("module-bg"),
-    colorBgLayout: o("body-bg"),
+    colorBgBase: resolve("bodybg-primary"),
+    colorBgContainer: resolve("component-bg"),
+    colorBgElevated: resolve("module-bg"),
+    colorBgLayout: resolve("body-bg"),
     // Borders
-    colorBorder: o("border-color"),
-    colorSplit: o("border-color-split"),
+    colorBorder: resolve("border-color"),
+    colorSplit: resolve("border-color-split"),
     // Typography
     fontSize: 14,
     borderRadius: 6
   };
-  return Object.keys(l).forEach((r) => {
-    l[r] === void 0 && delete l[r];
-  }), {
-    cssVar: !0,
-    hashed: !1,
-    algorithm: a === "dark" ? v.darkAlgorithm : v.defaultAlgorithm,
-    token: l,
+  Object.keys(token).forEach((k) => {
+    if (token[k] === void 0) delete token[k];
+  });
+  return {
+    cssVar: true,
+    hashed: false,
+    algorithm: currentTheme === "dark" ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+    token,
     components: {
       Table: {
-        headerBg: o("table-header-bg"),
-        headerColor: o("table-header-color"),
-        rowHoverBg: o("component-hover-bg"),
-        rowSelectedBg: o("component-active-bg"),
-        borderColor: o("border-color"),
-        footerBg: o("component-bg")
+        headerBg: resolve("table-header-bg"),
+        headerColor: resolve("table-header-color"),
+        rowHoverBg: resolve("component-hover-bg"),
+        rowSelectedBg: resolve("component-active-bg"),
+        borderColor: resolve("border-color"),
+        footerBg: resolve("component-bg")
       },
       Button: {
-        colorPrimary: o("btn-bg"),
-        colorPrimaryHover: o("highlight-color"),
-        colorPrimaryActive: o("btn-active-bg"),
-        defaultBg: o("secondary-color"),
-        defaultColor: o("text-color"),
-        defaultBorderColor: o("border-color")
+        colorPrimary: resolve("btn-bg"),
+        colorPrimaryHover: resolve("highlight-color"),
+        colorPrimaryActive: resolve("btn-active-bg"),
+        defaultBg: resolve("secondary-color"),
+        defaultColor: resolve("text-color"),
+        defaultBorderColor: resolve("border-color")
       },
       Input: {
-        colorBgContainer: o("component-bg"),
-        colorBorder: o("border-color"),
-        colorText: o("text-color"),
-        activeBorderColor: o("primary-color"),
-        hoverBorderColor: o("primary-color")
+        colorBgContainer: resolve("component-bg"),
+        colorBorder: resolve("border-color"),
+        colorText: resolve("text-color"),
+        activeBorderColor: resolve("primary-color"),
+        hoverBorderColor: resolve("primary-color")
       },
       Select: {
-        colorBgContainer: o("component-bg"),
-        colorBorder: o("border-color"),
-        colorText: o("text-color")
+        colorBgContainer: resolve("component-bg"),
+        colorBorder: resolve("border-color"),
+        colorText: resolve("text-color")
       },
       Dropdown: {
-        colorBgElevated: o("component-bg"),
-        colorText: o("text-color")
+        colorBgElevated: resolve("component-bg"),
+        colorText: resolve("text-color")
       },
       Modal: {
-        contentBg: o("component-bg"),
-        headerBg: o("component-bg"),
-        titleColor: o("text-color")
+        contentBg: resolve("component-bg"),
+        headerBg: resolve("component-bg"),
+        titleColor: resolve("text-color")
       },
       Layout: {
-        headerBg: o("primary-color"),
-        bodyBg: o("bodybg-primary"),
-        siderBg: o("sidebar-bg")
+        headerBg: resolve("primary-color"),
+        bodyBg: resolve("bodybg-primary"),
+        siderBg: resolve("sidebar-bg")
       },
       Menu: {
         itemBg: "transparent",
-        itemColor: o("text-color"),
-        itemHoverBg: o("component-hover-bg"),
-        itemSelectedBg: o("component-active-bg"),
-        itemSelectedColor: o("highlight-color")
+        itemColor: resolve("text-color"),
+        itemHoverBg: resolve("component-hover-bg"),
+        itemSelectedBg: resolve("component-active-bg"),
+        itemSelectedColor: resolve("highlight-color")
       },
       Card: {
-        colorBgContainer: o("component-bg"),
-        colorBorderSecondary: o("border-color")
+        colorBgContainer: resolve("component-bg"),
+        colorBorderSecondary: resolve("border-color")
       },
       Tooltip: {
-        colorBgSpotlight: o("module-bg"),
-        colorTextLightSolid: o("text-color")
+        colorBgSpotlight: resolve("module-bg"),
+        colorTextLightSolid: resolve("text-color")
       },
       Tabs: {
-        itemColor: o("text-color"),
-        itemSelectedColor: o("highlight-color"),
-        inkBarColor: o("highlight-color")
+        itemColor: resolve("text-color"),
+        itemSelectedColor: resolve("highlight-color"),
+        inkBarColor: resolve("highlight-color")
       }
     }
   };
 };
+var index_default = appTheme;
 export {
-  M as appTheme,
-  M as default,
-  x as defaultComponentOverrides,
-  p as defaultOptions,
-  k as getAntTheme
+  appTheme,
+  index_default as default,
+  defaultComponentOverrides,
+  defaultOptions,
+  getAntTheme
 };

package/package.json

@@ -1,42 +1,43 @@
 {
-  "name": "@dashadmin/dash-styles",
-  "version": "1.3.25",
-  "private": false,
-  "main": "dist/index.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js"
-    },
-    "./src/*": {
-      "import": "./dist/*.js"
-    },
-    "./dash.less": {
-      "import": "./dist/dash.less"
-    },
-    "./styles/*": {
-      "import": "./dist/styles/*"
-    }
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "vite": "^5.2.0",
-    "rollup": "^4.0.0"
-  },
-  "dependencies": {
-    "@mui/utils": "^7.3.10",
-    "react-admin": "5.14.7"
-  },
-  "peerDependencies": {
-    "antd": ">=5.0.0"
-  },
-  "publishConfig": {
-    "name": "@dashadmin/dash-styles",
-    "access": "public"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rm -rf dist && node ../dash-build/compile.mjs && vite build"
-  }
-}
+	"name": "@dashadmin/dash-styles",
+	"version": "1.3.26",
+	"main": "dist/index.cjs",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"require": "./dist/index.cjs"
+		},
+		"./dash.less": {
+			"import": "./src/dash.less",
+			"require": "./src/dash.less"
+		},
+		"./styles/*": {
+			"import": "./src/styles/*",
+			"require": "./src/styles/*"
+		}
+	},
+	"license": "MIT",
+	"devDependencies": {},
+	"dependencies": {
+		"@mui/utils": "^7.3.10",
+		"react-admin": "5.14.6"
+	},
+	"peerDependencies": {
+		"antd": ">=5.0.0"
+	},
+	"module": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org"
+	},
+	"scripts": {
+		"build": "tsup"
+	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module"
+}

package/{dist → src}/dash-css-transformer.less

@@ -376,8 +376,11 @@
   // Widths
   --min-body-width: 575px;
   --sidebar-mini-drawer-width: 100px;
-  --sidebar-large-width: 255px;
-  --sidebar-small-width: 60px;
+  // Layout dimensions are NOT runtime-injected like colors; they must reference the
+  // LESS vars so per-app overrides in apps/<app>/src/dash-variables.less take effect
+  // (the Vite `additionalData` imports dash defaults -> app overrides -> this transformer).
+  --sidebar-large-width: @sidebar-large-width;
+  --sidebar-small-width: @sidebar-small-width;
   --sidebar-horizontal-height: 120px;
 
   --app-sidebar-width: 230px;

package/src/helpers/getAllCssVariablesFromStyleSheets.tsx

@@ -0,0 +1,46 @@
+const getAllCssVariablesFromStyleSheets = (selector: string) => {
+
+        const cssVariables = {};
+
+        // Loop through all style sheets
+        for (let i = 0; i < document.styleSheets.length; i++) {
+            try {
+                const styleSheet = document.styleSheets[i];
+                // Skip if the stylesheet is from a different origin and can't be accessed
+                if (!styleSheet.cssRules) continue;
+
+                // Loop through all CSS rules in the stylesheet
+                for (let j = 0; j < styleSheet.cssRules.length; j++) {
+                    const rule = styleSheet.cssRules[j];
+
+                    // Check if it's a style rule (type 1)
+
+                    /* @ts-ignore */
+                    if (rule.selectorText === selector) {
+
+                        /* @ts-ignore */
+                        const style = rule.style;
+
+                        // Loop through all style properties
+                        for (let k = 0; k < style.length; k++) {
+                            const prop = style[k];
+                            if (prop.startsWith('--')) {
+                                //console.log(prop,style.getPropertyValue(prop).trim());
+                                cssVariables[prop] = style.getPropertyValue(prop).trim();
+                            }
+                        }
+                    }
+
+                }
+            } catch (e) {
+                // Skip cross-origin stylesheets that throw security errors
+                console.warn('Could not access stylesheet:', e);
+            }
+        }
+
+
+        return cssVariables;
+    };
+
+
+    export default getAllCssVariablesFromStyleSheets;