@rovula/ui 0.1.6 → 0.1.8

package/src/theme/ThemeColorCoverageRuntime.stories.tsx

@@ -0,0 +1,236 @@
+import React, { useMemo } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { THEME_COLOR_KEYS, getThemeColor } from "../utils/colors";
+
+const meta = {
+  title: "Theme/Color Coverage Runtime",
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta;
+
+export default meta;
+
+type CoverageRow = {
+  key: string;
+  variableName: string;
+  runtimeValue: string;
+  hasRuntimeValue: boolean;
+  canonicalKey: string;
+  isMappedAlias: boolean;
+  isDeprecated: boolean;
+};
+
+const DEPRECATED_KEYS = new Set([
+  "text-dark",
+  "text-medium",
+  "text-light",
+  "text-grey-dark",
+  "text-grey-medium",
+  "text-grey-light",
+  "base-bg",
+  "base-bg2",
+  "base-bg3",
+  "base-workspace-stroke",
+  "base-guideline-stroke",
+  "base-popup",
+  "base-popup-highlight",
+  "base-popup-curtain",
+  "base-popup-foreground",
+  "background",
+  "foreground",
+  "surface",
+  "surface-foreground",
+  "primary-foreground",
+  "secondary-foreground",
+  "tertiary-foreground",
+  "info-foreground",
+  "success-foreground",
+  "warning-foreground",
+  "error-foreground",
+  "grey-foreground",
+  "grey2-foreground",
+  "function-default-outline",
+]);
+const RuntimeCoveragePanel = () => {
+  const rows = useMemo<CoverageRow[]>(() => {
+    const baseRows = Object.entries(THEME_COLOR_KEYS)
+      .map(([key, variableName]) => {
+        const runtimeValue = getThemeColor(variableName);
+        const hasRuntimeValue = runtimeValue.length > 0;
+        const canonicalKey = variableName.replace(/^--/, "");
+
+        return {
+          key,
+          variableName,
+          runtimeValue,
+          hasRuntimeValue,
+          canonicalKey,
+          isMappedAlias: key !== canonicalKey,
+          isDeprecated: DEPRECATED_KEYS.has(key),
+        };
+      })
+      .sort((a, b) => a.key.localeCompare(b.key));
+
+    const existingKeys = new Set(baseRows.map((row) => row.key));
+    const generatedDirectRows = baseRows
+      .filter((row) => row.isMappedAlias)
+      .map((row) => {
+        return {
+          key: row.canonicalKey,
+          variableName: row.variableName,
+          runtimeValue: row.runtimeValue,
+          hasRuntimeValue: row.hasRuntimeValue,
+          canonicalKey: row.canonicalKey,
+          isMappedAlias: false,
+          isDeprecated: false,
+        } satisfies CoverageRow;
+      })
+      .filter((row) => !existingKeys.has(row.key));
+
+    return [...baseRows, ...generatedDirectRows].sort((a, b) =>
+      a.key.localeCompare(b.key),
+    );
+  }, []);
+
+  const activeRows = rows.filter(
+    (row) => !row.isDeprecated && !row.isMappedAlias,
+  );
+  const mappedRows = rows.filter(
+    (row) => !row.isDeprecated && row.isMappedAlias,
+  );
+  const deprecatedRows = rows.filter((row) => row.isDeprecated);
+
+  const missingRuntimeValue = rows.filter((row) => !row.hasRuntimeValue);
+  const activeMissingRuntimeValue = activeRows.filter(
+    (row) => !row.hasRuntimeValue,
+  );
+  const mappedMissingRuntimeValue = mappedRows.filter(
+    (row) => !row.hasRuntimeValue,
+  );
+  const deprecatedMissingRuntimeValue = deprecatedRows.filter(
+    (row) => !row.hasRuntimeValue,
+  );
+  const stateRows = rows.filter((row) =>
+    row.variableName.startsWith("--state-"),
+  );
+  const stateRuntimeMissing = stateRows.filter((row) => !row.hasRuntimeValue);
+
+  const renderTable = (tableRows: CoverageRow[]) => (
+    <div className="rounded-md border border-bg-stroke2 bg-bg-bg2 overflow-auto">
+      <table className="w-full text-small3">
+        <thead className="sticky top-0 bg-bg-bg3">
+          <tr>
+            <th className="text-left p-2">Key</th>
+            <th className="text-left p-2">CSS Variable</th>
+            <th className="text-left p-2">Runtime</th>
+            <th className="text-left p-2">Preview</th>
+          </tr>
+        </thead>
+        <tbody>
+          {tableRows.map((row) => (
+            <tr key={row.key} className="border-t border-bg-stroke2">
+              <td className="p-2">{row.key}</td>
+              <td className="p-2">{row.variableName}</td>
+              <td className="p-2">
+                {row.hasRuntimeValue ? row.runtimeValue : "missing"}
+              </td>
+              <td className="p-2">
+                {row.hasRuntimeValue ? (
+                  <span
+                    className="inline-block w-6 h-4 rounded border border-bg-stroke2"
+                    style={{ backgroundColor: `var(${row.variableName})` }}
+                  />
+                ) : (
+                  "-"
+                )}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  return (
+    <div className="p-6 space-y-4 bg-bg-bg2 text-text-g-contrast-high min-h-screen text-text-black">
+      <h2 className="text-h5">Theme Color Runtime Coverage</h2>
+
+      <div className="grid grid-cols-2 gap-3 max-w-3xl">
+        <div className="rounded-md border border-bg-stroke2 p-3 bg-bg-bg2">
+          <div className="text-small3">Total keys</div>
+          <div className="text-h6">{rows.length}</div>
+        </div>
+        <div className="rounded-md border border-bg-stroke2 p-3 bg-bg-bg2">
+          <div className="text-small3">Missing runtime values</div>
+          <div className="text-h6">{missingRuntimeValue.length}</div>
+        </div>
+        <div className="rounded-md border border-bg-stroke2 p-3 bg-bg-bg2">
+          <div className="text-small3">State runtime coverage</div>
+          <div className="text-h6">
+            {stateRows.length - stateRuntimeMissing.length}/{stateRows.length}
+          </div>
+        </div>
+        <div className="rounded-md border border-bg-stroke2 p-3 bg-bg-bg2">
+          <div className="text-small3">Runtime coverage</div>
+          <div className="text-h6">
+            {rows.length - missingRuntimeValue.length}/{rows.length}
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-3 max-w-4xl">
+        <div className="rounded-md border border-bg-stroke2 p-3 bg-bg-bg2">
+          <div className="text-small3">Active keys</div>
+          <div className="text-h6">
+            {activeRows.length - activeMissingRuntimeValue.length}/
+            {activeRows.length}
+          </div>
+        </div>
+        <div className="rounded-md border border-bg-stroke2 p-3 bg-bg-bg2">
+          <div className="text-small3">Mapped keys (alias to canonical)</div>
+          <div className="text-h6">
+            {mappedRows.length - mappedMissingRuntimeValue.length}/
+            {mappedRows.length}
+          </div>
+        </div>
+        <div className="rounded-md border border-bg-stroke2 p-3 bg-bg-bg2">
+          <div className="text-small3">Deprecated keys</div>
+          <div className="text-h6">
+            {deprecatedRows.length - deprecatedMissingRuntimeValue.length}/
+            {deprecatedRows.length}
+          </div>
+        </div>
+      </div>
+
+      {missingRuntimeValue.length > 0 ? (
+        <div className="rounded-md border border-warning p-3 bg-warning-transparent-8">
+          <div className="text-small2 text-warning">Missing runtime values</div>
+          <div className="text-small3 mt-1">
+            {missingRuntimeValue.map((item) => item.variableName).join(", ")}
+          </div>
+        </div>
+      ) : null}
+
+      <div className="space-y-2">
+        <h3 className="text-subtitle3">Active Tokens</h3>
+        {renderTable(activeRows)}
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-subtitle3">Mapped Tokens (Alias)</h3>
+        {renderTable(mappedRows)}
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-subtitle3">Deprecated Aliases</h3>
+        {renderTable(deprecatedRows)}
+      </div>
+    </div>
+  );
+};
+
+export const RuntimeCoverage = {
+  render: () => <RuntimeCoveragePanel />,
+} satisfies StoryObj;

package/src/theme/direct-token-migration-plan.md

@@ -0,0 +1,121 @@
+# Direct Token Migration Plan
+
+Status: draft (no code changes applied from this plan yet)
+
+## Goal
+
+Migrate color class usage from mapped aliases to direct token classes:
+
+- Ramps: `{base}-{step}` -> `ramps-{base}-{step}`
+- Transparent: `{base}-transparent-{alpha}` -> `transparent-{base}-{alpha}`
+
+Examples:
+
+- `error-100` -> `ramps-error-100`
+- `black-transparent-12` -> `transparent-black-12`
+- `grey-transparent-24` -> `transparent-grey-24`
+
+## Current Scan Snapshot
+
+Estimated touch points (from latest scan):
+
+- Runtime components: ~17
+- Component stories: ~11
+- `src/stories/ColorGroupPreview.tsx`: ~100
+
+Total estimated class replacements: ~128
+
+## Migration Rule
+
+Active/canonical class names should match CSS variable naming:
+
+- Canonical ramps key: `ramps-*`
+- Canonical transparent key: `transparent-*`
+- Non-canonical aliases are treated as mapped/compat aliases.
+
+## Recommended Phases
+
+### Phase 1 - Runtime Components First
+
+Targets:
+
+- `src/components/Tree/TreeItem.tsx`
+- `src/components/Table/Table.tsx`
+- `src/components/DataTable/DataTable.tsx`
+- `src/components/Toast/Toast.styles.tsx`
+- `src/components/Avatar/Avatar.styles.ts`
+- `src/components/ProgressBar/ProgressBar.tsx`
+
+Reason:
+
+- Highest product impact
+- Lower volume than stories
+- Easier regression validation
+
+### Phase 2 - Component Stories
+
+Targets:
+
+- `src/components/Slider/Slider.stories.tsx`
+- `src/components/Navbar/Navbar.stories.tsx`
+- `src/components/Toast/Toast.stories.tsx`
+- `src/components/FocusedScrollView/FocusedScrollView.stories.tsx`
+
+Reason:
+
+- Keeps docs/demo aligned with production naming
+
+### Phase 3 - Color Preview Story
+
+Target:
+
+- `src/stories/ColorGroupPreview.tsx` (~100 replacements)
+
+Reason:
+
+- Largest single-file conversion
+- Safe to batch once phases 1-2 are stable
+
+### Phase 4 - Optional Infra Cleanup (Later)
+
+Potential scope (if deprecating mapped aliases from system, not just usage):
+
+- `src/utils/colors.ts`
+- `src/theme/presets/colors.js`
+- `src/theme/ThemeColorCoverageRuntime.stories.tsx`
+- `src/theme/themes/variable-mapping.css`
+- `src/theme/THEME_MAPPING.md`
+
+Note:
+
+- This phase is broader and should happen only after all usage migration is complete.
+
+## Validation Checklist Per Phase
+
+- Run lints on edited files
+- Build or run Storybook checks for touched stories
+- Spot-check critical components visually (Toast, Table, Tree, DataTable)
+- Re-open `Theme/Color Coverage Runtime` and verify:
+  - Direct keys appear in Active
+  - Alias keys are only in Mapped
+
+## Suggested Replace Pattern
+
+For ramps:
+
+- `bg-{base}-{step}` -> `bg-ramps-{base}-{step}`
+- `text-{base}-{step}` -> `text-ramps-{base}-{step}`
+- `border-{base}-{step}` -> `border-ramps-{base}-{step}`
+
+For transparent:
+
+- `bg-{base}-transparent-{alpha}` -> `bg-transparent-{base}-{alpha}`
+- `text-{base}-transparent-{alpha}` -> `text-transparent-{base}-{alpha}`
+- `border-{base}-transparent-{alpha}` -> `border-transparent-{base}-{alpha}`
+
+## Risk Notes
+
+- Some names may look like ramps but are semantic state tokens (do not convert):
+  - `primary`, `primary-hover`, `state-*`, `function-*`, `input-*`
+- Gradient literals and hex colors are separate cleanup work and should not be auto-converted in this pass.
+

package/src/theme/figma-mcp-check-report.md

@@ -0,0 +1,225 @@
+# Figma MCP Mapping Check Report
+
+Source checklist: `src/theme/figma-mcp-component-checklist.json`
+Coverage mode: `representative-minimum` (22 button nodes + 9 action-button nodes + 8 text-input nodes + 6 input-filter nodes)
+
+## Checked
+
+### Button/Primary/Solid/Default/L/NoIcon (`9044:17724`)
+
+- `color` -> pass
+  - Figma expects primary solid default surface/text.
+  - `src/components/Button/Button.styles.ts` uses `bg-button-primary-solid-default`, `border-button-primary-solid-default`, `text-button-primary-solid-default`.
+  - `src/theme/tokens/components/button.css` maps these tokens to `--state-primary-default` and `--state-primary-text-solid`.
+- `state` -> pass
+  - `default` mapping is present for `solid` state class chain and token variables.
+- `size` -> pass
+  - Figma expects L with `px:24`, `py:16`, font `16/24 bold`.
+  - `src/components/Button/Button.styles.ts` size `lg` is `px-[24px] py-[16px] typography-buttonL`.
+  - `src/theme/main-preset.js` defines `text-buttonL` as `16px/24px` with weight `700`.
+- `icon` -> pass
+  - Figma variant is no start/end icon.
+  - `src/components/Button/Button.tsx` only renders icons when `startIcon` or `endIcon` is provided.
+
+Overall: `pass`
+
+### Button/Primary/Solid/Default/L/NoIcon/Capsule (`9057:12622`)
+
+- `shape` -> pass
+  - Figma capsule corner for L is `56px`.
+  - `src/components/Button/Button.styles.ts` uses `shape="capsule"` + `size="lg"` -> `rounded-[var(--button-l-capsule)]`.
+  - `src/theme/themes/variable.css` defines `--button-l-capsule: 56px`.
+- `color` -> pass
+  - Uses same primary solid default token chain as regular button (`--state-primary-default` / `--state-primary-text-solid`).
+- `size` -> pass
+  - Matches L spacing and typography (`px 24`, `py 16`, `16/24 bold`).
+
+Overall: `pass`
+
+### Capsule minimum set (additional checks)
+
+- `Button/Primary/Outline/Default/L/NoIcon/Capsule` (`9057:12630`) -> `pass`
+- `Button/Primary/Text/Default/L/NoIcon/Capsule` (`9057:12638`) -> `pass`
+- `Button/Primary/Solid/Default/M/NoIcon/Capsule` (`9057:12673`) -> `pass`
+- `Button/Primary/Outline/Pressed/M/NoIcon/Capsule` (`9057:12698`) -> `pass`
+- `Button/Primary/Solid/Pressed/S/IconEnd/Capsule` (`9057:12614`) -> `pass`
+- `Button/Primary/Outline/Disable/S/IconEnd/Capsule` (`9057:12586`) -> `pass`
+
+### Action button (function) check
+
+### ActionButton/Function/Solid/Default/L/Round (`9044:18043`)
+
+- `color` -> pass
+  - Figma default surface uses `--function-default-solid`.
+  - `src/theme/tokens/components/action-button.css` maps `--action-button-solid-default-bg/border` to `--function-default-solid`.
+- `state` -> pass
+  - Figma state is `Default`; `ActionButton` variant `solid` default class chain maps correctly.
+- `size` -> pass
+  - Figma spacing is `p-12` with `32px` icon.
+  - `src/components/ActionButton/ActionButton.styles.ts` (`size=lg`) uses `px-[12px] py-[12px] [&_svg]:size-[32px]`.
+- `shape` -> pass
+  - Figma radius for L round is `8px`.
+  - `src/components/ActionButton/ActionButton.styles.ts` uses `rounded-[var(--function-button-l-round)]`; `variable.css` sets `--function-button-l-round: 8px`.
+- `icon` -> pass
+  - Design is icon-only and component supports icon-only content via `children`.
+
+### ActionButton minimum set (additional checks)
+
+- `ActionButton/Function/Outline/Default/L/Round` (`9044:18045`) -> `pass`
+- `ActionButton/Function/Icon/Default/L/Round` (`9044:18047`) -> `pass`
+- `ActionButton/Function/Solid/Hover/L/Round` (`9044:18065`) -> `pass`
+- `ActionButton/Function/Outline/Active/L/Round` (`9044:18089`) -> `pass`
+- `ActionButton/Function/Outline/Active-Hover/L/Round` (`9044:18111`) -> `pass`
+- `ActionButton/Function/Outline/Disable/L/Round` (`9044:18133`) -> `pass`
+- `ActionButton/Function/Icon/Default/XXS/Round` (`9044:18063`) -> `pass`
+
+### Input field check
+
+### TextInput/Default/Outline/L/Required (`42037:209129`)
+
+- `color` -> pass
+  - Figma uses `--input-default-stroke`, `--input-default-text`, and `--input-error` (for required `*`).
+  - `TextInput` styles use `ring-input-default-stroke`, `text-input-default-text`, and required mark `text-input-error`.
+- `state` -> pass
+  - Node is default state; outline/default path is present in `inputVariant`.
+- `size` -> pass
+  - Figma uses `p-16` and subtitle1 typography (`16/24` regular).
+  - `size="lg"` in `TextInput` maps to `p-4 typography-subtitle1`.
+- `shape` -> pass
+  - Figma corner radius is `8px`.
+  - `TextInput` default `rounded="normal"` maps to `rounded-md` (radius-m = 8px).
+- `required` -> pass
+  - Required star is rendered by default in `TextInput` (`required=true`) with error color.
+
+### TextInput minimum set (additional checks)
+
+- `TextInput/Default/Outline/M/Required` (`40388:258895`) -> `pass`
+- `TextInput/Default/Outline/S/Required` (`40388:258903`) -> `pass` (after radius fix for size S)
+- `TextInput/FocusTyping/Outline/L/Required` (`40388:259075`) -> `pass`
+- `TextInput/Filled/Outline/L/Required` (`40388:259093`) -> `pass`
+- `TextInput/Disable/Outline/L/Required` (`40388:258911`) -> `pass`
+- `TextInput/Error/Outline/L/Required` (`40388:259165`) -> `pass`
+- `TextInput/ErrorFilled/Outline/L/Required` (`40388:259135`) -> `pass`
+
+### InputFilter minimum set
+
+- `InputFilter/Default/NotFilled/L` (`3150:80315`) -> `pass`
+- `InputFilter/Default/Filled/L` (`3150:80299`) -> `pass`
+- `InputFilter/Active/Filled/L` (`3150:80310`) -> `pass`
+- `InputFilter/Disable/NotFilled/L` (`3150:80302`) -> `pass`
+- `InputFilter/Default/NotFilled/S` (`3150:80305`) -> `pass` (after size-aware right-corner tuning)
+- `InputFilter/InputSegment/Default/L` (`3150:80013`) -> `pass` (rechecked, left segment border/shape aligned)
+
+### Search minimum set
+
+- `Search/Default-Focus-Filled-Disable/S-M-L` (`40388:259223`) -> `pass` (after removing segmented input style in `Search`, and aligning search icon size/offset to `24/20/14` with size-aware left spacing)
+
+### Tabs minimum set
+
+- `Tabs/Text-Icon-Loading/Default-Hover-Active-Disable` (`9478:6430`) -> `pass` (after aligning active/disabled text token, hover and active indicator colors, icon/loading size to `12px`, and default icon-space behavior)
+- Detailed node recheck (`pass`):
+  - `Tabs/Text/Active/NoHover/NoDisable/NoIcon` (`9478:6452`)
+  - `Tabs/Text/Active/Hover/NoDisable/NoIcon` (`9482:10539`)
+  - `Tabs/Text/Inactive/NoHover/NoDisable/NoIcon` (`9478:6499`)
+  - `Tabs/Text/Inactive/NoHover/Disable/NoIcon` (`9478:6530`)
+  - `Tabs/IconLeft/Inactive/NoHover/NoDisable` (`9478:6471`)
+  - `Tabs/IconRight/Inactive/Hover/NoDisable` (`9478:6492`)
+  - `Tabs/LoadingLeft/Inactive/NoHover/NoDisable` (`9478:6457`)
+  - `Tabs/LoadingLeft/Inactive/NoHover/Disable` (`9478:6509`)
+
+### Loading minimum set
+
+- `Loading/Icon/Default/16` (`42096:153887`) -> `pass`
+  - Figma is a 16x16 circular loading icon with a grey track and brand yellow progress arc.
+  - `src/components/Loading/Loading.tsx` defaults match: `size=16`, `strokeWidth=2`, circular path with rounded progress cap.
+  - Color mapping is tokenized via `--loading-track-color` and `--loading-process-color` from `src/theme/tokens/components/loading.css`.
+  - Updated token mapping to match Figma exactly: `--loading-track-color -> --transparent-grey-32` and `--loading-process-color -> --brand-rvl-yellow` (including xspector theme override).
+
+### Checkbox + Radio minimum set
+
+- `Checkbox/StateMatrix/Default-Hover-Disable-Checked-Indeterminate` (`40388:258859`) -> `pass`
+  - Rechecked checkbox matrix nodes in Figma section `9112:22335`.
+  - Fix applied: unchecked + disabled border now maps to `state-disable-outline` in `src/components/Checkbox/Checkbox.tsx`.
+  - Checked/indeterminate + disabled still map to `state-disable-solid` background/border, matching Figma.
+- `Radio/StateMatrix/Default-Hover-Disable-Checked` (`40388:258859`) -> `pass`
+  - Rechecked radio matrix nodes in the same Figma section.
+  - Disabled styling now distinguishes unchecked (`state-disable-outline`) and checked (`state-disable-solid`) in `src/components/RadioGroup/RadioGroup.tsx`.
+
+### Switch minimum set
+
+- `Switch/Toggle/On-Off/Default-Hover-Disable` (`2112:6315`) -> `pass`
+  - Rechecked all six states from Figma matrix (`2112:6314`, `2112:6312`, `2112:6310`, `2112:6313`, `2112:6311`, `2112:6309`).
+  - Existing state mapping in `src/components/Switch/Switch.styles.ts` already matches track/thumb color and opacity model.
+  - Fix applied for thumb shadow parity: `--switch-thumb-filter` updated to `drop-shadow(0 8px 16px #00000014)` in `src/theme/tokens/components/switch.css`.
+
+### Toast minimum set
+
+- `Toast/Success-Warning-Error/Action-TextModes` (`9171:21362`) -> `pass`
+  - Rechecked representative nodes: success (`9171:21363`, `9171:21370`, `9171:21379`), warning (`9171:21395`), error (`9171:21434`, `9171:21442`).
+  - Updated toast card shadow to Figma value (`0 8 16 #00000014` -> `rgba(0,0,0,0.08)`).
+  - Final spacing model uses root `gap-1` with icon wrapper `mr-2` (icon-to-text effective `12px`) and action wrapper `mx-5` (effective `24px` around action block).
+  - Vertical content mode remains `items-start` with no extra gap for two-line layout parity.
+  - Action wrapper renders only when action exists; close action offset is normalized.
+
+### Batch run from checklist
+
+- `Button/Primary/Outline/Default/L/NoIcon` (`9044:17740`) -> `pass`
+- `Button/Primary/Text/Default/L/NoIcon` (`9044:17756`) -> `pass` (mapped via `text` variant -> `flat` token family)
+- `Button/Primary/Solid/Hover/L/NoIcon` (`9044:17810`) -> `pass`
+- `Button/Primary/Outline/Pressed/L/NoIcon` (`9044:17774`) -> `pass` (`Pressed` mapped to `active` token/state in code)
+- `Button/Primary/Text/Loading/L/NoIcon` (`9044:17795`) -> `pass` (`Loading` mapped via `data-[loading=true]` to `active` token/state)
+- `Button/Primary/Solid/Disable/L/NoIcon` (`9044:17738`) -> `pass`
+- `Button/Primary/Solid/Default/M/NoIcon` (`9044:17829`) -> `pass`
+- `Button/Primary/Solid/Default/S/NoIcon` (`9044:17934`) -> `pass`
+- `Button/Primary/Solid/Default/L/IconStart` (`9044:16788`) -> `pass`
+- `Button/Primary/Solid/Default/L/IconEnd` (`9044:17256`) -> `pass`
+- `Button/Secondary/Solid/Default/L/NoIcon` (`9044:17726`) -> `pass`
+- `Button/Specific-Warning/Outline/Hover/L/NoIcon` (`9044:17785`) -> `pass` (`Specific-Warning` mapped to `warning`)
+- `Button/Specific-Success/Text/Default/M/NoIcon` (`9044:17871`) -> `pass` (`Specific-Success` mapped to `success`)
+- `Button/Specific-Error/Solid/Default/L/NoIcon` (`9044:17736`) -> `pass` (`Specific-Error` mapped to `error`)
+
+## Result
+
+- Checked components: `60/60`
+- Failed: `0`
+- Pending: `0`
+- Coverage confirmed for style/state/size/icon/color representative set in checklist
+
+## Mapping notes
+
+- Figma `Text` style is represented in code by `variant="text"` but uses the `flat` token namespace (`button-*-flat-*`), which is expected in this codebase.
+- Figma `Pressed` and `Loading` are represented by code `active`/`data-loading` styling paths, which match the token model currently used by `Button`.
+- Capsule minimum currently covers icon-end path; add one icon-start capsule node if you want full icon-direction parity.
+- ActionButton alignment fixes applied from this run:
+  - `icon + xxs` now uses `10px` icon size in `src/components/ActionButton/ActionButton.styles.ts` to match Figma node set.
+  - `outline + disabled` border token now uses `--state-disable-solid` in `src/theme/tokens/components/action-button.css` to match Figma node set.
+- ActionButton nodes under `9044:18042` are round variants; no capsule nodes were discovered from this design group.
+- TextInput alignment fixes applied from this run:
+  - `size=sm + rounded=normal` now maps to `rounded-sm` (`6px`) in `src/components/TextInput/TextInput.styles.ts` to match Figma size S.
+- InputFilter alignment fixes applied from this run:
+  - Filter icon glyph now scales by input size (`32/22/18`) in `src/components/InputFilter/InputFilter.tsx`.
+  - Right segmented function corner now uses size-aware rounding (`8px` for L/M, `6px` for S) in `src/components/InputFilter/InputFilter.styles.ts`.
+  - Left input segment now uses segmented border model (no right border, left-only radius, state-aware stroke) via `customInputVariant` in `src/components/Dropdown/Dropdown.styles.ts`.
+- Search alignment fixes applied from this run:
+  - `Search` now opts out of dropdown segmented input styling (`segmentedInput={false}`) in `src/components/Search/Search.tsx`, so default state border/shape follows standalone input design.
+  - Built-in search icon now uses size-aware glyphs `14/20/24` and matching left spacing offsets in `src/components/TextInput/TextInput.styles.ts`.
+- Tabs alignment fixes applied from this run:
+  - `Tabs` active text now uses `text-contrast-max` and disabled state uses `state-disable-outline` in `src/components/Tabs/Tabs.tsx`.
+  - Active indicator now uses `function-active-solid`, switches to `function-active-hover` on active hover, and non-active hover indicator uses `function-default-hover`.
+  - Tab icon/loading area now normalizes to `12px` and follows state color tokens; default `keepIconSpace` changed to `false` for closer text-only layout parity with Figma matrix.
+- Loading mapping check from this run:
+  - `Loading` default (`16px`) matches Figma node `42096:153887` after remapping loading tokens to `transparent/grey/32%` and `brand/RVL yellow`.
+- Checkbox/Radio alignment fixes applied from this run:
+  - `Checkbox`: disabled unchecked border changed to `state-disable-outline`; checked/indeterminate disabled remain `state-disable-solid`.
+  - `Radio`: disabled unchecked uses `state-disable-outline`, while disabled checked uses `state-disable-solid`.
+- Switch alignment fixes applied from this run:
+  - Thumb shadow token updated to match Figma toggle effect (`0 8 16 #00000014`) in `src/theme/tokens/components/switch.css`.
+- Toast alignment fixes applied from this run:
+  - `Toast` card shadow updated to `0 8 16 / 0.08`; spacing now uses icon `mr-2` + action `mx-5` model to match `12px` (icon-text) and `24px` (around action).
+  - `Toaster` renders action wrapper only when an action is provided; close button offset normalized.
+
+## How to use
+
+1. Add MCP node entries in `src/theme/figma-mcp-component-checklist.json`.
+2. Ask the agent to "run mapping check from checklist".
+3. Update this report with pass/fail and mismatches per component.