@schandlergarcia/sf-web-components 2.3.16 → 2.3.17

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 (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/brands/engine/app/components/AgentPanel.tsx +247 -108
  3. package/brands/engine/app/components/Data360Widget.tsx +301 -0
  4. package/brands/engine/app/data/partner-hub-sample-data.js +297 -0
  5. package/brands/engine/app/pages/PartnerHubDashboard.tsx +1036 -353
  6. package/brands/engine/app/styles/global.css +1 -1
  7. package/brands/engine/global.css +1 -1
  8. package/dist/styles/global.css +61 -50
  9. package/package.json +1 -1
  10. package/src/styles/global.css +61 -50
package/brands/engine/app/styles/global.css CHANGED
@@ -108,7 +108,7 @@
108
108
  --dash-chart-2: #1E9D6D;
109
109
  --dash-chart-3: #7DCBD9;
110
110
  --dash-chart-4: #FD4B23;
111
- --dash-metric-size: 3.25rem;
111
+ --dash-metric-size: 2.5rem;
112
112
  --dash-metric-sub: 2.25rem;
113
113
  --color-dash-text: var(--dash-text);
114
114
  --color-dash-muted: var(--dash-muted);
package/brands/engine/global.css CHANGED
@@ -108,7 +108,7 @@
108
108
  --dash-chart-2: #1E9D6D;
109
109
  --dash-chart-3: #7DCBD9;
110
110
  --dash-chart-4: #FD4B23;
111
- --dash-metric-size: 3.25rem;
111
+ --dash-metric-size: 2.5rem;
112
112
  --dash-metric-sub: 2.25rem;
113
113
  --color-dash-text: var(--dash-text);
114
114
  --color-dash-muted: var(--dash-muted);
package/dist/styles/global.css CHANGED
@@ -58,18 +58,31 @@
58
58
  --color-sidebar-border: var(--sidebar-border);
59
59
  --color-sidebar-ring: var(--sidebar-ring);
60
60
 
61
- /* Brand palette — customize these to match your brand */
62
- --color-brand-50: #F0F9FF;
63
- --color-brand-100: #E0F2FE;
64
- --color-brand-200: #BAE6FD;
65
- --color-brand-300: #7DD3FC;
66
- --color-brand-400: #38BDF8;
67
- --color-brand-500: #0EA5E9;
68
- --color-brand-600: #0284C7;
69
- --color-brand-700: #0369A1;
70
- --color-brand-800: #075985;
71
- --color-brand-900: #0C4A6E;
72
- --color-brand-950: #082F49;
61
+ /* Engine brand palette — official guidelines */
62
+ --color-engine-black: #0D1117;
63
+ --color-engine-cyan: #7DCBD9;
64
+ --color-engine-green: #1E9D6D;
65
+ --color-engine-blue: #157DE5;
66
+ --color-engine-orange: #FD4B23;
67
+ --color-engine-amber: #FFB200;
68
+ --color-engine-bg: #F3F3F4;
69
+ --color-engine-border: #B0B1B3;
70
+ --color-engine-text: #0D1117;
71
+ --color-engine-muted: #616368;
72
+ --color-engine-label: #B0B1B3;
73
+
74
+ /* Engine Cyan brand ramp */
75
+ --color-brand-50: #F0FAFB;
76
+ --color-brand-100: #D9F2F5;
77
+ --color-brand-200: #B3E5EB;
78
+ --color-brand-300: #7DCBD9;
79
+ --color-brand-400: #5BB8CA;
80
+ --color-brand-500: #3AA0B5;
81
+ --color-brand-600: #2D849A;
82
+ --color-brand-700: #266B7E;
83
+ --color-brand-800: #235768;
84
+ --color-brand-900: #1F4858;
85
+ --color-brand-950: #112E3A;
73
86
 
74
87
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
75
88
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
@@ -79,24 +92,24 @@
79
92
  }
80
93
 
81
94
  :root {
82
- --dash-text: #1e293b;
83
- --dash-muted: #475569;
84
- --dash-label: #64748b;
85
- --dash-surface: #dbeafe;
86
- --dash-border: #93c5fd;
87
- --dash-accent: #2563eb;
88
- --dash-success: #16a34a;
89
- --dash-info: #7c3aed;
90
- --dash-warning: #ca8a04;
95
+ --dash-text: #0D1117;
96
+ --dash-muted: #3d4047;
97
+ --dash-label: #8b8d91;
98
+ --dash-surface: #fef9ef;
99
+ --dash-border: #e2c97a;
100
+ --dash-accent: #FFB200;
101
+ --dash-success: #34d399;
102
+ --dash-info: #67e8f9;
103
+ --dash-warning: #FD4B23;
91
104
  --dash-danger: #dc2626;
92
- --dash-dark: #1e3a8a;
93
- --dash-darker: #172554;
94
- --dash-chart-1: #2563eb;
95
- --dash-chart-2: #16a34a;
96
- --dash-chart-3: #e11d48;
97
- --dash-chart-4: #7c3aed;
98
- --dash-metric-size: 2rem;
99
- --dash-metric-sub: 1.5rem;
105
+ --dash-dark: #0D1117;
106
+ --dash-darker: #06090d;
107
+ --dash-chart-1: #FFB200;
108
+ --dash-chart-2: #1E9D6D;
109
+ --dash-chart-3: #7DCBD9;
110
+ --dash-chart-4: #FD4B23;
111
+ --dash-metric-size: 2.5rem;
112
+ --dash-metric-sub: 2.25rem;
100
113
  --color-dash-text: var(--dash-text);
101
114
  --color-dash-muted: var(--dash-muted);
102
115
  --color-dash-label: var(--dash-label);
@@ -193,39 +206,37 @@
193
206
 
194
207
  /*
195
208
  * Restore HeroUI theme variables inside the Command Center scope.
196
- * shadcn redefines --muted, --accent, --accent-foreground with different
197
- * semantics (bg colors vs text colors). This scope restores HeroUI's values
198
- * so HeroUI components render correctly.
209
+ * Uses Engine brand colors: Cyan #7DCBD9 as secondary, Orange-Red #FD4B23 as danger.
199
210
  */
200
211
  .heroui-scope {
201
- --primary: #000000;
212
+ --primary: #0D1117;
202
213
  --primary-foreground: oklch(0.9911 0 0);
203
- --secondary: #0EA5E9;
204
- --secondary-foreground: oklch(0.9911 0 0);
205
- --success: #16A34A;
214
+ --secondary: #7DCBD9;
215
+ --secondary-foreground: #0D1117;
216
+ --success: #1E9D6D;
206
217
  --success-foreground: oklch(0.9911 0 0);
207
- --warning: #F59E0B;
208
- --warning-foreground: oklch(0.2103 0.0059 285.89);
209
- --danger: #EF4444;
218
+ --warning: #FFB200;
219
+ --warning-foreground: #0D1117;
220
+ --danger: #FD4B23;
210
221
  --danger-foreground: oklch(0.9911 0 0);
211
222
 
212
223
  --muted: oklch(0.5517 0.0138 285.94);
213
224
  --accent: oklch(0.6204 0.195 253.83);
214
225
  --accent-foreground: oklch(0.9911 0 0);
215
- --background: oklch(0.9702 0 0);
216
- --foreground: oklch(0.2103 0.0059 285.89);
226
+ --background: #F3F3F4;
227
+ --foreground: #0D1117;
217
228
  --default: oklch(94% 0.001 286.375);
218
- --default-foreground: oklch(0.2103 0.0059 285.89);
219
- --border: oklch(90% 0.004 286.32);
229
+ --default-foreground: #0D1117;
230
+ --border: #B0B1B3;
220
231
  --separator: oklch(92% 0.004 286.32);
221
232
  --segment: oklch(100% 0 0);
222
- --segment-foreground: oklch(0.2103 0.0059 285.89);
233
+ --segment-foreground: #0D1117;
223
234
  --surface: oklch(100% 0 0);
224
- --surface-foreground: oklch(0.2103 0.0059 285.89);
235
+ --surface-foreground: #0D1117;
225
236
  --overlay: oklch(100% 0 0);
226
- --overlay-foreground: oklch(0.2103 0.0059 285.89);
227
- --focus: oklch(0.6204 0.195 253.83);
228
- --link: oklch(0.2103 0.0059 285.89);
237
+ --overlay-foreground: #0D1117;
238
+ --focus: #157DE5;
239
+ --link: #0D1117;
229
240
  }
230
241
 
231
242
  /* ChatBar expanded overlay — horizontal padding so it doesn't hit window edges */
@@ -250,9 +261,9 @@ body > .fixed.inset-x-0.rounded-2xl {
250
261
  --overlay: oklch(0.2103 0.0059 285.89);
251
262
  --overlay-foreground: oklch(0.9911 0 0);
252
263
  --warning: oklch(0.8203 0.1388 76.34);
253
- --warning-foreground: oklch(0.2103 0.0059 285.89);
264
+ --warning-foreground: #0D1117;
254
265
  --danger: oklch(0.594 0.1967 24.63);
255
266
  --danger-foreground: oklch(0.9911 0 0);
256
- --focus: oklch(0.6204 0.195 253.83);
267
+ --focus: #157DE5;
257
268
  --link: oklch(0.9911 0 0);
258
269
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@schandlergarcia/sf-web-components",
3
- "version": "2.3.16",
3
+ "version": "2.3.17",
4
4
  "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
package/src/styles/global.css CHANGED
@@ -58,18 +58,31 @@
58
58
  --color-sidebar-border: var(--sidebar-border);
59
59
  --color-sidebar-ring: var(--sidebar-ring);
60
60
 
61
- /* Brand palette — customize these to match your brand */
62
- --color-brand-50: #F0F9FF;
63
- --color-brand-100: #E0F2FE;
64
- --color-brand-200: #BAE6FD;
65
- --color-brand-300: #7DD3FC;
66
- --color-brand-400: #38BDF8;
67
- --color-brand-500: #0EA5E9;
68
- --color-brand-600: #0284C7;
69
- --color-brand-700: #0369A1;
70
- --color-brand-800: #075985;
71
- --color-brand-900: #0C4A6E;
72
- --color-brand-950: #082F49;
61
+ /* Engine brand palette — official guidelines */
62
+ --color-engine-black: #0D1117;
63
+ --color-engine-cyan: #7DCBD9;
64
+ --color-engine-green: #1E9D6D;
65
+ --color-engine-blue: #157DE5;
66
+ --color-engine-orange: #FD4B23;
67
+ --color-engine-amber: #FFB200;
68
+ --color-engine-bg: #F3F3F4;
69
+ --color-engine-border: #B0B1B3;
70
+ --color-engine-text: #0D1117;
71
+ --color-engine-muted: #616368;
72
+ --color-engine-label: #B0B1B3;
73
+
74
+ /* Engine Cyan brand ramp */
75
+ --color-brand-50: #F0FAFB;
76
+ --color-brand-100: #D9F2F5;
77
+ --color-brand-200: #B3E5EB;
78
+ --color-brand-300: #7DCBD9;
79
+ --color-brand-400: #5BB8CA;
80
+ --color-brand-500: #3AA0B5;
81
+ --color-brand-600: #2D849A;
82
+ --color-brand-700: #266B7E;
83
+ --color-brand-800: #235768;
84
+ --color-brand-900: #1F4858;
85
+ --color-brand-950: #112E3A;
73
86
 
74
87
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
75
88
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
@@ -79,24 +92,24 @@
79
92
  }
80
93
 
81
94
  :root {
82
- --dash-text: #1e293b;
83
- --dash-muted: #475569;
84
- --dash-label: #64748b;
85
- --dash-surface: #dbeafe;
86
- --dash-border: #93c5fd;
87
- --dash-accent: #2563eb;
88
- --dash-success: #16a34a;
89
- --dash-info: #7c3aed;
90
- --dash-warning: #ca8a04;
95
+ --dash-text: #0D1117;
96
+ --dash-muted: #3d4047;
97
+ --dash-label: #8b8d91;
98
+ --dash-surface: #fef9ef;
99
+ --dash-border: #e2c97a;
100
+ --dash-accent: #FFB200;
101
+ --dash-success: #34d399;
102
+ --dash-info: #67e8f9;
103
+ --dash-warning: #FD4B23;
91
104
  --dash-danger: #dc2626;
92
- --dash-dark: #1e3a8a;
93
- --dash-darker: #172554;
94
- --dash-chart-1: #2563eb;
95
- --dash-chart-2: #16a34a;
96
- --dash-chart-3: #e11d48;
97
- --dash-chart-4: #7c3aed;
98
- --dash-metric-size: 2rem;
99
- --dash-metric-sub: 1.5rem;
105
+ --dash-dark: #0D1117;
106
+ --dash-darker: #06090d;
107
+ --dash-chart-1: #FFB200;
108
+ --dash-chart-2: #1E9D6D;
109
+ --dash-chart-3: #7DCBD9;
110
+ --dash-chart-4: #FD4B23;
111
+ --dash-metric-size: 2.5rem;
112
+ --dash-metric-sub: 2.25rem;
100
113
  --color-dash-text: var(--dash-text);
101
114
  --color-dash-muted: var(--dash-muted);
102
115
  --color-dash-label: var(--dash-label);
@@ -193,39 +206,37 @@
193
206
 
194
207
  /*
195
208
  * Restore HeroUI theme variables inside the Command Center scope.
196
- * shadcn redefines --muted, --accent, --accent-foreground with different
197
- * semantics (bg colors vs text colors). This scope restores HeroUI's values
198
- * so HeroUI components render correctly.
209
+ * Uses Engine brand colors: Cyan #7DCBD9 as secondary, Orange-Red #FD4B23 as danger.
199
210
  */
200
211
  .heroui-scope {
201
- --primary: #000000;
212
+ --primary: #0D1117;
202
213
  --primary-foreground: oklch(0.9911 0 0);
203
- --secondary: #0EA5E9;
204
- --secondary-foreground: oklch(0.9911 0 0);
205
- --success: #16A34A;
214
+ --secondary: #7DCBD9;
215
+ --secondary-foreground: #0D1117;
216
+ --success: #1E9D6D;
206
217
  --success-foreground: oklch(0.9911 0 0);
207
- --warning: #F59E0B;
208
- --warning-foreground: oklch(0.2103 0.0059 285.89);
209
- --danger: #EF4444;
218
+ --warning: #FFB200;
219
+ --warning-foreground: #0D1117;
220
+ --danger: #FD4B23;
210
221
  --danger-foreground: oklch(0.9911 0 0);
211
222
 
212
223
  --muted: oklch(0.5517 0.0138 285.94);
213
224
  --accent: oklch(0.6204 0.195 253.83);
214
225
  --accent-foreground: oklch(0.9911 0 0);
215
- --background: oklch(0.9702 0 0);
216
- --foreground: oklch(0.2103 0.0059 285.89);
226
+ --background: #F3F3F4;
227
+ --foreground: #0D1117;
217
228
  --default: oklch(94% 0.001 286.375);
218
- --default-foreground: oklch(0.2103 0.0059 285.89);
219
- --border: oklch(90% 0.004 286.32);
229
+ --default-foreground: #0D1117;
230
+ --border: #B0B1B3;
220
231
  --separator: oklch(92% 0.004 286.32);
221
232
  --segment: oklch(100% 0 0);
222
- --segment-foreground: oklch(0.2103 0.0059 285.89);
233
+ --segment-foreground: #0D1117;
223
234
  --surface: oklch(100% 0 0);
224
- --surface-foreground: oklch(0.2103 0.0059 285.89);
235
+ --surface-foreground: #0D1117;
225
236
  --overlay: oklch(100% 0 0);
226
- --overlay-foreground: oklch(0.2103 0.0059 285.89);
227
- --focus: oklch(0.6204 0.195 253.83);
228
- --link: oklch(0.2103 0.0059 285.89);
237
+ --overlay-foreground: #0D1117;
238
+ --focus: #157DE5;
239
+ --link: #0D1117;
229
240
  }
230
241
 
231
242
  /* ChatBar expanded overlay — horizontal padding so it doesn't hit window edges */
@@ -250,9 +261,9 @@ body > .fixed.inset-x-0.rounded-2xl {
250
261
  --overlay: oklch(0.2103 0.0059 285.89);
251
262
  --overlay-foreground: oklch(0.9911 0 0);
252
263
  --warning: oklch(0.8203 0.1388 76.34);
253
- --warning-foreground: oklch(0.2103 0.0059 285.89);
264
+ --warning-foreground: #0D1117;
254
265
  --danger: oklch(0.594 0.1967 24.63);
255
266
  --danger-foreground: oklch(0.9911 0 0);
256
- --focus: oklch(0.6204 0.195 253.83);
267
+ --focus: #157DE5;
257
268
  --link: oklch(0.9911 0 0);
258
269
  }