richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Increase MapPin horizontal padding from 8px to 12px

Browse Source 
Names were too tight against the pill edges, especially on longer
provider names. Bumped token from spacing.2 to spacing.3.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-04-06 20:52:22 +10:00
parent ec4b18152b
commit 9f16bc87c2
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/generated/tokens.css
View File

@@ -273,7 +273,7 @@
--fa-input-font-size-default: var(--fa-font-size-base); /** 16px — prevents iOS auto-zoom on focus, matches Figma */ --fa-input-font-size-default: var(--fa-font-size-base); /** 16px — prevents iOS auto-zoom on focus, matches Figma */
--fa-input-border-radius-default: var(--fa-border-radius-sm); /** 4px — subtle rounding, consistent with Figma design */ --fa-input-border-radius-default: var(--fa-border-radius-sm); /** 4px — subtle rounding, consistent with Figma design */
--fa-input-gap-default: var(--fa-spacing-2); /** 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability */ --fa-input-gap-default: var(--fa-spacing-2); /** 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability */
--fa-map-pin-padding-x: var(--fa-spacing-2); /** 8px horizontal padding inside pill */ --fa-map-pin-padding-x: var(--fa-spacing-3); /** 12px horizontal padding inside pill */
--fa-map-pin-border-radius: var(--fa-border-radius-full); /** Fully rounded pill shape */ --fa-map-pin-border-radius: var(--fa-border-radius-full); /** Fully rounded pill shape */
--fa-mini-card-content-padding: var(--fa-spacing-3); /** 12px — matches ProviderCard/VenueCard content padding */ --fa-mini-card-content-padding: var(--fa-spacing-3); /** 12px — matches ProviderCard/VenueCard content padding */
--fa-mini-card-content-gap: var(--fa-spacing-1); /** 4px vertical gap between content rows */ --fa-mini-card-content-gap: var(--fa-spacing-1); /** 4px vertical gap between content rows */

2
src/theme/generated/tokens.js
View File

@@ -73,7 +73,7 @@ export const InputBorderRadiusDefault = "4px"; // 4px — subtle rounding, consi
export const InputGapDefault = "8px"; // 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability export const InputGapDefault = "8px"; // 8px — vertical rhythm between label/input/helper, slightly more generous than Figma's 6px for readability
export const InputIconSizeDefault = "20px"; // 20px — icon size inside input field, matches Figma trailing icon export const InputIconSizeDefault = "20px"; // 20px — icon size inside input field, matches Figma trailing icon
export const MapPinHeight = "28px"; // Pill height — compact for map density export const MapPinHeight = "28px"; // Pill height — compact for map density
export const MapPinPaddingX = "8px"; // 8px horizontal padding inside pill export const MapPinPaddingX = "12px"; // 12px horizontal padding inside pill
export const MapPinFontSize = "12px"; // Small but legible price text export const MapPinFontSize = "12px"; // Small but legible price text
export const MapPinBorderRadius = "9999px"; // Fully rounded pill shape export const MapPinBorderRadius = "9999px"; // Fully rounded pill shape
export const MapPinDotSize = "12px"; // Small circle marker export const MapPinDotSize = "12px"; // Small circle marker

2
tokens/component/mapPin.json
View File

@@ -2,7 +2,7 @@
"mapPin": { "mapPin": {
"$description": "MapPin atom tokens — price-pill map markers for provider/venue map views. Verified (brand) vs unverified (neutral) visual distinction.", "$description": "MapPin atom tokens — price-pill map markers for provider/venue map views. Verified (brand) vs unverified (neutral) visual distinction.",
"height": { "$type": "dimension", "$value": "28px", "$description": "Pill height — compact for map density" }, "height": { "$type": "dimension", "$value": "28px", "$description": "Pill height — compact for map density" },
"paddingX": { "$type": "dimension", "$value": "{spacing.2}", "$description": "8px horizontal padding inside pill" }, "paddingX": { "$type": "dimension", "$value": "{spacing.3}", "$description": "12px horizontal padding inside pill" },
"fontSize": { "$type": "dimension", "$value": "12px", "$description": "Small but legible price text" }, "fontSize": { "$type": "dimension", "$value": "12px", "$description": "Small but legible price text" },
"borderRadius": { "$type": "dimension", "$value": "{borderRadius.full}", "$description": "Fully rounded pill shape" }, "borderRadius": { "$type": "dimension", "$value": "{borderRadius.full}", "$description": "Fully rounded pill shape" },
"dot": { "dot": {