@amplify-ai/tokens-studio 1.0.1 → 1.0.3
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/dist/tailwind.css +4 -0
- package/dist/tokens.js +22 -0
- package/dist/tokens.json +22 -0
- package/dist/variables.css +81 -0
- package/dist/variables.scss +22 -0
- package/package.json +1 -1
- package/tokens/theme-dark.json +26 -4
- package/tokens/theme-light.json +26 -4
package/dist/tailwind.css
CHANGED
|
@@ -67,6 +67,9 @@
|
|
|
67
67
|
--shadow-accent-sm: 0 1px 4px 0 rgba(101, 49, 255, 0.15);
|
|
68
68
|
--shadow-accent-md: 0 4px 12px -2px rgba(101, 49, 255, 0.25);
|
|
69
69
|
--shadow-accent-lg: 0 10px 25px -4px rgba(101, 49, 255, 0.35);
|
|
70
|
+
--shadow-ring-accent: 0 0 0 2px var(--amp-semantic-border-accent);
|
|
71
|
+
--shadow-composer: 0 -4px 12px -4px rgba(28, 25, 23, 0.08);
|
|
72
|
+
--shadow-device: 0 12px 32px -8px rgba(28, 25, 23, 0.18), 0 4px 12px -4px rgba(28, 25, 23, 0.10);
|
|
70
73
|
--spacing-1: 4px;
|
|
71
74
|
--spacing-2: 8px;
|
|
72
75
|
--spacing-3: 12px;
|
|
@@ -114,6 +117,7 @@
|
|
|
114
117
|
--color-semantic-status-error-bg: rgba(220, 38, 38, 0.08);
|
|
115
118
|
--color-semantic-status-info: #2563EB;
|
|
116
119
|
--color-semantic-status-info-bg: rgba(37, 99, 235, 0.08);
|
|
120
|
+
--color-semantic-color-info-soft: rgba(37, 99, 235, 0.08);
|
|
117
121
|
--color-theme-color-bg: #FFFFFF;
|
|
118
122
|
--color-theme-color-fg: #1C1917;
|
|
119
123
|
--color-theme-color-muted: #57534E;
|
package/dist/tokens.js
CHANGED
|
@@ -88,6 +88,9 @@ export const shadowLgDark = "0 8px 24px rgba(0, 0, 0, 0.4)";
|
|
|
88
88
|
export const shadowAccentSm = "0 1px 4px 0 rgba(101, 49, 255, 0.15)";
|
|
89
89
|
export const shadowAccentMd = "0 4px 12px -2px rgba(101, 49, 255, 0.25)";
|
|
90
90
|
export const shadowAccentLg = "0 10px 25px -4px rgba(101, 49, 255, 0.35)";
|
|
91
|
+
export const shadowRingAccent = "0 0 0 2px var(--amp-semantic-border-accent)";
|
|
92
|
+
export const shadowComposer = "0 -4px 12px -4px rgba(28, 25, 23, 0.08)";
|
|
93
|
+
export const shadowDevice = "0 12px 32px -8px rgba(28, 25, 23, 0.18), 0 4px 12px -4px rgba(28, 25, 23, 0.10)";
|
|
91
94
|
export const spacing1 = "4px";
|
|
92
95
|
export const spacing2 = "8px";
|
|
93
96
|
export const spacing3 = "12px";
|
|
@@ -154,6 +157,7 @@ export const semanticStatusError = "#DC2626";
|
|
|
154
157
|
export const semanticStatusErrorBg = "rgba(220, 38, 38, 0.08)";
|
|
155
158
|
export const semanticStatusInfo = "#2563EB";
|
|
156
159
|
export const semanticStatusInfoBg = "rgba(37, 99, 235, 0.08)";
|
|
160
|
+
export const semanticColorInfoSoft = "rgba(37, 99, 235, 0.08)";
|
|
157
161
|
export const themeColorBg = "#FFFFFF";
|
|
158
162
|
export const themeColorFg = "#1C1917";
|
|
159
163
|
export const themeColorMuted = "#57534E";
|
|
@@ -163,6 +167,24 @@ export const themeLayoutToolbarH = "56px";
|
|
|
163
167
|
export const themeLayoutDrawerH = "48px";
|
|
164
168
|
export const themeLayoutDrawerHOpen = "240px";
|
|
165
169
|
export const themeLayoutPaneLeftW = "30%";
|
|
170
|
+
export const themeLayoutTopbarH = "56px";
|
|
171
|
+
export const themeLayoutThreadMaxW = "1180px";
|
|
172
|
+
export const themeLayoutComposerMaxW = "980px";
|
|
173
|
+
export const themeLayoutFlowSidebarW = "260px";
|
|
174
|
+
export const themeLayoutFlowSidebarRailW = "44px";
|
|
175
|
+
export const themeLayoutHistoryPanelW = "360px";
|
|
176
|
+
export const themeLayoutVariantCardH = "580px";
|
|
177
|
+
export const themeLayoutVariantCardW = "268px";
|
|
178
|
+
export const themeAspectIphone15ProMax = "1 / 2.17";
|
|
179
|
+
export const themeAspectIphone15Pro = "1 / 2.17";
|
|
180
|
+
export const themeAspectGalaxyS24 = "1 / 2.17";
|
|
181
|
+
export const themeAspectIpadPro13 = "1 / 1.33";
|
|
182
|
+
export const themeAspectIpadAir = "1 / 1.44";
|
|
183
|
+
export const themeAspectAppleWatchUltra = "1 / 1.22";
|
|
184
|
+
export const themeAspectAppleWatch9 = "1 / 1.22";
|
|
185
|
+
export const themeAspectMac = "1.6 / 1";
|
|
186
|
+
export const themeAspectMac1280 = "1.6 / 1";
|
|
187
|
+
export const themeAspectFlowThumb = "160 / 100";
|
|
166
188
|
export const themeMapVoicePixel = "#7C3AED";
|
|
167
189
|
export const themeMapVoiceAria = "#F59E0B";
|
|
168
190
|
export const themeMapVoiceHeimdall = "#3B82F6";
|
package/dist/tokens.json
CHANGED
|
@@ -87,6 +87,9 @@
|
|
|
87
87
|
"amp-studio-shadow-accent-sm": "0 1px 4px 0 rgba(101, 49, 255, 0.15)",
|
|
88
88
|
"amp-studio-shadow-accent-md": "0 4px 12px -2px rgba(101, 49, 255, 0.25)",
|
|
89
89
|
"amp-studio-shadow-accent-lg": "0 10px 25px -4px rgba(101, 49, 255, 0.35)",
|
|
90
|
+
"amp-studio-shadow-ring-accent": "0 0 0 2px var(--amp-semantic-border-accent)",
|
|
91
|
+
"amp-studio-shadow-composer": "0 -4px 12px -4px rgba(28, 25, 23, 0.08)",
|
|
92
|
+
"amp-studio-shadow-device": "0 12px 32px -8px rgba(28, 25, 23, 0.18), 0 4px 12px -4px rgba(28, 25, 23, 0.10)",
|
|
90
93
|
"amp-studio-spacing-1": "4px",
|
|
91
94
|
"amp-studio-spacing-2": "8px",
|
|
92
95
|
"amp-studio-spacing-3": "12px",
|
|
@@ -153,6 +156,7 @@
|
|
|
153
156
|
"amp-studio-semantic-status-error-bg": "rgba(220, 38, 38, 0.08)",
|
|
154
157
|
"amp-studio-semantic-status-info": "#2563EB",
|
|
155
158
|
"amp-studio-semantic-status-info-bg": "rgba(37, 99, 235, 0.08)",
|
|
159
|
+
"amp-studio-semantic-color-info-soft": "rgba(37, 99, 235, 0.08)",
|
|
156
160
|
"amp-studio-theme-color-bg": "#FFFFFF",
|
|
157
161
|
"amp-studio-theme-color-fg": "#1C1917",
|
|
158
162
|
"amp-studio-theme-color-muted": "#57534E",
|
|
@@ -162,6 +166,24 @@
|
|
|
162
166
|
"amp-studio-theme-layout-drawer-h": "48px",
|
|
163
167
|
"amp-studio-theme-layout-drawer-h-open": "240px",
|
|
164
168
|
"amp-studio-theme-layout-pane-left-w": "30%",
|
|
169
|
+
"amp-studio-theme-layout-topbar-h": "56px",
|
|
170
|
+
"amp-studio-theme-layout-thread-max-w": "1180px",
|
|
171
|
+
"amp-studio-theme-layout-composer-max-w": "980px",
|
|
172
|
+
"amp-studio-theme-layout-flow-sidebar-w": "260px",
|
|
173
|
+
"amp-studio-theme-layout-flow-sidebar-rail-w": "44px",
|
|
174
|
+
"amp-studio-theme-layout-history-panel-w": "360px",
|
|
175
|
+
"amp-studio-theme-layout-variant-card-h": "580px",
|
|
176
|
+
"amp-studio-theme-layout-variant-card-w": "268px",
|
|
177
|
+
"amp-studio-theme-aspect-iphone-15-pro-max": "1 / 2.17",
|
|
178
|
+
"amp-studio-theme-aspect-iphone-15-pro": "1 / 2.17",
|
|
179
|
+
"amp-studio-theme-aspect-galaxy-s24": "1 / 2.17",
|
|
180
|
+
"amp-studio-theme-aspect-ipad-pro-13": "1 / 1.33",
|
|
181
|
+
"amp-studio-theme-aspect-ipad-air": "1 / 1.44",
|
|
182
|
+
"amp-studio-theme-aspect-apple-watch-ultra": "1 / 1.22",
|
|
183
|
+
"amp-studio-theme-aspect-apple-watch-9": "1 / 1.22",
|
|
184
|
+
"amp-studio-theme-aspect-mac": "1.6 / 1",
|
|
185
|
+
"amp-studio-theme-aspect-mac-1280": "1.6 / 1",
|
|
186
|
+
"amp-studio-theme-aspect-flow-thumb": "160 / 100",
|
|
165
187
|
"amp-studio-theme-map-voice-pixel": "#7C3AED",
|
|
166
188
|
"amp-studio-theme-map-voice-aria": "#F59E0B",
|
|
167
189
|
"amp-studio-theme-map-voice-heimdall": "#3B82F6",
|
package/dist/variables.css
CHANGED
|
@@ -88,6 +88,9 @@
|
|
|
88
88
|
--amp-studio-shadow-accent-sm: 0 1px 4px 0 rgba(101, 49, 255, 0.15);
|
|
89
89
|
--amp-studio-shadow-accent-md: 0 4px 12px -2px rgba(101, 49, 255, 0.25);
|
|
90
90
|
--amp-studio-shadow-accent-lg: 0 10px 25px -4px rgba(101, 49, 255, 0.35);
|
|
91
|
+
--amp-studio-shadow-ring-accent: 0 0 0 2px var(--amp-semantic-border-accent);
|
|
92
|
+
--amp-studio-shadow-composer: 0 -4px 12px -4px rgba(28, 25, 23, 0.08);
|
|
93
|
+
--amp-studio-shadow-device: 0 12px 32px -8px rgba(28, 25, 23, 0.18), 0 4px 12px -4px rgba(28, 25, 23, 0.10);
|
|
91
94
|
--amp-studio-spacing-1: 4px;
|
|
92
95
|
--amp-studio-spacing-2: 8px;
|
|
93
96
|
--amp-studio-spacing-3: 12px;
|
|
@@ -154,6 +157,7 @@
|
|
|
154
157
|
--amp-studio-semantic-status-error-bg: rgba(220, 38, 38, 0.08);
|
|
155
158
|
--amp-studio-semantic-status-info: #2563EB;
|
|
156
159
|
--amp-studio-semantic-status-info-bg: rgba(37, 99, 235, 0.08);
|
|
160
|
+
--amp-studio-semantic-color-info-soft: rgba(37, 99, 235, 0.08);
|
|
157
161
|
--amp-studio-theme-color-bg: #FFFFFF;
|
|
158
162
|
--amp-studio-theme-color-fg: #1C1917;
|
|
159
163
|
--amp-studio-theme-color-muted: #57534E;
|
|
@@ -163,6 +167,24 @@
|
|
|
163
167
|
--amp-studio-theme-layout-drawer-h: 48px;
|
|
164
168
|
--amp-studio-theme-layout-drawer-h-open: 240px;
|
|
165
169
|
--amp-studio-theme-layout-pane-left-w: 30%;
|
|
170
|
+
--amp-studio-theme-layout-topbar-h: 56px;
|
|
171
|
+
--amp-studio-theme-layout-thread-max-w: 1180px;
|
|
172
|
+
--amp-studio-theme-layout-composer-max-w: 980px;
|
|
173
|
+
--amp-studio-theme-layout-flow-sidebar-w: 260px;
|
|
174
|
+
--amp-studio-theme-layout-flow-sidebar-rail-w: 44px;
|
|
175
|
+
--amp-studio-theme-layout-history-panel-w: 360px;
|
|
176
|
+
--amp-studio-theme-layout-variant-card-h: 580px;
|
|
177
|
+
--amp-studio-theme-layout-variant-card-w: 268px;
|
|
178
|
+
--amp-studio-theme-aspect-iphone-15-pro-max: 1 / 2.17;
|
|
179
|
+
--amp-studio-theme-aspect-iphone-15-pro: 1 / 2.17;
|
|
180
|
+
--amp-studio-theme-aspect-galaxy-s24: 1 / 2.17;
|
|
181
|
+
--amp-studio-theme-aspect-ipad-pro-13: 1 / 1.33;
|
|
182
|
+
--amp-studio-theme-aspect-ipad-air: 1 / 1.44;
|
|
183
|
+
--amp-studio-theme-aspect-apple-watch-ultra: 1 / 1.22;
|
|
184
|
+
--amp-studio-theme-aspect-apple-watch-9: 1 / 1.22;
|
|
185
|
+
--amp-studio-theme-aspect-mac: 1.6 / 1;
|
|
186
|
+
--amp-studio-theme-aspect-mac-1280: 1.6 / 1;
|
|
187
|
+
--amp-studio-theme-aspect-flow-thumb: 160 / 100;
|
|
166
188
|
--amp-studio-theme-map-voice-pixel: #7C3AED;
|
|
167
189
|
--amp-studio-theme-map-voice-aria: #F59E0B;
|
|
168
190
|
--amp-studio-theme-map-voice-heimdall: #3B82F6;
|
|
@@ -189,27 +211,42 @@
|
|
|
189
211
|
--amp-semantic-bg-base: var(--amp-studio-semantic-bg-primary);
|
|
190
212
|
--amp-semantic-bg-canvas: var(--amp-studio-semantic-bg-sunken);
|
|
191
213
|
--amp-semantic-bg-subtle: var(--amp-studio-semantic-bg-sunken);
|
|
214
|
+
--amp-semantic-bg-sunken: var(--amp-studio-semantic-bg-sunken);
|
|
192
215
|
--amp-semantic-bg-raised: var(--amp-studio-semantic-bg-raised);
|
|
216
|
+
--amp-semantic-bg-accent: var(--amp-studio-semantic-accent);
|
|
193
217
|
--amp-semantic-bg-accent-subtle: var(--amp-studio-semantic-accent-subtle);
|
|
194
218
|
--amp-semantic-bg-success-subtle: var(--amp-studio-semantic-status-success-bg);
|
|
195
219
|
--amp-semantic-bg-warning-subtle: var(--amp-studio-semantic-status-warning-bg);
|
|
196
220
|
--amp-semantic-bg-error-subtle: var(--amp-studio-semantic-status-error-bg);
|
|
197
221
|
--amp-semantic-bg-info-subtle: var(--amp-studio-semantic-status-info-bg);
|
|
198
222
|
--amp-semantic-text-default: var(--amp-studio-semantic-text-primary);
|
|
223
|
+
--amp-semantic-text-primary: var(--amp-studio-semantic-text-primary);
|
|
199
224
|
--amp-semantic-text-secondary: var(--amp-studio-semantic-text-secondary);
|
|
200
225
|
--amp-semantic-text-tertiary: var(--amp-studio-semantic-text-muted);
|
|
226
|
+
--amp-semantic-text-muted: var(--amp-studio-semantic-text-muted);
|
|
201
227
|
--amp-semantic-text-inverse: var(--amp-studio-semantic-text-inverse);
|
|
228
|
+
--amp-semantic-text-on-accent: var(--amp-studio-semantic-text-inverse);
|
|
202
229
|
--amp-semantic-text-accent: var(--amp-studio-semantic-text-accent);
|
|
203
230
|
--amp-semantic-status-success: var(--amp-studio-semantic-status-success);
|
|
204
231
|
--amp-semantic-status-warning: var(--amp-studio-semantic-status-warning);
|
|
205
232
|
--amp-semantic-status-error: var(--amp-studio-semantic-status-error);
|
|
206
233
|
--amp-semantic-status-info: var(--amp-studio-semantic-status-info);
|
|
234
|
+
--amp-semantic-status-error-bg: var(--amp-studio-semantic-status-error-bg);
|
|
235
|
+
--amp-semantic-status-warning-bg: var(--amp-studio-semantic-status-warning-bg);
|
|
236
|
+
--amp-semantic-status-success-bg: var(--amp-studio-semantic-status-success-bg);
|
|
237
|
+
--amp-semantic-status-info-bg: var(--amp-studio-semantic-status-info-bg);
|
|
207
238
|
--amp-semantic-border-default: var(--amp-studio-semantic-border-default);
|
|
208
239
|
--amp-semantic-border-strong: var(--amp-studio-semantic-border-strong);
|
|
209
240
|
--amp-semantic-border-subtle: var(--amp-studio-semantic-border-subtle);
|
|
210
241
|
--amp-semantic-border-accent: var(--amp-studio-semantic-border-accent);
|
|
211
242
|
--amp-semantic-border-success: var(--amp-studio-semantic-status-success);
|
|
243
|
+
--amp-semantic-border-error: var(--amp-studio-semantic-status-error);
|
|
244
|
+
--amp-semantic-border-warning: var(--amp-studio-semantic-status-warning);
|
|
245
|
+
--amp-semantic-border-info: var(--amp-studio-semantic-status-info);
|
|
212
246
|
--amp-semantic-border-focus: var(--amp-studio-semantic-border-focus);
|
|
247
|
+
--amp-semantic-accent: var(--amp-studio-semantic-accent);
|
|
248
|
+
--amp-semantic-accent-light: var(--amp-studio-semantic-accent-light);
|
|
249
|
+
--amp-semantic-accent-primary: var(--amp-studio-semantic-accent);
|
|
213
250
|
--amp-semantic-accent-soft: var(--amp-studio-semantic-accent-light);
|
|
214
251
|
}
|
|
215
252
|
|
|
@@ -303,6 +340,9 @@
|
|
|
303
340
|
--amp-studio-shadow-accent-sm: 0 1px 4px 0 rgba(101, 49, 255, 0.15);
|
|
304
341
|
--amp-studio-shadow-accent-md: 0 4px 12px -2px rgba(101, 49, 255, 0.25);
|
|
305
342
|
--amp-studio-shadow-accent-lg: 0 10px 25px -4px rgba(101, 49, 255, 0.35);
|
|
343
|
+
--amp-studio-shadow-ring-accent: 0 0 0 2px var(--amp-semantic-border-accent);
|
|
344
|
+
--amp-studio-shadow-composer: 0 -4px 12px -4px rgba(28, 25, 23, 0.08);
|
|
345
|
+
--amp-studio-shadow-device: 0 12px 32px -8px rgba(28, 25, 23, 0.18), 0 4px 12px -4px rgba(28, 25, 23, 0.10);
|
|
306
346
|
--amp-studio-spacing-1: 4px;
|
|
307
347
|
--amp-studio-spacing-2: 8px;
|
|
308
348
|
--amp-studio-spacing-3: 12px;
|
|
@@ -369,6 +409,7 @@
|
|
|
369
409
|
--amp-studio-semantic-status-error-bg: rgba(239, 68, 68, 0.12);
|
|
370
410
|
--amp-studio-semantic-status-info: #3B82F6;
|
|
371
411
|
--amp-studio-semantic-status-info-bg: rgba(59, 130, 246, 0.12);
|
|
412
|
+
--amp-studio-semantic-color-info-soft: rgba(59, 130, 246, 0.12);
|
|
372
413
|
--amp-studio-theme-color-bg: #292524;
|
|
373
414
|
--amp-studio-theme-color-fg: #E7E5E4;
|
|
374
415
|
--amp-studio-theme-color-muted: #A8A29E;
|
|
@@ -378,6 +419,24 @@
|
|
|
378
419
|
--amp-studio-theme-layout-drawer-h: 48px;
|
|
379
420
|
--amp-studio-theme-layout-drawer-h-open: 240px;
|
|
380
421
|
--amp-studio-theme-layout-pane-left-w: 30%;
|
|
422
|
+
--amp-studio-theme-layout-topbar-h: 56px;
|
|
423
|
+
--amp-studio-theme-layout-thread-max-w: 1180px;
|
|
424
|
+
--amp-studio-theme-layout-composer-max-w: 980px;
|
|
425
|
+
--amp-studio-theme-layout-flow-sidebar-w: 260px;
|
|
426
|
+
--amp-studio-theme-layout-flow-sidebar-rail-w: 44px;
|
|
427
|
+
--amp-studio-theme-layout-history-panel-w: 360px;
|
|
428
|
+
--amp-studio-theme-layout-variant-card-h: 580px;
|
|
429
|
+
--amp-studio-theme-layout-variant-card-w: 268px;
|
|
430
|
+
--amp-studio-theme-aspect-iphone-15-pro-max: 1 / 2.17;
|
|
431
|
+
--amp-studio-theme-aspect-iphone-15-pro: 1 / 2.17;
|
|
432
|
+
--amp-studio-theme-aspect-galaxy-s24: 1 / 2.17;
|
|
433
|
+
--amp-studio-theme-aspect-ipad-pro-13: 1 / 1.33;
|
|
434
|
+
--amp-studio-theme-aspect-ipad-air: 1 / 1.44;
|
|
435
|
+
--amp-studio-theme-aspect-apple-watch-ultra: 1 / 1.22;
|
|
436
|
+
--amp-studio-theme-aspect-apple-watch-9: 1 / 1.22;
|
|
437
|
+
--amp-studio-theme-aspect-mac: 1.6 / 1;
|
|
438
|
+
--amp-studio-theme-aspect-mac-1280: 1.6 / 1;
|
|
439
|
+
--amp-studio-theme-aspect-flow-thumb: 160 / 100;
|
|
381
440
|
--amp-studio-theme-map-voice-pixel: #A855F7;
|
|
382
441
|
--amp-studio-theme-map-voice-aria: #F59E0B;
|
|
383
442
|
--amp-studio-theme-map-voice-heimdall: #3B82F6;
|
|
@@ -483,6 +542,9 @@
|
|
|
483
542
|
--amp-studio-shadow-accent-sm: 0 1px 4px 0 rgba(101, 49, 255, 0.15);
|
|
484
543
|
--amp-studio-shadow-accent-md: 0 4px 12px -2px rgba(101, 49, 255, 0.25);
|
|
485
544
|
--amp-studio-shadow-accent-lg: 0 10px 25px -4px rgba(101, 49, 255, 0.35);
|
|
545
|
+
--amp-studio-shadow-ring-accent: 0 0 0 2px var(--amp-semantic-border-accent);
|
|
546
|
+
--amp-studio-shadow-composer: 0 -4px 12px -4px rgba(28, 25, 23, 0.08);
|
|
547
|
+
--amp-studio-shadow-device: 0 12px 32px -8px rgba(28, 25, 23, 0.18), 0 4px 12px -4px rgba(28, 25, 23, 0.10);
|
|
486
548
|
--amp-studio-spacing-1: 4px;
|
|
487
549
|
--amp-studio-spacing-2: 8px;
|
|
488
550
|
--amp-studio-spacing-3: 12px;
|
|
@@ -549,6 +611,7 @@
|
|
|
549
611
|
--amp-studio-semantic-status-error-bg: rgba(239, 68, 68, 0.12);
|
|
550
612
|
--amp-studio-semantic-status-info: #3B82F6;
|
|
551
613
|
--amp-studio-semantic-status-info-bg: rgba(59, 130, 246, 0.12);
|
|
614
|
+
--amp-studio-semantic-color-info-soft: rgba(59, 130, 246, 0.12);
|
|
552
615
|
--amp-studio-theme-color-bg: #292524;
|
|
553
616
|
--amp-studio-theme-color-fg: #E7E5E4;
|
|
554
617
|
--amp-studio-theme-color-muted: #A8A29E;
|
|
@@ -558,6 +621,24 @@
|
|
|
558
621
|
--amp-studio-theme-layout-drawer-h: 48px;
|
|
559
622
|
--amp-studio-theme-layout-drawer-h-open: 240px;
|
|
560
623
|
--amp-studio-theme-layout-pane-left-w: 30%;
|
|
624
|
+
--amp-studio-theme-layout-topbar-h: 56px;
|
|
625
|
+
--amp-studio-theme-layout-thread-max-w: 1180px;
|
|
626
|
+
--amp-studio-theme-layout-composer-max-w: 980px;
|
|
627
|
+
--amp-studio-theme-layout-flow-sidebar-w: 260px;
|
|
628
|
+
--amp-studio-theme-layout-flow-sidebar-rail-w: 44px;
|
|
629
|
+
--amp-studio-theme-layout-history-panel-w: 360px;
|
|
630
|
+
--amp-studio-theme-layout-variant-card-h: 580px;
|
|
631
|
+
--amp-studio-theme-layout-variant-card-w: 268px;
|
|
632
|
+
--amp-studio-theme-aspect-iphone-15-pro-max: 1 / 2.17;
|
|
633
|
+
--amp-studio-theme-aspect-iphone-15-pro: 1 / 2.17;
|
|
634
|
+
--amp-studio-theme-aspect-galaxy-s24: 1 / 2.17;
|
|
635
|
+
--amp-studio-theme-aspect-ipad-pro-13: 1 / 1.33;
|
|
636
|
+
--amp-studio-theme-aspect-ipad-air: 1 / 1.44;
|
|
637
|
+
--amp-studio-theme-aspect-apple-watch-ultra: 1 / 1.22;
|
|
638
|
+
--amp-studio-theme-aspect-apple-watch-9: 1 / 1.22;
|
|
639
|
+
--amp-studio-theme-aspect-mac: 1.6 / 1;
|
|
640
|
+
--amp-studio-theme-aspect-mac-1280: 1.6 / 1;
|
|
641
|
+
--amp-studio-theme-aspect-flow-thumb: 160 / 100;
|
|
561
642
|
--amp-studio-theme-map-voice-pixel: #A855F7;
|
|
562
643
|
--amp-studio-theme-map-voice-aria: #F59E0B;
|
|
563
644
|
--amp-studio-theme-map-voice-heimdall: #3B82F6;
|
package/dist/variables.scss
CHANGED
|
@@ -87,6 +87,9 @@ $amp-studio-shadow-lg-dark: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
|
87
87
|
$amp-studio-shadow-accent-sm: 0 1px 4px 0 rgba(101, 49, 255, 0.15);
|
|
88
88
|
$amp-studio-shadow-accent-md: 0 4px 12px -2px rgba(101, 49, 255, 0.25);
|
|
89
89
|
$amp-studio-shadow-accent-lg: 0 10px 25px -4px rgba(101, 49, 255, 0.35);
|
|
90
|
+
$amp-studio-shadow-ring-accent: 0 0 0 2px var(--amp-semantic-border-accent);
|
|
91
|
+
$amp-studio-shadow-composer: 0 -4px 12px -4px rgba(28, 25, 23, 0.08);
|
|
92
|
+
$amp-studio-shadow-device: 0 12px 32px -8px rgba(28, 25, 23, 0.18), 0 4px 12px -4px rgba(28, 25, 23, 0.10);
|
|
90
93
|
$amp-studio-spacing-1: 4px;
|
|
91
94
|
$amp-studio-spacing-2: 8px;
|
|
92
95
|
$amp-studio-spacing-3: 12px;
|
|
@@ -153,6 +156,7 @@ $amp-studio-semantic-status-error: #DC2626;
|
|
|
153
156
|
$amp-studio-semantic-status-error-bg: rgba(220, 38, 38, 0.08);
|
|
154
157
|
$amp-studio-semantic-status-info: #2563EB;
|
|
155
158
|
$amp-studio-semantic-status-info-bg: rgba(37, 99, 235, 0.08);
|
|
159
|
+
$amp-studio-semantic-color-info-soft: rgba(37, 99, 235, 0.08);
|
|
156
160
|
$amp-studio-theme-color-bg: #FFFFFF;
|
|
157
161
|
$amp-studio-theme-color-fg: #1C1917;
|
|
158
162
|
$amp-studio-theme-color-muted: #57534E;
|
|
@@ -162,6 +166,24 @@ $amp-studio-theme-layout-toolbar-h: 56px;
|
|
|
162
166
|
$amp-studio-theme-layout-drawer-h: 48px;
|
|
163
167
|
$amp-studio-theme-layout-drawer-h-open: 240px;
|
|
164
168
|
$amp-studio-theme-layout-pane-left-w: 30%;
|
|
169
|
+
$amp-studio-theme-layout-topbar-h: 56px;
|
|
170
|
+
$amp-studio-theme-layout-thread-max-w: 1180px;
|
|
171
|
+
$amp-studio-theme-layout-composer-max-w: 980px;
|
|
172
|
+
$amp-studio-theme-layout-flow-sidebar-w: 260px;
|
|
173
|
+
$amp-studio-theme-layout-flow-sidebar-rail-w: 44px;
|
|
174
|
+
$amp-studio-theme-layout-history-panel-w: 360px;
|
|
175
|
+
$amp-studio-theme-layout-variant-card-h: 580px;
|
|
176
|
+
$amp-studio-theme-layout-variant-card-w: 268px;
|
|
177
|
+
$amp-studio-theme-aspect-iphone-15-pro-max: 1 / 2.17;
|
|
178
|
+
$amp-studio-theme-aspect-iphone-15-pro: 1 / 2.17;
|
|
179
|
+
$amp-studio-theme-aspect-galaxy-s24: 1 / 2.17;
|
|
180
|
+
$amp-studio-theme-aspect-ipad-pro-13: 1 / 1.33;
|
|
181
|
+
$amp-studio-theme-aspect-ipad-air: 1 / 1.44;
|
|
182
|
+
$amp-studio-theme-aspect-apple-watch-ultra: 1 / 1.22;
|
|
183
|
+
$amp-studio-theme-aspect-apple-watch-9: 1 / 1.22;
|
|
184
|
+
$amp-studio-theme-aspect-mac: 1.6 / 1;
|
|
185
|
+
$amp-studio-theme-aspect-mac-1280: 1.6 / 1;
|
|
186
|
+
$amp-studio-theme-aspect-flow-thumb: 160 / 100;
|
|
165
187
|
$amp-studio-theme-map-voice-pixel: #7C3AED;
|
|
166
188
|
$amp-studio-theme-map-voice-aria: #F59E0B;
|
|
167
189
|
$amp-studio-theme-map-voice-heimdall: #3B82F6;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@amplify-ai/tokens-studio",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Amplify Magic Studio design tokens — Studio cockpit chrome, mirror/Map-mode voices, status scale; consumed only by studio.amplify.club",
|
|
5
5
|
"main": "dist/tokens.js",
|
|
6
6
|
"exports": {
|
package/tokens/theme-dark.json
CHANGED
|
@@ -13,10 +13,32 @@
|
|
|
13
13
|
},
|
|
14
14
|
"layout": {
|
|
15
15
|
"$type": "dimension",
|
|
16
|
-
"toolbar-h":
|
|
17
|
-
"drawer-h":
|
|
18
|
-
"drawer-h-open":
|
|
19
|
-
"pane-left-w":
|
|
16
|
+
"toolbar-h": { "$value": "56px" },
|
|
17
|
+
"drawer-h": { "$value": "48px" },
|
|
18
|
+
"drawer-h-open": { "$value": "240px" },
|
|
19
|
+
"pane-left-w": { "$value": "30%" },
|
|
20
|
+
"topbar-h": { "$value": "56px", "$description": "Studio v0 cockpit top bar height (Option D mockup)" },
|
|
21
|
+
"thread-max-w": { "$value": "1180px", "$description": "Studio v0 cockpit thread / main column max width" },
|
|
22
|
+
"composer-max-w": { "$value": "980px", "$description": "Studio v0 sticky composer max width" },
|
|
23
|
+
"flow-sidebar-w": { "$value": "260px", "$description": "Studio v0 flow sidebar expanded width" },
|
|
24
|
+
"flow-sidebar-rail-w":{ "$value": "44px", "$description": "Studio v0 flow sidebar collapsed rail width" },
|
|
25
|
+
"history-panel-w": { "$value": "360px", "$description": "Studio v0 history / runs panel width" },
|
|
26
|
+
"variant-card-h": { "$value": "580px", "$description": "Studio v0 variant card height" },
|
|
27
|
+
"variant-card-w": { "$value": "268px", "$description": "Studio v0 variant card width" }
|
|
28
|
+
},
|
|
29
|
+
"aspect": {
|
|
30
|
+
"$type": "dimension",
|
|
31
|
+
"$description": "Studio v0 device-frame aspect ratios for variant previews (Option D mockup) — values identical across themes",
|
|
32
|
+
"iphone-15-pro-max": { "$value": "1 / 2.17" },
|
|
33
|
+
"iphone-15-pro": { "$value": "1 / 2.17" },
|
|
34
|
+
"galaxy-s24": { "$value": "1 / 2.17" },
|
|
35
|
+
"ipad-pro-13": { "$value": "1 / 1.33" },
|
|
36
|
+
"ipad-air": { "$value": "1 / 1.44" },
|
|
37
|
+
"apple-watch-ultra": { "$value": "1 / 1.22" },
|
|
38
|
+
"apple-watch-9": { "$value": "1 / 1.22" },
|
|
39
|
+
"mac": { "$value": "1.6 / 1" },
|
|
40
|
+
"mac-1280": { "$value": "1.6 / 1" },
|
|
41
|
+
"flow-thumb": { "$value": "160 / 100" }
|
|
20
42
|
},
|
|
21
43
|
"map": {
|
|
22
44
|
"$type": "color",
|
package/tokens/theme-light.json
CHANGED
|
@@ -13,10 +13,32 @@
|
|
|
13
13
|
},
|
|
14
14
|
"layout": {
|
|
15
15
|
"$type": "dimension",
|
|
16
|
-
"toolbar-h":
|
|
17
|
-
"drawer-h":
|
|
18
|
-
"drawer-h-open":
|
|
19
|
-
"pane-left-w":
|
|
16
|
+
"toolbar-h": { "$value": "56px", "$description": "Top toolbar chrome height — paired with --studio-toolbar-h" },
|
|
17
|
+
"drawer-h": { "$value": "48px", "$description": "Bottom drawer collapsed height — paired with --studio-drawer-h" },
|
|
18
|
+
"drawer-h-open": { "$value": "240px", "$description": "Bottom drawer expanded height — paired with --studio-drawer-h-open" },
|
|
19
|
+
"pane-left-w": { "$value": "30%", "$description": "Left brief pane width — paired with --studio-pane-left-w" },
|
|
20
|
+
"topbar-h": { "$value": "56px", "$description": "Studio v0 cockpit top bar height (Option D mockup)" },
|
|
21
|
+
"thread-max-w": { "$value": "1180px", "$description": "Studio v0 cockpit thread / main column max width (Option D mockup)" },
|
|
22
|
+
"composer-max-w": { "$value": "980px", "$description": "Studio v0 sticky composer max width (Option D mockup)" },
|
|
23
|
+
"flow-sidebar-w": { "$value": "260px", "$description": "Studio v0 flow sidebar expanded width (Option D mockup)" },
|
|
24
|
+
"flow-sidebar-rail-w":{ "$value": "44px", "$description": "Studio v0 flow sidebar collapsed rail width (Option D mockup)" },
|
|
25
|
+
"history-panel-w": { "$value": "360px", "$description": "Studio v0 history / runs panel width (Option D mockup)" },
|
|
26
|
+
"variant-card-h": { "$value": "580px", "$description": "Studio v0 variant card height (Option D mockup)" },
|
|
27
|
+
"variant-card-w": { "$value": "268px", "$description": "Studio v0 variant card width (Option D mockup)" }
|
|
28
|
+
},
|
|
29
|
+
"aspect": {
|
|
30
|
+
"$type": "dimension",
|
|
31
|
+
"$description": "Studio v0 device-frame aspect ratios for variant previews (Option D mockup)",
|
|
32
|
+
"iphone-15-pro-max": { "$value": "1 / 2.17", "$description": "iPhone 15 Pro Max device frame aspect" },
|
|
33
|
+
"iphone-15-pro": { "$value": "1 / 2.17", "$description": "iPhone 15 Pro device frame aspect" },
|
|
34
|
+
"galaxy-s24": { "$value": "1 / 2.17", "$description": "Samsung Galaxy S24 device frame aspect" },
|
|
35
|
+
"ipad-pro-13": { "$value": "1 / 1.33", "$description": "iPad Pro 13\" device frame aspect" },
|
|
36
|
+
"ipad-air": { "$value": "1 / 1.44", "$description": "iPad Air device frame aspect" },
|
|
37
|
+
"apple-watch-ultra": { "$value": "1 / 1.22", "$description": "Apple Watch Ultra device frame aspect" },
|
|
38
|
+
"apple-watch-9": { "$value": "1 / 1.22", "$description": "Apple Watch Series 9 device frame aspect" },
|
|
39
|
+
"mac": { "$value": "1.6 / 1", "$description": "MacBook / desktop landscape aspect" },
|
|
40
|
+
"mac-1280": { "$value": "1.6 / 1", "$description": "MacBook / desktop 1280-wide aspect" },
|
|
41
|
+
"flow-thumb": { "$value": "160 / 100", "$description": "Flow thumbnail aspect (Studio v0 cockpit)" }
|
|
20
42
|
},
|
|
21
43
|
"map": {
|
|
22
44
|
"$type": "color",
|