| Property | Figma (Compass v2) | Repo (MUI Theme) | Difference |
|---|---|---|---|
| Variants | Contained, Text |
contained, outlined, text |
Repo has extra outlined variant not in Figma |
| Sizes | Large, Small |
medium, small |
Naming differs; Figma "Large" ≈ Repo "medium" |
| Colors | Primary, Critical |
primary, secondary, success, inherit |
Figma has Critical (red); Repo lacks Critical but has secondary/success |
| States | Enabled, Hovered, Disabled, Focused, Pressed, Loading |
Enabled, Hover, Disabled, Focus, Active (via &:active) |
Repo lacks explicit Loading state styling |
| Variant | Figma | Repo | Match? |
|---|---|---|---|
| Contained | 200px (pill) |
26.5px |
❌ Figma uses full pill, repo uses rounded |
| Text | 8px |
4px |
❌ Figma uses 8px, repo uses 4px |
| Size | Variant | Figma | Repo | Match? |
|---|---|---|---|---|
| Large/Medium | Contained | 16px 32px |
0 32px (height: 48px) |
Repo uses fixed height instead of vertical padding |
| Large/Medium | Text | 16px 8px |
16px |
Figma has different horizontal padding |
| Small | Contained | 8px 24px |
0 24px (height: 39px) |
Repo uses fixed height instead of vertical padding |
| Small | Text | 8px |
— | Not explicitly set in repo |
| State | Property | Figma | Repo | Match? |
|---|---|---|---|---|
| Default | Background | #0f60c2 |
#0f60c2 (Blue[600]) |
✅ |
| Default | Text | #ffffff |
#ffffff (White) |
✅ |
| Hover | Background | #093b78 |
#093b78 (Blue[700]) |
✅ |
| Pressed | Background | #04172f |
— | ❌ Not implemented |
| Disabled | Background | #e4e7e6 |
#cfd3d2 (Ink[400]) |
❌ Figma: Ink[300], Repo: Ink[400] |
| Disabled | Text | #a7afad |
#3d4442 (Ink[700]) |
❌ Significant mismatch |
| Loading | Background | #e7f1fd |
— | ❌ Not implemented |
| Loading | Text | #0f60c2 |
— | ❌ Not implemented |
| State | Property | Figma | Repo |
|---|---|---|---|
| Default | Background | #b3101c (Red[600]) |
— |
| Hover | Background | #50070c |
— |
| Pressed | Background | #2f0407 (Red[900]) |
— |
| Loading | Background | #fde8e9 |
— |
| Loading | Text | #b3101c |
— |
| Property | Figma | Repo | Match? |
|---|---|---|---|
| Focus Outline | 3px solid #a6cdfc (Blue[400]) |
3px solid #5fa3f7 (Blue[500]) |
❌ Different blue shade |
| Active/Pressed | Uses focus ring + darker BG | transform: scale(0.95) |
❌ Different interaction pattern |
| Property | Figma | Repo | Match? |
|---|---|---|---|
| Font Family | Suisse Int'l: Semi Bold |
Custom font var (SUISSE_VAR) |
✅ |
| Font Size | 16px |
16px |
✅ |
| Font Weight | 600 (semibold) |
semibold token | ✅ |
| Line Height | 16px |
16px |
✅ |
| Feature | Figma | Repo | Match? |
|---|---|---|---|
| Icon Support | iconStart, iconEnd props |
Not styled in theme | ❌ Figma has explicit icon slots |
| Loading Spinner | Custom spinner component | MuiLoadingButton integration | Different approach |
| Gap (icon to label) | 8px |
Not in theme | Relies on MUI defaults |