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