@schandlergarcia/sf-web-components 2.3.17 → 2.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 (94) hide show
  1. package/.a4drules/skills/command-center-builder/SKILL.md +3 -2
  2. package/.a4drules/skills/component-library/SKILL.md +50 -4
  3. package/.a4drules/skills/component-library/card-components.md +88 -0
  4. package/.a4drules/skills/component-library/when-to-use.md +1 -0
  5. package/CHANGELOG.md +40 -0
  6. package/CLAUDE.md +12 -13
  7. package/README.md +0 -15
  8. package/dist/components/library/cards/KanbanBoard.js +313 -0
  9. package/dist/components/library/cards/KanbanBoard.js.map +1 -0
  10. package/dist/components/library/index.js +60 -57
  11. package/dist/components/library/index.js.map +1 -1
  12. package/dist/components/workspace/ComponentRegistry.js +5 -2
  13. package/dist/components/workspace/ComponentRegistry.js.map +1 -1
  14. package/dist/index.js +84 -82
  15. package/dist/index.js.map +1 -1
  16. package/dist/styles/global.css +44 -57
  17. package/package.json +7 -2
  18. package/scripts/apply-brand.mjs +47 -30
  19. package/scripts/postinstall.mjs +1 -11
  20. package/src/components/library/cards/KanbanBoard.jsx +507 -0
  21. package/src/components/library/index.jsx +1 -0
  22. package/src/styles/global.css +44 -57
  23. package/brands/engine/PARTNER_HUB_PRD.md +0 -584
  24. package/brands/engine/agentApiConfig.ts +0 -36
  25. package/brands/engine/app/api/graphql-operations-types.ts +0 -11260
  26. package/brands/engine/app/api/graphqlClient.ts +0 -25
  27. package/brands/engine/app/api/partnerQueries.ts +0 -212
  28. package/brands/engine/app/appLayout.tsx +0 -5
  29. package/brands/engine/app/components/AgentPanel.tsx +0 -541
  30. package/brands/engine/app/components/AgentforceConversationClient.tsx +0 -201
  31. package/brands/engine/app/components/Data360Widget.tsx +0 -301
  32. package/brands/engine/app/components/__inherit_AgentforceConversationClient.tsx +0 -3
  33. package/brands/engine/app/components/alerts/status-alert.tsx +0 -49
  34. package/brands/engine/app/components/layouts/card-layout.tsx +0 -29
  35. package/brands/engine/app/components/workspace/CommandCenter.tsx +0 -16
  36. package/brands/engine/app/config/agentApi.ts +0 -36
  37. package/brands/engine/app/data/partner-hub-sample-data.js +0 -297
  38. package/brands/engine/app/features/object-search/__examples__/api/accountSearchService.ts +0 -46
  39. package/brands/engine/app/features/object-search/__examples__/api/query/distinctAccountIndustries.graphql +0 -19
  40. package/brands/engine/app/features/object-search/__examples__/api/query/distinctAccountTypes.graphql +0 -19
  41. package/brands/engine/app/features/object-search/__examples__/api/query/getAccountDetail.graphql +0 -121
  42. package/brands/engine/app/features/object-search/__examples__/api/query/searchAccounts.graphql +0 -51
  43. package/brands/engine/app/features/object-search/__examples__/pages/AccountObjectDetailPage.tsx +0 -357
  44. package/brands/engine/app/features/object-search/__examples__/pages/AccountSearch.tsx +0 -312
  45. package/brands/engine/app/features/object-search/__examples__/pages/Home.tsx +0 -34
  46. package/brands/engine/app/features/object-search/api/objectSearchService.ts +0 -84
  47. package/brands/engine/app/features/object-search/components/ActiveFilters.tsx +0 -89
  48. package/brands/engine/app/features/object-search/components/FilterContext.tsx +0 -83
  49. package/brands/engine/app/features/object-search/components/ObjectBreadcrumb.tsx +0 -66
  50. package/brands/engine/app/features/object-search/components/PaginationControls.tsx +0 -109
  51. package/brands/engine/app/features/object-search/components/SearchBar.tsx +0 -41
  52. package/brands/engine/app/features/object-search/components/SortControl.tsx +0 -143
  53. package/brands/engine/app/features/object-search/components/filters/BooleanFilter.tsx +0 -78
  54. package/brands/engine/app/features/object-search/components/filters/DateFilter.tsx +0 -128
  55. package/brands/engine/app/features/object-search/components/filters/DateRangeFilter.tsx +0 -70
  56. package/brands/engine/app/features/object-search/components/filters/FilterFieldWrapper.tsx +0 -33
  57. package/brands/engine/app/features/object-search/components/filters/MultiSelectFilter.tsx +0 -97
  58. package/brands/engine/app/features/object-search/components/filters/NumericRangeFilter.tsx +0 -163
  59. package/brands/engine/app/features/object-search/components/filters/SearchFilter.tsx +0 -50
  60. package/brands/engine/app/features/object-search/components/filters/SelectFilter.tsx +0 -97
  61. package/brands/engine/app/features/object-search/components/filters/TextFilter.tsx +0 -91
  62. package/brands/engine/app/features/object-search/hooks/useAsyncData.ts +0 -54
  63. package/brands/engine/app/features/object-search/hooks/useCachedAsyncData.ts +0 -184
  64. package/brands/engine/app/features/object-search/hooks/useDebouncedCallback.ts +0 -34
  65. package/brands/engine/app/features/object-search/hooks/useObjectSearchParams.ts +0 -252
  66. package/brands/engine/app/features/object-search/utils/debounce.ts +0 -25
  67. package/brands/engine/app/features/object-search/utils/fieldUtils.ts +0 -29
  68. package/brands/engine/app/features/object-search/utils/filterUtils.ts +0 -404
  69. package/brands/engine/app/features/object-search/utils/sortUtils.ts +0 -38
  70. package/brands/engine/app/hooks/useEngineLiveData.ts +0 -49
  71. package/brands/engine/app/hooks/useEvaAgent.ts +0 -288
  72. package/brands/engine/app/hooks/usePartnerDashboardData.ts +0 -141
  73. package/brands/engine/app/navigationMenu.tsx +0 -80
  74. package/brands/engine/app/pages/AccountObjectDetailPage.tsx +0 -361
  75. package/brands/engine/app/pages/AccountSearch.tsx +0 -305
  76. package/brands/engine/app/pages/BlankDashboard.tsx +0 -15
  77. package/brands/engine/app/pages/DataTest.tsx +0 -78
  78. package/brands/engine/app/pages/Home.tsx +0 -5
  79. package/brands/engine/app/pages/NotFound.tsx +0 -19
  80. package/brands/engine/app/pages/PartnerHubDashboard.tsx +0 -2760
  81. package/brands/engine/app/pages/Search.tsx +0 -13
  82. package/brands/engine/app/router-utils.tsx +0 -35
  83. package/brands/engine/app/routes.tsx +0 -39
  84. package/brands/engine/app/styles/global.css +0 -269
  85. package/brands/engine/brand.css +0 -40
  86. package/brands/engine/engine-command-center-prd.md +0 -575
  87. package/brands/engine/engine-live-data.js +0 -135
  88. package/brands/engine/engine-sample-data.js +0 -378
  89. package/brands/engine/engine_logo.png +0 -0
  90. package/brands/engine/global.css +0 -269
  91. package/brands/engine/partner-hub-sample-data.js +0 -281
  92. package/brands/engine/schema.graphql +0 -292
  93. package/brands/engine/useEngineLiveData.ts +0 -49
  94. package/brands/engine/useEvaAgent.ts +0 -288
@@ -1,13 +0,0 @@
1
- export default function Search() {
2
- return (
3
- <div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
4
- <div className="w-full max-w-4xl">
5
- <div className="text-center mb-8">
6
- <h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
7
- <p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
8
- </div>
9
- <p className="text-center text-slate-500 dark:text-slate-400">Search functionality coming soon...</p>
10
- </div>
11
- </div>
12
- );
13
- }
@@ -1,35 +0,0 @@
1
- import type { RouteObject } from 'react-router';
2
- import { routes } from './routes';
3
-
4
- export type RouteWithFullPath = RouteObject & { fullPath: string };
5
-
6
- const flatMapRoutes = (
7
- route: RouteObject,
8
- parentPath: string = ''
9
- ): RouteWithFullPath[] => {
10
- let fullPath: string;
11
-
12
- if (route.index) {
13
- fullPath = parentPath || '/';
14
- } else if (route.path) {
15
- if (route.path.startsWith('/')) {
16
- fullPath = route.path;
17
- } else {
18
- fullPath =
19
- parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
20
- }
21
- } else {
22
- fullPath = parentPath;
23
- }
24
-
25
- const routeWithPath = { ...route, fullPath };
26
-
27
- const childRoutes =
28
- route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
29
-
30
- return [routeWithPath, ...childRoutes];
31
- };
32
-
33
- export const getAllRoutes = (): RouteWithFullPath[] => {
34
- return routes.flatMap(route => flatMapRoutes(route));
35
- };
@@ -1,39 +0,0 @@
1
- import type { RouteObject } from 'react-router';
2
- import AppLayout from './appLayout';
3
- import Home from './pages/Home';
4
- import DataTest from './pages/DataTest';
5
- import AccountSearch from './features/object-search/__examples__/pages/AccountSearch';
6
- import AccountObjectDetailPage from './features/object-search/__examples__/pages/AccountObjectDetailPage';
7
- import NotFound from './pages/NotFound';
8
-
9
- export const routes: RouteObject[] = [
10
- {
11
- path: "/",
12
- element: <AppLayout />,
13
- children: [
14
- {
15
- index: true,
16
- element: <Home />,
17
- handle: { showInNavigation: true, showNavBar: true, label: "Partner Hub" }
18
- },
19
- {
20
- path: 'data-test',
21
- element: <DataTest />,
22
- handle: { showInNavigation: true, showNavBar: true, label: "Data Test" }
23
- },
24
- {
25
- path: 'accounts',
26
- element: <AccountSearch />,
27
- handle: { showInNavigation: true, showNavBar: true, label: "Accounts" }
28
- },
29
- {
30
- path: 'accounts/:recordId',
31
- element: <AccountObjectDetailPage />
32
- },
33
- {
34
- path: '*',
35
- element: <NotFound />
36
- }
37
- ]
38
- }
39
- ];
@@ -1,269 +0,0 @@
1
- @import '@heroui/styles';
2
-
3
- @layer base {
4
- html,
5
- body,
6
- #root {
7
- @apply min-h-screen;
8
- }
9
-
10
- body {
11
- @apply antialiased bg-white;
12
- }
13
- }
14
-
15
- @import 'tw-animate-css';
16
- @import 'shadcn/tailwind.css';
17
-
18
- @custom-variant dark (&:is(.dark *));
19
-
20
- @source "../components/library";
21
- @source "../components/pages";
22
-
23
- @theme inline {
24
- --color-background: var(--background);
25
- --color-foreground: var(--foreground);
26
- --color-card: var(--card);
27
- --color-card-foreground: var(--card-foreground);
28
- --color-popover: var(--popover);
29
- --color-popover-foreground: var(--popover-foreground);
30
- --color-primary: var(--primary);
31
- --color-primary-foreground: var(--primary-foreground);
32
- --color-secondary: var(--secondary);
33
- --color-secondary-foreground: var(--secondary-foreground);
34
- --color-muted: var(--muted);
35
- --color-muted-foreground: var(--muted-foreground);
36
- --color-accent: var(--accent);
37
- --color-accent-foreground: var(--accent-foreground);
38
- --color-destructive: var(--destructive);
39
- --color-destructive-foreground: var(--destructive-foreground);
40
- --color-border: var(--border);
41
- --color-input: var(--input);
42
- --color-ring: var(--ring);
43
- --color-chart-1: var(--chart-1);
44
- --color-chart-2: var(--chart-2);
45
- --color-chart-3: var(--chart-3);
46
- --color-chart-4: var(--chart-4);
47
- --color-chart-5: var(--chart-5);
48
- --radius-sm: calc(var(--radius) - 4px);
49
- --radius-md: calc(var(--radius) - 2px);
50
- --radius-lg: var(--radius);
51
- --radius-xl: calc(var(--radius) + 4px);
52
- --color-sidebar: var(--sidebar);
53
- --color-sidebar-foreground: var(--sidebar-foreground);
54
- --color-sidebar-primary: var(--sidebar-primary);
55
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
56
- --color-sidebar-accent: var(--sidebar-accent);
57
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
58
- --color-sidebar-border: var(--sidebar-border);
59
- --color-sidebar-ring: var(--sidebar-ring);
60
-
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;
86
-
87
- --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
88
- --font-mono: 'JetBrains Mono', ui-monospace, monospace;
89
-
90
- --radius-pill: 9999px;
91
- --radius-card: 10px;
92
- }
93
-
94
- :root {
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;
104
- --dash-danger: #dc2626;
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;
113
- --color-dash-text: var(--dash-text);
114
- --color-dash-muted: var(--dash-muted);
115
- --color-dash-label: var(--dash-label);
116
- --color-dash-surface: var(--dash-surface);
117
- --color-dash-border: var(--dash-border);
118
- --color-dash-accent: var(--dash-accent);
119
- --color-dash-success: var(--dash-success);
120
- --color-dash-info: var(--dash-info);
121
- --color-dash-warning: var(--dash-warning);
122
- --color-dash-danger: var(--dash-danger);
123
- --color-dash-dark: var(--dash-dark);
124
- --color-dash-darker: var(--dash-darker);
125
- --color-dash-chart-1: var(--dash-chart-1);
126
- --color-dash-chart-2: var(--dash-chart-2);
127
- --color-dash-chart-3: var(--dash-chart-3);
128
- --color-dash-chart-4: var(--dash-chart-4);
129
-
130
- --radius: 0.625rem;
131
- --background: oklch(1 0 0);
132
- --foreground: oklch(0.145 0 0);
133
- --card: oklch(1 0 0);
134
- --card-foreground: oklch(0.145 0 0);
135
- --popover: oklch(1 0 0);
136
- --popover-foreground: oklch(0.145 0 0);
137
- --primary: oklch(0.205 0 0);
138
- --primary-foreground: oklch(0.985 0 0);
139
- --secondary: oklch(0.97 0 0);
140
- --secondary-foreground: oklch(0.205 0 0);
141
- --muted: oklch(0.97 0 0);
142
- --muted-foreground: oklch(0.556 0 0);
143
- --accent: oklch(0.97 0 0);
144
- --accent-foreground: oklch(0.205 0 0);
145
- --destructive: oklch(0.577 0.245 27.325);
146
- --border: oklch(0.922 0 0);
147
- --input: oklch(0.922 0 0);
148
- --ring: oklch(0.708 0 0);
149
- --chart-1: oklch(0.646 0.222 41.116);
150
- --chart-2: oklch(0.6 0.118 184.704);
151
- --chart-3: oklch(0.398 0.07 227.392);
152
- --chart-4: oklch(0.828 0.189 84.429);
153
- --chart-5: oklch(0.769 0.188 70.08);
154
- --sidebar: oklch(0.985 0 0);
155
- --sidebar-foreground: oklch(0.145 0 0);
156
- --sidebar-primary: oklch(0.205 0 0);
157
- --sidebar-primary-foreground: oklch(0.985 0 0);
158
- --sidebar-accent: oklch(0.97 0 0);
159
- --sidebar-accent-foreground: oklch(0.205 0 0);
160
- --sidebar-border: oklch(0.922 0 0);
161
- --sidebar-ring: oklch(0.708 0 0);
162
- }
163
-
164
- .dark {
165
- --background: oklch(0.145 0 0);
166
- --foreground: oklch(0.985 0 0);
167
- --card: oklch(0.205 0 0);
168
- --card-foreground: oklch(0.985 0 0);
169
- --popover: oklch(0.205 0 0);
170
- --popover-foreground: oklch(0.985 0 0);
171
- --primary: oklch(0.922 0 0);
172
- --primary-foreground: oklch(0.205 0 0);
173
- --secondary: oklch(0.269 0 0);
174
- --secondary-foreground: oklch(0.985 0 0);
175
- --muted: oklch(0.269 0 0);
176
- --muted-foreground: oklch(0.708 0 0);
177
- --accent: oklch(0.269 0 0);
178
- --accent-foreground: oklch(0.985 0 0);
179
- --destructive: oklch(0.704 0.191 22.216);
180
- --border: oklch(1 0 0 / 10%);
181
- --input: oklch(1 0 0 / 15%);
182
- --ring: oklch(0.556 0 0);
183
- --chart-1: oklch(0.488 0.243 264.376);
184
- --chart-2: oklch(0.696 0.17 162.48);
185
- --chart-3: oklch(0.769 0.188 70.08);
186
- --chart-4: oklch(0.627 0.265 303.9);
187
- --chart-5: oklch(0.645 0.246 16.439);
188
- --sidebar: oklch(0.205 0 0);
189
- --sidebar-foreground: oklch(0.985 0 0);
190
- --sidebar-primary: oklch(0.488 0.243 264.376);
191
- --sidebar-primary-foreground: oklch(0.985 0 0);
192
- --sidebar-accent: oklch(0.269 0 0);
193
- --sidebar-accent-foreground: oklch(0.985 0 0);
194
- --sidebar-border: oklch(1 0 0 / 10%);
195
- --sidebar-ring: oklch(0.556 0 0);
196
- }
197
-
198
- @layer base {
199
- * {
200
- @apply border-border outline-ring/50;
201
- }
202
- body {
203
- @apply bg-background text-foreground;
204
- }
205
- }
206
-
207
- /*
208
- * Restore HeroUI theme variables inside the Command Center scope.
209
- * Uses Engine brand colors: Cyan #7DCBD9 as secondary, Orange-Red #FD4B23 as danger.
210
- */
211
- .heroui-scope {
212
- --primary: #0D1117;
213
- --primary-foreground: oklch(0.9911 0 0);
214
- --secondary: #7DCBD9;
215
- --secondary-foreground: #0D1117;
216
- --success: #1E9D6D;
217
- --success-foreground: oklch(0.9911 0 0);
218
- --warning: #FFB200;
219
- --warning-foreground: #0D1117;
220
- --danger: #FD4B23;
221
- --danger-foreground: oklch(0.9911 0 0);
222
-
223
- --muted: oklch(0.5517 0.0138 285.94);
224
- --accent: oklch(0.6204 0.195 253.83);
225
- --accent-foreground: oklch(0.9911 0 0);
226
- --background: #F3F3F4;
227
- --foreground: #0D1117;
228
- --default: oklch(94% 0.001 286.375);
229
- --default-foreground: #0D1117;
230
- --border: #B0B1B3;
231
- --separator: oklch(92% 0.004 286.32);
232
- --segment: oklch(100% 0 0);
233
- --segment-foreground: #0D1117;
234
- --surface: oklch(100% 0 0);
235
- --surface-foreground: #0D1117;
236
- --overlay: oklch(100% 0 0);
237
- --overlay-foreground: #0D1117;
238
- --focus: #157DE5;
239
- --link: #0D1117;
240
- }
241
-
242
- /* ChatBar expanded overlay — horizontal padding so it doesn't hit window edges */
243
- body > .fixed.inset-x-0.rounded-2xl {
244
- left: 1.5rem !important;
245
- right: 1.5rem !important;
246
- }
247
-
248
- .dark .heroui-scope,
249
- .heroui-scope.dark {
250
- --muted: oklch(70.5% 0.015 286.067);
251
- --background: oklch(12% 0.005 285.823);
252
- --foreground: oklch(0.9911 0 0);
253
- --default: oklch(27.4% 0.006 286.033);
254
- --default-foreground: oklch(0.9911 0 0);
255
- --border: oklch(28% 0.006 286.033);
256
- --separator: oklch(25% 0.006 286.033);
257
- --segment: oklch(0.3964 0.01 285.93);
258
- --segment-foreground: oklch(0.9911 0 0);
259
- --surface: oklch(0.2103 0.0059 285.89);
260
- --surface-foreground: oklch(0.9911 0 0);
261
- --overlay: oklch(0.2103 0.0059 285.89);
262
- --overlay-foreground: oklch(0.9911 0 0);
263
- --warning: oklch(0.8203 0.1388 76.34);
264
- --warning-foreground: #0D1117;
265
- --danger: oklch(0.594 0.1967 24.63);
266
- --danger-foreground: oklch(0.9911 0 0);
267
- --focus: #157DE5;
268
- --link: oklch(0.9911 0 0);
269
- }
@@ -1,40 +0,0 @@
1
- /*
2
- * Engine Brand Overrides
3
- *
4
- * Applied on top of the base global.css when `npm run brand:engine` is run.
5
- * Colors sourced from the official Engine Brand Guidelines.
6
- *
7
- * Primary: Engine Black #0D1117, White #FFFFFF
8
- * Secondary: Orange-Red #FD4B23, Amber #FFB200, Green #1E9D6D,
9
- * Cyan #7DCBD9, Blue #157DE5
10
- * Neutrals: Dark Gray #616368, Mid Gray #B0B1B3, Light Gray #F3F3F4
11
- */
12
-
13
- /* ── Engine brand palette (injected into @theme inline block) ─────────────── */
14
-
15
- /*
16
- --color-engine-black: #0D1117
17
- --color-engine-cyan: #7DCBD9 (primary accent)
18
- --color-engine-green: #1E9D6D (savings, FlexPro, Flex, BestPrice)
19
- --color-engine-blue: #157DE5 (finance, Credit, Charge)
20
- --color-engine-orange: #FD4B23 (secondary accent)
21
- --color-engine-amber: #FFB200 (alerts, warnings)
22
- --color-engine-bg: #F3F3F4 (light gray background)
23
- --color-engine-border: #B0B1B3 (mid gray)
24
- --color-engine-text: #0D1117 (engine black)
25
- --color-engine-muted: #616368 (dark gray)
26
- --color-engine-label: #B0B1B3 (mid gray)
27
-
28
- Brand ramp (built from Cyan #7DCBD9):
29
- --color-brand-50: #F0FAFB
30
- --color-brand-100: #D9F2F5
31
- --color-brand-200: #B3E5EB
32
- --color-brand-300: #7DCBD9 (Cyan — primary)
33
- --color-brand-400: #5BB8CA
34
- --color-brand-500: #3AA0B5
35
- --color-brand-600: #2D849A
36
- --color-brand-700: #266B7E
37
- --color-brand-800: #235768
38
- --color-brand-900: #1F4858
39
- --color-brand-950: #112E3A
40
- */