@amplify-ai/tokens-studio 1.0.0

package/dist/variables.scss

@@ -0,0 +1,177 @@
+// Auto-generated by build-tokens.js — do not edit
+$amp-studio-breakpoint-sm: 640px;
+$amp-studio-breakpoint-md: 768px;
+$amp-studio-breakpoint-lg: 1024px;
+$amp-studio-breakpoint-xl: 1280px;
+$amp-studio-breakpoint-2xl: 1536px;
+$amp-studio-color-violet-50: #FAF5FF;
+$amp-studio-color-violet-100: #F3E8FF;
+$amp-studio-color-violet-200: #E9D5FF;
+$amp-studio-color-violet-300: #D8B4FE;
+$amp-studio-color-violet-400: #C084FC;
+$amp-studio-color-violet-500: #A855F7;
+$amp-studio-color-violet-600: #7C3AED;
+$amp-studio-color-violet-700: #6D28D9;
+$amp-studio-color-violet-800: #5B21B6;
+$amp-studio-color-violet-900: #4C1D95;
+$amp-studio-color-stone-50: #FAFAF9;
+$amp-studio-color-stone-100: #F5F5F4;
+$amp-studio-color-stone-200: #E7E5E4;
+$amp-studio-color-stone-300: #D6D3D1;
+$amp-studio-color-stone-400: #A8A29E;
+$amp-studio-color-stone-500: #78716C;
+$amp-studio-color-stone-600: #57534E;
+$amp-studio-color-stone-700: #44403C;
+$amp-studio-color-stone-800: #292524;
+$amp-studio-color-stone-900: #1C1917;
+$amp-studio-color-stone-950: #0C0A09;
+$amp-studio-color-red-50: #FEF2F2;
+$amp-studio-color-red-100: #FEE2E2;
+$amp-studio-color-red-500: #EF4444;
+$amp-studio-color-red-600: #DC2626;
+$amp-studio-color-red-700: #B91C1C;
+$amp-studio-color-green-50: #ECFDF5;
+$amp-studio-color-green-100: #D1FAE5;
+$amp-studio-color-green-500: #10B981;
+$amp-studio-color-green-600: #059669;
+$amp-studio-color-green-700: #047857;
+$amp-studio-color-amber-50: #FFFBEB;
+$amp-studio-color-amber-100: #FEF3C7;
+$amp-studio-color-amber-500: #F59E0B;
+$amp-studio-color-amber-600: #D97706;
+$amp-studio-color-amber-700: #B45309;
+$amp-studio-color-blue-50: #EFF6FF;
+$amp-studio-color-blue-100: #DBEAFE;
+$amp-studio-color-blue-500: #3B82F6;
+$amp-studio-color-blue-600: #2563EB;
+$amp-studio-color-blue-700: #1D4ED8;
+$amp-studio-color-rose-500: #F43F5E;
+$amp-studio-color-rose-600: #E11D48;
+$amp-studio-color-white: #FFFFFF;
+$amp-studio-color-black: #000000;
+$amp-studio-color-transparent: transparent;
+$amp-studio-motion-duration-instant: 60ms;
+$amp-studio-motion-duration-fast: 150ms;
+$amp-studio-motion-duration-normal: 250ms;
+$amp-studio-motion-duration-slow: 400ms;
+$amp-studio-motion-duration-lazy: 700ms;
+$amp-studio-motion-duration-slower: 600ms;
+$amp-studio-motion-stagger-1: 50ms;
+$amp-studio-motion-stagger-2: 100ms;
+$amp-studio-motion-stagger-3: 200ms;
+$amp-studio-motion-stagger-delay: 50ms;
+$amp-studio-opacity-disabled: 0.5;
+$amp-studio-opacity-hover: 0.04;
+$amp-studio-opacity-pressed: 0.08;
+$amp-studio-opacity-overlay: 0.5;
+$amp-studio-opacity-status-bg: 0.08;
+$amp-studio-radius-none: 0px;
+$amp-studio-radius-sm: 4px;
+$amp-studio-radius-md: 8px;
+$amp-studio-radius-lg: 12px;
+$amp-studio-radius-xl: 16px;
+$amp-studio-radius-2xl: 24px;
+$amp-studio-radius-full: 9999px;
+$amp-studio-shadow-0: none;
+$amp-studio-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$amp-studio-shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$amp-studio-shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+$amp-studio-shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+$amp-studio-shadow-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+$amp-studio-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.04);
+$amp-studio-shadow-md: 0 2px 8px rgba(28, 25, 23, 0.06);
+$amp-studio-shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.08);
+$amp-studio-shadow-sm-dark: 0 1px 3px rgba(0, 0, 0, 0.2);
+$amp-studio-shadow-md-dark: 0 2px 8px rgba(0, 0, 0, 0.3);
+$amp-studio-shadow-lg-dark: 0 8px 24px rgba(0, 0, 0, 0.4);
+$amp-studio-shadow-accent-sm: 0 1px 4px 0 rgba(101, 49, 255, 0.15);
+$amp-studio-shadow-accent-md: 0 4px 12px -2px rgba(101, 49, 255, 0.25);
+$amp-studio-shadow-accent-lg: 0 10px 25px -4px rgba(101, 49, 255, 0.35);
+$amp-studio-spacing-1: 4px;
+$amp-studio-spacing-2: 8px;
+$amp-studio-spacing-3: 12px;
+$amp-studio-spacing-4: 16px;
+$amp-studio-spacing-5: 20px;
+$amp-studio-spacing-6: 24px;
+$amp-studio-spacing-8: 32px;
+$amp-studio-spacing-10: 40px;
+$amp-studio-spacing-12: 48px;
+$amp-studio-spacing-16: 64px;
+$amp-studio-spacing-20: 80px;
+$amp-studio-spacing-24: 96px;
+$amp-studio-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$amp-studio-font-family-mono: 'JetBrains Mono', 'SF Mono', Monaco, Menlo, monospace;
+$amp-studio-font-weight-light: 300;
+$amp-studio-font-weight-regular: 400;
+$amp-studio-font-weight-medium: 500;
+$amp-studio-font-weight-semibold: 600;
+$amp-studio-font-weight-bold: 700;
+$amp-studio-font-size-display: 34px;
+$amp-studio-font-size-h-lg: 24px;
+$amp-studio-font-size-h-md: 18px;
+$amp-studio-font-size-h-sm: 15px;
+$amp-studio-font-size-body: 14px;
+$amp-studio-font-size-body-sm: 12px;
+$amp-studio-font-size-mono: 13px;
+$amp-studio-font-lineHeight-tight: 1.2;
+$amp-studio-font-lineHeight-normal: 1.5;
+$amp-studio-font-lineHeight-relaxed: 1.6;
+$amp-studio-z-index-base: 0;
+$amp-studio-z-index-dropdown: 1000;
+$amp-studio-z-index-sticky: 1020;
+$amp-studio-z-index-fixed: 1030;
+$amp-studio-z-index-modal-backdrop: 1040;
+$amp-studio-z-index-modal: 1050;
+$amp-studio-z-index-popover: 1060;
+$amp-studio-z-index-tooltip: 1070;
+$amp-studio-z-index-toast: 1080;
+$amp-studio-semantic-accent: #7C3AED;
+$amp-studio-semantic-accent-hover: #6D28D9;
+$amp-studio-semantic-accent-light: #F3E8FF;
+$amp-studio-semantic-accent-subtle: #FAF5FF;
+$amp-studio-semantic-bg-primary: #FAFAF9;
+$amp-studio-semantic-bg-surface: #FFFFFF;
+$amp-studio-semantic-bg-raised: #FFFFFF;
+$amp-studio-semantic-bg-sunken: #F5F5F4;
+$amp-studio-semantic-bg-overlay: rgba(28, 25, 23, 0.5);
+$amp-studio-semantic-text-primary: #1C1917;
+$amp-studio-semantic-text-secondary: #57534E;
+$amp-studio-semantic-text-muted: #78716C;
+$amp-studio-semantic-text-disabled: #A8A29E;
+$amp-studio-semantic-text-inverse: #FFFFFF;
+$amp-studio-semantic-text-accent: #7C3AED;
+$amp-studio-semantic-border-default: #E7E5E4;
+$amp-studio-semantic-border-strong: #D6D3D1;
+$amp-studio-semantic-border-subtle: #F5F5F4;
+$amp-studio-semantic-border-accent: #E9D5FF;
+$amp-studio-semantic-border-focus: #7C3AED;
+$amp-studio-semantic-status-success: #059669;
+$amp-studio-semantic-status-success-bg: rgba(5, 150, 105, 0.08);
+$amp-studio-semantic-status-warning: #D97706;
+$amp-studio-semantic-status-warning-bg: rgba(217, 119, 6, 0.08);
+$amp-studio-semantic-status-error: #DC2626;
+$amp-studio-semantic-status-error-bg: rgba(220, 38, 38, 0.08);
+$amp-studio-semantic-status-info: #2563EB;
+$amp-studio-semantic-status-info-bg: rgba(37, 99, 235, 0.08);
+$amp-studio-theme-color-bg: #FFFFFF;
+$amp-studio-theme-color-fg: #1C1917;
+$amp-studio-theme-color-muted: #57534E;
+$amp-studio-theme-color-border: #E7E5E4;
+$amp-studio-theme-color-accent: #7C3AED;
+$amp-studio-theme-layout-toolbar-h: 56px;
+$amp-studio-theme-layout-drawer-h: 48px;
+$amp-studio-theme-layout-drawer-h-open: 240px;
+$amp-studio-theme-layout-pane-left-w: 30%;
+$amp-studio-theme-map-voice-pixel: #7C3AED;
+$amp-studio-theme-map-voice-aria: #F59E0B;
+$amp-studio-theme-map-voice-heimdall: #3B82F6;
+$amp-studio-theme-map-voice-atlas: #F5F5F4;
+$amp-studio-theme-map-voice-sentinel: #EF4444;
+$amp-studio-theme-map-voice-penny: #10B981;
+$amp-studio-theme-map-voice-zara: #F43F5E;
+$amp-studio-status-success: #059669;
+$amp-studio-status-success-bg: rgba(5, 150, 105, 0.08);
+$amp-studio-status-warning: #D97706;
+$amp-studio-status-warning-bg: rgba(217, 119, 6, 0.08);
+$amp-studio-status-error: #DC2626;
+$amp-studio-status-error-bg: rgba(220, 38, 38, 0.08);

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@amplify-ai/tokens-studio",
+  "version": "1.0.0",
+  "description": "Amplify Magic Studio design tokens — Studio cockpit chrome, mirror/Map-mode voices, status scale; consumed only by studio.amplify.club",
+  "main": "dist/tokens.js",
+  "exports": {
+    "./css": "./dist/variables.css",
+    "./scss": "./dist/variables.scss",
+    "./tailwind": "./dist/tailwind.css",
+    "./json": "./dist/tokens.json",
+    "./js": "./dist/tokens.js",
+    ".": "./dist/tokens.js"
+  },
+  "scripts": {
+    "build": "node build.js"
+  },
+  "dependencies": {
+    "@amplify-ai/tokens-foundation": "^2.1.0"
+  },
+  "devDependencies": {
+    "style-dictionary": "^4.3.0"
+  },
+  "files": [
+    "dist/",
+    "tokens/"
+  ]
+}

package/tokens/theme-dark.json

@@ -0,0 +1,41 @@
+{
+  "theme": {
+    "$description": "Magic Studio — Dark theme (cockpit chrome + Mirror voices). Studio is dark-default; this is the canonical mode.",
+    "product": "studio",
+    "mode": "dark",
+    "color": {
+      "$type": "color",
+      "bg":             { "$value": "{semantic.bg-surface}",   "$description": "Studio surface background (dark)" },
+      "fg":             { "$value": "{semantic.text-primary}", "$description": "Studio default foreground (dark)" },
+      "muted":          { "$value": "{semantic.text-secondary}", "$description": "Studio muted text (dark)" },
+      "border":         { "$value": "{semantic.border-default}", "$description": "Studio default border (dark)" },
+      "accent":         { "$value": "{semantic.accent}",       "$description": "Studio action primary (dark)" }
+    },
+    "layout": {
+      "$type": "dimension",
+      "toolbar-h":      { "$value": "56px" },
+      "drawer-h":       { "$value": "48px" },
+      "drawer-h-open":  { "$value": "240px" },
+      "pane-left-w":    { "$value": "30%" }
+    },
+    "map": {
+      "$type": "color",
+      "voice-pixel":    { "$value": "{color.violet.500}", "$description": "Pixel agent voice (dark — softer violet)" },
+      "voice-aria":     { "$value": "{color.amber.500}" },
+      "voice-heimdall": { "$value": "{color.blue.500}" },
+      "voice-atlas":    { "$value": "{color.stone.300}",  "$description": "Atlas — flipped lighter on dark for legibility" },
+      "voice-sentinel": { "$value": "{color.red.500}" },
+      "voice-penny":    { "$value": "{color.green.500}" },
+      "voice-zara":     { "$value": "{color.rose.500}" }
+    }
+  },
+  "status": {
+    "$type": "color",
+    "success":         { "$value": "{semantic.status-success}" },
+    "success-bg":      { "$value": "{semantic.status-success-bg}" },
+    "warning":         { "$value": "{semantic.status-warning}" },
+    "warning-bg":      { "$value": "{semantic.status-warning-bg}" },
+    "error":           { "$value": "{semantic.status-error}" },
+    "error-bg":        { "$value": "{semantic.status-error-bg}" }
+  }
+}

package/tokens/theme-light.json

@@ -0,0 +1,43 @@
+{
+  "theme": {
+    "$description": "Magic Studio — Light theme (cockpit chrome + Mirror voices). Inherits primitives from tokens-foundation; layers Studio cockpit semantics on top.",
+    "product": "studio",
+    "mode": "light",
+    "color": {
+      "$type": "color",
+      "bg":             { "$value": "{semantic.bg-surface}",   "$description": "Studio surface background — paired with --studio-bg consumer alias" },
+      "fg":             { "$value": "{semantic.text-primary}", "$description": "Studio default foreground — paired with --studio-fg" },
+      "muted":          { "$value": "{semantic.text-secondary}", "$description": "Studio muted text — paired with --studio-muted" },
+      "border":         { "$value": "{semantic.border-default}", "$description": "Studio default border — paired with --studio-border" },
+      "accent":         { "$value": "{semantic.accent}",       "$description": "Studio action primary — paired with --studio-accent" }
+    },
+    "layout": {
+      "$type": "dimension",
+      "toolbar-h":      { "$value": "56px",  "$description": "Top toolbar chrome height — paired with --studio-toolbar-h" },
+      "drawer-h":       { "$value": "48px",  "$description": "Bottom drawer collapsed height — paired with --studio-drawer-h" },
+      "drawer-h-open":  { "$value": "240px", "$description": "Bottom drawer expanded height — paired with --studio-drawer-h-open" },
+      "pane-left-w":    { "$value": "30%",   "$description": "Left brief pane width — paired with --studio-pane-left-w" }
+    },
+    "map": {
+      "$type": "color",
+      "$description": "Mirror / Map-mode voice colours — one per agent voice in the Council rail",
+      "voice-pixel":    { "$value": "{color.violet.600}", "$description": "Pixel agent voice — paired with --mirror-voice-pixel" },
+      "voice-aria":     { "$value": "{color.amber.500}",  "$description": "Aria agent voice — paired with --mirror-voice-aria" },
+      "voice-heimdall": { "$value": "{color.blue.500}",   "$description": "Heimdall agent voice — paired with --mirror-voice-heimdall" },
+      "voice-atlas":    { "$value": "{color.stone.100}",  "$description": "Atlas agent voice — paired with --mirror-voice-atlas" },
+      "voice-sentinel": { "$value": "{color.red.500}",    "$description": "Sentinel agent voice — paired with --mirror-voice-sentinel" },
+      "voice-penny":    { "$value": "{color.green.500}",  "$description": "Penny agent voice — paired with --mirror-voice-penny" },
+      "voice-zara":     { "$value": "{color.rose.500}",   "$description": "Zara agent voice — paired with --mirror-voice-zara" }
+    }
+  },
+  "status": {
+    "$type": "color",
+    "$description": "Studio status indicator scale — replaces the 10 raw hex literals in magic-studio/src/app/globals.css (status badges, off-system, promote-link, flow-status-pill).",
+    "success":         { "$value": "{semantic.status-success}",    "$description": "Live / positive / 'real' status indicator (was #10b981)" },
+    "success-bg":      { "$value": "{semantic.status-success-bg}", "$description": "Success status surface tint" },
+    "warning":         { "$value": "{semantic.status-warning}",    "$description": "Preview / off-system / pending status (was #f59e0b)" },
+    "warning-bg":      { "$value": "{semantic.status-warning-bg}", "$description": "Warning status surface tint" },
+    "error":           { "$value": "{semantic.status-error}",      "$description": "Flow error / failure status (was #d4524d)" },
+    "error-bg":        { "$value": "{semantic.status-error-bg}",   "$description": "Error status surface tint" }
+  }
+}