Tools // Converter
Map legacy variables to Velora tokens.
Migration is a naming and verification process: inventory old values,
map them to var(--vl-*), and validate with the token foundation.
Naming
Mapping
Validation
Step 1 // Inventory
List legacy colors, type sizes, and radii.
Before mapping begins, catalogue every custom property, hex literal, and hard-coded pixel value in the existing codebase.
/* Before */
.card { color: #1a1a2e; border-radius: 8px; margin: 16px; }
/* After Velora migration */
.card {
color: var(--vl-text-main);
border-radius: var(--vl-radius-md);
margin: var(--vl-space-4);
}
Replace each hard-coded value with its semantic token — one swap updates every breakpoint and theme automatically without touching component logic.
Step 2 // Map
One-to-one or many-to-one mapping to Velora tokens.
Each legacy value maps to a --vl-* token. Where several old
values collapse to one Velora token, document the merge explicitly.
mapping table
/* legacy */ --brand-blue: #1a73e8;
/* velora */ --vl-accent: var(--vl-blue-600);
/* legacy */ --text-sm: 14px;
/* velora */ --vl-text-sm: var(--vl-size-sm);
Guideline
Document every merge.
When three legacy blues map to one Velora accent, note all three source values.
Step 3 // Verify
Run contrast checks and visual QA on real components.
After mapping, swap tokens into live components and verify contrast ratios, type rendering, and spacing against spec.
Step 4 // Applied migration
Inventory, map, verify: a complete token migration.
Catalogue legacy values, map each to a Velora token, and validate with contrast checks and visual QA.