-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathtokens.txt
More file actions
107 lines (107 loc) · 76.4 KB
/
tokens.txt
File metadata and controls
107 lines (107 loc) · 76.4 KB
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
1:"$Sreact.fragment"
3:I[672913,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default"]
4:I[893277,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default"]
32:I[491590,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"default",1]
:HL["/_next/static/chunks/0tnw~7b.63~al.css","style"]
:HL["/_next/static/chunks/05ryebjhgbies.css","style"]
:HL["/_next/static/chunks/0-mkqzn5q716v.css","style"]
:HL["/_next/static/chunks/073p8mm.n_frj.css","style"]
0:{"P":null,"c":["","tokens"],"q":"","i":false,"f":[[["",{"children":["tokens",{"children":["__PAGE__",{}]}]},"$undefined","$undefined",16],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0tnw~7b.63~al.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/05ryebjhgbies.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/0-mkqzn5q716v.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/chunks/0y6df42ymgr.v.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/chunks/0vrcwaok~j0q9.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/chunks/10pen.bi_vs3z.js","async":true,"nonce":"$undefined"}],["$","script","script-3",{"src":"/_next/static/chunks/0len.np11rgvj.js","async":true,"nonce":"$undefined"}],["$","script","script-4",{"src":"/_next/static/chunks/10fwo3cl093m2.js","async":true,"nonce":"$undefined"}]],"$L2"]}],{"children":[["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":[[["$","h1",null,{"className":"mdx-module__YUQVZa__h1","children":"Tokens"}],"\n",["$","h2",null,{"id":"responsive-breakpoints","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#responsive-breakpoints","className":"mdx-module__YUQVZa__anchorLink","children":["Responsive breakpoints",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}],"\n",["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Backstage UI is built on a responsive design system, meaning that the components are\ndesigned to adapt to different screen sizes. By default we offer a set of\nbreakpoints that you can use to create responsive components."}],"\n",["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Breakpoint prefix"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Minimum width"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"CSS"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"xs"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"0px"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"{ ... }"}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"sm"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"640px"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"@media (min-width: 640px) { ... }"}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"md"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"768px"}]}],"$L5"]}],"$L6","$L7","$L8"]}]]}]}],"\n","$L9","\n","$La","\n","$Lb","\n","$Lc","\n","$Ld","\n","$Le","\n","$Lf","\n","$L10","\n","$L11","\n","$L12","\n","$L13","\n","$L14","\n","$L15","\n","$L16","\n","$L17","\n","$L18","\n","$L19","\n","$L1a","\n","$L1b","\n","$L1c","\n","$L1d","\n","$L1e","\n","$L1f","\n","$L20","\n","$L21","\n","$L22","\n","$L23","\n","$L24","\n","$L25","\n","$L26","\n","$L27","\n","$L28","\n","$L29","\n","$L2a","\n","$L2b","\n","$L2c"],["$L2d","$L2e"],"$L2f"]}],{},null,false,null]},null,false,"$@30"]},null,false,null],"$L31",false]],"m":"$undefined","G":["$32",["$L33","$L34","$L35"]],"S":true,"h":null,"s":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined","b":"lHsTmttuRAMTmFKykYSav"}
51:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"OutletBoundary"]
52:"$Sreact.suspense"
55:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"ViewportBoundary"]
57:I[643594,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"MetadataBoundary"]
5:["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"@media (min-width: 768px) { ... }"}]}]
6:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"lg"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"1024px"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"@media (min-width: 1024px) { ... }"}]}]]}]
7:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"xl"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"1280px"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"@media (min-width: 1280px) { ... }"}]}]]}]
8:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"2xl"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"1536px"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip ","children":"@media (min-width: 1536px) { ... }"}]}]]}]
9:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Backstage UI components are designed to be responsive, meaning that they will adapt\nto different screen sizes. Not every component is responsive, but the ones\nthat are will have a prop to control the responsive behavior."}]
a:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"The behaviour is the same for each component. For each prop, instead of adding\nthe value, you add an object with the value and the breakpoint prefix."}]
c:["$","h2",null,{"id":"base-colors","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#base-colors","className":"mdx-module__YUQVZa__anchorLink","children":["Base colors",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
d:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-black"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Pure black color. This one should be the same in light and dark themes."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-white"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Pure white color. This one should be the same in light and dark themes."}]}]]}]]}]]}]}]
e:["$","h2",null,{"id":"neutral-background-colors","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#neutral-background-colors","className":"mdx-module__YUQVZa__anchorLink","children":["Neutral background colors",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
f:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["These colors form a layered neutral scale for your application backgrounds.\n",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-app"}]," is the base background color of your app. Each subsequent level\n(1 through 4) represents an elevated layer on top of the previous one, with hover,\npressed, and disabled variants for interactive states."]}]
10:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-app"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"The base background color of your Backstage instance."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-1"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"First elevated layer. Use for cards, dialogs, and panels."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-1-hover"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Hover state for elements on neutral-1."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-1-pressed"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Pressed state for elements on neutral-1."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-1-disabled"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Disabled state for elements on neutral-1."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-2"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Second elevated layer. Use for elements on top of neutral-1."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-2-hover"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Hover state for elements on neutral-2."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-2-pressed"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Pressed state for elements on neutral-2."}]]}],"$L36","$L37","$L38","$L39","$L3a","$L3b","$L3c","$L3d","$L3e"]}]]}]}]
11:["$","h2",null,{"id":"solid-background-colors","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#solid-background-colors","className":"mdx-module__YUQVZa__anchorLink","children":["Solid background colors",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
12:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-solid"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used for solid background colors."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-solid-hover"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used for solid background colors when hovered."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-solid-pressed"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used for solid background colors when pressed."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-solid-disabled"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used for solid background colors when disabled."}]]}]]}]]}]}]
13:["$","h2",null,{"id":"status-background-colors","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#status-background-colors","className":"mdx-module__YUQVZa__anchorLink","children":["Status background colors",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
14:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-danger"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used to show errors information."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-warning"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used to show warnings information."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-success"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used to show success information."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-info"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used to show informational content."}]]}]]}]]}]}]
15:["$","h2",null,{"id":"foreground-colors","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#foreground-colors","className":"mdx-module__YUQVZa__anchorLink","children":["Foreground colors",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
16:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["Foreground colours are meant to work in pair with a background colours. Typically this would work\nfor icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors\nare prefixed with ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"fg"}]," to make it easier to identify."]}]
17:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-primary"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"It should be used on top of main background surfaces."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-secondary"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"It should be used on top of main background surfaces."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-disabled"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"It should be used on top of main background surfaces."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-solid"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"It should be used on top of solid background colors."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-danger"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used for error states and destructive actions."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-warning"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Used for warning states and cautionary information."}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-success"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Used for success states and positive feedback."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-info"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"$L3f"}]]}],"$L40","$L41","$L42","$L43"]}]]}]}]
18:["$","h2",null,{"id":"border-colors","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#border-colors","className":"mdx-module__YUQVZa__anchorLink","children":["Border colors",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
19:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"These border colors are mostly meant to be used as borders on top of any components with\nlow contrast to help as a separator with the different background colors."}]
1a:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-border-1"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Subtle border for low-contrast separators."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-border-2"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["It should be used on top of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-neutral-1"}],"."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-border-danger"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["It should be used on top of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-danger"}],"."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-border-warning"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["It should be used on top of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-warning"}],"."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-border-success"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["It should be used on top of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-success"}],"."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-border-info"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["It should be used on top of ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-bg-info"}],"."]}]]}]]}]]}]}]
1b:["$","h2",null,{"id":"special-colors","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#special-colors","className":"mdx-module__YUQVZa__anchorLink","children":["Special colors",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
1c:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"These colors are used for special purposes like ring, scrollbar, ..."}]
1d:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-ring"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"The color of the ring."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-scrollbar"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"The color of the scrollbar."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-scrollbar-thumb"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"The color of the scrollbar thumb."}]]}]]}]]}]}]
1e:["$","h2",null,{"id":"font-families","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#font-families","className":"mdx-module__YUQVZa__anchorLink","children":["Font families",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
1f:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"We have two fonts that we use across Backstage UI. The first one is the sans-serif\nfont that we use for the body of the application. The second one is the\nmonospace font that we use for code blocks and tables."}]
20:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-font-regular"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"The sans-serif font for the theme."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-font-monospace"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"The monospace font for the theme."}]]}]]}]]}]}]
21:["$","h2",null,{"id":"font-weights","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#font-weights","className":"mdx-module__YUQVZa__anchorLink","children":["Font weights",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
22:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"We have two font weights that we use across Backstage UI. Regular or Bold."}]
23:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-font-weight-regular"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"The regular font weight for the theme."}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-font-weight-bold"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"The bold font weight for the theme."}]]}]]}]]}]}]
24:["$","h2",null,{"id":"spacing","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#spacing","className":"mdx-module__YUQVZa__anchorLink","children":["Spacing",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
25:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["We built a spacing system based on a single value ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],". This value is\nused to calculate the spacing for all the components. By default if you would like to\nincrease or decrease the spacing between your components you can do it simply by updating\n",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}]," and it will apply to all spacing values."]}]
26:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":[["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}]," is not used directly in any components but serve as an easy way to\ncalculate the other values."]}]
27:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The base unit for the spacing system. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"0.25rem"}],"."]}]}]]}]}]]}]}]
28:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Below is the list of all spacing values you can use in your application. We use these\ntokens for pretty much each spacing properties like padding, margin, gaps, ..."}]
29:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-0_5"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 0.5."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-1"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],")."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-1_5"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 1.5."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-2"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 2."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-3"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 3."]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-4"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 4."]}]]}],"$L44","$L45","$L46","$L47","$L48","$L49","$L4a","$L4b","$L4c","$L4d"]}]]}]}]
2a:["$","h2",null,{"id":"radius","className":"mdx-module__YUQVZa__h2 mdx-module__YUQVZa__headingWithAnchor","children":["$","a",null,{"href":"#radius","className":"mdx-module__YUQVZa__anchorLink","children":["Radius",["$","span",null,{"className":"mdx-module__YUQVZa__anchorHash","children":"#"}]]}]}]
2b:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"We use a radius system to make sure that the components have a consistent look and feel."}]
2c:["$","div",null,{"className":"styles-module__kXEqgq__wrapper","children":["$","table",null,{"className":"styles-module__kXEqgq__table","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Prop"}],["$","th",null,{"className":"styles-module__kXEqgq__tableCell styles-module__kXEqgq__tableHeaderCell","style":"$undefined","children":"Description"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-radius-1"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The radius of the component. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"0.125rem"}],"."]}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-radius-2"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The radius of the component. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"0.25rem"}],"."]}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-radius-3"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The radius of the component. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"0.5rem"}],"."]}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-radius-4"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The radius of the component. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"0.75rem"}],"."]}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-radius-5"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The radius of the component. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"1rem"}],"."]}]}]]}],["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":["$L4e","$L4f"]}],"$L50"]}]]}]}]
2d:["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/073p8mm.n_frj.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]
2e:["$","script","script-0",{"src":"/_next/static/chunks/13p6wrl03ngu-.js","async":true,"nonce":"$undefined"}]
2f:["$","$L51",null,{"children":["$","$52",null,{"name":"Next.MetadataOutlet","children":"$@53"}]}]
54:[]
30:"$W54"
31:["$","$1","h",{"children":[null,["$","$L55",null,{"children":"$L56"}],["$","div",null,{"hidden":true,"children":["$","$L57",null,{"children":["$","$52",null,{"name":"Next.Metadata","children":"$L58"}]}]}],null]}]
33:["$","link","0",{"rel":"stylesheet","href":"/_next/static/chunks/0tnw~7b.63~al.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]
34:["$","link","1",{"rel":"stylesheet","href":"/_next/static/chunks/05ryebjhgbies.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]
35:["$","link","2",{"rel":"stylesheet","href":"/_next/static/chunks/0-mkqzn5q716v.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]
36:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-2-disabled"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Disabled state for elements on neutral-2."}]]}]
37:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-3"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Third elevated layer. Use for elements on top of neutral-2."}]}]]}]
38:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-3-hover"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Hover state for elements on neutral-3."}]]}]
39:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-3-pressed"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Pressed state for elements on neutral-3."}]]}]
3a:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-3-disabled"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Disabled state for elements on neutral-3."}]]}]
3b:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-4"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Fourth elevated layer. Use for elements on top of neutral-3."}]}]]}]
3c:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-4-hover"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Hover state for elements on neutral-4."}]]}]
3d:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-4-pressed"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Pressed state for elements on neutral-4."}]]}]
3e:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-bg-neutral-4-disabled"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":"Disabled state for elements on neutral-4."}]]}]
3f:["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"Used for informational content and neutral status."}]
40:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-danger-on-bg"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"It should be used on top of danger background colors."}]}]]}]
41:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-warning-on-bg"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"It should be used on top of warning background colors."}]}]]}]
42:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-success-on-bg"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"It should be used on top of success background colors."}]}]]}]
43:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-fg-info-on-bg"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":"It should be used on top of info background colors."}]}]]}]
44:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-5"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 5."]}]]}]
45:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-6"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 6."]}]]}]
46:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-7"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 7."]}]]}]
47:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-8"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 8."]}]]}]
48:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-9"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 9."]}]]}]
49:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-10"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 10."]}]]}]
4a:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-11"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 11."]}]]}]
4b:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-12"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 12."]}]]}]
4c:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-13"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 13."]}]]}]
4d:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-space-14"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["Base unit (",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"--bui-space"}],") times 14."]}]]}]
4e:["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-radius-6"}]}]
4f:["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The radius of the component. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"1.25rem"}],"."]}]}]
50:["$","tr",null,{"className":"styles-module__kXEqgq__tableRow","children":[["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","span",null,{"className":"styles-module__SJkkYG__chip styles-module__SJkkYG__head","children":"--bui-radius-full"}]}],["$","td",null,{"className":"styles-module__kXEqgq__tableCell","style":"$undefined","colSpan":"$undefined","children":["$","p",null,{"className":"mdx-module__YUQVZa__p","children":["The radius of the component. Default value is ",["$","code",null,{"style":{"fontFamily":"var(--font-mono)","backgroundColor":"var(--bg)","padding":"0.2rem 0.375rem","borderRadius":"0.25rem","color":"var(--primary)","border":"1px solid var(--border)","fontSize":"0.875rem"},"children":"9999px"}],"."]}]}]]}]
59:I[619210,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Providers"]
5a:I[889424,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Sidebar"]
5b:I[335702,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"Toolbar"]
5c:I[637718,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"TableOfContents"]
5d:I[256054,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"MobileBottomNav"]
5e:I[120426,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"CustomTheme"]
56:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
2:["$","html",null,{"lang":"en","data-theme-mode":"light","data-theme-name":"backstage","suppressHydrationWarning":true,"children":["$","body",null,{"children":["$","$L59",null,{"children":[["$","$L5a",null,{}],["$","div",null,{"className":"layout-module__qLTo7q__container","children":["$","div",null,{"className":"layout-module__qLTo7q__contentWrapper","children":[["$","$L5b",null,{"version":"0.14.1"}],["$","div",null,{"className":"layout-module__qLTo7q__content","children":[["$","div",null,{"className":"layout-module__qLTo7q__contentInner","children":["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",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."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}]}],["$","aside",null,{"className":"layout-module__qLTo7q__toc","children":["$","$L5c",null,{}]}]]}]]}]}],["$","$L5d",null,{}],["$","$L5e",null,{}]]}]}]}]
5f:I[178805,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js","/_next/static/chunks/13p6wrl03ngu-.js"],"CodeBlockClient"]
60:T729,<pre class="shiki shiki-themes github-dark min-dark" style="--shiki-dark-bg:#1f1f1f;color:#e1e4e8;--shiki-dark:#b392f0" tabindex="0"><code><span class="line"><span style="color:#6A737D;--shiki-dark:#6B737C">// Fixed value</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0"><</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#B392F0;--shiki-dark:#B392F0"> size</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70">"small"</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">>Button</</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D;--shiki-dark:#6B737C">// Responsive value</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;--shiki-dark:#B392F0"><</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#B392F0;--shiki-dark:#B392F0"> size</span><span style="color:#F97583;--shiki-dark:#F97583">=</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">{{ xs</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'small'</span><span style="color:#E1E4E8;--shiki-dark:#BBBBBB">,</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> md</span><span style="color:#E1E4E8;--shiki-dark:#F97583">:</span><span style="color:#9ECBFF;--shiki-dark:#FFAB70"> 'medium'</span><span style="color:#E1E4E8;--shiki-dark:#B392F0"> }}>Button</</span><span style="color:#79B8FF;--shiki-dark:#79B8FF">Button</span><span style="color:#E1E4E8;--shiki-dark:#B392F0">></span></span></code></pre>b:["$","$L5f",null,{"out":"$60","title":"$undefined"}]
61:I[815120,["/_next/static/chunks/0y6df42ymgr.v.js","/_next/static/chunks/0vrcwaok~j0q9.js","/_next/static/chunks/10pen.bi_vs3z.js","/_next/static/chunks/0len.np11rgvj.js","/_next/static/chunks/10fwo3cl093m2.js"],"IconMark"]
53:null
58:[["$","title","0",{"children":"Backstage UI"}],["$","meta","1",{"name":"description","content":"UI library for Backstage"}],["$","meta","2",{"property":"og:title","content":"Backstage UI"}],["$","meta","3",{"property":"og:description","content":"UI library for Backstage"}],["$","meta","4",{"property":"og:image","content":"https://ui.backstage.io/opengraph-image.jpg?opengraph-image.10.22h8p4jpb-.jpg"}],["$","meta","5",{"property":"og:image:type","content":"image/jpeg"}],["$","meta","6",{"property":"og:image:width","content":"1200"}],["$","meta","7",{"property":"og:image:height","content":"630"}],["$","meta","8",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","9",{"name":"twitter:title","content":"Backstage UI"}],["$","meta","10",{"name":"twitter:description","content":"UI library for Backstage"}],["$","meta","11",{"name":"twitter:image","content":"https://ui.backstage.io/opengraph-image.jpg?opengraph-image.10.22h8p4jpb-.jpg"}],["$","meta","12",{"name":"twitter:image:type","content":"image/jpeg"}],["$","meta","13",{"name":"twitter:image:width","content":"1200"}],["$","meta","14",{"name":"twitter:image:height","content":"630"}],["$","link","15",{"rel":"icon","href":"/icon.svg?icon.06utu8u71m2--.svg","sizes":"any","type":"image/svg+xml"}],["$","$L61","16",{}]]