@codelitdev/design-system 0.1.0-alpha.5 → 0.1.0-alpha.7

package/src/index.ts

@@ -4,8 +4,8 @@ export { Badge } from "./components/display/Badge";
 export { Card } from "./components/display/Card";
 export { Tabs } from "./components/display/Tabs";
 export { Dialog } from "./components/feedback/Dialog";
-export { Loader } from "./components/feedback/Loader";
 export type { LoaderProps } from "./components/feedback/Loader";
+export { Loader } from "./components/feedback/Loader";
 export { Toast } from "./components/feedback/Toast";
 export { Tooltip } from "./components/feedback/Tooltip";
 export { Checkbox } from "./components/forms/Checkbox";

package/src/tokens/fonts.css

@@ -1,2 +1,2 @@
 /* CodeLit — webfonts (Google Fonts CDN; no binaries vendored) */
-@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

package/src/tokens/layout.css

@@ -13,10 +13,10 @@
   --space-12: 48px;
 
   /* Radii */
-  --radius: 0.625rem;      /* 10px — controls, inputs, buttons */
-  --radius-sm: 6px;        /* chips, code spans, small tiles */
-  --radius-lg: 16px;       /* cards, dialogs */
-  --radius-full: 999px;    /* pills, badges, avatars */
+  --radius: 0.625rem; /* 10px — controls, inputs, buttons */
+  --radius-sm: 6px; /* chips, code spans, small tiles */
+  --radius-lg: 16px; /* cards, dialogs */
+  --radius-full: 999px; /* pills, badges, avatars */
 
   /* Shadows — warm-tinted, soft */
   --shadow-card: 0 2px 12px oklch(0.3 0.02 60 / 0.06);

package/src/tokens/products.css

@@ -9,7 +9,8 @@
   --primary-hover: oklch(0.55 0.14 30);
   --ring: oklch(0.6 0.14 30);
 }
-.dark[data-product="courselit"], .dark [data-product="courselit"] {
+.dark[data-product="courselit"],
+.dark [data-product="courselit"] {
   --primary: oklch(0.72 0.13 30);
   --primary-foreground: oklch(0.2 0.04 30);
   --primary-soft: oklch(0.72 0.13 30 / 0.16);
@@ -24,7 +25,8 @@
   --primary-hover: oklch(0.55 0.14 300);
   --ring: oklch(0.6 0.14 300);
 }
-.dark[data-product="medialit"], .dark [data-product="medialit"] {
+.dark[data-product="medialit"],
+.dark [data-product="medialit"] {
   --primary: oklch(0.72 0.13 300);
   --primary-foreground: oklch(0.2 0.04 300);
   --primary-soft: oklch(0.72 0.13 300 / 0.16);
@@ -39,7 +41,8 @@
   --primary-hover: oklch(0.55 0.14 150);
   --ring: oklch(0.6 0.14 150);
 }
-.dark[data-product="sendlit"], .dark [data-product="sendlit"] {
+.dark[data-product="sendlit"],
+.dark [data-product="sendlit"] {
   --primary: oklch(0.72 0.13 150);
   --primary-foreground: oklch(0.2 0.04 150);
   --primary-soft: oklch(0.72 0.13 150 / 0.16);
@@ -54,7 +57,8 @@
   --primary-hover: oklch(0.55 0.14 230);
   --ring: oklch(0.6 0.14 230);
 }
-.dark[data-product="frontlit"], .dark [data-product="frontlit"] {
+.dark[data-product="frontlit"],
+.dark [data-product="frontlit"] {
   --primary: oklch(0.72 0.13 230);
   --primary-foreground: oklch(0.2 0.04 230);
   --primary-soft: oklch(0.72 0.13 230 / 0.16);

package/src/tokens/typography.css

@@ -5,16 +5,17 @@
   --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
 
   /* Type scale */
-  --text-display: 800 2.25rem/1.12 var(--font-sans);   /* 36px, -0.02em */
-  --text-h1: 700 1.75rem/1.2 var(--font-sans);          /* 28px, -0.02em */
-  --text-h2: 700 1.375rem/1.25 var(--font-sans);        /* 22px, -0.015em */
-  --text-h3: 600 1.125rem/1.3 var(--font-sans);         /* 18px */
-  --text-body: 400 0.9375rem/1.55 var(--font-sans);     /* 15px */
-  --text-body-sm: 400 0.875rem/1.5 var(--font-sans);    /* 14px */
-  --text-label: 600 0.8125rem/1.3 var(--font-sans);     /* 13px */
-  --text-caption: 400 0.75rem/1.4 var(--font-sans);     /* 12px */
-  --text-code: 400 0.8125rem/1.5 var(--font-mono);      /* 13px */
-  --text-eyebrow: 500 0.6875rem/1.3 var(--font-mono);   /* 11px mono, letter-spacing 0.08em, sentence case */
+  --text-display: 800 2.25rem / 1.12 var(--font-sans); /* 36px, -0.02em */
+  --text-h1: 700 1.75rem / 1.2 var(--font-sans); /* 28px, -0.02em */
+  --text-h2: 700 1.375rem / 1.25 var(--font-sans); /* 22px, -0.015em */
+  --text-h3: 600 1.125rem / 1.3 var(--font-sans); /* 18px */
+  --text-body: 400 0.9375rem / 1.55 var(--font-sans); /* 15px */
+  --text-body-sm: 400 0.875rem / 1.5 var(--font-sans); /* 14px */
+  --text-label: 600 0.8125rem / 1.3 var(--font-sans); /* 13px */
+  --text-caption: 400 0.75rem / 1.4 var(--font-sans); /* 12px */
+  --text-code: 400 0.8125rem / 1.5 var(--font-mono); /* 13px */
+  --text-eyebrow:
+    500 0.6875rem / 1.3 var(--font-mono); /* 11px mono, letter-spacing 0.08em, sentence case */
 
   --tracking-tight: -0.02em;
   --tracking-heading: -0.015em;
@@ -34,7 +35,17 @@ body {
    blanket hover-underline breaks that UX. Opt in explicitly with .cl-link for
    inline text links (prose, footnotes, etc.); interactive apps should use the
    Button `link` variant / registry Button instead. */
-.cl-link { color: var(--primary); text-decoration: none; }
-.cl-link:hover { color: var(--primary-hover); text-decoration: underline; }
+.cl-link {
+  color: var(--primary);
+  text-decoration: none;
+}
+.cl-link:hover {
+  color: var(--primary-hover);
+  text-decoration: underline;
+}
 
-code, kbd, pre { font: var(--text-code); }
+code,
+kbd,
+pre {
+  font: var(--text-code);
+}