@trops/dash-core 0.1.567 → 0.1.568

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.esm.js CHANGED
@@ -2,7 +2,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
2
2
  import _typeof from '@babel/runtime/helpers/typeof';
3
3
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
4
4
  import * as DashReact from '@trops/dash-react';
5
- 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';
5
+ 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';
6
6
  export * from '@trops/dash-react';
7
7
  export { ThemeContext } from '@trops/dash-react';
8
8
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -28848,11 +28848,6 @@ var WorkspaceModel = function WorkspaceModel(workspaceItem) {
28848
28848
  return sanitizeWorkspaceObject(workspace);
28849
28849
  };
28850
28850
 
28851
- /**
28852
- * ThemeModel
28853
- *
28854
- */
28855
-
28856
28851
  /**
28857
28852
  * getNextLevel
28858
28853
  * Need to generate the levels for tailwind
@@ -28865,6 +28860,32 @@ function getNextLevel(currentLevel) {
28865
28860
  function invert(shade) {
28866
28861
  return 900 - parseInt(shade, 10);
28867
28862
  }
28863
+
28864
+ /**
28865
+ * Build a tailwind class string for the given prefix + type + numeric
28866
+ * shade. Routes to the arbitrary-value syntax (`bg-[var(--type-shade)]`)
28867
+ * when the channel's value is a hex.
28868
+ *
28869
+ * @param {"bg"|"text"|"border"} prefix
28870
+ * @param {string} type channel name (primary | secondary | …)
28871
+ * @param {number} shade tailwind shade (100..950)
28872
+ * @param {string} channelValue either a tailwind color name or a hex
28873
+ * @param {boolean} hover emit a `hover:` variant
28874
+ */
28875
+ function classFor(prefix, type, shade, channelValue) {
28876
+ var hover = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
28877
+ var h = hover ? "hover:" : "";
28878
+ if (isHexColor(channelValue)) {
28879
+ return "".concat(h).concat(prefix, "-[var(--").concat(type, "-").concat(shade, ")]");
28880
+ }
28881
+ return "".concat(h).concat(prefix, "-").concat(channelValue, "-").concat(shade);
28882
+ }
28883
+ function gradientFor(direction, type, fromShade, viaShade, toShade, channelValue) {
28884
+ if (isHexColor(channelValue)) {
28885
+ return "bg-gradient-to-".concat(direction, " from-[var(--").concat(type, "-").concat(fromShade, ")] via-[var(--").concat(type, "-").concat(viaShade, ")] to-[var(--").concat(type, "-").concat(toShade, ")]");
28886
+ }
28887
+ return "bg-gradient-to-".concat(direction, " from-").concat(channelValue, "-").concat(fromShade, " via-").concat(channelValue, "-").concat(viaShade, " to-").concat(channelValue, "-").concat(toShade);
28888
+ }
28868
28889
  var ThemeModel = function ThemeModel() {
28869
28890
  var themeItem = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
28870
28891
  try {
@@ -28916,80 +28937,53 @@ var ThemeModel = function ThemeModel() {
28916
28937
  // iterate over each color type "primary, secondary, tertiary ..."
28917
28938
  // and generate the colors necessary (shades) based on tailwind
28918
28939
  colorTypes.forEach(function (type) {
28940
+ var channelValue = theme[type];
28919
28941
  Object.keys(variants).forEach(function (variant) {
28920
28942
  if (variant in theme === false) {
28921
28943
  theme[variant] = {};
28922
28944
  }
28923
28945
  Object.keys(variants[variant]).forEach(function (shade) {
28924
- theme[variant]["bg-".concat(type, "-").concat(shade)] = "bg-".concat(theme[type], "-").concat(variants[variant][shade]);
28925
- theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = "hover:bg-".concat(theme[type], "-").concat(getNextLevel(variants[variant][shade]));
28926
- theme[variant]["hover-border-".concat(type, "-").concat(shade)] = "hover:border-".concat(theme[type], "-").concat(getNextLevel(variants[variant][shade]));
28927
- theme[variant]["border-".concat(type, "-").concat(shade)] = "border-".concat(theme[type], "-").concat(variants[variant][shade]);
28946
+ var numShade = variants[variant][shade];
28947
+ var hoverShade = getNextLevel(numShade);
28948
+ var textShade = invert(numShade);
28949
+ theme[variant]["bg-".concat(type, "-").concat(shade)] = classFor("bg", type, numShade, channelValue);
28950
+ theme[variant]["hover-bg-".concat(type, "-").concat(shade)] = classFor("bg", type, hoverShade, channelValue, true);
28951
+ theme[variant]["hover-border-".concat(type, "-").concat(shade)] = classFor("border", type, hoverShade, channelValue, true);
28952
+ theme[variant]["border-".concat(type, "-").concat(shade)] = classFor("border", type, numShade, channelValue);
28928
28953
  // we should be "flipping" these so dark text on light and light on dark...
28929
- theme[variant]["text-".concat(type, "-").concat(shade)] = "text-".concat(theme[type], "-").concat(invert(variants[variant][shade]));
28930
- theme[variant]["hover-text-".concat(type, "-").concat(shade)] = "hover:text-".concat(theme[type], "-").concat(invert(variants[variant][shade]));
28954
+ theme[variant]["text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue);
28955
+ theme[variant]["hover-text-".concat(type, "-").concat(shade)] = classFor("text", type, textShade, channelValue, true);
28931
28956
  });
28932
28957
  });
28933
28958
  });
28934
28959
 
28935
- // lets try gradients
28936
-
28937
- // Primary
28938
-
28939
- 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"]);
28940
- 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"]);
28941
- 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"]);
28942
- 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"]);
28943
- 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"]);
28944
- 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"]);
28945
- 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"]);
28946
- 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"]);
28947
- 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"]);
28948
- 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"]);
28949
- 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"]);
28950
- 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"]);
28951
- 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"]);
28952
- 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"]);
28953
- 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"]);
28954
- 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"]);
28955
-
28956
- // Secondary
28957
-
28958
- 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"]);
28959
- 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"]);
28960
- 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"]);
28961
- 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"]);
28962
- 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"]);
28963
- 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"]);
28964
- 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"]);
28965
- 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"]);
28966
- 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"]);
28967
- 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"]);
28968
- 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"]);
28969
- 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"]);
28970
- 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"]);
28971
- 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"]);
28972
- 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"]);
28973
- 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"]);
28974
-
28975
- // Tertiary
28976
-
28977
- 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"]);
28978
- 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"]);
28979
- 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"]);
28980
- 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"]);
28981
- 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"]);
28982
- 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"]);
28983
- 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"]);
28984
- 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"]);
28985
- 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"]);
28986
- 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"]);
28987
- 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"]);
28988
- 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"]);
28989
- 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"]);
28990
- 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"]);
28991
- 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"]);
28992
- 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"]);
28960
+ // Gradients — primary/secondary/tertiary, 8 directions × 2 variants.
28961
+ // Each gradient goes from the variant's medium shade via medium to dark.
28962
+ // For hex channels, the gradient stops use `from-[var(--type-shade)]` etc.
28963
+ var gradientDirs = {
28964
+ right: "r",
28965
+ bottom: "b",
28966
+ "bottom-right": "br",
28967
+ "bottom-left": "bl",
28968
+ left: "l",
28969
+ top: "t",
28970
+ "top-right": "tr",
28971
+ "top-left": "tl"
28972
+ };
28973
+ ["primary", "secondary", "tertiary"].forEach(function (type) {
28974
+ var channelValue = theme[type];
28975
+ Object.keys(variants).forEach(function (variant) {
28976
+ var fromShade = variants[variant]["medium"];
28977
+ var viaShade = variants[variant]["medium"];
28978
+ var toShade = variants[variant]["dark"];
28979
+ Object.entries(gradientDirs).forEach(function (_ref) {
28980
+ var _ref2 = _slicedToArray(_ref, 2),
28981
+ suffix = _ref2[0],
28982
+ dirCode = _ref2[1];
28983
+ theme[variant]["bg-".concat(type, "-gradient-").concat(suffix)] = gradientFor(dirCode, type, fromShade, viaShade, toShade, channelValue);
28984
+ });
28985
+ });
28986
+ });
28993
28987
 
28994
28988
  // now for the overrides!
28995
28989
  if (overrideDark !== null) {
@@ -29023,9 +29017,38 @@ var ThemeModel = function ThemeModel() {
29023
29017
  // Added outside the variant loop to avoid generating invalid text/border
29024
29018
  // classes (invert(950) would be negative).
29025
29019
  colorTypes.forEach(function (type) {
29026
- theme["dark"]["bg-".concat(type, "-darkest")] = "bg-".concat(theme[type], "-950");
29027
- theme["light"]["bg-".concat(type, "-darkest")] = "bg-".concat(theme[type], "-50");
29020
+ var channelValue = theme[type];
29021
+ theme["dark"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 950, channelValue);
29022
+ theme["light"]["bg-".concat(type, "-darkest")] = classFor("bg", type, 50, channelValue);
29023
+ });
29024
+
29025
+ // Accumulate CSS custom properties for any hex-color channels.
29026
+ // ThemePreviewProvider reads `currentTheme.cssVars` and writes
29027
+ // these to `document.documentElement.style` on theme activation
29028
+ // (PRD `arbitrary-color-themes.md` FR-003).
29029
+ var cssVarsAll = {};
29030
+ var hasAnyHex = false;
29031
+ colorTypes.forEach(function (type) {
29032
+ var channelValue = theme[type];
29033
+ if (isHexColor(channelValue)) {
29034
+ hasAnyHex = true;
29035
+ var shades = deriveShades(channelValue);
29036
+ if (shades) {
29037
+ for (var _i = 0, _Object$entries = Object.entries(shades); _i < _Object$entries.length; _i++) {
29038
+ var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
29039
+ shade = _Object$entries$_i[0],
29040
+ hex = _Object$entries$_i[1];
29041
+ cssVarsAll["--".concat(type, "-").concat(shade)] = hex;
29042
+ }
29043
+ }
29044
+ }
29028
29045
  });
29046
+ if (hasAnyHex) {
29047
+ // Attach to both variants so whichever is active on theme switch
29048
+ // delivers the same CSS variable set to :root.
29049
+ theme["dark"].cssVars = cssVarsAll;
29050
+ theme["light"].cssVars = cssVarsAll;
29051
+ }
29029
29052
 
29030
29053
  // transparent colors
29031
29054
  theme["dark"]["bg-none"] = "bg-transparent";