feat: initial @jason/ui-kit — tokens, preset, components, motion, blocks, Impeccable

2026-07-16 00:36:53 -05:00
commit b75012525d
36 changed files with 1324 additions and 0 deletions
@@ -0,0 +1,53 @@
+/* Import once in your app entry:  import "@jason/ui-kit/styles.css";  */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * Brand tokens as HSL channels so Tailwind's <alpha-value> works.
+ * :root = dark (default brand). .light overrides for light surfaces.
+ */
+@layer base {
+  :root {
+    --bg: 330 4% 13%;
+    --surface: 330 4% 16%;
+    --surface-2: 330 3% 20%;
+    --border: 330 3% 22%;
+    --text: 33 33% 94%;
+    --muted: 28 9% 63%;
+    --brand: 46 68% 59%;
+    --brand-bright: 51 91% 52%;
+    --brand-dark: 46 40% 43%;
+    --success: 146 43% 43%;
+    --warning: 46 68% 59%;
+    --danger: 17 61% 47%;
+    --info: 205 37% 54%;
+  }
+
+  .light {
+    --bg: 36 33% 97%;
+    --surface: 0 0% 100%;
+    --surface-2: 36 20% 95%;
+    --border: 33 12% 86%;
+    --text: 330 6% 15%;
+    --muted: 330 4% 40%;
+  }
+
+  * { border-color: hsl(var(--border)); }
+  body {
+    background-color: hsl(var(--bg));
+    color: hsl(var(--text));
+    font-family: "Open Sans", system-ui, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+  h1, h2, h3, h4, h5 { font-family: "Montserrat", system-ui, sans-serif; }
+
+  /* Respect reduced-motion everywhere. */
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}