Wave 2 Token Audit — Design-Token-Lint Baseline (Issue #1273)

Caution

This document records the state of the design-token-lint violation baseline as of 2026-05-05. The violation list and per-file ignore counts are dated — they reflect a specific audit snapshot, not the current codebase. The per-file ignore mechanism described here has since been removed. This section is preserved as a historical record.

Additionally superseded by the Color Ramp Restructure epic (#3555): the "Default palette index" column below (p[3], p[11], etc.) describes the pre-restructure numeric-palette-index model. Tokens are now resolved via RampRefs ({ base | accent: n } or { state: role }) against the ramps.base / ramps.accent / ramps.state arrays — see @takazudo/color-themes for the current model.

Branch: open-issue-triage/token-audit Date: 2026-05-05 Violation total: 58 in 23 files (confirmed by running design-token-lint on the ignored baseline list)

Summary

This audit catalogs the 58 token-lint violations in the 23 ignored baseline files, maps each violation pattern to the semantic token Wave 2 sub-issues should use, and documents the new tokens added in this sub-issue.

New Tokens Added

Color tokens (packages/color-themes/src/color-settings.ts)

Token	Default palette index	CSS var	Tailwind utility
`warning`	p[3] (yellow, ANSI convention)	`--theme-warning`	`text-warning`, `bg-warning`, `border-warning`
`warningStrong`	p[11] (bright yellow, ANSI convention)	`--theme-warning-strong`	`text-warning-strong`, `bg-warning-strong`, `border-warning-strong`
`success`	p[2] (green, ANSI convention)	`--theme-success`	`text-success`, `bg-success`, `border-success`
`successStrong`	p[10] (bright green, ANSI convention)	`--theme-success-strong`	`text-success-strong`, `bg-success-strong`, `border-success-strong`

The ANSI 16-color convention maps:

p[1]/p[9] = red/bright-red → already used as danger/dangerStrong
p[3]/p[11] = yellow/bright-yellow → warning/warningStrong
p[2]/p[10] = green/bright-green → success/successStrong

Note: warning and accent share the same default palette index (p[3]). This is intentional — both are "warm highlight" colors in standard ANSI palettes. Per-theme semantic overrides can assign distinct indices when themes need to differentiate. Wave 2 should use warning for caution/alert UI and accent for interactive/focus states.

CSS bridge (packages/ui-components/src/tokens.css)

Added Tailwind color token bridge entries:

--color-warning: var(--theme-warning);
--color-warning-strong: var(--theme-warning-strong);
--color-success: var(--theme-success);
--color-success-strong: var(--theme-success-strong);

Added CSS fallback values in the :root Tier 2 block:

--theme-warning: var(--palette-3);
--theme-warning-strong: var(--palette-11);
--theme-success: var(--palette-2);
--theme-success-strong: var(--palette-10);

No new spacing tokens needed

Every numeric spacing violation maps to an existing token. See the spacing mapping section below.

Violation Counts by Category

Color violations (30 total across 8 files)

Tailwind pattern	Count	Semantic token to use
`text-red-400`	5	`text-danger`
`text-red-300`	2	`text-danger`
`text-red-500`	1	`text-danger`
`text-red-100` (hover)	1	`text-danger` (lighter via opacity modifier or `danger` itself)
`bg-red-500/10`	2	`bg-danger/10`
`bg-red-500/15`	1	`bg-danger/15`
`bg-red-900/40`	1	`bg-danger/40` (or `bg-danger-strong/40`)
`border-red-500/30`	1	`border-danger/30`
`border-red-500/40`	2	`border-danger/40`
`border-red-500/50`	1	`border-danger/50`
`border-red-500/60`	1	`border-danger/60`
`bg-yellow-600`	1	`bg-warning-strong`
`bg-amber-500/10`	1	`bg-warning/10`
`bg-amber-500/15`	1	`bg-warning/15`
`border-amber-500/40`	2	`border-warning/40`
`text-amber-200`	1	`text-warning`
`text-amber-300`	1	`text-warning`
`bg-emerald-500/15`	1	`bg-success/15`
`border-emerald-500/40`	1	`border-success/40`
`text-emerald-300`	1	`text-success`

Spacing violations (28 total across 19 files)

All map to existing tokens — no new tokens required.

Tailwind class	Tailwind value	Existing token	Count
`top-1/2`, `left-1/2`	50%	Use `[50%]` arbitrary value — not a spacing token semantic	10
`top-1`, `right-1`	4px	`xs`	4
`right-4`, `bottom-4`	16px	`xl`	3
`right-8`	32px	`4xl`	1
`p-2`	8px	`md`	1
`py-1`	4px	`xs`	2
`py-3`	12px	`lg`	1
`px-8`	32px	`4xl`	1
`mb-3`	12px	`lg`	1
`mb-8`	32px	`4xl`	2
`mt-6`	24px	`3xl`	1
`mt-0.5`	2px	`2xs`	3
`ml-5`	20px	`2xl`	2
`gap-1`	4px	`xs`	1
`space-y-1`	4px	`xs`	1

Note on top-1/2 / left-1/2: These appear in absolute-positioning centering patterns (e.g. top-1/2 -translate-y-1/2). The [50%] arbitrary value is the correct replacement — no semantic spacing token makes sense for a geometric "halfway" constant.

Files with Violations (Wave 2 targets)

packages/ (6 files — #1274)

File	Color violations	Spacing violations
`packages/frontmatter-ui/src/list-fields.tsx`	0	1 (`py-1`)
`packages/kanban-board/src/kanban-board.tsx`	0	1 (`left-1/2`)
`packages/ui-components/src/chord-indicator.tsx`	0	1 (`left-1/2`)
`packages/ui-components/src/panel-divider.tsx`	0	2 (`top-1/2`, `left-1/2`)
`packages/ui-components/src/sidebar-search.tsx`	0	1 (`top-1/2`)
`packages/ui-components/src/toast.tsx`	0	1 (`left-1/2`)

tauri-app/renderer/components/settings/ and mobile-tree (8 files — #1275)

File	Color violations	Spacing violations
`settings/sections/ai-provider-settings.tsx`	4 (`text-red-400`, `border-amber-500/40`, `bg-amber-500/10`, `text-amber-200`)	0
`settings/sections/ai-suggestions-settings.tsx`	4 (`border-red-500/40`, `bg-red-500/10`, 2×`text-red-400`)	0
`settings/sections/ios-device-settings.tsx`	3 (`text-red-500`, `border-red-500/30`, `hover:bg-red-500/10`)	0
`settings/sections/ios-settings.tsx`	0	2 (`ml-5`, `space-y-1`)
`settings/sections/raw-settings.tsx`	0	1 (`ml-5`)
`settings/sections/shortcuts-settings.tsx`	0	1 (`top-1/2`)
`settings/sections/sync-log-display.tsx`	1 (`text-red-400`)	0
`settings/mobile-tree/mobile-tree-select.tsx`	0	1 (`top-1/2`)

tauri-app/renderer remaining files (9 files — #1276)

File	Color violations	Spacing violations
`archives/archives-header.tsx`	0	2 (2×`top-1/2`)
`assets-manager-dialog.tsx`	0	7 (`right-4`×2, `gap-1`, `p-2`, `left-1/2`×2, `bottom-4`)
`ios-offline-screen.tsx`	0	6 (`mb-8`×2, `mb-3`, `px-8`, `py-3`, `mt-6`)
`pile-view-dialog.tsx`	5 (`bg-red-900/40`, `border-red-500/50`, 2×`text-red-300`, `hover:text-red-100`)	1 (`left-1/2`)
`quick-actions/quick-actions-builder.tsx`	3 (`right-8`, `bg-yellow-600`, 2×`text-red-400`) — also `top-1/2` spacing	2 (`right-8` spacing, `top-1/2`)
`search/sidebar.tsx`	0	1 (`top-1/2`)
`split-terminal-view.tsx`	0	2 (`top-1`, `right-1`)
`pages/ios-onboarding.tsx`	0	3 (3×`mt-0.5`)

Cases Where No New Token Is Needed (Existing Token Matches)

red- violations* → danger and danger-strong (already existed). Wave 2 uses text-danger, bg-danger/{opacity}, border-danger/{opacity}.
All numeric spacing violations → covered by existing spacing token scale (xs=4px, sm=6px, md=8px, lg=12px, xl=16px, 2xl=20px, 3xl=24px, 4xl=32px, 2xs=2px). No gaps found.
top-1/2, left-1/2 → Use [50%] Tailwind arbitrary value. These are geometric centering constants, not semantic spacing.

Rebuild Status

packages/color-themes: No build step. Exports directly from src/. No rebuild needed.
packages/ui-components: No build step. Exports directly from src/. No rebuild needed.