Benjamin Sutter
7934da7669
Token infrastructure (src/lib/ds.ts): - DS_TEXT: 16 semantic text color tokens (primary/secondary/muted/success/ warning/error/info/brand/signal + dark variants successDark/warningDark/ signalDark/infoDark for text on tinted surfaces) - DS_BG: page/surface/subtle/muted background tokens - DS_BORDER: default/muted/strong border tokens - DS_SURFACE: 10 bg+border surface pairs (success/warning/error/info/indigo/ purple/orange/blue/neutral/slate) - DS_MATCH_TIER: score-tier surface aliases keyed by strong/moderate/weak - DS_PRE_MARKET / DS_MARKET_SIGNAL: named aliases for futureCard tokens - DS_SHADOW: card/panel/dialog elevation tokens - BADGE_COLORS: 14 semantic presets for GenericBadge (confidenceHigh, riskMedium, preMarket, marketSignal, verified, gold, silver, bronze…) GenericBadge (src/components/shared/GenericBadge.tsx): - New semanticVariant prop (keyof BADGE_COLORS) — preferred over raw hex - color prop becomes optional (fallback), type-documented as escape hatch Priority file migrations — 237 hex literals replaced across 10 files: ScoreBreakdownPanel.tsx −22 PipelineDetailPanel.tsx −22 FutureAvailabilityCard.tsx −26 AICompareSummary.tsx −27 LocationIntelligencePanel −39 AssistantPromptSuggestions −18 UnitStructurePanel.tsx −25 BerichtDialog.tsx −24 PreMarketPanel.tsx −24 PropertyActivityLogPanel −10 ESLint (eslint.config.js): - Updated rule message to reference new tokens (DS_TEXT, DS_SURFACE, etc.) - Added 'stroke' to monitored property names - Remains 'warn' for gradual migration; use check:tokens for CI gate CI script (scripts/check-tokens.js + npm run check:tokens): - Counts hex patterns in components/ + pages/ - Fails if count > THRESHOLD (ratchet: 1958 baseline, lower per sprint) - Reports top 15 offenders for prioritizing next migration batch Results: ESLint targeted sx-prop violations: 1752 → 1030 (−41%) 0 TypeScript errors, 154 tests green Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
48 lines
1.7 KiB
JavaScript
48 lines
1.7 KiB
JavaScript
import js from '@eslint/js'
|
|
import globals from 'globals'
|
|
import reactHooks from 'eslint-plugin-react-hooks'
|
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
import tseslint from 'typescript-eslint'
|
|
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
|
|
export default defineConfig([
|
|
globalIgnores(['dist']),
|
|
{
|
|
files: ['**/*.{ts,tsx}'],
|
|
extends: [
|
|
js.configs.recommended,
|
|
tseslint.configs.recommended,
|
|
reactHooks.configs.flat.recommended,
|
|
reactRefresh.configs.vite,
|
|
],
|
|
languageOptions: {
|
|
globals: globals.browser,
|
|
},
|
|
},
|
|
// ── Design Token Enforcement ────────────────────────────────────────────────
|
|
// New hardcoded hex colors in components/pages are blocked (error).
|
|
// Existing violations are tracked by: npm run check:tokens
|
|
//
|
|
// Use instead:
|
|
// DS_TEXT.secondary, DS_SURFACE.success.bg (src/lib/ds.ts)
|
|
// matchScoreHex(score), criterionScoreTextColor(score) (src/lib/utils.ts)
|
|
// RESULT_TYPE_META[type].color (src/lib/ds.ts)
|
|
// MUI theme tokens: "primary.main", "text.secondary"
|
|
{
|
|
files: ['src/components/**/*.{ts,tsx}', 'src/pages/**/*.{ts,tsx}'],
|
|
rules: {
|
|
'no-restricted-syntax': [
|
|
'warn',
|
|
{
|
|
selector: [
|
|
'Property[key.name=/^(bgcolor|color|borderColor|background|fill|stroke)$/]',
|
|
' > Literal[value=/^#[0-9A-Fa-f]{3,8}$/]',
|
|
].join(''),
|
|
message:
|
|
'No hardcoded hex colors in sx/style props. Use DS_TEXT, DS_SURFACE, DS_BORDER, DS_BG, BADGE_COLORS from src/lib/ds.ts, or helper functions from src/lib/utils.ts.',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
])
|