configuration-management 0.1.4 → 0.1.8
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/README.md +21 -9
- package/package.json +8 -4
- package/scripts/build-web.js +58 -0
- package/scripts/{setup-app-config.js → setup.js} +27 -19
- package/web/dist/index.css +294 -0
- package/web/dist/index.js +2717 -0
- package/web/index.js +2 -3
- package/web/src/index.js +2 -0
- package/web/styles.css +326 -1
package/web/index.js
CHANGED
|
@@ -3,6 +3,5 @@ Copyright 2025 Adobe. All rights reserved.
|
|
|
3
3
|
Licensed under the Apache License, Version 2.0
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
export * from './src/index.js'
|
|
6
|
+
import './dist/index.css'
|
|
7
|
+
export * from './dist/index.js'
|
package/web/src/index.js
CHANGED
|
@@ -5,6 +5,8 @@ you may not use this file except in compliance with the License. You may obtain
|
|
|
5
5
|
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
import './styles/index.css'
|
|
9
|
+
|
|
8
10
|
import App from './components/App'
|
|
9
11
|
import { MainPage } from './components/MainPage'
|
|
10
12
|
import ExtensionRegistration from './components/ExtensionRegistration'
|
package/web/styles.css
CHANGED
|
@@ -1 +1,326 @@
|
|
|
1
|
-
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2025 Adobe. All rights reserved.
|
|
3
|
+
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
+
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* =========================================================================
|
|
9
|
+
sync-management — single source of truth for the UI theme.
|
|
10
|
+
|
|
11
|
+
To re-skin the app, change values under :root. Components consume these
|
|
12
|
+
tokens either directly via CSS classes (.sm-*) or via the JS facade in
|
|
13
|
+
`web-src/src/theme.js` which re-exports them as `var(--sm-*)` strings.
|
|
14
|
+
|
|
15
|
+
Token naming:
|
|
16
|
+
--sm-color-* colors
|
|
17
|
+
--sm-radius-* border radii
|
|
18
|
+
--sm-space-* spacing scale
|
|
19
|
+
--sm-shadow-* elevation
|
|
20
|
+
--sm-font-* typography
|
|
21
|
+
--sm-control-* interactive control sizing
|
|
22
|
+
========================================================================= */
|
|
23
|
+
|
|
24
|
+
:root {
|
|
25
|
+
/* ---- Colors --------------------------------------------------------- */
|
|
26
|
+
--sm-color-bg: #f7f8fa;
|
|
27
|
+
--sm-color-surface: #ffffff;
|
|
28
|
+
--sm-color-surface-muted: #f3f4f6;
|
|
29
|
+
--sm-color-surface-subtle: #fafbfc;
|
|
30
|
+
--sm-color-border: #e5e7eb;
|
|
31
|
+
--sm-color-border-strong: #d1d5db;
|
|
32
|
+
--sm-color-text: #111827;
|
|
33
|
+
--sm-color-text-muted: #6b7280;
|
|
34
|
+
--sm-color-text-inverse: #ffffff;
|
|
35
|
+
|
|
36
|
+
--sm-color-accent: #1473e6;
|
|
37
|
+
--sm-color-accent-hover: #0f5fc4;
|
|
38
|
+
--sm-color-accent-soft: #e8f1fc;
|
|
39
|
+
|
|
40
|
+
--sm-color-success: #22863a;
|
|
41
|
+
--sm-color-success-hover: #1a6e2f;
|
|
42
|
+
--sm-color-success-soft: #ecfdf5;
|
|
43
|
+
--sm-color-warning: #b58105;
|
|
44
|
+
--sm-color-warning-hover: #946c04;
|
|
45
|
+
--sm-color-warning-soft: #fff7ed;
|
|
46
|
+
--sm-color-warning-border: #fde68a;
|
|
47
|
+
--sm-color-warning-text: #92400e;
|
|
48
|
+
--sm-color-warning-tint: #fef3c7;
|
|
49
|
+
--sm-color-danger: #c0392b;
|
|
50
|
+
--sm-color-danger-hover: #a32d20;
|
|
51
|
+
--sm-color-danger-soft: #fef2f2;
|
|
52
|
+
--sm-color-danger-tint: #fee2e2;
|
|
53
|
+
--sm-color-accent-tint: #dbeafe;
|
|
54
|
+
|
|
55
|
+
--sm-color-neutral-soft: #eef2f7;
|
|
56
|
+
--sm-color-neutral-text: #374151;
|
|
57
|
+
|
|
58
|
+
/* Surfaces used by the modal scaffolding (header text, body text, panel). */
|
|
59
|
+
--sm-color-text-strong: #1f2937;
|
|
60
|
+
--sm-color-text-soft: #475569;
|
|
61
|
+
--sm-color-surface-panel: #f9fafb;
|
|
62
|
+
|
|
63
|
+
/* Modal / overlay scrim */
|
|
64
|
+
--sm-color-overlay: rgba(15, 23, 42, 0.45);
|
|
65
|
+
|
|
66
|
+
/* ---- Radii ---------------------------------------------------------- */
|
|
67
|
+
--sm-radius-sm: 4px;
|
|
68
|
+
--sm-radius-md: 8px;
|
|
69
|
+
--sm-radius-lg: 10px;
|
|
70
|
+
--sm-radius-xl: 12px;
|
|
71
|
+
--sm-radius-2xl: 14px;
|
|
72
|
+
--sm-radius-pill: 999px;
|
|
73
|
+
|
|
74
|
+
/* ---- Spacing -------------------------------------------------------- */
|
|
75
|
+
--sm-space-1: 4px;
|
|
76
|
+
--sm-space-2: 8px;
|
|
77
|
+
--sm-space-3: 12px;
|
|
78
|
+
--sm-space-4: 16px;
|
|
79
|
+
--sm-space-5: 20px;
|
|
80
|
+
--sm-space-6: 24px;
|
|
81
|
+
|
|
82
|
+
/* ---- Shadows -------------------------------------------------------- */
|
|
83
|
+
--sm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
|
|
84
|
+
--sm-shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.04);
|
|
85
|
+
--sm-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 1px rgba(15, 23, 42, 0.06);
|
|
86
|
+
--sm-shadow-pill: 0 1px 3px rgba(15, 23, 42, 0.10), 0 1px 1px rgba(15, 23, 42, 0.06);
|
|
87
|
+
--sm-shadow-floating: 0 4px 14px rgba(15, 23, 42, 0.08);
|
|
88
|
+
--sm-shadow-dropdown: 0 12px 28px rgba(15, 23, 42, 0.16), 0 2px 4px rgba(15, 23, 42, 0.06);
|
|
89
|
+
--sm-shadow-modal: 0 24px 60px rgba(15, 23, 42, 0.25), 0 2px 8px rgba(15, 23, 42, 0.08);
|
|
90
|
+
--sm-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.04);
|
|
91
|
+
|
|
92
|
+
/* ---- Typography ----------------------------------------------------- */
|
|
93
|
+
--sm-font-family: adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
94
|
+
--sm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
95
|
+
--sm-font-size-xs: 11px;
|
|
96
|
+
--sm-font-size-sm: 12px;
|
|
97
|
+
--sm-font-size-md: 13px;
|
|
98
|
+
--sm-font-size-lg: 14px;
|
|
99
|
+
--sm-font-weight-regular: 400;
|
|
100
|
+
--sm-font-weight-medium: 500;
|
|
101
|
+
--sm-font-weight-semibold:600;
|
|
102
|
+
--sm-font-weight-bold: 700;
|
|
103
|
+
|
|
104
|
+
/* ---- Control sizing ------------------------------------------------- */
|
|
105
|
+
--sm-control-height-sm: 28px;
|
|
106
|
+
--sm-control-height-md: 32px;
|
|
107
|
+
--sm-control-height-lg: 40px;
|
|
108
|
+
--sm-control-padding-x: 16px;
|
|
109
|
+
|
|
110
|
+
/* ---- Z-index -------------------------------------------------------- */
|
|
111
|
+
--sm-z-nav: 30;
|
|
112
|
+
--sm-z-sticky: 20;
|
|
113
|
+
--sm-z-modal: 100;
|
|
114
|
+
|
|
115
|
+
/* =====================================================================
|
|
116
|
+
Spectrum token overrides — re-skin React-Spectrum widgets without
|
|
117
|
+
forking the theme. Keep these in sync with the --sm-* tokens above
|
|
118
|
+
so default Buttons / TextField / Picker pick up our accent automatically.
|
|
119
|
+
===================================================================== */
|
|
120
|
+
--spectrum-accent-color-900: var(--sm-color-accent);
|
|
121
|
+
--spectrum-accent-color-1000: var(--sm-color-accent-hover);
|
|
122
|
+
/* Text colours are left to Spectrum so secondary/quiet buttons keep
|
|
123
|
+
their proper contrast on both light and dark surfaces. */
|
|
124
|
+
|
|
125
|
+
color-scheme: light;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* =========================================================================
|
|
129
|
+
Base
|
|
130
|
+
========================================================================= */
|
|
131
|
+
html,
|
|
132
|
+
body,
|
|
133
|
+
#root {
|
|
134
|
+
margin: 0;
|
|
135
|
+
min-height: 100%;
|
|
136
|
+
background: var(--sm-color-bg);
|
|
137
|
+
color: var(--sm-color-text);
|
|
138
|
+
font-family: var(--sm-font-family);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/* React-Spectrum's <Provider> wraps its tree in a div. We mark it with
|
|
142
|
+
`UNSAFE_className="sm-provider"` and set its background here so the page
|
|
143
|
+
bg fills the whole iframe — but we only paint the wrapper, NOT any
|
|
144
|
+
descendants. Painting descendants stomps on inputs / buttons / pickers. */
|
|
145
|
+
.sm-provider {
|
|
146
|
+
background: var(--sm-color-bg);
|
|
147
|
+
min-height: 100vh;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* =========================================================================
|
|
151
|
+
Cards
|
|
152
|
+
========================================================================= */
|
|
153
|
+
.sm-card {
|
|
154
|
+
background: var(--sm-color-surface);
|
|
155
|
+
border: 1px solid var(--sm-color-border);
|
|
156
|
+
border-radius: var(--sm-radius-lg);
|
|
157
|
+
box-shadow: var(--sm-shadow-xs);
|
|
158
|
+
padding: var(--sm-space-5);
|
|
159
|
+
}
|
|
160
|
+
.sm-card--flush { padding: 0; }
|
|
161
|
+
|
|
162
|
+
/* =========================================================================
|
|
163
|
+
Pills
|
|
164
|
+
========================================================================= */
|
|
165
|
+
.sm-pill {
|
|
166
|
+
display: inline-flex;
|
|
167
|
+
align-items: center;
|
|
168
|
+
gap: var(--sm-space-1);
|
|
169
|
+
padding: 2px var(--sm-space-2);
|
|
170
|
+
border-radius: var(--sm-radius-pill);
|
|
171
|
+
background: var(--sm-color-neutral-soft);
|
|
172
|
+
color: var(--sm-color-neutral-text);
|
|
173
|
+
font-size: var(--sm-font-size-xs);
|
|
174
|
+
font-weight: var(--sm-font-weight-semibold);
|
|
175
|
+
line-height: 16px;
|
|
176
|
+
letter-spacing: 0.2px;
|
|
177
|
+
white-space: nowrap;
|
|
178
|
+
}
|
|
179
|
+
.sm-pill--accent { background: var(--sm-color-accent-soft); color: var(--sm-color-accent); }
|
|
180
|
+
.sm-pill--success { background: var(--sm-color-success-soft); color: var(--sm-color-success); }
|
|
181
|
+
.sm-pill--warning { background: var(--sm-color-warning-soft); color: var(--sm-color-warning); }
|
|
182
|
+
.sm-pill--danger { background: var(--sm-color-danger-soft); color: var(--sm-color-danger); }
|
|
183
|
+
|
|
184
|
+
/* =========================================================================
|
|
185
|
+
Tab bar (used by AppSectionNav)
|
|
186
|
+
========================================================================= */
|
|
187
|
+
.sm-tab-bar {
|
|
188
|
+
position: sticky;
|
|
189
|
+
top: 0;
|
|
190
|
+
z-index: var(--sm-z-nav);
|
|
191
|
+
background: var(--sm-color-surface);
|
|
192
|
+
border-bottom: 1px solid var(--sm-color-border);
|
|
193
|
+
padding: 10px var(--sm-space-4);
|
|
194
|
+
box-shadow: var(--sm-shadow-sm);
|
|
195
|
+
box-sizing: border-box;
|
|
196
|
+
max-width: 100%;
|
|
197
|
+
}
|
|
198
|
+
.sm-tab-bar__track {
|
|
199
|
+
display: inline-flex;
|
|
200
|
+
padding: var(--sm-space-1);
|
|
201
|
+
background: var(--sm-color-surface-muted);
|
|
202
|
+
border: 1px solid var(--sm-color-border);
|
|
203
|
+
border-radius: var(--sm-radius-pill);
|
|
204
|
+
box-shadow: var(--sm-shadow-inset);
|
|
205
|
+
gap: 2px;
|
|
206
|
+
font-family: var(--sm-font-family);
|
|
207
|
+
}
|
|
208
|
+
.sm-tab {
|
|
209
|
+
display: inline-flex;
|
|
210
|
+
align-items: center;
|
|
211
|
+
gap: var(--sm-space-2);
|
|
212
|
+
padding: var(--sm-space-2) var(--sm-control-padding-x);
|
|
213
|
+
border: 0;
|
|
214
|
+
border-radius: var(--sm-radius-pill);
|
|
215
|
+
background: transparent;
|
|
216
|
+
color: var(--sm-color-neutral-text);
|
|
217
|
+
font-size: var(--sm-font-size-md);
|
|
218
|
+
font-weight: var(--sm-font-weight-semibold);
|
|
219
|
+
letter-spacing: 0.1px;
|
|
220
|
+
cursor: pointer;
|
|
221
|
+
transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
|
|
222
|
+
}
|
|
223
|
+
.sm-tab:hover {
|
|
224
|
+
background: var(--sm-color-surface);
|
|
225
|
+
color: var(--sm-color-text);
|
|
226
|
+
}
|
|
227
|
+
.sm-tab.is-active {
|
|
228
|
+
background: var(--sm-color-surface);
|
|
229
|
+
color: var(--sm-color-accent);
|
|
230
|
+
font-weight: var(--sm-font-weight-bold);
|
|
231
|
+
box-shadow: var(--sm-shadow-pill);
|
|
232
|
+
cursor: default;
|
|
233
|
+
}
|
|
234
|
+
.sm-tab__icon { display: inline-flex; opacity: 0.75; }
|
|
235
|
+
.sm-tab.is-active .sm-tab__icon { opacity: 1; }
|
|
236
|
+
|
|
237
|
+
/* =========================================================================
|
|
238
|
+
Spectrum textareas inside the system-config field renderer
|
|
239
|
+
========================================================================= */
|
|
240
|
+
.sm-textarea textarea {
|
|
241
|
+
height: 160px !important;
|
|
242
|
+
max-height: 160px !important;
|
|
243
|
+
min-height: 160px !important;
|
|
244
|
+
overflow-y: auto !important;
|
|
245
|
+
resize: none !important;
|
|
246
|
+
font-family: var(--sm-font-mono);
|
|
247
|
+
font-size: var(--sm-font-size-sm);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* =========================================================================
|
|
251
|
+
Note banner (used by ComingSoon, info callouts, etc.)
|
|
252
|
+
========================================================================= */
|
|
253
|
+
.sm-note {
|
|
254
|
+
margin-top: var(--sm-space-3);
|
|
255
|
+
padding: var(--sm-space-3);
|
|
256
|
+
border-radius: var(--sm-radius-md);
|
|
257
|
+
background: var(--sm-color-surface-muted);
|
|
258
|
+
border: 1px solid var(--sm-color-border);
|
|
259
|
+
color: var(--sm-color-text);
|
|
260
|
+
font-size: var(--sm-font-size-md);
|
|
261
|
+
white-space: pre-line;
|
|
262
|
+
font-family: var(--sm-font-mono);
|
|
263
|
+
}
|
|
264
|
+
.sm-note--warning {
|
|
265
|
+
background: var(--sm-color-warning-soft);
|
|
266
|
+
border-color: var(--sm-color-warning-border);
|
|
267
|
+
color: var(--sm-color-warning-text);
|
|
268
|
+
font-family: var(--sm-font-family);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/* =========================================================================
|
|
272
|
+
Animations (used by progress / status indicators)
|
|
273
|
+
========================================================================= */
|
|
274
|
+
@keyframes sm-pulse {
|
|
275
|
+
0%, 100% { opacity: 1; }
|
|
276
|
+
50% { opacity: 0.3; }
|
|
277
|
+
}
|
|
278
|
+
@keyframes sm-indeterminate {
|
|
279
|
+
0% { left: -40%; width: 40%; }
|
|
280
|
+
50% { left: 30%; width: 40%; }
|
|
281
|
+
100% { left: 100%; width: 40%; }
|
|
282
|
+
}
|
|
283
|
+
@keyframes sm-fade-in {
|
|
284
|
+
from { opacity: 0; }
|
|
285
|
+
to { opacity: 1; }
|
|
286
|
+
}
|
|
287
|
+
@keyframes sm-pop-in {
|
|
288
|
+
from { opacity: 0; transform: translateY(8px) scale(0.98); }
|
|
289
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* =========================================================================
|
|
293
|
+
Legacy SideNav classes (kept for backwards compat with any remaining
|
|
294
|
+
menu markup; safe to delete once nothing references them).
|
|
295
|
+
========================================================================= */
|
|
296
|
+
.SideNav {
|
|
297
|
+
list-style-type: none;
|
|
298
|
+
margin: 0;
|
|
299
|
+
padding: 0;
|
|
300
|
+
outline: none;
|
|
301
|
+
height: 100%;
|
|
302
|
+
}
|
|
303
|
+
.SideNav-item {
|
|
304
|
+
list-style-type: none;
|
|
305
|
+
margin: var(--spectrum-global-dimension-size-50) 0;
|
|
306
|
+
}
|
|
307
|
+
.SideNav-itemLink {
|
|
308
|
+
position: relative;
|
|
309
|
+
display: inline-flex;
|
|
310
|
+
align-items: center;
|
|
311
|
+
box-sizing: border-box;
|
|
312
|
+
width: 100%;
|
|
313
|
+
padding: var(--sm-space-2) var(--sm-space-3);
|
|
314
|
+
border-radius: var(--sm-radius-sm);
|
|
315
|
+
font-size: var(--sm-font-size-lg);
|
|
316
|
+
font-weight: var(--sm-font-weight-regular);
|
|
317
|
+
text-decoration: none;
|
|
318
|
+
word-break: break-word;
|
|
319
|
+
cursor: pointer;
|
|
320
|
+
background: transparent;
|
|
321
|
+
color: var(--sm-color-text);
|
|
322
|
+
}
|
|
323
|
+
.SideNav-itemLink.is-selected {
|
|
324
|
+
color: var(--sm-color-accent);
|
|
325
|
+
background: var(--sm-color-accent-soft);
|
|
326
|
+
}
|