@ikonai/sdk-react-ui 1.2.0 → 1.3.0

package/theme/ikon-tokens.css

@@ -0,0 +1,132 @@
+/* Ikon design tokens.
+
+   Light is the default, dark follows the browser's `prefers-color-scheme`, and `data-theme` on the
+   root element overrides the preference in either direction.
+
+   Override any of these from your own CSS — every rule here sits in a `@layer ikon` cascade layer,
+   and unlayered rules always win. */
+@layer ikon {
+  :root {
+    color-scheme: light dark;
+
+    /* Inter and Poppins ship with the SDK. The fallbacks matter: these tokens are also used by
+       standalone documents that load no webfont at all. */
+    --ikon-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    --ikon-font-display: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+    --ikon-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+    --ikon-radius-base: 0.25rem;
+    --ikon-radius-sm: calc(var(--ikon-radius-base) * 0.667);
+    --ikon-radius-md: var(--ikon-radius-base);
+    --ikon-radius-lg: calc(var(--ikon-radius-base) * 1.5);
+    --ikon-radius-xl: calc(var(--ikon-radius-base) * 2);
+    --ikon-radius-2xl: calc(var(--ikon-radius-base) * 3);
+    --ikon-radius-full: 9999px;
+
+    --ikon-brand-300: #ff5ba0;
+    --ikon-brand-400: #ff3d8f;
+    --ikon-brand-500: #f5277f;
+    --ikon-brand-600: #db176e;
+    --ikon-brand-700: #b3105a;
+
+    --ikon-bg-background: #fcfcfc;
+    --ikon-bg-card: #ffffff;
+    --ikon-bg-subtle: #f4f4f5;
+    --ikon-bg-hover: #f4f4f5;
+    --ikon-bg-solid: #161618;
+    --ikon-bg-solid-hover: #38383c;
+    --ikon-text-on-solid: #ffffff;
+
+    --ikon-text-primary: #161618;
+    --ikon-text-secondary: #4c4c51;
+    --ikon-text-tertiary: #6e6e74;
+    --ikon-text-quaternary: #9a9aa0;
+
+    --ikon-border-primary: #d4d4d7;
+    --ikon-border-secondary: #e8e8ea;
+
+    --ikon-status-neutral: #9a9aa0;
+    --ikon-status-error: #d92c20;
+    --ikon-status-warning: #db6803;
+    --ikon-status-success: #0a7d76;
+
+    /* Tinted fills for the in-app message banners. Kept faint so a banner reads as information
+       rather than as an alarm. */
+    --ikon-error-surface: #fef2f1;
+    --ikon-error-border: #fecdc9;
+    --ikon-error-text: #b32218;
+
+    /* The dot field drawn by .ikon-surface. One hairline value, faded by a radial mask. */
+    --ikon-grid-dot: rgba(22, 22, 24, 0.09);
+
+    --ikon-overlay-scrim: rgba(252, 252, 252, 0.72);
+    --ikon-focus-ring: var(--ikon-brand-500);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+      --ikon-bg-background: #0b0b0d;
+      --ikon-bg-card: #161618;
+      --ikon-bg-subtle: #1c1c1f;
+      --ikon-bg-hover: #242427;
+      --ikon-bg-solid: #f4f4f5;
+      --ikon-bg-solid-hover: #ffffff;
+      --ikon-text-on-solid: #0b0b0d;
+
+      --ikon-text-primary: #f7f7f7;
+      --ikon-text-secondary: #d3d5d9;
+      --ikon-text-tertiary: #aeb2b8;
+      --ikon-text-quaternary: #82868d;
+
+      --ikon-border-primary: #38383c;
+      --ikon-border-secondary: #2f2f33;
+
+      --ikon-status-neutral: #6e6e74;
+      --ikon-status-error: #f97066;
+      --ikon-status-warning: #fcb022;
+      --ikon-status-success: #38d3bd;
+
+      --ikon-error-surface: #2a1614;
+      --ikon-error-border: #5b241e;
+      --ikon-error-text: #fca19b;
+
+      --ikon-grid-dot: rgba(255, 255, 255, 0.16);
+
+      --ikon-overlay-scrim: rgba(11, 11, 13, 0.72);
+      --ikon-focus-ring: var(--ikon-brand-400);
+    }
+  }
+
+  /* An explicit data-theme wins over the OS preference in both directions. */
+  :root[data-theme='dark'] {
+    --ikon-bg-background: #0b0b0d;
+    --ikon-bg-card: #161618;
+    --ikon-bg-subtle: #1c1c1f;
+    --ikon-bg-hover: #242427;
+    --ikon-bg-solid: #f4f4f5;
+    --ikon-bg-solid-hover: #ffffff;
+    --ikon-text-on-solid: #0b0b0d;
+
+    --ikon-text-primary: #f7f7f7;
+    --ikon-text-secondary: #d3d5d9;
+    --ikon-text-tertiary: #aeb2b8;
+    --ikon-text-quaternary: #82868d;
+
+    --ikon-border-primary: #38383c;
+    --ikon-border-secondary: #2f2f33;
+
+    --ikon-status-neutral: #6e6e74;
+    --ikon-status-error: #f97066;
+    --ikon-status-warning: #fcb022;
+    --ikon-status-success: #38d3bd;
+
+    --ikon-error-surface: #2a1614;
+    --ikon-error-border: #5b241e;
+    --ikon-error-text: #fca19b;
+
+    --ikon-grid-dot: rgba(255, 255, 255, 0.16);
+
+    --ikon-overlay-scrim: rgba(11, 11, 13, 0.72);
+    --ikon-focus-ring: var(--ikon-brand-400);
+  }
+}

package/hooks/use-lazy-font.d.ts

@@ -1,18 +0,0 @@
-/**
- * Hook for lazy loading fonts. The font is only loaded when the returned function is called.
- * Useful for loading fonts only when certain UI elements (like error overlays) are displayed.
- *
- * @param fontUrl - The URL of the font stylesheet (e.g., Google Fonts URL)
- * @returns A function that loads the font when called. Safe to call multiple times - font only loads once.
- *
- * @example
- * ```tsx
- * const loadFont = useLazyFont('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');
- *
- * function ErrorOverlay() {
- *   loadFont(); // Font loads only when this component renders
- *   return <div>Error occurred</div>;
- * }
- * ```
- */
-export declare function useLazyFont(fontUrl: string): () => void;