[{"data":1,"prerenderedAt":2262},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":124,"api-none":352,"page-en-\u002Fguides\u002Fdesign-tokens":353},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":20,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":23,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":24,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":25,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":26,"\u002Fen\u002Fcomponents\u002Fbb-color-input":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":28,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":29,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":30,"\u002Fen\u002Fcomponents\u002Fbb-confirm":31,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":32,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":35,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":36,"\u002Fen\u002Fcomponents\u002Fbb-dialog":37,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":38,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":42,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":43,"\u002Fit\u002Fcomponenti\u002Fbb-form":44,"\u002Fen\u002Fcomponents\u002Fbb-form":45,"\u002Fit\u002Fcomponenti\u002Fbb-icon":46,"\u002Fen\u002Fcomponents\u002Fbb-icon":47,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":48,"\u002Fen\u002Fcomponents\u002Fbb-indicator":49,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":50,"\u002Fen\u002Fcomponents\u002Fbb-number-input":51,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":52,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":53,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":54,"\u002Fen\u002Fcomponents\u002Fbb-pagination":55,"\u002Fit\u002Fcomponenti\u002Fbb-popover":56,"\u002Fen\u002Fcomponents\u002Fbb-popover":57,"\u002Fit\u002Fcomponenti\u002Fbb-progress":58,"\u002Fen\u002Fcomponents\u002Fbb-progress":59,"\u002Fit\u002Fcomponenti\u002Fbb-radio":60,"\u002Fen\u002Fcomponents\u002Fbb-radio":61,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":62,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":63,"\u002Fit\u002Fcomponenti\u002Fbb-rating":64,"\u002Fen\u002Fcomponents\u002Fbb-rating":65,"\u002Fit\u002Fcomponenti\u002Fbb-select":66,"\u002Fen\u002Fcomponents\u002Fbb-select":67,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":68,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":69,"\u002Fit\u002Fcomponenti\u002Fbb-slider":70,"\u002Fen\u002Fcomponents\u002Fbb-slider":71,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":72,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":73,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":74,"\u002Fen\u002Fcomponents\u002Fbb-spinner":75,"\u002Fit\u002Fcomponenti\u002Fbb-switch":76,"\u002Fen\u002Fcomponents\u002Fbb-switch":77,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":78,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":79,"\u002Fit\u002Fcomponenti\u002Fbb-table":80,"\u002Fen\u002Fcomponents\u002Fbb-table":81,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":82,"\u002Fen\u002Fcomponents\u002Fbb-tabs":83,"\u002Fit\u002Fcomponenti\u002Fbb-tag":84,"\u002Fen\u002Fcomponents\u002Fbb-tag":85,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":86,"\u002Fen\u002Fcomponents\u002Fbb-text-input":87,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":88,"\u002Fen\u002Fcomponents\u002Fbb-textarea":89,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":90,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":91,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":92,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":93,"\u002Fit\u002Fcomponenti\u002Fbb-toast":94,"\u002Fen\u002Fcomponents\u002Fbb-toast":95,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":96,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":97,"\u002Fit\u002Fcomponenti\u002Fbb-tree":98,"\u002Fen\u002Fcomponents\u002Fbb-tree":99,"\u002Fit\u002Fguide\u002Fai-agents":100,"\u002Fen\u002Fguides\u002Fai-agents":101,"\u002Fit\u002Fguide\u002Fcoherence":102,"\u002Fen\u002Fguides\u002Fcoherence":103,"\u002Fit\u002Fguide\u002Fdesign-language":104,"\u002Fen\u002Fguides\u002Fdesign-language":105,"\u002Fit\u002Fguide\u002Fdesign-tokens":106,"\u002Fen\u002Fguides\u002Fdesign-tokens":107,"\u002Fit\u002Fguide\u002Ffetching-data":108,"\u002Fen\u002Fguides\u002Ffetching-data":109,"\u002Fit\u002Fguide\u002Ficons":110,"\u002Fen\u002Fguides\u002Ficons":111,"\u002Fit\u002Fguide\u002Finertia":112,"\u002Fen\u002Fguides\u002Finertia":113,"\u002Fit\u002Fguide\u002Finstallation":114,"\u002Fen\u002Fguides\u002Finstallation":115,"\u002Fit\u002Fguide\u002Fmigration":116,"\u002Fen\u002Fguides\u002Fmigration":117,"\u002Fit\u002Fguide\u002Fnuxt":118,"\u002Fen\u002Fguides\u002Fnuxt":119,"\u002Fit\u002Fguide\u002Foptions-and-items":120,"\u002Fen\u002Fguides\u002Foptions-and-items":121,"\u002Fit\u002Fguide\u002Fvalidated-forms":122,"\u002Fen\u002Fguides\u002Fvalidated-forms":123},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[125,136,145,166,178,220,253,286,307,328,340,346],{"label":126,"entries":127},"Getting started",[128,132],{"title":129,"path":130,"order":131},"Installation","\u002Fguides\u002Finstallation",1,{"title":133,"path":134,"order":135},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"label":137,"entries":138},"Design system",[139,142],{"title":140,"path":141,"order":131},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":143,"path":144,"order":135},"Design language","\u002Fguides\u002Fdesign-language",{"label":146,"entries":147},"Playbooks",[148,151,154,158,162],{"title":149,"path":150,"order":131},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":152,"path":153,"order":135},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":155,"path":156,"order":157},"Coherence","\u002Fguides\u002Fcoherence",3,{"title":159,"path":160,"order":161},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":163,"path":164,"order":165},"Icons","\u002Fguides\u002Ficons",5,{"label":167,"entries":168},"Ecosystem",[169,172,175],{"title":170,"path":171,"order":131},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":173,"path":174,"order":135},"Nuxt","\u002Fguides\u002Fnuxt",{"title":176,"path":177,"order":157},"AI agents","\u002Fguides\u002Fai-agents",{"label":179,"entries":180},"Inputs",[181,184,187,190,193,196,200,204,208,212,216],{"title":182,"path":183,"component":182,"order":131},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":185,"path":186,"component":185,"order":135},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":188,"path":189,"component":188,"order":157},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":191,"path":192,"component":191,"order":161},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":194,"path":195,"component":194,"order":165},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":197,"path":198,"component":197,"order":199},"BbForm","\u002Fcomponents\u002Fbb-form",6,{"title":201,"path":202,"component":201,"order":203},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":205,"path":206,"component":205,"order":207},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":209,"path":210,"component":209,"order":211},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":213,"path":214,"component":213,"order":215},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":217,"path":218,"component":217,"order":219},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":221,"entries":222},"Selection",[223,226,229,232,235,238,241,244,247,250],{"title":224,"path":225,"component":224,"order":131},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":227,"path":228,"component":227,"order":135},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":230,"path":231,"component":230,"order":157},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":233,"path":234,"component":233,"order":161},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":236,"path":237,"component":236,"order":165},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":239,"path":240,"component":239,"order":199},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":242,"path":243,"component":242,"order":203},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":245,"path":246,"component":245,"order":207},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":248,"path":249,"component":248,"order":211},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":251,"path":252,"component":251,"order":215},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":254,"entries":255},"Overlay",[256,259,262,265,268,271,274,277,280,283],{"title":257,"path":258,"component":257,"order":131},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":260,"path":261,"component":260,"order":135},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":263,"path":264,"component":263,"order":157},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":266,"path":267,"component":266,"order":161},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":269,"path":270,"component":269,"order":165},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":272,"path":273,"component":272,"order":199},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":275,"path":276,"component":275,"order":203},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":278,"path":279,"component":278,"order":207},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":281,"path":282,"component":281,"order":211},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":284,"path":285,"component":284,"order":215},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":287,"entries":288},"Navigation",[289,292,295,298,301,304],{"title":290,"path":291,"component":290,"order":131},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":293,"path":294,"component":293,"order":135},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":296,"path":297,"component":296,"order":157},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":299,"path":300,"component":299,"order":161},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":302,"path":303,"component":302,"order":165},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":305,"path":306,"component":305,"order":199},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":308,"entries":309},"Feedback",[310,313,316,319,322,325],{"title":311,"path":312,"component":311,"order":131},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":314,"path":315,"component":314,"order":135},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":317,"path":318,"component":317,"order":157},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":320,"path":321,"component":320,"order":161},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":323,"path":324,"component":323,"order":165},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":326,"path":327,"component":326,"order":199},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":329,"entries":330},"Data Display",[331,334,337],{"title":332,"path":333,"component":332,"order":131},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":335,"path":336,"component":335,"order":135},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":338,"path":339,"component":338,"order":157},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":341,"entries":342},"Layout & Utility",[343],{"title":344,"path":345,"component":344,"order":131},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":347,"entries":348},"Other",[349],{"title":350,"path":351,"component":350,"order":131},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":354,"title":140,"body":355,"component":352,"description":2246,"extension":2247,"group":137,"meta":2248,"navigation":1254,"order":131,"path":141,"sections":2249,"seo":2259,"stem":2260,"__hash__":2261},"docs_en\u002Fguides\u002Fdesign-tokens.md",{"type":356,"value":357,"toc":2235},"minimark",[358,362,371,379,382,397,414,425,431,434,638,653,665,694,700,703,892,899,905,911,1052,1066,1085,1110,1116,1127,1225,1228,1266,1277,1280,1375,1382,1393,1399,1416,1440,1459,1462,1560,1582,1588,1607,1625,1697,1711,1717,1724,1734,1740,1805,1819,1848,1854,1880,1902,1915,1918,2219,2231],[359,360,361],"p",{},"The theme layer is 91 custom properties, down from around 140 in v2. That number\nis the point. A token earns its place only when overriding it is a decision a\nreal consumer would make, and everything else is a formula.",[359,363,364,365,370],{},"Turn one knob and the whole library retunes coherently. That is the claim this\npage keeps returning to. Start in the ",[366,367,369],"a",{"href":368},"\u002Fen\u002Ftheme-builder","theme builder",", export\nthe generated light and dark blocks, then use this page to decide which values\nbelong in project CSS and which should stay derived.",[372,373,375],"h2",{"id":374},"tiers",[376,377,378],"span",{},"Two tiers, two prefixes",[359,380,381],{},"The prefix tells you which tier a token belongs to, and the tiers do not mix.",[359,383,384,392,393,396],{},[385,386,387,391],"strong",{},[388,389,390],"code",{},"--bb-*"," are theme tokens",". Global, defined in the library's ",[388,394,395],{},"variables.css",",\nthemable. This is the public API surface. It is also what crowds your devtools\nconsole, so it stays readable in one screen.",[359,398,399,405,406,409,410,413],{},[385,400,401,404],{},[388,402,403],{},"--*",", with no prefix, are component tokens",". Declare them on the component's\nown root class, in the component's own CSS file, never in ",[388,407,408],{},":root",". A\n",[388,411,412],{},"--bb-tab-card-radius-md"," must never exist.",[359,415,416,417,420,421,424],{},"Rule two is what makes the split hold: ",[385,418,419],{},"a component token is declared in the\nsame file that consumes it",". Custom properties inherit, so a ",[388,422,423],{},"--gap"," set by an\nouter component would otherwise leak into an inner one. Declaring it on the root\nclass seals the component.",[372,426,428],{"id":427},"knobs",[376,429,430],{},"The brand knobs",[359,432,433],{},"The complete set a theme sets. If a value is not here, it is not globally\nthemable, and that is a feature rather than a gap.",[435,436,437,456],"table",{},[438,439,440],"thead",{},[441,442,443,447,450,453],"tr",{},[444,445,446],"th",{},"Token",[444,448,449],{},"Light",[444,451,452],{},"Dark",[444,454,455],{},"Meaning",[457,458,459,480,503,521,542,561,581,599,618],"tbody",{},[441,460,461,467,472,477],{},[462,463,464],"td",{},[388,465,466],{},"--bb-primary",[462,468,469],{},[388,470,471],{},"rgb(0 0 0)",[462,473,474],{},[388,475,476],{},"white",[462,478,479],{},"The brand accent",[441,481,482,487,491,496],{},[462,483,484],{},[388,485,486],{},"--bb-primary-fg",[462,488,489],{},[388,490,476],{},[462,492,493],{},[388,494,495],{},"black",[462,497,498,499,502],{},"Text and icons ",[385,500,501],{},"on"," primary, auto-contrasted",[441,504,505,510,515,518],{},[462,506,507],{},[388,508,509],{},"--bb-danger",[462,511,512],{},[388,513,514],{},"rgb(217 59 48)",[462,516,517],{},"rose-400",[462,519,520],{},"Errors, destructive intent",[441,522,523,528,533,536],{},[462,524,525],{},[388,526,527],{},"--bb-warn",[462,529,530],{},[388,531,532],{},"rgb(240 131 88)",[462,534,535],{},"amber-500",[462,537,538,539],{},"Warning ",[385,540,541],{},"chrome and icons",[441,543,544,549,554,556],{},[462,545,546],{},[388,547,548],{},"--bb-text-warn",[462,550,551],{},[388,552,553],{},"rgb(180 83 9)",[462,555,535],{},[462,557,538,558],{},[385,559,560],{},"message text",[441,562,563,568,573,578],{},[462,564,565],{},[388,566,567],{},"--bb-panel",[462,569,570],{},[388,571,572],{},"rgb(255 255 255)",[462,574,575],{},[388,576,577],{},"#313638",[462,579,580],{},"Raised surfaces: cards, inputs, popovers, dialogs",[441,582,583,588,592,596],{},[462,584,585],{},[388,586,587],{},"--bb-text",[462,589,590],{},[388,591,471],{},[462,593,594],{},[388,595,476],{},[462,597,598],{},"Foreground",[441,600,601,606,609,612],{},[462,602,603],{},[388,604,605],{},"--bb-border",[462,607,608],{},"zinc-300",[462,610,611],{},"zinc-600",[462,613,614,615],{},"Hairlines; pair with ",[388,616,617],{},"--bb-border-w",[441,619,620,625,630,635],{},[462,621,622],{},[388,623,624],{},"--bb-ring-opacity",[462,626,627],{},[388,628,629],{},"15%",[462,631,632],{},[388,633,634],{},"40%",[462,636,637],{},"Ring strength",[359,639,640,645,646,649,650,652],{},[385,641,642,644],{},[388,643,486],{}," auto-contrasts",". Where the browser supports CSS\n",[388,647,648],{},"contrast-color()"," it is derived to black or white, whichever reads on\n",[388,651,466],{},". Set only the accent and you still get legible text on primary\nfills. The table's values are the fallback for browsers without it, and setting\nthe token explicitly always wins over both.",[359,654,655,658,659,661,662,664],{},[385,656,657],{},"Warning is two tokens, not one",". ",[388,660,527],{}," paints borders, focus rings and\nthe warning icon. That is decorative reinforcement of a state the icon's shape\nand the message already carry. ",[388,663,548],{}," paints the messages in the live\nregion, which is real text, so it keeps a 4.5:1 budget. One token dark enough for\nthe copy browns the chrome, which is why there are two. In dark mode amber-500\nclears both budgets, so the split is a light-theme distinction only.",[666,667,668],"note",{},[359,669,670,673,674,676,677,679,680,682,683,686,687,690,691,693],{},[385,671,672],{},"The status vocabulary is closed",". The library ships ",[388,675,509],{},",\n",[388,678,527],{}," and ",[388,681,548],{}," because its own built-in states consume them,\nand it will not grow. No ",[388,684,685],{},"--bb-success",", no ",[388,688,689],{},"--bb-info",", no colour ramps or gauge\npalettes. A design that needs status colour beyond those mints its own accents in\nproject CSS. ",[366,692,143],{"href":104}," has the sanctioned\nshape.",[372,695,697],{"id":696},"derived",[376,698,699],{},"Derived colours",[359,701,702],{},"These follow the knobs on their own. A theme normally never touches them.",[435,704,705,720],{},[438,706,707],{},[441,708,709,711,717],{},[444,710,446],{},[444,712,713,714],{},"Formula, all ",[388,715,716],{},"in oklab",[444,718,719],{},"Used for",[457,721,722,737,752,771,789,804,819,834,849,864,878],{},[441,723,724,729,734],{},[462,725,726],{},[388,727,728],{},"--bb-muted",[462,730,731],{},[388,732,733],{},"mix(--bb-text 6%, --bb-panel)",[462,735,736],{},"Static subtle fills, disabled surfaces",[441,738,739,744,749],{},[462,740,741],{},[388,742,743],{},"--bb-track",[462,745,746],{},[388,747,748],{},"mix(--bb-text 15%, --bb-panel)",[462,750,751],{},"Recessed control tracks: switch and slider rails",[441,753,754,759,764],{},[462,755,756],{},[388,757,758],{},"--bb-hover",[462,760,761],{},[388,762,763],{},"mix(--bb-text 4%, --bb-panel)",[462,765,766,767,770],{},"Hover fill for ",[385,768,769],{},"affordances",": buttons, nav links",[441,772,773,778,783],{},[462,774,775],{},[388,776,777],{},"--bb-surface-hover",[462,779,780],{},[388,781,782],{},"mix(--bb-text 2%, --bb-panel)",[462,784,766,785,788],{},[385,786,787],{},"passive surfaces",": rows, day cells",[441,790,791,796,801],{},[462,792,793],{},[388,794,795],{},"--bb-pressed",[462,797,798],{},[388,799,800],{},"mix(--bb-text 8%, --bb-panel)",[462,802,803],{},"Neutral pressed fill",[441,805,806,811,816],{},[462,807,808],{},[388,809,810],{},"--bb-text-muted",[462,812,813],{},[388,814,815],{},"mix(--bb-text 60%, transparent)",[462,817,818],{},"Secondary text, icons, placeholders",[441,820,821,826,831],{},[462,822,823],{},[388,824,825],{},"--bb-text-faint",[462,827,828],{},[388,829,830],{},"mix(--bb-text 45%, transparent)",[462,832,833],{},"Disabled foregrounds",[441,835,836,841,846],{},[462,837,838],{},[388,839,840],{},"--bb-ring",[462,842,843],{},[388,844,845],{},"mix(--bb-primary var(--bb-ring-opacity), transparent)",[462,847,848],{},"Focus ring, primary and link variants",[441,850,851,856,861],{},[462,852,853],{},[388,854,855],{},"--bb-ring-danger",[462,857,858,859],{},"same over ",[388,860,509],{},[462,862,863],{},"Focus ring in error states",[441,865,866,871,875],{},[462,867,868],{},[388,869,870],{},"--bb-ring-warn",[462,872,858,873],{},[388,874,527],{},[462,876,877],{},"Focus ring in the warning state",[441,879,880,885,889],{},[462,881,882],{},[388,883,884],{},"--bb-ring-neutral",[462,886,858,887],{},[388,888,587],{},[462,890,891],{},"Focus ring for neutral variants: grey, never primary",[359,893,894,895,898],{},"They are tokens rather than inlined formulas for two reasons. They are consumed\nin dozens of places, and each one is a ",[385,896,897],{},"pinnable scale step",". A theme that\nwants hand-tuned greys can override any of them, and a cheap theme keeps the\nderivation.",[359,900,901,902,904],{},"The 2\u002F4\u002F6\u002F8 neutral-chrome percentages sit deliberately off the emphasis ladder\nbelow. They live only in ",[388,903,395],{},", which is the sanctioned home of the\nderivation formulas.",[372,906,908],{"id":907},"shape",[376,909,910],{},"Shape, scale and motion",[435,912,913,925],{},[438,914,915],{},[441,916,917,919,922],{},[444,918,446],{},[444,920,921],{},"Default",[444,923,924],{},"Notes",[457,926,927,945,960,975,988,1003,1018,1037],{},[441,928,929,934,939],{},[462,930,931],{},[388,932,933],{},"--bb-radius",[462,935,936],{},[388,937,938],{},"8px",[462,940,941,944],{},[385,942,943],{},"The"," knob: buttons, inputs, tab strips",[441,946,947,952,957],{},[462,948,949],{},[388,950,951],{},"--bb-radius-surface",[462,953,954],{},[388,955,956],{},"calc(var(--bb-radius) * 1.8)",[462,958,959],{},"Dialogs, off-canvas sheets",[441,961,962,967,972],{},[462,963,964],{},[388,965,966],{},"--bb-radius-sm",[462,968,969],{},[388,970,971],{},"max(4px, calc(var(--bb-radius) * 0.6))",[462,973,974],{},"Nested bits: table controls, toast close",[441,976,977,981,986],{},[462,978,979],{},[388,980,617],{},[462,982,983],{},[388,984,985],{},"1px",[462,987],{},[441,989,990,995,1000],{},[462,991,992],{},[388,993,994],{},"--bb-ring-size",[462,996,997],{},[388,998,999],{},"2px",[462,1001,1002],{},"Focus ring thickness",[441,1004,1005,1010,1015],{},[462,1006,1007],{},[388,1008,1009],{},"--bb-control-h",[462,1011,1012],{},[388,1013,1014],{},"32px",[462,1016,1017],{},"Master control height; buttons and tabs derive from it",[441,1019,1020,1025,1030],{},[462,1021,1022],{},[388,1023,1024],{},"--bb-fs",[462,1026,1027],{},[388,1028,1029],{},"14px",[462,1031,1032,1033,1036],{},"Master font size; component sizes derive by ",[388,1034,1035],{},"calc()"," offsets",[441,1038,1039,1044,1049],{},[462,1040,1041],{},[388,1042,1043],{},"--bb-panel-p",[462,1045,1046],{},[388,1047,1048],{},"16px",[462,1050,1051],{},"Content padding of large surfaces",[359,1053,1054,1055,1058,1059,1062,1063,1065],{},"Radius is tiered by ",[385,1056,1057],{},"role, not by size",", and both extra tiers derive from the\none knob while staying individually pinnable. Nest concentrically with\n",[388,1060,1061],{},"outer radius − padding",". Derive per-size ramps inside a component from\n",[388,1064,933],{}," with multipliers, never with literals.",[359,1067,1068,1069,1072,1073,1076,1077,1080,1081,1084],{},"Motion is a closed ladder. ",[388,1070,1071],{},"--bb-transition-fast"," (150ms) is for\nmicro-interactions, ",[388,1074,1075],{},"--bb-transition-medium"," (250ms) for overlays and most moves,\nand ",[388,1078,1079],{},"--bb-transition-slow"," (350ms) for large consumer surfaces. ",[388,1082,1083],{},"--bb-ease"," is\nthe only easing curve.",[1086,1087,1088],"warning",{},[359,1089,1090,1093,1094,1097,1098,1101,1102,1105,1106,1109],{},[388,1091,1092],{},"--bb-transition-immediate"," is ",[385,1095,1096],{},"not a fourth speed. It is off",". It exists so\nthe ",[388,1099,1100],{},"prefers-reduced-motion"," branches can name what they do instead of each\nhardcoding a magic ",[388,1103,1104],{},"0.01ms",". Override it to another instant value or leave it\nalone. Setting it to ",[388,1107,1108],{},"200ms"," re-enables motion for people who asked for none.",[372,1111,1113],{"id":1112},"ladder",[376,1114,1115],{},"The emphasis ladder",[359,1117,1118,1119,1122,1123,1126],{},"All tinting goes through ",[385,1120,1121],{},"one ladder"," of ",[388,1124,1125],{},"color-mix()"," percentages. No other\npercentage is allowed in a mix with a semantic colour.",[435,1128,1129,1141],{},[438,1130,1131],{},[441,1132,1133,1136,1138],{},[444,1134,1135],{},"Stop",[444,1137,455],{},[444,1139,1140],{},"Example",[457,1142,1143,1156,1168,1184,1197,1212],{},[441,1144,1145,1150,1153],{},[462,1146,1147],{},[388,1148,1149],{},"8%",[462,1151,1152],{},"Resting tint fill",[462,1154,1155],{},"Secondary button background, tab strip",[441,1157,1158,1162,1165],{},[462,1159,1160],{},[388,1161,629],{},[462,1163,1164],{},"Hover tint fill",[462,1166,1167],{},"Secondary and destructive button hover",[441,1169,1170,1175,1178],{},[462,1171,1172],{},[388,1173,1174],{},"25%",[462,1176,1177],{},"Pressed or selected tint, tinted borders",[462,1179,1180,1183],{},[388,1181,1182],{},"aria-pressed"," background, danger border",[441,1185,1186,1191,1194],{},[462,1187,1188],{},[388,1189,1190],{},"45%",[462,1192,1193],{},"Disabled foreground",[462,1195,1196],{},"Disabled button text",[441,1198,1199,1204,1209],{},[462,1200,1201],{},[388,1202,1203],{},"60%",[462,1205,1206,1207],{},"Muted text, which is ",[388,1208,810],{},[462,1210,1211],{},"Secondary copy, icons",[441,1213,1214,1219,1222],{},[462,1215,1216],{},[388,1217,1218],{},"75%",[462,1220,1221],{},"Strong but secondary foreground",[462,1223,1224],{},"Toast icon, alert secondary copy",[359,1226,1227],{},"Two composition modes, chosen by context:",[1229,1230,1235],"pre",{"className":1231,"code":1232,"language":1233,"meta":1234,"style":1234},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* Opaque fill — the element owns its background. *\u002F\nbackground: color-mix(in oklab, var(--accent) 8%, var(--bb-panel));\n\n\u002F* Translucent fill — it sits on an unknown background. *\u002F\nbackground: color-mix(in oklab, var(--accent) 8%, transparent);\n","css","",[388,1236,1237,1244,1250,1256,1261],{"__ignoreMap":1234},[376,1238,1240],{"class":1239,"line":131},"line",[376,1241,1243],{"class":1242},"sLBg1","\u002F* Opaque fill — the element owns its background. *\u002F\n",[376,1245,1246],{"class":1239,"line":135},[376,1247,1249],{"class":1248},"suds8","background: color-mix(in oklab, var(--accent) 8%, var(--bb-panel));\n",[376,1251,1252],{"class":1239,"line":157},[376,1253,1255],{"emptyLinePlaceholder":1254},true,"\n",[376,1257,1258],{"class":1239,"line":161},[376,1259,1260],{"class":1242},"\u002F* Translucent fill — it sits on an unknown background. *\u002F\n",[376,1262,1263],{"class":1239,"line":165},[376,1264,1265],{"class":1248},"background: color-mix(in oklab, var(--accent) 8%, transparent);\n",[359,1267,1268,1269,1272,1273,1276],{},"Solid, non-tinted surfaces darken instead: ",[388,1270,1271],{},"90%"," toward black on hover, ",[388,1274,1275],{},"80%"," on\nactive.",[359,1278,1279],{},"Every interactive component then follows one four-state progression:",[435,1281,1282,1298],{},[438,1283,1284],{},[441,1285,1286,1289,1292,1295],{},[444,1287,1288],{},"State",[444,1290,1291],{},"Neutral chrome",[444,1293,1294],{},"Tinted variants",[444,1296,1297],{},"Solid variants",[457,1299,1300,1320,1339,1357],{},[441,1301,1302,1305,1311,1315],{},[462,1303,1304],{},"rest",[462,1306,1307,1308,1310],{},"transparent, or ",[388,1309,1149],{}," if filled",[462,1312,1313],{},[388,1314,1149],{},[462,1316,1317],{},[388,1318,1319],{},"100%",[441,1321,1322,1325,1330,1334],{},[462,1323,1324],{},"hover",[462,1326,1327],{},[388,1328,1329],{},"var(--bb-hover)",[462,1331,1332],{},[388,1333,629],{},[462,1335,1336,1338],{},[388,1337,1271],{}," + black",[441,1340,1341,1344,1349,1353],{},[462,1342,1343],{},"pressed",[462,1345,1346],{},[388,1347,1348],{},"var(--bb-pressed)",[462,1350,1351],{},[388,1352,1174],{},[462,1354,1355,1338],{},[388,1356,1275],{},[441,1358,1359,1362,1370,1373],{},[462,1360,1361],{},"disabled",[462,1363,1364,1367,1368],{},[388,1365,1366],{},"var(--bb-muted)",", text at ",[388,1369,1190],{},[462,1371,1372],{},"same",[462,1374,1372],{},[359,1376,1377,1378,1381],{},"Focus adds ",[388,1379,1380],{},"box-shadow: 0 0 0 var(--bb-ring-size) var(--bb-ring)"," on top of the\nhover values.",[359,1383,1384,1387,1388,1392],{},[385,1385,1386],{},"Grays stay gray; primary tint means selected",". The tinted column applies only\nto states that ",[1389,1390,1391],"em",{},"mean"," something, such as danger variants and brand-selected\nstates. It never applies to plain interaction chrome. That single rule is what\nmakes a yellow theme produce grey hovers and yellow selections, instead of a\nyellow-washed UI.",[372,1394,1396],{"id":1395},"dark",[376,1397,1398],{},"Dark mode and the page canvas",[359,1400,1401,1402,679,1404,1407,1408,1411,1412,1415],{},"One name per token. ",[388,1403,408],{},[388,1405,1406],{},".light"," declare the light values, and ",[388,1409,1410],{},".dark","\nre-declares ",[385,1413,1414],{},"only the knobs that change",". Component tokens and ladder formulas\nfollow on their own, because they are declared on the components themselves.",[359,1417,1418,1419,1422,1423,1425,1426,1429,1430,1433,1434,1436,1437,1439],{},"Each scheme block also sets the UA ",[388,1420,1421],{},"color-scheme",", and that is load-bearing.\n",[388,1424,1421],{}," governs the ",[385,1427,1428],{},"default canvas fill"," of any element with no\nauthored background, so it always follows the class rather than\n",[388,1431,1432],{},"prefers-color-scheme",". Otherwise a ",[388,1435,1410],{}," document under a light OS preference\nwould flip ",[388,1438,587],{}," to white while the canvas underneath stayed white, making\noutline and ghost buttons invisible.",[666,1441,1442],{},[359,1443,1444,1447,1448,686,1451,1454,1455,1458],{},[385,1445,1446],{},"There is deliberately no page-canvas token",". No ",[388,1449,1450],{},"--bb-bg",[388,1452,1453],{},"--bb-page",", and\nthe library paints no page background at all. Author none either and the browser\ncanvas shows through: theme-correct, and it flips for free when the theme does.\nAn app that never paints ",[388,1456,1457],{},"body"," gets dark mode right with zero CSS.",[359,1460,1461],{},"You need a value only when you want a deliberately tinted, recessed canvas so\nwhite cards visibly float. That is a project decision, so mint it in project CSS.\nDerive it and it flips on its own:",[1229,1463,1465],{"className":1231,"code":1464,"language":1233,"meta":1234,"style":1234},":root {\n    --app-canvas: color-mix(in oklab, var(--bb-text) 3%, var(--bb-panel));\n}\nbody {\n    background: var(--app-canvas);\n}\n",[388,1466,1467,1475,1527,1532,1539,1556],{"__ignoreMap":1234},[376,1468,1469,1472],{"class":1239,"line":131},[376,1470,408],{"class":1471},"s-5SL",[376,1473,1474],{"class":1248}," {\n",[376,1476,1477,1481,1484,1487,1490,1493,1496,1499,1502,1504,1506,1509,1512,1516,1518,1520,1522,1524],{"class":1239,"line":135},[376,1478,1480],{"class":1479},"soyes","    --app-canvas",[376,1482,1483],{"class":1248},": ",[376,1485,1486],{"class":1471},"color-mix",[376,1488,1489],{"class":1248},"(",[376,1491,1492],{"class":1479},"in",[376,1494,1495],{"class":1479}," oklab",[376,1497,1498],{"class":1248},", ",[376,1500,1501],{"class":1471},"var",[376,1503,1489],{"class":1248},[376,1505,587],{"class":1479},[376,1507,1508],{"class":1248},") ",[376,1510,1511],{"class":1471},"3",[376,1513,1515],{"class":1514},"sHUrx","%",[376,1517,1498],{"class":1248},[376,1519,1501],{"class":1471},[376,1521,1489],{"class":1248},[376,1523,567],{"class":1479},[376,1525,1526],{"class":1248},"));\n",[376,1528,1529],{"class":1239,"line":157},[376,1530,1531],{"class":1248},"}\n",[376,1533,1534,1537],{"class":1239,"line":161},[376,1535,1457],{"class":1536},"sne4z",[376,1538,1474],{"class":1248},[376,1540,1541,1544,1546,1548,1550,1553],{"class":1239,"line":165},[376,1542,1543],{"class":1471},"    background",[376,1545,1483],{"class":1248},[376,1547,1501],{"class":1471},[376,1549,1489],{"class":1248},[376,1551,1552],{"class":1479},"--app-canvas",[376,1554,1555],{"class":1248},");\n",[376,1557,1558],{"class":1239,"line":199},[376,1559,1531],{"class":1248},[359,1561,1562,1563,1570,1571,1574,1575,1578,1579,1581],{},"One CSS mechanic to respect: ",[385,1564,1565,1566,1569],{},"a custom property resolves its ",[388,1567,1568],{},"var()"," references\nwhere it is declared, not where it is consumed",". Override a knob on an arbitrary\nscope, ",[388,1572,1573],{},".brand { --bb-primary: … }",", and the tokens that mix from it do not\nre-derive. Re-apply the ",[388,1576,1577],{},"light"," or ",[388,1580,1395],{}," class on that scope, or override the\nderived tokens directly. Root-level theming is unaffected.",[372,1583,1585],{"id":1584},"theming",[376,1586,1587],{},"Writing a theme",[359,1589,1590,1591,1594,1595,1498,1597,1498,1599,1498,1601,1603,1604,1606],{},"A theme is ",[385,1592,1593],{},"two small blocks of the same ten or so declarations",", one per\nscheme. Change ",[388,1596,466],{},[388,1598,933],{},[388,1600,1009],{},[388,1602,567],{}," and\n",[388,1605,509],{}," and you have overhauled the entire library with no other edits. A\ntheme lives in CSS variables, not in the plugin config, so changing it needs no\nrebuild.",[359,1608,1609,1610,1613,1614,1617,1618,1620,1621,1624],{},"Nine tokens are registered with ",[388,1611,1612],{},"@property",": the eight colour knobs with\n",[388,1615,1616],{},"syntax: '\u003Ccolor>'",", and ",[388,1619,624],{}," with ",[388,1622,1623],{},"syntax: '\u003Cpercentage>'",".",[1086,1626,1627,1644,1675],{},[359,1628,1629,1632,1633,1636,1637,679,1640,1643],{},[385,1630,1631],{},"A registered property rejects silently",". A declaration that does not parse as\nthe declared syntax is discarded at computed-value time, and the token lands on\nits registered initial value. Nothing errors: not the build, not the console, and\n",[388,1634,1635],{},"bitboss-ui check"," reads ",[388,1638,1639],{},".vue",[388,1641,1642],{},".md",", never stylesheets.",[1229,1645,1647],{"className":1231,"code":1646,"language":1233,"meta":1234,"style":1234},":root {\n    --bb-ring-opacity: 0.15; \u002F* wrong: not a \u003Cpercentage> *\u002F\n}\n",[388,1648,1649,1655,1671],{"__ignoreMap":1234},[376,1650,1651,1653],{"class":1239,"line":131},[376,1652,408],{"class":1471},[376,1654,1474],{"class":1248},[376,1656,1657,1660,1662,1665,1668],{"class":1239,"line":135},[376,1658,1659],{"class":1479},"    --bb-ring-opacity",[376,1661,1483],{"class":1248},[376,1663,1664],{"class":1471},"0.15",[376,1666,1667],{"class":1248},"; ",[376,1669,1670],{"class":1242},"\u002F* wrong: not a \u003Cpercentage> *\u002F\n",[376,1672,1673],{"class":1239,"line":157},[376,1674,1531],{"class":1248},[359,1676,1677,1678,1680,1681,1684,1685,1687,1688,1690,1691,1693,1694,1624],{},"That one looks fine on a light page, because the discarded value happens to match\nthe ",[388,1679,629],{}," initial. Write ",[388,1682,1683],{},"0.4"," on a dark page and the ring quietly drops from the\nshipped ",[388,1686,634],{}," to ",[388,1689,629],{},". Percentages need the ",[388,1692,1515],{},"; colours must be a ",[388,1695,1696],{},"\u003Ccolor>",[359,1698,1699,1700,1703,1704,1707,1708,1710],{},"Registration also makes the knobs ",[385,1701,1702],{},"animatable",". Add ",[388,1705,1706],{},".theme-animated"," to the\nelement carrying the scheme class and theme changes crossfade over\n",[388,1709,1075],{},", with every derived mix re-deriving per frame. Put the\nclass on the same element as the toggle. The whole subtree repaints while it\nruns, a deliberate cost, and that is why it is opt-in.",[372,1712,1714],{"id":1713},"component-tokens",[376,1715,1716],{},"Overriding a component token",[359,1718,1719,1720,1723],{},"Component tokens are real affordances. Retune one instance with\n",[388,1721,1722],{},"\u003CBbTabs style=\"--list-h: 40px\">",", or a whole page scope. Three rules, in the\norder they get broken.",[359,1725,1726,1729,1730,1733],{},[385,1727,1728],{},"Override only what you render",". Several components expose a per-size lookup\ntable plus an ",[1389,1731,1732],{},"active"," token that the size class re-points. Setting the whole\nfamily because you want one value silently opts you out of the size scale for\nvariants you may start using later.",[359,1735,1736,1739],{},[385,1737,1738],{},"Override the per-size entry, not the active token",". The size class re-resolves\nthe active token, and it is more specific than the root class:",[1229,1741,1743],{"className":1231,"code":1742,"language":1233,"meta":1234,"style":1234},".bb-button {\n    --icon-size: var(--icon-size-md);\n} \u002F* 0,1,0 *\u002F\n.bb-button--sm {\n    --icon-size: var(--icon-size-sm);\n} \u002F* 0,2,0 — wins *\u002F\n",[388,1744,1745,1752,1768,1776,1783,1798],{"__ignoreMap":1234},[376,1746,1747,1750],{"class":1239,"line":131},[376,1748,1749],{"class":1471},".bb-button",[376,1751,1474],{"class":1248},[376,1753,1754,1757,1759,1761,1763,1766],{"class":1239,"line":135},[376,1755,1756],{"class":1479},"    --icon-size",[376,1758,1483],{"class":1248},[376,1760,1501],{"class":1471},[376,1762,1489],{"class":1248},[376,1764,1765],{"class":1479},"--icon-size-md",[376,1767,1555],{"class":1248},[376,1769,1770,1773],{"class":1239,"line":157},[376,1771,1772],{"class":1248},"} ",[376,1774,1775],{"class":1242},"\u002F* 0,1,0 *\u002F\n",[376,1777,1778,1781],{"class":1239,"line":161},[376,1779,1780],{"class":1471},".bb-button--sm",[376,1782,1474],{"class":1248},[376,1784,1785,1787,1789,1791,1793,1796],{"class":1239,"line":165},[376,1786,1756],{"class":1479},[376,1788,1483],{"class":1248},[376,1790,1501],{"class":1471},[376,1792,1489],{"class":1248},[376,1794,1795],{"class":1479},"--icon-size-sm",[376,1797,1555],{"class":1248},[376,1799,1800,1802],{"class":1239,"line":199},[376,1801,1772],{"class":1248},[376,1803,1804],{"class":1242},"\u002F* 0,2,0 — wins *\u002F\n",[359,1806,1807,1808,1811,1812,1815,1816,1818],{},"So ",[388,1809,1810],{},".bb-button { --icon-size: 12px }"," appears to work on default buttons and does\nnothing on every ",[388,1813,1814],{},"size=\"sm\""," one. Set ",[388,1817,1795],{}," instead: the per-size\nentry has no competing declaration, so it always wins.",[359,1820,1821,1826,1827,1830,1831,1498,1833,1835,1836,1498,1838,679,1841,1844,1845,1847],{},[385,1822,1823,1824],{},"Scope it to the component, never ",[388,1825,408],{},". Short names are deliberately\nreused. ",[388,1828,1829],{},"--icon-size"," is read by ",[388,1832,185],{},[388,1834,314],{}," and the close icon, and\n",[388,1837,423],{},[388,1839,1840],{},"--px",[388,1842,1843],{},"--h"," are everywhere. Hoisting one to ",[388,1846,408],{}," retunes every\ncomponent that shares the name, which is exactly what the sealing rule exists to\nprevent.",[372,1849,1851],{"id":1850},"outside-css",[376,1852,1853],{},"Reading a token outside CSS",[359,1855,1856,1857,1860,1861,1483,1871,676,1873,1498,1875,1498,1877,1879],{},"Charts, ",[388,1858,1859],{},"\u003Ccanvas>"," and WebGL do not go through the cascade. They read a token's\ncomputed value as a string and parse it themselves, and ",[385,1862,1863,1864,1866,1867,1870],{},"21 shipped ",[388,1865,390],{},"\ntokens are ",[388,1868,1869],{},"color-mix(in oklab, …)"," values",[388,1872,810],{},[388,1874,825],{},[388,1876,728],{},[388,1878,758],{},", the ring families, and more.",[359,1881,1882,1883,1886,1887,1890,1891,1893,1894,1897,1898,1901],{},"Neither obvious read path returns something a colour parser accepts.\n",[388,1884,1885],{},"getPropertyValue"," hands back the ",[385,1888,1889],{},"unresolved"," string, because custom\nproperties get no ",[388,1892,1568],{}," substitution there. Read a resolved ",[388,1895,1896],{},"color"," instead and\nyou get ",[388,1899,1900],{},"oklab(0.599996 …)",", a syntax most canvas chart libraries never learned.",[1086,1903,1904],{},[359,1905,1906,1907,1910,1911,1914],{},"Canvas ",[385,1908,1909],{},"silently ignores"," an unparseable ",[388,1912,1913],{},"fillStyle"," and keeps the previous\ncolour. A chart does not throw. It paints the wrong colour, or black on a fresh\ncontext, with nothing in the console to point at.",[359,1916,1917],{},"Resolve it through the only thing that understands every CSS colour: an offscreen\ncanvas.",[1229,1919,1923],{"className":1920,"code":1921,"language":1922,"meta":1234,"style":1234},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","function resolveCssColor(value: string): string {\n    const canvas = document.createElement('canvas');\n    canvas.width = canvas.height = 1;\n    const ctx = canvas.getContext('2d')!;\n    ctx.fillStyle = '#000'; \u002F\u002F known baseline, so a silent no-op is detectable\n    ctx.fillStyle = value; \u002F\u002F the browser parses and resolves here\n    ctx.fillRect(0, 0, 1, 1);\n    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;\n    return `rgba(${r}, ${g}, ${b}, ${(a \u002F 255).toFixed(3)})`;\n}\n\nresolveCssColor(getComputedStyle(el).getPropertyValue('--bb-text-muted').trim());\n","ts",[388,1924,1925,1954,1979,1998,2025,2040,2052,2080,2134,2182,2186,2190],{"__ignoreMap":1234},[376,1926,1927,1930,1934,1936,1939,1942,1945,1948,1950,1952],{"class":1239,"line":131},[376,1928,1929],{"class":1514},"function",[376,1931,1933],{"class":1932},"sKwhi"," resolveCssColor",[376,1935,1489],{"class":1248},[376,1937,1938],{"class":1479},"value",[376,1940,1941],{"class":1514},":",[376,1943,1944],{"class":1471}," string",[376,1946,1947],{"class":1248},")",[376,1949,1941],{"class":1514},[376,1951,1944],{"class":1471},[376,1953,1474],{"class":1248},[376,1955,1956,1959,1962,1965,1968,1971,1973,1977],{"class":1239,"line":135},[376,1957,1958],{"class":1514},"    const",[376,1960,1961],{"class":1471}," canvas",[376,1963,1964],{"class":1514}," =",[376,1966,1967],{"class":1248}," document.",[376,1969,1970],{"class":1932},"createElement",[376,1972,1489],{"class":1248},[376,1974,1976],{"class":1975},"sT6z2","'canvas'",[376,1978,1555],{"class":1248},[376,1980,1981,1984,1987,1990,1992,1995],{"class":1239,"line":157},[376,1982,1983],{"class":1248},"    canvas.width ",[376,1985,1986],{"class":1514},"=",[376,1988,1989],{"class":1248}," canvas.height ",[376,1991,1986],{"class":1514},[376,1993,1994],{"class":1471}," 1",[376,1996,1997],{"class":1248},";\n",[376,1999,2000,2002,2005,2007,2010,2013,2015,2018,2020,2023],{"class":1239,"line":161},[376,2001,1958],{"class":1514},[376,2003,2004],{"class":1471}," ctx",[376,2006,1964],{"class":1514},[376,2008,2009],{"class":1248}," canvas.",[376,2011,2012],{"class":1932},"getContext",[376,2014,1489],{"class":1248},[376,2016,2017],{"class":1975},"'2d'",[376,2019,1947],{"class":1248},[376,2021,2022],{"class":1514},"!",[376,2024,1997],{"class":1248},[376,2026,2027,2030,2032,2035,2037],{"class":1239,"line":165},[376,2028,2029],{"class":1248},"    ctx.fillStyle ",[376,2031,1986],{"class":1514},[376,2033,2034],{"class":1975}," '#000'",[376,2036,1667],{"class":1248},[376,2038,2039],{"class":1242},"\u002F\u002F known baseline, so a silent no-op is detectable\n",[376,2041,2042,2044,2046,2049],{"class":1239,"line":199},[376,2043,2029],{"class":1248},[376,2045,1986],{"class":1514},[376,2047,2048],{"class":1248}," value; ",[376,2050,2051],{"class":1242},"\u002F\u002F the browser parses and resolves here\n",[376,2053,2054,2057,2060,2062,2065,2067,2069,2071,2074,2076,2078],{"class":1239,"line":203},[376,2055,2056],{"class":1248},"    ctx.",[376,2058,2059],{"class":1932},"fillRect",[376,2061,1489],{"class":1248},[376,2063,2064],{"class":1471},"0",[376,2066,1498],{"class":1248},[376,2068,2064],{"class":1471},[376,2070,1498],{"class":1248},[376,2072,2073],{"class":1471},"1",[376,2075,1498],{"class":1248},[376,2077,2073],{"class":1471},[376,2079,1555],{"class":1248},[376,2081,2082,2084,2087,2090,2092,2095,2097,2100,2102,2104,2107,2109,2112,2115,2117,2119,2121,2123,2125,2127,2129,2131],{"class":1239,"line":207},[376,2083,1958],{"class":1514},[376,2085,2086],{"class":1248}," [",[376,2088,2089],{"class":1471},"r",[376,2091,1498],{"class":1248},[376,2093,2094],{"class":1471},"g",[376,2096,1498],{"class":1248},[376,2098,2099],{"class":1471},"b",[376,2101,1498],{"class":1248},[376,2103,366],{"class":1471},[376,2105,2106],{"class":1248},"] ",[376,2108,1986],{"class":1514},[376,2110,2111],{"class":1248}," ctx.",[376,2113,2114],{"class":1932},"getImageData",[376,2116,1489],{"class":1248},[376,2118,2064],{"class":1471},[376,2120,1498],{"class":1248},[376,2122,2064],{"class":1471},[376,2124,1498],{"class":1248},[376,2126,2073],{"class":1471},[376,2128,1498],{"class":1248},[376,2130,2073],{"class":1471},[376,2132,2133],{"class":1248},").data;\n",[376,2135,2136,2139,2142,2144,2147,2149,2151,2153,2155,2157,2159,2162,2165,2168,2171,2173,2175,2177,2180],{"class":1239,"line":211},[376,2137,2138],{"class":1514},"    return",[376,2140,2141],{"class":1975}," `rgba(${",[376,2143,2089],{"class":1248},[376,2145,2146],{"class":1975},"}, ${",[376,2148,2094],{"class":1248},[376,2150,2146],{"class":1975},[376,2152,2099],{"class":1248},[376,2154,2146],{"class":1975},[376,2156,1489],{"class":1975},[376,2158,366],{"class":1248},[376,2160,2161],{"class":1514}," \u002F",[376,2163,2164],{"class":1471}," 255",[376,2166,2167],{"class":1975},").",[376,2169,2170],{"class":1932},"toFixed",[376,2172,1489],{"class":1975},[376,2174,1511],{"class":1471},[376,2176,1947],{"class":1975},[376,2178,2179],{"class":1975},"})`",[376,2181,1997],{"class":1248},[376,2183,2184],{"class":1239,"line":215},[376,2185,1531],{"class":1248},[376,2187,2188],{"class":1239,"line":219},[376,2189,1255],{"emptyLinePlaceholder":1254},[376,2191,2193,2196,2198,2201,2204,2206,2208,2211,2213,2216],{"class":1239,"line":2192},12,[376,2194,2195],{"class":1932},"resolveCssColor",[376,2197,1489],{"class":1248},[376,2199,2200],{"class":1932},"getComputedStyle",[376,2202,2203],{"class":1248},"(el).",[376,2205,1885],{"class":1932},[376,2207,1489],{"class":1248},[376,2209,2210],{"class":1975},"'--bb-text-muted'",[376,2212,2167],{"class":1248},[376,2214,2215],{"class":1932},"trim",[376,2217,2218],{"class":1248},"());\n",[359,2220,2221,2222,2225,2226,679,2228,2230],{},"Do it for ",[385,2223,2224],{},"every"," token a canvas consumer touches, including the plain-looking\nones. Nothing marks a token as derived from the outside, and a dashboard reaches\nfor ",[388,2227,810],{},[388,2229,825],{}," first: axis labels, legends, muted\nmarks.",[2232,2233,2234],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}",{"title":1234,"searchDepth":157,"depth":157,"links":2236},[2237,2238,2239,2240,2241,2242,2243,2244,2245],{"id":374,"depth":135,"text":378},{"id":427,"depth":135,"text":430},{"id":696,"depth":135,"text":699},{"id":907,"depth":135,"text":910},{"id":1112,"depth":135,"text":1115},{"id":1395,"depth":135,"text":1398},{"id":1584,"depth":135,"text":1587},{"id":1713,"depth":135,"text":1716},{"id":1850,"depth":135,"text":1853},"The token architecture: two tiers, the brand knobs a theme sets, the ladder under every state.","md",{},[2250,2251,2252,2253,2254,2255,2256,2257,2258],{"id":374,"title":378},{"id":427,"title":430},{"id":696,"title":699},{"id":907,"title":910},{"id":1112,"title":1115},{"id":1395,"title":1398},{"id":1584,"title":1587},{"id":1713,"title":1716},{"id":1850,"title":1853},{"title":140,"description":2246},"guides\u002Fdesign-tokens","IW1fpo7CBx_4r59KckHF7etfeqgnF1OGqtyee1YIGjc",1790005167890]