{ "version": "1.4.6", "architecture": { "layers": [ "bp-tokens", "bp-reset", "bp-grid", "bp-components", "bp-utilities" ], "layerOrder": "cascade order — tokens always lose to components, utilities always win", "responsive": { "strategy": "container queries over media queries", "default": "every component root has container-type: inline-size", "note": "use @container, not @media, for component-level breakpoints. Only use @media for full-viewport layouts." }, "tokenPattern": { "patternName": "3-level Constructor Pattern", "reference": "https://www.giorgiosaud.io/notebook/custom-properties-with-defaults", "levels": { "1_base": "--bp-* — context-free design tokens on :root. Never referenced directly inside component CSS.", "2_public": "---* — consumer API. Not declared anywhere; exists only when the consumer sets it. This is the ONLY level AI agents should touch.", "3_private": "--_* — internal only. Resolves public → base chain. Never use or override these." }, "resolutionChain": "--_bg: var(--btn-bg, var(--bp-primary)) /* private ← public ← base */", "rule": "AI agents customize by setting ---* on a CSS class. Never set --_* or --bp-* directly on a component." }, "statePattern": "Visual state lives in ARIA attributes and native pseudo-classes. CSS reads them. JS writes them. Never toggle style classes from JS." }, "baseTokens": { "--bp-primary": "#5fcb9f", "--bp-radius": "0.625rem", "--bp-primary-hover": "oklch(from var(--bp-primary) calc(l - 0.08) c h)", "--bp-primary-subtle": "color-mix(in srgb, var(--bp-primary) 18%, #16140f)", "--bp-primary-fg": "oklch(from var(--bp-primary) 0.15 c h)", "--bp-radius-sm": "calc(var(--bp-radius) * 0.5)", "--bp-radius-md": "var(--bp-radius)", "--bp-radius-lg": "calc(var(--bp-radius) * 1.5)", "--bp-radius-xl": "calc(var(--bp-radius) * 2)", "--bp-radius-full": "9999px", "--bp-color-bg": "#f8f6f2", "--bp-color-bg-subtle": "#f2efe9", "--bp-color-bg-elevated": "#ffffff", "--bp-color-text": "#181715", "--bp-color-text-muted": "#6b6760", "--bp-color-text-inverse": "#f2eee6", "--bp-color-border": "#e5e0d8", "--bp-color-success": "#2e9e72", "--bp-color-warning": "#c97a3d", "--bp-color-error": "#b14a3a", "--bp-color-error-surface": "#a84434", "--bp-color-info": "#3b82f6", "--bp-focus-ring": "0 0 0 3px color-mix(in srgb, var(--bp-primary) 40%, transparent)", "--bp-font-sans": "'Be Vietnam Pro', 'Inter', system-ui, sans-serif", "--bp-font-mono": "'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace", "--bp-font-weight-regular": "400", "--bp-font-weight-medium": "500", "--bp-font-weight-semibold": "600", "--bp-font-weight-bold": "700", "--bp-leading-tight": "1.25", "--bp-leading-normal": "1.5", "--bp-leading-loose": "1.75", "--bp-text-xs": "clamp(0.694rem, 0.65rem + 0.22vw, 0.8rem)", "--bp-text-sm": "clamp(0.833rem, 0.78rem + 0.27vw, 0.95rem)", "--bp-text-base": "clamp(1rem, 0.93rem + 0.33vw, 1.125rem)", "--bp-text-lg": "clamp(1.2rem, 1.11rem + 0.44vw, 1.35rem)", "--bp-text-xl": "clamp(1.44rem, 1.31rem + 0.63vw, 1.8rem)", "--bp-text-2xl": "clamp(1.728rem, 1.54rem + 0.94vw, 2.4rem)", "--bp-text-3xl": "clamp(2.074rem, 1.82rem + 1.27vw, 3.2rem)", "--bp-text-4xl": "clamp(2.488rem, 2.13rem + 1.79vw, 4.2rem)", "--bp-text-5xl": "clamp(2.986rem, 2.5rem + 2.43vw, 5.6rem)", "--bp-space-1": "0.25rem", "--bp-space-2": "0.5rem", "--bp-space-3": "0.75rem", "--bp-space-4": "1rem", "--bp-space-5": "1.25rem", "--bp-space-6": "1.5rem", "--bp-space-8": "2rem", "--bp-space-10": "2.5rem", "--bp-space-12": "3rem", "--bp-space-16": "4rem", "--bp-space-20": "5rem", "--bp-space-24": "6rem", "--bp-shadow-sm": "0 1px 2px 0 rgb(0 0 0 / 0.05)", "--bp-shadow-md": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", "--bp-shadow-lg": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", "--bp-shadow-xl": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", "--bp-duration-fast": "120ms", "--bp-duration-normal": "220ms", "--bp-duration-slow": "380ms", "--bp-ease": "cubic-bezier(0.4, 0, 0.2, 1)", "--bp-ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)" }, "layouts": [ { "name": "content-grid", "title": "Content Grid", "description": "Named-line CSS grid layout. Root class: .bp-content-grid. Zone classes go on DIRECT CHILDREN of the grid, not on the grid root itself.", "rootClass": ".bp-content-grid", "zones": { "content": { "class": null, "width": "~72rem", "note": "Default. No class needed. All direct children land here." }, "popout": { "class": ".popout", "width": "~60rem", "note": "Add class .popout on the child. For quotes, CTAs, mid-size media." }, "breakout": { "class": ".breakout", "width": "~90rem", "note": "Add class .breakout on the child. For grids, covers, video." }, "full-width": { "class": ".full-width", "width": "100vw", "note": "Add class .full-width on the child. Sub-content still inherits grid columns." } }, "publicTokens": { "--padding-inline": { "default": "clamp(1.25rem, 1vw + 1rem, 2rem", "description": "Horizontal gutter. Default: clamp(1.25rem, 1vw + 1rem, 2rem)" }, "--content-max-width": { "default": "72rem", "description": "Max width of the content zone. Default: 72rem (1152px)" }, "--popout-max-width": { "default": "60rem", "description": "Max width of the popout zone. Default: 60rem (960px)" }, "--breakout-max-width": { "default": "90rem", "description": "Max width of the breakout zone. Default: 90rem (1440px)" } }, "html": "
\n

Default content zone — no class needed

\n
Popout zone
\n
Breakout zone
\n
Full-width zone
\n
" } ], "components": [ { "name": "accordion", "title": "Accordion", "description": "Native details/summary accordion — zero JavaScript required.", "html": "\n
…
\n
…
\n\n\n
…
\n
…
", "containerQuery": false, "publicTokens": { "--accordion-bg": { "default": "transparent", "description": "Background color" }, "--accordion-radius": { "default": "0px", "description": "Border radius" }, "--accordion-border": { "default": "1px solid var(--bp-color-border", "description": "Item border" }, "--accordion-accent": { "default": "var(--bp-primary", "description": "Left border color when open" } }, "privateVars": [ "--_bg", "--_radius", "--_border", "--_accent" ], "variants": [], "stateAttrs": [] }, { "name": "alert", "title": "Alert", "description": "Inline feedback message for persistent contextual notices — four semantic variants, optional dismiss, and left-accent stripe.", "html": null, "containerQuery": true, "publicTokens": { "--alert-bg": { "default": "var(--bp-color-bg-subtle", "description": "Background (color-mix tint)" }, "--alert-color": { "default": "var(--bp-color-text", "description": "Text color" }, "--alert-border-color": { "default": "var(--bp-color-border", "description": "Border color" }, "--alert-border-width": { "default": "1px", "description": "Border width (default: 1px)" }, "--alert-border-radius": { "default": "var(--bp-radius-md", "description": "Border radius" }, "--alert-padding-x": { "default": "var(--bp-space-4", "description": "Horizontal padding" }, "--alert-padding-y": { "default": "var(--bp-space-3", "description": "Vertical padding" }, "--alert-gap": { "default": "var(--bp-space-3", "description": "Gap between icon, content, and close button" }, "--alert-accent-width": { "default": "4px", "description": "Left stripe width (default: 4px)" }, "--alert-accent-color": { "default": "var(--_border-color", "description": "Left stripe color" }, "--alert-title-size": { "default": "var(--bp-text-sm", "description": "Font size of title" }, "--alert-body-size": { "default": "var(--bp-text-sm", "description": "Font size of body" } }, "privateVars": [ "--_bg", "--_color", "--_border-color", "--_border-width", "--_border-radius", "--_padding-x", "--_padding-y", "--_gap", "--_accent-width", "--_accent-color" ], "variants": [ "bp-alert--info", "bp-alert--success", "bp-alert--warning", "bp-alert--error", "bp-alert--accent" ], "stateAttrs": [] }, { "name": "avatar", "title": "Avatar", "description": "Circular user image using a native img element — with CSS-only initials fallback, size variants, and composable avatar groups.", "html": null, "containerQuery": false, "publicTokens": { "--avatar-size": { "default": "2.5rem", "description": "Width and height of the avatar" }, "--avatar-radius": { "default": "9999px", "description": "Border radius (circle by default)" }, "--avatar-font-size": { "default": "calc(var(--avatar-size, 2.5rem", "description": "Initials text size" }, "--avatar-font-weight": { "default": "600", "description": "Initials text weight" }, "--avatar-bg": { "default": "var(--bp-color-neutral-200, #e5e7eb", "description": "Fallback background color" }, "--avatar-color": { "default": "var(--bp-color-neutral-700, #374151", "description": "Initials text color" }, "--avatar-border-width": { "default": "2px", "description": "Ring width (used in groups)" }, "--avatar-border-color": { "default": "var(--bp-color-bg, #fff", "description": "Ring color (used in groups)" }, "--avatar-group-overlap": { "default": "-0.75rem", "description": "Negative margin for stacking in groups" }, "--avatar-overflow-bg": { "default": "var(--bp-color-neutral-300, #d1d5db", "description": "Background for overflow count avatar" }, "--avatar-overflow-color": { "default": "var(--bp-color-neutral-800, #1f2937", "description": "Text color for overflow count avatar" } }, "privateVars": [ "--_size", "--_radius", "--_font-size", "--_font-weight", "--_bg", "--_color", "--_border-width", "--_border-color" ], "variants": [ "bp-avatar--xs", "bp-avatar--sm", "bp-avatar--lg", "bp-avatar--xl", "bp-avatar--square", "bp-avatar--overflow" ], "stateAttrs": [] }, { "name": "badge", "title": "Badge", "description": "Inline label for status, counts, and categories — semantic color variants with solid, subtle, and outline styles.", "html": null, "containerQuery": false, "publicTokens": { "--badge-bg": { "default": "var(--bp-primary-subtle", "description": "Background color" }, "--badge-color": { "default": "var(--bp-primary-fg", "description": "Text color" }, "--badge-border": { "default": "1px solid transparent", "description": "Border (default: transparent)" }, "--badge-radius": { "default": "var(--bp-radius-full", "description": "Border radius" } }, "privateVars": [ "--_bg", "--_color", "--_border", "--_radius" ], "variants": [ "bp-badge--primary", "bp-badge--success", "bp-badge--warning", "bp-badge--error", "bp-badge--info", "bp-badge--neutral", "bp-badge--subtle", "bp-badge--outline", "bp-badge--lg" ], "stateAttrs": [] }, { "name": "breadcrumb", "title": "Breadcrumb", "description": "Navigation trail showing the user's location in a hierarchy — semantic `