Replace inline circular-button markup and duplicated Badge classes with first-class design-system components so every affordance is globally controllable: - IconButton (float / accent / cream-wash / brand-wash × sm / md / lg) with optional count overlay; raised variants get the hover-lift animation, flat variants keep transition-colors. No visual change. - Badge gains an `as` prop so the search 'Clear' affordance renders as a button with the exact same typography/pill. - Navbar mobile search/menu + overlay close, and the search overlay's mobile floating close, now use IconButton. Cart icon buttons left inline for now — they combine size-specific shadow with the count overlay and deserve a follow-up consolidation once we add a shadow prop to IconButton.
1 line
1.0 KiB
JavaScript
1 line
1.0 KiB
JavaScript
import{C as e,L as t,c as n,et as r,k as i,o as a,r as o,s,tt as c,u as l,x as u}from"./runtime-core.esm-bundler-CjdnoyKJ.js";import{t as d}from"./i18n-Dg26pBrI.js";import{t as f}from"./SectionShell-aXzaQlw9.js";var p={class:`grid sm:grid-cols-3 gap-8`},m={class:`font-mono text-[12px] text-ink block`},h={class:`text-[13px] text-muted mt-1`},g={__name:`ShadowsSection`,setup(g){let{t:_}=d(),v=a(()=>[{name:`sm`,css:`var(--shadow-sm)`,note:_(`ds.shadows.sm.note`)},{name:`md`,css:`var(--shadow-md)`,note:_(`ds.shadows.md.note`)},{name:`lg`,css:`var(--shadow-lg)`,note:_(`ds.shadows.lg.note`)}]);return(a,d)=>(u(),n(f,{eyebrow:t(_)(`ds.eyebrow.tokens`),title:t(_)(`ds.shadows.title`),description:t(_)(`ds.shadows.description`)},{default:i(()=>[s(`div`,p,[(u(!0),l(o,null,e(v.value,e=>(u(),l(`div`,{key:e.name,class:`space-y-4`},[s(`div`,{class:`h-36 rounded-md bg-paper`,style:r({boxShadow:e.css})},null,4),s(`div`,null,[s(`code`,m,`--shadow-`+c(e.name),1),s(`p`,h,c(e.note),1)])]))),128))])]),_:1},8,[`eyebrow`,`title`,`description`]))}};export{g as default}; |