@trops/dash-core 0.1.566 → 0.1.568

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _typeof from '@babel/runtime/helpers/typeof';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as DashReact from '@trops/dash-react';
-import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, MenuItem, Tag2, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Divider, Caption2, Caption, Caption3, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
+import { isObject, ThemeContext, Modal, FontAwesomeIcon, deepCopy, MainSection, getUUID, getStylesForItem, themeObjects, Heading, SearchInput, ButtonIcon, SubHeading3, InputText, Button, Tag, Button3, Button2, Paragraph, Sidebar, Panel, Stepper, Tag3, Card2, Card3, Heading3, MenuItem3, FormLabel, SelectMenu, Switch, SelectInput, CodeEditorVS, SettingsModal, SubHeading2, tailwindHeightFractions, Menu3, Panel3, ButtonIcon2, DropdownPanel, MenuItem2, DragComponent, ConfirmationModal, DropComponent, getStyleName, capitalizeFirstLetter, colorTypes, isHexColor, deriveShades, getCSSStyleForClassname, Panel2, Heading2, SubHeading, Paragraph2, Paragraph3, MenuItem, Tag2, ButtonIcon3, DashPanel, colorNames, shades, themeVariants, Tabs3, DataList, Checkbox, StatCard, Card, Tabs, Accordion, Alert, Toast, ProgressBar, Toggle, Breadcrumbs, Tabs2, Accordion2, Alert2, Toast2, ProgressBar2, Toggle2, Breadcrumbs2, Accordion3, Alert3, Toast3, ProgressBar3, Toggle3, Breadcrumbs3, ThemeFromUrlPane, TextArea, CodeEditorInline, Icon2, AlgoliaSearchBox, CommandPalette, useSidebar, Divider, Caption2, Caption, Caption3, EmptyState, Navbar, withRouter, Menu as Menu$1 } from '@trops/dash-react';
 export * from '@trops/dash-react';
 export { ThemeContext } from '@trops/dash-react';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -28848,11 +28848,6 @@ var WorkspaceModel = function WorkspaceModel(workspaceItem) {
   return sanitizeWorkspaceObject(workspace);
 };
 
-/**
- * ThemeModel
- *
- */
-
 /**
  * getNextLevel
  * Need to generate the levels for tailwind
@@ -28865,6 +28860,32 @@ function getNextLevel(currentLevel) {
 function invert(shade) {
   return 900 - parseInt(shade, 10);
 }
+
+/**
+ * Build a tailwind class string for the given prefix + type + numeric
+ * shade. Routes to the arbitrary-value syntax (`bg-[var(--type-shade)]`)
+ * when the channel's value is a hex.
+ *
+ * @param {"bg"|"text"|"border"} prefix
+ * @param {string} type             channel name (primary | secondary | …)
+ * @param {number} shade            tailwind shade (100..950)
+ * @param {string} channelValue     either a tailwind color name or a hex
+ * @param {boolean} hover           emit a `hover:` variant
+ */
+function classFor(prefix, type, shade, channelValue) {
+  var hover = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var h = hover ? "hover:" : "";
+  if (isHexColor(channelValue)) {
+    return "".concat(h).concat(prefix, "-[var(--").concat(type, "-").concat(shade, ")]");
+  }
+  return "".concat(h).concat(prefix, "-").concat(channelValue, "-").concat(shade);
+}
+function gradientFor(direction, type, fromShade, viaShade, toShade, channelValue) {
+  if (isHexColor(channelValue)) {
+    return "bg-gradient-to-".concat(direction, " from-[var(--").concat(type, "-").concat(fromShade, ")] via-[var(--").concat(type, "-").concat(viaShade, ")] to-[var(--").concat(type, "-").concat(toShade, ")]");
+  }
+  return "bg-gradient-to-".concat(direction, " from-").concat(channelValue, "-").concat(fromShade, " via-").concat(channelValue, "-").concat(viaShade, " to-").concat(channelValue, "-").concat(toShade);
+}
 var ThemeModel = function ThemeModel() {
   var themeItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   try {
@@ -28916,80 +28937,53 @@ var ThemeModel = function ThemeModel() {
     // iterate over each color type "primary, secondary, tertiary ..."
     // and generate the colors necessary (shades) based on tailwind
     colorTypes.forEach(function (type) {
+      var channelValue = theme[type];
       Object.keys(variants).forEach(function (variant) {
         if (variant in theme === false) {
           theme[variant] = {};
         }
         Object.keys(variants[variant]).forEach(function (shade) {
-          theme[variant]["bg-".concat(type, "-").concat(shade)] = "bg-".concat(theme[type], "-").concat(variants[variant][shade]);
-          theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = "hover:bg-".concat(theme[type], "-").concat(getNextLevel(variants[variant][shade]));
-          theme[variant]["hover-border-".concat(type, "-").concat(shade)] = "hover:border-".concat(theme[type], "-").concat(getNextLevel(variants[variant][shade]));
-          theme[variant]["border-".concat(type, "-").concat(shade)] = "border-".concat(theme[type], "-").concat(variants[variant][shade]);
+          var numShade = variants[variant][shade];
+          var hoverShade = getNextLevel(numShade);
+          var textShade = invert(numShade);
+          theme[variant]["bg-".concat(type, "-").concat(shade)] = classFor("bg", type, numShade, channelValue);
+          theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = classFor("bg", type, hoverShade, channelValue, true);
+          theme[variant]["hover-border-".concat(type, "-").concat(shade)] = classFor("border", type, hoverShade, channelValue, true);
+          theme[variant]["border-".concat(type, "-").concat(shade)] = classFor("border", type, numShade, channelValue);
           // we should be "flipping" these so dark text on light and light on dark...
-          theme[variant]["text-".concat(type, "-").concat(shade)] = "text-".concat(theme[type], "-").concat(invert(variants[variant][shade]));
-          theme[variant]["hover-text-".concat(type, "-").concat(shade)] = "hover:text-".concat(theme[type], "-").concat(invert(variants[variant][shade]));
+          theme[variant]["text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue);
+          theme[variant]["hover-text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue, true);
         });
       });
     });
 
-    // lets try gradients
-
-    // Primary
-
-    theme["dark"]["bg-primary-gradient-right"] = "bg-gradient-to-r from-".concat(theme.primary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.primary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.primary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-primary-gradient-bottom"] = "bg-gradient-to-b from-".concat(theme.primary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.primary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.primary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-primary-gradient-bottom-right"] = "bg-gradient-to-br from-".concat(theme.primary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.primary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.primary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-primary-gradient-bottom-left"] = "bg-gradient-to-bl from-".concat(theme.primary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.primary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.primary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-primary-gradient-left"] = "bg-gradient-to-l from-".concat(theme.primary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.primary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.primary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-primary-gradient-top"] = "bg-gradient-to-t from-".concat(theme.primary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.primary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.primary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-primary-gradient-top-right"] = "bg-gradient-to-tr from-".concat(theme.primary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.primary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.primary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-primary-gradient-top-left"] = "bg-gradient-to-tl from-".concat(theme.primary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.primary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.primary, "-").concat(variants["dark"]["dark"]);
-    theme["light"]["bg-primary-gradient-right"] = "bg-gradient-to-r from-".concat(theme.primary, "-").concat(variants["light"]["medium"], " via-").concat(theme.primary, "-").concat(variants["light"]["medium"], " to-").concat(theme.primary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-primary-gradient-bottom"] = "bg-gradient-to-b from-".concat(theme.primary, "-").concat(variants["light"]["medium"], " via-").concat(theme.primary, "-").concat(variants["light"]["medium"], " to-").concat(theme.primary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-primary-gradient-left"] = "bg-gradient-to-l from-".concat(theme.primary, "-").concat(variants["light"]["medium"], " via-").concat(theme.primary, "-").concat(variants["light"]["medium"], " to-").concat(theme.primary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-primary-gradient-top"] = "bg-gradient-to-t from-".concat(theme.primary, "-").concat(variants["light"]["medium"], " via-").concat(theme.primary, "-").concat(variants["light"]["medium"], " to-").concat(theme.primary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-primary-gradient-top-right"] = "bg-gradient-to-tr from-".concat(theme.primary, "-").concat(variants["light"]["medium"], " via-").concat(theme.primary, "-").concat(variants["light"]["medium"], " to-").concat(theme.primary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-primary-gradient-bottom-right"] = "bg-gradient-to-br from-".concat(theme.primary, "-").concat(variants["light"]["medium"], " via-").concat(theme.primary, "-").concat(variants["light"]["medium"], " to-").concat(theme.primary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-primary-gradient-top-left"] = "bg-gradient-to-tl from-".concat(theme.primary, "-").concat(variants["light"]["medium"], " via-").concat(theme.primary, "-").concat(variants["light"]["medium"], " to-").concat(theme.primary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-primary-gradient-bottom-left"] = "bg-gradient-to-bl from-".concat(theme.primary, "-").concat(variants["light"]["medium"], " via-").concat(theme.primary, "-").concat(variants["light"]["medium"], " to-").concat(theme.primary, "-").concat(variants["light"]["dark"]);
-
-    // Secondary
-
-    theme["dark"]["bg-secondary-gradient-right"] = "bg-gradient-to-r from-".concat(theme.secondary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-secondary-gradient-bottom"] = "bg-gradient-to-b from-".concat(theme.secondary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-secondary-gradient-bottom-right"] = "bg-gradient-to-br from-".concat(theme.secondary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-secondary-gradient-bottom-left"] = "bg-gradient-to-bl from-".concat(theme.secondary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-secondary-gradient-left"] = "bg-gradient-to-l from-".concat(theme.secondary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-secondary-gradient-top"] = "bg-gradient-to-t from-".concat(theme.secondary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-secondary-gradient-top-right"] = "bg-gradient-to-tr from-".concat(theme.secondary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-secondary-gradient-top-left"] = "bg-gradient-to-tl from-".concat(theme.secondary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["dark"]["dark"]);
-    theme["light"]["bg-secondary-gradient-right"] = "bg-gradient-to-r from-".concat(theme.secondary, "-").concat(variants["light"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["light"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-secondary-gradient-bottom"] = "bg-gradient-to-b from-".concat(theme.secondary, "-").concat(variants["light"]["medium"], "  via-").concat(theme.secondary, "-").concat(variants["light"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-secondary-gradient-left"] = "bg-gradient-to-l from-".concat(theme.secondary, "-").concat(variants["light"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["light"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-secondary-gradient-top"] = "bg-gradient-to-t from-".concat(theme.secondary, "-").concat(variants["light"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["light"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-secondary-gradient-top-right"] = "bg-gradient-to-tr from-".concat(theme.secondary, "-").concat(variants["light"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["light"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-secondary-gradient-bottom-right"] = "bg-gradient-to-br from-".concat(theme.secondary, "-").concat(variants["light"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["light"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-secondary-gradient-top-left"] = "bg-gradient-to-tl from-".concat(theme.secondary, "-").concat(variants["light"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["light"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-secondary-gradient-bottom-left"] = "bg-gradient-to-bl from-".concat(theme.secondary, "-").concat(variants["light"]["medium"], " via-").concat(theme.secondary, "-").concat(variants["light"]["medium"], " to-").concat(theme.secondary, "-").concat(variants["light"]["dark"]);
-
-    // Tertiary
-
-    theme["dark"]["bg-tertiary-gradient-right"] = "bg-gradient-to-r from-".concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-tertiary-gradient-bottom"] = "bg-gradient-to-b from-".concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-tertiary-gradient-bottom-right"] = "bg-gradient-to-br from-".concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-tertiary-gradient-bottom-left"] = "bg-gradient-to-bl from-".concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-tertiary-gradient-left"] = "bg-gradient-to-l from-".concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-tertiary-gradient-top"] = "bg-gradient-to-t from-".concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-tertiary-gradient-top-right"] = "bg-gradient-to-tr from-".concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["dark"]["dark"]);
-    theme["dark"]["bg-tertiary-gradient-top-left"] = "bg-gradient-to-tl from-".concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["dark"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["dark"]["dark"]);
-    theme["light"]["bg-tertiary-gradient-right"] = "bg-gradient-to-r from-".concat(theme.tertiary, "-").concat(variants["light"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["light"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-tertiary-gradient-bottom"] = "bg-gradient-to-b from-".concat(theme.tertiary, "-").concat(variants["light"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["light"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-tertiary-gradient-left"] = "bg-gradient-to-l from-".concat(theme.tertiary, "-").concat(variants["light"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["light"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-tertiary-gradient-top"] = "bg-gradient-to-t from-".concat(theme.tertiary, "-").concat(variants["light"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["light"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-tertiary-gradient-top-right"] = "bg-gradient-to-tr from-".concat(theme.tertiary, "-").concat(variants["light"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["light"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-tertiary-gradient-bottom-right"] = "bg-gradient-to-br from-".concat(theme.tertiary, "-").concat(variants["light"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["light"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-tertiary-gradient-top-left"] = "bg-gradient-to-tl from-".concat(theme.tertiary, "-").concat(variants["light"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["light"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["light"]["dark"]);
-    theme["light"]["bg-tertiary-gradient-bottom-left"] = "bg-gradient-to-bl from-".concat(theme.tertiary, "-").concat(variants["light"]["medium"], " via-").concat(theme.tertiary, "-").concat(variants["light"]["medium"], " to-").concat(theme.tertiary, "-").concat(variants["light"]["dark"]);
+    // Gradients — primary/secondary/tertiary, 8 directions × 2 variants.
+    // Each gradient goes from the variant's medium shade via medium to dark.
+    // For hex channels, the gradient stops use `from-[var(--type-shade)]` etc.
+    var gradientDirs = {
+      right: "r",
+      bottom: "b",
+      "bottom-right": "br",
+      "bottom-left": "bl",
+      left: "l",
+      top: "t",
+      "top-right": "tr",
+      "top-left": "tl"
+    };
+    ["primary", "secondary", "tertiary"].forEach(function (type) {
+      var channelValue = theme[type];
+      Object.keys(variants).forEach(function (variant) {
+        var fromShade = variants[variant]["medium"];
+        var viaShade = variants[variant]["medium"];
+        var toShade = variants[variant]["dark"];
+        Object.entries(gradientDirs).forEach(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 2),
+            suffix = _ref2[0],
+            dirCode = _ref2[1];
+          theme[variant]["bg-".concat(type, "-gradient-").concat(suffix)] = gradientFor(dirCode, type, fromShade, viaShade, toShade, channelValue);
+        });
+      });
+    });
 
     // now for the overrides!
     if (overrideDark !== null) {
@@ -29023,10 +29017,39 @@ var ThemeModel = function ThemeModel() {
     // Added outside the variant loop to avoid generating invalid text/border
     // classes (invert(950) would be negative).
     colorTypes.forEach(function (type) {
-      theme["dark"]["bg-".concat(type, "-darkest")] = "bg-".concat(theme[type], "-950");
-      theme["light"]["bg-".concat(type, "-darkest")] = "bg-".concat(theme[type], "-50");
+      var channelValue = theme[type];
+      theme["dark"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 950, channelValue);
+      theme["light"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 50, channelValue);
     });
 
+    // Accumulate CSS custom properties for any hex-color channels.
+    // ThemePreviewProvider reads `currentTheme.cssVars` and writes
+    // these to `document.documentElement.style` on theme activation
+    // (PRD `arbitrary-color-themes.md` FR-003).
+    var cssVarsAll = {};
+    var hasAnyHex = false;
+    colorTypes.forEach(function (type) {
+      var channelValue = theme[type];
+      if (isHexColor(channelValue)) {
+        hasAnyHex = true;
+        var shades = deriveShades(channelValue);
+        if (shades) {
+          for (var _i = 0, _Object$entries = Object.entries(shades); _i < _Object$entries.length; _i++) {
+            var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+              shade = _Object$entries$_i[0],
+              hex = _Object$entries$_i[1];
+            cssVarsAll["--".concat(type, "-").concat(shade)] = hex;
+          }
+        }
+      }
+    });
+    if (hasAnyHex) {
+      // Attach to both variants so whichever is active on theme switch
+      // delivers the same CSS variable set to :root.
+      theme["dark"].cssVars = cssVarsAll;
+      theme["light"].cssVars = cssVarsAll;
+    }
+
     // transparent colors
     theme["dark"]["bg-none"] = "bg-transparent";
     theme["dark"]["border-none"] = "border-transparent";
@@ -59997,10 +60020,7 @@ function ListenersTab(_ref0) {
     className: "flex flex-col gap-3 h-full min-h-0",
     children: /*#__PURE__*/jsxs("div", {
       className: "flex flex-row gap-3 flex-1 min-h-0",
-      children: [/*#__PURE__*/jsxs(Card2, {
-        padding: "",
-        shadow: "",
-        rounded: "rounded-lg",
+      children: [/*#__PURE__*/jsxs("div", {
         className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
         children: [/*#__PURE__*/jsx("div", {
           className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
@@ -60045,10 +60065,7 @@ function ListenersTab(_ref0) {
           onAdd: onAdd,
           onRemove: onRemove
         })]
-      }) : /*#__PURE__*/jsx(Card2, {
-        padding: "",
-        shadow: "",
-        rounded: "rounded-lg",
+      }) : /*#__PURE__*/jsx("div", {
         className: "flex-1 min-w-0 flex items-center justify-center text-sm opacity-60",
         children: "Pick a widget on the left to wire its handlers."
       })]
@@ -60083,45 +60100,47 @@ function HandlersColumn(_ref10) {
     }
     return m;
   }, [myWiring]);
-  return /*#__PURE__*/jsxs(Card2, {
-    padding: "",
-    shadow: "",
-    rounded: "rounded-lg",
-    className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
-    children: [/*#__PURE__*/jsx("div", {
-      className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
-      children: "Event Handlers"
-    }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx("div", {
-      className: "overflow-y-auto flex-1",
-      children: receiver.eventHandlers.length === 0 ? /*#__PURE__*/jsx("div", {
-        className: "text-xs opacity-50 text-center py-6 px-3",
-        children: "This widget declares no event handlers."
-      }) : receiver.eventHandlers.map(function (h) {
-        var isActive = h === selectedHandler;
-        var count = countsByHandler.get(h) || 0;
-        return /*#__PURE__*/jsxs("button", {
-          type: "button",
-          onClick: function onClick() {
-            return onSelectHandler(h);
-          },
-          className: "w-full text-left px-3 py-2 text-sm flex items-center justify-between gap-2 border-l-2 ".concat(isActive ? "bg-indigo-900/30 border-indigo-400" : "border-transparent hover:bg-white/5"),
-          children: [/*#__PURE__*/jsxs("span", {
-            className: "flex items-center gap-2 min-w-0",
-            children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-              icon: "bolt",
-              className: "h-3 w-3 opacity-60 flex-shrink-0"
-            }), /*#__PURE__*/jsx("code", {
-              className: "truncate",
-              children: h
+  return (
+    /*#__PURE__*/
+    // Plain <div> wrapper — Card2 reads as washed-out against the
+    // modal's dark chrome. See ListenersTab + ProvidersTab fix.
+    jsxs("div", {
+      className: "w-56 flex-shrink-0 overflow-hidden flex flex-col",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "px-3 py-2 text-xs font-semibold opacity-50 uppercase tracking-wider",
+        children: "Event Handlers"
+      }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx("div", {
+        className: "overflow-y-auto flex-1",
+        children: receiver.eventHandlers.length === 0 ? /*#__PURE__*/jsx("div", {
+          className: "text-xs opacity-50 text-center py-6 px-3",
+          children: "This widget declares no event handlers."
+        }) : receiver.eventHandlers.map(function (h) {
+          var isActive = h === selectedHandler;
+          var count = countsByHandler.get(h) || 0;
+          return /*#__PURE__*/jsxs("button", {
+            type: "button",
+            onClick: function onClick() {
+              return onSelectHandler(h);
+            },
+            className: "w-full text-left px-3 py-2 text-sm flex items-center justify-between gap-2 border-l-2 ".concat(isActive ? "bg-indigo-900/30 border-indigo-400" : "border-transparent hover:bg-white/5"),
+            children: [/*#__PURE__*/jsxs("span", {
+              className: "flex items-center gap-2 min-w-0",
+              children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                icon: "bolt",
+                className: "h-3 w-3 opacity-60 flex-shrink-0"
+              }), /*#__PURE__*/jsx("code", {
+                className: "truncate",
+                children: h
+              })]
+            }), /*#__PURE__*/jsx("span", {
+              className: "text-xs opacity-60 flex-shrink-0",
+              children: count
             })]
-          }), /*#__PURE__*/jsx("span", {
-            className: "text-xs opacity-60 flex-shrink-0",
-            children: count
-          })]
-        }, h);
-      })
-    })]
-  });
+          }, h);
+        })
+      })]
+    })
+  );
 }
 
 /**
@@ -60172,10 +60191,7 @@ function EventsColumn(_ref11) {
     return w.isOrphan;
   });
   if (!handlerName) {
-    return /*#__PURE__*/jsx(Card2, {
-      padding: "",
-      shadow: "",
-      rounded: "rounded-lg",
+    return /*#__PURE__*/jsx("div", {
       className: "flex-1 min-w-0 flex items-center justify-center text-sm opacity-60",
       children: "Select a handler to view available events."
     });
@@ -60204,63 +60220,64 @@ function EventsColumn(_ref11) {
   var emittersForList = emitters.filter(function (e) {
     return !(e.component === receiver.component && String(e.itemId) === String(receiver.itemId));
   });
-  return /*#__PURE__*/jsxs(Card2, {
-    padding: "",
-    shadow: "",
-    rounded: "rounded-lg",
-    className: "flex-1 min-w-0 overflow-hidden flex flex-col",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "flex-shrink-0 px-4 py-2 text-xs opacity-60",
-      children: ["Check an event to fire ", /*#__PURE__*/jsx("code", {
-        className: "text-xs",
-        children: handlerName
-      }), " on", " ", /*#__PURE__*/jsx("span", {
-        className: "font-medium",
-        children: receiver.label
-      }), "."]
-    }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx("div", {
-      className: "flex-1 overflow-y-auto p-4 space-y-5",
-      children: emittersForList.length === 0 ? /*#__PURE__*/jsx("div", {
-        className: "text-sm opacity-60",
-        children: "No other widgets in this dashboard emit events."
-      }) : emittersForList.map(function (e) {
-        return /*#__PURE__*/jsxs("div", {
-          className: "space-y-1",
-          children: [/*#__PURE__*/jsxs("div", {
-            className: "flex flex-col gap-0.5 mb-1",
-            children: [/*#__PURE__*/jsx("div", {
-              className: "text-sm font-semibold",
-              children: e.label
-            }), (e.widgetRef || e.component) && /*#__PURE__*/jsx(Caption, {
-              block: true,
-              className: "font-mono truncate",
-              children: (e.widgetRef || e.component) + (e.itemId != null ? "[".concat(e.itemId, "]") : "")
-            })]
-          }), e.events.map(function (eventName) {
-            var key = "".concat(e.component, "|").concat(e.itemId, "|").concat(eventName);
-            var selected = wiredKeys.has(key);
-            return /*#__PURE__*/jsxs("label", {
-              className: "flex items-center gap-3 px-3 py-1.5 rounded-md cursor-pointer text-sm ".concat(selected ? "opacity-100" : "opacity-70 hover:opacity-100"),
-              children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
-                icon: selected ? "square-check" : "square",
-                className: "h-4 w-4 flex-shrink-0",
-                onClick: function onClick(ev) {
-                  ev.preventDefault();
-                  toggle({
-                    sourceComponent: e.component,
-                    sourceItemId: e.itemId,
-                    eventName: eventName
-                  });
-                }
-              }), /*#__PURE__*/jsx("span", {
-                children: eventName
+  return (
+    /*#__PURE__*/
+    // Plain <div> — Card2's washed-out fill clashes with the modal chrome.
+    jsxs("div", {
+      className: "flex-1 min-w-0 overflow-hidden flex flex-col",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex-shrink-0 px-4 py-2 text-xs opacity-60",
+        children: ["Check an event to fire ", /*#__PURE__*/jsx("code", {
+          className: "text-xs",
+          children: handlerName
+        }), " on", " ", /*#__PURE__*/jsx("span", {
+          className: "font-medium",
+          children: receiver.label
+        }), "."]
+      }), /*#__PURE__*/jsx(Divider, {}), /*#__PURE__*/jsx("div", {
+        className: "flex-1 overflow-y-auto p-4 space-y-5",
+        children: emittersForList.length === 0 ? /*#__PURE__*/jsx("div", {
+          className: "text-sm opacity-60",
+          children: "No other widgets in this dashboard emit events."
+        }) : emittersForList.map(function (e) {
+          return /*#__PURE__*/jsxs("div", {
+            className: "space-y-1",
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "flex flex-col gap-0.5 mb-1",
+              children: [/*#__PURE__*/jsx("div", {
+                className: "text-sm font-semibold",
+                children: e.label
+              }), (e.widgetRef || e.component) && /*#__PURE__*/jsx(Caption, {
+                block: true,
+                className: "font-mono truncate",
+                children: (e.widgetRef || e.component) + (e.itemId != null ? "[".concat(e.itemId, "]") : "")
               })]
-            }, key);
-          })]
-        }, e.key || "".concat(e.component, "|").concat(e.itemId));
-      })
-    })]
-  });
+            }), e.events.map(function (eventName) {
+              var key = "".concat(e.component, "|").concat(e.itemId, "|").concat(eventName);
+              var selected = wiredKeys.has(key);
+              return /*#__PURE__*/jsxs("label", {
+                className: "flex items-center gap-3 px-3 py-1.5 rounded-md cursor-pointer text-sm ".concat(selected ? "opacity-100" : "opacity-70 hover:opacity-100"),
+                children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+                  icon: selected ? "square-check" : "square",
+                  className: "h-4 w-4 flex-shrink-0",
+                  onClick: function onClick(ev) {
+                    ev.preventDefault();
+                    toggle({
+                      sourceComponent: e.component,
+                      sourceItemId: e.itemId,
+                      eventName: eventName
+                    });
+                  }
+                }), /*#__PURE__*/jsx("span", {
+                  children: eventName
+                })]
+              }, key);
+            })]
+          }, e.key || "".concat(e.component, "|").concat(e.itemId));
+        })
+      })]
+    })
+  );
 }
 
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }