Token migration review

Approve each hardcoded literal → token mapping. Snap accepts the proposal, Re-point picks a different existing token, Mint creates a new one (value preserved). Nothing is applied until you run Phase 2/3.

0/97 decided
loading…

Type scale

Proposed monotonic ladder — each step shown at its px; the sizes it absorbs are migrated here.
--fs-2xs10pxThe quick brown fox · absorbs 10
--fs-xs11pxThe quick brown fox · absorbs 11
--fs-sm12pxThe quick brown fox · absorbs 12
--fs-base13pxThe quick brown fox · absorbs 13 (body)
--fs-md14pxThe quick brown fox · absorbs 14, 15
--fs-lg16pxThe quick brown fox · absorbs 16
--fs-xl18pxThe quick brown fox · absorbs 18
--fs-2xl20pxThe quick brown fox · absorbs 20
--fs-3xl22pxThe quick brown fox · absorbs 22 (unused)
--fs-4xl24pxThe quick brown fox · absorbs 24 (unused)
--fs-5xl28pxThe quick brown fox · absorbs 26, 28
--fs-6xl32pxThe quick brown fox · absorbs 30, 32
--fs-7xl36pxThe quick brown fox · absorbs 36
Ag
13px
→
Ag
13px
13px → --fs-base · 13px
×33 · fontSize
Ag
11px
→
Ag
11px
11px → --fs-xs · 11px
×23 · fontSize
Ag
12px
→
Ag
12px
12px → --fs-sm · 12px
×23 · fontSize
Ag
10px
→
Ag
10px
10px → --fs-2xs · 10px
×11 · fontSize
Ag
14px
→
Ag
14px
14px → --fs-md · 14px
×5 · fontSize
Ag
18px
→
Ag
18px
18px → --fs-xl · 18px
×3 · fontSize
Ag
20px
→
Ag
20px
20px → --fs-2xl · 20px
×2 · fontSize
Ag
16px
→
Ag
16px
16px → --fs-lg · 16px
×1 · fontSize
Ag
26px
→
Ag
28px
26px → --fs-5xl · 28px
×1 · fontSize
Ag
28px
→
Ag
28px
28px → --fs-5xl · 28px
×1 · fontSize
Ag
30px
→
Ag
32px
30px → --fs-6xl · 32px
×1 · fontSize
Ag
32px
→
Ag
32px
32px → --fs-6xl · 32px
×1 · fontSize
Ag
36px
→
Ag
36px
36px → --fs-7xl · 36px
×1 · fontSize

Text on dark

20 distinct values
→
rgba(255,255,255,0.92)
×11 · color, background · Δ0.04
→
rgba(255,255,255,0.18)
×5 · gradient, border
→
rgba(255,255,255,0.35)
×3 · color · Δ0.05
→
rgba(255,255,255,0.40)
×3 · — · Δ0.1
→
rgba(255,255,255,0.45)
×3 · color · Δ0.05
→
rgba(255,255,255,0.75)
×2 · color · Δ0.03
→
rgba(255,255,255,0.80)
×2 · color · Δ0.05
→
rgba(255,255,255,0.9)
×2 · color · Δ0.05
→
rgba(255,255,255,0.98)
×2 · color · Δ0.02
→
rgba(255,255,255,0.20)
×1 · — · Δ0.02
→
rgba(255,255,255,0.25)
×1 · color · Δ0.05
→
rgba(255,255,255,0.28)
×1 · color · Δ0.02
→
rgba(255,255,255,0.3)
×1 · color
→
rgba(255,255,255,0.38)
×1 · — · Δ0.08
→
rgba(255,255,255,0.4)
×1 · color · Δ0.1
→
rgba(255,255,255,0.65)
×1 · color · Δ0.07
→
rgba(255,255,255,0.78)
×1 · TEXT · Δ0.06
→
rgba(255,255,255,0.90)
×1 · color · Δ0.05
→
rgba(255,255,255,0.95)
×1 · color · Δ0.01
→
rgba(255,255,255,0.97)
×1 · background · Δ0.79

Fills on dark

4 distinct values
→
rgba(255,255,255,0.06)
×9 · background · Δ0.01
→
rgba(255,255,255,0.12)
×5 · background, border · Δ0.02
→
rgba(255,255,255,0.10)
×4 · background
→
rgba(255,255,255,0.04)
×1 · background · Δ0.01

Borders on dark

9 distinct values
→
rgba(255,255,255,0.07)
×15 · background · Δ0.01
→
rgba(255,255,255,0.08)
×13 · background, border
→
rgba(255,255,255,0.14)
×6 · border · Δ0.01
→
rgba(255,255,255,0.55)
×6 · color
→
rgba(255,255,255,0.1)
×4 · borderRight, borderTop · Δ0.02
→
rgba(255,255,255,0.15)
×4 · border
→
rgba(255,255,255,0.16)
×2 · border · Δ0.01
→
rgba(255,255,255,0.22)
×2 · border · Δ0.06
→
rgba(255,255,255,0.26)
×1 · — · Δ0.02

Surfaces

10 distinct values
→
#fffaf0
×8 · background, backgroundColor
→
hsl(0,0%,15%)
×7 · border, color, background · Δ0.005
→
#1a1714
×4 · color
→
#f0e6d2
×3 · —
→
hsl(0,0%,85%)
×3 · border, background · Δ0.01
→
hsl(0,0%,30%)
×1 · color · Δ0.01
→
hsl(0,0%,45%)
×1 · color · Δ0.03
→
hsl(0,0%,55%)
×1 · color · Δ0.02
→
hsl(0,0%,70%)
×1 · background · Δ0.03
→
hsl(0,0%,95%)
×1 · background

Ink on paper

5 distinct values
→
rgba(26,23,20,0.09)
×1 · — · Δ0.03
→
rgba(26,23,20,0.18)
×1 · border · Δ0.02
→
rgba(26,23,20,0.28)
×1 · — · Δ0.06
→
rgba(26,23,20,0.35)
×1 · background
→
rgba(26,23,20,0.75)
×1 · — · Δ0.03

Scrims (black overlays)

18 distinct values
→
rgba(0,0,0,0.4)
×3 · boxShadow, color
→
rgba(0,0,0,0.6)
×3 · boxShadow
→
rgba(0,0,0,0.22)
×2 · boxShadow, border
→
rgba(0,0,0,0.35)
×2 · boxShadow
→
rgba(0,0,0,0.65)
×2 · background
→
rgba(0,0,0,0.88)
×2 · color, background
→
rgba(0,0,0,0.03)
×1 · background
→
rgba(0,0,0,0.08)
×1 · boxShadow
→
rgba(0,0,0,0.12)
×1 · boxShadow
→
rgba(0,0,0,0.14)
×1 · boxShadow
→
rgba(0,0,0,0.16)
×1 · border
→
rgba(0,0,0,0.18)
×1 · border
→
rgba(0,0,0,0.45)
×1 · border
→
rgba(0,0,0,0.55)
×1 · boxShadow
→
rgba(0,0,0,0.7)
×1 · backgroundColor
→
rgba(0,0,0,0.72)
×1 · color
→
rgba(0,0,0,0.78)
×1 · background
→
rgba(0,0,0,1)
×1 · background

Other colours

8 distinct values
→
#26211c
×1 · background
→
#34a853
×1 · —
→
#4285f4
×1 · —
→
#ea4335
×1 · —
→
#fbbc05
×1 · —
→
rgba(255,100,80,0.9)
×1 · color
→
rgba(255,120,120,0.95)
×1 · color
→
rgba(255,80,80,0.10)
×1 · background

Radii

10 distinct values → --radius-* scale
4px
→
4px
4px → --radius-sm · 4px
×21 · borderRadius
6px
→
6px
6px → --radius-md · 6px
×11 · borderRadius
12px
→
12px
12px → --radius-xl · 12px
×5 · borderRadius
8px
→
8px
8px → --radius-lg · 8px
×5 · borderRadius
0px
→
4px
0px → --radius-sm · 4px
×3 · borderRadius · Δ4
3px
→
4px
3px → --radius-sm · 4px
×3 · borderRadius · Δ1
999px
→
999px
999px → --radius-pill · 999px
×3 · borderRadius
2px
→
4px
2px → --radius-sm · 4px
×2 · borderRadius · Δ2
7px
→
6px
7px → --radius-md · 6px
×2 · borderRadius · Δ1
16px
→
12px
16px → --radius-xl · 12px
×1 · borderRadius · Δ4