[{"data":1,"prerenderedAt":721},["ShallowReactive",2],{"navigation_docs":3,"-icons-composed-variants":194,"-icons-composed-variants-surround":716},[4,22,82,124,146,168,190],{"title":5,"path":6,"stem":7,"children":8},"Getting started","/getting-started","1.getting-started/0.index",[9,10,14,18],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"MCP quickstart","/getting-started/mcp-quickstart","1.getting-started/1.mcp-quickstart",{"title":15,"path":16,"stem":17},"REST quickstart","/getting-started/rest-quickstart","1.getting-started/2.rest-quickstart",{"title":19,"path":20,"stem":21},"UI quickstart","/getting-started/ui-quickstart","1.getting-started/3.ui-quickstart",{"title":23,"path":24,"stem":25,"children":26},"MCP server","/mcp","2.mcp/0.index",[27,28,32,36,40],{"title":23,"path":24,"stem":25},{"title":29,"path":30,"stem":31},"Connecting","/mcp/connection","2.mcp/1.connection",{"title":33,"path":34,"stem":35},"Envelope","/mcp/envelope","2.mcp/2.envelope",{"title":37,"path":38,"stem":39},"Resources","/mcp/resources","2.mcp/3.resources",{"title":41,"path":42,"stem":43,"children":44},"Tools","/mcp/tools","2.mcp/4.tools/0.index",[45,46,50,54,58,62,66,70,74,78],{"title":41,"path":42,"stem":43},{"title":47,"path":48,"stem":49},"list_schema_versions","/mcp/tools/list-schema-versions","2.mcp/4.tools/1.list-schema-versions",{"title":51,"path":52,"stem":53},"get_schema","/mcp/tools/get-schema","2.mcp/4.tools/2.get-schema",{"title":55,"path":56,"stem":57},"list_categories","/mcp/tools/list-categories","2.mcp/4.tools/3.list-categories",{"title":59,"path":60,"stem":61},"list_elements","/mcp/tools/list-elements","2.mcp/4.tools/4.list-elements",{"title":63,"path":64,"stem":65},"get_element","/mcp/tools/get-element","2.mcp/4.tools/5.get-element",{"title":67,"path":68,"stem":69},"get_elements","/mcp/tools/get-elements","2.mcp/4.tools/6.get-elements",{"title":71,"path":72,"stem":73},"validate_datachain","/mcp/tools/validate-datachain","2.mcp/4.tools/7.validate-datachain",{"title":75,"path":76,"stem":77},"render_datachain","/mcp/tools/render-datachain","2.mcp/4.tools/8.render-datachain",{"title":79,"path":80,"stem":81},"get_icon_url","/mcp/tools/get-icon-url","2.mcp/4.tools/9.get-icon-url",{"title":83,"path":84,"stem":85,"children":86},"REST API (v2)","/rest","3.rest/0.index",[87,88,92,96,100,104,108,112,116,120],{"title":83,"path":84,"stem":85},{"title":89,"path":90,"stem":91},"GET /schemas","/rest/schemas","3.rest/1.schemas",{"title":93,"path":94,"stem":95},"GET /schemas/:version/manifest","/rest/manifest","3.rest/2.manifest",{"title":97,"path":98,"stem":99},"GET /schemas/:version/categories","/rest/categories","3.rest/3.categories",{"title":101,"path":102,"stem":103},"GET /schemas/:version/elements","/rest/elements-list","3.rest/4.elements-list",{"title":105,"path":106,"stem":107},"GET /schemas/:version/elements/:element_id","/rest/element-detail","3.rest/5.element-detail",{"title":109,"path":110,"stem":111},"POST /schemas/:version/validate","/rest/validate","3.rest/6.validate",{"title":113,"path":114,"stem":115},"Icon routes","/rest/icons","3.rest/7.icons",{"title":117,"path":118,"stem":119},"Pagination & fields","/rest/pagination-and-fields","3.rest/8.pagination-and-fields",{"title":121,"path":122,"stem":123},"Errors","/rest/errors","3.rest/9.errors",{"title":125,"path":126,"stem":127,"children":128},"Icon composition","/icons","4.icons/0.index",[129,130,134,138,142],{"title":125,"path":126,"stem":127},{"title":131,"path":132,"stem":133},"Shapes","/icons/shapes","4.icons/1.shapes",{"title":135,"path":136,"stem":137},"Symbols","/icons/symbols","4.icons/2.symbols",{"title":139,"path":140,"stem":141},"Composed variants","/icons/composed-variants","4.icons/3.composed-variants",{"title":143,"path":144,"stem":145},"URLs","/icons/urls","4.icons/4.urls",{"title":147,"path":148,"stem":149,"children":150},"@dtpr/ui","/ui","5.ui/0.index",[151,152,156,160,164],{"title":147,"path":148,"stem":149},{"title":153,"path":154,"stem":155},"@dtpr/ui/core","/ui/core","5.ui/1.core",{"title":157,"path":158,"stem":159},"@dtpr/ui/vue","/ui/vue","5.ui/2.vue",{"title":161,"path":162,"stem":163},"@dtpr/ui/html","/ui/html","5.ui/3.html",{"title":165,"path":166,"stem":167},"Theming","/ui/theming","5.ui/4.theming",{"title":169,"path":170,"stem":171,"children":172},"Concepts","/concepts","6.concepts/0.index",[173,174,178,182,186],{"title":169,"path":170,"stem":171},{"title":175,"path":176,"stem":177},"Datachains","/concepts/datachains","6.concepts/1.datachains",{"title":179,"path":180,"stem":181},"Elements & categories","/concepts/elements-categories","6.concepts/2.elements-categories",{"title":183,"path":184,"stem":185},"Versions & releases","/concepts/versions-and-releases","6.concepts/3.versions-and-releases",{"title":187,"path":188,"stem":189},"Content hash","/concepts/content-hash","6.concepts/4.content-hash",{"title":191,"path":192,"stem":193},"Changelog","/changelog","7.changelog",{"id":195,"title":139,"body":196,"description":709,"extension":710,"links":711,"meta":712,"navigation":713,"path":140,"seo":714,"stem":141,"__hash__":715},"docs/4.icons/3.composed-variants.md",{"type":197,"value":198,"toc":699},"minimark",[199,203,221,226,230,323,326,413,417,436,439,443,460,551,558,562,565,573,576,581,587,593,603,610,616,619,623,626,665,668,672,695],[200,201,139],"h1",{"id":202},"composed-variants",[204,205,207,208,212,213,216,217,220],"callout",{"type":206},"info","Every element has two universal variants — ",[209,210,211],"code",{},"default"," and ",[209,214,215],{},"dark",". Categories that declare a ",[209,218,219],{},"context"," also expose one colored variant per context value.",[222,223,225],"h2",{"id":224},"the-variant-union","The variant union",[227,228,229],"p",{},"The compositor accepts three variant forms:",[231,232,237],"pre",{"className":233,"code":234,"language":235,"meta":236,"style":236},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","type ComposeVariant =\n  | 'default'\n  | 'dark'\n  | { kind: 'colored'; color: string }  // color is #RRGGBB\n","ts","",[209,238,239,256,271,282],{"__ignoreMap":236},[240,241,244,248,252],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"spNyl","type",[240,249,251],{"class":250},"sBMFI"," ComposeVariant",[240,253,255],{"class":254},"sMK4o"," =\n",[240,257,259,262,265,268],{"class":242,"line":258},2,[240,260,261],{"class":254},"  |",[240,263,264],{"class":254}," '",[240,266,211],{"class":267},"sfazB",[240,269,270],{"class":254},"'\n",[240,272,274,276,278,280],{"class":242,"line":273},3,[240,275,261],{"class":254},[240,277,264],{"class":254},[240,279,215],{"class":267},[240,281,270],{"class":254},[240,283,285,287,290,294,297,299,302,305,308,311,313,316,319],{"class":242,"line":284},4,[240,286,261],{"class":254},[240,288,289],{"class":254}," {",[240,291,293],{"class":292},"swJcz"," kind",[240,295,296],{"class":254},":",[240,298,264],{"class":254},[240,300,301],{"class":267},"colored",[240,303,304],{"class":254},"'",[240,306,307],{"class":254},";",[240,309,310],{"class":292}," color",[240,312,296],{"class":254},[240,314,315],{"class":250}," string",[240,317,318],{"class":254}," }",[240,320,322],{"class":321},"sHwdD","  // color is #RRGGBB\n",[227,324,325],{},"Each resolves to three colors: the shape fill, the shape stroke, and the inner (symbol) color.",[327,328,329,348],"table",{},[330,331,332],"thead",{},[333,334,335,339,342,345],"tr",{},[336,337,338],"th",{},"Variant",[336,340,341],{},"Shape fill",[336,343,344],{},"Shape stroke",[336,346,347],{},"Inner color",[349,350,351,373,392],"tbody",{},[333,352,353,358,364,369],{},[354,355,356],"td",{},[209,357,211],{},[354,359,360,363],{},[209,361,362],{},"none"," (transparent)",[354,365,366],{},[209,367,368],{},"#000",[354,370,371],{},[209,372,368],{},[333,374,375,379,383,387],{},[354,376,377],{},[209,378,215],{},[354,380,381],{},[209,382,368],{},[354,384,385],{},[209,386,368],{},[354,388,389],{},[209,390,391],{},"#FFF",[333,393,394,399,404,408],{},[354,395,396],{},[209,397,398],{},"{kind:'colored',color}",[354,400,401],{},[209,402,403],{},"color",[354,405,406],{},[209,407,403],{},[354,409,410],{},[209,411,412],{},"innerColorForShape(color)",[222,414,416],{"id":415},"why-the-split-exists","Why the split exists",[227,418,419,212,421,423,424,428,429,432,433,435],{},[209,420,211],{},[209,422,215],{}," are universal — every element renders equally well outlined (light UI) or filled (dark UI). ",[425,426,427],"strong",{},"Context-colored"," variants exist because each category can declare a ",[209,430,431],{},"context.values[]"," set whose members carry a ",[209,434,403],{},". An element can therefore render in any context value its category declares.",[227,437,438],{},"This keeps the color palette scoped to where it semantically belongs: a category's context, not the element itself.",[222,440,442],{"id":441},"discovering-valid-variants","Discovering valid variants",[227,444,445,446,449,450,455,456,296],{},"The build step materializes an ",[209,447,448],{},"icon_variants[]"," array onto every element. Read it via ",[451,452,453],"a",{"href":64},[209,454,63],{}," or ",[451,457,458],{"href":106},[209,459,105],{},[231,461,465],{"className":462,"code":463,"language":464,"meta":236,"style":236},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"id\": \"purpose.example\",\n  \"icon_variants\": [\"default\", \"dark\", \"commercial\", \"civic\"]\n}\n","json",[209,466,467,472,496,546],{"__ignoreMap":236},[240,468,469],{"class":242,"line":243},[240,470,471],{"class":254},"{\n",[240,473,474,477,480,483,485,488,491,493],{"class":242,"line":258},[240,475,476],{"class":254},"  \"",[240,478,479],{"class":246},"id",[240,481,482],{"class":254},"\"",[240,484,296],{"class":254},[240,486,487],{"class":254}," \"",[240,489,490],{"class":267},"purpose.example",[240,492,482],{"class":254},[240,494,495],{"class":254},",\n",[240,497,498,500,503,505,507,510,512,514,516,519,521,523,525,527,529,532,534,536,538,541,543],{"class":242,"line":273},[240,499,476],{"class":254},[240,501,502],{"class":246},"icon_variants",[240,504,482],{"class":254},[240,506,296],{"class":254},[240,508,509],{"class":254}," [",[240,511,482],{"class":254},[240,513,211],{"class":267},[240,515,482],{"class":254},[240,517,518],{"class":254},",",[240,520,487],{"class":254},[240,522,215],{"class":267},[240,524,482],{"class":254},[240,526,518],{"class":254},[240,528,487],{"class":254},[240,530,531],{"class":267},"commercial",[240,533,482],{"class":254},[240,535,518],{"class":254},[240,537,487],{"class":254},[240,539,540],{"class":267},"civic",[240,542,482],{"class":254},[240,544,545],{"class":254},"]\n",[240,547,548],{"class":242,"line":284},[240,549,550],{"class":254},"}\n",[227,552,553,557],{},[451,554,555],{"href":80},[209,556,79],{}," mirrors this array in its response for convenience.",[222,559,561],{"id":560},"the-innercolor-rule","The innerColor rule",[227,563,564],{},"For colored variants, the inner color is derived from the shape color via WCAG 2 relative luminance:",[231,566,571],{"className":567,"code":569,"language":570},[568],"language-text","innerColor = relativeLuminance(shapeColor) >= 0.179 ? '#000' : '#FFF'\n","text",[209,572,569],{"__ignoreMap":236},[227,574,575],{},"The 0.179 threshold matches the common \"choose black or white text on a background\" heuristic.",[577,578,580],"h3",{"id":579},"worked-example","Worked example",[227,582,583,584,296],{},"Take a category with ",[209,585,586],{},"context.values[{id:'commercial', color:'#0052CC'}]",[231,588,591],{"className":589,"code":590,"language":570},[568],"shapeColor    = #0052CC\nrgb           = (0, 82, 204)\nlinearized    = (0.000, 0.0865, 0.6105)\nluminance     = 0.2126·0.000 + 0.7152·0.0865 + 0.0722·0.6105\n              = 0.106\n0.106 \u003C 0.179 → innerColor = #FFF\n",[209,592,590],{"__ignoreMap":236},[227,594,595,596,598,599,602],{},"The ",[209,597,531],{}," variant of an element in this category therefore renders with a ",[209,600,601],{},"#0052CC"," shape and white inner glyph.",[227,604,605,606,609],{},"Take a lighter context color, ",[209,607,608],{},"#FFDD00"," (DTPR warning yellow):",[231,611,614],{"className":612,"code":613,"language":570},[568],"luminance  ≈ 0.81\n0.81 >= 0.179 → innerColor = #000\n",[209,615,613],{"__ignoreMap":236},[227,617,618],{},"The rule deliberately biases toward high-contrast symbol legibility at small sizes.",[222,620,622],{"id":621},"output-svg","Output SVG",[227,624,625],{},"A composed icon is an inline-compact 36×36 SVG:",[231,627,631],{"className":628,"code":629,"language":630,"meta":236,"style":236},"language-xml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\" width=\"36\" height=\"36\">\n  \u003Cpath d=\"…shape path…\" fill=\"…\" stroke=\"…\" stroke-width=\"2\"/>\n  \u003Cg color=\"…innerColor…\">\n    …stripped symbol inner…\n  \u003C/g>\n\u003C/svg>\n","xml",[209,632,633,638,643,648,653,659],{"__ignoreMap":236},[240,634,635],{"class":242,"line":243},[240,636,637],{},"\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 36 36\" width=\"36\" height=\"36\">\n",[240,639,640],{"class":242,"line":258},[240,641,642],{},"  \u003Cpath d=\"…shape path…\" fill=\"…\" stroke=\"…\" stroke-width=\"2\"/>\n",[240,644,645],{"class":242,"line":273},[240,646,647],{},"  \u003Cg color=\"…innerColor…\">\n",[240,649,650],{"class":242,"line":284},[240,651,652],{},"    …stripped symbol inner…\n",[240,654,656],{"class":242,"line":655},5,[240,657,658],{},"  \u003C/g>\n",[240,660,662],{"class":242,"line":661},6,[240,663,664],{},"\u003C/svg>\n",[227,666,667],{},"Identical inputs produce byte-identical output — no randomness, no timestamps, no environment-dependent behavior.",[222,669,671],{"id":670},"see-also","See also",[673,674,675,681,688],"ul",{},[676,677,678,680],"li",{},[451,679,143],{"href":144}," — how the variant maps into a URL.",[676,682,683,685,686],{},[451,684,131],{"href":132},", ",[451,687,135],{"href":136},[676,689,690],{},[451,691,692,693],{"href":80},"MCP ",[209,694,79],{},[696,697,698],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":236,"searchDepth":258,"depth":258,"links":700},[701,702,703,704,707,708],{"id":224,"depth":258,"text":225},{"id":415,"depth":258,"text":416},{"id":441,"depth":258,"text":442},{"id":560,"depth":258,"text":561,"children":705},[706],{"id":579,"depth":273,"text":580},{"id":621,"depth":258,"text":622},{"id":670,"depth":258,"text":671},"default / dark / context-colored variants and the WCAG-inspired innerColor rule.","md",null,{},true,{"title":139,"description":709},"6luxeSOpNLusOcI5mKr_vcnarfodJ3KMxQk6CDdRUcE",[717,719],{"title":135,"path":136,"stem":137,"description":718,"children":-1},"Release-pinned symbol SVGs referenced by element.symbol_id.",{"title":143,"path":144,"stem":145,"description":720,"children":-1},"Derive an icon URL from any (version, element, variant) triple.",1776525922453]