@backstage/ui 0.12.0-next.0 → 0.12.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/CHANGELOG.md +147 -0
  2. package/dist/components/Accordion/Accordion.module.css.esm.js +2 -2
  3. package/dist/components/Alert/Alert.module.css.esm.js +2 -2
  4. package/dist/components/Avatar/Avatar.module.css.esm.js +2 -2
  5. package/dist/components/Box/Box.module.css.esm.js +2 -2
  6. package/dist/components/Button/Button.module.css.esm.js +2 -2
  7. package/dist/components/Button/definition.esm.js +1 -0
  8. package/dist/components/Button/definition.esm.js.map +1 -1
  9. package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js +2 -2
  10. package/dist/components/ButtonLink/ButtonLink.module.css.esm.js +2 -2
  11. package/dist/components/Card/Card.module.css.esm.js +2 -2
  12. package/dist/components/Checkbox/Checkbox.module.css.esm.js +2 -2
  13. package/dist/components/Dialog/Dialog.module.css.esm.js +2 -2
  14. package/dist/components/Flex/Flex.module.css.esm.js +2 -2
  15. package/dist/components/Grid/Grid.module.css.esm.js +2 -2
  16. package/dist/components/Header/Header.module.css.esm.js +2 -2
  17. package/dist/components/HeaderPage/HeaderPage.esm.js +1 -0
  18. package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
  19. package/dist/components/Link/Link.esm.js +1 -0
  20. package/dist/components/Link/Link.esm.js.map +1 -1
  21. package/dist/components/Link/Link.module.css.esm.js +2 -2
  22. package/dist/components/Link/definition.esm.js +10 -2
  23. package/dist/components/Link/definition.esm.js.map +1 -1
  24. package/dist/components/Menu/Menu.module.css.esm.js +2 -2
  25. package/dist/components/PasswordField/PasswordField.esm.js +129 -0
  26. package/dist/components/PasswordField/PasswordField.esm.js.map +1 -0
  27. package/dist/components/PasswordField/PasswordField.module.css.esm.js +8 -0
  28. package/dist/components/PasswordField/PasswordField.module.css.esm.js.map +1 -0
  29. package/dist/components/PasswordField/definition.esm.js +15 -0
  30. package/dist/components/PasswordField/definition.esm.js.map +1 -0
  31. package/dist/components/Popover/Popover.module.css.esm.js +2 -2
  32. package/dist/components/RadioGroup/RadioGroup.module.css.esm.js +2 -2
  33. package/dist/components/SearchField/SearchField.module.css.esm.js +2 -2
  34. package/dist/components/Select/Select.module.css.esm.js +2 -2
  35. package/dist/components/Skeleton/Skeleton.module.css.esm.js +2 -2
  36. package/dist/components/Switch/Switch.module.css.esm.js +2 -2
  37. package/dist/components/Table/components/Table.esm.js +61 -54
  38. package/dist/components/Table/components/Table.esm.js.map +1 -1
  39. package/dist/components/Table/hooks/useCompletePagination.esm.js +12 -7
  40. package/dist/components/Table/hooks/useCompletePagination.esm.js.map +1 -1
  41. package/dist/components/Tabs/Tabs.module.css.esm.js +2 -2
  42. package/dist/components/TagGroup/TagGroup.esm.js +45 -41
  43. package/dist/components/TagGroup/TagGroup.esm.js.map +1 -1
  44. package/dist/components/TagGroup/TagGroup.module.css.esm.js +2 -2
  45. package/dist/components/Text/Text.module.css.esm.js +2 -2
  46. package/dist/components/Text/definition.esm.js +8 -1
  47. package/dist/components/Text/definition.esm.js.map +1 -1
  48. package/dist/components/TextField/TextField.module.css.esm.js +2 -2
  49. package/dist/components/ToggleButton/ToggleButton.module.css.esm.js +2 -2
  50. package/dist/components/Tooltip/Tooltip.module.css.esm.js +2 -2
  51. package/{css → dist/css}/styles.css +940 -618
  52. package/dist/hooks/useDefinition/useDefinition.esm.js +2 -4
  53. package/dist/hooks/useDefinition/useDefinition.esm.js.map +1 -1
  54. package/dist/index.d.ts +58 -10
  55. package/dist/index.esm.js +2 -0
  56. package/dist/index.esm.js.map +1 -1
  57. package/package.json +28 -28
package/{css → dist/css}/styles.css RENAMED
@@ -1,266 +1,467 @@
1
- @layer tokens, base, components, utilities;
2
1
 
3
- /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
2
+
3
+ @layer tokens, base, components, utilities;
4
+ /*
5
+ * Copyright 2024 The Backstage Authors
6
+ *
7
+ * Licensed under the Apache License, Version 2.0 (the "License");
8
+ * you may not use this file except in compliance with the License.
9
+ * You may obtain a copy of the License at
10
+ *
11
+ * http://www.apache.org/licenses/LICENSE-2.0
12
+ *
13
+ * Unless required by applicable law or agreed to in writing, software
14
+ * distributed under the License is distributed on an "AS IS" BASIS,
15
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
+ * See the License for the specific language governing permissions and
17
+ * limitations under the License.
18
+ */
19
+ /* Tokens */
20
+ /*
21
+ * Copyright 2024 The Backstage Authors
22
+ *
23
+ * Licensed under the Apache License, Version 2.0 (the "License");
24
+ * you may not use this file except in compliance with the License.
25
+ * You may obtain a copy of the License at
26
+ *
27
+ * http://www.apache.org/licenses/LICENSE-2.0
28
+ *
29
+ * Unless required by applicable law or agreed to in writing, software
30
+ * distributed under the License is distributed on an "AS IS" BASIS,
31
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
32
+ * See the License for the specific language governing permissions and
33
+ * limitations under the License.
34
+ */
4
35
  @layer tokens {
36
+ /* Light theme tokens */
5
37
  :root {
38
+ /* Font families */
6
39
  --bui-font-regular: system-ui;
7
- --bui-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
40
+ --bui-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
41
+ 'Liberation Mono', 'Courier New', monospace;
42
+
43
+ /* Font weights */
8
44
  --bui-font-weight-regular: 400;
9
45
  --bui-font-weight-bold: 600;
10
- --bui-font-size-1: .625rem;
11
- --bui-font-size-2: .75rem;
12
- --bui-font-size-3: .875rem;
13
- --bui-font-size-4: 1rem;
14
- --bui-font-size-5: 1.25rem;
15
- --bui-font-size-6: 1.5rem;
16
- --bui-font-size-7: 2rem;
17
- --bui-font-size-8: 3rem;
18
- --bui-font-size-9: 4rem;
19
- --bui-font-size-10: 5.75rem;
20
- --bui-space: .25rem;
21
- --bui-space-0_5: calc(var(--bui-space) * .5);
22
- --bui-space-1: var(--bui-space);
23
- --bui-space-1_5: calc(var(--bui-space) * 1.5);
24
- --bui-space-2: calc(var(--bui-space) * 2);
25
- --bui-space-3: calc(var(--bui-space) * 3);
26
- --bui-space-4: calc(var(--bui-space) * 4);
27
- --bui-space-5: calc(var(--bui-space) * 5);
28
- --bui-space-6: calc(var(--bui-space) * 6);
29
- --bui-space-7: calc(var(--bui-space) * 7);
30
- --bui-space-8: calc(var(--bui-space) * 8);
31
- --bui-space-9: calc(var(--bui-space) * 9);
32
- --bui-space-10: calc(var(--bui-space) * 10);
33
- --bui-space-11: calc(var(--bui-space) * 11);
34
- --bui-space-12: calc(var(--bui-space) * 12);
35
- --bui-space-13: calc(var(--bui-space) * 13);
36
- --bui-space-14: calc(var(--bui-space) * 14);
37
- --bui-radius-1: calc(.125rem);
38
- --bui-radius-2: calc(.25rem);
39
- --bui-radius-3: calc(.5rem);
40
- --bui-radius-4: calc(.75rem);
46
+
47
+ /* Font sizes */
48
+ --bui-font-size-1: 0.625rem; /* 10px */
49
+ --bui-font-size-2: 0.75rem; /* 12px */
50
+ --bui-font-size-3: 0.875rem; /* 14px */
51
+ --bui-font-size-4: 1rem; /* 16px */
52
+ --bui-font-size-5: 1.25rem; /* 20px */
53
+ --bui-font-size-6: 1.5rem; /* 24px */
54
+ --bui-font-size-7: 2rem; /* 32px */
55
+ --bui-font-size-8: 3rem; /* 48px */
56
+ --bui-font-size-9: 4rem; /* 64px */
57
+ --bui-font-size-10: 5.75rem; /* 92px */
58
+
59
+ /* Spacing */
60
+ --bui-space: 0.25rem; /* This is the spacing multiplier */
61
+ --bui-space-0_5: calc(var(--bui-space) * 0.5); /* 2px */
62
+ --bui-space-1: var(--bui-space); /* 4px */
63
+ --bui-space-1_5: calc(var(--bui-space) * 1.5); /* 6px */
64
+ --bui-space-2: calc(var(--bui-space) * 2); /* 8px */
65
+ --bui-space-3: calc(var(--bui-space) * 3); /* 12px */
66
+ --bui-space-4: calc(var(--bui-space) * 4); /* 16px */
67
+ --bui-space-5: calc(var(--bui-space) * 5); /* 20px */
68
+ --bui-space-6: calc(var(--bui-space) * 6); /* 24px */
69
+ --bui-space-7: calc(var(--bui-space) * 7); /* 28px */
70
+ --bui-space-8: calc(var(--bui-space) * 8); /* 32px */
71
+ --bui-space-9: calc(var(--bui-space) * 9); /* 36px */
72
+ --bui-space-10: calc(var(--bui-space) * 10); /* 40px */
73
+ --bui-space-11: calc(var(--bui-space) * 11); /* 44px */
74
+ --bui-space-12: calc(var(--bui-space) * 12); /* 48px */
75
+ --bui-space-13: calc(var(--bui-space) * 13); /* 52px */
76
+ --bui-space-14: calc(var(--bui-space) * 14); /* 56px */
77
+
78
+ /* Radius */
79
+ --bui-radius-1: calc(0.125rem);
80
+ --bui-radius-2: calc(0.25rem);
81
+ --bui-radius-3: calc(0.5rem);
82
+ --bui-radius-4: calc(0.75rem);
41
83
  --bui-radius-5: calc(1rem);
42
84
  --bui-radius-6: calc(1.25rem);
43
85
  --bui-radius-full: 9999px;
44
- --bui-black: #000;
45
- --bui-white: #fff;
46
- --bui-gray-1: #f8f8f8;
47
- --bui-gray-2: #ececec;
48
- --bui-gray-3: #d9d9d9;
49
- --bui-gray-4: #c1c1c1;
50
- --bui-gray-5: #9e9e9e;
51
- --bui-gray-6: #8c8c8c;
52
- --bui-gray-7: #757575;
53
- --bui-gray-8: #595959;
54
- --bui-bg-surface-0: var(--bui-gray-1);
55
- --bui-bg-surface-1: var(--bui-white);
56
- --bui-bg-surface-2: var(--bui-gray-1);
57
- --bui-bg-surface-3: var(--bui-gray-2);
86
+
87
+ /* Base Colors */
88
+ --bui-black: #000000;
89
+ --bui-white: #ffffff;
90
+
91
+ /* Solid background colors */
58
92
  --bui-bg-solid: #1f5493;
59
93
  --bui-bg-solid-hover: #163a66;
60
94
  --bui-bg-solid-pressed: #0f2b4e;
61
95
  --bui-bg-solid-disabled: #163a66;
62
- --bui-bg-neutral-on-surface-0: oklch(0% 0 0 / .06);
63
- --bui-bg-neutral-on-surface-0-hover: oklch(0% 0 0 / .12);
64
- --bui-bg-neutral-on-surface-0-pressed: oklch(0% 0 0 / .16);
65
- --bui-bg-neutral-on-surface-0-disabled: oklch(0% 0 0 / .06);
66
- --bui-bg-neutral-on-surface-1: oklch(0% 0 0 / .06);
67
- --bui-bg-neutral-on-surface-1-hover: oklch(0% 0 0 / .12);
68
- --bui-bg-neutral-on-surface-1-pressed: oklch(0% 0 0 / .16);
69
- --bui-bg-neutral-on-surface-1-disabled: oklch(0% 0 0 / .06);
70
- --bui-bg-neutral-on-surface-2: oklch(0% 0 0 / .06);
71
- --bui-bg-neutral-on-surface-2-hover: oklch(0% 0 0 / .12);
72
- --bui-bg-neutral-on-surface-2-pressed: oklch(0% 0 0 / .16);
73
- --bui-bg-neutral-on-surface-2-disabled: oklch(0% 0 0 / .06);
74
- --bui-bg-neutral-on-surface-3: oklch(0% 0 0 / .06);
75
- --bui-bg-neutral-on-surface-3-hover: oklch(0% 0 0 / .12);
76
- --bui-bg-neutral-on-surface-3-pressed: oklch(0% 0 0 / .16);
77
- --bui-bg-neutral-on-surface-3-disabled: oklch(0% 0 0 / .06);
96
+
97
+ /* Neutral background colors */
98
+ --bui-bg-neutral-0: #f8f8f8;
99
+
100
+ --bui-bg-neutral-1: #fff;
101
+ --bui-bg-neutral-1-hover: oklch(0% 0 0 / 12%);
102
+ --bui-bg-neutral-1-pressed: oklch(0% 0 0 / 16%);
103
+ --bui-bg-neutral-1-disabled: oklch(0% 0 0 / 6%);
104
+
105
+ --bui-bg-neutral-2: oklch(0% 0 0 / 6%);
106
+ --bui-bg-neutral-2-hover: oklch(0% 0 0 / 12%);
107
+ --bui-bg-neutral-2-pressed: oklch(0% 0 0 / 16%);
108
+ --bui-bg-neutral-2-disabled: oklch(0% 0 0 / 6%);
109
+
110
+ --bui-bg-neutral-3: oklch(0% 0 0 / 6%);
111
+ --bui-bg-neutral-3-hover: oklch(0% 0 0 / 12%);
112
+ --bui-bg-neutral-3-pressed: oklch(0% 0 0 / 16%);
113
+ --bui-bg-neutral-3-disabled: oklch(0% 0 0 / 6%);
114
+
115
+ --bui-bg-neutral-4: oklch(0% 0 0 / 6%);
116
+ --bui-bg-neutral-4-hover: oklch(0% 0 0 / 12%);
117
+ --bui-bg-neutral-4-pressed: oklch(0% 0 0 / 16%);
118
+ --bui-bg-neutral-4-disabled: oklch(0% 0 0 / 6%);
119
+
120
+ /* Status background colors */
78
121
  --bui-bg-danger: #ffe2e2;
79
122
  --bui-bg-warning: #ffedd5;
80
123
  --bui-bg-success: #dcfce7;
81
124
  --bui-bg-info: #dbeafe;
125
+
126
+ /* Foreground colors */
82
127
  --bui-fg-primary: var(--bui-black);
83
- --bui-fg-secondary: var(--bui-gray-7);
84
- --bui-fg-link: #1f5493;
85
- --bui-fg-link-hover: #1f2d5c;
86
- --bui-fg-disabled: #9e9e9e;
128
+ --bui-fg-secondary: oklch(0% 0 0 / 50%);
129
+ --bui-fg-disabled: oklch(0% 0 0 / 28%);
87
130
  --bui-fg-solid: var(--bui-white);
88
131
  --bui-fg-solid-disabled: #98a8bc;
89
- --bui-fg-tint: #1f5493;
90
- --bui-fg-tint-disabled: var(--bui-gray-5);
91
- --bui-fg-danger: #991919;
92
- --bui-fg-warning: #92310a;
93
- --bui-fg-success: #116932;
94
- --bui-fg-info: #173da6;
95
- --bui-border: #0000001a;
96
- --bui-border-hover: #0003;
97
- --bui-border-pressed: #0006;
98
- --bui-border-disabled: #0000001a;
132
+
133
+ /* Foreground Statuses */
134
+ --bui-fg-danger-on-bg: #991919;
135
+ --bui-fg-warning-on-bg: #92310a;
136
+ --bui-fg-success-on-bg: #116932;
137
+ --bui-fg-info-on-bg: #173da6;
138
+ --bui-fg-danger: #ec3b18;
139
+ --bui-fg-warning: #ef7a32;
140
+ --bui-fg-success: #1ed760;
141
+ --bui-fg-info: #0d74ce;
142
+
143
+ /* Border colors */
144
+ --bui-border: rgba(0, 0, 0, 0.1);
145
+ --bui-border-hover: rgba(0, 0, 0, 0.2);
146
+ --bui-border-pressed: rgba(0, 0, 0, 0.4);
147
+ --bui-border-disabled: rgba(0, 0, 0, 0.1);
99
148
  --bui-border-info: #7ea9d6;
100
149
  --bui-border-danger: #f87a7a;
101
150
  --bui-border-warning: #e36d05;
102
151
  --bui-border-success: #53db83;
152
+
153
+ /* Special colors */
103
154
  --bui-ring: #1f5493;
104
155
  --bui-scrollbar: #a0a0a03b;
105
156
  --bui-scrollbar-thumb: #a0a0a0;
106
- --bui-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
107
- --bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
108
- }
109
-
110
- [data-theme-mode="dark"] {
111
- --bui-gray-1: #191919;
112
- --bui-gray-2: #242424;
113
- --bui-gray-3: #373737;
114
- --bui-gray-4: #464646;
115
- --bui-gray-5: #575757;
116
- --bui-gray-6: #7b7b7b;
117
- --bui-gray-7: #9e9e9e;
118
- --bui-gray-8: #b4b4b4;
119
- --bui-bg-surface-0: #333;
120
- --bui-bg-surface-1: var(--bui-gray-1);
121
- --bui-bg-surface-2: var(--bui-gray-2);
122
- --bui-bg-surface-3: var(--bui-gray-3);
157
+
158
+ /* Shadows */
159
+ --bui-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),
160
+ 0 4px 6px -4px rgba(0 0 0 / 0.1);
161
+
162
+ --bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
163
+ }
164
+
165
+ /* Dark theme tokens */
166
+ [data-theme-mode='dark'] {
167
+ /* Solid background colors */
123
168
  --bui-bg-solid: #9cc9ff;
124
169
  --bui-bg-solid-hover: #83b9fd;
125
170
  --bui-bg-solid-pressed: #83b9fd;
126
171
  --bui-bg-solid-disabled: #1b3d68;
127
- --bui-bg-neutral-on-surface-0: oklch(100% 0 0 / .1);
128
- --bui-bg-neutral-on-surface-0-hover: oklch(100% 0 0 / .14);
129
- --bui-bg-neutral-on-surface-0-pressed: oklch(100% 0 0 / .2);
130
- --bui-bg-neutral-on-surface-0-disabled: oklch(100% 0 0 / .1);
131
- --bui-bg-neutral-on-surface-1: oklch(100% 0 0 / .06);
132
- --bui-bg-neutral-on-surface-1-hover: oklch(100% 0 0 / .1);
133
- --bui-bg-neutral-on-surface-1-pressed: oklch(100% 0 0 / .16);
134
- --bui-bg-neutral-on-surface-1-disabled: oklch(100% 0 0 / .06);
135
- --bui-bg-neutral-on-surface-2: oklch(100% 0 0 / .08);
136
- --bui-bg-neutral-on-surface-2-hover: oklch(100% 0 0 / .12);
137
- --bui-bg-neutral-on-surface-2-pressed: oklch(100% 0 0 / .2);
138
- --bui-bg-neutral-on-surface-2-disabled: oklch(100% 0 0 / .08);
139
- --bui-bg-neutral-on-surface-3: oklch(100% 0 0 / .08);
140
- --bui-bg-neutral-on-surface-3-hover: oklch(100% 0 0 / .12);
141
- --bui-bg-neutral-on-surface-3-pressed: oklch(100% 0 0 / .2);
142
- --bui-bg-neutral-on-surface-3-disabled: oklch(100% 0 0 / .08);
172
+
173
+ /* Neutral background colors */
174
+ --bui-bg-neutral-0: #333333;
175
+
176
+ --bui-bg-neutral-1: oklch(100% 0 0 / 10%);
177
+ --bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);
178
+ --bui-bg-neutral-1-pressed: oklch(100% 0 0 / 20%);
179
+ --bui-bg-neutral-1-disabled: oklch(100% 0 0 / 10%);
180
+
181
+ --bui-bg-neutral-2: oklch(100% 0 0 / 6%);
182
+ --bui-bg-neutral-2-hover: oklch(100% 0 0 / 10%);
183
+ --bui-bg-neutral-2-pressed: oklch(100% 0 0 / 16%);
184
+ --bui-bg-neutral-2-disabled: oklch(100% 0 0 / 6%);
185
+
186
+ --bui-bg-neutral-3: oklch(100% 0 0 / 8%);
187
+ --bui-bg-neutral-3-hover: oklch(100% 0 0 / 12%);
188
+ --bui-bg-neutral-3-pressed: oklch(100% 0 0 / 20%);
189
+ --bui-bg-neutral-3-disabled: oklch(100% 0 0 / 8%);
190
+
191
+ --bui-bg-neutral-4: oklch(100% 0 0 / 8%);
192
+ --bui-bg-neutral-4-hover: oklch(100% 0 0 / 12%);
193
+ --bui-bg-neutral-4-pressed: oklch(100% 0 0 / 20%);
194
+ --bui-bg-neutral-4-disabled: oklch(100% 0 0 / 8%);
195
+
196
+ /* Status background colors */
143
197
  --bui-bg-danger: #300c0c;
144
198
  --bui-bg-warning: #302008;
145
199
  --bui-bg-success: #042713;
146
200
  --bui-bg-info: #132049;
201
+
202
+ /* Foreground colors */
147
203
  --bui-fg-primary: var(--bui-white);
148
- --bui-fg-secondary: var(--bui-gray-7);
149
- --bui-fg-link: #9cc9ff;
150
- --bui-fg-link-hover: #7eb5f7;
151
- --bui-fg-disabled: var(--bui-gray-7);
204
+ --bui-fg-secondary: oklch(0% 0 0 / 50%);
205
+ --bui-fg-disabled: oklch(0% 0 0 / 28%);
152
206
  --bui-fg-solid: #101821;
153
207
  --bui-fg-solid-disabled: #6191cc;
154
- --bui-fg-tint: #9cc9ff;
155
- --bui-fg-tint-disabled: var(--bui-gray-5);
156
- --bui-fg-danger: #fca5a5;
157
- --bui-fg-warning: #fdba74;
158
- --bui-fg-success: #86efac;
159
- --bui-fg-info: #a3cfff;
160
- --bui-border: #ffffff1f;
161
- --bui-border-hover: #fff6;
162
- --bui-border-pressed: #ffffff80;
163
- --bui-border-disabled: #fff3;
208
+
209
+ /* Foreground statuses */
210
+ --bui-fg-danger-on-bg: #fca5a5;
211
+ --bui-fg-warning-on-bg: #fdba74;
212
+ --bui-fg-success-on-bg: #86efac;
213
+ --bui-fg-info-on-bg: #a3cfff;
214
+ --bui-fg-danger: #ff5a30;
215
+ --bui-fg-warning: #ffa057;
216
+ --bui-fg-success: #1ed760;
217
+ --bui-fg-info: #70b8ff;
218
+
219
+ /* Border colors */
220
+ --bui-border: rgba(255, 255, 255, 0.12);
221
+ --bui-border-hover: rgba(255, 255, 255, 0.4);
222
+ --bui-border-pressed: rgba(255, 255, 255, 0.5);
223
+ --bui-border-disabled: rgba(255, 255, 255, 0.2);
164
224
  --bui-border-info: #7ea9d6;
165
225
  --bui-border-danger: #f87a7a;
166
226
  --bui-border-warning: #e36d05;
167
227
  --bui-border-success: #53db83;
228
+
229
+ /* Special colors */
168
230
  --bui-ring: #1f5493;
169
231
  --bui-scrollbar: #3636363a;
170
232
  --bui-scrollbar-thumb: #575757;
233
+
234
+ /* Shadows */
171
235
  --bui-shadow: none;
172
236
  }
173
237
  }
174
-
238
+ /* Base */
239
+ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
240
+ /*
241
+ Document
242
+ ========
243
+ */
244
+ /**
245
+ Use a better box model (opinionated).
246
+ */
175
247
  @layer base {
176
- *, :before, :after {
248
+ *,
249
+ ::before,
250
+ ::after {
177
251
  box-sizing: border-box;
178
252
  }
179
253
 
254
+ /**
255
+ 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
256
+ 2. Correct the line height in all browsers.
257
+ 3. Prevent adjustments of font size after orientation changes in iOS.
258
+ 4. Use a more readable tab size (opinionated).
259
+ */
260
+
180
261
  html {
181
- -webkit-text-size-adjust: 100%;
182
- tab-size: 4;
183
- font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
184
- line-height: 1.15;
262
+ font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
263
+ 'Apple Color Emoji', 'Segoe UI Emoji'; /* 1 */
264
+ line-height: 1.15; /* 2 */
265
+ -webkit-text-size-adjust: 100%; /* 3 */
266
+ tab-size: 4; /* 4 */
185
267
  }
186
268
 
269
+ /*
270
+ Sections
271
+ ========
272
+ */
273
+
274
+ /**
275
+ Remove the margin in all browsers.
276
+ */
277
+
187
278
  body {
188
279
  margin: 0;
189
280
  }
190
281
 
191
- b, strong {
282
+ /*
283
+ Text-level semantics
284
+ ====================
285
+ */
286
+
287
+ /**
288
+ Add the correct font weight in Chrome and Safari.
289
+ */
290
+
291
+ b,
292
+ strong {
192
293
  font-weight: bolder;
193
294
  }
194
295
 
195
- code, kbd, samp, pre {
196
- font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
197
- font-size: 1em;
296
+ /**
297
+ 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
298
+ 2. Correct the odd 'em' font sizing in all browsers.
299
+ */
300
+
301
+ code,
302
+ kbd,
303
+ samp,
304
+ pre {
305
+ font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono',
306
+ Menlo, monospace; /* 1 */
307
+ font-size: 1em; /* 2 */
198
308
  }
199
309
 
310
+ /**
311
+ Add the correct font size in all browsers.
312
+ */
313
+
200
314
  small {
201
315
  font-size: 80%;
202
316
  }
203
317
 
204
- sub, sup {
205
- vertical-align: baseline;
318
+ /**
319
+ Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
320
+ */
321
+
322
+ sub,
323
+ sup {
206
324
  font-size: 75%;
207
325
  line-height: 0;
208
326
  position: relative;
327
+ vertical-align: baseline;
209
328
  }
210
329
 
211
330
  sub {
212
- bottom: -.25em;
331
+ bottom: -0.25em;
213
332
  }
214
333
 
215
334
  sup {
216
- top: -.5em;
335
+ top: -0.5em;
217
336
  }
218
337
 
219
- table {
220
- border-color: currentColor;
221
- }
338
+ /*
339
+ Tabular data
340
+ ============
341
+ */
222
342
 
223
- button, input, optgroup, select, textarea {
224
- margin: 0;
225
- font-family: inherit;
226
- font-size: 100%;
227
- line-height: 1.15;
228
- }
343
+ /**
344
+ Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
345
+ */
229
346
 
230
- button, [type="button"], [type="reset"], [type="submit"] {
347
+ table {
348
+ border-color: currentcolor;
349
+ }
350
+
351
+ /*
352
+ Forms
353
+ =====
354
+ */
355
+
356
+ /**
357
+ 1. Change the font styles in all browsers.
358
+ 2. Remove the margin in Firefox and Safari.
359
+ */
360
+
361
+ button,
362
+ input,
363
+ optgroup,
364
+ select,
365
+ textarea {
366
+ font-family: inherit; /* 1 */
367
+ font-size: 100%; /* 1 */
368
+ line-height: 1.15; /* 1 */
369
+ margin: 0; /* 2 */
370
+ }
371
+
372
+ /**
373
+ Correct the inability to style clickable types in iOS and Safari.
374
+ */
375
+
376
+ button,
377
+ [type='button'],
378
+ [type='reset'],
379
+ [type='submit'] {
231
380
  -webkit-appearance: button;
232
381
  }
233
382
 
383
+ /**
384
+ Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
385
+ */
386
+
234
387
  legend {
235
388
  padding: 0;
236
389
  }
237
390
 
391
+ /**
392
+ Add the correct vertical alignment in Chrome and Firefox.
393
+ */
394
+
238
395
  progress {
239
396
  vertical-align: baseline;
240
397
  }
241
398
 
242
- ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
399
+ /**
400
+ Correct the cursor style of increment and decrement buttons in Safari.
401
+ */
402
+
403
+ ::-webkit-inner-spin-button,
404
+ ::-webkit-outer-spin-button {
243
405
  height: auto;
244
406
  }
245
407
 
246
- [type="search"] {
247
- -webkit-appearance: textfield;
248
- outline-offset: -2px;
408
+ /**
409
+ 1. Correct the odd appearance in Chrome and Safari.
410
+ 2. Correct the outline style in Safari.
411
+ */
412
+
413
+ [type='search'] {
414
+ -webkit-appearance: textfield; /* 1 */
415
+ outline-offset: -2px; /* 2 */
249
416
  }
250
417
 
418
+ /**
419
+ Remove the inner padding in Chrome and Safari on macOS.
420
+ */
421
+
251
422
  ::-webkit-search-decoration {
252
423
  -webkit-appearance: none;
253
424
  }
254
425
 
426
+ /**
427
+ 1. Correct the inability to style clickable types in iOS and Safari.
428
+ 2. Change font properties to 'inherit' in Safari.
429
+ */
430
+
255
431
  ::-webkit-file-upload-button {
256
- -webkit-appearance: button;
257
- font: inherit;
432
+ -webkit-appearance: button; /* 1 */
433
+ font: inherit; /* 2 */
258
434
  }
259
435
 
436
+ /*
437
+ Interactive
438
+ ===========
439
+ */
440
+
441
+ /*
442
+ Add the correct display in Chrome and Safari.
443
+ */
444
+
260
445
  summary {
261
446
  display: list-item;
262
447
  }
263
-
448
+ }
449
+ /*
450
+ * Copyright 2024 The Backstage Authors
451
+ *
452
+ * Licensed under the Apache License, Version 2.0 (the "License");
453
+ * you may not use this file except in compliance with the License.
454
+ * You may obtain a copy of the License at
455
+ *
456
+ * http://www.apache.org/licenses/LICENSE-2.0
457
+ *
458
+ * Unless required by applicable law or agreed to in writing, software
459
+ * distributed under the License is distributed on an "AS IS" BASIS,
460
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
461
+ * See the License for the specific language governing permissions and
462
+ * limitations under the License.
463
+ */
464
+ @layer base {
264
465
  :where(a) {
265
466
  color: inherit;
266
467
  text-decoration: none;
@@ -268,31 +469,49 @@
268
469
 
269
470
  @keyframes pulse {
270
471
  50% {
271
- opacity: .5;
472
+ opacity: 0.5;
272
473
  }
273
474
  }
274
475
 
275
476
  body {
276
- background-color: var(--bui-bg-surface-0);
477
+ background-color: var(--bui-bg-neutral-0);
478
+
479
+ /* Text defaults */
277
480
  color: var(--bui-fg-primary);
278
481
  font-family: var(--bui-font-regular);
279
482
  font-weight: var(--bui-font-weight-regular);
280
483
  font-size: var(--bui-font-size-3);
484
+
485
+ /* Smoothing for text rendering */
281
486
  -webkit-font-smoothing: antialiased;
282
487
  -moz-osx-font-smoothing: grayscale;
283
488
  }
284
489
 
285
- [data-theme-mode="dark"] {
490
+ [data-theme-mode='dark'] {
286
491
  color-scheme: dark;
287
492
  }
288
493
 
289
- [data-theme-mode="light"] {
494
+ [data-theme-mode='light'] {
290
495
  color-scheme: light;
291
496
  }
292
497
  }
293
-
294
- @layer components;
295
-
498
+ /* Utilities */
499
+ /* Padding */
500
+ /*
501
+ * Copyright 2025 The Backstage Authors
502
+ *
503
+ * Licensed under the Apache License, Version 2.0 (the "License");
504
+ * you may not use this file except in compliance with the License.
505
+ * You may obtain a copy of the License at
506
+ *
507
+ * http://www.apache.org/licenses/LICENSE-2.0
508
+ *
509
+ * Unless required by applicable law or agreed to in writing, software
510
+ * distributed under the License is distributed on an "AS IS" BASIS,
511
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
512
+ * See the License for the specific language governing permissions and
513
+ * limitations under the License.
514
+ */
296
515
  @layer utilities {
297
516
  .bui-p {
298
517
  padding: var(--p);
@@ -362,7 +581,8 @@
362
581
  padding: var(--bui-space-14);
363
582
  }
364
583
 
365
- @media (width >= 640px) {
584
+ /* Breakpoint xs */
585
+ @media (min-width: 640px) {
366
586
  .xs\:bui-p {
367
587
  padding: var(--p-xs);
368
588
  }
@@ -432,7 +652,8 @@
432
652
  }
433
653
  }
434
654
 
435
- @media (width >= 768px) {
655
+ /* Breakpoint sm */
656
+ @media (min-width: 768px) {
436
657
  .sm\:bui-p {
437
658
  padding: var(--p-sm);
438
659
  }
@@ -502,7 +723,8 @@
502
723
  }
503
724
  }
504
725
 
505
- @media (width >= 1024px) {
726
+ /* Breakpoint md */
727
+ @media (min-width: 1024px) {
506
728
  .md\:bui-p {
507
729
  padding: var(--p-md);
508
730
  }
@@ -572,7 +794,8 @@
572
794
  }
573
795
  }
574
796
 
575
- @media (width >= 1280px) {
797
+ /* Breakpoint lg */
798
+ @media (min-width: 1280px) {
576
799
  .lg\:bui-p {
577
800
  padding: var(--p-lg);
578
801
  }
@@ -642,7 +865,8 @@
642
865
  }
643
866
  }
644
867
 
645
- @media (width >= 1536px) {
868
+ /* Breakpoint xl */
869
+ @media (min-width: 1536px) {
646
870
  .xl\:bui-p {
647
871
  padding: var(--p-xl);
648
872
  }
@@ -711,7 +935,23 @@
711
935
  padding: var(--bui-space-14);
712
936
  }
713
937
  }
714
-
938
+ }
939
+ /*
940
+ * Copyright 2025 The Backstage Authors
941
+ *
942
+ * Licensed under the Apache License, Version 2.0 (the "License");
943
+ * you may not use this file except in compliance with the License.
944
+ * You may obtain a copy of the License at
945
+ *
946
+ * http://www.apache.org/licenses/LICENSE-2.0
947
+ *
948
+ * Unless required by applicable law or agreed to in writing, software
949
+ * distributed under the License is distributed on an "AS IS" BASIS,
950
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
951
+ * See the License for the specific language governing permissions and
952
+ * limitations under the License.
953
+ */
954
+ @layer utilities {
715
955
  .bui-pl {
716
956
  padding-left: var(--pl);
717
957
  }
@@ -780,7 +1020,8 @@
780
1020
  padding-left: var(--bui-space-14);
781
1021
  }
782
1022
 
783
- @media (width >= 640px) {
1023
+ /* Breakpoint xs */
1024
+ @media (min-width: 640px) {
784
1025
  .xs\:bui-pl {
785
1026
  padding-left: var(--pl-xs);
786
1027
  }
@@ -850,7 +1091,8 @@
850
1091
  }
851
1092
  }
852
1093
 
853
- @media (width >= 768px) {
1094
+ /* Breakpoint sm */
1095
+ @media (min-width: 768px) {
854
1096
  .sm\:bui-pl {
855
1097
  padding-left: var(--pl-sm);
856
1098
  }
@@ -920,7 +1162,8 @@
920
1162
  }
921
1163
  }
922
1164
 
923
- @media (width >= 1024px) {
1165
+ /* Breakpoint md */
1166
+ @media (min-width: 1024px) {
924
1167
  .md\:bui-pl {
925
1168
  padding-left: var(--pl-md);
926
1169
  }
@@ -990,7 +1233,8 @@
990
1233
  }
991
1234
  }
992
1235
 
993
- @media (width >= 1280px) {
1236
+ /* Breakpoint lg */
1237
+ @media (min-width: 1280px) {
994
1238
  .lg\:bui-pl {
995
1239
  padding-left: var(--pl-lg);
996
1240
  }
@@ -1060,7 +1304,8 @@
1060
1304
  }
1061
1305
  }
1062
1306
 
1063
- @media (width >= 1536px) {
1307
+ /* Breakpoint xl */
1308
+ @media (min-width: 1536px) {
1064
1309
  .xl\:bui-pl {
1065
1310
  padding-left: var(--pl-xl);
1066
1311
  }
@@ -1129,7 +1374,23 @@
1129
1374
  padding-left: var(--bui-space-14);
1130
1375
  }
1131
1376
  }
1132
-
1377
+ }
1378
+ /*
1379
+ * Copyright 2025 The Backstage Authors
1380
+ *
1381
+ * Licensed under the Apache License, Version 2.0 (the "License");
1382
+ * you may not use this file except in compliance with the License.
1383
+ * You may obtain a copy of the License at
1384
+ *
1385
+ * http://www.apache.org/licenses/LICENSE-2.0
1386
+ *
1387
+ * Unless required by applicable law or agreed to in writing, software
1388
+ * distributed under the License is distributed on an "AS IS" BASIS,
1389
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1390
+ * See the License for the specific language governing permissions and
1391
+ * limitations under the License.
1392
+ */
1393
+ @layer utilities {
1133
1394
  .bui-pr {
1134
1395
  padding-right: var(--pr);
1135
1396
  }
@@ -1198,7 +1459,8 @@
1198
1459
  padding-right: var(--bui-space-14);
1199
1460
  }
1200
1461
 
1201
- @media (width >= 640px) {
1462
+ /* Breakpoint xs */
1463
+ @media (min-width: 640px) {
1202
1464
  .xs\:bui-pr {
1203
1465
  padding-right: var(--pr-xs);
1204
1466
  }
@@ -1268,7 +1530,8 @@
1268
1530
  }
1269
1531
  }
1270
1532
 
1271
- @media (width >= 768px) {
1533
+ /* Breakpoint sm */
1534
+ @media (min-width: 768px) {
1272
1535
  .sm\:bui-pr {
1273
1536
  padding-right: var(--pr-sm);
1274
1537
  }
@@ -1338,7 +1601,8 @@
1338
1601
  }
1339
1602
  }
1340
1603
 
1341
- @media (width >= 1024px) {
1604
+ /* Breakpoint md */
1605
+ @media (min-width: 1024px) {
1342
1606
  .md\:bui-pr {
1343
1607
  padding-right: var(--pr-md);
1344
1608
  }
@@ -1408,7 +1672,8 @@
1408
1672
  }
1409
1673
  }
1410
1674
 
1411
- @media (width >= 1280px) {
1675
+ /* Breakpoint lg */
1676
+ @media (min-width: 1280px) {
1412
1677
  .lg\:bui-pr {
1413
1678
  padding-right: var(--pr-lg);
1414
1679
  }
@@ -1478,7 +1743,8 @@
1478
1743
  }
1479
1744
  }
1480
1745
 
1481
- @media (width >= 1536px) {
1746
+ /* Breakpoint xl */
1747
+ @media (min-width: 1536px) {
1482
1748
  .xl\:bui-pr {
1483
1749
  padding-right: var(--pr-xl);
1484
1750
  }
@@ -1547,7 +1813,23 @@
1547
1813
  padding-right: var(--bui-space-14);
1548
1814
  }
1549
1815
  }
1550
-
1816
+ }
1817
+ /*
1818
+ * Copyright 2025 The Backstage Authors
1819
+ *
1820
+ * Licensed under the Apache License, Version 2.0 (the "License");
1821
+ * you may not use this file except in compliance with the License.
1822
+ * You may obtain a copy of the License at
1823
+ *
1824
+ * http://www.apache.org/licenses/LICENSE-2.0
1825
+ *
1826
+ * Unless required by applicable law or agreed to in writing, software
1827
+ * distributed under the License is distributed on an "AS IS" BASIS,
1828
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
1829
+ * See the License for the specific language governing permissions and
1830
+ * limitations under the License.
1831
+ */
1832
+ @layer utilities {
1551
1833
  .bui-pt {
1552
1834
  padding-top: var(--pt);
1553
1835
  }
@@ -1616,7 +1898,8 @@
1616
1898
  padding-top: var(--bui-space-14);
1617
1899
  }
1618
1900
 
1619
- @media (width >= 640px) {
1901
+ /* Breakpoint xs */
1902
+ @media (min-width: 640px) {
1620
1903
  .xs\:bui-pt {
1621
1904
  padding-top: var(--pt-xs);
1622
1905
  }
@@ -1686,7 +1969,8 @@
1686
1969
  }
1687
1970
  }
1688
1971
 
1689
- @media (width >= 768px) {
1972
+ /* Breakpoint sm */
1973
+ @media (min-width: 768px) {
1690
1974
  .sm\:bui-pt {
1691
1975
  padding-top: var(--pt-sm);
1692
1976
  }
@@ -1756,7 +2040,8 @@
1756
2040
  }
1757
2041
  }
1758
2042
 
1759
- @media (width >= 1024px) {
2043
+ /* Breakpoint md */
2044
+ @media (min-width: 1024px) {
1760
2045
  .md\:bui-pt {
1761
2046
  padding-top: var(--pt-md);
1762
2047
  }
@@ -1826,7 +2111,8 @@
1826
2111
  }
1827
2112
  }
1828
2113
 
1829
- @media (width >= 1280px) {
2114
+ /* Breakpoint lg */
2115
+ @media (min-width: 1280px) {
1830
2116
  .lg\:bui-pt {
1831
2117
  padding-top: var(--pt-lg);
1832
2118
  }
@@ -1896,7 +2182,8 @@
1896
2182
  }
1897
2183
  }
1898
2184
 
1899
- @media (width >= 1536px) {
2185
+ /* Breakpoint xl */
2186
+ @media (min-width: 1536px) {
1900
2187
  .xl\:bui-pt {
1901
2188
  padding-top: var(--pt-xl);
1902
2189
  }
@@ -1965,7 +2252,23 @@
1965
2252
  padding-top: var(--bui-space-14);
1966
2253
  }
1967
2254
  }
1968
-
2255
+ }
2256
+ /*
2257
+ * Copyright 2025 The Backstage Authors
2258
+ *
2259
+ * Licensed under the Apache License, Version 2.0 (the "License");
2260
+ * you may not use this file except in compliance with the License.
2261
+ * You may obtain a copy of the License at
2262
+ *
2263
+ * http://www.apache.org/licenses/LICENSE-2.0
2264
+ *
2265
+ * Unless required by applicable law or agreed to in writing, software
2266
+ * distributed under the License is distributed on an "AS IS" BASIS,
2267
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2268
+ * See the License for the specific language governing permissions and
2269
+ * limitations under the License.
2270
+ */
2271
+ @layer utilities {
1969
2272
  .bui-pb {
1970
2273
  padding-bottom: var(--pb);
1971
2274
  }
@@ -2034,7 +2337,8 @@
2034
2337
  padding-bottom: var(--bui-space-14);
2035
2338
  }
2036
2339
 
2037
- @media (width >= 640px) {
2340
+ /* Breakpoint xs */
2341
+ @media (min-width: 640px) {
2038
2342
  .xs\:bui-pb {
2039
2343
  padding-bottom: var(--pb-xs);
2040
2344
  }
@@ -2104,7 +2408,8 @@
2104
2408
  }
2105
2409
  }
2106
2410
 
2107
- @media (width >= 768px) {
2411
+ /* Breakpoint sm */
2412
+ @media (min-width: 768px) {
2108
2413
  .sm\:bui-pb {
2109
2414
  padding-bottom: var(--pb-sm);
2110
2415
  }
@@ -2174,7 +2479,8 @@
2174
2479
  }
2175
2480
  }
2176
2481
 
2177
- @media (width >= 1024px) {
2482
+ /* Breakpoint md */
2483
+ @media (min-width: 1024px) {
2178
2484
  .md\:bui-pb {
2179
2485
  padding-bottom: var(--pb-md);
2180
2486
  }
@@ -2244,7 +2550,8 @@
2244
2550
  }
2245
2551
  }
2246
2552
 
2247
- @media (width >= 1280px) {
2553
+ /* Breakpoint lg */
2554
+ @media (min-width: 1280px) {
2248
2555
  .lg\:bui-pb {
2249
2556
  padding-bottom: var(--pb-lg);
2250
2557
  }
@@ -2314,7 +2621,8 @@
2314
2621
  }
2315
2622
  }
2316
2623
 
2317
- @media (width >= 1536px) {
2624
+ /* Breakpoint xl */
2625
+ @media (min-width: 1536px) {
2318
2626
  .xl\:bui-pb {
2319
2627
  padding-bottom: var(--pb-xl);
2320
2628
  }
@@ -2383,7 +2691,23 @@
2383
2691
  padding-bottom: var(--bui-space-14);
2384
2692
  }
2385
2693
  }
2386
-
2694
+ }
2695
+ /*
2696
+ * Copyright 2025 The Backstage Authors
2697
+ *
2698
+ * Licensed under the Apache License, Version 2.0 (the "License");
2699
+ * you may not use this file except in compliance with the License.
2700
+ * You may obtain a copy of the License at
2701
+ *
2702
+ * http://www.apache.org/licenses/LICENSE-2.0
2703
+ *
2704
+ * Unless required by applicable law or agreed to in writing, software
2705
+ * distributed under the License is distributed on an "AS IS" BASIS,
2706
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
2707
+ * See the License for the specific language governing permissions and
2708
+ * limitations under the License.
2709
+ */
2710
+ @layer utilities {
2387
2711
  .bui-py {
2388
2712
  padding-top: var(--py);
2389
2713
  padding-bottom: var(--py);
@@ -2469,7 +2793,8 @@
2469
2793
  padding-bottom: var(--bui-space-14);
2470
2794
  }
2471
2795
 
2472
- @media (width >= 640px) {
2796
+ /* Breakpoint xs */
2797
+ @media (min-width: 640px) {
2473
2798
  .xs\:bui-py {
2474
2799
  padding-top: var(--py-xs);
2475
2800
  padding-bottom: var(--py-xs);
@@ -2556,7 +2881,8 @@
2556
2881
  }
2557
2882
  }
2558
2883
 
2559
- @media (width >= 768px) {
2884
+ /* Breakpoint sm */
2885
+ @media (min-width: 768px) {
2560
2886
  .sm\:bui-py {
2561
2887
  padding-top: var(--py-sm);
2562
2888
  padding-bottom: var(--py-sm);
@@ -2643,7 +2969,8 @@
2643
2969
  }
2644
2970
  }
2645
2971
 
2646
- @media (width >= 1024px) {
2972
+ /* Breakpoint md */
2973
+ @media (min-width: 1024px) {
2647
2974
  .md\:bui-py {
2648
2975
  padding-top: var(--py-md);
2649
2976
  padding-bottom: var(--py-md);
@@ -2730,7 +3057,8 @@
2730
3057
  }
2731
3058
  }
2732
3059
 
2733
- @media (width >= 1280px) {
3060
+ /* Breakpoint lg */
3061
+ @media (min-width: 1280px) {
2734
3062
  .lg\:bui-py {
2735
3063
  padding-top: var(--py-lg);
2736
3064
  padding-bottom: var(--py-lg);
@@ -2817,7 +3145,8 @@
2817
3145
  }
2818
3146
  }
2819
3147
 
2820
- @media (width >= 1536px) {
3148
+ /* Breakpoint xl */
3149
+ @media (min-width: 1536px) {
2821
3150
  .xl\:bui-py {
2822
3151
  padding-top: var(--py-xl);
2823
3152
  padding-bottom: var(--py-xl);
@@ -2903,7 +3232,23 @@
2903
3232
  padding-bottom: var(--bui-space-14);
2904
3233
  }
2905
3234
  }
2906
-
3235
+ }
3236
+ /*
3237
+ * Copyright 2025 The Backstage Authors
3238
+ *
3239
+ * Licensed under the Apache License, Version 2.0 (the "License");
3240
+ * you may not use this file except in compliance with the License.
3241
+ * You may obtain a copy of the License at
3242
+ *
3243
+ * http://www.apache.org/licenses/LICENSE-2.0
3244
+ *
3245
+ * Unless required by applicable law or agreed to in writing, software
3246
+ * distributed under the License is distributed on an "AS IS" BASIS,
3247
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3248
+ * See the License for the specific language governing permissions and
3249
+ * limitations under the License.
3250
+ */
3251
+ @layer utilities {
2907
3252
  .bui-px {
2908
3253
  padding-left: var(--px);
2909
3254
  padding-right: var(--px);
@@ -2989,7 +3334,8 @@
2989
3334
  padding-right: var(--bui-space-14);
2990
3335
  }
2991
3336
 
2992
- @media (width >= 640px) {
3337
+ /* Breakpoint xs */
3338
+ @media (min-width: 640px) {
2993
3339
  .xs\:bui-px {
2994
3340
  padding-left: var(--px-xs);
2995
3341
  padding-right: var(--px-xs);
@@ -3076,7 +3422,8 @@
3076
3422
  }
3077
3423
  }
3078
3424
 
3079
- @media (width >= 768px) {
3425
+ /* Breakpoint sm */
3426
+ @media (min-width: 768px) {
3080
3427
  .sm\:bui-px {
3081
3428
  padding-left: var(--px-sm);
3082
3429
  padding-right: var(--px-sm);
@@ -3163,7 +3510,8 @@
3163
3510
  }
3164
3511
  }
3165
3512
 
3166
- @media (width >= 1024px) {
3513
+ /* Breakpoint md */
3514
+ @media (min-width: 1024px) {
3167
3515
  .md\:bui-px {
3168
3516
  padding-left: var(--px-md);
3169
3517
  padding-right: var(--px-md);
@@ -3250,7 +3598,8 @@
3250
3598
  }
3251
3599
  }
3252
3600
 
3253
- @media (width >= 1280px) {
3601
+ /* Breakpoint lg */
3602
+ @media (min-width: 1280px) {
3254
3603
  .lg\:bui-px {
3255
3604
  padding-left: var(--px-lg);
3256
3605
  padding-right: var(--px-lg);
@@ -3337,7 +3686,8 @@
3337
3686
  }
3338
3687
  }
3339
3688
 
3340
- @media (width >= 1536px) {
3689
+ /* Breakpoint xl */
3690
+ @media (min-width: 1536px) {
3341
3691
  .xl\:bui-px {
3342
3692
  padding-left: var(--px-xl);
3343
3693
  padding-right: var(--px-xl);
@@ -3423,7 +3773,24 @@
3423
3773
  padding-right: var(--bui-space-14);
3424
3774
  }
3425
3775
  }
3426
-
3776
+ }
3777
+ /* Margin */
3778
+ /*
3779
+ * Copyright 2025 The Backstage Authors
3780
+ *
3781
+ * Licensed under the Apache License, Version 2.0 (the "License");
3782
+ * you may not use this file except in compliance with the License.
3783
+ * You may obtain a copy of the License at
3784
+ *
3785
+ * http://www.apache.org/licenses/LICENSE-2.0
3786
+ *
3787
+ * Unless required by applicable law or agreed to in writing, software
3788
+ * distributed under the License is distributed on an "AS IS" BASIS,
3789
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
3790
+ * See the License for the specific language governing permissions and
3791
+ * limitations under the License.
3792
+ */
3793
+ @layer utilities {
3427
3794
  .bui-m {
3428
3795
  margin: var(--m);
3429
3796
  }
@@ -3492,7 +3859,8 @@
3492
3859
  margin: var(--bui-space-14);
3493
3860
  }
3494
3861
 
3495
- @media (width >= 640px) {
3862
+ /* Breakpoint xs */
3863
+ @media (min-width: 640px) {
3496
3864
  .xs\:bui-m {
3497
3865
  margin: var(--p-xs);
3498
3866
  }
@@ -3562,7 +3930,8 @@
3562
3930
  }
3563
3931
  }
3564
3932
 
3565
- @media (width >= 768px) {
3933
+ /* Breakpoint sm */
3934
+ @media (min-width: 768px) {
3566
3935
  .sm\:bui-m {
3567
3936
  margin: var(--p-sm);
3568
3937
  }
@@ -3632,7 +4001,8 @@
3632
4001
  }
3633
4002
  }
3634
4003
 
3635
- @media (width >= 1024px) {
4004
+ /* Breakpoint md */
4005
+ @media (min-width: 1024px) {
3636
4006
  .md\:bui-m {
3637
4007
  margin: var(--p-md);
3638
4008
  }
@@ -3702,7 +4072,8 @@
3702
4072
  }
3703
4073
  }
3704
4074
 
3705
- @media (width >= 1280px) {
4075
+ /* Breakpoint lg */
4076
+ @media (min-width: 1280px) {
3706
4077
  .lg\:bui-m {
3707
4078
  margin: var(--p-lg);
3708
4079
  }
@@ -3772,7 +4143,8 @@
3772
4143
  }
3773
4144
  }
3774
4145
 
3775
- @media (width >= 1536px) {
4146
+ /* Breakpoint xl */
4147
+ @media (min-width: 1536px) {
3776
4148
  .xl\:bui-m {
3777
4149
  margin: var(--p-xl);
3778
4150
  }
@@ -3841,7 +4213,23 @@
3841
4213
  margin: var(--bui-space-14);
3842
4214
  }
3843
4215
  }
3844
-
4216
+ }
4217
+ /*
4218
+ * Copyright 2025 The Backstage Authors
4219
+ *
4220
+ * Licensed under the Apache License, Version 2.0 (the "License");
4221
+ * you may not use this file except in compliance with the License.
4222
+ * You may obtain a copy of the License at
4223
+ *
4224
+ * http://www.apache.org/licenses/LICENSE-2.0
4225
+ *
4226
+ * Unless required by applicable law or agreed to in writing, software
4227
+ * distributed under the License is distributed on an "AS IS" BASIS,
4228
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4229
+ * See the License for the specific language governing permissions and
4230
+ * limitations under the License.
4231
+ */
4232
+ @layer utilities {
3845
4233
  .bui-ml {
3846
4234
  margin-left: var(--ml);
3847
4235
  }
@@ -3910,7 +4298,8 @@
3910
4298
  margin-left: var(--bui-space-14);
3911
4299
  }
3912
4300
 
3913
- @media (width >= 640px) {
4301
+ /* Breakpoint xs */
4302
+ @media (min-width: 640px) {
3914
4303
  .xs\:bui-ml {
3915
4304
  margin-left: var(--ml-xs);
3916
4305
  }
@@ -3980,7 +4369,8 @@
3980
4369
  }
3981
4370
  }
3982
4371
 
3983
- @media (width >= 768px) {
4372
+ /* Breakpoint sm */
4373
+ @media (min-width: 768px) {
3984
4374
  .sm\:bui-ml {
3985
4375
  margin-left: var(--ml-sm);
3986
4376
  }
@@ -4050,7 +4440,8 @@
4050
4440
  }
4051
4441
  }
4052
4442
 
4053
- @media (width >= 1024px) {
4443
+ /* Breakpoint md */
4444
+ @media (min-width: 1024px) {
4054
4445
  .md\:bui-ml {
4055
4446
  margin-left: var(--ml-md);
4056
4447
  }
@@ -4120,7 +4511,8 @@
4120
4511
  }
4121
4512
  }
4122
4513
 
4123
- @media (width >= 1280px) {
4514
+ /* Breakpoint lg */
4515
+ @media (min-width: 1280px) {
4124
4516
  .lg\:bui-ml {
4125
4517
  margin-left: var(--ml-lg);
4126
4518
  }
@@ -4190,7 +4582,8 @@
4190
4582
  }
4191
4583
  }
4192
4584
 
4193
- @media (width >= 1536px) {
4585
+ /* Breakpoint xl */
4586
+ @media (min-width: 1536px) {
4194
4587
  .xl\:bui-ml {
4195
4588
  margin-left: var(--ml-xl);
4196
4589
  }
@@ -4259,7 +4652,23 @@
4259
4652
  margin-left: var(--bui-space-14);
4260
4653
  }
4261
4654
  }
4262
-
4655
+ }
4656
+ /*
4657
+ * Copyright 2025 The Backstage Authors
4658
+ *
4659
+ * Licensed under the Apache License, Version 2.0 (the "License");
4660
+ * you may not use this file except in compliance with the License.
4661
+ * You may obtain a copy of the License at
4662
+ *
4663
+ * http://www.apache.org/licenses/LICENSE-2.0
4664
+ *
4665
+ * Unless required by applicable law or agreed to in writing, software
4666
+ * distributed under the License is distributed on an "AS IS" BASIS,
4667
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
4668
+ * See the License for the specific language governing permissions and
4669
+ * limitations under the License.
4670
+ */
4671
+ @layer utilities {
4263
4672
  .bui-mr {
4264
4673
  margin-right: var(--mr);
4265
4674
  }
@@ -4328,7 +4737,8 @@
4328
4737
  margin-right: var(--bui-space-14);
4329
4738
  }
4330
4739
 
4331
- @media (width >= 640px) {
4740
+ /* Breakpoint xs */
4741
+ @media (min-width: 640px) {
4332
4742
  .xs\:bui-mr {
4333
4743
  margin-right: var(--mr-xs);
4334
4744
  }
@@ -4398,7 +4808,8 @@
4398
4808
  }
4399
4809
  }
4400
4810
 
4401
- @media (width >= 768px) {
4811
+ /* Breakpoint sm */
4812
+ @media (min-width: 768px) {
4402
4813
  .sm\:bui-mr {
4403
4814
  margin-right: var(--mr-sm);
4404
4815
  }
@@ -4468,7 +4879,8 @@
4468
4879
  }
4469
4880
  }
4470
4881
 
4471
- @media (width >= 1024px) {
4882
+ /* Breakpoint md */
4883
+ @media (min-width: 1024px) {
4472
4884
  .md\:bui-mr {
4473
4885
  margin-right: var(--mr-md);
4474
4886
  }
@@ -4538,7 +4950,8 @@
4538
4950
  }
4539
4951
  }
4540
4952
 
4541
- @media (width >= 1280px) {
4953
+ /* Breakpoint lg */
4954
+ @media (min-width: 1280px) {
4542
4955
  .lg\:bui-mr {
4543
4956
  margin-right: var(--mr-lg);
4544
4957
  }
@@ -4608,7 +5021,8 @@
4608
5021
  }
4609
5022
  }
4610
5023
 
4611
- @media (width >= 1536px) {
5024
+ /* Breakpoint xl */
5025
+ @media (min-width: 1536px) {
4612
5026
  .xl\:bui-mr {
4613
5027
  margin-right: var(--mr-xl);
4614
5028
  }
@@ -4677,7 +5091,23 @@
4677
5091
  margin-right: var(--bui-space-14);
4678
5092
  }
4679
5093
  }
4680
-
5094
+ }
5095
+ /*
5096
+ * Copyright 2025 The Backstage Authors
5097
+ *
5098
+ * Licensed under the Apache License, Version 2.0 (the "License");
5099
+ * you may not use this file except in compliance with the License.
5100
+ * You may obtain a copy of the License at
5101
+ *
5102
+ * http://www.apache.org/licenses/LICENSE-2.0
5103
+ *
5104
+ * Unless required by applicable law or agreed to in writing, software
5105
+ * distributed under the License is distributed on an "AS IS" BASIS,
5106
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5107
+ * See the License for the specific language governing permissions and
5108
+ * limitations under the License.
5109
+ */
5110
+ @layer utilities {
4681
5111
  .bui-mt {
4682
5112
  margin-top: var(--mt);
4683
5113
  }
@@ -4746,7 +5176,8 @@
4746
5176
  margin-top: var(--bui-space-14);
4747
5177
  }
4748
5178
 
4749
- @media (width >= 640px) {
5179
+ /* Breakpoint xs */
5180
+ @media (min-width: 640px) {
4750
5181
  .xs\:bui-mt {
4751
5182
  margin-top: var(--mt-xs);
4752
5183
  }
@@ -4816,7 +5247,8 @@
4816
5247
  }
4817
5248
  }
4818
5249
 
4819
- @media (width >= 768px) {
5250
+ /* Breakpoint sm */
5251
+ @media (min-width: 768px) {
4820
5252
  .sm\:bui-mt {
4821
5253
  margin-top: var(--mt-sm);
4822
5254
  }
@@ -4886,7 +5318,8 @@
4886
5318
  }
4887
5319
  }
4888
5320
 
4889
- @media (width >= 1024px) {
5321
+ /* Breakpoint md */
5322
+ @media (min-width: 1024px) {
4890
5323
  .md\:bui-mt {
4891
5324
  margin-top: var(--mt-md);
4892
5325
  }
@@ -4956,7 +5389,8 @@
4956
5389
  }
4957
5390
  }
4958
5391
 
4959
- @media (width >= 1280px) {
5392
+ /* Breakpoint lg */
5393
+ @media (min-width: 1280px) {
4960
5394
  .lg\:bui-mt {
4961
5395
  margin-top: var(--mt-lg);
4962
5396
  }
@@ -5026,7 +5460,8 @@
5026
5460
  }
5027
5461
  }
5028
5462
 
5029
- @media (width >= 1536px) {
5463
+ /* Breakpoint xl */
5464
+ @media (min-width: 1536px) {
5030
5465
  .xl\:bui-mt {
5031
5466
  margin-top: var(--mt-xl);
5032
5467
  }
@@ -5095,7 +5530,23 @@
5095
5530
  margin-top: var(--bui-space-14);
5096
5531
  }
5097
5532
  }
5098
-
5533
+ }
5534
+ /*
5535
+ * Copyright 2025 The Backstage Authors
5536
+ *
5537
+ * Licensed under the Apache License, Version 2.0 (the "License");
5538
+ * you may not use this file except in compliance with the License.
5539
+ * You may obtain a copy of the License at
5540
+ *
5541
+ * http://www.apache.org/licenses/LICENSE-2.0
5542
+ *
5543
+ * Unless required by applicable law or agreed to in writing, software
5544
+ * distributed under the License is distributed on an "AS IS" BASIS,
5545
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5546
+ * See the License for the specific language governing permissions and
5547
+ * limitations under the License.
5548
+ */
5549
+ @layer utilities {
5099
5550
  .bui-mb {
5100
5551
  margin-bottom: var(--mb);
5101
5552
  }
@@ -5164,7 +5615,8 @@
5164
5615
  margin-bottom: var(--bui-space-14);
5165
5616
  }
5166
5617
 
5167
- @media (width >= 640px) {
5618
+ /* Breakpoint xs */
5619
+ @media (min-width: 640px) {
5168
5620
  .xs\:bui-mb {
5169
5621
  margin-bottom: var(--mb-xs);
5170
5622
  }
@@ -5234,7 +5686,8 @@
5234
5686
  }
5235
5687
  }
5236
5688
 
5237
- @media (width >= 768px) {
5689
+ /* Breakpoint sm */
5690
+ @media (min-width: 768px) {
5238
5691
  .sm\:bui-mb {
5239
5692
  margin-bottom: var(--mb-sm);
5240
5693
  }
@@ -5304,7 +5757,8 @@
5304
5757
  }
5305
5758
  }
5306
5759
 
5307
- @media (width >= 1024px) {
5760
+ /* Breakpoint md */
5761
+ @media (min-width: 1024px) {
5308
5762
  .md\:bui-mb {
5309
5763
  margin-bottom: var(--mb-md);
5310
5764
  }
@@ -5374,7 +5828,8 @@
5374
5828
  }
5375
5829
  }
5376
5830
 
5377
- @media (width >= 1280px) {
5831
+ /* Breakpoint lg */
5832
+ @media (min-width: 1280px) {
5378
5833
  .lg\:bui-mb {
5379
5834
  margin-bottom: var(--mb-lg);
5380
5835
  }
@@ -5444,7 +5899,8 @@
5444
5899
  }
5445
5900
  }
5446
5901
 
5447
- @media (width >= 1536px) {
5902
+ /* Breakpoint xl */
5903
+ @media (min-width: 1536px) {
5448
5904
  .xl\:bui-mb {
5449
5905
  margin-bottom: var(--mb-xl);
5450
5906
  }
@@ -5513,7 +5969,23 @@
5513
5969
  margin-bottom: var(--bui-space-14);
5514
5970
  }
5515
5971
  }
5516
-
5972
+ }
5973
+ /*
5974
+ * Copyright 2025 The Backstage Authors
5975
+ *
5976
+ * Licensed under the Apache License, Version 2.0 (the "License");
5977
+ * you may not use this file except in compliance with the License.
5978
+ * You may obtain a copy of the License at
5979
+ *
5980
+ * http://www.apache.org/licenses/LICENSE-2.0
5981
+ *
5982
+ * Unless required by applicable law or agreed to in writing, software
5983
+ * distributed under the License is distributed on an "AS IS" BASIS,
5984
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
5985
+ * See the License for the specific language governing permissions and
5986
+ * limitations under the License.
5987
+ */
5988
+ @layer utilities {
5517
5989
  .bui-my {
5518
5990
  margin-top: var(--my);
5519
5991
  margin-bottom: var(--my);
@@ -5599,7 +6071,8 @@
5599
6071
  margin-bottom: var(--bui-space-14);
5600
6072
  }
5601
6073
 
5602
- @media (width >= 640px) {
6074
+ /* Breakpoint xs */
6075
+ @media (min-width: 640px) {
5603
6076
  .xs\:bui-my {
5604
6077
  margin-top: var(--my-xs);
5605
6078
  margin-bottom: var(--my-xs);
@@ -5686,7 +6159,8 @@
5686
6159
  }
5687
6160
  }
5688
6161
 
5689
- @media (width >= 768px) {
6162
+ /* Breakpoint sm */
6163
+ @media (min-width: 768px) {
5690
6164
  .sm\:bui-my {
5691
6165
  margin-top: var(--my-sm);
5692
6166
  margin-bottom: var(--my-sm);
@@ -5773,7 +6247,8 @@
5773
6247
  }
5774
6248
  }
5775
6249
 
5776
- @media (width >= 1024px) {
6250
+ /* Breakpoint md */
6251
+ @media (min-width: 1024px) {
5777
6252
  .md\:bui-my {
5778
6253
  margin-top: var(--my-md);
5779
6254
  margin-bottom: var(--my-md);
@@ -5860,7 +6335,8 @@
5860
6335
  }
5861
6336
  }
5862
6337
 
5863
- @media (width >= 1280px) {
6338
+ /* Breakpoint lg */
6339
+ @media (min-width: 1280px) {
5864
6340
  .lg\:bui-my {
5865
6341
  margin-top: var(--my-lg);
5866
6342
  margin-bottom: var(--my-lg);
@@ -5947,7 +6423,8 @@
5947
6423
  }
5948
6424
  }
5949
6425
 
5950
- @media (width >= 1536px) {
6426
+ /* Breakpoint xl */
6427
+ @media (min-width: 1536px) {
5951
6428
  .xl\:bui-my {
5952
6429
  margin-top: var(--my-xl);
5953
6430
  margin-bottom: var(--my-xl);
@@ -6033,7 +6510,23 @@
6033
6510
  margin-bottom: var(--bui-space-14);
6034
6511
  }
6035
6512
  }
6036
-
6513
+ }
6514
+ /*
6515
+ * Copyright 2025 The Backstage Authors
6516
+ *
6517
+ * Licensed under the Apache License, Version 2.0 (the "License");
6518
+ * you may not use this file except in compliance with the License.
6519
+ * You may obtain a copy of the License at
6520
+ *
6521
+ * http://www.apache.org/licenses/LICENSE-2.0
6522
+ *
6523
+ * Unless required by applicable law or agreed to in writing, software
6524
+ * distributed under the License is distributed on an "AS IS" BASIS,
6525
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
6526
+ * See the License for the specific language governing permissions and
6527
+ * limitations under the License.
6528
+ */
6529
+ @layer utilities {
6037
6530
  .bui-mx {
6038
6531
  margin-left: var(--mx);
6039
6532
  margin-right: var(--mx);
@@ -6119,7 +6612,8 @@
6119
6612
  margin-right: var(--bui-space-14);
6120
6613
  }
6121
6614
 
6122
- @media (width >= 640px) {
6615
+ /* Breakpoint xs */
6616
+ @media (min-width: 640px) {
6123
6617
  .xs\:bui-mx {
6124
6618
  margin-left: var(--mx-xs);
6125
6619
  margin-right: var(--mx-xs);
@@ -6206,7 +6700,8 @@
6206
6700
  }
6207
6701
  }
6208
6702
 
6209
- @media (width >= 768px) {
6703
+ /* Breakpoint sm */
6704
+ @media (min-width: 768px) {
6210
6705
  .sm\:bui-mx {
6211
6706
  margin-left: var(--mx-sm);
6212
6707
  margin-right: var(--mx-sm);
@@ -6293,7 +6788,8 @@
6293
6788
  }
6294
6789
  }
6295
6790
 
6296
- @media (width >= 1024px) {
6791
+ /* Breakpoint md */
6792
+ @media (min-width: 1024px) {
6297
6793
  .md\:bui-mx {
6298
6794
  margin-left: var(--mx-md);
6299
6795
  margin-right: var(--mx-md);
@@ -6380,7 +6876,8 @@
6380
6876
  }
6381
6877
  }
6382
6878
 
6383
- @media (width >= 1280px) {
6879
+ /* Breakpoint lg */
6880
+ @media (min-width: 1280px) {
6384
6881
  .lg\:bui-mx {
6385
6882
  margin-left: var(--mx-lg);
6386
6883
  margin-right: var(--mx-lg);
@@ -6467,7 +6964,8 @@
6467
6964
  }
6468
6965
  }
6469
6966
 
6470
- @media (width >= 1536px) {
6967
+ /* Breakpoint xl */
6968
+ @media (min-width: 1536px) {
6471
6969
  .xl\:bui-mx {
6472
6970
  margin-left: var(--mx-xl);
6473
6971
  margin-right: var(--mx-xl);
@@ -6553,7 +7051,24 @@
6553
7051
  margin-right: var(--bui-space-14);
6554
7052
  }
6555
7053
  }
6556
-
7054
+ }
7055
+ /* Display */
7056
+ /*
7057
+ * Copyright 2025 The Backstage Authors
7058
+ *
7059
+ * Licensed under the Apache License, Version 2.0 (the "License");
7060
+ * you may not use this file except in compliance with the License.
7061
+ * You may obtain a copy of the License at
7062
+ *
7063
+ * http://www.apache.org/licenses/LICENSE-2.0
7064
+ *
7065
+ * Unless required by applicable law or agreed to in writing, software
7066
+ * distributed under the License is distributed on an "AS IS" BASIS,
7067
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7068
+ * See the License for the specific language governing permissions and
7069
+ * limitations under the License.
7070
+ */
7071
+ @layer utilities {
6557
7072
  .bui-display-none {
6558
7073
  display: none;
6559
7074
  }
@@ -6570,7 +7085,8 @@
6570
7085
  display: block;
6571
7086
  }
6572
7087
 
6573
- @media (width >= 640px) {
7088
+ /* Breakpoint xs */
7089
+ @media (min-width: 640px) {
6574
7090
  .xs\:bui-display-none {
6575
7091
  display: none;
6576
7092
  }
@@ -6588,7 +7104,8 @@
6588
7104
  }
6589
7105
  }
6590
7106
 
6591
- @media (width >= 768px) {
7107
+ /* Breakpoint sm */
7108
+ @media (min-width: 768px) {
6592
7109
  .sm\:bui-display-none {
6593
7110
  display: none;
6594
7111
  }
@@ -6606,7 +7123,8 @@
6606
7123
  }
6607
7124
  }
6608
7125
 
6609
- @media (width >= 1024px) {
7126
+ /* Breakpoint md */
7127
+ @media (min-width: 1024px) {
6610
7128
  .md\:bui-display-none {
6611
7129
  display: none;
6612
7130
  }
@@ -6624,7 +7142,8 @@
6624
7142
  }
6625
7143
  }
6626
7144
 
6627
- @media (width >= 1280px) {
7145
+ /* Breakpoint lg */
7146
+ @media (min-width: 1280px) {
6628
7147
  .lg\:bui-display-none {
6629
7148
  display: none;
6630
7149
  }
@@ -6642,7 +7161,8 @@
6642
7161
  }
6643
7162
  }
6644
7163
 
6645
- @media (width >= 1536px) {
7164
+ /* Breakpoint xl */
7165
+ @media (min-width: 1536px) {
6646
7166
  .xl\:bui-display-none {
6647
7167
  display: none;
6648
7168
  }
@@ -6659,7 +7179,24 @@
6659
7179
  display: block;
6660
7180
  }
6661
7181
  }
6662
-
7182
+ }
7183
+ /* Width */
7184
+ /*
7185
+ * Copyright 2025 The Backstage Authors
7186
+ *
7187
+ * Licensed under the Apache License, Version 2.0 (the "License");
7188
+ * you may not use this file except in compliance with the License.
7189
+ * You may obtain a copy of the License at
7190
+ *
7191
+ * http://www.apache.org/licenses/LICENSE-2.0
7192
+ *
7193
+ * Unless required by applicable law or agreed to in writing, software
7194
+ * distributed under the License is distributed on an "AS IS" BASIS,
7195
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7196
+ * See the License for the specific language governing permissions and
7197
+ * limitations under the License.
7198
+ */
7199
+ @layer utilities {
6663
7200
  .bui-w {
6664
7201
  width: var(--width);
6665
7202
  }
@@ -6672,7 +7209,8 @@
6672
7209
  max-width: var(--max-width);
6673
7210
  }
6674
7211
 
6675
- @media (width >= 640px) {
7212
+ /* Breakpoint xs */
7213
+ @media (min-width: 640px) {
6676
7214
  .xs\:bui-w {
6677
7215
  width: var(--width);
6678
7216
  }
@@ -6686,7 +7224,8 @@
6686
7224
  }
6687
7225
  }
6688
7226
 
6689
- @media (width >= 768px) {
7227
+ /* Breakpoint sm */
7228
+ @media (min-width: 768px) {
6690
7229
  .sm\:bui-w {
6691
7230
  width: var(--width);
6692
7231
  }
@@ -6700,7 +7239,8 @@
6700
7239
  }
6701
7240
  }
6702
7241
 
6703
- @media (width >= 1024px) {
7242
+ /* Breakpoint md */
7243
+ @media (min-width: 1024px) {
6704
7244
  .md\:bui-w {
6705
7245
  width: var(--width);
6706
7246
  }
@@ -6714,7 +7254,8 @@
6714
7254
  }
6715
7255
  }
6716
7256
 
6717
- @media (width >= 1280px) {
7257
+ /* Breakpoint lg */
7258
+ @media (min-width: 1280px) {
6718
7259
  .lg\:bui-w {
6719
7260
  width: var(--width);
6720
7261
  }
@@ -6728,7 +7269,8 @@
6728
7269
  }
6729
7270
  }
6730
7271
 
6731
- @media (width >= 1536px) {
7272
+ /* Breakpoint xl */
7273
+ @media (min-width: 1536px) {
6732
7274
  .xl\:bui-w {
6733
7275
  width: var(--width);
6734
7276
  }
@@ -6741,7 +7283,24 @@
6741
7283
  max-width: var(--max-width);
6742
7284
  }
6743
7285
  }
6744
-
7286
+ }
7287
+ /* Height */
7288
+ /*
7289
+ * Copyright 2025 The Backstage Authors
7290
+ *
7291
+ * Licensed under the Apache License, Version 2.0 (the "License");
7292
+ * you may not use this file except in compliance with the License.
7293
+ * You may obtain a copy of the License at
7294
+ *
7295
+ * http://www.apache.org/licenses/LICENSE-2.0
7296
+ *
7297
+ * Unless required by applicable law or agreed to in writing, software
7298
+ * distributed under the License is distributed on an "AS IS" BASIS,
7299
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7300
+ * See the License for the specific language governing permissions and
7301
+ * limitations under the License.
7302
+ */
7303
+ @layer utilities {
6745
7304
  .bui-h {
6746
7305
  height: var(--height);
6747
7306
  }
@@ -6754,7 +7313,8 @@
6754
7313
  max-height: var(--max-height);
6755
7314
  }
6756
7315
 
6757
- @media (width >= 640px) {
7316
+ /* Breakpoint xs */
7317
+ @media (min-width: 640px) {
6758
7318
  .xs\:bui-h {
6759
7319
  height: var(--height);
6760
7320
  }
@@ -6768,7 +7328,8 @@
6768
7328
  }
6769
7329
  }
6770
7330
 
6771
- @media (width >= 768px) {
7331
+ /* Breakpoint sm */
7332
+ @media (min-width: 768px) {
6772
7333
  .sm\:bui-h {
6773
7334
  height: var(--height);
6774
7335
  }
@@ -6782,7 +7343,8 @@
6782
7343
  }
6783
7344
  }
6784
7345
 
6785
- @media (width >= 1024px) {
7346
+ /* Breakpoint md */
7347
+ @media (min-width: 1024px) {
6786
7348
  .md\:bui-h {
6787
7349
  height: var(--height);
6788
7350
  }
@@ -6796,7 +7358,8 @@
6796
7358
  }
6797
7359
  }
6798
7360
 
6799
- @media (width >= 1280px) {
7361
+ /* Breakpoint lg */
7362
+ @media (min-width: 1280px) {
6800
7363
  .lg\:bui-h {
6801
7364
  height: var(--height);
6802
7365
  }
@@ -6810,7 +7373,8 @@
6810
7373
  }
6811
7374
  }
6812
7375
 
6813
- @media (width >= 1536px) {
7376
+ /* Breakpoint xl */
7377
+ @media (min-width: 1536px) {
6814
7378
  .xl\:bui-h {
6815
7379
  height: var(--height);
6816
7380
  }
@@ -6823,7 +7387,24 @@
6823
7387
  max-height: var(--max-height);
6824
7388
  }
6825
7389
  }
6826
-
7390
+ }
7391
+ /* Position */
7392
+ /*
7393
+ * Copyright 2025 The Backstage Authors
7394
+ *
7395
+ * Licensed under the Apache License, Version 2.0 (the "License");
7396
+ * you may not use this file except in compliance with the License.
7397
+ * You may obtain a copy of the License at
7398
+ *
7399
+ * http://www.apache.org/licenses/LICENSE-2.0
7400
+ *
7401
+ * Unless required by applicable law or agreed to in writing, software
7402
+ * distributed under the License is distributed on an "AS IS" BASIS,
7403
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7404
+ * See the License for the specific language governing permissions and
7405
+ * limitations under the License.
7406
+ */
7407
+ @layer utilities {
6827
7408
  .bui-position-absolute {
6828
7409
  position: absolute;
6829
7410
  }
@@ -6844,7 +7425,8 @@
6844
7425
  position: static;
6845
7426
  }
6846
7427
 
6847
- @media (width >= 640px) {
7428
+ /* Breakpoint xs */
7429
+ @media (min-width: 640px) {
6848
7430
  .xs\:bui-position-absolute {
6849
7431
  position: absolute;
6850
7432
  }
@@ -6866,7 +7448,8 @@
6866
7448
  }
6867
7449
  }
6868
7450
 
6869
- @media (width >= 768px) {
7451
+ /* Breakpoint sm */
7452
+ @media (min-width: 768px) {
6870
7453
  .sm\:bui-position-absolute {
6871
7454
  position: absolute;
6872
7455
  }
@@ -6888,7 +7471,8 @@
6888
7471
  }
6889
7472
  }
6890
7473
 
6891
- @media (width >= 1024px) {
7474
+ /* Breakpoint md */
7475
+ @media (min-width: 1024px) {
6892
7476
  .md\:bui-position-absolute {
6893
7477
  position: absolute;
6894
7478
  }
@@ -6910,7 +7494,8 @@
6910
7494
  }
6911
7495
  }
6912
7496
 
6913
- @media (width >= 1280px) {
7497
+ /* Breakpoint lg */
7498
+ @media (min-width: 1280px) {
6914
7499
  .lg\:bui-position-absolute {
6915
7500
  position: absolute;
6916
7501
  }
@@ -6932,7 +7517,8 @@
6932
7517
  }
6933
7518
  }
6934
7519
 
6935
- @media (width >= 1536px) {
7520
+ /* Breakpoint xl */
7521
+ @media (min-width: 1536px) {
6936
7522
  .xl\:bui-position-absolute {
6937
7523
  position: absolute;
6938
7524
  }
@@ -6953,7 +7539,24 @@
6953
7539
  position: static;
6954
7540
  }
6955
7541
  }
6956
-
7542
+ }
7543
+ /* Grid */
7544
+ /*
7545
+ * Copyright 2025 The Backstage Authors
7546
+ *
7547
+ * Licensed under the Apache License, Version 2.0 (the "License");
7548
+ * you may not use this file except in compliance with the License.
7549
+ * You may obtain a copy of the License at
7550
+ *
7551
+ * http://www.apache.org/licenses/LICENSE-2.0
7552
+ *
7553
+ * Unless required by applicable law or agreed to in writing, software
7554
+ * distributed under the License is distributed on an "AS IS" BASIS,
7555
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
7556
+ * See the License for the specific language governing permissions and
7557
+ * limitations under the License.
7558
+ */
7559
+ @layer utilities {
6957
7560
  .bui-columns-1 {
6958
7561
  grid-template-columns: repeat(1, minmax(0, 1fr));
6959
7562
  }
@@ -7222,1356 +7825,1048 @@
7222
7825
  grid-row: span auto / span auto;
7223
7826
  }
7224
7827
 
7225
- @media (width >= 640px) {
7828
+ /* Breakpoint xs */
7829
+ @media (min-width: 640px) {
7226
7830
  .xs\:bui-columns-1 {
7227
7831
  grid-template-columns: repeat(1, minmax(0, 1fr));
7228
7832
  }
7229
-
7230
7833
  .xs\:bui-columns-2 {
7231
7834
  grid-template-columns: repeat(2, minmax(0, 1fr));
7232
7835
  }
7233
-
7234
7836
  .xs\:bui-columns-3 {
7235
7837
  grid-template-columns: repeat(3, minmax(0, 1fr));
7236
7838
  }
7237
-
7238
7839
  .xs\:bui-columns-4 {
7239
7840
  grid-template-columns: repeat(4, minmax(0, 1fr));
7240
7841
  }
7241
-
7242
7842
  .xs\:bui-columns-5 {
7243
7843
  grid-template-columns: repeat(5, minmax(0, 1fr));
7244
7844
  }
7245
-
7246
7845
  .xs\:bui-columns-6 {
7247
7846
  grid-template-columns: repeat(6, minmax(0, 1fr));
7248
7847
  }
7249
-
7250
7848
  .xs\:bui-columns-7 {
7251
7849
  grid-template-columns: repeat(7, minmax(0, 1fr));
7252
7850
  }
7253
-
7254
7851
  .xs\:bui-columns-8 {
7255
7852
  grid-template-columns: repeat(8, minmax(0, 1fr));
7256
7853
  }
7257
-
7258
7854
  .xs\:bui-columns-9 {
7259
7855
  grid-template-columns: repeat(9, minmax(0, 1fr));
7260
7856
  }
7261
-
7262
7857
  .xs\:bui-columns-10 {
7263
7858
  grid-template-columns: repeat(10, minmax(0, 1fr));
7264
7859
  }
7265
-
7266
7860
  .xs\:bui-columns-11 {
7267
7861
  grid-template-columns: repeat(11, minmax(0, 1fr));
7268
7862
  }
7269
-
7270
7863
  .xs\:bui-columns-12 {
7271
7864
  grid-template-columns: repeat(12, minmax(0, 1fr));
7272
7865
  }
7273
-
7274
7866
  .xs\:bui-columns-auto {
7275
7867
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
7276
7868
  }
7277
-
7278
7869
  .xs\:bui-col-span-1 {
7279
7870
  grid-column: span 1 / span 1;
7280
7871
  }
7281
-
7282
7872
  .xs\:bui-col-span-2 {
7283
7873
  grid-column: span 2 / span 2;
7284
7874
  }
7285
-
7286
7875
  .xs\:bui-col-span-3 {
7287
7876
  grid-column: span 3 / span 3;
7288
7877
  }
7289
-
7290
7878
  .xs\:bui-col-span-4 {
7291
7879
  grid-column: span 4 / span 4;
7292
7880
  }
7293
-
7294
7881
  .xs\:bui-col-span-5 {
7295
7882
  grid-column: span 5 / span 5;
7296
7883
  }
7297
-
7298
7884
  .xs\:bui-col-span-6 {
7299
7885
  grid-column: span 6 / span 6;
7300
7886
  }
7301
-
7302
7887
  .xs\:bui-col-span-7 {
7303
7888
  grid-column: span 7 / span 7;
7304
7889
  }
7305
-
7306
7890
  .xs\:bui-col-span-8 {
7307
7891
  grid-column: span 8 / span 8;
7308
7892
  }
7309
-
7310
7893
  .xs\:bui-col-span-9 {
7311
7894
  grid-column: span 9 / span 9;
7312
7895
  }
7313
-
7314
7896
  .xs\:bui-col-span-10 {
7315
7897
  grid-column: span 10 / span 10;
7316
7898
  }
7317
-
7318
7899
  .xs\:bui-col-span-11 {
7319
7900
  grid-column: span 11 / span 11;
7320
7901
  }
7321
-
7322
7902
  .xs\:bui-col-span-12 {
7323
7903
  grid-column: span 12 / span 12;
7324
7904
  }
7325
-
7326
7905
  .xs\:bui-col-span-auto {
7327
7906
  grid-column: span auto / span auto;
7328
7907
  }
7329
-
7330
7908
  .xs\:bui-col-start-1 {
7331
7909
  grid-column-start: 1;
7332
7910
  }
7333
-
7334
7911
  .xs\:bui-col-start-2 {
7335
7912
  grid-column-start: 2;
7336
7913
  }
7337
-
7338
7914
  .xs\:bui-col-start-3 {
7339
7915
  grid-column-start: 3;
7340
7916
  }
7341
-
7342
7917
  .xs\:bui-col-start-4 {
7343
7918
  grid-column-start: 4;
7344
7919
  }
7345
-
7346
7920
  .xs\:bui-col-start-5 {
7347
7921
  grid-column-start: 5;
7348
7922
  }
7349
-
7350
7923
  .xs\:bui-col-start-6 {
7351
7924
  grid-column-start: 6;
7352
7925
  }
7353
-
7354
7926
  .xs\:bui-col-start-7 {
7355
7927
  grid-column-start: 7;
7356
7928
  }
7357
-
7358
7929
  .xs\:bui-col-start-8 {
7359
7930
  grid-column-start: 8;
7360
7931
  }
7361
-
7362
7932
  .xs\:bui-col-start-9 {
7363
7933
  grid-column-start: 9;
7364
7934
  }
7365
-
7366
7935
  .xs\:bui-col-start-10 {
7367
7936
  grid-column-start: 10;
7368
7937
  }
7369
-
7370
7938
  .xs\:bui-col-start-11 {
7371
7939
  grid-column-start: 11;
7372
7940
  }
7373
-
7374
7941
  .xs\:bui-col-start-12 {
7375
7942
  grid-column-start: 12;
7376
7943
  }
7377
-
7378
7944
  .xs\:bui-col-start-13 {
7379
7945
  grid-column-start: 13;
7380
7946
  }
7381
-
7382
7947
  .xs\:bui-col-start-auto {
7383
7948
  grid-column-start: auto;
7384
7949
  }
7385
-
7386
7950
  .xs\:bui-col-end-1 {
7387
7951
  grid-column-end: 1;
7388
7952
  }
7389
-
7390
7953
  .xs\:bui-col-end-2 {
7391
7954
  grid-column-end: 2;
7392
7955
  }
7393
-
7394
7956
  .xs\:bui-col-end-3 {
7395
7957
  grid-column-end: 3;
7396
7958
  }
7397
-
7398
7959
  .xs\:bui-col-end-4 {
7399
7960
  grid-column-end: 4;
7400
7961
  }
7401
-
7402
7962
  .xs\:bui-col-end-5 {
7403
7963
  grid-column-end: 5;
7404
7964
  }
7405
-
7406
7965
  .xs\:bui-col-end-6 {
7407
7966
  grid-column-end: 6;
7408
7967
  }
7409
-
7410
7968
  .xs\:bui-col-end-7 {
7411
7969
  grid-column-end: 7;
7412
7970
  }
7413
-
7414
7971
  .xs\:bui-col-end-8 {
7415
7972
  grid-column-end: 8;
7416
7973
  }
7417
-
7418
7974
  .xs\:bui-col-end-9 {
7419
7975
  grid-column-end: 9;
7420
7976
  }
7421
-
7422
7977
  .xs\:bui-col-end-10 {
7423
7978
  grid-column-end: 10;
7424
7979
  }
7425
-
7426
7980
  .xs\:bui-col-end-11 {
7427
7981
  grid-column-end: 11;
7428
7982
  }
7429
-
7430
7983
  .xs\:bui-col-end-12 {
7431
7984
  grid-column-end: 12;
7432
7985
  }
7433
-
7434
7986
  .xs\:bui-col-end-13 {
7435
7987
  grid-column-end: 13;
7436
7988
  }
7437
-
7438
7989
  .xs\:bui-col-end-auto {
7439
7990
  grid-column-end: auto;
7440
7991
  }
7441
-
7442
7992
  .xs\:bui-row-span-1 {
7443
7993
  grid-row: span 1 / span 1;
7444
7994
  }
7445
-
7446
7995
  .xs\:bui-row-span-2 {
7447
7996
  grid-row: span 2 / span 2;
7448
7997
  }
7449
-
7450
7998
  .xs\:bui-row-span-3 {
7451
7999
  grid-row: span 3 / span 3;
7452
8000
  }
7453
-
7454
8001
  .xs\:bui-row-span-4 {
7455
8002
  grid-row: span 4 / span 4;
7456
8003
  }
7457
-
7458
8004
  .xs\:bui-row-span-5 {
7459
8005
  grid-row: span 5 / span 5;
7460
8006
  }
7461
-
7462
8007
  .xs\:bui-row-span-6 {
7463
8008
  grid-row: span 6 / span 6;
7464
8009
  }
7465
-
7466
8010
  .xs\:bui-row-span-7 {
7467
8011
  grid-row: span 7 / span 7;
7468
8012
  }
7469
-
7470
8013
  .xs\:bui-row-span-8 {
7471
8014
  grid-row: span 8 / span 8;
7472
8015
  }
7473
-
7474
8016
  .xs\:bui-row-span-9 {
7475
8017
  grid-row: span 9 / span 9;
7476
8018
  }
7477
-
7478
8019
  .xs\:bui-row-span-10 {
7479
8020
  grid-row: span 10 / span 10;
7480
8021
  }
7481
-
7482
8022
  .xs\:bui-row-span-11 {
7483
8023
  grid-row: span 11 / span 11;
7484
8024
  }
7485
-
7486
8025
  .xs\:bui-row-span-12 {
7487
8026
  grid-row: span 12 / span 12;
7488
8027
  }
7489
-
7490
8028
  .xs\:bui-row-span-auto {
7491
8029
  grid-row: span auto / span auto;
7492
8030
  }
7493
8031
  }
7494
8032
 
7495
- @media (width >= 768px) {
8033
+ /* Breakpoint sm */
8034
+ @media (min-width: 768px) {
7496
8035
  .sm\:bui-columns-1 {
7497
8036
  grid-template-columns: repeat(1, minmax(0, 1fr));
7498
8037
  }
7499
-
7500
8038
  .sm\:bui-columns-2 {
7501
8039
  grid-template-columns: repeat(2, minmax(0, 1fr));
7502
8040
  }
7503
-
7504
8041
  .sm\:bui-columns-3 {
7505
8042
  grid-template-columns: repeat(3, minmax(0, 1fr));
7506
8043
  }
7507
-
7508
8044
  .sm\:bui-columns-4 {
7509
8045
  grid-template-columns: repeat(4, minmax(0, 1fr));
7510
8046
  }
7511
-
7512
8047
  .sm\:bui-columns-5 {
7513
8048
  grid-template-columns: repeat(5, minmax(0, 1fr));
7514
8049
  }
7515
-
7516
8050
  .sm\:bui-columns-6 {
7517
8051
  grid-template-columns: repeat(6, minmax(0, 1fr));
7518
8052
  }
7519
-
7520
8053
  .sm\:bui-columns-7 {
7521
8054
  grid-template-columns: repeat(7, minmax(0, 1fr));
7522
8055
  }
7523
-
7524
8056
  .sm\:bui-columns-8 {
7525
8057
  grid-template-columns: repeat(8, minmax(0, 1fr));
7526
8058
  }
7527
-
7528
8059
  .sm\:bui-columns-9 {
7529
8060
  grid-template-columns: repeat(9, minmax(0, 1fr));
7530
8061
  }
7531
-
7532
8062
  .sm\:bui-columns-10 {
7533
8063
  grid-template-columns: repeat(10, minmax(0, 1fr));
7534
8064
  }
7535
-
7536
8065
  .sm\:bui-columns-11 {
7537
8066
  grid-template-columns: repeat(11, minmax(0, 1fr));
7538
8067
  }
7539
-
7540
8068
  .sm\:bui-columns-12 {
7541
8069
  grid-template-columns: repeat(12, minmax(0, 1fr));
7542
8070
  }
7543
-
7544
8071
  .sm\:bui-columns-auto {
7545
8072
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
7546
8073
  }
7547
-
7548
8074
  .sm\:bui-col-span-1 {
7549
8075
  grid-column: span 1 / span 1;
7550
8076
  }
7551
-
7552
8077
  .sm\:bui-col-span-2 {
7553
8078
  grid-column: span 2 / span 2;
7554
8079
  }
7555
-
7556
8080
  .sm\:bui-col-span-3 {
7557
8081
  grid-column: span 3 / span 3;
7558
8082
  }
7559
-
7560
8083
  .sm\:bui-col-span-4 {
7561
8084
  grid-column: span 4 / span 4;
7562
8085
  }
7563
-
7564
8086
  .sm\:bui-col-span-5 {
7565
8087
  grid-column: span 5 / span 5;
7566
8088
  }
7567
-
7568
8089
  .sm\:bui-col-span-6 {
7569
8090
  grid-column: span 6 / span 6;
7570
8091
  }
7571
-
7572
8092
  .sm\:bui-col-span-7 {
7573
8093
  grid-column: span 7 / span 7;
7574
8094
  }
7575
-
7576
8095
  .sm\:bui-col-span-8 {
7577
8096
  grid-column: span 8 / span 8;
7578
8097
  }
7579
-
7580
8098
  .sm\:bui-col-span-9 {
7581
8099
  grid-column: span 9 / span 9;
7582
8100
  }
7583
-
7584
8101
  .sm\:bui-col-span-10 {
7585
8102
  grid-column: span 10 / span 10;
7586
8103
  }
7587
-
7588
8104
  .sm\:bui-col-span-11 {
7589
8105
  grid-column: span 11 / span 11;
7590
8106
  }
7591
-
7592
8107
  .sm\:bui-col-span-12 {
7593
8108
  grid-column: span 12 / span 12;
7594
8109
  }
7595
-
7596
8110
  .sm\:bui-col-span-auto {
7597
8111
  grid-column: span auto / span auto;
7598
8112
  }
7599
-
7600
8113
  .sm\:bui-col-start-1 {
7601
8114
  grid-column-start: 1;
7602
8115
  }
7603
-
7604
8116
  .sm\:bui-col-start-2 {
7605
8117
  grid-column-start: 2;
7606
8118
  }
7607
-
7608
8119
  .sm\:bui-col-start-3 {
7609
8120
  grid-column-start: 3;
7610
8121
  }
7611
-
7612
8122
  .sm\:bui-col-start-4 {
7613
8123
  grid-column-start: 4;
7614
8124
  }
7615
-
7616
8125
  .sm\:bui-col-start-5 {
7617
8126
  grid-column-start: 5;
7618
8127
  }
7619
-
7620
8128
  .sm\:bui-col-start-6 {
7621
8129
  grid-column-start: 6;
7622
8130
  }
7623
-
7624
8131
  .sm\:bui-col-start-7 {
7625
8132
  grid-column-start: 7;
7626
8133
  }
7627
-
7628
8134
  .sm\:bui-col-start-8 {
7629
8135
  grid-column-start: 8;
7630
8136
  }
7631
-
7632
8137
  .sm\:bui-col-start-9 {
7633
8138
  grid-column-start: 9;
7634
8139
  }
7635
-
7636
8140
  .sm\:bui-col-start-10 {
7637
8141
  grid-column-start: 10;
7638
8142
  }
7639
-
7640
8143
  .sm\:bui-col-start-11 {
7641
8144
  grid-column-start: 11;
7642
8145
  }
7643
-
7644
8146
  .sm\:bui-col-start-12 {
7645
8147
  grid-column-start: 12;
7646
8148
  }
7647
-
7648
8149
  .sm\:bui-col-start-13 {
7649
8150
  grid-column-start: 13;
7650
8151
  }
7651
-
7652
8152
  .sm\:bui-col-start-auto {
7653
8153
  grid-column-start: auto;
7654
8154
  }
7655
-
7656
8155
  .sm\:bui-col-end-1 {
7657
8156
  grid-column-end: 1;
7658
8157
  }
7659
-
7660
8158
  .sm\:bui-col-end-2 {
7661
8159
  grid-column-end: 2;
7662
8160
  }
7663
-
7664
8161
  .sm\:bui-col-end-3 {
7665
8162
  grid-column-end: 3;
7666
8163
  }
7667
-
7668
8164
  .sm\:bui-col-end-4 {
7669
8165
  grid-column-end: 4;
7670
8166
  }
7671
-
7672
8167
  .sm\:bui-col-end-5 {
7673
8168
  grid-column-end: 5;
7674
8169
  }
7675
-
7676
8170
  .sm\:bui-col-end-6 {
7677
8171
  grid-column-end: 6;
7678
8172
  }
7679
-
7680
8173
  .sm\:bui-col-end-7 {
7681
8174
  grid-column-end: 7;
7682
8175
  }
7683
-
7684
8176
  .sm\:bui-col-end-8 {
7685
8177
  grid-column-end: 8;
7686
8178
  }
7687
-
7688
8179
  .sm\:bui-col-end-9 {
7689
8180
  grid-column-end: 9;
7690
8181
  }
7691
-
7692
8182
  .sm\:bui-col-end-10 {
7693
8183
  grid-column-end: 10;
7694
8184
  }
7695
-
7696
8185
  .sm\:bui-col-end-11 {
7697
8186
  grid-column-end: 11;
7698
8187
  }
7699
-
7700
8188
  .sm\:bui-col-end-12 {
7701
8189
  grid-column-end: 12;
7702
8190
  }
7703
-
7704
8191
  .sm\:bui-col-end-13 {
7705
8192
  grid-column-end: 13;
7706
8193
  }
7707
-
7708
8194
  .sm\:bui-col-end-auto {
7709
8195
  grid-column-end: auto;
7710
8196
  }
7711
-
7712
8197
  .sm\:bui-row-span-1 {
7713
8198
  grid-row: span 1 / span 1;
7714
8199
  }
7715
-
7716
8200
  .sm\:bui-row-span-2 {
7717
8201
  grid-row: span 2 / span 2;
7718
8202
  }
7719
-
7720
8203
  .sm\:bui-row-span-3 {
7721
8204
  grid-row: span 3 / span 3;
7722
8205
  }
7723
-
7724
8206
  .sm\:bui-row-span-4 {
7725
8207
  grid-row: span 4 / span 4;
7726
8208
  }
7727
-
7728
8209
  .sm\:bui-row-span-5 {
7729
8210
  grid-row: span 5 / span 5;
7730
8211
  }
7731
-
7732
8212
  .sm\:bui-row-span-6 {
7733
8213
  grid-row: span 6 / span 6;
7734
8214
  }
7735
-
7736
8215
  .sm\:bui-row-span-7 {
7737
8216
  grid-row: span 7 / span 7;
7738
8217
  }
7739
-
7740
8218
  .sm\:bui-row-span-8 {
7741
8219
  grid-row: span 8 / span 8;
7742
8220
  }
7743
-
7744
8221
  .sm\:bui-row-span-9 {
7745
8222
  grid-row: span 9 / span 9;
7746
8223
  }
7747
-
7748
8224
  .sm\:bui-row-span-10 {
7749
8225
  grid-row: span 10 / span 10;
7750
8226
  }
7751
-
7752
8227
  .sm\:bui-row-span-11 {
7753
8228
  grid-row: span 11 / span 11;
7754
8229
  }
7755
-
7756
8230
  .sm\:bui-row-span-12 {
7757
8231
  grid-row: span 12 / span 12;
7758
8232
  }
7759
-
7760
8233
  .sm\:bui-row-span-auto {
7761
8234
  grid-row: span auto / span auto;
7762
8235
  }
7763
8236
  }
7764
8237
 
7765
- @media (width >= 1024px) {
8238
+ /* Breakpoint md */
8239
+ @media (min-width: 1024px) {
7766
8240
  .md\:bui-columns-1 {
7767
8241
  grid-template-columns: repeat(1, minmax(0, 1fr));
7768
8242
  }
7769
-
7770
8243
  .md\:bui-columns-2 {
7771
8244
  grid-template-columns: repeat(2, minmax(0, 1fr));
7772
8245
  }
7773
-
7774
8246
  .md\:bui-columns-3 {
7775
8247
  grid-template-columns: repeat(3, minmax(0, 1fr));
7776
8248
  }
7777
-
7778
8249
  .md\:bui-columns-4 {
7779
8250
  grid-template-columns: repeat(4, minmax(0, 1fr));
7780
8251
  }
7781
-
7782
8252
  .md\:bui-columns-5 {
7783
8253
  grid-template-columns: repeat(5, minmax(0, 1fr));
7784
8254
  }
7785
-
7786
8255
  .md\:bui-columns-6 {
7787
8256
  grid-template-columns: repeat(6, minmax(0, 1fr));
7788
8257
  }
7789
-
7790
8258
  .md\:bui-columns-7 {
7791
8259
  grid-template-columns: repeat(7, minmax(0, 1fr));
7792
8260
  }
7793
-
7794
8261
  .md\:bui-columns-8 {
7795
8262
  grid-template-columns: repeat(8, minmax(0, 1fr));
7796
8263
  }
7797
-
7798
8264
  .md\:bui-columns-9 {
7799
8265
  grid-template-columns: repeat(9, minmax(0, 1fr));
7800
8266
  }
7801
-
7802
8267
  .md\:bui-columns-10 {
7803
8268
  grid-template-columns: repeat(10, minmax(0, 1fr));
7804
8269
  }
7805
-
7806
8270
  .md\:bui-columns-11 {
7807
8271
  grid-template-columns: repeat(11, minmax(0, 1fr));
7808
8272
  }
7809
-
7810
8273
  .md\:bui-columns-12 {
7811
8274
  grid-template-columns: repeat(12, minmax(0, 1fr));
7812
8275
  }
7813
-
7814
8276
  .md\:bui-columns-auto {
7815
8277
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
7816
8278
  }
7817
-
7818
8279
  .md\:bui-col-span-1 {
7819
8280
  grid-column: span 1 / span 1;
7820
8281
  }
7821
-
7822
8282
  .md\:bui-col-span-2 {
7823
8283
  grid-column: span 2 / span 2;
7824
8284
  }
7825
-
7826
8285
  .md\:bui-col-span-3 {
7827
8286
  grid-column: span 3 / span 3;
7828
8287
  }
7829
-
7830
8288
  .md\:bui-col-span-4 {
7831
8289
  grid-column: span 4 / span 4;
7832
8290
  }
7833
-
7834
8291
  .md\:bui-col-span-5 {
7835
8292
  grid-column: span 5 / span 5;
7836
8293
  }
7837
-
7838
8294
  .md\:bui-col-span-6 {
7839
8295
  grid-column: span 6 / span 6;
7840
8296
  }
7841
-
7842
8297
  .md\:bui-col-span-7 {
7843
8298
  grid-column: span 7 / span 7;
7844
8299
  }
7845
-
7846
8300
  .md\:bui-col-span-8 {
7847
8301
  grid-column: span 8 / span 8;
7848
8302
  }
7849
-
7850
8303
  .md\:bui-col-span-9 {
7851
8304
  grid-column: span 9 / span 9;
7852
8305
  }
7853
-
7854
8306
  .md\:bui-col-span-10 {
7855
8307
  grid-column: span 10 / span 10;
7856
8308
  }
7857
-
7858
8309
  .md\:bui-col-span-11 {
7859
8310
  grid-column: span 11 / span 11;
7860
8311
  }
7861
-
7862
8312
  .md\:bui-col-span-12 {
7863
8313
  grid-column: span 12 / span 12;
7864
8314
  }
7865
-
7866
8315
  .md\:bui-col-span-auto {
7867
8316
  grid-column: span auto / span auto;
7868
8317
  }
7869
-
7870
8318
  .md\:bui-col-start-1 {
7871
8319
  grid-column-start: 1;
7872
8320
  }
7873
-
7874
8321
  .md\:bui-col-start-2 {
7875
8322
  grid-column-start: 2;
7876
8323
  }
7877
-
7878
8324
  .md\:bui-col-start-3 {
7879
8325
  grid-column-start: 3;
7880
8326
  }
7881
-
7882
8327
  .md\:bui-col-start-4 {
7883
8328
  grid-column-start: 4;
7884
8329
  }
7885
-
7886
8330
  .md\:bui-col-start-5 {
7887
8331
  grid-column-start: 5;
7888
8332
  }
7889
-
7890
8333
  .md\:bui-col-start-6 {
7891
8334
  grid-column-start: 6;
7892
8335
  }
7893
-
7894
8336
  .md\:bui-col-start-7 {
7895
8337
  grid-column-start: 7;
7896
8338
  }
7897
-
7898
8339
  .md\:bui-col-start-8 {
7899
8340
  grid-column-start: 8;
7900
8341
  }
7901
-
7902
8342
  .md\:bui-col-start-9 {
7903
8343
  grid-column-start: 9;
7904
8344
  }
7905
-
7906
8345
  .md\:bui-col-start-10 {
7907
8346
  grid-column-start: 10;
7908
8347
  }
7909
-
7910
8348
  .md\:bui-col-start-11 {
7911
8349
  grid-column-start: 11;
7912
8350
  }
7913
-
7914
8351
  .md\:bui-col-start-12 {
7915
8352
  grid-column-start: 12;
7916
8353
  }
7917
-
7918
8354
  .md\:bui-col-start-13 {
7919
8355
  grid-column-start: 13;
7920
8356
  }
7921
-
7922
8357
  .md\:bui-col-start-auto {
7923
8358
  grid-column-start: auto;
7924
8359
  }
7925
-
7926
8360
  .md\:bui-col-end-1 {
7927
8361
  grid-column-end: 1;
7928
8362
  }
7929
-
7930
8363
  .md\:bui-col-end-2 {
7931
8364
  grid-column-end: 2;
7932
8365
  }
7933
-
7934
8366
  .md\:bui-col-end-3 {
7935
8367
  grid-column-end: 3;
7936
8368
  }
7937
-
7938
8369
  .md\:bui-col-end-4 {
7939
8370
  grid-column-end: 4;
7940
8371
  }
7941
-
7942
8372
  .md\:bui-col-end-5 {
7943
8373
  grid-column-end: 5;
7944
8374
  }
7945
-
7946
8375
  .md\:bui-col-end-6 {
7947
8376
  grid-column-end: 6;
7948
8377
  }
7949
-
7950
8378
  .md\:bui-col-end-7 {
7951
8379
  grid-column-end: 7;
7952
8380
  }
7953
-
7954
8381
  .md\:bui-col-end-8 {
7955
8382
  grid-column-end: 8;
7956
8383
  }
7957
-
7958
8384
  .md\:bui-col-end-9 {
7959
8385
  grid-column-end: 9;
7960
8386
  }
7961
-
7962
8387
  .md\:bui-col-end-10 {
7963
8388
  grid-column-end: 10;
7964
8389
  }
7965
-
7966
8390
  .md\:bui-col-end-11 {
7967
8391
  grid-column-end: 11;
7968
8392
  }
7969
-
7970
8393
  .md\:bui-col-end-12 {
7971
8394
  grid-column-end: 12;
7972
8395
  }
7973
-
7974
8396
  .md\:bui-col-end-13 {
7975
8397
  grid-column-end: 13;
7976
8398
  }
7977
-
7978
8399
  .md\:bui-col-end-auto {
7979
8400
  grid-column-end: auto;
7980
8401
  }
7981
-
7982
8402
  .md\:bui-row-span-1 {
7983
8403
  grid-row: span 1 / span 1;
7984
8404
  }
7985
-
7986
8405
  .md\:bui-row-span-2 {
7987
8406
  grid-row: span 2 / span 2;
7988
8407
  }
7989
-
7990
8408
  .md\:bui-row-span-3 {
7991
8409
  grid-row: span 3 / span 3;
7992
8410
  }
7993
-
7994
8411
  .md\:bui-row-span-4 {
7995
8412
  grid-row: span 4 / span 4;
7996
8413
  }
7997
-
7998
8414
  .md\:bui-row-span-5 {
7999
8415
  grid-row: span 5 / span 5;
8000
8416
  }
8001
-
8002
8417
  .md\:bui-row-span-6 {
8003
8418
  grid-row: span 6 / span 6;
8004
8419
  }
8005
-
8006
8420
  .md\:bui-row-span-7 {
8007
8421
  grid-row: span 7 / span 7;
8008
8422
  }
8009
-
8010
8423
  .md\:bui-row-span-8 {
8011
8424
  grid-row: span 8 / span 8;
8012
8425
  }
8013
-
8014
8426
  .md\:bui-row-span-9 {
8015
8427
  grid-row: span 9 / span 9;
8016
8428
  }
8017
-
8018
8429
  .md\:bui-row-span-10 {
8019
8430
  grid-row: span 10 / span 10;
8020
8431
  }
8021
-
8022
8432
  .md\:bui-row-span-11 {
8023
8433
  grid-row: span 11 / span 11;
8024
8434
  }
8025
-
8026
8435
  .md\:bui-row-span-12 {
8027
8436
  grid-row: span 12 / span 12;
8028
8437
  }
8029
-
8030
8438
  .md\:bui-row-span-auto {
8031
8439
  grid-row: span auto / span auto;
8032
8440
  }
8033
8441
  }
8034
8442
 
8035
- @media (width >= 1280px) {
8443
+ /* Breakpoint lg */
8444
+ @media (min-width: 1280px) {
8036
8445
  .lg\:bui-columns-1 {
8037
8446
  grid-template-columns: repeat(1, minmax(0, 1fr));
8038
8447
  }
8039
-
8040
8448
  .lg\:bui-columns-2 {
8041
8449
  grid-template-columns: repeat(2, minmax(0, 1fr));
8042
8450
  }
8043
-
8044
8451
  .lg\:bui-columns-3 {
8045
8452
  grid-template-columns: repeat(3, minmax(0, 1fr));
8046
8453
  }
8047
-
8048
8454
  .lg\:bui-columns-4 {
8049
8455
  grid-template-columns: repeat(4, minmax(0, 1fr));
8050
8456
  }
8051
-
8052
8457
  .lg\:bui-columns-5 {
8053
8458
  grid-template-columns: repeat(5, minmax(0, 1fr));
8054
8459
  }
8055
-
8056
8460
  .lg\:bui-columns-6 {
8057
8461
  grid-template-columns: repeat(6, minmax(0, 1fr));
8058
8462
  }
8059
-
8060
8463
  .lg\:bui-columns-7 {
8061
8464
  grid-template-columns: repeat(7, minmax(0, 1fr));
8062
8465
  }
8063
-
8064
8466
  .lg\:bui-columns-8 {
8065
8467
  grid-template-columns: repeat(8, minmax(0, 1fr));
8066
8468
  }
8067
-
8068
8469
  .lg\:bui-columns-9 {
8069
8470
  grid-template-columns: repeat(9, minmax(0, 1fr));
8070
8471
  }
8071
-
8072
8472
  .lg\:bui-columns-10 {
8073
8473
  grid-template-columns: repeat(10, minmax(0, 1fr));
8074
8474
  }
8075
-
8076
8475
  .lg\:bui-columns-11 {
8077
8476
  grid-template-columns: repeat(11, minmax(0, 1fr));
8078
8477
  }
8079
-
8080
8478
  .lg\:bui-columns-12 {
8081
8479
  grid-template-columns: repeat(12, minmax(0, 1fr));
8082
8480
  }
8083
-
8084
8481
  .lg\:bui-columns-auto {
8085
8482
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
8086
8483
  }
8087
-
8088
8484
  .lg\:bui-col-span-1 {
8089
8485
  grid-column: span 1 / span 1;
8090
8486
  }
8091
-
8092
8487
  .lg\:bui-col-span-2 {
8093
8488
  grid-column: span 2 / span 2;
8094
8489
  }
8095
-
8096
8490
  .lg\:bui-col-span-3 {
8097
8491
  grid-column: span 3 / span 3;
8098
8492
  }
8099
-
8100
8493
  .lg\:bui-col-span-4 {
8101
8494
  grid-column: span 4 / span 4;
8102
8495
  }
8103
-
8104
8496
  .lg\:bui-col-span-5 {
8105
8497
  grid-column: span 5 / span 5;
8106
8498
  }
8107
-
8108
8499
  .lg\:bui-col-span-6 {
8109
8500
  grid-column: span 6 / span 6;
8110
8501
  }
8111
-
8112
8502
  .lg\:bui-col-span-7 {
8113
8503
  grid-column: span 7 / span 7;
8114
8504
  }
8115
-
8116
8505
  .lg\:bui-col-span-8 {
8117
8506
  grid-column: span 8 / span 8;
8118
8507
  }
8119
-
8120
8508
  .lg\:bui-col-span-9 {
8121
8509
  grid-column: span 9 / span 9;
8122
8510
  }
8123
-
8124
8511
  .lg\:bui-col-span-10 {
8125
8512
  grid-column: span 10 / span 10;
8126
8513
  }
8127
-
8128
8514
  .lg\:bui-col-span-11 {
8129
8515
  grid-column: span 11 / span 11;
8130
8516
  }
8131
-
8132
8517
  .lg\:bui-col-span-12 {
8133
8518
  grid-column: span 12 / span 12;
8134
8519
  }
8135
-
8136
8520
  .lg\:bui-col-span-auto {
8137
8521
  grid-column: span auto / span auto;
8138
8522
  }
8139
-
8140
8523
  .lg\:bui-col-start-1 {
8141
8524
  grid-column-start: 1;
8142
8525
  }
8143
-
8144
8526
  .lg\:bui-col-start-2 {
8145
8527
  grid-column-start: 2;
8146
8528
  }
8147
-
8148
8529
  .lg\:bui-col-start-3 {
8149
8530
  grid-column-start: 3;
8150
8531
  }
8151
-
8152
8532
  .lg\:bui-col-start-4 {
8153
8533
  grid-column-start: 4;
8154
8534
  }
8155
-
8156
8535
  .lg\:bui-col-start-5 {
8157
8536
  grid-column-start: 5;
8158
8537
  }
8159
-
8160
8538
  .lg\:bui-col-start-6 {
8161
8539
  grid-column-start: 6;
8162
8540
  }
8163
-
8164
8541
  .lg\:bui-col-start-7 {
8165
8542
  grid-column-start: 7;
8166
8543
  }
8167
-
8168
8544
  .lg\:bui-col-start-8 {
8169
8545
  grid-column-start: 8;
8170
8546
  }
8171
-
8172
8547
  .lg\:bui-col-start-9 {
8173
8548
  grid-column-start: 9;
8174
8549
  }
8175
-
8176
8550
  .lg\:bui-col-start-10 {
8177
8551
  grid-column-start: 10;
8178
8552
  }
8179
-
8180
8553
  .lg\:bui-col-start-11 {
8181
8554
  grid-column-start: 11;
8182
8555
  }
8183
-
8184
8556
  .lg\:bui-col-start-12 {
8185
8557
  grid-column-start: 12;
8186
8558
  }
8187
-
8188
8559
  .lg\:bui-col-start-13 {
8189
8560
  grid-column-start: 13;
8190
8561
  }
8191
-
8192
8562
  .lg\:bui-col-start-auto {
8193
8563
  grid-column-start: auto;
8194
8564
  }
8195
-
8196
8565
  .lg\:bui-col-end-1 {
8197
8566
  grid-column-end: 1;
8198
8567
  }
8199
-
8200
8568
  .lg\:bui-col-end-2 {
8201
8569
  grid-column-end: 2;
8202
8570
  }
8203
-
8204
8571
  .lg\:bui-col-end-3 {
8205
8572
  grid-column-end: 3;
8206
8573
  }
8207
-
8208
8574
  .lg\:bui-col-end-4 {
8209
8575
  grid-column-end: 4;
8210
8576
  }
8211
-
8212
8577
  .lg\:bui-col-end-5 {
8213
8578
  grid-column-end: 5;
8214
8579
  }
8215
-
8216
8580
  .lg\:bui-col-end-6 {
8217
8581
  grid-column-end: 6;
8218
8582
  }
8219
-
8220
8583
  .lg\:bui-col-end-7 {
8221
8584
  grid-column-end: 7;
8222
8585
  }
8223
-
8224
8586
  .lg\:bui-col-end-8 {
8225
8587
  grid-column-end: 8;
8226
8588
  }
8227
-
8228
8589
  .lg\:bui-col-end-9 {
8229
8590
  grid-column-end: 9;
8230
8591
  }
8231
-
8232
8592
  .lg\:bui-col-end-10 {
8233
8593
  grid-column-end: 10;
8234
8594
  }
8235
-
8236
8595
  .lg\:bui-col-end-11 {
8237
8596
  grid-column-end: 11;
8238
8597
  }
8239
-
8240
8598
  .lg\:bui-col-end-12 {
8241
8599
  grid-column-end: 12;
8242
8600
  }
8243
-
8244
8601
  .lg\:bui-col-end-13 {
8245
8602
  grid-column-end: 13;
8246
8603
  }
8247
-
8248
8604
  .lg\:bui-col-end-auto {
8249
8605
  grid-column-end: auto;
8250
8606
  }
8251
-
8252
8607
  .lg\:bui-row-span-1 {
8253
8608
  grid-row: span 1 / span 1;
8254
8609
  }
8255
-
8256
8610
  .lg\:bui-row-span-2 {
8257
8611
  grid-row: span 2 / span 2;
8258
8612
  }
8259
-
8260
8613
  .lg\:bui-row-span-3 {
8261
8614
  grid-row: span 3 / span 3;
8262
8615
  }
8263
-
8264
8616
  .lg\:bui-row-span-4 {
8265
8617
  grid-row: span 4 / span 4;
8266
8618
  }
8267
-
8268
8619
  .lg\:bui-row-span-5 {
8269
8620
  grid-row: span 5 / span 5;
8270
8621
  }
8271
-
8272
8622
  .lg\:bui-row-span-6 {
8273
8623
  grid-row: span 6 / span 6;
8274
8624
  }
8275
-
8276
8625
  .lg\:bui-row-span-7 {
8277
8626
  grid-row: span 7 / span 7;
8278
8627
  }
8279
-
8280
8628
  .lg\:bui-row-span-8 {
8281
8629
  grid-row: span 8 / span 8;
8282
8630
  }
8283
-
8284
8631
  .lg\:bui-row-span-9 {
8285
8632
  grid-row: span 9 / span 9;
8286
8633
  }
8287
-
8288
8634
  .lg\:bui-row-span-10 {
8289
8635
  grid-row: span 10 / span 10;
8290
8636
  }
8291
-
8292
8637
  .lg\:bui-row-span-11 {
8293
8638
  grid-row: span 11 / span 11;
8294
8639
  }
8295
-
8296
8640
  .lg\:bui-row-span-12 {
8297
8641
  grid-row: span 12 / span 12;
8298
8642
  }
8299
-
8300
8643
  .lg\:bui-row-span-auto {
8301
8644
  grid-row: span auto / span auto;
8302
8645
  }
8303
8646
  }
8304
8647
 
8305
- @media (width >= 1536px) {
8648
+ /* Breakpoint xl */
8649
+ @media (min-width: 1536px) {
8306
8650
  .xl\:bui-columns-1 {
8307
8651
  grid-template-columns: repeat(1, minmax(0, 1fr));
8308
8652
  }
8309
-
8310
8653
  .xl\:bui-columns-2 {
8311
8654
  grid-template-columns: repeat(2, minmax(0, 1fr));
8312
8655
  }
8313
-
8314
8656
  .xl\:bui-columns-3 {
8315
8657
  grid-template-columns: repeat(3, minmax(0, 1fr));
8316
8658
  }
8317
-
8318
8659
  .xl\:bui-columns-4 {
8319
8660
  grid-template-columns: repeat(4, minmax(0, 1fr));
8320
8661
  }
8321
-
8322
8662
  .xl\:bui-columns-5 {
8323
8663
  grid-template-columns: repeat(5, minmax(0, 1fr));
8324
8664
  }
8325
-
8326
8665
  .xl\:bui-columns-6 {
8327
8666
  grid-template-columns: repeat(6, minmax(0, 1fr));
8328
8667
  }
8329
-
8330
8668
  .xl\:bui-columns-7 {
8331
8669
  grid-template-columns: repeat(7, minmax(0, 1fr));
8332
8670
  }
8333
-
8334
8671
  .xl\:bui-columns-8 {
8335
8672
  grid-template-columns: repeat(8, minmax(0, 1fr));
8336
8673
  }
8337
-
8338
8674
  .xl\:bui-columns-9 {
8339
8675
  grid-template-columns: repeat(9, minmax(0, 1fr));
8340
8676
  }
8341
-
8342
8677
  .xl\:bui-columns-10 {
8343
8678
  grid-template-columns: repeat(10, minmax(0, 1fr));
8344
8679
  }
8345
-
8346
8680
  .xl\:bui-columns-11 {
8347
8681
  grid-template-columns: repeat(11, minmax(0, 1fr));
8348
8682
  }
8349
-
8350
8683
  .xl\:bui-columns-12 {
8351
8684
  grid-template-columns: repeat(12, minmax(0, 1fr));
8352
8685
  }
8353
-
8354
8686
  .xl\:bui-columns-auto {
8355
8687
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
8356
8688
  }
8357
-
8358
8689
  .xl\:bui-col-span-1 {
8359
8690
  grid-column: span 1 / span 1;
8360
8691
  }
8361
-
8362
8692
  .xl\:bui-col-span-2 {
8363
8693
  grid-column: span 2 / span 2;
8364
8694
  }
8365
-
8366
8695
  .xl\:bui-col-span-3 {
8367
8696
  grid-column: span 3 / span 3;
8368
8697
  }
8369
-
8370
8698
  .xl\:bui-col-span-4 {
8371
8699
  grid-column: span 4 / span 4;
8372
8700
  }
8373
-
8374
8701
  .xl\:bui-col-span-5 {
8375
8702
  grid-column: span 5 / span 5;
8376
8703
  }
8377
-
8378
8704
  .xl\:bui-col-span-6 {
8379
8705
  grid-column: span 6 / span 6;
8380
8706
  }
8381
-
8382
8707
  .xl\:bui-col-span-7 {
8383
8708
  grid-column: span 7 / span 7;
8384
8709
  }
8385
-
8386
8710
  .xl\:bui-col-span-8 {
8387
8711
  grid-column: span 8 / span 8;
8388
8712
  }
8389
-
8390
8713
  .xl\:bui-col-span-9 {
8391
8714
  grid-column: span 9 / span 9;
8392
8715
  }
8393
-
8394
8716
  .xl\:bui-col-span-10 {
8395
8717
  grid-column: span 10 / span 10;
8396
8718
  }
8397
-
8398
8719
  .xl\:bui-col-span-11 {
8399
8720
  grid-column: span 11 / span 11;
8400
8721
  }
8401
-
8402
8722
  .xl\:bui-col-span-12 {
8403
8723
  grid-column: span 12 / span 12;
8404
8724
  }
8405
-
8406
8725
  .xl\:bui-col-span-auto {
8407
8726
  grid-column: span auto / span auto;
8408
8727
  }
8409
-
8410
8728
  .xl\:bui-col-start-1 {
8411
8729
  grid-column-start: 1;
8412
8730
  }
8413
-
8414
8731
  .xl\:bui-col-start-2 {
8415
8732
  grid-column-start: 2;
8416
8733
  }
8417
-
8418
8734
  .xl\:bui-col-start-3 {
8419
8735
  grid-column-start: 3;
8420
8736
  }
8421
-
8422
8737
  .xl\:bui-col-start-4 {
8423
8738
  grid-column-start: 4;
8424
8739
  }
8425
-
8426
8740
  .xl\:bui-col-start-5 {
8427
8741
  grid-column-start: 5;
8428
8742
  }
8429
-
8430
8743
  .xl\:bui-col-start-6 {
8431
8744
  grid-column-start: 6;
8432
8745
  }
8433
-
8434
8746
  .xl\:bui-col-start-7 {
8435
8747
  grid-column-start: 7;
8436
8748
  }
8437
-
8438
8749
  .xl\:bui-col-start-8 {
8439
8750
  grid-column-start: 8;
8440
8751
  }
8441
-
8442
8752
  .xl\:bui-col-start-9 {
8443
8753
  grid-column-start: 9;
8444
8754
  }
8445
-
8446
8755
  .xl\:bui-col-start-10 {
8447
8756
  grid-column-start: 10;
8448
8757
  }
8449
-
8450
8758
  .xl\:bui-col-start-11 {
8451
8759
  grid-column-start: 11;
8452
8760
  }
8453
-
8454
8761
  .xl\:bui-col-start-12 {
8455
8762
  grid-column-start: 12;
8456
8763
  }
8457
-
8458
8764
  .xl\:bui-col-start-13 {
8459
8765
  grid-column-start: 13;
8460
8766
  }
8461
-
8462
8767
  .xl\:bui-col-start-auto {
8463
8768
  grid-column-start: auto;
8464
8769
  }
8465
-
8466
8770
  .xl\:bui-col-end-1 {
8467
8771
  grid-column-end: 1;
8468
8772
  }
8469
-
8470
8773
  .xl\:bui-col-end-2 {
8471
8774
  grid-column-end: 2;
8472
8775
  }
8473
-
8474
8776
  .xl\:bui-col-end-3 {
8475
8777
  grid-column-end: 3;
8476
8778
  }
8477
-
8478
8779
  .xl\:bui-col-end-4 {
8479
8780
  grid-column-end: 4;
8480
8781
  }
8481
-
8482
8782
  .xl\:bui-col-end-5 {
8483
8783
  grid-column-end: 5;
8484
8784
  }
8485
-
8486
8785
  .xl\:bui-col-end-6 {
8487
8786
  grid-column-end: 6;
8488
8787
  }
8489
-
8490
8788
  .xl\:bui-col-end-7 {
8491
8789
  grid-column-end: 7;
8492
8790
  }
8493
-
8494
8791
  .xl\:bui-col-end-8 {
8495
8792
  grid-column-end: 8;
8496
8793
  }
8497
-
8498
8794
  .xl\:bui-col-end-9 {
8499
8795
  grid-column-end: 9;
8500
8796
  }
8501
-
8502
8797
  .xl\:bui-col-end-10 {
8503
8798
  grid-column-end: 10;
8504
8799
  }
8505
-
8506
8800
  .xl\:bui-col-end-11 {
8507
8801
  grid-column-end: 11;
8508
8802
  }
8509
-
8510
8803
  .xl\:bui-col-end-12 {
8511
8804
  grid-column-end: 12;
8512
8805
  }
8513
-
8514
8806
  .xl\:bui-col-end-13 {
8515
8807
  grid-column-end: 13;
8516
8808
  }
8517
-
8518
8809
  .xl\:bui-col-end-auto {
8519
8810
  grid-column-end: auto;
8520
8811
  }
8521
-
8522
8812
  .xl\:bui-row-span-1 {
8523
8813
  grid-row: span 1 / span 1;
8524
8814
  }
8525
-
8526
8815
  .xl\:bui-row-span-2 {
8527
8816
  grid-row: span 2 / span 2;
8528
8817
  }
8529
-
8530
8818
  .xl\:bui-row-span-3 {
8531
8819
  grid-row: span 3 / span 3;
8532
8820
  }
8533
-
8534
8821
  .xl\:bui-row-span-4 {
8535
8822
  grid-row: span 4 / span 4;
8536
8823
  }
8537
-
8538
8824
  .xl\:bui-row-span-5 {
8539
8825
  grid-row: span 5 / span 5;
8540
8826
  }
8541
-
8542
8827
  .xl\:bui-row-span-6 {
8543
8828
  grid-row: span 6 / span 6;
8544
8829
  }
8545
-
8546
8830
  .xl\:bui-row-span-7 {
8547
8831
  grid-row: span 7 / span 7;
8548
8832
  }
8549
-
8550
8833
  .xl\:bui-row-span-8 {
8551
8834
  grid-row: span 8 / span 8;
8552
8835
  }
8553
-
8554
8836
  .xl\:bui-row-span-9 {
8555
8837
  grid-row: span 9 / span 9;
8556
8838
  }
8557
-
8558
8839
  .xl\:bui-row-span-10 {
8559
8840
  grid-row: span 10 / span 10;
8560
8841
  }
8561
-
8562
8842
  .xl\:bui-row-span-11 {
8563
8843
  grid-row: span 11 / span 11;
8564
8844
  }
8565
-
8566
8845
  .xl\:bui-row-span-12 {
8567
8846
  grid-row: span 12 / span 12;
8568
8847
  }
8569
-
8570
8848
  .xl\:bui-row-span-auto {
8571
8849
  grid-row: span auto / span auto;
8572
8850
  }
8573
8851
  }
8574
-
8852
+ }
8853
+ /* Gap */
8854
+ /*
8855
+ * Copyright 2025 The Backstage Authors
8856
+ *
8857
+ * Licensed under the Apache License, Version 2.0 (the "License");
8858
+ * you may not use this file except in compliance with the License.
8859
+ * You may obtain a copy of the License at
8860
+ *
8861
+ * http://www.apache.org/licenses/LICENSE-2.0
8862
+ *
8863
+ * Unless required by applicable law or agreed to in writing, software
8864
+ * distributed under the License is distributed on an "AS IS" BASIS,
8865
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
8866
+ * See the License for the specific language governing permissions and
8867
+ * limitations under the License.
8868
+ */
8869
+ @layer utilities {
8575
8870
  .bui-gap {
8576
8871
  gap: var(--gap);
8577
8872
  }
@@ -8640,7 +8935,8 @@
8640
8935
  gap: var(--bui-space-14);
8641
8936
  }
8642
8937
 
8643
- @media (width >= 640px) {
8938
+ /* Breakpoint xs */
8939
+ @media (min-width: 640px) {
8644
8940
  .xs\:bui-gap {
8645
8941
  gap: var(--gap-xs);
8646
8942
  }
@@ -8710,7 +9006,8 @@
8710
9006
  }
8711
9007
  }
8712
9008
 
8713
- @media (width >= 768px) {
9009
+ /* Breakpoint sm */
9010
+ @media (min-width: 768px) {
8714
9011
  .sm\:bui-gap {
8715
9012
  gap: var(--gap-sm);
8716
9013
  }
@@ -8780,7 +9077,8 @@
8780
9077
  }
8781
9078
  }
8782
9079
 
8783
- @media (width >= 1024px) {
9080
+ /* Breakpoint md */
9081
+ @media (min-width: 1024px) {
8784
9082
  .md\:bui-gap {
8785
9083
  gap: var(--gap-md);
8786
9084
  }
@@ -8850,7 +9148,8 @@
8850
9148
  }
8851
9149
  }
8852
9150
 
8853
- @media (width >= 1280px) {
9151
+ /* Breakpoint lg */
9152
+ @media (min-width: 1280px) {
8854
9153
  .lg\:bui-gap {
8855
9154
  gap: var(--gap-lg);
8856
9155
  }
@@ -8920,7 +9219,8 @@
8920
9219
  }
8921
9220
  }
8922
9221
 
8923
- @media (width >= 1536px) {
9222
+ /* Breakpoint xl */
9223
+ @media (min-width: 1536px) {
8924
9224
  .xl\:bui-gap {
8925
9225
  gap: var(--gap-xl);
8926
9226
  }
@@ -8989,7 +9289,24 @@
8989
9289
  gap: var(--bui-space-14);
8990
9290
  }
8991
9291
  }
8992
-
9292
+ }
9293
+ /* Flex */
9294
+ /*
9295
+ * Copyright 2025 The Backstage Authors
9296
+ *
9297
+ * Licensed under the Apache License, Version 2.0 (the "License");
9298
+ * you may not use this file except in compliance with the License.
9299
+ * You may obtain a copy of the License at
9300
+ *
9301
+ * http://www.apache.org/licenses/LICENSE-2.0
9302
+ *
9303
+ * Unless required by applicable law or agreed to in writing, software
9304
+ * distributed under the License is distributed on an "AS IS" BASIS,
9305
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9306
+ * See the License for the specific language governing permissions and
9307
+ * limitations under the License.
9308
+ */
9309
+ @layer utilities {
8993
9310
  .bui-align-start {
8994
9311
  align-items: start;
8995
9312
  }
@@ -9042,7 +9359,8 @@
9042
9359
  flex-direction: column-reverse;
9043
9360
  }
9044
9361
 
9045
- @media (width >= 640px) {
9362
+ /* Breakpoint xs */
9363
+ @media (min-width: 640px) {
9046
9364
  .xs\:bui-align-start {
9047
9365
  align-items: start;
9048
9366
  }
@@ -9092,7 +9410,8 @@
9092
9410
  }
9093
9411
  }
9094
9412
 
9095
- @media (width >= 768px) {
9413
+ /* Breakpoint sm */
9414
+ @media (min-width: 768px) {
9096
9415
  .sm\:bui-align-start {
9097
9416
  align-items: start;
9098
9417
  }
@@ -9142,7 +9461,8 @@
9142
9461
  }
9143
9462
  }
9144
9463
 
9145
- @media (width >= 1024px) {
9464
+ /* Breakpoint md */
9465
+ @media (min-width: 1024px) {
9146
9466
  .md\:bui-align-start {
9147
9467
  align-items: start;
9148
9468
  }
@@ -9192,7 +9512,8 @@
9192
9512
  }
9193
9513
  }
9194
9514
 
9195
- @media (width >= 1280px) {
9515
+ /* Breakpoint lg */
9516
+ @media (min-width: 1280px) {
9196
9517
  .lg\:bui-align-start {
9197
9518
  align-items: start;
9198
9519
  }
@@ -9242,7 +9563,8 @@
9242
9563
  }
9243
9564
  }
9244
9565
 
9245
- @media (width >= 1536px) {
9566
+ /* Breakpoint xl */
9567
+ @media (min-width: 1536px) {
9246
9568
  .xl\:bui-align-start {
9247
9569
  align-items: start;
9248
9570
  }