@backstage/ui 0.12.0-next.1 → 0.12.0

package/{css → dist/css}/styles.css

@@ -1,89 +1,137 @@
-@layer tokens, base, components, utilities;
 
-/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+@layer tokens, base, components, utilities;
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* Tokens */
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 @layer tokens {
+  /* Light theme tokens */
   :root {
+    /* Font families */
     --bui-font-regular: system-ui;
-    --bui-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+    --bui-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas',
+      'Liberation Mono', 'Courier New', monospace;
+
+    /* Font weights */
     --bui-font-weight-regular: 400;
     --bui-font-weight-bold: 600;
-    --bui-font-size-1: .625rem;
-    --bui-font-size-2: .75rem;
-    --bui-font-size-3: .875rem;
-    --bui-font-size-4: 1rem;
-    --bui-font-size-5: 1.25rem;
-    --bui-font-size-6: 1.5rem;
-    --bui-font-size-7: 2rem;
-    --bui-font-size-8: 3rem;
-    --bui-font-size-9: 4rem;
-    --bui-font-size-10: 5.75rem;
-    --bui-space: .25rem;
-    --bui-space-0_5: calc(var(--bui-space) * .5);
-    --bui-space-1: var(--bui-space);
-    --bui-space-1_5: calc(var(--bui-space) * 1.5);
-    --bui-space-2: calc(var(--bui-space) * 2);
-    --bui-space-3: calc(var(--bui-space) * 3);
-    --bui-space-4: calc(var(--bui-space) * 4);
-    --bui-space-5: calc(var(--bui-space) * 5);
-    --bui-space-6: calc(var(--bui-space) * 6);
-    --bui-space-7: calc(var(--bui-space) * 7);
-    --bui-space-8: calc(var(--bui-space) * 8);
-    --bui-space-9: calc(var(--bui-space) * 9);
-    --bui-space-10: calc(var(--bui-space) * 10);
-    --bui-space-11: calc(var(--bui-space) * 11);
-    --bui-space-12: calc(var(--bui-space) * 12);
-    --bui-space-13: calc(var(--bui-space) * 13);
-    --bui-space-14: calc(var(--bui-space) * 14);
-    --bui-radius-1: calc(.125rem);
-    --bui-radius-2: calc(.25rem);
-    --bui-radius-3: calc(.5rem);
-    --bui-radius-4: calc(.75rem);
+
+    /* Font sizes */
+    --bui-font-size-1: 0.625rem; /* 10px */
+    --bui-font-size-2: 0.75rem; /* 12px */
+    --bui-font-size-3: 0.875rem; /* 14px */
+    --bui-font-size-4: 1rem; /* 16px */
+    --bui-font-size-5: 1.25rem; /* 20px */
+    --bui-font-size-6: 1.5rem; /* 24px */
+    --bui-font-size-7: 2rem; /* 32px */
+    --bui-font-size-8: 3rem; /* 48px */
+    --bui-font-size-9: 4rem; /* 64px */
+    --bui-font-size-10: 5.75rem; /* 92px */
+
+    /* Spacing */
+    --bui-space: 0.25rem; /* This is the spacing multiplier */
+    --bui-space-0_5: calc(var(--bui-space) * 0.5); /* 2px */
+    --bui-space-1: var(--bui-space); /* 4px */
+    --bui-space-1_5: calc(var(--bui-space) * 1.5); /* 6px */
+    --bui-space-2: calc(var(--bui-space) * 2); /* 8px */
+    --bui-space-3: calc(var(--bui-space) * 3); /* 12px */
+    --bui-space-4: calc(var(--bui-space) * 4); /* 16px */
+    --bui-space-5: calc(var(--bui-space) * 5); /* 20px */
+    --bui-space-6: calc(var(--bui-space) * 6); /* 24px */
+    --bui-space-7: calc(var(--bui-space) * 7); /* 28px */
+    --bui-space-8: calc(var(--bui-space) * 8); /* 32px */
+    --bui-space-9: calc(var(--bui-space) * 9); /* 36px */
+    --bui-space-10: calc(var(--bui-space) * 10); /* 40px */
+    --bui-space-11: calc(var(--bui-space) * 11); /* 44px */
+    --bui-space-12: calc(var(--bui-space) * 12); /* 48px */
+    --bui-space-13: calc(var(--bui-space) * 13); /* 52px */
+    --bui-space-14: calc(var(--bui-space) * 14); /* 56px */
+
+    /* Radius */
+    --bui-radius-1: calc(0.125rem);
+    --bui-radius-2: calc(0.25rem);
+    --bui-radius-3: calc(0.5rem);
+    --bui-radius-4: calc(0.75rem);
     --bui-radius-5: calc(1rem);
     --bui-radius-6: calc(1.25rem);
     --bui-radius-full: 9999px;
-    --bui-black: #000;
-    --bui-white: #fff;
-    --bui-gray-1: #f8f8f8;
-    --bui-gray-2: #ececec;
-    --bui-gray-3: #d9d9d9;
-    --bui-gray-4: #c1c1c1;
-    --bui-gray-5: #9e9e9e;
-    --bui-gray-6: #8c8c8c;
-    --bui-gray-7: #757575;
-    --bui-gray-8: #595959;
-    --bui-bg-surface-0: var(--bui-gray-1);
-    --bui-bg-surface-1: var(--bui-white);
-    --bui-bg-surface-2: var(--bui-gray-1);
-    --bui-bg-surface-3: var(--bui-gray-2);
+
+    /* Base Colors */
+    --bui-black: #000000;
+    --bui-white: #ffffff;
+
+    /* Solid background colors */
     --bui-bg-solid: #1f5493;
     --bui-bg-solid-hover: #163a66;
     --bui-bg-solid-pressed: #0f2b4e;
     --bui-bg-solid-disabled: #163a66;
-    --bui-bg-neutral-on-surface-0: oklch(0% 0 0 / .06);
-    --bui-bg-neutral-on-surface-0-hover: oklch(0% 0 0 / .12);
-    --bui-bg-neutral-on-surface-0-pressed: oklch(0% 0 0 / .16);
-    --bui-bg-neutral-on-surface-0-disabled: oklch(0% 0 0 / .06);
-    --bui-bg-neutral-on-surface-1: oklch(0% 0 0 / .06);
-    --bui-bg-neutral-on-surface-1-hover: oklch(0% 0 0 / .12);
-    --bui-bg-neutral-on-surface-1-pressed: oklch(0% 0 0 / .16);
-    --bui-bg-neutral-on-surface-1-disabled: oklch(0% 0 0 / .06);
-    --bui-bg-neutral-on-surface-2: oklch(0% 0 0 / .06);
-    --bui-bg-neutral-on-surface-2-hover: oklch(0% 0 0 / .12);
-    --bui-bg-neutral-on-surface-2-pressed: oklch(0% 0 0 / .16);
-    --bui-bg-neutral-on-surface-2-disabled: oklch(0% 0 0 / .06);
-    --bui-bg-neutral-on-surface-3: oklch(0% 0 0 / .06);
-    --bui-bg-neutral-on-surface-3-hover: oklch(0% 0 0 / .12);
-    --bui-bg-neutral-on-surface-3-pressed: oklch(0% 0 0 / .16);
-    --bui-bg-neutral-on-surface-3-disabled: oklch(0% 0 0 / .06);
+
+    /* Neutral background colors */
+    --bui-bg-app: #f8f8f8;
+    --bui-bg-popover: #ffffff;
+
+    --bui-bg-neutral-1: #fff;
+    --bui-bg-neutral-1-hover: oklch(0% 0 0 / 12%);
+    --bui-bg-neutral-1-pressed: oklch(0% 0 0 / 16%);
+    --bui-bg-neutral-1-disabled: oklch(0% 0 0 / 6%);
+
+    --bui-bg-neutral-2: oklch(0% 0 0 / 6%);
+    --bui-bg-neutral-2-hover: oklch(0% 0 0 / 12%);
+    --bui-bg-neutral-2-pressed: oklch(0% 0 0 / 16%);
+    --bui-bg-neutral-2-disabled: oklch(0% 0 0 / 6%);
+
+    --bui-bg-neutral-3: oklch(0% 0 0 / 6%);
+    --bui-bg-neutral-3-hover: oklch(0% 0 0 / 12%);
+    --bui-bg-neutral-3-pressed: oklch(0% 0 0 / 16%);
+    --bui-bg-neutral-3-disabled: oklch(0% 0 0 / 6%);
+
+    --bui-bg-neutral-4: oklch(0% 0 0 / 6%);
+    --bui-bg-neutral-4-hover: oklch(0% 0 0 / 12%);
+    --bui-bg-neutral-4-pressed: oklch(0% 0 0 / 16%);
+    --bui-bg-neutral-4-disabled: oklch(0% 0 0 / 6%);
+
+    /* Status background colors */
     --bui-bg-danger: #ffe2e2;
     --bui-bg-warning: #ffedd5;
     --bui-bg-success: #dcfce7;
     --bui-bg-info: #dbeafe;
+
+    /* Foreground colors */
     --bui-fg-primary: var(--bui-black);
-    --bui-fg-secondary: var(--bui-gray-7);
-    --bui-fg-disabled: #9e9e9e;
+    --bui-fg-secondary: oklch(0% 0 0 / 50%);
+    --bui-fg-disabled: oklch(0% 0 0 / 28%);
     --bui-fg-solid: var(--bui-white);
     --bui-fg-solid-disabled: #98a8bc;
+
+    /* Foreground Statuses */
     --bui-fg-danger-on-bg: #991919;
     --bui-fg-warning-on-bg: #92310a;
     --bui-fg-success-on-bg: #116932;
@@ -92,63 +140,73 @@
     --bui-fg-warning: #ef7a32;
     --bui-fg-success: #1ed760;
     --bui-fg-info: #0d74ce;
-    --bui-border: #0000001a;
-    --bui-border-hover: #0003;
-    --bui-border-pressed: #0006;
-    --bui-border-disabled: #0000001a;
+
+    /* Border colors */
+    --bui-border-1: #d5d5d5;
+    --bui-border-2: #bababa;
     --bui-border-info: #7ea9d6;
     --bui-border-danger: #f87a7a;
     --bui-border-warning: #e36d05;
     --bui-border-success: #53db83;
+
+    /* Special colors */
     --bui-ring: #1f5493;
     --bui-scrollbar: #a0a0a03b;
     --bui-scrollbar-thumb: #a0a0a0;
-    --bui-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
-    --bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
-  }
-
-  [data-theme-mode="dark"] {
-    --bui-gray-1: #191919;
-    --bui-gray-2: #242424;
-    --bui-gray-3: #373737;
-    --bui-gray-4: #464646;
-    --bui-gray-5: #575757;
-    --bui-gray-6: #7b7b7b;
-    --bui-gray-7: #9e9e9e;
-    --bui-gray-8: #b4b4b4;
-    --bui-bg-surface-0: #333;
-    --bui-bg-surface-1: var(--bui-gray-1);
-    --bui-bg-surface-2: var(--bui-gray-2);
-    --bui-bg-surface-3: var(--bui-gray-3);
+
+    /* Shadows */
+    --bui-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),
+      0 4px 6px -4px rgba(0 0 0 / 0.1);
+
+    --bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  /* Dark theme tokens */
+  [data-theme-mode='dark'] {
+    /* Solid background colors */
     --bui-bg-solid: #9cc9ff;
     --bui-bg-solid-hover: #83b9fd;
     --bui-bg-solid-pressed: #83b9fd;
     --bui-bg-solid-disabled: #1b3d68;
-    --bui-bg-neutral-on-surface-0: oklch(100% 0 0 / .1);
-    --bui-bg-neutral-on-surface-0-hover: oklch(100% 0 0 / .14);
-    --bui-bg-neutral-on-surface-0-pressed: oklch(100% 0 0 / .2);
-    --bui-bg-neutral-on-surface-0-disabled: oklch(100% 0 0 / .1);
-    --bui-bg-neutral-on-surface-1: oklch(100% 0 0 / .06);
-    --bui-bg-neutral-on-surface-1-hover: oklch(100% 0 0 / .1);
-    --bui-bg-neutral-on-surface-1-pressed: oklch(100% 0 0 / .16);
-    --bui-bg-neutral-on-surface-1-disabled: oklch(100% 0 0 / .06);
-    --bui-bg-neutral-on-surface-2: oklch(100% 0 0 / .08);
-    --bui-bg-neutral-on-surface-2-hover: oklch(100% 0 0 / .12);
-    --bui-bg-neutral-on-surface-2-pressed: oklch(100% 0 0 / .2);
-    --bui-bg-neutral-on-surface-2-disabled: oklch(100% 0 0 / .08);
-    --bui-bg-neutral-on-surface-3: oklch(100% 0 0 / .08);
-    --bui-bg-neutral-on-surface-3-hover: oklch(100% 0 0 / .12);
-    --bui-bg-neutral-on-surface-3-pressed: oklch(100% 0 0 / .2);
-    --bui-bg-neutral-on-surface-3-disabled: oklch(100% 0 0 / .08);
+
+    /* Neutral background colors */
+    --bui-bg-app: #333333;
+    --bui-bg-popover: #1a1a1a;
+
+    --bui-bg-neutral-1: oklch(100% 0 0 / 10%);
+    --bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);
+    --bui-bg-neutral-1-pressed: oklch(100% 0 0 / 20%);
+    --bui-bg-neutral-1-disabled: oklch(100% 0 0 / 10%);
+
+    --bui-bg-neutral-2: oklch(100% 0 0 / 6%);
+    --bui-bg-neutral-2-hover: oklch(100% 0 0 / 10%);
+    --bui-bg-neutral-2-pressed: oklch(100% 0 0 / 16%);
+    --bui-bg-neutral-2-disabled: oklch(100% 0 0 / 6%);
+
+    --bui-bg-neutral-3: oklch(100% 0 0 / 8%);
+    --bui-bg-neutral-3-hover: oklch(100% 0 0 / 12%);
+    --bui-bg-neutral-3-pressed: oklch(100% 0 0 / 20%);
+    --bui-bg-neutral-3-disabled: oklch(100% 0 0 / 8%);
+
+    --bui-bg-neutral-4: oklch(100% 0 0 / 8%);
+    --bui-bg-neutral-4-hover: oklch(100% 0 0 / 12%);
+    --bui-bg-neutral-4-pressed: oklch(100% 0 0 / 20%);
+    --bui-bg-neutral-4-disabled: oklch(100% 0 0 / 8%);
+
+    /* Status background colors */
     --bui-bg-danger: #300c0c;
     --bui-bg-warning: #302008;
     --bui-bg-success: #042713;
     --bui-bg-info: #132049;
+
+    /* Foreground colors */
     --bui-fg-primary: var(--bui-white);
-    --bui-fg-secondary: var(--bui-gray-7);
-    --bui-fg-disabled: var(--bui-gray-7);
+    --bui-fg-secondary: oklch(100% 0 0 / 50%);
+    --bui-fg-disabled: oklch(100% 0 0 / 28%);
     --bui-fg-solid: #101821;
     --bui-fg-solid-disabled: #6191cc;
+
+    /* Foreground statuses */
     --bui-fg-danger-on-bg: #fca5a5;
     --bui-fg-warning-on-bg: #fdba74;
     --bui-fg-success-on-bg: #86efac;
@@ -157,110 +215,251 @@
     --bui-fg-warning: #ffa057;
     --bui-fg-success: #1ed760;
     --bui-fg-info: #70b8ff;
-    --bui-border: #ffffff1f;
-    --bui-border-hover: #fff6;
-    --bui-border-pressed: #ffffff80;
-    --bui-border-disabled: #fff3;
+
+    /* Border colors */
+    --bui-border-1: #434343;
+    --bui-border-2: #585858;
     --bui-border-info: #7ea9d6;
     --bui-border-danger: #f87a7a;
     --bui-border-warning: #e36d05;
     --bui-border-success: #53db83;
+
+    /* Special colors */
     --bui-ring: #1f5493;
     --bui-scrollbar: #3636363a;
     --bui-scrollbar-thumb: #575757;
+
+    /* Shadows */
     --bui-shadow: none;
   }
 }
-
+/* Base */
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*
+Document
+========
+*/
+/**
+Use a better box model (opinionated).
+*/
 @layer base {
-  *, :before, :after {
+  *,
+  ::before,
+  ::after {
     box-sizing: border-box;
   }
 
+  /**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the line height in all browsers.
+3. Prevent adjustments of font size after orientation changes in iOS.
+4. Use a more readable tab size (opinionated).
+*/
+
   html {
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
-    line-height: 1.15;
+    font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+      'Apple Color Emoji', 'Segoe UI Emoji'; /* 1 */
+    line-height: 1.15; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 3 */
+    tab-size: 4; /* 4 */
   }
 
+  /*
+Sections
+========
+*/
+
+  /**
+Remove the margin in all browsers.
+*/
+
   body {
     margin: 0;
   }
 
-  b, strong {
+  /*
+Text-level semantics
+====================
+*/
+
+  /**
+Add the correct font weight in Chrome and Safari.
+*/
+
+  b,
+  strong {
     font-weight: bolder;
   }
 
-  code, kbd, samp, pre {
-    font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
-    font-size: 1em;
+  /**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono',
+      Menlo, monospace; /* 1 */
+    font-size: 1em; /* 2 */
   }
 
+  /**
+Add the correct font size in all browsers.
+*/
+
   small {
     font-size: 80%;
   }
 
-  sub, sup {
-    vertical-align: baseline;
+  /**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+  sub,
+  sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
+    vertical-align: baseline;
   }
 
   sub {
-    bottom: -.25em;
+    bottom: -0.25em;
   }
 
   sup {
-    top: -.5em;
+    top: -0.5em;
   }
 
-  table {
-    border-color: currentColor;
-  }
+  /*
+Tabular data
+============
+*/
 
-  button, input, optgroup, select, textarea {
-    margin: 0;
-    font-family: inherit;
-    font-size: 100%;
-    line-height: 1.15;
-  }
+  /**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
 
-  button, [type="button"], [type="reset"], [type="submit"] {
+  table {
+    border-color: currentcolor;
+  }
+
+  /*
+Forms
+=====
+*/
+
+  /**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
     -webkit-appearance: button;
   }
 
+  /**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
   legend {
     padding: 0;
   }
 
+  /**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
   progress {
     vertical-align: baseline;
   }
 
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+  /**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
     height: auto;
   }
 
-  [type="search"] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
+  /**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+  [type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
   }
 
+  /**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
   ::-webkit-search-decoration {
     -webkit-appearance: none;
   }
 
+  /**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
   ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
   }
 
+  /*
+Interactive
+===========
+*/
+
+  /*
+Add the correct display in Chrome and Safari.
+*/
+
   summary {
     display: list-item;
   }
-
+}
+/*
+ * Copyright 2024 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer base {
   :where(a) {
     color: inherit;
     text-decoration: none;
@@ -268,31 +467,49 @@
 
   @keyframes pulse {
     50% {
-      opacity: .5;
+      opacity: 0.5;
     }
   }
 
   body {
-    background-color: var(--bui-bg-surface-0);
+    background-color: var(--bui-bg-app);
+
+    /* Text defaults */
     color: var(--bui-fg-primary);
     font-family: var(--bui-font-regular);
     font-weight: var(--bui-font-weight-regular);
     font-size: var(--bui-font-size-3);
+
+    /* Smoothing for text rendering */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
-  [data-theme-mode="dark"] {
+  [data-theme-mode='dark'] {
     color-scheme: dark;
   }
 
-  [data-theme-mode="light"] {
+  [data-theme-mode='light'] {
     color-scheme: light;
   }
 }
-
-@layer components;
-
+/* Utilities */
+/* Padding */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
 @layer utilities {
   .bui-p {
     padding: var(--p);
@@ -362,7 +579,8 @@
     padding: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-p {
       padding: var(--p-xs);
     }
@@ -432,7 +650,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-p {
       padding: var(--p-sm);
     }
@@ -502,7 +721,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-p {
       padding: var(--p-md);
     }
@@ -572,7 +792,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-p {
       padding: var(--p-lg);
     }
@@ -642,7 +863,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-p {
       padding: var(--p-xl);
     }
@@ -711,7 +933,23 @@
       padding: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-pl {
     padding-left: var(--pl);
   }
@@ -780,7 +1018,8 @@
     padding-left: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-pl {
       padding-left: var(--pl-xs);
     }
@@ -850,7 +1089,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-pl {
       padding-left: var(--pl-sm);
     }
@@ -920,7 +1160,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-pl {
       padding-left: var(--pl-md);
     }
@@ -990,7 +1231,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-pl {
       padding-left: var(--pl-lg);
     }
@@ -1060,7 +1302,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-pl {
       padding-left: var(--pl-xl);
     }
@@ -1129,7 +1372,23 @@
       padding-left: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-pr {
     padding-right: var(--pr);
   }
@@ -1198,7 +1457,8 @@
     padding-right: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-pr {
       padding-right: var(--pr-xs);
     }
@@ -1268,7 +1528,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-pr {
       padding-right: var(--pr-sm);
     }
@@ -1338,7 +1599,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-pr {
       padding-right: var(--pr-md);
     }
@@ -1408,7 +1670,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-pr {
       padding-right: var(--pr-lg);
     }
@@ -1478,7 +1741,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-pr {
       padding-right: var(--pr-xl);
     }
@@ -1547,7 +1811,23 @@
       padding-right: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-pt {
     padding-top: var(--pt);
   }
@@ -1616,7 +1896,8 @@
     padding-top: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-pt {
       padding-top: var(--pt-xs);
     }
@@ -1686,7 +1967,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-pt {
       padding-top: var(--pt-sm);
     }
@@ -1756,7 +2038,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-pt {
       padding-top: var(--pt-md);
     }
@@ -1826,7 +2109,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-pt {
       padding-top: var(--pt-lg);
     }
@@ -1896,7 +2180,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-pt {
       padding-top: var(--pt-xl);
     }
@@ -1965,7 +2250,23 @@
       padding-top: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-pb {
     padding-bottom: var(--pb);
   }
@@ -2034,7 +2335,8 @@
     padding-bottom: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-pb {
       padding-bottom: var(--pb-xs);
     }
@@ -2104,7 +2406,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-pb {
       padding-bottom: var(--pb-sm);
     }
@@ -2174,7 +2477,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-pb {
       padding-bottom: var(--pb-md);
     }
@@ -2244,7 +2548,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-pb {
       padding-bottom: var(--pb-lg);
     }
@@ -2314,7 +2619,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-pb {
       padding-bottom: var(--pb-xl);
     }
@@ -2383,7 +2689,23 @@
       padding-bottom: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-py {
     padding-top: var(--py);
     padding-bottom: var(--py);
@@ -2469,7 +2791,8 @@
     padding-bottom: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-py {
       padding-top: var(--py-xs);
       padding-bottom: var(--py-xs);
@@ -2556,7 +2879,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-py {
       padding-top: var(--py-sm);
       padding-bottom: var(--py-sm);
@@ -2643,7 +2967,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-py {
       padding-top: var(--py-md);
       padding-bottom: var(--py-md);
@@ -2730,7 +3055,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-py {
       padding-top: var(--py-lg);
       padding-bottom: var(--py-lg);
@@ -2817,7 +3143,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-py {
       padding-top: var(--py-xl);
       padding-bottom: var(--py-xl);
@@ -2903,7 +3230,23 @@
       padding-bottom: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-px {
     padding-left: var(--px);
     padding-right: var(--px);
@@ -2989,7 +3332,8 @@
     padding-right: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-px {
       padding-left: var(--px-xs);
       padding-right: var(--px-xs);
@@ -3076,7 +3420,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-px {
       padding-left: var(--px-sm);
       padding-right: var(--px-sm);
@@ -3163,7 +3508,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-px {
       padding-left: var(--px-md);
       padding-right: var(--px-md);
@@ -3250,7 +3596,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-px {
       padding-left: var(--px-lg);
       padding-right: var(--px-lg);
@@ -3337,7 +3684,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-px {
       padding-left: var(--px-xl);
       padding-right: var(--px-xl);
@@ -3423,7 +3771,24 @@
       padding-right: var(--bui-space-14);
     }
   }
-
+}
+/* Margin */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-m {
     margin: var(--m);
   }
@@ -3492,7 +3857,8 @@
     margin: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-m {
       margin: var(--p-xs);
     }
@@ -3562,7 +3928,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-m {
       margin: var(--p-sm);
     }
@@ -3632,7 +3999,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-m {
       margin: var(--p-md);
     }
@@ -3702,7 +4070,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-m {
       margin: var(--p-lg);
     }
@@ -3772,7 +4141,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-m {
       margin: var(--p-xl);
     }
@@ -3841,7 +4211,23 @@
       margin: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-ml {
     margin-left: var(--ml);
   }
@@ -3910,7 +4296,8 @@
     margin-left: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-ml {
       margin-left: var(--ml-xs);
     }
@@ -3980,7 +4367,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-ml {
       margin-left: var(--ml-sm);
     }
@@ -4050,7 +4438,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-ml {
       margin-left: var(--ml-md);
     }
@@ -4120,7 +4509,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-ml {
       margin-left: var(--ml-lg);
     }
@@ -4190,7 +4580,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-ml {
       margin-left: var(--ml-xl);
     }
@@ -4259,7 +4650,23 @@
       margin-left: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-mr {
     margin-right: var(--mr);
   }
@@ -4328,7 +4735,8 @@
     margin-right: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-mr {
       margin-right: var(--mr-xs);
     }
@@ -4398,7 +4806,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-mr {
       margin-right: var(--mr-sm);
     }
@@ -4468,7 +4877,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-mr {
       margin-right: var(--mr-md);
     }
@@ -4538,7 +4948,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-mr {
       margin-right: var(--mr-lg);
     }
@@ -4608,7 +5019,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-mr {
       margin-right: var(--mr-xl);
     }
@@ -4677,7 +5089,23 @@
       margin-right: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-mt {
     margin-top: var(--mt);
   }
@@ -4746,7 +5174,8 @@
     margin-top: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-mt {
       margin-top: var(--mt-xs);
     }
@@ -4816,7 +5245,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-mt {
       margin-top: var(--mt-sm);
     }
@@ -4886,7 +5316,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-mt {
       margin-top: var(--mt-md);
     }
@@ -4956,7 +5387,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-mt {
       margin-top: var(--mt-lg);
     }
@@ -5026,7 +5458,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-mt {
       margin-top: var(--mt-xl);
     }
@@ -5095,7 +5528,23 @@
       margin-top: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-mb {
     margin-bottom: var(--mb);
   }
@@ -5164,7 +5613,8 @@
     margin-bottom: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-mb {
       margin-bottom: var(--mb-xs);
     }
@@ -5234,7 +5684,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-mb {
       margin-bottom: var(--mb-sm);
     }
@@ -5304,7 +5755,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-mb {
       margin-bottom: var(--mb-md);
     }
@@ -5374,7 +5826,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-mb {
       margin-bottom: var(--mb-lg);
     }
@@ -5444,7 +5897,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-mb {
       margin-bottom: var(--mb-xl);
     }
@@ -5513,7 +5967,23 @@
       margin-bottom: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-my {
     margin-top: var(--my);
     margin-bottom: var(--my);
@@ -5599,7 +6069,8 @@
     margin-bottom: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-my {
       margin-top: var(--my-xs);
       margin-bottom: var(--my-xs);
@@ -5686,7 +6157,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-my {
       margin-top: var(--my-sm);
       margin-bottom: var(--my-sm);
@@ -5773,7 +6245,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-my {
       margin-top: var(--my-md);
       margin-bottom: var(--my-md);
@@ -5860,7 +6333,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-my {
       margin-top: var(--my-lg);
       margin-bottom: var(--my-lg);
@@ -5947,7 +6421,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-my {
       margin-top: var(--my-xl);
       margin-bottom: var(--my-xl);
@@ -6033,7 +6508,23 @@
       margin-bottom: var(--bui-space-14);
     }
   }
-
+}
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-mx {
     margin-left: var(--mx);
     margin-right: var(--mx);
@@ -6119,7 +6610,8 @@
     margin-right: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-mx {
       margin-left: var(--mx-xs);
       margin-right: var(--mx-xs);
@@ -6206,7 +6698,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-mx {
       margin-left: var(--mx-sm);
       margin-right: var(--mx-sm);
@@ -6293,7 +6786,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-mx {
       margin-left: var(--mx-md);
       margin-right: var(--mx-md);
@@ -6380,7 +6874,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-mx {
       margin-left: var(--mx-lg);
       margin-right: var(--mx-lg);
@@ -6467,7 +6962,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-mx {
       margin-left: var(--mx-xl);
       margin-right: var(--mx-xl);
@@ -6553,7 +7049,24 @@
       margin-right: var(--bui-space-14);
     }
   }
-
+}
+/* Display */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-display-none {
     display: none;
   }
@@ -6570,7 +7083,8 @@
     display: block;
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-display-none {
       display: none;
     }
@@ -6588,7 +7102,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-display-none {
       display: none;
     }
@@ -6606,7 +7121,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-display-none {
       display: none;
     }
@@ -6624,7 +7140,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-display-none {
       display: none;
     }
@@ -6642,7 +7159,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-display-none {
       display: none;
     }
@@ -6659,7 +7177,24 @@
       display: block;
     }
   }
-
+}
+/* Width */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-w {
     width: var(--width);
   }
@@ -6672,7 +7207,8 @@
     max-width: var(--max-width);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-w {
       width: var(--width);
     }
@@ -6686,7 +7222,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-w {
       width: var(--width);
     }
@@ -6700,7 +7237,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-w {
       width: var(--width);
     }
@@ -6714,7 +7252,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-w {
       width: var(--width);
     }
@@ -6728,7 +7267,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-w {
       width: var(--width);
     }
@@ -6741,7 +7281,24 @@
       max-width: var(--max-width);
     }
   }
-
+}
+/* Height */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-h {
     height: var(--height);
   }
@@ -6754,7 +7311,8 @@
     max-height: var(--max-height);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-h {
       height: var(--height);
     }
@@ -6768,7 +7326,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-h {
       height: var(--height);
     }
@@ -6782,7 +7341,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-h {
       height: var(--height);
     }
@@ -6796,7 +7356,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-h {
       height: var(--height);
     }
@@ -6810,7 +7371,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-h {
       height: var(--height);
     }
@@ -6823,7 +7385,24 @@
       max-height: var(--max-height);
     }
   }
-
+}
+/* Position */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-position-absolute {
     position: absolute;
   }
@@ -6844,7 +7423,8 @@
     position: static;
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-position-absolute {
       position: absolute;
     }
@@ -6866,7 +7446,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-position-absolute {
       position: absolute;
     }
@@ -6888,7 +7469,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-position-absolute {
       position: absolute;
     }
@@ -6910,7 +7492,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-position-absolute {
       position: absolute;
     }
@@ -6932,7 +7515,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-position-absolute {
       position: absolute;
     }
@@ -6953,7 +7537,24 @@
       position: static;
     }
   }
-
+}
+/* Grid */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-columns-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -7222,1356 +7823,1048 @@
     grid-row: span auto / span auto;
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-columns-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-5 {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-7 {
       grid-template-columns: repeat(7, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-8 {
       grid-template-columns: repeat(8, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-9 {
       grid-template-columns: repeat(9, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-10 {
       grid-template-columns: repeat(10, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-11 {
       grid-template-columns: repeat(11, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-12 {
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
-
     .xs\:bui-columns-auto {
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     }
-
     .xs\:bui-col-span-1 {
       grid-column: span 1 / span 1;
     }
-
     .xs\:bui-col-span-2 {
       grid-column: span 2 / span 2;
     }
-
     .xs\:bui-col-span-3 {
       grid-column: span 3 / span 3;
     }
-
     .xs\:bui-col-span-4 {
       grid-column: span 4 / span 4;
     }
-
     .xs\:bui-col-span-5 {
       grid-column: span 5 / span 5;
     }
-
     .xs\:bui-col-span-6 {
       grid-column: span 6 / span 6;
     }
-
     .xs\:bui-col-span-7 {
       grid-column: span 7 / span 7;
     }
-
     .xs\:bui-col-span-8 {
       grid-column: span 8 / span 8;
     }
-
     .xs\:bui-col-span-9 {
       grid-column: span 9 / span 9;
     }
-
     .xs\:bui-col-span-10 {
       grid-column: span 10 / span 10;
     }
-
     .xs\:bui-col-span-11 {
       grid-column: span 11 / span 11;
     }
-
     .xs\:bui-col-span-12 {
       grid-column: span 12 / span 12;
     }
-
     .xs\:bui-col-span-auto {
       grid-column: span auto / span auto;
     }
-
     .xs\:bui-col-start-1 {
       grid-column-start: 1;
     }
-
     .xs\:bui-col-start-2 {
       grid-column-start: 2;
     }
-
     .xs\:bui-col-start-3 {
       grid-column-start: 3;
     }
-
     .xs\:bui-col-start-4 {
       grid-column-start: 4;
     }
-
     .xs\:bui-col-start-5 {
       grid-column-start: 5;
     }
-
     .xs\:bui-col-start-6 {
       grid-column-start: 6;
     }
-
     .xs\:bui-col-start-7 {
       grid-column-start: 7;
     }
-
     .xs\:bui-col-start-8 {
       grid-column-start: 8;
     }
-
     .xs\:bui-col-start-9 {
       grid-column-start: 9;
     }
-
     .xs\:bui-col-start-10 {
       grid-column-start: 10;
     }
-
     .xs\:bui-col-start-11 {
       grid-column-start: 11;
     }
-
     .xs\:bui-col-start-12 {
       grid-column-start: 12;
     }
-
     .xs\:bui-col-start-13 {
       grid-column-start: 13;
     }
-
     .xs\:bui-col-start-auto {
       grid-column-start: auto;
     }
-
     .xs\:bui-col-end-1 {
       grid-column-end: 1;
     }
-
     .xs\:bui-col-end-2 {
       grid-column-end: 2;
     }
-
     .xs\:bui-col-end-3 {
       grid-column-end: 3;
     }
-
     .xs\:bui-col-end-4 {
       grid-column-end: 4;
     }
-
     .xs\:bui-col-end-5 {
       grid-column-end: 5;
     }
-
     .xs\:bui-col-end-6 {
       grid-column-end: 6;
     }
-
     .xs\:bui-col-end-7 {
       grid-column-end: 7;
     }
-
     .xs\:bui-col-end-8 {
       grid-column-end: 8;
     }
-
     .xs\:bui-col-end-9 {
       grid-column-end: 9;
     }
-
     .xs\:bui-col-end-10 {
       grid-column-end: 10;
     }
-
     .xs\:bui-col-end-11 {
       grid-column-end: 11;
     }
-
     .xs\:bui-col-end-12 {
       grid-column-end: 12;
     }
-
     .xs\:bui-col-end-13 {
       grid-column-end: 13;
     }
-
     .xs\:bui-col-end-auto {
       grid-column-end: auto;
     }
-
     .xs\:bui-row-span-1 {
       grid-row: span 1 / span 1;
     }
-
     .xs\:bui-row-span-2 {
       grid-row: span 2 / span 2;
     }
-
     .xs\:bui-row-span-3 {
       grid-row: span 3 / span 3;
     }
-
     .xs\:bui-row-span-4 {
       grid-row: span 4 / span 4;
     }
-
     .xs\:bui-row-span-5 {
       grid-row: span 5 / span 5;
     }
-
     .xs\:bui-row-span-6 {
       grid-row: span 6 / span 6;
     }
-
     .xs\:bui-row-span-7 {
       grid-row: span 7 / span 7;
     }
-
     .xs\:bui-row-span-8 {
       grid-row: span 8 / span 8;
     }
-
     .xs\:bui-row-span-9 {
       grid-row: span 9 / span 9;
     }
-
     .xs\:bui-row-span-10 {
       grid-row: span 10 / span 10;
     }
-
     .xs\:bui-row-span-11 {
       grid-row: span 11 / span 11;
     }
-
     .xs\:bui-row-span-12 {
       grid-row: span 12 / span 12;
     }
-
     .xs\:bui-row-span-auto {
       grid-row: span auto / span auto;
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-columns-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-5 {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-7 {
       grid-template-columns: repeat(7, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-8 {
       grid-template-columns: repeat(8, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-9 {
       grid-template-columns: repeat(9, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-10 {
       grid-template-columns: repeat(10, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-11 {
       grid-template-columns: repeat(11, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-12 {
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
-
     .sm\:bui-columns-auto {
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     }
-
     .sm\:bui-col-span-1 {
       grid-column: span 1 / span 1;
     }
-
     .sm\:bui-col-span-2 {
       grid-column: span 2 / span 2;
     }
-
     .sm\:bui-col-span-3 {
       grid-column: span 3 / span 3;
     }
-
     .sm\:bui-col-span-4 {
       grid-column: span 4 / span 4;
     }
-
     .sm\:bui-col-span-5 {
       grid-column: span 5 / span 5;
     }
-
     .sm\:bui-col-span-6 {
       grid-column: span 6 / span 6;
     }
-
     .sm\:bui-col-span-7 {
       grid-column: span 7 / span 7;
     }
-
     .sm\:bui-col-span-8 {
       grid-column: span 8 / span 8;
     }
-
     .sm\:bui-col-span-9 {
       grid-column: span 9 / span 9;
     }
-
     .sm\:bui-col-span-10 {
       grid-column: span 10 / span 10;
     }
-
     .sm\:bui-col-span-11 {
       grid-column: span 11 / span 11;
     }
-
     .sm\:bui-col-span-12 {
       grid-column: span 12 / span 12;
     }
-
     .sm\:bui-col-span-auto {
       grid-column: span auto / span auto;
     }
-
     .sm\:bui-col-start-1 {
       grid-column-start: 1;
     }
-
     .sm\:bui-col-start-2 {
       grid-column-start: 2;
     }
-
     .sm\:bui-col-start-3 {
       grid-column-start: 3;
     }
-
     .sm\:bui-col-start-4 {
       grid-column-start: 4;
     }
-
     .sm\:bui-col-start-5 {
       grid-column-start: 5;
     }
-
     .sm\:bui-col-start-6 {
       grid-column-start: 6;
     }
-
     .sm\:bui-col-start-7 {
       grid-column-start: 7;
     }
-
     .sm\:bui-col-start-8 {
       grid-column-start: 8;
     }
-
     .sm\:bui-col-start-9 {
       grid-column-start: 9;
     }
-
     .sm\:bui-col-start-10 {
       grid-column-start: 10;
     }
-
     .sm\:bui-col-start-11 {
       grid-column-start: 11;
     }
-
     .sm\:bui-col-start-12 {
       grid-column-start: 12;
     }
-
     .sm\:bui-col-start-13 {
       grid-column-start: 13;
     }
-
     .sm\:bui-col-start-auto {
       grid-column-start: auto;
     }
-
     .sm\:bui-col-end-1 {
       grid-column-end: 1;
     }
-
     .sm\:bui-col-end-2 {
       grid-column-end: 2;
     }
-
     .sm\:bui-col-end-3 {
       grid-column-end: 3;
     }
-
     .sm\:bui-col-end-4 {
       grid-column-end: 4;
     }
-
     .sm\:bui-col-end-5 {
       grid-column-end: 5;
     }
-
     .sm\:bui-col-end-6 {
       grid-column-end: 6;
     }
-
     .sm\:bui-col-end-7 {
       grid-column-end: 7;
     }
-
     .sm\:bui-col-end-8 {
       grid-column-end: 8;
     }
-
     .sm\:bui-col-end-9 {
       grid-column-end: 9;
     }
-
     .sm\:bui-col-end-10 {
       grid-column-end: 10;
     }
-
     .sm\:bui-col-end-11 {
       grid-column-end: 11;
     }
-
     .sm\:bui-col-end-12 {
       grid-column-end: 12;
     }
-
     .sm\:bui-col-end-13 {
       grid-column-end: 13;
     }
-
     .sm\:bui-col-end-auto {
       grid-column-end: auto;
     }
-
     .sm\:bui-row-span-1 {
       grid-row: span 1 / span 1;
     }
-
     .sm\:bui-row-span-2 {
       grid-row: span 2 / span 2;
     }
-
     .sm\:bui-row-span-3 {
       grid-row: span 3 / span 3;
     }
-
     .sm\:bui-row-span-4 {
       grid-row: span 4 / span 4;
     }
-
     .sm\:bui-row-span-5 {
       grid-row: span 5 / span 5;
     }
-
     .sm\:bui-row-span-6 {
       grid-row: span 6 / span 6;
     }
-
     .sm\:bui-row-span-7 {
       grid-row: span 7 / span 7;
     }
-
     .sm\:bui-row-span-8 {
       grid-row: span 8 / span 8;
     }
-
     .sm\:bui-row-span-9 {
       grid-row: span 9 / span 9;
     }
-
     .sm\:bui-row-span-10 {
       grid-row: span 10 / span 10;
     }
-
     .sm\:bui-row-span-11 {
       grid-row: span 11 / span 11;
     }
-
     .sm\:bui-row-span-12 {
       grid-row: span 12 / span 12;
     }
-
     .sm\:bui-row-span-auto {
       grid-row: span auto / span auto;
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-columns-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
-
     .md\:bui-columns-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-
     .md\:bui-columns-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-
     .md\:bui-columns-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
-
     .md\:bui-columns-5 {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
-
     .md\:bui-columns-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
-
     .md\:bui-columns-7 {
       grid-template-columns: repeat(7, minmax(0, 1fr));
     }
-
     .md\:bui-columns-8 {
       grid-template-columns: repeat(8, minmax(0, 1fr));
     }
-
     .md\:bui-columns-9 {
       grid-template-columns: repeat(9, minmax(0, 1fr));
     }
-
     .md\:bui-columns-10 {
       grid-template-columns: repeat(10, minmax(0, 1fr));
     }
-
     .md\:bui-columns-11 {
       grid-template-columns: repeat(11, minmax(0, 1fr));
     }
-
     .md\:bui-columns-12 {
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
-
     .md\:bui-columns-auto {
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     }
-
     .md\:bui-col-span-1 {
       grid-column: span 1 / span 1;
     }
-
     .md\:bui-col-span-2 {
       grid-column: span 2 / span 2;
     }
-
     .md\:bui-col-span-3 {
       grid-column: span 3 / span 3;
     }
-
     .md\:bui-col-span-4 {
       grid-column: span 4 / span 4;
     }
-
     .md\:bui-col-span-5 {
       grid-column: span 5 / span 5;
     }
-
     .md\:bui-col-span-6 {
       grid-column: span 6 / span 6;
     }
-
     .md\:bui-col-span-7 {
       grid-column: span 7 / span 7;
     }
-
     .md\:bui-col-span-8 {
       grid-column: span 8 / span 8;
     }
-
     .md\:bui-col-span-9 {
       grid-column: span 9 / span 9;
     }
-
     .md\:bui-col-span-10 {
       grid-column: span 10 / span 10;
     }
-
     .md\:bui-col-span-11 {
       grid-column: span 11 / span 11;
     }
-
     .md\:bui-col-span-12 {
       grid-column: span 12 / span 12;
     }
-
     .md\:bui-col-span-auto {
       grid-column: span auto / span auto;
     }
-
     .md\:bui-col-start-1 {
       grid-column-start: 1;
     }
-
     .md\:bui-col-start-2 {
       grid-column-start: 2;
     }
-
     .md\:bui-col-start-3 {
       grid-column-start: 3;
     }
-
     .md\:bui-col-start-4 {
       grid-column-start: 4;
     }
-
     .md\:bui-col-start-5 {
       grid-column-start: 5;
     }
-
     .md\:bui-col-start-6 {
       grid-column-start: 6;
     }
-
     .md\:bui-col-start-7 {
       grid-column-start: 7;
     }
-
     .md\:bui-col-start-8 {
       grid-column-start: 8;
     }
-
     .md\:bui-col-start-9 {
       grid-column-start: 9;
     }
-
     .md\:bui-col-start-10 {
       grid-column-start: 10;
     }
-
     .md\:bui-col-start-11 {
       grid-column-start: 11;
     }
-
     .md\:bui-col-start-12 {
       grid-column-start: 12;
     }
-
     .md\:bui-col-start-13 {
       grid-column-start: 13;
     }
-
     .md\:bui-col-start-auto {
       grid-column-start: auto;
     }
-
     .md\:bui-col-end-1 {
       grid-column-end: 1;
     }
-
     .md\:bui-col-end-2 {
       grid-column-end: 2;
     }
-
     .md\:bui-col-end-3 {
       grid-column-end: 3;
     }
-
     .md\:bui-col-end-4 {
       grid-column-end: 4;
     }
-
     .md\:bui-col-end-5 {
       grid-column-end: 5;
     }
-
     .md\:bui-col-end-6 {
       grid-column-end: 6;
     }
-
     .md\:bui-col-end-7 {
       grid-column-end: 7;
     }
-
     .md\:bui-col-end-8 {
       grid-column-end: 8;
     }
-
     .md\:bui-col-end-9 {
       grid-column-end: 9;
     }
-
     .md\:bui-col-end-10 {
       grid-column-end: 10;
     }
-
     .md\:bui-col-end-11 {
       grid-column-end: 11;
     }
-
     .md\:bui-col-end-12 {
       grid-column-end: 12;
     }
-
     .md\:bui-col-end-13 {
       grid-column-end: 13;
     }
-
     .md\:bui-col-end-auto {
       grid-column-end: auto;
     }
-
     .md\:bui-row-span-1 {
       grid-row: span 1 / span 1;
     }
-
     .md\:bui-row-span-2 {
       grid-row: span 2 / span 2;
     }
-
     .md\:bui-row-span-3 {
       grid-row: span 3 / span 3;
     }
-
     .md\:bui-row-span-4 {
       grid-row: span 4 / span 4;
     }
-
     .md\:bui-row-span-5 {
       grid-row: span 5 / span 5;
     }
-
     .md\:bui-row-span-6 {
       grid-row: span 6 / span 6;
     }
-
     .md\:bui-row-span-7 {
       grid-row: span 7 / span 7;
     }
-
     .md\:bui-row-span-8 {
       grid-row: span 8 / span 8;
     }
-
     .md\:bui-row-span-9 {
       grid-row: span 9 / span 9;
     }
-
     .md\:bui-row-span-10 {
       grid-row: span 10 / span 10;
     }
-
     .md\:bui-row-span-11 {
       grid-row: span 11 / span 11;
     }
-
     .md\:bui-row-span-12 {
       grid-row: span 12 / span 12;
     }
-
     .md\:bui-row-span-auto {
       grid-row: span auto / span auto;
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-columns-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-5 {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-7 {
       grid-template-columns: repeat(7, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-8 {
       grid-template-columns: repeat(8, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-9 {
       grid-template-columns: repeat(9, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-10 {
       grid-template-columns: repeat(10, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-11 {
       grid-template-columns: repeat(11, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-12 {
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
-
     .lg\:bui-columns-auto {
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     }
-
     .lg\:bui-col-span-1 {
       grid-column: span 1 / span 1;
     }
-
     .lg\:bui-col-span-2 {
       grid-column: span 2 / span 2;
     }
-
     .lg\:bui-col-span-3 {
       grid-column: span 3 / span 3;
     }
-
     .lg\:bui-col-span-4 {
       grid-column: span 4 / span 4;
     }
-
     .lg\:bui-col-span-5 {
       grid-column: span 5 / span 5;
     }
-
     .lg\:bui-col-span-6 {
       grid-column: span 6 / span 6;
     }
-
     .lg\:bui-col-span-7 {
       grid-column: span 7 / span 7;
     }
-
     .lg\:bui-col-span-8 {
       grid-column: span 8 / span 8;
     }
-
     .lg\:bui-col-span-9 {
       grid-column: span 9 / span 9;
     }
-
     .lg\:bui-col-span-10 {
       grid-column: span 10 / span 10;
     }
-
     .lg\:bui-col-span-11 {
       grid-column: span 11 / span 11;
     }
-
     .lg\:bui-col-span-12 {
       grid-column: span 12 / span 12;
     }
-
     .lg\:bui-col-span-auto {
       grid-column: span auto / span auto;
     }
-
     .lg\:bui-col-start-1 {
       grid-column-start: 1;
     }
-
     .lg\:bui-col-start-2 {
       grid-column-start: 2;
     }
-
     .lg\:bui-col-start-3 {
       grid-column-start: 3;
     }
-
     .lg\:bui-col-start-4 {
       grid-column-start: 4;
     }
-
     .lg\:bui-col-start-5 {
       grid-column-start: 5;
     }
-
     .lg\:bui-col-start-6 {
       grid-column-start: 6;
     }
-
     .lg\:bui-col-start-7 {
       grid-column-start: 7;
     }
-
     .lg\:bui-col-start-8 {
       grid-column-start: 8;
     }
-
     .lg\:bui-col-start-9 {
       grid-column-start: 9;
     }
-
     .lg\:bui-col-start-10 {
       grid-column-start: 10;
     }
-
     .lg\:bui-col-start-11 {
       grid-column-start: 11;
     }
-
     .lg\:bui-col-start-12 {
       grid-column-start: 12;
     }
-
     .lg\:bui-col-start-13 {
       grid-column-start: 13;
     }
-
     .lg\:bui-col-start-auto {
       grid-column-start: auto;
     }
-
     .lg\:bui-col-end-1 {
       grid-column-end: 1;
     }
-
     .lg\:bui-col-end-2 {
       grid-column-end: 2;
     }
-
     .lg\:bui-col-end-3 {
       grid-column-end: 3;
     }
-
     .lg\:bui-col-end-4 {
       grid-column-end: 4;
     }
-
     .lg\:bui-col-end-5 {
       grid-column-end: 5;
     }
-
     .lg\:bui-col-end-6 {
       grid-column-end: 6;
     }
-
     .lg\:bui-col-end-7 {
       grid-column-end: 7;
     }
-
     .lg\:bui-col-end-8 {
       grid-column-end: 8;
     }
-
     .lg\:bui-col-end-9 {
       grid-column-end: 9;
     }
-
     .lg\:bui-col-end-10 {
       grid-column-end: 10;
     }
-
     .lg\:bui-col-end-11 {
       grid-column-end: 11;
     }
-
     .lg\:bui-col-end-12 {
       grid-column-end: 12;
     }
-
     .lg\:bui-col-end-13 {
       grid-column-end: 13;
     }
-
     .lg\:bui-col-end-auto {
       grid-column-end: auto;
     }
-
     .lg\:bui-row-span-1 {
       grid-row: span 1 / span 1;
     }
-
     .lg\:bui-row-span-2 {
       grid-row: span 2 / span 2;
     }
-
     .lg\:bui-row-span-3 {
       grid-row: span 3 / span 3;
     }
-
     .lg\:bui-row-span-4 {
       grid-row: span 4 / span 4;
     }
-
     .lg\:bui-row-span-5 {
       grid-row: span 5 / span 5;
     }
-
     .lg\:bui-row-span-6 {
       grid-row: span 6 / span 6;
     }
-
     .lg\:bui-row-span-7 {
       grid-row: span 7 / span 7;
     }
-
     .lg\:bui-row-span-8 {
       grid-row: span 8 / span 8;
     }
-
     .lg\:bui-row-span-9 {
       grid-row: span 9 / span 9;
     }
-
     .lg\:bui-row-span-10 {
       grid-row: span 10 / span 10;
     }
-
     .lg\:bui-row-span-11 {
       grid-row: span 11 / span 11;
     }
-
     .lg\:bui-row-span-12 {
       grid-row: span 12 / span 12;
     }
-
     .lg\:bui-row-span-auto {
       grid-row: span auto / span auto;
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-columns-1 {
       grid-template-columns: repeat(1, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-4 {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-5 {
       grid-template-columns: repeat(5, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-6 {
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-7 {
       grid-template-columns: repeat(7, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-8 {
       grid-template-columns: repeat(8, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-9 {
       grid-template-columns: repeat(9, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-10 {
       grid-template-columns: repeat(10, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-11 {
       grid-template-columns: repeat(11, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-12 {
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
-
     .xl\:bui-columns-auto {
       grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
     }
-
     .xl\:bui-col-span-1 {
       grid-column: span 1 / span 1;
     }
-
     .xl\:bui-col-span-2 {
       grid-column: span 2 / span 2;
     }
-
     .xl\:bui-col-span-3 {
       grid-column: span 3 / span 3;
     }
-
     .xl\:bui-col-span-4 {
       grid-column: span 4 / span 4;
     }
-
     .xl\:bui-col-span-5 {
       grid-column: span 5 / span 5;
     }
-
     .xl\:bui-col-span-6 {
       grid-column: span 6 / span 6;
     }
-
     .xl\:bui-col-span-7 {
       grid-column: span 7 / span 7;
     }
-
     .xl\:bui-col-span-8 {
       grid-column: span 8 / span 8;
     }
-
     .xl\:bui-col-span-9 {
       grid-column: span 9 / span 9;
     }
-
     .xl\:bui-col-span-10 {
       grid-column: span 10 / span 10;
     }
-
     .xl\:bui-col-span-11 {
       grid-column: span 11 / span 11;
     }
-
     .xl\:bui-col-span-12 {
       grid-column: span 12 / span 12;
     }
-
     .xl\:bui-col-span-auto {
       grid-column: span auto / span auto;
     }
-
     .xl\:bui-col-start-1 {
       grid-column-start: 1;
     }
-
     .xl\:bui-col-start-2 {
       grid-column-start: 2;
     }
-
     .xl\:bui-col-start-3 {
       grid-column-start: 3;
     }
-
     .xl\:bui-col-start-4 {
       grid-column-start: 4;
     }
-
     .xl\:bui-col-start-5 {
       grid-column-start: 5;
     }
-
     .xl\:bui-col-start-6 {
       grid-column-start: 6;
     }
-
     .xl\:bui-col-start-7 {
       grid-column-start: 7;
     }
-
     .xl\:bui-col-start-8 {
       grid-column-start: 8;
     }
-
     .xl\:bui-col-start-9 {
       grid-column-start: 9;
     }
-
     .xl\:bui-col-start-10 {
       grid-column-start: 10;
     }
-
     .xl\:bui-col-start-11 {
       grid-column-start: 11;
     }
-
     .xl\:bui-col-start-12 {
       grid-column-start: 12;
     }
-
     .xl\:bui-col-start-13 {
       grid-column-start: 13;
     }
-
     .xl\:bui-col-start-auto {
       grid-column-start: auto;
     }
-
     .xl\:bui-col-end-1 {
       grid-column-end: 1;
     }
-
     .xl\:bui-col-end-2 {
       grid-column-end: 2;
     }
-
     .xl\:bui-col-end-3 {
       grid-column-end: 3;
     }
-
     .xl\:bui-col-end-4 {
       grid-column-end: 4;
     }
-
     .xl\:bui-col-end-5 {
       grid-column-end: 5;
     }
-
     .xl\:bui-col-end-6 {
       grid-column-end: 6;
     }
-
     .xl\:bui-col-end-7 {
       grid-column-end: 7;
     }
-
     .xl\:bui-col-end-8 {
       grid-column-end: 8;
     }
-
     .xl\:bui-col-end-9 {
       grid-column-end: 9;
     }
-
     .xl\:bui-col-end-10 {
       grid-column-end: 10;
     }
-
     .xl\:bui-col-end-11 {
       grid-column-end: 11;
     }
-
     .xl\:bui-col-end-12 {
       grid-column-end: 12;
     }
-
     .xl\:bui-col-end-13 {
       grid-column-end: 13;
     }
-
     .xl\:bui-col-end-auto {
       grid-column-end: auto;
     }
-
     .xl\:bui-row-span-1 {
       grid-row: span 1 / span 1;
     }
-
     .xl\:bui-row-span-2 {
       grid-row: span 2 / span 2;
     }
-
     .xl\:bui-row-span-3 {
       grid-row: span 3 / span 3;
     }
-
     .xl\:bui-row-span-4 {
       grid-row: span 4 / span 4;
     }
-
     .xl\:bui-row-span-5 {
       grid-row: span 5 / span 5;
     }
-
     .xl\:bui-row-span-6 {
       grid-row: span 6 / span 6;
     }
-
     .xl\:bui-row-span-7 {
       grid-row: span 7 / span 7;
     }
-
     .xl\:bui-row-span-8 {
       grid-row: span 8 / span 8;
     }
-
     .xl\:bui-row-span-9 {
       grid-row: span 9 / span 9;
     }
-
     .xl\:bui-row-span-10 {
       grid-row: span 10 / span 10;
     }
-
     .xl\:bui-row-span-11 {
       grid-row: span 11 / span 11;
     }
-
     .xl\:bui-row-span-12 {
       grid-row: span 12 / span 12;
     }
-
     .xl\:bui-row-span-auto {
       grid-row: span auto / span auto;
     }
   }
-
+}
+/* Gap */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-gap {
     gap: var(--gap);
   }
@@ -8640,7 +8933,8 @@
     gap: var(--bui-space-14);
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-gap {
       gap: var(--gap-xs);
     }
@@ -8710,7 +9004,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-gap {
       gap: var(--gap-sm);
     }
@@ -8780,7 +9075,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-gap {
       gap: var(--gap-md);
     }
@@ -8850,7 +9146,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-gap {
       gap: var(--gap-lg);
     }
@@ -8920,7 +9217,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-gap {
       gap: var(--gap-xl);
     }
@@ -8989,7 +9287,24 @@
       gap: var(--bui-space-14);
     }
   }
-
+}
+/* Flex */
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@layer utilities {
   .bui-align-start {
     align-items: start;
   }
@@ -9042,7 +9357,8 @@
     flex-direction: column-reverse;
   }
 
-  @media (width >= 640px) {
+  /* Breakpoint xs */
+  @media (min-width: 640px) {
     .xs\:bui-align-start {
       align-items: start;
     }
@@ -9092,7 +9408,8 @@
     }
   }
 
-  @media (width >= 768px) {
+  /* Breakpoint sm */
+  @media (min-width: 768px) {
     .sm\:bui-align-start {
       align-items: start;
     }
@@ -9142,7 +9459,8 @@
     }
   }
 
-  @media (width >= 1024px) {
+  /* Breakpoint md */
+  @media (min-width: 1024px) {
     .md\:bui-align-start {
       align-items: start;
     }
@@ -9192,7 +9510,8 @@
     }
   }
 
-  @media (width >= 1280px) {
+  /* Breakpoint lg */
+  @media (min-width: 1280px) {
     .lg\:bui-align-start {
       align-items: start;
     }
@@ -9242,7 +9561,8 @@
     }
   }
 
-  @media (width >= 1536px) {
+  /* Breakpoint xl */
+  @media (min-width: 1536px) {
     .xl\:bui-align-start {
       align-items: start;
     }