-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabout.html
22 lines (22 loc) · 44.6 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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="stylesheet" href="/_next/static/css/93fcd661c6363c0c.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/1196c23d52bc6240.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/67c5bb855a5e37d9.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-8536931ce32fad6f.js"/><script src="/_next/static/chunks/fd9d1056-27b154a153fac35f.js" async=""></script><script src="/_next/static/chunks/2117-e80b6611e2070de2.js" async=""></script><script src="/_next/static/chunks/main-app-ecd50dd0f8f171cc.js" async=""></script><script src="/_next/static/chunks/42437bae-f0d7b82f7021b572.js" async=""></script><script src="/_next/static/chunks/1e87141b-a775aa73a8e49cfd.js" async=""></script><script src="/_next/static/chunks/363642f4-ceac791b2c01b00e.js" async=""></script><script src="/_next/static/chunks/8975-9179dec36cac27d4.js" async=""></script><script src="/_next/static/chunks/1333-64a67200c8f73824.js" async=""></script><script src="/_next/static/chunks/5266-70ef30039aee201a.js" async=""></script><script src="/_next/static/chunks/2972-9f00cb0867656923.js" async=""></script><script src="/_next/static/chunks/3454-abfe8de6d50f4132.js" async=""></script><script src="/_next/static/chunks/app/layout-7e6286b932d92366.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__DlbOF"><div class="Sidebar_sidebar__86IlD"><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="canon-Box cu-mt-lg cu-mb-2xs"><div class="Sidebar_sectionTitle__s0c_b">Overview</div></div><a class="Sidebar_line__nqYoI " href="/"><div class="Sidebar_lineTitle__LPKUk">Getting Started</div><div class="Sidebar_lineStatus__v7sR3"></div></a><a class="Sidebar_line__nqYoI Sidebar_active__vqrO1" href="/about"><div class="Sidebar_lineTitle__LPKUk">About</div><div class="Sidebar_lineStatus__v7sR3"></div></a><div class="canon-Box cu-mt-lg cu-mb-2xs"><div class="Sidebar_sectionTitle__s0c_b">Theme</div></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="canon-Box cu-mt-lg cu-mb-2xs"><div class="Sidebar_sectionTitle__s0c_b">Layout Components</div></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/inline"><div class="Sidebar_lineTitle__LPKUk">Inline</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><a class="Sidebar_line__nqYoI " href="/components/stack"><div class="Sidebar_lineTitle__LPKUk">Stack</div><div class="Sidebar_lineStatus__v7sR3">Alpha</div></a><div class="canon-Box cu-mt-lg cu-mb-2xs"><div class="Sidebar_sectionTitle__s0c_b">Components</div></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) translateZ(0)"><div class="canon-Box cu-mt-lg cu-mb-2xs"><p class="canon-Text canon-Text--variant-body canon-Text--weight-bold">Components</p></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Button</p><button type="button" id="base-ui-:Rglacq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Checkbox</p><button type="button" id="base-ui-:Rh5acq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Field</p><button type="button" id="base-ui-:Rhlacq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Heading</p><button type="button" id="base-ui-:Ri5acq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Icon</p><button type="button" id="base-ui-:Rilacq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Input</p><button type="button" id="base-ui-:Rj5acq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Table</p><button type="button" id="base-ui-:Rjlacq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Text</p><button type="button" id="base-ui-:Rk5acq:" 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="canon-Box cu-mt-lg cu-mb-2xs"><p class="canon-Text canon-Text--variant-body canon-Text--weight-bold">Screen sizes</p></div><div class="Sidebar_line__nqYoI"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Mobile</p><button type="button" id="base-ui-:R8pacq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Tablet</p><button type="button" id="base-ui-:R99acq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Desktop</p><button type="button" id="base-ui-:R9pacq:" 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"><p class="canon-Text canon-Text--variant-body canon-Text--weight-regular">Wide</p><button type="button" id="base-ui-:Ra9acq:" 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 class="page_container__aoG4z"><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="op5jhfuucr" 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" style="width:16px;height:16px" 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" style="width:16px;height:16px" 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" style="width:16px;height:16px" 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="8bf0012d3ai" class="theme_indicator__oGk64"></span></div></div></div></div><div class="layout_pageContainer__Io_cr"><div class="canon-Box" style="margin-top:4rem"><h1 style="font-family:var(--docs-font);font-size:3rem;font-weight:var(--canon-font-weight-bold);margin-top:4rem;margin-bottom:0.5rem">About Canon</h1></div>
<p style="font-family:var(--docs-font);font-size:1rem;line-height:1.5;margin-top:0;margin-bottom:1rem">Canon is a design system created specifically for Backstage, built with React, TypeScript, and vanilla CSS.
This open-source library is hosted in the Backstage monorepo. While it can be used in other projects, Canon
is designed to deliver a consistent, accessible, and extensible experience tailored to Backstage users.</p>
<div class="canon-Box cu-mt-2xl cu-mb-md"><h2 style="font-family:var(--docs-font);font-size:1.5rem;font-weight:var(--canon-font-weight-bold)">Philosophy</h2></div>
<p style="font-family:var(--docs-font);font-size:1rem;line-height:1.5;margin-top:0;margin-bottom:1rem">Backstage empowers product teams to build software faster and with greater quality. Its extensibility,
however, required us to rethink how to deliver a consistent and accessible user experience. Our goal is
to enable plugin creators to design plugins that seamlessly integrate with Backstage's look and feel while
still allowing customization to match individual brands.</p>
<p style="font-family:var(--docs-font);font-size:1rem;line-height:1.5;margin-top:0;margin-bottom:1rem">Instead of reinventing the wheel, we chose to focus on layout and styling while leveraging existing headless
component libraries for functionality. This approach allows us to dedicate our efforts to creating a cohesive
and flexible theming system.</p>
<div class="canon-Box cu-mt-2xl cu-mb-md"><h2 style="font-family:var(--docs-font);font-size:1.5rem;font-weight:var(--canon-font-weight-bold)">Team</h2></div>
<p style="font-family:var(--docs-font);font-size:1rem;line-height:1.5;margin-top:0;margin-bottom:1rem">Canon is designed and maintained primarily by Spotify's Backstage team, leveraging Spotify's expertise in
crafting high-quality design and technology. Drawing from our experience in building reliable and intuitive
user experiences for the music industry, we've created a design system that looks great and works seamlessly.</p>
<div class="canon-Box cu-mt-2xl cu-mb-md"><h2 style="font-family:var(--docs-font);font-size:1.5rem;font-weight:var(--canon-font-weight-bold)">Community</h2></div>
<p style="font-family:var(--docs-font);font-size:1rem;line-height:1.5;margin-top:0;margin-bottom:1rem">Canon is an open-source project and we welcome contributions from the community. If you are interested in
contributing to Canon, please read our <a href="https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md" style="color:var(--canon-fg-text-primary)">contributing guide</a>
and our <a href="https://github.com/backstage/backstage/blob/master/CODE_OF_CONDUCT.md" style="color:var(--canon-fg-text-primary)">code of conduct</a>.</p>
<div class="canon-Box cu-mt-2xl cu-mb-md"><h2 style="font-family:var(--docs-font);font-size:1.5rem;font-weight:var(--canon-font-weight-bold)">License</h2></div>
<p style="font-family:var(--docs-font);font-size:1rem;line-height:1.5;margin-top:0;margin-bottom:1rem">Canon is licensed under the Apache 2.0 license. See the <a href="https://github.com/backstage/backstage/blob/master/LICENSE" style="color:var(--canon-fg-text-primary)">LICENSE</a> file for more details.</p></div></div></div><script src="/_next/static/chunks/webpack-8536931ce32fad6f.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/93fcd661c6363c0c.css\",\"style\"]\n2:HL[\"/_next/static/css/1196c23d52bc6240.css\",\"style\"]\n3:HL[\"/_next/static/css/67c5bb855a5e37d9.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"4:I[2846,[],\"\"]\n6:I[4707,[],\"\"]\n7:I[6423,[],\"\"]\n8:I[8847,[\"3738\",\"static/chunks/42437bae-f0d7b82f7021b572.js\",\"2537\",\"static/chunks/1e87141b-a775aa73a8e49cfd.js\",\"6401\",\"static/chunks/363642f4-ceac791b2c01b00e.js\",\"8975\",\"static/chunks/8975-9179dec36cac27d4.js\",\"1333\",\"static/chunks/1333-64a67200c8f73824.js\",\"5266\",\"static/chunks/5266-70ef30039aee201a.js\",\"2972\",\"static/chunks/2972-9f00cb0867656923.js\",\"3454\",\"static/chunks/3454-abfe8de6d50f4132.js\",\"3185\",\"static/chunks/app/layout-7e6286b932d92366.js\"],\"Providers\"]\n9:I[2972,[\"3738\",\"static/chunks/42437bae-f0d7b82f7021b572.js\",\"2537\",\"static/chunks/1e87141b-a775aa73a8e49cfd.js\",\"6401\",\"static/chunks/363642f4-ceac791b2c01b00e.js\",\"8975\",\"static/chunks/8975-9179dec36cac27d4.js\",\"1333\",\"static/chunks/1333-64a67200c8f73824.js\",\"5266\",\"static/chunks/5266-70ef30039aee201a.js\",\"2972\",\"static/chunks/2972-9f00cb0867656923.js\",\"3454\",\"static/chunks/3454-abfe8de6d50f4132.js\",\"3185\",\"static/chunks/app/layout-7e6286b932d92366.js\"],\"\"]\nb:I[8864,[\"3738\",\"static/chunks/42437bae-f0d7b82f7021b572.js\",\"2537\",\"static/chunks/1e87141b-a775aa73a8e49cfd.js\",\"6401\",\"static/chunks/363642f4-ceac791b2c01b00e.js\",\"8975\",\"static/chunks/8975-9179dec36cac27d4.js\",\"1333\",\"static/chunks/1333-64a67200c8f73824.js\",\"5266\",\"static/chunks/5266-70ef30039aee201a.js\",\"2972\",\"static/chunks/2972-9f00cb0867656923.js\",\"3454\",\"static/chunks/3454-abfe8de6d50f4132.js\",\"3185\",\"static/chunks/app/layout-7e6286b932d92366.js\"],\"Docs\"]\nc:I[4622,[\"3738\",\"static/chunks/42437bae-f0d7b82f7021b572.js\",\"2537\",\"static/chunks/1e87141b-a775aa73a8e49cfd.js\",\"6401\",\"static/chunks/363642f4-ceac791b2c01b00e.js\",\"8975\",\"static/chunks/8975-9179dec36cac27d4.js\",\"1333\",\"static/chunks/1333-64a67200c8f73824.js\",\"5266\",\"static/chunks/5266-70ef30039aee201a.js\",\"2972\",\"static/chunks/2972-9f00cb0867656923.js\",\"3454\",\"static/chunks/3454-abfe8de6d50f4132.js\",\"3185\",\"static/chunks/app/layout-7e6286b932d92366.js\"],\"Playground\"]\nd:I[7879,[\"3738\",\"static/chunks/42437bae-f0d7b82f7021b572.js\",\"2537\",\"static/chunks/1e87141b-a775aa73a8e49cfd.js\",\"64"])</script><script>self.__next_f.push([1,"01\",\"static/chunks/363642f4-ceac791b2c01b00e.js\",\"8975\",\"static/chunks/8975-9179dec36cac27d4.js\",\"1333\",\"static/chunks/1333-64a67200c8f73824.js\",\"5266\",\"static/chunks/5266-70ef30039aee201a.js\",\"2972\",\"static/chunks/2972-9f00cb0867656923.js\",\"3454\",\"static/chunks/3454-abfe8de6d50f4132.js\",\"3185\",\"static/chunks/app/layout-7e6286b932d92366.js\"],\"Nav\"]\ne:I[5564,[\"3738\",\"static/chunks/42437bae-f0d7b82f7021b572.js\",\"2537\",\"static/chunks/1e87141b-a775aa73a8e49cfd.js\",\"6401\",\"static/chunks/363642f4-ceac791b2c01b00e.js\",\"8975\",\"static/chunks/8975-9179dec36cac27d4.js\",\"1333\",\"static/chunks/1333-64a67200c8f73824.js\",\"5266\",\"static/chunks/5266-70ef30039aee201a.js\",\"2972\",\"static/chunks/2972-9f00cb0867656923.js\",\"3454\",\"static/chunks/3454-abfe8de6d50f4132.js\",\"3185\",\"static/chunks/app/layout-7e6286b932d92366.js\"],\"ThemeNameSelector\"]\nf:I[3589,[\"3738\",\"static/chunks/42437bae-f0d7b82f7021b572.js\",\"2537\",\"static/chunks/1e87141b-a775aa73a8e49cfd.js\",\"6401\",\"static/chunks/363642f4-ceac791b2c01b00e.js\",\"8975\",\"static/chunks/8975-9179dec36cac27d4.js\",\"1333\",\"static/chunks/1333-64a67200c8f73824.js\",\"5266\",\"static/chunks/5266-70ef30039aee201a.js\",\"2972\",\"static/chunks/2972-9f00cb0867656923.js\",\"3454\",\"static/chunks/3454-abfe8de6d50f4132.js\",\"3185\",\"static/chunks/app/layout-7e6286b932d92366.js\"],\"ThemeSelector\"]\n14:I[6450,[\"3738\",\"static/chunks/42437bae-f0d7b82f7021b572.js\",\"2537\",\"static/chunks/1e87141b-a775aa73a8e49cfd.js\",\"6401\",\"static/chunks/363642f4-ceac791b2c01b00e.js\",\"8975\",\"static/chunks/8975-9179dec36cac27d4.js\",\"1333\",\"static/chunks/1333-64a67200c8f73824.js\",\"5266\",\"static/chunks/5266-70ef30039aee201a.js\",\"2972\",\"static/chunks/2972-9f00cb0867656923.js\",\"3454\",\"static/chunks/3454-abfe8de6d50f4132.js\",\"3185\",\"static/chunks/app/layout-7e6286b932d92366.js\"],\"CustomTheme\"]\n16:I[1060,[],\"\"]\na: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,"10:{\"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\"}\n11:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n12:{\"display\":\"inline-block\"}\n13:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n17:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L4\",null,{\"buildId\":\"f2jyT8grSU-TooaOqHaHB\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"about\"],\"initialTree\":[\"\",{\"children\":[\"(docs)\",{\"children\":[\"about\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"(docs)\",{\"children\":[\"about\",{\"children\":[\"__PAGE__\",{},[[\"$L5\",[[\"$\",\"div\",null,{\"className\":\"canon-Box\",\"style\":{\"marginTop\":\"4rem\"},\"children\":[\"$\",\"h1\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"3rem\",\"fontWeight\":\"var(--canon-font-weight-bold)\",\"marginTop\":\"4rem\",\"marginBottom\":\"0.5rem\"},\"children\":\"About Canon\"}]}],\"\\n\",[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1rem\",\"lineHeight\":\"1.5\",\"marginTop\":\"0\",\"marginBottom\":\"1rem\"},\"children\":\"Canon is a design system created specifically for Backstage, built with React, TypeScript, and vanilla CSS.\\nThis open-source library is hosted in the Backstage monorepo. While it can be used in other projects, Canon\\nis designed to deliver a consistent, accessible, and extensible experience tailored to Backstage users.\"}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-Box cu-mt-2xl cu-mb-md\",\"style\":\"$undefined\",\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1.5rem\",\"fontWeight\":\"var(--canon-font-weight-bold)\"},\"children\":\"Philosophy\"}]}],\"\\n\",[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1rem\",\"lineHeight\":\"1.5\",\"marginTop\":\"0\",\"marginBottom\":\"1rem\"},\"children\":\"Backstage empowers product teams to build software faster and with greater quality. Its extensibility,\\nhowever, required us to rethink how to deliver a consistent and accessible user experience. Our goal is\\nto enable plugin creators to design plugins that seamlessly integrate with Backstage's look and feel while\\nstill allowing customization to match individual brands.\"}],\"\\n\",[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1rem\",\"lineHeight\":\"1.5\",\"marginTop\":\"0\",\"marginBottom\":\"1rem\"},\"children\":\"Instead of reinventing the wheel, we chose to focus on layout and styling while leveraging existing headless\\ncomponent libraries for functionality. This approach allows us to dedicate our efforts to creating a cohesive\\nand flexible theming system.\"}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-Box cu-mt-2xl cu-mb-md\",\"style\":\"$undefined\",\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1.5rem\",\"fontWeight\":\"var(--canon-font-weight-bold)\"},\"children\":\"Team\"}]}],\"\\n\",[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1rem\",\"lineHeight\":\"1.5\",\"marginTop\":\"0\",\"marginBottom\":\"1rem\"},\"children\":\"Canon is designed and maintained primarily by Spotify's Backstage team, leveraging Spotify's expertise in\\ncrafting high-quality design and technology. Drawing from our experience in building reliable and intuitive\\nuser experiences for the music industry, we've created a design system that looks great and works seamlessly.\"}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-Box cu-mt-2xl cu-mb-md\",\"style\":\"$undefined\",\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1.5rem\",\"fontWeight\":\"var(--canon-font-weight-bold)\"},\"children\":\"Community\"}]}],\"\\n\",[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1rem\",\"lineHeight\":\"1.5\",\"marginTop\":\"0\",\"marginBottom\":\"1rem\"},\"children\":[\"Canon is an open-source project and we welcome contributions from the community. If you are interested in\\ncontributing to Canon, please read our \",[\"$\",\"a\",null,{\"href\":\"https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md\",\"style\":{\"color\":\"var(--canon-fg-text-primary)\"},\"children\":\"contributing guide\"}],\"\\nand our \",[\"$\",\"a\",null,{\"href\":\"https://github.com/backstage/backstage/blob/master/CODE_OF_CONDUCT.md\",\"style\":{\"color\":\"var(--canon-fg-text-primary)\"},\"children\":\"code of conduct\"}],\".\"]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-Box cu-mt-2xl cu-mb-md\",\"style\":\"$undefined\",\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1.5rem\",\"fontWeight\":\"var(--canon-font-weight-bold)\"},\"children\":\"License\"}]}],\"\\n\",[\"$\",\"p\",null,{\"style\":{\"fontFamily\":\"var(--docs-font)\",\"fontSize\":\"1rem\",\"lineHeight\":\"1.5\",\"marginTop\":\"0\",\"marginBottom\":\"1rem\"},\"children\":[\"Canon is licensed under the Apache 2.0 license. See the \",[\"$\",\"a\",null,{\"href\":\"https://github.com/backstage/backstage/blob/master/LICENSE\",\"style\":{\"color\":\"var(--canon-fg-text-primary)\"},\"children\":\"LICENSE\"}],\" file for more details.\"]}]],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/67c5bb855a5e37d9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]],null],null]},[null,[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(docs)\",\"children\",\"about\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\"}]],null]},[[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/1196c23d52bc6240.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"div\",null,{\"className\":\"layout_pageContainer__Io_cr\",\"children\":[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(docs)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",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/93fcd661c6363c0c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"data-theme\":\"light\",\"data-theme-name\":\"default\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$L8\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"page_global__DlbOF\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Sidebar_sidebar__86IlD\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Sidebar_logoContainer__OcEVQ\",\"children\":[\"$\",\"$L9\",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\":\"$a\"}],[\"$\",\"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\":[[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{}]]}]]}],[\"$\",\"div\",null,{\"className\":\"page_container__aoG4z\",\"children\":[[\"$\",\"div\",null,{\"className\":\"styles_toolbar__Dfx8Q\",\"children\":[[\"$\",\"div\",null,{\"children\":[\"$\",\"$Ld\",null,{}]}],[\"$\",\"div\",null,{\"className\":\"styles_actions__hQrVs\",\"children\":[[\"$\",\"$Le\",null,{}],[\"$\",\"$Lf\",null,{}]]}]]}],[\"$\",\"$L6\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L7\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$10\",\"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\":\"$11\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$12\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$13\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]]}],[\"$\",\"$L14\",null,{}]]}]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L15\"],\"globalErrorComponent\":\"$16\",\"missingSlots\":\"$W17\"}]\n"])</script><script>self.__next_f.push([1,"15:[[\"$\",\"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\"}]]\n5:null\n"])</script></body></html>