{ "$schema": "./tokens.schema.json", "version": "1.4.0", "sourceFile": "D:/01 - projets/SmartStack.app/features/customisation-ui/web/smartstack-web/src/base.css", "extractedAt": "2026-04-22", "description": "Design tokens + component classes + hard rules. BASELINE reference for ui-polish — at runtime the engine derives a project-aware capability set (theme-capabilities.ts: helper classes + tokens scanned from the TARGET project's CSS, components scanned from src/components). Rules flag bypass of primitives the project ships (R21/R22) and never require components it lacks (R1/R11 are project-aware).", "cssVariables": { "radius": { "card": "12px", "button": "8px", "badge": "8px", "input": "8px", "modal": "16px", "menuItem": "8px" }, "colorPrimary": { "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc", "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca", "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b" }, "colorAccent": { "50": "#f5f3ff", "100": "#ede9fe", "200": "#ddd6fe", "300": "#c4b5fd", "400": "#a78bfa", "500": "#8b5cf6", "600": "#7c3aed", "700": "#6d28d9", "800": "#5b21b6", "900": "#4c1d95", "950": "#2e1065" }, "backgrounds": { "light": { "bgApp": "#fafafa", "bgPrimary": "#ffffff", "bgSecondary": "#f4f4f5", "bgTertiary": "#e4e4e7", "bgCard": "#ffffff", "bgHover": "#f4f4f5", "bgActive": "#e4e4e7" }, "dark": { "bgApp": "#161618", "bgPrimary": "#1c1c1f", "bgSecondary": "#232326", "bgTertiary": "#2a2a2e", "bgCard": "#1c1c1f", "bgHover": "#27272a", "bgActive": "#3f3f46" } }, "text": { "light": { "textPrimary": "#18181b", "textSecondary": "#52525b", "textTertiary": "#71717a", "textMuted": "#a1a1aa", "textInverse": "#fafafa" }, "dark": { "textPrimary": "#e4e4e7", "textSecondary": "#a1a1aa", "textTertiary": "#71717a", "textMuted": "#52525b", "textInverse": "#e4e4e7" } }, "borders": { "light": { "borderColor": "#e4e4e7", "borderSubtle": "#f4f4f5", "borderStrong": "#d4d4d8" }, "dark": { "borderColor": "#3f3f46", "borderSubtle": "#27272a", "borderStrong": "#52525b" } }, "status": { "success": { "bg": "#f0fdfa", "text": "#0f766e", "border": "#99f6e4", "dot": "#14b8a6" }, "warning": { "bg": "#fffbeb", "text": "#b45309", "border": "#fde68a", "dot": "#f59e0b" }, "error": { "bg": "#fff1f2", "text": "#be123c", "border": "#fecdd3", "dot": "#f43f5e" }, "info": { "bg": "#f0f9ff", "text": "#0369a1", "border": "#bae6fd", "dot": "#0ea5e9" } }, "accentSoft": { "_note": "Named soft-accent surface (--accent-bg/--accent-text/--accent-border), e.g. used by .badge-accent. The CONFORMANT alternative to ad-hoc accent opacity tints (R22). Shipped by the platform theme; values below are the reference baseline (light/dark) — the engine reads the actual names from the target project's CSS.", "light": { "bg": "#eef2ff", "text": "#4338ca", "border": "#c7d2fe" }, "dark": { "bg": "#312e81", "text": "#c7d2fe", "border": "#4338ca" } }, "layout": { "_note": "Page-width contract (R25). Responsive, rem-based. --content-max-narrow caps the 'focused' page mode; --content-gutter-x is the left/right gutter so full-width content clears the edge chrome (doc launcher, sidebar collapse handle). Emitted by scaffold-theme.", "contentMaxNarrow": "42rem", "contentGutterX": "3rem" }, "fontSans": "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" }, "componentClasses": { "card": { "description": "Surface card, solid background, shadow-sm", "class": ".card" }, "cardElevated": { "description": "Elevated card with shadow-md", "class": ".card-elevated" }, "btn": { "description": "Base button, radius-button, inline-flex, 0.5rem 1rem padding", "class": ".btn" }, "btnPrimary": { "description": "Primary CTA — accent-600 bg, white text", "class": ".btn .btn-primary" }, "btnSecondary": { "description": "Secondary — bg-secondary, text-primary, border", "class": ".btn .btn-secondary" }, "btnSm": { "description": "Smaller padding variant", "class": ".btn .btn-sm" }, "btnGhost": { "description": "Transparent bg, hover bg-hover", "class": ".btn .btn-ghost" }, "input": { "description": "Form input, radius-input, focus ring accent-500", "class": ".input" }, "focusRing": { "description": "Accessibility focus ring — 3px accent-border box-shadow", "class": ".focus-ring" }, "badgeSuccess": { "class": ".badge-success" }, "badgeWarning": { "class": ".badge-warning" }, "badgeError": { "class": ".badge-error" }, "badgeInfo": { "class": ".badge-info" }, "badgeAccent": { "class": ".badge-accent" }, "hoverCard": { "description": "Translate -2px + shadow-lg on hover", "class": ".hover-card" }, "itemLight": { "class": ".item-light" }, "itemMedium": { "class": ".item-medium" }, "itemDark": { "class": ".item-dark" }, "itemBorder": { "class": ".item-border" }, "glass": { "description": "Backdrop blur 10px + transparent bg", "class": ".glass" }, "gradientText": { "description": "135deg gradient primary→accent, -webkit-background-clip: text", "class": ".gradient-text" }, "animatedGradient": { "class": ".animated-gradient" }, "tooltipAnimation": { "class": ".tooltip-animation" } }, "sharedComponents": { "PageTemplate": { "importFrom": "@/components/ui/PageTemplate", "props": { "title": { "type": "string", "required": true }, "subtitle": { "type": "string | null", "required": false }, "icon": { "type": "ReactNode (lucide-react icon)", "required": false }, "actions": { "type": "ReactNode (buttons)", "required": false }, "breadcrumbs": { "type": "BreadcrumbItem[]", "required": false }, "children": { "type": "ReactNode", "required": true }, "contentClassName": { "type": "string", "default": "space-y-6" } }, "rule": "Every page MUST wrap its content in . No bare
or
at the page root." }, "PageHeader": { "importFrom": "@/components/ui/PageHeader", "note": "Used internally by PageTemplate. Pages should NOT use PageHeader directly." }, "DataTable": { "importFrom": "@/components/ui/DataTable", "props": [ "data", "columns", "loading", "searchable", "searchPlaceholder", "pagination", "onRowClick", "getRowKey", "emptyMessage", "emptyIcon", "headerActions", "striped", "compact", "selectable", "selectedKeys", "onSelectionChange", "searchFilter", "defaultSortKey", "defaultSortDirection" ], "rule": "List views of entities MUST use DataTable, not raw . Exception: list pages with complex nested sections (like PresetsListPage grouping by theme) may use raw
INSIDE a .card section for each group." }, "EntityCard": { "importFrom": "@/components/ui/EntityCard", "props": [ "avatar", "title", "subtitle", "description", "stats", "badge", "links", "actions", "tags", "onClick", "customHeader", "customBody", "customFooter" ], "rule": "Grid-of-cards views (dashboards, gallery lists) use EntityCard." }, "Loader2": { "importFrom": "lucide-react", "rule": "Loading indicator MUST be Loader2 with animate-spin. No custom spinners." } }, "extensionPattern": { "slotsPerEntity": [ "{entity}.header.actions", "{entity}.table.columns.before", "{entity}.table.columns.after", "{entity}.form.fields.before", "{entity}.form.fields.after", "{entity}.card.content", "{entity}.detail.header", "{entity}.detail.sidebar" ], "hooks": [ "onPageLoad", "onBeforeSave", "onAfterSave", "onFormSubmit" ], "source": "D:/01 - projets/SmartStack.app/features/customisation-ui/web/smartstack-web/src/extensions/README.md" }, "hardRules": [ { "id": "R1-pagetemplate", "description": "Every page MUST wrap its content in from @/components/ui/PageTemplate.", "violation": "Page returns bare
or
at the root instead of .", "autoFixable": true, "severity": "error" }, { "id": "R2-no-hex-colors", "description": "Color values in className MUST use var(--token-name) syntax. Inline style='background: #xxxxxx' is allowed only for dynamically computed accent shades.", "violation": "Hex hex values in className attributes (e.g. className=\"bg-[#6366f1]\"). Only var(--…) allowed.", "autoFixable": false, "severity": "warning" }, { "id": "R3-primary-cta", "description": "Primary CTA buttons MUST use the .btn .btn-primary helper class — the theme owns the accent fill, hover, text colour, radius and padding. A raw Tailwind colour on a button (bg-blue-500, …) is fixed by switching it to the helper, not by swapping in an inline accent token (re-assembling the CTA inline is itself a violation — see R21).", "violation": "Primary action uses an arbitrary colour on a
. Exception: nested tables inside .card sections (grouped lists like PresetsListPage).", "violation": "A list view renders
at the top level when a flat list could use .", "autoFixable": false, "severity": "info" }, { "id": "R9-useparams-nullcheck", "description": "useParams<{ id: string }>() result MUST be null-checked. If id is missing, navigate back to the parent list route.", "violation": "const { id } = useParams(); api.get(`/x/${id}`); — missing !id guard + navigate.", "autoFixable": false, "severity": "error" }, { "id": "R10-permission-key-format", "description": "PermissionGuard keys use format {module}.{section}.{action} (read/create/update/delete). NO appCode prefix.", "violation": "permission=\"myapp.hrm.employees.read\" (appCode prefix forbidden) or permission=\"hrm_employees_read\" (underscores forbidden).", "autoFixable": true, "severity": "error" }, { "id": "R11-slot-anatomy", "description": "Pages SHOULD expose Slot/Fill injection points: {entity}.header.actions, {entity}.table.columns.before/after, {entity}.form.fields.before/after, {entity}.detail.header/sidebar, {entity}.card.content.", "violation": "Generated page does not import Slot from @atlashub/smartstack or does not render any slot.", "autoFixable": true, "severity": "info" }, { "id": "R12-darktheme-base", "description": "Dark theme MUST reference var(--bg-app) which resolves to #161618, NOT #0a0a0a or pure black. This is a design-system hard rule.", "violation": "Inline dark mode color #000000 or #0a0a0a.", "autoFixable": false, "severity": "warning" }, { "id": "R13-badge-anatomy", "description": "Status badges use inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider rounded bg-[var(---bg)] text-[var(---text)] border border-[var(---border)]. Or the .badge- helper class.", "violation": "Status badge uses bg-green-500 text-white or similar Tailwind arbitrary colors.", "autoFixable": true, "severity": "warning" }, { "id": "R14-no-hardcoded-colors", "description": "Saturated/semantic colors MUST use design tokens — anywhere in className, not only buttons/badges/banners. Every Tailwind brand/status color utility (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) on any prefix (bg, text, border, ring, fill, stroke, outline, divide, decoration, placeholder, caret, accent, from, via, to) must map to var(---bg|text|border) or var(--color-accent-). This is the general net that complements the context-specific R3/R7/R13.", "violation": "className contains a saturated Tailwind color utility, e.g. text-blue-600, bg-emerald-500, border-rose-400, ring-indigo-500.", "autoFixable": true, "severity": "error" }, { "id": "R15-no-neutral-hardcoded-colors", "description": "Neutral colors SHOULD use theme surface tokens. Tailwind neutral families (slate, gray, zinc, neutral, stone) plus white/black are tokenised only for SURFACES (var(--bg-app|card|muted)) — bg-* utilities are auto-fixed. Neutral text/border have NO token in the current theme: they are reported for manual review (tokenise them in scaffold-theme, or accept them as idiomatic neutrals).", "violation": "className contains a neutral Tailwind color utility, e.g. text-gray-500, bg-slate-100, border-zinc-200, bg-white, text-black.", "autoFixable": true, "severity": "warning" }, { "id": "R16-token-role-misuse", "description": "Status tokens carry fixed roles: ---bg is a PALE surface, ---text is a SATURATED foreground, ---border is a mid tint, ---dot is a saturated indicator. Each must be used in its role. A -text token used as a background (bg-[var(---text)]) is illegible — content disappears, especially in dark mode; a -bg token used as text (text-[var(---bg)]) is invisible. The fix flips the misused token back to its role. When the element is a badge or banner, complete the soft triplet bg-[var(---bg)] text-[var(---text)] border-[var(---border)] manually. This catches a class of bug that R14 cannot — the colour is already a var(--token), so it is neither a hex (R2) nor a Tailwind family (R14): the token is simply bound to the wrong utility.", "violation": "A status token is bound to the wrong utility prefix: bg-[var(---text)] (saturated text colour used as a fill) or text-[var(---bg)] (pale surface colour used as text).", "autoFixable": true, "severity": "error" }, { "id": "R17-status-token-as-decoration", "description": "Status tokens (--success, --warning, --error, --info) carry FIXED MEANING — ok / caution / bad / neutral-info. They must signal real status, never serve as a decorative or categorical palette. Misuse is semantic, not mechanical: the value is already a var(--token) bound to the correct utility, so R2 (hex), R14 (Tailwind family) and R16 (utility role) all stay silent. The tell-tale is a color map whose decorative keys (blue, green, yellow, purple, …) are aliased to status tokens — e.g. const colorClasses = { blue: 'bg-[var(--info-bg)]', green: 'bg-[var(--success-bg)]', yellow: 'bg-[var(--warning-bg)]' } used to colour neutral metric/stat cards. A count of tenants rendered with --warning reads as an alert; a count rendered with --success implies success. Fix by reserving status tokens for real status (an active/inactive badge, a validation banner) and colouring decorative categories with var(--color-accent-) or a neutral surface (var(--bg-secondary)) instead. Not auto-fixable: choosing the right decorative token per category is a semantic decision the engine cannot make. Decorative keys mapped to var(--color-accent-*) or var(--bg-*) are correct and NOT flagged.", "violation": "A decorative/categorical color-name key (blue, green, yellow, purple, …) is mapped to a status token value containing var(---…), i.e. a status token used purely for its hue on non-status content.", "autoFixable": false, "severity": "warning" }, { "id": "R18-colors-outside-classname", "description": "Tailwind color utilities appearing in JS data structures (string literals, object values, array elements) outside className attributes indicate hardcoded colors that escape the className-scoped R14/R15 scanners. These typically appear in config objects, option arrays, or conditional maps like { selectedBorder: 'border-gray-500' } and render with a hardcoded color even though no className violation fires.", "violation": "A string literal outside any className attribute contains a Tailwind color utility (bg-blue-500, text-red-300, border-gray-200, etc.).", "autoFixable": false, "severity": "warning" }, { "id": "R19-hex-in-inline-style", "description": "Hex colors (#xxx, #xxxxxx), rgb(), or rgba() values in inline style={{ }} props bypass the design token system entirely. These colors cannot respond to theme changes or dark mode toggling. Use CSS variable tokens via className (bg-[var(--token)]) or import the token value from the theme for dynamic styling.", "violation": "An inline style={{ }} prop contains a hex color (#xxx/#xxxxxx), rgb() or rgba() value bound to a color CSS property (backgroundColor, color, borderColor, fill, stroke).", "autoFixable": false, "severity": "warning" }, { "id": "R20-accent-overuse", "description": "Accent tokens used on non-CTA elements (cards, sections, headers) create visual noise — every surface competes for attention and nothing reads as the primary action. Patterns: (A) thick accent border (border-2+) on a card/container, (B) pale accent-50/100 as section/header background instead of var(--bg-secondary), (C) full accent fill (shade >= 500) on a non-button element. Reserve full accent for buttons/CTAs.", "violation": "An accent token (var(--color-accent-*)) is used in a visually heavy way on a non-button element: thick border, section background, or full fill.", "autoFixable": false, "severity": "warning" }, { "id": "R21-cta-inline-bypass", "description": "Primary CTA buttons MUST use the .btn .btn-primary helper class. The platform theme owns the accent fill, hover, text colour, radius and padding — re-assembling them inline (bg-[var(--color-accent-500|600)] text-white hover:… rounded-[var(--radius-button)]) drifts between pages, skips dark handling and bypasses the single source of truth. Project-aware: only fires when the project ships .btn-primary (the platform baseline does). Auto-fix prepends `btn btn-primary` and strips the helper-owned colour utilities; the apply-diff review tidies any residual spacing. Complements R20 (the same fill on a NON-button element is overuse).", "violation": "A