@sableui/react 0.9.0 → 0.10.0

package/scripts/lint-rules.mjs

@@ -25,6 +25,14 @@
  * both linters zero-dependency.
  */
 
+const STEP = "(?:50|100|200|300|400|500|600|700|800|900|950)"
+/** Every family Tailwind ships, whether or not Sable generates it. */
+const TAILWIND_FAMILIES = ["slate", "gray", "grey", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
+/** The tones that get a generated scale — keep in step with PALETTE_TONES in src/lib/palette.ts. */
+const PALETTE_TONE_SCALES = ["tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"]
+/** Everything src/palette.css generates — keep in step with PALETTE_SCALES in src/lib/palette.ts. */
+export const PALETTE_SCALES = ["neutral", "red", "orange", "yellow", "green", "teal", "blue", "purple", "pink", ...PALETTE_TONE_SCALES]
+
 /** Utility prefixes that take a colour token. */
 export const COLOR_PREFIX =
 	"(?:bg|text|border|fill|stroke|ring|ring-offset|from|to|via|decoration|outline|divide|caret|accent|shadow)"
@@ -442,21 +450,34 @@ export function makeRules({ semanticTokens, motionTokens, labelContrast = null,
 		{
 			id: "inline-color",
 			scope: "both",
-			why: "Inline oklch()/hex color. Use a semantic token (bg-card, text-tone-edition-foreground, bg-overlay…). Literal colors belong only in a theme file.",
+			why: "Inline oklch()/hex color. Use a semantic token (bg-card, text-tone-1-foreground, bg-overlay…). Literal colors belong only in a theme file.",
 			regex: /oklch\s*\(|#(?:[0-9a-fA-F]{8}|[0-9a-fA-F]{6}|[0-9a-fA-F]{4}|[0-9a-fA-F]{3})\b/g,
 		},
 		{
 			id: "palette-ref",
-			scope: "both",
-			why: "Raw palette-step reference (e.g. --zinc-950, text-(--purple-heart-700), border-orange-500). Palette steps are theme-internal — name a semantic token instead. After the tone-foreground + overlay tokens, this rule has ZERO sanctioned exceptions.",
+			scope: "package",
+			why: "Palette-step reference (e.g. --zinc-950, text-(--purple-heart-700), border-orange-500, bg-tone-1-100) in a component. A component paints roles only, so it re-themes with the role; the generated palette is for apps. After the tone-foreground + overlay tokens, this rule has ZERO sanctioned exceptions.",
 			// Two shapes, and the second is the one that got away. A CSS var ending in
 			// a ramp step catches `--zinc-950`; a bare Tailwind palette utility catches
 			// `border-orange-500`, which is what actually shipped in a consumer app for
 			// weeks. Semantic/layout/motion tokens never end in a numeric step, so both
 			// halves are theme-agnostic.
 			regex: new RegExp(
-				"--[a-zA-Z][\\w-]*-(?:50|100|200|300|400|500|600|700|800|900|950)\\b" +
-					`|\\b${COLOR_PREFIX}-(?:slate|gray|grey|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950)\\b`,
+				`--[a-zA-Z][\\w-]*-${STEP}\\b` +
+					`|\\b${COLOR_PREFIX}-(?:${[...TAILWIND_FAMILIES, ...PALETTE_TONE_SCALES].join("|")})-${STEP}\\b`,
+				"g",
+			),
+		},
+		{
+			id: "palette-ref",
+			scope: "consumer",
+			why: "Palette step that does not follow the theme (e.g. --zinc-950, text-(--purple-heart-700), bg-lime-500). Sable generates neutral, red, orange, yellow, green, teal, blue, purple and pink, plus a scale under every tone (bg-tone-1-100), all from the active theme — use one of those for decorative or categorical colour, and a semantic token for surfaces, text and actions. A theme's own ramps are internal, and Tailwind's other families are switched off.",
+			// The generated palette (src/lib/palette.ts) is themed, so an app may use
+			// it; anything else ending in a step is a theme's internal ramp or a
+			// Tailwind family Sable switched off, and paints nothing or the wrong thing.
+			regex: new RegExp(
+				`--(?!(?:${PALETTE_SCALES.join("|")})-${STEP}\\b)[a-zA-Z][\\w-]*-${STEP}\\b` +
+					`|\\b${COLOR_PREFIX}-(?:${TAILWIND_FAMILIES.filter((name) => !PALETTE_SCALES.includes(name)).join("|")})-${STEP}\\b`,
 				"g",
 			),
 		},

package/scripts/sources.mjs

@@ -195,7 +195,10 @@ export function sourcesCss(pkgRoot, root, outFile) {
  * that component unstyled, silently — so it fails. A whole-package @source is
  * correct, just heavy, so it only gets a note.
  */
-const WHOLE_DIST = /@source[^;]*(?:@sableui\/react|packages\/sable)\/dist(?:\/\*\*)?[^;]*;/
+// The whole-package scan only: `dist`, `dist/` or a `dist/**` glob. A single
+// module (`dist/components/chart/chart.js`, a lazy route's) and an exclusion
+// (`@source not …`) are deliberate and trim nothing away.
+const WHOLE_DIST = /@source\s+(?!not\b)["'][^"']*(?:@sableui\/react|packages\/sable)\/dist\/?(?:\*\*(?:\/[^"']*)?)?["']/
 
 export function sourcesCheck(pkgRoot, root, cssFiles) {
 	const generated = cssFiles.find((f) => f.text.includes(SOURCES_MARKER))

package/skills/sable/SKILL.md

@@ -157,14 +157,23 @@ The installed catalog and guides are authoritative for API and token names.
      your own from parts; that is not a gap and needs no apology. Apps on Sable
      should not all look alike.
 2. Resolve styling in this order: Sable component/variant, Sable utility or recipe,
-   semantic token, then app-owned CSS for a genuinely uncovered need. Retrieve
+   semantic token, then app-owned CSS for a genuinely uncovered need. Colour
+   beyond the roles (tags, avatars, labels, legends) comes from the generated
+   palette, which follows the theme: a family as a component's tone
+   (`<Badge tone="teal">`) or the pairs `bg-blue-100 text-blue-800`; never hex or
+   a theme's own ramp (`sable token palette`). Retrieve
    `sable utility <name>` and `sable token <group>` rather than guessing names.
    Use paired typography, spacing steps, density/control ladders, relative surfaces,
    concentric geometry, scroll policies, and supported motion recipes.
 3. Inspect a relevant `sable pattern <Name> --skeleton` and layout contracts when
    composing a page. Reuse a pattern when its information architecture fits;
    otherwise compose an original layout from Sable primitives. Do not force a
-   dashboard or marketing shell onto a different product brief.
+   dashboard or marketing shell onto a different product brief. Structure: one
+   direction is `Stack`/`Row` (flex); content that lines up across rows and
+   columns is `Grid`/`Columns`; width is a `Region`. Measure vertical space in
+   baseline steps (`sable docs spacing`): `Stack`/`Row`/`Grid` gap numbers, even
+   Tailwind steps between blocks, paired type tiers. It is a rhythm to keep, not
+   a grid to force: never pad or nudge components to pin text to lines.
 4. Put identity in app-owned theme tokens, composition, and assets. Component
    `className` is for layout; fill, edges, corners, ink, and interaction appearance
    come from supported variants. Do not override controls to imitate a reference.
@@ -181,7 +190,9 @@ The installed catalog and guides are authoritative for API and token names.
 Save a short brief in the project's existing design location: audience, primary
 task, content, constraints, selected identity, and meaningful states, plus each
 route's width (a Region `max`, or fluid) and why, chosen by what the person does
-there (`sable docs building-a-page`). Name the product's signature surfaces: the
+there (`sable docs building-a-page`), and its column structure: which content
+spans which of the 12 columns at which breakpoint, or "one measure, no columns".
+A grid is a choice per route, not a requirement; stating it is. Name the product's signature surfaces: the
 one to three places its identity lives (a shop's product card and search, a music
 app's player and album tile). Design those from the brief's direction first,
 composing Sable's parts and behaviour; take a Sable reference for one only when