@rojaostudio/ds-core 1.1.0-next.2 → 1.1.0-next.4

package/README.md

@@ -9,7 +9,7 @@ npm i @rojaostudio/ds-core
 ```
 
 ```ts
-import { generateTheme, emitCss, emitClaudeMd } from '@rojaostudio/ds-core/generate';
+import { generateRdsTheme, emitRdsCss, emitClaudeMd } from '@rojaostudio/ds-core/generate';
 
 const brand = {
   name: 'acme',
@@ -19,10 +19,13 @@ const brand = {
   fonts: { body: 'inter' },
 };
 
-emitCss(brand);       // theme.css — light and dark, derived from one color
-emitClaudeMd(brand);  // the same brand as rules for Claude Code, Cursor or AGENTS.md
+emitRdsCss(generateRdsTheme(brand)); // rds-theme.css — import it AFTER @rojaostudio/ds/styles/rds.css
+emitClaudeMd(brand);                 // the same brand as rules for Claude Code, Cursor or AGENTS.md
 ```
 
+Or, without writing code: `npx rojao-ds init` (the [`rojao-ds`](https://www.npmjs.com/package/rojao-ds) CLI)
+writes both files into your project.
+
 One color goes in. What comes out is an OKLCH scale with an adaptive contrast floor, semantic
 roles for surface, text, border and brand, and the full light/dark pair — verified against
 WCAG AA on all three surfaces, by test, on every build.
@@ -41,7 +44,7 @@ Components, styles and the React Native target live in
 
 | Entry | What's in it |
 |---|---|
-| `@rojaostudio/ds-core/generate` | `generateTheme`, `emitCss`, `emitClaudeMd`, `buildScale`, `contrastRatio` |
+| `@rojaostudio/ds-core/generate` | `generateRdsTheme`, `rdsThemeFromTable`, `emitRdsCss`, `emitClaudeMd`, `generateTheme`/`emitCss` (1.x), `buildScale`, `contrastRatio` |
 | `@rojaostudio/ds-core/tokens` | `primitives` — the raw palettes and scales |
 | `@rojaostudio/ds-core/recipes` | the reference brand definition |
 | `@rojaostudio/ds-core/themes` | the preset catalogue: a starting palette per niche |

package/dist/{chunk-DZAJKHNW.js → chunk-UD53AUQQ.js}

@@ -1092,7 +1092,7 @@ ${lines.join("\n")}
   const scopes = scope.split(",").map((s) => s.trim());
   const darkSel = scopes.map((s) => s === ":root" ? `:root${dark}, ${dark}` : `${s}${dark}, ${dark} ${s}`).join(", ");
   return [
-    block2(scope, theme.light),
+    block2(scope, __spreadValues(__spreadValues({}, theme.light), theme.vars)),
     block2(darkSel, theme.dark, theme.light),
     block2(plate, theme.brand, theme.light)
   ].join("\n\n") + "\n";
@@ -1123,6 +1123,19 @@ function rdsThemeFromTable(table) {
       } else out[mode][roleVar(role)] = ref2;
     }
   }
+  const valueOf = (where, ref2) => {
+    if (!isColourRef(ref2)) return ref2;
+    const value = table.primitives[ref2];
+    if (value === void 0) problems.push(`${where} points to unknown primitive "${ref2}"`);
+    return value == null ? void 0 : value.toLowerCase();
+  };
+  if (table.vars) {
+    out.vars = {};
+    for (const [name, ref2] of Object.entries(table.vars)) {
+      const value = valueOf(`var "${name}"`, ref2);
+      if (value !== void 0) out.vars[roleVar(name)] = value;
+    }
+  }
   if (problems.length) throw new Error(`rdsThemeFromTable(${table.name}):
   ${problems.join("\n  ")}`);
   return out;
@@ -1199,152 +1212,156 @@ ${lightBlock}${darkBlock}
 }
 
 // generate/emitClaudeMd.ts
-function resolveColor(v) {
-  var _a, _b;
-  if (!v) return v;
-  if (v.startsWith("color-mix")) {
-    const mix = v.match(/var\(--color-([a-zA-Z]+)(?:-(\d+))?\)\s+(\d+)%/);
-    return mix ? `${mix[1]}${mix[2] ? "-" + mix[2] : ""} a ${mix[3]}%` : v;
-  }
-  const scale = v.match(/var\(--color-([a-zA-Z]+)-(\d+)\)/);
-  if (scale) {
-    const pal = primitives.color[scale[1]];
-    return (_a = pal == null ? void 0 : pal[scale[2]]) != null ? _a : v;
-  }
-  const flat = v.match(/var\(--color-(white|black)\)/);
-  if (flat) return (_b = primitives.color[flat[1]]) != null ? _b : v;
-  return v;
-}
-var TOKEN_DOCS = [
-  { key: "--brand-primary", use: "bot\xE3o prim\xE1rio, fills de marca" },
-  { key: "--brand-on-primary", use: "texto/\xEDcone sobre o prim\xE1rio" },
-  { key: "--brand-hover", use: "hover do prim\xE1rio" },
-  { key: "--brand-secondary", use: "2\xAA cor de marca \u2014 S\xD3 como fill (com --brand-on-secondary); nunca borda/texto sobre superf\xEDcie" },
-  { key: "--brand-on-secondary", use: "texto sobre o fill secund\xE1rio" },
-  { key: "--brand-accent", use: "destaque, links, sucesso (use com parcim\xF4nia)" },
-  { key: "--brand-accent-light", use: "fundo tingido do accent" },
-  { key: "--brand-on-accent", use: "texto sobre o accent" },
-  { key: "--surface-page", use: "fundo da p\xE1gina" },
-  { key: "--surface-default", use: "cards, pain\xE9is" },
-  { key: "--surface-raised", use: "superf\xEDcie elevada/hover" },
-  { key: "--border-subtle", use: "divis\xF3rias fracas" },
-  { key: "--border-default", use: "bordas de inputs e cards" },
-  { key: "--border-strong", use: "bordas enfatizadas" },
-  { key: "--border-focus", use: "anel de foco" },
-  { key: "--text-primary", use: "t\xEDtulos, corpo" },
-  { key: "--text-secondary", use: "texto de apoio" },
-  { key: "--text-muted", use: "legendas, metadados" },
-  { key: "--text-inverse", use: "texto sobre superf\xEDcies invertidas" },
-  { key: "--icon-default", use: "cor padr\xE3o de \xEDcone" }
+var ROLE_DOCS = [
+  { role: "colors/primary/default", use: "primary action, brand fills" },
+  { role: "text/on/primary", use: "text/icon on the primary fill" },
+  { role: "colors/primary/active", use: "pressed primary" },
+  { role: "colors/secondary/default", use: "secondary brand fill (with `--text-on-secondary`)" },
+  { role: "colors/accent/default", use: "highlight \u2014 sparingly (with `--text-on-accent`)" },
+  { role: "surface/page", use: "page background" },
+  { role: "surface/card", use: "cards" },
+  { role: "surface/panel", use: "panels, side areas" },
+  { role: "surface/muted", use: "muted areas, wells" },
+  { role: "surface/tint/default", use: "selected / tinted fill (with `--text-on-tint`)" },
+  { role: "border/default", use: "dividers, card borders" },
+  { role: "border/strong", use: "control borders, emphasis" },
+  { role: "focus/ring", use: "focus ring" },
+  { role: "text/heading", use: "headings" },
+  { role: "text/body", use: "body text" },
+  { role: "text/muted", use: "supporting text" },
+  { role: "text/subtle", use: "captions, metadata" },
+  { role: "text/link", use: "links" },
+  { role: "colors/state/error", use: "error fill (with `--text-on-error`)" },
+  { role: "text/error", use: "error message text" },
+  { role: "colors/state/success", use: "success fill (with `--text-on-success`)" },
+  { role: "colors/state/warning", use: "warning fill (with `--text-on-warning`)" }
 ];
-function tokenTable(light2, dark) {
-  const rows = TOKEN_DOCS.filter((t) => t.key in light2).map((t) => {
-    const l = resolveColor(light2[t.key]);
-    const d = t.key in dark ? resolveColor(dark[t.key]) : "\u2014";
-    return `| \`${t.key}\` | ${t.use} | \`${l}\` | \`${d}\` |`;
-  });
-  return [
-    "| Token | Use para | Light | Dark |",
-    "|---|---|---|---|",
-    ...rows
-  ].join("\n");
-}
-function scaleLine(obj, unit = "px") {
-  return Object.entries(obj).map(([k, v]) => `\`${k}\`=${v}${v === 9999 ? "" : unit}`).join(" \xB7 ");
+var CLAUDE_MD_COMPONENTS = [
+  "button",
+  "icon-button",
+  "tooltip",
+  "input",
+  "textarea",
+  "select",
+  "checkbox",
+  "radio-group",
+  "switch",
+  "card",
+  "dialog",
+  "sheet",
+  "tabs",
+  "table",
+  "toast",
+  "badge",
+  "alert",
+  "avatar",
+  "dropdown-menu",
+  "page-header",
+  "sidebar",
+  "empty",
+  "skeleton",
+  "pagination"
+];
+var CLAUDE_MD_FOUNDATION = {
+  space: ["--space-4", "--space-8", "--space-12", "--space-16", "--space-24", "--space-32", "--space-40", "--space-48", "--space-56", "--space-64"],
+  radius: ["--radius-xs", "--radius-control", "--radius-field", "--radius-card", "--radius-container", "--radius-full"],
+  type: ["heading", "lead", "body", "label", "button", "small", "caption"],
+  font: "--type-font-stack"
+};
+function isTable(x) {
+  return typeof x === "object" && x !== null && "modes" in x && "primitives" in x;
 }
 function fileLabel(target) {
   return target === "cursor" ? ".cursorrules" : target === "agents" ? "AGENTS.md" : "CLAUDE.md";
 }
-function emitClaudeMd(def, opts = {}) {
+function roleTable(theme) {
+  const rows = ROLE_DOCS.filter((r) => roleVar(r.role) in theme.light).map((r) => {
+    var _a;
+    const v = roleVar(r.role);
+    return `| \`${v}\` | ${r.use} | \`${theme.light[v]}\` | \`${(_a = theme.dark[v]) != null ? _a : theme.light[v]}\` |`;
+  });
+  return ["| Token | Use for | Light | Dark |", "|---|---|---|---|", ...rows].join("\n");
+}
+function emitClaudeMd(source, opts = {}) {
   var _a, _b, _c;
-  const { supported, light: light2, dark, note } = generateTheme(def);
-  if (!supported) throw new Error(`emitClaudeMd: ${def.name} n\xE3o suportado \u2014 ${note}`);
-  const Name = def.name[0].toUpperCase() + def.name.slice(1);
-  const cssUrl = (_a = opts.cssUrl) != null ? _a : null;
-  const bodyFont = typeof ((_b = def.fonts) == null ? void 0 : _b.body) === "string" ? def.fonts.body : "inter";
-  const displayFont = typeof ((_c = def.fonts) == null ? void 0 : _c.display) === "string" ? def.fonts.display : bodyFont;
-  const fontTitle = (s) => s.split("-").map((w) => {
-    var _a2;
-    return ((_a2 = w[0]) == null ? void 0 : _a2.toUpperCase()) + w.slice(1);
-  }).join(" ");
-  const neutral = primitives.color.neutral;
-  return `# Design System \u2014 ${Name} (brand: \`${def.name}\`)
-
-> This project uses the **${Name}** design system. When you build any UI \u2014
-> components, pages, screens \u2014 follow the rules below so every screen looks like the
-> same product. Do not invent colors, fonts, spacing, or radii.
+  const theme = (_a = opts.theme) != null ? _a : isTable(source) ? rdsThemeFromTable(source) : generateRdsTheme(source);
+  const name = source.name;
+  const Name = name ? name[0].toUpperCase() + name.slice(1) : "Brand";
+  const description = !isTable(source) && source.description ? ` \u2014 ${source.description}` : "";
+  const cssFile = (_b = opts.cssFile) != null ? _b : "rds-theme.css";
+  const target = (_c = opts.target) != null ? _c : "claude";
+  const f = CLAUDE_MD_FOUNDATION;
+  const own = theme.vars ? Object.keys(theme.vars) : [];
+  const themeImport = opts.cssUrl ? `@import "@rojaostudio/ds/styles/rds.css";
+@import url("${opts.cssUrl}"); /* the brand theme, AFTER rds.css */` : `@import "@rojaostudio/ds/styles/rds.css";
+@import "./${cssFile}"; /* the brand theme, AFTER rds.css */`;
+  return `# Design System \u2014 ${Name}
 
-## Brand identity
-- **Name:** ${Name}
-- **Look:** ${isNeutralBrand(def) ? "neutral \u2014 black & white lead, the accent does the talking" : "chromatic \u2014 the brand color leads"}${def.description ? ` \u2014 ${def.description}` : ""}
-- **Body font:** ${fontTitle(bodyFont)} \xB7 **Display font:** ${fontTitle(displayFont)} (load from Google Fonts; never substitute)
-- **Default radius:** \`${primitives.radius.md}px\` (\`rounded-lg\`). Pills/avatars fully round.
-- **Light AND dark are first-class** \u2014 every screen must work in both.
+> This project uses **Roj\xE3o DS 2.0** with the **${Name}** brand${description}. When you build any
+> UI \u2014 components, pages, screens \u2014 follow the rules below so every screen looks like the same
+> product. Do not invent colors, fonts, spacing or radii.
 
-## How to apply
-1. ${cssUrl ? `Import the brand stylesheet once at the app root:
-   \`\`\`html
-   <link rel="stylesheet" href="${cssUrl}" />
-   \`\`\`` : `Put \`${def.name}.css\` (downloaded with this file) in your project and import it
-   once at the app root:
-   \`\`\`css
-   @import "./${def.name}.css";
-   \`\`\`
-   The theme is a file **you own** \u2014 commit it. Nothing here depends on an external host.`}
-2. Put the theme class on \`<html>\`:
-   \`\`\`html
-   <html class="theme-${def.name}">       <!-- light -->
-   <html class="theme-${def.name} dark">  <!-- dark -->
-   \`\`\`
-   > One sheet can hold **several themes** \u2014 each as its own \`theme-<name>\` class.
-   > Switch with the class (one product per app, or many on one page).${cssUrl ? `
-   > Edit the theme at the source and this same URL updates **all your apps at once**.` : ""}
-3. Style everything with the semantic tokens below, as CSS variables \u2014 they already
-   flip between light and dark. You never write a hex value in a component.
-   \`\`\`css
-   .card { background: var(--surface-default); color: var(--text-primary);
-           border: 1px solid var(--border-default); border-radius: ${primitives.radius.md}px; }
-   \`\`\`
+## Setup (once per app)
+\`\`\`bash
+pnpm add @rojaostudio/ds
+\`\`\`
+\`\`\`css
+/* root stylesheet */
+${themeImport}
+\`\`\`
+- \`rds.css\` carries the tokens and every component's styles, in cascade layers
+  (\`rds.theme\`, \`rds.tokens\`, \`rds.components\`). No Tailwind, no other stylesheet.
+- ${opts.cssUrl ? `The theme is served from \`${opts.cssUrl}\`.` : `\`${cssFile}\` is the brand theme, generated \u2014 a file **you own**; commit it. Regenerate it
+  with \`npx rojao-ds init\` instead of editing it by hand.`}
+- Dark mode: \`class="dark"\` on \`<html>\` (or any element). Light AND dark are first-class.
+- Brand plate: \`class="ds-plate"\` on a section paints it with the primary color; the roles inside
+  flip so text and components stay legible.
 
-## Semantic color tokens \u2014 ALWAYS use these, NEVER hardcode a color
-${tokenTable(light2, dark)}
+## Components first
+Use the design system components before writing your own markup. Import each from its own path:
+\`\`\`tsx
+import { Button } from "@rojaostudio/ds/components/button";
+import { IconButton } from "@rojaostudio/ds/components/icon-button";
+import { Tooltip } from "@rojaostudio/ds/components/tooltip";
+\`\`\`
+Available, among others: ${CLAUDE_MD_COMPONENTS.map((c) => `\`${c}\``).join(" \xB7 ")}.
+- Components bring their own CSS (inside \`rds.css\`). Don't restyle their internals, don't wrap
+  them in Tailwind classes, don't rebuild them with shadcn/ui.
+- Every \`IconButton\` goes inside a \`Tooltip\` with the same text as its \`label\`.
 
-## Spacing scale (px) \u2014 use ONLY these steps for padding, margin, gap
-${scaleLine(primitives.space)}
+## Theme roles \u2014 ALWAYS use these in your own CSS, NEVER hardcode a color
+They already flip between light, dark and the brand plate.
+${roleTable(theme)}
 
-## Type scale (font-size, px)
-${scaleLine(primitives.fontSize)}
+Every role pairs a fill with its \`--text-on-*\` text. Example:
+\`\`\`css
+.panel { background: var(--surface-card); color: var(--text-body);
+         border: var(--border-width) solid var(--border-default);
+         border-radius: var(--radius-card); padding: var(--space-16); }
+\`\`\`${own.length ? `
 
-**Font weights:** ${scaleLine(primitives.fontWeight, "")}
-**Line heights:** ${Object.entries(primitives.lineHeight).map(([k, v]) => `\`${k}\`=${v}`).join(" \xB7 ")}
+Brand's own variables (same value in every mode): ${own.map((v) => `\`${v}\``).join(" \xB7 ")}.` : ""}
 
-## Radius (px)
-${scaleLine(primitives.radius)}
+## Foundation tokens
+- **Spacing** (padding, margin, gap) \u2014 ONLY: ${f.space.map((v) => `\`${v}\``).join(" \xB7 ")}
+- **Radius:** ${f.radius.map((v) => `\`${v}\``).join(" \xB7 ")}
+- **Type** \u2014 \`--type-<style>-size\` / \`--type-<style>-line\`, styles: ${f.type.map((v) => `\`${v}\``).join(" \xB7 ")}
+- **Font:** \`font-family: var(${f.font})\` \u2014 never substitute.
 
 ## Rules (do / don't)
-- \u2705 Primary button = \`--brand-primary\` bg + \`--brand-on-primary\` text; hover \u2192 \`--brand-hover\`.
-- \u2705 Low-emphasis / secondary action = NEUTRAL outline: \`--border-default\` border + \`--text-secondary\` text (legible by rule, light AND dark). A brand color belongs to the PRIMARY (filled) action, not a secondary outline.
-- \u2705 Page wrapper uses \`--surface-page\`; cards use \`--surface-default\`.
-- \u2705 Body text is \`--text-primary\`; never pure black/white text directly.
-- \u2705 \`--brand-accent\` is the ONLY saturated color \u2014 use it sparingly (links, success, highlights).
-- \u2705 Spacing, font-size and radius come ONLY from the scales above.
-- \u274C Never write a raw hex (\`#000\`, \`bg-black\`) or a Tailwind palette color (\`bg-emerald-500\`, \`text-zinc-700\`) in a component \u2014 map it to a token above.
-- \u274C Never use a brand color (incl. \`--brand-secondary\`) as a border/ring or as text directly on a surface. The engine guarantees contrast ONLY for a fill + its \`--brand-on-*\` text. As a stroke (WCAG 1.4.11, 3:1) or label (1.4.3, 4.5:1) on the surface it can fail \u2014 and in one mode but not the other. Brand colors = fills.
-- \u274C Never introduce a second accent color. Don't hardcode dark-mode colors \u2014 tokens already flip.
-
-## Use with shadcn/ui
-You are NOT replacing shadcn. Use shadcn/ui components and apply THIS brand as the theme:
-map the tokens above onto shadcn's CSS variables (\`--background\` \u2192 \`--surface-page\`,
-\`--foreground\` \u2192 \`--text-primary\`, \`--primary\` \u2192 \`--brand-primary\`, \`--border\` \u2192
-\`--border-default\`, \`--ring\` \u2192 \`--border-focus\`, \`--radius\` \u2192 \`${primitives.radius.md}px\`).
-Build with shadcn's component shapes; paint them with these tokens. Don't restyle components from scratch.
-
-## Primitive palette (reference \u2014 prefer the semantic tokens above)
-\`\`\`
-neutral 50 ${neutral[50]} \xB7 500 ${neutral[500]} \xB7 900 ${neutral[900]}
-\`\`\`
+- \u2705 Primary action = \`Button\` (it already paints \`--colors-primary-default\` + \`--text-on-primary\`).
+- \u2705 Page uses \`--surface-page\`; cards \`--surface-card\`; body text \`--text-body\`.
+- \u2705 \`--colors-accent-default\` is the highlight \u2014 use it sparingly.
+- \u2705 Spacing, radius and type come ONLY from the foundation tokens above.
+- \u2705 Your own CSS is unlayered, so it already wins over the design system \u2014 no \`!important\`.
+- \u274C Never write a raw hex (\`#000\`) or a Tailwind palette class (\`bg-emerald-500\`) in a component.
+- \u274C Never use a brand fill as a border or as text on a surface: contrast is guaranteed only for a
+  fill + its \`--text-on-*\`.
+- \u274C Never hardcode dark-mode colors \u2014 the roles already flip. Don't add a second accent color.
+- \u274C Don't use the 1.x stylesheet (\`styles/base.css\`), its utilities (\`bg-surface-*\`, \`text-fg-*\`) or
+  \`theme-<name>\` classes.
 
-<!-- Generated by Roj\xE3o DS \u2014 file: ${fileLabel("claude")} / ${fileLabel("cursor")} / ${fileLabel("agents")}. Drop it in your project root; Claude Code & Cursor read it automatically. -->
+<!-- Generated by Roj\xE3o DS (npx rojao-ds init) \u2014 file: ${fileLabel(target)}. Claude Code, Cursor and other agents read it from the project root. -->
 `;
 }
 

package/dist/generate.d.ts

@@ -3,7 +3,10 @@ import { a as BrandDef } from './recipe.schema-Cq7e82nx.js';
 export { A as Archetype, B as BrandColors, C as ColorRef, D as DarkStrategy, F as FontDef, P as PaletteRef, S as ScaleToken, T as TextStyle, b as TextStyleName, c as TypeScale } from './recipe.schema-Cq7e82nx.js';
 
 type RdsMode = "light" | "dark" | "brand";
-type RdsTheme = Record<RdsMode, Record<string, string>>;
+type RdsTheme = Record<RdsMode, Record<string, string>> & {
+    /** The brand's own variables (Figma `brand` collection, `<brand>/<name>`), one value for every mode. */
+    vars?: Record<string, string>;
+};
 /**
  * Roles of the [RDS] theme collection, in Figma order: [name, dark source, brand source].
  * The light mode always reads the plain base token. In dark and brand, Figma points either to the
@@ -38,6 +41,8 @@ type RdsBrandTable = {
     name: string;
     primitives: Record<string, string>;
     modes: Record<RdsMode, Record<string, string>>;
+    /** The brand's own variables of the `brand` collection, by Figma path ("acassius/cyan") → primitive or value. */
+    vars?: Record<string, string>;
 };
 /** The theme of a brand table. Fails on a missing role or an unknown primitive, listing them all. */
 declare function rdsThemeFromTable(table: RdsBrandTable): RdsTheme;
@@ -50,12 +55,33 @@ declare function rdsThemeFromTable(table: RdsBrandTable): RdsTheme;
 
 declare function emitCss(def: BrandDef): string;
 
+/**
+ * emitClaudeMd.ts — a brand → the rules file (CLAUDE.md / .cursorrules / AGENTS.md) that teaches
+ * the AI (Claude Code, Cursor, any agent) to build with the brand on Rojão DS 2.0.
+ *
+ * 2.0 (issue #5): the file describes the [RDS] setup — components with their own CSS
+ * (`@rojaostudio/ds/styles/rds.css`), the generated theme file imported after it, the theme roles
+ * (`--surface-card`, `--text-on-primary`…) and the foundation tokens (`--space-*`, `--radius-*`,
+ * `--type-*`). The 1.x text (Tailwind utilities, base.css, `theme-<name>`, shadcn mapping) is gone:
+ * no component reads it any more.
+ *
+ * The input is either a recipe (BrandDef, theme derived by `generateRdsTheme`) or a brand table
+ * exported from Figma (`rdsThemeFromTable`). Colours in the table are the theme's own hex values,
+ * so the AI "sees" the brand. Pure (no I/O).
+ */
+
 type ClaudeMdTarget = "claude" | "cursor" | "agents";
 interface ClaudeMdOptions {
-    /** URL de um CSS de tema hospedado, se houver. Sem default: o padrão é arquivo local. */
+    /** URL of a hosted theme stylesheet, if any. No default: the theme is a local file. */
     cssUrl?: string;
+    /** Name of the local theme file the consumer imports. Default `rds-theme.css`. */
+    cssFile?: string;
+    /** The theme, if it was already generated. Default: derived from the input. */
+    theme?: RdsTheme;
+    /** File the text is written to (only the footer changes). Default `claude`. */
+    target?: ClaudeMdTarget;
 }
-declare function emitClaudeMd(def: BrandDef, opts?: ClaudeMdOptions): string;
+declare function emitClaudeMd(source: BrandDef | RdsBrandTable, opts?: ClaudeMdOptions): string;
 
 /**
  * scale.ts — deriva uma escala 50–900 a partir de UMA cor custom (1 hex). #28.

package/dist/generate.js

@@ -1,3 +1,3 @@
-export { ROLES as RDS_ROLES, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-DZAJKHNW.js';
+export { ROLES as RDS_ROLES, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-UD53AUQQ.js';
 import './chunk-FRWRLCYM.js';
 import './chunk-ORMEWXMH.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { recipes } from './chunk-3QTDO2HW.js';
-export { ROLES as RDS_ROLES, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-DZAJKHNW.js';
+export { ROLES as RDS_ROLES, SCALE_STEPS, brandTones, buildScale, contrastRatio, emitClaudeMd, emitCss, emitRdsCss, generateRdsTheme, generateTheme, hexToHsl, hslToHex, isHex, isNeutralBrand, onColor, rdsContrast, rdsThemeFromTable, refToHex, relativeLuminance, resolveTheme, roleVar } from './chunk-UD53AUQQ.js';
 export { primitives, tokens } from './chunk-FRWRLCYM.js';
 import './chunk-ORMEWXMH.js';

package/dist/themes.js

@@ -1,4 +1,4 @@
-import { generateTheme } from './chunk-DZAJKHNW.js';
+import { generateTheme } from './chunk-UD53AUQQ.js';
 import './chunk-FRWRLCYM.js';
 import { __spreadValues, __objRest } from './chunk-ORMEWXMH.js';
 

package/figma/export-brand.js

@@ -5,6 +5,7 @@
 //
 // Each theme role is followed through the aliases of the `base` collection (in the brand's mode) down to a
 // primitive of the [RDS] Primitives library, kept by name ("accyan/400") with the colour Figma resolves.
+// The brand's own variables in the `brand` collection (`<brand>/<name>`, as acassius/cyan) come along in `vars`.
 const BRAND = "rojao";
 
 const cols = await figma.variables.getLocalVariableCollectionsAsync();
@@ -47,5 +48,11 @@ for (const m of theme.modes) {
   }
   modes[m.name] = roles;
 }
+const vars = {};
+const brandCol = cols.find((c) => c.name === "brand");
+for (const id of brandCol?.variableIds ?? []) {
+  const v = await figma.variables.getVariableByIdAsync(id);
+  if (v.name.startsWith(`${BRAND}/`)) vars[v.name] = await resolve(v, theme.modes[0].modeId);
+}
 const sorted = Object.fromEntries(Object.entries(primitives).sort(([a], [b]) => a.localeCompare(b)));
-return { $schema: "rds-brand-table/1", name: BRAND, primitives: sorted, modes };
+return { $schema: "rds-brand-table/1", name: BRAND, primitives: sorted, modes, vars };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds-core",
-  "version": "1.1.0-next.2",
+  "version": "1.1.0-next.4",
   "description": "O motor do Rojão DS — tokens, derivação de tema e emissores. Sem React, sem Tailwind, sem CSS.",
   "license": "MIT",
   "author": "Rojão Studio (https://rojao.studio)",