@esuiss/ui 0.5.8 → 0.6.0

package/README.md

@@ -47,8 +47,9 @@ export function Example() {
 2. Adds the `@/*` import alias to `tsconfig.json` if it is missing.
 3. Installs and wires up Tailwind CSS if needed (`postcss.config.mjs` for Next.js, `vite.config.ts` for Vite).
 4. Writes the theme stylesheet to `app/globals.css` (Next.js) or `src/index.css` (Vite). It asks before replacing a stylesheet that already has content.
-5. Installs [`@esuiss/tailwind`](https://www.npmjs.com/package/@esuiss/tailwind), which provides the variants, animations, and utilities the components rely on.
-6. Adds the `button` component.
+5. Sets up the Inter font: with `next/font/google` in the root layout (Next.js), or with `@fontsource-variable/inter` imported from the stylesheet (Vite).
+6. Installs [`@esuiss/tailwind`](https://www.npmjs.com/package/@esuiss/tailwind), which provides the variants, animations, and utilities the components rely on.
+7. Adds the `button` component.
 
 ## Commands
 
@@ -96,28 +97,42 @@ Your stylesheet holds the whole theme:
 ```css
 @import "tailwindcss";
 @import "@esuiss/tailwind";
+@import "@fontsource-variable/inter";
 
 :root {
-  --background: oklch(1 0 0);
-  --primary: oklch(0.6321 0.2018 254.09);
-  --radius: 0.75rem;
+  --surface: oklch(1 0 0);
+  --label: oklch(0.2316 0.0038 286.09);
+  --accent: oklch(0.5629 0.1933 256.16);
+  --radius: 0.625rem;
 }
 
 .dark {
-  --background: oklch(0 0 0);
-  --primary: oklch(0.651471 0.191972 251.4696);
+  --surface: oklch(0 0 0);
+  --label: oklch(0.9707 0.0026 286.29);
+  --accent: oklch(0.5629 0.1933 256.16);
 }
 
 @theme inline {
-  --font-sans: system-ui, sans-serif;
-  --color-background: var(--background);
-  --color-primary: var(--primary);
+  --font-sans: "Inter Variable", sans-serif;
+  --color-surface: var(--surface);
+  --color-label: var(--label);
+  --color-accent: var(--accent);
 }
 ```
 
+Colors are named by role, not by component:
+
+- **Surfaces:** `surface`, `surface-secondary`, `surface-tertiary`, `surface-raised` (menus, dialogs, cards).
+- **Text:** `label`, `label-secondary`, `label-tertiary`, `label-quaternary`.
+- **Control fills:** `fill`, `fill-secondary`, `fill-tertiary`.
+- **Lines:** `separator`, `separator-strong`.
+- **Accent:** `accent`, `accent-hover`, `accent-pressed`, `on-accent` (text on the accent).
+- **Links, focus and states:** `link`, `focus`, `danger`, `success`, `warning` and their `-surface` tints.
+- **Palette:** `blue`, `green`, `orange`, `red`, `yellow`, `purple`, `pink`, `indigo`, `teal`, `mint`, `cyan`, `brown`, `gray`, used by charts.
+
 - **Change a color:** edit its value under `:root` (light) and `.dark` (dark).
 - **Add a color:** define it under `:root` and `.dark`, then map it in `@theme inline`, for example `--color-brand: var(--brand);`. Classes such as `bg-brand` and `text-brand` become available.
-- **Change the font:** set `--font-sans` in `@theme inline`. By default each device's own system font is used, so nothing has to be downloaded.
+- **Change the font:** set `--font-sans` in `@theme inline`. Inter is loaded by default.
 - **Corner radius:** `--radius` scales every rounded component.
 
 ## Dark mode

package/lib/init.mjs

@@ -39,6 +39,17 @@ const TOOLING = {
   vite: ["tailwindcss", "@tailwindcss/vite", "@types/node"],
 }
 const MINIMUM_TAILWIND = [4, 2]
+const FONT_IMPORT = '@import "@fontsource-variable/inter";\n'
+const FONT_FAMILY = '--font-sans: "Inter Variable", sans-serif;'
+const NEXT_FONT_FAMILY = "--font-sans: var(--font-sans);"
+const NEXT_LAYOUTS = [
+  "src/app/layout.tsx",
+  "app/layout.tsx",
+  "src/app/layout.jsx",
+  "app/layout.jsx",
+]
+const NEXT_FONT_NOTE =
+  'Load Inter in your root layout with next/font/google: Inter({ subsets: ["latin", "latin-ext"], variable: "--font-sans" }), and add its .variable to the <html> className.'
 
 function relative(project, file) {
   return path.relative(project.cwd, file)
@@ -184,6 +195,62 @@ function configureVite(project) {
   return manual
 }
 
+function stylesheetFor(project, css) {
+  if (project.framework !== "next") return css
+  return css.replace(FONT_IMPORT, "").replace(FONT_FAMILY, NEXT_FONT_FAMILY)
+}
+
+function configureNextFont(project) {
+  const file = NEXT_LAYOUTS.map((name) => path.join(project.cwd, name)).find(
+    existsSync
+  )
+  if (!file) return [NEXT_FONT_NOTE]
+
+  let text = readFileSync(file, "utf8")
+  if (/variable:\s*["']--font-sans["']/.test(text)) return []
+
+  const html = text.match(/<html\b[^>]*>/)
+  if (!html) return [NEXT_FONT_NOTE]
+  let tag = html[0]
+  const literal = tag.match(/className="([^"]*)"/)
+  if (literal) {
+    tag = tag.replace(
+      literal[0],
+      `className={\`\${fontSans.variable} ${literal[1]}\`}`
+    )
+  } else if (!/className=/.test(tag)) {
+    tag = tag.replace(/<html\b/, "<html className={fontSans.variable}")
+  } else {
+    return [NEXT_FONT_NOTE]
+  }
+  text = text.replace(html[0], tag)
+
+  const semi = /from\s+["'][^"']+["'];/.test(text) ? ";" : ""
+  const fontImport = text.match(
+    /import\s*\{([^}]*)\}\s*from\s*["']next\/font\/google["']/
+  )
+  if (fontImport) {
+    text = text.replace(
+      fontImport[0],
+      fontImport[0].replace(fontImport[1], `${fontImport[1].trimEnd()}, Inter `)
+    )
+  } else {
+    text = `import { Inter } from "next/font/google"${semi}\n${text}`
+  }
+
+  const imports = [
+    ...text.matchAll(/^import\s[\s\S]*?["'][^"']+["'];?[ \t]*\n/gm),
+  ]
+  const last = imports.at(-1)
+  const at = last ? last.index + last[0].length : 0
+  const declaration = `\nconst fontSans = Inter({\n  subsets: ["latin", "latin-ext"],\n  variable: "--font-sans",\n})${semi}\n`
+  text = text.slice(0, at) + declaration + text.slice(at)
+
+  writeFileSync(file, text)
+  step(`Loaded Inter in ${relative(project, file)}`)
+  return []
+}
+
 function configureNext(project) {
   const existing = POSTCSS_CONFIGS.map((name) =>
     path.join(project.cwd, name)
@@ -230,7 +297,7 @@ export async function init(options) {
   }
 
   const registry = await fetchRegistry()
-  const css = await fetchStylesheet(registry)
+  const css = stylesheetFor(project, await fetchStylesheet(registry))
 
   if (ensureAlias(project, sourceRoot))
     step("Added the @/* import alias to tsconfig")
@@ -241,7 +308,7 @@ export async function init(options) {
   const manual =
     project.framework === "vite"
       ? configureVite(project)
-      : configureNext(project)
+      : [...configureNext(project), ...configureNextFont(project)]
 
   writeFileSync(stylesheet, css)
   step(`Wrote ${relative(project, stylesheet)}`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esuiss/ui",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "description": "Copy-paste React components with a clean, minimal design, built on Base UI and Tailwind CSS v4. CLI for Next.js and React (Vite).",
   "keywords": [
     "react",