Outline Button Component — Code Audit

Rendered from Button-web.json (36 variants: 3 styles × 3 sizes × 4 states). Source: Button.tsx, ButtonLarge.ts, ButtonSmall.ts, theme.ts

Light Mode

3 styles × 3 sizes × 4 states — hover = darken(0.05), disabled = transparentize/lighten

Primary — #0366d6 accent, drop shadow
EnabledLarge
Hovered
Focused
Disabled
Medium
Small
Neutral — white + inset border, focus swaps border color
EnabledLarge
Hovered
Focused
Disabled
Medium
Small
Danger — #ed2651 red, focus outline #a00d2d
EnabledLarge
Hovered
Focused
Disabled
Medium
Small
Dark Mode — Neutral Only

Primary and Danger use the same accent/#ed2651 in both modes. Neutral flips background and border.

Neutral Dark — #111319 bg, #394351 border
EnabledLarge
Hovered
Focused
Disabled
Medium
Small

Complete Token Reference

All values from Button.tsx, ButtonLarge.ts, ButtonSmall.ts, shared/styles/theme.ts. Colors computed via polished (darken, lighten, transparentize).

1. Size Geometry

SizeHeightPadding HFont SizeLine HeightFont WeightRadius
Large40161440 (= height)5006
Medium32814325006
Small26613265006

CSS uses line-height = height (single-line centering). For Figma: paddingV = (height - 20) / 2 for 14px font, (height - 18) / 2 for 13px font.

2. Color Tokens — Enabled State

StyleFillTextBorderShadow
Primary#0366d6#FFFFFF—rgba(0,0,0,0.2) 0 1px 2px
Neutral#FFFFFF#1113191px inset #D9D9D9rgba(0,0,0,0.07) 0 1px 2px
Danger#ed2651#FFFFFF—rgba(0,0,0,0.2) 0 1px 2px

3. Interaction State Tokens

Hover darkens 5% via polished. Active mirrors hover. Focus: Primary gets box-shadow ring, Neutral swaps border color, Danger gets outline.

StyleStateFillTextBorder/OutlineExpression
PrimaryHovered#035abd#FFFFFF—darken(0.05, #0366d6)
Focused#0366d6#FFFFFF2px ring #0366d6box-shadow focus ring
Disabledrgba(3,102,214, 0.9)rgba(255,255,255, 0.7)—transparentize(0.1 / 0.3)
NeutralHovered#F2F2F2#1113191px #D9D9D9darken(0.05, #FFF)
Focused#FFFFFF#1113191px #66778FinputBorderFocused
Disabledtransparent#66778F1px #D9D9D9bg: none, textTertiary
DangerHovered#e61341#FFFFFF—darken(0.05, #ed2651)
Focused#ed2651#FFFFFF2px outline #a00d2ddarken(0.20, #ed2651)
Disabled#ef3e64#FFFFFF—lighten(0.05, #ed2651)

4. Dark Mode Color Tokens

Only Neutral changes between light and dark. Primary and Danger use the same values in both modes.

TokenLightDarkFigma Variable
accent#0366d6#0366d6colors/accent
accentText#FFFFFF#FFFFFFcolors/accent-text
danger#ed2651#ed2651colors/danger
buttonNeutralBg#FFFFFF#111319colors/button-neutral-bg
buttonNeutralText#111319#FFFFFFcolors/button-neutral-text
buttonNeutralBorder#D9D9D9#394351colors/button-neutral-border
inputBorderFocused#66778F#66778Fcolors/input-border-focused
textTertiary#66778F#66778Fcolors/text-tertiary

5. Computed Color Expressions

All computed via polished v4.3.1 (verified). These are exact resolved values.

ExpressionInputResolvedUsed By
darken(0.05, accent)#0366d6#035abdPrimary hover
darken(0.05, neutralBg)#FFFFFF#F2F2F2Neutral hover
darken(0.05, danger)#ed2651#e61341Danger hover
darken(0.15, white)#FFFFFF#D9D9D9Neutral border
darken(0.20, danger)#ed2651#a00d2dDanger focus outline
lighten(0.05, danger)#ed2651#ef3e64Danger disabled
transparentize(0.1, accent)#0366d6rgba(3,102,214, 0.9)Primary disabled fill
transparentize(0.3, white)#FFFFFFrgba(255,255,255, 0.7)Primary disabled text

Figma Import Cheat Sheet

Variant Property Axes

PropertyValuesTotal Variants
StylePrimary, Neutral, Danger36
SizeLarge, Medium, Small
StateEnabled, Hovered, Focused, Disabled

Figma Auto-Layout Settings

PropertyValue
Layout ModeHORIZONTAL
Primary Axis AlignCENTER
Counter Axis AlignCENTER
SizingAUTO (hug) both axes
Clips Contenttrue
Corner Radius6
Font FamilyInter
Font Weight500 (Medium)

Figma Variables Needed

Variable NameTypeLightDarkUsed By
colors/accentCOLOR#0366d6#0366d6Primary fill
colors/accent-textCOLOR#FFFFFF#FFFFFFPrimary text
colors/accent-hoverCOLOR#035abd#035abdPrimary hover
colors/accent-disabled-fillCOLORrgba(3,102,214,0.9)rgba(3,102,214,0.9)Primary disabled fill
colors/accent-disabled-textCOLORrgba(255,255,255,0.7)rgba(255,255,255,0.7)Primary disabled text
colors/dangerCOLOR#ed2651#ed2651Danger fill
colors/danger-hoverCOLOR#e61341#e61341Danger hover
colors/danger-focusCOLOR#a00d2d#a00d2dDanger focus outline
colors/danger-disabledCOLOR#ef3e64#ef3e64Danger disabled fill
colors/button-neutral-bgCOLOR#FFFFFF#111319Neutral fill
colors/button-neutral-textCOLOR#111319#FFFFFFNeutral text
colors/button-neutral-borderCOLOR#D9D9D9#394351Neutral border
colors/button-neutral-hoverCOLOR#F2F2F2#07070aNeutral hover
colors/input-border-focusedCOLOR#66778F#66778FNeutral focus border
colors/text-tertiaryCOLOR#66778F#66778FNeutral disabled text

Drop Shadows (Figma Effects Panel)

Captured in JSON via effects array on each variant using Figma-native DROP_SHADOW format. Also rendered in HTML for pixel-perfect capture.

StyleStatesCSS box-shadowFigma Effect
PrimaryEnabled, Hovered, Focusedrgba(0,0,0,0.2) 0px 1px 2pxDROP_SHADOW: color {0,0,0,0.2}, offset {0,1}, radius 2, spread 0
NeutralEnabled, Hoveredrgba(0,0,0,0.07) 0px 1px 2pxDROP_SHADOW: color {0,0,0,0.07}, offset {0,1}, radius 2, spread 0
DangerEnabled, Hovered, Focusedrgba(0,0,0,0.2) 0px 1px 2pxDROP_SHADOW: color {0,0,0,0.2}, offset {0,1}, radius 2, spread 0
AllDisablednoneeffects: [] (no shadow)
NeutralFocused, Disablednone (border only)effects: [] (border via strokeColor)