@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/mcp/server.ts

@@ -13,6 +13,7 @@ import {
   type VerifyResult,
   type Theme,
 } from '../core/index.js';
+import { buildMcpTools, buildToolNames, CLI_TOOL_EXTENSIONS } from '@fragments-sdk/context/mcp-tools';
 // ../service is lazy-imported to avoid requiring playwright at startup.
 // Visual tools (render, fix) load it on first use.
 type ServiceModule = typeof import('../service/index.js');
@@ -36,17 +37,17 @@ import { createRequire } from 'node:module';
 import { projectFields } from './utils.js';
 
 /**
- * MCP Tool names - derived from BRAND constants
+ * MCP Tool names & definitions (from shared source of truth)
  */
-const TOOL_NAMES = {
-  discover: `${BRAND.nameLower}_discover`,
-  inspect: `${BRAND.nameLower}_inspect`,
-  blocks: `${BRAND.nameLower}_blocks`,
-  tokens: `${BRAND.nameLower}_tokens`,
-  implement: `${BRAND.nameLower}_implement`,
-  render: `${BRAND.nameLower}_render`,
-  fix: `${BRAND.nameLower}_fix`,
-} as const;
+const TOOL_NAMES = buildToolNames(BRAND.nameLower) as Record<string, string> & {
+  discover: string;
+  inspect: string;
+  blocks: string;
+  tokens: string;
+  implement: string;
+  render: string;
+  fix: string;
+};
 
 /**
  * Placeholder patterns to filter out from usage text.
@@ -278,215 +279,7 @@ export interface McpServerConfig {
   threshold?: number;
 }
 
-/**
- * Tool definitions for the MCP server — 5 consolidated tools
- */
-const TOOLS: Tool[] = [
-  {
-    name: TOOL_NAMES.discover,
-    description: `Discover components in the design system. Use with no params to list all components. Use 'useCase' for AI-powered suggestions. Use 'component' to find alternatives. Use 'compact' for a token-efficient overview.`,
-    inputSchema: {
-      type: 'object' as const,
-      properties: {
-        useCase: {
-          type: 'string',
-          description: 'Description of what you want to build — returns ranked suggestions (e.g., "form for user email input", "button to submit data")',
-        },
-        component: {
-          type: 'string',
-          description: 'Component name to find alternatives for (e.g., "Button")',
-        },
-        category: {
-          type: 'string',
-          description: 'Filter by category (e.g., "actions", "forms", "layout")',
-        },
-        search: {
-          type: 'string',
-          description: 'Search term to filter by name, description, or tags',
-        },
-        status: {
-          type: 'string',
-          enum: ['stable', 'beta', 'deprecated', 'experimental'],
-          description: 'Filter by component status',
-        },
-        format: {
-          type: 'string',
-          enum: ['markdown', 'json'],
-          description: 'Output format for context mode (default: markdown)',
-        },
-        compact: {
-          type: 'boolean',
-          description: 'If true, returns minimal output (just component names and categories)',
-        },
-        includeCode: {
-          type: 'boolean',
-          description: 'If true, includes code examples for each variant',
-        },
-        includeRelations: {
-          type: 'boolean',
-          description: 'If true, includes component relationships',
-        },
-      },
-    },
-  },
-  {
-    name: TOOL_NAMES.inspect,
-    description: `Get detailed information about a specific component: props, usage guidelines, code examples, accessibility — all in one call. Use 'fields' to request only specific data for token efficiency.`,
-    inputSchema: {
-      type: 'object' as const,
-      properties: {
-        component: {
-          type: 'string',
-          description: 'Component name (e.g., "Button", "Input")',
-        },
-        fields: {
-          type: 'array',
-          items: { type: 'string' },
-          description: 'Specific fields to return (e.g., ["meta", "usage.when", "contract.propsSummary", "props", "examples", "guidelines"]). If omitted, returns everything. Supports dot notation.',
-        },
-        variant: {
-          type: 'string',
-          description: 'Filter examples to a specific variant name (e.g., "Default", "Primary")',
-        },
-        maxExamples: {
-          type: 'number',
-          description: 'Maximum number of code examples to return (default: all)',
-        },
-        maxLines: {
-          type: 'number',
-          description: 'Maximum lines per code example (truncates longer examples)',
-        },
-      },
-      required: ['component'],
-    },
-  },
-  {
-    name: TOOL_NAMES.blocks,
-    description: `Search and retrieve composition blocks — named patterns showing how design system components wire together for common use cases (e.g., "Login Form", "Settings Page"). Returns the block with its code pattern.`,
-    inputSchema: {
-      type: 'object' as const,
-      properties: {
-        name: {
-          type: 'string',
-          description: 'Exact block name to retrieve (e.g., "Login Form")',
-        },
-        search: {
-          type: 'string',
-          description: 'Free-text search across block names, descriptions, tags, and components',
-        },
-        component: {
-          type: 'string',
-          description: 'Filter blocks that use a specific component (e.g., "Button")',
-        },
-        category: {
-          type: 'string',
-          description: 'Filter by category (e.g., "authentication", "marketing", "dashboard", "settings", "ecommerce", "ai")',
-        },
-      },
-    },
-  },
-  {
-    name: TOOL_NAMES.tokens,
-    description: `List available CSS design tokens (custom properties) by category. Use this when you need to style custom elements or override defaults — no more guessing variable names. Filter by category or search by keyword.`,
-    inputSchema: {
-      type: 'object' as const,
-      properties: {
-        category: {
-          type: 'string',
-          description: 'Filter by category (e.g., "colors", "spacing", "typography", "surfaces", "shadows", "radius", "borders", "text", "focus", "layout", "code", "component-sizing")',
-        },
-        search: {
-          type: 'string',
-          description: 'Search token names (e.g., "accent", "hover", "padding")',
-        },
-      },
-    },
-  },
-  {
-    name: TOOL_NAMES.implement,
-    description: `One-shot implementation helper. Describe what you want to build and get everything needed in a single call: best-matching component(s) with full props and code examples, relevant composition blocks, and applicable CSS tokens. Saves multiple round-trips.`,
-    inputSchema: {
-      type: 'object' as const,
-      properties: {
-        useCase: {
-          type: 'string',
-          description: 'What you want to implement (e.g., "login form", "data table with sorting", "streaming chat messages")',
-        },
-      },
-      required: ['useCase'],
-    },
-  },
-  {
-    name: TOOL_NAMES.render,
-    description: `Render a component and return a screenshot. Optionally compare against a stored baseline ('baseline: true') or against a Figma design ('figmaUrl'). Use this to verify your implementation looks correct.`,
-    inputSchema: {
-      type: 'object' as const,
-      properties: {
-        component: {
-          type: 'string',
-          description: 'Component name (e.g., "Button", "Card", "Input")',
-        },
-        variant: {
-          type: 'string',
-          description: 'Variant name for baseline/compare modes',
-        },
-        props: {
-          type: 'object',
-          description: 'Props to pass to the component (e.g., { "variant": "primary", "children": "Click me" })',
-        },
-        viewport: {
-          type: 'object',
-          properties: {
-            width: { type: 'number', description: 'Viewport width (default: 800)' },
-            height: { type: 'number', description: 'Viewport height (default: 600)' },
-          },
-          description: 'Optional viewport size for the render',
-        },
-        baseline: {
-          type: 'boolean',
-          description: 'If true, compares the render against the stored baseline screenshot (requires variant)',
-        },
-        figmaUrl: {
-          type: 'string',
-          description: 'Figma frame URL — if provided, compares the render against the Figma design',
-        },
-        theme: {
-          type: 'string',
-          enum: ['light', 'dark'],
-          description: 'Theme for baseline verification (default: light)',
-        },
-        threshold: {
-          type: 'number',
-          description: 'Diff threshold percentage (default: 5 for baseline, 1 for Figma)',
-        },
-      },
-      required: ['component'],
-    },
-  },
-  {
-    name: TOOL_NAMES.fix,
-    description: `Generate patches to fix token compliance issues in a component. Returns unified diff patches that replace hardcoded CSS values with design token references. Use this after fragments_render identifies issues to automatically fix them.`,
-    inputSchema: {
-      type: 'object' as const,
-      properties: {
-        component: {
-          type: 'string',
-          description: 'Component name to generate fixes for (e.g., "Button", "Card")',
-        },
-        variant: {
-          type: 'string',
-          description: 'Specific variant to fix (optional, fixes all variants if omitted)',
-        },
-        fixType: {
-          type: 'string',
-          enum: ['token', 'all'],
-          description: 'Type of fixes to generate: "token" for hardcoded→token replacements, "all" for all available fixes (default: "all")',
-        },
-      },
-      required: ['component'],
-    },
-  },
-];
+const TOOLS = buildMcpTools(BRAND.nameLower, CLI_TOOL_EXTENSIONS) as Tool[];
 
 /**
  * Create and configure the MCP server
@@ -1231,7 +1024,7 @@ export function createMcpServer(config: McpServerConfig): Server {
           }
 
           // Filter by category and/or search
-          let filteredCategories: Record<string, Array<{ name: string; description?: string }>> = {};
+          const filteredCategories: Record<string, Array<{ name: string; description?: string }>> = {};
           let filteredTotal = 0;
 
           for (const [cat, tokens] of Object.entries(tokenData.categories)) {

package/src/theme/__tests__/component-contrast.test.ts

@@ -0,0 +1,338 @@
+/**
+ * Component Color Contrast Tests — Seed-Based Theme System
+ *
+ * Validates WCAG 2.1 contrast ratios between CSS custom property pairings
+ * (--fui-text-*, --fui-bg-*, --fui-color-*) across all 5 neutral palettes
+ * (Wind, Ice, Earth, Sand, Fire) in both light and dark modes.
+ *
+ * Token values are derived from the seed-derivation system — the same
+ * derivation functions that produce the runtime CSS custom properties.
+ * No hardcoded hex values: everything flows from PALETTES + DEFAULT_SEEDS.
+ */
+
+import { describe, it, expect } from 'vitest';
+import {
+  PALETTES,
+  PALETTE_SEMANTIC_COLORS,
+  DEFAULT_SEEDS,
+  deriveText,
+  deriveSurfaces,
+  deriveSemanticBg,
+  deriveSemanticText,
+  deriveDarkAccent,
+  hexToRgb,
+} from '@fragments/seed-derivation';
+import type { NeutralPalette } from '@fragments/seed-derivation';
+import {
+  parseColor,
+  contrastRatio,
+  meetsAA,
+  meetsAAA,
+} from '../contrast.js';
+import type { RGB } from '../contrast.js';
+
+// ── Fixed tokens (from libs/ui/src/tokens/_variables.scss, not seed-derived) ─
+
+const FIXED_TOKENS = {
+  '--fui-tooltip-text': '$fui-tooltip-text',
+  '--fui-tooltip-bg': '$fui-tooltip-bg',
+  '--fui-code-text': '$fui-code-text',
+  '--fui-code-text-muted': '$fui-code-text-muted',
+  '--fui-code-bg': '$fui-code-bg',
+} as const;
+
+// These SCSS defaults are not seed-derived — they're the same across all palettes.
+// Values sourced from libs/ui/src/tokens/_variables.scss lines 337-356.
+const SCSS_DEFAULTS: Record<(typeof FIXED_TOKENS)[keyof typeof FIXED_TOKENS], string> = {
+  '$fui-tooltip-text': '#f8fafc',
+  '$fui-tooltip-bg': '#1e293b',
+  '$fui-code-text': '#d4d4d4',
+  '$fui-code-text-muted': '#6b7280',
+  '$fui-code-bg': '#1e1e1e',
+};
+
+function fixedToken(varName: keyof typeof FIXED_TOKENS): string {
+  return SCSS_DEFAULTS[FIXED_TOKENS[varName]];
+}
+
+// ── Token derivation (mirrors CSS custom property output) ────────────────────
+
+interface TokenMap {
+  '--fui-text-primary': string;
+  '--fui-text-secondary': string;
+  '--fui-text-tertiary': string;
+  '--fui-text-inverse': string;
+  '--fui-bg-primary': string;
+  '--fui-bg-secondary': string;
+  '--fui-bg-tertiary': string;
+  '--fui-bg-elevated': string;
+  '--fui-color-accent': string;
+  '--fui-color-danger': string;
+  '--fui-color-success': string;
+  '--fui-color-warning': string;
+  '--fui-color-info': string;
+  '--fui-color-danger-bg': string;
+  '--fui-color-success-bg': string;
+  '--fui-color-warning-bg': string;
+  '--fui-color-info-bg': string;
+  '--fui-color-danger-text': string;
+  '--fui-color-success-text': string;
+  '--fui-color-warning-text': string;
+  '--fui-color-info-text': string;
+}
+
+function deriveTokenMap(paletteName: NeutralPalette, brand: string, isDark: boolean): TokenMap {
+  const palette = PALETTES[paletteName];
+  const semantics = PALETTE_SEMANTIC_COLORS[paletteName];
+  const text = deriveText(palette, isDark);
+  const surfaces = deriveSurfaces(palette, isDark, paletteName);
+  const accent = isDark ? deriveDarkAccent(brand) : brand;
+
+  return {
+    '--fui-text-primary': text.primary,
+    '--fui-text-secondary': text.secondary,
+    '--fui-text-tertiary': text.tertiary,
+    '--fui-text-inverse': text.inverse,
+    '--fui-bg-primary': surfaces.primary,
+    '--fui-bg-secondary': surfaces.secondary,
+    '--fui-bg-tertiary': surfaces.tertiary,
+    '--fui-bg-elevated': surfaces.elevated,
+    '--fui-color-accent': accent,
+    '--fui-color-danger': semantics.danger,
+    '--fui-color-success': semantics.success,
+    '--fui-color-warning': semantics.warning,
+    '--fui-color-info': semantics.info,
+    '--fui-color-danger-bg': deriveSemanticBg(semantics.danger, isDark),
+    '--fui-color-success-bg': deriveSemanticBg(semantics.success, isDark),
+    '--fui-color-warning-bg': deriveSemanticBg(semantics.warning, isDark),
+    '--fui-color-info-bg': deriveSemanticBg(semantics.info, isDark),
+    '--fui-color-danger-text': deriveSemanticText(semantics.danger, isDark),
+    '--fui-color-success-text': deriveSemanticText(semantics.success, isDark),
+    '--fui-color-warning-text': deriveSemanticText(semantics.warning, isDark),
+    '--fui-color-info-text': deriveSemanticText(semantics.info, isDark),
+  };
+}
+
+// ── Contrast helpers ─────────────────────────────────────────────────────────
+
+function compositeRgba(rgba: string, bgHex: string): RGB {
+  const match = rgba.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/);
+  if (!match) throw new Error(`Cannot parse rgba: ${rgba}`);
+  const fg = { r: +match[1], g: +match[2], b: +match[3] };
+  const alpha = match[4] !== undefined ? parseFloat(match[4]) : 1;
+  const bg = parseColor(bgHex);
+  return {
+    r: Math.round(fg.r * alpha + bg.r * (1 - alpha)),
+    g: Math.round(fg.g * alpha + bg.g * (1 - alpha)),
+    b: Math.round(fg.b * alpha + bg.b * (1 - alpha)),
+  };
+}
+
+function ratio(fg: string, bg: string): number {
+  return contrastRatio(parseColor(fg), parseColor(bg));
+}
+
+function ratioOnComposite(fgHex: string, rgbaBg: string, baseHex: string): number {
+  return contrastRatio(parseColor(fgHex), compositeRgba(rgbaBg, baseHex));
+}
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+const PALETTE_NAMES: NeutralPalette[] = ['wind', 'ice', 'earth', 'sand', 'fire'];
+const brand = DEFAULT_SEEDS.brand;
+
+for (const paletteName of PALETTE_NAMES) {
+  const light = deriveTokenMap(paletteName, brand, false);
+  const dark = deriveTokenMap(paletteName, brand, true);
+
+  describe(`${paletteName} palette — Light Mode`, () => {
+    describe('text hierarchy on --fui-bg-primary', () => {
+      it('--fui-text-primary on --fui-bg-primary meets AA', () => {
+        expect(meetsAA(ratio(light['--fui-text-primary'], light['--fui-bg-primary']))).toBe(true);
+      });
+
+      it('--fui-text-secondary on --fui-bg-primary meets 3:1 (UI text minimum)', () => {
+        expect(ratio(light['--fui-text-secondary'], light['--fui-bg-primary'])).toBeGreaterThanOrEqual(3.0);
+      });
+
+      it('--fui-text-tertiary on --fui-bg-primary has visible contrast', () => {
+        expect(ratio(light['--fui-text-tertiary'], light['--fui-bg-primary'])).toBeGreaterThanOrEqual(1.0);
+      });
+    });
+
+    describe('text on alternate surfaces', () => {
+      it('--fui-text-primary on --fui-bg-secondary meets AA', () => {
+        expect(meetsAA(ratio(light['--fui-text-primary'], light['--fui-bg-secondary']))).toBe(true);
+      });
+
+      it('--fui-text-primary on --fui-bg-tertiary meets AA', () => {
+        expect(meetsAA(ratio(light['--fui-text-primary'], light['--fui-bg-tertiary']))).toBe(true);
+      });
+
+      it('--fui-text-primary on --fui-bg-elevated meets AA', () => {
+        expect(meetsAA(ratio(light['--fui-text-primary'], light['--fui-bg-elevated']))).toBe(true);
+      });
+
+      it('--fui-text-secondary on --fui-bg-elevated meets 3:1', () => {
+        expect(ratio(light['--fui-text-secondary'], light['--fui-bg-elevated'])).toBeGreaterThanOrEqual(3.0);
+      });
+    });
+
+    describe('Button', () => {
+      it('--fui-text-inverse on --fui-color-accent meets 3:1 (large text / bold buttons)', () => {
+        expect(ratio(light['--fui-text-inverse'], light['--fui-color-accent'])).toBeGreaterThanOrEqual(3.0);
+      });
+
+      it('--fui-text-primary on --fui-bg-secondary (secondary button) meets AA', () => {
+        expect(meetsAA(ratio(light['--fui-text-primary'], light['--fui-bg-secondary']))).toBe(true);
+      });
+    });
+
+    describe('Card', () => {
+      it('--fui-text-primary on --fui-bg-elevated (title/body) meets AA', () => {
+        expect(meetsAA(ratio(light['--fui-text-primary'], light['--fui-bg-elevated']))).toBe(true);
+      });
+
+      it('--fui-text-secondary on --fui-bg-elevated (description) meets 3:1', () => {
+        expect(ratio(light['--fui-text-secondary'], light['--fui-bg-elevated'])).toBeGreaterThanOrEqual(3.0);
+      });
+    });
+
+    describe('semantic text on semantic bg (Badge, Alert)', () => {
+      it('--fui-color-danger-text on composited --fui-color-danger-bg meets AA', () => {
+        expect(ratioOnComposite(
+          light['--fui-color-danger-text'], light['--fui-color-danger-bg'], light['--fui-bg-primary']
+        )).toBeGreaterThanOrEqual(4.5);
+      });
+
+      it('--fui-color-success-text on composited --fui-color-success-bg meets AA', () => {
+        expect(ratioOnComposite(
+          light['--fui-color-success-text'], light['--fui-color-success-bg'], light['--fui-bg-primary']
+        )).toBeGreaterThanOrEqual(4.5);
+      });
+
+      it('--fui-color-warning-text on composited --fui-color-warning-bg meets AA', () => {
+        expect(ratioOnComposite(
+          light['--fui-color-warning-text'], light['--fui-color-warning-bg'], light['--fui-bg-primary']
+        )).toBeGreaterThanOrEqual(4.5);
+      });
+
+      it('--fui-color-info-text on composited --fui-color-info-bg meets AA', () => {
+        expect(ratioOnComposite(
+          light['--fui-color-info-text'], light['--fui-color-info-bg'], light['--fui-bg-primary']
+        )).toBeGreaterThanOrEqual(4.5);
+      });
+    });
+  });
+
+  describe(`${paletteName} palette — Dark Mode`, () => {
+    describe('text hierarchy on --fui-bg-primary', () => {
+      it('--fui-text-primary on --fui-bg-primary meets AA', () => {
+        expect(meetsAA(ratio(dark['--fui-text-primary'], dark['--fui-bg-primary']))).toBe(true);
+      });
+
+      it('--fui-text-secondary on --fui-bg-primary meets 3:1', () => {
+        expect(ratio(dark['--fui-text-secondary'], dark['--fui-bg-primary'])).toBeGreaterThanOrEqual(3.0);
+      });
+
+      it('--fui-text-tertiary on --fui-bg-primary has visible contrast', () => {
+        expect(ratio(dark['--fui-text-tertiary'], dark['--fui-bg-primary'])).toBeGreaterThanOrEqual(1.0);
+      });
+    });
+
+    describe('text on alternate surfaces', () => {
+      it('--fui-text-primary on --fui-bg-secondary meets AA', () => {
+        expect(meetsAA(ratio(dark['--fui-text-primary'], dark['--fui-bg-secondary']))).toBe(true);
+      });
+
+      it('--fui-text-primary on --fui-bg-elevated meets AA', () => {
+        expect(meetsAA(ratio(dark['--fui-text-primary'], dark['--fui-bg-elevated']))).toBe(true);
+      });
+    });
+
+    describe('Button (dark)', () => {
+      it('--fui-text-inverse on --fui-color-accent meets 3:1', () => {
+        expect(ratio(dark['--fui-text-inverse'], dark['--fui-color-accent'])).toBeGreaterThanOrEqual(3.0);
+      });
+    });
+
+    describe('Card (dark)', () => {
+      it('--fui-text-primary on --fui-bg-elevated meets AA', () => {
+        expect(meetsAA(ratio(dark['--fui-text-primary'], dark['--fui-bg-elevated']))).toBe(true);
+      });
+
+      it('--fui-text-secondary on --fui-bg-elevated meets 3:1', () => {
+        expect(ratio(dark['--fui-text-secondary'], dark['--fui-bg-elevated'])).toBeGreaterThanOrEqual(3.0);
+      });
+    });
+
+    describe('semantic text on semantic bg (dark)', () => {
+      it('--fui-color-danger-text on composited --fui-color-danger-bg meets AA', () => {
+        expect(ratioOnComposite(
+          dark['--fui-color-danger-text'], dark['--fui-color-danger-bg'], dark['--fui-bg-primary']
+        )).toBeGreaterThanOrEqual(4.5);
+      });
+
+      it('--fui-color-success-text on composited --fui-color-success-bg meets AA', () => {
+        expect(ratioOnComposite(
+          dark['--fui-color-success-text'], dark['--fui-color-success-bg'], dark['--fui-bg-primary']
+        )).toBeGreaterThanOrEqual(4.5);
+      });
+
+      it('--fui-color-warning-text on composited --fui-color-warning-bg meets AA', () => {
+        expect(ratioOnComposite(
+          dark['--fui-color-warning-text'], dark['--fui-color-warning-bg'], dark['--fui-bg-primary']
+        )).toBeGreaterThanOrEqual(4.5);
+      });
+
+      it('--fui-color-info-text on composited --fui-color-info-bg meets AA', () => {
+        expect(ratioOnComposite(
+          dark['--fui-color-info-text'], dark['--fui-color-info-bg'], dark['--fui-bg-primary']
+        )).toBeGreaterThanOrEqual(4.5);
+      });
+    });
+  });
+}
+
+describe('Cross-palette contrast report', () => {
+  for (const paletteName of PALETTE_NAMES) {
+    const light = deriveTokenMap(paletteName, brand, false);
+    const dark = deriveTokenMap(paletteName, brand, true);
+
+    it(`${paletteName} light — --fui-text-primary on --fui-bg-primary`, () => {
+      const r = ratio(light['--fui-text-primary'], light['--fui-bg-primary']);
+      console.log(`  ${paletteName} light: ${light['--fui-text-primary']} on ${light['--fui-bg-primary']} = ${r.toFixed(2)}:1`);
+      expect(meetsAA(r)).toBe(true);
+    });
+
+    it(`${paletteName} dark — --fui-text-primary on --fui-bg-primary`, () => {
+      const r = ratio(dark['--fui-text-primary'], dark['--fui-bg-primary']);
+      console.log(`  ${paletteName} dark: ${dark['--fui-text-primary']} on ${dark['--fui-bg-primary']} = ${r.toFixed(2)}:1`);
+      expect(meetsAA(r)).toBe(true);
+    });
+
+    it(`${paletteName} light — --fui-text-inverse on --fui-color-accent`, () => {
+      const r = ratio(light['--fui-text-inverse'], light['--fui-color-accent']);
+      const aa = meetsAA(r);
+      const aaLarge = meetsAA(r, true);
+      console.log(
+        `  ${paletteName}: ${light['--fui-text-inverse']} on ${light['--fui-color-accent']} = ${r.toFixed(2)}:1 — ${aa ? 'PASS AA' : aaLarge ? 'PASS large' : 'FAIL'}`
+      );
+      expect(r).toBeGreaterThanOrEqual(1.0);
+    });
+  }
+});
+
+describe('Fixed-token components', () => {
+  it('--fui-tooltip-text on --fui-tooltip-bg meets AAA', () => {
+    expect(meetsAAA(ratio(fixedToken('--fui-tooltip-text'), fixedToken('--fui-tooltip-bg')))).toBe(true);
+  });
+
+  it('--fui-code-text on --fui-code-bg meets AA', () => {
+    expect(meetsAA(ratio(fixedToken('--fui-code-text'), fixedToken('--fui-code-bg')))).toBe(true);
+  });
+
+  it('--fui-code-text-muted on --fui-code-bg meets 3:1', () => {
+    expect(ratio(fixedToken('--fui-code-text-muted'), fixedToken('--fui-code-bg'))).toBeGreaterThanOrEqual(3.0);
+  });
+});