-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
38 lines (38 loc) · 54.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html><html lang="en" data-theme="light" data-theme-name="default"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" as="image" href="header.png"/><link rel="stylesheet" href="/_next/static/css/7bda2f0d9796bfcb.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/ac0217622e33d24f.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/1196c23d52bc6240.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/f7ded429357818eb.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-c6b0b473db8c5315.js"/><script src="/_next/static/chunks/fd9d1056-9027b4101f0095d6.js" async=""></script><script src="/_next/static/chunks/117-d25c2563b92d917d.js" async=""></script><script src="/_next/static/chunks/main-app-8ccb91074c88fe62.js" async=""></script><script src="/_next/static/chunks/42437bae-10ab3b1cdaf93342.js" async=""></script><script src="/_next/static/chunks/1e87141b-fcfec9cd0504a355.js" async=""></script><script src="/_next/static/chunks/363642f4-25d86c84e2b02bb7.js" async=""></script><script src="/_next/static/chunks/264-068d79c39d9bf958.js" async=""></script><script src="/_next/static/chunks/333-a96152abf3f0a6c7.js" async=""></script><script src="/_next/static/chunks/972-133b85a74e2df673.js" async=""></script><script src="/_next/static/chunks/693-e0a7a135518f65f8.js" async=""></script><script src="/_next/static/chunks/896-64a243ccea8efaf8.js" async=""></script><script src="/_next/static/chunks/app/layout-ae340f67328cff10.js" async=""></script><script src="/_next/static/chunks/878-5b2dc8dfa719b539.js" async=""></script><script src="/_next/static/chunks/app/(docs)/page-c0052dfe7dbb7c7d.js" async=""></script><title>Canon</title><meta name="description" content="UI library for Backstage"/><meta property="og:title" content="Canon"/><meta property="og:description" content="UI library for Backstage"/><meta property="og:image:type" content="image/jpeg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image" content="https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:title" content="Canon"/><meta name="twitter:description" content="UI library for Backstage"/><meta name="twitter:image:type" content="image/jpeg"/><meta name="twitter:image:width" content="1200"/><meta name="twitter:image:height" content="630"/><meta name="twitter:image" content="https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382"/><link rel="icon" href="/icon.svg?27251f321bf90e71" type="image/svg+xml" sizes="any"/><script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script></head><body><div class="page_global__106FI"><div class="Sidebar_sidebar__86IlD"><style>[data-id="base-ui-:Rcq:-viewport"]{scrollbar-width:none}[data-id="base-ui-:Rcq:-viewport"]::-webkit-scrollbar{display:none}</style><div style="position:relative;--scroll-area-corner-height:0px;--scroll-area-corner-width:0px" class="Sidebar_root__AZrho"><div data-id="base-ui-:Rcq:-viewport" tabindex="0" style="overflow:scroll" class="Sidebar_viewport__Dwc0q"><div style="min-width:fit-content"><div class="Sidebar_content__vii3k"><div class="Sidebar_logoContainer__OcEVQ"><a href="/"><svg width="89" height="27" fill="none" xmlns="http://www.w3.org/2000/svg" class="Sidebar_logo__P79Og"><path d="M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z"></path><path d="M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z"></path></svg></a></div><div class="Sidebar_menu__sTTeJ"><div class="Sidebar_section__GtWJr" style="opacity:1;visibility:visible;transform:none"><div class="Sidebar_sectionTitle__s0c_b">Overview</div><a class="Sidebar_line__nqYoI Sidebar_active__vqrO1" href="/"><div class="Sidebar_lineTitle__LPKUk">Getting Started</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/about"><div class="Sidebar_lineTitle__LPKUk">About</div><div class="Sidebar_lineStatus__v7sR3"></div></a><div class="Sidebar_sectionTitle__s0c_b">Theme</div><a class="Sidebar_line__nqYoI " href="/theme/iconography"><div class="Sidebar_lineTitle__LPKUk">Iconography</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/theme/layout"><div class="Sidebar_lineTitle__LPKUk">Layout</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/theme/responsive"><div class="Sidebar_lineTitle__LPKUk">Responsive</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/theme/theming"><div class="Sidebar_lineTitle__LPKUk">Theming</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI " href="/theme/typography"><div class="Sidebar_lineTitle__LPKUk">Typography</div><div class="Sidebar_lineStatus__v7sR3"></div></a><div class="Sidebar_sectionTitle__s0c_b">Layout Components</div><a class="Sidebar_line__nqYoI " href="/components/box"><div class="Sidebar_lineTitle__LPKUk">Box</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/container"><div class="Sidebar_lineTitle__LPKUk">Container</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/grid"><div class="Sidebar_lineTitle__LPKUk">Grid</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/flex"><div class="Sidebar_lineTitle__LPKUk">Flex</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><div class="Sidebar_sectionTitle__s0c_b">Components</div><a class="Sidebar_line__nqYoI " href="/components/button"><div class="Sidebar_lineTitle__LPKUk">Button</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/checkbox"><div class="Sidebar_lineTitle__LPKUk">Checkbox</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/field"><div class="Sidebar_lineTitle__LPKUk">Field</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/heading"><div class="Sidebar_lineTitle__LPKUk">Heading</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/icon"><div class="Sidebar_lineTitle__LPKUk">Icon</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/input"><div class="Sidebar_lineTitle__LPKUk">Input</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/table"><div class="Sidebar_lineTitle__LPKUk">Table</div><div class="Sidebar_lineStatus__v7sR3">In Progress</div></a><a class="Sidebar_line__nqYoI " href="/components/text"><div class="Sidebar_lineTitle__LPKUk">Text</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a></div><div class="Sidebar_section__GtWJr" style="position:absolute;opacity:0;visibility:hidden;transform:translateX(20px)"><div class="Sidebar_sectionTitle__s0c_b">Components</div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Button</div><button type="button" id="base-ui-:Rgladcq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Checkbox</div><button type="button" id="base-ui-:Rh5adcq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Field</div><button type="button" id="base-ui-:Rhladcq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Heading</div><button type="button" id="base-ui-:Ri5adcq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Icon</div><button type="button" id="base-ui-:Riladcq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Input</div><button type="button" id="base-ui-:Rj5adcq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Table</div><button type="button" id="base-ui-:Rjladcq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Text</div><button type="button" id="base-ui-:Rk5adcq:" role="checkbox" aria-checked="true" data-checked="" class="canon-CheckboxRoot"><span data-checked="" class="canon-CheckboxIndicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" style="width:12px;height:12px" class="remixicon canon-Icon"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg></span></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true" checked=""/></div><div class="Sidebar_sectionTitle__s0c_b"> Screen sizes</div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Mobile</div><button type="button" id="base-ui-:R8padcq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Tablet</div><button type="button" id="base-ui-:R99adcq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Desktop</div><button type="button" id="base-ui-:R9padcq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/></div><div class="Sidebar_line__nqYoI"><div class="Sidebar_lineTitle__LPKUk">Wide</div><button type="button" id="base-ui-:Ra9adcq:" role="checkbox" aria-checked="false" data-unchecked="" class="canon-CheckboxRoot"></button><input style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" type="checkbox" aria-hidden="true"/></div></div></div></div></div></div><div data-id="base-ui-:Rcq:-scrollbar" style="position:absolute;touch-action:none;top:0;bottom:var(--scroll-area-corner-height);inset-inline-end:0;--scroll-area-thumb-height:0px" data-orientation="vertical" class="Sidebar_scrollbar__XbWMn"><div data-orientation="vertical" style="height:var(--scroll-area-thumb-height)" class="Sidebar_thumb__zjCHe"></div></div></div></div><div class="page_container__ul_gw"><div class="styles_toolbar__Dfx8Q"><div><div data-orientation="horizontal" data-activation-direction="none" class="nav_tabs__Vf_3c"><div role="tablist" data-orientation="horizontal" data-activation-direction="none" class="nav_list__5B4br"><button type="button" tabindex="-1" role="tab" aria-selected="true" id="base-ui-:Rlkq:" data-selected="" data-orientation="horizontal" class="nav_tab__pxJXK">Documentation</button><button type="button" tabindex="-1" role="tab" aria-selected="false" id="base-ui-:R15kq:" data-orientation="horizontal" class="nav_tab__pxJXK">Playground</button><span role="presentation" hidden="" data-orientation="horizontal" data-activation-direction="none" data-instance-id="lseel3sg70k" class="nav_indicator__56_dB"></span></div></div></div><div class="styles_actions__hQrVs"><div tabindex="0" aria-expanded="false" aria-haspopup="listbox" role="combobox" aria-autocomplete="none" class="theme-name_Select__EzhNT"><span class="theme-name_SelectValue__m3_vq">Select a theme</span><span aria-hidden="true" class="theme-name_SelectIcon__WL7np"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon canon-Icon"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg></span></div><input id="base-ui-:Rpkq:" style="clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap;position:fixed;top:0;left:0;border:0;padding:0;width:1px;height:1px;margin:-1px" tabindex="-1" aria-hidden="true" value="default"/><div data-orientation="horizontal" data-activation-direction="none" class="theme_tabsTheme__Z9Qzm"><div role="tablist" data-orientation="horizontal" data-activation-direction="none" class="theme_list__5EiW3"><button type="button" tabindex="-1" role="tab" aria-selected="true" id="base-ui-:R39kq:" data-selected="" data-orientation="horizontal" class="theme_tab__wvxne"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon canon-Icon"><path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path></svg></button><button type="button" tabindex="-1" role="tab" aria-selected="false" id="base-ui-:R59kq:" data-orientation="horizontal" class="theme_tab__wvxne"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon canon-Icon"><path d="M10 7C10 10.866 13.134 14 17 14C18.9584 14 20.729 13.1957 21.9995 11.8995C22 11.933 22 11.9665 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C12.0335 2 12.067 2 12.1005 2.00049C10.8043 3.27098 10 5.04157 10 7ZM4 12C4 16.4183 7.58172 20 12 20C15.0583 20 17.7158 18.2839 19.062 15.7621C18.3945 15.9187 17.7035 16 17 16C12.0294 16 8 11.9706 8 7C8 6.29648 8.08133 5.60547 8.2379 4.938C5.71611 6.28423 4 8.9417 4 12Z"></path></svg></button><span role="presentation" hidden="" data-orientation="horizontal" data-activation-direction="none" data-instance-id="6xbefj56ta3" class="theme_indicator__oGk64"></span></div></div></div></div><div class="layout_pageContainer__Io_cr"><img src="header.png" style="width:100%;margin-bottom:32px;margin-top:64px"/>
<p class="mdx_p__PmNxW">Welcome to the Canon, the new design library for Backstage plugins. This
project is still under active development but we will make sure to document
the API as we go. We are aiming to improve the general UI of Backstage and
plugins across Backstage. This new library will take time to build but we are
building it incrementally with not conflict with the existing theming system.</p>
<h2 class="mdx_h2__tTkl_">Installation</h2>
<h3 class="mdx_h3__osV67">1. Install canon</h3>
<p class="mdx_p__PmNxW">Install Canon using a package manager.</p>
<div class="styles_codeBlock__cJkhk"><div class="styles_code__W0N63"><pre class="shiki shiki-themes min-light min-dark" style="background-color:#ffffff;--shiki-dark-bg:#1f1f1f;color:#24292eff;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#6F42C1;--shiki-dark:#B392F0">npm</span><span style="color:#2B5581;--shiki-dark:#9DB1C5"> install</span><span style="color:#2B5581;--shiki-dark:#9DB1C5"> @backstage/canon</span></span></code></pre></div></div>
<h3 class="mdx_h3__osV67">2. Import the css files</h3>
<p class="mdx_p__PmNxW">Import the global CSS file at the root of your application.</p>
<div class="styles_codeBlock__cJkhk"><div class="styles_code__W0N63"><pre class="shiki shiki-themes min-light min-dark" style="background-color:#ffffff;--shiki-dark-bg:#1f1f1f;color:#24292eff;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#D32F2F;--shiki-dark:#F97583">import</span><span style="color:#22863A;--shiki-dark:#FFAB70"> '@backstage/canon/css/core.css'</span><span style="color:#24292EFF;--shiki-dark:#B392F0">;</span></span>
<span class="line"><span style="color:#D32F2F;--shiki-dark:#F97583">import</span><span style="color:#22863A;--shiki-dark:#FFAB70"> '@backstage/canon/css/components.css'</span><span style="color:#24292EFF;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span></code></pre></div></div>
<h3 class="mdx_h3__osV67">3. Add the theme provider</h3>
<p class="mdx_p__PmNxW">Add the theme provider to your application.</p>
<div class="styles_codeBlock__cJkhk"><div class="styles_code__W0N63"><pre class="shiki shiki-themes min-light min-dark" style="background-color:#ffffff;--shiki-dark-bg:#1f1f1f;color:#24292eff;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#D32F2F;--shiki-dark:#F97583">import</span><span style="color:#24292EFF;--shiki-dark:#B392F0"> { ThemeProvider } </span><span style="color:#D32F2F;--shiki-dark:#F97583">from</span><span style="color:#22863A;--shiki-dark:#FFAB70"> '@backstage/canon'</span><span style="color:#24292EFF;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292EFF;--shiki-dark:#B392F0"><</span><span style="color:#1976D2;--shiki-dark:#79B8FF">ThemeProvider</span><span style="color:#24292EFF;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#24292EFF;--shiki-dark:#B392F0"> <</span><span style="color:#1976D2;--shiki-dark:#79B8FF">App</span><span style="color:#24292EFF;--shiki-dark:#B392F0"> /></span></span>
<span class="line"><span style="color:#24292EFF;--shiki-dark:#B392F0"></</span><span style="color:#1976D2;--shiki-dark:#79B8FF">ThemeProvider</span><span style="color:#24292EFF;--shiki-dark:#B392F0">>;</span></span>
<span class="line"></span></code></pre></div></div>
<h3 class="mdx_h3__osV67">4. Start building ✨</h3>
<p class="mdx_p__PmNxW">Now you can start building your plugin using the new design system.</p>
<div class="styles_codeBlock__cJkhk"><div class="styles_code__W0N63"><pre class="shiki shiki-themes min-light min-dark" style="background-color:#ffffff;--shiki-dark-bg:#1f1f1f;color:#24292eff;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#D32F2F;--shiki-dark:#F97583">import</span><span style="color:#24292EFF;--shiki-dark:#B392F0"> { Flex</span><span style="color:#212121;--shiki-dark:#BBBBBB">,</span><span style="color:#24292EFF;--shiki-dark:#B392F0"> Button</span><span style="color:#212121;--shiki-dark:#BBBBBB">,</span><span style="color:#24292EFF;--shiki-dark:#B392F0"> Text } </span><span style="color:#D32F2F;--shiki-dark:#F97583">from</span><span style="color:#22863A;--shiki-dark:#FFAB70"> '@backstage/canon'</span><span style="color:#24292EFF;--shiki-dark:#B392F0">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292EFF;--shiki-dark:#B392F0"><</span><span style="color:#1976D2;--shiki-dark:#79B8FF">Flex</span><span style="color:#24292EFF;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#24292EFF;--shiki-dark:#B392F0"> <</span><span style="color:#1976D2;--shiki-dark:#79B8FF">Text</span><span style="color:#24292EFF;--shiki-dark:#B392F0">>Hello World</</span><span style="color:#1976D2;--shiki-dark:#79B8FF">Text</span><span style="color:#24292EFF;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#24292EFF;--shiki-dark:#B392F0"> <</span><span style="color:#1976D2;--shiki-dark:#79B8FF">Button</span><span style="color:#24292EFF;--shiki-dark:#B392F0">>Click me</</span><span style="color:#1976D2;--shiki-dark:#79B8FF">Button</span><span style="color:#24292EFF;--shiki-dark:#B392F0">></span></span>
<span class="line"><span style="color:#24292EFF;--shiki-dark:#B392F0"></</span><span style="color:#1976D2;--shiki-dark:#79B8FF">Flex</span><span style="color:#24292EFF;--shiki-dark:#B392F0">>;</span></span>
<span class="line"></span></code></pre></div></div>
<h2 class="mdx_h2__tTkl_">Roadmap</h2>
<p class="mdx_p__PmNxW">You can check our roadmap <a href="https://github.com/orgs/backstage/projects/10" style="color:var(--primary)">on GitHub</a>. We'll do our best to keep you updated on the progress.</p>
<h2 class="mdx_h2__tTkl_">Next steps</h2>
<p class="mdx_p__PmNxW">Now that you have the basics down, you can start building your plugin using the new design system.
Please familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system.
If you have any questions, please reach out to us on <a href="https://discord.gg/MUpMjP2" style="color:var(--primary)">Discord</a>.</p></div></div></div><script src="/_next/static/chunks/webpack-c6b0b473db8c5315.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/7bda2f0d9796bfcb.css\",\"style\"]\n2:HL[\"/_next/static/css/ac0217622e33d24f.css\",\"style\"]\n3:HL[\"/_next/static/css/1196c23d52bc6240.css\",\"style\"]\n4:HL[\"/_next/static/css/f7ded429357818eb.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"5:I[2846,[],\"\"]\nb:I[4707,[],\"\"]\nc:I[6423,[],\"\"]\nd:I[8847,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"Providers\"]\ne:I[6807,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"ScrollAreaRoot\"]\nf:I[7546,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"ScrollAreaViewport\"]\n10:I[2972,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"\"]\n12:I[8864,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b"])</script><script>self.__next_f.push([1,"02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"Docs\"]\n13:I[4622,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"Playground\"]\n14:I[1600,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"ScrollAreaScrollbar\"]\n15:I[4741,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"ScrollAreaThumb\"]\n16:I[7879,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js"])</script><script>self.__next_f.push([1,"\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"Nav\"]\n17:I[5564,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"ThemeNameSelector\"]\n18:I[3589,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"ThemeSelector\"]\n1d:I[6450,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"537\",\"static/chunks/1e87141b-fcfec9cd0504a355.js\",\"401\",\"static/chunks/363642f4-25d86c84e2b02bb7.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"333\",\"static/chunks/333-a96152abf3f0a6c7.js\",\"972\",\"static/chunks/972-133b85a74e2df673.js\",\"693\",\"static/chunks/693-e0a7a135518f65f8.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"185\",\"static/chunks/app/layout-ae340f67328cff10.js\"],\"CustomTheme\"]\n1f:I[1060,[],\"\"]\n11:Tb0f,"])</script><script>self.__next_f.push([1,"M77.414 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.086 0 1.9.352 2.442 1.056.558.689.836 1.598.836 2.728v7.502H84.41v-6.6c0-.66-.117-1.159-.352-1.496-.234-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM69.868 21.04c-1.13 0-2.142-.257-3.036-.77a5.547 5.547 0 0 1-2.068-2.09c-.484-.895-.726-1.892-.726-2.992 0-1.115.242-2.112.726-2.992a5.503 5.503 0 0 1 2.068-2.112c.88-.514 1.892-.77 3.036-.77 1.144 0 2.156.256 3.036.77a5.347 5.347 0 0 1 2.046 2.112c.498.88.748 1.87.748 2.97 0 1.114-.25 2.12-.748 3.014a5.343 5.343 0 0 1-2.068 2.09c-.88.513-1.885.77-3.014.77Zm0-2.618c.557 0 1.048-.132 1.474-.396a2.79 2.79 0 0 0 .99-1.144c.234-.499.352-1.064.352-1.694 0-.63-.118-1.188-.352-1.672a2.764 2.764 0 0 0-.99-1.166c-.426-.279-.917-.418-1.474-.418-.558 0-1.05.14-1.474.418a2.764 2.764 0 0 0-.99 1.166c-.22.484-.33 1.041-.33 1.672 0 .63.11 1.195.33 1.694.234.484.564.865.99 1.144.425.264.916.396 1.474.396ZM52.385 9.71h3.036v2.992l-.264-.022c.279-.88.748-1.65 1.408-2.31.675-.66 1.533-.99 2.574-.99 1.085 0 1.9.352 2.442 1.056.557.689.836 1.598.836 2.728v7.502h-3.036v-6.6c0-.66-.117-1.159-.352-1.496-.235-.338-.623-.506-1.166-.506-.601 0-1.122.271-1.562.814a4.321 4.321 0 0 0-.88 1.848v5.94h-3.036V9.71ZM43.904 20.952c-1.026 0-1.87-.308-2.53-.924-.66-.616-.99-1.416-.99-2.398 0-1.115.418-2.01 1.254-2.684.85-.69 2.105-1.034 3.762-1.034h2.75l-.924.352v-.462c0-.572-.176-1.02-.528-1.342-.352-.338-.931-.506-1.738-.506-.69 0-1.386.154-2.09.462-.704.308-1.29.69-1.76 1.144v-2.882c.47-.352 1.1-.66 1.892-.924a7.942 7.942 0 0 1 2.486-.396c1.599 0 2.78.41 3.542 1.232.778.806 1.166 1.914 1.166 3.322v5.742c0 .176.008.352.022.528.03.161.066.322.11.484h-3.014v-3.3l.044 1.386a4.044 4.044 0 0 1-1.32 1.606c-.572.396-1.283.594-2.134.594Zm.858-2.156c.558 0 1.049-.206 1.474-.616.44-.426.77-.954.99-1.584v-.792h-1.562c-.762 0-1.334.146-1.716.44-.381.278-.572.674-.572 1.188 0 .41.125.74.374.99.264.25.602.374 1.012.374ZM34.66 21.04c-1.525 0-2.874-.345-4.047-1.034-1.174-.704-2.09-1.68-2.75-2.926-.646-1.247-.968-2.662-.968-4.246 0-1.584.322-2.992.968-4.224.66-1.232 1.576-2.193 2.75-2.882 1.173-.704 2.522-1.056 4.048-1.056.968 0 1.818.11 2.552.33.748.22 1.356.506 1.826.858v3.498c-.396-.484-.96-.895-1.694-1.232-.719-.338-1.51-.506-2.376-.506-.939 0-1.775.22-2.508.66-.719.44-1.284 1.056-1.694 1.848-.396.792-.594 1.694-.594 2.706 0 1.026.198 1.943.594 2.75.41.792.975 1.408 1.694 1.848.733.44 1.57.66 2.508.66.88 0 1.68-.162 2.398-.484.718-.323 1.276-.726 1.672-1.21v3.41a5.686 5.686 0 0 1-1.87.902c-.704.22-1.54.33-2.508.33ZM11.275 6.271c.276.526.019 1.152-.464 1.498a5.846 5.846 0 0 0 1.004 10.082c.454.205.789.632.789 1.13v6.206a.837.837 0 0 1-.838.837C5.33 26.024.112 20.804.112 14.366V.862C.112.399.487.024.95.024c4.483 0 8.376 2.533 10.325 6.247Z"])</script><script>self.__next_f.push([1,"19:{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}\n1a:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n1b:{\"display\":\"inline-block\"}\n1c:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n20:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L5\",null,{\"buildId\":\"UR3YwTpq5Q7f0v1Dmsvw3\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"\"],\"initialTree\":[\"\",{\"children\":[\"(docs)\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"(docs)\",{\"children\":[\"__PAGE__\",{},[[\"$L6\",[[\"$\",\"img\",null,{\"src\":\"header.png\",\"style\":{\"width\":\"100%\",\"marginBottom\":\"32px\",\"marginTop\":\"64px\"}}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"mdx_p__PmNxW\",\"children\":\"Welcome to the Canon, the new design library for Backstage plugins. This\\nproject is still under active development but we will make sure to document\\nthe API as we go. We are aiming to improve the general UI of Backstage and\\nplugins across Backstage. This new library will take time to build but we are\\nbuilding it incrementally with not conflict with the existing theming system.\"}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"mdx_h2__tTkl_\",\"children\":\"Installation\"}],\"\\n\",[\"$\",\"h3\",null,{\"className\":\"mdx_h3__osV67\",\"children\":\"1. Install canon\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"mdx_p__PmNxW\",\"children\":\"Install Canon using a package manager.\"}],\"\\n\",\"$L7\",\"\\n\",[\"$\",\"h3\",null,{\"className\":\"mdx_h3__osV67\",\"children\":\"2. Import the css files\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"mdx_p__PmNxW\",\"children\":\"Import the global CSS file at the root of your application.\"}],\"\\n\",\"$L8\",\"\\n\",[\"$\",\"h3\",null,{\"className\":\"mdx_h3__osV67\",\"children\":\"3. Add the theme provider\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"mdx_p__PmNxW\",\"children\":\"Add the theme provider to your application.\"}],\"\\n\",\"$L9\",\"\\n\",[\"$\",\"h3\",null,{\"className\":\"mdx_h3__osV67\",\"children\":\"4. Start building ✨\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"mdx_p__PmNxW\",\"children\":\"Now you can start building your plugin using the new design system.\"}],\"\\n\",\"$La\",\"\\n\",[\"$\",\"h2\",null,{\"className\":\"mdx_h2__tTkl_\",\"children\":\"Roadmap\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"mdx_p__PmNxW\",\"children\":[\"You can check our roadmap \",[\"$\",\"a\",null,{\"href\":\"https://github.com/orgs/backstage/projects/10\",\"style\":{\"color\":\"var(--primary)\"},\"children\":\"on GitHub\"}],\". We'll do our best to keep you updated on the progress.\"]}],\"\\n\",[\"$\",\"h2\",null,{\"className\":\"mdx_h2__tTkl_\",\"children\":\"Next steps\"}],\"\\n\",[\"$\",\"p\",null,{\"className\":\"mdx_p__PmNxW\",\"children\":[\"Now that you have the basics down, you can start building your plugin using the new design system.\\nPlease familiarise yourself first with our theming principles. This will help you understand the core concepts of the design system.\\nIf you have any questions, please reach out to us on \",[\"$\",\"a\",null,{\"href\":\"https://discord.gg/MUpMjP2\",\"style\":{\"color\":\"var(--primary)\"},\"children\":\"Discord\"}],\".\"]}]],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/f7ded429357818eb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/1196c23d52bc6240.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"div\",null,{\"className\":\"layout_pageContainer__Io_cr\",\"children\":[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(docs)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}]],null],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/7bda2f0d9796bfcb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ac0217622e33d24f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"data-theme\":\"light\",\"data-theme-name\":\"default\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"page_global__106FI\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Sidebar_sidebar__86IlD\",\"children\":[\"$\",\"$Le\",null,{\"className\":\"Sidebar_root__AZrho\",\"children\":[[\"$\",\"$Lf\",null,{\"className\":\"Sidebar_viewport__Dwc0q\",\"children\":[\"$\",\"div\",null,{\"className\":\"Sidebar_content__vii3k\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Sidebar_logoContainer__OcEVQ\",\"children\":[\"$\",\"$L10\",null,{\"href\":\"/\",\"children\":[\"$\",\"svg\",null,{\"width\":\"89\",\"height\":\"27\",\"fill\":\"none\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"Sidebar_logo__P79Og\",\"children\":[[\"$\",\"path\",null,{\"d\":\"$11\"}],[\"$\",\"path\",null,{\"d\":\"M14.037 16.729a4.237 4.237 0 0 0 4.234-4.24 4.237 4.237 0 0 0-4.234-4.242 4.237 4.237 0 0 0-4.234 4.241 4.237 4.237 0 0 0 4.234 4.24Z\"}]]}]}]}],[\"$\",\"div\",null,{\"className\":\"Sidebar_menu__sTTeJ\",\"children\":[[\"$\",\"$L12\",null,{}],[\"$\",\"$L13\",null,{}]]}]]}]}],[\"$\",\"$L14\",null,{\"className\":\"Sidebar_scrollbar__XbWMn\",\"children\":[\"$\",\"$L15\",null,{\"className\":\"Sidebar_thumb__zjCHe\"}]}]]}]}],[\"$\",\"div\",null,{\"className\":\"page_container__ul_gw\",\"children\":[[\"$\",\"div\",null,{\"className\":\"styles_toolbar__Dfx8Q\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"$L16\",null,{}]}],[\"$\",\"div\",null,{\"className\":\"styles_actions__hQrVs\",\"children\":[[\"$\",\"$L17\",null,{}],[\"$\",\"$L18\",null,{}]]}]]}],[\"$\",\"$Lb\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lc\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$19\",\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":\"$1a\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$1b\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$1c\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]]}],[\"$\",\"$L1d\",null,{}]]}]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L1e\"],\"globalErrorComponent\":\"$1f\",\"missingSlots\":\"$W20\"}]\n"])</script><script>self.__next_f.push([1,"21:I[4206,[\"738\",\"static/chunks/42437bae-10ab3b1cdaf93342.js\",\"264\",\"static/chunks/264-068d79c39d9bf958.js\",\"878\",\"static/chunks/878-5b2dc8dfa719b539.js\",\"896\",\"static/chunks/896-64a243ccea8efaf8.js\",\"296\",\"static/chunks/app/(docs)/page-c0052dfe7dbb7c7d.js\"],\"CodeBlockClient\"]\n8:[\"$\",\"$L21\",null,{\"out\":\"\u003cpre class=\\\"shiki shiki-themes min-light min-dark\\\" style=\\\"background-color:#ffffff;--shiki-dark-bg:#1f1f1f;color:#24292eff;--shiki-dark:#b392f0\\\" tabindex=\\\"0\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:#D32F2F;--shiki-dark:#F97583\\\"\u003eimport\u003c/span\u003e\u003cspan style=\\\"color:#22863A;--shiki-dark:#FFAB70\\\"\u003e '@backstage/canon/css/core.css'\u003c/span\u003e\u003cspan style=\\\"color:#24292EFF;--shiki-dark:#B392F0\\\"\u003e;\u003c/span\u003e\u003c/span\u003e\\n\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:#D32F2F;--shiki-dark:#F97583\\\"\u003eimport\u003c/span\u003e\u003cspan style=\\\"color:#22863A;--shiki-dark:#FFAB70\\\"\u003e '@backstage/canon/css/components.css'\u003c/span\u003e\u003cspan style=\\\"color:#24292EFF;--shiki-dark:#B392F0\\\"\u003e;\u003c/span\u003e\u003c/span\u003e\\n\u003cspan class=\\\"line\\\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\",\"title\":\"$undefined\"}]\n22:T4db,\u003cpre class=\"shiki shiki-themes min-light min-dark\" style=\"background-color:#ffffff;--shiki-dark-bg:#1f1f1f;color:#24292eff;--shiki-dark:#b392f0\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#D32F2F;--shiki-dark:#F97583\"\u003eimport\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e { ThemeProvider } \u003c/span\u003e\u003cspan style=\"color:#D32F2F;--shiki-dark:#F97583\"\u003efrom\u003c/span\u003e\u003cspan style=\"color:#22863A;--shiki-dark:#FFAB70\"\u003e '@backstage/canon'\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eThemeProvider\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eApp\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e /\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003c"])</script><script>self.__next_f.push([1,"span style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eThemeProvider\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003e;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e9:[\"$\",\"$L21\",null,{\"out\":\"$22\",\"title\":\"$undefined\"}]\n23:T798,\u003cpre class=\"shiki shiki-themes min-light min-dark\" style=\"background-color:#ffffff;--shiki-dark-bg:#1f1f1f;color:#24292eff;--shiki-dark:#b392f0\" tabindex=\"0\"\u003e\u003ccode\u003e\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#D32F2F;--shiki-dark:#F97583\"\u003eimport\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e { Flex\u003c/span\u003e\u003cspan style=\"color:#212121;--shiki-dark:#BBBBBB\"\u003e,\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e Button\u003c/span\u003e\u003cspan style=\"color:#212121;--shiki-dark:#BBBBBB\"\u003e,\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e Text } \u003c/span\u003e\u003cspan style=\"color:#D32F2F;--shiki-dark:#F97583\"\u003efrom\u003c/span\u003e\u003cspan style=\"color:#22863A;--shiki-dark:#FFAB70\"\u003e '@backstage/canon'\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eFlex\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eText\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003eHello World\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eText\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e \u0026#x3C;\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eButton\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003eClick me\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eButton\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003e\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003cspan style=\"color:#24292EFF;--sh"])</script><script>self.__next_f.push([1,"iki-dark:#B392F0\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eFlex\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003e;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003ea:[\"$\",\"$L21\",null,{\"out\":\"$23\",\"title\":\"$undefined\"}]\n1e:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Canon\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"UI library for Backstage\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:title\",\"content\":\"Canon\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:description\",\"content\":\"UI library for Backstage\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image\",\"content\":\"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Canon\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"UI library for Backstage\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:image:type\",\"content\":\"image/jpeg\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:image\",\"content\":\"https://canon.backstage.io/opengraph-image.jpg?556e6c1ce23ce382\"}],[\"$\",\"link\",\"17\",{\"rel\":\"icon\",\"href\":\"/icon.svg?27251f321bf90e71\",\"type\":\"image/svg+xml\",\"sizes\":\"any\"}]]\n6:null\n"])</script><script>self.__next_f.push([1,"7:[\"$\",\"$L21\",null,{\"out\":\"\u003cpre class=\\\"shiki shiki-themes min-light min-dark\\\" style=\\\"background-color:#ffffff;--shiki-dark-bg:#1f1f1f;color:#24292eff;--shiki-dark:#b392f0\\\" tabindex=\\\"0\\\"\u003e\u003ccode\u003e\u003cspan class=\\\"line\\\"\u003e\u003cspan style=\\\"color:#6F42C1;--shiki-dark:#B392F0\\\"\u003enpm\u003c/span\u003e\u003cspan style=\\\"color:#2B5581;--shiki-dark:#9DB1C5\\\"\u003e install\u003c/span\u003e\u003cspan style=\\\"color:#2B5581;--shiki-dark:#9DB1C5\\\"\u003e @backstage/canon\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\",\"title\":\"$undefined\"}]\n"])</script></body></html>