frutjam
Version:
CSS-only Tailwind CSS v4 component library. 65+ accessible UI components, zero JavaScript, WCAG AA guaranteed. Free MCP server for AI editors included.
2 lines (1 loc) • 1.95 kB
JavaScript
export default {".stat-figure":{"grid-column":"2","grid-row":"1 / 4","align-self":"center","justify-self":"end","color":"var(--color-primary)"},".stat-value":{"font-size":"2rem","font-weight":700,"line-height":1.2,"color":"var(--color-on-base)","grid-column":"1","grid-row":"2","white-space":"nowrap"},".stat-title":{"font-size":"0.875rem","font-weight":500,"color":"var(--color-base-700)","grid-column":"1","grid-row":"1","white-space":"nowrap"},".stat-desc":{"font-size":"0.75rem","color":"var(--color-base-700)","grid-column":"1","grid-row":"3"},".stats":{"display":"inline-grid","grid-auto-flow":"column","grid-auto-columns":"1fr","border-radius":"calc(var(--border-radius) * 3)","border-width":"1px","border-style":"solid","border-color":"var(--color-base-soft)","background-color":"var(--color-base)","overflow":"hidden","width":"fit-content"},".stat":{"display":"grid","grid-template-columns":"1fr auto","grid-template-rows":"auto auto auto","gap":"0.25rem 1rem","padding":"1.25rem 1.5rem","& + &":{"border-inline-start":"1px solid var(--color-base-soft)"}},".stats-horizontal":{"grid-auto-flow":"column","grid-auto-rows":"unset","grid-auto-columns":"1fr","& .stat + .stat":{"border-block-start":"none","border-inline-start":"1px solid var(--color-base-soft)"}},".stats-vertical":{"grid-auto-flow":"row","grid-auto-columns":"unset","grid-auto-rows":"1fr","& .stat + .stat":{"border-inline-start":"none","border-block-start":"1px solid var(--color-base-soft)"}},".stat-accent .stat-value":{"color":"var(--color-accent)"},".stat-error .stat-value":{"color":"var(--color-error)"},".stat-info .stat-value":{"color":"var(--color-info)"},".stat-neutral .stat-value":{"color":"var(--color-neutral)"},".stat-primary .stat-value":{"color":"var(--color-primary)"},".stat-secondary .stat-value":{"color":"var(--color-secondary)"},".stat-success .stat-value":{"color":"var(--color-success)"},".stat-warning .stat-value":{"color":"var(--color-warning)"}};