[{"data":1,"prerenderedAt":2619},["ShallowReactive",2],{"selaras-docs-navigation":3,"selaras-docs:\u002Foverview\u002Ftheming\u002Fcolor-roles":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":79,"aside":651,"body":652,"collapse":10,"description":2614,"editLink":651,"extension":2615,"icon":9,"meta":2616,"navBadges":9,"navigation":9,"order":35,"path":80,"prevNext":651,"seo":2617,"stem":81,"toc":651,"__hash__":2618},"docs\u002Foverview\u002Ftheming\u002Fcolor-roles.md",true,{"type":653,"value":654,"toc":2601},"minimark",[655,660,664,704,707,804,807,816,820,823,880,883,886,890,893,896,1445,1448,1451,1455,1458,1466,1472,1596,1602,1631,1634,1705,1710,1713,1720,1724,1727,1738,1756,1759,1998,2001,2043,2046,2073,2076,2080,2083,2276,2282,2285,2313,2316,2361,2366,2373,2378,2381,2455,2466,2472,2475,2478,2527,2531,2534,2540,2591,2597],[656,657,659],"h3",{"id":658},"built-in-component-color-roles","Built-in component color roles",[661,662,663],"p",{},"Selaras supplies these roles:",[665,666,667,674,679,684,689,694,699],"ul",{},[668,669,670],"li",{},[671,672,673],"code",{},"primary",[668,675,676],{},[671,677,678],{},"secondary",[668,680,681],{},[671,682,683],{},"success",[668,685,686],{},[671,687,688],{},"info",[668,690,691],{},[671,692,693],{},"warning",[668,695,696],{},[671,697,698],{},"danger",[668,700,701],{},[671,702,703],{},"neutral",[661,705,706],{},"The default theme maps these roles to foundation palettes:",[708,709,710,723],"table",{},[711,712,713],"thead",{},[714,715,716,720],"tr",{},[717,718,719],"th",{},"Role",[717,721,722],{},"Default foundation",[724,725,726,738,749,760,771,782,793],"tbody",{},[714,727,728,733],{},[729,730,731],"td",{},[671,732,673],{},[729,734,735],{},[671,736,737],{},"indigo",[714,739,740,744],{},[729,741,742],{},[671,743,678],{},[729,745,746],{},[671,747,748],{},"plum",[714,750,751,755],{},[729,752,753],{},[671,754,683],{},[729,756,757],{},[671,758,759],{},"green",[714,761,762,766],{},[729,763,764],{},[671,765,688],{},[729,767,768],{},[671,769,770],{},"blue",[714,772,773,777],{},[729,774,775],{},[671,776,693],{},[729,778,779],{},[671,780,781],{},"yellow",[714,783,784,788],{},[729,785,786],{},[671,787,698],{},[729,789,790],{},[671,791,792],{},"red",[714,794,795,799],{},[729,796,797],{},[671,798,703],{},[729,800,801],{},[671,802,803],{},"gray",[661,805,806],{},"The role name is the meaning. The foundation name is the hue family.",[661,808,809,810,812,813,815],{},"For example, the default ",[671,811,693],{}," recipe reads the Selaras yellow palette.\nThe default ",[671,814,698],{}," recipe reads the Selaras red palette.",[656,817,819],{"id":818},"change-one-exact-role-value","Change one exact role value",[661,821,822],{},"You can override a public role input directly:",[824,825,830],"pre",{"className":826,"code":827,"language":828,"meta":829,"style":829},"language-css shiki shiki-themes github-light github-dark",":root {\n  --selaras-color-warning-fill: #ffff00;\n  --selaras-color-warning-on-fill: #000000;\n}\n","css","",[671,831,832,844,861,874],{"__ignoreMap":829},[833,834,836,840],"span",{"class":835,"line":8},"line",[833,837,839],{"class":838},"sScJk",":root",[833,841,843],{"class":842},"sVt8B"," {\n",[833,845,847,851,854,858],{"class":835,"line":846},2,[833,848,850],{"class":849},"s4XuR","  --selaras-color-warning-fill",[833,852,853],{"class":842},": ",[833,855,857],{"class":856},"sj4cs","#ffff00",[833,859,860],{"class":842},";\n",[833,862,864,867,869,872],{"class":835,"line":863},3,[833,865,866],{"class":849},"  --selaras-color-warning-on-fill",[833,868,853],{"class":842},[833,870,871],{"class":856},"#000000",[833,873,860],{"class":842},[833,875,877],{"class":835,"line":876},4,[833,878,879],{"class":842},"}\n",[661,881,882],{},"Selaras uses the exact CSS value that you provide. It does not change it.",[661,884,885],{},"This example changes only two leaves. The other warning leaves still use their\ndefault values. If you want one consistent custom warning theme, define the\ncomplete recipe.",[656,887,889],{"id":888},"build-one-role-from-one-css-color","Build one role from one CSS color",[661,891,892],{},"You do not need a TypeScript helper when you want to start from one CSS color.",[661,894,895],{},"You can keep the base color exact and derive the other values with CSS:",[824,897,899],{"className":826,"code":898,"language":828,"meta":829,"style":829},":root {\n  --brand: #fd5e53;\n\n  --selaras-color-primary-fill:\n    var(--brand);\n\n  --selaras-color-primary-fill-hover:\n    color-mix(in oklch, var(--brand), black 8%);\n\n  --selaras-color-primary-fill-pressed:\n    color-mix(in oklch, var(--brand), black 15%);\n\n  --selaras-color-primary-on-fill:\n    white;\n\n  --selaras-color-primary-indicator:\n    color-mix(in oklch, var(--brand), black 18%);\n\n  --selaras-color-primary-subtle:\n    color-mix(in oklch, var(--brand) 12%, transparent);\n\n  --selaras-color-primary-subtle-hover:\n    color-mix(in oklch, var(--brand) 18%, transparent);\n\n  --selaras-color-primary-subtle-pressed:\n    color-mix(in oklch, var(--brand) 24%, transparent);\n\n  --selaras-color-primary-on-subtle:\n    color-mix(in oklch, var(--brand), black 35%);\n\n  --selaras-color-primary-text:\n    color-mix(in oklch, var(--brand), black 20%);\n\n  --selaras-color-primary-text-hover:\n    color-mix(in oklch, var(--brand), black 28%);\n\n  --selaras-color-primary-text-pressed:\n    color-mix(in oklch, var(--brand), black 35%);\n\n  --selaras-color-primary-border:\n    var(--brand);\n\n  --selaras-color-primary-focus:\n    var(--brand);\n}\n",[671,900,901,907,919,924,932,947,952,960,999,1004,1011,1040,1044,1052,1060,1064,1072,1102,1107,1115,1148,1152,1159,1190,1194,1201,1232,1236,1243,1272,1276,1283,1313,1318,1326,1355,1360,1368,1397,1401,1408,1418,1423,1431,1441],{"__ignoreMap":829},[833,902,903,905],{"class":835,"line":8},[833,904,839],{"class":838},[833,906,843],{"class":842},[833,908,909,912,914,917],{"class":835,"line":846},[833,910,911],{"class":849},"  --brand",[833,913,853],{"class":842},[833,915,916],{"class":856},"#fd5e53",[833,918,860],{"class":842},[833,920,921],{"class":835,"line":863},[833,922,923],{"emptyLinePlaceholder":651},"\n",[833,925,926,929],{"class":835,"line":876},[833,927,928],{"class":849},"  --selaras-color-primary-fill",[833,930,931],{"class":842},":\n",[833,933,935,938,941,944],{"class":835,"line":934},5,[833,936,937],{"class":856},"    var",[833,939,940],{"class":842},"(",[833,942,943],{"class":849},"--brand",[833,945,946],{"class":842},");\n",[833,948,950],{"class":835,"line":949},6,[833,951,923],{"emptyLinePlaceholder":651},[833,953,955,958],{"class":835,"line":954},7,[833,956,957],{"class":849},"  --selaras-color-primary-fill-hover",[833,959,931],{"class":842},[833,961,963,966,968,971,974,977,980,982,984,987,990,993,997],{"class":835,"line":962},8,[833,964,965],{"class":856},"    color-mix",[833,967,940],{"class":842},[833,969,970],{"class":849},"in",[833,972,973],{"class":849}," oklch",[833,975,976],{"class":842},", ",[833,978,979],{"class":856},"var",[833,981,940],{"class":842},[833,983,943],{"class":849},[833,985,986],{"class":842},"), ",[833,988,989],{"class":856},"black",[833,991,992],{"class":856}," 8",[833,994,996],{"class":995},"szBVR","%",[833,998,946],{"class":842},[833,1000,1002],{"class":835,"line":1001},9,[833,1003,923],{"emptyLinePlaceholder":651},[833,1005,1006,1009],{"class":835,"line":13},[833,1007,1008],{"class":849},"  --selaras-color-primary-fill-pressed",[833,1010,931],{"class":842},[833,1012,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031,1033,1036,1038],{"class":835,"line":147},[833,1014,965],{"class":856},[833,1016,940],{"class":842},[833,1018,970],{"class":849},[833,1020,973],{"class":849},[833,1022,976],{"class":842},[833,1024,979],{"class":856},[833,1026,940],{"class":842},[833,1028,943],{"class":849},[833,1030,986],{"class":842},[833,1032,989],{"class":856},[833,1034,1035],{"class":856}," 15",[833,1037,996],{"class":995},[833,1039,946],{"class":842},[833,1041,1042],{"class":835,"line":166},[833,1043,923],{"emptyLinePlaceholder":651},[833,1045,1047,1050],{"class":835,"line":1046},13,[833,1048,1049],{"class":849},"  --selaras-color-primary-on-fill",[833,1051,931],{"class":842},[833,1053,1055,1058],{"class":835,"line":1054},14,[833,1056,1057],{"class":856},"    white",[833,1059,860],{"class":842},[833,1061,1062],{"class":835,"line":615},[833,1063,923],{"emptyLinePlaceholder":651},[833,1065,1067,1070],{"class":835,"line":1066},16,[833,1068,1069],{"class":849},"  --selaras-color-primary-indicator",[833,1071,931],{"class":842},[833,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095,1098,1100],{"class":835,"line":1074},17,[833,1076,965],{"class":856},[833,1078,940],{"class":842},[833,1080,970],{"class":849},[833,1082,973],{"class":849},[833,1084,976],{"class":842},[833,1086,979],{"class":856},[833,1088,940],{"class":842},[833,1090,943],{"class":849},[833,1092,986],{"class":842},[833,1094,989],{"class":856},[833,1096,1097],{"class":856}," 18",[833,1099,996],{"class":995},[833,1101,946],{"class":842},[833,1103,1105],{"class":835,"line":1104},18,[833,1106,923],{"emptyLinePlaceholder":651},[833,1108,1110,1113],{"class":835,"line":1109},19,[833,1111,1112],{"class":849},"  --selaras-color-primary-subtle",[833,1114,931],{"class":842},[833,1116,1117,1119,1121,1123,1125,1127,1129,1131,1133,1136,1139,1141,1143,1146],{"class":835,"line":30},[833,1118,965],{"class":856},[833,1120,940],{"class":842},[833,1122,970],{"class":849},[833,1124,973],{"class":849},[833,1126,976],{"class":842},[833,1128,979],{"class":856},[833,1130,940],{"class":842},[833,1132,943],{"class":849},[833,1134,1135],{"class":842},") ",[833,1137,1138],{"class":856},"12",[833,1140,996],{"class":995},[833,1142,976],{"class":842},[833,1144,1145],{"class":856},"transparent",[833,1147,946],{"class":842},[833,1149,1150],{"class":835,"line":235},[833,1151,923],{"emptyLinePlaceholder":651},[833,1153,1154,1157],{"class":835,"line":245},[833,1155,1156],{"class":849},"  --selaras-color-primary-subtle-hover",[833,1158,931],{"class":842},[833,1160,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1182,1184,1186,1188],{"class":835,"line":260},[833,1162,965],{"class":856},[833,1164,940],{"class":842},[833,1166,970],{"class":849},[833,1168,973],{"class":849},[833,1170,976],{"class":842},[833,1172,979],{"class":856},[833,1174,940],{"class":842},[833,1176,943],{"class":849},[833,1178,1135],{"class":842},[833,1180,1181],{"class":856},"18",[833,1183,996],{"class":995},[833,1185,976],{"class":842},[833,1187,1145],{"class":856},[833,1189,946],{"class":842},[833,1191,1192],{"class":835,"line":275},[833,1193,923],{"emptyLinePlaceholder":651},[833,1195,1196,1199],{"class":835,"line":280},[833,1197,1198],{"class":849},"  --selaras-color-primary-subtle-pressed",[833,1200,931],{"class":842},[833,1202,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1224,1226,1228,1230],{"class":835,"line":290},[833,1204,965],{"class":856},[833,1206,940],{"class":842},[833,1208,970],{"class":849},[833,1210,973],{"class":849},[833,1212,976],{"class":842},[833,1214,979],{"class":856},[833,1216,940],{"class":842},[833,1218,943],{"class":849},[833,1220,1135],{"class":842},[833,1222,1223],{"class":856},"24",[833,1225,996],{"class":995},[833,1227,976],{"class":842},[833,1229,1145],{"class":856},[833,1231,946],{"class":842},[833,1233,1234],{"class":835,"line":295},[833,1235,923],{"emptyLinePlaceholder":651},[833,1237,1238,1241],{"class":835,"line":300},[833,1239,1240],{"class":849},"  --selaras-color-primary-on-subtle",[833,1242,931],{"class":842},[833,1244,1245,1247,1249,1251,1253,1255,1257,1259,1261,1263,1265,1268,1270],{"class":835,"line":310},[833,1246,965],{"class":856},[833,1248,940],{"class":842},[833,1250,970],{"class":849},[833,1252,973],{"class":849},[833,1254,976],{"class":842},[833,1256,979],{"class":856},[833,1258,940],{"class":842},[833,1260,943],{"class":849},[833,1262,986],{"class":842},[833,1264,989],{"class":856},[833,1266,1267],{"class":856}," 35",[833,1269,996],{"class":995},[833,1271,946],{"class":842},[833,1273,1274],{"class":835,"line":35},[833,1275,923],{"emptyLinePlaceholder":651},[833,1277,1278,1281],{"class":835,"line":319},[833,1279,1280],{"class":849},"  --selaras-color-primary-text",[833,1282,931],{"class":842},[833,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1309,1311],{"class":835,"line":1285},32,[833,1287,965],{"class":856},[833,1289,940],{"class":842},[833,1291,970],{"class":849},[833,1293,973],{"class":849},[833,1295,976],{"class":842},[833,1297,979],{"class":856},[833,1299,940],{"class":842},[833,1301,943],{"class":849},[833,1303,986],{"class":842},[833,1305,989],{"class":856},[833,1307,1308],{"class":856}," 20",[833,1310,996],{"class":995},[833,1312,946],{"class":842},[833,1314,1316],{"class":835,"line":1315},33,[833,1317,923],{"emptyLinePlaceholder":651},[833,1319,1321,1324],{"class":835,"line":1320},34,[833,1322,1323],{"class":849},"  --selaras-color-primary-text-hover",[833,1325,931],{"class":842},[833,1327,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1348,1351,1353],{"class":835,"line":570},[833,1329,965],{"class":856},[833,1331,940],{"class":842},[833,1333,970],{"class":849},[833,1335,973],{"class":849},[833,1337,976],{"class":842},[833,1339,979],{"class":856},[833,1341,940],{"class":842},[833,1343,943],{"class":849},[833,1345,986],{"class":842},[833,1347,989],{"class":856},[833,1349,1350],{"class":856}," 28",[833,1352,996],{"class":995},[833,1354,946],{"class":842},[833,1356,1358],{"class":835,"line":1357},36,[833,1359,923],{"emptyLinePlaceholder":651},[833,1361,1363,1366],{"class":835,"line":1362},37,[833,1364,1365],{"class":849},"  --selaras-color-primary-text-pressed",[833,1367,931],{"class":842},[833,1369,1371,1373,1375,1377,1379,1381,1383,1385,1387,1389,1391,1393,1395],{"class":835,"line":1370},38,[833,1372,965],{"class":856},[833,1374,940],{"class":842},[833,1376,970],{"class":849},[833,1378,973],{"class":849},[833,1380,976],{"class":842},[833,1382,979],{"class":856},[833,1384,940],{"class":842},[833,1386,943],{"class":849},[833,1388,986],{"class":842},[833,1390,989],{"class":856},[833,1392,1267],{"class":856},[833,1394,996],{"class":995},[833,1396,946],{"class":842},[833,1398,1399],{"class":835,"line":329},[833,1400,923],{"emptyLinePlaceholder":651},[833,1402,1403,1406],{"class":835,"line":40},[833,1404,1405],{"class":849},"  --selaras-color-primary-border",[833,1407,931],{"class":842},[833,1409,1410,1412,1414,1416],{"class":835,"line":343},[833,1411,937],{"class":856},[833,1413,940],{"class":842},[833,1415,943],{"class":849},[833,1417,946],{"class":842},[833,1419,1421],{"class":835,"line":1420},42,[833,1422,923],{"emptyLinePlaceholder":651},[833,1424,1426,1429],{"class":835,"line":1425},43,[833,1427,1428],{"class":849},"  --selaras-color-primary-focus",[833,1430,931],{"class":842},[833,1432,1433,1435,1437,1439],{"class":835,"line":358},[833,1434,937],{"class":856},[833,1436,940],{"class":842},[833,1438,943],{"class":849},[833,1440,946],{"class":842},[833,1442,1443],{"class":835,"line":363},[833,1444,879],{"class":842},[661,1446,1447],{},"This is only one possible recipe. You own the color choices.",[661,1449,1450],{},"Test the result in the components and contexts that your application uses.\nSelaras does not change CSS values that you author.",[656,1452,1454],{"id":1453},"complete-role-recipe","Complete role recipe",[661,1456,1457],{},"A color role has these public inputs:",[824,1459,1464],{"className":1460,"code":1462,"language":1463,"meta":829},[1461],"language-text","fill\nfill-hover\nfill-pressed\non-fill\nindicator\n\nsubtle\nsubtle-hover\nsubtle-pressed\non-subtle\n\ntext\ntext-hover\ntext-pressed\n\nborder\nfocus\n","text",[671,1465,1462],{"__ignoreMap":829},[661,1467,1468,1469,1471],{},"For ",[671,1470,693],{},", the full CSS names are:",[824,1473,1475],{"className":826,"code":1474,"language":828,"meta":829,"style":829},":root {\n  --selaras-color-warning-fill: ...;\n  --selaras-color-warning-fill-hover: ...;\n  --selaras-color-warning-fill-pressed: ...;\n  --selaras-color-warning-on-fill: ...;\n  --selaras-color-warning-indicator: ...;\n\n  --selaras-color-warning-subtle: ...;\n  --selaras-color-warning-subtle-hover: ...;\n  --selaras-color-warning-subtle-pressed: ...;\n  --selaras-color-warning-on-subtle: ...;\n\n  --selaras-color-warning-text: ...;\n  --selaras-color-warning-text-hover: ...;\n  --selaras-color-warning-text-pressed: ...;\n\n  --selaras-color-warning-border: ...;\n  --selaras-color-warning-focus: ...;\n}\n",[671,1476,1477,1483,1490,1497,1504,1510,1517,1521,1528,1535,1542,1549,1553,1560,1567,1574,1578,1585,1592],{"__ignoreMap":829},[833,1478,1479,1481],{"class":835,"line":8},[833,1480,839],{"class":838},[833,1482,843],{"class":842},[833,1484,1485,1487],{"class":835,"line":846},[833,1486,850],{"class":849},[833,1488,1489],{"class":842},": ...;\n",[833,1491,1492,1495],{"class":835,"line":863},[833,1493,1494],{"class":849},"  --selaras-color-warning-fill-hover",[833,1496,1489],{"class":842},[833,1498,1499,1502],{"class":835,"line":876},[833,1500,1501],{"class":849},"  --selaras-color-warning-fill-pressed",[833,1503,1489],{"class":842},[833,1505,1506,1508],{"class":835,"line":934},[833,1507,866],{"class":849},[833,1509,1489],{"class":842},[833,1511,1512,1515],{"class":835,"line":949},[833,1513,1514],{"class":849},"  --selaras-color-warning-indicator",[833,1516,1489],{"class":842},[833,1518,1519],{"class":835,"line":954},[833,1520,923],{"emptyLinePlaceholder":651},[833,1522,1523,1526],{"class":835,"line":962},[833,1524,1525],{"class":849},"  --selaras-color-warning-subtle",[833,1527,1489],{"class":842},[833,1529,1530,1533],{"class":835,"line":1001},[833,1531,1532],{"class":849},"  --selaras-color-warning-subtle-hover",[833,1534,1489],{"class":842},[833,1536,1537,1540],{"class":835,"line":13},[833,1538,1539],{"class":849},"  --selaras-color-warning-subtle-pressed",[833,1541,1489],{"class":842},[833,1543,1544,1547],{"class":835,"line":147},[833,1545,1546],{"class":849},"  --selaras-color-warning-on-subtle",[833,1548,1489],{"class":842},[833,1550,1551],{"class":835,"line":166},[833,1552,923],{"emptyLinePlaceholder":651},[833,1554,1555,1558],{"class":835,"line":1046},[833,1556,1557],{"class":849},"  --selaras-color-warning-text",[833,1559,1489],{"class":842},[833,1561,1562,1565],{"class":835,"line":1054},[833,1563,1564],{"class":849},"  --selaras-color-warning-text-hover",[833,1566,1489],{"class":842},[833,1568,1569,1572],{"class":835,"line":615},[833,1570,1571],{"class":849},"  --selaras-color-warning-text-pressed",[833,1573,1489],{"class":842},[833,1575,1576],{"class":835,"line":1066},[833,1577,923],{"emptyLinePlaceholder":651},[833,1579,1580,1583],{"class":835,"line":1074},[833,1581,1582],{"class":849},"  --selaras-color-warning-border",[833,1584,1489],{"class":842},[833,1586,1587,1590],{"class":835,"line":1104},[833,1588,1589],{"class":849},"  --selaras-color-warning-focus",[833,1591,1489],{"class":842},[833,1593,1594],{"class":835,"line":1109},[833,1595,879],{"class":842},[661,1597,1598,1599,1601],{},"Replace ",[671,1600,693],{}," with any registered role name.",[661,1603,1604,1605,976,1608,976,1611,1614,1615,1618,1619,1622,1623,1626,1627,1630],{},"The component variant selects the leaves that it needs. For example, a solid\nButton uses ",[671,1606,1607],{},"fill",[671,1609,1610],{},"on-fill",[671,1612,1613],{},"fill-hover",", and ",[671,1616,1617],{},"fill-pressed",". A soft Button\nuses the ",[671,1620,1621],{},"subtle"," leaves. Essential unpaired graphics, such as progress and\nradio indicators, use ",[671,1624,1625],{},"indicator",". When it is omitted, it follows ",[671,1628,1629],{},"border",".",[661,1632,1633],{},"You can also supply different values for dark mode:",[824,1635,1637],{"className":826,"code":1636,"language":828,"meta":829,"style":829},":root {\n  --selaras-color-warning-fill: #ffff00;\n  --selaras-color-warning-on-fill: #000000;\n}\n\n:root.dark {\n  --selaras-color-warning-fill: #eaea00;\n  --selaras-color-warning-on-fill: #000000;\n}\n",[671,1638,1639,1645,1655,1665,1669,1673,1680,1691,1701],{"__ignoreMap":829},[833,1640,1641,1643],{"class":835,"line":8},[833,1642,839],{"class":838},[833,1644,843],{"class":842},[833,1646,1647,1649,1651,1653],{"class":835,"line":846},[833,1648,850],{"class":849},[833,1650,853],{"class":842},[833,1652,857],{"class":856},[833,1654,860],{"class":842},[833,1656,1657,1659,1661,1663],{"class":835,"line":863},[833,1658,866],{"class":849},[833,1660,853],{"class":842},[833,1662,871],{"class":856},[833,1664,860],{"class":842},[833,1666,1667],{"class":835,"line":876},[833,1668,879],{"class":842},[833,1670,1671],{"class":835,"line":934},[833,1672,923],{"emptyLinePlaceholder":651},[833,1674,1675,1678],{"class":835,"line":949},[833,1676,1677],{"class":838},":root.dark",[833,1679,843],{"class":842},[833,1681,1682,1684,1686,1689],{"class":835,"line":954},[833,1683,850],{"class":849},[833,1685,853],{"class":842},[833,1687,1688],{"class":856},"#eaea00",[833,1690,860],{"class":842},[833,1692,1693,1695,1697,1699],{"class":835,"line":962},[833,1694,866],{"class":849},[833,1696,853],{"class":842},[833,1698,871],{"class":856},[833,1700,860],{"class":842},[833,1702,1703],{"class":835,"line":1001},[833,1704,879],{"class":842},[1706,1707,1709],"h2",{"id":1708},"nuxt-configuration-and-theme-helpers","Nuxt configuration and theme helpers",[661,1711,1712],{},"Use CSS first.",[661,1714,1715,1716,1719],{},"Use ",[671,1717,1718],{},"nuxt.config.ts"," when Selaras needs build-time information. The most common\ncolor case is a new role name.",[656,1721,1723],{"id":1722},"add-a-new-role","Add a new role",[661,1725,1726],{},"Built-in role names already work without theme configuration.",[661,1728,1729,1730,1733,1734,1737],{},"A new role such as ",[671,1731,1732],{},"tertiary"," or ",[671,1735,1736],{},"premium"," must be registered at build time so\nSelaras can:",[665,1739,1740,1743,1749],{},[668,1741,1742],{},"generate its role bindings",[668,1744,1745,1746],{},"add it to ",[671,1747,1748],{},"ColorRole",[668,1750,1751,1752,1755],{},"make ",[671,1753,1754],{},"color=\"tertiary\""," type-safe",[661,1757,1758],{},"The current Nuxt API requires a light and dark recipe:",[824,1760,1764],{"className":1761,"code":1762,"language":1763,"meta":829,"style":829},"language-ts shiki shiki-themes github-light github-dark","import { defineColor } from '@sewadah\u002Fselaras\u002Ftheme'\n\nexport default defineNuxtConfig({\n  modules: ['@sewadah\u002Fselaras'],\n\n  selaras: {\n    theme: {\n      colors: {\n        tertiary: defineColor({\n          light: {\n            fill: 'var(--company-tertiary-fill)',\n            onFill: 'var(--company-tertiary-on-fill)',\n            subtle: 'var(--company-tertiary-subtle)',\n            onSubtle: 'var(--company-tertiary-on-subtle)',\n            text: 'var(--company-tertiary-text)',\n            border: 'var(--company-tertiary-border)',\n          },\n          dark: {\n            fill: 'var(--company-tertiary-fill-dark)',\n            onFill: 'var(--company-tertiary-on-fill-dark)',\n            subtle: 'var(--company-tertiary-subtle-dark)',\n            onSubtle: 'var(--company-tertiary-on-subtle-dark)',\n            text: 'var(--company-tertiary-text-dark)',\n            border: 'var(--company-tertiary-border-dark)',\n          },\n        }),\n      },\n    },\n  },\n})\n","ts",[671,1765,1766,1781,1785,1799,1810,1814,1819,1824,1829,1839,1844,1855,1865,1875,1885,1895,1905,1910,1915,1924,1933,1942,1951,1960,1969,1973,1978,1983,1988,1993],{"__ignoreMap":829},[833,1767,1768,1771,1774,1777],{"class":835,"line":8},[833,1769,1770],{"class":995},"import",[833,1772,1773],{"class":842}," { defineColor } ",[833,1775,1776],{"class":995},"from",[833,1778,1780],{"class":1779},"sZZnC"," '@sewadah\u002Fselaras\u002Ftheme'\n",[833,1782,1783],{"class":835,"line":846},[833,1784,923],{"emptyLinePlaceholder":651},[833,1786,1787,1790,1793,1796],{"class":835,"line":863},[833,1788,1789],{"class":995},"export",[833,1791,1792],{"class":995}," default",[833,1794,1795],{"class":838}," defineNuxtConfig",[833,1797,1798],{"class":842},"({\n",[833,1800,1801,1804,1807],{"class":835,"line":876},[833,1802,1803],{"class":842},"  modules: [",[833,1805,1806],{"class":1779},"'@sewadah\u002Fselaras'",[833,1808,1809],{"class":842},"],\n",[833,1811,1812],{"class":835,"line":934},[833,1813,923],{"emptyLinePlaceholder":651},[833,1815,1816],{"class":835,"line":949},[833,1817,1818],{"class":842},"  selaras: {\n",[833,1820,1821],{"class":835,"line":954},[833,1822,1823],{"class":842},"    theme: {\n",[833,1825,1826],{"class":835,"line":962},[833,1827,1828],{"class":842},"      colors: {\n",[833,1830,1831,1834,1837],{"class":835,"line":1001},[833,1832,1833],{"class":842},"        tertiary: ",[833,1835,1836],{"class":838},"defineColor",[833,1838,1798],{"class":842},[833,1840,1841],{"class":835,"line":13},[833,1842,1843],{"class":842},"          light: {\n",[833,1845,1846,1849,1852],{"class":835,"line":147},[833,1847,1848],{"class":842},"            fill: ",[833,1850,1851],{"class":1779},"'var(--company-tertiary-fill)'",[833,1853,1854],{"class":842},",\n",[833,1856,1857,1860,1863],{"class":835,"line":166},[833,1858,1859],{"class":842},"            onFill: ",[833,1861,1862],{"class":1779},"'var(--company-tertiary-on-fill)'",[833,1864,1854],{"class":842},[833,1866,1867,1870,1873],{"class":835,"line":1046},[833,1868,1869],{"class":842},"            subtle: ",[833,1871,1872],{"class":1779},"'var(--company-tertiary-subtle)'",[833,1874,1854],{"class":842},[833,1876,1877,1880,1883],{"class":835,"line":1054},[833,1878,1879],{"class":842},"            onSubtle: ",[833,1881,1882],{"class":1779},"'var(--company-tertiary-on-subtle)'",[833,1884,1854],{"class":842},[833,1886,1887,1890,1893],{"class":835,"line":615},[833,1888,1889],{"class":842},"            text: ",[833,1891,1892],{"class":1779},"'var(--company-tertiary-text)'",[833,1894,1854],{"class":842},[833,1896,1897,1900,1903],{"class":835,"line":1066},[833,1898,1899],{"class":842},"            border: ",[833,1901,1902],{"class":1779},"'var(--company-tertiary-border)'",[833,1904,1854],{"class":842},[833,1906,1907],{"class":835,"line":1074},[833,1908,1909],{"class":842},"          },\n",[833,1911,1912],{"class":835,"line":1104},[833,1913,1914],{"class":842},"          dark: {\n",[833,1916,1917,1919,1922],{"class":835,"line":1109},[833,1918,1848],{"class":842},[833,1920,1921],{"class":1779},"'var(--company-tertiary-fill-dark)'",[833,1923,1854],{"class":842},[833,1925,1926,1928,1931],{"class":835,"line":30},[833,1927,1859],{"class":842},[833,1929,1930],{"class":1779},"'var(--company-tertiary-on-fill-dark)'",[833,1932,1854],{"class":842},[833,1934,1935,1937,1940],{"class":835,"line":235},[833,1936,1869],{"class":842},[833,1938,1939],{"class":1779},"'var(--company-tertiary-subtle-dark)'",[833,1941,1854],{"class":842},[833,1943,1944,1946,1949],{"class":835,"line":245},[833,1945,1879],{"class":842},[833,1947,1948],{"class":1779},"'var(--company-tertiary-on-subtle-dark)'",[833,1950,1854],{"class":842},[833,1952,1953,1955,1958],{"class":835,"line":260},[833,1954,1889],{"class":842},[833,1956,1957],{"class":1779},"'var(--company-tertiary-text-dark)'",[833,1959,1854],{"class":842},[833,1961,1962,1964,1967],{"class":835,"line":275},[833,1963,1899],{"class":842},[833,1965,1966],{"class":1779},"'var(--company-tertiary-border-dark)'",[833,1968,1854],{"class":842},[833,1970,1971],{"class":835,"line":280},[833,1972,1909],{"class":842},[833,1974,1975],{"class":835,"line":290},[833,1976,1977],{"class":842},"        }),\n",[833,1979,1980],{"class":835,"line":295},[833,1981,1982],{"class":842},"      },\n",[833,1984,1985],{"class":835,"line":300},[833,1986,1987],{"class":842},"    },\n",[833,1989,1990],{"class":835,"line":310},[833,1991,1992],{"class":842},"  },\n",[833,1994,1995],{"class":835,"line":35},[833,1996,1997],{"class":842},"})\n",[661,1999,2000],{},"After registration, you can use:",[824,2002,2006],{"className":2003,"code":2004,"language":2005,"meta":829,"style":829},"language-vue-html shiki shiki-themes github-light github-dark","\u003CSButton color=\"tertiary\">\n  Tertiary\n\u003C\u002FSButton>\n","vue-html",[671,2007,2008,2029,2034],{"__ignoreMap":829},[833,2009,2010,2013,2017,2020,2023,2026],{"class":835,"line":8},[833,2011,2012],{"class":842},"\u003C",[833,2014,2016],{"class":2015},"s9eBZ","SButton",[833,2018,2019],{"class":838}," color",[833,2021,2022],{"class":842},"=",[833,2024,2025],{"class":1779},"\"tertiary\"",[833,2027,2028],{"class":842},">\n",[833,2030,2031],{"class":835,"line":846},[833,2032,2033],{"class":842},"  Tertiary\n",[833,2035,2036,2039,2041],{"class":835,"line":863},[833,2037,2038],{"class":842},"\u003C\u002F",[833,2040,2016],{"class":2015},[833,2042,2028],{"class":842},[661,2044,2045],{},"You can still override the registered role from CSS:",[824,2047,2049],{"className":826,"code":2048,"language":828,"meta":829,"style":829},":root {\n  --selaras-color-tertiary-fill: #8b5cf6;\n}\n",[671,2050,2051,2057,2069],{"__ignoreMap":829},[833,2052,2053,2055],{"class":835,"line":8},[833,2054,839],{"class":838},[833,2056,843],{"class":842},[833,2058,2059,2062,2064,2067],{"class":835,"line":846},[833,2060,2061],{"class":849},"  --selaras-color-tertiary-fill",[833,2063,853],{"class":842},[833,2065,2066],{"class":856},"#8b5cf6",[833,2068,860],{"class":842},[833,2070,2071],{"class":835,"line":863},[833,2072,879],{"class":842},[661,2074,2075],{},"The Nuxt configuration registers the role. CSS can still own its visual values.",[656,2077,2079],{"id":2078},"override-a-built-in-recipe-in-nuxt-config","Override a built-in recipe in Nuxt config",[661,2081,2082],{},"You can also replace a built-in recipe:",[824,2084,2086],{"className":1761,"code":2085,"language":1763,"meta":829,"style":829},"import { defineColor } from '@sewadah\u002Fselaras\u002Ftheme'\n\nexport default defineNuxtConfig({\n  selaras: {\n    theme: {\n      colors: {\n        warning: defineColor({\n          light: {\n            fill: '#ffff00',\n            onFill: '#000000',\n            subtle: '#fffbd1',\n            onSubtle: '#3d3d00',\n            text: '#6b6b00',\n            border: '#a3a300',\n          },\n          dark: {\n            fill: '#eaea00',\n            onFill: '#000000',\n            subtle: '#2a2a00',\n            onSubtle: '#ffff99',\n            text: '#ffff66',\n            border: '#baba00',\n          },\n        }),\n      },\n    },\n  },\n})\n",[671,2087,2088,2098,2102,2112,2116,2120,2124,2133,2137,2146,2155,2164,2173,2182,2191,2195,2199,2208,2216,2225,2234,2243,2252,2256,2260,2264,2268,2272],{"__ignoreMap":829},[833,2089,2090,2092,2094,2096],{"class":835,"line":8},[833,2091,1770],{"class":995},[833,2093,1773],{"class":842},[833,2095,1776],{"class":995},[833,2097,1780],{"class":1779},[833,2099,2100],{"class":835,"line":846},[833,2101,923],{"emptyLinePlaceholder":651},[833,2103,2104,2106,2108,2110],{"class":835,"line":863},[833,2105,1789],{"class":995},[833,2107,1792],{"class":995},[833,2109,1795],{"class":838},[833,2111,1798],{"class":842},[833,2113,2114],{"class":835,"line":876},[833,2115,1818],{"class":842},[833,2117,2118],{"class":835,"line":934},[833,2119,1823],{"class":842},[833,2121,2122],{"class":835,"line":949},[833,2123,1828],{"class":842},[833,2125,2126,2129,2131],{"class":835,"line":954},[833,2127,2128],{"class":842},"        warning: ",[833,2130,1836],{"class":838},[833,2132,1798],{"class":842},[833,2134,2135],{"class":835,"line":962},[833,2136,1843],{"class":842},[833,2138,2139,2141,2144],{"class":835,"line":1001},[833,2140,1848],{"class":842},[833,2142,2143],{"class":1779},"'#ffff00'",[833,2145,1854],{"class":842},[833,2147,2148,2150,2153],{"class":835,"line":13},[833,2149,1859],{"class":842},[833,2151,2152],{"class":1779},"'#000000'",[833,2154,1854],{"class":842},[833,2156,2157,2159,2162],{"class":835,"line":147},[833,2158,1869],{"class":842},[833,2160,2161],{"class":1779},"'#fffbd1'",[833,2163,1854],{"class":842},[833,2165,2166,2168,2171],{"class":835,"line":166},[833,2167,1879],{"class":842},[833,2169,2170],{"class":1779},"'#3d3d00'",[833,2172,1854],{"class":842},[833,2174,2175,2177,2180],{"class":835,"line":1046},[833,2176,1889],{"class":842},[833,2178,2179],{"class":1779},"'#6b6b00'",[833,2181,1854],{"class":842},[833,2183,2184,2186,2189],{"class":835,"line":1054},[833,2185,1899],{"class":842},[833,2187,2188],{"class":1779},"'#a3a300'",[833,2190,1854],{"class":842},[833,2192,2193],{"class":835,"line":615},[833,2194,1909],{"class":842},[833,2196,2197],{"class":835,"line":1066},[833,2198,1914],{"class":842},[833,2200,2201,2203,2206],{"class":835,"line":1074},[833,2202,1848],{"class":842},[833,2204,2205],{"class":1779},"'#eaea00'",[833,2207,1854],{"class":842},[833,2209,2210,2212,2214],{"class":835,"line":1104},[833,2211,1859],{"class":842},[833,2213,2152],{"class":1779},[833,2215,1854],{"class":842},[833,2217,2218,2220,2223],{"class":835,"line":1109},[833,2219,1869],{"class":842},[833,2221,2222],{"class":1779},"'#2a2a00'",[833,2224,1854],{"class":842},[833,2226,2227,2229,2232],{"class":835,"line":30},[833,2228,1879],{"class":842},[833,2230,2231],{"class":1779},"'#ffff99'",[833,2233,1854],{"class":842},[833,2235,2236,2238,2241],{"class":835,"line":235},[833,2237,1889],{"class":842},[833,2239,2240],{"class":1779},"'#ffff66'",[833,2242,1854],{"class":842},[833,2244,2245,2247,2250],{"class":835,"line":245},[833,2246,1899],{"class":842},[833,2248,2249],{"class":1779},"'#baba00'",[833,2251,1854],{"class":842},[833,2253,2254],{"class":835,"line":260},[833,2255,1909],{"class":842},[833,2257,2258],{"class":835,"line":275},[833,2259,1977],{"class":842},[833,2261,2262],{"class":835,"line":280},[833,2263,1982],{"class":842},[833,2265,2266],{"class":835,"line":290},[833,2267,1987],{"class":842},[833,2269,2270],{"class":835,"line":295},[833,2271,1992],{"class":842},[833,2273,2274],{"class":835,"line":300},[833,2275,1997],{"class":842},[661,2277,2278,2281],{},[671,2279,2280],{},"defineColor()"," validates the required recipe shape. It does not change the\nvalues that you provide.",[661,2283,2284],{},"The required leaves in each mode are:",[665,2286,2287,2291,2296,2300,2305,2309],{},[668,2288,2289],{},[671,2290,1607],{},[668,2292,2293],{},[671,2294,2295],{},"onFill",[668,2297,2298],{},[671,2299,1621],{},[668,2301,2302],{},[671,2303,2304],{},"onSubtle",[668,2306,2307],{},[671,2308,1463],{},[668,2310,2311],{},[671,2312,1629],{},[661,2314,2315],{},"These leaves are optional:",[665,2317,2318,2323,2328,2336,2341,2346,2351,2356],{},[668,2319,2320],{},[671,2321,2322],{},"fillHover",[668,2324,2325],{},[671,2326,2327],{},"fillPressed",[668,2329,2330,2332,2333,2335],{},[671,2331,1625],{}," (defaults to ",[671,2334,1629],{},")",[668,2337,2338],{},[671,2339,2340],{},"subtleHover",[668,2342,2343],{},[671,2344,2345],{},"subtlePressed",[668,2347,2348],{},[671,2349,2350],{},"textHover",[668,2352,2353],{},[671,2354,2355],{},"textPressed",[668,2357,2358],{},[671,2359,2360],{},"focus",[661,2362,2363,2364,1630],{},"If an optional interaction leaf is missing, Selaras links it to the nearest\ndefined state. It does not calculate a new hue for ",[671,2365,2280],{},[656,2367,2369,2370],{"id":2368},"optional-helper-definecolorfromseed","Optional helper: ",[671,2371,2372],{},"defineColorFromSeed()",[661,2374,2375,2377],{},[671,2376,2372],{}," is not the CSS-first theme path.",[661,2379,2380],{},"Use it when you want Selaras to preserve one opaque sRGB color as the resting\nsolid fill and derive the rest of the recipe around it.",[824,2382,2384],{"className":1761,"code":2383,"language":1763,"meta":829,"style":829},"import { defineColorFromSeed } from '@sewadah\u002Fselaras\u002Ftheme'\n\nexport default defineNuxtConfig({\n  selaras: {\n    theme: {\n      colors: {\n        coral: defineColorFromSeed('#FD5E53'),\n      },\n    },\n  },\n})\n",[671,2385,2386,2397,2401,2411,2415,2419,2423,2439,2443,2447,2451],{"__ignoreMap":829},[833,2387,2388,2390,2393,2395],{"class":835,"line":8},[833,2389,1770],{"class":995},[833,2391,2392],{"class":842}," { defineColorFromSeed } ",[833,2394,1776],{"class":995},[833,2396,1780],{"class":1779},[833,2398,2399],{"class":835,"line":846},[833,2400,923],{"emptyLinePlaceholder":651},[833,2402,2403,2405,2407,2409],{"class":835,"line":863},[833,2404,1789],{"class":995},[833,2406,1792],{"class":995},[833,2408,1795],{"class":838},[833,2410,1798],{"class":842},[833,2412,2413],{"class":835,"line":876},[833,2414,1818],{"class":842},[833,2416,2417],{"class":835,"line":934},[833,2418,1823],{"class":842},[833,2420,2421],{"class":835,"line":949},[833,2422,1828],{"class":842},[833,2424,2425,2428,2431,2433,2436],{"class":835,"line":954},[833,2426,2427],{"class":842},"        coral: ",[833,2429,2430],{"class":838},"defineColorFromSeed",[833,2432,940],{"class":842},[833,2434,2435],{"class":1779},"'#FD5E53'",[833,2437,2438],{"class":842},"),\n",[833,2440,2441],{"class":835,"line":962},[833,2442,1982],{"class":842},[833,2444,2445],{"class":835,"line":1001},[833,2446,1987],{"class":842},[833,2448,2449],{"class":835,"line":13},[833,2450,1992],{"class":842},[833,2452,2453],{"class":835,"line":147},[833,2454,1997],{"class":842},[661,2456,2457,2458,2460,2461,2463,2464,1630],{},"The light and dark resting ",[671,2459,1607],{}," values remain exactly the six-digit color\nthat you pass. Selaras chooses black or white ",[671,2462,2295],{},", derives distinct\ninteraction states, and derives text, border, focus, and indicator colors\nagainst the supplied surfaces. If those supporting families cannot be derived\nsafely, the helper rejects the input and directs you to ",[671,2465,2280],{},[661,2467,2468,2469,2471],{},"Use CSS or ",[671,2470,2280],{}," when you need exact control over every state.",[661,2473,2474],{},"The helper currently accepts only opaque six-digit sRGB hex values. It cannot\nevaluate CSS variables, transparent colors, or arbitrary CSS expressions.",[661,2476,2477],{},"If you use custom surfaces, you can give the resolved light and dark surface\ncolors to the helper:",[824,2479,2481],{"className":1761,"code":2480,"language":1763,"meta":829,"style":829},"defineColorFromSeed('#FD5E53', {\n  surfaces: {\n    light: '#f4f0e8',\n    dark: '#20242a',\n  },\n})\n",[671,2482,2483,2494,2499,2509,2519,2523],{"__ignoreMap":829},[833,2484,2485,2487,2489,2491],{"class":835,"line":8},[833,2486,2430],{"class":838},[833,2488,940],{"class":842},[833,2490,2435],{"class":1779},[833,2492,2493],{"class":842},", {\n",[833,2495,2496],{"class":835,"line":846},[833,2497,2498],{"class":842},"  surfaces: {\n",[833,2500,2501,2504,2507],{"class":835,"line":863},[833,2502,2503],{"class":842},"    light: ",[833,2505,2506],{"class":1779},"'#f4f0e8'",[833,2508,1854],{"class":842},[833,2510,2511,2514,2517],{"class":835,"line":876},[833,2512,2513],{"class":842},"    dark: ",[833,2515,2516],{"class":1779},"'#20242a'",[833,2518,1854],{"class":842},[833,2520,2521],{"class":835,"line":934},[833,2522,1992],{"class":842},[833,2524,2525],{"class":835,"line":949},[833,2526,1997],{"class":842},[656,2528,2530],{"id":2529},"optional-helper-dtcg-resolved-colors","Optional helper: DTCG resolved colors",[661,2532,2533],{},"If your design-token pipeline uses DTCG, resolve aliases and modes in that\npipeline first.",[661,2535,2536,2539],{},[671,2537,2538],{},"dtcgColorToCss()"," converts a resolved structured DTCG color value to CSS. It\ndoes not parse a token document. It does not resolve aliases. It does not\nselect a mode.",[824,2541,2543],{"className":1761,"code":2542,"language":1763,"meta":829,"style":829},"import { dtcgColorToCss } from '@sewadah\u002Fselaras\u002Ftheme'\n\nconst fill = dtcgColorToCss(tokens.brand.fill.$value, {\n  path: 'semantic.brand.fill.$value',\n})\n",[671,2544,2545,2556,2560,2577,2587],{"__ignoreMap":829},[833,2546,2547,2549,2552,2554],{"class":835,"line":8},[833,2548,1770],{"class":995},[833,2550,2551],{"class":842}," { dtcgColorToCss } ",[833,2553,1776],{"class":995},[833,2555,1780],{"class":1779},[833,2557,2558],{"class":835,"line":846},[833,2559,923],{"emptyLinePlaceholder":651},[833,2561,2562,2565,2568,2571,2574],{"class":835,"line":863},[833,2563,2564],{"class":995},"const",[833,2566,2567],{"class":856}," fill",[833,2569,2570],{"class":995}," =",[833,2572,2573],{"class":838}," dtcgColorToCss",[833,2575,2576],{"class":842},"(tokens.brand.fill.$value, {\n",[833,2578,2579,2582,2585],{"class":835,"line":876},[833,2580,2581],{"class":842},"  path: ",[833,2583,2584],{"class":1779},"'semantic.brand.fill.$value'",[833,2586,1854],{"class":842},[833,2588,2589],{"class":835,"line":934},[833,2590,1997],{"class":842},[661,2592,2593,2594,2596],{},"You can then use the result in ",[671,2595,2280],{}," or in your own generated CSS.",[2598,2599,2600],"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 .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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":829,"searchDepth":863,"depth":863,"links":2602},[2603,2604,2605,2606,2607],{"id":658,"depth":863,"text":659},{"id":818,"depth":863,"text":819},{"id":888,"depth":863,"text":889},{"id":1453,"depth":863,"text":1454},{"id":1708,"depth":846,"text":1709,"children":2608},[2609,2610,2611,2613],{"id":1722,"depth":863,"text":1723},{"id":2078,"depth":863,"text":2079},{"id":2368,"depth":863,"text":2612},"Optional helper: defineColorFromSeed()",{"id":2529,"depth":863,"text":2530},"Configure built-in and custom semantic colors.","md",{},{"title":79,"description":2614},"GzP-AZ3ftbnZp-F1-K_7N8x8H3vHKhRTP0rhhTgcIzY",1792056131529]