@schandlergarcia/sf-web-components 1.9.67 → 1.9.69
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/.a4drules/skills/command-center-builder/SKILL.md +26 -146
- package/.a4drules/skills/command-center-builder/charts-visualization.md +1 -136
- package/.a4drules/skills/command-center-builder/completion-checklist.md +1 -61
- package/.a4drules/skills/command-center-builder/components-styling.md +1 -97
- package/.a4drules/skills/command-center-builder/data-forms-ai.md +1 -43
- package/.a4drules/skills/command-center-builder/getting-started.md +1 -125
- package/.a4drules/skills/command-center-builder/improved-build-process.md +1 -30
- package/.a4drules/skills/command-center-builder/page-layout.md +1 -145
- package/CHANGELOG.md +47 -19
- package/data/engine-command-center-prd.md +156 -301
- package/dist/styles/global.css +238 -0
- package/package.json +1 -1
|
@@ -0,0 +1,238 @@
|
|
|
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 */
|
|
62
|
+
--color-engine-black: #111111;
|
|
63
|
+
--color-engine-teal: #5BC8C8;
|
|
64
|
+
--color-engine-green: #3DAB5F;
|
|
65
|
+
--color-engine-coral: #FF5722;
|
|
66
|
+
--color-engine-orange: #F59E0B;
|
|
67
|
+
--color-engine-savings: #16A34A;
|
|
68
|
+
--color-engine-bg: #F7F8FA;
|
|
69
|
+
--color-engine-border: #E5E7EB;
|
|
70
|
+
--color-engine-text: #111111;
|
|
71
|
+
--color-engine-muted: #6B7280;
|
|
72
|
+
--color-engine-label: #9CA3AF;
|
|
73
|
+
|
|
74
|
+
/* Engine teal brand palette */
|
|
75
|
+
--color-brand-50: #ECFDF9;
|
|
76
|
+
--color-brand-100: #D1FAF0;
|
|
77
|
+
--color-brand-200: #A7F3E1;
|
|
78
|
+
--color-brand-300: #6EE7C8;
|
|
79
|
+
--color-brand-400: #34D3AB;
|
|
80
|
+
--color-brand-500: #5BC8C8;
|
|
81
|
+
--color-brand-600: #0D9488;
|
|
82
|
+
--color-brand-700: #0F766E;
|
|
83
|
+
--color-brand-800: #115E59;
|
|
84
|
+
--color-brand-900: #134E4A;
|
|
85
|
+
--color-brand-950: #042F2E;
|
|
86
|
+
|
|
87
|
+
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
88
|
+
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
|
89
|
+
|
|
90
|
+
/* Engine border radius tokens */
|
|
91
|
+
--radius-pill: 9999px;
|
|
92
|
+
--radius-card: 10px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
:root {
|
|
96
|
+
--radius: 0.625rem;
|
|
97
|
+
--background: oklch(1 0 0);
|
|
98
|
+
--foreground: oklch(0.145 0 0);
|
|
99
|
+
--card: oklch(1 0 0);
|
|
100
|
+
--card-foreground: oklch(0.145 0 0);
|
|
101
|
+
--popover: oklch(1 0 0);
|
|
102
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
103
|
+
--primary: oklch(0.205 0 0);
|
|
104
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
105
|
+
--secondary: oklch(0.97 0 0);
|
|
106
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
107
|
+
--muted: oklch(0.97 0 0);
|
|
108
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
109
|
+
--accent: oklch(0.97 0 0);
|
|
110
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
111
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
112
|
+
--border: oklch(0.922 0 0);
|
|
113
|
+
--input: oklch(0.922 0 0);
|
|
114
|
+
--ring: oklch(0.708 0 0);
|
|
115
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
116
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
117
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
118
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
119
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
120
|
+
--sidebar: oklch(0.985 0 0);
|
|
121
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
122
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
123
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
124
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
125
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
126
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
127
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.dark {
|
|
131
|
+
--background: oklch(0.145 0 0);
|
|
132
|
+
--foreground: oklch(0.985 0 0);
|
|
133
|
+
--card: oklch(0.205 0 0);
|
|
134
|
+
--card-foreground: oklch(0.985 0 0);
|
|
135
|
+
--popover: oklch(0.205 0 0);
|
|
136
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
137
|
+
--primary: oklch(0.922 0 0);
|
|
138
|
+
--primary-foreground: oklch(0.205 0 0);
|
|
139
|
+
--secondary: oklch(0.269 0 0);
|
|
140
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
141
|
+
--muted: oklch(0.269 0 0);
|
|
142
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
143
|
+
--accent: oklch(0.269 0 0);
|
|
144
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
145
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
146
|
+
--border: oklch(1 0 0 / 10%);
|
|
147
|
+
--input: oklch(1 0 0 / 15%);
|
|
148
|
+
--ring: oklch(0.556 0 0);
|
|
149
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
150
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
151
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
152
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
153
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
154
|
+
--sidebar: oklch(0.205 0 0);
|
|
155
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
156
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
157
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
158
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
159
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
160
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
161
|
+
--sidebar-ring: oklch(0.556 0 0);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
@layer base {
|
|
165
|
+
* {
|
|
166
|
+
@apply border-border outline-ring/50;
|
|
167
|
+
}
|
|
168
|
+
body {
|
|
169
|
+
@apply bg-background text-foreground;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/*
|
|
174
|
+
* Restore HeroUI theme variables inside the Command Center scope.
|
|
175
|
+
* shadcn redefines --muted, --accent, --accent-foreground with different
|
|
176
|
+
* semantics (bg colors vs text colors). This scope restores HeroUI's values
|
|
177
|
+
* so HeroUI components render correctly.
|
|
178
|
+
*/
|
|
179
|
+
.heroui-scope {
|
|
180
|
+
/* Engine HeroUI theme overrides */
|
|
181
|
+
--primary: #000000;
|
|
182
|
+
--primary-foreground: oklch(0.9911 0 0);
|
|
183
|
+
--secondary: #5BC8C8;
|
|
184
|
+
--secondary-foreground: oklch(0.2103 0.0059 285.89);
|
|
185
|
+
--success: #16A34A;
|
|
186
|
+
--success-foreground: oklch(0.9911 0 0);
|
|
187
|
+
--warning: #F59E0B;
|
|
188
|
+
--warning-foreground: oklch(0.2103 0.0059 285.89);
|
|
189
|
+
--danger: #FF5722;
|
|
190
|
+
--danger-foreground: oklch(0.9911 0 0);
|
|
191
|
+
|
|
192
|
+
--muted: oklch(0.5517 0.0138 285.94);
|
|
193
|
+
--accent: oklch(0.6204 0.195 253.83);
|
|
194
|
+
--accent-foreground: oklch(0.9911 0 0);
|
|
195
|
+
--background: oklch(0.9702 0 0);
|
|
196
|
+
--foreground: oklch(0.2103 0.0059 285.89);
|
|
197
|
+
--default: oklch(94% 0.001 286.375);
|
|
198
|
+
--default-foreground: oklch(0.2103 0.0059 285.89);
|
|
199
|
+
--border: oklch(90% 0.004 286.32);
|
|
200
|
+
--separator: oklch(92% 0.004 286.32);
|
|
201
|
+
--segment: oklch(100% 0 0);
|
|
202
|
+
--segment-foreground: oklch(0.2103 0.0059 285.89);
|
|
203
|
+
--surface: oklch(100% 0 0);
|
|
204
|
+
--surface-foreground: oklch(0.2103 0.0059 285.89);
|
|
205
|
+
--overlay: oklch(100% 0 0);
|
|
206
|
+
--overlay-foreground: oklch(0.2103 0.0059 285.89);
|
|
207
|
+
--focus: oklch(0.6204 0.195 253.83);
|
|
208
|
+
--link: oklch(0.2103 0.0059 285.89);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.dark .heroui-scope,
|
|
212
|
+
.heroui-scope.dark {
|
|
213
|
+
--muted: oklch(70.5% 0.015 286.067);
|
|
214
|
+
--background: oklch(12% 0.005 285.823);
|
|
215
|
+
--foreground: oklch(0.9911 0 0);
|
|
216
|
+
--default: oklch(27.4% 0.006 286.033);
|
|
217
|
+
--default-foreground: oklch(0.9911 0 0);
|
|
218
|
+
--border: oklch(28% 0.006 286.033);
|
|
219
|
+
--separator: oklch(25% 0.006 286.033);
|
|
220
|
+
--segment: oklch(0.3964 0.01 285.93);
|
|
221
|
+
--segment-foreground: oklch(0.9911 0 0);
|
|
222
|
+
--surface: oklch(0.2103 0.0059 285.89);
|
|
223
|
+
--surface-foreground: oklch(0.9911 0 0);
|
|
224
|
+
--overlay: oklch(0.2103 0.0059 285.89);
|
|
225
|
+
--overlay-foreground: oklch(0.9911 0 0);
|
|
226
|
+
--warning: oklch(0.8203 0.1388 76.34);
|
|
227
|
+
--warning-foreground: oklch(0.2103 0.0059 285.89);
|
|
228
|
+
--danger: oklch(0.594 0.1967 24.63);
|
|
229
|
+
--danger-foreground: oklch(0.9911 0 0);
|
|
230
|
+
--focus: oklch(0.6204 0.195 253.83);
|
|
231
|
+
--link: oklch(0.9911 0 0);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
/* ChatBar overlay — add horizontal padding so it doesn't hit window edges */
|
|
235
|
+
body > .fixed.inset-x-0.rounded-2xl {
|
|
236
|
+
left: 1.5rem !important;
|
|
237
|
+
right: 1.5rem !important;
|
|
238
|
+
}
|
package/package.json
CHANGED