@flocon-ai/react 0.0.2 → 0.0.4

package/README.md

@@ -119,7 +119,7 @@ On the Free plan, `llms.txt` ends with a "Made with [Flocon AI](https://flocon-a
 The CSS is added by `<FloconPage />`. Nothing to import.
 
 - **Your website uses shadcn?** The page uses your colors, radius, font and dark mode. Nothing to do.
-- **No shadcn?** The page uses the Flocon colors. It turns dark only if your website has a dark mode: `color-scheme: dark` (or `light dark` with a dark browser) on your page, or a `.dark` class (Tailwind).
+- **No shadcn?** `muted`, `border`, `muted-foreground` and `primary` are mixed from your text color. They follow any light or dark setup (for example `create-next-app`). No `color-scheme` needed.
 - Old shadcn (Tailwind v3, colors like `222 47% 11%`) is not supported yet: set the `--flocon-*` variables yourself.
 - Override any `--flocon-*` variable on `.flocon-page`: `--flocon-primary`, `--flocon-background`, `--flocon-foreground`, `--flocon-card`, `--flocon-muted`, `--flocon-muted-foreground`, `--flocon-border`, `--flocon-radius`, `--flocon-font`.
 - All the CSS is in `@layer flocon`: your unlayered CSS on the class names wins.
@@ -136,6 +136,10 @@ The CSS is added by `<FloconPage />`. Nothing to import.
 | `createFloconClient` | Typed Packages API client (server only) |
 | types | `PageEntry`, `UrlOption`, `TokenOption`, `FloconPageData`, `paths`, `components` |
 
+## Full example
+
+A tiny working website: [github.com/flocon-ai/demo/tree/main/react](https://github.com/flocon-ai/demo/tree/main/react)
+
 ## Docs
 
 [flocon-ai.com/docs](https://flocon-ai.com/docs)

package/dist/index.cjs

@@ -596,8 +596,7 @@ function renderInline(text, key = "") {
 
 // src/styles.ts
 var FLOCON_CSS = `@layer flocon{
-.dark .flocon-page{color-scheme:dark}
-.flocon-page{--flocon-primary:var(--primary,light-dark(#1E6EBE,#6CB2F0));--flocon-background:var(--background,transparent);--flocon-foreground:var(--foreground,light-dark(#121A24,#E8EEF4));--flocon-card:var(--card,transparent);--flocon-muted:var(--muted,light-dark(#F3F6F9,#151E28));--flocon-muted-foreground:var(--muted-foreground,light-dark(#566373,#98A6B5));--flocon-border:var(--border,light-dark(#E4E9EF,#212C38));--flocon-radius:var(--radius,14px);--flocon-font:var(--font-sans);max-width:48rem;margin:0 auto;padding:2rem 1rem;background:var(--flocon-background);color:var(--flocon-foreground);font-family:var(--flocon-font,inherit);line-height:1.7;overflow-wrap:anywhere}
+.flocon-page{--flocon-primary:var(--primary,color-mix(in oklab,#1E6EBE 75%,var(--flocon-foreground)));--flocon-background:var(--background,transparent);--flocon-foreground:var(--foreground,currentColor);--flocon-card:var(--card,transparent);--flocon-muted:var(--muted,color-mix(in oklab,var(--flocon-foreground) 7%,transparent));--flocon-muted-foreground:var(--muted-foreground,color-mix(in oklab,var(--flocon-foreground) 65%,transparent));--flocon-border:var(--border,color-mix(in oklab,var(--flocon-foreground) 15%,transparent));--flocon-radius:var(--radius,14px);--flocon-font:var(--font-sans);max-width:48rem;margin:0 auto;padding:2rem 1rem;background:var(--flocon-background);color:var(--flocon-foreground);font-family:var(--flocon-font,inherit);line-height:1.7;overflow-wrap:anywhere}
 .flocon-page h1{font-size:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);line-height:1.2;margin:0 0 1.5rem;font-weight:700}
 .flocon-page h2{font-size:clamp(1.25rem,1.1rem + .7vw,1.5rem);line-height:1.3;margin:2rem 0 .75rem;font-weight:600}
 .flocon-page h3{font-size:clamp(1.1rem,1rem + .4vw,1.2rem);line-height:1.4;margin:1.5rem 0 .5rem;font-weight:600}

package/dist/index.js

@@ -564,8 +564,7 @@ function renderInline(text, key = "") {
 
 // src/styles.ts
 var FLOCON_CSS = `@layer flocon{
-.dark .flocon-page{color-scheme:dark}
-.flocon-page{--flocon-primary:var(--primary,light-dark(#1E6EBE,#6CB2F0));--flocon-background:var(--background,transparent);--flocon-foreground:var(--foreground,light-dark(#121A24,#E8EEF4));--flocon-card:var(--card,transparent);--flocon-muted:var(--muted,light-dark(#F3F6F9,#151E28));--flocon-muted-foreground:var(--muted-foreground,light-dark(#566373,#98A6B5));--flocon-border:var(--border,light-dark(#E4E9EF,#212C38));--flocon-radius:var(--radius,14px);--flocon-font:var(--font-sans);max-width:48rem;margin:0 auto;padding:2rem 1rem;background:var(--flocon-background);color:var(--flocon-foreground);font-family:var(--flocon-font,inherit);line-height:1.7;overflow-wrap:anywhere}
+.flocon-page{--flocon-primary:var(--primary,color-mix(in oklab,#1E6EBE 75%,var(--flocon-foreground)));--flocon-background:var(--background,transparent);--flocon-foreground:var(--foreground,currentColor);--flocon-card:var(--card,transparent);--flocon-muted:var(--muted,color-mix(in oklab,var(--flocon-foreground) 7%,transparent));--flocon-muted-foreground:var(--muted-foreground,color-mix(in oklab,var(--flocon-foreground) 65%,transparent));--flocon-border:var(--border,color-mix(in oklab,var(--flocon-foreground) 15%,transparent));--flocon-radius:var(--radius,14px);--flocon-font:var(--font-sans);max-width:48rem;margin:0 auto;padding:2rem 1rem;background:var(--flocon-background);color:var(--flocon-foreground);font-family:var(--flocon-font,inherit);line-height:1.7;overflow-wrap:anywhere}
 .flocon-page h1{font-size:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);line-height:1.2;margin:0 0 1.5rem;font-weight:700}
 .flocon-page h2{font-size:clamp(1.25rem,1.1rem + .7vw,1.5rem);line-height:1.3;margin:2rem 0 .75rem;font-weight:600}
 .flocon-page h3{font-size:clamp(1.1rem,1rem + .4vw,1.2rem);line-height:1.4;margin:1.5rem 0 .5rem;font-weight:600}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flocon-ai/react",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Flocon AI pages for server-rendered React",
   "license": "UNLICENSED",
   "type": "module",