@mikenotthepope/substrateui 0.1.0

package/base/substrate.css

@@ -0,0 +1,489 @@
+/*
+ * 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: #7f1d1d;
+    --overlay: rgba(0, 0, 0, 0.85);
+    --border: #000;
+    --ring: #fff;
+    --input: #1F1F1F;
+    --grid-line: rgba(255, 255, 255, 0.06);
+  }
+
+  /* ─── 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;
+    }
+  }
+}