-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
38 lines (38 loc) · 49.4 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/a1c64da84bdc62d5.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/10e7570fd906a0bd.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/6d9eff3d7d9d8f0f.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/1196c23d52bc6240.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/3d52a3384f305afc.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-c33980fd4573b26f.js"/><script src="/_next/static/chunks/fd9d1056-c041d862c65cdf58.js" async=""></script><script src="/_next/static/chunks/117-3370dff3c811286f.js" async=""></script><script src="/_next/static/chunks/main-app-8ccb91074c88fe62.js" async=""></script><script src="/_next/static/chunks/42437bae-439d1634ba8b381a.js" async=""></script><script src="/_next/static/chunks/878-d56df7e240e7956c.js" async=""></script><script src="/_next/static/chunks/app/(docs)/page-6946ba83908c5673.js" async=""></script><script src="/_next/static/chunks/275-09715c2ec8927177.js" async=""></script><script src="/_next/static/chunks/368-c5704a56e00f7665.js" async=""></script><script src="/_next/static/chunks/933-1b5daf9df0ed4e50.js" async=""></script><script src="/_next/static/chunks/972-b80144ee1d3ea1b5.js" async=""></script><script src="/_next/static/chunks/491-02ecb0c3d61129ed.js" async=""></script><script src="/_next/static/chunks/app/layout-f170a806a6d112ed.js" async=""></script><title>Canon</title><meta name="description" content="UI library for Backstage"/><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_content__vii3k"><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 class="Sidebar_actions__nEegq"><div data-orientation="horizontal" data-activation-direction="none" class="Tabs_tabs__9hm7c"><div role="tablist" data-orientation="horizontal" data-activation-direction="none" class="Tabs_list__ogiyK"><button type="button" tabindex="-1" role="tab" aria-selected="false" id="base-ui-:R1acq:" data-orientation="horizontal" class="Tabs_tab__PAgI1"><p class="text text-caption text-bold">Theme 1</p></button><button type="button" tabindex="-1" role="tab" aria-selected="true" id="base-ui-:R2acq:" data-selected="" data-orientation="horizontal" class="Tabs_tab__PAgI1"><p class="text text-caption text-bold">Theme 2</p></button><span role="presentation" hidden="" data-orientation="horizontal" data-activation-direction="none" data-instance-id="ls1yowhncnj" class="Tabs_indicator__P8Dcw"></span></div></div><div data-orientation="horizontal" data-activation-direction="none" class="Tabs_tabsTheme__EIngN"><div role="tablist" data-orientation="horizontal" data-activation-direction="none" class="Tabs_list__ogiyK"><button type="button" tabindex="-1" role="tab" aria-selected="true" id="base-ui-:R1icq:" data-selected="" data-orientation="horizontal" class="Tabs_tab__PAgI1"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon icon-16"><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-:R2icq:" data-orientation="horizontal" class="Tabs_tab__PAgI1"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon icon-16"><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="qdo9qq01zlh" class="Tabs_indicator__P8Dcw"></span></div></div></div><div data-orientation="horizontal" data-activation-direction="none" class="Tabs_tabs__9hm7c"><div role="tablist" data-orientation="horizontal" data-activation-direction="none" class="Tabs_list__ogiyK"><button type="button" tabindex="-1" role="tab" aria-selected="true" id="base-ui-:Rbcq:" data-selected="" data-orientation="horizontal" class="Tabs_tab__PAgI1"><p class="text text-caption text-bold">Documentation</p></button><button type="button" tabindex="-1" role="tab" aria-selected="false" id="base-ui-:Rjcq:" data-orientation="horizontal" class="Tabs_tab__PAgI1"><p class="text text-caption text-bold">Playground</p></button><span role="presentation" hidden="" data-orientation="horizontal" data-activation-direction="none" data-instance-id="wx6byphko77" class="Tabs_indicator__P8Dcw"></span></div></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"><p class="text text-body text-bold">Overview</p></div><a class="Sidebar_line__nqYoI Sidebar_active__vqrO1" href="/"><p class="text text-body text-regular">Getting Started</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)"></p></a><a class="Sidebar_line__nqYoI " href="/about"><p class="text text-body text-regular">About</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)"></p></a><div class="canon-box cu-mt-lg cu-mb-2xs"><p class="text text-body text-bold">Theme</p></div><a class="Sidebar_line__nqYoI " href="/theme/iconography"><p class="text text-body text-regular">Iconography</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)"></p></a><a class="Sidebar_line__nqYoI " href="/theme/layout"><p class="text text-body text-regular">Layout</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)"></p></a><a class="Sidebar_line__nqYoI " href="/theme/responsive"><p class="text text-body text-regular">Responsive</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)"></p></a><a class="Sidebar_line__nqYoI " href="/theme/theming"><p class="text text-body text-regular">Theming</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)"></p></a><a class="Sidebar_line__nqYoI " href="/theme/typography"><p class="text text-body text-regular">Typography</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)"></p></a><div class="canon-box cu-mt-lg cu-mb-2xs"><p class="text text-body text-bold">Layout Components</p></div><a class="Sidebar_line__nqYoI " href="/components/box"><p class="text text-body text-regular">Box</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">Alpha</p></a><a class="Sidebar_line__nqYoI " href="/components/container"><p class="text text-body text-regular">Container</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">Alpha</p></a><a class="Sidebar_line__nqYoI " href="/components/grid"><p class="text text-body text-regular">Grid</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">Alpha</p></a><a class="Sidebar_line__nqYoI " href="/components/inline"><p class="text text-body text-regular">Inline</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">Alpha</p></a><a class="Sidebar_line__nqYoI " href="/components/stack"><p class="text text-body text-regular">Stack</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">Alpha</p></a><div class="canon-box cu-mt-lg cu-mb-2xs"><p class="text text-body text-bold">Components</p></div><a class="Sidebar_line__nqYoI " href="/components/button"><p class="text text-body text-regular">Button</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">In Progress</p></a><a class="Sidebar_line__nqYoI " href="/components/checkbox"><p class="text text-body text-regular">Checkbox</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">In Progress</p></a><a class="Sidebar_line__nqYoI " href="/components/heading"><p class="text text-body text-regular">Heading</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">Alpha</p></a><a class="Sidebar_line__nqYoI " href="/components/icon"><p class="text text-body text-regular">Icon</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">Alpha</p></a><a class="Sidebar_line__nqYoI " href="/components/table"><p class="text text-body text-regular">Table</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">In Progress</p></a><a class="Sidebar_line__nqYoI " href="/components/text"><p class="text text-body text-regular">Text</p><p class="text text-body text-regular" style="color:var(--canon-text-secondary)">Alpha</p></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="text text-body text-bold">Components</p></div><div class="Sidebar_line__nqYoI"><p class="text text-body text-regular">Button</p><button type="button" id="base-ui-:Rhakcq:" role="checkbox" aria-checked="true" data-checked="" class="checkbox undefined"><span data-checked="" class="checkbox-indicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon icon-12"><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="text text-body text-regular">Checkbox</p><button type="button" id="base-ui-:Riakcq:" role="checkbox" aria-checked="true" data-checked="" class="checkbox undefined"><span data-checked="" class="checkbox-indicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon icon-12"><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="text text-body text-regular">Heading</p><button type="button" id="base-ui-:Rjakcq:" role="checkbox" aria-checked="true" data-checked="" class="checkbox undefined"><span data-checked="" class="checkbox-indicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon icon-12"><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="text text-body text-regular">Icon</p><button type="button" id="base-ui-:Rkakcq:" role="checkbox" aria-checked="true" data-checked="" class="checkbox undefined"><span data-checked="" class="checkbox-indicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon icon-12"><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="text text-body text-regular">Table</p><button type="button" id="base-ui-:Rlakcq:" role="checkbox" aria-checked="true" data-checked="" class="checkbox undefined"><span data-checked="" class="checkbox-indicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon icon-12"><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="text text-body text-regular">Text</p><button type="button" id="base-ui-:Rmakcq:" role="checkbox" aria-checked="true" data-checked="" class="checkbox undefined"><span data-checked="" class="checkbox-indicator"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="remixicon icon-12"><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="text text-body text-bold">Screen sizes</p></div><div class="Sidebar_line__nqYoI"><p class="text text-body text-regular">Mobile</p><button type="button" id="base-ui-:Rhikcq:" role="checkbox" aria-checked="false" data-unchecked="" class="checkbox undefined"></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="text text-body text-regular">Tablet</p><button type="button" id="base-ui-:Riikcq:" role="checkbox" aria-checked="false" data-unchecked="" class="checkbox undefined"></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="text text-body text-regular">Desktop</p><button type="button" id="base-ui-:Rjikcq:" role="checkbox" aria-checked="false" data-unchecked="" class="checkbox undefined"></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="text text-body text-regular">Wide</p><button type="button" id="base-ui-:Rkikcq:" role="checkbox" aria-checked="false" data-unchecked="" class="checkbox undefined"></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 class="page_container__aoG4z"><div class="layout_pageContainer__Io_cr"><img src="header.png" style="width:100%;margin-bottom:32px;margin-top:64px"/>
<div class="canon-box cu-mb-sm"><p class="text text-subtitle text-regular">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></div>
<div class="canon-box cu-mt-2xl cu-mb-md"><h1 class="text text-title4">Installation</h1></div>
<div class="canon-box cu-mt-xl cu-mb-xs"><h1 class="text text-title5">1. Install canon</h1></div>
<div class="canon-box cu-mb-sm"><p class="text text-subtitle text-regular">Install Canon using a package manager.</p></div>
<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>
<div class="canon-box cu-mt-xl cu-mb-xs"><h1 class="text text-title5">2. Import the css files</h1></div>
<div class="canon-box cu-mb-sm"><p class="text text-subtitle text-regular">Import the global CSS file at the root of your application.</p></div>
<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>
<div class="canon-box cu-mt-xl cu-mb-xs"><h1 class="text text-title5">3. Add the theme provider</h1></div>
<div class="canon-box cu-mb-sm"><p class="text text-subtitle text-regular">Add the theme provider to your application.</p></div>
<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>
<div class="canon-box cu-mt-xl cu-mb-xs"><h1 class="text text-title5">4. Start building ✨</h1></div>
<div class="canon-box cu-mb-sm"><p class="text text-subtitle text-regular">Now you can start building your plugin using the new design system.</p></div>
<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"> { Stack</span><span style="color:#212121;--shiki-dark:#BBBBBB">,</span><span style="color:#24292EFF;--shiki-dark:#B392F0"> Button } </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">Stack</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">Stack</span><span style="color:#24292EFF;--shiki-dark:#B392F0">>;</span></span>
<span class="line"></span></code></pre></div></div>
<div class="canon-box cu-mt-2xl cu-mb-md"><h1 class="text text-title4">Roadmap</h1></div>
<div class="canon-box cu-mb-sm"><p class="text text-subtitle text-regular">You can check our roadmap <a href="https://github.com/orgs/backstage/projects/10" style="color:var(--canon-text-primary)">on GitHub</a>. We'll do our best to keep you updated on the progress.</p></div>
<div class="canon-box cu-mt-2xl cu-mb-md"><h1 class="text text-title4">Next steps</h1></div>
<div class="canon-box cu-mb-sm"><p class="text text-subtitle text-regular">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(--canon-text-primary)">Discord</a>.</p></div></div></div></div><script src="/_next/static/chunks/webpack-c33980fd4573b26f.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/a1c64da84bdc62d5.css\",\"style\"]\n2:HL[\"/_next/static/css/10e7570fd906a0bd.css\",\"style\"]\n3:HL[\"/_next/static/css/6d9eff3d7d9d8f0f.css\",\"style\"]\n4:HL[\"/_next/static/css/1196c23d52bc6240.css\",\"style\"]\n5:HL[\"/_next/static/css/3d52a3384f305afc.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"6:I[2846,[],\"\"]\n8:I[5832,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"878\",\"static/chunks/878-d56df7e240e7956c.js\",\"296\",\"static/chunks/app/(docs)/page-6946ba83908c5673.js\"],\"Text\"]\n9:I[105,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"878\",\"static/chunks/878-d56df7e240e7956c.js\",\"296\",\"static/chunks/app/(docs)/page-6946ba83908c5673.js\"],\"Heading\"]\ne:I[4707,[],\"\"]\nf:I[6423,[],\"\"]\n10:I[8847,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"275\",\"static/chunks/275-09715c2ec8927177.js\",\"368\",\"static/chunks/368-c5704a56e00f7665.js\",\"933\",\"static/chunks/933-1b5daf9df0ed4e50.js\",\"972\",\"static/chunks/972-b80144ee1d3ea1b5.js\",\"491\",\"static/chunks/491-02ecb0c3d61129ed.js\",\"185\",\"static/chunks/app/layout-f170a806a6d112ed.js\"],\"Providers\"]\n11:I[2972,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"275\",\"static/chunks/275-09715c2ec8927177.js\",\"368\",\"static/chunks/368-c5704a56e00f7665.js\",\"933\",\"static/chunks/933-1b5daf9df0ed4e50.js\",\"972\",\"static/chunks/972-b80144ee1d3ea1b5.js\",\"491\",\"static/chunks/491-02ecb0c3d61129ed.js\",\"185\",\"static/chunks/app/layout-f170a806a6d112ed.js\"],\"\"]\n13:I[1750,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"275\",\"static/chunks/275-09715c2ec8927177.js\",\"368\",\"static/chunks/368-c5704a56e00f7665.js\",\"933\",\"static/chunks/933-1b5daf9df0ed4e50.js\",\"972\",\"static/chunks/972-b80144ee1d3ea1b5.js\",\"491\",\"static/chunks/491-02ecb0c3d61129ed.js\",\"185\",\"static/chunks/app/layout-f170a806a6d112ed.js\"],\"TabsVersion\"]\n14:I[1750,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"275\",\"static/chunks/275-09715c2ec8927177.js\",\"368\",\"static/chunks/368-c5704a56e00f7665.js\",\"933\",\"static/chunks/933-1b5daf9df0ed4e50.js\",\"972\",\"static/chunks/972-b80144ee1d3ea1b5.js\",\"491\",\"static/chunks/491-02ecb0c3d61129ed.js\",\"185\",\"static/chunks/app/layout-f170a806a6d112ed.js\"],\"TabsTheme\"]\n15:I[1750,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"275\",\"static/chunks/275-09715c2ec8927177.js\",\"368\",\"static/chunks/368-c5704a56e00f7665.js\",\"933\",\"static/chunks/933-1b5daf9df0ed4e50.js\",\"972\",\"static/chunks/"])</script><script>self.__next_f.push([1,"972-b80144ee1d3ea1b5.js\",\"491\",\"static/chunks/491-02ecb0c3d61129ed.js\",\"185\",\"static/chunks/app/layout-f170a806a6d112ed.js\"],\"TabsPages\"]\n16:I[8864,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"275\",\"static/chunks/275-09715c2ec8927177.js\",\"368\",\"static/chunks/368-c5704a56e00f7665.js\",\"933\",\"static/chunks/933-1b5daf9df0ed4e50.js\",\"972\",\"static/chunks/972-b80144ee1d3ea1b5.js\",\"491\",\"static/chunks/491-02ecb0c3d61129ed.js\",\"185\",\"static/chunks/app/layout-f170a806a6d112ed.js\"],\"Docs\"]\n17:I[4622,[\"738\",\"static/chunks/42437bae-439d1634ba8b381a.js\",\"275\",\"static/chunks/275-09715c2ec8927177.js\",\"368\",\"static/chunks/368-c5704a56e00f7665.js\",\"933\",\"static/chunks/933-1b5daf9df0ed4e50.js\",\"972\",\"static/chunks/972-b80144ee1d3ea1b5.js\",\"491\",\"static/chunks/491-02ecb0c3d61129ed.js\",\"185\",\"static/chunks/app/layout-f170a806a6d112ed.js\"],\"Playground\"]\n1d:I[1060,[],\"\"]\n12: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,"18:{\"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\"}\n19:{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"}\n1a:{\"display\":\"inline-block\"}\n1b:{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0}\n1e:[]\n"])</script><script>self.__next_f.push([1,"0:[\"$\",\"$L6\",null,{\"buildId\":\"_zyXRtpbRXu3I0SBceref\",\"assetPrefix\":\"\",\"urlParts\":[\"\",\"\"],\"initialTree\":[\"\",{\"children\":[\"(docs)\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[\"(docs)\",{\"children\":[\"__PAGE__\",{},[[\"$L7\",[[\"$\",\"img\",null,{\"src\":\"header.png\",\"style\":{\"width\":\"100%\",\"marginBottom\":\"32px\",\"marginTop\":\"64px\"}}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mb-sm\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L8\",null,{\"variant\":\"subtitle\",\"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\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mt-2xl cu-mb-md\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L9\",null,{\"variant\":\"title4\",\"children\":\"Installation\"}]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mt-xl cu-mb-xs\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L9\",null,{\"variant\":\"title5\",\"children\":\"1. Install canon\"}]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mb-sm\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L8\",null,{\"variant\":\"subtitle\",\"children\":\"Install Canon using a package manager.\"}]}],\"\\n\",\"$La\",\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mt-xl cu-mb-xs\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L9\",null,{\"variant\":\"title5\",\"children\":\"2. Import the css files\"}]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mb-sm\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L8\",null,{\"variant\":\"subtitle\",\"children\":\"Import the global CSS file at the root of your application.\"}]}],\"\\n\",\"$Lb\",\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mt-xl cu-mb-xs\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L9\",null,{\"variant\":\"title5\",\"children\":\"3. Add the theme provider\"}]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mb-sm\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L8\",null,{\"variant\":\"subtitle\",\"children\":\"Add the theme provider to your application.\"}]}],\"\\n\",\"$Lc\",\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mt-xl cu-mb-xs\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L9\",null,{\"variant\":\"title5\",\"children\":\"4. Start building ✨\"}]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mb-sm\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L8\",null,{\"variant\":\"subtitle\",\"children\":\"Now you can start building your plugin using the new design system.\"}]}],\"\\n\",\"$Ld\",\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mt-2xl cu-mb-md\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L9\",null,{\"variant\":\"title4\",\"children\":\"Roadmap\"}]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mb-sm\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L8\",null,{\"variant\":\"subtitle\",\"children\":[\"You can check our roadmap \",[\"$\",\"a\",null,{\"href\":\"https://github.com/orgs/backstage/projects/10\",\"style\":{\"color\":\"var(--canon-text-primary)\"},\"children\":\"on GitHub\"}],\". We'll do our best to keep you updated on the progress.\"]}]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mt-2xl cu-mb-md\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L9\",null,{\"variant\":\"title4\",\"children\":\"Next steps\"}]}],\"\\n\",[\"$\",\"div\",null,{\"className\":\"canon-box cu-mb-sm\",\"style\":\"$undefined\",\"children\":[\"$\",\"$L8\",null,{\"variant\":\"subtitle\",\"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(--canon-text-primary)\"},\"children\":\"Discord\"}],\".\"]}]}]],[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3d52a3384f305afc.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\":[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"(docs)\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",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/a1c64da84bdc62d5.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/10e7570fd906a0bd.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/6d9eff3d7d9d8f0f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"data-theme\":\"light\",\"data-theme-name\":\"default\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"children\":[\"$\",\"$L10\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"page_global__DlbOF\",\"children\":[[\"$\",\"div\",null,{\"className\":\"Sidebar_sidebar__86IlD\",\"children\":[\"$\",\"div\",null,{\"className\":\"Sidebar_content__vii3k\",\"children\":[[\"$\",\"$L11\",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\":\"$12\"}],[\"$\",\"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_actions__nEegq\",\"children\":[[\"$\",\"$L13\",null,{}],[\"$\",\"$L14\",null,{}]]}],[\"$\",\"$L15\",null,{}],[\"$\",\"div\",null,{\"className\":\"Sidebar_menu__sTTeJ\",\"children\":[[\"$\",\"$L16\",null,{}],[\"$\",\"$L17\",null,{}]]}]]}]}],[\"$\",\"div\",null,{\"className\":\"page_container__aoG4z\",\"children\":[\"$\",\"$Le\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Lf\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":\"$18\",\"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\":\"$19\",\"children\":\"404\"}],[\"$\",\"div\",null,{\"style\":\"$1a\",\"children\":[\"$\",\"h2\",null,{\"style\":\"$1b\",\"children\":\"This page could not be found.\"}]}]]}]}]],\"notFoundStyles\":[]}]}]]}]}]}]}]],null],null],\"couldBeIntercepted\":false,\"initialHead\":[null,\"$L1c\"],\"globalErrorComponent\":\"$1d\",\"missingSlots\":\"$W1e\"}]\n"])</script><script>self.__next_f.push([1,"b:[\"$\",\"div\",null,{\"className\":\"styles_codeBlock__cJkhk\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\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\"},\"className\":\"styles_code__W0N63\"}]]}]\n1f: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\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:#"])</script><script>self.__next_f.push([1,"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\u003ec:[\"$\",\"div\",null,{\"className\":\"styles_codeBlock__cJkhk\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$1f\"},\"className\":\"styles_code__W0N63\"}]]}]\n20:T723,\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 { Stack\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:#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\"\u003eStack\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;--shiki-dark:#B392F0\"\u003e\u0026#x3C;/\u003c/span\u003e\u003cspan style=\"color:#1976D2;--shiki-dark:#79B8FF\"\u003eStack\u003c/span\u003e\u003cspan style=\"color:#24292EFF;--shiki-dark:#B392F0\"\u003e\u003e;"])</script><script>self.__next_f.push([1,"\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\"line\"\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003ed:[\"$\",\"div\",null,{\"className\":\"styles_codeBlock__cJkhk\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"$20\"},\"className\":\"styles_code__W0N63\"}]]}]\n1c:[[\"$\",\"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\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg?27251f321bf90e71\",\"type\":\"image/svg+xml\",\"sizes\":\"any\"}]]\n7:null\n"])</script><script>self.__next_f.push([1,"a:[\"$\",\"div\",null,{\"className\":\"styles_codeBlock__cJkhk\",\"children\":[\"$undefined\",[\"$\",\"div\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"\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\"},\"className\":\"styles_code__W0N63\"}]]}]\n"])</script></body></html>