[{"data":1,"prerenderedAt":2735},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fguides\u002Fdesign-tokens":378},{"\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-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\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-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\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-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\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\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\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\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":154,"body":380,"component":377,"description":2719,"extension":2720,"group":151,"meta":2721,"navigation":1623,"order":141,"path":155,"sections":2722,"seo":2732,"stem":2733,"__hash__":2734},"docs_en\u002Fguides\u002Fdesign-tokens.md",{"type":381,"value":382,"toc":2708},"minimark",[383,398,420,428,431,444,466,472,484,487,550,553,714,717,810,825,837,854,867,884,890,896,1061,1094,1100,1103,1211,1225,1238,1241,1303,1323,1349,1355,1404,1422,1426,1449,1472,1478,1489,1594,1597,1635,1646,1649,1706,1713,1724,1730,1746,1757,1812,1828,1852,1871,1874,1964,1987,1992,2020,2039,2104,2122,2131,2134,2141,2146,2164,2174,2180,2245,2259,2288,2301,2307,2333,2355,2368,2371,2693,2705],[384,385,386,387,391,392,397],"p",{},"A theme is a handful of ",[388,389,390],"code",{},"--bb-*"," values; everything else derives from them. Of\nthe 112 custom properties the library ships, 41 are knobs you set and the rest\nare formulas. Start in the ",[393,394,396],"a",{"href":395},"\u002Fen\u002Ftheme-builder","theme builder",", export the light\nand dark blocks, then use this page to decide which values to pin.",[384,399,400,401,404,405,408,409,411,412,415,416,419],{},"Agents get the same set as data: ",[388,402,403],{},"bitboss-ui\u002Fdist\u002Fai\u002Fdesign-tokens.json",", with a\nDESIGN.md-shaped twin in ",[388,406,407],{},"design-tokens.manifest.yaml",". Grep for ",[388,410,390],{},"; there\nis no ",[388,413,414],{},"--color-*"," or ",[388,417,418],{},"--radius-*"," scale to find.",[421,422,424],"h2",{"id":423},"tiers",[425,426,427],"span",{},"Two tiers, two prefixes",[384,429,430],{},"The prefix tells you which tier a token belongs to, and the tiers do not mix.",[384,432,433,439,440,443],{},[434,435,436,438],"strong",{},[388,437,390],{}," are theme tokens",". Global, defined in the library's ",[388,441,442],{},"variables.css",",\nthemable. This is the public API surface, and it is what fills the devtools\nStyles panel, so it stays readable in one screen.",[384,445,446,452,453,456,457,461,462,465],{},[434,447,448,451],{},[388,449,450],{},"--*",", with no prefix, are component tokens",". Each component declares its own\non its root class, so set them there, never on ",[388,454,455],{},":root","\n(",[393,458,460],{"href":459},"#component-tokens","Overriding a component token","). Custom properties inherit,\nand declaring them on the root class keeps a ",[388,463,464],{},"--gap"," set by an outer component\nfrom leaking into an inner one.",[421,467,469],{"id":468},"knobs",[425,470,471],{},"The brand knobs",[384,473,474,475,479,480,483],{},"The colour knobs a theme sets. Shape, scale, motion and overlay knobs are in\n",[393,476,478],{"href":477},"#shape","the next sections",", and ",[388,481,482],{},"design-tokens.json"," lists all 41 with their\nvalues.",[384,485,486],{},"The brand colour and what sits on it:",[488,489,490,516,538,544],"ul",{},[491,492,493,496,497,506,507,515],"li",{},[388,494,495],{},"--bb-primary",": the brand accent. Light ",[425,498,500,503],{"style":499},"white-space:nowrap",[425,501],{"style":502},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(0 0 0)",[388,504,505],{},"rgb(0 0 0)",", dark ",[425,508,509,512],{"style":499},[425,510],{"style":511},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(255 255 255)",[388,513,514],{},"rgb(255 255 255)",".",[491,517,518,521,522,525,526,506,532,515],{},[388,519,520],{},"--bb-primary-fg",": text and icons ",[434,523,524],{},"on"," primary, auto-contrasted. Light ",[425,527,528,530],{"style":499},[425,529],{"style":511},[388,531,514],{},[425,533,534,536],{"style":499},[425,535],{"style":502},[388,537,505],{},[491,539,540,543],{},[388,541,542],{},"--bb-primary-border",": the outline of a primary plate. It follows primary; pin it when a light fill needs an edge.",[491,545,546,549],{},[388,547,548],{},"--bb-link-fg",": the text of link-style buttons. It follows primary; pin it when the primary does not read as text.",[384,551,552],{},"Status colours:",[488,554,555,577,595,614,626,642,654,680,702],{},[491,556,557,560,561,506,569,515],{},[388,558,559],{},"--bb-danger",": errors and destructive intent, and message text too. Light ",[425,562,563,566],{"style":499},[425,564],{"style":565},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(217 59 48)",[388,567,568],{},"rgb(217 59 48)",[425,570,571,574],{"style":499},[425,572],{"style":573},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(251 113 133)",[388,575,576],{},"rgb(251 113 133)",[491,578,579,582,583,506,589,515],{},[388,580,581],{},"--bb-danger-fg",": text and icons on a danger fill. Light ",[425,584,585,587],{"style":499},[425,586],{"style":511},[388,588,514],{},[425,590,591,593],{"style":499},[425,592],{"style":502},[388,594,505],{},[491,596,597,600,601,604,605,613],{},[388,598,599],{},"--bb-success",": the success ",[434,602,603],{},"fill"," of toasts and indicator bubbles. ",[425,606,607,610],{"style":499},[425,608],{"style":609},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(21 128 61)",[388,611,612],{},"rgb(21 128 61)"," in both schemes.",[491,615,616,619,620,613],{},[388,617,618],{},"--bb-success-fg",": text and icons on success. ",[425,621,622,624],{"style":499},[425,623],{"style":511},[388,625,514],{},[491,627,628,631,632,604,634,613],{},[388,629,630],{},"--bb-info",": the info ",[434,633,603],{},[425,635,636,639],{"style":499},[425,637],{"style":638},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(37 99 235)",[388,640,641],{},"rgb(37 99 235)",[491,643,644,647,648,613],{},[388,645,646],{},"--bb-info-fg",": text and icons on info. ",[425,649,650,652],{"style":499},[425,651],{"style":511},[388,653,514],{},[491,655,656,659,660,663,664,506,672,515],{},[388,657,658],{},"--bb-warn",": warning ",[434,661,662],{},"chrome and icons",". Light ",[425,665,666,669],{"style":499},[425,667],{"style":668},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(240 131 88)",[388,670,671],{},"rgb(240 131 88)",[425,673,674,677],{"style":499},[425,675],{"style":676},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(245 158 11)",[388,678,679],{},"rgb(245 158 11)",[491,681,682,659,685,663,688,506,696,515],{},[388,683,684],{},"--bb-text-warn",[434,686,687],{},"message text",[425,689,690,693],{"style":499},[425,691],{"style":692},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(180 83 9)",[388,694,695],{},"rgb(180 83 9)",[425,697,698,700],{"style":499},[425,699],{"style":676},[388,701,679],{},[491,703,704,707,708,613],{},[388,705,706],{},"--bb-warn-fg",": text on a warning fill, which is the indicator bubble. ",[425,709,710,712],{"style":499},[425,711],{"style":511},[388,713,514],{},[384,715,716],{},"Surfaces, text and lines:",[488,718,719,739,757,782,794],{},[491,720,721,724,725,506,731,515],{},[388,722,723],{},"--bb-panel",": raised surfaces such as cards, inputs, popovers and dialogs. Light ",[425,726,727,729],{"style":499},[425,728],{"style":511},[388,730,514],{},[425,732,733,736],{"style":499},[425,734],{"style":735},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(49 54 56)",[388,737,738],{},"rgb(49 54 56)",[491,740,741,744,745,506,751,515],{},[388,742,743],{},"--bb-text",": the foreground. Light ",[425,746,747,749],{"style":499},[425,748],{"style":502},[388,750,505],{},[425,752,753,755],{"style":499},[425,754],{"style":511},[388,756,514],{},[491,758,759,762,763,663,766,506,774,515],{},[388,760,761],{},"--bb-border",": hairlines; pair it with ",[388,764,765],{},"--bb-border-w",[425,767,768,771],{"style":499},[425,769],{"style":770},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(212 212 216)",[388,772,773],{},"rgb(212 212 216)",[425,775,776,779],{"style":499},[425,777],{"style":778},"display:inline-block;width:.75em;height:.75em;border-radius:2px;margin-right:.35em;vertical-align:-.08em;box-shadow:inset 0 0 0 1px rgb(128 128 128 \u002F .45);background:rgb(82 82 91)",[388,780,781],{},"rgb(82 82 91)",[491,783,784,787,788,506,791,515],{},[388,785,786],{},"--bb-ring-opacity",": the strength of the focus ring. Light ",[388,789,790],{},"15%",[388,792,793],{},"40%",[491,795,796,799,800,663,803,506,806,809],{},[388,797,798],{},"--bb-secondary-tint",": how much text tints ",[388,801,802],{},"--bb-secondary",[388,804,805],{},"4%",[388,807,808],{},"6%",", so a secondary field sits as far from an outline one in dark as it does in light.",[384,811,812,817,818,821,822,824],{},[434,813,814,816],{},[388,815,520],{}," auto-contrasts",". Where the browser supports CSS\n",[388,819,820],{},"contrast-color()"," it is derived to black or white, whichever reads on\n",[388,823,495],{},". Set only the accent and you still get legible text on primary\nfills. The values above are the fallback for browsers without it, and setting\nthe token explicitly always wins over both.",[384,826,827,830,831,833,834,836],{},[434,828,829],{},"Warning is two tokens, not one",". ",[388,832,658],{}," 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,835,684],{}," 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.",[384,838,839,847,848,850,851,853],{},[434,840,841,843,844,846],{},[388,842,599],{}," and ",[388,845,630],{}," are fills, not text",". They exist because the\ntoast and the indicator ship those variants. On the dark panel both fall below\n4.5:1, so do not paint running text with them; mix toward ",[388,849,743],{}," first.\n",[388,852,559],{}," does both jobs, since it is also the error message colour. A\ndanger you choose must still clear 4.5:1 as 14px text on the panel.",[384,855,856,863,864,866],{},[434,857,858,859,862],{},"The ",[388,860,861],{},"-fg"," values are pinned, not auto-contrasted",". Each is a literal chosen to\nclear 4.5:1 on the shipped fill, so repin the foreground whenever you repin the\nfill under it. One is below budget on purpose: white on the light salmon of\n",[388,865,706],{}," is 2.59:1, and 2.15:1 on the dark amber. It only ever carries a\nshort number.",[868,869,870],"note",{},[384,871,872,875,876,879,880,883],{},[434,873,874],{},"The status vocabulary is closed",". The library ships a status colour only\nwhere its own components consume one, and it will not grow a scale: no\n",[388,877,878],{},"--bb-good",", no 50–900 ramps, no gauge palettes. A strength meter or an SLA bar\nmints its own accents in project CSS.\n",[393,881,157],{"href":882},"\u002Fen\u002Fguides\u002Fdesign-language#custom-variant"," has the sanctioned\nshape.",[421,885,887],{"id":886},"derived",[425,888,889],{},"Derived colours",[384,891,892,893,515],{},"These follow the knobs on their own. A theme normally never touches them, though\nany of them can be pinned, for example to hand-tune the greys. Every mix is\n",[388,894,895],{},"in oklab",[488,897,898,910,921,936,950,961,969,977,988,997,1005,1013,1021],{},[491,899,900,903,904,906,907,909],{},[388,901,902],{},"--bb-muted",": ",[388,905,743],{}," 6% into ",[388,908,723],{},", for static subtle fills and disabled surfaces.",[491,911,912,903,915,917,918,920],{},[388,913,914],{},"--bb-track",[388,916,743],{}," 15% into ",[388,919,723],{},", for recessed control tracks such as switch and slider rails.",[491,922,923,903,926,928,929,931,932,935],{},[388,924,925],{},"--bb-hover",[388,927,743],{}," 4% into ",[388,930,723],{},", the hover fill for ",[434,933,934],{},"affordances"," such as buttons and nav links.",[491,937,938,903,941,943,944,931,946,949],{},[388,939,940],{},"--bb-surface-hover",[388,942,743],{}," 2% into ",[388,945,723],{},[434,947,948],{},"passive surfaces"," such as rows and day cells.",[491,951,952,903,955,957,958,960],{},[388,953,954],{},"--bb-pressed",[388,956,743],{}," 8% into ",[388,959,723],{},", the neutral pressed fill.",[491,962,963,903,966,968],{},[388,964,965],{},"--bb-text-muted",[388,967,743],{}," at 60% opacity, for secondary text, icons and placeholders.",[491,970,971,903,974,976],{},[388,972,973],{},"--bb-text-faint",[388,975,743],{}," at 45% opacity, for disabled foregrounds.",[491,978,979,903,982,984,985,987],{},[388,980,981],{},"--bb-ring",[388,983,495],{}," at ",[388,986,786],{}," opacity, the focus ring of primary and link variants.",[491,989,990,993,994,996],{},[388,991,992],{},"--bb-ring-danger",": the same with ",[388,995,559],{},", the focus ring in error states.",[491,998,999,993,1002,1004],{},[388,1000,1001],{},"--bb-ring-warn",[388,1003,658],{},", the focus ring in the warning state.",[491,1006,1007,993,1010,1012],{},[388,1008,1009],{},"--bb-ring-neutral",[388,1011,743],{},", the focus ring of neutral variants: grey, never primary.",[491,1014,1015,903,1018,1020],{},[388,1016,1017],{},"--bb-field-border",[388,1019,761],{},", the resting border of every field box. Set it to restyle all fields and nothing else.",[491,1022,1023,1025,1026,1029,1030,1029,1033,1029,1036,843,1038,1041,1042,1029,1045,1029,1048,843,1051,1054,1055,843,1058,1060],{},[388,1024,802],{}," and its ",[388,1027,1028],{},"-hover",", ",[388,1031,1032],{},"-pressed",[388,1034,1035],{},"-border",[388,1037,861],{},[388,1039,1040],{},"-ring",": one value per state for the button plates. The same family exists for ",[388,1043,1044],{},"outline",[388,1046,1047],{},"ghost",[388,1049,1050],{},"link",[388,1052,1053],{},"destructive",", plus ",[388,1056,1057],{},"--bb-primary-hover",[388,1059,1032],{},". Pin one to retune that variant everywhere.",[384,1062,1063,1064,1029,1066,1068,1069,1071,1072,1075,1076,1079,1080,1083,1084,1029,1087,1089,1090,1093],{},"Three knobs sit in between: ",[388,1065,520],{},[388,1067,542],{}," and\n",[388,1070,548],{}," follow another knob until you pin them, and a pin has to be\nrepeated in every scheme block you write, ",[388,1073,1074],{},".dark"," included. The MCP server's\n",[388,1077,1078],{},"list_tokens"," reports each token's ",[388,1081,1082],{},"kind"," (",[388,1085,1086],{},"knob",[388,1088,886],{}," or\n",[388,1091,1092],{},"knob-tracking","), so a tool can tell which names are yours to set.",[421,1095,1097],{"id":1096},"shape",[425,1098,1099],{},"Shape, scale and motion",[384,1101,1102],{},"The default of each knob is in brackets.",[488,1104,1105,1118,1124,1132,1147,1156,1166,1172,1184,1193,1202],{},[491,1106,1107,1083,1110,1113,1114,1117],{},[388,1108,1109],{},"--bb-radius",[388,1111,1112],{},"8px","): ",[434,1115,1116],{},"the"," knob, for buttons, inputs and tab strips.",[491,1119,1120,1123],{},[388,1121,1122],{},"--bb-radius-surface"," (radius × 1.8): dialogs and off-canvas sheets.",[491,1125,1126,1129,1130,515],{},[388,1127,1128],{},"--bb-radius-sm"," (radius × 0.6, 4px floor): nested bits such as table controls and the toast close. Never above ",[388,1131,1109],{},[491,1133,1134,1083,1136,1139,1140,1143,1144,515],{},[388,1135,765],{},[388,1137,1138],{},"1px","): hairlines on plates and dividers. Give it a unit: ",[388,1141,1142],{},"0px",", not ",[388,1145,1146],{},"0",[491,1148,1149,1083,1152,1155],{},[388,1150,1151],{},"--bb-ring-size",[388,1153,1154],{},"2px","): the focus ring thickness.",[491,1157,1158,1161,1162,1165],{},[388,1159,1160],{},"--bb-elev"," (flat): the resting shadow on controls, a full ",[388,1163,1164],{},"box-shadow"," value.",[491,1167,1168,1171],{},[388,1169,1170],{},"--bb-shadow"," (soft, two layers): overlays such as dialogs, popovers, menus and toasts.",[491,1173,1174,1083,1177,1180,1181,1165],{},[388,1175,1176],{},"--bb-surface-filter",[388,1178,1179],{},"none","): frost on raised plates, a full ",[388,1182,1183],{},"backdrop-filter",[491,1185,1186,1083,1189,1192],{},[388,1187,1188],{},"--bb-control-h",[388,1190,1191],{},"32px","): the master control height; buttons and tabs derive from it.",[491,1194,1195,1083,1198,1201],{},[388,1196,1197],{},"--bb-fs",[388,1199,1200],{},"14px","): the master font size; component sizes derive from it.",[491,1203,1204,1083,1207,1210],{},[388,1205,1206],{},"--bb-panel-p",[388,1208,1209],{},"16px","): the content padding of large surfaces.",[384,1212,1213,1214,1217,1218,1221,1222,1224],{},"Radius is tiered by ",[434,1215,1216],{},"role, not by size",", and both extra tiers derive from the\none knob while staying individually pinnable. Nest concentrically with\n",[388,1219,1220],{},"outer radius − padding",". Derive per-size ramps inside a component from\n",[388,1223,1109],{}," with multipliers, never with literals.",[384,1226,1227,1228,1231,1232,1234,1235,1237],{},"A glass theme sets ",[388,1229,1230],{},"--bb-surface-filter: blur(22px) saturate(1.8)"," on ",[388,1233,455],{},"\nand gives ",[388,1236,723],{}," some transparency, or there is nothing to see through.",[384,1239,1240],{},"Overlays have knobs of their own:",[488,1242,1243,1255,1271,1279,1288],{},[491,1244,1245,1083,1248,506,1251,1254],{},[388,1246,1247],{},"--bb-overlay",[388,1249,1250],{},"rgb(0 0 0 \u002F 0.1)",[388,1252,1253],{},"0.5","): the backdrop dim, colour and opacity in one.",[491,1256,1257,1083,1260,1262,1263,1266,1267,1270],{},[388,1258,1259],{},"--bb-overlay-above",[388,1261,1247],{},"): the dim under a dialog or sheet opened over another; ",[388,1264,1265],{},"transparent"," keeps one dim under the whole stack. A dialog that replaces a member of its own ",[388,1268,1269],{},"stack"," adds none.",[491,1272,1273,1083,1276,1278],{},[388,1274,1275],{},"--bb-overlay-blur",[388,1277,1154],{},"): the backdrop blur, on the bottom-most backdrop only.",[491,1280,1281,1083,1284,1287],{},[388,1282,1283],{},"--bb-z-overlay",[388,1285,1286],{},"10","): the overlay z-index.",[491,1289,1290,1083,1293,1296,1297,1299,1300,1302],{},[388,1291,1292],{},"--bb-arrow",[388,1294,1295],{},"1","): popover arrows on (",[388,1298,1295],{},") or off (",[388,1301,1146],{},").",[384,1304,1305,1306,1029,1309,1029,1312,1315,1316,1318,1319,1322],{},"The input metrics (",[388,1307,1308],{},"--bb-input-px",[388,1310,1311],{},"--bb-input-py",[388,1313,1314],{},"--bb-input-icon"," and the\nrest) are in ",[388,1317,482],{},". One worth knowing: ",[388,1320,1321],{},"--bb-input-fs-mobile","\nkeeps field text at 16px or more on phones so iOS does not zoom on focus.",[384,1324,1325,1326,1329,1330,1333,1334,1337,1338,1341,1342,1345,1346,1348],{},"There is ",[434,1327,1328],{},"no font token",". Components inherit the page's ",[388,1331,1332],{},"font-family",", so set\none on ",[388,1335,1336],{},"body","; an app that sets none renders in the browser's serif. The\noptional reset (",[388,1339,1340],{},"resetCss: true",") sets a ",[388,1343,1344],{},"system-ui"," stack, and your own\n",[388,1347,1332],{}," still wins.",[384,1350,1351,1352,1354],{},"Field text has three families of its own, all derived from ",[388,1353,1197],{},": the label,\nthe description under it, and the message line under the control. The hint,\nerrors and warnings share that last family because they take turns in the same\nplace.",[488,1356,1357,1372,1380,1388,1396],{},[491,1358,1359,1083,1362,1364,1365,1368,1369,515],{},[388,1360,1361],{},"--bb-label-fs",[388,1363,1197],{},"): the label above a field; ",[388,1366,1367],{},"--bb-label-weight"," is ",[388,1370,1371],{},"500",[491,1373,1374,1083,1377,1379],{},[388,1375,1376],{},"--bb-description-fs",[388,1378,1197],{},"): field and group-row descriptions.",[491,1381,1382,1083,1385,1387],{},[388,1383,1384],{},"--bb-label-fs-sm",[388,1386,1197],{}," − 2px): inside and floating labels.",[491,1389,1390,1083,1393,1395],{},[388,1391,1392],{},"--bb-description-fs-sm",[388,1394,1197],{}," − 2px): the description under an inside label.",[491,1397,1398,1083,1401,1403],{},[388,1399,1400],{},"--bb-message-fs",[388,1402,1197],{},"): the hint, errors and warnings.",[384,1405,1406,1407,1410,1411,1414,1415,1418,1419,1421],{},"Each family also has a ",[388,1408,1409],{},"-weight"," and a ",[388,1412,1413],{},"-lh"," token. Set a size and its line\nheight follows; on an island, put ",[388,1416,1417],{},"bb-theme"," on the root so the ",[388,1420,1413],{}," formulas\nre-derive there.",[1423,1424],"demo",{"name":1425},"Guides\u002FFieldText",[384,1427,1428,1429,1432,1433,1436,1437,1440,1441,1444,1445,1448],{},"Motion is a closed ladder. ",[388,1430,1431],{},"--bb-transition-fast"," (150ms) is for\nmicro-interactions, ",[388,1434,1435],{},"--bb-transition-medium"," (250ms) for overlays and most moves,\nand ",[388,1438,1439],{},"--bb-transition-slow"," (350ms) for large consumer surfaces. ",[388,1442,1443],{},"--bb-ease"," is\nthe only easing curve. Under ",[388,1446,1447],{},"prefers-reduced-motion"," the components drop every\nmovement (slides, zooms, scale-ins) and keep the fades.",[1450,1451,1452],"warning",{},[384,1453,1454,1368,1457,1460,1461,1463,1464,1467,1468,1471],{},[388,1455,1456],{},"--bb-transition-immediate",[434,1458,1459],{},"not a fourth speed. It is off",". It exists so\nthe ",[388,1462,1447],{}," branches can name what they do instead of each\nhardcoding a magic ",[388,1465,1466],{},"0.01ms",". Override it to another instant value or leave it\nalone. Setting it to ",[388,1469,1470],{},"200ms"," re-enables motion for people who asked for none.",[421,1473,1475],{"id":1474},"ladder",[425,1476,1477],{},"The emphasis ladder",[384,1479,1480,1481,1484,1485,1488],{},"All tinting goes through ",[434,1482,1483],{},"one ladder"," of ",[388,1486,1487],{},"color-mix()"," percentages. No other\npercentage is allowed in a mix with a semantic colour.",[1490,1491,1492,1508],"table",{},[1493,1494,1495],"thead",{},[1496,1497,1498,1502,1505],"tr",{},[1499,1500,1501],"th",{},"Stop",[1499,1503,1504],{},"Meaning",[1499,1506,1507],{},"Example",[1509,1510,1511,1525,1537,1553,1566,1581],"tbody",{},[1496,1512,1513,1519,1522],{},[1514,1515,1516],"td",{},[388,1517,1518],{},"8%",[1514,1520,1521],{},"Resting tint fill",[1514,1523,1524],{},"Secondary button background, tab strip",[1496,1526,1527,1531,1534],{},[1514,1528,1529],{},[388,1530,790],{},[1514,1532,1533],{},"Hover tint fill",[1514,1535,1536],{},"Secondary and destructive button hover",[1496,1538,1539,1544,1547],{},[1514,1540,1541],{},[388,1542,1543],{},"25%",[1514,1545,1546],{},"Pressed or selected tint, tinted borders",[1514,1548,1549,1552],{},[388,1550,1551],{},"aria-pressed"," background, danger border",[1496,1554,1555,1560,1563],{},[1514,1556,1557],{},[388,1558,1559],{},"45%",[1514,1561,1562],{},"Disabled foreground",[1514,1564,1565],{},"Disabled button text",[1496,1567,1568,1573,1578],{},[1514,1569,1570],{},[388,1571,1572],{},"60%",[1514,1574,1575,1576],{},"Muted text, which is ",[388,1577,965],{},[1514,1579,1580],{},"Secondary copy, icons",[1496,1582,1583,1588,1591],{},[1514,1584,1585],{},[388,1586,1587],{},"75%",[1514,1589,1590],{},"Strong but secondary foreground",[1514,1592,1593],{},"Toast icon, alert secondary copy",[384,1595,1596],{},"Two composition modes, chosen by context:",[1598,1599,1604],"pre",{"className":1600,"code":1601,"language":1602,"meta":1603,"style":1603},"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,1605,1606,1613,1619,1625,1630],{"__ignoreMap":1603},[425,1607,1609],{"class":1608,"line":141},"line",[425,1610,1612],{"class":1611},"sLBg1","\u002F* Opaque fill — the element owns its background. *\u002F\n",[425,1614,1615],{"class":1608,"line":145},[425,1616,1618],{"class":1617},"suds8","background: color-mix(in oklab, var(--accent) 8%, var(--bb-panel));\n",[425,1620,1621],{"class":1608,"line":149},[425,1622,1624],{"emptyLinePlaceholder":1623},true,"\n",[425,1626,1627],{"class":1608,"line":177},[425,1628,1629],{"class":1611},"\u002F* Translucent fill — it sits on an unknown background. *\u002F\n",[425,1631,1632],{"class":1608,"line":181},[425,1633,1634],{"class":1617},"background: color-mix(in oklab, var(--accent) 8%, transparent);\n",[384,1636,1637,1638,1641,1642,1645],{},"Solid, non-tinted surfaces darken instead: ",[388,1639,1640],{},"90%"," toward black on hover, ",[388,1643,1644],{},"80%"," on\nactive.",[384,1647,1648],{},"Every interactive component then follows one four-state progression:",[488,1650,1651,1668,1680,1694],{},[491,1652,1653,1656,1657,1659,1660,1663,1664,1667],{},[434,1654,1655],{},"Neutral chrome",": transparent at rest (",[388,1658,1518],{}," if filled), ",[388,1661,1662],{},"var(--bb-hover)"," on hover, ",[388,1665,1666],{},"var(--bb-pressed)"," when pressed.",[491,1669,1670,903,1673,1675,1676,1663,1678,1667],{},[434,1671,1672],{},"Tinted variants",[388,1674,1518],{}," at rest, ",[388,1677,790],{},[388,1679,1543],{},[491,1681,1682,903,1685,1675,1688,1690,1691,1693],{},[434,1683,1684],{},"Solid variants",[388,1686,1687],{},"100%",[388,1689,1640],{}," + black on hover, ",[388,1692,1644],{}," + black when pressed.",[491,1695,1696,1699,1700,1703,1704,515],{},[434,1697,1698],{},"Disabled",", in all three: a ",[388,1701,1702],{},"var(--bb-muted)"," fill with the text at ",[388,1705,1559],{},[384,1707,1708,1709,1712],{},"Focus adds ",[388,1710,1711],{},"box-shadow: 0 0 0 var(--bb-ring-size) var(--bb-ring)"," on top of the\nhover values.",[384,1714,1715,1718,1719,1723],{},[434,1716,1717],{},"Grays stay gray; primary tint means selected",". The tinted progression applies only\nto states that ",[1720,1721,1722],"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.",[421,1725,1727],{"id":1726},"dark",[425,1728,1729],{},"Dark mode and the page canvas",[384,1731,1732,1733,843,1735,1738,1739,1741,1742,1745],{},"One name per token. ",[388,1734,455],{},[388,1736,1737],{},".light"," declare the light values, and ",[388,1740,1074],{},"\nre-declares ",[434,1743,1744],{},"only the knobs that change",". The derived tokens follow on their\nown, because their formulas are declared again at every scheme boundary.",[384,1747,1748,1749,1752,1753,1756],{},"To pin a dark value, write the library's own selector pair. The dark block is\n",[388,1750,1751],{},":root .dark, :root.dark",", and with the library unlayered (the default) a bare\n",[388,1754,1755],{},".dark { … }"," in your sheet loses to it, however late it loads:",[1598,1758,1760],{"className":1600,"code":1759,"language":1602,"meta":1603,"style":1603},":root .dark,\n:root.dark {\n    --bb-primary: rgb(45 212 191);\n}\n",[388,1761,1762,1773,1781,1807],{"__ignoreMap":1603},[425,1763,1764,1767,1770],{"class":1608,"line":141},[425,1765,455],{"class":1766},"s-5SL",[425,1768,1769],{"class":1766}," .dark",[425,1771,1772],{"class":1617},",\n",[425,1774,1775,1778],{"class":1608,"line":145},[425,1776,1777],{"class":1766},":root.dark",[425,1779,1780],{"class":1617}," {\n",[425,1782,1783,1787,1789,1792,1795,1798,1801,1804],{"class":1608,"line":149},[425,1784,1786],{"class":1785},"soyes","    --bb-primary",[425,1788,903],{"class":1617},[425,1790,1791],{"class":1766},"rgb",[425,1793,1794],{"class":1617},"(",[425,1796,1797],{"class":1766},"45",[425,1799,1800],{"class":1766}," 212",[425,1802,1803],{"class":1766}," 191",[425,1805,1806],{"class":1617},");\n",[425,1808,1809],{"class":1608,"line":177},[425,1810,1811],{"class":1617},"}\n",[384,1813,1814,1815,1821,1822,1824,1825,1827],{},"With ",[393,1816,1818],{"href":1817},"\u002Fen\u002Fguides\u002Finstallation#runtime",[388,1819,1820],{},"cssLayers"," set, your unlayered sheet\noutranks the layered library and a bare ",[388,1823,1074],{}," works too. Light pins on ",[388,1826,455],{},"\nwork either way.",[384,1829,1830,1831,1834,1835,1837,1838,1841,1842,1845,1846,1848,1849,1851],{},"Each scheme block also sets the UA ",[388,1832,1833],{},"color-scheme",", and that is load-bearing.\n",[388,1836,1833],{}," governs the ",[434,1839,1840],{},"default canvas fill"," of any element with no\nauthored background, so it always follows the class rather than\n",[388,1843,1844],{},"prefers-color-scheme",". Otherwise a ",[388,1847,1074],{}," document under a light OS preference\nwould flip ",[388,1850,743],{}," to white while the canvas underneath stayed white, making\noutline and ghost buttons invisible.",[868,1853,1854],{},[384,1855,1856,1859,1860,1863,1864,1867,1868,1870],{},[434,1857,1858],{},"There is deliberately no page-canvas token",". No ",[388,1861,1862],{},"--bb-bg",", no ",[388,1865,1866],{},"--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,1869,1336],{}," gets dark mode right with zero CSS.",[384,1872,1873],{},"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:",[1598,1875,1877],{"className":1600,"code":1876,"language":1602,"meta":1603,"style":1603},":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,1878,1879,1885,1933,1937,1944,1960],{"__ignoreMap":1603},[425,1880,1881,1883],{"class":1608,"line":141},[425,1882,455],{"class":1766},[425,1884,1780],{"class":1617},[425,1886,1887,1890,1892,1895,1897,1900,1903,1905,1908,1910,1912,1915,1918,1922,1924,1926,1928,1930],{"class":1608,"line":145},[425,1888,1889],{"class":1785},"    --app-canvas",[425,1891,903],{"class":1617},[425,1893,1894],{"class":1766},"color-mix",[425,1896,1794],{"class":1617},[425,1898,1899],{"class":1785},"in",[425,1901,1902],{"class":1785}," oklab",[425,1904,1029],{"class":1617},[425,1906,1907],{"class":1766},"var",[425,1909,1794],{"class":1617},[425,1911,743],{"class":1785},[425,1913,1914],{"class":1617},") ",[425,1916,1917],{"class":1766},"3",[425,1919,1921],{"class":1920},"sHUrx","%",[425,1923,1029],{"class":1617},[425,1925,1907],{"class":1766},[425,1927,1794],{"class":1617},[425,1929,723],{"class":1785},[425,1931,1932],{"class":1617},"));\n",[425,1934,1935],{"class":1608,"line":149},[425,1936,1811],{"class":1617},[425,1938,1939,1942],{"class":1608,"line":177},[425,1940,1336],{"class":1941},"sne4z",[425,1943,1780],{"class":1617},[425,1945,1946,1949,1951,1953,1955,1958],{"class":1608,"line":181},[425,1947,1948],{"class":1766},"    background",[425,1950,903],{"class":1617},[425,1952,1907],{"class":1766},[425,1954,1794],{"class":1617},[425,1956,1957],{"class":1785},"--app-canvas",[425,1959,1806],{"class":1617},[425,1961,1962],{"class":1608,"line":185},[425,1963,1811],{"class":1617},[384,1965,1966,1967,1974,1975,1978,1979,1981,1982,1986],{},"One CSS mechanic to respect: ",[434,1968,1969,1970,1973],{},"a custom property resolves its ",[388,1971,1972],{},"var()"," references\nwhere it is declared, not where it is consumed",". Override a knob on an arbitrary\nscope, ",[388,1976,1977],{},".brand { --bb-primary: … }",", and the tokens that mix from it do not\nre-derive. Add the ",[388,1980,1417],{}," class to that scope: it re-runs the formulas\nagainst the knobs set there and keeps the page's scheme.\n",[393,1983,1985],{"href":1984},"#theming","Writing a theme"," shows one live. Root-level theming is unaffected.",[421,1988,1990],{"id":1989},"theming",[425,1991,1985],{},[384,1993,1994,1995,1998,1999,2001,2002,2004,2005,1029,2007,1029,2009,1029,2011,1068,2013,2015,2016,2019],{},"A theme is ",[434,1996,1997],{},"two small blocks of the same ten or so declarations",", one per\nscheme: ",[388,2000,455],{}," for light and shared values, ",[388,2003,1751],{}," for dark.\nChange ",[388,2006,495],{},[388,2008,1109],{},[388,2010,1188],{},[388,2012,723],{},[388,2014,559],{}," and you have overhauled the entire library with no other edits. A\ntheme lives in your own CSS, not in the plugin config (the plugin has no ",[388,2017,2018],{},"theme","\noption), so changing it needs no rebuild.",[384,2021,2022,2023,2026,2027,2030,2031,903,2034,2036,2037,515],{},"Ten knobs are registered with ",[388,2024,2025],{},"@property",". Eight are colours with\n",[388,2028,2029],{},"syntax: '\u003Ccolor>'",": primary, primary-fg, danger, warn, text-warn, panel, text\nand border. Two are percentages with ",[388,2032,2033],{},"syntax: '\u003Cpercentage>'",[388,2035,786],{},"\nand ",[388,2038,798],{},[1450,2040,2041,2051,2082],{},[384,2042,2043,2046,2047,2050],{},[434,2044,2045],{},"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,2048,2049],{},"bitboss-ui check",", which reads your stylesheets for class and token names, does\nnot look at values.",[1598,2052,2054],{"className":1600,"code":2053,"language":1602,"meta":1603,"style":1603},":root {\n    --bb-ring-opacity: 0.15; \u002F* wrong: not a \u003Cpercentage> *\u002F\n}\n",[388,2055,2056,2062,2078],{"__ignoreMap":1603},[425,2057,2058,2060],{"class":1608,"line":141},[425,2059,455],{"class":1766},[425,2061,1780],{"class":1617},[425,2063,2064,2067,2069,2072,2075],{"class":1608,"line":145},[425,2065,2066],{"class":1785},"    --bb-ring-opacity",[425,2068,903],{"class":1617},[425,2070,2071],{"class":1766},"0.15",[425,2073,2074],{"class":1617},"; ",[425,2076,2077],{"class":1611},"\u002F* wrong: not a \u003Cpercentage> *\u002F\n",[425,2079,2080],{"class":1608,"line":149},[425,2081,1811],{"class":1617},[384,2083,2084,2085,2087,2088,2091,2092,2094,2095,2097,2098,2100,2101,515],{},"That one looks fine on a light page, because the discarded value happens to match\nthe ",[388,2086,790],{}," initial. Write ",[388,2089,2090],{},"0.4"," on a dark page and the ring quietly drops from the\nshipped ",[388,2093,793],{}," to ",[388,2096,790],{},". Percentages need the ",[388,2099,1921],{},"; colours must be a ",[388,2102,2103],{},"\u003Ccolor>",[384,2105,2106,2107,2110,2111,2114,2115,2117,2118,2121],{},"Registration also makes the knobs ",[434,2108,2109],{},"animatable",". Add ",[388,2112,2113],{},".theme-animated"," to the\nelement carrying the scheme class and theme changes crossfade over\n",[388,2116,1435],{},", with every derived mix re-deriving per frame\n(",[388,2119,2120],{},"\u003Chtml class=\"dark theme-animated\">","). The whole subtree repaints while it\nruns, a deliberate cost, and that is why it is opt-in.",[384,2123,2124,2125,2127,2128,2130],{},"One area can carry its own theme. Put ",[388,2126,1417],{}," on its root and set only the\nknobs that change. Pick a brand and a radius below: the card retints, hover and\nfocus follow, and the page around it stays as it was. Pin ",[388,2129,520],{}," with\nthe new primary, since the island keeps the page's scheme.",[1423,2132],{"name":2133},"Guides\u002FBrandIsland",[384,2135,2136,2137,515],{},"An area that also restyles parts, such as rounder buttons or smaller labels,\npairs the island with a ",[393,2138,2140],{"href":2139},"\u002Fen\u002Fguides\u002Fpassthrough#scopes","named passthrough scope",[421,2142,2144],{"id":2143},"component-tokens",[425,2145,460],{},[384,2147,2148,2149,2152,2153,1231,2156,2159,2160,2163],{},"Component tokens are real affordances. Set one on the element that declares it:\n",[388,2150,2151],{},".settings .bb-tabs-list { --list-h: 40px }"," retunes the tabs in one scope (an\ninline ",[388,2154,2155],{},"style",[388,2157,2158],{},"\u003CBbTabs>"," does nothing, because the inner list redeclares\n",[388,2161,2162],{},"--list-h","). Three rules, in the order they get broken.",[384,2165,2166,2169,2170,2173],{},[434,2167,2168],{},"Override only what you render",". Several components expose a per-size lookup\ntable plus an ",[1720,2171,2172],{},"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.",[384,2175,2176,2179],{},[434,2177,2178],{},"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:",[1598,2181,2183],{"className":1600,"code":2182,"language":1602,"meta":1603,"style":1603},".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,2184,2185,2192,2208,2216,2223,2238],{"__ignoreMap":1603},[425,2186,2187,2190],{"class":1608,"line":141},[425,2188,2189],{"class":1766},".bb-button",[425,2191,1780],{"class":1617},[425,2193,2194,2197,2199,2201,2203,2206],{"class":1608,"line":145},[425,2195,2196],{"class":1785},"    --icon-size",[425,2198,903],{"class":1617},[425,2200,1907],{"class":1766},[425,2202,1794],{"class":1617},[425,2204,2205],{"class":1785},"--icon-size-md",[425,2207,1806],{"class":1617},[425,2209,2210,2213],{"class":1608,"line":149},[425,2211,2212],{"class":1617},"} ",[425,2214,2215],{"class":1611},"\u002F* 0,1,0 *\u002F\n",[425,2217,2218,2221],{"class":1608,"line":177},[425,2219,2220],{"class":1766},".bb-button--sm",[425,2222,1780],{"class":1617},[425,2224,2225,2227,2229,2231,2233,2236],{"class":1608,"line":181},[425,2226,2196],{"class":1785},[425,2228,903],{"class":1617},[425,2230,1907],{"class":1766},[425,2232,1794],{"class":1617},[425,2234,2235],{"class":1785},"--icon-size-sm",[425,2237,1806],{"class":1617},[425,2239,2240,2242],{"class":1608,"line":185},[425,2241,2212],{"class":1617},[425,2243,2244],{"class":1611},"\u002F* 0,2,0 — wins *\u002F\n",[384,2246,2247,2248,2251,2252,2255,2256,2258],{},"So ",[388,2249,2250],{},".bb-button { --icon-size: 12px }"," appears to work on default buttons and does\nnothing on every ",[388,2253,2254],{},"size=\"sm\""," one. Set ",[388,2257,2235],{}," instead: the per-size\nentry has no competing declaration, so it always wins.",[384,2260,2261,2266,2267,2270,2271,1029,2273,2275,2276,1029,2278,843,2281,2284,2285,2287],{},[434,2262,2263,2264],{},"Scope it to the component, never ",[388,2265,455],{},". Short names are deliberately\nreused. ",[388,2268,2269],{},"--icon-size"," is read by ",[388,2272,205],{},[388,2274,339],{}," and the close icon, and\n",[388,2277,464],{},[388,2279,2280],{},"--px",[388,2282,2283],{},"--h"," are everywhere. Hoisting one to ",[388,2286,455],{}," retunes every\ncomponent that shares the name, which is exactly what the sealing rule exists to\nprevent.",[384,2289,2290,2291,2293,2294,2296,2297,2300],{},"In a Tailwind v4 app, set ",[388,2292,1820],{}," first, as in\n",[393,2295,139],{"href":1817},". Without it the library's CSS\nis unlayered. It then beats Tailwind utilities, and any override you write\ninside an ",[388,2298,2299],{},"@layer"," block, on every property it sets.",[421,2302,2304],{"id":2303},"outside-css",[425,2305,2306],{},"Reading a token outside CSS",[384,2308,2309,2310,2313,2314,903,2324,1772,2326,1029,2328,1029,2330,2332],{},"Charts, ",[388,2311,2312],{},"\u003Ccanvas>"," and WebGL do not go through the cascade. They read a token's\ncomputed value as a string and parse it themselves, and ",[434,2315,2316,2317,2319,2320,2323],{},"21 shipped ",[388,2318,390],{},"\ntokens are ",[388,2321,2322],{},"color-mix(in oklab, …)"," values",[388,2325,965],{},[388,2327,973],{},[388,2329,902],{},[388,2331,925],{},", the ring families, and more.",[384,2334,2335,2336,2339,2340,2343,2344,2346,2347,2350,2351,2354],{},"Neither obvious read path returns something a colour parser accepts.\n",[388,2337,2338],{},"getPropertyValue"," hands back the ",[388,2341,2342],{},"color-mix(…)"," expression itself: the ",[388,2345,1972],{},"s\nare filled in, the mix is not. Read a resolved ",[388,2348,2349],{},"color"," instead and\nyou get ",[388,2352,2353],{},"oklab(0.599996 …)",", a syntax most canvas chart libraries never learned.",[1450,2356,2357],{},[384,2358,2359,2360,2363,2364,2367],{},"Canvas ",[434,2361,2362],{},"silently ignores"," an unparseable ",[388,2365,2366],{},"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.",[384,2369,2370],{},"Resolve it through the only thing that understands every CSS colour: an offscreen\ncanvas.",[1598,2372,2376],{"className":2373,"code":2374,"language":2375,"meta":1603,"style":1603},"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 baseline: a silent no-op stays black\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\nconst muted = getComputedStyle(el)\n    .getPropertyValue('--bb-text-muted')\n    .trim();\nresolveCssColor(muted);\n","ts",[388,2377,2378,2407,2432,2451,2478,2493,2505,2531,2585,2632,2636,2640,2657,2673,2684],{"__ignoreMap":1603},[425,2379,2380,2383,2387,2389,2392,2395,2398,2401,2403,2405],{"class":1608,"line":141},[425,2381,2382],{"class":1920},"function",[425,2384,2386],{"class":2385},"sKwhi"," resolveCssColor",[425,2388,1794],{"class":1617},[425,2390,2391],{"class":1785},"value",[425,2393,2394],{"class":1920},":",[425,2396,2397],{"class":1766}," string",[425,2399,2400],{"class":1617},")",[425,2402,2394],{"class":1920},[425,2404,2397],{"class":1766},[425,2406,1780],{"class":1617},[425,2408,2409,2412,2415,2418,2421,2424,2426,2430],{"class":1608,"line":145},[425,2410,2411],{"class":1920},"    const",[425,2413,2414],{"class":1766}," canvas",[425,2416,2417],{"class":1920}," =",[425,2419,2420],{"class":1617}," document.",[425,2422,2423],{"class":2385},"createElement",[425,2425,1794],{"class":1617},[425,2427,2429],{"class":2428},"sT6z2","'canvas'",[425,2431,1806],{"class":1617},[425,2433,2434,2437,2440,2443,2445,2448],{"class":1608,"line":149},[425,2435,2436],{"class":1617},"    canvas.width ",[425,2438,2439],{"class":1920},"=",[425,2441,2442],{"class":1617}," canvas.height ",[425,2444,2439],{"class":1920},[425,2446,2447],{"class":1766}," 1",[425,2449,2450],{"class":1617},";\n",[425,2452,2453,2455,2458,2460,2463,2466,2468,2471,2473,2476],{"class":1608,"line":177},[425,2454,2411],{"class":1920},[425,2456,2457],{"class":1766}," ctx",[425,2459,2417],{"class":1920},[425,2461,2462],{"class":1617}," canvas.",[425,2464,2465],{"class":2385},"getContext",[425,2467,1794],{"class":1617},[425,2469,2470],{"class":2428},"'2d'",[425,2472,2400],{"class":1617},[425,2474,2475],{"class":1920},"!",[425,2477,2450],{"class":1617},[425,2479,2480,2483,2485,2488,2490],{"class":1608,"line":181},[425,2481,2482],{"class":1617},"    ctx.fillStyle ",[425,2484,2439],{"class":1920},[425,2486,2487],{"class":2428}," '#000'",[425,2489,2074],{"class":1617},[425,2491,2492],{"class":1611},"\u002F\u002F baseline: a silent no-op stays black\n",[425,2494,2495,2497,2499,2502],{"class":1608,"line":185},[425,2496,2482],{"class":1617},[425,2498,2439],{"class":1920},[425,2500,2501],{"class":1617}," value; ",[425,2503,2504],{"class":1611},"\u002F\u002F the browser parses and resolves here\n",[425,2506,2507,2510,2513,2515,2517,2519,2521,2523,2525,2527,2529],{"class":1608,"line":225},[425,2508,2509],{"class":1617},"    ctx.",[425,2511,2512],{"class":2385},"fillRect",[425,2514,1794],{"class":1617},[425,2516,1146],{"class":1766},[425,2518,1029],{"class":1617},[425,2520,1146],{"class":1766},[425,2522,1029],{"class":1617},[425,2524,1295],{"class":1766},[425,2526,1029],{"class":1617},[425,2528,1295],{"class":1766},[425,2530,1806],{"class":1617},[425,2532,2533,2535,2538,2541,2543,2546,2548,2551,2553,2555,2558,2560,2563,2566,2568,2570,2572,2574,2576,2578,2580,2582],{"class":1608,"line":229},[425,2534,2411],{"class":1920},[425,2536,2537],{"class":1617}," [",[425,2539,2540],{"class":1766},"r",[425,2542,1029],{"class":1617},[425,2544,2545],{"class":1766},"g",[425,2547,1029],{"class":1617},[425,2549,2550],{"class":1766},"b",[425,2552,1029],{"class":1617},[425,2554,393],{"class":1766},[425,2556,2557],{"class":1617},"] ",[425,2559,2439],{"class":1920},[425,2561,2562],{"class":1617}," ctx.",[425,2564,2565],{"class":2385},"getImageData",[425,2567,1794],{"class":1617},[425,2569,1146],{"class":1766},[425,2571,1029],{"class":1617},[425,2573,1146],{"class":1766},[425,2575,1029],{"class":1617},[425,2577,1295],{"class":1766},[425,2579,1029],{"class":1617},[425,2581,1295],{"class":1766},[425,2583,2584],{"class":1617},").data;\n",[425,2586,2587,2590,2593,2595,2598,2600,2602,2604,2606,2608,2610,2613,2616,2618,2621,2623,2625,2627,2630],{"class":1608,"line":233},[425,2588,2589],{"class":1920},"    return",[425,2591,2592],{"class":2428}," `rgba(${",[425,2594,2540],{"class":1617},[425,2596,2597],{"class":2428},"}, ${",[425,2599,2545],{"class":1617},[425,2601,2597],{"class":2428},[425,2603,2550],{"class":1617},[425,2605,2597],{"class":2428},[425,2607,1794],{"class":2428},[425,2609,393],{"class":1617},[425,2611,2612],{"class":1920}," \u002F",[425,2614,2615],{"class":1766}," 255",[425,2617,1302],{"class":2428},[425,2619,2620],{"class":2385},"toFixed",[425,2622,1794],{"class":2428},[425,2624,1917],{"class":1766},[425,2626,2400],{"class":2428},[425,2628,2629],{"class":2428},"})`",[425,2631,2450],{"class":1617},[425,2633,2634],{"class":1608,"line":237},[425,2635,1811],{"class":1617},[425,2637,2638],{"class":1608,"line":241},[425,2639,1624],{"emptyLinePlaceholder":1623},[425,2641,2643,2646,2649,2651,2654],{"class":1608,"line":2642},12,[425,2644,2645],{"class":1920},"const",[425,2647,2648],{"class":1766}," muted",[425,2650,2417],{"class":1920},[425,2652,2653],{"class":2385}," getComputedStyle",[425,2655,2656],{"class":1617},"(el)\n",[425,2658,2660,2663,2665,2667,2670],{"class":1608,"line":2659},13,[425,2661,2662],{"class":1617},"    .",[425,2664,2338],{"class":2385},[425,2666,1794],{"class":1617},[425,2668,2669],{"class":2428},"'--bb-text-muted'",[425,2671,2672],{"class":1617},")\n",[425,2674,2676,2678,2681],{"class":1608,"line":2675},14,[425,2677,2662],{"class":1617},[425,2679,2680],{"class":2385},"trim",[425,2682,2683],{"class":1617},"();\n",[425,2685,2687,2690],{"class":1608,"line":2686},15,[425,2688,2689],{"class":2385},"resolveCssColor",[425,2691,2692],{"class":1617},"(muted);\n",[384,2694,2695,2696,2699,2700,843,2702,2704],{},"Do it for ",[434,2697,2698],{},"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,2701,965],{},[388,2703,973],{}," first: axis labels, legends, muted\nmarks.",[2155,2706,2707],{},"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":1603,"searchDepth":149,"depth":149,"links":2709},[2710,2711,2712,2713,2714,2715,2716,2717,2718],{"id":423,"depth":145,"text":427},{"id":468,"depth":145,"text":471},{"id":886,"depth":145,"text":889},{"id":1096,"depth":145,"text":1099},{"id":1474,"depth":145,"text":1477},{"id":1726,"depth":145,"text":1729},{"id":1989,"depth":145,"text":1985},{"id":2143,"depth":145,"text":460},{"id":2303,"depth":145,"text":2306},"The token architecture: two tiers, the brand knobs a theme sets, the ladder under every state.","md",{},[2723,2724,2725,2726,2727,2728,2729,2730,2731],{"id":423,"title":427},{"id":468,"title":471},{"id":886,"title":889},{"id":1096,"title":1099},{"id":1474,"title":1477},{"id":1726,"title":1729},{"id":1989,"title":1985},{"id":2143,"title":460},{"id":2303,"title":2306},{"title":154,"description":2719},"guides\u002Fdesign-tokens","jUCVqr3pxbO2VZARPephF5u-2XOPMWgOKhAevpHyITs",1793055148098]