@amplify-ai/tokens-studio 1.0.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 (9) hide show
  1. package/README.md +59 -0
  2. package/dist/tailwind.css +122 -0
  3. package/dist/tokens.js +178 -0
  4. package/dist/tokens.json +178 -0
  5. package/dist/variables.css +540 -0
  6. package/dist/variables.scss +177 -0
  7. package/package.json +27 -0
  8. package/tokens/theme-dark.json +41 -0
  9. package/tokens/theme-light.json +43 -0
package/README.md ADDED
@@ -0,0 +1,59 @@
1
+ # @amplify-ai/tokens-studio
2
+
3
+ Studio-specific design tokens — used only by `studio.amplify.club`. Inherits primitives from tokens-foundation; layers Studio cockpit semantics on top.
4
+
5
+ ## What's in here
6
+
7
+ - **Cockpit chrome** (`--amp-studio-theme-color-{bg,fg,muted,border,accent}`) — the 5 surface/text/border/accent semantics that the `--studio-*` consumer aliases resolve to.
8
+ - **Layout dimensions** (`--amp-studio-theme-layout-{toolbar-h,drawer-h,drawer-h-open,pane-left-w}`) — the 4 chrome heights/widths that are intentional raw `px` per `magic-studio/CLAUDE.md` Rule 2.
9
+ - **Mirror / Map-mode voices** (`--amp-studio-theme-map-voice-{pixel,aria,heimdall,atlas,sentinel,penny,zara}`) — per-agent voice colours surfaced in the Council rail.
10
+ - **Status scale** (`--amp-studio-status-{success,warning,error}` + `-bg` variants) — replaces the 10 raw hex literals (`#10b981`, `#f59e0b`, `#d4524d`, …) called out in the Phase-0 audit.
11
+
12
+ ## Usage
13
+
14
+ ```css
15
+ /* magic-studio/src/app/globals.css */
16
+ @import "@amplify-ai/tokens-studio/css";
17
+
18
+ :root {
19
+ /* Phase-D consumer aliases — keep byte-identical to avoid touching ~282 use sites. */
20
+ --studio-bg: var(--amp-studio-theme-color-bg);
21
+ --studio-fg: var(--amp-studio-theme-color-fg);
22
+ --studio-muted: var(--amp-studio-theme-color-muted);
23
+ --studio-border: var(--amp-studio-theme-color-border);
24
+ --studio-accent: var(--amp-studio-theme-color-accent);
25
+ --studio-toolbar-h: var(--amp-studio-theme-layout-toolbar-h);
26
+ --studio-drawer-h: var(--amp-studio-theme-layout-drawer-h);
27
+ --studio-drawer-h-open: var(--amp-studio-theme-layout-drawer-h-open);
28
+ --studio-pane-left-w: var(--amp-studio-theme-layout-pane-left-w);
29
+
30
+ --mirror-voice-pixel: var(--amp-studio-theme-map-voice-pixel);
31
+ --mirror-voice-aria: var(--amp-studio-theme-map-voice-aria);
32
+ --mirror-voice-heimdall: var(--amp-studio-theme-map-voice-heimdall);
33
+ --mirror-voice-atlas: var(--amp-studio-theme-map-voice-atlas);
34
+ --mirror-voice-sentinel: var(--amp-studio-theme-map-voice-sentinel);
35
+ --mirror-voice-penny: var(--amp-studio-theme-map-voice-penny);
36
+ --mirror-voice-zara: var(--amp-studio-theme-map-voice-zara);
37
+ }
38
+ ```
39
+
40
+ Status badges then reference `var(--amp-studio-status-success)` etc. directly — no consumer alias needed because they're new (replacing raw hex).
41
+
42
+ ## Outputs
43
+
44
+ `build.js` delegates to the shared `scripts/build-tokens.js` and emits five artifacts under `dist/`:
45
+
46
+ | File | Purpose |
47
+ |---|---|
48
+ | `variables.css` | CSS custom properties for `:root` + `[data-theme="dark"]` overrides |
49
+ | `variables.scss` | Same tokens as SCSS variables |
50
+ | `tokens.json` | Flat JSON map (machine-consumable) |
51
+ | `tokens.js` | ES-module exports (camelCase) |
52
+ | `tailwind.css` | Tailwind v4 `@theme` preset |
53
+
54
+ ## Provenance
55
+
56
+ The 16 lifted variables were sourced verbatim from the Phase-0 token audit
57
+ (`magic-studio/docs/audits/phase-0-tokens.md`). Phase D in `magic-studio` swaps the in-repo
58
+ `:root { --studio-* / --mirror-* }` definitions for an `@import "@amplify-ai/tokens-studio/css"`
59
+ plus the consumer-alias block above.
package/dist/tailwind.css ADDED
@@ -0,0 +1,122 @@
1
+ /* Auto-generated Tailwind v4 preset — do not edit */
2
+ /* Import in your globals.css: @import "@amplify-ai/tokens-studio/dist/tailwind.css"; */
3
+
4
+ @theme {
5
+ --color-color-violet-50: #FAF5FF;
6
+ --color-color-violet-100: #F3E8FF;
7
+ --color-color-violet-200: #E9D5FF;
8
+ --color-color-violet-300: #D8B4FE;
9
+ --color-color-violet-400: #C084FC;
10
+ --color-color-violet-500: #A855F7;
11
+ --color-color-violet-600: #7C3AED;
12
+ --color-color-violet-700: #6D28D9;
13
+ --color-color-violet-800: #5B21B6;
14
+ --color-color-violet-900: #4C1D95;
15
+ --color-color-stone-50: #FAFAF9;
16
+ --color-color-stone-100: #F5F5F4;
17
+ --color-color-stone-200: #E7E5E4;
18
+ --color-color-stone-300: #D6D3D1;
19
+ --color-color-stone-400: #A8A29E;
20
+ --color-color-stone-500: #78716C;
21
+ --color-color-stone-600: #57534E;
22
+ --color-color-stone-700: #44403C;
23
+ --color-color-stone-800: #292524;
24
+ --color-color-stone-900: #1C1917;
25
+ --color-color-stone-950: #0C0A09;
26
+ --color-color-red-50: #FEF2F2;
27
+ --color-color-red-100: #FEE2E2;
28
+ --color-color-red-500: #EF4444;
29
+ --color-color-red-600: #DC2626;
30
+ --color-color-red-700: #B91C1C;
31
+ --color-color-green-50: #ECFDF5;
32
+ --color-color-green-100: #D1FAE5;
33
+ --color-color-green-500: #10B981;
34
+ --color-color-green-600: #059669;
35
+ --color-color-green-700: #047857;
36
+ --color-color-amber-50: #FFFBEB;
37
+ --color-color-amber-100: #FEF3C7;
38
+ --color-color-amber-500: #F59E0B;
39
+ --color-color-amber-600: #D97706;
40
+ --color-color-amber-700: #B45309;
41
+ --color-color-blue-50: #EFF6FF;
42
+ --color-color-blue-100: #DBEAFE;
43
+ --color-color-blue-500: #3B82F6;
44
+ --color-color-blue-600: #2563EB;
45
+ --color-color-blue-700: #1D4ED8;
46
+ --color-color-rose-500: #F43F5E;
47
+ --color-color-rose-600: #E11D48;
48
+ --color-color-white: #FFFFFF;
49
+ --color-color-black: #000000;
50
+ --color-color-transparent: transparent;
51
+ --radius-none: 0px;
52
+ --radius-sm: 4px;
53
+ --radius-md: 8px;
54
+ --radius-lg: 12px;
55
+ --radius-xl: 16px;
56
+ --radius-2xl: 24px;
57
+ --radius-full: 9999px;
58
+ --shadow-0: none;
59
+ --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
60
+ --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
61
+ --shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
62
+ --shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
63
+ --shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
64
+ --shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.04);
65
+ --shadow-md: 0 2px 8px rgba(28, 25, 23, 0.06);
66
+ --shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.08);
67
+ --shadow-accent-sm: 0 1px 4px 0 rgba(101, 49, 255, 0.15);
68
+ --shadow-accent-md: 0 4px 12px -2px rgba(101, 49, 255, 0.25);
69
+ --shadow-accent-lg: 0 10px 25px -4px rgba(101, 49, 255, 0.35);
70
+ --spacing-1: 4px;
71
+ --spacing-2: 8px;
72
+ --spacing-3: 12px;
73
+ --spacing-4: 16px;
74
+ --spacing-5: 20px;
75
+ --spacing-6: 24px;
76
+ --spacing-8: 32px;
77
+ --spacing-10: 40px;
78
+ --spacing-12: 48px;
79
+ --spacing-16: 64px;
80
+ --spacing-20: 80px;
81
+ --spacing-24: 96px;
82
+ --text-display: 34px;
83
+ --text-h-lg: 24px;
84
+ --text-h-md: 18px;
85
+ --text-h-sm: 15px;
86
+ --text-body: 14px;
87
+ --text-body-sm: 12px;
88
+ --text-mono: 13px;
89
+ --color-semantic-accent: #7C3AED;
90
+ --color-semantic-accent-hover: #6D28D9;
91
+ --color-semantic-accent-light: #F3E8FF;
92
+ --color-semantic-accent-subtle: #FAF5FF;
93
+ --color-semantic-bg-primary: #FAFAF9;
94
+ --color-semantic-bg-surface: #FFFFFF;
95
+ --color-semantic-bg-raised: #FFFFFF;
96
+ --color-semantic-bg-sunken: #F5F5F4;
97
+ --color-semantic-bg-overlay: rgba(28, 25, 23, 0.5);
98
+ --color-semantic-text-primary: #1C1917;
99
+ --color-semantic-text-secondary: #57534E;
100
+ --color-semantic-text-muted: #78716C;
101
+ --color-semantic-text-disabled: #A8A29E;
102
+ --color-semantic-text-inverse: #FFFFFF;
103
+ --color-semantic-text-accent: #7C3AED;
104
+ --color-semantic-border-default: #E7E5E4;
105
+ --color-semantic-border-strong: #D6D3D1;
106
+ --color-semantic-border-subtle: #F5F5F4;
107
+ --color-semantic-border-accent: #E9D5FF;
108
+ --color-semantic-border-focus: #7C3AED;
109
+ --color-semantic-status-success: #059669;
110
+ --color-semantic-status-success-bg: rgba(5, 150, 105, 0.08);
111
+ --color-semantic-status-warning: #D97706;
112
+ --color-semantic-status-warning-bg: rgba(217, 119, 6, 0.08);
113
+ --color-semantic-status-error: #DC2626;
114
+ --color-semantic-status-error-bg: rgba(220, 38, 38, 0.08);
115
+ --color-semantic-status-info: #2563EB;
116
+ --color-semantic-status-info-bg: rgba(37, 99, 235, 0.08);
117
+ --color-theme-color-bg: #FFFFFF;
118
+ --color-theme-color-fg: #1C1917;
119
+ --color-theme-color-muted: #57534E;
120
+ --color-theme-color-border: #E7E5E4;
121
+ --color-theme-color-accent: #7C3AED;
122
+ }
package/dist/tokens.js ADDED
@@ -0,0 +1,178 @@
1
+ /** Auto-generated by build-tokens.js — do not edit */
2
+
3
+ export const breakpointSm = "640px";
4
+ export const breakpointMd = "768px";
5
+ export const breakpointLg = "1024px";
6
+ export const breakpointXl = "1280px";
7
+ export const breakpoint2xl = "1536px";
8
+ export const colorViolet50 = "#FAF5FF";
9
+ export const colorViolet100 = "#F3E8FF";
10
+ export const colorViolet200 = "#E9D5FF";
11
+ export const colorViolet300 = "#D8B4FE";
12
+ export const colorViolet400 = "#C084FC";
13
+ export const colorViolet500 = "#A855F7";
14
+ export const colorViolet600 = "#7C3AED";
15
+ export const colorViolet700 = "#6D28D9";
16
+ export const colorViolet800 = "#5B21B6";
17
+ export const colorViolet900 = "#4C1D95";
18
+ export const colorStone50 = "#FAFAF9";
19
+ export const colorStone100 = "#F5F5F4";
20
+ export const colorStone200 = "#E7E5E4";
21
+ export const colorStone300 = "#D6D3D1";
22
+ export const colorStone400 = "#A8A29E";
23
+ export const colorStone500 = "#78716C";
24
+ export const colorStone600 = "#57534E";
25
+ export const colorStone700 = "#44403C";
26
+ export const colorStone800 = "#292524";
27
+ export const colorStone900 = "#1C1917";
28
+ export const colorStone950 = "#0C0A09";
29
+ export const colorRed50 = "#FEF2F2";
30
+ export const colorRed100 = "#FEE2E2";
31
+ export const colorRed500 = "#EF4444";
32
+ export const colorRed600 = "#DC2626";
33
+ export const colorRed700 = "#B91C1C";
34
+ export const colorGreen50 = "#ECFDF5";
35
+ export const colorGreen100 = "#D1FAE5";
36
+ export const colorGreen500 = "#10B981";
37
+ export const colorGreen600 = "#059669";
38
+ export const colorGreen700 = "#047857";
39
+ export const colorAmber50 = "#FFFBEB";
40
+ export const colorAmber100 = "#FEF3C7";
41
+ export const colorAmber500 = "#F59E0B";
42
+ export const colorAmber600 = "#D97706";
43
+ export const colorAmber700 = "#B45309";
44
+ export const colorBlue50 = "#EFF6FF";
45
+ export const colorBlue100 = "#DBEAFE";
46
+ export const colorBlue500 = "#3B82F6";
47
+ export const colorBlue600 = "#2563EB";
48
+ export const colorBlue700 = "#1D4ED8";
49
+ export const colorRose500 = "#F43F5E";
50
+ export const colorRose600 = "#E11D48";
51
+ export const colorWhite = "#FFFFFF";
52
+ export const colorBlack = "#000000";
53
+ export const colorTransparent = "transparent";
54
+ export const motionDurationInstant = "60ms";
55
+ export const motionDurationFast = "150ms";
56
+ export const motionDurationNormal = "250ms";
57
+ export const motionDurationSlow = "400ms";
58
+ export const motionDurationLazy = "700ms";
59
+ export const motionDurationSlower = "600ms";
60
+ export const motionStagger1 = "50ms";
61
+ export const motionStagger2 = "100ms";
62
+ export const motionStagger3 = "200ms";
63
+ export const motionStaggerDelay = "50ms";
64
+ export const opacityDisabled = 0.5;
65
+ export const opacityHover = 0.04;
66
+ export const opacityPressed = 0.08;
67
+ export const opacityOverlay = 0.5;
68
+ export const opacityStatusBg = 0.08;
69
+ export const radiusNone = "0px";
70
+ export const radiusSm = "4px";
71
+ export const radiusMd = "8px";
72
+ export const radiusLg = "12px";
73
+ export const radiusXl = "16px";
74
+ export const radius2xl = "24px";
75
+ export const radiusFull = "9999px";
76
+ export const shadow0 = "none";
77
+ export const shadow1 = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
78
+ export const shadow2 = "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)";
79
+ export const shadow3 = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)";
80
+ export const shadow4 = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
81
+ export const shadow5 = "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
82
+ export const shadowSm = "0 1px 3px rgba(28, 25, 23, 0.04)";
83
+ export const shadowMd = "0 2px 8px rgba(28, 25, 23, 0.06)";
84
+ export const shadowLg = "0 8px 24px rgba(28, 25, 23, 0.08)";
85
+ export const shadowSmDark = "0 1px 3px rgba(0, 0, 0, 0.2)";
86
+ export const shadowMdDark = "0 2px 8px rgba(0, 0, 0, 0.3)";
87
+ export const shadowLgDark = "0 8px 24px rgba(0, 0, 0, 0.4)";
88
+ export const shadowAccentSm = "0 1px 4px 0 rgba(101, 49, 255, 0.15)";
89
+ export const shadowAccentMd = "0 4px 12px -2px rgba(101, 49, 255, 0.25)";
90
+ export const shadowAccentLg = "0 10px 25px -4px rgba(101, 49, 255, 0.35)";
91
+ export const spacing1 = "4px";
92
+ export const spacing2 = "8px";
93
+ export const spacing3 = "12px";
94
+ export const spacing4 = "16px";
95
+ export const spacing5 = "20px";
96
+ export const spacing6 = "24px";
97
+ export const spacing8 = "32px";
98
+ export const spacing10 = "40px";
99
+ export const spacing12 = "48px";
100
+ export const spacing16 = "64px";
101
+ export const spacing20 = "80px";
102
+ export const spacing24 = "96px";
103
+ export const fontFamilySans = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
104
+ export const fontFamilyMono = "'JetBrains Mono', 'SF Mono', Monaco, Menlo, monospace";
105
+ export const fontWeightLight = 300;
106
+ export const fontWeightRegular = 400;
107
+ export const fontWeightMedium = 500;
108
+ export const fontWeightSemibold = 600;
109
+ export const fontWeightBold = 700;
110
+ export const fontSizeDisplay = "34px";
111
+ export const fontSizeHLg = "24px";
112
+ export const fontSizeHMd = "18px";
113
+ export const fontSizeHSm = "15px";
114
+ export const fontSizeBody = "14px";
115
+ export const fontSizeBodySm = "12px";
116
+ export const fontSizeMono = "13px";
117
+ export const fontLineHeightTight = 1.2;
118
+ export const fontLineHeightNormal = 1.5;
119
+ export const fontLineHeightRelaxed = 1.6;
120
+ export const zIndexBase = 0;
121
+ export const zIndexDropdown = 1000;
122
+ export const zIndexSticky = 1020;
123
+ export const zIndexFixed = 1030;
124
+ export const zIndexModalBackdrop = 1040;
125
+ export const zIndexModal = 1050;
126
+ export const zIndexPopover = 1060;
127
+ export const zIndexTooltip = 1070;
128
+ export const zIndexToast = 1080;
129
+ export const semanticAccent = "#7C3AED";
130
+ export const semanticAccentHover = "#6D28D9";
131
+ export const semanticAccentLight = "#F3E8FF";
132
+ export const semanticAccentSubtle = "#FAF5FF";
133
+ export const semanticBgPrimary = "#FAFAF9";
134
+ export const semanticBgSurface = "#FFFFFF";
135
+ export const semanticBgRaised = "#FFFFFF";
136
+ export const semanticBgSunken = "#F5F5F4";
137
+ export const semanticBgOverlay = "rgba(28, 25, 23, 0.5)";
138
+ export const semanticTextPrimary = "#1C1917";
139
+ export const semanticTextSecondary = "#57534E";
140
+ export const semanticTextMuted = "#78716C";
141
+ export const semanticTextDisabled = "#A8A29E";
142
+ export const semanticTextInverse = "#FFFFFF";
143
+ export const semanticTextAccent = "#7C3AED";
144
+ export const semanticBorderDefault = "#E7E5E4";
145
+ export const semanticBorderStrong = "#D6D3D1";
146
+ export const semanticBorderSubtle = "#F5F5F4";
147
+ export const semanticBorderAccent = "#E9D5FF";
148
+ export const semanticBorderFocus = "#7C3AED";
149
+ export const semanticStatusSuccess = "#059669";
150
+ export const semanticStatusSuccessBg = "rgba(5, 150, 105, 0.08)";
151
+ export const semanticStatusWarning = "#D97706";
152
+ export const semanticStatusWarningBg = "rgba(217, 119, 6, 0.08)";
153
+ export const semanticStatusError = "#DC2626";
154
+ export const semanticStatusErrorBg = "rgba(220, 38, 38, 0.08)";
155
+ export const semanticStatusInfo = "#2563EB";
156
+ export const semanticStatusInfoBg = "rgba(37, 99, 235, 0.08)";
157
+ export const themeColorBg = "#FFFFFF";
158
+ export const themeColorFg = "#1C1917";
159
+ export const themeColorMuted = "#57534E";
160
+ export const themeColorBorder = "#E7E5E4";
161
+ export const themeColorAccent = "#7C3AED";
162
+ export const themeLayoutToolbarH = "56px";
163
+ export const themeLayoutDrawerH = "48px";
164
+ export const themeLayoutDrawerHOpen = "240px";
165
+ export const themeLayoutPaneLeftW = "30%";
166
+ export const themeMapVoicePixel = "#7C3AED";
167
+ export const themeMapVoiceAria = "#F59E0B";
168
+ export const themeMapVoiceHeimdall = "#3B82F6";
169
+ export const themeMapVoiceAtlas = "#F5F5F4";
170
+ export const themeMapVoiceSentinel = "#EF4444";
171
+ export const themeMapVoicePenny = "#10B981";
172
+ export const themeMapVoiceZara = "#F43F5E";
173
+ export const statusSuccess = "#059669";
174
+ export const statusSuccessBg = "rgba(5, 150, 105, 0.08)";
175
+ export const statusWarning = "#D97706";
176
+ export const statusWarningBg = "rgba(217, 119, 6, 0.08)";
177
+ export const statusError = "#DC2626";
178
+ export const statusErrorBg = "rgba(220, 38, 38, 0.08)";
package/dist/tokens.json ADDED
@@ -0,0 +1,178 @@
1
+ {
2
+ "amp-studio-breakpoint-sm": "640px",
3
+ "amp-studio-breakpoint-md": "768px",
4
+ "amp-studio-breakpoint-lg": "1024px",
5
+ "amp-studio-breakpoint-xl": "1280px",
6
+ "amp-studio-breakpoint-2xl": "1536px",
7
+ "amp-studio-color-violet-50": "#FAF5FF",
8
+ "amp-studio-color-violet-100": "#F3E8FF",
9
+ "amp-studio-color-violet-200": "#E9D5FF",
10
+ "amp-studio-color-violet-300": "#D8B4FE",
11
+ "amp-studio-color-violet-400": "#C084FC",
12
+ "amp-studio-color-violet-500": "#A855F7",
13
+ "amp-studio-color-violet-600": "#7C3AED",
14
+ "amp-studio-color-violet-700": "#6D28D9",
15
+ "amp-studio-color-violet-800": "#5B21B6",
16
+ "amp-studio-color-violet-900": "#4C1D95",
17
+ "amp-studio-color-stone-50": "#FAFAF9",
18
+ "amp-studio-color-stone-100": "#F5F5F4",
19
+ "amp-studio-color-stone-200": "#E7E5E4",
20
+ "amp-studio-color-stone-300": "#D6D3D1",
21
+ "amp-studio-color-stone-400": "#A8A29E",
22
+ "amp-studio-color-stone-500": "#78716C",
23
+ "amp-studio-color-stone-600": "#57534E",
24
+ "amp-studio-color-stone-700": "#44403C",
25
+ "amp-studio-color-stone-800": "#292524",
26
+ "amp-studio-color-stone-900": "#1C1917",
27
+ "amp-studio-color-stone-950": "#0C0A09",
28
+ "amp-studio-color-red-50": "#FEF2F2",
29
+ "amp-studio-color-red-100": "#FEE2E2",
30
+ "amp-studio-color-red-500": "#EF4444",
31
+ "amp-studio-color-red-600": "#DC2626",
32
+ "amp-studio-color-red-700": "#B91C1C",
33
+ "amp-studio-color-green-50": "#ECFDF5",
34
+ "amp-studio-color-green-100": "#D1FAE5",
35
+ "amp-studio-color-green-500": "#10B981",
36
+ "amp-studio-color-green-600": "#059669",
37
+ "amp-studio-color-green-700": "#047857",
38
+ "amp-studio-color-amber-50": "#FFFBEB",
39
+ "amp-studio-color-amber-100": "#FEF3C7",
40
+ "amp-studio-color-amber-500": "#F59E0B",
41
+ "amp-studio-color-amber-600": "#D97706",
42
+ "amp-studio-color-amber-700": "#B45309",
43
+ "amp-studio-color-blue-50": "#EFF6FF",
44
+ "amp-studio-color-blue-100": "#DBEAFE",
45
+ "amp-studio-color-blue-500": "#3B82F6",
46
+ "amp-studio-color-blue-600": "#2563EB",
47
+ "amp-studio-color-blue-700": "#1D4ED8",
48
+ "amp-studio-color-rose-500": "#F43F5E",
49
+ "amp-studio-color-rose-600": "#E11D48",
50
+ "amp-studio-color-white": "#FFFFFF",
51
+ "amp-studio-color-black": "#000000",
52
+ "amp-studio-color-transparent": "transparent",
53
+ "amp-studio-motion-duration-instant": "60ms",
54
+ "amp-studio-motion-duration-fast": "150ms",
55
+ "amp-studio-motion-duration-normal": "250ms",
56
+ "amp-studio-motion-duration-slow": "400ms",
57
+ "amp-studio-motion-duration-lazy": "700ms",
58
+ "amp-studio-motion-duration-slower": "600ms",
59
+ "amp-studio-motion-stagger-1": "50ms",
60
+ "amp-studio-motion-stagger-2": "100ms",
61
+ "amp-studio-motion-stagger-3": "200ms",
62
+ "amp-studio-motion-stagger-delay": "50ms",
63
+ "amp-studio-opacity-disabled": 0.5,
64
+ "amp-studio-opacity-hover": 0.04,
65
+ "amp-studio-opacity-pressed": 0.08,
66
+ "amp-studio-opacity-overlay": 0.5,
67
+ "amp-studio-opacity-status-bg": 0.08,
68
+ "amp-studio-radius-none": "0px",
69
+ "amp-studio-radius-sm": "4px",
70
+ "amp-studio-radius-md": "8px",
71
+ "amp-studio-radius-lg": "12px",
72
+ "amp-studio-radius-xl": "16px",
73
+ "amp-studio-radius-2xl": "24px",
74
+ "amp-studio-radius-full": "9999px",
75
+ "amp-studio-shadow-0": "none",
76
+ "amp-studio-shadow-1": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
77
+ "amp-studio-shadow-2": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
78
+ "amp-studio-shadow-3": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
79
+ "amp-studio-shadow-4": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
80
+ "amp-studio-shadow-5": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
81
+ "amp-studio-shadow-sm": "0 1px 3px rgba(28, 25, 23, 0.04)",
82
+ "amp-studio-shadow-md": "0 2px 8px rgba(28, 25, 23, 0.06)",
83
+ "amp-studio-shadow-lg": "0 8px 24px rgba(28, 25, 23, 0.08)",
84
+ "amp-studio-shadow-sm-dark": "0 1px 3px rgba(0, 0, 0, 0.2)",
85
+ "amp-studio-shadow-md-dark": "0 2px 8px rgba(0, 0, 0, 0.3)",
86
+ "amp-studio-shadow-lg-dark": "0 8px 24px rgba(0, 0, 0, 0.4)",
87
+ "amp-studio-shadow-accent-sm": "0 1px 4px 0 rgba(101, 49, 255, 0.15)",
88
+ "amp-studio-shadow-accent-md": "0 4px 12px -2px rgba(101, 49, 255, 0.25)",
89
+ "amp-studio-shadow-accent-lg": "0 10px 25px -4px rgba(101, 49, 255, 0.35)",
90
+ "amp-studio-spacing-1": "4px",
91
+ "amp-studio-spacing-2": "8px",
92
+ "amp-studio-spacing-3": "12px",
93
+ "amp-studio-spacing-4": "16px",
94
+ "amp-studio-spacing-5": "20px",
95
+ "amp-studio-spacing-6": "24px",
96
+ "amp-studio-spacing-8": "32px",
97
+ "amp-studio-spacing-10": "40px",
98
+ "amp-studio-spacing-12": "48px",
99
+ "amp-studio-spacing-16": "64px",
100
+ "amp-studio-spacing-20": "80px",
101
+ "amp-studio-spacing-24": "96px",
102
+ "amp-studio-font-family-sans": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
103
+ "amp-studio-font-family-mono": "'JetBrains Mono', 'SF Mono', Monaco, Menlo, monospace",
104
+ "amp-studio-font-weight-light": 300,
105
+ "amp-studio-font-weight-regular": 400,
106
+ "amp-studio-font-weight-medium": 500,
107
+ "amp-studio-font-weight-semibold": 600,
108
+ "amp-studio-font-weight-bold": 700,
109
+ "amp-studio-font-size-display": "34px",
110
+ "amp-studio-font-size-h-lg": "24px",
111
+ "amp-studio-font-size-h-md": "18px",
112
+ "amp-studio-font-size-h-sm": "15px",
113
+ "amp-studio-font-size-body": "14px",
114
+ "amp-studio-font-size-body-sm": "12px",
115
+ "amp-studio-font-size-mono": "13px",
116
+ "amp-studio-font-lineHeight-tight": 1.2,
117
+ "amp-studio-font-lineHeight-normal": 1.5,
118
+ "amp-studio-font-lineHeight-relaxed": 1.6,
119
+ "amp-studio-z-index-base": 0,
120
+ "amp-studio-z-index-dropdown": 1000,
121
+ "amp-studio-z-index-sticky": 1020,
122
+ "amp-studio-z-index-fixed": 1030,
123
+ "amp-studio-z-index-modal-backdrop": 1040,
124
+ "amp-studio-z-index-modal": 1050,
125
+ "amp-studio-z-index-popover": 1060,
126
+ "amp-studio-z-index-tooltip": 1070,
127
+ "amp-studio-z-index-toast": 1080,
128
+ "amp-studio-semantic-accent": "#7C3AED",
129
+ "amp-studio-semantic-accent-hover": "#6D28D9",
130
+ "amp-studio-semantic-accent-light": "#F3E8FF",
131
+ "amp-studio-semantic-accent-subtle": "#FAF5FF",
132
+ "amp-studio-semantic-bg-primary": "#FAFAF9",
133
+ "amp-studio-semantic-bg-surface": "#FFFFFF",
134
+ "amp-studio-semantic-bg-raised": "#FFFFFF",
135
+ "amp-studio-semantic-bg-sunken": "#F5F5F4",
136
+ "amp-studio-semantic-bg-overlay": "rgba(28, 25, 23, 0.5)",
137
+ "amp-studio-semantic-text-primary": "#1C1917",
138
+ "amp-studio-semantic-text-secondary": "#57534E",
139
+ "amp-studio-semantic-text-muted": "#78716C",
140
+ "amp-studio-semantic-text-disabled": "#A8A29E",
141
+ "amp-studio-semantic-text-inverse": "#FFFFFF",
142
+ "amp-studio-semantic-text-accent": "#7C3AED",
143
+ "amp-studio-semantic-border-default": "#E7E5E4",
144
+ "amp-studio-semantic-border-strong": "#D6D3D1",
145
+ "amp-studio-semantic-border-subtle": "#F5F5F4",
146
+ "amp-studio-semantic-border-accent": "#E9D5FF",
147
+ "amp-studio-semantic-border-focus": "#7C3AED",
148
+ "amp-studio-semantic-status-success": "#059669",
149
+ "amp-studio-semantic-status-success-bg": "rgba(5, 150, 105, 0.08)",
150
+ "amp-studio-semantic-status-warning": "#D97706",
151
+ "amp-studio-semantic-status-warning-bg": "rgba(217, 119, 6, 0.08)",
152
+ "amp-studio-semantic-status-error": "#DC2626",
153
+ "amp-studio-semantic-status-error-bg": "rgba(220, 38, 38, 0.08)",
154
+ "amp-studio-semantic-status-info": "#2563EB",
155
+ "amp-studio-semantic-status-info-bg": "rgba(37, 99, 235, 0.08)",
156
+ "amp-studio-theme-color-bg": "#FFFFFF",
157
+ "amp-studio-theme-color-fg": "#1C1917",
158
+ "amp-studio-theme-color-muted": "#57534E",
159
+ "amp-studio-theme-color-border": "#E7E5E4",
160
+ "amp-studio-theme-color-accent": "#7C3AED",
161
+ "amp-studio-theme-layout-toolbar-h": "56px",
162
+ "amp-studio-theme-layout-drawer-h": "48px",
163
+ "amp-studio-theme-layout-drawer-h-open": "240px",
164
+ "amp-studio-theme-layout-pane-left-w": "30%",
165
+ "amp-studio-theme-map-voice-pixel": "#7C3AED",
166
+ "amp-studio-theme-map-voice-aria": "#F59E0B",
167
+ "amp-studio-theme-map-voice-heimdall": "#3B82F6",
168
+ "amp-studio-theme-map-voice-atlas": "#F5F5F4",
169
+ "amp-studio-theme-map-voice-sentinel": "#EF4444",
170
+ "amp-studio-theme-map-voice-penny": "#10B981",
171
+ "amp-studio-theme-map-voice-zara": "#F43F5E",
172
+ "amp-studio-status-success": "#059669",
173
+ "amp-studio-status-success-bg": "rgba(5, 150, 105, 0.08)",
174
+ "amp-studio-status-warning": "#D97706",
175
+ "amp-studio-status-warning-bg": "rgba(217, 119, 6, 0.08)",
176
+ "amp-studio-status-error": "#DC2626",
177
+ "amp-studio-status-error-bg": "rgba(220, 38, 38, 0.08)"
178
+ }