@mikenotthepope/substrateui 0.1.2 → 0.1.3

package/base/substrate.css

@@ -1,652 +0,0 @@
-/*
- * Substrate UI — Design System Tokens & Base Stylesheet
- *
- * Import this once in your app root to get the full Substrate UI look and feel.
- * This is the ONLY file consumers need to import for components to render correctly.
- *
- * Usage:
- *   import "substrateui/styles"
- *
- * Token Reference:
- *   Colors ......... --background, --foreground, --primary, --secondary, --success, etc.
- *   Color Scales ... --primary-50 through --primary-900 (+ destructive, success, warning, info, error)
- *   Spacing ........ --spacing-0 through --spacing-16  (4px base unit)
- *   Typography ..... --text-xs through --text-6xl, --leading-*, --tracking-*
- *   Fluid Type ..... --text-3xl-fluid through --text-6xl-fluid (clamp-based responsive)
- *   Shadows ........ --shadow-xs through --shadow-2xl  (hard pixel offsets)
- *   Radii .......... --radius (0 default, var(--radius-md) with .with-radius)
- *                     --radius-none, --radius-sm, --radius-md, --radius-lg, --radius-full
- *   Fonts .......... --font-head, --font-sans, --font-mono
- *   Weights ........ --weight-normal, --weight-medium, --weight-bold
- *   Motion ......... --duration-fast through --duration-slower, --ease-* (incl. --ease-spring)
- *   Z-index ........ --z-base, --z-dropdown, --z-sticky, --z-overlay, --z-modal, --z-popover, --z-toast
- *   Opacity ........ --opacity-disabled, --opacity-hover, --opacity-placeholder
- */
-
-@import "tailwindcss";
-@import "tw-animate-css";
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   TAILWIND THEME MAPPING
-   Maps CSS custom properties to Tailwind utility classes.
-   This is what allows `bg-primary`, `text-muted-foreground`, `shadow-lg`, etc.
-   NOTE: @theme inline must remain outside @layer for Tailwind v4 to process it.
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-@keyframes marquee {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes marquee2 {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0%);
-  }
-}
-
-@theme inline {
-  --animate-marquee: marquee 20s linear infinite;
-  --animate-marquee2: marquee2 20s linear infinite;
-  /* Fonts */
-  --font-head: var(--font-head);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-
-  /* Radii */
-  --radius: var(--radius);
-  --radius-none: 0;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-full: 9999px;
-
-  /* Retro shadow scale — hard pixel offsets, no blur */
-  --shadow-xs: 1px 1px 0 0 var(--border);
-  --shadow-sm: 2px 2px 0 0 var(--border);
-  --shadow: 3px 3px 0 0 var(--border);
-  --shadow-md: 4px 4px 0 0 var(--border);
-  --shadow-lg: 6px 6px 0 0 var(--border);
-  --shadow-xl: 10px 10px 0 1px var(--border);
-  --shadow-2xl: 16px 16px 0 1px var(--border);
-
-  /* Colors */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary-hover: var(--primary-hover);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-success: var(--success);
-  --color-success-foreground: var(--success-foreground);
-  --color-warning: var(--warning);
-  --color-warning-foreground: var(--warning-foreground);
-  --color-info: var(--info);
-  --color-info-foreground: var(--info-foreground);
-  --color-error: var(--error);
-  --color-error-foreground: var(--error-foreground);
-  --color-overlay: var(--overlay);
-  --color-border: var(--border);
-  --color-page: var(--page);
-  --color-page-foreground: var(--page-foreground);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-
-  /* Color palette scales */
-  --color-primary-50: var(--primary-50);
-  --color-primary-100: var(--primary-100);
-  --color-primary-200: var(--primary-200);
-  --color-primary-300: var(--primary-300);
-  --color-primary-400: var(--primary-400);
-  --color-primary-500: var(--primary-500);
-  --color-primary-600: var(--primary-600);
-  --color-primary-700: var(--primary-700);
-  --color-primary-800: var(--primary-800);
-  --color-primary-900: var(--primary-900);
-
-  --color-destructive-50: var(--destructive-50);
-  --color-destructive-100: var(--destructive-100);
-  --color-destructive-200: var(--destructive-200);
-  --color-destructive-300: var(--destructive-300);
-  --color-destructive-400: var(--destructive-400);
-  --color-destructive-500: var(--destructive-500);
-  --color-destructive-600: var(--destructive-600);
-  --color-destructive-700: var(--destructive-700);
-  --color-destructive-800: var(--destructive-800);
-  --color-destructive-900: var(--destructive-900);
-
-  --color-success-50: var(--success-50);
-  --color-success-100: var(--success-100);
-  --color-success-200: var(--success-200);
-  --color-success-300: var(--success-300);
-  --color-success-400: var(--success-400);
-  --color-success-500: var(--success-500);
-  --color-success-600: var(--success-600);
-  --color-success-700: var(--success-700);
-  --color-success-800: var(--success-800);
-  --color-success-900: var(--success-900);
-
-  --color-warning-50: var(--warning-50);
-  --color-warning-100: var(--warning-100);
-  --color-warning-200: var(--warning-200);
-  --color-warning-300: var(--warning-300);
-  --color-warning-400: var(--warning-400);
-  --color-warning-500: var(--warning-500);
-  --color-warning-600: var(--warning-600);
-  --color-warning-700: var(--warning-700);
-  --color-warning-800: var(--warning-800);
-  --color-warning-900: var(--warning-900);
-
-  --color-info-50: var(--info-50);
-  --color-info-100: var(--info-100);
-  --color-info-200: var(--info-200);
-  --color-info-300: var(--info-300);
-  --color-info-400: var(--info-400);
-  --color-info-500: var(--info-500);
-  --color-info-600: var(--info-600);
-  --color-info-700: var(--info-700);
-  --color-info-800: var(--info-800);
-  --color-info-900: var(--info-900);
-
-  --color-error-50: var(--error-50);
-  --color-error-100: var(--error-100);
-  --color-error-200: var(--error-200);
-  --color-error-300: var(--error-300);
-  --color-error-400: var(--error-400);
-  --color-error-500: var(--error-500);
-  --color-error-600: var(--error-600);
-  --color-error-700: var(--error-700);
-  --color-error-800: var(--error-800);
-  --color-error-900: var(--error-900);
-
-  /* Motion tokens */
-  --duration-fast: 100ms;
-  --duration-normal: 200ms;
-  --duration-slow: 400ms;
-  --duration-slower: 600ms;
-  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-  /* Z-index scale */
-  --z-base: 0;
-  --z-dropdown: 50;
-  --z-sticky: 100;
-  --z-overlay: 200;
-  --z-modal: 300;
-  --z-popover: 400;
-  --z-toast: 500;
-
-  /* Opacity tokens */
-  --opacity-disabled: 0.5;
-  --opacity-hover: 0.8;
-  --opacity-placeholder: 0.5;
-}
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   DESIGN TOKENS & BASE STYLES
-   Wrapped in @layer substrate for specificity isolation.
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-@layer substrate {
-  /* ─── Spacing Scale (4px base) ─── */
-
-  :root {
-    --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-3: 0.75rem;     /* 12px */
-    --spacing-4: 1rem;        /* 16px */
-    --spacing-6: 1.5rem;      /* 24px */
-    --spacing-8: 2rem;        /* 32px */
-    --spacing-10: 2.5rem;     /* 40px */
-    --spacing-12: 3rem;       /* 48px */
-    --spacing-16: 4rem;       /* 64px */
-    --spacing-20: 5rem;       /* 80px */
-    --spacing-24: 6rem;       /* 96px */
-    --spacing-28: 7rem;       /* 112px */
-  }
-
-  /* ─── Typography Scale ─── */
-
-  :root {
-    --text-xs: 0.75rem;       /* 12px */
-    --text-sm: 0.875rem;      /* 14px */
-    --text-base: 1rem;        /* 16px */
-    --text-lg: 1.125rem;      /* 18px */
-    --text-xl: 1.25rem;       /* 20px */
-    --text-2xl: 1.5rem;       /* 24px */
-    --text-3xl: 1.875rem;     /* 30px */
-    --text-4xl: 2.25rem;      /* 36px */
-    --text-5xl: 3rem;         /* 48px */
-    --text-6xl: 3.75rem;      /* 60px */
-
-    --leading-none: 1;
-    --leading-tight: 1.25;
-    --leading-normal: 1.5;
-    --leading-relaxed: 1.625;
-
-    --tracking-tight: -0.025em;
-    --tracking-normal: 0;
-
-    --weight-normal: 400;
-    --weight-medium: 500;
-    --weight-bold: 700;
-  }
-
-  /* ─── Fluid Typography (responsive, opt-in) ─── */
-
-  :root {
-    --text-3xl-fluid: clamp(1.5rem, 1.25rem + 1.25vw, 1.875rem);     /* 24px → 30px */
-    --text-4xl-fluid: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);    /* 30px → 36px */
-    --text-5xl-fluid: clamp(2.25rem, 1.5rem + 3.75vw, 3rem);         /* 36px → 48px */
-    --text-6xl-fluid: clamp(2.5rem, 1.5rem + 5vw, 3.75rem);          /* 40px → 60px */
-  }
-
-  /* ─── Motion Tokens ─── */
-
-  :root {
-    --duration-fast: 100ms;
-    --duration-normal: 200ms;
-    --duration-slow: 400ms;
-    --duration-slower: 600ms;
-
-    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-in: cubic-bezier(0.4, 0, 1, 1);
-    --ease-out: cubic-bezier(0, 0, 0.2, 1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
-    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  }
-
-  /* ─── Z-index Scale ─── */
-
-  :root {
-    --z-base: 0;
-    --z-dropdown: 50;
-    --z-sticky: 100;
-    --z-overlay: 200;
-    --z-modal: 300;
-    --z-popover: 400;
-    --z-toast: 500;
-  }
-
-  /* ─── Opacity Tokens ─── */
-
-  :root {
-    --opacity-disabled: 0.5;
-    --opacity-hover: 0.8;
-    --opacity-placeholder: 0.5;
-  }
-
-  /* ─── Border Radius ─── */
-
-  :root {
-    --radius: 0;
-    --radius-none: 0;
-    --radius-sm: 0.25rem;
-    --radius-md: 0.5rem;
-    --radius-lg: 0.75rem;
-    --radius-full: 9999px;
-  }
-
-  /* ─── Color Tokens (Light Theme) ─── */
-
-  :root {
-    --page: #DCEBFE;
-    --page-foreground: #000;
-    --background: #fff;
-    --foreground: #000;
-    --card: #fff;
-    --card-foreground: #000;
-    --primary: #5294FF;
-    --primary-hover: #3D7FE6;
-    --primary-foreground: #000;
-    --secondary: #fff;
-    --secondary-foreground: #000;
-    --muted: #d5d5d5;
-    --muted-foreground: #555;
-    --accent: #5294FF;
-    --accent-foreground: #000;
-    --destructive: #e63946;
-    --destructive-foreground: #fff;
-    --success: #4ade80;
-    --success-foreground: #000;
-    --warning: #fbbf24;
-    --warning-foreground: #000;
-    --info: #60a5fa;
-    --info-foreground: #000;
-    --error: #f87171;
-    --error-foreground: #000;
-    --overlay: rgba(0, 0, 0, 0.85);
-    --border: #000;
-    --ring: #000;
-    --input: #fff;
-    --grid-line: rgba(255, 255, 255, 0.5);
-  }
-
-  /* ─── Color Palette Scales ─── */
-
-  :root {
-    --primary-50:  #EBF2FF;
-    --primary-100: #D6E5FF;
-    --primary-200: #ADC9FF;
-    --primary-300: #85AEFF;
-    --primary-400: #5294FF;
-    --primary-500: #3D7FE6;
-    --primary-600: #2E66BF;
-    --primary-700: #1F4D99;
-    --primary-800: #133573;
-    --primary-900: #0A1F4D;
-
-    --destructive-50:  #FDE8EA;
-    --destructive-100: #FAC5CA;
-    --destructive-200: #F38B95;
-    --destructive-300: #EC5160;
-    --destructive-400: #E63946;
-    --destructive-500: #CC2D3A;
-    --destructive-600: #A6242F;
-    --destructive-700: #801B24;
-    --destructive-800: #591319;
-    --destructive-900: #330B0E;
-
-    --success-50:  #ECFDF2;
-    --success-100: #D1FAE0;
-    --success-200: #A3F4C1;
-    --success-300: #74EEA1;
-    --success-400: #4ADE80;
-    --success-500: #36C76A;
-    --success-600: #28A554;
-    --success-700: #1B833E;
-    --success-800: #0E6128;
-    --success-900: #053F14;
-
-    --warning-50:  #FEF7E6;
-    --warning-100: #FDF0CC;
-    --warning-200: #FBE199;
-    --warning-300: #FBD266;
-    --warning-400: #FBBF24;
-    --warning-500: #E0A91A;
-    --warning-600: #B88A14;
-    --warning-700: #8F6B0E;
-    --warning-800: #674C08;
-    --warning-900: #3F2E03;
-
-    --info-50:  #EFF5FF;
-    --info-100: #DBEAFE;
-    --info-200: #B7D5FD;
-    --info-300: #93BFFC;
-    --info-400: #60A5FA;
-    --info-500: #4B8FE0;
-    --info-600: #3A73BF;
-    --info-700: #2B579F;
-    --info-800: #1C3B7F;
-    --info-900: #0E205F;
-
-    --error-50:  #FEF0F0;
-    --error-100: #FEE2E2;
-    --error-200: #FDB9B9;
-    --error-300: #FC9090;
-    --error-400: #F87171;
-    --error-500: #E05555;
-    --error-600: #BF3A3A;
-    --error-700: #9F2020;
-    --error-800: #7F1010;
-    --error-900: #5F0505;
-  }
-
-  /* ─── Color Tokens (Dark Theme) ─── */
-
-  .dark {
-    --page: #20294B;
-    --page-foreground: #E6E6E6;
-    --background: #1F1F1F;
-    --foreground: #E6E6E6;
-    --card: #20294B;
-    --card-foreground: #E6E6E6;
-    --primary: #5294FF;
-    --primary-hover: #3D7FE6;
-    --primary-foreground: #000;
-    --secondary: #1F1F1F;
-    --secondary-foreground: #E6E6E6;
-    --muted: #1F1F1F;
-    --muted-foreground: #999;
-    --accent: #5294FF;
-    --accent-foreground: #000;
-    --destructive: #e63946;
-    --destructive-foreground: #fff;
-    --success: #4ade80;
-    --success-foreground: #000;
-    --warning: #fbbf24;
-    --warning-foreground: #000;
-    --info: #60a5fa;
-    --info-foreground: #000;
-    --error: #f87171;
-    --error-foreground: #000;
-    --overlay: rgba(0, 0, 0, 0.85);
-    --border: #000;
-    --ring: #fff;
-    --input: #1F1F1F;
-    --grid-line: rgba(255, 255, 255, 0.06);
-  }
-
-  /* ─── Color Theme: Plum (Light) ───
-     Only anchor-related tokens (primary, accent, info, page, ring) are
-     overridden. Surface tokens (background, foreground, muted, secondary,
-     border, input, overlay) intentionally inherit from the base light theme
-     so that color themes only shift the brand accent, not the entire surface. */
-
-  .theme-plum {
-    --page: #F0DCFE;
-    --page-foreground: #000;
-    --primary: #B254CF;
-    --primary-hover: #9A42B5;
-    --primary-foreground: #000;
-    --accent: #B254CF;
-    --accent-foreground: #000;
-    --info: #B254CF;
-    --info-foreground: #000;
-    --ring: #B254CF;
-    --grid-line: rgba(178, 84, 207, 0.12);
-
-    --primary-50:  #F8EDFC;
-    --primary-100: #F0D9F8;
-    --primary-200: #DFB0F0;
-    --primary-300: #CE87E8;
-    --primary-400: #B254CF;
-    --primary-500: #9A42B5;
-    --primary-600: #7D3596;
-    --primary-700: #602877;
-    --primary-800: #431C57;
-    --primary-900: #281038;
-
-    --info-50:  #F8EDFC;
-    --info-100: #F0D9F8;
-    --info-200: #DFB0F0;
-    --info-300: #CE87E8;
-    --info-400: #B254CF;
-    --info-500: #9A42B5;
-    --info-600: #7D3596;
-    --info-700: #602877;
-    --info-800: #431C57;
-    --info-900: #281038;
-  }
-
-  /* ─── Color Theme: Plum (Dark) ─── */
-
-  .dark.theme-plum,
-  .dark .theme-plum {
-    --page: #2E2045;
-    --page-foreground: #E6E6E6;
-    --card: #2E2045;
-    --card-foreground: #E6E6E6;
-    --primary: #B254CF;
-    --primary-hover: #9A42B5;
-    --primary-foreground: #000;
-    --accent: #B254CF;
-    --accent-foreground: #000;
-    --info: #B254CF;
-    --info-foreground: #000;
-    --ring: #fff;
-    --grid-line: rgba(178, 84, 207, 0.08);
-
-    /* Dark-adapted palette — lighter end toned down for dark backgrounds */
-    --primary-50:  #3A2548;
-    --primary-100: #452D55;
-    --primary-200: #5A3870;
-    --primary-300: #7A4698;
-    --primary-400: #B254CF;
-    --primary-500: #C476DA;
-    --primary-600: #D49BE5;
-    --primary-700: #E0B8ED;
-    --primary-800: #ECD5F5;
-    --primary-900: #F5EAFA;
-
-    --info-50:  #3A2548;
-    --info-100: #452D55;
-    --info-200: #5A3870;
-    --info-300: #7A4698;
-    --info-400: #B254CF;
-    --info-500: #C476DA;
-    --info-600: #D49BE5;
-    --info-700: #E0B8ED;
-    --info-800: #ECD5F5;
-    --info-900: #F5EAFA;
-  }
-
-  /* ─── Color Theme: Plum Trio (Light) ─── */
-
-  .theme-plum-trio {
-    --page: #F0DCFE;
-    --page-foreground: #000;
-    --primary: #B254CF;
-    --primary-hover: #9A42B5;
-    --primary-foreground: #000;
-    --accent: #2ABFAB;
-    --accent-foreground: #000;
-    --info: #E8B42A;
-    --info-foreground: #000;
-    --ring: #B254CF;
-    --grid-line: rgba(178, 84, 207, 0.12);
-
-    --primary-50:  #F8EDFC;
-    --primary-100: #F0D9F8;
-    --primary-200: #DFB0F0;
-    --primary-300: #CE87E8;
-    --primary-400: #B254CF;
-    --primary-500: #9A42B5;
-    --primary-600: #7D3596;
-    --primary-700: #602877;
-    --primary-800: #431C57;
-    --primary-900: #281038;
-
-    --info-50:  #FDF6E4;
-    --info-100: #FAECC5;
-    --info-200: #F5D88E;
-    --info-300: #F0C457;
-    --info-400: #E8B42A;
-    --info-500: #C99A1E;
-    --info-600: #A47D16;
-    --info-700: #7F6010;
-    --info-800: #5A440B;
-    --info-900: #352806;
-  }
-
-  /* ─── Color Theme: Plum Trio (Dark) ─── */
-
-  .dark.theme-plum-trio,
-  .dark .theme-plum-trio {
-    --page: #2E2045;
-    --page-foreground: #E6E6E6;
-    --card: #2E2045;
-    --card-foreground: #E6E6E6;
-    --primary: #B254CF;
-    --primary-hover: #9A42B5;
-    --primary-foreground: #000;
-    --accent: #2ABFAB;
-    --accent-foreground: #000;
-    --info: #E8B42A;
-    --info-foreground: #000;
-    --ring: #fff;
-    --grid-line: rgba(178, 84, 207, 0.08);
-
-    --primary-50:  #3A2548;
-    --primary-100: #452D55;
-    --primary-200: #5A3870;
-    --primary-300: #7A4698;
-    --primary-400: #B254CF;
-    --primary-500: #C476DA;
-    --primary-600: #D49BE5;
-    --primary-700: #E0B8ED;
-    --primary-800: #ECD5F5;
-    --primary-900: #F5EAFA;
-
-    --info-50:  #3D2E10;
-    --info-100: #4D3A14;
-    --info-200: #6B5220;
-    --info-300: #9A7828;
-    --info-400: #E8B42A;
-    --info-500: #F0C457;
-    --info-600: #F5D88E;
-    --info-700: #FAECC5;
-    --info-800: #FDF6E4;
-    --info-900: #FEFBF2;
-  }
-
-  /* ─── Optional: rounded corners ─── */
-
-  .with-radius {
-    --radius: var(--radius-md);
-  }
-
-  /* ─── Base body styles ─── */
-
-  body {
-    background-color: var(--page);
-    background-image:
-      linear-gradient(var(--grid-line) 1px, transparent 1px),
-      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
-    background-size: 40px 40px;
-    color: var(--page-foreground);
-    font-family: var(--font-sans), 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
-  }
-
-  /* ─── Scrollbar (dark mode) ─── */
-
-  .dark {
-    scrollbar-color: #E6E6E6 #1F1F1F;
-  }
-
-  /* ─── Reduced motion ─── */
-
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-}