@sproutsocial/seeds-react-theme 4.4.0 → 4.5.0

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.
Files changed (12) hide show
  1. package/commonjs/builders/buildCSS.js +12 -4
  2. package/commonjs/builders/utils.js +4 -1
  3. package/dist/theme-all.css +176 -0
  4. package/dist/theme-dark.css +88 -0
  5. package/dist/theme.css +88 -0
  6. package/dist/types/builders/buildCSS.d.ts +5 -0
  7. package/dist/types/builders/buildCSS.d.ts.map +1 -1
  8. package/dist/types/builders/utils.d.ts +6 -0
  9. package/dist/types/builders/utils.d.ts.map +1 -1
  10. package/lib/builders/buildCSS.js +12 -4
  11. package/lib/builders/utils.js +4 -2
  12. package/package.json +6 -1
package/commonjs/builders/buildCSS.js CHANGED
@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.buildCSSVariables = buildCSSVariables;
7
+ exports.generateCombinedCSS = generateCombinedCSS;
7
8
  var _fs = _interopRequireDefault(require("fs"));
8
9
  var _path = _interopRequireDefault(require("path"));
9
- var _theme = _interopRequireDefault(require("../light/theme"));
10
- var _theme2 = _interopRequireDefault(require("../dark/theme"));
10
+ var _theme = _interopRequireDefault(require("../extendedThemes/sproutTheme/light/theme"));
11
+ var _theme2 = _interopRequireDefault(require("../extendedThemes/sproutTheme/dark/theme"));
11
12
  var _utils = require("./utils");
12
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
14
  function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
@@ -26,7 +27,13 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
26
27
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
27
28
  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
28
29
  * Build CSS custom properties (variables) from Seeds theme objects
29
- */
30
+ */ // Source the full production theme (base + extended sproutTheme namespaces:
31
+ // growth, ai, navigation, datePicker, analytics, listening, cardControl, tags),
32
+ // not the base theme alone. The styled-system shim resolves color props to
33
+ // var(--color-...) references and is theme-agnostic, so every namespace must
34
+ // have a real CSS var wherever the shim runs. Both sprout themes spread the
35
+ // base theme, so all non-color fields (space, typography, radii, ...) are
36
+ // unchanged and base color tokens keep identical values.
30
37
  /**
31
38
  * Convert a flat object into CSS custom properties
32
39
  */
@@ -148,7 +155,8 @@ function generateCSSVariables(themeObj, mode) {
148
155
  }
149
156
 
150
157
  /**
151
- * Build a combined CSS file with both light and dark themes
158
+ * Build a combined CSS file with both light and dark themes. Exported so tests
159
+ * can assert the source theme (extended sproutTheme) actually feeds the output.
152
160
  */
153
161
  function generateCombinedCSS() {
154
162
  console.log("Building combined CSS with light and dark themes...");
package/commonjs/builders/utils.js CHANGED
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ exports.abbreviate = abbreviate;
6
7
  exports.filterComplexColors = filterComplexColors;
7
8
  exports.flattenBorderWidths = flattenBorderWidths;
8
9
  exports.flattenColors = flattenColors;
@@ -39,7 +40,9 @@ var ABBREVIATIONS = {
39
40
  };
40
41
 
41
42
  /**
42
- * Apply abbreviation rules to a key
43
+ * Apply abbreviation rules to a single token-path segment. Shared by the CSS
44
+ * var generator (`flattenObject`) and the seeds-react-system-props shim's
45
+ * color-prop fallback, so the `--color-*` names each side produces can't drift.
43
46
  */
44
47
  function abbreviate(key) {
45
48
  return ABBREVIATIONS[key] || key;
package/dist/theme-all.css CHANGED
@@ -424,6 +424,94 @@
424
424
  --color-DATAVIZ_COLORS_MAP-19: #0ca750;
425
425
  --color-DATAVIZ_COLORS_MAP-20: #ba7506;
426
426
  --color-PLACEHOLDER: #c8cccc;
427
+ --color-ai-feature-decorative-primary: #067c7c;
428
+ --color-ai-feature-decorative-secondary: #0c3f89;
429
+ --color-ai-feature-bg-primary: #067c7c;
430
+ --color-ai-feature-bg-secondary: #0c3f89;
431
+ --color-ai-feature-bg-default-primary: #067c7c;
432
+ --color-ai-feature-bg-default-secondary: #0c3f89;
433
+ --color-ai-feature-bg-inverse-primary: #cdf7ef;
434
+ --color-ai-feature-bg-inverse-secondary: #c7dbf9;
435
+ --color-navigation-main-bg-base: #273333;
436
+ --color-navigation-main-bg-overflowGradient: #162020;
437
+ --color-navigation-main-border-base: #162020;
438
+ --color-navigation-secondary-bg-base: #364141;
439
+ --color-navigation-secondary-widget-bg-base: #162020;
440
+ --color-navigation-secondary-accordion-bg-base: #273333;
441
+ --color-navigation-settings-listItem-bg-base: transparent;
442
+ --color-navigation-settings-listItem-bg-hover: #dee1e1;
443
+ --color-navigation-settings-listItem-bg-selected: #FFFFFF;
444
+ --color-navigation-text-base: #FFFFFF;
445
+ --color-navigation-text-hover: #FFFFFF;
446
+ --color-navigation-icon-base: #FFFFFF;
447
+ --color-navigation-icon-hover: #FFFFFF;
448
+ --color-navigation-listItem-bg-base: #364141;
449
+ --color-navigation-listItem-bg-hover: #162020;
450
+ --color-navigation-listItem-bg-selected: #515e5f;
451
+ --color-datePicker-comparison-bg-base: #b0b6b7;
452
+ --color-datePicker-comparison-text-base: #364141;
453
+ --color-analytics-trend-positive: #067c7c;
454
+ --color-analytics-trend-neutral: #364141;
455
+ --color-analytics-trend-negative: #364141;
456
+ --color-analytics-overlay-bg-base: color-mix(in srgb, #FFFFFF, transparent 20%);
457
+ --color-listening-chart-indicator-default-primary: #b0b6b7;
458
+ --color-listening-chart-indicator-default-secondary: #FFFFFF;
459
+ --color-listening-chart-indicator-hover-primary: #162020;
460
+ --color-listening-chart-indicator-hover-secondary: #FFFFFF;
461
+ --color-listening-chart-spike-bg-base: #08c4b2;
462
+ --color-listening-chart-spike-icon-base: #FFFFFF;
463
+ --color-listening-topicTypes-customTopic: #679eff;
464
+ --color-listening-topicTypes-brandHealth: #ff7f6e;
465
+ --color-listening-topicTypes-industryInsights: #75dd66;
466
+ --color-listening-topicTypes-competitiveAnalysis: #ffd943;
467
+ --color-listening-topicTypes-campaignAnalysis: #f282f5;
468
+ --color-listening-topicTypes-eventMonitoring: #33d6e2;
469
+ --color-listening-topicTypes-featuredTopic: #75dd66;
470
+ --color-listening-worldMap-empty: #dee1e1;
471
+ --color-listening-worldMap-q0: #d8d7f9;
472
+ --color-listening-worldMap-q1: #c1c1f7;
473
+ --color-listening-worldMap-q2: #a193f2;
474
+ --color-listening-worldMap-q3: #9180f4;
475
+ --color-listening-worldMap-q4: #816fea;
476
+ --color-listening-worldMap-q5: #6f5ed3;
477
+ --color-listening-worldMap-q6: #5e4eba;
478
+ --color-listening-worldMap-q7: #483a9c;
479
+ --color-growth-carousel-indicator-active: #2b68d3;
480
+ --color-growth-carousel-indicator-inactive: #c8cccc;
481
+ --color-growth-education-decorative-aqua: #0797ae;
482
+ --color-growth-education-decorative-teal: #0b968f;
483
+ --color-growth-opportunity-bg-base: #6f5ed3;
484
+ --color-growth-opportunity-bg-secondary: #273333;
485
+ --color-growth-opportunity-bg-hover: #c1c1f7;
486
+ --color-growth-opportunity-button-primary-base: #6f5ed3;
487
+ --color-growth-opportunity-button-primary-hover: #5e4eba;
488
+ --color-growth-opportunity-badge-bg-base: #d8d7f9;
489
+ --color-growth-opportunity-badge-bg-active: #5e4eba;
490
+ --color-growth-opportunity-badge-icon-base: #6f5ed3;
491
+ --color-growth-opportunity-badge-icon-active: #eaeaf9;
492
+ --color-growth-opportunity-badge-text-base: #6f5ed3;
493
+ --color-growth-opportunity-decorative-green: #0ca750;
494
+ --color-growth-opportunity-decorative-lightAqua: #0797ae;
495
+ --color-growth-opportunity-decorative-darkAqua: #002838;
496
+ --color-growth-opportunity-decorative-purple: #6f5ed3;
497
+ --color-growth-featuredDemo-bg-primary-base: #205bc3;
498
+ --color-growth-featuredDemo-bg-primary-hover: #0c3f89;
499
+ --color-growth-featuredDemo-bg-secondary-base: #5e4eba;
500
+ --color-growth-featuredDemo-bg-secondary-hover: #5e4eba;
501
+ --color-growth-darkModal-bg-base: #002838;
502
+ --color-growth-darkModal-text-base: #FFFFFF;
503
+ --color-growth-darkModal-cards-bg-base: #FFFFFF;
504
+ --color-growth-darkModal-cards-bg-hover: #eaeaf9;
505
+ --color-growth-darkModal-cards-text-base: #364141;
506
+ --color-growth-darkModal-cards-text-hover: #273333;
507
+ --color-growth-darkModal-cards-border-base: #FFFFFF;
508
+ --color-growth-darkModal-cards-border-hover: #6f5ed3;
509
+ --color-growth-user-status-online: #0ca750;
510
+ --color-cardControl-bg-base: #FFFFFF;
511
+ --color-cardControl-bg-selected: #364141;
512
+ --color-cardControl-bg-hover: #f3f4f4;
513
+ --color-cardControl-text-selected: #FFFFFF;
514
+ --color-tags-collections-bg-base: #f3f4f4;
427
515
  --space-0: 0px;
428
516
  --space-100: 2px;
429
517
  --space-200: 4px;
@@ -911,6 +999,94 @@
911
999
  --color-DATAVIZ_COLORS_MAP-19: #c2f2bd;
912
1000
  --color-DATAVIZ_COLORS_MAP-20: #ffe99a;
913
1001
  --color-PLACEHOLDER: #364141;
1002
+ --color-navigation-main-bg-base: #162020;
1003
+ --color-navigation-main-bg-overflowGradient: #040404;
1004
+ --color-navigation-main-border-base: #040404;
1005
+ --color-navigation-secondary-bg-base: #273333;
1006
+ --color-navigation-secondary-widget-bg-base: #364141;
1007
+ --color-navigation-secondary-accordion-bg-base: #162020A3;
1008
+ --color-navigation-settings-listItem-bg-base: transparent;
1009
+ --color-navigation-settings-listItem-bg-hover: #040404;
1010
+ --color-navigation-settings-listItem-bg-selected: #364141;
1011
+ --color-navigation-text-base: #FFFFFF;
1012
+ --color-navigation-text-hover: #FFFFFF;
1013
+ --color-navigation-icon-base: #FFFFFF;
1014
+ --color-navigation-icon-hover: #FFFFFF;
1015
+ --color-navigation-listItem-bg-base: #162020;
1016
+ --color-navigation-listItem-bg-hover: #040404;
1017
+ --color-navigation-listItem-bg-selected: #515e5f;
1018
+ --color-datePicker-comparison-bg-base: #b0b6b7;
1019
+ --color-datePicker-comparison-text-base: #364141;
1020
+ --color-ai-feature-decorative-primary: #067c7c;
1021
+ --color-ai-feature-decorative-secondary: #0c3f89;
1022
+ --color-ai-feature-bg-primary: #cdf7ef;
1023
+ --color-ai-feature-bg-secondary: #c7dbf9;
1024
+ --color-ai-feature-bg-default-primary: #cdf7ef;
1025
+ --color-ai-feature-bg-default-secondary: #c7dbf9;
1026
+ --color-ai-feature-bg-inverse-primary: #067c7c;
1027
+ --color-ai-feature-bg-inverse-secondary: #0c3f89;
1028
+ --color-analytics-trend-positive: #08c4b2;
1029
+ --color-analytics-trend-neutral: #f3f4f4;
1030
+ --color-analytics-trend-negative: #f3f4f4;
1031
+ --color-analytics-overlay-bg-base: color-mix(in srgb, #273333, transparent 20%);
1032
+ --color-listening-chart-indicator-default-primary: #f3f4f4;
1033
+ --color-listening-chart-indicator-default-secondary: #273333;
1034
+ --color-listening-chart-indicator-hover-primary: #c8cccc;
1035
+ --color-listening-chart-indicator-hover-secondary: #FFFFFF;
1036
+ --color-listening-chart-spike-bg-base: #08c4b2;
1037
+ --color-listening-chart-spike-icon-base: #FFFFFF;
1038
+ --color-listening-topicTypes-customTopic: #24e0c5;
1039
+ --color-listening-topicTypes-brandHealth: #ff7f6e;
1040
+ --color-listening-topicTypes-industryInsights: #75dd66;
1041
+ --color-listening-topicTypes-competitiveAnalysis: #ffd943;
1042
+ --color-listening-topicTypes-campaignAnalysis: #f282f5;
1043
+ --color-listening-topicTypes-eventMonitoring: #33d6e2;
1044
+ --color-listening-topicTypes-featuredTopic: #75dd66;
1045
+ --color-listening-worldMap-empty: #dee1e1;
1046
+ --color-listening-worldMap-q0: #d8d7f9;
1047
+ --color-listening-worldMap-q1: #c1c1f7;
1048
+ --color-listening-worldMap-q2: #a193f2;
1049
+ --color-listening-worldMap-q3: #9180f4;
1050
+ --color-listening-worldMap-q4: #816fea;
1051
+ --color-listening-worldMap-q5: #6f5ed3;
1052
+ --color-listening-worldMap-q6: #5e4eba;
1053
+ --color-listening-worldMap-q7: #483a9c;
1054
+ --color-growth-carousel-indicator-active: #2b68d3;
1055
+ --color-growth-carousel-indicator-inactive: #c8cccc;
1056
+ --color-growth-education-decorative-aqua: #0797ae;
1057
+ --color-growth-education-decorative-teal: #08c4b2;
1058
+ --color-growth-opportunity-bg-base: #6f5ed3;
1059
+ --color-growth-opportunity-bg-secondary: #515e5f;
1060
+ --color-growth-opportunity-bg-hover: #9180f4;
1061
+ --color-growth-opportunity-button-primary-base: #a193f2;
1062
+ --color-growth-opportunity-button-primary-hover: #c1c1f7;
1063
+ --color-growth-opportunity-badge-bg-base: #6f5ed3;
1064
+ --color-growth-opportunity-badge-bg-active: #eaeaf9;
1065
+ --color-growth-opportunity-badge-icon-base: #d8d7f9;
1066
+ --color-growth-opportunity-badge-icon-active: #5e4eba;
1067
+ --color-growth-opportunity-badge-text-base: #d8d7f9;
1068
+ --color-growth-opportunity-decorative-green: #0ca750;
1069
+ --color-growth-opportunity-decorative-lightAqua: #0797ae;
1070
+ --color-growth-opportunity-decorative-darkAqua: #002838;
1071
+ --color-growth-opportunity-decorative-purple: #6f5ed3;
1072
+ --color-growth-featuredDemo-bg-primary-base: #679eff;
1073
+ --color-growth-featuredDemo-bg-primary-hover: #deebfe;
1074
+ --color-growth-featuredDemo-bg-secondary-base: #9180f4;
1075
+ --color-growth-featuredDemo-bg-secondary-hover: #eaeaf9;
1076
+ --color-growth-darkModal-bg-base: #002838;
1077
+ --color-growth-darkModal-text-base: #FFFFFF;
1078
+ --color-growth-darkModal-cards-bg-base: #FFFFFF;
1079
+ --color-growth-darkModal-cards-bg-hover: #eaeaf9;
1080
+ --color-growth-darkModal-cards-text-base: #364141;
1081
+ --color-growth-darkModal-cards-text-hover: #273333;
1082
+ --color-growth-darkModal-cards-border-base: #FFFFFF;
1083
+ --color-growth-darkModal-cards-border-hover: #6f5ed3;
1084
+ --color-growth-user-status-online: #0ca750;
1085
+ --color-cardControl-bg-base: #273333;
1086
+ --color-cardControl-bg-selected: #515e5f;
1087
+ --color-cardControl-bg-hover: #364141;
1088
+ --color-cardControl-text-selected: #f3f4f4;
1089
+ --color-tags-collections-bg-base: #364141;
914
1090
  --space-0: 0px;
915
1091
  --space-100: 2px;
916
1092
  --space-200: 4px;
package/dist/theme-dark.css CHANGED
@@ -424,6 +424,94 @@
424
424
  --color-DATAVIZ_COLORS_MAP-19: #c2f2bd;
425
425
  --color-DATAVIZ_COLORS_MAP-20: #ffe99a;
426
426
  --color-PLACEHOLDER: #364141;
427
+ --color-navigation-main-bg-base: #162020;
428
+ --color-navigation-main-bg-overflowGradient: #040404;
429
+ --color-navigation-main-border-base: #040404;
430
+ --color-navigation-secondary-bg-base: #273333;
431
+ --color-navigation-secondary-widget-bg-base: #364141;
432
+ --color-navigation-secondary-accordion-bg-base: #162020A3;
433
+ --color-navigation-settings-listItem-bg-base: transparent;
434
+ --color-navigation-settings-listItem-bg-hover: #040404;
435
+ --color-navigation-settings-listItem-bg-selected: #364141;
436
+ --color-navigation-text-base: #FFFFFF;
437
+ --color-navigation-text-hover: #FFFFFF;
438
+ --color-navigation-icon-base: #FFFFFF;
439
+ --color-navigation-icon-hover: #FFFFFF;
440
+ --color-navigation-listItem-bg-base: #162020;
441
+ --color-navigation-listItem-bg-hover: #040404;
442
+ --color-navigation-listItem-bg-selected: #515e5f;
443
+ --color-datePicker-comparison-bg-base: #b0b6b7;
444
+ --color-datePicker-comparison-text-base: #364141;
445
+ --color-ai-feature-decorative-primary: #067c7c;
446
+ --color-ai-feature-decorative-secondary: #0c3f89;
447
+ --color-ai-feature-bg-primary: #cdf7ef;
448
+ --color-ai-feature-bg-secondary: #c7dbf9;
449
+ --color-ai-feature-bg-default-primary: #cdf7ef;
450
+ --color-ai-feature-bg-default-secondary: #c7dbf9;
451
+ --color-ai-feature-bg-inverse-primary: #067c7c;
452
+ --color-ai-feature-bg-inverse-secondary: #0c3f89;
453
+ --color-analytics-trend-positive: #08c4b2;
454
+ --color-analytics-trend-neutral: #f3f4f4;
455
+ --color-analytics-trend-negative: #f3f4f4;
456
+ --color-analytics-overlay-bg-base: color-mix(in srgb, #273333, transparent 20%);
457
+ --color-listening-chart-indicator-default-primary: #f3f4f4;
458
+ --color-listening-chart-indicator-default-secondary: #273333;
459
+ --color-listening-chart-indicator-hover-primary: #c8cccc;
460
+ --color-listening-chart-indicator-hover-secondary: #FFFFFF;
461
+ --color-listening-chart-spike-bg-base: #08c4b2;
462
+ --color-listening-chart-spike-icon-base: #FFFFFF;
463
+ --color-listening-topicTypes-customTopic: #24e0c5;
464
+ --color-listening-topicTypes-brandHealth: #ff7f6e;
465
+ --color-listening-topicTypes-industryInsights: #75dd66;
466
+ --color-listening-topicTypes-competitiveAnalysis: #ffd943;
467
+ --color-listening-topicTypes-campaignAnalysis: #f282f5;
468
+ --color-listening-topicTypes-eventMonitoring: #33d6e2;
469
+ --color-listening-topicTypes-featuredTopic: #75dd66;
470
+ --color-listening-worldMap-empty: #dee1e1;
471
+ --color-listening-worldMap-q0: #d8d7f9;
472
+ --color-listening-worldMap-q1: #c1c1f7;
473
+ --color-listening-worldMap-q2: #a193f2;
474
+ --color-listening-worldMap-q3: #9180f4;
475
+ --color-listening-worldMap-q4: #816fea;
476
+ --color-listening-worldMap-q5: #6f5ed3;
477
+ --color-listening-worldMap-q6: #5e4eba;
478
+ --color-listening-worldMap-q7: #483a9c;
479
+ --color-growth-carousel-indicator-active: #2b68d3;
480
+ --color-growth-carousel-indicator-inactive: #c8cccc;
481
+ --color-growth-education-decorative-aqua: #0797ae;
482
+ --color-growth-education-decorative-teal: #08c4b2;
483
+ --color-growth-opportunity-bg-base: #6f5ed3;
484
+ --color-growth-opportunity-bg-secondary: #515e5f;
485
+ --color-growth-opportunity-bg-hover: #9180f4;
486
+ --color-growth-opportunity-button-primary-base: #a193f2;
487
+ --color-growth-opportunity-button-primary-hover: #c1c1f7;
488
+ --color-growth-opportunity-badge-bg-base: #6f5ed3;
489
+ --color-growth-opportunity-badge-bg-active: #eaeaf9;
490
+ --color-growth-opportunity-badge-icon-base: #d8d7f9;
491
+ --color-growth-opportunity-badge-icon-active: #5e4eba;
492
+ --color-growth-opportunity-badge-text-base: #d8d7f9;
493
+ --color-growth-opportunity-decorative-green: #0ca750;
494
+ --color-growth-opportunity-decorative-lightAqua: #0797ae;
495
+ --color-growth-opportunity-decorative-darkAqua: #002838;
496
+ --color-growth-opportunity-decorative-purple: #6f5ed3;
497
+ --color-growth-featuredDemo-bg-primary-base: #679eff;
498
+ --color-growth-featuredDemo-bg-primary-hover: #deebfe;
499
+ --color-growth-featuredDemo-bg-secondary-base: #9180f4;
500
+ --color-growth-featuredDemo-bg-secondary-hover: #eaeaf9;
501
+ --color-growth-darkModal-bg-base: #002838;
502
+ --color-growth-darkModal-text-base: #FFFFFF;
503
+ --color-growth-darkModal-cards-bg-base: #FFFFFF;
504
+ --color-growth-darkModal-cards-bg-hover: #eaeaf9;
505
+ --color-growth-darkModal-cards-text-base: #364141;
506
+ --color-growth-darkModal-cards-text-hover: #273333;
507
+ --color-growth-darkModal-cards-border-base: #FFFFFF;
508
+ --color-growth-darkModal-cards-border-hover: #6f5ed3;
509
+ --color-growth-user-status-online: #0ca750;
510
+ --color-cardControl-bg-base: #273333;
511
+ --color-cardControl-bg-selected: #515e5f;
512
+ --color-cardControl-bg-hover: #364141;
513
+ --color-cardControl-text-selected: #f3f4f4;
514
+ --color-tags-collections-bg-base: #364141;
427
515
  --space-0: 0px;
428
516
  --space-100: 2px;
429
517
  --space-200: 4px;
package/dist/theme.css CHANGED
@@ -424,6 +424,94 @@
424
424
  --color-DATAVIZ_COLORS_MAP-19: #0ca750;
425
425
  --color-DATAVIZ_COLORS_MAP-20: #ba7506;
426
426
  --color-PLACEHOLDER: #c8cccc;
427
+ --color-ai-feature-decorative-primary: #067c7c;
428
+ --color-ai-feature-decorative-secondary: #0c3f89;
429
+ --color-ai-feature-bg-primary: #067c7c;
430
+ --color-ai-feature-bg-secondary: #0c3f89;
431
+ --color-ai-feature-bg-default-primary: #067c7c;
432
+ --color-ai-feature-bg-default-secondary: #0c3f89;
433
+ --color-ai-feature-bg-inverse-primary: #cdf7ef;
434
+ --color-ai-feature-bg-inverse-secondary: #c7dbf9;
435
+ --color-navigation-main-bg-base: #273333;
436
+ --color-navigation-main-bg-overflowGradient: #162020;
437
+ --color-navigation-main-border-base: #162020;
438
+ --color-navigation-secondary-bg-base: #364141;
439
+ --color-navigation-secondary-widget-bg-base: #162020;
440
+ --color-navigation-secondary-accordion-bg-base: #273333;
441
+ --color-navigation-settings-listItem-bg-base: transparent;
442
+ --color-navigation-settings-listItem-bg-hover: #dee1e1;
443
+ --color-navigation-settings-listItem-bg-selected: #FFFFFF;
444
+ --color-navigation-text-base: #FFFFFF;
445
+ --color-navigation-text-hover: #FFFFFF;
446
+ --color-navigation-icon-base: #FFFFFF;
447
+ --color-navigation-icon-hover: #FFFFFF;
448
+ --color-navigation-listItem-bg-base: #364141;
449
+ --color-navigation-listItem-bg-hover: #162020;
450
+ --color-navigation-listItem-bg-selected: #515e5f;
451
+ --color-datePicker-comparison-bg-base: #b0b6b7;
452
+ --color-datePicker-comparison-text-base: #364141;
453
+ --color-analytics-trend-positive: #067c7c;
454
+ --color-analytics-trend-neutral: #364141;
455
+ --color-analytics-trend-negative: #364141;
456
+ --color-analytics-overlay-bg-base: color-mix(in srgb, #FFFFFF, transparent 20%);
457
+ --color-listening-chart-indicator-default-primary: #b0b6b7;
458
+ --color-listening-chart-indicator-default-secondary: #FFFFFF;
459
+ --color-listening-chart-indicator-hover-primary: #162020;
460
+ --color-listening-chart-indicator-hover-secondary: #FFFFFF;
461
+ --color-listening-chart-spike-bg-base: #08c4b2;
462
+ --color-listening-chart-spike-icon-base: #FFFFFF;
463
+ --color-listening-topicTypes-customTopic: #679eff;
464
+ --color-listening-topicTypes-brandHealth: #ff7f6e;
465
+ --color-listening-topicTypes-industryInsights: #75dd66;
466
+ --color-listening-topicTypes-competitiveAnalysis: #ffd943;
467
+ --color-listening-topicTypes-campaignAnalysis: #f282f5;
468
+ --color-listening-topicTypes-eventMonitoring: #33d6e2;
469
+ --color-listening-topicTypes-featuredTopic: #75dd66;
470
+ --color-listening-worldMap-empty: #dee1e1;
471
+ --color-listening-worldMap-q0: #d8d7f9;
472
+ --color-listening-worldMap-q1: #c1c1f7;
473
+ --color-listening-worldMap-q2: #a193f2;
474
+ --color-listening-worldMap-q3: #9180f4;
475
+ --color-listening-worldMap-q4: #816fea;
476
+ --color-listening-worldMap-q5: #6f5ed3;
477
+ --color-listening-worldMap-q6: #5e4eba;
478
+ --color-listening-worldMap-q7: #483a9c;
479
+ --color-growth-carousel-indicator-active: #2b68d3;
480
+ --color-growth-carousel-indicator-inactive: #c8cccc;
481
+ --color-growth-education-decorative-aqua: #0797ae;
482
+ --color-growth-education-decorative-teal: #0b968f;
483
+ --color-growth-opportunity-bg-base: #6f5ed3;
484
+ --color-growth-opportunity-bg-secondary: #273333;
485
+ --color-growth-opportunity-bg-hover: #c1c1f7;
486
+ --color-growth-opportunity-button-primary-base: #6f5ed3;
487
+ --color-growth-opportunity-button-primary-hover: #5e4eba;
488
+ --color-growth-opportunity-badge-bg-base: #d8d7f9;
489
+ --color-growth-opportunity-badge-bg-active: #5e4eba;
490
+ --color-growth-opportunity-badge-icon-base: #6f5ed3;
491
+ --color-growth-opportunity-badge-icon-active: #eaeaf9;
492
+ --color-growth-opportunity-badge-text-base: #6f5ed3;
493
+ --color-growth-opportunity-decorative-green: #0ca750;
494
+ --color-growth-opportunity-decorative-lightAqua: #0797ae;
495
+ --color-growth-opportunity-decorative-darkAqua: #002838;
496
+ --color-growth-opportunity-decorative-purple: #6f5ed3;
497
+ --color-growth-featuredDemo-bg-primary-base: #205bc3;
498
+ --color-growth-featuredDemo-bg-primary-hover: #0c3f89;
499
+ --color-growth-featuredDemo-bg-secondary-base: #5e4eba;
500
+ --color-growth-featuredDemo-bg-secondary-hover: #5e4eba;
501
+ --color-growth-darkModal-bg-base: #002838;
502
+ --color-growth-darkModal-text-base: #FFFFFF;
503
+ --color-growth-darkModal-cards-bg-base: #FFFFFF;
504
+ --color-growth-darkModal-cards-bg-hover: #eaeaf9;
505
+ --color-growth-darkModal-cards-text-base: #364141;
506
+ --color-growth-darkModal-cards-text-hover: #273333;
507
+ --color-growth-darkModal-cards-border-base: #FFFFFF;
508
+ --color-growth-darkModal-cards-border-hover: #6f5ed3;
509
+ --color-growth-user-status-online: #0ca750;
510
+ --color-cardControl-bg-base: #FFFFFF;
511
+ --color-cardControl-bg-selected: #364141;
512
+ --color-cardControl-bg-hover: #f3f4f4;
513
+ --color-cardControl-text-selected: #FFFFFF;
514
+ --color-tags-collections-bg-base: #f3f4f4;
427
515
  --space-0: 0px;
428
516
  --space-100: 2px;
429
517
  --space-200: 4px;
package/dist/types/builders/buildCSS.d.ts CHANGED
@@ -1,6 +1,11 @@
1
1
  /**
2
2
  * Build CSS custom properties (variables) from Seeds theme objects
3
3
  */
4
+ /**
5
+ * Build a combined CSS file with both light and dark themes. Exported so tests
6
+ * can assert the source theme (extended sproutTheme) actually feeds the output.
7
+ */
8
+ export declare function generateCombinedCSS(): string;
4
9
  /**
5
10
  * Main build function for CSS variables
6
11
  */
package/dist/types/builders/buildCSS.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"buildCSS.d.ts","sourceRoot":"","sources":["../../../src/builders/buildCSS.ts"],"names":[],"mappings":"AAAA;;GAEG;AAoKH;;GAEG;AACH,wBAAsB,iBAAiB,kBAkCtC"}
1
+ {"version":3,"file":"buildCSS.d.ts","sourceRoot":"","sources":["../../../src/builders/buildCSS.ts"],"names":[],"mappings":"AAAA;;GAEG;AA8JH;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAQ5C;AAED;;GAEG;AACH,wBAAsB,iBAAiB,kBAkCtC"}
package/dist/types/builders/utils.d.ts CHANGED
@@ -1,6 +1,12 @@
1
1
  /**
2
2
  * Utility functions for transforming theme objects into different formats
3
3
  */
4
+ /**
5
+ * Apply abbreviation rules to a single token-path segment. Shared by the CSS
6
+ * var generator (`flattenObject`) and the seeds-react-system-props shim's
7
+ * color-prop fallback, so the `--color-*` names each side produces can't drift.
8
+ */
9
+ export declare function abbreviate(key: string): string;
4
10
  /**
5
11
  * Flatten a nested object into a single-level object with kebab-case keys
6
12
  * Example: { button: { primary: { background: { base: '#fff' } } } }
package/dist/types/builders/utils.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/builders/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAiBH;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,GAAG,EAAE,GAAG,EACR,MAAM,GAAE,MAAW,EACnB,SAAS,GAAE,MAAY,GACtB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBxB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAYjE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,GAAG,GACd,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,CAkBlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAU/D;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAU7E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUnE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,GAAG,GACf,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAUjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUjE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUrE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAaxB"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/builders/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAUH;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,GAAG,EAAE,GAAG,EACR,MAAM,GAAE,MAAW,EACnB,SAAS,GAAE,MAAY,GACtB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBxB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAYjE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,GAAG,GACd,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,CAkBlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAU/D;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAU7E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUnE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,GAAG,GACf,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAUjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUjE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUrE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAaxB"}
package/lib/builders/buildCSS.js CHANGED
@@ -19,8 +19,15 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
19
19
 
20
20
  import fs from "fs";
21
21
  import path from "path";
22
- import lightTheme from "../light/theme";
23
- import darkTheme from "../dark/theme";
22
+ // Source the full production theme (base + extended sproutTheme namespaces:
23
+ // growth, ai, navigation, datePicker, analytics, listening, cardControl, tags),
24
+ // not the base theme alone. The styled-system shim resolves color props to
25
+ // var(--color-...) references and is theme-agnostic, so every namespace must
26
+ // have a real CSS var wherever the shim runs. Both sprout themes spread the
27
+ // base theme, so all non-color fields (space, typography, radii, ...) are
28
+ // unchanged and base color tokens keep identical values.
29
+ import lightTheme from "../extendedThemes/sproutTheme/light/theme";
30
+ import darkTheme from "../extendedThemes/sproutTheme/dark/theme";
24
31
  import { flattenColors, flattenSpacing, flattenRadii, flattenBorderWidths, flattenShadows, flattenFontWeights, flattenEasing, flattenDuration } from "./utils";
25
32
 
26
33
  /**
@@ -144,9 +151,10 @@ function generateCSSVariables(themeObj, mode) {
144
151
  }
145
152
 
146
153
  /**
147
- * Build a combined CSS file with both light and dark themes
154
+ * Build a combined CSS file with both light and dark themes. Exported so tests
155
+ * can assert the source theme (extended sproutTheme) actually feeds the output.
148
156
  */
149
- function generateCombinedCSS() {
157
+ export function generateCombinedCSS() {
150
158
  console.log("Building combined CSS with light and dark themes...");
151
159
  var lightCSS = generateCSSVariables(lightTheme, "light");
152
160
  var darkCSS = generateCSSVariables(darkTheme, "dark");
package/lib/builders/utils.js CHANGED
@@ -22,9 +22,11 @@ var ABBREVIATIONS = {
22
22
  };
23
23
 
24
24
  /**
25
- * Apply abbreviation rules to a key
25
+ * Apply abbreviation rules to a single token-path segment. Shared by the CSS
26
+ * var generator (`flattenObject`) and the seeds-react-system-props shim's
27
+ * color-prop fallback, so the `--color-*` names each side produces can't drift.
26
28
  */
27
- function abbreviate(key) {
29
+ export function abbreviate(key) {
28
30
  return ABBREVIATIONS[key] || key;
29
31
  }
30
32
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-theme",
3
- "version": "4.4.0",
3
+ "version": "4.5.0",
4
4
  "description": "Seeds Theme",
5
5
  "main": "commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -20,6 +20,11 @@
20
20
  "types": "./dist/types/index.d.ts"
21
21
  },
22
22
  "./tailwind-preset": "./tailwind-preset.js",
23
+ "./token-utils": {
24
+ "import": "./lib/builders/utils.js",
25
+ "require": "./commonjs/builders/utils.js",
26
+ "types": "./dist/types/builders/utils.d.ts"
27
+ },
23
28
  "./css/theme": "./dist/theme.css",
24
29
  "./css/theme-dark": "./dist/theme-dark.css",
25
30
  "./css/theme-all": "./dist/theme-all.css",