[{"data":1,"prerenderedAt":711},["ShallowReactive",2],{"navigation_docs":3,"-documentation-design-tokens":337,"-documentation-design-tokens-surround":706},[4,110,294],{"title":5,"path":6,"stem":7,"children":8,"page":34},"Documentation","\u002Fdocumentation","1.documentation",[9,35,56,89],{"title":10,"path":11,"stem":12,"children":13,"page":34},"Getting Started","\u002Fdocumentation\u002Fgetting-started","1.documentation\u002F1.getting-started",[14,18,22,26,30],{"title":15,"path":16,"stem":17},"Installation","\u002Fdocumentation\u002Fgetting-started\u002Finstallation","1.documentation\u002F1.getting-started\u002F1.installation",{"title":19,"path":20,"stem":21},"Agents","\u002Fdocumentation\u002Fgetting-started\u002Fagents","1.documentation\u002F1.getting-started\u002F2.agents",{"title":23,"path":24,"stem":25},"Migration","\u002Fdocumentation\u002Fgetting-started\u002Fmigration","1.documentation\u002F1.getting-started\u002F3.migration",{"title":27,"path":28,"stem":29},"Contributing","\u002Fdocumentation\u002Fgetting-started\u002Fcontributing","1.documentation\u002F1.getting-started\u002F4.contributing",{"title":31,"path":32,"stem":33},"What's new","\u002Fdocumentation\u002Fgetting-started\u002Fwhats-new","1.documentation\u002F1.getting-started\u002F5.whats-new",false,{"title":36,"path":37,"stem":38,"children":39,"page":34},"Guidelines","\u002Fdocumentation\u002Fguidelines","1.documentation\u002F2.guidelines",[40,44,48,52],{"title":41,"path":42,"stem":43},"Design Principles","\u002Fdocumentation\u002Fguidelines\u002Fdesign-principles","1.documentation\u002F2.guidelines\u002F1.design-principles",{"title":45,"path":46,"stem":47},"Accessibility","\u002Fdocumentation\u002Fguidelines\u002Faccessibility","1.documentation\u002F2.guidelines\u002F2.accessibility",{"title":49,"path":50,"stem":51},"Interactions","\u002Fdocumentation\u002Fguidelines\u002Finteractions","1.documentation\u002F2.guidelines\u002F3.interactions",{"title":53,"path":54,"stem":55},"Components","\u002Fdocumentation\u002Fguidelines\u002Fcomponents","1.documentation\u002F2.guidelines\u002F4.components",{"title":57,"path":58,"stem":59,"children":60,"page":34},"Design","\u002Fdocumentation\u002Fdesign","1.documentation\u002F3.design",[61,65,69,73,77,81,85],{"title":62,"path":63,"stem":64},"Tokens","\u002Fdocumentation\u002Fdesign\u002Ftokens","1.documentation\u002F3.design\u002F1.tokens",{"title":66,"path":67,"stem":68},"Color Palette","\u002Fdocumentation\u002Fdesign\u002Fcolor-palette","1.documentation\u002F3.design\u002F2.color-palette",{"title":70,"path":71,"stem":72},"Elevation","\u002Fdocumentation\u002Fdesign\u002Felevation","1.documentation\u002F3.design\u002F3.elevation",{"title":74,"path":75,"stem":76},"Spacing","\u002Fdocumentation\u002Fdesign\u002Fspacing","1.documentation\u002F3.design\u002F4.spacing",{"title":78,"path":79,"stem":80},"Border Radius","\u002Fdocumentation\u002Fdesign\u002Fborder-radius","1.documentation\u002F3.design\u002F5.border-radius",{"title":82,"path":83,"stem":84},"Typography","\u002Fdocumentation\u002Fdesign\u002Ftypography","1.documentation\u002F3.design\u002F6.typography",{"title":86,"path":87,"stem":88},"Icons","\u002Fdocumentation\u002Fdesign\u002Ficons","1.documentation\u002F3.design\u002F7.icons",{"title":90,"path":91,"stem":92,"children":93,"page":34},"Content","\u002Fdocumentation\u002Fcontent","1.documentation\u002F4.content",[94,98,102,106],{"title":95,"path":96,"stem":97},"Wording","\u002Fdocumentation\u002Fcontent\u002Fwording","1.documentation\u002F4.content\u002F1.wording",{"title":99,"path":100,"stem":101},"Messaging","\u002Fdocumentation\u002Fcontent\u002Fmessaging","1.documentation\u002F4.content\u002F2.messaging",{"title":103,"path":104,"stem":105},"Glossary","\u002Fdocumentation\u002Fcontent\u002Fglossary","1.documentation\u002F4.content\u002F3.glossary",{"title":107,"path":108,"stem":109},"Artificial Intelligence","\u002Fdocumentation\u002Fcontent\u002Fartificial-intelligence","1.documentation\u002F4.content\u002F4.artificial-intelligence",{"title":53,"path":111,"stem":112,"children":113,"page":34},"\u002Fcomponents","2.components",[114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290],{"title":115,"path":116,"stem":117},"Action Menu","\u002Fcomponents\u002Faction-menu","2.components\u002Faction-menu",{"title":119,"path":120,"stem":121},"Avatar","\u002Fcomponents\u002Favatar","2.components\u002Favatar",{"title":123,"path":124,"stem":125},"Badge","\u002Fcomponents\u002Fbadge","2.components\u002Fbadge",{"title":127,"path":128,"stem":129},"Banner","\u002Fcomponents\u002Fbanner","2.components\u002Fbanner",{"title":131,"path":132,"stem":133},"Button","\u002Fcomponents\u002Fbutton","2.components\u002Fbutton",{"title":135,"path":136,"stem":137},"Card","\u002Fcomponents\u002Fcard","2.components\u002Fcard",{"title":139,"path":140,"stem":141},"Chart","\u002Fcomponents\u002Fchart","2.components\u002Fchart",{"title":143,"path":144,"stem":145},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002Fcheckbox",{"title":147,"path":148,"stem":149},"Collapsible","\u002Fcomponents\u002Fcollapsible","2.components\u002Fcollapsible",{"title":151,"path":152,"stem":153},"Colorpicker","\u002Fcomponents\u002Fcolorpicker","2.components\u002Fcolorpicker",{"title":155,"path":156,"stem":157},"Data Table","\u002Fcomponents\u002Fdata-table","2.components\u002Fdata-table",{"title":159,"path":160,"stem":161},"Datepicker","\u002Fcomponents\u002Fdatepicker","2.components\u002Fdatepicker",{"title":163,"path":164,"stem":165},"Email Field","\u002Fcomponents\u002Femail-field","2.components\u002Femail-field",{"title":167,"path":168,"stem":169},"Empty State","\u002Fcomponents\u002Fempty-state","2.components\u002Fempty-state",{"title":171,"path":172,"stem":173},"Entity Data Table","\u002Fcomponents\u002Fentity-data-table","2.components\u002Fentity-data-table",{"title":175,"path":176,"stem":177},"Entity Select","\u002Fcomponents\u002Fentity-select","2.components\u002Fentity-select",{"title":179,"path":180,"stem":181},"Floating UI","\u002Fcomponents\u002Ffloating-ui","2.components\u002Ffloating-ui",{"title":183,"path":184,"stem":185},"Help Text","\u002Fcomponents\u002Fhelp-text","2.components\u002Fhelp-text",{"title":187,"path":188,"stem":189},"Icon","\u002Fcomponents\u002Ficon","2.components\u002Ficon",{"title":191,"path":192,"stem":193},"Inset","\u002Fcomponents\u002Finset","2.components\u002Finset",{"title":195,"path":196,"stem":197},"Link","\u002Fcomponents\u002Flink","2.components\u002Flink",{"title":199,"path":200,"stem":201},"Loader","\u002Fcomponents\u002Floader","2.components\u002Floader",{"title":203,"path":204,"stem":205},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":207,"path":208,"stem":209},"Number Field","\u002Fcomponents\u002Fnumber-field","2.components\u002Fnumber-field",{"title":211,"path":212,"stem":213},"Pagination","\u002Fcomponents\u002Fpagination","2.components\u002Fpagination",{"title":215,"path":216,"stem":217},"Password Field","\u002Fcomponents\u002Fpassword-field","2.components\u002Fpassword-field",{"title":219,"path":220,"stem":221},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002Fpopover",{"title":223,"path":224,"stem":225},"Progress Bar","\u002Fcomponents\u002Fprogress-bar","2.components\u002Fprogress-bar",{"title":227,"path":228,"stem":229},"Promo Badge","\u002Fcomponents\u002Fpromo-badge","2.components\u002Fpromo-badge",{"title":231,"path":232,"stem":233},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002Fradio-group",{"title":235,"path":236,"stem":237},"Search","\u002Fcomponents\u002Fsearch","2.components\u002Fsearch",{"title":239,"path":240,"stem":241},"Select","\u002Fcomponents\u002Fselect","2.components\u002Fselect",{"title":243,"path":244,"stem":245},"Skeleton Bar","\u002Fcomponents\u002Fskeleton-bar","2.components\u002Fskeleton-bar",{"title":247,"path":248,"stem":249},"Slider","\u002Fcomponents\u002Fslider","2.components\u002Fslider",{"title":251,"path":252,"stem":253},"Snackbar","\u002Fcomponents\u002Fsnackbar","2.components\u002Fsnackbar",{"title":255,"path":256,"stem":257},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002Fswitch",{"title":259,"path":260,"stem":261},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002Ftabs",{"title":263,"path":264,"stem":265},"Text","\u002Fcomponents\u002Ftext","2.components\u002Ftext",{"title":267,"path":268,"stem":269},"Text Editor","\u002Fcomponents\u002Ftext-editor","2.components\u002Ftext-editor",{"title":271,"path":272,"stem":273},"Text Field","\u002Fcomponents\u002Ftext-field","2.components\u002Ftext-field",{"title":275,"path":276,"stem":277},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002Ftextarea",{"title":279,"path":280,"stem":281},"Toast","\u002Fcomponents\u002Ftoast","2.components\u002Ftoast",{"title":283,"path":284,"stem":285},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002Ftooltip",{"title":287,"path":288,"stem":289},"Unit Field","\u002Fcomponents\u002Funit-field","2.components\u002Funit-field",{"title":291,"path":292,"stem":293},"URL Field","\u002Fcomponents\u002Furl-field","2.components\u002Furl-field",{"title":295,"path":296,"stem":297,"children":298,"page":34},"Utilities","\u002Futilities","3.utilities",[299,307,320,328],{"title":53,"path":300,"stem":301,"children":302,"page":34},"\u002Futilities\u002Fcomponents","3.utilities\u002Fcomponents",[303],{"title":304,"path":305,"stem":306},"Theme Provider","\u002Futilities\u002Fcomponents\u002Ftheme-provider","3.utilities\u002Fcomponents\u002Ftheme-provider",{"title":308,"path":309,"stem":310,"children":311,"page":34},"Composables","\u002Futilities\u002Fcomposables","3.utilities\u002Fcomposables",[312,316],{"title":313,"path":314,"stem":315},"useFutureFlags","\u002Futilities\u002Fcomposables\u002Fuse-future-flags","3.utilities\u002Fcomposables\u002Fuse-future-flags",{"title":317,"path":318,"stem":319},"useSnackbar","\u002Futilities\u002Fcomposables\u002Fuse-snackbar","3.utilities\u002Fcomposables\u002Fuse-snackbar",{"title":321,"path":322,"stem":323,"children":324,"page":34},"Directives","\u002Futilities\u002Fdirectives","3.utilities\u002Fdirectives",[325],{"title":283,"path":326,"stem":327},"\u002Futilities\u002Fdirectives\u002Ftooltip","3.utilities\u002Fdirectives\u002Ftooltip",{"title":329,"path":330,"stem":331,"children":332,"page":34},"Plugins","\u002Futilities\u002Fplugins","3.utilities\u002Fplugins",[333],{"title":334,"path":335,"stem":336},"Device helper","\u002Futilities\u002Fplugins\u002Fdevice-helper","3.utilities\u002Fplugins\u002Fdevice-helper",{"id":338,"title":62,"body":339,"description":700,"extension":701,"links":702,"meta":703,"navigation":579,"path":63,"seo":704,"stem":64,"__hash__":705},"docs\u002F1.documentation\u002F3.design\u002F1.tokens.md",{"type":340,"value":341,"toc":688},"minimark",[342,347,351,355,358,435,446,450,458,462,465,469,472,477,487,492,510,514,517,521,524,528,531,538,684],[343,344,346],"h2",{"id":345},"what-are-tokens","What are tokens",[348,349,350],"p",{},"A design token captures a single design decision (a color, a spacing step, a font size) as a named value that both design and code reference. Naming raw values this way keeps the UI consistent and maintainable across tools and platforms.",[343,352,354],{"id":353},"token-names-explained","Token names explained",[348,356,357],{},"Each part of a token's name specifies one aspect of its use:",[359,360,361,384,402,417],"ul",{},[362,363,364,368,369,373,374,373,377,373,380,383],"li",{},[365,366,367],"strong",{},"Type",": the broad classification (",[370,371,372],"code",{},"color",", ",[370,375,376],{},"font",[370,378,379],{},"scale",[370,381,382],{},"border-radius",").",[362,385,386,389,390,373,393,373,396,373,399,383],{},[365,387,388],{},"Category",": a grouping within the type (",[370,391,392],{},"icon",[370,394,395],{},"text",[370,397,398],{},"background",[370,400,401],{},"elevation",[362,403,404,407,408,373,411,373,414,383],{},[365,405,406],{},"Instance",": a usage within the category (",[370,409,410],{},"primary",[370,412,413],{},"positive",[370,415,416],{},"critical",[362,418,419,422,423,373,426,373,429,373,432,383],{},[365,420,421],{},"Variant",": the state (",[370,424,425],{},"default",[370,427,428],{},"hover",[370,430,431],{},"pressed",[370,433,434],{},"disabled",[348,436,437,438,441,442,445],{},"This four-part structure applies to semantic color tokens; others such as ",[370,439,440],{},"--font-size-s"," or ",[370,443,444],{},"--scale-size-8"," use fewer parts because they carry no state.",[343,447,449],{"id":448},"usage","Usage",[348,451,452,453,457],{},"See ",[454,455,15],"a",{"href":456},"\u002Fdocumentation\u002Fgetting-started\u002Finstallation#tokens"," to install the token package and import the theme CSS.",[343,459,461],{"id":460},"all-tokens","All tokens",[463,464],"token-browser",{},[343,466,468],{"id":467},"adding-a-new-token","Adding a new token",[348,470,471],{},"New tokens require sign-off from both design and engineering before they are added. The process is intentionally lightweight but ensures every new token has a clear purpose and fits the existing naming structure.",[473,474,476],"h3",{"id":475},"starting-a-proposal","Starting a proposal",[348,478,479,480,486],{},"A new token can be initiated from either side. A designer might identify a gap while building a new component in Figma; an engineer might notice a hardcoded value that should be abstracted. Either way, the proposal should be shared with the other discipline before work begins. Use a ",[454,481,485],{"href":482,"rel":483},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fmeteor\u002Fissues",[484],"nofollow","GitHub issue",", a Figma comment on the library file, or the Meteor Slack channel to open the discussion.",[488,489,491],"h4",{"id":490},"what-a-good-proposal-includes","What a good proposal includes",[359,493,494,497,504,507],{},[362,495,496],{},"What the token represents and where it will be used",[362,498,499,500,503],{},"The proposed name following the ",[370,501,502],{},"type-category-instance-variant"," structure",[362,505,506],{},"The intended value in all available themes",[362,508,509],{},"Whether an existing token could cover the need instead",[473,511,513],{"id":512},"review-and-sign-off","Review and sign-off",[348,515,516],{},"Both the design team and the Meteor engineering team review the proposal. The review checks that the name is consistent with existing conventions, that the token is genuinely needed and not a duplicate, and that it works correctly across both themes.",[473,518,520],{"id":519},"from-figma-to-code","From Figma to code",[348,522,523],{},"Once approved, the token is added to the Figma Variables library first. From there it is synced to the token package using the Figma Variables sync workflow. The Meteor team owns the PR that lands the token in the codebase and publishes it in the next release.",[343,525,527],{"id":526},"customizing-tokens","Customizing tokens",[348,529,530],{},"We recommend against overriding existing Meteor tokens. Overrides can cause unexpected visual divergence from the design system and break when token values change in future releases. If your project needs additional tokens, define new ones with a custom prefix instead.",[348,532,533,534,537],{},"If you do need to override, do so after importing the Meteor token files and scope changes to ",[370,535,536],{},"[data-theme=\"dark\"]"," for theme variants.",[539,540,545],"pre",{"className":541,"code":542,"language":543,"meta":544,"style":544},"language-css shiki shiki-themes github-light github-dark-default github-dark-default","@import \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Flight.css\";\n@import \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Fdark.css\";\n\n\u002F* Add new tokens with a custom prefix *\u002F\n:root {\n  --myapp-color-brand-default: #7c3aed;\n  --myapp-color-brand-hover: #6d28d9;\n}\n\n[data-theme=\"dark\"] {\n  --myapp-color-brand-default: #8b5cf6;\n  --myapp-color-brand-hover: #7c3aed;\n}\n","css","",[370,546,547,564,574,581,588,598,614,627,633,638,656,668,679],{"__ignoreMap":544},[548,549,552,556,560],"span",{"class":550,"line":551},"line",1,[548,553,555],{"class":554},"sLfaJ","@import",[548,557,559],{"class":558},"sL1yV"," \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Flight.css\"",[548,561,563],{"class":562},"sSgjj",";\n",[548,565,567,569,572],{"class":550,"line":566},2,[548,568,555],{"class":554},[548,570,571],{"class":558}," \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Fdark.css\"",[548,573,563],{"class":562},[548,575,577],{"class":550,"line":576},3,[548,578,580],{"emptyLinePlaceholder":579},true,"\n",[548,582,584],{"class":550,"line":583},4,[548,585,587],{"class":586},"sVYXU","\u002F* Add new tokens with a custom prefix *\u002F\n",[548,589,591,595],{"class":550,"line":590},5,[548,592,594],{"class":593},"srQ81",":root",[548,596,597],{"class":562}," {\n",[548,599,601,605,608,612],{"class":550,"line":600},6,[548,602,604],{"class":603},"s8FL_","  --myapp-color-brand-default",[548,606,607],{"class":562},": ",[548,609,611],{"class":610},"sfxXV","#7c3aed",[548,613,563],{"class":562},[548,615,617,620,622,625],{"class":550,"line":616},7,[548,618,619],{"class":603},"  --myapp-color-brand-hover",[548,621,607],{"class":562},[548,623,624],{"class":610},"#6d28d9",[548,626,563],{"class":562},[548,628,630],{"class":550,"line":629},8,[548,631,632],{"class":562},"}\n",[548,634,636],{"class":550,"line":635},9,[548,637,580],{"emptyLinePlaceholder":579},[548,639,641,644,647,650,653],{"class":550,"line":640},10,[548,642,643],{"class":562},"[",[548,645,646],{"class":593},"data-theme",[548,648,649],{"class":554},"=",[548,651,652],{"class":558},"\"dark\"",[548,654,655],{"class":562},"] {\n",[548,657,659,661,663,666],{"class":550,"line":658},11,[548,660,604],{"class":603},[548,662,607],{"class":562},[548,664,665],{"class":610},"#8b5cf6",[548,667,563],{"class":562},[548,669,671,673,675,677],{"class":550,"line":670},12,[548,672,619],{"class":603},[548,674,607],{"class":562},[548,676,611],{"class":610},[548,678,563],{"class":562},[548,680,682],{"class":550,"line":681},13,[548,683,632],{"class":562},[685,686,687],"style",{},"html pre.shiki code .sLfaJ, html code.shiki .sLfaJ{--shiki-light:#D73A49;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .sL1yV, html code.shiki .sL1yV{--shiki-light:#032F62;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sSgjj, html code.shiki .sSgjj{--shiki-light:#24292E;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sVYXU, html code.shiki .sVYXU{--shiki-light:#6A737D;--shiki-default:#8B949E;--shiki-dark:#8B949E}html pre.shiki code .srQ81, html code.shiki .srQ81{--shiki-light:#6F42C1;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .s8FL_, html code.shiki .s8FL_{--shiki-light:#E36209;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .sfxXV, html code.shiki .sfxXV{--shiki-light:#005CC5;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}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":544,"searchDepth":566,"depth":566,"links":689},[690,691,692,693,694,699],{"id":345,"depth":566,"text":346},{"id":353,"depth":566,"text":354},{"id":448,"depth":566,"text":449},{"id":460,"depth":566,"text":461},{"id":467,"depth":566,"text":468,"children":695},[696,697,698],{"id":475,"depth":576,"text":476},{"id":512,"depth":576,"text":513},{"id":519,"depth":576,"text":520},{"id":526,"depth":566,"text":527},"Standardized name-value pairs that encode Meteor's design decisions for color, typography, spacing, and more.","md",null,{},{"title":62,"description":700},"Qg0575Deu7KZEXsAOdO4wX50NBybw6-7H92FzQCXLEw",[707,709],{"title":53,"path":54,"stem":55,"description":708,"children":-1},"Conventions for how Meteor components are structured, named, and built when contributing or updating a component.",{"title":66,"path":67,"stem":68,"description":710,"children":-1},"A fixed set of shades per hue, named by hue and numeric luminosity, that semantic tokens reference.",1783088339340]