@visitwonders/assembly 0.1.0

package/dist/styles.css

@@ -0,0 +1,710 @@
+/* Assembly Design System Tokens */
+
+/* Fonts - load first */
+
+/* Geist Mono - Web font for cross-platform monospace consistency */
+
+/* Loaded from jsDelivr CDN for zero-config usage */
+
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Regular.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Geist Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Medium.woff2")
+    format("woff2");
+}
+
+/* Primitive tokens - raw values */
+
+:root {
+  /* Gray Scale - Indigo-tinted neutrals (hue ~228°) */
+  --gray-25: #f9f9fb;
+  --gray-50: #f4f6fb;
+  --gray-100: #ebeef6;
+  --gray-175: #dfe2ee;
+  --gray-200: #d8dcea;
+  --gray-300: #c2c7d9;
+  --gray-400: #9aa1b8;
+  --gray-500: #6b7394;
+  --gray-600: #4e5574;
+  --gray-700: #3a4060;
+  --gray-800: #252a40;
+  --gray-900: #161a2e;
+  --gray-950: #0a0c18;
+
+  /* Indigo Scale - Custom indigo (~228° hue) */
+  --indigo-50: #f1f3ff;
+  --indigo-100: #e4e8ff;
+  --indigo-200: #ccd3ff;
+  --indigo-300: #a8b4ff;
+  --indigo-400: #7c8bfc;
+  --indigo-500: #5865f5;
+  --indigo-600: #4650e5;
+  --indigo-700: #3840c9;
+  --indigo-800: #2f36a3;
+  --indigo-900: #2a3182;
+  --indigo-950: #1a1e4e;
+
+  /* Red Scale */
+  --red-50: #fff1f2;
+  --red-100: #ffe4e6;
+  --red-200: #fecdd3;
+  --red-300: #fda4af;
+  --red-400: #fb7185;
+  --red-500: #f43f5e;
+  --red-600: #e11d48;
+  --red-700: #be123c;
+  --red-800: #9f1239;
+  --red-900: #881337;
+  --red-950: #4c0519;
+
+  /* Green Scale */
+  --green-50: #ecfdf5;
+  --green-100: #d1fae5;
+  --green-200: #a7f3d0;
+  --green-300: #6ee7b7;
+  --green-400: #34d399;
+  --green-500: #05ac61;
+  --green-600: #0b8451;
+  --green-700: #0a6b42;
+  --green-800: #085536;
+  --green-900: #053f28;
+  --green-950: #032618;
+
+  /* Amber Scale */
+  --amber-50: #fffbeb;
+  --amber-100: #fef3c7;
+  --amber-200: #fde68a;
+  --amber-300: #fcd34d;
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
+  --amber-950: #451a03;
+
+  /* Cyan Scale */
+  --cyan-50: #ecfeff;
+  --cyan-100: #cffafe;
+  --cyan-200: #a5f3fc;
+  --cyan-300: #67e8f9;
+  --cyan-400: #22d3ee;
+  --cyan-500: #06b6d4;
+  --cyan-600: #0891b2;
+  --cyan-700: #0e7490;
+  --cyan-800: #155e75;
+  --cyan-900: #164e63;
+  --cyan-950: #083344;
+
+  /* Static Colors */
+  --white: #fff;
+  --black: #000;
+  --transparent: transparent;
+}
+
+:root {
+  /* Spacing Primitives - 4px base scale */
+  --spacing-0: 0;
+  --spacing-0-5: 0.125rem; /* 2px */
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-1-5: 0.375rem; /* 6px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-2-5: 0.625rem; /* 10px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-3-5: 0.875rem; /* 14px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-9: 2.25rem; /* 36px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-11: 2.75rem; /* 44px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-14: 3.5rem; /* 56px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+  --spacing-28: 7rem; /* 112px */
+  --spacing-32: 8rem; /* 128px */
+
+  /* Base space */
+  --base-space: var(--spacing-1);
+}
+
+:root {
+  /* Font Families */
+  --font-family-sans:
+    "Gotham SSm A", "Gotham SSm B", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono:
+    ui-monospace, "Cascadia Mono", "Geist Mono", SFMono-Regular, Menlo,
+    Consolas, monospace;
+
+  /* Font Sizes - Numeric scale */
+  --font-size-10: 0.625rem; /* 10px */
+  --font-size-11: 0.6875rem; /* 11px */
+  --font-size-12: 0.75rem; /* 12px */
+  --font-size-13: 0.8125rem; /* 13px */
+  --font-size-14: 0.875rem; /* 14px */
+  --font-size-16: 1rem; /* 16px */
+  --font-size-18: 1.125rem; /* 18px */
+  --font-size-20: 1.25rem; /* 20px */
+  --font-size-24: 1.5rem; /* 24px */
+  --font-size-30: 1.875rem; /* 30px */
+  --font-size-36: 2.25rem; /* 36px */
+  --font-size-48: 3rem; /* 48px */
+  --font-size-60: 3.75rem; /* 60px */
+
+  /* Font Weights - Numeric scale */
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+
+  /* Line Heights - Ratio scale */
+  --line-height-1: 1;
+  --line-height-1-25: 1.25;
+  --line-height-1-375: 1.375;
+  --line-height-1-5: 1.5;
+  --line-height-1-625: 1.625;
+  --line-height-2: 2;
+
+  /* Letter Spacing */
+  --letter-spacing-tight: -0.05em;
+  --letter-spacing-snug: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+}
+
+:root {
+  /* Border Radius - Numeric scale */
+  --radius-0: 0;
+  --radius-2: 0.125rem; /* 2px */
+  --radius-4: 0.25rem; /* 4px */
+  --radius-6: 0.375rem; /* 6px */
+  --radius-8: 0.5rem; /* 8px */
+  --radius-12: 0.75rem; /* 12px */
+  --radius-16: 1rem; /* 16px */
+  --radius-full: 9999px;
+
+  /* Border Widths */
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+}
+
+:root {
+  /* Shadows */
+  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
+
+  /* Opacity */
+  --opacity-0: 0;
+  --opacity-5: 0.05;
+  --opacity-10: 0.1;
+  --opacity-20: 0.2;
+  --opacity-25: 0.25;
+  --opacity-30: 0.3;
+  --opacity-40: 0.4;
+  --opacity-50: 0.5;
+  --opacity-60: 0.6;
+  --opacity-70: 0.7;
+  --opacity-75: 0.75;
+  --opacity-80: 0.8;
+  --opacity-90: 0.9;
+  --opacity-95: 0.95;
+  --opacity-100: 1;
+}
+
+:root {
+  /* Z-Index Primitives */
+  --z-0: 0;
+  --z-10: 10;
+  --z-20: 20;
+  --z-30: 30;
+  --z-40: 40;
+  --z-50: 50;
+  --z-100: 100;
+  --z-200: 200;
+  --z-300: 300;
+  --z-400: 400;
+  --z-500: 500;
+}
+
+:root {
+  /* Duration */
+  --duration-0: 0ms;
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  /* Easing */
+  --easing-linear: linear;
+  --easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Semantic tokens - intent-based */
+
+:root {
+  /* ===================================
+   * Background Tokens
+   * =================================== */
+
+  /* Base Layers */
+  --color-bg: var(--white); /* App body / fallback */
+  --color-bg-canvas: var(--gray-25); /* Main content area */
+  --color-bg-chrome: var(--white); /* App shell - header, sidebar, nav */
+  --color-bg-chrome-subtle: var(--gray-50); /* Secondary chrome */
+
+  /* Surfaces & Overlays */
+  --color-bg-surface: var(--white); /* Cards, panels, modals */
+  --color-bg-surface-raised: var(--white); /* Elevated surfaces (popovers) */
+  --color-bg-surface-sunken: var(--gray-100); /* Inset areas (input wells) */
+  --color-bg-overlay: rgb(0 0 0 / 50%); /* Modal/dialog backdrop */
+  --color-bg-inverse: var(--gray-900); /* Dark background for contrast */
+  --color-bg-disabled: var(--gray-100); /* Disabled backgrounds */
+
+  /* Hover States */
+  --color-bg-hover-subtle: var(--gray-50);
+
+  /* Primary Fill (Main CTA) */
+  --color-bg-fill-primary: var(--indigo-700);
+  --color-bg-fill-primary-hover: var(--indigo-800);
+  --color-bg-fill-primary-active: var(--indigo-900);
+  --color-bg-fill-primary-disabled: var(--indigo-400);
+
+  /* Interactive Fill (Secondary/Neutral) */
+  --color-bg-fill-interactive: var(--gray-100);
+  --color-bg-fill-interactive-hover: var(--gray-175);
+  --color-bg-fill-interactive-active: var(--gray-175);
+  --color-bg-fill-interactive-selected: var(--gray-175);
+  --color-bg-fill-interactive-disabled: var(--gray-50);
+
+  /* Accent Fill (Selected controls — checkboxes, toggles, radios) */
+  --color-bg-fill-accent: var(--indigo-500);
+  --color-bg-fill-accent-hover: var(--indigo-600);
+  --color-bg-fill-accent-active: var(--indigo-700);
+  --color-bg-fill-accent-disabled: var(--indigo-300);
+
+  /* Secondary Fill */
+  --color-bg-fill-secondary: var(--cyan-600);
+  --color-bg-fill-secondary-hover: var(--cyan-700);
+  --color-bg-fill-secondary-active: var(--cyan-800);
+
+  /* Semantic Fills (Status) */
+  --color-bg-fill-success: var(--green-500);
+  --color-bg-fill-success-hover: var(--green-600);
+  --color-bg-fill-success-active: var(--green-700);
+  --color-bg-fill-warning: var(--amber-500);
+  --color-bg-fill-warning-hover: var(--amber-600);
+  --color-bg-fill-warning-active: var(--amber-700);
+  --color-bg-fill-critical: var(--red-500);
+  --color-bg-fill-critical-hover: var(--red-600);
+  --color-bg-fill-critical-active: var(--red-700);
+  --color-bg-fill-info: var(--cyan-500);
+  --color-bg-fill-info-hover: var(--cyan-600);
+  --color-bg-fill-info-active: var(--cyan-700);
+
+  /* Neutral Fill (Gray solid buttons) */
+  --color-bg-fill-neutral: var(--gray-800);
+  --color-bg-fill-neutral-hover: var(--gray-900);
+  --color-bg-fill-neutral-active: var(--gray-950);
+
+  /* Semantic Backgrounds (Subtle) */
+  --color-bg-primary-subtle: var(--indigo-50);
+  --color-bg-primary-subtle-hover: var(--indigo-100);
+  --color-bg-neutral-subtle: var(--gray-50);
+  --color-bg-neutral-subtle-hover: var(--gray-100);
+  --color-bg-success-subtle: var(--green-50);
+  --color-bg-success-subtle-hover: var(--green-100);
+  --color-bg-warning-subtle: var(--amber-50);
+  --color-bg-warning-subtle-hover: var(--amber-100);
+  --color-bg-critical-subtle: var(--red-50);
+  --color-bg-critical-subtle-hover: var(--red-100);
+  --color-bg-info-subtle: var(--cyan-50);
+  --color-bg-info-subtle-hover: var(--cyan-100);
+
+  /* ===================================
+   * Text Tokens
+   * =================================== */
+  --color-text: var(--gray-900); /* Primary body text */
+  --color-text-secondary: var(--gray-600); /* Secondary/supporting */
+  --color-text-tertiary: var(--gray-500); /* Tertiary/placeholder */
+  --color-text-disabled: var(--gray-400); /* Disabled text */
+  --color-text-inverse: var(--white); /* Text on dark backgrounds */
+  --color-text-link: var(--indigo-600); /* Link text */
+  --color-text-link-hover: var(--indigo-700); /* Link hover */
+  --color-text-link-visited: var(--indigo-800); /* Visited link */
+
+  /* Text on Fills */
+  --color-text-on-primary: var(--white);
+  --color-text-on-neutral: var(--white);
+  --color-text-on-accent: var(--white);
+  --color-text-on-success: var(--white);
+  --color-text-on-warning: var(--gray-900);
+  --color-text-on-critical: var(--white);
+  --color-text-on-info: var(--white);
+
+  /* Brand/Accent Text */
+  --color-text-primary: var(--indigo-700);
+
+  /* Semantic Text */
+  --color-text-success: var(--green-700);
+  --color-text-warning: var(--amber-700);
+  --color-text-critical: var(--red-700);
+  --color-text-info: var(--cyan-700);
+
+  /* ===================================
+   * Icon Tokens
+   * =================================== */
+  --color-icon: var(--gray-700); /* Primary icon */
+  --color-icon-secondary: var(--gray-500); /* Secondary icon */
+  --color-icon-disabled: var(--gray-400); /* Disabled icon */
+  --color-icon-inverse: var(--white); /* Icon on dark backgrounds */
+  --color-icon-interactive: var(--gray-600); /* Clickable icon default */
+  --color-icon-interactive-hover: var(--gray-800); /* Clickable icon hover */
+  --color-icon-success: var(--green-600);
+  --color-icon-warning: var(--amber-600);
+  --color-icon-critical: var(--red-600);
+  --color-icon-info: var(--cyan-600);
+
+  /* ===================================
+   * Border Tokens (Decorative)
+   * =================================== */
+  --color-border: var(--gray-200); /* Default decorative border */
+  --color-border-subtle: var(--gray-100); /* Subtle dividers */
+  --color-border-strong: var(--gray-300); /* Emphasized borders */
+  --color-border-inverse: var(--gray-700); /* Border on dark backgrounds */
+
+  /* Control Borders (Accessible - 3:1 contrast) */
+  --color-border-control: var(--gray-300); /* Form inputs, buttons */
+  --color-border-control-hover: var(--gray-400);
+  --color-border-control-active: var(--gray-500);
+  --color-border-control-disabled: var(--gray-300);
+  --color-border-control-readonly: var(--gray-300);
+
+  /* Brand/Primary Border */
+  --color-border-primary: var(--indigo-700);
+
+  /* Focus Border */
+  --color-border-focus: var(--indigo-500);
+
+  /* Focus Ring Halo (box-shadow glow) */
+  --color-focus-ring-halo: var(--indigo-200);
+  --color-focus-ring-halo-critical: var(--red-200);
+
+  /* Semantic Borders */
+  --color-border-neutral: var(--gray-900);
+  --color-border-success: var(--green-500);
+  --color-border-warning: var(--amber-500);
+  --color-border-critical: var(--red-500);
+  --color-border-info: var(--cyan-500);
+}
+
+:root {
+  /* ===================================
+   * Semantic Spacing Tokens
+   * =================================== */
+
+  /* Gap (between elements) - 4px increments */
+  --spacing-gap-2xs: var(--spacing-1); /* 4px */
+  --spacing-gap-xs: var(--spacing-2); /* 8px */
+  --spacing-gap-sm: var(--spacing-3); /* 12px */
+  --spacing-gap-md: var(--spacing-4); /* 16px */
+  --spacing-gap-lg: var(--spacing-5); /* 20px */
+  --spacing-gap-xl: var(--spacing-6); /* 24px */
+  --spacing-gap-2xl: var(--spacing-8); /* 32px */
+
+  /* Inset (padding) - 4px increments */
+  --spacing-inset-2xs: var(--spacing-1); /* 4px */
+  --spacing-inset-xs: var(--spacing-2); /* 8px */
+  --spacing-inset-sm: var(--spacing-3); /* 12px */
+  --spacing-inset-md: var(--spacing-4); /* 16px */
+  --spacing-inset-lg: var(--spacing-5); /* 20px */
+  --spacing-inset-xl: var(--spacing-6); /* 24px */
+  --spacing-inset-2xl: var(--spacing-8); /* 32px */
+
+  /* Stack (vertical spacing) - 4px increments */
+  --spacing-stack-2xs: var(--spacing-1); /* 4px */
+  --spacing-stack-xs: var(--spacing-2); /* 8px */
+  --spacing-stack-sm: var(--spacing-3); /* 12px */
+  --spacing-stack-md: var(--spacing-4); /* 16px */
+  --spacing-stack-lg: var(--spacing-5); /* 20px */
+  --spacing-stack-xl: var(--spacing-6); /* 24px */
+  --spacing-stack-2xl: var(--spacing-8); /* 32px */
+}
+
+:root {
+  /* ===================================
+   * Semantic Typography Tokens
+   * =================================== */
+
+  /* Font Size - Dense SAAS scale */
+  --font-size-xs: var(--font-size-11); /* 11px - tiny labels, badges */
+  --font-size-sm: var(--font-size-12); /* 12px - secondary text, captions */
+  --font-size-md: var(--font-size-13); /* 13px - body text */
+  --font-size-lg: var(--font-size-14); /* 14px - emphasized body */
+  --font-size-xl: var(--font-size-16); /* 16px - H5, small sections */
+  --font-size-2xl: var(--font-size-18); /* 18px - H4 */
+  --font-size-3xl: var(--font-size-20); /* 20px - H3 */
+  --font-size-4xl: var(--font-size-24); /* 24px - H2 */
+  --font-size-5xl: var(--font-size-30); /* 30px - H1, page titles */
+
+  /* Font Weight */
+  --font-weight-regular: var(--font-weight-400);
+  --font-weight-medium: var(--font-weight-500);
+  --font-weight-semibold: var(--font-weight-600);
+  --font-weight-bold: var(--font-weight-700);
+
+  /* Line Height */
+  --line-height-tight: var(--line-height-1-25);
+  --line-height-normal: var(--line-height-1-5);
+  --line-height-relaxed: var(--line-height-1-625);
+
+  /* Letter Spacing */
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+}
+
+:root {
+  /* ===================================
+   * Semantic Shape Tokens
+   * =================================== */
+
+  /* Border Radius */
+  --radius-none: var(--radius-0);
+  --radius-xs: var(--radius-2); /* 2px */
+  --radius-sm: var(--radius-4); /* 4px */
+  --radius-md: var(--radius-6); /* 6px — default for controls */
+  --radius-lg: var(--radius-8); /* 8px */
+  --radius-xl: var(--radius-12); /* 12px */
+  --radius-round: var(--radius-full); /* Pills, avatars */
+
+  /* Border Width */
+  --border-none: var(--border-width-0);
+  --border-sm: var(--border-width-1); /* 1px */
+  --border-md: var(--border-width-2); /* 2px */
+  --border-lg: var(--border-width-4); /* 4px */
+}
+
+:root {
+  /* ===================================
+   * Interactive Control Sizing
+   * =================================== */
+
+  /* Button heights */
+  --button-height-sm: var(--spacing-7); /* 28px */
+  --button-height-md: var(--spacing-8); /* 32px */
+  --button-height-lg: var(--spacing-9); /* 36px */
+
+  /* Button padding */
+  --button-padding-horizontal-sm: var(--spacing-2); /* 8px */
+  --button-padding-horizontal-md: var(--spacing-3); /* 12px */
+  --button-padding-horizontal-lg: var(--spacing-4); /* 16px */
+  --button-padding-vertical-sm: var(--spacing-0-5); /* 2px */
+  --button-padding-vertical-md: var(--spacing-1); /* 4px */
+  --button-padding-vertical-lg: var(--spacing-2); /* 8px */
+
+  /* Input heights */
+  --input-height-sm: var(--spacing-6); /* 24px */
+  --input-height-md: var(--spacing-8); /* 32px */
+  --input-height-lg: var(--spacing-10); /* 40px */
+  --input-height-full: 100%;
+
+  /* Input widths */
+  --input-width-sm: 8rem;
+  --input-width-md: 16rem;
+  --input-width-lg: 24rem;
+  --input-width-full: 100%;
+
+  /* Input padding */
+  --input-padding-horizontal-sm: var(--spacing-2); /* 8px */
+  --input-padding-horizontal-md: var(--spacing-3); /* 12px */
+  --input-padding-horizontal-lg: var(--spacing-4); /* 16px */
+
+  /* Modal sizing */
+  --modal-padding: var(--spacing-6); /* 24px */
+
+  /* Spinner sizing */
+  --spinner-size-sm: var(--spacing-4); /* 16px */
+  --spinner-size-md: var(--spacing-6); /* 24px */
+  --spinner-size-lg: var(--spacing-8); /* 32px */
+  --spinner-border-width-sm: var(--border-width-2);
+  --spinner-border-width-md: var(--border-width-2);
+  --spinner-border-width-lg: var(--spacing-1); /* 4px */
+
+  /* Grid min-child-width for auto columns */
+  --grid-min-child-width-xs: 150px;
+  --grid-min-child-width-sm: 200px;
+  --grid-min-child-width-md: 280px;
+  --grid-min-child-width-lg: 350px;
+  --grid-min-child-width-xl: 450px;
+}
+
+:root {
+  /* Semantic Shadow Aliases */
+  --shadow-surface: var(--shadow-xs);
+  --shadow-modal: var(--shadow-lg);
+
+  /* Focus Ring */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring-halo);
+  --focus-ring-critical: 0 0 0 3px var(--color-focus-ring-halo-critical);
+
+  /* Z-Index Semantic Layers */
+  --z-dropdown: var(--z-100);
+  --z-sticky: var(--z-200);
+  --z-popover: var(--z-300);
+  --z-overlay: var(--z-400);
+  --z-modal: var(--z-500);
+  --z-toast: var(--z-600);
+}
+
+:root {
+  /* Transition Composites */
+  --transition-fast: var(--duration-150) var(--easing-in-out);
+  --transition-base: var(--duration-200) var(--easing-in-out);
+
+  /* Skeleton Animation */
+  --skeleton-animation-duration: 1.5s;
+  --skeleton-animation: skeleton-pulse var(--skeleton-animation-duration)
+    var(--easing-in-out) infinite;
+}
+
+/* Base styles */
+
+:root {
+  --font-color: var(--color-text);
+}
+
+h1 {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  font-size: var(--font-size-24);
+  letter-spacing: var(--letter-spacing-snug);
+  margin: 0;
+}
+
+h2 {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  font-size: var(--font-size-20);
+  letter-spacing: var(--letter-spacing-snug);
+  margin: 0;
+}
+
+h3 {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  font-size: var(--font-size-18);
+  letter-spacing: var(--letter-spacing-snug);
+  margin: 0;
+}
+
+h4 {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  font-size: var(--font-size-16);
+  letter-spacing: var(--letter-spacing-snug);
+  margin: 0;
+}
+
+body {
+  color: var(--color-text);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-13);
+  font-weight: var(--font-weight-400);
+  line-height: var(--line-height-1-5);
+}
+
+/* Animations */
+
+/* Global Animation Keyframes */
+
+@keyframes skeleton-pulse {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Third-party library integration */
+
+:root {
+  /* Third-party library integration */
+  --epm-backdrop-background: var(--color-bg-overlay);
+}
+
+/* Drawer animation
+
+   These styles must be in a global (non-scoped) CSS file because:
+   1. EPM listens for animationend events where the animation name ends in "-out"
+      to know when to remove modals from the DOM
+   2. ember-scoped-css would mangle the keyframe names (e.g., drawer-animation-out__hash)
+      which breaks EPM's detection pattern
+   3. Additionally, ember-scoped-css has a bug where hyphens in animation names
+      are converted to underscores in references but not in @keyframes definitions
+*/
+
+.epm-modal.modal-drawer {
+  animation: drawer-animation-in 200ms;
+}
+
+.epm-modal.modal-drawer.epm-out {
+  animation: drawer-animation-out 200ms forwards;
+}
+
+@keyframes drawer-animation-in {
+  0% {
+    transform: translate(100%, 0);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes drawer-animation-out {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(100%, 0);
+  }
+}

package/dist/template-registry.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=template-registry.js.map

package/dist/template-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-registry.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}