[{"data":1,"prerenderedAt":4365},["ShallowReactive",2],{"selaras-docs-navigation":3,"selaras-docs:\u002Foverview\u002Ftheming\u002Fcolor-roles":682},[4,11,128,525,584,626],{"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,70,107],{"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,66],{"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},"Accessibility","\u002Foverview\u002Fgetting-started\u002Faccessibility","overview\u002Fgetting-started\u002Faccessibility",90,{"title":67,"path":68,"stem":69,"order":65,"icon":9,"collapse":10,"navBadges":9},"Migrating to 1.0","\u002Foverview\u002Fgetting-started\u002Fmigrating-to-1","overview\u002Fgetting-started\u002Fmigrating-to-1",{"title":71,"order":30,"icon":9,"collapse":10,"navBadges":9,"path":72,"stem":73,"children":74,"page":10},"Theming","\u002Foverview\u002Ftheming","overview\u002Ftheming",[75,78,82,86,90,94,99,103],{"title":71,"path":76,"stem":77,"order":13,"icon":9,"collapse":10,"navBadges":9},"\u002Foverview\u002Ftheming\u002Foverview","overview\u002Ftheming\u002Foverview",{"title":79,"path":80,"stem":81,"order":30,"icon":9,"collapse":10,"navBadges":9},"CSS tokens","\u002Foverview\u002Ftheming\u002Fcss-tokens","overview\u002Ftheming\u002Fcss-tokens",{"title":83,"path":84,"stem":85,"order":35,"icon":9,"collapse":10,"navBadges":9},"Color roles","\u002Foverview\u002Ftheming\u002Fcolor-roles","overview\u002Ftheming\u002Fcolor-roles",{"title":87,"path":88,"stem":89,"order":40,"icon":9,"collapse":10,"navBadges":9},"Color modes","\u002Foverview\u002Ftheming\u002Fcolor-modes","overview\u002Ftheming\u002Fcolor-modes",{"title":91,"path":92,"stem":93,"order":45,"icon":9,"collapse":10,"navBadges":9},"Component styling","\u002Foverview\u002Ftheming\u002Fcomponent-styling","overview\u002Ftheming\u002Fcomponent-styling",{"title":95,"path":96,"stem":97,"order":98,"icon":9,"collapse":10,"navBadges":9},"Global configuration","\u002Foverview\u002Ftheming\u002Fglobal-configuration","overview\u002Ftheming\u002Fglobal-configuration",55,{"title":100,"path":101,"stem":102,"order":50,"icon":9,"collapse":10,"navBadges":9},"Scoped themes","\u002Foverview\u002Ftheming\u002Fscoped-themes","overview\u002Ftheming\u002Fscoped-themes",{"title":104,"path":105,"stem":106,"order":55,"icon":9,"collapse":10,"navBadges":9},"Complete themes","\u002Foverview\u002Ftheming\u002Fcomplete-themes","overview\u002Ftheming\u002Fcomplete-themes",{"title":108,"order":35,"icon":9,"collapse":10,"navBadges":9,"path":109,"stem":110,"children":111,"page":10},"Agent Support","\u002Foverview\u002Fagent-support","overview\u002Fagent-support",[112,116,120,124],{"title":113,"path":114,"stem":115,"order":13,"icon":9,"collapse":10,"navBadges":9},"Agent support","\u002Foverview\u002Fagent-support\u002Foverview","overview\u002Fagent-support\u002Foverview",{"title":117,"path":118,"stem":119,"order":30,"icon":9,"collapse":10,"navBadges":9},"Documentation exports","\u002Foverview\u002Fagent-support\u002Fdocumentation","overview\u002Fagent-support\u002Fdocumentation",{"title":121,"path":122,"stem":123,"order":35,"icon":9,"collapse":10,"navBadges":9},"Skills","\u002Foverview\u002Fagent-support\u002Fskills","overview\u002Fagent-support\u002Fskills",{"title":125,"path":126,"stem":127,"order":40,"icon":9,"collapse":10,"navBadges":9},"MCP","\u002Foverview\u002Fagent-support\u002Fmcp","overview\u002Fagent-support\u002Fmcp",{"title":129,"order":30,"icon":9,"collapse":10,"navBadges":9,"path":130,"stem":131,"children":132,"page":10},"Components","\u002Fcomponents","components",[133,210,313,336,380,433,486],{"title":134,"path":135,"stem":136,"children":137,"page":10},"Elements","\u002Fcomponents\u002Felements","components\u002Felements",[138,142,147,152,157,162,166,171,176,181,186,191,196,201,205],{"title":139,"path":140,"stem":141,"order":13,"icon":9,"collapse":10,"navBadges":9},"Button","\u002Fcomponents\u002Felements\u002Fbutton","components\u002Felements\u002Fbutton",{"title":143,"path":144,"stem":145,"order":146,"icon":9,"collapse":10,"navBadges":9},"ButtonGroup","\u002Fcomponents\u002Felements\u002Fbutton-group","components\u002Felements\u002Fbutton-group",10.5,{"title":148,"path":149,"stem":150,"order":151,"icon":9,"collapse":10,"navBadges":9},"Badge","\u002Fcomponents\u002Felements\u002Fbadge","components\u002Felements\u002Fbadge",11,{"title":153,"path":154,"stem":155,"order":156,"icon":9,"collapse":10,"navBadges":9},"Avatar","\u002Fcomponents\u002Felements\u002Favatar","components\u002Felements\u002Favatar",11.25,{"title":158,"path":159,"stem":160,"order":161,"icon":9,"collapse":10,"navBadges":9},"AvatarGroup","\u002Fcomponents\u002Felements\u002Favatar-group","components\u002Felements\u002Favatar-group",11.5,{"title":163,"path":164,"stem":165,"order":161,"icon":9,"collapse":10,"navBadges":9},"Chip","\u002Fcomponents\u002Felements\u002Fchip","components\u002Felements\u002Fchip",{"title":167,"path":168,"stem":169,"order":170,"icon":9,"collapse":10,"navBadges":9},"Icon","\u002Fcomponents\u002Felements\u002Ficon","components\u002Felements\u002Ficon",12,{"title":172,"path":173,"stem":174,"order":175,"icon":9,"collapse":10,"navBadges":9},"Skeleton","\u002Fcomponents\u002Felements\u002Fskeleton","components\u002Felements\u002Fskeleton",12.5,{"title":177,"path":178,"stem":179,"order":180,"icon":9,"collapse":10,"navBadges":9},"Separator","\u002Fcomponents\u002Felements\u002Fseparator","components\u002Felements\u002Fseparator",12.75,{"title":182,"path":183,"stem":184,"order":185,"icon":9,"collapse":10,"navBadges":9},"Alert","\u002Fcomponents\u002Felements\u002Falert","components\u002Felements\u002Falert",12.9,{"title":187,"path":188,"stem":189,"order":190,"icon":9,"collapse":10,"navBadges":9},"Toggle","\u002Fcomponents\u002Felements\u002Ftoggle","components\u002Felements\u002Ftoggle",12.92,{"title":192,"path":193,"stem":194,"order":195,"icon":9,"collapse":10,"navBadges":9},"Toggle Group","\u002Fcomponents\u002Felements\u002Ftoggle-group","components\u002Felements\u002Ftoggle-group",12.94,{"title":197,"path":198,"stem":199,"order":200,"icon":9,"collapse":10,"navBadges":9},"Kbd","\u002Fcomponents\u002Felements\u002Fkbd","components\u002Felements\u002Fkbd",12.95,{"title":202,"path":203,"stem":204,"order":200,"icon":9,"collapse":10,"navBadges":9},"Toolbar","\u002Fcomponents\u002Felements\u002Ftoolbar","components\u002Felements\u002Ftoolbar",{"title":206,"path":207,"stem":208,"order":209,"icon":9,"collapse":10,"navBadges":9},"Progress","\u002Fcomponents\u002Felements\u002Fprogress","components\u002Felements\u002Fprogress",12.97,{"title":211,"path":212,"stem":213,"children":214,"page":10},"Forms","\u002Fcomponents\u002Fforms","components\u002Fforms",[215,219,224,229,233,238,243,248,253,258,263,268,273,278,283,288,293,298,303,308],{"title":216,"path":217,"stem":218,"order":30,"icon":9,"collapse":10,"navBadges":9},"Input","\u002Fcomponents\u002Fforms\u002Finput","components\u002Fforms\u002Finput",{"title":220,"path":221,"stem":222,"order":223,"icon":9,"collapse":10,"navBadges":9},"InputGroup","\u002Fcomponents\u002Fforms\u002Finput-group","components\u002Fforms\u002Finput-group",20.25,{"title":225,"path":226,"stem":227,"order":228,"icon":9,"collapse":10,"navBadges":9},"Editable","\u002Fcomponents\u002Fforms\u002Feditable","components\u002Fforms\u002Feditable",20.5,{"title":230,"path":231,"stem":232,"order":228,"icon":9,"collapse":10,"navBadges":9},"InputNumber","\u002Fcomponents\u002Fforms\u002Finput-number","components\u002Fforms\u002Finput-number",{"title":234,"path":235,"stem":236,"order":237,"icon":9,"collapse":10,"navBadges":9},"Slider","\u002Fcomponents\u002Fforms\u002Fslider","components\u002Fforms\u002Fslider",20.75,{"title":239,"path":240,"stem":241,"order":242,"icon":9,"collapse":10,"navBadges":9},"PinInput","\u002Fcomponents\u002Fforms\u002Fpin-input","components\u002Fforms\u002Fpin-input",20.9,{"title":244,"path":245,"stem":246,"order":247,"icon":9,"collapse":10,"navBadges":9},"Textarea","\u002Fcomponents\u002Fforms\u002Ftextarea","components\u002Fforms\u002Ftextarea",21,{"title":249,"path":250,"stem":251,"order":252,"icon":9,"collapse":10,"navBadges":9},"FileUpload","\u002Fcomponents\u002Fforms\u002Ffile-upload","components\u002Fforms\u002Ffile-upload",21.5,{"title":254,"path":255,"stem":256,"order":257,"icon":9,"collapse":10,"navBadges":9},"Select","\u002Fcomponents\u002Fforms\u002Fselect","components\u002Fforms\u002Fselect",22,{"title":259,"path":260,"stem":261,"order":262,"icon":9,"collapse":10,"navBadges":9},"Listbox","\u002Fcomponents\u002Fforms\u002Flistbox","components\u002Fforms\u002Flistbox",22.5,{"title":264,"path":265,"stem":266,"order":267,"icon":9,"collapse":10,"navBadges":9},"TransferList","\u002Fcomponents\u002Fforms\u002Ftransfer-list","components\u002Fforms\u002Ftransfer-list",22.75,{"title":269,"path":270,"stem":271,"order":272,"icon":9,"collapse":10,"navBadges":9},"Autocomplete","\u002Fcomponents\u002Fforms\u002Fautocomplete","components\u002Fforms\u002Fautocomplete",23,{"title":274,"path":275,"stem":276,"order":277,"icon":9,"collapse":10,"navBadges":9},"DatePicker","\u002Fcomponents\u002Fforms\u002Fdate-picker","components\u002Fforms\u002Fdate-picker",23.5,{"title":279,"path":280,"stem":281,"order":282,"icon":9,"collapse":10,"navBadges":9},"ColorPicker","\u002Fcomponents\u002Fforms\u002Fcolor-picker","components\u002Fforms\u002Fcolor-picker",23.75,{"title":284,"path":285,"stem":286,"order":287,"icon":9,"collapse":10,"navBadges":9},"Checkbox","\u002Fcomponents\u002Fforms\u002Fcheckbox","components\u002Fforms\u002Fcheckbox",24,{"title":289,"path":290,"stem":291,"order":292,"icon":9,"collapse":10,"navBadges":9},"RadioGroup","\u002Fcomponents\u002Fforms\u002Fradio-group","components\u002Fforms\u002Fradio-group",25,{"title":294,"path":295,"stem":296,"order":297,"icon":9,"collapse":10,"navBadges":9},"Rating","\u002Fcomponents\u002Fforms\u002Frating","components\u002Fforms\u002Frating",25.5,{"title":299,"path":300,"stem":301,"order":302,"icon":9,"collapse":10,"navBadges":9},"Switch","\u002Fcomponents\u002Fforms\u002Fswitch","components\u002Fforms\u002Fswitch",26,{"title":304,"path":305,"stem":306,"order":307,"icon":9,"collapse":10,"navBadges":9},"FormField","\u002Fcomponents\u002Fforms\u002Fform-field","components\u002Fforms\u002Fform-field",27,{"title":309,"path":310,"stem":311,"order":312,"icon":9,"collapse":10,"navBadges":9},"Form Validation","\u002Fcomponents\u002Fforms\u002Fvalidation","components\u002Fforms\u002Fvalidation",28,{"title":314,"path":315,"stem":316,"children":317,"page":10},"Data","\u002Fcomponents\u002Fdata","components\u002Fdata",[318,322,327,331],{"title":319,"path":320,"stem":321,"order":312,"icon":9,"collapse":10,"navBadges":9},"EmptyState","\u002Fcomponents\u002Fdata\u002Fempty-state","components\u002Fdata\u002Fempty-state",{"title":323,"path":324,"stem":325,"order":326,"icon":9,"collapse":10,"navBadges":9},"Calendar","\u002Fcomponents\u002Fdata\u002Fcalendar","components\u002Fdata\u002Fcalendar",29,{"title":328,"path":329,"stem":330,"order":35,"icon":9,"collapse":10,"navBadges":9},"Table","\u002Fcomponents\u002Fdata\u002Ftable","components\u002Fdata\u002Ftable",{"title":332,"path":333,"stem":334,"order":335,"icon":9,"collapse":10,"navBadges":9},"Timeline","\u002Fcomponents\u002Fdata\u002Ftimeline","components\u002Fdata\u002Ftimeline",31,{"title":337,"path":338,"stem":339,"children":340,"page":10},"Navigation","\u002Fcomponents\u002Fnavigation","components\u002Fnavigation",[341,346,350,355,360,365,370,375],{"title":342,"path":343,"stem":344,"order":345,"icon":9,"collapse":10,"navBadges":9},"Breadcrumb","\u002Fcomponents\u002Fnavigation\u002Fbreadcrumb","components\u002Fnavigation\u002Fbreadcrumb",39,{"title":347,"path":348,"stem":349,"order":40,"icon":9,"collapse":10,"navBadges":9},"Tabs","\u002Fcomponents\u002Fnavigation\u002Ftabs","components\u002Fnavigation\u002Ftabs",{"title":351,"path":352,"stem":353,"order":354,"icon":9,"collapse":10,"navBadges":9},"Stepper","\u002Fcomponents\u002Fnavigation\u002Fstepper","components\u002Fnavigation\u002Fstepper",40.5,{"title":356,"path":357,"stem":358,"order":359,"icon":9,"collapse":10,"navBadges":9},"Accordion","\u002Fcomponents\u002Fnavigation\u002Faccordion","components\u002Fnavigation\u002Faccordion",41,{"title":361,"path":362,"stem":363,"order":364,"icon":9,"collapse":10,"navBadges":9},"Collapsible","\u002Fcomponents\u002Fnavigation\u002Fcollapsible","components\u002Fnavigation\u002Fcollapsible",41.5,{"title":366,"path":367,"stem":368,"order":369,"icon":9,"collapse":10,"navBadges":9},"Tree","\u002Fcomponents\u002Fnavigation\u002Ftree","components\u002Fnavigation\u002Ftree",41.75,{"title":371,"path":372,"stem":373,"order":374,"icon":9,"collapse":10,"navBadges":9},"Pagination","\u002Fcomponents\u002Fnavigation\u002Fpagination","components\u002Fnavigation\u002Fpagination",44,{"title":376,"path":377,"stem":378,"order":379,"icon":9,"collapse":10,"navBadges":9},"NavigationMenu","\u002Fcomponents\u002Fnavigation\u002Fnavigation-menu","components\u002Fnavigation\u002Fnavigation-menu",45,{"title":381,"path":382,"stem":383,"children":384,"page":10},"Overlays","\u002Fcomponents\u002Foverlays","components\u002Foverlays",[385,389,394,399,404,409,414,419,424,428],{"title":386,"path":387,"stem":388,"order":45,"icon":9,"collapse":10,"navBadges":9},"Modal","\u002Fcomponents\u002Foverlays\u002Fmodal","components\u002Foverlays\u002Fmodal",{"title":390,"path":391,"stem":392,"order":393,"icon":9,"collapse":10,"navBadges":9},"AlertDialog","\u002Fcomponents\u002Foverlays\u002Falert-dialog","components\u002Foverlays\u002Falert-dialog",50.5,{"title":395,"path":396,"stem":397,"order":398,"icon":9,"collapse":10,"navBadges":9},"Dropdown","\u002Fcomponents\u002Foverlays\u002Fdropdown","components\u002Foverlays\u002Fdropdown",51,{"title":400,"path":401,"stem":402,"order":403,"icon":9,"collapse":10,"navBadges":9},"Context Menu","\u002Fcomponents\u002Foverlays\u002Fcontext-menu","components\u002Foverlays\u002Fcontext-menu",51.5,{"title":405,"path":406,"stem":407,"order":408,"icon":9,"collapse":10,"navBadges":9},"Tooltip","\u002Fcomponents\u002Foverlays\u002Ftooltip","components\u002Foverlays\u002Ftooltip",52,{"title":410,"path":411,"stem":412,"order":413,"icon":9,"collapse":10,"navBadges":9},"Toast","\u002Fcomponents\u002Foverlays\u002Ftoast","components\u002Foverlays\u002Ftoast",53,{"title":415,"path":416,"stem":417,"order":418,"icon":9,"collapse":10,"navBadges":9},"Slideover","\u002Fcomponents\u002Foverlays\u002Fslideover","components\u002Foverlays\u002Fslideover",54,{"title":420,"path":421,"stem":422,"order":423,"icon":9,"collapse":10,"navBadges":9},"Command Palette","\u002Fcomponents\u002Foverlays\u002Fcommand-palette","components\u002Foverlays\u002Fcommand-palette",54.5,{"title":425,"path":426,"stem":427,"order":98,"icon":9,"collapse":10,"navBadges":9},"Popover","\u002Fcomponents\u002Foverlays\u002Fpopover","components\u002Foverlays\u002Fpopover",{"title":429,"path":430,"stem":431,"order":432,"icon":9,"collapse":10,"navBadges":9},"Drawer","\u002Fcomponents\u002Foverlays\u002Fdrawer","components\u002Foverlays\u002Fdrawer",56,{"title":434,"path":435,"stem":436,"children":437,"page":10},"Layout","\u002Fcomponents\u002Flayout","components\u002Flayout",[438,443,447,452,457,462,466,471,476,481],{"title":439,"path":440,"stem":441,"order":442,"icon":9,"collapse":10,"navBadges":9},"App","\u002Fcomponents\u002Flayout\u002Fapp","components\u002Flayout\u002Fapp",59,{"title":444,"path":445,"stem":446,"order":50,"icon":9,"collapse":10,"navBadges":9},"Container","\u002Fcomponents\u002Flayout\u002Fcontainer","components\u002Flayout\u002Fcontainer",{"title":448,"path":449,"stem":450,"order":451,"icon":9,"collapse":10,"navBadges":9},"Header","\u002Fcomponents\u002Flayout\u002Fheader","components\u002Flayout\u002Fheader",63,{"title":453,"path":454,"stem":455,"order":456,"icon":9,"collapse":10,"navBadges":9},"ColorModeToggle","\u002Fcomponents\u002Flayout\u002Fcolor-mode-toggle","components\u002Flayout\u002Fcolor-mode-toggle",64,{"title":458,"path":459,"stem":460,"order":461,"icon":9,"collapse":10,"navBadges":9},"ColorModeSwitch","\u002Fcomponents\u002Flayout\u002Fcolor-mode-switch","components\u002Flayout\u002Fcolor-mode-switch",65,{"title":463,"path":464,"stem":465,"order":461,"icon":9,"collapse":10,"navBadges":9},"ScrollArea","\u002Fcomponents\u002Flayout\u002Fscroll-area","components\u002Flayout\u002Fscroll-area",{"title":467,"path":468,"stem":469,"order":470,"icon":9,"collapse":10,"navBadges":9},"Card","\u002Fcomponents\u002Flayout\u002Fcard","components\u002Flayout\u002Fcard",66,{"title":472,"path":473,"stem":474,"order":475,"icon":9,"collapse":10,"navBadges":9},"CardGroup","\u002Fcomponents\u002Flayout\u002Fcard-group","components\u002Flayout\u002Fcard-group",67,{"title":477,"path":478,"stem":479,"order":480,"icon":9,"collapse":10,"navBadges":9},"Splitter","\u002Fcomponents\u002Flayout\u002Fsplitter","components\u002Flayout\u002Fsplitter",68,{"title":482,"path":483,"stem":484,"order":485,"icon":9,"collapse":10,"navBadges":9},"Theme","\u002Fcomponents\u002Flayout\u002Ftheme","components\u002Flayout\u002Ftheme",69,{"title":487,"path":488,"stem":489,"children":490,"page":10},"Typography","\u002Fcomponents\u002Ftypography","components\u002Ftypography",[491,495,500,505,510,515,520],{"title":492,"path":493,"stem":494,"order":55,"icon":9,"collapse":10,"navBadges":9},"Prose","\u002Fcomponents\u002Ftypography\u002Fprose","components\u002Ftypography\u002Fprose",{"title":496,"path":497,"stem":498,"order":499,"icon":9,"collapse":10,"navBadges":9},"CodeGroup","\u002Fcomponents\u002Ftypography\u002Fcode-group","components\u002Ftypography\u002Fcode-group",71,{"title":501,"path":502,"stem":503,"order":504,"icon":9,"collapse":10,"navBadges":9},"Callout","\u002Fcomponents\u002Ftypography\u002Fcallout","components\u002Ftypography\u002Fcallout",72,{"title":506,"path":507,"stem":508,"order":509,"icon":9,"collapse":10,"navBadges":9},"CodeButton","\u002Fcomponents\u002Ftypography\u002Fcode-button","components\u002Ftypography\u002Fcode-button",73,{"title":511,"path":512,"stem":513,"order":514,"icon":9,"collapse":10,"navBadges":9},"ReadMore","\u002Fcomponents\u002Ftypography\u002Fread-more","components\u002Ftypography\u002Fread-more",74,{"title":516,"path":517,"stem":518,"order":519,"icon":9,"collapse":10,"navBadges":9},"FileTree","\u002Fcomponents\u002Ftypography\u002Ffile-tree","components\u002Ftypography\u002Ffile-tree",75,{"title":521,"path":522,"stem":523,"order":524,"icon":9,"collapse":10,"navBadges":9},"CodeTree","\u002Fcomponents\u002Ftypography\u002Fcode-tree","components\u002Ftypography\u002Fcode-tree",76,{"title":526,"order":35,"icon":9,"collapse":10,"navBadges":9,"path":527,"stem":528,"children":529,"page":10},"Composites","\u002Fcomposites","composites",[530,559],{"title":531,"path":532,"stem":533,"children":534,"page":10},"Dashboard","\u002Fcomposites\u002Fdashboard","composites\u002Fdashboard",[535,539,543,547,551,555],{"title":536,"path":537,"stem":538,"order":13,"icon":9,"collapse":10,"navBadges":9},"DashboardGroup","\u002Fcomposites\u002Fdashboard\u002Fdashboard-group","composites\u002Fdashboard\u002Fdashboard-group",{"title":540,"path":541,"stem":542,"order":30,"icon":9,"collapse":10,"navBadges":9},"DashboardSidebar","\u002Fcomposites\u002Fdashboard\u002Fdashboard-sidebar","composites\u002Fdashboard\u002Fdashboard-sidebar",{"title":544,"path":545,"stem":546,"order":35,"icon":9,"collapse":10,"navBadges":9},"DashboardPanel","\u002Fcomposites\u002Fdashboard\u002Fdashboard-panel","composites\u002Fdashboard\u002Fdashboard-panel",{"title":548,"path":549,"stem":550,"order":40,"icon":9,"collapse":10,"navBadges":9},"DashboardResizeHandle","\u002Fcomposites\u002Fdashboard\u002Fdashboard-resize-handle","composites\u002Fdashboard\u002Fdashboard-resize-handle",{"title":552,"path":553,"stem":554,"order":45,"icon":9,"collapse":10,"navBadges":9},"DashboardNavbar","\u002Fcomposites\u002Fdashboard\u002Fdashboard-navbar","composites\u002Fdashboard\u002Fdashboard-navbar",{"title":556,"path":557,"stem":558,"order":50,"icon":9,"collapse":10,"navBadges":9},"DashboardSidebarToggle","\u002Fcomposites\u002Fdashboard\u002Fdashboard-sidebar-toggle","composites\u002Fdashboard\u002Fdashboard-sidebar-toggle",{"title":560,"path":561,"stem":562,"children":563,"page":10},"Documentation","\u002Fcomposites\u002Fdocumentation","composites\u002Fdocumentation",[564,568,572,576,580],{"title":565,"path":566,"stem":567,"order":13,"icon":9,"collapse":10,"navBadges":9},"PageHeader","\u002Fcomposites\u002Fdocumentation\u002Fpage-header","composites\u002Fdocumentation\u002Fpage-header",{"title":569,"path":570,"stem":571,"order":30,"icon":9,"collapse":10,"navBadges":9},"PageAside","\u002Fcomposites\u002Fdocumentation\u002Fpage-aside","composites\u002Fdocumentation\u002Fpage-aside",{"title":573,"path":574,"stem":575,"order":35,"icon":9,"collapse":10,"navBadges":9},"ContentNavigation","\u002Fcomposites\u002Fdocumentation\u002Fcontent-navigation","composites\u002Fdocumentation\u002Fcontent-navigation",{"title":577,"path":578,"stem":579,"order":40,"icon":9,"collapse":10,"navBadges":9},"ContentToc","\u002Fcomposites\u002Fdocumentation\u002Fcontent-toc","composites\u002Fdocumentation\u002Fcontent-toc",{"title":581,"path":582,"stem":583,"order":45,"icon":9,"collapse":10,"navBadges":9},"ContentSurround","\u002Fcomposites\u002Fdocumentation\u002Fcontent-surround","composites\u002Fdocumentation\u002Fcontent-surround",{"title":585,"order":586,"icon":9,"collapse":10,"navBadges":9,"path":587,"stem":588,"children":589,"page":10},"Blocks",35,"\u002Fblocks","blocks",[590,593,597,601,605,609],{"title":585,"path":591,"stem":592,"order":13,"icon":9,"collapse":10,"navBadges":9},"\u002Fblocks\u002Foverview","blocks\u002Foverview",{"title":594,"path":595,"stem":596,"order":30,"icon":9,"collapse":10,"navBadges":9},"Sign in","\u002Fblocks\u002Fsign-in","blocks\u002Fsign-in",{"title":598,"path":599,"stem":600,"order":35,"icon":9,"collapse":10,"navBadges":9},"Dashboard overview","\u002Fblocks\u002Fdashboard-overview","blocks\u002Fdashboard-overview",{"title":602,"path":603,"stem":604,"order":40,"icon":9,"collapse":10,"navBadges":9},"Profile settings","\u002Fblocks\u002Fprofile-settings","blocks\u002Fprofile-settings",{"title":606,"path":607,"stem":608,"order":45,"icon":9,"collapse":10,"navBadges":9},"Data management","\u002Fblocks\u002Fdata-management","blocks\u002Fdata-management",{"title":610,"order":50,"icon":9,"collapse":10,"navBadges":9,"path":611,"stem":612,"children":613,"page":10},"Editors","\u002Fblocks\u002Feditors","blocks\u002Feditors",[614,618,622],{"title":615,"path":616,"stem":617,"order":13,"icon":9,"collapse":10,"navBadges":9},"Tiptap editor","\u002Fblocks\u002Feditors\u002Ftiptap","blocks\u002Feditors\u002Ftiptap",{"title":619,"path":620,"stem":621,"order":30,"icon":9,"collapse":10,"navBadges":9},"Lexical editor","\u002Fblocks\u002Feditors\u002Flexical","blocks\u002Feditors\u002Flexical",{"title":623,"path":624,"stem":625,"order":35,"icon":9,"collapse":10,"navBadges":9},"Quill editor","\u002Fblocks\u002Feditors\u002Fquill","blocks\u002Feditors\u002Fquill",{"title":627,"order":40,"icon":9,"collapse":10,"navBadges":9,"path":628,"stem":629,"children":630,"page":10},"Utilities","\u002Futilities","utilities",[631,665],{"title":632,"path":633,"stem":634,"children":635,"page":10},"Composables","\u002Futilities\u002Fcomposables","utilities\u002Fcomposables",[636,640,644,649,653,657,661],{"title":637,"path":638,"stem":639,"order":13,"icon":9,"collapse":10,"navBadges":9},"useModal","\u002Futilities\u002Fcomposables\u002Fuse-modal","utilities\u002Fcomposables\u002Fuse-modal",{"title":641,"path":642,"stem":643,"order":170,"icon":9,"collapse":10,"navBadges":9},"useConfirm","\u002Futilities\u002Fcomposables\u002Fuse-confirm","utilities\u002Fcomposables\u002Fuse-confirm",{"title":645,"path":646,"stem":647,"order":648,"icon":9,"collapse":10,"navBadges":9},"useDrawer","\u002Futilities\u002Fcomposables\u002Fuse-drawer","utilities\u002Fcomposables\u002Fuse-drawer",15,{"title":650,"path":651,"stem":652,"order":30,"icon":9,"collapse":10,"navBadges":9},"useSlideover","\u002Futilities\u002Fcomposables\u002Fuse-slideover","utilities\u002Fcomposables\u002Fuse-slideover",{"title":654,"path":655,"stem":656,"order":35,"icon":9,"collapse":10,"navBadges":9},"useIcons","\u002Futilities\u002Fcomposables\u002Fuse-icons","utilities\u002Fcomposables\u002Fuse-icons",{"title":658,"path":659,"stem":660,"order":40,"icon":9,"collapse":10,"navBadges":9},"useMessages","\u002Futilities\u002Fcomposables\u002Fuse-messages","utilities\u002Fcomposables\u002Fuse-messages",{"title":662,"path":663,"stem":664,"order":45,"icon":9,"collapse":10,"navBadges":9},"useLocale","\u002Futilities\u002Fcomposables\u002Fuse-locale","utilities\u002Fcomposables\u002Fuse-locale",{"title":666,"path":667,"stem":668,"children":669,"page":10},"Directives","\u002Futilities\u002Fdirectives","utilities\u002Fdirectives",[670,674,678],{"title":671,"path":672,"stem":673,"order":13,"icon":9,"collapse":10,"navBadges":9},"v-ripple","\u002Futilities\u002Fdirectives\u002Fripple","utilities\u002Fdirectives\u002Fripple",{"title":675,"path":676,"stem":677,"order":648,"icon":9,"collapse":10,"navBadges":9},"v-hotkey","\u002Futilities\u002Fdirectives\u002Fhotkey","utilities\u002Fdirectives\u002Fhotkey",{"title":679,"path":680,"stem":681,"order":30,"icon":9,"collapse":10,"navBadges":9},"v-mask","\u002Futilities\u002Fdirectives\u002Fmask","utilities\u002Fdirectives\u002Fmask",{"byLocale":683,"defaultPath":84},{"en":684,"id":2654},{"id":685,"title":83,"aside":686,"body":687,"collapse":10,"description":2649,"editLink":686,"extension":2650,"icon":9,"issueLink":686,"meta":2651,"navBadges":9,"navigation":9,"order":35,"path":84,"prevNext":686,"seo":2652,"stem":85,"toc":686,"__hash__":2653},"docs\u002Foverview\u002Ftheming\u002Fcolor-roles.md",true,{"type":688,"value":689,"toc":2636},"minimark",[690,695,699,739,742,839,842,851,855,858,915,918,921,925,928,931,1480,1483,1486,1490,1493,1501,1507,1631,1637,1666,1669,1740,1745,1748,1755,1759,1762,1773,1791,1794,2033,2036,2078,2081,2108,2111,2115,2118,2311,2317,2320,2348,2351,2396,2401,2408,2413,2416,2490,2501,2507,2510,2513,2562,2566,2569,2575,2626,2632],[691,692,694],"h3",{"id":693},"built-in-component-color-roles","Built-in component color roles",[696,697,698],"p",{},"Selaras supplies these roles:",[700,701,702,709,714,719,724,729,734],"ul",{},[703,704,705],"li",{},[706,707,708],"code",{},"primary",[703,710,711],{},[706,712,713],{},"secondary",[703,715,716],{},[706,717,718],{},"success",[703,720,721],{},[706,722,723],{},"info",[703,725,726],{},[706,727,728],{},"warning",[703,730,731],{},[706,732,733],{},"danger",[703,735,736],{},[706,737,738],{},"neutral",[696,740,741],{},"The default theme maps these roles to foundation palettes:",[743,744,745,758],"table",{},[746,747,748],"thead",{},[749,750,751,755],"tr",{},[752,753,754],"th",{},"Role",[752,756,757],{},"Default foundation",[759,760,761,773,784,795,806,817,828],"tbody",{},[749,762,763,768],{},[764,765,766],"td",{},[706,767,708],{},[764,769,770],{},[706,771,772],{},"indigo",[749,774,775,779],{},[764,776,777],{},[706,778,713],{},[764,780,781],{},[706,782,783],{},"plum",[749,785,786,790],{},[764,787,788],{},[706,789,718],{},[764,791,792],{},[706,793,794],{},"green",[749,796,797,801],{},[764,798,799],{},[706,800,723],{},[764,802,803],{},[706,804,805],{},"blue",[749,807,808,812],{},[764,809,810],{},[706,811,728],{},[764,813,814],{},[706,815,816],{},"yellow",[749,818,819,823],{},[764,820,821],{},[706,822,733],{},[764,824,825],{},[706,826,827],{},"red",[749,829,830,834],{},[764,831,832],{},[706,833,738],{},[764,835,836],{},[706,837,838],{},"gray",[696,840,841],{},"The role name is the meaning. The foundation name is the hue family.",[696,843,844,845,847,848,850],{},"For example, the default ",[706,846,728],{}," recipe reads the Selaras yellow palette.\nThe default ",[706,849,733],{}," recipe reads the Selaras red palette.",[691,852,854],{"id":853},"change-one-exact-role-value","Change one exact role value",[696,856,857],{},"You can override a public role input directly:",[859,860,865],"pre",{"className":861,"code":862,"language":863,"meta":864,"style":864},"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","",[706,866,867,879,896,909],{"__ignoreMap":864},[868,869,871,875],"span",{"class":870,"line":8},"line",[868,872,874],{"class":873},"sScJk",":root",[868,876,878],{"class":877},"sVt8B"," {\n",[868,880,882,886,889,893],{"class":870,"line":881},2,[868,883,885],{"class":884},"s4XuR","  --selaras-color-warning-fill",[868,887,888],{"class":877},": ",[868,890,892],{"class":891},"sj4cs","#ffff00",[868,894,895],{"class":877},";\n",[868,897,899,902,904,907],{"class":870,"line":898},3,[868,900,901],{"class":884},"  --selaras-color-warning-on-fill",[868,903,888],{"class":877},[868,905,906],{"class":891},"#000000",[868,908,895],{"class":877},[868,910,912],{"class":870,"line":911},4,[868,913,914],{"class":877},"}\n",[696,916,917],{},"Selaras uses the exact CSS value that you provide. It does not change it.",[696,919,920],{},"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.",[691,922,924],{"id":923},"build-one-role-from-one-css-color","Build one role from one CSS color",[696,926,927],{},"You do not need a TypeScript helper when you want to start from one CSS color.",[696,929,930],{},"You can keep the base color exact and derive the other values with CSS:",[859,932,934],{"className":861,"code":933,"language":863,"meta":864,"style":864},":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",[706,935,936,942,954,959,967,982,987,995,1034,1039,1046,1075,1079,1087,1095,1099,1107,1137,1142,1150,1183,1187,1194,1225,1229,1236,1267,1271,1278,1307,1311,1318,1348,1353,1361,1390,1395,1403,1432,1436,1443,1453,1458,1466,1476],{"__ignoreMap":864},[868,937,938,940],{"class":870,"line":8},[868,939,874],{"class":873},[868,941,878],{"class":877},[868,943,944,947,949,952],{"class":870,"line":881},[868,945,946],{"class":884},"  --brand",[868,948,888],{"class":877},[868,950,951],{"class":891},"#fd5e53",[868,953,895],{"class":877},[868,955,956],{"class":870,"line":898},[868,957,958],{"emptyLinePlaceholder":686},"\n",[868,960,961,964],{"class":870,"line":911},[868,962,963],{"class":884},"  --selaras-color-primary-fill",[868,965,966],{"class":877},":\n",[868,968,970,973,976,979],{"class":870,"line":969},5,[868,971,972],{"class":891},"    var",[868,974,975],{"class":877},"(",[868,977,978],{"class":884},"--brand",[868,980,981],{"class":877},");\n",[868,983,985],{"class":870,"line":984},6,[868,986,958],{"emptyLinePlaceholder":686},[868,988,990,993],{"class":870,"line":989},7,[868,991,992],{"class":884},"  --selaras-color-primary-fill-hover",[868,994,966],{"class":877},[868,996,998,1001,1003,1006,1009,1012,1015,1017,1019,1022,1025,1028,1032],{"class":870,"line":997},8,[868,999,1000],{"class":891},"    color-mix",[868,1002,975],{"class":877},[868,1004,1005],{"class":884},"in",[868,1007,1008],{"class":884}," oklch",[868,1010,1011],{"class":877},", ",[868,1013,1014],{"class":891},"var",[868,1016,975],{"class":877},[868,1018,978],{"class":884},[868,1020,1021],{"class":877},"), ",[868,1023,1024],{"class":891},"black",[868,1026,1027],{"class":891}," 8",[868,1029,1031],{"class":1030},"szBVR","%",[868,1033,981],{"class":877},[868,1035,1037],{"class":870,"line":1036},9,[868,1038,958],{"emptyLinePlaceholder":686},[868,1040,1041,1044],{"class":870,"line":13},[868,1042,1043],{"class":884},"  --selaras-color-primary-fill-pressed",[868,1045,966],{"class":877},[868,1047,1048,1050,1052,1054,1056,1058,1060,1062,1064,1066,1068,1071,1073],{"class":870,"line":151},[868,1049,1000],{"class":891},[868,1051,975],{"class":877},[868,1053,1005],{"class":884},[868,1055,1008],{"class":884},[868,1057,1011],{"class":877},[868,1059,1014],{"class":891},[868,1061,975],{"class":877},[868,1063,978],{"class":884},[868,1065,1021],{"class":877},[868,1067,1024],{"class":891},[868,1069,1070],{"class":891}," 15",[868,1072,1031],{"class":1030},[868,1074,981],{"class":877},[868,1076,1077],{"class":870,"line":170},[868,1078,958],{"emptyLinePlaceholder":686},[868,1080,1082,1085],{"class":870,"line":1081},13,[868,1083,1084],{"class":884},"  --selaras-color-primary-on-fill",[868,1086,966],{"class":877},[868,1088,1090,1093],{"class":870,"line":1089},14,[868,1091,1092],{"class":891},"    white",[868,1094,895],{"class":877},[868,1096,1097],{"class":870,"line":648},[868,1098,958],{"emptyLinePlaceholder":686},[868,1100,1102,1105],{"class":870,"line":1101},16,[868,1103,1104],{"class":884},"  --selaras-color-primary-indicator",[868,1106,966],{"class":877},[868,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1130,1133,1135],{"class":870,"line":1109},17,[868,1111,1000],{"class":891},[868,1113,975],{"class":877},[868,1115,1005],{"class":884},[868,1117,1008],{"class":884},[868,1119,1011],{"class":877},[868,1121,1014],{"class":891},[868,1123,975],{"class":877},[868,1125,978],{"class":884},[868,1127,1021],{"class":877},[868,1129,1024],{"class":891},[868,1131,1132],{"class":891}," 18",[868,1134,1031],{"class":1030},[868,1136,981],{"class":877},[868,1138,1140],{"class":870,"line":1139},18,[868,1141,958],{"emptyLinePlaceholder":686},[868,1143,1145,1148],{"class":870,"line":1144},19,[868,1146,1147],{"class":884},"  --selaras-color-primary-subtle",[868,1149,966],{"class":877},[868,1151,1152,1154,1156,1158,1160,1162,1164,1166,1168,1171,1174,1176,1178,1181],{"class":870,"line":30},[868,1153,1000],{"class":891},[868,1155,975],{"class":877},[868,1157,1005],{"class":884},[868,1159,1008],{"class":884},[868,1161,1011],{"class":877},[868,1163,1014],{"class":891},[868,1165,975],{"class":877},[868,1167,978],{"class":884},[868,1169,1170],{"class":877},") ",[868,1172,1173],{"class":891},"12",[868,1175,1031],{"class":1030},[868,1177,1011],{"class":877},[868,1179,1180],{"class":891},"transparent",[868,1182,981],{"class":877},[868,1184,1185],{"class":870,"line":247},[868,1186,958],{"emptyLinePlaceholder":686},[868,1188,1189,1192],{"class":870,"line":257},[868,1190,1191],{"class":884},"  --selaras-color-primary-subtle-hover",[868,1193,966],{"class":877},[868,1195,1196,1198,1200,1202,1204,1206,1208,1210,1212,1214,1217,1219,1221,1223],{"class":870,"line":272},[868,1197,1000],{"class":891},[868,1199,975],{"class":877},[868,1201,1005],{"class":884},[868,1203,1008],{"class":884},[868,1205,1011],{"class":877},[868,1207,1014],{"class":891},[868,1209,975],{"class":877},[868,1211,978],{"class":884},[868,1213,1170],{"class":877},[868,1215,1216],{"class":891},"18",[868,1218,1031],{"class":1030},[868,1220,1011],{"class":877},[868,1222,1180],{"class":891},[868,1224,981],{"class":877},[868,1226,1227],{"class":870,"line":287},[868,1228,958],{"emptyLinePlaceholder":686},[868,1230,1231,1234],{"class":870,"line":292},[868,1232,1233],{"class":884},"  --selaras-color-primary-subtle-pressed",[868,1235,966],{"class":877},[868,1237,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1259,1261,1263,1265],{"class":870,"line":302},[868,1239,1000],{"class":891},[868,1241,975],{"class":877},[868,1243,1005],{"class":884},[868,1245,1008],{"class":884},[868,1247,1011],{"class":877},[868,1249,1014],{"class":891},[868,1251,975],{"class":877},[868,1253,978],{"class":884},[868,1255,1170],{"class":877},[868,1257,1258],{"class":891},"24",[868,1260,1031],{"class":1030},[868,1262,1011],{"class":877},[868,1264,1180],{"class":891},[868,1266,981],{"class":877},[868,1268,1269],{"class":870,"line":307},[868,1270,958],{"emptyLinePlaceholder":686},[868,1272,1273,1276],{"class":870,"line":312},[868,1274,1275],{"class":884},"  --selaras-color-primary-on-subtle",[868,1277,966],{"class":877},[868,1279,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1303,1305],{"class":870,"line":326},[868,1281,1000],{"class":891},[868,1283,975],{"class":877},[868,1285,1005],{"class":884},[868,1287,1008],{"class":884},[868,1289,1011],{"class":877},[868,1291,1014],{"class":891},[868,1293,975],{"class":877},[868,1295,978],{"class":884},[868,1297,1021],{"class":877},[868,1299,1024],{"class":891},[868,1301,1302],{"class":891}," 35",[868,1304,1031],{"class":1030},[868,1306,981],{"class":877},[868,1308,1309],{"class":870,"line":35},[868,1310,958],{"emptyLinePlaceholder":686},[868,1312,1313,1316],{"class":870,"line":335},[868,1314,1315],{"class":884},"  --selaras-color-primary-text",[868,1317,966],{"class":877},[868,1319,1321,1323,1325,1327,1329,1331,1333,1335,1337,1339,1341,1344,1346],{"class":870,"line":1320},32,[868,1322,1000],{"class":891},[868,1324,975],{"class":877},[868,1326,1005],{"class":884},[868,1328,1008],{"class":884},[868,1330,1011],{"class":877},[868,1332,1014],{"class":891},[868,1334,975],{"class":877},[868,1336,978],{"class":884},[868,1338,1021],{"class":877},[868,1340,1024],{"class":891},[868,1342,1343],{"class":891}," 20",[868,1345,1031],{"class":1030},[868,1347,981],{"class":877},[868,1349,1351],{"class":870,"line":1350},33,[868,1352,958],{"emptyLinePlaceholder":686},[868,1354,1356,1359],{"class":870,"line":1355},34,[868,1357,1358],{"class":884},"  --selaras-color-primary-text-hover",[868,1360,966],{"class":877},[868,1362,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1386,1388],{"class":870,"line":586},[868,1364,1000],{"class":891},[868,1366,975],{"class":877},[868,1368,1005],{"class":884},[868,1370,1008],{"class":884},[868,1372,1011],{"class":877},[868,1374,1014],{"class":891},[868,1376,975],{"class":877},[868,1378,978],{"class":884},[868,1380,1021],{"class":877},[868,1382,1024],{"class":891},[868,1384,1385],{"class":891}," 28",[868,1387,1031],{"class":1030},[868,1389,981],{"class":877},[868,1391,1393],{"class":870,"line":1392},36,[868,1394,958],{"emptyLinePlaceholder":686},[868,1396,1398,1401],{"class":870,"line":1397},37,[868,1399,1400],{"class":884},"  --selaras-color-primary-text-pressed",[868,1402,966],{"class":877},[868,1404,1406,1408,1410,1412,1414,1416,1418,1420,1422,1424,1426,1428,1430],{"class":870,"line":1405},38,[868,1407,1000],{"class":891},[868,1409,975],{"class":877},[868,1411,1005],{"class":884},[868,1413,1008],{"class":884},[868,1415,1011],{"class":877},[868,1417,1014],{"class":891},[868,1419,975],{"class":877},[868,1421,978],{"class":884},[868,1423,1021],{"class":877},[868,1425,1024],{"class":891},[868,1427,1302],{"class":891},[868,1429,1031],{"class":1030},[868,1431,981],{"class":877},[868,1433,1434],{"class":870,"line":345},[868,1435,958],{"emptyLinePlaceholder":686},[868,1437,1438,1441],{"class":870,"line":40},[868,1439,1440],{"class":884},"  --selaras-color-primary-border",[868,1442,966],{"class":877},[868,1444,1445,1447,1449,1451],{"class":870,"line":359},[868,1446,972],{"class":891},[868,1448,975],{"class":877},[868,1450,978],{"class":884},[868,1452,981],{"class":877},[868,1454,1456],{"class":870,"line":1455},42,[868,1457,958],{"emptyLinePlaceholder":686},[868,1459,1461,1464],{"class":870,"line":1460},43,[868,1462,1463],{"class":884},"  --selaras-color-primary-focus",[868,1465,966],{"class":877},[868,1467,1468,1470,1472,1474],{"class":870,"line":374},[868,1469,972],{"class":891},[868,1471,975],{"class":877},[868,1473,978],{"class":884},[868,1475,981],{"class":877},[868,1477,1478],{"class":870,"line":379},[868,1479,914],{"class":877},[696,1481,1482],{},"This is only one possible recipe. You own the color choices.",[696,1484,1485],{},"Test the result in the components and contexts that your application uses.\nSelaras does not change CSS values that you author.",[691,1487,1489],{"id":1488},"complete-role-recipe","Complete role recipe",[696,1491,1492],{},"A color role has these public inputs:",[859,1494,1499],{"className":1495,"code":1497,"language":1498,"meta":864},[1496],"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",[706,1500,1497],{"__ignoreMap":864},[696,1502,1503,1504,1506],{},"For ",[706,1505,728],{},", the full CSS names are:",[859,1508,1510],{"className":861,"code":1509,"language":863,"meta":864,"style":864},":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",[706,1511,1512,1518,1525,1532,1539,1545,1552,1556,1563,1570,1577,1584,1588,1595,1602,1609,1613,1620,1627],{"__ignoreMap":864},[868,1513,1514,1516],{"class":870,"line":8},[868,1515,874],{"class":873},[868,1517,878],{"class":877},[868,1519,1520,1522],{"class":870,"line":881},[868,1521,885],{"class":884},[868,1523,1524],{"class":877},": ...;\n",[868,1526,1527,1530],{"class":870,"line":898},[868,1528,1529],{"class":884},"  --selaras-color-warning-fill-hover",[868,1531,1524],{"class":877},[868,1533,1534,1537],{"class":870,"line":911},[868,1535,1536],{"class":884},"  --selaras-color-warning-fill-pressed",[868,1538,1524],{"class":877},[868,1540,1541,1543],{"class":870,"line":969},[868,1542,901],{"class":884},[868,1544,1524],{"class":877},[868,1546,1547,1550],{"class":870,"line":984},[868,1548,1549],{"class":884},"  --selaras-color-warning-indicator",[868,1551,1524],{"class":877},[868,1553,1554],{"class":870,"line":989},[868,1555,958],{"emptyLinePlaceholder":686},[868,1557,1558,1561],{"class":870,"line":997},[868,1559,1560],{"class":884},"  --selaras-color-warning-subtle",[868,1562,1524],{"class":877},[868,1564,1565,1568],{"class":870,"line":1036},[868,1566,1567],{"class":884},"  --selaras-color-warning-subtle-hover",[868,1569,1524],{"class":877},[868,1571,1572,1575],{"class":870,"line":13},[868,1573,1574],{"class":884},"  --selaras-color-warning-subtle-pressed",[868,1576,1524],{"class":877},[868,1578,1579,1582],{"class":870,"line":151},[868,1580,1581],{"class":884},"  --selaras-color-warning-on-subtle",[868,1583,1524],{"class":877},[868,1585,1586],{"class":870,"line":170},[868,1587,958],{"emptyLinePlaceholder":686},[868,1589,1590,1593],{"class":870,"line":1081},[868,1591,1592],{"class":884},"  --selaras-color-warning-text",[868,1594,1524],{"class":877},[868,1596,1597,1600],{"class":870,"line":1089},[868,1598,1599],{"class":884},"  --selaras-color-warning-text-hover",[868,1601,1524],{"class":877},[868,1603,1604,1607],{"class":870,"line":648},[868,1605,1606],{"class":884},"  --selaras-color-warning-text-pressed",[868,1608,1524],{"class":877},[868,1610,1611],{"class":870,"line":1101},[868,1612,958],{"emptyLinePlaceholder":686},[868,1614,1615,1618],{"class":870,"line":1109},[868,1616,1617],{"class":884},"  --selaras-color-warning-border",[868,1619,1524],{"class":877},[868,1621,1622,1625],{"class":870,"line":1139},[868,1623,1624],{"class":884},"  --selaras-color-warning-focus",[868,1626,1524],{"class":877},[868,1628,1629],{"class":870,"line":1144},[868,1630,914],{"class":877},[696,1632,1633,1634,1636],{},"Replace ",[706,1635,728],{}," with any registered role name.",[696,1638,1639,1640,1011,1643,1011,1646,1649,1650,1653,1654,1657,1658,1661,1662,1665],{},"The component variant selects the leaves that it needs. For example, a solid\nButton uses ",[706,1641,1642],{},"fill",[706,1644,1645],{},"on-fill",[706,1647,1648],{},"fill-hover",", and ",[706,1651,1652],{},"fill-pressed",". A soft Button\nuses the ",[706,1655,1656],{},"subtle"," leaves. Essential unpaired graphics, such as progress and\nradio indicators, use ",[706,1659,1660],{},"indicator",". When it is omitted, it follows ",[706,1663,1664],{},"border",".",[696,1667,1668],{},"You can also supply different values for dark mode:",[859,1670,1672],{"className":861,"code":1671,"language":863,"meta":864,"style":864},":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",[706,1673,1674,1680,1690,1700,1704,1708,1715,1726,1736],{"__ignoreMap":864},[868,1675,1676,1678],{"class":870,"line":8},[868,1677,874],{"class":873},[868,1679,878],{"class":877},[868,1681,1682,1684,1686,1688],{"class":870,"line":881},[868,1683,885],{"class":884},[868,1685,888],{"class":877},[868,1687,892],{"class":891},[868,1689,895],{"class":877},[868,1691,1692,1694,1696,1698],{"class":870,"line":898},[868,1693,901],{"class":884},[868,1695,888],{"class":877},[868,1697,906],{"class":891},[868,1699,895],{"class":877},[868,1701,1702],{"class":870,"line":911},[868,1703,914],{"class":877},[868,1705,1706],{"class":870,"line":969},[868,1707,958],{"emptyLinePlaceholder":686},[868,1709,1710,1713],{"class":870,"line":984},[868,1711,1712],{"class":873},":root.dark",[868,1714,878],{"class":877},[868,1716,1717,1719,1721,1724],{"class":870,"line":989},[868,1718,885],{"class":884},[868,1720,888],{"class":877},[868,1722,1723],{"class":891},"#eaea00",[868,1725,895],{"class":877},[868,1727,1728,1730,1732,1734],{"class":870,"line":997},[868,1729,901],{"class":884},[868,1731,888],{"class":877},[868,1733,906],{"class":891},[868,1735,895],{"class":877},[868,1737,1738],{"class":870,"line":1036},[868,1739,914],{"class":877},[1741,1742,1744],"h2",{"id":1743},"nuxt-configuration-and-theme-helpers","Nuxt configuration and theme helpers",[696,1746,1747],{},"Use CSS first.",[696,1749,1750,1751,1754],{},"Use ",[706,1752,1753],{},"nuxt.config.ts"," when Selaras needs build-time information. The most common\ncolor case is a new role name.",[691,1756,1758],{"id":1757},"add-a-new-role","Add a new role",[696,1760,1761],{},"Built-in role names already work without theme configuration.",[696,1763,1764,1765,1768,1769,1772],{},"A new role such as ",[706,1766,1767],{},"tertiary"," or ",[706,1770,1771],{},"premium"," must be registered at build time so\nSelaras can:",[700,1774,1775,1778,1784],{},[703,1776,1777],{},"generate its role bindings",[703,1779,1780,1781],{},"add it to ",[706,1782,1783],{},"ColorRole",[703,1785,1786,1787,1790],{},"make ",[706,1788,1789],{},"color=\"tertiary\""," type-safe",[696,1792,1793],{},"The current Nuxt API requires a light and dark recipe:",[859,1795,1799],{"className":1796,"code":1797,"language":1798,"meta":864,"style":864},"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",[706,1800,1801,1816,1820,1834,1845,1849,1854,1859,1864,1874,1879,1890,1900,1910,1920,1930,1940,1945,1950,1959,1968,1977,1986,1995,2004,2008,2013,2018,2023,2028],{"__ignoreMap":864},[868,1802,1803,1806,1809,1812],{"class":870,"line":8},[868,1804,1805],{"class":1030},"import",[868,1807,1808],{"class":877}," { defineColor } ",[868,1810,1811],{"class":1030},"from",[868,1813,1815],{"class":1814},"sZZnC"," '@sewadah\u002Fselaras\u002Ftheme'\n",[868,1817,1818],{"class":870,"line":881},[868,1819,958],{"emptyLinePlaceholder":686},[868,1821,1822,1825,1828,1831],{"class":870,"line":898},[868,1823,1824],{"class":1030},"export",[868,1826,1827],{"class":1030}," default",[868,1829,1830],{"class":873}," defineNuxtConfig",[868,1832,1833],{"class":877},"({\n",[868,1835,1836,1839,1842],{"class":870,"line":911},[868,1837,1838],{"class":877},"  modules: [",[868,1840,1841],{"class":1814},"'@sewadah\u002Fselaras'",[868,1843,1844],{"class":877},"],\n",[868,1846,1847],{"class":870,"line":969},[868,1848,958],{"emptyLinePlaceholder":686},[868,1850,1851],{"class":870,"line":984},[868,1852,1853],{"class":877},"  selaras: {\n",[868,1855,1856],{"class":870,"line":989},[868,1857,1858],{"class":877},"    theme: {\n",[868,1860,1861],{"class":870,"line":997},[868,1862,1863],{"class":877},"      colors: {\n",[868,1865,1866,1869,1872],{"class":870,"line":1036},[868,1867,1868],{"class":877},"        tertiary: ",[868,1870,1871],{"class":873},"defineColor",[868,1873,1833],{"class":877},[868,1875,1876],{"class":870,"line":13},[868,1877,1878],{"class":877},"          light: {\n",[868,1880,1881,1884,1887],{"class":870,"line":151},[868,1882,1883],{"class":877},"            fill: ",[868,1885,1886],{"class":1814},"'var(--company-tertiary-fill)'",[868,1888,1889],{"class":877},",\n",[868,1891,1892,1895,1898],{"class":870,"line":170},[868,1893,1894],{"class":877},"            onFill: ",[868,1896,1897],{"class":1814},"'var(--company-tertiary-on-fill)'",[868,1899,1889],{"class":877},[868,1901,1902,1905,1908],{"class":870,"line":1081},[868,1903,1904],{"class":877},"            subtle: ",[868,1906,1907],{"class":1814},"'var(--company-tertiary-subtle)'",[868,1909,1889],{"class":877},[868,1911,1912,1915,1918],{"class":870,"line":1089},[868,1913,1914],{"class":877},"            onSubtle: ",[868,1916,1917],{"class":1814},"'var(--company-tertiary-on-subtle)'",[868,1919,1889],{"class":877},[868,1921,1922,1925,1928],{"class":870,"line":648},[868,1923,1924],{"class":877},"            text: ",[868,1926,1927],{"class":1814},"'var(--company-tertiary-text)'",[868,1929,1889],{"class":877},[868,1931,1932,1935,1938],{"class":870,"line":1101},[868,1933,1934],{"class":877},"            border: ",[868,1936,1937],{"class":1814},"'var(--company-tertiary-border)'",[868,1939,1889],{"class":877},[868,1941,1942],{"class":870,"line":1109},[868,1943,1944],{"class":877},"          },\n",[868,1946,1947],{"class":870,"line":1139},[868,1948,1949],{"class":877},"          dark: {\n",[868,1951,1952,1954,1957],{"class":870,"line":1144},[868,1953,1883],{"class":877},[868,1955,1956],{"class":1814},"'var(--company-tertiary-fill-dark)'",[868,1958,1889],{"class":877},[868,1960,1961,1963,1966],{"class":870,"line":30},[868,1962,1894],{"class":877},[868,1964,1965],{"class":1814},"'var(--company-tertiary-on-fill-dark)'",[868,1967,1889],{"class":877},[868,1969,1970,1972,1975],{"class":870,"line":247},[868,1971,1904],{"class":877},[868,1973,1974],{"class":1814},"'var(--company-tertiary-subtle-dark)'",[868,1976,1889],{"class":877},[868,1978,1979,1981,1984],{"class":870,"line":257},[868,1980,1914],{"class":877},[868,1982,1983],{"class":1814},"'var(--company-tertiary-on-subtle-dark)'",[868,1985,1889],{"class":877},[868,1987,1988,1990,1993],{"class":870,"line":272},[868,1989,1924],{"class":877},[868,1991,1992],{"class":1814},"'var(--company-tertiary-text-dark)'",[868,1994,1889],{"class":877},[868,1996,1997,1999,2002],{"class":870,"line":287},[868,1998,1934],{"class":877},[868,2000,2001],{"class":1814},"'var(--company-tertiary-border-dark)'",[868,2003,1889],{"class":877},[868,2005,2006],{"class":870,"line":292},[868,2007,1944],{"class":877},[868,2009,2010],{"class":870,"line":302},[868,2011,2012],{"class":877},"        }),\n",[868,2014,2015],{"class":870,"line":307},[868,2016,2017],{"class":877},"      },\n",[868,2019,2020],{"class":870,"line":312},[868,2021,2022],{"class":877},"    },\n",[868,2024,2025],{"class":870,"line":326},[868,2026,2027],{"class":877},"  },\n",[868,2029,2030],{"class":870,"line":35},[868,2031,2032],{"class":877},"})\n",[696,2034,2035],{},"After registration, you can use:",[859,2037,2041],{"className":2038,"code":2039,"language":2040,"meta":864,"style":864},"language-vue-html shiki shiki-themes github-light github-dark","\u003CSButton color=\"tertiary\">\n  Tertiary\n\u003C\u002FSButton>\n","vue-html",[706,2042,2043,2064,2069],{"__ignoreMap":864},[868,2044,2045,2048,2052,2055,2058,2061],{"class":870,"line":8},[868,2046,2047],{"class":877},"\u003C",[868,2049,2051],{"class":2050},"s9eBZ","SButton",[868,2053,2054],{"class":873}," color",[868,2056,2057],{"class":877},"=",[868,2059,2060],{"class":1814},"\"tertiary\"",[868,2062,2063],{"class":877},">\n",[868,2065,2066],{"class":870,"line":881},[868,2067,2068],{"class":877},"  Tertiary\n",[868,2070,2071,2074,2076],{"class":870,"line":898},[868,2072,2073],{"class":877},"\u003C\u002F",[868,2075,2051],{"class":2050},[868,2077,2063],{"class":877},[696,2079,2080],{},"You can still override the registered role from CSS:",[859,2082,2084],{"className":861,"code":2083,"language":863,"meta":864,"style":864},":root {\n  --selaras-color-tertiary-fill: #8b5cf6;\n}\n",[706,2085,2086,2092,2104],{"__ignoreMap":864},[868,2087,2088,2090],{"class":870,"line":8},[868,2089,874],{"class":873},[868,2091,878],{"class":877},[868,2093,2094,2097,2099,2102],{"class":870,"line":881},[868,2095,2096],{"class":884},"  --selaras-color-tertiary-fill",[868,2098,888],{"class":877},[868,2100,2101],{"class":891},"#8b5cf6",[868,2103,895],{"class":877},[868,2105,2106],{"class":870,"line":898},[868,2107,914],{"class":877},[696,2109,2110],{},"The Nuxt configuration registers the role. CSS can still own its visual values.",[691,2112,2114],{"id":2113},"override-a-built-in-recipe-in-nuxt-config","Override a built-in recipe in Nuxt config",[696,2116,2117],{},"You can also replace a built-in recipe:",[859,2119,2121],{"className":1796,"code":2120,"language":1798,"meta":864,"style":864},"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",[706,2122,2123,2133,2137,2147,2151,2155,2159,2168,2172,2181,2190,2199,2208,2217,2226,2230,2234,2243,2251,2260,2269,2278,2287,2291,2295,2299,2303,2307],{"__ignoreMap":864},[868,2124,2125,2127,2129,2131],{"class":870,"line":8},[868,2126,1805],{"class":1030},[868,2128,1808],{"class":877},[868,2130,1811],{"class":1030},[868,2132,1815],{"class":1814},[868,2134,2135],{"class":870,"line":881},[868,2136,958],{"emptyLinePlaceholder":686},[868,2138,2139,2141,2143,2145],{"class":870,"line":898},[868,2140,1824],{"class":1030},[868,2142,1827],{"class":1030},[868,2144,1830],{"class":873},[868,2146,1833],{"class":877},[868,2148,2149],{"class":870,"line":911},[868,2150,1853],{"class":877},[868,2152,2153],{"class":870,"line":969},[868,2154,1858],{"class":877},[868,2156,2157],{"class":870,"line":984},[868,2158,1863],{"class":877},[868,2160,2161,2164,2166],{"class":870,"line":989},[868,2162,2163],{"class":877},"        warning: ",[868,2165,1871],{"class":873},[868,2167,1833],{"class":877},[868,2169,2170],{"class":870,"line":997},[868,2171,1878],{"class":877},[868,2173,2174,2176,2179],{"class":870,"line":1036},[868,2175,1883],{"class":877},[868,2177,2178],{"class":1814},"'#ffff00'",[868,2180,1889],{"class":877},[868,2182,2183,2185,2188],{"class":870,"line":13},[868,2184,1894],{"class":877},[868,2186,2187],{"class":1814},"'#000000'",[868,2189,1889],{"class":877},[868,2191,2192,2194,2197],{"class":870,"line":151},[868,2193,1904],{"class":877},[868,2195,2196],{"class":1814},"'#fffbd1'",[868,2198,1889],{"class":877},[868,2200,2201,2203,2206],{"class":870,"line":170},[868,2202,1914],{"class":877},[868,2204,2205],{"class":1814},"'#3d3d00'",[868,2207,1889],{"class":877},[868,2209,2210,2212,2215],{"class":870,"line":1081},[868,2211,1924],{"class":877},[868,2213,2214],{"class":1814},"'#6b6b00'",[868,2216,1889],{"class":877},[868,2218,2219,2221,2224],{"class":870,"line":1089},[868,2220,1934],{"class":877},[868,2222,2223],{"class":1814},"'#a3a300'",[868,2225,1889],{"class":877},[868,2227,2228],{"class":870,"line":648},[868,2229,1944],{"class":877},[868,2231,2232],{"class":870,"line":1101},[868,2233,1949],{"class":877},[868,2235,2236,2238,2241],{"class":870,"line":1109},[868,2237,1883],{"class":877},[868,2239,2240],{"class":1814},"'#eaea00'",[868,2242,1889],{"class":877},[868,2244,2245,2247,2249],{"class":870,"line":1139},[868,2246,1894],{"class":877},[868,2248,2187],{"class":1814},[868,2250,1889],{"class":877},[868,2252,2253,2255,2258],{"class":870,"line":1144},[868,2254,1904],{"class":877},[868,2256,2257],{"class":1814},"'#2a2a00'",[868,2259,1889],{"class":877},[868,2261,2262,2264,2267],{"class":870,"line":30},[868,2263,1914],{"class":877},[868,2265,2266],{"class":1814},"'#ffff99'",[868,2268,1889],{"class":877},[868,2270,2271,2273,2276],{"class":870,"line":247},[868,2272,1924],{"class":877},[868,2274,2275],{"class":1814},"'#ffff66'",[868,2277,1889],{"class":877},[868,2279,2280,2282,2285],{"class":870,"line":257},[868,2281,1934],{"class":877},[868,2283,2284],{"class":1814},"'#baba00'",[868,2286,1889],{"class":877},[868,2288,2289],{"class":870,"line":272},[868,2290,1944],{"class":877},[868,2292,2293],{"class":870,"line":287},[868,2294,2012],{"class":877},[868,2296,2297],{"class":870,"line":292},[868,2298,2017],{"class":877},[868,2300,2301],{"class":870,"line":302},[868,2302,2022],{"class":877},[868,2304,2305],{"class":870,"line":307},[868,2306,2027],{"class":877},[868,2308,2309],{"class":870,"line":312},[868,2310,2032],{"class":877},[696,2312,2313,2316],{},[706,2314,2315],{},"defineColor()"," validates the required recipe shape. It does not change the\nvalues that you provide.",[696,2318,2319],{},"The required leaves in each mode are:",[700,2321,2322,2326,2331,2335,2340,2344],{},[703,2323,2324],{},[706,2325,1642],{},[703,2327,2328],{},[706,2329,2330],{},"onFill",[703,2332,2333],{},[706,2334,1656],{},[703,2336,2337],{},[706,2338,2339],{},"onSubtle",[703,2341,2342],{},[706,2343,1498],{},[703,2345,2346],{},[706,2347,1664],{},[696,2349,2350],{},"These leaves are optional:",[700,2352,2353,2358,2363,2371,2376,2381,2386,2391],{},[703,2354,2355],{},[706,2356,2357],{},"fillHover",[703,2359,2360],{},[706,2361,2362],{},"fillPressed",[703,2364,2365,2367,2368,2370],{},[706,2366,1660],{}," (defaults to ",[706,2369,1664],{},")",[703,2372,2373],{},[706,2374,2375],{},"subtleHover",[703,2377,2378],{},[706,2379,2380],{},"subtlePressed",[703,2382,2383],{},[706,2384,2385],{},"textHover",[703,2387,2388],{},[706,2389,2390],{},"textPressed",[703,2392,2393],{},[706,2394,2395],{},"focus",[696,2397,2398,2399,1665],{},"If an optional interaction leaf is missing, Selaras links it to the nearest\ndefined state. It does not calculate a new hue for ",[706,2400,2315],{},[691,2402,2404,2405],{"id":2403},"optional-helper-definecolorfromseed","Optional helper: ",[706,2406,2407],{},"defineColorFromSeed()",[696,2409,2410,2412],{},[706,2411,2407],{}," is not the CSS-first theme path.",[696,2414,2415],{},"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.",[859,2417,2419],{"className":1796,"code":2418,"language":1798,"meta":864,"style":864},"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",[706,2420,2421,2432,2436,2446,2450,2454,2458,2474,2478,2482,2486],{"__ignoreMap":864},[868,2422,2423,2425,2428,2430],{"class":870,"line":8},[868,2424,1805],{"class":1030},[868,2426,2427],{"class":877}," { defineColorFromSeed } ",[868,2429,1811],{"class":1030},[868,2431,1815],{"class":1814},[868,2433,2434],{"class":870,"line":881},[868,2435,958],{"emptyLinePlaceholder":686},[868,2437,2438,2440,2442,2444],{"class":870,"line":898},[868,2439,1824],{"class":1030},[868,2441,1827],{"class":1030},[868,2443,1830],{"class":873},[868,2445,1833],{"class":877},[868,2447,2448],{"class":870,"line":911},[868,2449,1853],{"class":877},[868,2451,2452],{"class":870,"line":969},[868,2453,1858],{"class":877},[868,2455,2456],{"class":870,"line":984},[868,2457,1863],{"class":877},[868,2459,2460,2463,2466,2468,2471],{"class":870,"line":989},[868,2461,2462],{"class":877},"        coral: ",[868,2464,2465],{"class":873},"defineColorFromSeed",[868,2467,975],{"class":877},[868,2469,2470],{"class":1814},"'#FD5E53'",[868,2472,2473],{"class":877},"),\n",[868,2475,2476],{"class":870,"line":997},[868,2477,2017],{"class":877},[868,2479,2480],{"class":870,"line":1036},[868,2481,2022],{"class":877},[868,2483,2484],{"class":870,"line":13},[868,2485,2027],{"class":877},[868,2487,2488],{"class":870,"line":151},[868,2489,2032],{"class":877},[696,2491,2492,2493,2495,2496,2498,2499,1665],{},"The light and dark resting ",[706,2494,1642],{}," values remain exactly the six-digit color\nthat you pass. Selaras chooses black or white ",[706,2497,2330],{},", 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 ",[706,2500,2315],{},[696,2502,2503,2504,2506],{},"Use CSS or ",[706,2505,2315],{}," when you need exact control over every state.",[696,2508,2509],{},"The helper currently accepts only opaque six-digit sRGB hex values. It cannot\nevaluate CSS variables, transparent colors, or arbitrary CSS expressions.",[696,2511,2512],{},"If you use custom surfaces, you can give the resolved light and dark surface\ncolors to the helper:",[859,2514,2516],{"className":1796,"code":2515,"language":1798,"meta":864,"style":864},"defineColorFromSeed('#FD5E53', {\n  surfaces: {\n    light: '#f4f0e8',\n    dark: '#20242a',\n  },\n})\n",[706,2517,2518,2529,2534,2544,2554,2558],{"__ignoreMap":864},[868,2519,2520,2522,2524,2526],{"class":870,"line":8},[868,2521,2465],{"class":873},[868,2523,975],{"class":877},[868,2525,2470],{"class":1814},[868,2527,2528],{"class":877},", {\n",[868,2530,2531],{"class":870,"line":881},[868,2532,2533],{"class":877},"  surfaces: {\n",[868,2535,2536,2539,2542],{"class":870,"line":898},[868,2537,2538],{"class":877},"    light: ",[868,2540,2541],{"class":1814},"'#f4f0e8'",[868,2543,1889],{"class":877},[868,2545,2546,2549,2552],{"class":870,"line":911},[868,2547,2548],{"class":877},"    dark: ",[868,2550,2551],{"class":1814},"'#20242a'",[868,2553,1889],{"class":877},[868,2555,2556],{"class":870,"line":969},[868,2557,2027],{"class":877},[868,2559,2560],{"class":870,"line":984},[868,2561,2032],{"class":877},[691,2563,2565],{"id":2564},"optional-helper-dtcg-resolved-colors","Optional helper: DTCG resolved colors",[696,2567,2568],{},"If your design-token pipeline uses DTCG, resolve aliases and modes in that\npipeline first.",[696,2570,2571,2574],{},[706,2572,2573],{},"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.",[859,2576,2578],{"className":1796,"code":2577,"language":1798,"meta":864,"style":864},"import { dtcgColorToCss } from '@sewadah\u002Fselaras\u002Ftheme'\n\nconst fill = dtcgColorToCss(tokens.brand.fill.$value, {\n  path: 'semantic.brand.fill.$value',\n})\n",[706,2579,2580,2591,2595,2612,2622],{"__ignoreMap":864},[868,2581,2582,2584,2587,2589],{"class":870,"line":8},[868,2583,1805],{"class":1030},[868,2585,2586],{"class":877}," { dtcgColorToCss } ",[868,2588,1811],{"class":1030},[868,2590,1815],{"class":1814},[868,2592,2593],{"class":870,"line":881},[868,2594,958],{"emptyLinePlaceholder":686},[868,2596,2597,2600,2603,2606,2609],{"class":870,"line":898},[868,2598,2599],{"class":1030},"const",[868,2601,2602],{"class":891}," fill",[868,2604,2605],{"class":1030}," =",[868,2607,2608],{"class":873}," dtcgColorToCss",[868,2610,2611],{"class":877},"(tokens.brand.fill.$value, {\n",[868,2613,2614,2617,2620],{"class":870,"line":911},[868,2615,2616],{"class":877},"  path: ",[868,2618,2619],{"class":1814},"'semantic.brand.fill.$value'",[868,2621,1889],{"class":877},[868,2623,2624],{"class":870,"line":969},[868,2625,2032],{"class":877},[696,2627,2628,2629,2631],{},"You can then use the result in ",[706,2630,2315],{}," or in your own generated CSS.",[2633,2634,2635],"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":864,"searchDepth":898,"depth":898,"links":2637},[2638,2639,2640,2641,2642],{"id":693,"depth":898,"text":694},{"id":853,"depth":898,"text":854},{"id":923,"depth":898,"text":924},{"id":1488,"depth":898,"text":1489},{"id":1743,"depth":881,"text":1744,"children":2643},[2644,2645,2646,2648],{"id":1757,"depth":898,"text":1758},{"id":2113,"depth":898,"text":2114},{"id":2403,"depth":898,"text":2647},"Optional helper: defineColorFromSeed()",{"id":2564,"depth":898,"text":2565},"Configure built-in and custom semantic colors.","md",{},{"title":83,"description":2649},"Jb8AL4eabjEo4W4e6T5yfANnyAj5BNBvzQyWdWMiayk",{"id":2655,"title":2656,"aside":686,"body":2657,"collapse":10,"description":4359,"editLink":686,"extension":2650,"icon":9,"issueLink":686,"meta":4360,"navBadges":9,"navigation":9,"order":35,"path":4361,"prevNext":686,"seo":4362,"stem":4363,"toc":686,"__hash__":4364},"docs\u002Fid\u002Foverview\u002Ftheming\u002Fcolor-roles.md","Role warna",{"type":688,"value":2658,"toc":4346},[2659,2663,2666,2696,2699,2782,2785,2794,2798,2801,2835,2838,2841,2845,2848,2851,3337,3340,3343,3347,3350,3355,3361,3471,3477,3498,3501,3569,3573,3576,3582,3586,3589,3598,3613,3616,3808,3811,3841,3844,3868,3871,3875,3878,4058,4063,4066,4092,4095,4132,4137,4143,4148,4151,4219,4230,4236,4239,4242,4284,4288,4291,4296,4338,4344],[691,2660,2662],{"id":2661},"role-warna-komponen-bawaan","Role warna komponen bawaan",[696,2664,2665],{},"Selaras menyediakan role ini:",[700,2667,2668,2672,2676,2680,2684,2688,2692],{},[703,2669,2670],{},[706,2671,708],{},[703,2673,2674],{},[706,2675,713],{},[703,2677,2678],{},[706,2679,718],{},[703,2681,2682],{},[706,2683,723],{},[703,2685,2686],{},[706,2687,728],{},[703,2689,2690],{},[706,2691,733],{},[703,2693,2694],{},[706,2695,738],{},[696,2697,2698],{},"Tema default memetakan role ini ke palet fondasi:",[743,2700,2701,2710],{},[746,2702,2703],{},[749,2704,2705,2707],{},[752,2706,754],{},[752,2708,2709],{},"Fondasi default",[759,2711,2712,2722,2732,2742,2752,2762,2772],{},[749,2713,2714,2718],{},[764,2715,2716],{},[706,2717,708],{},[764,2719,2720],{},[706,2721,772],{},[749,2723,2724,2728],{},[764,2725,2726],{},[706,2727,713],{},[764,2729,2730],{},[706,2731,783],{},[749,2733,2734,2738],{},[764,2735,2736],{},[706,2737,718],{},[764,2739,2740],{},[706,2741,794],{},[749,2743,2744,2748],{},[764,2745,2746],{},[706,2747,723],{},[764,2749,2750],{},[706,2751,805],{},[749,2753,2754,2758],{},[764,2755,2756],{},[706,2757,728],{},[764,2759,2760],{},[706,2761,816],{},[749,2763,2764,2768],{},[764,2765,2766],{},[706,2767,733],{},[764,2769,2770],{},[706,2771,827],{},[749,2773,2774,2778],{},[764,2775,2776],{},[706,2777,738],{},[764,2779,2780],{},[706,2781,838],{},[696,2783,2784],{},"Nama role adalah maknanya. Nama fondasi adalah keluarga rona.",[696,2786,2787,2788,2790,2791,2793],{},"Misalnya, resep ",[706,2789,728],{}," default membaca palet kuning Selaras.\nResep ",[706,2792,733],{}," default membaca palet merah Selaras.",[691,2795,2797],{"id":2796},"ubah-satu-nilai-role-secara-tepat","Ubah satu nilai role secara tepat",[696,2799,2800],{},"Anda dapat menimpa input publik role secara langsung:",[859,2802,2803],{"className":861,"code":862,"language":863,"meta":864,"style":864},[706,2804,2805,2811,2821,2831],{"__ignoreMap":864},[868,2806,2807,2809],{"class":870,"line":8},[868,2808,874],{"class":873},[868,2810,878],{"class":877},[868,2812,2813,2815,2817,2819],{"class":870,"line":881},[868,2814,885],{"class":884},[868,2816,888],{"class":877},[868,2818,892],{"class":891},[868,2820,895],{"class":877},[868,2822,2823,2825,2827,2829],{"class":870,"line":898},[868,2824,901],{"class":884},[868,2826,888],{"class":877},[868,2828,906],{"class":891},[868,2830,895],{"class":877},[868,2832,2833],{"class":870,"line":911},[868,2834,914],{"class":877},[696,2836,2837],{},"Selaras menggunakan nilai CSS persis seperti yang Anda berikan. Selaras tidak mengubahnya.",[696,2839,2840],{},"Contoh ini mengubah hanya dua leaf. Leaf warning lainnya tetap menggunakan defaultnya. Jika Anda ingin tema warning kustom yang konsisten, definisikan resep lengkap.",[691,2842,2844],{"id":2843},"bangun-satu-role-dari-satu-warna-css","Bangun satu role dari satu warna CSS",[696,2846,2847],{},"Anda tidak memerlukan helper TypeScript saat ingin memulai dari satu warna CSS.",[696,2849,2850],{},"Anda dapat mempertahankan warna dasar persis dan menurunkan nilai lainnya dengan CSS:",[859,2852,2853],{"className":861,"code":933,"language":863,"meta":864,"style":864},[706,2854,2855,2861,2871,2875,2881,2891,2895,2901,2929,2933,2939,2967,2971,2977,2983,2987,2993,3021,3025,3031,3061,3065,3071,3101,3105,3111,3141,3145,3151,3179,3183,3189,3217,3221,3227,3255,3259,3265,3293,3297,3303,3313,3317,3323,3333],{"__ignoreMap":864},[868,2856,2857,2859],{"class":870,"line":8},[868,2858,874],{"class":873},[868,2860,878],{"class":877},[868,2862,2863,2865,2867,2869],{"class":870,"line":881},[868,2864,946],{"class":884},[868,2866,888],{"class":877},[868,2868,951],{"class":891},[868,2870,895],{"class":877},[868,2872,2873],{"class":870,"line":898},[868,2874,958],{"emptyLinePlaceholder":686},[868,2876,2877,2879],{"class":870,"line":911},[868,2878,963],{"class":884},[868,2880,966],{"class":877},[868,2882,2883,2885,2887,2889],{"class":870,"line":969},[868,2884,972],{"class":891},[868,2886,975],{"class":877},[868,2888,978],{"class":884},[868,2890,981],{"class":877},[868,2892,2893],{"class":870,"line":984},[868,2894,958],{"emptyLinePlaceholder":686},[868,2896,2897,2899],{"class":870,"line":989},[868,2898,992],{"class":884},[868,2900,966],{"class":877},[868,2902,2903,2905,2907,2909,2911,2913,2915,2917,2919,2921,2923,2925,2927],{"class":870,"line":997},[868,2904,1000],{"class":891},[868,2906,975],{"class":877},[868,2908,1005],{"class":884},[868,2910,1008],{"class":884},[868,2912,1011],{"class":877},[868,2914,1014],{"class":891},[868,2916,975],{"class":877},[868,2918,978],{"class":884},[868,2920,1021],{"class":877},[868,2922,1024],{"class":891},[868,2924,1027],{"class":891},[868,2926,1031],{"class":1030},[868,2928,981],{"class":877},[868,2930,2931],{"class":870,"line":1036},[868,2932,958],{"emptyLinePlaceholder":686},[868,2934,2935,2937],{"class":870,"line":13},[868,2936,1043],{"class":884},[868,2938,966],{"class":877},[868,2940,2941,2943,2945,2947,2949,2951,2953,2955,2957,2959,2961,2963,2965],{"class":870,"line":151},[868,2942,1000],{"class":891},[868,2944,975],{"class":877},[868,2946,1005],{"class":884},[868,2948,1008],{"class":884},[868,2950,1011],{"class":877},[868,2952,1014],{"class":891},[868,2954,975],{"class":877},[868,2956,978],{"class":884},[868,2958,1021],{"class":877},[868,2960,1024],{"class":891},[868,2962,1070],{"class":891},[868,2964,1031],{"class":1030},[868,2966,981],{"class":877},[868,2968,2969],{"class":870,"line":170},[868,2970,958],{"emptyLinePlaceholder":686},[868,2972,2973,2975],{"class":870,"line":1081},[868,2974,1084],{"class":884},[868,2976,966],{"class":877},[868,2978,2979,2981],{"class":870,"line":1089},[868,2980,1092],{"class":891},[868,2982,895],{"class":877},[868,2984,2985],{"class":870,"line":648},[868,2986,958],{"emptyLinePlaceholder":686},[868,2988,2989,2991],{"class":870,"line":1101},[868,2990,1104],{"class":884},[868,2992,966],{"class":877},[868,2994,2995,2997,2999,3001,3003,3005,3007,3009,3011,3013,3015,3017,3019],{"class":870,"line":1109},[868,2996,1000],{"class":891},[868,2998,975],{"class":877},[868,3000,1005],{"class":884},[868,3002,1008],{"class":884},[868,3004,1011],{"class":877},[868,3006,1014],{"class":891},[868,3008,975],{"class":877},[868,3010,978],{"class":884},[868,3012,1021],{"class":877},[868,3014,1024],{"class":891},[868,3016,1132],{"class":891},[868,3018,1031],{"class":1030},[868,3020,981],{"class":877},[868,3022,3023],{"class":870,"line":1139},[868,3024,958],{"emptyLinePlaceholder":686},[868,3026,3027,3029],{"class":870,"line":1144},[868,3028,1147],{"class":884},[868,3030,966],{"class":877},[868,3032,3033,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053,3055,3057,3059],{"class":870,"line":30},[868,3034,1000],{"class":891},[868,3036,975],{"class":877},[868,3038,1005],{"class":884},[868,3040,1008],{"class":884},[868,3042,1011],{"class":877},[868,3044,1014],{"class":891},[868,3046,975],{"class":877},[868,3048,978],{"class":884},[868,3050,1170],{"class":877},[868,3052,1173],{"class":891},[868,3054,1031],{"class":1030},[868,3056,1011],{"class":877},[868,3058,1180],{"class":891},[868,3060,981],{"class":877},[868,3062,3063],{"class":870,"line":247},[868,3064,958],{"emptyLinePlaceholder":686},[868,3066,3067,3069],{"class":870,"line":257},[868,3068,1191],{"class":884},[868,3070,966],{"class":877},[868,3072,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091,3093,3095,3097,3099],{"class":870,"line":272},[868,3074,1000],{"class":891},[868,3076,975],{"class":877},[868,3078,1005],{"class":884},[868,3080,1008],{"class":884},[868,3082,1011],{"class":877},[868,3084,1014],{"class":891},[868,3086,975],{"class":877},[868,3088,978],{"class":884},[868,3090,1170],{"class":877},[868,3092,1216],{"class":891},[868,3094,1031],{"class":1030},[868,3096,1011],{"class":877},[868,3098,1180],{"class":891},[868,3100,981],{"class":877},[868,3102,3103],{"class":870,"line":287},[868,3104,958],{"emptyLinePlaceholder":686},[868,3106,3107,3109],{"class":870,"line":292},[868,3108,1233],{"class":884},[868,3110,966],{"class":877},[868,3112,3113,3115,3117,3119,3121,3123,3125,3127,3129,3131,3133,3135,3137,3139],{"class":870,"line":302},[868,3114,1000],{"class":891},[868,3116,975],{"class":877},[868,3118,1005],{"class":884},[868,3120,1008],{"class":884},[868,3122,1011],{"class":877},[868,3124,1014],{"class":891},[868,3126,975],{"class":877},[868,3128,978],{"class":884},[868,3130,1170],{"class":877},[868,3132,1258],{"class":891},[868,3134,1031],{"class":1030},[868,3136,1011],{"class":877},[868,3138,1180],{"class":891},[868,3140,981],{"class":877},[868,3142,3143],{"class":870,"line":307},[868,3144,958],{"emptyLinePlaceholder":686},[868,3146,3147,3149],{"class":870,"line":312},[868,3148,1275],{"class":884},[868,3150,966],{"class":877},[868,3152,3153,3155,3157,3159,3161,3163,3165,3167,3169,3171,3173,3175,3177],{"class":870,"line":326},[868,3154,1000],{"class":891},[868,3156,975],{"class":877},[868,3158,1005],{"class":884},[868,3160,1008],{"class":884},[868,3162,1011],{"class":877},[868,3164,1014],{"class":891},[868,3166,975],{"class":877},[868,3168,978],{"class":884},[868,3170,1021],{"class":877},[868,3172,1024],{"class":891},[868,3174,1302],{"class":891},[868,3176,1031],{"class":1030},[868,3178,981],{"class":877},[868,3180,3181],{"class":870,"line":35},[868,3182,958],{"emptyLinePlaceholder":686},[868,3184,3185,3187],{"class":870,"line":335},[868,3186,1315],{"class":884},[868,3188,966],{"class":877},[868,3190,3191,3193,3195,3197,3199,3201,3203,3205,3207,3209,3211,3213,3215],{"class":870,"line":1320},[868,3192,1000],{"class":891},[868,3194,975],{"class":877},[868,3196,1005],{"class":884},[868,3198,1008],{"class":884},[868,3200,1011],{"class":877},[868,3202,1014],{"class":891},[868,3204,975],{"class":877},[868,3206,978],{"class":884},[868,3208,1021],{"class":877},[868,3210,1024],{"class":891},[868,3212,1343],{"class":891},[868,3214,1031],{"class":1030},[868,3216,981],{"class":877},[868,3218,3219],{"class":870,"line":1350},[868,3220,958],{"emptyLinePlaceholder":686},[868,3222,3223,3225],{"class":870,"line":1355},[868,3224,1358],{"class":884},[868,3226,966],{"class":877},[868,3228,3229,3231,3233,3235,3237,3239,3241,3243,3245,3247,3249,3251,3253],{"class":870,"line":586},[868,3230,1000],{"class":891},[868,3232,975],{"class":877},[868,3234,1005],{"class":884},[868,3236,1008],{"class":884},[868,3238,1011],{"class":877},[868,3240,1014],{"class":891},[868,3242,975],{"class":877},[868,3244,978],{"class":884},[868,3246,1021],{"class":877},[868,3248,1024],{"class":891},[868,3250,1385],{"class":891},[868,3252,1031],{"class":1030},[868,3254,981],{"class":877},[868,3256,3257],{"class":870,"line":1392},[868,3258,958],{"emptyLinePlaceholder":686},[868,3260,3261,3263],{"class":870,"line":1397},[868,3262,1400],{"class":884},[868,3264,966],{"class":877},[868,3266,3267,3269,3271,3273,3275,3277,3279,3281,3283,3285,3287,3289,3291],{"class":870,"line":1405},[868,3268,1000],{"class":891},[868,3270,975],{"class":877},[868,3272,1005],{"class":884},[868,3274,1008],{"class":884},[868,3276,1011],{"class":877},[868,3278,1014],{"class":891},[868,3280,975],{"class":877},[868,3282,978],{"class":884},[868,3284,1021],{"class":877},[868,3286,1024],{"class":891},[868,3288,1302],{"class":891},[868,3290,1031],{"class":1030},[868,3292,981],{"class":877},[868,3294,3295],{"class":870,"line":345},[868,3296,958],{"emptyLinePlaceholder":686},[868,3298,3299,3301],{"class":870,"line":40},[868,3300,1440],{"class":884},[868,3302,966],{"class":877},[868,3304,3305,3307,3309,3311],{"class":870,"line":359},[868,3306,972],{"class":891},[868,3308,975],{"class":877},[868,3310,978],{"class":884},[868,3312,981],{"class":877},[868,3314,3315],{"class":870,"line":1455},[868,3316,958],{"emptyLinePlaceholder":686},[868,3318,3319,3321],{"class":870,"line":1460},[868,3320,1463],{"class":884},[868,3322,966],{"class":877},[868,3324,3325,3327,3329,3331],{"class":870,"line":374},[868,3326,972],{"class":891},[868,3328,975],{"class":877},[868,3330,978],{"class":884},[868,3332,981],{"class":877},[868,3334,3335],{"class":870,"line":379},[868,3336,914],{"class":877},[696,3338,3339],{},"Ini hanya salah satu resep yang mungkin. Anda memiliki kepemilikan pilihan warna.",[696,3341,3342],{},"Uji hasilnya dalam komponen dan konteks yang digunakan aplikasi Anda.\nSelaras tidak mengubah nilai CSS yang Anda tulis.",[691,3344,3346],{"id":3345},"resep-role-lengkap","Resep role lengkap",[696,3348,3349],{},"Sebuah role warna memiliki input publik berikut:",[859,3351,3353],{"className":3352,"code":1497,"language":1498,"meta":864},[1496],[706,3354,1497],{"__ignoreMap":864},[696,3356,3357,3358,3360],{},"Untuk ",[706,3359,728],{},", nama CSS lengkapnya adalah:",[859,3362,3363],{"className":861,"code":1509,"language":863,"meta":864,"style":864},[706,3364,3365,3371,3377,3383,3389,3395,3401,3405,3411,3417,3423,3429,3433,3439,3445,3451,3455,3461,3467],{"__ignoreMap":864},[868,3366,3367,3369],{"class":870,"line":8},[868,3368,874],{"class":873},[868,3370,878],{"class":877},[868,3372,3373,3375],{"class":870,"line":881},[868,3374,885],{"class":884},[868,3376,1524],{"class":877},[868,3378,3379,3381],{"class":870,"line":898},[868,3380,1529],{"class":884},[868,3382,1524],{"class":877},[868,3384,3385,3387],{"class":870,"line":911},[868,3386,1536],{"class":884},[868,3388,1524],{"class":877},[868,3390,3391,3393],{"class":870,"line":969},[868,3392,901],{"class":884},[868,3394,1524],{"class":877},[868,3396,3397,3399],{"class":870,"line":984},[868,3398,1549],{"class":884},[868,3400,1524],{"class":877},[868,3402,3403],{"class":870,"line":989},[868,3404,958],{"emptyLinePlaceholder":686},[868,3406,3407,3409],{"class":870,"line":997},[868,3408,1560],{"class":884},[868,3410,1524],{"class":877},[868,3412,3413,3415],{"class":870,"line":1036},[868,3414,1567],{"class":884},[868,3416,1524],{"class":877},[868,3418,3419,3421],{"class":870,"line":13},[868,3420,1574],{"class":884},[868,3422,1524],{"class":877},[868,3424,3425,3427],{"class":870,"line":151},[868,3426,1581],{"class":884},[868,3428,1524],{"class":877},[868,3430,3431],{"class":870,"line":170},[868,3432,958],{"emptyLinePlaceholder":686},[868,3434,3435,3437],{"class":870,"line":1081},[868,3436,1592],{"class":884},[868,3438,1524],{"class":877},[868,3440,3441,3443],{"class":870,"line":1089},[868,3442,1599],{"class":884},[868,3444,1524],{"class":877},[868,3446,3447,3449],{"class":870,"line":648},[868,3448,1606],{"class":884},[868,3450,1524],{"class":877},[868,3452,3453],{"class":870,"line":1101},[868,3454,958],{"emptyLinePlaceholder":686},[868,3456,3457,3459],{"class":870,"line":1109},[868,3458,1617],{"class":884},[868,3460,1524],{"class":877},[868,3462,3463,3465],{"class":870,"line":1139},[868,3464,1624],{"class":884},[868,3466,1524],{"class":877},[868,3468,3469],{"class":870,"line":1144},[868,3470,914],{"class":877},[696,3472,3473,3474,3476],{},"Ganti ",[706,3475,728],{}," dengan nama role apa pun yang didaftarkan.",[696,3478,3479,3480,1011,3482,1011,3484,3486,3487,3489,3490,3492,3493,3495,3496,1665],{},"Varian komponen memilih leaf yang dibutuhkannya. Misalnya, Button solid menggunakan ",[706,3481,1642],{},[706,3483,1645],{},[706,3485,1648],{},", dan ",[706,3488,1652],{},". Button soft menggunakan leaf ",[706,3491,1656],{},". Grafik yang tidak berpasangan, seperti progress dan radio indicator, menggunakan ",[706,3494,1660],{},". Jika dihilangkan, ia mengikuti ",[706,3497,1664],{},[696,3499,3500],{},"Anda juga dapat menyediakan nilai berbeda untuk dark mode:",[859,3502,3503],{"className":861,"code":1671,"language":863,"meta":864,"style":864},[706,3504,3505,3511,3521,3531,3535,3539,3545,3555,3565],{"__ignoreMap":864},[868,3506,3507,3509],{"class":870,"line":8},[868,3508,874],{"class":873},[868,3510,878],{"class":877},[868,3512,3513,3515,3517,3519],{"class":870,"line":881},[868,3514,885],{"class":884},[868,3516,888],{"class":877},[868,3518,892],{"class":891},[868,3520,895],{"class":877},[868,3522,3523,3525,3527,3529],{"class":870,"line":898},[868,3524,901],{"class":884},[868,3526,888],{"class":877},[868,3528,906],{"class":891},[868,3530,895],{"class":877},[868,3532,3533],{"class":870,"line":911},[868,3534,914],{"class":877},[868,3536,3537],{"class":870,"line":969},[868,3538,958],{"emptyLinePlaceholder":686},[868,3540,3541,3543],{"class":870,"line":984},[868,3542,1712],{"class":873},[868,3544,878],{"class":877},[868,3546,3547,3549,3551,3553],{"class":870,"line":989},[868,3548,885],{"class":884},[868,3550,888],{"class":877},[868,3552,1723],{"class":891},[868,3554,895],{"class":877},[868,3556,3557,3559,3561,3563],{"class":870,"line":997},[868,3558,901],{"class":884},[868,3560,888],{"class":877},[868,3562,906],{"class":891},[868,3564,895],{"class":877},[868,3566,3567],{"class":870,"line":1036},[868,3568,914],{"class":877},[1741,3570,3572],{"id":3571},"konfigurasi-nuxt-dan-helper-tema","Konfigurasi Nuxt dan helper tema",[696,3574,3575],{},"Gunakan CSS terlebih dahulu.",[696,3577,3578,3579,3581],{},"Gunakan ",[706,3580,1753],{}," saat Selaras membutuhkan informasi waktu build. Kasus warna yang paling umum adalah nama role baru.",[691,3583,3585],{"id":3584},"tambahkan-role-baru","Tambahkan role baru",[696,3587,3588],{},"Nama role bawaan sudah berfungsi tanpa konfigurasi tema.",[696,3590,3591,3592,3594,3595,3597],{},"Role baru seperti ",[706,3593,1767],{}," atau ",[706,3596,1771],{}," harus didaftarkan pada waktu build agar Selaras dapat:",[700,3599,3600,3603,3608],{},[703,3601,3602],{},"menghasilkan binding role-nya",[703,3604,3605,3606],{},"menambahkannya ke ",[706,3607,1783],{},[703,3609,3610,3611,1790],{},"membuat ",[706,3612,1789],{},[696,3614,3615],{},"API Nuxt saat ini membutuhkan resep terang dan gelap:",[859,3617,3618],{"className":1796,"code":1797,"filename":1753,"language":1798,"meta":864,"style":864},[706,3619,3620,3630,3634,3644,3652,3656,3660,3664,3668,3676,3680,3688,3696,3704,3712,3720,3728,3732,3736,3744,3752,3760,3768,3776,3784,3788,3792,3796,3800,3804],{"__ignoreMap":864},[868,3621,3622,3624,3626,3628],{"class":870,"line":8},[868,3623,1805],{"class":1030},[868,3625,1808],{"class":877},[868,3627,1811],{"class":1030},[868,3629,1815],{"class":1814},[868,3631,3632],{"class":870,"line":881},[868,3633,958],{"emptyLinePlaceholder":686},[868,3635,3636,3638,3640,3642],{"class":870,"line":898},[868,3637,1824],{"class":1030},[868,3639,1827],{"class":1030},[868,3641,1830],{"class":873},[868,3643,1833],{"class":877},[868,3645,3646,3648,3650],{"class":870,"line":911},[868,3647,1838],{"class":877},[868,3649,1841],{"class":1814},[868,3651,1844],{"class":877},[868,3653,3654],{"class":870,"line":969},[868,3655,958],{"emptyLinePlaceholder":686},[868,3657,3658],{"class":870,"line":984},[868,3659,1853],{"class":877},[868,3661,3662],{"class":870,"line":989},[868,3663,1858],{"class":877},[868,3665,3666],{"class":870,"line":997},[868,3667,1863],{"class":877},[868,3669,3670,3672,3674],{"class":870,"line":1036},[868,3671,1868],{"class":877},[868,3673,1871],{"class":873},[868,3675,1833],{"class":877},[868,3677,3678],{"class":870,"line":13},[868,3679,1878],{"class":877},[868,3681,3682,3684,3686],{"class":870,"line":151},[868,3683,1883],{"class":877},[868,3685,1886],{"class":1814},[868,3687,1889],{"class":877},[868,3689,3690,3692,3694],{"class":870,"line":170},[868,3691,1894],{"class":877},[868,3693,1897],{"class":1814},[868,3695,1889],{"class":877},[868,3697,3698,3700,3702],{"class":870,"line":1081},[868,3699,1904],{"class":877},[868,3701,1907],{"class":1814},[868,3703,1889],{"class":877},[868,3705,3706,3708,3710],{"class":870,"line":1089},[868,3707,1914],{"class":877},[868,3709,1917],{"class":1814},[868,3711,1889],{"class":877},[868,3713,3714,3716,3718],{"class":870,"line":648},[868,3715,1924],{"class":877},[868,3717,1927],{"class":1814},[868,3719,1889],{"class":877},[868,3721,3722,3724,3726],{"class":870,"line":1101},[868,3723,1934],{"class":877},[868,3725,1937],{"class":1814},[868,3727,1889],{"class":877},[868,3729,3730],{"class":870,"line":1109},[868,3731,1944],{"class":877},[868,3733,3734],{"class":870,"line":1139},[868,3735,1949],{"class":877},[868,3737,3738,3740,3742],{"class":870,"line":1144},[868,3739,1883],{"class":877},[868,3741,1956],{"class":1814},[868,3743,1889],{"class":877},[868,3745,3746,3748,3750],{"class":870,"line":30},[868,3747,1894],{"class":877},[868,3749,1965],{"class":1814},[868,3751,1889],{"class":877},[868,3753,3754,3756,3758],{"class":870,"line":247},[868,3755,1904],{"class":877},[868,3757,1974],{"class":1814},[868,3759,1889],{"class":877},[868,3761,3762,3764,3766],{"class":870,"line":257},[868,3763,1914],{"class":877},[868,3765,1983],{"class":1814},[868,3767,1889],{"class":877},[868,3769,3770,3772,3774],{"class":870,"line":272},[868,3771,1924],{"class":877},[868,3773,1992],{"class":1814},[868,3775,1889],{"class":877},[868,3777,3778,3780,3782],{"class":870,"line":287},[868,3779,1934],{"class":877},[868,3781,2001],{"class":1814},[868,3783,1889],{"class":877},[868,3785,3786],{"class":870,"line":292},[868,3787,1944],{"class":877},[868,3789,3790],{"class":870,"line":302},[868,3791,2012],{"class":877},[868,3793,3794],{"class":870,"line":307},[868,3795,2017],{"class":877},[868,3797,3798],{"class":870,"line":312},[868,3799,2022],{"class":877},[868,3801,3802],{"class":870,"line":326},[868,3803,2027],{"class":877},[868,3805,3806],{"class":870,"line":35},[868,3807,2032],{"class":877},[696,3809,3810],{},"Setelah pendaftaran, Anda dapat menggunakan:",[859,3812,3813],{"className":2038,"code":2039,"language":2040,"meta":864,"style":864},[706,3814,3815,3829,3833],{"__ignoreMap":864},[868,3816,3817,3819,3821,3823,3825,3827],{"class":870,"line":8},[868,3818,2047],{"class":877},[868,3820,2051],{"class":2050},[868,3822,2054],{"class":873},[868,3824,2057],{"class":877},[868,3826,2060],{"class":1814},[868,3828,2063],{"class":877},[868,3830,3831],{"class":870,"line":881},[868,3832,2068],{"class":877},[868,3834,3835,3837,3839],{"class":870,"line":898},[868,3836,2073],{"class":877},[868,3838,2051],{"class":2050},[868,3840,2063],{"class":877},[696,3842,3843],{},"Anda masih dapat menimpa role yang didaftarkan dari CSS:",[859,3845,3846],{"className":861,"code":2083,"language":863,"meta":864,"style":864},[706,3847,3848,3854,3864],{"__ignoreMap":864},[868,3849,3850,3852],{"class":870,"line":8},[868,3851,874],{"class":873},[868,3853,878],{"class":877},[868,3855,3856,3858,3860,3862],{"class":870,"line":881},[868,3857,2096],{"class":884},[868,3859,888],{"class":877},[868,3861,2101],{"class":891},[868,3863,895],{"class":877},[868,3865,3866],{"class":870,"line":898},[868,3867,914],{"class":877},[696,3869,3870],{},"Konfigurasi Nuxt mendaftarkan role. CSS masih dapat memiliki nilai visualnya.",[691,3872,3874],{"id":3873},"timpa-resep-bawaan-di-konfigurasi-nuxt","Timpa resep bawaan di konfigurasi Nuxt",[696,3876,3877],{},"Anda juga dapat mengganti resep bawaan:",[859,3879,3880],{"className":1796,"code":2120,"filename":1753,"language":1798,"meta":864,"style":864},[706,3881,3882,3892,3896,3906,3910,3914,3918,3926,3930,3938,3946,3954,3962,3970,3978,3982,3986,3994,4002,4010,4018,4026,4034,4038,4042,4046,4050,4054],{"__ignoreMap":864},[868,3883,3884,3886,3888,3890],{"class":870,"line":8},[868,3885,1805],{"class":1030},[868,3887,1808],{"class":877},[868,3889,1811],{"class":1030},[868,3891,1815],{"class":1814},[868,3893,3894],{"class":870,"line":881},[868,3895,958],{"emptyLinePlaceholder":686},[868,3897,3898,3900,3902,3904],{"class":870,"line":898},[868,3899,1824],{"class":1030},[868,3901,1827],{"class":1030},[868,3903,1830],{"class":873},[868,3905,1833],{"class":877},[868,3907,3908],{"class":870,"line":911},[868,3909,1853],{"class":877},[868,3911,3912],{"class":870,"line":969},[868,3913,1858],{"class":877},[868,3915,3916],{"class":870,"line":984},[868,3917,1863],{"class":877},[868,3919,3920,3922,3924],{"class":870,"line":989},[868,3921,2163],{"class":877},[868,3923,1871],{"class":873},[868,3925,1833],{"class":877},[868,3927,3928],{"class":870,"line":997},[868,3929,1878],{"class":877},[868,3931,3932,3934,3936],{"class":870,"line":1036},[868,3933,1883],{"class":877},[868,3935,2178],{"class":1814},[868,3937,1889],{"class":877},[868,3939,3940,3942,3944],{"class":870,"line":13},[868,3941,1894],{"class":877},[868,3943,2187],{"class":1814},[868,3945,1889],{"class":877},[868,3947,3948,3950,3952],{"class":870,"line":151},[868,3949,1904],{"class":877},[868,3951,2196],{"class":1814},[868,3953,1889],{"class":877},[868,3955,3956,3958,3960],{"class":870,"line":170},[868,3957,1914],{"class":877},[868,3959,2205],{"class":1814},[868,3961,1889],{"class":877},[868,3963,3964,3966,3968],{"class":870,"line":1081},[868,3965,1924],{"class":877},[868,3967,2214],{"class":1814},[868,3969,1889],{"class":877},[868,3971,3972,3974,3976],{"class":870,"line":1089},[868,3973,1934],{"class":877},[868,3975,2223],{"class":1814},[868,3977,1889],{"class":877},[868,3979,3980],{"class":870,"line":648},[868,3981,1944],{"class":877},[868,3983,3984],{"class":870,"line":1101},[868,3985,1949],{"class":877},[868,3987,3988,3990,3992],{"class":870,"line":1109},[868,3989,1883],{"class":877},[868,3991,2240],{"class":1814},[868,3993,1889],{"class":877},[868,3995,3996,3998,4000],{"class":870,"line":1139},[868,3997,1894],{"class":877},[868,3999,2187],{"class":1814},[868,4001,1889],{"class":877},[868,4003,4004,4006,4008],{"class":870,"line":1144},[868,4005,1904],{"class":877},[868,4007,2257],{"class":1814},[868,4009,1889],{"class":877},[868,4011,4012,4014,4016],{"class":870,"line":30},[868,4013,1914],{"class":877},[868,4015,2266],{"class":1814},[868,4017,1889],{"class":877},[868,4019,4020,4022,4024],{"class":870,"line":247},[868,4021,1924],{"class":877},[868,4023,2275],{"class":1814},[868,4025,1889],{"class":877},[868,4027,4028,4030,4032],{"class":870,"line":257},[868,4029,1934],{"class":877},[868,4031,2284],{"class":1814},[868,4033,1889],{"class":877},[868,4035,4036],{"class":870,"line":272},[868,4037,1944],{"class":877},[868,4039,4040],{"class":870,"line":287},[868,4041,2012],{"class":877},[868,4043,4044],{"class":870,"line":292},[868,4045,2017],{"class":877},[868,4047,4048],{"class":870,"line":302},[868,4049,2022],{"class":877},[868,4051,4052],{"class":870,"line":307},[868,4053,2027],{"class":877},[868,4055,4056],{"class":870,"line":312},[868,4057,2032],{"class":877},[696,4059,4060,4062],{},[706,4061,2315],{}," memvalidasi bentuk resep yang diperlukan. Ia tidak mengubah nilai yang Anda berikan.",[696,4064,4065],{},"Leaf yang diperlukan di setiap mode adalah:",[700,4067,4068,4072,4076,4080,4084,4088],{},[703,4069,4070],{},[706,4071,1642],{},[703,4073,4074],{},[706,4075,2330],{},[703,4077,4078],{},[706,4079,1656],{},[703,4081,4082],{},[706,4083,2339],{},[703,4085,4086],{},[706,4087,1498],{},[703,4089,4090],{},[706,4091,1664],{},[696,4093,4094],{},"Leaf opsional:",[700,4096,4097,4101,4105,4112,4116,4120,4124,4128],{},[703,4098,4099],{},[706,4100,2357],{},[703,4102,4103],{},[706,4104,2362],{},[703,4106,4107,4109,4110,2370],{},[706,4108,1660],{}," (default ke ",[706,4111,1664],{},[703,4113,4114],{},[706,4115,2375],{},[703,4117,4118],{},[706,4119,2380],{},[703,4121,4122],{},[706,4123,2385],{},[703,4125,4126],{},[706,4127,2390],{},[703,4129,4130],{},[706,4131,2395],{},[696,4133,4134,4135,1665],{},"Jika leaf interaksi opsional hilang, Selaras mengaitkannya ke state terdekat yang didefinisikan. Ia tidak menghitung rona baru untuk ",[706,4136,2315],{},[691,4138,4140,4141],{"id":4139},"helper-opsional-definecolorfromseed","Helper opsional: ",[706,4142,2407],{},[696,4144,4145,4147],{},[706,4146,2407],{}," bukan jalur tema CSS-first.",[696,4149,4150],{},"Gunakan saat Anda ingin Selaras mempertahankan satu warna sRGB opaque sebagai solid fill resting dan menurunkan sisa resep di sekitarnya.",[859,4152,4153],{"className":1796,"code":2418,"filename":1753,"language":1798,"meta":864,"style":864},[706,4154,4155,4165,4169,4179,4183,4187,4191,4203,4207,4211,4215],{"__ignoreMap":864},[868,4156,4157,4159,4161,4163],{"class":870,"line":8},[868,4158,1805],{"class":1030},[868,4160,2427],{"class":877},[868,4162,1811],{"class":1030},[868,4164,1815],{"class":1814},[868,4166,4167],{"class":870,"line":881},[868,4168,958],{"emptyLinePlaceholder":686},[868,4170,4171,4173,4175,4177],{"class":870,"line":898},[868,4172,1824],{"class":1030},[868,4174,1827],{"class":1030},[868,4176,1830],{"class":873},[868,4178,1833],{"class":877},[868,4180,4181],{"class":870,"line":911},[868,4182,1853],{"class":877},[868,4184,4185],{"class":870,"line":969},[868,4186,1858],{"class":877},[868,4188,4189],{"class":870,"line":984},[868,4190,1863],{"class":877},[868,4192,4193,4195,4197,4199,4201],{"class":870,"line":989},[868,4194,2462],{"class":877},[868,4196,2465],{"class":873},[868,4198,975],{"class":877},[868,4200,2470],{"class":1814},[868,4202,2473],{"class":877},[868,4204,4205],{"class":870,"line":997},[868,4206,2017],{"class":877},[868,4208,4209],{"class":870,"line":1036},[868,4210,2022],{"class":877},[868,4212,4213],{"class":870,"line":13},[868,4214,2027],{"class":877},[868,4216,4217],{"class":870,"line":151},[868,4218,2032],{"class":877},[696,4220,4221,4222,4224,4225,4227,4228,1665],{},"Nilai ",[706,4223,1642],{}," resting terang dan gelap tetap persis seperti warna enam digit yang Anda berikan. Selaras memilih ",[706,4226,2330],{}," hitam atau putih, menurunkan state interaksi yang berbeda, dan menurunkan warna teks, border, fokus, dan indikator terhadap permukaan yang diberikan. Jika keluarga pendukung tidak dapat diteruskan dengan aman, helper menolak input dan mengarahkan Anda ke ",[706,4229,2315],{},[696,4231,4232,4233,4235],{},"Gunakan CSS atau ",[706,4234,2315],{}," saat Anda membutuhkan kontrol tepat atas setiap state.",[696,4237,4238],{},"Helper saat ini hanya menerima nilai hex sRGB opaque enam digit. Ia tidak dapat mengevaluasi variabel CSS, warna transparan, atau ekspresi CSS arbitrer.",[696,4240,4241],{},"Jika Anda menggunakan permukaan kustom, Anda dapat memberikan warna permukaan yang diresolve ke helper:",[859,4243,4244],{"className":1796,"code":2515,"language":1798,"meta":864,"style":864},[706,4245,4246,4256,4260,4268,4276,4280],{"__ignoreMap":864},[868,4247,4248,4250,4252,4254],{"class":870,"line":8},[868,4249,2465],{"class":873},[868,4251,975],{"class":877},[868,4253,2470],{"class":1814},[868,4255,2528],{"class":877},[868,4257,4258],{"class":870,"line":881},[868,4259,2533],{"class":877},[868,4261,4262,4264,4266],{"class":870,"line":898},[868,4263,2538],{"class":877},[868,4265,2541],{"class":1814},[868,4267,1889],{"class":877},[868,4269,4270,4272,4274],{"class":870,"line":911},[868,4271,2548],{"class":877},[868,4273,2551],{"class":1814},[868,4275,1889],{"class":877},[868,4277,4278],{"class":870,"line":969},[868,4279,2027],{"class":877},[868,4281,4282],{"class":870,"line":984},[868,4283,2032],{"class":877},[691,4285,4287],{"id":4286},"helper-opsional-warna-dtcg-yang-diresolve","Helper opsional: warna DTCG yang diresolve",[696,4289,4290],{},"Jika pipeline design-token Anda menggunakan DTCG, resolve alias dan mode di pipeline itu terlebih dahulu.",[696,4292,4293,4295],{},[706,4294,2573],{}," mengonversi nilai warna DTCG yang sudah diresolve menjadi CSS. Ia tidak mem-pars dokumen token. Ia tidak me-resolve alias. Ia tidak memilih mode.",[859,4297,4298],{"className":1796,"code":2577,"language":1798,"meta":864,"style":864},[706,4299,4300,4310,4314,4326,4334],{"__ignoreMap":864},[868,4301,4302,4304,4306,4308],{"class":870,"line":8},[868,4303,1805],{"class":1030},[868,4305,2586],{"class":877},[868,4307,1811],{"class":1030},[868,4309,1815],{"class":1814},[868,4311,4312],{"class":870,"line":881},[868,4313,958],{"emptyLinePlaceholder":686},[868,4315,4316,4318,4320,4322,4324],{"class":870,"line":898},[868,4317,2599],{"class":1030},[868,4319,2602],{"class":891},[868,4321,2605],{"class":1030},[868,4323,2608],{"class":873},[868,4325,2611],{"class":877},[868,4327,4328,4330,4332],{"class":870,"line":911},[868,4329,2616],{"class":877},[868,4331,2619],{"class":1814},[868,4333,1889],{"class":877},[868,4335,4336],{"class":870,"line":969},[868,4337,2032],{"class":877},[696,4339,4340,4341,4343],{},"Anda kemudian dapat menggunakan hasilnya di ",[706,4342,2315],{}," atau di CSS Anda sendiri.",[2633,4345,2635],{},{"title":864,"searchDepth":898,"depth":898,"links":4347},[4348,4349,4350,4351,4352],{"id":2661,"depth":898,"text":2662},{"id":2796,"depth":898,"text":2797},{"id":2843,"depth":898,"text":2844},{"id":3345,"depth":898,"text":3346},{"id":3571,"depth":881,"text":3572,"children":4353},[4354,4355,4356,4358],{"id":3584,"depth":898,"text":3585},{"id":3873,"depth":898,"text":3874},{"id":4139,"depth":898,"text":4357},"Helper opsional: defineColorFromSeed()",{"id":4286,"depth":898,"text":4287},"Konfigurasikan warna semantik bawaan dan kustom.",{},"\u002Fid\u002Foverview\u002Ftheming\u002Fcolor-roles",{"title":2656,"description":4359},"id\u002Foverview\u002Ftheming\u002Fcolor-roles","nF77fzsiLhcZ_Ch0Kwid_M1heGieZW0C7MvLQIyVYzQ",1792925240589]