@trops/dash-core 0.1.567 → 0.1.569

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -28866,11 +28866,6 @@ var WorkspaceModel = function WorkspaceModel(workspaceItem) {
28866
28866
  return sanitizeWorkspaceObject(workspace);
28867
28867
  };
28868
28868
 
28869
- /**
28870
- * ThemeModel
28871
- *
28872
- */
28873
-
28874
28869
  /**
28875
28870
  * getNextLevel
28876
28871
  * Need to generate the levels for tailwind
@@ -28883,6 +28878,55 @@ function getNextLevel(currentLevel) {
28883
28878
  function invert(shade) {
28884
28879
  return 900 - parseInt(shade, 10);
28885
28880
  }
28881
+
28882
+ /**
28883
+ * Build a tailwind class string for the given prefix + type + numeric
28884
+ * shade. Routes to the arbitrary-value syntax (`bg-[var(--type-shade)]`)
28885
+ * when the channel's value is a hex.
28886
+ *
28887
+ * @param {"bg"|"text"|"border"} prefix
28888
+ * @param {string} type channel name (primary | secondary | …)
28889
+ * @param {number} shade tailwind shade (100..950)
28890
+ * @param {string} channelValue either a tailwind color name or a hex
28891
+ * @param {boolean} hover emit a `hover:` variant
28892
+ */
28893
+ function classFor(prefix, type, shade, channelValue) {
28894
+ var hover = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
28895
+ var h = hover ? "hover:" : "";
28896
+ if (DashReact.isHexColor(channelValue)) {
28897
+ return "".concat(h).concat(prefix, "-[var(--").concat(type, "-").concat(shade, ")]");
28898
+ }
28899
+ return "".concat(h).concat(prefix, "-").concat(channelValue, "-").concat(shade);
28900
+ }
28901
+
28902
+ /**
28903
+ * CSS color value (hex literal or `var(...)` reference) for the same
28904
+ * (type, shade, channelValue) tuple `classFor` resolves to a Tailwind
28905
+ * className. Inline-style consumers read these via
28906
+ * `currentTheme.cssValue[tokenName]` — see PRD US-007.
28907
+ *
28908
+ * Named channels look up the hex from TAILWIND_PALETTE. Hex channels
28909
+ * produce a `var(--{type}-{shade})` reference that resolves against
28910
+ * the CSS custom properties ThemePreviewProvider writes to :root.
28911
+ *
28912
+ * Returns null for unknown named-color families or shades — caller
28913
+ * falls back to className-only reactivity for that token.
28914
+ */
28915
+ function cssValueFor(type, shade, channelValue) {
28916
+ if (DashReact.isHexColor(channelValue)) {
28917
+ return "var(--".concat(type, "-").concat(shade, ")");
28918
+ }
28919
+ var family = DashReact.TAILWIND_PALETTE && DashReact.TAILWIND_PALETTE[channelValue];
28920
+ if (!family) return null;
28921
+ var hex = family[shade] || family[String(shade)];
28922
+ return hex || null;
28923
+ }
28924
+ function gradientFor(direction, type, fromShade, viaShade, toShade, channelValue) {
28925
+ if (DashReact.isHexColor(channelValue)) {
28926
+ return "bg-gradient-to-".concat(direction, " from-[var(--").concat(type, "-").concat(fromShade, ")] via-[var(--").concat(type, "-").concat(viaShade, ")] to-[var(--").concat(type, "-").concat(toShade, ")]");
28927
+ }
28928
+ return "bg-gradient-to-".concat(direction, " from-").concat(channelValue, "-").concat(fromShade, " via-").concat(channelValue, "-").concat(viaShade, " to-").concat(channelValue, "-").concat(toShade);
28929
+ }
28886
28930
  var ThemeModel = function ThemeModel() {
28887
28931
  var themeItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
28888
28932
  try {
@@ -28934,80 +28978,62 @@ var ThemeModel = function ThemeModel() {
28934
28978
  // iterate over each color type "primary, secondary, tertiary ..."
28935
28979
  // and generate the colors necessary (shades) based on tailwind
28936
28980
  DashReact.colorTypes.forEach(function (type) {
28981
+ var channelValue = theme[type];
28937
28982
  Object.keys(variants).forEach(function (variant) {
28938
28983
  if (variant in theme === false) {
28939
28984
  theme[variant] = {};
28940
28985
  }
28986
+ if (!theme[variant].cssValue) {
28987
+ theme[variant].cssValue = {};
28988
+ }
28941
28989
  Object.keys(variants[variant]).forEach(function (shade) {
28942
- theme[variant]["bg-".concat(type, "-").concat(shade)] = "bg-".concat(theme[type], "-").concat(variants[variant][shade]);
28943
- theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = "hover:bg-".concat(theme[type], "-").concat(getNextLevel(variants[variant][shade]));
28944
- theme[variant]["hover-border-".concat(type, "-").concat(shade)] = "hover:border-".concat(theme[type], "-").concat(getNextLevel(variants[variant][shade]));
28945
- theme[variant]["border-".concat(type, "-").concat(shade)] = "border-".concat(theme[type], "-").concat(variants[variant][shade]);
28990
+ var numShade = variants[variant][shade];
28991
+ var hoverShade = getNextLevel(numShade);
28992
+ var textShade = invert(numShade);
28993
+ theme[variant]["bg-".concat(type, "-").concat(shade)] = classFor("bg", type, numShade, channelValue);
28994
+ theme[variant].cssValue["bg-".concat(type, "-").concat(shade)] = cssValueFor(type, numShade, channelValue);
28995
+ theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = classFor("bg", type, hoverShade, channelValue, true);
28996
+ theme[variant].cssValue["hover-bg-".concat(type, "-").concat(shade)] = cssValueFor(type, hoverShade, channelValue);
28997
+ theme[variant]["hover-border-".concat(type, "-").concat(shade)] = classFor("border", type, hoverShade, channelValue, true);
28998
+ theme[variant].cssValue["hover-border-".concat(type, "-").concat(shade)] = cssValueFor(type, hoverShade, channelValue);
28999
+ theme[variant]["border-".concat(type, "-").concat(shade)] = classFor("border", type, numShade, channelValue);
29000
+ theme[variant].cssValue["border-".concat(type, "-").concat(shade)] = cssValueFor(type, numShade, channelValue);
28946
29001
  // we should be "flipping" these so dark text on light and light on dark...
28947
- theme[variant]["text-".concat(type, "-").concat(shade)] = "text-".concat(theme[type], "-").concat(invert(variants[variant][shade]));
28948
- theme[variant]["hover-text-".concat(type, "-").concat(shade)] = "hover:text-".concat(theme[type], "-").concat(invert(variants[variant][shade]));
29002
+ theme[variant]["text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue);
29003
+ theme[variant].cssValue["text-".concat(type, "-").concat(shade)] = cssValueFor(type, textShade, channelValue);
29004
+ theme[variant]["hover-text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue, true);
29005
+ theme[variant].cssValue["hover-text-".concat(type, "-").concat(shade)] = cssValueFor(type, textShade, channelValue);
28949
29006
  });
28950
29007
  });
28951
29008
  });
28952
29009
 
28953
- // lets try gradients
28954
-
28955
- // Primary
28956
-
28957
- 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"]);
28958
- 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"]);
28959
- 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"]);
28960
- 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"]);
28961
- 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"]);
28962
- 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"]);
28963
- 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"]);
28964
- 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"]);
28965
- 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"]);
28966
- 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"]);
28967
- 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"]);
28968
- 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"]);
28969
- 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"]);
28970
- 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"]);
28971
- 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"]);
28972
- 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"]);
28973
-
28974
- // Secondary
28975
-
28976
- 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"]);
28977
- 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"]);
28978
- 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"]);
28979
- 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"]);
28980
- 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"]);
28981
- 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"]);
28982
- 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"]);
28983
- 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"]);
28984
- 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"]);
28985
- 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"]);
28986
- 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"]);
28987
- 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"]);
28988
- 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"]);
28989
- 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"]);
28990
- 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"]);
28991
- 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"]);
28992
-
28993
- // Tertiary
28994
-
28995
- 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"]);
28996
- 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"]);
28997
- 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"]);
28998
- 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"]);
28999
- 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"]);
29000
- 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"]);
29001
- 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"]);
29002
- 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"]);
29003
- 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"]);
29004
- 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"]);
29005
- 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"]);
29006
- 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"]);
29007
- 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"]);
29008
- 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"]);
29009
- 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"]);
29010
- 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"]);
29010
+ // Gradients — primary/secondary/tertiary, 8 directions × 2 variants.
29011
+ // Each gradient goes from the variant's medium shade via medium to dark.
29012
+ // For hex channels, the gradient stops use `from-[var(--type-shade)]` etc.
29013
+ var gradientDirs = {
29014
+ right: "r",
29015
+ bottom: "b",
29016
+ "bottom-right": "br",
29017
+ "bottom-left": "bl",
29018
+ left: "l",
29019
+ top: "t",
29020
+ "top-right": "tr",
29021
+ "top-left": "tl"
29022
+ };
29023
+ ["primary", "secondary", "tertiary"].forEach(function (type) {
29024
+ var channelValue = theme[type];
29025
+ Object.keys(variants).forEach(function (variant) {
29026
+ var fromShade = variants[variant]["medium"];
29027
+ var viaShade = variants[variant]["medium"];
29028
+ var toShade = variants[variant]["dark"];
29029
+ Object.entries(gradientDirs).forEach(function (_ref) {
29030
+ var _ref2 = _slicedToArray(_ref, 2),
29031
+ suffix = _ref2[0],
29032
+ dirCode = _ref2[1];
29033
+ theme[variant]["bg-".concat(type, "-gradient-").concat(suffix)] = gradientFor(dirCode, type, fromShade, viaShade, toShade, channelValue);
29034
+ });
29035
+ });
29036
+ });
29011
29037
 
29012
29038
  // now for the overrides!
29013
29039
  if (overrideDark !== null) {
@@ -29041,9 +29067,40 @@ var ThemeModel = function ThemeModel() {
29041
29067
  // Added outside the variant loop to avoid generating invalid text/border
29042
29068
  // classes (invert(950) would be negative).
29043
29069
  DashReact.colorTypes.forEach(function (type) {
29044
- theme["dark"]["bg-".concat(type, "-darkest")] = "bg-".concat(theme[type], "-950");
29045
- theme["light"]["bg-".concat(type, "-darkest")] = "bg-".concat(theme[type], "-50");
29070
+ var channelValue = theme[type];
29071
+ theme["dark"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 950, channelValue);
29072
+ theme["dark"].cssValue["bg-".concat(type, "-darkest")] = cssValueFor(type, 950, channelValue);
29073
+ theme["light"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 50, channelValue);
29074
+ theme["light"].cssValue["bg-".concat(type, "-darkest")] = cssValueFor(type, 50, channelValue);
29075
+ });
29076
+
29077
+ // Accumulate CSS custom properties for any hex-color channels.
29078
+ // ThemePreviewProvider reads `currentTheme.cssVars` and writes
29079
+ // these to `document.documentElement.style` on theme activation
29080
+ // (PRD `arbitrary-color-themes.md` FR-003).
29081
+ var cssVarsAll = {};
29082
+ var hasAnyHex = false;
29083
+ DashReact.colorTypes.forEach(function (type) {
29084
+ var channelValue = theme[type];
29085
+ if (DashReact.isHexColor(channelValue)) {
29086
+ hasAnyHex = true;
29087
+ var shades = DashReact.deriveShades(channelValue);
29088
+ if (shades) {
29089
+ for (var _i = 0, _Object$entries = Object.entries(shades); _i < _Object$entries.length; _i++) {
29090
+ var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
29091
+ shade = _Object$entries$_i[0],
29092
+ hex = _Object$entries$_i[1];
29093
+ cssVarsAll["--".concat(type, "-").concat(shade)] = hex;
29094
+ }
29095
+ }
29096
+ }
29046
29097
  });
29098
+ if (hasAnyHex) {
29099
+ // Attach to both variants so whichever is active on theme switch
29100
+ // delivers the same CSS variable set to :root.
29101
+ theme["dark"].cssVars = cssVarsAll;
29102
+ theme["light"].cssVars = cssVarsAll;
29103
+ }
29047
29104
 
29048
29105
  // transparent colors
29049
29106
  theme["dark"]["bg-none"] = "bg-transparent";
@@ -29056,6 +29113,17 @@ var ThemeModel = function ThemeModel() {
29056
29113
  theme["light"]["hover-border-none"] = "hover:border-transparent";
29057
29114
  theme["light"]["hover-bg-none"] = "hover:bg-transparent";
29058
29115
  theme["light"]["hover-text-none"] = "hover:text-transparent";
29116
+
29117
+ // Mirror the transparent tokens into cssValue so inline-style
29118
+ // consumers can read borderless/transparent surfaces from the
29119
+ // same map as colored ones.
29120
+ ["dark", "light"].forEach(function (variant) {
29121
+ theme[variant].cssValue["bg-none"] = "transparent";
29122
+ theme[variant].cssValue["border-none"] = "transparent";
29123
+ theme[variant].cssValue["hover-bg-none"] = "transparent";
29124
+ theme[variant].cssValue["hover-border-none"] = "transparent";
29125
+ theme[variant].cssValue["hover-text-none"] = "transparent";
29126
+ });
29059
29127
  return theme;
29060
29128
  } catch (e) {
29061
29129
  return {};