@deepfuture/dui-components 0.0.21 → 1.0.1

package/tokens/prose.css

@@ -0,0 +1,250 @@
+/* =================================================================
+ * DUI Prose — Rich-text / markdown content styles
+ * =================================================================
+ * Apply class="dui-prose" to any container with rendered HTML
+ * (markdown output, CMS content, help text, etc.).
+ *
+ * All values reference --prose-* tokens (customizable) and existing
+ * DUI design tokens. No hardcoded colors or spacing.
+ * ================================================================= */
+
+/* --- Root -------------------------------------------------------- */
+.dui-prose {
+  color: var(--prose-body);
+  font-size: var(--text-base);
+  line-height: var(--line-height-relaxed);
+  max-width: 65ch;
+}
+
+.dui-prose > :first-child {
+  margin-block-start: 0;
+}
+
+.dui-prose > :last-child {
+  margin-block-end: 0;
+}
+
+/* --- Headings ---------------------------------------------------- */
+.dui-prose h1 {
+  color: var(--prose-headings);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-4xl);
+  line-height: var(--text-4xl--line-height);
+  letter-spacing: var(--letter-spacing-tightest);
+  margin-block: 0 var(--space-4);
+}
+
+.dui-prose h2 {
+  color: var(--prose-headings);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-3xl);
+  line-height: var(--text-3xl--line-height);
+  letter-spacing: var(--letter-spacing-tighter);
+  margin-block: var(--space-10) var(--space-3);
+}
+
+.dui-prose h3 {
+  color: var(--prose-headings);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-2xl);
+  line-height: var(--text-2xl--line-height);
+  letter-spacing: var(--letter-spacing-tight);
+  margin-block: var(--space-8) var(--space-3);
+}
+
+.dui-prose h4 {
+  color: var(--prose-headings);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-xl);
+  line-height: var(--text-xl--line-height);
+  letter-spacing: var(--letter-spacing-normal);
+  margin-block: var(--space-6) var(--space-2);
+}
+
+.dui-prose h5 {
+  color: var(--prose-headings);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-lg);
+  line-height: var(--text-lg--line-height);
+  letter-spacing: var(--letter-spacing-normal);
+  margin-block: var(--space-6) var(--space-2);
+}
+
+.dui-prose h6 {
+  color: var(--prose-headings);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-base);
+  line-height: var(--text-base--line-height);
+  letter-spacing: var(--letter-spacing-normal);
+  margin-block: var(--space-6) var(--space-2);
+}
+
+/* --- Paragraphs -------------------------------------------------- */
+.dui-prose p {
+  color: var(--prose-body);
+  margin-block: 1em 0;
+}
+
+/* --- Inline text ------------------------------------------------- */
+.dui-prose strong,
+.dui-prose b {
+  color: var(--prose-bold);
+  font-weight: var(--font-weight-semibold);
+}
+
+.dui-prose em,
+.dui-prose i {
+  font-style: italic;
+}
+
+.dui-prose small {
+  font-size: 0.875em;
+  color: var(--prose-caption);
+}
+
+/* --- Links ------------------------------------------------------- */
+.dui-prose a {
+  color: var(--prose-links);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.dui-prose a:hover {
+  color: var(--prose-links-hover);
+}
+
+/* --- Lists ------------------------------------------------------- */
+.dui-prose ul {
+  list-style-type: disc;
+  padding-inline-start: var(--space-6);
+  margin-block: 1em 0;
+}
+
+.dui-prose ol {
+  list-style-type: decimal;
+  padding-inline-start: var(--space-6);
+  margin-block: 1em 0;
+}
+
+.dui-prose li {
+  margin-block: var(--space-1);
+}
+
+.dui-prose li > ul,
+.dui-prose li > ol {
+  margin-block: var(--space-0_5);
+}
+
+.dui-prose li > p {
+  margin-block: var(--space-1);
+}
+
+/* --- Blockquote -------------------------------------------------- */
+.dui-prose blockquote {
+  border-inline-start: 3px solid var(--prose-blockquote-border);
+  color: var(--prose-blockquote-text);
+  padding-inline-start: var(--space-4);
+  font-style: italic;
+  margin-inline: 0;
+  margin-block: 1em 0;
+}
+
+/* --- Inline code ------------------------------------------------- */
+.dui-prose code {
+  color: var(--prose-code);
+  background: var(--prose-code-bg);
+  padding: 0.15em 0.35em;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+}
+
+/* --- Code blocks ------------------------------------------------- */
+.dui-prose pre {
+  background: var(--prose-pre-bg);
+  border: var(--border-width-thin) solid var(--prose-pre-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+  overflow-x: auto;
+  font-size: var(--text-sm);
+  line-height: var(--line-height-relaxed);
+  margin-block: 1em 0;
+}
+
+.dui-prose pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+}
+
+/* --- Horizontal rule --------------------------------------------- */
+.dui-prose hr {
+  border: none;
+  border-top: var(--border-width-thin) solid var(--prose-hr);
+  margin-block: 2em;
+}
+
+/* --- Tables ------------------------------------------------------ */
+.dui-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+  margin-block: 1em 0;
+}
+
+.dui-prose th {
+  border-bottom: var(--border-width-medium) solid var(--prose-th-border);
+  text-align: start;
+  padding: var(--space-2) var(--space-3);
+  font-weight: var(--font-weight-semibold);
+}
+
+.dui-prose td {
+  border-bottom: var(--border-width-thin) solid var(--prose-td-border);
+  padding: var(--space-2) var(--space-3);
+}
+
+.dui-prose caption {
+  color: var(--prose-caption);
+  font-size: var(--text-sm);
+  margin-block-end: var(--space-2);
+}
+
+/* --- Keyboard input ---------------------------------------------- */
+.dui-prose kbd {
+  background: var(--prose-kbd-bg);
+  border: var(--border-width-thin) solid var(--prose-kbd-border);
+  border-radius: var(--radius-sm);
+  padding: 0.1em 0.35em;
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+}
+
+/* --- Images and figures ------------------------------------------ */
+.dui-prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+}
+
+.dui-prose figure {
+  margin-inline: 0;
+  margin-block: 1.5em;
+}
+
+.dui-prose figcaption {
+  color: var(--prose-caption);
+  font-size: var(--text-sm);
+  margin-block-start: var(--space-2);
+}
+
+/* --- Details / summary ------------------------------------------- */
+.dui-prose details {
+  margin-block: 1em;
+}
+
+.dui-prose summary {
+  cursor: pointer;
+  font-weight: var(--font-weight-medium);
+}

package/tokens/prose.d.ts

@@ -0,0 +1,2 @@
+declare const proseSheet: CSSStyleSheet;
+export { proseSheet };

package/tokens/prose.js

@@ -0,0 +1,4 @@
+const proseCSS = "/* =================================================================\n * DUI Prose — Rich-text / markdown content styles\n * =================================================================\n * Apply class=\"dui-prose\" to any container with rendered HTML\n * (markdown output, CMS content, help text, etc.).\n *\n * All values reference --prose-* tokens (customizable) and existing\n * DUI design tokens. No hardcoded colors or spacing.\n * ================================================================= */\n\n/* --- Root -------------------------------------------------------- */\n.dui-prose {\n  color: var(--prose-body);\n  font-size: var(--text-base);\n  line-height: var(--line-height-relaxed);\n  max-width: 65ch;\n}\n\n.dui-prose > :first-child {\n  margin-block-start: 0;\n}\n\n.dui-prose > :last-child {\n  margin-block-end: 0;\n}\n\n/* --- Headings ---------------------------------------------------- */\n.dui-prose h1 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--text-4xl);\n  line-height: var(--text-4xl--line-height);\n  letter-spacing: var(--letter-spacing-tightest);\n  margin-block: 0 var(--space-4);\n}\n\n.dui-prose h2 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--text-3xl);\n  line-height: var(--text-3xl--line-height);\n  letter-spacing: var(--letter-spacing-tighter);\n  margin-block: var(--space-10) var(--space-3);\n}\n\n.dui-prose h3 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--text-2xl);\n  line-height: var(--text-2xl--line-height);\n  letter-spacing: var(--letter-spacing-tight);\n  margin-block: var(--space-8) var(--space-3);\n}\n\n.dui-prose h4 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--text-xl);\n  line-height: var(--text-xl--line-height);\n  letter-spacing: var(--letter-spacing-normal);\n  margin-block: var(--space-6) var(--space-2);\n}\n\n.dui-prose h5 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--text-lg);\n  line-height: var(--text-lg--line-height);\n  letter-spacing: var(--letter-spacing-normal);\n  margin-block: var(--space-6) var(--space-2);\n}\n\n.dui-prose h6 {\n  color: var(--prose-headings);\n  font-weight: var(--font-weight-semibold);\n  font-size: var(--text-base);\n  line-height: var(--text-base--line-height);\n  letter-spacing: var(--letter-spacing-normal);\n  margin-block: var(--space-6) var(--space-2);\n}\n\n/* --- Paragraphs -------------------------------------------------- */\n.dui-prose p {\n  color: var(--prose-body);\n  margin-block: 1em 0;\n}\n\n/* --- Inline text ------------------------------------------------- */\n.dui-prose strong,\n.dui-prose b {\n  color: var(--prose-bold);\n  font-weight: var(--font-weight-semibold);\n}\n\n.dui-prose em,\n.dui-prose i {\n  font-style: italic;\n}\n\n.dui-prose small {\n  font-size: 0.875em;\n  color: var(--prose-caption);\n}\n\n/* --- Links ------------------------------------------------------- */\n.dui-prose a {\n  color: var(--prose-links);\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n\n.dui-prose a:hover {\n  color: var(--prose-links-hover);\n}\n\n/* --- Lists ------------------------------------------------------- */\n.dui-prose ul {\n  list-style-type: disc;\n  padding-inline-start: var(--space-6);\n  margin-block: 1em 0;\n}\n\n.dui-prose ol {\n  list-style-type: decimal;\n  padding-inline-start: var(--space-6);\n  margin-block: 1em 0;\n}\n\n.dui-prose li {\n  margin-block: var(--space-1);\n}\n\n.dui-prose li > ul,\n.dui-prose li > ol {\n  margin-block: var(--space-0_5);\n}\n\n.dui-prose li > p {\n  margin-block: var(--space-1);\n}\n\n/* --- Blockquote -------------------------------------------------- */\n.dui-prose blockquote {\n  border-inline-start: 3px solid var(--prose-blockquote-border);\n  color: var(--prose-blockquote-text);\n  padding-inline-start: var(--space-4);\n  font-style: italic;\n  margin-inline: 0;\n  margin-block: 1em 0;\n}\n\n/* --- Inline code ------------------------------------------------- */\n.dui-prose code {\n  color: var(--prose-code);\n  background: var(--prose-code-bg);\n  padding: 0.15em 0.35em;\n  border-radius: var(--radius-sm);\n  font-family: var(--font-mono);\n  font-size: 0.875em;\n}\n\n/* --- Code blocks ------------------------------------------------- */\n.dui-prose pre {\n  background: var(--prose-pre-bg);\n  border: var(--border-width-thin) solid var(--prose-pre-border);\n  border-radius: var(--radius-md);\n  padding: var(--space-4);\n  overflow-x: auto;\n  font-size: var(--text-sm);\n  line-height: var(--line-height-relaxed);\n  margin-block: 1em 0;\n}\n\n.dui-prose pre code {\n  background: none;\n  padding: 0;\n  border-radius: 0;\n  font-size: inherit;\n}\n\n/* --- Horizontal rule --------------------------------------------- */\n.dui-prose hr {\n  border: none;\n  border-top: var(--border-width-thin) solid var(--prose-hr);\n  margin-block: 2em;\n}\n\n/* --- Tables ------------------------------------------------------ */\n.dui-prose table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--text-sm);\n  margin-block: 1em 0;\n}\n\n.dui-prose th {\n  border-bottom: var(--border-width-medium) solid var(--prose-th-border);\n  text-align: start;\n  padding: var(--space-2) var(--space-3);\n  font-weight: var(--font-weight-semibold);\n}\n\n.dui-prose td {\n  border-bottom: var(--border-width-thin) solid var(--prose-td-border);\n  padding: var(--space-2) var(--space-3);\n}\n\n.dui-prose caption {\n  color: var(--prose-caption);\n  font-size: var(--text-sm);\n  margin-block-end: var(--space-2);\n}\n\n/* --- Keyboard input ---------------------------------------------- */\n.dui-prose kbd {\n  background: var(--prose-kbd-bg);\n  border: var(--border-width-thin) solid var(--prose-kbd-border);\n  border-radius: var(--radius-sm);\n  padding: 0.1em 0.35em;\n  font-family: var(--font-mono);\n  font-size: 0.875em;\n}\n\n/* --- Images and figures ------------------------------------------ */\n.dui-prose img {\n  max-width: 100%;\n  height: auto;\n  border-radius: var(--radius-md);\n}\n\n.dui-prose figure {\n  margin-inline: 0;\n  margin-block: 1.5em;\n}\n\n.dui-prose figcaption {\n  color: var(--prose-caption);\n  font-size: var(--text-sm);\n  margin-block-start: var(--space-2);\n}\n\n/* --- Details / summary ------------------------------------------- */\n.dui-prose details {\n  margin-block: 1em;\n}\n\n.dui-prose summary {\n  cursor: pointer;\n  font-weight: var(--font-weight-medium);\n}\n";
+const proseSheet = new CSSStyleSheet();
+proseSheet.replaceSync(proseCSS);
+export { proseSheet };

package/tokens/tokens-raw.d.ts

@@ -0,0 +1,2 @@
+import tokensCSS from "./tokens.css";
+export { tokensCSS };

package/tokens/tokens-raw.js

@@ -0,0 +1,2 @@
+const tokensCSS = "/* =================================================================\n * DUI Design Tokens\n * =================================================================\n * Combined token system: spacing, typography, borders, elevation,\n * motion, colors, sizing, and focus.\n *\n * Tokens are declared on :root so they cascade through the entire\n * document, including into shadow DOM via CSS custom property\n * inheritance.\n *\n * Dark mode: apply data-theme=\"dark\" on <html> to switch palettes.\n * ================================================================= */\n\n:root {\n  /* -----------------------------------------------------------\n   * Spacing (Tailwind base-4 system)\n   * ----------------------------------------------------------- */\n  --space-0: 0;\n  --space-px: 1px;\n  --space-0_5: 0.125rem; /* 2px */\n  --space-1: 0.25rem; /* 4px */\n  --space-1_5: 0.375rem; /* 6px */\n  --space-2: 0.5rem; /* 8px */\n  --space-2_5: 0.625rem; /* 10px */\n  --space-3: 0.75rem; /* 12px */\n  --space-3_5: 0.875rem; /* 14px */\n  --space-4: 1rem; /* 16px */\n  --space-4_5: 1.125rem; /* 18px */\n  --space-5: 1.25rem; /* 20px */\n  --space-6: 1.5rem; /* 24px */\n  --space-7: 1.75rem; /* 28px */\n  --space-8: 2rem; /* 32px */\n  --space-9: 2.25rem; /* 36px */\n  --space-10: 2.5rem; /* 40px */\n  --space-11: 2.75rem; /* 44px */\n  --space-12: 3rem; /* 48px */\n  --space-14: 3.5rem; /* 56px */\n  --space-16: 4rem; /* 64px */\n  --space-20: 5rem; /* 80px */\n  --space-24: 6rem; /* 96px */\n  --space-28: 7rem; /* 112px */\n  --space-32: 8rem; /* 128px */\n  --space-36: 9rem; /* 144px */\n  --space-40: 10rem; /* 160px */\n  --space-44: 11rem; /* 176px */\n  --space-48: 12rem; /* 192px */\n  --space-52: 13rem; /* 208px */\n  --space-56: 14rem; /* 224px */\n  --space-60: 15rem; /* 240px */\n  --space-64: 16rem; /* 256px */\n  --space-72: 18rem; /* 288px */\n  --space-80: 20rem; /* 320px */\n  --space-96: 24rem; /* 384px */\n\n  /* -----------------------------------------------------------\n   * Typography\n   * ----------------------------------------------------------- */\n  --font-sans:\n    'Inter', system-ui, -apple-system, sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n  --font-mono:\n    'JetBrains Mono', ui-monospace, SFMono-Regular, \"SF Mono\", Menlo,\n    Consolas, \"Liberation Mono\", monospace;\n\n  /* -----------------------------------------------------------\n   * Type scale\n   * -----------------------------------------------------------\n   * Each size is paired with a line-height variable. The\n   * line-height is a unitless ratio; multiplied by the size,\n   * it yields the target leading (shown in comments).\n   * ----------------------------------------------------------- */\n\n  --text-2xs: 0.625rem;                              /* 10px */\n  --text-2xs--line-height: calc(0.75 / 0.625);       /* 12px */\n\n  --text-xs: 0.75rem;                                /* 12px */\n  --text-xs--line-height: calc(1 / 0.75);            /* 16px */\n\n  --text-sm: 0.875rem;                               /* 14px */\n  --text-sm--line-height: calc(1.25 / 0.875);        /* 20px */\n\n  --text-base: 1rem;                                 /* 16px */\n  --text-base--line-height: calc(1.5 / 1);           /* 24px */\n\n  --text-lg: 1.125rem;                               /* 18px */\n  --text-lg--line-height: calc(1.75 / 1.125);        /* 28px */\n\n  --text-xl: 1.25rem;                                /* 20px */\n  --text-xl--line-height: calc(1.75 / 1.25);         /* 28px */\n\n  --text-2xl: 1.5rem;                                /* 24px */\n  --text-2xl--line-height: calc(2 / 1.5);            /* 32px */\n\n  --text-3xl: 1.875rem;                              /* 30px */\n  --text-3xl--line-height: calc(2.25 / 1.875);       /* 36px */\n\n  --text-4xl: 2.25rem;                               /* 36px */\n  --text-4xl--line-height: calc(2.5 / 2.25);         /* 40px */\n\n  --text-5xl: 3rem;                                  /* 48px */\n  --text-5xl--line-height: 1;\n\n  --text-6xl: 3.75rem;                               /* 60px */\n  --text-6xl--line-height: 1;\n\n  --text-7xl: 4.5rem;                                /* 72px */\n  --text-7xl--line-height: 1;\n\n  --text-8xl: 6rem;                                  /* 96px */\n  --text-8xl--line-height: 1;\n\n  --text-9xl: 8rem;                                  /* 128px */\n  --text-9xl--line-height: 1;\n\n  --letter-spacing-tightest: -0.02em;\n  --letter-spacing-tighter: -0.015em;\n  --letter-spacing-tight: -0.01em;\n  --letter-spacing-normal: 0em;\n  --letter-spacing-wide: 0.006em;\n  --letter-spacing-wider: 0.012em;\n  --letter-spacing-widest: 0.018em;\n\n  --font-weight-regular: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n\n  --line-height-none: 1;\n  --line-height-tight: 1.25;\n  --line-height-snug: 1.375;\n  --line-height-normal: 1.5;\n  --line-height-relaxed: 1.625;\n\n  /* -----------------------------------------------------------\n   * Borders\n   * ----------------------------------------------------------- */\n  --radius-none: 0;\n  --radius-xs: 0.125rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.5rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --radius-2xl: 2rem;\n  --radius-full: 9999px;\n\n  --border-width-hairline: 0.5px;\n  --border-width-thin: 1px;\n  --border-width-medium: 2px;\n  --border-width-thick: 4px;\n\n  /* -----------------------------------------------------------\n   * Elevation\n   * ----------------------------------------------------------- */\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --shadow-none: 0 0 0 0 transparent;\n\n  --z-base: 0;\n  --z-dropdown: 700;\n  --z-sticky: 800;\n  --z-overlay: 900;\n  --z-modal: 1000;\n  --z-popover: 1100;\n  --z-toast: 1200;\n  --z-tooltip: 1300;\n\n  /* -----------------------------------------------------------\n   * Motion\n   * ----------------------------------------------------------- */\n  --duration-instant: 50ms;\n  --duration-fastest: 75ms;\n  --duration-faster: 100ms;\n  --duration-fast: 150ms;\n  --duration-normal: 250ms;\n  --duration-slow: 400ms;\n  --duration-slower: 700ms;\n\n  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);\n  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);\n  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);\n  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);\n  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);\n  --ease-in-1: cubic-bezier(0.25, 0, 1, 1);\n  --ease-in-2: cubic-bezier(0.5, 0, 1, 1);\n  --ease-in-3: cubic-bezier(0.7, 0, 1, 1);\n  --ease-in-4: cubic-bezier(0.9, 0, 1, 1);\n  --ease-in-5: cubic-bezier(1, 0, 1, 1);\n  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);\n  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);\n  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);\n  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);\n  --ease-out-5: cubic-bezier(0, 0, 0, 1);\n  --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);\n  --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);\n  --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);\n  --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);\n  --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);\n\n  --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);\n  --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);\n  --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);\n  --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);\n  --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);\n  --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);\n  --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);\n  --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);\n  --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);\n  --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);\n  --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);\n  --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);\n  --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);\n  --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);\n  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);\n  --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);\n  --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);\n  --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);\n  --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);\n\n  /* -----------------------------------------------------------\n   * Filters (presets for filter / backdrop-filter tokens)\n   * ----------------------------------------------------------- */\n  --filter-none: none;\n  --filter-blur-sm: blur(4px);\n  --filter-blur-md: blur(8px);\n  --filter-blur-lg: blur(16px);\n  --filter-blur-xl: blur(24px);\n  --filter-brightness-dim: brightness(0.8);\n  --filter-brightness-bright: brightness(1.15);\n  --filter-saturate-muted: saturate(0.5);\n  --filter-saturate-vivid: saturate(1.5);\n  --filter-grayscale: grayscale(1);\n\n  /* -----------------------------------------------------------\n   * Clip Paths (shape presets)\n   * ----------------------------------------------------------- */\n  --clip-none: none;\n  --clip-circle: circle(50%);\n  --clip-squircle: inset(0 round 30%);\n  --clip-hexagon: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);\n  --clip-octagon: polygon(29.3% 0%, 70.7% 0%, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0% 70.7%, 0% 29.3%);\n  --clip-chevron-right: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%);\n  --clip-bevel: polygon(8% 0%, 92% 0%, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0% 92%, 0% 8%);\n\n  /* -----------------------------------------------------------\n   * Component Sizing\n   * ----------------------------------------------------------- */\n  --component-height-xxs: 1.25rem; /* 20px */\n  --component-height-xs: 1.5rem; /* 24px */\n  --component-height-sm: 1.75rem; /* 28px */\n  --component-height-md: 2rem; /* 32px */\n  --component-height-lg: 2.25rem; /* 36px */\n  --component-height-xl: 2.5rem; /* 40px */\n\n  /* -----------------------------------------------------------\n   * Focus Ring\n   * ----------------------------------------------------------- */\n  --focus-ring-color: color-mix(in oklch, var(--accent), transparent 50%);\n  --focus-ring-width: 3px;\n  --focus-ring-offset: 0px;\n  --focus-ring-duration: var(--duration-fast);\n  --focus-ring-easing: var(--ease-out-3);\n\n  /* -----------------------------------------------------------\n   * Colors: Brand (theme-independent)\n   * ----------------------------------------------------------- */\n  --brand: oklch(0.728 0.1304 73.28);\n  --brand-foreground: oklch(1 0.02 73.28);\n}\n\n/* =================================================================\n * COLOR SYSTEM\n * =================================================================\n * Built on two principles:\n *  1. Operations on a base — colors are relationships, not fixed values.\n *  2. Fewer primitives, more derivation — 4 primitives, everything\n *     else computed via oklch(from ...) and color-mix().\n *\n * Layer 1: Primitives (only values a theme author picks)\n * Layer 2: Derived tokens (computed from primitives, never per-theme)\n * Layer 3: Interaction states (component-level, not tokens)\n * ================================================================= */\n\n/* -----------------------------------------------------------------\n * LIGHT THEME (default)\n * ----------------------------------------------------------------- */\n:root:not([data-theme=\"dark\"]) {\n  /* --- Layer 1: Primitives --- */\n  --background:  oklch(0.97 0 0);\n  --foreground:  oklch(0.15 0 0);\n  --accent:      oklch(0.55 0.25 260);\n  --destructive: oklch(0.55 0.22 25);\n}\n\n/* -----------------------------------------------------------------\n * DARK THEME\n * ----------------------------------------------------------------- */\n:root[data-theme=\"dark\"] {\n  /* --- Layer 1: Primitives --- */\n  --background:  oklch(0.15 0.015 260);\n  --foreground:  oklch(0.93 0 0);\n  --accent:      oklch(0.75 0.18 260);\n  --destructive: oklch(0.70 0.18 25);\n}\n\n/* -----------------------------------------------------------------\n * Layer 2: Derived tokens (computed from primitives)\n * Defined once — same rules for light and dark.\n * ----------------------------------------------------------------- */\n:root {\n  /* Surfaces — lightness offsets from background.\n     Positive = elevated (brighter). Negative = sunken (darker). */\n  --sunken-2:    oklch(from var(--background) calc(l - 0.03) c h);\n  --sunken-1:    oklch(from var(--background) calc(l - 0.01) c h);\n  --surface-1: oklch(from var(--background) calc(l + 0.02) c h);\n  --surface-2: oklch(from var(--background) calc(l + 0.05) c h);\n  --surface-3: oklch(from var(--background) calc(l + 0.09) c h);\n\n  /* Borders — foreground at reduced alpha.\n     Semi-transparent so they adapt to any surface. */\n  --border:        oklch(from var(--foreground) l c h / 0.15);\n  --border-strong:  oklch(from var(--foreground) l c h / 0.25);\n\n  /* Text tiers — foreground at reduced alpha.\n     Semi-transparent so they adapt to any surface. */\n  --text-1: oklch(from var(--foreground) l c h / 0.90);\n  --text-2: oklch(from var(--foreground) l c h / 0.63);\n  --text-3: oklch(from var(--foreground) l c h / 0.45);\n\n  /* Accent surfaces — for badges, pills, tinted cards */\n  --accent-subtle:      oklch(from var(--accent) l c h / 0.10);\n  --accent-text:        oklch(from var(--accent) calc(l * 1.1) calc(c * 0.8) h);\n\n  /* Destructive surfaces */\n  --destructive-subtle: oklch(from var(--destructive) l c h / 0.10);\n  --destructive-text:   var(--destructive);\n\n  /* Utility — scrim overlay for modals/dialogs */\n  --scrim: oklch(from var(--foreground) l c h / 0.35);\n\n  /* Meter / progress bar defaults */\n  --meter-track: var(--surface-1);\n  --meter-fill: var(--accent);\n\n  /* Chart palette (theme-independent) */\n  --chart-1: oklch(0.58 0.17 35);\n  --chart-2: oklch(0.55 0.13 185);\n  --chart-3: oklch(0.52 0.14 265);\n  --chart-4: oklch(0.62 0.15 85);\n  --chart-5: oklch(0.55 0.16 310);\n\n  /* -----------------------------------------------------------\n   * Prose (rich-text / markdown content)\n   * ----------------------------------------------------------- */\n  --prose-body: var(--text-1);\n  --prose-headings: var(--foreground);\n  --prose-lead: var(--text-2);\n  --prose-links: var(--accent);\n  --prose-links-hover: var(--accent-text);\n  --prose-bold: var(--foreground);\n  --prose-code: var(--foreground);\n  --prose-code-bg: var(--surface-1);\n  --prose-pre-bg: var(--surface-1);\n  --prose-pre-border: var(--border);\n  --prose-blockquote-border: var(--accent);\n  --prose-blockquote-text: var(--text-2);\n  --prose-hr: var(--border);\n  --prose-th-border: var(--border-strong);\n  --prose-td-border: var(--border);\n  --prose-caption: var(--text-3);\n  --prose-kbd-bg: var(--surface-2);\n  --prose-kbd-border: var(--border-strong);\n}\n\n/* =================================================================\n * Base document styles\n * ================================================================= */\n:root {\n  color: var(--text-1);\n  font-family: var(--font-sans);\n  line-height: var(--line-height-normal);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* =================================================================\n * Heading defaults\n * ================================================================= */\nh1 { font-size: var(--text-4xl);  line-height: var(--text-4xl--line-height);  }  /* 36 / 40 */\nh2 { font-size: var(--text-3xl);  line-height: var(--text-3xl--line-height);  }  /* 30 / 36 */\nh3 { font-size: var(--text-2xl);  line-height: var(--text-2xl--line-height);  }  /* 24 / 32 */\nh4 { font-size: var(--text-xl);   line-height: var(--text-xl--line-height);   }  /* 20 / 28 */\nh5 { font-size: var(--text-lg);   line-height: var(--text-lg--line-height);   }  /* 18 / 28 */\nh6 { font-size: var(--text-base); line-height: var(--text-base--line-height); }  /* 16 / 24 */\n\n/* =================================================================\n * Baseline grid trim — prose elements anchor visible glyph edges,\n * not CSS line-box edges, to the 4px grid.\n * ================================================================= */\nh1, h2, h3, h4, h5, h6,\np, li, blockquote, dt, dd {\n  text-box: trim-both cap alphabetic;\n}\n";
+export { tokensCSS };