@trops/dash-core 0.1.567 → 0.1.569

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, TAILWIND_PALETTE, 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,55 @@ 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);
+}
+
+/**
+ * CSS color value (hex literal or `var(...)` reference) for the same
+ * (type, shade, channelValue) tuple `classFor` resolves to a Tailwind
+ * className. Inline-style consumers read these via
+ * `currentTheme.cssValue[tokenName]` — see PRD US-007.
+ *
+ * Named channels look up the hex from TAILWIND_PALETTE. Hex channels
+ * produce a `var(--{type}-{shade})` reference that resolves against
+ * the CSS custom properties ThemePreviewProvider writes to :root.
+ *
+ * Returns null for unknown named-color families or shades — caller
+ * falls back to className-only reactivity for that token.
+ */
+function cssValueFor(type, shade, channelValue) {
+  if (isHexColor(channelValue)) {
+    return "var(--".concat(type, "-").concat(shade, ")");
+  }
+  var family = TAILWIND_PALETTE && TAILWIND_PALETTE[channelValue];
+  if (!family) return null;
+  var hex = family[shade] || family[String(shade)];
+  return hex || null;
+}
+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 +28960,62 @@ 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] = {};
         }
+        if (!theme[variant].cssValue) {
+          theme[variant].cssValue = {};
+        }
         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].cssValue["bg-".concat(type, "-").concat(shade)] = cssValueFor(type, numShade, channelValue);
+          theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = classFor("bg", type, hoverShade, channelValue, true);
+          theme[variant].cssValue["hover-bg-".concat(type, "-").concat(shade)] = cssValueFor(type, hoverShade, channelValue);
+          theme[variant]["hover-border-".concat(type, "-").concat(shade)] = classFor("border", type, hoverShade, channelValue, true);
+          theme[variant].cssValue["hover-border-".concat(type, "-").concat(shade)] = cssValueFor(type, hoverShade, channelValue);
+          theme[variant]["border-".concat(type, "-").concat(shade)] = classFor("border", type, numShade, channelValue);
+          theme[variant].cssValue["border-".concat(type, "-").concat(shade)] = cssValueFor(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].cssValue["text-".concat(type, "-").concat(shade)] = cssValueFor(type, textShade, channelValue);
+          theme[variant]["hover-text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue, true);
+          theme[variant].cssValue["hover-text-".concat(type, "-").concat(shade)] = cssValueFor(type, textShade, channelValue);
         });
       });
     });
 
-    // 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,9 +29049,40 @@ 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["dark"].cssValue["bg-".concat(type, "-darkest")] = cssValueFor(type, 950, channelValue);
+      theme["light"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 50, channelValue);
+      theme["light"].cssValue["bg-".concat(type, "-darkest")] = cssValueFor(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";
@@ -29038,6 +29095,17 @@ var ThemeModel = function ThemeModel() {
     theme["light"]["hover-border-none"] = "hover:border-transparent";
     theme["light"]["hover-bg-none"] = "hover:bg-transparent";
     theme["light"]["hover-text-none"] = "hover:text-transparent";
+
+    // Mirror the transparent tokens into cssValue so inline-style
+    // consumers can read borderless/transparent surfaces from the
+    // same map as colored ones.
+    ["dark", "light"].forEach(function (variant) {
+      theme[variant].cssValue["bg-none"] = "transparent";
+      theme[variant].cssValue["border-none"] = "transparent";
+      theme[variant].cssValue["hover-bg-none"] = "transparent";
+      theme[variant].cssValue["hover-border-none"] = "transparent";
+      theme[variant].cssValue["hover-text-none"] = "transparent";
+    });
     return theme;
   } catch (e) {
     return {};