[{"data":1,"prerenderedAt":2233},["ShallowReactive",2],{"selaras-docs-navigation":3,"selaras-docs:\u002Foverview\u002Ftheming\u002Fcss-tokens":649},[4,11,124,509,568,593],{"title":5,"path":6,"stem":7,"order":8,"icon":9,"collapse":10,"navBadges":9},"Selaras","\u002F","index",1,null,false,{"title":12,"order":13,"icon":9,"collapse":10,"navBadges":9,"path":14,"stem":15,"children":16,"page":10},"Overview",10,"\u002Foverview","overview",[17,66,103],{"title":18,"order":13,"icon":9,"collapse":10,"navBadges":9,"path":19,"stem":20,"children":21,"page":10},"Getting Started","\u002Foverview\u002Fgetting-started","overview\u002Fgetting-started",[22,26,31,36,41,46,51,56,61],{"title":23,"path":24,"stem":25,"order":13,"icon":9,"collapse":10,"navBadges":9},"Introduction","\u002Foverview\u002Fgetting-started\u002Fintroduction","overview\u002Fgetting-started\u002Fintroduction",{"title":27,"path":28,"stem":29,"order":30,"icon":9,"collapse":10,"navBadges":9},"Installation","\u002Foverview\u002Fgetting-started\u002Finstallation","overview\u002Fgetting-started\u002Finstallation",20,{"title":32,"path":33,"stem":34,"order":35,"icon":9,"collapse":10,"navBadges":9},"Component usage","\u002Foverview\u002Fgetting-started\u002Fcomponent-usage","overview\u002Fgetting-started\u002Fcomponent-usage",30,{"title":37,"path":38,"stem":39,"order":40,"icon":9,"collapse":10,"navBadges":9},"Nuxt configuration","\u002Foverview\u002Fgetting-started\u002Fnuxt-configuration","overview\u002Fgetting-started\u002Fnuxt-configuration",40,{"title":42,"path":43,"stem":44,"order":45,"icon":9,"collapse":10,"navBadges":9},"Icons","\u002Foverview\u002Fgetting-started\u002Ficons","overview\u002Fgetting-started\u002Ficons",50,{"title":47,"path":48,"stem":49,"order":50,"icon":9,"collapse":10,"navBadges":9},"Messages and localization","\u002Foverview\u002Fgetting-started\u002Fmessages","overview\u002Fgetting-started\u002Fmessages",60,{"title":52,"path":53,"stem":54,"order":55,"icon":9,"collapse":10,"navBadges":9},"Adaptive interfaces","\u002Foverview\u002Fgetting-started\u002Fadaptive-interfaces","overview\u002Fgetting-started\u002Fadaptive-interfaces",70,{"title":57,"path":58,"stem":59,"order":60,"icon":9,"collapse":10,"navBadges":9},"TypeScript","\u002Foverview\u002Fgetting-started\u002Ftypescript","overview\u002Fgetting-started\u002Ftypescript",80,{"title":62,"path":63,"stem":64,"order":65,"icon":9,"collapse":10,"navBadges":9},"Migrating to 1.0","\u002Foverview\u002Fgetting-started\u002Fmigrating-to-1","overview\u002Fgetting-started\u002Fmigrating-to-1",90,{"title":67,"order":30,"icon":9,"collapse":10,"navBadges":9,"path":68,"stem":69,"children":70,"page":10},"Theming","\u002Foverview\u002Ftheming","overview\u002Ftheming",[71,74,78,82,86,90,95,99],{"title":67,"path":72,"stem":73,"order":13,"icon":9,"collapse":10,"navBadges":9},"\u002Foverview\u002Ftheming\u002Foverview","overview\u002Ftheming\u002Foverview",{"title":75,"path":76,"stem":77,"order":30,"icon":9,"collapse":10,"navBadges":9},"CSS tokens","\u002Foverview\u002Ftheming\u002Fcss-tokens","overview\u002Ftheming\u002Fcss-tokens",{"title":79,"path":80,"stem":81,"order":35,"icon":9,"collapse":10,"navBadges":9},"Color roles","\u002Foverview\u002Ftheming\u002Fcolor-roles","overview\u002Ftheming\u002Fcolor-roles",{"title":83,"path":84,"stem":85,"order":40,"icon":9,"collapse":10,"navBadges":9},"Color modes","\u002Foverview\u002Ftheming\u002Fcolor-modes","overview\u002Ftheming\u002Fcolor-modes",{"title":87,"path":88,"stem":89,"order":45,"icon":9,"collapse":10,"navBadges":9},"Component styling","\u002Foverview\u002Ftheming\u002Fcomponent-styling","overview\u002Ftheming\u002Fcomponent-styling",{"title":91,"path":92,"stem":93,"order":94,"icon":9,"collapse":10,"navBadges":9},"Global configuration","\u002Foverview\u002Ftheming\u002Fglobal-configuration","overview\u002Ftheming\u002Fglobal-configuration",55,{"title":96,"path":97,"stem":98,"order":50,"icon":9,"collapse":10,"navBadges":9},"Scoped themes","\u002Foverview\u002Ftheming\u002Fscoped-themes","overview\u002Ftheming\u002Fscoped-themes",{"title":100,"path":101,"stem":102,"order":55,"icon":9,"collapse":10,"navBadges":9},"Complete themes","\u002Foverview\u002Ftheming\u002Fcomplete-themes","overview\u002Ftheming\u002Fcomplete-themes",{"title":104,"order":35,"icon":9,"collapse":10,"navBadges":9,"path":105,"stem":106,"children":107,"page":10},"Agent Support","\u002Foverview\u002Fagent-support","overview\u002Fagent-support",[108,112,116,120],{"title":109,"path":110,"stem":111,"order":13,"icon":9,"collapse":10,"navBadges":9},"Agent support","\u002Foverview\u002Fagent-support\u002Foverview","overview\u002Fagent-support\u002Foverview",{"title":113,"path":114,"stem":115,"order":30,"icon":9,"collapse":10,"navBadges":9},"Documentation exports","\u002Foverview\u002Fagent-support\u002Fdocumentation","overview\u002Fagent-support\u002Fdocumentation",{"title":117,"path":118,"stem":119,"order":35,"icon":9,"collapse":10,"navBadges":9},"Skills","\u002Foverview\u002Fagent-support\u002Fskills","overview\u002Fagent-support\u002Fskills",{"title":121,"path":122,"stem":123,"order":40,"icon":9,"collapse":10,"navBadges":9},"MCP","\u002Foverview\u002Fagent-support\u002Fmcp","overview\u002Fagent-support\u002Fmcp",{"title":125,"order":30,"icon":9,"collapse":10,"navBadges":9,"path":126,"stem":127,"children":128,"page":10},"Components","\u002Fcomponents","components",[129,202,301,320,364,417,470],{"title":130,"path":131,"stem":132,"children":133,"page":10},"Elements","\u002Fcomponents\u002Felements","components\u002Felements",[134,138,143,148,153,158,162,167,172,177,182,187,192,197],{"title":135,"path":136,"stem":137,"order":13,"icon":9,"collapse":10,"navBadges":9},"Button","\u002Fcomponents\u002Felements\u002Fbutton","components\u002Felements\u002Fbutton",{"title":139,"path":140,"stem":141,"order":142,"icon":9,"collapse":10,"navBadges":9},"ButtonGroup","\u002Fcomponents\u002Felements\u002Fbutton-group","components\u002Felements\u002Fbutton-group",10.5,{"title":144,"path":145,"stem":146,"order":147,"icon":9,"collapse":10,"navBadges":9},"Badge","\u002Fcomponents\u002Felements\u002Fbadge","components\u002Felements\u002Fbadge",11,{"title":149,"path":150,"stem":151,"order":152,"icon":9,"collapse":10,"navBadges":9},"Avatar","\u002Fcomponents\u002Felements\u002Favatar","components\u002Felements\u002Favatar",11.25,{"title":154,"path":155,"stem":156,"order":157,"icon":9,"collapse":10,"navBadges":9},"AvatarGroup","\u002Fcomponents\u002Felements\u002Favatar-group","components\u002Felements\u002Favatar-group",11.5,{"title":159,"path":160,"stem":161,"order":157,"icon":9,"collapse":10,"navBadges":9},"Chip","\u002Fcomponents\u002Felements\u002Fchip","components\u002Felements\u002Fchip",{"title":163,"path":164,"stem":165,"order":166,"icon":9,"collapse":10,"navBadges":9},"Icon","\u002Fcomponents\u002Felements\u002Ficon","components\u002Felements\u002Ficon",12,{"title":168,"path":169,"stem":170,"order":171,"icon":9,"collapse":10,"navBadges":9},"Skeleton","\u002Fcomponents\u002Felements\u002Fskeleton","components\u002Felements\u002Fskeleton",12.5,{"title":173,"path":174,"stem":175,"order":176,"icon":9,"collapse":10,"navBadges":9},"Separator","\u002Fcomponents\u002Felements\u002Fseparator","components\u002Felements\u002Fseparator",12.75,{"title":178,"path":179,"stem":180,"order":181,"icon":9,"collapse":10,"navBadges":9},"Alert","\u002Fcomponents\u002Felements\u002Falert","components\u002Felements\u002Falert",12.9,{"title":183,"path":184,"stem":185,"order":186,"icon":9,"collapse":10,"navBadges":9},"Toggle","\u002Fcomponents\u002Felements\u002Ftoggle","components\u002Felements\u002Ftoggle",12.92,{"title":188,"path":189,"stem":190,"order":191,"icon":9,"collapse":10,"navBadges":9},"Toggle Group","\u002Fcomponents\u002Felements\u002Ftoggle-group","components\u002Felements\u002Ftoggle-group",12.94,{"title":193,"path":194,"stem":195,"order":196,"icon":9,"collapse":10,"navBadges":9},"Kbd","\u002Fcomponents\u002Felements\u002Fkbd","components\u002Felements\u002Fkbd",12.95,{"title":198,"path":199,"stem":200,"order":201,"icon":9,"collapse":10,"navBadges":9},"Progress","\u002Fcomponents\u002Felements\u002Fprogress","components\u002Felements\u002Fprogress",12.97,{"title":203,"path":204,"stem":205,"children":206,"page":10},"Forms","\u002Fcomponents\u002Fforms","components\u002Fforms",[207,211,216,221,226,231,236,241,246,251,256,261,266,271,276,281,286,291,296],{"title":208,"path":209,"stem":210,"order":30,"icon":9,"collapse":10,"navBadges":9},"Input","\u002Fcomponents\u002Fforms\u002Finput","components\u002Fforms\u002Finput",{"title":212,"path":213,"stem":214,"order":215,"icon":9,"collapse":10,"navBadges":9},"InputGroup","\u002Fcomponents\u002Fforms\u002Finput-group","components\u002Fforms\u002Finput-group",20.25,{"title":217,"path":218,"stem":219,"order":220,"icon":9,"collapse":10,"navBadges":9},"InputNumber","\u002Fcomponents\u002Fforms\u002Finput-number","components\u002Fforms\u002Finput-number",20.5,{"title":222,"path":223,"stem":224,"order":225,"icon":9,"collapse":10,"navBadges":9},"Slider","\u002Fcomponents\u002Fforms\u002Fslider","components\u002Fforms\u002Fslider",20.75,{"title":227,"path":228,"stem":229,"order":230,"icon":9,"collapse":10,"navBadges":9},"PinInput","\u002Fcomponents\u002Fforms\u002Fpin-input","components\u002Fforms\u002Fpin-input",20.9,{"title":232,"path":233,"stem":234,"order":235,"icon":9,"collapse":10,"navBadges":9},"Textarea","\u002Fcomponents\u002Fforms\u002Ftextarea","components\u002Fforms\u002Ftextarea",21,{"title":237,"path":238,"stem":239,"order":240,"icon":9,"collapse":10,"navBadges":9},"FileUpload","\u002Fcomponents\u002Fforms\u002Ffile-upload","components\u002Fforms\u002Ffile-upload",21.5,{"title":242,"path":243,"stem":244,"order":245,"icon":9,"collapse":10,"navBadges":9},"Select","\u002Fcomponents\u002Fforms\u002Fselect","components\u002Fforms\u002Fselect",22,{"title":247,"path":248,"stem":249,"order":250,"icon":9,"collapse":10,"navBadges":9},"Listbox","\u002Fcomponents\u002Fforms\u002Flistbox","components\u002Fforms\u002Flistbox",22.5,{"title":252,"path":253,"stem":254,"order":255,"icon":9,"collapse":10,"navBadges":9},"TransferList","\u002Fcomponents\u002Fforms\u002Ftransfer-list","components\u002Fforms\u002Ftransfer-list",22.75,{"title":257,"path":258,"stem":259,"order":260,"icon":9,"collapse":10,"navBadges":9},"Autocomplete","\u002Fcomponents\u002Fforms\u002Fautocomplete","components\u002Fforms\u002Fautocomplete",23,{"title":262,"path":263,"stem":264,"order":265,"icon":9,"collapse":10,"navBadges":9},"DatePicker","\u002Fcomponents\u002Fforms\u002Fdate-picker","components\u002Fforms\u002Fdate-picker",23.5,{"title":267,"path":268,"stem":269,"order":270,"icon":9,"collapse":10,"navBadges":9},"ColorPicker","\u002Fcomponents\u002Fforms\u002Fcolor-picker","components\u002Fforms\u002Fcolor-picker",23.75,{"title":272,"path":273,"stem":274,"order":275,"icon":9,"collapse":10,"navBadges":9},"Checkbox","\u002Fcomponents\u002Fforms\u002Fcheckbox","components\u002Fforms\u002Fcheckbox",24,{"title":277,"path":278,"stem":279,"order":280,"icon":9,"collapse":10,"navBadges":9},"RadioGroup","\u002Fcomponents\u002Fforms\u002Fradio-group","components\u002Fforms\u002Fradio-group",25,{"title":282,"path":283,"stem":284,"order":285,"icon":9,"collapse":10,"navBadges":9},"Rating","\u002Fcomponents\u002Fforms\u002Frating","components\u002Fforms\u002Frating",25.5,{"title":287,"path":288,"stem":289,"order":290,"icon":9,"collapse":10,"navBadges":9},"Switch","\u002Fcomponents\u002Fforms\u002Fswitch","components\u002Fforms\u002Fswitch",26,{"title":292,"path":293,"stem":294,"order":295,"icon":9,"collapse":10,"navBadges":9},"FormField","\u002Fcomponents\u002Fforms\u002Fform-field","components\u002Fforms\u002Fform-field",27,{"title":297,"path":298,"stem":299,"order":300,"icon":9,"collapse":10,"navBadges":9},"Form Validation","\u002Fcomponents\u002Fforms\u002Fvalidation","components\u002Fforms\u002Fvalidation",28,{"title":302,"path":303,"stem":304,"children":305,"page":10},"Data","\u002Fcomponents\u002Fdata","components\u002Fdata",[306,311,315],{"title":307,"path":308,"stem":309,"order":310,"icon":9,"collapse":10,"navBadges":9},"Calendar","\u002Fcomponents\u002Fdata\u002Fcalendar","components\u002Fdata\u002Fcalendar",29,{"title":312,"path":313,"stem":314,"order":35,"icon":9,"collapse":10,"navBadges":9},"Table","\u002Fcomponents\u002Fdata\u002Ftable","components\u002Fdata\u002Ftable",{"title":316,"path":317,"stem":318,"order":319,"icon":9,"collapse":10,"navBadges":9},"Timeline","\u002Fcomponents\u002Fdata\u002Ftimeline","components\u002Fdata\u002Ftimeline",31,{"title":321,"path":322,"stem":323,"children":324,"page":10},"Navigation","\u002Fcomponents\u002Fnavigation","components\u002Fnavigation",[325,330,334,339,344,349,354,359],{"title":326,"path":327,"stem":328,"order":329,"icon":9,"collapse":10,"navBadges":9},"Breadcrumb","\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb","components\u002Fnavigation\u002Fbreadcrumb",39,{"title":331,"path":332,"stem":333,"order":40,"icon":9,"collapse":10,"navBadges":9},"Tabs","\u002Fcomponents\u002Fnavigation\u002Ftabs","components\u002Fnavigation\u002Ftabs",{"title":335,"path":336,"stem":337,"order":338,"icon":9,"collapse":10,"navBadges":9},"Stepper","\u002Fcomponents\u002Fnavigation\u002Fstepper","components\u002Fnavigation\u002Fstepper",40.5,{"title":340,"path":341,"stem":342,"order":343,"icon":9,"collapse":10,"navBadges":9},"Accordion","\u002Fcomponents\u002Fnavigation\u002Faccordion","components\u002Fnavigation\u002Faccordion",41,{"title":345,"path":346,"stem":347,"order":348,"icon":9,"collapse":10,"navBadges":9},"Collapsible","\u002Fcomponents\u002Fnavigation\u002Fcollapsible","components\u002Fnavigation\u002Fcollapsible",41.5,{"title":350,"path":351,"stem":352,"order":353,"icon":9,"collapse":10,"navBadges":9},"Tree","\u002Fcomponents\u002Fnavigation\u002Ftree","components\u002Fnavigation\u002Ftree",41.75,{"title":355,"path":356,"stem":357,"order":358,"icon":9,"collapse":10,"navBadges":9},"Pagination","\u002Fcomponents\u002Fnavigation\u002Fpagination","components\u002Fnavigation\u002Fpagination",44,{"title":360,"path":361,"stem":362,"order":363,"icon":9,"collapse":10,"navBadges":9},"NavigationMenu","\u002Fcomponents\u002Fnavigation\u002Fnavigation-menu","components\u002Fnavigation\u002Fnavigation-menu",45,{"title":365,"path":366,"stem":367,"children":368,"page":10},"Overlays","\u002Fcomponents\u002Foverlays","components\u002Foverlays",[369,373,378,383,388,393,398,403,408,412],{"title":370,"path":371,"stem":372,"order":45,"icon":9,"collapse":10,"navBadges":9},"Modal","\u002Fcomponents\u002Foverlays\u002Fmodal","components\u002Foverlays\u002Fmodal",{"title":374,"path":375,"stem":376,"order":377,"icon":9,"collapse":10,"navBadges":9},"AlertDialog","\u002Fcomponents\u002Foverlays\u002Falert-dialog","components\u002Foverlays\u002Falert-dialog",50.5,{"title":379,"path":380,"stem":381,"order":382,"icon":9,"collapse":10,"navBadges":9},"Dropdown","\u002Fcomponents\u002Foverlays\u002Fdropdown","components\u002Foverlays\u002Fdropdown",51,{"title":384,"path":385,"stem":386,"order":387,"icon":9,"collapse":10,"navBadges":9},"Context Menu","\u002Fcomponents\u002Foverlays\u002Fcontext-menu","components\u002Foverlays\u002Fcontext-menu",51.5,{"title":389,"path":390,"stem":391,"order":392,"icon":9,"collapse":10,"navBadges":9},"Tooltip","\u002Fcomponents\u002Foverlays\u002Ftooltip","components\u002Foverlays\u002Ftooltip",52,{"title":394,"path":395,"stem":396,"order":397,"icon":9,"collapse":10,"navBadges":9},"Toast","\u002Fcomponents\u002Foverlays\u002Ftoast","components\u002Foverlays\u002Ftoast",53,{"title":399,"path":400,"stem":401,"order":402,"icon":9,"collapse":10,"navBadges":9},"Slideover","\u002Fcomponents\u002Foverlays\u002Fslideover","components\u002Foverlays\u002Fslideover",54,{"title":404,"path":405,"stem":406,"order":407,"icon":9,"collapse":10,"navBadges":9},"Command Palette","\u002Fcomponents\u002Foverlays\u002Fcommand-palette","components\u002Foverlays\u002Fcommand-palette",54.5,{"title":409,"path":410,"stem":411,"order":94,"icon":9,"collapse":10,"navBadges":9},"Popover","\u002Fcomponents\u002Foverlays\u002Fpopover","components\u002Foverlays\u002Fpopover",{"title":413,"path":414,"stem":415,"order":416,"icon":9,"collapse":10,"navBadges":9},"Drawer","\u002Fcomponents\u002Foverlays\u002Fdrawer","components\u002Foverlays\u002Fdrawer",56,{"title":418,"path":419,"stem":420,"children":421,"page":10},"Layout","\u002Fcomponents\u002Flayout","components\u002Flayout",[422,427,431,436,441,446,450,455,460,465],{"title":423,"path":424,"stem":425,"order":426,"icon":9,"collapse":10,"navBadges":9},"App","\u002Fcomponents\u002Flayout\u002Fapp","components\u002Flayout\u002Fapp",59,{"title":428,"path":429,"stem":430,"order":50,"icon":9,"collapse":10,"navBadges":9},"Container","\u002Fcomponents\u002Flayout\u002Fcontainer","components\u002Flayout\u002Fcontainer",{"title":432,"path":433,"stem":434,"order":435,"icon":9,"collapse":10,"navBadges":9},"Header","\u002Fcomponents\u002Flayout\u002Fheader","components\u002Flayout\u002Fheader",63,{"title":437,"path":438,"stem":439,"order":440,"icon":9,"collapse":10,"navBadges":9},"ColorModeToggle","\u002Fcomponents\u002Flayout\u002Fcolor-mode-toggle","components\u002Flayout\u002Fcolor-mode-toggle",64,{"title":442,"path":443,"stem":444,"order":445,"icon":9,"collapse":10,"navBadges":9},"ColorModeSwitch","\u002Fcomponents\u002Flayout\u002Fcolor-mode-switch","components\u002Flayout\u002Fcolor-mode-switch",65,{"title":447,"path":448,"stem":449,"order":445,"icon":9,"collapse":10,"navBadges":9},"ScrollArea","\u002Fcomponents\u002Flayout\u002Fscroll-area","components\u002Flayout\u002Fscroll-area",{"title":451,"path":452,"stem":453,"order":454,"icon":9,"collapse":10,"navBadges":9},"Card","\u002Fcomponents\u002Flayout\u002Fcard","components\u002Flayout\u002Fcard",66,{"title":456,"path":457,"stem":458,"order":459,"icon":9,"collapse":10,"navBadges":9},"CardGroup","\u002Fcomponents\u002Flayout\u002Fcard-group","components\u002Flayout\u002Fcard-group",67,{"title":461,"path":462,"stem":463,"order":464,"icon":9,"collapse":10,"navBadges":9},"Splitter","\u002Fcomponents\u002Flayout\u002Fsplitter","components\u002Flayout\u002Fsplitter",68,{"title":466,"path":467,"stem":468,"order":469,"icon":9,"collapse":10,"navBadges":9},"Theme","\u002Fcomponents\u002Flayout\u002Ftheme","components\u002Flayout\u002Ftheme",69,{"title":471,"path":472,"stem":473,"children":474,"page":10},"Typography","\u002Fcomponents\u002Ftypography","components\u002Ftypography",[475,479,484,489,494,499,504],{"title":476,"path":477,"stem":478,"order":55,"icon":9,"collapse":10,"navBadges":9},"Prose","\u002Fcomponents\u002Ftypography\u002Fprose","components\u002Ftypography\u002Fprose",{"title":480,"path":481,"stem":482,"order":483,"icon":9,"collapse":10,"navBadges":9},"CodeGroup","\u002Fcomponents\u002Ftypography\u002Fcode-group","components\u002Ftypography\u002Fcode-group",71,{"title":485,"path":486,"stem":487,"order":488,"icon":9,"collapse":10,"navBadges":9},"Callout","\u002Fcomponents\u002Ftypography\u002Fcallout","components\u002Ftypography\u002Fcallout",72,{"title":490,"path":491,"stem":492,"order":493,"icon":9,"collapse":10,"navBadges":9},"CodeButton","\u002Fcomponents\u002Ftypography\u002Fcode-button","components\u002Ftypography\u002Fcode-button",73,{"title":495,"path":496,"stem":497,"order":498,"icon":9,"collapse":10,"navBadges":9},"ReadMore","\u002Fcomponents\u002Ftypography\u002Fread-more","components\u002Ftypography\u002Fread-more",74,{"title":500,"path":501,"stem":502,"order":503,"icon":9,"collapse":10,"navBadges":9},"FileTree","\u002Fcomponents\u002Ftypography\u002Ffile-tree","components\u002Ftypography\u002Ffile-tree",75,{"title":505,"path":506,"stem":507,"order":508,"icon":9,"collapse":10,"navBadges":9},"CodeTree","\u002Fcomponents\u002Ftypography\u002Fcode-tree","components\u002Ftypography\u002Fcode-tree",76,{"title":510,"order":35,"icon":9,"collapse":10,"navBadges":9,"path":511,"stem":512,"children":513,"page":10},"Composites","\u002Fcomposites","composites",[514,543],{"title":515,"path":516,"stem":517,"children":518,"page":10},"Dashboard","\u002Fcomposites\u002Fdashboard","composites\u002Fdashboard",[519,523,527,531,535,539],{"title":520,"path":521,"stem":522,"order":13,"icon":9,"collapse":10,"navBadges":9},"DashboardGroup","\u002Fcomposites\u002Fdashboard\u002Fdashboard-group","composites\u002Fdashboard\u002Fdashboard-group",{"title":524,"path":525,"stem":526,"order":30,"icon":9,"collapse":10,"navBadges":9},"DashboardSidebar","\u002Fcomposites\u002Fdashboard\u002Fdashboard-sidebar","composites\u002Fdashboard\u002Fdashboard-sidebar",{"title":528,"path":529,"stem":530,"order":35,"icon":9,"collapse":10,"navBadges":9},"DashboardPanel","\u002Fcomposites\u002Fdashboard\u002Fdashboard-panel","composites\u002Fdashboard\u002Fdashboard-panel",{"title":532,"path":533,"stem":534,"order":40,"icon":9,"collapse":10,"navBadges":9},"DashboardResizeHandle","\u002Fcomposites\u002Fdashboard\u002Fdashboard-resize-handle","composites\u002Fdashboard\u002Fdashboard-resize-handle",{"title":536,"path":537,"stem":538,"order":45,"icon":9,"collapse":10,"navBadges":9},"DashboardNavbar","\u002Fcomposites\u002Fdashboard\u002Fdashboard-navbar","composites\u002Fdashboard\u002Fdashboard-navbar",{"title":540,"path":541,"stem":542,"order":50,"icon":9,"collapse":10,"navBadges":9},"DashboardSidebarToggle","\u002Fcomposites\u002Fdashboard\u002Fdashboard-sidebar-toggle","composites\u002Fdashboard\u002Fdashboard-sidebar-toggle",{"title":544,"path":545,"stem":546,"children":547,"page":10},"Documentation","\u002Fcomposites\u002Fdocumentation","composites\u002Fdocumentation",[548,552,556,560,564],{"title":549,"path":550,"stem":551,"order":13,"icon":9,"collapse":10,"navBadges":9},"PageHeader","\u002Fcomposites\u002Fdocumentation\u002Fpage-header","composites\u002Fdocumentation\u002Fpage-header",{"title":553,"path":554,"stem":555,"order":30,"icon":9,"collapse":10,"navBadges":9},"PageAside","\u002Fcomposites\u002Fdocumentation\u002Fpage-aside","composites\u002Fdocumentation\u002Fpage-aside",{"title":557,"path":558,"stem":559,"order":35,"icon":9,"collapse":10,"navBadges":9},"ContentNavigation","\u002Fcomposites\u002Fdocumentation\u002Fcontent-navigation","composites\u002Fdocumentation\u002Fcontent-navigation",{"title":561,"path":562,"stem":563,"order":40,"icon":9,"collapse":10,"navBadges":9},"ContentToc","\u002Fcomposites\u002Fdocumentation\u002Fcontent-toc","composites\u002Fdocumentation\u002Fcontent-toc",{"title":565,"path":566,"stem":567,"order":45,"icon":9,"collapse":10,"navBadges":9},"ContentSurround","\u002Fcomposites\u002Fdocumentation\u002Fcontent-surround","composites\u002Fdocumentation\u002Fcontent-surround",{"title":569,"order":570,"icon":9,"collapse":10,"navBadges":9,"path":571,"stem":572,"children":573,"page":10},"Blocks",35,"\u002Fblocks","blocks",[574,577,581,585,589],{"title":569,"path":575,"stem":576,"order":13,"icon":9,"collapse":10,"navBadges":9},"\u002Fblocks\u002Foverview","blocks\u002Foverview",{"title":578,"path":579,"stem":580,"order":30,"icon":9,"collapse":10,"navBadges":9},"Sign in","\u002Fblocks\u002Fsign-in","blocks\u002Fsign-in",{"title":582,"path":583,"stem":584,"order":35,"icon":9,"collapse":10,"navBadges":9},"Dashboard overview","\u002Fblocks\u002Fdashboard-overview","blocks\u002Fdashboard-overview",{"title":586,"path":587,"stem":588,"order":40,"icon":9,"collapse":10,"navBadges":9},"Profile settings","\u002Fblocks\u002Fprofile-settings","blocks\u002Fprofile-settings",{"title":590,"path":591,"stem":592,"order":45,"icon":9,"collapse":10,"navBadges":9},"Data management","\u002Fblocks\u002Fdata-management","blocks\u002Fdata-management",{"title":594,"order":40,"icon":9,"collapse":10,"navBadges":9,"path":595,"stem":596,"children":597,"page":10},"Utilities","\u002Futilities","utilities",[598,632],{"title":599,"path":600,"stem":601,"children":602,"page":10},"Composables","\u002Futilities\u002Fcomposables","utilities\u002Fcomposables",[603,607,611,616,620,624,628],{"title":604,"path":605,"stem":606,"order":13,"icon":9,"collapse":10,"navBadges":9},"useModal","\u002Futilities\u002Fcomposables\u002Fuse-modal","utilities\u002Fcomposables\u002Fuse-modal",{"title":608,"path":609,"stem":610,"order":166,"icon":9,"collapse":10,"navBadges":9},"useConfirm","\u002Futilities\u002Fcomposables\u002Fuse-confirm","utilities\u002Fcomposables\u002Fuse-confirm",{"title":612,"path":613,"stem":614,"order":615,"icon":9,"collapse":10,"navBadges":9},"useDrawer","\u002Futilities\u002Fcomposables\u002Fuse-drawer","utilities\u002Fcomposables\u002Fuse-drawer",15,{"title":617,"path":618,"stem":619,"order":30,"icon":9,"collapse":10,"navBadges":9},"useSlideover","\u002Futilities\u002Fcomposables\u002Fuse-slideover","utilities\u002Fcomposables\u002Fuse-slideover",{"title":621,"path":622,"stem":623,"order":35,"icon":9,"collapse":10,"navBadges":9},"useIcons","\u002Futilities\u002Fcomposables\u002Fuse-icons","utilities\u002Fcomposables\u002Fuse-icons",{"title":625,"path":626,"stem":627,"order":40,"icon":9,"collapse":10,"navBadges":9},"useMessages","\u002Futilities\u002Fcomposables\u002Fuse-messages","utilities\u002Fcomposables\u002Fuse-messages",{"title":629,"path":630,"stem":631,"order":45,"icon":9,"collapse":10,"navBadges":9},"useLocale","\u002Futilities\u002Fcomposables\u002Fuse-locale","utilities\u002Fcomposables\u002Fuse-locale",{"title":633,"path":634,"stem":635,"children":636,"page":10},"Directives","\u002Futilities\u002Fdirectives","utilities\u002Fdirectives",[637,641,645],{"title":638,"path":639,"stem":640,"order":13,"icon":9,"collapse":10,"navBadges":9},"v-ripple","\u002Futilities\u002Fdirectives\u002Fripple","utilities\u002Fdirectives\u002Fripple",{"title":642,"path":643,"stem":644,"order":615,"icon":9,"collapse":10,"navBadges":9},"v-hotkey","\u002Futilities\u002Fdirectives\u002Fhotkey","utilities\u002Fdirectives\u002Fhotkey",{"title":646,"path":647,"stem":648,"order":30,"icon":9,"collapse":10,"navBadges":9},"v-mask","\u002Futilities\u002Fdirectives\u002Fmask","utilities\u002Fdirectives\u002Fmask",{"id":650,"title":75,"aside":651,"body":652,"collapse":10,"description":2229,"editLink":651,"extension":2215,"icon":9,"meta":2230,"navBadges":9,"navigation":9,"order":30,"path":76,"prevNext":651,"seo":2231,"stem":77,"toc":651,"__hash__":2232},"docs\u002Foverview\u002Ftheming\u002Fcss-tokens.md",true,{"type":653,"value":654,"toc":2220},"minimark",[655,660,664,667,774,781,785,788,836,839,846,959,966,1064,1075,1079,1099,1102,1105,1109,1112,1115,1187,1190,1193,1253,1259,1263,1266,1277,1590,1593,1811,1822,1829,1833,1836,1870,1873,1903,1906,1912,1929,1932,1935,1939,1942,1970,1973,1976,2178,2181,2206,2216],[656,657,659],"h3",{"id":658},"start-with-css","Start with CSS",[661,662,663],"p",{},"For most theme changes, edit CSS only.",[661,665,666],{},"Selaras has public input variables. The main groups are:",[668,669,670,682],"table",{},[671,672,673],"thead",{},[674,675,676,679],"tr",{},[677,678,208],"th",{},[677,680,681],{},"Purpose",[683,684,685,697,707,717,734,744,754,764],"tbody",{},[674,686,687,694],{},[688,689,690],"td",{},[691,692,693],"code",{},"--selaras-surface-*",[688,695,696],{},"Page and surface colors",[674,698,699,704],{},[688,700,701],{},[691,702,703],{},"--selaras-text-*",[688,705,706],{},"General text colors",[674,708,709,714],{},[688,710,711],{},[691,712,713],{},"--selaras-border-*",[688,715,716],{},"General border colors",[674,718,719,724],{},[688,720,721],{},[691,722,723],{},"--selaras-color-\u003Crole>-\u003Cleaf>",[688,725,726,727,730,731],{},"Component color roles, such as ",[691,728,729],{},"primary"," or ",[691,732,733],{},"warning",[674,735,736,741],{},[688,737,738],{},[691,739,740],{},"--selaras-radius-*",[688,742,743],{},"Corner radius",[674,745,746,751],{},[688,747,748],{},[691,749,750],{},"--selaras-shadow-*",[688,752,753],{},"Shadow values",[674,755,756,761],{},[688,757,758],{},[691,759,760],{},"--selaras-z-*",[688,762,763],{},"Overlay stacking",[674,765,766,771],{},[688,767,768],{},[691,769,770],{},"--selaras-scrim",[688,772,773],{},"Overlay backdrop",[661,775,776,777,780],{},"Selaras also has ",[691,778,779],{},"--selaras-resolved-*"," variables. These are effective read\nvalues. Do not use them as theme inputs.",[656,782,784],{"id":783},"small-css-changes","Small CSS changes",[661,786,787],{},"You can change one value:",[789,790,795],"pre",{"className":791,"code":792,"language":793,"meta":794,"style":794},"language-css shiki shiki-themes github-light github-dark",":root {\n  --selaras-radius-base: 0.375rem;\n}\n","css","",[691,796,797,809,830],{"__ignoreMap":794},[798,799,801,805],"span",{"class":800,"line":8},"line",[798,802,804],{"class":803},"sScJk",":root",[798,806,808],{"class":807},"sVt8B"," {\n",[798,810,812,816,819,823,827],{"class":800,"line":811},2,[798,813,815],{"class":814},"s4XuR","  --selaras-radius-base",[798,817,818],{"class":807},": ",[798,820,822],{"class":821},"sj4cs","0.375",[798,824,826],{"class":825},"szBVR","rem",[798,828,829],{"class":807},";\n",[798,831,833],{"class":800,"line":832},3,[798,834,835],{"class":807},"}\n",[661,837,838],{},"Or you can change general surfaces and text:",[661,840,841,842,845],{},"The light canvas is white by default. A card-heavy dashboard can use a subtle\ncanvas such as ",[691,843,844],{},"#f9f9f9"," while keeping its component surfaces white:",[789,847,849],{"className":791,"code":848,"language":793,"meta":794,"style":794},":root {\n  --selaras-surface-canvas: #f9f9f9;\n  --selaras-surface-default: #ffffff;\n  --selaras-surface-elevated: #fafafa;\n\n  --selaras-text-default: #18181b;\n  --selaras-text-muted: #71717a;\n\n  --selaras-border-default: #e4e4e7;\n  --selaras-border-hover: #d4d4d8;\n}\n",[691,850,851,857,868,880,893,899,912,925,930,943,955],{"__ignoreMap":794},[798,852,853,855],{"class":800,"line":8},[798,854,804],{"class":803},[798,856,808],{"class":807},[798,858,859,862,864,866],{"class":800,"line":811},[798,860,861],{"class":814},"  --selaras-surface-canvas",[798,863,818],{"class":807},[798,865,844],{"class":821},[798,867,829],{"class":807},[798,869,870,873,875,878],{"class":800,"line":832},[798,871,872],{"class":814},"  --selaras-surface-default",[798,874,818],{"class":807},[798,876,877],{"class":821},"#ffffff",[798,879,829],{"class":807},[798,881,883,886,888,891],{"class":800,"line":882},4,[798,884,885],{"class":814},"  --selaras-surface-elevated",[798,887,818],{"class":807},[798,889,890],{"class":821},"#fafafa",[798,892,829],{"class":807},[798,894,896],{"class":800,"line":895},5,[798,897,898],{"emptyLinePlaceholder":651},"\n",[798,900,902,905,907,910],{"class":800,"line":901},6,[798,903,904],{"class":814},"  --selaras-text-default",[798,906,818],{"class":807},[798,908,909],{"class":821},"#18181b",[798,911,829],{"class":807},[798,913,915,918,920,923],{"class":800,"line":914},7,[798,916,917],{"class":814},"  --selaras-text-muted",[798,919,818],{"class":807},[798,921,922],{"class":821},"#71717a",[798,924,829],{"class":807},[798,926,928],{"class":800,"line":927},8,[798,929,898],{"emptyLinePlaceholder":651},[798,931,933,936,938,941],{"class":800,"line":932},9,[798,934,935],{"class":814},"  --selaras-border-default",[798,937,818],{"class":807},[798,939,940],{"class":821},"#e4e4e7",[798,942,829],{"class":807},[798,944,945,948,950,953],{"class":800,"line":13},[798,946,947],{"class":814},"  --selaras-border-hover",[798,949,818],{"class":807},[798,951,952],{"class":821},"#d4d4d8",[798,954,829],{"class":807},[798,956,957],{"class":800,"line":147},[798,958,835],{"class":807},[661,960,961,962,965],{},"For dark mode, override the same inputs under ",[691,963,964],{},":root.dark",":",[789,967,969],{"className":791,"code":968,"language":793,"meta":794,"style":794},":root.dark {\n  --selaras-surface-canvas: #0c0c0d;\n  --selaras-surface-default: #09090b;\n  --selaras-surface-elevated: #18181b;\n\n  --selaras-text-default: #fafafa;\n  --selaras-text-muted: #a1a1aa;\n\n  --selaras-border-default: #27272a;\n  --selaras-border-hover: #3f3f46;\n}\n",[691,970,971,977,988,999,1009,1013,1023,1034,1038,1049,1060],{"__ignoreMap":794},[798,972,973,975],{"class":800,"line":8},[798,974,964],{"class":803},[798,976,808],{"class":807},[798,978,979,981,983,986],{"class":800,"line":811},[798,980,861],{"class":814},[798,982,818],{"class":807},[798,984,985],{"class":821},"#0c0c0d",[798,987,829],{"class":807},[798,989,990,992,994,997],{"class":800,"line":832},[798,991,872],{"class":814},[798,993,818],{"class":807},[798,995,996],{"class":821},"#09090b",[798,998,829],{"class":807},[798,1000,1001,1003,1005,1007],{"class":800,"line":882},[798,1002,885],{"class":814},[798,1004,818],{"class":807},[798,1006,909],{"class":821},[798,1008,829],{"class":807},[798,1010,1011],{"class":800,"line":895},[798,1012,898],{"emptyLinePlaceholder":651},[798,1014,1015,1017,1019,1021],{"class":800,"line":901},[798,1016,904],{"class":814},[798,1018,818],{"class":807},[798,1020,890],{"class":821},[798,1022,829],{"class":807},[798,1024,1025,1027,1029,1032],{"class":800,"line":914},[798,1026,917],{"class":814},[798,1028,818],{"class":807},[798,1030,1031],{"class":821},"#a1a1aa",[798,1033,829],{"class":807},[798,1035,1036],{"class":800,"line":927},[798,1037,898],{"emptyLinePlaceholder":651},[798,1039,1040,1042,1044,1047],{"class":800,"line":932},[798,1041,935],{"class":814},[798,1043,818],{"class":807},[798,1045,1046],{"class":821},"#27272a",[798,1048,829],{"class":807},[798,1050,1051,1053,1055,1058],{"class":800,"line":13},[798,1052,947],{"class":814},[798,1054,818],{"class":807},[798,1056,1057],{"class":821},"#3f3f46",[798,1059,829],{"class":807},[798,1061,1062],{"class":800,"line":147},[798,1063,835],{"class":807},[661,1065,1066,1067,1070,1071,1074],{},"Selaras follows the ",[691,1068,1069],{},".dark"," class on ",[691,1072,1073],{},"\u003Chtml>"," for the document theme.",[656,1076,1078],{"id":1077},"check-borders-against-their-surfaces","Check borders against their surfaces",[661,1080,1081,1083,1084,1086,1087,1090,1091,1094,1095,1098],{},[691,1082,693],{}," and ",[691,1085,713],{}," are independent inputs. Component\nthemes choose which ones to pair. For example,\n",[1088,1089,524],"a",{"href":525}," paints its background\nwith ",[691,1092,1093],{},"surface-elevated"," and draws its footer divider with ",[691,1096,1097],{},"border-default",".\nIf both resolve to the same color, the divider blends into that background.",[661,1100,1101],{},"When a border should be visible, give it enough contrast against the surfaces\nit touches. Check the actual component in both light and dark modes, including\nhover and focus states, after changing either token or its foundation palette.\nDifferent token names or different scale steps alone do not guarantee a visible\nboundary. An intentionally blended border is also a valid design choice; each\nborder does not need to differ from every surface in your theme.",[661,1103,1104],{},"Selaras does not automatically adjust border colors or validate their contrast\nwhen you override CSS variables. For transparent components, check the actual\nbackground showing through, which may be your application's canvas.",[656,1106,1108],{"id":1107},"change-a-complete-foundation-palette","Change a complete foundation palette",[661,1110,1111],{},"The default foundations are Tailwind v4 theme variables.",[661,1113,1114],{},"For example, the default warning role uses the Selaras yellow foundation. You\ncan replace that foundation and keep the built-in warning recipe:",[789,1116,1118],{"className":791,"code":1117,"language":793,"meta":794,"style":794},"@theme {\n  --color-selaras-yellow-50: var(--color-orange-50);\n  --color-selaras-yellow-100: var(--color-orange-100);\n  --color-selaras-yellow-200: var(--color-orange-200);\n  --color-selaras-yellow-300: var(--color-orange-300);\n  --color-selaras-yellow-400: var(--color-orange-400);\n  --color-selaras-yellow-500: var(--color-orange-500);\n  --color-selaras-yellow-600: var(--color-orange-600);\n  --color-selaras-yellow-700: var(--color-orange-700);\n  --color-selaras-yellow-800: var(--color-orange-800);\n  --color-selaras-yellow-900: var(--color-orange-900);\n  --color-selaras-yellow-950: var(--color-orange-950);\n}\n",[691,1119,1120,1127,1132,1137,1142,1147,1152,1157,1162,1167,1172,1177,1182],{"__ignoreMap":794},[798,1121,1122,1125],{"class":800,"line":8},[798,1123,1124],{"class":825},"@theme",[798,1126,808],{"class":807},[798,1128,1129],{"class":800,"line":811},[798,1130,1131],{"class":807},"  --color-selaras-yellow-50: var(--color-orange-50);\n",[798,1133,1134],{"class":800,"line":832},[798,1135,1136],{"class":807},"  --color-selaras-yellow-100: var(--color-orange-100);\n",[798,1138,1139],{"class":800,"line":882},[798,1140,1141],{"class":807},"  --color-selaras-yellow-200: var(--color-orange-200);\n",[798,1143,1144],{"class":800,"line":895},[798,1145,1146],{"class":807},"  --color-selaras-yellow-300: var(--color-orange-300);\n",[798,1148,1149],{"class":800,"line":901},[798,1150,1151],{"class":807},"  --color-selaras-yellow-400: var(--color-orange-400);\n",[798,1153,1154],{"class":800,"line":914},[798,1155,1156],{"class":807},"  --color-selaras-yellow-500: var(--color-orange-500);\n",[798,1158,1159],{"class":800,"line":927},[798,1160,1161],{"class":807},"  --color-selaras-yellow-600: var(--color-orange-600);\n",[798,1163,1164],{"class":800,"line":932},[798,1165,1166],{"class":807},"  --color-selaras-yellow-700: var(--color-orange-700);\n",[798,1168,1169],{"class":800,"line":13},[798,1170,1171],{"class":807},"  --color-selaras-yellow-800: var(--color-orange-800);\n",[798,1173,1174],{"class":800,"line":147},[798,1175,1176],{"class":807},"  --color-selaras-yellow-900: var(--color-orange-900);\n",[798,1178,1179],{"class":800,"line":166},[798,1180,1181],{"class":807},"  --color-selaras-yellow-950: var(--color-orange-950);\n",[798,1183,1185],{"class":800,"line":1184},13,[798,1186,835],{"class":807},[661,1188,1189],{},"The warning role now uses your replacement foundation through its existing\nrecipe.",[661,1191,1192],{},"The same rule applies to:",[1194,1195,1196,1207,1215,1223,1231,1238,1245],"ul",{},[1197,1198,1199,1202,1203,1206],"li",{},[691,1200,1201],{},"blue"," for the default ",[691,1204,1205],{},"info"," role",[1197,1208,1209,1202,1212,1206],{},[691,1210,1211],{},"red",[691,1213,1214],{},"danger",[1197,1216,1217,1202,1220,1206],{},[691,1218,1219],{},"gray",[691,1221,1222],{},"neutral",[1197,1224,1225,1202,1228,1206],{},[691,1226,1227],{},"green",[691,1229,1230],{},"success",[1197,1232,1233,1202,1236,1206],{},[691,1234,1235],{},"yellow",[691,1237,733],{},[1197,1239,1240,1202,1243,1206],{},[691,1241,1242],{},"indigo",[691,1244,729],{},[1197,1246,1247,1202,1250,1206],{},[691,1248,1249],{},"plum",[691,1251,1252],{},"secondary",[661,1254,1255,1256,1258],{},"The Selaras gray foundation also supplies the default general surfaces, text,\nand borders. A change to the gray foundation can therefore change more than the\n",[691,1257,1222],{}," component role.",[656,1260,1262],{"id":1261},"map-an-existing-design-system","Map an existing design system",[661,1264,1265],{},"You do not have to rename your design tokens.",[661,1267,1268,1269,1272,1273,1276],{},"For example, your design system can use a ",[691,1270,1271],{},"10"," to ",[691,1274,1275],{},"100"," scale:",[789,1278,1280],{"className":791,"code":1279,"language":793,"meta":794,"style":794},":root {\n  --company-brand-10: ...;\n  --company-brand-20: ...;\n  --company-brand-30: ...;\n  --company-brand-40: ...;\n  --company-brand-50: ...;\n  --company-brand-60: ...;\n  --company-brand-70: ...;\n  --company-brand-80: ...;\n  --company-brand-90: ...;\n  --company-brand-100: ...;\n\n  --selaras-color-primary-fill: var(--company-brand-60);\n  --selaras-color-primary-fill-hover: var(--company-brand-70);\n  --selaras-color-primary-fill-pressed: var(--company-brand-80);\n  --selaras-color-primary-on-fill: var(--company-brand-10);\n\n  --selaras-color-primary-subtle: var(--company-brand-10);\n  --selaras-color-primary-subtle-hover: var(--company-brand-20);\n  --selaras-color-primary-subtle-pressed: var(--company-brand-30);\n  --selaras-color-primary-on-subtle: var(--company-brand-90);\n\n  --selaras-color-primary-text: var(--company-brand-70);\n  --selaras-color-primary-text-hover: var(--company-brand-80);\n  --selaras-color-primary-text-pressed: var(--company-brand-90);\n\n  --selaras-color-primary-border: var(--company-brand-50);\n  --selaras-color-primary-focus: var(--company-brand-60);\n}\n",[691,1281,1282,1288,1296,1303,1310,1317,1324,1331,1338,1345,1352,1359,1363,1382,1399,1415,1432,1437,1453,1470,1486,1502,1506,1521,1536,1551,1555,1571,1586],{"__ignoreMap":794},[798,1283,1284,1286],{"class":800,"line":8},[798,1285,804],{"class":803},[798,1287,808],{"class":807},[798,1289,1290,1293],{"class":800,"line":811},[798,1291,1292],{"class":814},"  --company-brand-10",[798,1294,1295],{"class":807},": ...;\n",[798,1297,1298,1301],{"class":800,"line":832},[798,1299,1300],{"class":814},"  --company-brand-20",[798,1302,1295],{"class":807},[798,1304,1305,1308],{"class":800,"line":882},[798,1306,1307],{"class":814},"  --company-brand-30",[798,1309,1295],{"class":807},[798,1311,1312,1315],{"class":800,"line":895},[798,1313,1314],{"class":814},"  --company-brand-40",[798,1316,1295],{"class":807},[798,1318,1319,1322],{"class":800,"line":901},[798,1320,1321],{"class":814},"  --company-brand-50",[798,1323,1295],{"class":807},[798,1325,1326,1329],{"class":800,"line":914},[798,1327,1328],{"class":814},"  --company-brand-60",[798,1330,1295],{"class":807},[798,1332,1333,1336],{"class":800,"line":927},[798,1334,1335],{"class":814},"  --company-brand-70",[798,1337,1295],{"class":807},[798,1339,1340,1343],{"class":800,"line":932},[798,1341,1342],{"class":814},"  --company-brand-80",[798,1344,1295],{"class":807},[798,1346,1347,1350],{"class":800,"line":13},[798,1348,1349],{"class":814},"  --company-brand-90",[798,1351,1295],{"class":807},[798,1353,1354,1357],{"class":800,"line":147},[798,1355,1356],{"class":814},"  --company-brand-100",[798,1358,1295],{"class":807},[798,1360,1361],{"class":800,"line":166},[798,1362,898],{"emptyLinePlaceholder":651},[798,1364,1365,1368,1370,1373,1376,1379],{"class":800,"line":1184},[798,1366,1367],{"class":814},"  --selaras-color-primary-fill",[798,1369,818],{"class":807},[798,1371,1372],{"class":821},"var",[798,1374,1375],{"class":807},"(",[798,1377,1378],{"class":814},"--company-brand-60",[798,1380,1381],{"class":807},");\n",[798,1383,1385,1388,1390,1392,1394,1397],{"class":800,"line":1384},14,[798,1386,1387],{"class":814},"  --selaras-color-primary-fill-hover",[798,1389,818],{"class":807},[798,1391,1372],{"class":821},[798,1393,1375],{"class":807},[798,1395,1396],{"class":814},"--company-brand-70",[798,1398,1381],{"class":807},[798,1400,1401,1404,1406,1408,1410,1413],{"class":800,"line":615},[798,1402,1403],{"class":814},"  --selaras-color-primary-fill-pressed",[798,1405,818],{"class":807},[798,1407,1372],{"class":821},[798,1409,1375],{"class":807},[798,1411,1412],{"class":814},"--company-brand-80",[798,1414,1381],{"class":807},[798,1416,1418,1421,1423,1425,1427,1430],{"class":800,"line":1417},16,[798,1419,1420],{"class":814},"  --selaras-color-primary-on-fill",[798,1422,818],{"class":807},[798,1424,1372],{"class":821},[798,1426,1375],{"class":807},[798,1428,1429],{"class":814},"--company-brand-10",[798,1431,1381],{"class":807},[798,1433,1435],{"class":800,"line":1434},17,[798,1436,898],{"emptyLinePlaceholder":651},[798,1438,1440,1443,1445,1447,1449,1451],{"class":800,"line":1439},18,[798,1441,1442],{"class":814},"  --selaras-color-primary-subtle",[798,1444,818],{"class":807},[798,1446,1372],{"class":821},[798,1448,1375],{"class":807},[798,1450,1429],{"class":814},[798,1452,1381],{"class":807},[798,1454,1456,1459,1461,1463,1465,1468],{"class":800,"line":1455},19,[798,1457,1458],{"class":814},"  --selaras-color-primary-subtle-hover",[798,1460,818],{"class":807},[798,1462,1372],{"class":821},[798,1464,1375],{"class":807},[798,1466,1467],{"class":814},"--company-brand-20",[798,1469,1381],{"class":807},[798,1471,1472,1475,1477,1479,1481,1484],{"class":800,"line":30},[798,1473,1474],{"class":814},"  --selaras-color-primary-subtle-pressed",[798,1476,818],{"class":807},[798,1478,1372],{"class":821},[798,1480,1375],{"class":807},[798,1482,1483],{"class":814},"--company-brand-30",[798,1485,1381],{"class":807},[798,1487,1488,1491,1493,1495,1497,1500],{"class":800,"line":235},[798,1489,1490],{"class":814},"  --selaras-color-primary-on-subtle",[798,1492,818],{"class":807},[798,1494,1372],{"class":821},[798,1496,1375],{"class":807},[798,1498,1499],{"class":814},"--company-brand-90",[798,1501,1381],{"class":807},[798,1503,1504],{"class":800,"line":245},[798,1505,898],{"emptyLinePlaceholder":651},[798,1507,1508,1511,1513,1515,1517,1519],{"class":800,"line":260},[798,1509,1510],{"class":814},"  --selaras-color-primary-text",[798,1512,818],{"class":807},[798,1514,1372],{"class":821},[798,1516,1375],{"class":807},[798,1518,1396],{"class":814},[798,1520,1381],{"class":807},[798,1522,1523,1526,1528,1530,1532,1534],{"class":800,"line":275},[798,1524,1525],{"class":814},"  --selaras-color-primary-text-hover",[798,1527,818],{"class":807},[798,1529,1372],{"class":821},[798,1531,1375],{"class":807},[798,1533,1412],{"class":814},[798,1535,1381],{"class":807},[798,1537,1538,1541,1543,1545,1547,1549],{"class":800,"line":280},[798,1539,1540],{"class":814},"  --selaras-color-primary-text-pressed",[798,1542,818],{"class":807},[798,1544,1372],{"class":821},[798,1546,1375],{"class":807},[798,1548,1499],{"class":814},[798,1550,1381],{"class":807},[798,1552,1553],{"class":800,"line":290},[798,1554,898],{"emptyLinePlaceholder":651},[798,1556,1557,1560,1562,1564,1566,1569],{"class":800,"line":295},[798,1558,1559],{"class":814},"  --selaras-color-primary-border",[798,1561,818],{"class":807},[798,1563,1372],{"class":821},[798,1565,1375],{"class":807},[798,1567,1568],{"class":814},"--company-brand-50",[798,1570,1381],{"class":807},[798,1572,1573,1576,1578,1580,1582,1584],{"class":800,"line":300},[798,1574,1575],{"class":814},"  --selaras-color-primary-focus",[798,1577,818],{"class":807},[798,1579,1372],{"class":821},[798,1581,1375],{"class":807},[798,1583,1378],{"class":814},[798,1585,1381],{"class":807},[798,1587,1588],{"class":800,"line":310},[798,1589,835],{"class":807},[661,1591,1592],{},"Map the neutral foundations as well as component color roles. For example,\nif your existing system exposes these surface and divider tokens:",[789,1594,1596],{"className":791,"code":1595,"language":793,"meta":794,"style":794},":root {\n  --selaras-surface-canvas: var(--company-canvas-light);\n  --selaras-surface-default: var(--company-panel-light);\n  --selaras-surface-elevated: var(--company-sidebar-light);\n\n  --selaras-border-default: var(--company-divider-light);\n  --selaras-border-muted: var(--company-divider-subtle-light);\n  --selaras-border-hover: var(--company-divider-hover-light);\n}\n\n:root.dark {\n  --selaras-surface-canvas: var(--company-canvas-dark);\n  --selaras-surface-default: var(--company-panel-dark);\n  --selaras-surface-elevated: var(--company-sidebar-dark);\n\n  --selaras-border-default: var(--company-divider-dark);\n  --selaras-border-muted: var(--company-divider-subtle-dark);\n  --selaras-border-hover: var(--company-divider-hover-dark);\n}\n",[691,1597,1598,1604,1619,1634,1649,1653,1668,1684,1699,1703,1707,1713,1728,1743,1758,1762,1777,1792,1807],{"__ignoreMap":794},[798,1599,1600,1602],{"class":800,"line":8},[798,1601,804],{"class":803},[798,1603,808],{"class":807},[798,1605,1606,1608,1610,1612,1614,1617],{"class":800,"line":811},[798,1607,861],{"class":814},[798,1609,818],{"class":807},[798,1611,1372],{"class":821},[798,1613,1375],{"class":807},[798,1615,1616],{"class":814},"--company-canvas-light",[798,1618,1381],{"class":807},[798,1620,1621,1623,1625,1627,1629,1632],{"class":800,"line":832},[798,1622,872],{"class":814},[798,1624,818],{"class":807},[798,1626,1372],{"class":821},[798,1628,1375],{"class":807},[798,1630,1631],{"class":814},"--company-panel-light",[798,1633,1381],{"class":807},[798,1635,1636,1638,1640,1642,1644,1647],{"class":800,"line":882},[798,1637,885],{"class":814},[798,1639,818],{"class":807},[798,1641,1372],{"class":821},[798,1643,1375],{"class":807},[798,1645,1646],{"class":814},"--company-sidebar-light",[798,1648,1381],{"class":807},[798,1650,1651],{"class":800,"line":895},[798,1652,898],{"emptyLinePlaceholder":651},[798,1654,1655,1657,1659,1661,1663,1666],{"class":800,"line":901},[798,1656,935],{"class":814},[798,1658,818],{"class":807},[798,1660,1372],{"class":821},[798,1662,1375],{"class":807},[798,1664,1665],{"class":814},"--company-divider-light",[798,1667,1381],{"class":807},[798,1669,1670,1673,1675,1677,1679,1682],{"class":800,"line":914},[798,1671,1672],{"class":814},"  --selaras-border-muted",[798,1674,818],{"class":807},[798,1676,1372],{"class":821},[798,1678,1375],{"class":807},[798,1680,1681],{"class":814},"--company-divider-subtle-light",[798,1683,1381],{"class":807},[798,1685,1686,1688,1690,1692,1694,1697],{"class":800,"line":927},[798,1687,947],{"class":814},[798,1689,818],{"class":807},[798,1691,1372],{"class":821},[798,1693,1375],{"class":807},[798,1695,1696],{"class":814},"--company-divider-hover-light",[798,1698,1381],{"class":807},[798,1700,1701],{"class":800,"line":932},[798,1702,835],{"class":807},[798,1704,1705],{"class":800,"line":13},[798,1706,898],{"emptyLinePlaceholder":651},[798,1708,1709,1711],{"class":800,"line":147},[798,1710,964],{"class":803},[798,1712,808],{"class":807},[798,1714,1715,1717,1719,1721,1723,1726],{"class":800,"line":166},[798,1716,861],{"class":814},[798,1718,818],{"class":807},[798,1720,1372],{"class":821},[798,1722,1375],{"class":807},[798,1724,1725],{"class":814},"--company-canvas-dark",[798,1727,1381],{"class":807},[798,1729,1730,1732,1734,1736,1738,1741],{"class":800,"line":1184},[798,1731,872],{"class":814},[798,1733,818],{"class":807},[798,1735,1372],{"class":821},[798,1737,1375],{"class":807},[798,1739,1740],{"class":814},"--company-panel-dark",[798,1742,1381],{"class":807},[798,1744,1745,1747,1749,1751,1753,1756],{"class":800,"line":1384},[798,1746,885],{"class":814},[798,1748,818],{"class":807},[798,1750,1372],{"class":821},[798,1752,1375],{"class":807},[798,1754,1755],{"class":814},"--company-sidebar-dark",[798,1757,1381],{"class":807},[798,1759,1760],{"class":800,"line":615},[798,1761,898],{"emptyLinePlaceholder":651},[798,1763,1764,1766,1768,1770,1772,1775],{"class":800,"line":1417},[798,1765,935],{"class":814},[798,1767,818],{"class":807},[798,1769,1372],{"class":821},[798,1771,1375],{"class":807},[798,1773,1774],{"class":814},"--company-divider-dark",[798,1776,1381],{"class":807},[798,1778,1779,1781,1783,1785,1787,1790],{"class":800,"line":1434},[798,1780,1672],{"class":814},[798,1782,818],{"class":807},[798,1784,1372],{"class":821},[798,1786,1375],{"class":807},[798,1788,1789],{"class":814},"--company-divider-subtle-dark",[798,1791,1381],{"class":807},[798,1793,1794,1796,1798,1800,1802,1805],{"class":800,"line":1439},[798,1795,947],{"class":814},[798,1797,818],{"class":807},[798,1799,1372],{"class":821},[798,1801,1375],{"class":807},[798,1803,1804],{"class":814},"--company-divider-hover-dark",[798,1806,1381],{"class":807},[798,1808,1809],{"class":800,"line":1455},[798,1810,835],{"class":807},[661,1812,1813,1814,1817,1818,1821],{},"Define the ",[691,1815,1816],{},"--company-*"," variables in your own system. Choose divider values\nthat remain visible on the panels and sidebar where you need a boundary; do\nnot automatically map a border to the same scale entry as its background.\nSee ",[1088,1819,1078],{"href":1820},"#check-borders-against-their-surfaces",".",[661,1823,1824,1825,1828],{},"Your design system stays the source of truth. The ",[691,1826,1827],{},"--selaras-*"," variables are\nthe mapping layer.",[656,1830,1832],{"id":1831},"use-your-own-complete-theme","Use your own complete theme",[661,1834,1835],{},"Most applications should import the default theme:",[789,1837,1839],{"className":791,"code":1838,"language":793,"meta":794,"style":794},"@import \"tailwindcss\";\n@import \"@sewadah\u002Fselaras\";\n@import \"#selaras\u002Ftailwind.css\";\n",[691,1840,1841,1852,1861],{"__ignoreMap":794},[798,1842,1843,1846,1850],{"class":800,"line":8},[798,1844,1845],{"class":825},"@import",[798,1847,1849],{"class":1848},"sZZnC"," \"tailwindcss\"",[798,1851,829],{"class":807},[798,1853,1854,1856,1859],{"class":800,"line":811},[798,1855,1845],{"class":825},[798,1857,1858],{"class":1848}," \"@sewadah\u002Fselaras\"",[798,1860,829],{"class":807},[798,1862,1863,1865,1868],{"class":800,"line":832},[798,1864,1845],{"class":825},[798,1866,1867],{"class":1848}," \"#selaras\u002Ftailwind.css\"",[798,1869,829],{"class":807},[661,1871,1872],{},"A mature design system can omit Selaras-owned foundation colors:",[789,1874,1876],{"className":791,"code":1875,"language":793,"meta":794,"style":794},"@import \"tailwindcss\";\n@import \"@sewadah\u002Fselaras\u002Fstructural.css\";\n@import \"#selaras\u002Ftailwind.css\";\n",[691,1877,1878,1886,1895],{"__ignoreMap":794},[798,1879,1880,1882,1884],{"class":800,"line":8},[798,1881,1845],{"class":825},[798,1883,1849],{"class":1848},[798,1885,829],{"class":807},[798,1887,1888,1890,1893],{"class":800,"line":811},[798,1889,1845],{"class":825},[798,1891,1892],{"class":1848}," \"@sewadah\u002Fselaras\u002Fstructural.css\"",[798,1894,829],{"class":807},[798,1896,1897,1899,1901],{"class":800,"line":832},[798,1898,1845],{"class":825},[798,1900,1867],{"class":1848},[798,1902,829],{"class":807},[661,1904,1905],{},"Then provide all semantic values that your application uses.",[661,1907,1908,1911],{},[691,1909,1910],{},"structural.css"," still supplies:",[1194,1913,1914,1917,1920,1923,1926],{},[1197,1915,1916],{},"Selaras source discovery for Tailwind",[1197,1918,1919],{},"variants",[1197,1921,1922],{},"animations",[1197,1924,1925],{},"structural CSS",[1197,1927,1928],{},"semantic read bindings",[661,1930,1931],{},"It does not supply the default Selaras foundation palette.",[661,1933,1934],{},"This mode is for a complete external theme. It is not an automatic unthemed\nfallback.",[656,1936,1938],{"id":1937},"radius-shadows-stacking-and-tailwind-tokens","Radius, shadows, stacking, and Tailwind tokens",[661,1940,1941],{},"Radius uses one base input by default:",[789,1943,1945],{"className":791,"code":1944,"language":793,"meta":794,"style":794},":root {\n  --selaras-radius-base: 0.25rem;\n}\n",[691,1946,1947,1953,1966],{"__ignoreMap":794},[798,1948,1949,1951],{"class":800,"line":8},[798,1950,804],{"class":803},[798,1952,808],{"class":807},[798,1954,1955,1957,1959,1962,1964],{"class":800,"line":811},[798,1956,815],{"class":814},[798,1958,818],{"class":807},[798,1960,1961],{"class":821},"0.25",[798,1963,826],{"class":825},[798,1965,829],{"class":807},[798,1967,1968],{"class":800,"line":832},[798,1969,835],{"class":807},[661,1971,1972],{},"Selaras derives its default small, medium, and large radius values from this\nbase. You can override each radius input separately if you need to.",[661,1974,1975],{},"You can also set shadows and stacking values:",[789,1977,1979],{"className":791,"code":1978,"language":793,"meta":794,"style":794},":root {\n  --selaras-shadow-sm: 0 1px 2px rgb(0 0 0 \u002F 0.06);\n  --selaras-shadow-md: 0 4px 16px -2px rgb(0 0 0 \u002F 0.12);\n  --selaras-shadow-lg: 0 12px 32px -4px rgb(0 0 0 \u002F 0.16);\n\n  --selaras-z-modal-overlay: 40;\n  --selaras-z-modal: 50;\n  --selaras-z-dropdown: 60;\n  --selaras-z-tooltip: 70;\n  --selaras-z-toast: 80;\n}\n",[691,1980,1981,1987,2028,2069,2110,2114,2126,2138,2150,2162,2174],{"__ignoreMap":794},[798,1982,1983,1985],{"class":800,"line":8},[798,1984,804],{"class":803},[798,1986,808],{"class":807},[798,1988,1989,1992,1994,1997,2000,2003,2006,2008,2011,2013,2015,2018,2020,2023,2026],{"class":800,"line":811},[798,1990,1991],{"class":814},"  --selaras-shadow-sm",[798,1993,818],{"class":807},[798,1995,1996],{"class":821},"0",[798,1998,1999],{"class":821}," 1",[798,2001,2002],{"class":825},"px",[798,2004,2005],{"class":821}," 2",[798,2007,2002],{"class":825},[798,2009,2010],{"class":821}," rgb",[798,2012,1375],{"class":807},[798,2014,1996],{"class":821},[798,2016,2017],{"class":821}," 0",[798,2019,2017],{"class":821},[798,2021,2022],{"class":807}," \u002F ",[798,2024,2025],{"class":821},"0.06",[798,2027,1381],{"class":807},[798,2029,2030,2033,2035,2037,2040,2042,2045,2047,2050,2052,2054,2056,2058,2060,2062,2064,2067],{"class":800,"line":832},[798,2031,2032],{"class":814},"  --selaras-shadow-md",[798,2034,818],{"class":807},[798,2036,1996],{"class":821},[798,2038,2039],{"class":821}," 4",[798,2041,2002],{"class":825},[798,2043,2044],{"class":821}," 16",[798,2046,2002],{"class":825},[798,2048,2049],{"class":821}," -2",[798,2051,2002],{"class":825},[798,2053,2010],{"class":821},[798,2055,1375],{"class":807},[798,2057,1996],{"class":821},[798,2059,2017],{"class":821},[798,2061,2017],{"class":821},[798,2063,2022],{"class":807},[798,2065,2066],{"class":821},"0.12",[798,2068,1381],{"class":807},[798,2070,2071,2074,2076,2078,2081,2083,2086,2088,2091,2093,2095,2097,2099,2101,2103,2105,2108],{"class":800,"line":882},[798,2072,2073],{"class":814},"  --selaras-shadow-lg",[798,2075,818],{"class":807},[798,2077,1996],{"class":821},[798,2079,2080],{"class":821}," 12",[798,2082,2002],{"class":825},[798,2084,2085],{"class":821}," 32",[798,2087,2002],{"class":825},[798,2089,2090],{"class":821}," -4",[798,2092,2002],{"class":825},[798,2094,2010],{"class":821},[798,2096,1375],{"class":807},[798,2098,1996],{"class":821},[798,2100,2017],{"class":821},[798,2102,2017],{"class":821},[798,2104,2022],{"class":807},[798,2106,2107],{"class":821},"0.16",[798,2109,1381],{"class":807},[798,2111,2112],{"class":800,"line":895},[798,2113,898],{"emptyLinePlaceholder":651},[798,2115,2116,2119,2121,2124],{"class":800,"line":901},[798,2117,2118],{"class":814},"  --selaras-z-modal-overlay",[798,2120,818],{"class":807},[798,2122,2123],{"class":821},"40",[798,2125,829],{"class":807},[798,2127,2128,2131,2133,2136],{"class":800,"line":914},[798,2129,2130],{"class":814},"  --selaras-z-modal",[798,2132,818],{"class":807},[798,2134,2135],{"class":821},"50",[798,2137,829],{"class":807},[798,2139,2140,2143,2145,2148],{"class":800,"line":927},[798,2141,2142],{"class":814},"  --selaras-z-dropdown",[798,2144,818],{"class":807},[798,2146,2147],{"class":821},"60",[798,2149,829],{"class":807},[798,2151,2152,2155,2157,2160],{"class":800,"line":932},[798,2153,2154],{"class":814},"  --selaras-z-tooltip",[798,2156,818],{"class":807},[798,2158,2159],{"class":821},"70",[798,2161,829],{"class":807},[798,2163,2164,2167,2169,2172],{"class":800,"line":13},[798,2165,2166],{"class":814},"  --selaras-z-toast",[798,2168,818],{"class":807},[798,2170,2171],{"class":821},"80",[798,2173,829],{"class":807},[798,2175,2176],{"class":800,"line":147},[798,2177,835],{"class":807},[661,2179,2180],{},"Spacing and normal Tailwind breakpoints are Tailwind tokens, not Selaras theme\ntokens:",[789,2182,2184],{"className":791,"code":2183,"language":793,"meta":794,"style":794},"@theme {\n  --breakpoint-3xl: 1920px;\n  --spacing: 0.2rem;\n}\n",[691,2185,2186,2192,2197,2202],{"__ignoreMap":794},[798,2187,2188,2190],{"class":800,"line":8},[798,2189,1124],{"class":825},[798,2191,808],{"class":807},[798,2193,2194],{"class":800,"line":811},[798,2195,2196],{"class":807},"  --breakpoint-3xl: 1920px;\n",[798,2198,2199],{"class":800,"line":832},[798,2200,2201],{"class":807},"  --spacing: 0.2rem;\n",[798,2203,2204],{"class":800,"line":882},[798,2205,835],{"class":807},[661,2207,2208,2209,2212,2213,1821],{},"The adaptive Selaras presentation uses the Tailwind breakpoint name selected by\n",[691,2210,2211],{},"selaras.adaptive.breakpoint",". The default name is ",[691,2214,2215],{},"md",[2217,2218,2219],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":794,"searchDepth":832,"depth":832,"links":2221},[2222,2223,2224,2225,2226,2227,2228],{"id":658,"depth":832,"text":659},{"id":783,"depth":832,"text":784},{"id":1077,"depth":832,"text":1078},{"id":1107,"depth":832,"text":1108},{"id":1261,"depth":832,"text":1262},{"id":1831,"depth":832,"text":1832},{"id":1937,"depth":832,"text":1938},"Customize semantic tokens and foundation palettes in CSS.",{},{"title":75,"description":2229},"ZeSf7M4QGkVThNTJRnGGo7t6puL5KFdEC-27i-NCrM0",1792056131699]