[{"data":1,"prerenderedAt":3637},["ShallowReactive",2],{"selaras-docs-navigation":3,"selaras-docs:\u002Foverview\u002Ftheming\u002Fcss-tokens":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":80},{"en":684,"id":2268},{"id":685,"title":79,"aside":686,"body":687,"collapse":10,"description":2264,"editLink":686,"extension":2250,"icon":9,"issueLink":686,"meta":2265,"navBadges":9,"navigation":9,"order":30,"path":80,"prevNext":686,"seo":2266,"stem":81,"toc":686,"__hash__":2267},"docs\u002Foverview\u002Ftheming\u002Fcss-tokens.md",true,{"type":688,"value":689,"toc":2255},"minimark",[690,695,699,702,809,816,820,823,871,874,881,994,1001,1099,1110,1114,1134,1137,1140,1144,1147,1150,1222,1225,1228,1288,1294,1298,1301,1312,1625,1628,1846,1857,1864,1868,1871,1905,1908,1938,1941,1947,1964,1967,1970,1974,1977,2005,2008,2011,2213,2216,2241,2251],[691,692,694],"h3",{"id":693},"start-with-css","Start with CSS",[696,697,698],"p",{},"For most theme changes, edit CSS only.",[696,700,701],{},"Selaras has public input variables. The main groups are:",[703,704,705,717],"table",{},[706,707,708],"thead",{},[709,710,711,714],"tr",{},[712,713,216],"th",{},[712,715,716],{},"Purpose",[718,719,720,732,742,752,769,779,789,799],"tbody",{},[709,721,722,729],{},[723,724,725],"td",{},[726,727,728],"code",{},"--selaras-surface-*",[723,730,731],{},"Page and surface colors",[709,733,734,739],{},[723,735,736],{},[726,737,738],{},"--selaras-text-*",[723,740,741],{},"General text colors",[709,743,744,749],{},[723,745,746],{},[726,747,748],{},"--selaras-border-*",[723,750,751],{},"General border colors",[709,753,754,759],{},[723,755,756],{},[726,757,758],{},"--selaras-color-\u003Crole>-\u003Cleaf>",[723,760,761,762,765,766],{},"Component color roles, such as ",[726,763,764],{},"primary"," or ",[726,767,768],{},"warning",[709,770,771,776],{},[723,772,773],{},[726,774,775],{},"--selaras-radius-*",[723,777,778],{},"Corner radius",[709,780,781,786],{},[723,782,783],{},[726,784,785],{},"--selaras-shadow-*",[723,787,788],{},"Shadow values",[709,790,791,796],{},[723,792,793],{},[726,794,795],{},"--selaras-z-*",[723,797,798],{},"Overlay stacking",[709,800,801,806],{},[723,802,803],{},[726,804,805],{},"--selaras-scrim",[723,807,808],{},"Overlay backdrop",[696,810,811,812,815],{},"Selaras also has ",[726,813,814],{},"--selaras-resolved-*"," variables. These are effective read\nvalues. Do not use them as theme inputs.",[691,817,819],{"id":818},"small-css-changes","Small CSS changes",[696,821,822],{},"You can change one value:",[824,825,830],"pre",{"className":826,"code":827,"language":828,"meta":829,"style":829},"language-css shiki shiki-themes github-light github-dark",":root {\n  --selaras-radius-base: 0.375rem;\n}\n","css","",[726,831,832,844,865],{"__ignoreMap":829},[833,834,836,840],"span",{"class":835,"line":8},"line",[833,837,839],{"class":838},"sScJk",":root",[833,841,843],{"class":842},"sVt8B"," {\n",[833,845,847,851,854,858,862],{"class":835,"line":846},2,[833,848,850],{"class":849},"s4XuR","  --selaras-radius-base",[833,852,853],{"class":842},": ",[833,855,857],{"class":856},"sj4cs","0.375",[833,859,861],{"class":860},"szBVR","rem",[833,863,864],{"class":842},";\n",[833,866,868],{"class":835,"line":867},3,[833,869,870],{"class":842},"}\n",[696,872,873],{},"Or you can change general surfaces and text:",[696,875,876,877,880],{},"The light canvas is white by default. A card-heavy dashboard can use a subtle\ncanvas such as ",[726,878,879],{},"#f9f9f9"," while keeping its component surfaces white:",[824,882,884],{"className":826,"code":883,"language":828,"meta":829,"style":829},":root {\n  --selaras-surface-canvas: #f9f9f9;\n  --selaras-surface-default: #ffffff;\n  --selaras-surface-elevated: #fafafa;\n\n  --selaras-text-default: #18181b;\n  --selaras-text-muted: #71717a;\n\n  --selaras-border-default: #e4e4e7;\n  --selaras-border-hover: #d4d4d8;\n}\n",[726,885,886,892,903,915,928,934,947,960,965,978,990],{"__ignoreMap":829},[833,887,888,890],{"class":835,"line":8},[833,889,839],{"class":838},[833,891,843],{"class":842},[833,893,894,897,899,901],{"class":835,"line":846},[833,895,896],{"class":849},"  --selaras-surface-canvas",[833,898,853],{"class":842},[833,900,879],{"class":856},[833,902,864],{"class":842},[833,904,905,908,910,913],{"class":835,"line":867},[833,906,907],{"class":849},"  --selaras-surface-default",[833,909,853],{"class":842},[833,911,912],{"class":856},"#ffffff",[833,914,864],{"class":842},[833,916,918,921,923,926],{"class":835,"line":917},4,[833,919,920],{"class":849},"  --selaras-surface-elevated",[833,922,853],{"class":842},[833,924,925],{"class":856},"#fafafa",[833,927,864],{"class":842},[833,929,931],{"class":835,"line":930},5,[833,932,933],{"emptyLinePlaceholder":686},"\n",[833,935,937,940,942,945],{"class":835,"line":936},6,[833,938,939],{"class":849},"  --selaras-text-default",[833,941,853],{"class":842},[833,943,944],{"class":856},"#18181b",[833,946,864],{"class":842},[833,948,950,953,955,958],{"class":835,"line":949},7,[833,951,952],{"class":849},"  --selaras-text-muted",[833,954,853],{"class":842},[833,956,957],{"class":856},"#71717a",[833,959,864],{"class":842},[833,961,963],{"class":835,"line":962},8,[833,964,933],{"emptyLinePlaceholder":686},[833,966,968,971,973,976],{"class":835,"line":967},9,[833,969,970],{"class":849},"  --selaras-border-default",[833,972,853],{"class":842},[833,974,975],{"class":856},"#e4e4e7",[833,977,864],{"class":842},[833,979,980,983,985,988],{"class":835,"line":13},[833,981,982],{"class":849},"  --selaras-border-hover",[833,984,853],{"class":842},[833,986,987],{"class":856},"#d4d4d8",[833,989,864],{"class":842},[833,991,992],{"class":835,"line":151},[833,993,870],{"class":842},[696,995,996,997,1000],{},"For dark mode, override the same inputs under ",[726,998,999],{},":root.dark",":",[824,1002,1004],{"className":826,"code":1003,"language":828,"meta":829,"style":829},":root.dark {\n  --selaras-surface-canvas: #0c0c0d;\n  --selaras-surface-default: #09090b;\n  --selaras-surface-elevated: #18181b;\n\n  --selaras-text-default: #fafafa;\n  --selaras-text-muted: #a1a1aa;\n\n  --selaras-border-default: #27272a;\n  --selaras-border-hover: #3f3f46;\n}\n",[726,1005,1006,1012,1023,1034,1044,1048,1058,1069,1073,1084,1095],{"__ignoreMap":829},[833,1007,1008,1010],{"class":835,"line":8},[833,1009,999],{"class":838},[833,1011,843],{"class":842},[833,1013,1014,1016,1018,1021],{"class":835,"line":846},[833,1015,896],{"class":849},[833,1017,853],{"class":842},[833,1019,1020],{"class":856},"#0c0c0d",[833,1022,864],{"class":842},[833,1024,1025,1027,1029,1032],{"class":835,"line":867},[833,1026,907],{"class":849},[833,1028,853],{"class":842},[833,1030,1031],{"class":856},"#09090b",[833,1033,864],{"class":842},[833,1035,1036,1038,1040,1042],{"class":835,"line":917},[833,1037,920],{"class":849},[833,1039,853],{"class":842},[833,1041,944],{"class":856},[833,1043,864],{"class":842},[833,1045,1046],{"class":835,"line":930},[833,1047,933],{"emptyLinePlaceholder":686},[833,1049,1050,1052,1054,1056],{"class":835,"line":936},[833,1051,939],{"class":849},[833,1053,853],{"class":842},[833,1055,925],{"class":856},[833,1057,864],{"class":842},[833,1059,1060,1062,1064,1067],{"class":835,"line":949},[833,1061,952],{"class":849},[833,1063,853],{"class":842},[833,1065,1066],{"class":856},"#a1a1aa",[833,1068,864],{"class":842},[833,1070,1071],{"class":835,"line":962},[833,1072,933],{"emptyLinePlaceholder":686},[833,1074,1075,1077,1079,1082],{"class":835,"line":967},[833,1076,970],{"class":849},[833,1078,853],{"class":842},[833,1080,1081],{"class":856},"#27272a",[833,1083,864],{"class":842},[833,1085,1086,1088,1090,1093],{"class":835,"line":13},[833,1087,982],{"class":849},[833,1089,853],{"class":842},[833,1091,1092],{"class":856},"#3f3f46",[833,1094,864],{"class":842},[833,1096,1097],{"class":835,"line":151},[833,1098,870],{"class":842},[696,1100,1101,1102,1105,1106,1109],{},"Selaras follows the ",[726,1103,1104],{},".dark"," class on ",[726,1107,1108],{},"\u003Chtml>"," for the document theme.",[691,1111,1113],{"id":1112},"check-borders-against-their-surfaces","Check borders against their surfaces",[696,1115,1116,1118,1119,1121,1122,1125,1126,1129,1130,1133],{},[726,1117,728],{}," and ",[726,1120,748],{}," are independent inputs. Component\nthemes choose which ones to pair. For example,\n",[1123,1124,540],"a",{"href":541}," paints its background\nwith ",[726,1127,1128],{},"surface-elevated"," and draws its footer divider with ",[726,1131,1132],{},"border-default",".\nIf both resolve to the same color, the divider blends into that background.",[696,1135,1136],{},"When a border should be visible, give it enough contrast against the surfaces\nit touches. Check the actual component in both light and dark modes, including\nhover and focus states, after changing either token or its foundation palette.\nDifferent token names or different scale steps alone do not guarantee a visible\nboundary. An intentionally blended border is also a valid design choice; each\nborder does not need to differ from every surface in your theme.",[696,1138,1139],{},"Selaras does not automatically adjust border colors or validate their contrast\nwhen you override CSS variables. For transparent components, check the actual\nbackground showing through, which may be your application's canvas.",[691,1141,1143],{"id":1142},"change-a-complete-foundation-palette","Change a complete foundation palette",[696,1145,1146],{},"The default foundations are Tailwind v4 theme variables.",[696,1148,1149],{},"For example, the default warning role uses the Selaras yellow foundation. You\ncan replace that foundation and keep the built-in warning recipe:",[824,1151,1153],{"className":826,"code":1152,"language":828,"meta":829,"style":829},"@theme {\n  --color-selaras-yellow-50: var(--color-orange-50);\n  --color-selaras-yellow-100: var(--color-orange-100);\n  --color-selaras-yellow-200: var(--color-orange-200);\n  --color-selaras-yellow-300: var(--color-orange-300);\n  --color-selaras-yellow-400: var(--color-orange-400);\n  --color-selaras-yellow-500: var(--color-orange-500);\n  --color-selaras-yellow-600: var(--color-orange-600);\n  --color-selaras-yellow-700: var(--color-orange-700);\n  --color-selaras-yellow-800: var(--color-orange-800);\n  --color-selaras-yellow-900: var(--color-orange-900);\n  --color-selaras-yellow-950: var(--color-orange-950);\n}\n",[726,1154,1155,1162,1167,1172,1177,1182,1187,1192,1197,1202,1207,1212,1217],{"__ignoreMap":829},[833,1156,1157,1160],{"class":835,"line":8},[833,1158,1159],{"class":860},"@theme",[833,1161,843],{"class":842},[833,1163,1164],{"class":835,"line":846},[833,1165,1166],{"class":842},"  --color-selaras-yellow-50: var(--color-orange-50);\n",[833,1168,1169],{"class":835,"line":867},[833,1170,1171],{"class":842},"  --color-selaras-yellow-100: var(--color-orange-100);\n",[833,1173,1174],{"class":835,"line":917},[833,1175,1176],{"class":842},"  --color-selaras-yellow-200: var(--color-orange-200);\n",[833,1178,1179],{"class":835,"line":930},[833,1180,1181],{"class":842},"  --color-selaras-yellow-300: var(--color-orange-300);\n",[833,1183,1184],{"class":835,"line":936},[833,1185,1186],{"class":842},"  --color-selaras-yellow-400: var(--color-orange-400);\n",[833,1188,1189],{"class":835,"line":949},[833,1190,1191],{"class":842},"  --color-selaras-yellow-500: var(--color-orange-500);\n",[833,1193,1194],{"class":835,"line":962},[833,1195,1196],{"class":842},"  --color-selaras-yellow-600: var(--color-orange-600);\n",[833,1198,1199],{"class":835,"line":967},[833,1200,1201],{"class":842},"  --color-selaras-yellow-700: var(--color-orange-700);\n",[833,1203,1204],{"class":835,"line":13},[833,1205,1206],{"class":842},"  --color-selaras-yellow-800: var(--color-orange-800);\n",[833,1208,1209],{"class":835,"line":151},[833,1210,1211],{"class":842},"  --color-selaras-yellow-900: var(--color-orange-900);\n",[833,1213,1214],{"class":835,"line":170},[833,1215,1216],{"class":842},"  --color-selaras-yellow-950: var(--color-orange-950);\n",[833,1218,1220],{"class":835,"line":1219},13,[833,1221,870],{"class":842},[696,1223,1224],{},"The warning role now uses your replacement foundation through its existing\nrecipe.",[696,1226,1227],{},"The same rule applies to:",[1229,1230,1231,1242,1250,1258,1266,1273,1280],"ul",{},[1232,1233,1234,1237,1238,1241],"li",{},[726,1235,1236],{},"blue"," for the default ",[726,1239,1240],{},"info"," role",[1232,1243,1244,1237,1247,1241],{},[726,1245,1246],{},"red",[726,1248,1249],{},"danger",[1232,1251,1252,1237,1255,1241],{},[726,1253,1254],{},"gray",[726,1256,1257],{},"neutral",[1232,1259,1260,1237,1263,1241],{},[726,1261,1262],{},"green",[726,1264,1265],{},"success",[1232,1267,1268,1237,1271,1241],{},[726,1269,1270],{},"yellow",[726,1272,768],{},[1232,1274,1275,1237,1278,1241],{},[726,1276,1277],{},"indigo",[726,1279,764],{},[1232,1281,1282,1237,1285,1241],{},[726,1283,1284],{},"plum",[726,1286,1287],{},"secondary",[696,1289,1290,1291,1293],{},"The Selaras gray foundation also supplies the default general surfaces, text,\nand borders. A change to the gray foundation can therefore change more than the\n",[726,1292,1257],{}," component role.",[691,1295,1297],{"id":1296},"map-an-existing-design-system","Map an existing design system",[696,1299,1300],{},"You do not have to rename your design tokens.",[696,1302,1303,1304,1307,1308,1311],{},"For example, your design system can use a ",[726,1305,1306],{},"10"," to ",[726,1309,1310],{},"100"," scale:",[824,1313,1315],{"className":826,"code":1314,"language":828,"meta":829,"style":829},":root {\n  --company-brand-10: ...;\n  --company-brand-20: ...;\n  --company-brand-30: ...;\n  --company-brand-40: ...;\n  --company-brand-50: ...;\n  --company-brand-60: ...;\n  --company-brand-70: ...;\n  --company-brand-80: ...;\n  --company-brand-90: ...;\n  --company-brand-100: ...;\n\n  --selaras-color-primary-fill: var(--company-brand-60);\n  --selaras-color-primary-fill-hover: var(--company-brand-70);\n  --selaras-color-primary-fill-pressed: var(--company-brand-80);\n  --selaras-color-primary-on-fill: var(--company-brand-10);\n\n  --selaras-color-primary-subtle: var(--company-brand-10);\n  --selaras-color-primary-subtle-hover: var(--company-brand-20);\n  --selaras-color-primary-subtle-pressed: var(--company-brand-30);\n  --selaras-color-primary-on-subtle: var(--company-brand-90);\n\n  --selaras-color-primary-text: var(--company-brand-70);\n  --selaras-color-primary-text-hover: var(--company-brand-80);\n  --selaras-color-primary-text-pressed: var(--company-brand-90);\n\n  --selaras-color-primary-border: var(--company-brand-50);\n  --selaras-color-primary-focus: var(--company-brand-60);\n}\n",[726,1316,1317,1323,1331,1338,1345,1352,1359,1366,1373,1380,1387,1394,1398,1417,1434,1450,1467,1472,1488,1505,1521,1537,1541,1556,1571,1586,1590,1606,1621],{"__ignoreMap":829},[833,1318,1319,1321],{"class":835,"line":8},[833,1320,839],{"class":838},[833,1322,843],{"class":842},[833,1324,1325,1328],{"class":835,"line":846},[833,1326,1327],{"class":849},"  --company-brand-10",[833,1329,1330],{"class":842},": ...;\n",[833,1332,1333,1336],{"class":835,"line":867},[833,1334,1335],{"class":849},"  --company-brand-20",[833,1337,1330],{"class":842},[833,1339,1340,1343],{"class":835,"line":917},[833,1341,1342],{"class":849},"  --company-brand-30",[833,1344,1330],{"class":842},[833,1346,1347,1350],{"class":835,"line":930},[833,1348,1349],{"class":849},"  --company-brand-40",[833,1351,1330],{"class":842},[833,1353,1354,1357],{"class":835,"line":936},[833,1355,1356],{"class":849},"  --company-brand-50",[833,1358,1330],{"class":842},[833,1360,1361,1364],{"class":835,"line":949},[833,1362,1363],{"class":849},"  --company-brand-60",[833,1365,1330],{"class":842},[833,1367,1368,1371],{"class":835,"line":962},[833,1369,1370],{"class":849},"  --company-brand-70",[833,1372,1330],{"class":842},[833,1374,1375,1378],{"class":835,"line":967},[833,1376,1377],{"class":849},"  --company-brand-80",[833,1379,1330],{"class":842},[833,1381,1382,1385],{"class":835,"line":13},[833,1383,1384],{"class":849},"  --company-brand-90",[833,1386,1330],{"class":842},[833,1388,1389,1392],{"class":835,"line":151},[833,1390,1391],{"class":849},"  --company-brand-100",[833,1393,1330],{"class":842},[833,1395,1396],{"class":835,"line":170},[833,1397,933],{"emptyLinePlaceholder":686},[833,1399,1400,1403,1405,1408,1411,1414],{"class":835,"line":1219},[833,1401,1402],{"class":849},"  --selaras-color-primary-fill",[833,1404,853],{"class":842},[833,1406,1407],{"class":856},"var",[833,1409,1410],{"class":842},"(",[833,1412,1413],{"class":849},"--company-brand-60",[833,1415,1416],{"class":842},");\n",[833,1418,1420,1423,1425,1427,1429,1432],{"class":835,"line":1419},14,[833,1421,1422],{"class":849},"  --selaras-color-primary-fill-hover",[833,1424,853],{"class":842},[833,1426,1407],{"class":856},[833,1428,1410],{"class":842},[833,1430,1431],{"class":849},"--company-brand-70",[833,1433,1416],{"class":842},[833,1435,1436,1439,1441,1443,1445,1448],{"class":835,"line":648},[833,1437,1438],{"class":849},"  --selaras-color-primary-fill-pressed",[833,1440,853],{"class":842},[833,1442,1407],{"class":856},[833,1444,1410],{"class":842},[833,1446,1447],{"class":849},"--company-brand-80",[833,1449,1416],{"class":842},[833,1451,1453,1456,1458,1460,1462,1465],{"class":835,"line":1452},16,[833,1454,1455],{"class":849},"  --selaras-color-primary-on-fill",[833,1457,853],{"class":842},[833,1459,1407],{"class":856},[833,1461,1410],{"class":842},[833,1463,1464],{"class":849},"--company-brand-10",[833,1466,1416],{"class":842},[833,1468,1470],{"class":835,"line":1469},17,[833,1471,933],{"emptyLinePlaceholder":686},[833,1473,1475,1478,1480,1482,1484,1486],{"class":835,"line":1474},18,[833,1476,1477],{"class":849},"  --selaras-color-primary-subtle",[833,1479,853],{"class":842},[833,1481,1407],{"class":856},[833,1483,1410],{"class":842},[833,1485,1464],{"class":849},[833,1487,1416],{"class":842},[833,1489,1491,1494,1496,1498,1500,1503],{"class":835,"line":1490},19,[833,1492,1493],{"class":849},"  --selaras-color-primary-subtle-hover",[833,1495,853],{"class":842},[833,1497,1407],{"class":856},[833,1499,1410],{"class":842},[833,1501,1502],{"class":849},"--company-brand-20",[833,1504,1416],{"class":842},[833,1506,1507,1510,1512,1514,1516,1519],{"class":835,"line":30},[833,1508,1509],{"class":849},"  --selaras-color-primary-subtle-pressed",[833,1511,853],{"class":842},[833,1513,1407],{"class":856},[833,1515,1410],{"class":842},[833,1517,1518],{"class":849},"--company-brand-30",[833,1520,1416],{"class":842},[833,1522,1523,1526,1528,1530,1532,1535],{"class":835,"line":247},[833,1524,1525],{"class":849},"  --selaras-color-primary-on-subtle",[833,1527,853],{"class":842},[833,1529,1407],{"class":856},[833,1531,1410],{"class":842},[833,1533,1534],{"class":849},"--company-brand-90",[833,1536,1416],{"class":842},[833,1538,1539],{"class":835,"line":257},[833,1540,933],{"emptyLinePlaceholder":686},[833,1542,1543,1546,1548,1550,1552,1554],{"class":835,"line":272},[833,1544,1545],{"class":849},"  --selaras-color-primary-text",[833,1547,853],{"class":842},[833,1549,1407],{"class":856},[833,1551,1410],{"class":842},[833,1553,1431],{"class":849},[833,1555,1416],{"class":842},[833,1557,1558,1561,1563,1565,1567,1569],{"class":835,"line":287},[833,1559,1560],{"class":849},"  --selaras-color-primary-text-hover",[833,1562,853],{"class":842},[833,1564,1407],{"class":856},[833,1566,1410],{"class":842},[833,1568,1447],{"class":849},[833,1570,1416],{"class":842},[833,1572,1573,1576,1578,1580,1582,1584],{"class":835,"line":292},[833,1574,1575],{"class":849},"  --selaras-color-primary-text-pressed",[833,1577,853],{"class":842},[833,1579,1407],{"class":856},[833,1581,1410],{"class":842},[833,1583,1534],{"class":849},[833,1585,1416],{"class":842},[833,1587,1588],{"class":835,"line":302},[833,1589,933],{"emptyLinePlaceholder":686},[833,1591,1592,1595,1597,1599,1601,1604],{"class":835,"line":307},[833,1593,1594],{"class":849},"  --selaras-color-primary-border",[833,1596,853],{"class":842},[833,1598,1407],{"class":856},[833,1600,1410],{"class":842},[833,1602,1603],{"class":849},"--company-brand-50",[833,1605,1416],{"class":842},[833,1607,1608,1611,1613,1615,1617,1619],{"class":835,"line":312},[833,1609,1610],{"class":849},"  --selaras-color-primary-focus",[833,1612,853],{"class":842},[833,1614,1407],{"class":856},[833,1616,1410],{"class":842},[833,1618,1413],{"class":849},[833,1620,1416],{"class":842},[833,1622,1623],{"class":835,"line":326},[833,1624,870],{"class":842},[696,1626,1627],{},"Map the neutral foundations as well as component color roles. For example,\nif your existing system exposes these surface and divider tokens:",[824,1629,1631],{"className":826,"code":1630,"language":828,"meta":829,"style":829},":root {\n  --selaras-surface-canvas: var(--company-canvas-light);\n  --selaras-surface-default: var(--company-panel-light);\n  --selaras-surface-elevated: var(--company-sidebar-light);\n\n  --selaras-border-default: var(--company-divider-light);\n  --selaras-border-muted: var(--company-divider-subtle-light);\n  --selaras-border-hover: var(--company-divider-hover-light);\n}\n\n:root.dark {\n  --selaras-surface-canvas: var(--company-canvas-dark);\n  --selaras-surface-default: var(--company-panel-dark);\n  --selaras-surface-elevated: var(--company-sidebar-dark);\n\n  --selaras-border-default: var(--company-divider-dark);\n  --selaras-border-muted: var(--company-divider-subtle-dark);\n  --selaras-border-hover: var(--company-divider-hover-dark);\n}\n",[726,1632,1633,1639,1654,1669,1684,1688,1703,1719,1734,1738,1742,1748,1763,1778,1793,1797,1812,1827,1842],{"__ignoreMap":829},[833,1634,1635,1637],{"class":835,"line":8},[833,1636,839],{"class":838},[833,1638,843],{"class":842},[833,1640,1641,1643,1645,1647,1649,1652],{"class":835,"line":846},[833,1642,896],{"class":849},[833,1644,853],{"class":842},[833,1646,1407],{"class":856},[833,1648,1410],{"class":842},[833,1650,1651],{"class":849},"--company-canvas-light",[833,1653,1416],{"class":842},[833,1655,1656,1658,1660,1662,1664,1667],{"class":835,"line":867},[833,1657,907],{"class":849},[833,1659,853],{"class":842},[833,1661,1407],{"class":856},[833,1663,1410],{"class":842},[833,1665,1666],{"class":849},"--company-panel-light",[833,1668,1416],{"class":842},[833,1670,1671,1673,1675,1677,1679,1682],{"class":835,"line":917},[833,1672,920],{"class":849},[833,1674,853],{"class":842},[833,1676,1407],{"class":856},[833,1678,1410],{"class":842},[833,1680,1681],{"class":849},"--company-sidebar-light",[833,1683,1416],{"class":842},[833,1685,1686],{"class":835,"line":930},[833,1687,933],{"emptyLinePlaceholder":686},[833,1689,1690,1692,1694,1696,1698,1701],{"class":835,"line":936},[833,1691,970],{"class":849},[833,1693,853],{"class":842},[833,1695,1407],{"class":856},[833,1697,1410],{"class":842},[833,1699,1700],{"class":849},"--company-divider-light",[833,1702,1416],{"class":842},[833,1704,1705,1708,1710,1712,1714,1717],{"class":835,"line":949},[833,1706,1707],{"class":849},"  --selaras-border-muted",[833,1709,853],{"class":842},[833,1711,1407],{"class":856},[833,1713,1410],{"class":842},[833,1715,1716],{"class":849},"--company-divider-subtle-light",[833,1718,1416],{"class":842},[833,1720,1721,1723,1725,1727,1729,1732],{"class":835,"line":962},[833,1722,982],{"class":849},[833,1724,853],{"class":842},[833,1726,1407],{"class":856},[833,1728,1410],{"class":842},[833,1730,1731],{"class":849},"--company-divider-hover-light",[833,1733,1416],{"class":842},[833,1735,1736],{"class":835,"line":967},[833,1737,870],{"class":842},[833,1739,1740],{"class":835,"line":13},[833,1741,933],{"emptyLinePlaceholder":686},[833,1743,1744,1746],{"class":835,"line":151},[833,1745,999],{"class":838},[833,1747,843],{"class":842},[833,1749,1750,1752,1754,1756,1758,1761],{"class":835,"line":170},[833,1751,896],{"class":849},[833,1753,853],{"class":842},[833,1755,1407],{"class":856},[833,1757,1410],{"class":842},[833,1759,1760],{"class":849},"--company-canvas-dark",[833,1762,1416],{"class":842},[833,1764,1765,1767,1769,1771,1773,1776],{"class":835,"line":1219},[833,1766,907],{"class":849},[833,1768,853],{"class":842},[833,1770,1407],{"class":856},[833,1772,1410],{"class":842},[833,1774,1775],{"class":849},"--company-panel-dark",[833,1777,1416],{"class":842},[833,1779,1780,1782,1784,1786,1788,1791],{"class":835,"line":1419},[833,1781,920],{"class":849},[833,1783,853],{"class":842},[833,1785,1407],{"class":856},[833,1787,1410],{"class":842},[833,1789,1790],{"class":849},"--company-sidebar-dark",[833,1792,1416],{"class":842},[833,1794,1795],{"class":835,"line":648},[833,1796,933],{"emptyLinePlaceholder":686},[833,1798,1799,1801,1803,1805,1807,1810],{"class":835,"line":1452},[833,1800,970],{"class":849},[833,1802,853],{"class":842},[833,1804,1407],{"class":856},[833,1806,1410],{"class":842},[833,1808,1809],{"class":849},"--company-divider-dark",[833,1811,1416],{"class":842},[833,1813,1814,1816,1818,1820,1822,1825],{"class":835,"line":1469},[833,1815,1707],{"class":849},[833,1817,853],{"class":842},[833,1819,1407],{"class":856},[833,1821,1410],{"class":842},[833,1823,1824],{"class":849},"--company-divider-subtle-dark",[833,1826,1416],{"class":842},[833,1828,1829,1831,1833,1835,1837,1840],{"class":835,"line":1474},[833,1830,982],{"class":849},[833,1832,853],{"class":842},[833,1834,1407],{"class":856},[833,1836,1410],{"class":842},[833,1838,1839],{"class":849},"--company-divider-hover-dark",[833,1841,1416],{"class":842},[833,1843,1844],{"class":835,"line":1490},[833,1845,870],{"class":842},[696,1847,1848,1849,1852,1853,1856],{},"Define the ",[726,1850,1851],{},"--company-*"," variables in your own system. Choose divider values\nthat remain visible on the panels and sidebar where you need a boundary; do\nnot automatically map a border to the same scale entry as its background.\nSee ",[1123,1854,1113],{"href":1855},"#check-borders-against-their-surfaces",".",[696,1858,1859,1860,1863],{},"Your design system stays the source of truth. The ",[726,1861,1862],{},"--selaras-*"," variables are\nthe mapping layer.",[691,1865,1867],{"id":1866},"use-your-own-complete-theme","Use your own complete theme",[696,1869,1870],{},"Most applications should import the default theme:",[824,1872,1874],{"className":826,"code":1873,"language":828,"meta":829,"style":829},"@import \"tailwindcss\";\n@import \"@sewadah\u002Fselaras\";\n@import \"#selaras\u002Ftailwind.css\";\n",[726,1875,1876,1887,1896],{"__ignoreMap":829},[833,1877,1878,1881,1885],{"class":835,"line":8},[833,1879,1880],{"class":860},"@import",[833,1882,1884],{"class":1883},"sZZnC"," \"tailwindcss\"",[833,1886,864],{"class":842},[833,1888,1889,1891,1894],{"class":835,"line":846},[833,1890,1880],{"class":860},[833,1892,1893],{"class":1883}," \"@sewadah\u002Fselaras\"",[833,1895,864],{"class":842},[833,1897,1898,1900,1903],{"class":835,"line":867},[833,1899,1880],{"class":860},[833,1901,1902],{"class":1883}," \"#selaras\u002Ftailwind.css\"",[833,1904,864],{"class":842},[696,1906,1907],{},"A mature design system can omit Selaras-owned foundation colors:",[824,1909,1911],{"className":826,"code":1910,"language":828,"meta":829,"style":829},"@import \"tailwindcss\";\n@import \"@sewadah\u002Fselaras\u002Fstructural.css\";\n@import \"#selaras\u002Ftailwind.css\";\n",[726,1912,1913,1921,1930],{"__ignoreMap":829},[833,1914,1915,1917,1919],{"class":835,"line":8},[833,1916,1880],{"class":860},[833,1918,1884],{"class":1883},[833,1920,864],{"class":842},[833,1922,1923,1925,1928],{"class":835,"line":846},[833,1924,1880],{"class":860},[833,1926,1927],{"class":1883}," \"@sewadah\u002Fselaras\u002Fstructural.css\"",[833,1929,864],{"class":842},[833,1931,1932,1934,1936],{"class":835,"line":867},[833,1933,1880],{"class":860},[833,1935,1902],{"class":1883},[833,1937,864],{"class":842},[696,1939,1940],{},"Then provide all semantic values that your application uses.",[696,1942,1943,1946],{},[726,1944,1945],{},"structural.css"," still supplies:",[1229,1948,1949,1952,1955,1958,1961],{},[1232,1950,1951],{},"Selaras source discovery for Tailwind",[1232,1953,1954],{},"variants",[1232,1956,1957],{},"animations",[1232,1959,1960],{},"structural CSS",[1232,1962,1963],{},"semantic read bindings",[696,1965,1966],{},"It does not supply the default Selaras foundation palette.",[696,1968,1969],{},"This mode is for a complete external theme. It is not an automatic unthemed\nfallback.",[691,1971,1973],{"id":1972},"radius-shadows-stacking-and-tailwind-tokens","Radius, shadows, stacking, and Tailwind tokens",[696,1975,1976],{},"Radius uses one base input by default:",[824,1978,1980],{"className":826,"code":1979,"language":828,"meta":829,"style":829},":root {\n  --selaras-radius-base: 0.25rem;\n}\n",[726,1981,1982,1988,2001],{"__ignoreMap":829},[833,1983,1984,1986],{"class":835,"line":8},[833,1985,839],{"class":838},[833,1987,843],{"class":842},[833,1989,1990,1992,1994,1997,1999],{"class":835,"line":846},[833,1991,850],{"class":849},[833,1993,853],{"class":842},[833,1995,1996],{"class":856},"0.25",[833,1998,861],{"class":860},[833,2000,864],{"class":842},[833,2002,2003],{"class":835,"line":867},[833,2004,870],{"class":842},[696,2006,2007],{},"Selaras derives its default small, medium, and large radius values from this\nbase. You can override each radius input separately if you need to.",[696,2009,2010],{},"You can also set shadows and stacking values:",[824,2012,2014],{"className":826,"code":2013,"language":828,"meta":829,"style":829},":root {\n  --selaras-shadow-sm: 0 1px 2px rgb(0 0 0 \u002F 0.06);\n  --selaras-shadow-md: 0 4px 16px -2px rgb(0 0 0 \u002F 0.12);\n  --selaras-shadow-lg: 0 12px 32px -4px rgb(0 0 0 \u002F 0.16);\n\n  --selaras-z-modal-overlay: 40;\n  --selaras-z-modal: 50;\n  --selaras-z-dropdown: 60;\n  --selaras-z-tooltip: 70;\n  --selaras-z-toast: 80;\n}\n",[726,2015,2016,2022,2063,2104,2145,2149,2161,2173,2185,2197,2209],{"__ignoreMap":829},[833,2017,2018,2020],{"class":835,"line":8},[833,2019,839],{"class":838},[833,2021,843],{"class":842},[833,2023,2024,2027,2029,2032,2035,2038,2041,2043,2046,2048,2050,2053,2055,2058,2061],{"class":835,"line":846},[833,2025,2026],{"class":849},"  --selaras-shadow-sm",[833,2028,853],{"class":842},[833,2030,2031],{"class":856},"0",[833,2033,2034],{"class":856}," 1",[833,2036,2037],{"class":860},"px",[833,2039,2040],{"class":856}," 2",[833,2042,2037],{"class":860},[833,2044,2045],{"class":856}," rgb",[833,2047,1410],{"class":842},[833,2049,2031],{"class":856},[833,2051,2052],{"class":856}," 0",[833,2054,2052],{"class":856},[833,2056,2057],{"class":842}," \u002F ",[833,2059,2060],{"class":856},"0.06",[833,2062,1416],{"class":842},[833,2064,2065,2068,2070,2072,2075,2077,2080,2082,2085,2087,2089,2091,2093,2095,2097,2099,2102],{"class":835,"line":867},[833,2066,2067],{"class":849},"  --selaras-shadow-md",[833,2069,853],{"class":842},[833,2071,2031],{"class":856},[833,2073,2074],{"class":856}," 4",[833,2076,2037],{"class":860},[833,2078,2079],{"class":856}," 16",[833,2081,2037],{"class":860},[833,2083,2084],{"class":856}," -2",[833,2086,2037],{"class":860},[833,2088,2045],{"class":856},[833,2090,1410],{"class":842},[833,2092,2031],{"class":856},[833,2094,2052],{"class":856},[833,2096,2052],{"class":856},[833,2098,2057],{"class":842},[833,2100,2101],{"class":856},"0.12",[833,2103,1416],{"class":842},[833,2105,2106,2109,2111,2113,2116,2118,2121,2123,2126,2128,2130,2132,2134,2136,2138,2140,2143],{"class":835,"line":917},[833,2107,2108],{"class":849},"  --selaras-shadow-lg",[833,2110,853],{"class":842},[833,2112,2031],{"class":856},[833,2114,2115],{"class":856}," 12",[833,2117,2037],{"class":860},[833,2119,2120],{"class":856}," 32",[833,2122,2037],{"class":860},[833,2124,2125],{"class":856}," -4",[833,2127,2037],{"class":860},[833,2129,2045],{"class":856},[833,2131,1410],{"class":842},[833,2133,2031],{"class":856},[833,2135,2052],{"class":856},[833,2137,2052],{"class":856},[833,2139,2057],{"class":842},[833,2141,2142],{"class":856},"0.16",[833,2144,1416],{"class":842},[833,2146,2147],{"class":835,"line":930},[833,2148,933],{"emptyLinePlaceholder":686},[833,2150,2151,2154,2156,2159],{"class":835,"line":936},[833,2152,2153],{"class":849},"  --selaras-z-modal-overlay",[833,2155,853],{"class":842},[833,2157,2158],{"class":856},"40",[833,2160,864],{"class":842},[833,2162,2163,2166,2168,2171],{"class":835,"line":949},[833,2164,2165],{"class":849},"  --selaras-z-modal",[833,2167,853],{"class":842},[833,2169,2170],{"class":856},"50",[833,2172,864],{"class":842},[833,2174,2175,2178,2180,2183],{"class":835,"line":962},[833,2176,2177],{"class":849},"  --selaras-z-dropdown",[833,2179,853],{"class":842},[833,2181,2182],{"class":856},"60",[833,2184,864],{"class":842},[833,2186,2187,2190,2192,2195],{"class":835,"line":967},[833,2188,2189],{"class":849},"  --selaras-z-tooltip",[833,2191,853],{"class":842},[833,2193,2194],{"class":856},"70",[833,2196,864],{"class":842},[833,2198,2199,2202,2204,2207],{"class":835,"line":13},[833,2200,2201],{"class":849},"  --selaras-z-toast",[833,2203,853],{"class":842},[833,2205,2206],{"class":856},"80",[833,2208,864],{"class":842},[833,2210,2211],{"class":835,"line":151},[833,2212,870],{"class":842},[696,2214,2215],{},"Spacing and normal Tailwind breakpoints are Tailwind tokens, not Selaras theme\ntokens:",[824,2217,2219],{"className":826,"code":2218,"language":828,"meta":829,"style":829},"@theme {\n  --breakpoint-3xl: 1920px;\n  --spacing: 0.2rem;\n}\n",[726,2220,2221,2227,2232,2237],{"__ignoreMap":829},[833,2222,2223,2225],{"class":835,"line":8},[833,2224,1159],{"class":860},[833,2226,843],{"class":842},[833,2228,2229],{"class":835,"line":846},[833,2230,2231],{"class":842},"  --breakpoint-3xl: 1920px;\n",[833,2233,2234],{"class":835,"line":867},[833,2235,2236],{"class":842},"  --spacing: 0.2rem;\n",[833,2238,2239],{"class":835,"line":917},[833,2240,870],{"class":842},[696,2242,2243,2244,2247,2248,1856],{},"The adaptive Selaras presentation uses the Tailwind breakpoint name selected by\n",[726,2245,2246],{},"selaras.adaptive.breakpoint",". The default name is ",[726,2249,2250],{},"md",[2252,2253,2254],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":829,"searchDepth":867,"depth":867,"links":2256},[2257,2258,2259,2260,2261,2262,2263],{"id":693,"depth":867,"text":694},{"id":818,"depth":867,"text":819},{"id":1112,"depth":867,"text":1113},{"id":1142,"depth":867,"text":1143},{"id":1296,"depth":867,"text":1297},{"id":1866,"depth":867,"text":1867},{"id":1972,"depth":867,"text":1973},"Customize semantic tokens and foundation palettes in CSS.",{},{"title":79,"description":2264},"ZrPcqS6TkThSd_8emJNvjILZ_NpVl1e6V7JQ6pKvUNM",{"id":2269,"title":2270,"aside":686,"body":2271,"collapse":10,"description":3631,"editLink":686,"extension":2250,"icon":9,"issueLink":686,"meta":3632,"navBadges":9,"navigation":9,"order":30,"path":3633,"prevNext":686,"seo":3634,"stem":3635,"toc":686,"__hash__":3636},"docs\u002Fid\u002Foverview\u002Ftheming\u002Fcss-tokens.md","Token CSS",{"type":688,"value":2272,"toc":3622},[2273,2277,2280,2283,2373,2379,2383,2386,2412,2415,2421,2513,2518,2610,2619,2623,2640,2643,2646,2650,2653,2656,2714,2717,2720,2766,2771,2775,2778,2786,3058,3061,3265,3274,3280,3284,3287,3315,3318,3346,3349,3354,3370,3373,3376,3380,3383,3409,3412,3415,3587,3590,3612,3620],[691,2274,2276],{"id":2275},"mulai-dari-css","Mulai dari CSS",[696,2278,2279],{},"Untuk sebagian besar perubahan tema, edit CSS saja.",[696,2281,2282],{},"Selaras memiliki variabel input publik. Kelompok utama adalah:",[703,2284,2285,2294],{},[706,2286,2287],{},[709,2288,2289,2291],{},[712,2290,216],{},[712,2292,2293],{},"Tujuan",[718,2295,2296,2305,2314,2323,2337,2346,2355,2364],{},[709,2297,2298,2302],{},[723,2299,2300],{},[726,2301,728],{},[723,2303,2304],{},"Warna halaman dan permukaan",[709,2306,2307,2311],{},[723,2308,2309],{},[726,2310,738],{},[723,2312,2313],{},"Warna teks umum",[709,2315,2316,2320],{},[723,2317,2318],{},[726,2319,748],{},[723,2321,2322],{},"Warna border umum",[709,2324,2325,2329],{},[723,2326,2327],{},[726,2328,758],{},[723,2330,2331,2332,2334,2335],{},"Role warna komponen, seperti ",[726,2333,764],{}," atau ",[726,2336,768],{},[709,2338,2339,2343],{},[723,2340,2341],{},[726,2342,775],{},[723,2344,2345],{},"Radius sudut",[709,2347,2348,2352],{},[723,2349,2350],{},[726,2351,785],{},[723,2353,2354],{},"Nilai bayangan",[709,2356,2357,2361],{},[723,2358,2359],{},[726,2360,795],{},[723,2362,2363],{},"Penumpukan overlay",[709,2365,2366,2370],{},[723,2367,2368],{},[726,2369,805],{},[723,2371,2372],{},"Backdrop overlay",[696,2374,2375,2376,2378],{},"Selaras juga memiliki variabel ",[726,2377,814],{},". Ini adalah nilai efektif yang dibaca. Jangan gunakan sebagai input tema.",[691,2380,2382],{"id":2381},"perubahan-css-kecil","Perubahan CSS kecil",[696,2384,2385],{},"Anda dapat mengubah satu nilai:",[824,2387,2388],{"className":826,"code":827,"language":828,"meta":829,"style":829},[726,2389,2390,2396,2408],{"__ignoreMap":829},[833,2391,2392,2394],{"class":835,"line":8},[833,2393,839],{"class":838},[833,2395,843],{"class":842},[833,2397,2398,2400,2402,2404,2406],{"class":835,"line":846},[833,2399,850],{"class":849},[833,2401,853],{"class":842},[833,2403,857],{"class":856},[833,2405,861],{"class":860},[833,2407,864],{"class":842},[833,2409,2410],{"class":835,"line":867},[833,2411,870],{"class":842},[696,2413,2414],{},"Atau Anda dapat mengubah permukaan dan teks umum:",[696,2416,2417,2418,2420],{},"Canvas terang berwarna putih secara default. Dashboard yang banyak kartunya dapat menggunakan canvas halus seperti ",[726,2419,879],{}," sambil mempertahankan permukaan komponen putih:",[824,2422,2423],{"className":826,"code":883,"language":828,"meta":829,"style":829},[726,2424,2425,2431,2441,2451,2461,2465,2475,2485,2489,2499,2509],{"__ignoreMap":829},[833,2426,2427,2429],{"class":835,"line":8},[833,2428,839],{"class":838},[833,2430,843],{"class":842},[833,2432,2433,2435,2437,2439],{"class":835,"line":846},[833,2434,896],{"class":849},[833,2436,853],{"class":842},[833,2438,879],{"class":856},[833,2440,864],{"class":842},[833,2442,2443,2445,2447,2449],{"class":835,"line":867},[833,2444,907],{"class":849},[833,2446,853],{"class":842},[833,2448,912],{"class":856},[833,2450,864],{"class":842},[833,2452,2453,2455,2457,2459],{"class":835,"line":917},[833,2454,920],{"class":849},[833,2456,853],{"class":842},[833,2458,925],{"class":856},[833,2460,864],{"class":842},[833,2462,2463],{"class":835,"line":930},[833,2464,933],{"emptyLinePlaceholder":686},[833,2466,2467,2469,2471,2473],{"class":835,"line":936},[833,2468,939],{"class":849},[833,2470,853],{"class":842},[833,2472,944],{"class":856},[833,2474,864],{"class":842},[833,2476,2477,2479,2481,2483],{"class":835,"line":949},[833,2478,952],{"class":849},[833,2480,853],{"class":842},[833,2482,957],{"class":856},[833,2484,864],{"class":842},[833,2486,2487],{"class":835,"line":962},[833,2488,933],{"emptyLinePlaceholder":686},[833,2490,2491,2493,2495,2497],{"class":835,"line":967},[833,2492,970],{"class":849},[833,2494,853],{"class":842},[833,2496,975],{"class":856},[833,2498,864],{"class":842},[833,2500,2501,2503,2505,2507],{"class":835,"line":13},[833,2502,982],{"class":849},[833,2504,853],{"class":842},[833,2506,987],{"class":856},[833,2508,864],{"class":842},[833,2510,2511],{"class":835,"line":151},[833,2512,870],{"class":842},[696,2514,2515,2516,1000],{},"Untuk dark mode, timpa input yang sama di bawah ",[726,2517,999],{},[824,2519,2520],{"className":826,"code":1003,"language":828,"meta":829,"style":829},[726,2521,2522,2528,2538,2548,2558,2562,2572,2582,2586,2596,2606],{"__ignoreMap":829},[833,2523,2524,2526],{"class":835,"line":8},[833,2525,999],{"class":838},[833,2527,843],{"class":842},[833,2529,2530,2532,2534,2536],{"class":835,"line":846},[833,2531,896],{"class":849},[833,2533,853],{"class":842},[833,2535,1020],{"class":856},[833,2537,864],{"class":842},[833,2539,2540,2542,2544,2546],{"class":835,"line":867},[833,2541,907],{"class":849},[833,2543,853],{"class":842},[833,2545,1031],{"class":856},[833,2547,864],{"class":842},[833,2549,2550,2552,2554,2556],{"class":835,"line":917},[833,2551,920],{"class":849},[833,2553,853],{"class":842},[833,2555,944],{"class":856},[833,2557,864],{"class":842},[833,2559,2560],{"class":835,"line":930},[833,2561,933],{"emptyLinePlaceholder":686},[833,2563,2564,2566,2568,2570],{"class":835,"line":936},[833,2565,939],{"class":849},[833,2567,853],{"class":842},[833,2569,925],{"class":856},[833,2571,864],{"class":842},[833,2573,2574,2576,2578,2580],{"class":835,"line":949},[833,2575,952],{"class":849},[833,2577,853],{"class":842},[833,2579,1066],{"class":856},[833,2581,864],{"class":842},[833,2583,2584],{"class":835,"line":962},[833,2585,933],{"emptyLinePlaceholder":686},[833,2587,2588,2590,2592,2594],{"class":835,"line":967},[833,2589,970],{"class":849},[833,2591,853],{"class":842},[833,2593,1081],{"class":856},[833,2595,864],{"class":842},[833,2597,2598,2600,2602,2604],{"class":835,"line":13},[833,2599,982],{"class":849},[833,2601,853],{"class":842},[833,2603,1092],{"class":856},[833,2605,864],{"class":842},[833,2607,2608],{"class":835,"line":151},[833,2609,870],{"class":842},[696,2611,2612,2613,2615,2616,2618],{},"Selaras mengikuti kelas ",[726,2614,1104],{}," pada ",[726,2617,1108],{}," untuk tema dokumen.",[691,2620,2622],{"id":2621},"periksa-border-terhadap-permukaannya","Periksa border terhadap permukaannya",[696,2624,2625,2627,2628,2630,2631,2633,2634,2636,2637,2639],{},[726,2626,728],{}," dan ",[726,2629,748],{}," adalah input independen. Tema komponen memilih mana yang dipasangkan. Misalnya,\n",[1123,2632,540],{"href":541}," mengecat background-nya\ndengan ",[726,2635,1128],{}," dan menggambar pembatas footer-nya dengan ",[726,2638,1132],{},".\nJika keduanya diresolve ke warna yang sama, pembatas menyatu dengan background tersebut.",[696,2641,2642],{},"Ketika border harus terlihat, berikan kontras yang cukup terhadap permukaan yang disentuhnya. Periksa komponen aktual dalam mode terang dan gelap, termasuk hover dan fokus, setelah mengubah token atau palet fondasinya. Nama token atau langkah skala yang berbeda saja tidak menjamin batas yang terlihat. Border yang sengaja menyatu juga merupakan pilihan desain yang valid; setiap border tidak perlu berbeda dari setiap permukaan dalam tema Anda.",[696,2644,2645],{},"Selaras tidak secara otomatis menyesuaikan warna border atau memvalidasi kontrasnya\nsaat Anda menimpa variabel CSS. Untuk komponen transparan, periksa background aktual yang menonjol, yang mungkin adalah canvas aplikasi Anda.",[691,2647,2649],{"id":2648},"ubah-palet-fondasi-lengkap","Ubah palet fondasi lengkap",[696,2651,2652],{},"Fondasi default adalah variabel tema Tailwind v4.",[696,2654,2655],{},"Misalnya, role warning default menggunakan palet kuning Selaras. Anda\ndapat mengganti fondasi tersebut dan tetap mempertahankan resep warning bawaan:",[824,2657,2658],{"className":826,"code":1152,"language":828,"meta":829,"style":829},[726,2659,2660,2666,2670,2674,2678,2682,2686,2690,2694,2698,2702,2706,2710],{"__ignoreMap":829},[833,2661,2662,2664],{"class":835,"line":8},[833,2663,1159],{"class":860},[833,2665,843],{"class":842},[833,2667,2668],{"class":835,"line":846},[833,2669,1166],{"class":842},[833,2671,2672],{"class":835,"line":867},[833,2673,1171],{"class":842},[833,2675,2676],{"class":835,"line":917},[833,2677,1176],{"class":842},[833,2679,2680],{"class":835,"line":930},[833,2681,1181],{"class":842},[833,2683,2684],{"class":835,"line":936},[833,2685,1186],{"class":842},[833,2687,2688],{"class":835,"line":949},[833,2689,1191],{"class":842},[833,2691,2692],{"class":835,"line":962},[833,2693,1196],{"class":842},[833,2695,2696],{"class":835,"line":967},[833,2697,1201],{"class":842},[833,2699,2700],{"class":835,"line":13},[833,2701,1206],{"class":842},[833,2703,2704],{"class":835,"line":151},[833,2705,1211],{"class":842},[833,2707,2708],{"class":835,"line":170},[833,2709,1216],{"class":842},[833,2711,2712],{"class":835,"line":1219},[833,2713,870],{"class":842},[696,2715,2716],{},"Role warning sekarang menggunakan pengganti fondasi Anda melalui resep yang sudah ada.",[696,2718,2719],{},"Aturan yang sama berlaku untuk:",[1229,2721,2722,2730,2736,2742,2748,2754,2760],{},[1232,2723,2724,2726,2727,2729],{},[726,2725,1236],{}," untuk role ",[726,2728,1240],{}," default",[1232,2731,2732,2726,2734,2729],{},[726,2733,1246],{},[726,2735,1249],{},[1232,2737,2738,2726,2740,2729],{},[726,2739,1254],{},[726,2741,1257],{},[1232,2743,2744,2726,2746,2729],{},[726,2745,1262],{},[726,2747,1265],{},[1232,2749,2750,2726,2752,2729],{},[726,2751,1270],{},[726,2753,768],{},[1232,2755,2756,2726,2758,2729],{},[726,2757,1277],{},[726,2759,764],{},[1232,2761,2762,2726,2764,2729],{},[726,2763,1284],{},[726,2765,1287],{},[696,2767,2768,2769,1856],{},"Fondasi abu-abu Selaras juga menyediakan permukaan umum, teks,\ndan border default. Perubahan pada fondasi abu-abu karena itu dapat mengubah lebih dari role komponen ",[726,2770,1257],{},[691,2772,2774],{"id":2773},"petakan-sistem-desain-yang-ada","Petakan sistem desain yang ada",[696,2776,2777],{},"Anda tidak harus mengubah nama token desain Anda.",[696,2779,2780,2781,2783,2784,1000],{},"Misalnya, sistem desain Anda dapat menggunakan skala ",[726,2782,1306],{}," sampai ",[726,2785,1310],{},[824,2787,2788],{"className":826,"code":1314,"language":828,"meta":829,"style":829},[726,2789,2790,2796,2802,2808,2814,2820,2826,2832,2838,2844,2850,2856,2860,2874,2888,2902,2916,2920,2934,2948,2962,2976,2980,2994,3008,3022,3026,3040,3054],{"__ignoreMap":829},[833,2791,2792,2794],{"class":835,"line":8},[833,2793,839],{"class":838},[833,2795,843],{"class":842},[833,2797,2798,2800],{"class":835,"line":846},[833,2799,1327],{"class":849},[833,2801,1330],{"class":842},[833,2803,2804,2806],{"class":835,"line":867},[833,2805,1335],{"class":849},[833,2807,1330],{"class":842},[833,2809,2810,2812],{"class":835,"line":917},[833,2811,1342],{"class":849},[833,2813,1330],{"class":842},[833,2815,2816,2818],{"class":835,"line":930},[833,2817,1349],{"class":849},[833,2819,1330],{"class":842},[833,2821,2822,2824],{"class":835,"line":936},[833,2823,1356],{"class":849},[833,2825,1330],{"class":842},[833,2827,2828,2830],{"class":835,"line":949},[833,2829,1363],{"class":849},[833,2831,1330],{"class":842},[833,2833,2834,2836],{"class":835,"line":962},[833,2835,1370],{"class":849},[833,2837,1330],{"class":842},[833,2839,2840,2842],{"class":835,"line":967},[833,2841,1377],{"class":849},[833,2843,1330],{"class":842},[833,2845,2846,2848],{"class":835,"line":13},[833,2847,1384],{"class":849},[833,2849,1330],{"class":842},[833,2851,2852,2854],{"class":835,"line":151},[833,2853,1391],{"class":849},[833,2855,1330],{"class":842},[833,2857,2858],{"class":835,"line":170},[833,2859,933],{"emptyLinePlaceholder":686},[833,2861,2862,2864,2866,2868,2870,2872],{"class":835,"line":1219},[833,2863,1402],{"class":849},[833,2865,853],{"class":842},[833,2867,1407],{"class":856},[833,2869,1410],{"class":842},[833,2871,1413],{"class":849},[833,2873,1416],{"class":842},[833,2875,2876,2878,2880,2882,2884,2886],{"class":835,"line":1419},[833,2877,1422],{"class":849},[833,2879,853],{"class":842},[833,2881,1407],{"class":856},[833,2883,1410],{"class":842},[833,2885,1431],{"class":849},[833,2887,1416],{"class":842},[833,2889,2890,2892,2894,2896,2898,2900],{"class":835,"line":648},[833,2891,1438],{"class":849},[833,2893,853],{"class":842},[833,2895,1407],{"class":856},[833,2897,1410],{"class":842},[833,2899,1447],{"class":849},[833,2901,1416],{"class":842},[833,2903,2904,2906,2908,2910,2912,2914],{"class":835,"line":1452},[833,2905,1455],{"class":849},[833,2907,853],{"class":842},[833,2909,1407],{"class":856},[833,2911,1410],{"class":842},[833,2913,1464],{"class":849},[833,2915,1416],{"class":842},[833,2917,2918],{"class":835,"line":1469},[833,2919,933],{"emptyLinePlaceholder":686},[833,2921,2922,2924,2926,2928,2930,2932],{"class":835,"line":1474},[833,2923,1477],{"class":849},[833,2925,853],{"class":842},[833,2927,1407],{"class":856},[833,2929,1410],{"class":842},[833,2931,1464],{"class":849},[833,2933,1416],{"class":842},[833,2935,2936,2938,2940,2942,2944,2946],{"class":835,"line":1490},[833,2937,1493],{"class":849},[833,2939,853],{"class":842},[833,2941,1407],{"class":856},[833,2943,1410],{"class":842},[833,2945,1502],{"class":849},[833,2947,1416],{"class":842},[833,2949,2950,2952,2954,2956,2958,2960],{"class":835,"line":30},[833,2951,1509],{"class":849},[833,2953,853],{"class":842},[833,2955,1407],{"class":856},[833,2957,1410],{"class":842},[833,2959,1518],{"class":849},[833,2961,1416],{"class":842},[833,2963,2964,2966,2968,2970,2972,2974],{"class":835,"line":247},[833,2965,1525],{"class":849},[833,2967,853],{"class":842},[833,2969,1407],{"class":856},[833,2971,1410],{"class":842},[833,2973,1534],{"class":849},[833,2975,1416],{"class":842},[833,2977,2978],{"class":835,"line":257},[833,2979,933],{"emptyLinePlaceholder":686},[833,2981,2982,2984,2986,2988,2990,2992],{"class":835,"line":272},[833,2983,1545],{"class":849},[833,2985,853],{"class":842},[833,2987,1407],{"class":856},[833,2989,1410],{"class":842},[833,2991,1431],{"class":849},[833,2993,1416],{"class":842},[833,2995,2996,2998,3000,3002,3004,3006],{"class":835,"line":287},[833,2997,1560],{"class":849},[833,2999,853],{"class":842},[833,3001,1407],{"class":856},[833,3003,1410],{"class":842},[833,3005,1447],{"class":849},[833,3007,1416],{"class":842},[833,3009,3010,3012,3014,3016,3018,3020],{"class":835,"line":292},[833,3011,1575],{"class":849},[833,3013,853],{"class":842},[833,3015,1407],{"class":856},[833,3017,1410],{"class":842},[833,3019,1534],{"class":849},[833,3021,1416],{"class":842},[833,3023,3024],{"class":835,"line":302},[833,3025,933],{"emptyLinePlaceholder":686},[833,3027,3028,3030,3032,3034,3036,3038],{"class":835,"line":307},[833,3029,1594],{"class":849},[833,3031,853],{"class":842},[833,3033,1407],{"class":856},[833,3035,1410],{"class":842},[833,3037,1603],{"class":849},[833,3039,1416],{"class":842},[833,3041,3042,3044,3046,3048,3050,3052],{"class":835,"line":312},[833,3043,1610],{"class":849},[833,3045,853],{"class":842},[833,3047,1407],{"class":856},[833,3049,1410],{"class":842},[833,3051,1413],{"class":849},[833,3053,1416],{"class":842},[833,3055,3056],{"class":835,"line":326},[833,3057,870],{"class":842},[696,3059,3060],{},"Petakan juga fondasi neutral serta role warna komponen. Misalnya,\njika sistem yang ada mengekspos token permukaan dan pembatas ini:",[824,3062,3063],{"className":826,"code":1630,"language":828,"meta":829,"style":829},[726,3064,3065,3071,3085,3099,3113,3117,3131,3145,3159,3163,3167,3173,3187,3201,3215,3219,3233,3247,3261],{"__ignoreMap":829},[833,3066,3067,3069],{"class":835,"line":8},[833,3068,839],{"class":838},[833,3070,843],{"class":842},[833,3072,3073,3075,3077,3079,3081,3083],{"class":835,"line":846},[833,3074,896],{"class":849},[833,3076,853],{"class":842},[833,3078,1407],{"class":856},[833,3080,1410],{"class":842},[833,3082,1651],{"class":849},[833,3084,1416],{"class":842},[833,3086,3087,3089,3091,3093,3095,3097],{"class":835,"line":867},[833,3088,907],{"class":849},[833,3090,853],{"class":842},[833,3092,1407],{"class":856},[833,3094,1410],{"class":842},[833,3096,1666],{"class":849},[833,3098,1416],{"class":842},[833,3100,3101,3103,3105,3107,3109,3111],{"class":835,"line":917},[833,3102,920],{"class":849},[833,3104,853],{"class":842},[833,3106,1407],{"class":856},[833,3108,1410],{"class":842},[833,3110,1681],{"class":849},[833,3112,1416],{"class":842},[833,3114,3115],{"class":835,"line":930},[833,3116,933],{"emptyLinePlaceholder":686},[833,3118,3119,3121,3123,3125,3127,3129],{"class":835,"line":936},[833,3120,970],{"class":849},[833,3122,853],{"class":842},[833,3124,1407],{"class":856},[833,3126,1410],{"class":842},[833,3128,1700],{"class":849},[833,3130,1416],{"class":842},[833,3132,3133,3135,3137,3139,3141,3143],{"class":835,"line":949},[833,3134,1707],{"class":849},[833,3136,853],{"class":842},[833,3138,1407],{"class":856},[833,3140,1410],{"class":842},[833,3142,1716],{"class":849},[833,3144,1416],{"class":842},[833,3146,3147,3149,3151,3153,3155,3157],{"class":835,"line":962},[833,3148,982],{"class":849},[833,3150,853],{"class":842},[833,3152,1407],{"class":856},[833,3154,1410],{"class":842},[833,3156,1731],{"class":849},[833,3158,1416],{"class":842},[833,3160,3161],{"class":835,"line":967},[833,3162,870],{"class":842},[833,3164,3165],{"class":835,"line":13},[833,3166,933],{"emptyLinePlaceholder":686},[833,3168,3169,3171],{"class":835,"line":151},[833,3170,999],{"class":838},[833,3172,843],{"class":842},[833,3174,3175,3177,3179,3181,3183,3185],{"class":835,"line":170},[833,3176,896],{"class":849},[833,3178,853],{"class":842},[833,3180,1407],{"class":856},[833,3182,1410],{"class":842},[833,3184,1760],{"class":849},[833,3186,1416],{"class":842},[833,3188,3189,3191,3193,3195,3197,3199],{"class":835,"line":1219},[833,3190,907],{"class":849},[833,3192,853],{"class":842},[833,3194,1407],{"class":856},[833,3196,1410],{"class":842},[833,3198,1775],{"class":849},[833,3200,1416],{"class":842},[833,3202,3203,3205,3207,3209,3211,3213],{"class":835,"line":1419},[833,3204,920],{"class":849},[833,3206,853],{"class":842},[833,3208,1407],{"class":856},[833,3210,1410],{"class":842},[833,3212,1790],{"class":849},[833,3214,1416],{"class":842},[833,3216,3217],{"class":835,"line":648},[833,3218,933],{"emptyLinePlaceholder":686},[833,3220,3221,3223,3225,3227,3229,3231],{"class":835,"line":1452},[833,3222,970],{"class":849},[833,3224,853],{"class":842},[833,3226,1407],{"class":856},[833,3228,1410],{"class":842},[833,3230,1809],{"class":849},[833,3232,1416],{"class":842},[833,3234,3235,3237,3239,3241,3243,3245],{"class":835,"line":1469},[833,3236,1707],{"class":849},[833,3238,853],{"class":842},[833,3240,1407],{"class":856},[833,3242,1410],{"class":842},[833,3244,1824],{"class":849},[833,3246,1416],{"class":842},[833,3248,3249,3251,3253,3255,3257,3259],{"class":835,"line":1474},[833,3250,982],{"class":849},[833,3252,853],{"class":842},[833,3254,1407],{"class":856},[833,3256,1410],{"class":842},[833,3258,1839],{"class":849},[833,3260,1416],{"class":842},[833,3262,3263],{"class":835,"line":1490},[833,3264,870],{"class":842},[696,3266,3267,3268,3270,3271,1856],{},"Definisikan variabel ",[726,3269,1851],{}," di sistem Anda sendiri. Pilih nilai divider\nyang tetap terlihat di panel dan sidebar tempat Anda membutuhkan batas; jangan secara otomatis memetakan border ke skala yang sama seperti background-nya.\nLihat ",[1123,3272,2622],{"href":3273},"#periksa-border-terhadap-permukaannya",[696,3275,3276,3277,3279],{},"Sistem desain Anda tetap menjadi sumber kebenaran. Variabel ",[726,3278,1862],{}," adalah lapisan pemetaan.",[691,3281,3283],{"id":3282},"gunakan-tema-lengkap-anda-sendiri","Gunakan tema lengkap Anda sendiri",[696,3285,3286],{},"Sebagian besar aplikasi harus mengimpor tema default:",[824,3288,3289],{"className":826,"code":1873,"language":828,"meta":829,"style":829},[726,3290,3291,3299,3307],{"__ignoreMap":829},[833,3292,3293,3295,3297],{"class":835,"line":8},[833,3294,1880],{"class":860},[833,3296,1884],{"class":1883},[833,3298,864],{"class":842},[833,3300,3301,3303,3305],{"class":835,"line":846},[833,3302,1880],{"class":860},[833,3304,1893],{"class":1883},[833,3306,864],{"class":842},[833,3308,3309,3311,3313],{"class":835,"line":867},[833,3310,1880],{"class":860},[833,3312,1902],{"class":1883},[833,3314,864],{"class":842},[696,3316,3317],{},"Sistem desain matang dapat menghilangkan warna fondasi yang dimiliki Selaras:",[824,3319,3320],{"className":826,"code":1910,"language":828,"meta":829,"style":829},[726,3321,3322,3330,3338],{"__ignoreMap":829},[833,3323,3324,3326,3328],{"class":835,"line":8},[833,3325,1880],{"class":860},[833,3327,1884],{"class":1883},[833,3329,864],{"class":842},[833,3331,3332,3334,3336],{"class":835,"line":846},[833,3333,1880],{"class":860},[833,3335,1927],{"class":1883},[833,3337,864],{"class":842},[833,3339,3340,3342,3344],{"class":835,"line":867},[833,3341,1880],{"class":860},[833,3343,1902],{"class":1883},[833,3345,864],{"class":842},[696,3347,3348],{},"Lalu sediakan semua nilai semantik yang digunakan aplikasi Anda.",[696,3350,3351,3353],{},[726,3352,1945],{}," tetap menyediakan:",[1229,3355,3356,3359,3361,3364,3367],{},[1232,3357,3358],{},"Selaras source discovery untuk Tailwind",[1232,3360,1954],{},[1232,3362,3363],{},"animasi",[1232,3365,3366],{},"CSS struktural",[1232,3368,3369],{},"binding semantik",[696,3371,3372],{},"Ini tidak menyediakan palet fondasi default Selaras.",[696,3374,3375],{},"Mode ini untuk tema eksternal yang lengkap. Ini bukan fallback tanpa tema otomatis.",[691,3377,3379],{"id":3378},"radius-bayangan-penumpukan-dan-token-tailwind","Radius, bayangan, penumpukan, dan token Tailwind",[696,3381,3382],{},"Radius secara default menggunakan satu input dasar:",[824,3384,3385],{"className":826,"code":1979,"language":828,"meta":829,"style":829},[726,3386,3387,3393,3405],{"__ignoreMap":829},[833,3388,3389,3391],{"class":835,"line":8},[833,3390,839],{"class":838},[833,3392,843],{"class":842},[833,3394,3395,3397,3399,3401,3403],{"class":835,"line":846},[833,3396,850],{"class":849},[833,3398,853],{"class":842},[833,3400,1996],{"class":856},[833,3402,861],{"class":860},[833,3404,864],{"class":842},[833,3406,3407],{"class":835,"line":867},[833,3408,870],{"class":842},[696,3410,3411],{},"Selaras menurunkan nilai radius small, medium, dan large default dari dasar ini. Anda dapat menimpa setiap input radius secara terpisah jika diperlukan.",[696,3413,3414],{},"Anda juga dapat mengatur nilai bayangan dan penumpukan:",[824,3416,3417],{"className":826,"code":2013,"language":828,"meta":829,"style":829},[726,3418,3419,3425,3457,3493,3529,3533,3543,3553,3563,3573,3583],{"__ignoreMap":829},[833,3420,3421,3423],{"class":835,"line":8},[833,3422,839],{"class":838},[833,3424,843],{"class":842},[833,3426,3427,3429,3431,3433,3435,3437,3439,3441,3443,3445,3447,3449,3451,3453,3455],{"class":835,"line":846},[833,3428,2026],{"class":849},[833,3430,853],{"class":842},[833,3432,2031],{"class":856},[833,3434,2034],{"class":856},[833,3436,2037],{"class":860},[833,3438,2040],{"class":856},[833,3440,2037],{"class":860},[833,3442,2045],{"class":856},[833,3444,1410],{"class":842},[833,3446,2031],{"class":856},[833,3448,2052],{"class":856},[833,3450,2052],{"class":856},[833,3452,2057],{"class":842},[833,3454,2060],{"class":856},[833,3456,1416],{"class":842},[833,3458,3459,3461,3463,3465,3467,3469,3471,3473,3475,3477,3479,3481,3483,3485,3487,3489,3491],{"class":835,"line":867},[833,3460,2067],{"class":849},[833,3462,853],{"class":842},[833,3464,2031],{"class":856},[833,3466,2074],{"class":856},[833,3468,2037],{"class":860},[833,3470,2079],{"class":856},[833,3472,2037],{"class":860},[833,3474,2084],{"class":856},[833,3476,2037],{"class":860},[833,3478,2045],{"class":856},[833,3480,1410],{"class":842},[833,3482,2031],{"class":856},[833,3484,2052],{"class":856},[833,3486,2052],{"class":856},[833,3488,2057],{"class":842},[833,3490,2101],{"class":856},[833,3492,1416],{"class":842},[833,3494,3495,3497,3499,3501,3503,3505,3507,3509,3511,3513,3515,3517,3519,3521,3523,3525,3527],{"class":835,"line":917},[833,3496,2108],{"class":849},[833,3498,853],{"class":842},[833,3500,2031],{"class":856},[833,3502,2115],{"class":856},[833,3504,2037],{"class":860},[833,3506,2120],{"class":856},[833,3508,2037],{"class":860},[833,3510,2125],{"class":856},[833,3512,2037],{"class":860},[833,3514,2045],{"class":856},[833,3516,1410],{"class":842},[833,3518,2031],{"class":856},[833,3520,2052],{"class":856},[833,3522,2052],{"class":856},[833,3524,2057],{"class":842},[833,3526,2142],{"class":856},[833,3528,1416],{"class":842},[833,3530,3531],{"class":835,"line":930},[833,3532,933],{"emptyLinePlaceholder":686},[833,3534,3535,3537,3539,3541],{"class":835,"line":936},[833,3536,2153],{"class":849},[833,3538,853],{"class":842},[833,3540,2158],{"class":856},[833,3542,864],{"class":842},[833,3544,3545,3547,3549,3551],{"class":835,"line":949},[833,3546,2165],{"class":849},[833,3548,853],{"class":842},[833,3550,2170],{"class":856},[833,3552,864],{"class":842},[833,3554,3555,3557,3559,3561],{"class":835,"line":962},[833,3556,2177],{"class":849},[833,3558,853],{"class":842},[833,3560,2182],{"class":856},[833,3562,864],{"class":842},[833,3564,3565,3567,3569,3571],{"class":835,"line":967},[833,3566,2189],{"class":849},[833,3568,853],{"class":842},[833,3570,2194],{"class":856},[833,3572,864],{"class":842},[833,3574,3575,3577,3579,3581],{"class":835,"line":13},[833,3576,2201],{"class":849},[833,3578,853],{"class":842},[833,3580,2206],{"class":856},[833,3582,864],{"class":842},[833,3584,3585],{"class":835,"line":151},[833,3586,870],{"class":842},[696,3588,3589],{},"Spacing dan breakpoint Tailwind normal adalah token Tailwind, bukan token tema Selaras:",[824,3591,3592],{"className":826,"code":2218,"language":828,"meta":829,"style":829},[726,3593,3594,3600,3604,3608],{"__ignoreMap":829},[833,3595,3596,3598],{"class":835,"line":8},[833,3597,1159],{"class":860},[833,3599,843],{"class":842},[833,3601,3602],{"class":835,"line":846},[833,3603,2231],{"class":842},[833,3605,3606],{"class":835,"line":867},[833,3607,2236],{"class":842},[833,3609,3610],{"class":835,"line":917},[833,3611,870],{"class":842},[696,3613,3614,3615,3617,3618,1856],{},"Presentasi adaptif Selaras menggunakan nama breakpoint Tailwind yang dipilih oleh\n",[726,3616,2246],{},". Nama default adalah ",[726,3619,2250],{},[2252,3621,2254],{},{"title":829,"searchDepth":867,"depth":867,"links":3623},[3624,3625,3626,3627,3628,3629,3630],{"id":2275,"depth":867,"text":2276},{"id":2381,"depth":867,"text":2382},{"id":2621,"depth":867,"text":2622},{"id":2648,"depth":867,"text":2649},{"id":2773,"depth":867,"text":2774},{"id":3282,"depth":867,"text":3283},{"id":3378,"depth":867,"text":3379},"Sesuaikan token semantik dan palet fondasi di CSS.",{},"\u002Fid\u002Foverview\u002Ftheming\u002Fcss-tokens",{"title":2270,"description":3631},"id\u002Foverview\u002Ftheming\u002Fcss-tokens","uqeS-_d9ytduxqrrUlfamG19fndliEEh2tIu0I-oStI",1792925240739]