/** * Token Validator * * Validates token usage across SCSS files, enforcing the 3-tier token architecture, * naming conventions, intent matching, theme coverage, and deprecation rules. */ import { HealthIssue } from '../types.js'; import type { TokenTaxonomy } from '../knowledge-graph/token-taxonomy.js'; export declare class TokenValidator { private readonly tokenPatterns; /** * Validate a single SCSS file for token usage violations. * * Token rules are CSS-domain rules: they only make sense for style sources * (`.scss` / `.css`). The validator MUST NOT be run against `.ts` / `.tsx` / * `.html`, because `scss.parse` (postcss) chokes on the first non-CSS token — * `import { html …` in a Lit component parses as `:1:10: Unknown * word html`, and `
; /** * Validate all SCSS files in a directory */ validateDirectory(dirPath: string, taxonomy: TokenTaxonomy): Promise; /** * Check for raw color, spacing, and font values. * * Rules of the road (#1023 — this is the gating magic-number lint): * - px values are flagged ANYWHERE in a declaration value, including * shorthand/multi-value forms (`padding: 4px 8px;`, `border: 2px solid x`), * not just single-value `prop: NNpx;` declarations. * - `1px` (and fractional sub-pixel values ≤ 1px) is allowlisted — hairline * borders/dividers are legitimate geometry, not spacing drift. * - Values inside `var(...)` are never flagged: a fallback like * `var(--ed-spacing-md, 9px)` mirrors the token and is a legitimate * defensive pattern, not a bypass. * - A line carrying an `ed-raw-value-ok` comment marker is skipped entirely. * Use it (with a reason) for intentional geometry the token scale cannot * express — CSS-triangle borders, focus-ring offsets, icon-internal * geometry: `outline-offset: 2px; // ed-raw-value-ok: focus-ring geometry` * - `font-family` inside an `@font-face` block is exempt: the descriptor is * definitional — it NAMES the font being registered (there is no token to * reference yet). Only usage sites (`font-family:` on selectors) must go * through --ed-typography-font-* tokens. */ private checkRawValues; /** * Remove `var( ... )` groups (including nested parens like * `var(--ed-x, rgba(0, 0, 0, 0.2))`) from a line of CSS so that fallback * values inside them are not scanned as raw-value violations. */ private stripVarFunctions; /** * Validate that component code uses tier 2+ tokens, not tier 1 directly */ private validateTokenTier; /** * Validate that token usage matches its intent (e.g., don't use background token as text color) */ private validateIntentMatch; /** * Pull the color subcategory ("background" | "content" | "border") out of * a token name like `--ed-theme-color-content-subtle`. Returns undefined * for non-color tokens or color tokens that don't carry a subcategory * segment in the name (definition-tier raw colors, etc.). */ private colorSubcategoryFromTokenName; /** * Bucket a CSS property name into one of the three color subcategory * families. Returns undefined for properties that aren't color-bearing * (we only enforce the rule on color properties; spacing, typography, * etc. take other tokens entirely). * * background-* / background-color → "background" * color, fill, caret-color, accent-color → "content" * border-*-color / outline-*-color → "border" */ private colorPropertyFamily; /** * Check if a token is deprecated */ private checkDeprecation; /** * Check that tokens used in one theme exist in all themes. * * Only checks semantic/component tokens (--ed-theme-*), not definition-tier tokens. * Strips comments before matching. Handles var() fallback values correctly * (e.g. var(--ed-foo, none) extracts only --ed-foo). */ private checkThemeCoverage; } //# sourceMappingURL=token-validator.d.ts.map