[{"data":1,"prerenderedAt":1553},["ShallowReactive",2],{"bml-reference-design-tokens":3},{"data":4,"body":5},{},{"type":6,"children":7},"root",[8,17,74,86,140,147,667,710,715,721,1041,1052,1070,1171,1177,1438,1461,1522,1541],{"type":9,"tag":10,"props":11,"children":13},"element","h1",{"id":12},"consumer-css-tokens",[14],{"type":15,"value":16},"text","Consumer CSS tokens",{"type":9,"tag":18,"props":19,"children":20},"p",{},[21,23,30,32,37,39,44,46,51,53,58,60,65,67,72],{"type":15,"value":22},"Import the library once with ",{"type":9,"tag":24,"props":25,"children":27},"code",{"className":26},"",[28],{"type":15,"value":29},"\u003Cimport library=\"io.bosca:bml-design\" \u002F>",{"type":15,"value":31},". Its defaults load before\napplication CSS and use ",{"type":9,"tag":24,"props":33,"children":34},{"className":26},[35],{"type":15,"value":36},":where(:root)",{"type":15,"value":38},". Set variables on ",{"type":9,"tag":24,"props":40,"children":41},{"className":26},[42],{"type":15,"value":43},":root",{"type":15,"value":45},", a class, or a ",{"type":9,"tag":24,"props":47,"children":48},{"className":26},[49],{"type":15,"value":50},"[data-theme]",{"type":15,"value":52},"\nsubtree. The library selects no theme attribute and sets no document background, layout, reset or\n",{"type":9,"tag":24,"props":54,"children":55},{"className":26},[56],{"type":15,"value":57},"color-scheme",{"type":15,"value":59},". Applications apply their own document typography and choose ",{"type":9,"tag":24,"props":61,"children":62},{"className":26},[63],{"type":15,"value":64},"color-scheme: light",{"type":15,"value":66},"\nor ",{"type":9,"tag":24,"props":68,"children":69},{"className":26},[70],{"type":15,"value":71},"dark",{"type":15,"value":73}," where native controls need it.",{"type":9,"tag":75,"props":76,"children":81},"pre",{"className":77,"code":79,"filename":-1,"highlights":-1,"language":80,"meta":26},[78],"language-css",".product-theme {\n  --bg-0: #f0f9ff;\n  --bg-1: #fff;\n  --bg-2: #e0f2fe;\n  --bg-3: #bae6fd;\n  --fg-0: #082f49;\n  --fg-1: #0c4a6e;\n  --fg-2: #075985;\n  --fg-3: #0369a1;\n  --fg-4: #0284c7;\n  --line: #7dd3fc;\n  --line-2: #38bdf8;\n  --control-border: #0369a1;\n  --accent: #0369a1;\n  --ok: #15803d;\n  --warn: #a16207;\n  --err: #b91c1c;\n  --info: #1d4ed8;\n  --purple: #7c3aed;\n  --shadow-color: #164e63;\n  --backdrop-color: #164e63;\n  color: var(--fg-0);\n  color-scheme: light;\n  font-family: var(--font-sans);\n}\n","css",[82],{"type":9,"tag":24,"props":83,"children":84},{"__ignoreMap":26},[85],{"type":15,"value":79},{"type":9,"tag":18,"props":87,"children":88},{},[89,91,96,98,103,105,110,112,117,119,124,126,131,133,138],{"type":15,"value":90},"Two differently themed roots can coexist. Component states derive values at their point of use;\nchanging a parent class updates mounted controls and open overlays. Optional control, overlay and\neditor overrides below are intentionally unset by default. In particular, ",{"type":9,"tag":24,"props":92,"children":93},{"className":26},[94],{"type":15,"value":95},"--control-bg",{"type":15,"value":97}," falls back\nto the local ",{"type":9,"tag":24,"props":99,"children":100},{"className":26},[101],{"type":15,"value":102},"--bg-2",{"type":15,"value":104},", ",{"type":9,"tag":24,"props":106,"children":107},{"className":26},[108],{"type":15,"value":109},"--control-border",{"type":15,"value":111}," to each control's existing local ",{"type":9,"tag":24,"props":113,"children":114},{"className":26},[115],{"type":15,"value":116},"--line-2",{"type":15,"value":118}," or ",{"type":9,"tag":24,"props":120,"children":121},{"className":26},[122],{"type":15,"value":123},"--line",{"type":15,"value":125},",\nand ",{"type":9,"tag":24,"props":127,"children":128},{"className":26},[129],{"type":15,"value":130},"--control-radius",{"type":15,"value":132}," to the local ",{"type":9,"tag":24,"props":134,"children":135},{"className":26},[136],{"type":15,"value":137},"--r-sm",{"type":15,"value":139},". Defining those aliases at the\ndocument root would resolve them there and hide a subtree's later base-token changes. Set an alias\nexplicitly when that separate appearance is intended.",{"type":9,"tag":141,"props":142,"children":144},"h2",{"id":143},"palette-defaults",[145],{"type":15,"value":146},"Palette defaults",{"type":9,"tag":148,"props":149,"children":150},"table",{},[151,175],{"type":9,"tag":152,"props":153,"children":154},"thead",{},[155],{"type":9,"tag":156,"props":157,"children":158},"tr",{},[159,165,170],{"type":9,"tag":160,"props":161,"children":162},"th",{},[163],{"type":15,"value":164},"Token",{"type":9,"tag":160,"props":166,"children":167},{},[168],{"type":15,"value":169},"Default",{"type":9,"tag":160,"props":171,"children":172},{},[173],{"type":15,"value":174},"Role",{"type":9,"tag":176,"props":177,"children":178},"tbody",{},[179,204,228,252,276,299,323,347,371,395,419,443,466,489,525,561,585,632],{"type":9,"tag":156,"props":180,"children":181},{},[182,191,199],{"type":9,"tag":183,"props":184,"children":185},"td",{},[186],{"type":9,"tag":24,"props":187,"children":188},{"className":26},[189],{"type":15,"value":190},"--accent",{"type":9,"tag":183,"props":192,"children":193},{},[194],{"type":9,"tag":24,"props":195,"children":196},{"className":26},[197],{"type":15,"value":198},"#64748b",{"type":9,"tag":183,"props":200,"children":201},{},[202],{"type":15,"value":203},"Primary borders\u002Ficons, focus and selected states",{"type":9,"tag":156,"props":205,"children":206},{},[207,215,223],{"type":9,"tag":183,"props":208,"children":209},{},[210],{"type":9,"tag":24,"props":211,"children":212},{"className":26},[213],{"type":15,"value":214},"--on-accent",{"type":9,"tag":183,"props":216,"children":217},{},[218],{"type":9,"tag":24,"props":219,"children":220},{"className":26},[221],{"type":15,"value":222},"#fff",{"type":9,"tag":183,"props":224,"children":225},{},[226],{"type":15,"value":227},"Foreground on filled heading icons, switch thumbs and editor menus",{"type":9,"tag":156,"props":229,"children":230},{},[231,239,247],{"type":9,"tag":183,"props":232,"children":233},{},[234],{"type":9,"tag":24,"props":235,"children":236},{"className":26},[237],{"type":15,"value":238},"--bg-0",{"type":9,"tag":183,"props":240,"children":241},{},[242],{"type":9,"tag":24,"props":243,"children":244},{"className":26},[245],{"type":15,"value":246},"#0a0c12",{"type":9,"tag":183,"props":248,"children":249},{},[250],{"type":15,"value":251},"Base search\u002Fsegmented surface",{"type":9,"tag":156,"props":253,"children":254},{},[255,263,271],{"type":9,"tag":183,"props":256,"children":257},{},[258],{"type":9,"tag":24,"props":259,"children":260},{"className":26},[261],{"type":15,"value":262},"--bg-1",{"type":9,"tag":183,"props":264,"children":265},{},[266],{"type":9,"tag":24,"props":267,"children":268},{"className":26},[269],{"type":15,"value":270},"#10131c",{"type":9,"tag":183,"props":272,"children":273},{},[274],{"type":15,"value":275},"Cards, panels, dialogs and popovers",{"type":9,"tag":156,"props":277,"children":278},{},[279,286,294],{"type":9,"tag":183,"props":280,"children":281},{},[282],{"type":9,"tag":24,"props":283,"children":284},{"className":26},[285],{"type":15,"value":102},{"type":9,"tag":183,"props":287,"children":288},{},[289],{"type":9,"tag":24,"props":290,"children":291},{"className":26},[292],{"type":15,"value":293},"#161a25",{"type":9,"tag":183,"props":295,"children":296},{},[297],{"type":15,"value":298},"Controls, secondary panels and active editor lines",{"type":9,"tag":156,"props":300,"children":301},{},[302,310,318],{"type":9,"tag":183,"props":303,"children":304},{},[305],{"type":9,"tag":24,"props":306,"children":307},{"className":26},[308],{"type":15,"value":309},"--bg-3",{"type":9,"tag":183,"props":311,"children":312},{},[313],{"type":9,"tag":24,"props":314,"children":315},{"className":26},[316],{"type":15,"value":317},"#1d2230",{"type":9,"tag":183,"props":319,"children":320},{},[321],{"type":15,"value":322},"Hover\u002Fraised surfaces, selected options and tooltip background",{"type":9,"tag":156,"props":324,"children":325},{},[326,334,342],{"type":9,"tag":183,"props":327,"children":328},{},[329],{"type":9,"tag":24,"props":330,"children":331},{"className":26},[332],{"type":15,"value":333},"--fg-0",{"type":9,"tag":183,"props":335,"children":336},{},[337],{"type":9,"tag":24,"props":338,"children":339},{"className":26},[340],{"type":15,"value":341},"#f3f5fb",{"type":9,"tag":183,"props":343,"children":344},{},[345],{"type":15,"value":346},"Strong text and active labels",{"type":9,"tag":156,"props":348,"children":349},{},[350,358,366],{"type":9,"tag":183,"props":351,"children":352},{},[353],{"type":9,"tag":24,"props":354,"children":355},{"className":26},[356],{"type":15,"value":357},"--fg-1",{"type":9,"tag":183,"props":359,"children":360},{},[361],{"type":9,"tag":24,"props":362,"children":363},{"className":26},[364],{"type":15,"value":365},"#cdd2e2",{"type":9,"tag":183,"props":367,"children":368},{},[369],{"type":15,"value":370},"Ordinary component text",{"type":9,"tag":156,"props":372,"children":373},{},[374,382,390],{"type":9,"tag":183,"props":375,"children":376},{},[377],{"type":9,"tag":24,"props":378,"children":379},{"className":26},[380],{"type":15,"value":381},"--fg-2",{"type":9,"tag":183,"props":383,"children":384},{},[385],{"type":9,"tag":24,"props":386,"children":387},{"className":26},[388],{"type":15,"value":389},"#969cb1",{"type":9,"tag":183,"props":391,"children":392},{},[393],{"type":15,"value":394},"Secondary text and icons",{"type":9,"tag":156,"props":396,"children":397},{},[398,406,414],{"type":9,"tag":183,"props":399,"children":400},{},[401],{"type":9,"tag":24,"props":402,"children":403},{"className":26},[404],{"type":15,"value":405},"--fg-3",{"type":9,"tag":183,"props":407,"children":408},{},[409],{"type":9,"tag":24,"props":410,"children":411},{"className":26},[412],{"type":15,"value":413},"#6c7388",{"type":9,"tag":183,"props":415,"children":416},{},[417],{"type":15,"value":418},"Hints, placeholders and muted text",{"type":9,"tag":156,"props":420,"children":421},{},[422,430,438],{"type":9,"tag":183,"props":423,"children":424},{},[425],{"type":9,"tag":24,"props":426,"children":427},{"className":26},[428],{"type":15,"value":429},"--fg-4",{"type":9,"tag":183,"props":431,"children":432},{},[433],{"type":9,"tag":24,"props":434,"children":435},{"className":26},[436],{"type":15,"value":437},"#454b60",{"type":9,"tag":183,"props":439,"children":440},{},[441],{"type":15,"value":442},"Separators and quiet control adornments",{"type":9,"tag":156,"props":444,"children":445},{},[446,453,461],{"type":9,"tag":183,"props":447,"children":448},{},[449],{"type":9,"tag":24,"props":450,"children":451},{"className":26},[452],{"type":15,"value":123},{"type":9,"tag":183,"props":454,"children":455},{},[456],{"type":9,"tag":24,"props":457,"children":458},{"className":26},[459],{"type":15,"value":460},"#232839",{"type":9,"tag":183,"props":462,"children":463},{},[464],{"type":15,"value":465},"Ordinary borders and dividers",{"type":9,"tag":156,"props":467,"children":468},{},[469,476,484],{"type":9,"tag":183,"props":470,"children":471},{},[472],{"type":9,"tag":24,"props":473,"children":474},{"className":26},[475],{"type":15,"value":116},{"type":9,"tag":183,"props":477,"children":478},{},[479],{"type":9,"tag":24,"props":480,"children":481},{"className":26},[482],{"type":15,"value":483},"#2e3447",{"type":9,"tag":183,"props":485,"children":486},{},[487],{"type":15,"value":488},"Control fallback and overlay borders",{"type":9,"tag":156,"props":490,"children":491},{},[492,506,520],{"type":9,"tag":183,"props":493,"children":494},{},[495,500,501],{"type":9,"tag":24,"props":496,"children":497},{"className":26},[498],{"type":15,"value":499},"--ok",{"type":15,"value":104},{"type":9,"tag":24,"props":502,"children":503},{"className":26},[504],{"type":15,"value":505},"--warn",{"type":9,"tag":183,"props":507,"children":508},{},[509,514,515],{"type":9,"tag":24,"props":510,"children":511},{"className":26},[512],{"type":15,"value":513},"#34d99a",{"type":15,"value":104},{"type":9,"tag":24,"props":516,"children":517},{"className":26},[518],{"type":15,"value":519},"#ffb547",{"type":9,"tag":183,"props":521,"children":522},{},[523],{"type":15,"value":524},"Success and warning",{"type":9,"tag":156,"props":526,"children":527},{},[528,542,556],{"type":9,"tag":183,"props":529,"children":530},{},[531,536,537],{"type":9,"tag":24,"props":532,"children":533},{"className":26},[534],{"type":15,"value":535},"--err",{"type":15,"value":104},{"type":9,"tag":24,"props":538,"children":539},{"className":26},[540],{"type":15,"value":541},"--info",{"type":9,"tag":183,"props":543,"children":544},{},[545,550,551],{"type":9,"tag":24,"props":546,"children":547},{"className":26},[548],{"type":15,"value":549},"#ff5470",{"type":15,"value":104},{"type":9,"tag":24,"props":552,"children":553},{"className":26},[554],{"type":15,"value":555},"#5ec5ff",{"type":9,"tag":183,"props":557,"children":558},{},[559],{"type":15,"value":560},"Error\u002Fdanger and information",{"type":9,"tag":156,"props":562,"children":563},{},[564,572,580],{"type":9,"tag":183,"props":565,"children":566},{},[567],{"type":9,"tag":24,"props":568,"children":569},{"className":26},[570],{"type":15,"value":571},"--purple",{"type":9,"tag":183,"props":573,"children":574},{},[575],{"type":9,"tag":24,"props":576,"children":577},{"className":26},[578],{"type":15,"value":579},"#a78bff",{"type":9,"tag":183,"props":581,"children":582},{},[583],{"type":15,"value":584},"Purple badge tone and source keywords",{"type":9,"tag":156,"props":586,"children":587},{},[588,608,627],{"type":9,"tag":183,"props":589,"children":590},{},[591,596,597,602,603],{"type":9,"tag":24,"props":592,"children":593},{"className":26},[594],{"type":15,"value":595},"--mark-top",{"type":15,"value":104},{"type":9,"tag":24,"props":598,"children":599},{"className":26},[600],{"type":15,"value":601},"--mark-right",{"type":15,"value":104},{"type":9,"tag":24,"props":604,"children":605},{"className":26},[606],{"type":15,"value":607},"--mark-left",{"type":9,"tag":183,"props":609,"children":610},{},[611,615,616,621,622],{"type":9,"tag":24,"props":612,"children":613},{"className":26},[614],{"type":15,"value":555},{"type":15,"value":104},{"type":9,"tag":24,"props":617,"children":618},{"className":26},[619],{"type":15,"value":620},"#79d3ff",{"type":15,"value":104},{"type":9,"tag":24,"props":623,"children":624},{"className":26},[625],{"type":15,"value":626},"#409dcc",{"type":9,"tag":183,"props":628,"children":629},{},[630],{"type":15,"value":631},"Three faces of the original Bosca mark",{"type":9,"tag":156,"props":633,"children":634},{},[635,649,662],{"type":9,"tag":183,"props":636,"children":637},{},[638,643,644],{"type":9,"tag":24,"props":639,"children":640},{"className":26},[641],{"type":15,"value":642},"--shadow-color",{"type":15,"value":104},{"type":9,"tag":24,"props":645,"children":646},{"className":26},[647],{"type":15,"value":648},"--backdrop-color",{"type":9,"tag":183,"props":650,"children":651},{},[652,657,658],{"type":9,"tag":24,"props":653,"children":654},{"className":26},[655],{"type":15,"value":656},"#000",{"type":15,"value":104},{"type":9,"tag":24,"props":659,"children":660},{"className":26},[661],{"type":15,"value":656},{"type":9,"tag":183,"props":663,"children":664},{},[665],{"type":15,"value":666},"Neutral elevation and modal backdrop colors",{"type":9,"tag":18,"props":668,"children":669},{},[670,672,677,678,683,684,689,690,695,697,702,704,708],{"type":15,"value":671},"Git and Studio retain ",{"type":9,"tag":24,"props":673,"children":674},{"className":26},[675],{"type":15,"value":676},"--brand-1",{"type":15,"value":104},{"type":9,"tag":24,"props":679,"children":680},{"className":26},[681],{"type":15,"value":682},"--brand-2",{"type":15,"value":104},{"type":9,"tag":24,"props":685,"children":686},{"className":26},[687],{"type":15,"value":688},"--brand-accent",{"type":15,"value":104},{"type":9,"tag":24,"props":691,"children":692},{"className":26},[693],{"type":15,"value":694},"--brand-grad",{"type":15,"value":696}," and\n",{"type":9,"tag":24,"props":698,"children":699},{"className":26},[700],{"type":15,"value":701},"--brand-grad-soft",{"type":15,"value":703}," for application branding and ambient surfaces. Those gradients belong to the\napplication. Exported controls use ",{"type":9,"tag":24,"props":705,"children":706},{"className":26},[707],{"type":15,"value":190},{"type":15,"value":709},"; the mark uses its three face colors. This retains\nGit's separate accent and brand choices without imposing its document artwork on another consumer.",{"type":9,"tag":18,"props":711,"children":712},{},[713],{"type":15,"value":714},"Status borders, badge fills, selected options and hover states mix the local palette with transparency\nor another local surface. Disabled controls retain those colors with reduced opacity; pending buttons\nretain their size and replace visible content with a spinner. There is no global text-selection rule:\nsource and JSON editors expose selection hooks below, and applications own ordinary document selection.",{"type":9,"tag":141,"props":716,"children":718},{"id":717},"controls-typography-and-focus",[719],{"type":15,"value":720},"Controls, typography and focus",{"type":9,"tag":148,"props":722,"children":723},{},[724,743],{"type":9,"tag":152,"props":725,"children":726},{},[727],{"type":9,"tag":156,"props":728,"children":729},{},[730,734,738],{"type":9,"tag":160,"props":731,"children":732},{},[733],{"type":15,"value":164},{"type":9,"tag":160,"props":735,"children":736},{},[737],{"type":15,"value":169},{"type":9,"tag":160,"props":739,"children":740},{},[741],{"type":15,"value":742},"Applies to",{"type":9,"tag":176,"props":744,"children":745},{},[746,772,802,826,874,898,922,946,993,1017],{"type":9,"tag":156,"props":747,"children":748},{},[749,756,767],{"type":9,"tag":183,"props":750,"children":751},{},[752],{"type":9,"tag":24,"props":753,"children":754},{"className":26},[755],{"type":15,"value":95},{"type":9,"tag":183,"props":757,"children":758},{},[759,761,765],{"type":15,"value":760},"Local ",{"type":9,"tag":24,"props":762,"children":763},{"className":26},[764],{"type":15,"value":102},{"type":15,"value":766}," fallback",{"type":9,"tag":183,"props":768,"children":769},{},[770],{"type":15,"value":771},"Buttons, inputs, native selects, popover triggers and source search controls",{"type":9,"tag":156,"props":773,"children":774},{},[775,782,797],{"type":9,"tag":183,"props":776,"children":777},{},[778],{"type":9,"tag":24,"props":779,"children":780},{"className":26},[781],{"type":15,"value":109},{"type":9,"tag":183,"props":783,"children":784},{},[785,787,791,792,796],{"type":15,"value":786},"Existing local ",{"type":9,"tag":24,"props":788,"children":789},{"className":26},[790],{"type":15,"value":116},{"type":15,"value":118},{"type":9,"tag":24,"props":793,"children":794},{"className":26},[795],{"type":15,"value":123},{"type":15,"value":766},{"type":9,"tag":183,"props":798,"children":799},{},[800],{"type":15,"value":801},"Neutral buttons\u002Ficon links, inputs\u002Ftextareas, selects, search controls, switch tracks, segmented frames, popover triggers and source-search fields\u002Fbuttons; surface frames and dividers keep their palette tokens",{"type":9,"tag":156,"props":803,"children":804},{},[805,812,821],{"type":9,"tag":183,"props":806,"children":807},{},[808],{"type":9,"tag":24,"props":809,"children":810},{"className":26},[811],{"type":15,"value":130},{"type":9,"tag":183,"props":813,"children":814},{},[815,816,820],{"type":15,"value":760},{"type":9,"tag":24,"props":817,"children":818},{"className":26},[819],{"type":15,"value":137},{"type":15,"value":766},{"type":9,"tag":183,"props":822,"children":823},{},[824],{"type":15,"value":825},"Buttons and inputs",{"type":9,"tag":156,"props":827,"children":828},{},[829,849,869],{"type":9,"tag":183,"props":830,"children":831},{},[832,837,838,843,844],{"type":9,"tag":24,"props":833,"children":834},{"className":26},[835],{"type":15,"value":836},"--control-height-md",{"type":15,"value":104},{"type":9,"tag":24,"props":839,"children":840},{"className":26},[841],{"type":15,"value":842},"--control-height-sm",{"type":15,"value":104},{"type":9,"tag":24,"props":845,"children":846},{"className":26},[847],{"type":15,"value":848},"--control-height-xs",{"type":9,"tag":183,"props":850,"children":851},{},[852,857,858,863,864],{"type":9,"tag":24,"props":853,"children":854},{"className":26},[855],{"type":15,"value":856},"32px",{"type":15,"value":104},{"type":9,"tag":24,"props":859,"children":860},{"className":26},[861],{"type":15,"value":862},"30px",{"type":15,"value":104},{"type":9,"tag":24,"props":865,"children":866},{"className":26},[867],{"type":15,"value":868},"24px",{"type":9,"tag":183,"props":870,"children":871},{},[872],{"type":15,"value":873},"Button\u002Finput\u002Fselect sizes, icon actions and popover triggers; picker query rows use the small height",{"type":9,"tag":156,"props":875,"children":876},{},[877,885,893],{"type":9,"tag":183,"props":878,"children":879},{},[880],{"type":9,"tag":24,"props":881,"children":882},{"className":26},[883],{"type":15,"value":884},"--control-gap",{"type":9,"tag":183,"props":886,"children":887},{},[888],{"type":9,"tag":24,"props":889,"children":890},{"className":26},[891],{"type":15,"value":892},"6px",{"type":9,"tag":183,"props":894,"children":895},{},[896],{"type":15,"value":897},"Button icon\u002Fcontent spacing and popover trigger spacing",{"type":9,"tag":156,"props":899,"children":900},{},[901,909,917],{"type":9,"tag":183,"props":902,"children":903},{},[904],{"type":9,"tag":24,"props":905,"children":906},{"className":26},[907],{"type":15,"value":908},"--focus-width",{"type":9,"tag":183,"props":910,"children":911},{},[912],{"type":9,"tag":24,"props":913,"children":914},{"className":26},[915],{"type":15,"value":916},"2px",{"type":9,"tag":183,"props":918,"children":919},{},[920],{"type":15,"value":921},"Two-pixel keyboard focus outlines and JSON edit outlines",{"type":9,"tag":156,"props":923,"children":924},{},[925,933,941],{"type":9,"tag":183,"props":926,"children":927},{},[928],{"type":9,"tag":24,"props":929,"children":930},{"className":26},[931],{"type":15,"value":932},"--focus-offset",{"type":9,"tag":183,"props":934,"children":935},{},[936],{"type":9,"tag":24,"props":937,"children":938},{"className":26},[939],{"type":15,"value":940},"3px",{"type":9,"tag":183,"props":942,"children":943},{},[944],{"type":15,"value":945},"Outward focus rings on buttons, links, checkboxes, switches and popover triggers",{"type":9,"tag":156,"props":947,"children":948},{},[949,968,988],{"type":9,"tag":183,"props":950,"children":951},{},[952,956,957,962,963],{"type":9,"tag":24,"props":953,"children":954},{"className":26},[955],{"type":15,"value":137},{"type":15,"value":104},{"type":9,"tag":24,"props":958,"children":959},{"className":26},[960],{"type":15,"value":961},"--r-md",{"type":15,"value":104},{"type":9,"tag":24,"props":964,"children":965},{"className":26},[966],{"type":15,"value":967},"--r-lg",{"type":9,"tag":183,"props":969,"children":970},{},[971,976,977,982,983],{"type":9,"tag":24,"props":972,"children":973},{"className":26},[974],{"type":15,"value":975},"9px",{"type":15,"value":104},{"type":9,"tag":24,"props":978,"children":979},{"className":26},[980],{"type":15,"value":981},"12px",{"type":15,"value":104},{"type":9,"tag":24,"props":984,"children":985},{"className":26},[986],{"type":15,"value":987},"16px",{"type":9,"tag":183,"props":989,"children":990},{},[991],{"type":15,"value":992},"Compact surfaces, cards\u002Fpanels\u002Feditors, modal corners",{"type":9,"tag":156,"props":994,"children":995},{},[996,1004,1012],{"type":9,"tag":183,"props":997,"children":998},{},[999],{"type":9,"tag":24,"props":1000,"children":1001},{"className":26},[1002],{"type":15,"value":1003},"--font-sans",{"type":9,"tag":183,"props":1005,"children":1006},{},[1007],{"type":9,"tag":24,"props":1008,"children":1009},{"className":26},[1010],{"type":15,"value":1011},"\"Geist\", \"Inter\", -apple-system, system-ui, sans-serif",{"type":9,"tag":183,"props":1013,"children":1014},{},[1015],{"type":15,"value":1016},"Inherited control typography and overlay\u002Feditor text",{"type":9,"tag":156,"props":1018,"children":1019},{},[1020,1028,1036],{"type":9,"tag":183,"props":1021,"children":1022},{},[1023],{"type":9,"tag":24,"props":1024,"children":1025},{"className":26},[1026],{"type":15,"value":1027},"--font-mono",{"type":9,"tag":183,"props":1029,"children":1030},{},[1031],{"type":9,"tag":24,"props":1032,"children":1033},{"className":26},[1034],{"type":15,"value":1035},"\"Geist Mono\", \"JetBrains Mono\", ui-monospace, monospace",{"type":9,"tag":183,"props":1037,"children":1038},{},[1039],{"type":15,"value":1040},"Monospaced inputs, source and JSON text",{"type":9,"tag":18,"props":1042,"children":1043},{},[1044,1046,1050],{"type":15,"value":1045},"Set ",{"type":9,"tag":24,"props":1047,"children":1048},{"className":26},[1049],{"type":15,"value":109},{"type":15,"value":1051}," separately when controls need clearer boundaries than surrounding dividers.\nThe catalog keeps subtle surface borders and sets this override in each palette. Focus, expanded,\nprimary, danger, ghost and disabled states retain their existing styling.",{"type":9,"tag":18,"props":1053,"children":1054},{},[1055,1057,1061,1063,1068],{"type":15,"value":1056},"Focus color follows ",{"type":9,"tag":24,"props":1058,"children":1059},{"className":26},[1060],{"type":15,"value":190},{"type":15,"value":1062},", or ",{"type":9,"tag":24,"props":1064,"children":1065},{"className":26},[1066],{"type":15,"value":1067},"--json-accent",{"type":15,"value":1069}," inside the structured editor. Tab rows, trees,\nscrolling regions and popup options retain their existing inset offsets to keep outlines visible\ninside clipped surfaces. One-pixel editor focus borders remain one pixel. Native checkbox\u002Fswitch\ndimensions, text sizes and layout spacing are independent of the shared control heights.",{"type":9,"tag":18,"props":1071,"children":1072},{},[1073,1075,1080,1081,1086,1088,1093,1094,1099,1100,1105,1107,1112,1114,1118,1120,1125,1127,1132,1133,1138,1140,1144,1145,1150,1152,1157,1158,1163,1165,1169],{"type":15,"value":1074},"Use documented component props and stable modifiers for other changes: button ",{"type":9,"tag":24,"props":1076,"children":1077},{"className":26},[1078],{"type":15,"value":1079},"size",{"type":15,"value":104},{"type":9,"tag":24,"props":1082,"children":1083},{"className":26},[1084],{"type":15,"value":1085},"primary",{"type":15,"value":1087},",\n",{"type":9,"tag":24,"props":1089,"children":1090},{"className":26},[1091],{"type":15,"value":1092},"danger",{"type":15,"value":104},{"type":9,"tag":24,"props":1095,"children":1096},{"className":26},[1097],{"type":15,"value":1098},"ghost",{"type":15,"value":104},{"type":9,"tag":24,"props":1101,"children":1102},{"className":26},[1103],{"type":15,"value":1104},"block",{"type":15,"value":1106}," and ",{"type":9,"tag":24,"props":1108,"children":1109},{"className":26},[1110],{"type":15,"value":1111},"icon-only",{"type":15,"value":1113},"; input ",{"type":9,"tag":24,"props":1115,"children":1116},{"className":26},[1117],{"type":15,"value":1079},{"type":15,"value":1119},"\u002F",{"type":9,"tag":24,"props":1121,"children":1122},{"className":26},[1123],{"type":15,"value":1124},"mono",{"type":15,"value":1126},"; page-shell ",{"type":9,"tag":24,"props":1128,"children":1129},{"className":26},[1130],{"type":15,"value":1131},"fill",{"type":15,"value":1119},{"type":9,"tag":24,"props":1134,"children":1135},{"className":26},[1136],{"type":15,"value":1137},"narrow",{"type":15,"value":1139},"; dialog\n",{"type":9,"tag":24,"props":1141,"children":1142},{"className":26},[1143],{"type":15,"value":1079},{"type":15,"value":1119},{"type":9,"tag":24,"props":1146,"children":1147},{"className":26},[1148],{"type":15,"value":1149},"triggerStyle",{"type":15,"value":1151},"; source-view ",{"type":9,"tag":24,"props":1153,"children":1154},{"className":26},[1155],{"type":15,"value":1156},"compact",{"type":15,"value":1119},{"type":9,"tag":24,"props":1159,"children":1160},{"className":26},[1161],{"type":15,"value":1162},"bare",{"type":15,"value":1164},"; select ",{"type":9,"tag":24,"props":1166,"children":1167},{"className":26},[1168],{"type":15,"value":1079},{"type":15,"value":1170}," and its native option content.\nForward an application class through the documented attribute target when styling that control.\nGenerated BML scope IDs and third-party editor classes are not consumer styling hooks.",{"type":9,"tag":141,"props":1172,"children":1174},{"id":1173},"optional-component-overrides",[1175],{"type":15,"value":1176},"Optional component overrides",{"type":9,"tag":148,"props":1178,"children":1179},{},[1180,1196],{"type":9,"tag":152,"props":1181,"children":1182},{},[1183],{"type":9,"tag":156,"props":1184,"children":1185},{},[1186,1191],{"type":9,"tag":160,"props":1187,"children":1188},{},[1189],{"type":15,"value":1190},"Tokens",{"type":9,"tag":160,"props":1192,"children":1193},{},[1194],{"type":15,"value":1195},"Default when unset",{"type":9,"tag":176,"props":1197,"children":1198},{},[1199,1219,1259,1280,1307,1352,1373,1393],{"type":9,"tag":156,"props":1200,"children":1201},{},[1202,1210],{"type":9,"tag":183,"props":1203,"children":1204},{},[1205],{"type":9,"tag":24,"props":1206,"children":1207},{"className":26},[1208],{"type":15,"value":1209},"--error-fg",{"type":9,"tag":183,"props":1211,"children":1212},{},[1213,1217],{"type":9,"tag":24,"props":1214,"children":1215},{"className":26},[1216],{"type":15,"value":535},{"type":15,"value":1218}," for alert text",{"type":9,"tag":156,"props":1220,"children":1221},{},[1222,1242],{"type":9,"tag":183,"props":1223,"children":1224},{},[1225,1230,1231,1236,1237],{"type":9,"tag":24,"props":1226,"children":1227},{"className":26},[1228],{"type":15,"value":1229},"--tooltip-bg",{"type":15,"value":104},{"type":9,"tag":24,"props":1232,"children":1233},{"className":26},[1234],{"type":15,"value":1235},"--tooltip-fg",{"type":15,"value":104},{"type":9,"tag":24,"props":1238,"children":1239},{"className":26},[1240],{"type":15,"value":1241},"--tooltip-border",{"type":9,"tag":183,"props":1243,"children":1244},{},[1245,1249,1250,1254,1255],{"type":9,"tag":24,"props":1246,"children":1247},{"className":26},[1248],{"type":15,"value":309},{"type":15,"value":104},{"type":9,"tag":24,"props":1251,"children":1252},{"className":26},[1253],{"type":15,"value":333},{"type":15,"value":104},{"type":9,"tag":24,"props":1256,"children":1257},{"className":26},[1258],{"type":15,"value":116},{"type":9,"tag":156,"props":1260,"children":1261},{},[1262,1270],{"type":9,"tag":183,"props":1263,"children":1264},{},[1265],{"type":9,"tag":24,"props":1266,"children":1267},{"className":26},[1268],{"type":15,"value":1269},"--tooltip-shadow",{"type":9,"tag":183,"props":1271,"children":1272},{},[1273,1278],{"type":9,"tag":24,"props":1274,"children":1275},{"className":26},[1276],{"type":15,"value":1277},"0 4px 12px",{"type":15,"value":1279}," with shadow color at one-third opacity",{"type":9,"tag":156,"props":1281,"children":1282},{},[1283,1297],{"type":9,"tag":183,"props":1284,"children":1285},{},[1286,1291,1292],{"type":9,"tag":24,"props":1287,"children":1288},{"className":26},[1289],{"type":15,"value":1290},"--dialog-shadow",{"type":15,"value":104},{"type":9,"tag":24,"props":1293,"children":1294},{"className":26},[1295],{"type":15,"value":1296},"--dialog-backdrop",{"type":9,"tag":183,"props":1298,"children":1299},{},[1300,1305],{"type":9,"tag":24,"props":1301,"children":1302},{"className":26},[1303],{"type":15,"value":1304},"0 30px 100px",{"type":15,"value":1306}," with shadow color at 8\u002F15 opacity; backdrop color at 60%",{"type":9,"tag":156,"props":1308,"children":1309},{},[1310,1330],{"type":9,"tag":183,"props":1311,"children":1312},{},[1313,1318,1319,1324,1325],{"type":9,"tag":24,"props":1314,"children":1315},{"className":26},[1316],{"type":15,"value":1317},"--popover-shadow",{"type":15,"value":104},{"type":9,"tag":24,"props":1320,"children":1321},{"className":26},[1322],{"type":15,"value":1323},"--select-shadow",{"type":15,"value":104},{"type":9,"tag":24,"props":1326,"children":1327},{"className":26},[1328],{"type":15,"value":1329},"--tabs-menu-shadow",{"type":9,"tag":183,"props":1331,"children":1332},{},[1333,1338,1339,1344,1345,1350],{"type":9,"tag":24,"props":1334,"children":1335},{"className":26},[1336],{"type":15,"value":1337},"0 12px 30px",{"type":15,"value":104},{"type":9,"tag":24,"props":1340,"children":1341},{"className":26},[1342],{"type":15,"value":1343},"0 12px 40px",{"type":15,"value":104},{"type":9,"tag":24,"props":1346,"children":1347},{"className":26},[1348],{"type":15,"value":1349},"0 14px 40px",{"type":15,"value":1351},", all at 40% shadow opacity",{"type":9,"tag":156,"props":1353,"children":1354},{},[1355,1363],{"type":9,"tag":183,"props":1356,"children":1357},{},[1358],{"type":9,"tag":24,"props":1359,"children":1360},{"className":26},[1361],{"type":15,"value":1362},"--toast-shadow",{"type":9,"tag":183,"props":1364,"children":1365},{},[1366,1371],{"type":9,"tag":24,"props":1367,"children":1368},{"className":26},[1369],{"type":15,"value":1370},"0 12px 40px -10px",{"type":15,"value":1372}," with shadow color at 45%",{"type":9,"tag":156,"props":1374,"children":1375},{},[1376,1384],{"type":9,"tag":183,"props":1377,"children":1378},{},[1379],{"type":9,"tag":24,"props":1380,"children":1381},{"className":26},[1382],{"type":15,"value":1383},"--select-active-border",{"type":9,"tag":183,"props":1385,"children":1386},{},[1387,1391],{"type":9,"tag":24,"props":1388,"children":1389},{"className":26},[1390],{"type":15,"value":190},{"type":15,"value":1392}," for an expanded picker",{"type":9,"tag":156,"props":1394,"children":1395},{},[1396,1416],{"type":9,"tag":183,"props":1397,"children":1398},{},[1399,1404,1405,1410,1411],{"type":9,"tag":24,"props":1400,"children":1401},{"className":26},[1402],{"type":15,"value":1403},"--toast-left",{"type":15,"value":104},{"type":9,"tag":24,"props":1406,"children":1407},{"className":26},[1408],{"type":15,"value":1409},"--toast-top",{"type":15,"value":104},{"type":9,"tag":24,"props":1412,"children":1413},{"className":26},[1414],{"type":15,"value":1415},"--toast-message-max-height",{"type":9,"tag":183,"props":1417,"children":1418},{},[1419,1424,1425,1430,1431,1436],{"type":9,"tag":24,"props":1420,"children":1421},{"className":26},[1422],{"type":15,"value":1423},"50%",{"type":15,"value":104},{"type":9,"tag":24,"props":1426,"children":1427},{"className":26},[1428],{"type":15,"value":1429},"75dvh",{"type":15,"value":104},{"type":9,"tag":24,"props":1432,"children":1433},{"className":26},[1434],{"type":15,"value":1435},"240px",{"type":15,"value":1437},", further constrained to the viewport",{"type":9,"tag":18,"props":1439,"children":1440},{},[1441,1443,1448,1450,1454,1455,1459],{"type":15,"value":1442},"The complete shadow\u002Fbackdrop overrides accept ordinary CSS values, including ",{"type":9,"tag":24,"props":1444,"children":1445},{"className":26},[1446],{"type":15,"value":1447},"none",{"type":15,"value":1449}," for shadows.\nChanging ",{"type":9,"tag":24,"props":1451,"children":1452},{"className":26},[1453],{"type":15,"value":642},{"type":15,"value":118},{"type":9,"tag":24,"props":1456,"children":1457},{"className":26},[1458],{"type":15,"value":648},{"type":15,"value":1460}," updates the defaults at the owning subtree without\nredeclaring each overlay. Tooltip, select and tab popups stay in that subtree and use the native top\nlayer; the library does not copy theme colors to JavaScript or move them to the document body.",{"type":9,"tag":18,"props":1462,"children":1463},{},[1464,1466,1480,1482,1493,1495,1499,1501,1506,1508,1513,1515,1520],{"type":15,"value":1465},"Source colors use the ",{"type":9,"tag":1467,"props":1468,"children":1470},"a",{"href":1469},"\u002Fbml-reference\u002Fdesign-library#read-only-source",[1471,1473,1478],{"type":15,"value":1472},"documented ",{"type":9,"tag":24,"props":1474,"children":1475},{"className":26},[1476],{"type":15,"value":1477},"--source-*",{"type":15,"value":1479}," hooks",{"type":15,"value":1481},", with palette-derived\ndefaults for surface, foreground, gutter, selection, active lines, search and syntax roles. Structured\nediting uses the ",{"type":9,"tag":1467,"props":1483,"children":1485},{"href":1484},"\u002Fbml-reference\u002Fdesign-library#structured-json",[1486,1487,1492],{"type":15,"value":1472},{"type":9,"tag":24,"props":1488,"children":1489},{"className":26},[1490],{"type":15,"value":1491},"--json-*",{"type":15,"value":1479},{"type":15,"value":1494},". ",{"type":9,"tag":24,"props":1496,"children":1497},{"className":26},[1498],{"type":15,"value":1067},{"type":15,"value":1500}," controls its\nmenu\u002Flink colors and derived hover, focus, editing and selection colors together. ",{"type":9,"tag":24,"props":1502,"children":1503},{"className":26},[1504],{"type":15,"value":1505},"--json-selection",{"type":15,"value":1507},"\ncan override the selection separately; ",{"type":9,"tag":24,"props":1509,"children":1510},{"className":26},[1511],{"type":15,"value":1512},"--json-scheme",{"type":15,"value":1514}," defaults to ",{"type":9,"tag":24,"props":1516,"children":1517},{"className":26},[1518],{"type":15,"value":1519},"light",{"type":15,"value":1521},". These hooks apply on the\neditor root or an ancestor. The adapter owns the underlying editor variables and scoped styles.",{"type":9,"tag":18,"props":1523,"children":1524},{},[1525,1527,1532,1534,1539],{"type":15,"value":1526},"Literal palette colors live in the shared defaults. The Bosca SVG paths remain the original artwork;\nits face colors are themeable. Caller-supplied badge ",{"type":9,"tag":24,"props":1528,"children":1529},{"className":26},[1530],{"type":15,"value":1531},"color",{"type":15,"value":1533},", heading ",{"type":9,"tag":24,"props":1535,"children":1536},{"className":26},[1537],{"type":15,"value":1538},"iconColor",{"type":15,"value":1540},", source content,\nimages and other projected content can intentionally provide their own colors. Git authentication,\nambient gradients, repository\u002Fdiff\u002Flog composition and document resets remain in Git's CSS.",{"type":9,"tag":18,"props":1542,"children":1543},{},[1544,1546,1551],{"type":15,"value":1545},"The compiled consumer's ",{"type":9,"tag":24,"props":1547,"children":1548},{"className":26},[1549],{"type":15,"value":1550},"\u002Fthemes",{"type":15,"value":1552}," page demonstrates base-token fallback, explicit control aliases,\nshared sizing\u002Ffocus and live overlay colors in independent roots, including native controls with\nscripts disabled. Its other pages exercise forms, selection, tooltips, modal state, source and JSON\nediting through real BML rendering and actions in production and development.",1793227349726]