-
+
);
diff --git a/packages/ui/src/components/Menu/MenuAutocomplete.stories.tsx b/packages/ui/src/components/Menu/MenuAutocomplete.stories.tsx
new file mode 100644
index 0000000000..c0e1aca932
--- /dev/null
+++ b/packages/ui/src/components/Menu/MenuAutocomplete.stories.tsx
@@ -0,0 +1,200 @@
+/*
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+ MenuTrigger,
+ SubmenuTrigger,
+ Menu,
+ MenuAutocomplete,
+ MenuItem,
+} from './index';
+import { Button } from '../..';
+import { useState, useEffect } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+const meta = {
+ title: 'Backstage UI/MenuAutocomplete',
+ component: MenuTrigger,
+ decorators: [
+ Story => (
+
+
+ ),
+ ],
+} satisfies Meta
;
+
+export default meta;
+type Story = StoryObj;
+
+const options = [
+ { label: 'Apple', value: 'apple' },
+ { label: 'Banana', value: 'banana' },
+ { label: 'Blueberry', value: 'blueberry' },
+ { label: 'Cherry', value: 'cherry' },
+ { label: 'Durian', value: 'durian' },
+ { label: 'Elderberry', value: 'elderberry' },
+ { label: 'Fig', value: 'fig' },
+ { label: 'Grape', value: 'grape' },
+ { label: 'Honeydew', value: 'honeydew' },
+];
+
+export const Default: Story = {
+ args: {
+ children: null,
+ },
+ render: () => (
+
+ Menu
+
+ Create new file...
+ Create new folder...
+ Assign to...
+ Assign to me
+ Change status...
+ Change priority...
+ Add label...
+ Remove label...
+
+
+ ),
+};
+
+export const PreviewAutocompleteMenu: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => (
+
+ Menu
+
+ Create new file...
+ Create new folder...
+ Assign to...
+ Assign to me
+ Change status...
+ Change priority...
+ Add label...
+ Remove label...
+
+
+ ),
+};
+
+export const Virtualized: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [pokemon, setPokemon] = useState<
+ Array<{ name: string; url: string }>
+ >([]);
+
+ useEffect(() => {
+ fetch('https://pokeapi.co/api/v2/pokemon?limit=1000')
+ .then(response => response.json())
+ .then(data => {
+ setPokemon(data.results);
+ })
+ .catch(error => {
+ console.error('Error fetching Pokemon:', error);
+ });
+ }, []);
+
+ return (
+
+ Menu
+
+ {pokemon.map((p, index) => (
+
+ {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)}
+
+ ))}
+
+
+ );
+ },
+};
+
+export const VirtualizedMaxHeight: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [pokemon, setPokemon] = useState<
+ Array<{ name: string; url: string }>
+ >([]);
+
+ useEffect(() => {
+ fetch('https://pokeapi.co/api/v2/pokemon?limit=1000')
+ .then(response => response.json())
+ .then(data => {
+ setPokemon(data.results);
+ })
+ .catch(error => {
+ console.error('Error fetching Pokemon:', error);
+ });
+ }, []);
+
+ return (
+
+ Menu
+
+ {pokemon.map((p, index) => (
+
+ {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)}
+
+ ))}
+
+
+ );
+ },
+};
+
+export const Submenu: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => (
+
+ Menu
+
+ Edit
+ Duplicate
+
+ Submenu
+
+ {options.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+ ),
+};
diff --git a/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx b/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx
new file mode 100644
index 0000000000..bf66f5f8fd
--- /dev/null
+++ b/packages/ui/src/components/Menu/MenuAutocompleteListBox.stories.tsx
@@ -0,0 +1,264 @@
+/*
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+ MenuTrigger,
+ MenuAutocompleteListbox,
+ MenuListBoxItem,
+ Menu,
+ MenuItem,
+ SubmenuTrigger,
+} from './index';
+import { Button, Flex, Text } from '../..';
+import { useEffect, useState } from 'react';
+import { Selection } from 'react-aria-components';
+import { MemoryRouter } from 'react-router-dom';
+
+const meta = {
+ title: 'Backstage UI/MenuAutocompleteListBox',
+ component: MenuTrigger,
+ decorators: [
+ Story => (
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const options = [
+ { label: 'Apple', value: 'apple' },
+ { label: 'Banana', value: 'banana' },
+ { label: 'Blueberry', value: 'blueberry' },
+ { label: 'Cherry', value: 'cherry' },
+ { label: 'Durian', value: 'durian' },
+ { label: 'Elderberry', value: 'elderberry' },
+ { label: 'Fig', value: 'fig' },
+ { label: 'Grape', value: 'grape' },
+ { label: 'Honeydew', value: 'honeydew' },
+];
+
+export const Default: Story = {
+ args: {
+ children: null,
+ },
+ render: () => {
+ const [selected, setSelected] = useState(
+ new Set([options[2].value]),
+ );
+
+ return (
+
+ Selected: {Array.from(selected).join(', ')}
+
+ Menu
+
+ {options.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+
+ );
+ },
+};
+
+export const PreviewListbox: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [selected, setSelected] = useState(
+ new Set([options[2].value]),
+ );
+
+ return (
+
+ Selected: {Array.from(selected).join(', ')}
+
+ Menu
+
+ {options.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+
+ );
+ },
+};
+
+export const PreviewListboxMultiple: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [selected, setSelected] = useState(
+ new Set([options[2].value, options[3].value]),
+ );
+
+ return (
+
+ Selected: {Array.from(selected).join(', ')}
+
+ Menu
+
+ {options.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+
+ );
+ },
+};
+
+export const Submenu: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [selected, setSelected] = useState(
+ new Set([options[2].value]),
+ );
+
+ return (
+
+ Selected: {Array.from(selected).join(', ')}
+
+ Menu
+
+ Edit
+ Duplicate
+
+ Submenu
+
+ {options.map(option => (
+
+ {option.label}
+
+ ))}
+
+
+
+
+
+ );
+ },
+};
+
+export const Virtualized: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [pokemon, setPokemon] = useState<
+ Array<{ name: string; url: string }>
+ >([]);
+
+ useEffect(() => {
+ fetch('https://pokeapi.co/api/v2/pokemon?limit=1000')
+ .then(response => response.json())
+ .then(data => {
+ setPokemon(data.results);
+ })
+ .catch(error => {
+ console.error('Error fetching Pokemon:', error);
+ });
+ }, []);
+
+ return (
+
+ Menu
+
+ {pokemon.map((p, index) => (
+
+ {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)}
+
+ ))}
+
+
+ );
+ },
+};
+
+export const VirtualizedMaxHeight: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [pokemon, setPokemon] = useState<
+ Array<{ name: string; url: string }>
+ >([]);
+
+ useEffect(() => {
+ fetch('https://pokeapi.co/api/v2/pokemon?limit=1000')
+ .then(response => response.json())
+ .then(data => {
+ setPokemon(data.results);
+ })
+ .catch(error => {
+ console.error('Error fetching Pokemon:', error);
+ });
+ }, []);
+
+ return (
+
+ Menu
+
+ {pokemon.map((p, index) => (
+
+ {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)}
+
+ ))}
+
+
+ );
+ },
+};
diff --git a/packages/ui/src/components/Menu/MenuListBox.stories.tsx b/packages/ui/src/components/Menu/MenuListBox.stories.tsx
new file mode 100644
index 0000000000..72284fb6b9
--- /dev/null
+++ b/packages/ui/src/components/Menu/MenuListBox.stories.tsx
@@ -0,0 +1,159 @@
+/*
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { MenuTrigger, MenuListBox, MenuListBoxItem } from './index';
+import { Button, Flex, Text } from '../..';
+import { useEffect, useState } from 'react';
+import { Selection } from 'react-aria-components';
+import { MemoryRouter } from 'react-router-dom';
+
+const meta = {
+ title: 'Backstage UI/MenuListBox',
+ component: MenuTrigger,
+ decorators: [
+ Story => (
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ children: null,
+ },
+ render: () => (
+
+ Menu
+
+ Item 1
+ Item 2
+ Item 3
+
+
+ ),
+};
+
+export const Controlled: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [selected, setSelected] = useState(new Set(['paul']));
+
+ return (
+
+ Selected: {Array.from(selected).join(', ')}
+
+ Menu
+
+
+ John Lennon
+
+
+ Paul McCartney
+
+
+ George Harrison
+
+
+ Ringo Starr
+
+
+
+
+ );
+ },
+};
+
+export const Virtualized: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [pokemon, setPokemon] = useState<
+ Array<{ name: string; url: string }>
+ >([]);
+
+ useEffect(() => {
+ fetch('https://pokeapi.co/api/v2/pokemon?limit=1000')
+ .then(response => response.json())
+ .then(data => {
+ setPokemon(data.results);
+ })
+ .catch(error => {
+ console.error('Error fetching Pokemon:', error);
+ });
+ }, []);
+
+ return (
+
+ Menu
+
+ {pokemon.map((p, index) => (
+
+ {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)}
+
+ ))}
+
+
+ );
+ },
+};
+
+export const VirtualizedMaxHeight: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: () => {
+ const [pokemon, setPokemon] = useState<
+ Array<{ name: string; url: string }>
+ >([]);
+
+ useEffect(() => {
+ fetch('https://pokeapi.co/api/v2/pokemon?limit=1000')
+ .then(response => response.json())
+ .then(data => {
+ setPokemon(data.results);
+ })
+ .catch(error => {
+ console.error('Error fetching Pokemon:', error);
+ });
+ }, []);
+
+ return (
+
+ Menu
+
+ {pokemon.map((p, index) => (
+
+ {p.name.charAt(0).toLocaleUpperCase('en-US') + p.name.slice(1)}
+
+ ))}
+
+
+ );
+ },
+};
diff --git a/packages/ui/src/components/Menu/types.ts b/packages/ui/src/components/Menu/types.ts
index 683d0055b7..6d4852a4b3 100644
--- a/packages/ui/src/components/Menu/types.ts
+++ b/packages/ui/src/components/Menu/types.ts
@@ -37,6 +37,9 @@ export interface MenuProps
extends RAMenuProps,
Omit, 'children'> {
placement?: RAPopoverProps['placement'];
+ virtualized?: boolean;
+ maxWidth?: string;
+ maxHeight?: string;
}
/** @public */
@@ -44,6 +47,9 @@ export interface MenuListBoxProps
extends RAListBoxProps,
Omit, 'children'> {
placement?: RAPopoverProps['placement'];
+ virtualized?: boolean;
+ maxWidth?: string;
+ maxHeight?: string;
}
/** @public */
@@ -52,6 +58,9 @@ export interface MenuAutocompleteProps
Omit, 'children'> {
placeholder?: string;
placement?: RAPopoverProps['placement'];
+ virtualized?: boolean;
+ maxWidth?: string;
+ maxHeight?: string;
}
/** @public */
@@ -60,6 +69,9 @@ export interface MenuAutocompleteListBoxProps
Omit, 'children'> {
placeholder?: string;
placement?: RAPopoverProps['placement'];
+ virtualized?: boolean;
+ maxWidth?: string;
+ maxHeight?: string;
}
/** @public */
diff --git a/packages/ui/src/components/PasswordField/PasswordField.stories.tsx b/packages/ui/src/components/PasswordField/PasswordField.stories.tsx
new file mode 100644
index 0000000000..b89f891430
--- /dev/null
+++ b/packages/ui/src/components/PasswordField/PasswordField.stories.tsx
@@ -0,0 +1,148 @@
+/*
+ * 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.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PasswordField } from './PasswordField';
+import { Form } from 'react-aria-components';
+import { Icon } from '../Icon';
+import { Flex } from '../Flex';
+import { FieldLabel } from '../FieldLabel';
+
+const meta = {
+ title: 'Backstage UI/PasswordField',
+ component: PasswordField,
+ argTypes: {
+ isRequired: {
+ control: 'boolean',
+ },
+ icon: {
+ control: 'object',
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ name: 'secret',
+ placeholder: 'Enter a secret',
+ style: {
+ maxWidth: '300px',
+ },
+ },
+};
+
+export const Sizes: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: args => (
+
+
+ ),
+};
+
+export const DefaultValue: Story = {
+ args: {
+ ...Default.args,
+ defaultValue: 'https://example.com',
+ },
+};
+
+export const WithLabel: Story = {
+ args: {
+ ...Default.args,
+ label: 'Label',
+ },
+};
+
+export const WithDescription: Story = {
+ args: {
+ ...WithLabel.args,
+ description: 'Description',
+ },
+};
+
+export const Required: Story = {
+ args: {
+ ...WithLabel.args,
+ isRequired: true,
+ },
+};
+
+export const Disabled: Story = {
+ args: {
+ ...Default.args,
+ isDisabled: true,
+ },
+};
+
+export const WithIcon: Story = {
+ args: {
+ ...Default.args,
+ },
+ render: args => (
+ (
+ (props, ref) => {
+ const {
+ className,
+ icon,
+ size = 'small',
+ label,
+ secondaryLabel,
+ description,
+ isRequired,
+ 'aria-label': ariaLabel,
+ 'aria-labelledby': ariaLabelledBy,
+ placeholder,
+ ...rest
+ } = props;
+
+ useEffect(() => {
+ if (!label && !ariaLabel && !ariaLabelledBy) {
+ console.warn(
+ 'PasswordField requires either a visible label, aria-label, or aria-labelledby for accessibility',
+ );
+ }
+ }, [label, ariaLabel, ariaLabelledBy]);
+
+ const { classNames: passwordFieldClassNames, dataAttributes } = useStyles(
+ 'PasswordField',
+ {
+ size,
+ },
+ );
+
+ const { classNames: textFieldClassNames } = useStyles('TextField', {});
+
+ // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.
+ const secondaryLabelText =
+ secondaryLabel || (isRequired ? 'Required' : null);
+
+ // Manage secret visibility toggle
+ const [isVisible, setIsVisible] = useState(false);
+
+ return (
+
+
+ {icon && (
+
+ {icon}
+
+ )}
+
+ setIsVisible(v => !v)}
+ className={passwordFieldClassNames.inputVisibility}
+ >
+ {isVisible ?
+
+
+
+ );
+ },
+);
+
+PasswordField.displayName = 'PasswordField';
diff --git a/packages/ui/src/components/PasswordField/index.ts b/packages/ui/src/components/PasswordField/index.ts
new file mode 100644
index 0000000000..df7874e1c2
--- /dev/null
+++ b/packages/ui/src/components/PasswordField/index.ts
@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+export * from './PasswordField';
+export * from './types';
diff --git a/packages/ui/src/components/PasswordField/types.ts b/packages/ui/src/components/PasswordField/types.ts
new file mode 100644
index 0000000000..8af9a6134c
--- /dev/null
+++ b/packages/ui/src/components/PasswordField/types.ts
@@ -0,0 +1,41 @@
+/*
+ * 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.
+ */
+
+import type { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
+import { ReactNode } from 'react';
+import type { Breakpoint } from '../../types';
+import type { FieldLabelProps } from '../FieldLabel/types';
+
+/** @public */
+export interface PasswordFieldProps
+ extends AriaTextFieldProps,
+ Omit {
+ /**
+ * An icon to render before the input
+ */
+ icon?: ReactNode;
+
+ /**
+ * The size of the password field
+ * @defaultValue 'medium'
+ */
+ size?: 'small' | 'medium' | Partial>;
+
+ /**
+ * Text to display in the input when it has no value
+ */
+ placeholder?: string;
+}
diff --git a/packages/ui/src/components/Popover/Popover.styles.css b/packages/ui/src/components/Popover/Popover.styles.css
index 23ae5c1019..3f1cf66440 100644
--- a/packages/ui/src/components/Popover/Popover.styles.css
+++ b/packages/ui/src/components/Popover/Popover.styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,12 +14,14 @@
* limitations under the License.
*/
-.bui-Popover {
- margin-right: 12px;
- overflow: scroll;
- background-color: var(--bui-bg-surface-1);
- border: 1px solid var(--bui-border);
- border-radius: var(--bui-radius-3);
- padding-block: var(--bui-space-1);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+@layer components {
+ .bui-Popover {
+ margin-right: 12px;
+ overflow: scroll;
+ background-color: var(--bui-bg-surface-1);
+ border: 1px solid var(--bui-border);
+ border-radius: var(--bui-radius-3);
+ padding-block: var(--bui-space-1);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ }
}
diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.styles.css b/packages/ui/src/components/RadioGroup/RadioGroup.styles.css
index f12d5571e0..400a5216f4 100644
--- a/packages/ui/src/components/RadioGroup/RadioGroup.styles.css
+++ b/packages/ui/src/components/RadioGroup/RadioGroup.styles.css
@@ -1,95 +1,113 @@
-.bui-RadioGroup {
- display: flex;
- flex-direction: column;
- color: var(--bui-fg-primary);
-}
+/*
+ * 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.
+ */
-.bui-RadioGroup[data-orientation='horizontal'] .bui-RadioGroupContent {
- flex-direction: row;
- gap: var(--bui-space-4);
-}
-
-.bui-RadioGroupContent {
- display: flex;
- flex-direction: column;
- gap: var(--bui-space-2);
-}
-
-.bui-Radio {
- display: flex;
- /* This is needed so the HiddenInput is positioned correctly */
- position: relative;
- align-items: center;
- gap: var(--bui-space-2);
- font-size: var(--bui-font-size-2);
- color: var(--bui-fg-primary);
- forced-color-adjust: none;
-
- &:before {
- content: '';
- display: block;
- width: 1rem;
- height: 1rem;
- box-sizing: border-box;
- border: 0.125rem solid var(--bui-border);
- background: var(--bui-gray-1);
- border-radius: var(--bui-radius-full);
- transition: all 200ms;
+@layer components {
+ .bui-RadioGroup {
+ display: flex;
+ flex-direction: column;
+ color: var(--bui-fg-primary);
}
- &[data-pressed]:before {
- border-color: var(--bui-border);
+ .bui-RadioGroup[data-orientation='horizontal'] .bui-RadioGroupContent {
+ flex-direction: row;
+ gap: var(--bui-space-4);
}
- &[data-selected] {
+ .bui-RadioGroupContent {
+ display: flex;
+ flex-direction: column;
+ gap: var(--bui-space-2);
+ }
+
+ .bui-Radio {
+ display: flex;
+ /* This is needed so the HiddenInput is positioned correctly */
+ position: relative;
+ align-items: center;
+ gap: var(--bui-space-2);
+ font-size: var(--bui-font-size-2);
+ color: var(--bui-fg-primary);
+ forced-color-adjust: none;
+
&:before {
- border-color: var(--bui-bg-solid);
- border-width: 0.25rem;
+ content: '';
+ display: block;
+ width: 1rem;
+ height: 1rem;
+ box-sizing: border-box;
+ border: 0.125rem solid var(--bui-border);
+ background: var(--bui-gray-1);
+ border-radius: var(--bui-radius-full);
+ transition: all 200ms;
}
&[data-pressed]:before {
- border-color: var(--bui-bg-solid);
- }
- }
-
- &[data-focus-visible]:before {
- outline: 2px solid var(--bui-ring);
- outline-offset: 2px;
- }
-
- &[data-disabled] {
- cursor: not-allowed;
- color: var(--bui-fg-disabled);
-
- &:before {
- border-color: var(--bui-border-disabled);
- background: var(--bui-bg-disabled);
+ border-color: var(--bui-border);
}
- &[data-selected]:before {
- border-color: var(--bui-border-disabled);
- }
- }
+ &[data-selected] {
+ &:before {
+ border-color: var(--bui-bg-solid);
+ border-width: 0.25rem;
+ }
- &[data-invalid]:before {
- border-color: var(--bui-border-danger);
- }
-
- &[data-invalid][data-selected]:before {
- border-color: var(--bui-border-danger);
- }
-
- /* Ensure disabled state prevails over invalid state */
- &[data-disabled][data-invalid] {
- color: var(--bui-fg-disabled);
-
- &:before {
- border-color: var(--bui-border-disabled);
- background: var(--bui-bg-disabled);
+ &[data-pressed]:before {
+ border-color: var(--bui-bg-solid);
+ }
}
- &[data-selected]:before {
- border-color: var(--bui-border-disabled);
+ &[data-focus-visible]:before {
+ outline: 2px solid var(--bui-ring);
+ outline-offset: 2px;
+ }
+
+ &[data-disabled] {
+ cursor: not-allowed;
+ color: var(--bui-fg-disabled);
+
+ &:before {
+ border-color: var(--bui-border-disabled);
+ background: var(--bui-bg-disabled);
+ }
+
+ &[data-selected]:before {
+ border-color: var(--bui-border-disabled);
+ }
+ }
+
+ &[data-invalid]:before {
+ border-color: var(--bui-border-danger);
+ }
+
+ &[data-invalid][data-selected]:before {
+ border-color: var(--bui-border-danger);
+ }
+
+ /* Ensure disabled state prevails over invalid state */
+ &[data-disabled][data-invalid] {
+ color: var(--bui-fg-disabled);
+
+ &:before {
+ border-color: var(--bui-border-disabled);
+ background: var(--bui-bg-disabled);
+ }
+
+ &[data-selected]:before {
+ border-color: var(--bui-border-disabled);
+ }
}
}
}
diff --git a/packages/ui/src/components/ScrollArea/ScrollArea.styles.css b/packages/ui/src/components/ScrollArea/ScrollArea.styles.css
index 209168c329..4e2fea06a6 100644
--- a/packages/ui/src/components/ScrollArea/ScrollArea.styles.css
+++ b/packages/ui/src/components/ScrollArea/ScrollArea.styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,52 +14,54 @@
* limitations under the License.
*/
-.bui-ScrollAreaRoot {
- box-sizing: border-box;
- width: 100%;
-}
-
-.bui-ScrollAreaViewport {
- height: 100%;
- overscroll-behavior: contain;
-}
-
-.bui-ScrollAreaContent {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- padding-block: 0.75rem;
- padding-left: 1rem;
- padding-right: 1.5rem;
-}
-
-.bui-ScrollAreaScrollbar {
- display: flex;
- justify-content: center;
- background-color: var(--bui-scrollbar);
- width: 0.25rem;
- border-radius: 0.375rem;
- margin: 0.5rem;
- opacity: 0;
- transition: opacity 150ms 300ms;
-
- &[data-hovering],
- &[data-scrolling] {
- opacity: 1;
- transition-duration: 75ms;
- transition-delay: 0ms;
+@layer components {
+ .bui-ScrollAreaRoot {
+ box-sizing: border-box;
+ width: 100%;
}
- &::before {
- content: '';
- position: absolute;
- width: 1.25rem;
+ .bui-ScrollAreaViewport {
height: 100%;
+ overscroll-behavior: contain;
+ }
+
+ .bui-ScrollAreaContent {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding-block: 0.75rem;
+ padding-left: 1rem;
+ padding-right: 1.5rem;
+ }
+
+ .bui-ScrollAreaScrollbar {
+ display: flex;
+ justify-content: center;
+ background-color: var(--bui-scrollbar);
+ width: 0.25rem;
+ border-radius: 0.375rem;
+ margin: 0.5rem;
+ opacity: 0;
+ transition: opacity 150ms 300ms;
+
+ &[data-hovering],
+ &[data-scrolling] {
+ opacity: 1;
+ transition-duration: 75ms;
+ transition-delay: 0ms;
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ width: 1.25rem;
+ height: 100%;
+ }
+ }
+
+ .bui-ScrollAreaThumb {
+ width: 100%;
+ border-radius: inherit;
+ background-color: var(--bui-scrollbar-thumb);
}
}
-
-.bui-ScrollAreaThumb {
- width: 100%;
- border-radius: inherit;
- background-color: var(--bui-scrollbar-thumb);
-}
diff --git a/packages/ui/src/components/SearchField/SearchField.styles.css b/packages/ui/src/components/SearchField/SearchField.styles.css
index a13c455b44..996ee1eb07 100644
--- a/packages/ui/src/components/SearchField/SearchField.styles.css
+++ b/packages/ui/src/components/SearchField/SearchField.styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,125 +14,127 @@
* limitations under the License.
*/
-.bui-SearchField {
- flex: 1;
- flex-shrink: 0;
+@layer components {
+ .bui-SearchField {
+ flex: 1;
+ flex-shrink: 0;
- &[data-empty] {
- .bui-InputClear {
- display: none;
+ &[data-empty] {
+ .bui-InputClear {
+ display: none;
+ }
+ }
+
+ &[data-start-collapsed='true'] {
+ transition: flex-basis 0.3s ease-in-out;
+ padding: 0;
+ flex: 0 1 auto;
+
+ &[data-collapsed='true'] {
+ flex-basis: 200px;
+ }
+
+ &[data-collapsed='false'] {
+ cursor: pointer;
+
+ &[data-size='medium'] {
+ flex-basis: 2.5rem;
+ height: 2.5rem;
+ }
+
+ &[data-size='small'] {
+ flex-basis: 2rem;
+ height: 2rem;
+ }
+
+ &[data-size='medium'] .bui-Input {
+ &::placeholder {
+ opacity: 0;
+ }
+ }
+
+ &[data-size='small'] .bui-Input {
+ &::placeholder {
+ opacity: 0;
+ }
+ }
+
+ .bui-InputWrapper {
+ .bui-Input[data-icon] {
+ padding-right: 0px;
+ }
+ }
+ }
}
}
- &[data-start-collapsed='true'] {
- transition: flex-basis 0.3s ease-in-out;
+ .bui-SearchField .bui-Input {
+ transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,
+ outline-color 0.2s ease-in-out;
+
+ &[data-hovered] {
+ border-color: var(--bui-border-hover);
+ }
+
+ &[data-focused] {
+ border-color: var(--bui-border-pressed);
+ outline-width: 0px;
+ }
+ }
+
+ .bui-SearchField .bui-InputWrapper {
+ .bui-Input[data-icon] {
+ padding-right: var(--bui-space-6);
+ }
+ }
+
+ .bui-SearchField .bui-InputIcon {
+ left: 0;
+ display: flex;
+ justify-content: center;
+
+ &[data-size='small'] {
+ width: var(--bui-space-8);
+ }
+
+ &[data-size='medium'] {
+ width: var(--bui-space-10);
+ }
+ }
+
+ .bui-InputClear {
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: transparent;
+ border: none;
padding: 0;
- flex: 0 1 auto;
-
- &[data-collapsed='true'] {
- flex-basis: 200px;
- }
-
- &[data-collapsed='false'] {
- cursor: pointer;
-
- &[data-size='medium'] {
- flex-basis: 2.5rem;
- height: 2.5rem;
- }
-
- &[data-size='small'] {
- flex-basis: 2rem;
- height: 2rem;
- }
-
- &[data-size='medium'] .bui-Input {
- &::placeholder {
- opacity: 0;
- }
- }
-
- &[data-size='small'] .bui-Input {
- &::placeholder {
- opacity: 0;
- }
- }
-
- .bui-InputWrapper {
- .bui-Input[data-icon] {
- padding-right: 0px;
- }
- }
- }
- }
-}
-
-.bui-SearchField .bui-Input {
- transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,
- outline-color 0.2s ease-in-out;
-
- &[data-hovered] {
- border-color: var(--bui-border-hover);
+ margin: 0;
+ cursor: pointer;
+ color: var(--bui-fg-secondary);
+ transition: color 0.2s ease-in-out;
}
- &[data-focused] {
- border-color: var(--bui-border-pressed);
- outline-width: 0px;
- }
-}
-
-.bui-SearchField .bui-InputWrapper {
- .bui-Input[data-icon] {
- padding-right: var(--bui-space-6);
- }
-}
-
-.bui-SearchField .bui-InputIcon {
- left: 0;
- display: flex;
- justify-content: center;
-
- &[data-size='small'] {
- width: var(--bui-space-8);
+ .bui-InputClear:hover {
+ color: var(--bui-fg-primary);
}
- &[data-size='medium'] {
- width: var(--bui-space-10);
+ .bui-InputClear[data-size='small'] {
+ width: 2rem;
+ height: 2rem;
+ }
+
+ .bui-InputClear[data-size='medium'] {
+ width: 2.5rem;
+ height: 2.5rem;
+ }
+
+ .bui-InputClear svg {
+ width: 1rem;
+ height: 1rem;
}
}
-
-.bui-InputClear {
- position: absolute;
- right: 0;
- top: 0;
- bottom: 0;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: transparent;
- border: none;
- padding: 0;
- margin: 0;
- cursor: pointer;
- color: var(--bui-fg-secondary);
- transition: color 0.2s ease-in-out;
-}
-
-.bui-InputClear:hover {
- color: var(--bui-fg-primary);
-}
-
-.bui-InputClear[data-size='small'] {
- width: 2rem;
- height: 2rem;
-}
-
-.bui-InputClear[data-size='medium'] {
- width: 2.5rem;
- height: 2.5rem;
-}
-
-.bui-InputClear svg {
- width: 1rem;
- height: 1rem;
-}
diff --git a/packages/ui/src/components/Select/Select.styles.css b/packages/ui/src/components/Select/Select.styles.css
index 2cbadfda32..a8dbe759dc 100644
--- a/packages/ui/src/components/Select/Select.styles.css
+++ b/packages/ui/src/components/Select/Select.styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,163 +14,165 @@
* limitations under the License.
*/
-.bui-Select[data-invalid] {
- & .bui-SelectTrigger {
- border-color: var(--bui-fg-danger);
- }
-}
-
-.bui-SelectTrigger {
- box-sizing: border-box;
- border-radius: var(--bui-radius-3);
- border: 1px solid var(--bui-border);
- background-color: var(--bui-bg-surface-1);
- display: flex;
- justify-content: space-between;
- align-items: center;
- cursor: pointer;
- gap: var(--bui-space-2);
- width: 100%;
-
- & svg {
- flex-shrink: 0;
- color: var(--bui-fg-secondary);
+@layer components {
+ .bui-Select[data-invalid] {
+ & .bui-SelectTrigger {
+ border-color: var(--bui-fg-danger);
+ }
}
- &[data-size='small'] {
- height: 2rem;
- padding-inline: var(--bui-space-3);
+ .bui-SelectTrigger {
+ box-sizing: border-box;
+ border-radius: var(--bui-radius-3);
+ border: 1px solid var(--bui-border);
+ background-color: var(--bui-bg-surface-1);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ gap: var(--bui-space-2);
+ width: 100%;
+
+ & svg {
+ flex-shrink: 0;
+ color: var(--bui-fg-secondary);
+ }
+
+ &[data-size='small'] {
+ height: 2rem;
+ padding-inline: var(--bui-space-3);
+ }
+
+ &[data-size='medium'] {
+ height: 3rem;
+ padding-inline: var(--bui-space-4);
+ }
+
+ &[data-size='small'] svg {
+ width: 1rem;
+ height: 1rem;
+ }
+
+ &[data-size='medium'] svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+
+ &::placeholder {
+ color: var(--bui-fg-secondary);
+ }
+
+ &:hover {
+ transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
+ border-color: var(--bui-border-hover);
+ }
+
+ &:focus-visible {
+ border-color: var(--bui-border-pressed);
+ outline: 0;
+ }
+
+ &[data-invalid] {
+ border-color: var(--bui-fg-danger);
+ }
+ &[data-invalid]:hover {
+ border-width: 2px;
+ }
+
+ &[data-invalid]:focus-visible {
+ border-width: 2px;
+ }
+
+ &[disabled] {
+ cursor: not-allowed;
+ border-color: var(--bui-border-disabled);
+ color: var(--bui-fg-disabled);
+ }
+
+ &[disabled] .bui-SelectValue {
+ color: var(--bui-fg-disabled);
+ }
+
+ &[data-popup-open] .bui-SelectIcon {
+ transform: rotate(180deg);
+ }
}
- &[data-size='medium'] {
- height: 3rem;
- padding-inline: var(--bui-space-4);
- }
-
- &[data-size='small'] svg {
- width: 1rem;
- height: 1rem;
- }
-
- &[data-size='medium'] svg {
- width: 1.25rem;
- height: 1.25rem;
- }
-
- &::placeholder {
- color: var(--bui-fg-secondary);
- }
-
- &:hover {
- transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
- border-color: var(--bui-border-hover);
- }
-
- &:focus-visible {
- border-color: var(--bui-border-pressed);
- outline: 0;
- }
-
- &[data-invalid] {
- border-color: var(--bui-fg-danger);
- }
- &[data-invalid]:hover {
- border-width: 2px;
- }
-
- &[data-invalid]:focus-visible {
- border-width: 2px;
- }
-
- &[disabled] {
- cursor: not-allowed;
- border-color: var(--bui-border-disabled);
- color: var(--bui-fg-disabled);
- }
-
- &[disabled] .bui-SelectValue {
- color: var(--bui-fg-disabled);
- }
-
- &[data-popup-open] .bui-SelectIcon {
- transform: rotate(180deg);
- }
-}
-
-.bui-SelectValue {
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- width: 100%;
- font-size: var(--bui-font-size-3);
- font-family: var(--bui-font-regular);
- font-weight: var(--bui-font-weight-regular);
- color: var(--bui-fg-primary);
- text-align: left;
-
- & .bui-SelectItemIndicator {
- display: none;
- }
-
- &[disabled] {
- color: var(--bui-fg-disabled);
- }
-}
-
-.bui-SelectItem {
- position: relative;
- width: var(--anchor-width);
- display: grid;
- grid-template-areas: 'icon text';
- grid-template-columns: 1rem 1fr;
- align-items: center;
- padding-block: var(--bui-space-2);
- padding-left: var(--bui-space-3);
- padding-right: var(--bui-space-4);
- color: var(--bui-fg-primary);
- border-radius: var(--bui-radius-3);
- cursor: pointer;
- user-select: none;
- font-size: var(--bui-font-size-3);
- gap: var(--bui-space-1);
- outline: none;
-
- &[data-focused] {
- z-index: 0;
- position: relative;
+ .bui-SelectValue {
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ width: 100%;
+ font-size: var(--bui-font-size-3);
+ font-family: var(--bui-font-regular);
+ font-weight: var(--bui-font-weight-regular);
color: var(--bui-fg-primary);
+ text-align: left;
+
+ & .bui-SelectItemIndicator {
+ display: none;
+ }
+
+ &[disabled] {
+ color: var(--bui-fg-disabled);
+ }
}
- &[data-focused]::before {
- content: '';
- z-index: -1;
- position: absolute;
- inset-block: 0;
- inset-inline: 0.25rem;
- border-radius: 0.25rem;
- background-color: var(--bui-bg-tint-hover);
+ .bui-SelectItem {
+ position: relative;
+ width: var(--anchor-width);
+ display: grid;
+ grid-template-areas: 'icon text';
+ grid-template-columns: 1rem 1fr;
+ align-items: center;
+ padding-block: var(--bui-space-2);
+ padding-left: var(--bui-space-3);
+ padding-right: var(--bui-space-4);
+ color: var(--bui-fg-primary);
+ border-radius: var(--bui-radius-3);
+ cursor: pointer;
+ user-select: none;
+ font-size: var(--bui-font-size-3);
+ gap: var(--bui-space-1);
+ outline: none;
+
+ &[data-focused] {
+ z-index: 0;
+ position: relative;
+ color: var(--bui-fg-primary);
+ }
+
+ &[data-focused]::before {
+ content: '';
+ z-index: -1;
+ position: absolute;
+ inset-block: 0;
+ inset-inline: 0.25rem;
+ border-radius: 0.25rem;
+ background-color: var(--bui-bg-tint-hover);
+ }
+
+ &[data-disabled] {
+ cursor: not-allowed;
+ color: var(--bui-fg-disabled);
+ }
+
+ &[data-selected] .bui-SelectItemIndicator {
+ opacity: 1;
+ }
}
- &[data-disabled] {
- cursor: not-allowed;
- color: var(--bui-fg-disabled);
+ .bui-SelectItemIndicator {
+ grid-area: icon;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: opacity 0.2s ease-in-out;
}
- &[data-selected] .bui-SelectItemIndicator {
- opacity: 1;
+ .bui-SelectItemLabel {
+ flex: 1;
+ grid-area: text;
}
}
-
-.bui-SelectItemIndicator {
- grid-area: icon;
- display: flex;
- align-items: center;
- justify-content: center;
- opacity: 0;
- transition: opacity 0.2s ease-in-out;
-}
-
-.bui-SelectItemLabel {
- flex: 1;
- grid-area: text;
-}
diff --git a/packages/ui/src/components/Skeleton/Skeleton.styles.css b/packages/ui/src/components/Skeleton/Skeleton.styles.css
index bbbb6deaeb..cbf297d24d 100644
--- a/packages/ui/src/components/Skeleton/Skeleton.styles.css
+++ b/packages/ui/src/components/Skeleton/Skeleton.styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,12 +14,14 @@
* limitations under the License.
*/
-.bui-Skeleton {
- animation: var(--bui-animate-pulse);
- background-color: var(--bui-bg-surface-2);
- border-radius: var(--bui-radius-2);
-}
+@layer components {
+ .bui-Skeleton {
+ animation: var(--bui-animate-pulse);
+ background-color: var(--bui-bg-surface-2);
+ border-radius: var(--bui-radius-2);
+ }
-.bui-Skeleton[data-rounded='true'] {
- border-radius: var(--bui-radius-full);
+ .bui-Skeleton[data-rounded='true'] {
+ border-radius: var(--bui-radius-full);
+ }
}
diff --git a/packages/ui/src/components/Switch/Switch.styles.css b/packages/ui/src/components/Switch/Switch.styles.css
index ee2a24d013..58735e2b78 100644
--- a/packages/ui/src/components/Switch/Switch.styles.css
+++ b/packages/ui/src/components/Switch/Switch.styles.css
@@ -14,61 +14,63 @@
* limitations under the License.
*/
-.bui-Switch {
- display: flex;
- /* This is needed so the HiddenInput is positioned correctly */
- position: relative;
- align-items: center;
- gap: var(--bui-space-3);
- font-size: var(--bui-font-size-3);
- color: var(--bui-fg-primary);
- cursor: pointer;
-
- &[data-pressed] .bui-SwitchIndicator {
- &:before {
- background: var(--bui-fg-solid);
- }
- }
-
- &[data-selected] {
- .bui-SwitchIndicator {
- background: var(--bui-bg-solid);
+@layer components {
+ .bui-Switch {
+ display: flex;
+ /* This is needed so the HiddenInput is positioned correctly */
+ position: relative;
+ align-items: center;
+ gap: var(--bui-space-3);
+ font-size: var(--bui-font-size-3);
+ color: var(--bui-fg-primary);
+ cursor: pointer;
+ &[data-pressed] .bui-SwitchIndicator {
&:before {
background: var(--bui-fg-solid);
- transform: translateX(100%);
}
}
- &[data-pressed] {
- .indicator {
- background: var(--bui-gray-3);
+ &[data-selected] {
+ .bui-SwitchIndicator {
+ background: var(--bui-bg-solid);
+
+ &:before {
+ background: var(--bui-fg-solid);
+ transform: translateX(100%);
+ }
}
+
+ &[data-pressed] {
+ .indicator {
+ background: var(--bui-gray-3);
+ }
+ }
+ }
+
+ &[data-focus-visible] .bui-SwitchIndicator {
+ outline: 2px solid;
+ outline-offset: 2px;
}
}
- &[data-focus-visible] .bui-SwitchIndicator {
- outline: 2px solid;
- outline-offset: 2px;
- }
-}
-
-.bui-SwitchIndicator {
- width: 2rem;
- height: 1.143rem;
- border: 2px;
- background: var(--bui-gray-3);
- border-radius: 1.143rem;
- transition: all 200ms;
-
- &:before {
- content: '';
- display: block;
- margin: 0.143rem;
- width: 0.857rem;
- height: 0.857rem;
- background: var(--bui-fg-solid);
- border-radius: 16px;
+ .bui-SwitchIndicator {
+ width: 2rem;
+ height: 1.143rem;
+ border: 2px;
+ background: var(--bui-gray-3);
+ border-radius: 1.143rem;
transition: all 200ms;
+
+ &:before {
+ content: '';
+ display: block;
+ margin: 0.143rem;
+ width: 0.857rem;
+ height: 0.857rem;
+ background: var(--bui-fg-solid);
+ border-radius: 16px;
+ transition: all 200ms;
+ }
}
}
diff --git a/packages/ui/src/components/Table/Table.styles.css b/packages/ui/src/components/Table/Table.styles.css
index 84d417604a..0bb49be742 100644
--- a/packages/ui/src/components/Table/Table.styles.css
+++ b/packages/ui/src/components/Table/Table.styles.css
@@ -14,136 +14,138 @@
* limitations under the License.
*/
-.bui-Table {
- width: 100%;
- caption-side: bottom;
- border-collapse: collapse;
-}
-
-.bui-TableHeader {
- border-bottom: 1px solid var(--bui-border);
- transition: color 0.2s ease-in-out;
-}
-
-.bui-TableHead {
- text-align: left;
- padding: var(--bui-space-3);
- font-size: var(--bui-font-size-3);
- color: var(--bui-fg-primary);
-}
-
-.bui-TableHeadSortButton {
- cursor: pointer;
- user-select: none;
- display: inline-flex;
- align-items: center;
- gap: var(--bui-space-1);
-
- &:hover svg {
- opacity: 0.5;
+@layer components {
+ .bui-Table {
+ width: 100%;
+ caption-side: bottom;
+ border-collapse: collapse;
}
- & svg {
- opacity: 0;
- transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+ .bui-TableHeader {
+ border-bottom: 1px solid var(--bui-border);
+ transition: color 0.2s ease-in-out;
}
- &[data-sort-order='asc'] svg {
- opacity: 1;
- transform: rotate(0);
+ .bui-TableHead {
+ text-align: left;
+ padding: var(--bui-space-3);
+ font-size: var(--bui-font-size-3);
+ color: var(--bui-fg-primary);
}
- &[data-sort-order='desc'] svg {
- opacity: 1;
- transform: rotate(180deg);
- }
-}
-
-.bui-TableBody {
- color: var(--bui-fg-primary);
-}
-
-.bui-TableRow {
- border-bottom: 1px solid var(--bui-border);
- transition: color 0.2s ease-in-out;
-
- &[data-react-aria-pressable='true'] {
+ .bui-TableHeadSortButton {
cursor: pointer;
+ user-select: none;
+ display: inline-flex;
+ align-items: center;
+ gap: var(--bui-space-1);
+
+ &:hover svg {
+ opacity: 0.5;
+ }
+
+ & svg {
+ opacity: 0;
+ transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+ }
+
+ &[data-sort-order='asc'] svg {
+ opacity: 1;
+ transform: rotate(0);
+ }
+
+ &[data-sort-order='desc'] svg {
+ opacity: 1;
+ transform: rotate(180deg);
+ }
+ }
+
+ .bui-TableBody {
+ color: var(--bui-fg-primary);
+ }
+
+ .bui-TableRow {
+ border-bottom: 1px solid var(--bui-border);
+ transition: color 0.2s ease-in-out;
+
+ &[data-react-aria-pressable='true'] {
+ cursor: pointer;
+ }
+ }
+
+ .bui-TableBody .bui-TableRow:hover {
+ background-color: var(--bui-gray-2);
+ }
+
+ .bui-TableCell {
+ padding: var(--bui-space-3);
+ font-size: var(--bui-font-size-3);
+ }
+
+ .bui-TableCell {
+ padding: var(--bui-space-3);
+ font-size: var(--bui-font-size-3);
+ }
+
+ .bui-TableCellContentWrapper {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: center;
+ gap: var(--bui-space-2);
+ }
+
+ .bui-TableCellIcon,
+ .bui-TableCellIcon svg {
+ display: inline-flex;
+ align-items: center;
+ color: var(--bui-fg-primary);
+ }
+
+ .bui-TableCellContent {
+ display: flex;
+ flex-direction: column;
+ gap: var(--bui-space-0_5);
+ }
+
+ .bui-TableCellProfile {
+ display: flex;
+ flex-direction: row;
+ gap: var(--bui-space-2);
+ align-items: center;
+ }
+
+ .bui-TableCellProfileAvatar {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ vertical-align: middle;
+ border-radius: 100%;
+ user-select: none;
+ font-weight: 500;
+ color: var(--bui-fg-primary);
+ background-color: var(--bui-bg-surface-2);
+ font-size: 1rem;
+ line-height: 1;
+ overflow: hidden;
+ height: 1.25rem;
+ width: 1.25rem;
+ }
+
+ .bui-TableCellProfileAvatarImage {
+ object-fit: cover;
+ height: 100%;
+ width: 100%;
+ }
+
+ .bui-TableCellProfileAvatarFallback {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: 100%;
+ width: 100%;
+ font-size: var(--bui-font-size-2);
+ font-weight: var(--bui-font-weight-regular);
+ box-shadow: inset 0 0 0 1px var(--bui-border);
+ border-radius: var(--bui-radius-full);
}
}
-
-.bui-TableBody .bui-TableRow:hover {
- background-color: var(--bui-gray-2);
-}
-
-.bui-TableCell {
- padding: var(--bui-space-3);
- font-size: var(--bui-font-size-3);
-}
-
-.bui-TableCell {
- padding: var(--bui-space-3);
- font-size: var(--bui-font-size-3);
-}
-
-.bui-TableCellContentWrapper {
- display: inline-flex;
- flex-direction: row;
- align-items: center;
- gap: var(--bui-space-2);
-}
-
-.bui-TableCellIcon,
-.bui-TableCellIcon svg {
- display: inline-flex;
- align-items: center;
- color: var(--bui-fg-primary);
-}
-
-.bui-TableCellContent {
- display: flex;
- flex-direction: column;
- gap: var(--bui-space-0_5);
-}
-
-.bui-TableCellProfile {
- display: flex;
- flex-direction: row;
- gap: var(--bui-space-2);
- align-items: center;
-}
-
-.bui-TableCellProfileAvatar {
- display: inline-flex;
- justify-content: center;
- align-items: center;
- vertical-align: middle;
- border-radius: 100%;
- user-select: none;
- font-weight: 500;
- color: var(--bui-fg-primary);
- background-color: var(--bui-bg-surface-2);
- font-size: 1rem;
- line-height: 1;
- overflow: hidden;
- height: 1.25rem;
- width: 1.25rem;
-}
-
-.bui-TableCellProfileAvatarImage {
- object-fit: cover;
- height: 100%;
- width: 100%;
-}
-
-.bui-TableCellProfileAvatarFallback {
- align-items: center;
- display: flex;
- justify-content: center;
- height: 100%;
- width: 100%;
- font-size: var(--bui-font-size-2);
- font-weight: var(--bui-font-weight-regular);
- box-shadow: inset 0 0 0 1px var(--bui-border);
- border-radius: var(--bui-radius-full);
-}
diff --git a/packages/ui/src/components/TablePagination/TablePagination.styles.css b/packages/ui/src/components/TablePagination/TablePagination.styles.css
index f7cbb44fc2..e305967ebe 100644
--- a/packages/ui/src/components/TablePagination/TablePagination.styles.css
+++ b/packages/ui/src/components/TablePagination/TablePagination.styles.css
@@ -1,23 +1,41 @@
-.bui-DataTablePagination {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding-top: var(--bui-space-5);
-}
+/*
+ * 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.
+ */
-.bui-DataTablePagination--left {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
+@layer components {
+ .bui-DataTablePagination {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding-top: var(--bui-space-5);
+ }
-.bui-DataTablePagination--right {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--bui-space-2);
-}
+ .bui-DataTablePagination--left {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
-.bui-DataTablePagination--select {
- min-width: 10.5rem;
+ .bui-DataTablePagination--right {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--bui-space-2);
+ }
+
+ .bui-DataTablePagination--select {
+ min-width: 10.5rem;
+ }
}
diff --git a/packages/ui/src/components/Tabs/Tabs.styles.css b/packages/ui/src/components/Tabs/Tabs.styles.css
index 819fe458ed..a58d123559 100644
--- a/packages/ui/src/components/Tabs/Tabs.styles.css
+++ b/packages/ui/src/components/Tabs/Tabs.styles.css
@@ -1,82 +1,100 @@
-.bui-Tabs {
- /* Initialize CSS variables */
- --active-tab-left: 0px;
- --active-tab-right: 0px;
- --active-tab-top: 0px;
- --active-tab-bottom: 0px;
- --active-tab-width: 0px;
- --active-tab-height: 0px;
- --active-transition-duration: 0s;
+/*
+ * 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.
+ */
- --hovered-tab-left: 0px;
- --hovered-tab-right: 0px;
- --hovered-tab-top: 0px;
- --hovered-tab-bottom: 0px;
- --hovered-tab-width: 0px;
- --hovered-tab-height: 0px;
- --hovered-tab-opacity: 0;
- --hovered-transition-duration: 0s;
-}
+@layer components {
+ .bui-Tabs {
+ /* Initialize CSS variables */
+ --active-tab-left: 0px;
+ --active-tab-right: 0px;
+ --active-tab-top: 0px;
+ --active-tab-bottom: 0px;
+ --active-tab-width: 0px;
+ --active-tab-height: 0px;
+ --active-transition-duration: 0s;
-.bui-TabList {
- display: flex;
- flex-direction: row;
-}
+ --hovered-tab-left: 0px;
+ --hovered-tab-right: 0px;
+ --hovered-tab-top: 0px;
+ --hovered-tab-bottom: 0px;
+ --hovered-tab-width: 0px;
+ --hovered-tab-height: 0px;
+ --hovered-tab-opacity: 0;
+ --hovered-transition-duration: 0s;
+ }
-.bui-TabListWrapper {
- position: relative;
-}
+ .bui-TabList {
+ display: flex;
+ flex-direction: row;
+ }
-.bui-Tab {
- font-size: var(--bui-font-size-3);
- font-family: var(--bui-font-regular);
- font-weight: var(--bui-font-weight-regular);
- color: var(--bui-fg-secondary);
- height: 36px;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- position: relative;
- z-index: 2;
- padding-inline: var(--bui-space-2);
+ .bui-TabListWrapper {
+ position: relative;
+ }
- &[data-selected='true'] {
- color: var(--bui-fg-primary);
+ .bui-Tab {
+ font-size: var(--bui-font-size-3);
+ font-family: var(--bui-font-regular);
+ font-weight: var(--bui-font-weight-regular);
+ color: var(--bui-fg-secondary);
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ position: relative;
+ z-index: 2;
+ padding-inline: var(--bui-space-2);
+
+ &[data-selected='true'] {
+ color: var(--bui-fg-primary);
+ }
+ }
+
+ .bui-TabActive {
+ content: '';
+ position: absolute;
+ left: calc(var(--active-tab-left) + var(--bui-space-2));
+ bottom: -1px;
+ width: calc(var(--active-tab-width) - var(--bui-space-4));
+ height: 1px;
+ background-color: var(--bui-fg-primary);
+ border-radius: 4px;
+ transition: left var(--active-transition-duration) ease-out,
+ opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;
+ opacity: 1;
+ }
+
+ .bui-TabHovered {
+ content: '';
+ position: absolute;
+ left: var(--hovered-tab-left);
+ top: calc(var(--hovered-tab-top) + 4px);
+ width: var(--hovered-tab-width);
+ height: calc(var(--hovered-tab-height) - 8px);
+ background-color: var(--bui-gray-2);
+ border-radius: 4px;
+ opacity: var(--hovered-tab-opacity);
+ transition: left var(--hovered-transition-duration) ease-out,
+ top var(--hovered-transition-duration) ease-out,
+ width var(--hovered-transition-duration) ease-out,
+ height var(--hovered-transition-duration) ease-out, opacity 0.15s ease-out;
+ }
+
+ .bui-TabPanel {
+ padding-inline: var(--bui-space-2);
+ padding-top: var(--bui-space-4);
}
}
-
-.bui-TabActive {
- content: '';
- position: absolute;
- left: calc(var(--active-tab-left) + var(--bui-space-2));
- bottom: -1px;
- width: calc(var(--active-tab-width) - var(--bui-space-4));
- height: 1px;
- background-color: var(--bui-fg-primary);
- border-radius: 4px;
- transition: left var(--active-transition-duration) ease-out,
- opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;
- opacity: 1;
-}
-
-.bui-TabHovered {
- content: '';
- position: absolute;
- left: var(--hovered-tab-left);
- top: calc(var(--hovered-tab-top) + 4px);
- width: var(--hovered-tab-width);
- height: calc(var(--hovered-tab-height) - 8px);
- background-color: var(--bui-gray-2);
- border-radius: 4px;
- opacity: var(--hovered-tab-opacity);
- transition: left var(--hovered-transition-duration) ease-out,
- top var(--hovered-transition-duration) ease-out,
- width var(--hovered-transition-duration) ease-out,
- height var(--hovered-transition-duration) ease-out, opacity 0.15s ease-out;
-}
-
-.bui-TabPanel {
- padding-inline: var(--bui-space-2);
- padding-top: var(--bui-space-4);
-}
diff --git a/packages/ui/src/components/TagGroup/TagGroup.styles.css b/packages/ui/src/components/TagGroup/TagGroup.styles.css
index 9da99a4290..096d003f83 100644
--- a/packages/ui/src/components/TagGroup/TagGroup.styles.css
+++ b/packages/ui/src/components/TagGroup/TagGroup.styles.css
@@ -14,77 +14,79 @@
* limitations under the License.
*/
-.bui-TagList {
- display: flex;
- flex-wrap: wrap;
- gap: var(--bui-space-2);
-}
+@layer components {
+ .bui-TagList {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--bui-space-2);
+ }
-.bui-Tag {
- color: var(--bui-fg-primary);
- background-color: var(--bui-gray-2);
- border-radius: var(--bui-radius-2);
- display: flex;
- align-items: center;
- justify-content: center;
- font-weight: var(--bui-font-weight-regular);
- gap: var(--bui-space-1);
- transition-property: background-color, box-shadow, color;
- transition-duration: 0.2s;
- transition-timing-function: ease-in-out;
- box-sizing: border-box;
-}
+ .bui-Tag {
+ color: var(--bui-fg-primary);
+ background-color: var(--bui-gray-2);
+ border-radius: var(--bui-radius-2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: var(--bui-font-weight-regular);
+ gap: var(--bui-space-1);
+ transition-property: background-color, box-shadow, color;
+ transition-duration: 0.2s;
+ transition-timing-function: ease-in-out;
+ box-sizing: border-box;
+ }
-.bui-Tag[data-size='small'] {
- height: 26px;
- padding: 0 var(--bui-space-2);
- font-size: var(--bui-font-size-1);
-}
+ .bui-Tag[data-size='small'] {
+ height: 26px;
+ padding: 0 var(--bui-space-2);
+ font-size: var(--bui-font-size-1);
+ }
-.bui-Tag[data-size='medium'] {
- height: 32px;
- padding: 0 var(--bui-space-2);
- font-size: var(--bui-font-size-2);
-}
+ .bui-Tag[data-size='medium'] {
+ height: 32px;
+ padding: 0 var(--bui-space-2);
+ font-size: var(--bui-font-size-2);
+ }
-.bui-Tag[data-hovered] {
- background-color: var(--bui-gray-3);
- cursor: pointer;
-}
+ .bui-Tag[data-hovered] {
+ background-color: var(--bui-gray-3);
+ cursor: pointer;
+ }
-.bui-Tag[data-focus-visible] {
- outline: 2px solid var(--bui-ring);
- outline-offset: 1px;
-}
+ .bui-Tag[data-focus-visible] {
+ outline: 2px solid var(--bui-ring);
+ outline-offset: 1px;
+ }
-.bui-Tag[data-selected] {
- box-shadow: inset 0 0 0 1px var(--bui-gray-8);
-}
+ .bui-Tag[data-selected] {
+ box-shadow: inset 0 0 0 1px var(--bui-gray-8);
+ }
-.bui-Tag[data-disabled] {
- color: var(--bui-fg-disabled);
- cursor: not-allowed;
-}
+ .bui-Tag[data-disabled] {
+ color: var(--bui-fg-disabled);
+ cursor: not-allowed;
+ }
-.bui-TagRemoveButton {
- background-color: transparent;
- border: none;
- cursor: pointer;
- color: var(--bui-fg-primary);
- padding: 0;
- margin: 0;
- width: 1rem;
- height: 1rem;
-}
-
-.bui-TagIcon {
- display: flex;
- align-items: center;
- justify-content: center;
- transition: color 0.2s ease-in-out;
-
- svg {
+ .bui-TagRemoveButton {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ color: var(--bui-fg-primary);
+ padding: 0;
+ margin: 0;
width: 1rem;
height: 1rem;
}
+
+ .bui-TagIcon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: color 0.2s ease-in-out;
+
+ svg {
+ width: 1rem;
+ height: 1rem;
+ }
+ }
}
diff --git a/packages/ui/src/components/Text/styles.css b/packages/ui/src/components/Text/styles.css
index 562d2a5356..47f38fe30d 100644
--- a/packages/ui/src/components/Text/styles.css
+++ b/packages/ui/src/components/Text/styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,90 +14,92 @@
* limitations under the License.
*/
-.bui-Text {
- font-family: var(--bui-font-regular);
- padding: 0;
- margin: 0;
-}
+@layer components {
+ .bui-Text {
+ font-family: var(--bui-font-regular);
+ padding: 0;
+ margin: 0;
+ }
-.bui-Text[data-variant='title-large'] {
- font-size: var(--bui-font-size-8);
- line-height: 140%;
-}
+ .bui-Text[data-variant='title-large'] {
+ font-size: var(--bui-font-size-8);
+ line-height: 140%;
+ }
-.bui-Text[data-variant='title-medium'] {
- font-size: var(--bui-font-size-7);
- line-height: 140%;
-}
+ .bui-Text[data-variant='title-medium'] {
+ font-size: var(--bui-font-size-7);
+ line-height: 140%;
+ }
-.bui-Text[data-variant='title-small'] {
- font-size: var(--bui-font-size-6);
- line-height: 140%;
-}
+ .bui-Text[data-variant='title-small'] {
+ font-size: var(--bui-font-size-6);
+ line-height: 140%;
+ }
-.bui-Text[data-variant='title-x-small'] {
- font-size: var(--bui-font-size-5);
- line-height: 140%;
-}
+ .bui-Text[data-variant='title-x-small'] {
+ font-size: var(--bui-font-size-5);
+ line-height: 140%;
+ }
-.bui-Text[data-variant='body-large'] {
- font-size: var(--bui-font-size-4);
- line-height: 140%;
-}
+ .bui-Text[data-variant='body-large'] {
+ font-size: var(--bui-font-size-4);
+ line-height: 140%;
+ }
-.bui-Text[data-variant='body-medium'] {
- font-size: var(--bui-font-size-3);
- line-height: 140%;
-}
+ .bui-Text[data-variant='body-medium'] {
+ font-size: var(--bui-font-size-3);
+ line-height: 140%;
+ }
-.bui-Text[data-variant='body-small'] {
- font-size: var(--bui-font-size-2);
- line-height: 140%;
-}
+ .bui-Text[data-variant='body-small'] {
+ font-size: var(--bui-font-size-2);
+ line-height: 140%;
+ }
-.bui-Text[data-variant='body-x-small'] {
- font-size: var(--bui-font-size-1);
- line-height: 140%;
-}
+ .bui-Text[data-variant='body-x-small'] {
+ font-size: var(--bui-font-size-1);
+ line-height: 140%;
+ }
-.bui-Text[data-weight='regular'] {
- font-weight: var(--bui-font-weight-regular);
-}
+ .bui-Text[data-weight='regular'] {
+ font-weight: var(--bui-font-weight-regular);
+ }
-.bui-Text[data-weight='bold'] {
- font-weight: var(--bui-font-weight-bold);
-}
+ .bui-Text[data-weight='bold'] {
+ font-weight: var(--bui-font-weight-bold);
+ }
-.bui-Text[data-color='primary'] {
- color: var(--bui-fg-primary);
-}
+ .bui-Text[data-color='primary'] {
+ color: var(--bui-fg-primary);
+ }
-.bui-Text[data-color='secondary'] {
- color: var(--bui-fg-secondary);
-}
+ .bui-Text[data-color='secondary'] {
+ color: var(--bui-fg-secondary);
+ }
-.bui-Text[data-color='danger'] {
- color: var(--bui-fg-danger);
-}
+ .bui-Text[data-color='danger'] {
+ color: var(--bui-fg-danger);
+ }
-.bui-Text[data-color='warning'] {
- color: var(--bui-fg-warning);
-}
+ .bui-Text[data-color='warning'] {
+ color: var(--bui-fg-warning);
+ }
-.bui-Text[data-color='success'] {
- color: var(--bui-fg-success);
-}
+ .bui-Text[data-color='success'] {
+ color: var(--bui-fg-success);
+ }
-.bui-Text[data-truncate] {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
+ .bui-Text[data-truncate] {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
-.bui-Text[data-as='span'],
-.bui-Text[data-as='label'],
-.bui-Text[data-as='strong'],
-.bui-Text[data-as='em'],
-.bui-Text[data-as='small'] {
- display: inline-block;
+ .bui-Text[data-as='span'],
+ .bui-Text[data-as='label'],
+ .bui-Text[data-as='strong'],
+ .bui-Text[data-as='em'],
+ .bui-Text[data-as='small'] {
+ display: inline-block;
+ }
}
diff --git a/packages/ui/src/components/TextField/TextField.styles.css b/packages/ui/src/components/TextField/TextField.styles.css
index 792d5d85c9..170349a760 100644
--- a/packages/ui/src/components/TextField/TextField.styles.css
+++ b/packages/ui/src/components/TextField/TextField.styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,105 +14,107 @@
* limitations under the License.
*/
-.bui-TextField {
- display: flex;
- flex-direction: column;
- font-family: var(--bui-font-regular);
- width: 100%;
- flex-shrink: 0;
-}
-
-.bui-InputWrapper {
- position: relative;
-
- &[data-size='small'] .bui-Input {
- height: 2rem;
+@layer components {
+ .bui-TextField {
+ display: flex;
+ flex-direction: column;
+ font-family: var(--bui-font-regular);
+ width: 100%;
+ flex-shrink: 0;
}
- &[data-size='medium'] .bui-Input {
- height: 2.5rem;
+ .bui-InputWrapper {
+ position: relative;
+
+ &[data-size='small'] .bui-Input {
+ height: 2rem;
+ }
+
+ &[data-size='medium'] .bui-Input {
+ height: 2.5rem;
+ }
+
+ &[data-size='small'] .bui-Input[data-icon] {
+ padding-left: var(--bui-space-8);
+ }
+
+ &[data-size='medium'] .bui-Input[data-icon] {
+ padding-left: var(--bui-space-9);
+ }
}
- &[data-size='small'] .bui-Input[data-icon] {
- padding-left: var(--bui-space-8);
+ .bui-InputIcon {
+ position: absolute;
+ left: var(--bui-space-3);
+ top: 50%;
+ transform: translateY(-50%);
+ margin-right: var(--bui-space-1);
+ color: var(--bui-fg-primary);
+ flex-shrink: 0;
+ pointer-events: none;
+ /* To animate the icon when the input is collapsed */
+ transition: left 0.2s ease-in-out;
+
+ &[data-size='small'],
+ &[data-size='small'] svg {
+ width: 1rem;
+ height: 1rem;
+ }
+
+ &[data-size='medium'],
+ &[data-size='medium'] svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
}
- &[data-size='medium'] .bui-Input[data-icon] {
- padding-left: var(--bui-space-9);
- }
-}
-
-.bui-InputIcon {
- position: absolute;
- left: var(--bui-space-3);
- top: 50%;
- transform: translateY(-50%);
- margin-right: var(--bui-space-1);
- color: var(--bui-fg-primary);
- flex-shrink: 0;
- pointer-events: none;
- /* To animate the icon when the input is collapsed */
- transition: left 0.2s ease-in-out;
-
- &[data-size='small'],
- &[data-size='small'] svg {
- width: 1rem;
- height: 1rem;
- }
-
- &[data-size='medium'],
- &[data-size='medium'] svg {
- width: 1.25rem;
- height: 1.25rem;
- }
-}
-
-.bui-Input {
- display: flex;
- align-items: center;
- padding: 0 var(--bui-space-3);
- border-radius: var(--bui-radius-2);
- border: 1px solid var(--bui-border);
- background-color: var(--bui-bg-surface-1);
- font-size: var(--bui-font-size-3);
- font-family: var(--bui-font-regular);
- font-weight: var(--bui-font-weight-regular);
- color: var(--bui-fg-primary);
- transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
- width: 100%;
- height: 100%;
- cursor: inherit;
-
- &::-webkit-search-cancel-button,
- &::-webkit-search-decoration {
- -webkit-appearance: none;
- }
-
- &::placeholder {
- color: var(--bui-fg-secondary);
- }
-
- &[data-focused] {
- outline-color: var(--bui-border-pressed);
- outline-width: 0px;
- }
-
- &[data-hovered] {
- border-color: var(--bui-border-hover);
- }
-
- &[data-focused] {
- border-color: var(--bui-border-pressed);
- outline-width: 0px;
- }
-
- &[data-invalid] {
- border-color: var(--bui-fg-danger);
- }
-
- &[data-disabled] {
- opacity: 0.5;
- cursor: not-allowed;
- border: 1px solid var(--bui-border-disabled);
+ .bui-Input {
+ display: flex;
+ align-items: center;
+ padding: 0 var(--bui-space-3);
+ border-radius: var(--bui-radius-2);
+ border: 1px solid var(--bui-border);
+ background-color: var(--bui-bg-surface-1);
+ font-size: var(--bui-font-size-3);
+ font-family: var(--bui-font-regular);
+ font-weight: var(--bui-font-weight-regular);
+ color: var(--bui-fg-primary);
+ transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
+ width: 100%;
+ height: 100%;
+ cursor: inherit;
+
+ &::-webkit-search-cancel-button,
+ &::-webkit-search-decoration {
+ -webkit-appearance: none;
+ }
+
+ &::placeholder {
+ color: var(--bui-fg-secondary);
+ }
+
+ &[data-focused] {
+ outline-color: var(--bui-border-pressed);
+ outline-width: 0px;
+ }
+
+ &[data-hovered] {
+ border-color: var(--bui-border-hover);
+ }
+
+ &[data-focused] {
+ border-color: var(--bui-border-pressed);
+ outline-width: 0px;
+ }
+
+ &[data-invalid] {
+ border-color: var(--bui-fg-danger);
+ }
+
+ &[data-disabled] {
+ opacity: 0.5;
+ cursor: not-allowed;
+ border: 1px solid var(--bui-border-disabled);
+ }
}
}
diff --git a/packages/ui/src/components/TextField/types.ts b/packages/ui/src/components/TextField/types.ts
index 75a5c68aaa..b971ef8d26 100644
--- a/packages/ui/src/components/TextField/types.ts
+++ b/packages/ui/src/components/TextField/types.ts
@@ -23,6 +23,14 @@ import type { FieldLabelProps } from '../FieldLabel/types';
export interface TextFieldProps
extends AriaTextFieldProps,
Omit {
+ /**
+ * The HTML input type for the text field
+ *
+ * @remarks
+ * Use `SearchField` for
+ * search inputs and `PasswordField` for password inputs.
+ */
+ type?: 'text' | 'email' | 'tel' | 'url';
/**
* An icon to render before the input
*/
diff --git a/packages/ui/src/components/Tooltip/Tooltip.styles.css b/packages/ui/src/components/Tooltip/Tooltip.styles.css
index f80a12bbc1..7c035888ed 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.styles.css
+++ b/packages/ui/src/components/Tooltip/Tooltip.styles.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
@@ -14,110 +14,112 @@
* limitations under the License.
*/
-.bui-Tooltip {
- box-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),
- 0 4px 6px -4px rgba(0 0 0 / 0.1);
- border-radius: 4px;
- background: var(--bui-bg-surface-1);
- border: 1px solid var(--bui-gray-3);
- forced-color-adjust: none;
- outline: none;
- padding: var(--bui-space-2) var(--bui-space-3);
- max-width: 240px;
- /* fixes FF gap */
- transform: translate3d(0, 0, 0);
- transition: transform 200ms, opacity 200ms;
- font-size: var(--bui-font-size-3);
- font-family: var(--bui-font-regular);
- color: var(--bui-fg-primary);
+@layer components {
+ .bui-Tooltip {
+ box-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),
+ 0 4px 6px -4px rgba(0 0 0 / 0.1);
+ border-radius: 4px;
+ background: var(--bui-bg-surface-1);
+ border: 1px solid var(--bui-gray-3);
+ forced-color-adjust: none;
+ outline: none;
+ padding: var(--bui-space-2) var(--bui-space-3);
+ max-width: 240px;
+ /* fixes FF gap */
+ transform: translate3d(0, 0, 0);
+ transition: transform 200ms, opacity 200ms;
+ font-size: var(--bui-font-size-3);
+ font-family: var(--bui-font-regular);
+ color: var(--bui-fg-primary);
- &[data-entering],
- &[data-exiting] {
- transform: var(--origin);
- opacity: 0;
+ &[data-entering],
+ &[data-exiting] {
+ transform: var(--origin);
+ opacity: 0;
+ }
+
+ --tooltip-offset: var(--bui-space-3);
+
+ &[data-placement='top'] {
+ margin-bottom: var(--tooltip-offset);
+ --origin: translateY(4px);
+ }
+
+ &[data-placement='right'] {
+ margin-left: var(--tooltip-offset);
+ --origin: translateX(-4px);
+ }
+
+ &[data-placement='bottom'] {
+ margin-top: var(--tooltip-offset);
+ --origin: translateY(-4px);
+ }
+
+ &[data-placement='left'] {
+ margin-right: var(--tooltip-offset);
+ --origin: translateX(4px);
+ }
}
- --tooltip-offset: var(--bui-space-3);
+ .bui-TooltipArrow {
+ & svg {
+ display: block;
- &[data-placement='top'] {
- margin-bottom: var(--tooltip-offset);
- --origin: translateY(4px);
- }
-
- &[data-placement='right'] {
- margin-left: var(--tooltip-offset);
- --origin: translateX(-4px);
- }
-
- &[data-placement='bottom'] {
- margin-top: var(--tooltip-offset);
- --origin: translateY(-4px);
- }
-
- &[data-placement='left'] {
- margin-right: var(--tooltip-offset);
- --origin: translateX(4px);
- }
-}
-
-.bui-TooltipArrow {
- & svg {
- display: block;
-
- /* The tooltip is rendered overlaying the main
+ /* The tooltip is rendered overlaying the main
tooltip element by 1px. This causes the borders
to overlap, which causes minor visual artifacts
with transparent border colors. To mitigate this,
we split the stroke and fill across separate
elements in order to guarantee that the stroke is
always overlaying a consistent color. */
- path:nth-child(1) {
- fill: var(--bui-bg-surface-1);
- }
+ path:nth-child(1) {
+ fill: var(--bui-bg-surface-1);
+ }
- path:nth-child(2) {
- fill: var(--bui-gray-3);
- }
+ path:nth-child(2) {
+ fill: var(--bui-gray-3);
+ }
- /* The arrow svg overlaps the tooltip by 2px, so we
+ /* The arrow svg overlaps the tooltip by 2px, so we
need to adjust the margins accordingly. */
- --tooltip-arrow-overlap: -2px;
- }
-
- &[data-placement='top'] svg {
- margin-top: var(--tooltip-arrow-overlap);
- }
-
- &[data-placement='bottom'] svg {
- margin-bottom: var(--tooltip-arrow-overlap);
- transform: rotate(180deg);
- }
-
- &[data-placement='right'] svg {
- margin-right: var(--tooltip-arrow-overlap);
- transform: rotate(90deg);
- }
-
- &[data-placement='left'] svg {
- margin-left: var(--tooltip-arrow-overlap);
- transform: rotate(-90deg);
- }
-}
-
-[data-theme='dark'] {
- .bui-Tooltip {
- background: var(--bui-bg-surface-2);
- box-shadow: none;
- border: 1px solid var(--bui-gray-4);
- }
-
- .bui-TooltipArrow {
- svg path:nth-child(1) {
- fill: var(--bui-bg-surface-2);
+ --tooltip-arrow-overlap: -2px;
}
- svg path:nth-child(2) {
- fill: var(--bui-gray-4);
+ &[data-placement='top'] svg {
+ margin-top: var(--tooltip-arrow-overlap);
+ }
+
+ &[data-placement='bottom'] svg {
+ margin-bottom: var(--tooltip-arrow-overlap);
+ transform: rotate(180deg);
+ }
+
+ &[data-placement='right'] svg {
+ margin-right: var(--tooltip-arrow-overlap);
+ transform: rotate(90deg);
+ }
+
+ &[data-placement='left'] svg {
+ margin-left: var(--tooltip-arrow-overlap);
+ transform: rotate(-90deg);
+ }
+ }
+
+ [data-theme='dark'] {
+ .bui-Tooltip {
+ background: var(--bui-bg-surface-2);
+ box-shadow: none;
+ border: 1px solid var(--bui-gray-4);
+ }
+
+ .bui-TooltipArrow {
+ svg path:nth-child(1) {
+ fill: var(--bui-bg-surface-2);
+ }
+
+ svg path:nth-child(2) {
+ fill: var(--bui-gray-4);
+ }
}
}
}
diff --git a/packages/ui/src/css/components.css b/packages/ui/src/css/components.css
deleted file mode 100644
index 8aa81a8217..0000000000
--- a/packages/ui/src/css/components.css
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * 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.
- */
-
-@import '../components/Avatar/Avatar.styles.css';
-@import '../components/Box/styles.css';
-@import '../components/Button/styles.css';
-@import '../components/ButtonIcon/styles.css';
-@import '../components/Card/Card.styles.css';
-@import '../components/Checkbox/styles.css';
-@import '../components/Collapsible/Collapsible.styles.css';
-@import '../components/Container/styles.css';
-@import '../components/FieldError/FieldError.styles.css';
-@import '../components/FieldLabel/FieldLabel.styles.css';
-@import '../components/Flex/styles.css';
-@import '../components/Grid/styles.css';
-@import '../components/Header/Header.styles.css';
-@import '../components/HeaderPage/HeaderPage.styles.css';
-@import '../components/Icon/styles.css';
-@import '../components/Link/styles.css';
-@import '../components/Menu/Menu.styles.css';
-@import '../components/Popover/Popover.styles.css';
-@import '../components/RadioGroup/RadioGroup.styles.css';
-@import '../components/Table/Table.styles.css';
-@import '../components/TablePagination/TablePagination.styles.css';
-@import '../components/Tabs/Tabs.styles.css';
-@import '../components/TagGroup/TagGroup.styles.css';
-@import '../components/Text/styles.css';
-@import '../components/TextField/TextField.styles.css';
-@import '../components/SearchField/SearchField.styles.css';
-@import '../components/Skeleton/Skeleton.styles.css';
-@import '../components/Tooltip/Tooltip.styles.css';
-@import '../components/ScrollArea/ScrollArea.styles.css';
-@import '../components/Select/Select.styles.css';
-@import '../components/Switch/Switch.styles.css';
diff --git a/packages/ui/src/css/core.css b/packages/ui/src/css/core.css
index 088d4d6f2b..b24e8bad73 100644
--- a/packages/ui/src/css/core.css
+++ b/packages/ui/src/css/core.css
@@ -14,187 +14,19 @@
* limitations under the License.
*/
-/* Normalize */
-@import './normalize.css';
-@import './utilities.css';
+@layer base {
+ :where(a) {
+ color: inherit;
+ text-decoration: none;
+ }
-/* Global reset */
-:where(a) {
- color: inherit;
- text-decoration: none;
-}
+ @keyframes pulse {
+ 50% {
+ opacity: 0.5;
+ }
+ }
-@keyframes pulse {
- 50% {
- opacity: 0.5;
+ body {
+ background-color: var(--bui-bg);
}
}
-
-/* Light theme tokens */
-:root {
- /* Font families */
- --bui-font-regular: system-ui;
- --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;
-
- /* 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;
-
- /* Base Colors */
- --bui-black: #000000;
- --bui-white: #ffffff;
-
- /* Gray scale */
- --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;
-
- /* Background Colors */
- --bui-bg: var(--bui-gray-1);
- --bui-bg-surface-1: var(--bui-white);
- --bui-bg-surface-2: var(--bui-gray-2);
- --bui-bg-solid: #1f5493;
- --bui-bg-solid-hover: #163a66;
- --bui-bg-solid-pressed: #0f2b4e;
- --bui-bg-solid-disabled: #ebebeb;
- --bui-bg-tint: transparent;
- --bui-bg-tint-hover: rgba(31, 84, 147, 0.4);
- --bui-bg-tint-pressed: rgba(31, 84, 147, 0.6);
- --bui-bg-tint-disabled: #ebebeb;
- --bui-bg-danger: #feebe7;
- --bui-bg-warning: #fff2b2;
- --bui-bg-success: #e6f6eb;
-
- /* Foreground Colors */
- --bui-fg-primary: var(--bui-black);
- --bui-fg-secondary: var(--bui-gray-7);
- --bui-fg-link: #1f5493;
- --bui-fg-link-hover: #1f2d5c;
- --bui-fg-disabled: #9e9e9e;
- --bui-fg-solid: var(--bui-white);
- --bui-fg-solid-disabled: #9c9c9c;
- --bui-fg-tint: #1f5493;
- --bui-fg-tint-disabled: var(--bui-gray-5);
- --bui-fg-danger: #e22b2b;
- --bui-fg-warning: #e36d05;
- --bui-fg-success: #1db954;
-
- /* Border Colors */
- --bui-border: rgba(0, 0, 0, 0.1);
- --bui-border-hover: rgba(0, 0, 0, 0.2);
- --bui-border-pressed: rgba(0, 0, 0, 0.4);
- --bui-border-disabled: rgba(0, 0, 0, 0.1);
- --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-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-/* Dark theme tokens */
-[data-theme-mode='dark'] {
- /* Gray scale */
- --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;
-
- /* Background Colors */
- --bui-bg: #333333;
- --bui-bg-surface-1: #424242;
- --bui-bg-surface-2: var(--bui-gray-2);
- --bui-bg-solid: #9cc9ff;
- --bui-bg-solid-hover: #83b9fd;
- --bui-bg-solid-pressed: #83b9fd;
- --bui-bg-solid-disabled: #222222;
- --bui-bg-tint: transparent;
- --bui-bg-tint-hover: rgba(156, 201, 255, 0.12);
- --bui-bg-tint-pressed: rgba(156, 201, 255, 0.16);
- --bui-bg-tint-disabled: transparent;
- --bui-bg-danger: #3b1219;
- --bui-bg-warning: #302008;
- --bui-bg-success: #132d21;
-
- /* Foreground Colors */
- --bui-fg-primary: var(--bui-white);
- --bui-fg-secondary: var(--bui-gray-7);
- --bui-fg-link: #9cc9ff;
- --bui-fg-link-hover: #7eb5f7;
- --bui-fg-disabled: var(--bui-gray-7);
- --bui-fg-solid: #101821;
- --bui-fg-solid-disabled: var(--bui-gray-5);
- --bui-fg-tint: #9cc9ff;
- --bui-fg-tint-disabled: var(--bui-gray-5);
- --bui-fg-danger: #e22b2b;
- --bui-fg-warning: #e36d05;
- --bui-fg-success: #1db954;
-
- /* Border Colors */
- --bui-border: rgba(255, 255, 255, 0.12);
- --bui-border-hover: rgba(255, 255, 255, 0.4);
- --bui-border-pressed: rgba(255, 255, 255, 0.5);
- --bui-border-disabled: rgba(255, 255, 255, 0.2);
- --bui-border-danger: #f87a7a;
- --bui-border-warning: #e36d05;
- --bui-border-success: #53db83;
-
- /* Special Colors */
- --bui-ring: #1f5493;
- --bui-scrollbar: #3636363a;
- --bui-scrollbar-thumb: #575757;
-}
diff --git a/packages/ui/src/css/styles.css b/packages/ui/src/css/styles.css
index f5d623389f..4f5aa31744 100644
--- a/packages/ui/src/css/styles.css
+++ b/packages/ui/src/css/styles.css
@@ -14,5 +14,86 @@
* limitations under the License.
*/
+@layer tokens, base, components, utilities, legacy;
+
+/* Tokens */
+@import './tokens.css';
+
+/* Base */
+@import './normalize.css';
@import './core.css';
-@import './components.css';
+
+/* Components */
+@import '../components/Avatar/Avatar.styles.css';
+@import '../components/Box/styles.css';
+@import '../components/Button/styles.css';
+@import '../components/ButtonIcon/styles.css';
+@import '../components/Card/Card.styles.css';
+@import '../components/Checkbox/styles.css';
+@import '../components/Collapsible/Collapsible.styles.css';
+@import '../components/Container/styles.css';
+@import '../components/FieldError/FieldError.styles.css';
+@import '../components/FieldLabel/FieldLabel.styles.css';
+@import '../components/Flex/styles.css';
+@import '../components/Grid/styles.css';
+@import '../components/Header/Header.styles.css';
+@import '../components/HeaderPage/HeaderPage.styles.css';
+@import '../components/Icon/styles.css';
+@import '../components/Link/styles.css';
+@import '../components/Menu/Menu.styles.css';
+@import '../components/Popover/Popover.styles.css';
+@import '../components/RadioGroup/RadioGroup.styles.css';
+@import '../components/Table/Table.styles.css';
+@import '../components/TablePagination/TablePagination.styles.css';
+@import '../components/Tabs/Tabs.styles.css';
+@import '../components/TagGroup/TagGroup.styles.css';
+@import '../components/Text/styles.css';
+@import '../components/TextField/TextField.styles.css';
+@import '../components/PasswordField/PasswordField.styles.css';
+@import '../components/SearchField/SearchField.styles.css';
+@import '../components/Skeleton/Skeleton.styles.css';
+@import '../components/Tooltip/Tooltip.styles.css';
+@import '../components/ScrollArea/ScrollArea.styles.css';
+@import '../components/Select/Select.styles.css';
+@import '../components/Switch/Switch.styles.css';
+
+/* Utilities */
+
+/* Padding */
+@import './utilities/p.css';
+@import './utilities/pl.css';
+@import './utilities/pr.css';
+@import './utilities/pt.css';
+@import './utilities/pb.css';
+@import './utilities/py.css';
+@import './utilities/px.css';
+
+/* Margin */
+@import './utilities/m.css';
+@import './utilities/ml.css';
+@import './utilities/mr.css';
+@import './utilities/mt.css';
+@import './utilities/mb.css';
+@import './utilities/my.css';
+@import './utilities/mx.css';
+
+/* Display */
+@import './utilities/display.css';
+
+/* Width */
+@import './utilities/width.css';
+
+/* Height */
+@import './utilities/height.css';
+
+/* Position */
+@import './utilities/position.css';
+
+/* Grid */
+@import './utilities/grid.css';
+
+/* Gap */
+@import './utilities/gap.css';
+
+/* Flex */
+@import './utilities/flex.css';
diff --git a/packages/ui/src/css/tokens.css b/packages/ui/src/css/tokens.css
new file mode 100644
index 0000000000..028c60311d
--- /dev/null
+++ b/packages/ui/src/css/tokens.css
@@ -0,0 +1,186 @@
+/*
+ * 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;
+
+ /* Font weights */
+ --bui-font-weight-regular: 400;
+ --bui-font-weight-bold: 600;
+
+ /* 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;
+
+ /* Base Colors */
+ --bui-black: #000000;
+ --bui-white: #ffffff;
+
+ /* Gray scale */
+ --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;
+
+ /* Background Colors */
+ --bui-bg: var(--bui-gray-1);
+ --bui-bg-surface-1: var(--bui-white);
+ --bui-bg-surface-2: var(--bui-gray-2);
+ --bui-bg-solid: #1f5493;
+ --bui-bg-solid-hover: #163a66;
+ --bui-bg-solid-pressed: #0f2b4e;
+ --bui-bg-solid-disabled: #ebebeb;
+ --bui-bg-tint: transparent;
+ --bui-bg-tint-hover: rgba(31, 84, 147, 0.4);
+ --bui-bg-tint-pressed: rgba(31, 84, 147, 0.6);
+ --bui-bg-tint-disabled: #ebebeb;
+ --bui-bg-danger: #feebe7;
+ --bui-bg-warning: #fff2b2;
+ --bui-bg-success: #e6f6eb;
+
+ /* Foreground Colors */
+ --bui-fg-primary: var(--bui-black);
+ --bui-fg-secondary: var(--bui-gray-7);
+ --bui-fg-link: #1f5493;
+ --bui-fg-link-hover: #1f2d5c;
+ --bui-fg-disabled: #9e9e9e;
+ --bui-fg-solid: var(--bui-white);
+ --bui-fg-solid-disabled: #9c9c9c;
+ --bui-fg-tint: #1f5493;
+ --bui-fg-tint-disabled: var(--bui-gray-5);
+ --bui-fg-danger: #e22b2b;
+ --bui-fg-warning: #e36d05;
+ --bui-fg-success: #1db954;
+
+ /* Border Colors */
+ --bui-border: rgba(0, 0, 0, 0.1);
+ --bui-border-hover: rgba(0, 0, 0, 0.2);
+ --bui-border-pressed: rgba(0, 0, 0, 0.4);
+ --bui-border-disabled: rgba(0, 0, 0, 0.1);
+ --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-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+ }
+
+ /* Dark theme tokens */
+ [data-theme-mode='dark'] {
+ /* Gray scale */
+ --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;
+
+ /* Background Colors */
+ --bui-bg: #333333;
+ --bui-bg-surface-1: #424242;
+ --bui-bg-surface-2: var(--bui-gray-2);
+ --bui-bg-solid: #9cc9ff;
+ --bui-bg-solid-hover: #83b9fd;
+ --bui-bg-solid-pressed: #83b9fd;
+ --bui-bg-solid-disabled: #222222;
+ --bui-bg-tint: transparent;
+ --bui-bg-tint-hover: rgba(156, 201, 255, 0.12);
+ --bui-bg-tint-pressed: rgba(156, 201, 255, 0.16);
+ --bui-bg-tint-disabled: transparent;
+ --bui-bg-danger: #3b1219;
+ --bui-bg-warning: #302008;
+ --bui-bg-success: #132d21;
+
+ /* Foreground Colors */
+ --bui-fg-primary: var(--bui-white);
+ --bui-fg-secondary: var(--bui-gray-7);
+ --bui-fg-link: #9cc9ff;
+ --bui-fg-link-hover: #7eb5f7;
+ --bui-fg-disabled: var(--bui-gray-7);
+ --bui-fg-solid: #101821;
+ --bui-fg-solid-disabled: var(--bui-gray-5);
+ --bui-fg-tint: #9cc9ff;
+ --bui-fg-tint-disabled: var(--bui-gray-5);
+ --bui-fg-danger: #e22b2b;
+ --bui-fg-warning: #e36d05;
+ --bui-fg-success: #1db954;
+
+ /* Border Colors */
+ --bui-border: rgba(255, 255, 255, 0.12);
+ --bui-border-hover: rgba(255, 255, 255, 0.4);
+ --bui-border-pressed: rgba(255, 255, 255, 0.5);
+ --bui-border-disabled: rgba(255, 255, 255, 0.2);
+ --bui-border-danger: #f87a7a;
+ --bui-border-warning: #e36d05;
+ --bui-border-success: #53db83;
+
+ /* Special Colors */
+ --bui-ring: #1f5493;
+ --bui-scrollbar: #3636363a;
+ --bui-scrollbar-thumb: #575757;
+ }
+}
diff --git a/packages/ui/src/css/utilities.css b/packages/ui/src/css/utilities.css
deleted file mode 100644
index 226e30722b..0000000000
--- a/packages/ui/src/css/utilities.css
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * 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.
- */
-
-/* Padding */
-@import './utilities/p.css';
-@import './utilities/pl.css';
-@import './utilities/pr.css';
-@import './utilities/pt.css';
-@import './utilities/pb.css';
-@import './utilities/py.css';
-@import './utilities/px.css';
-
-/* Margin */
-@import './utilities/m.css';
-@import './utilities/ml.css';
-@import './utilities/mr.css';
-@import './utilities/mt.css';
-@import './utilities/mb.css';
-@import './utilities/my.css';
-@import './utilities/mx.css';
-
-/* Display */
-@import './utilities/display.css';
-
-/* Width */
-@import './utilities/width.css';
-
-/* Height */
-@import './utilities/height.css';
-
-/* Position */
-@import './utilities/position.css';
-
-/* Grid */
-@import './utilities/grid.css';
-
-/* Gap */
-@import './utilities/gap.css';
-
-/* Flex */
-@import './utilities/flex.css';
diff --git a/packages/ui/src/css/utilities/display.css b/packages/ui/src/css/utilities/display.css
index 179d80f860..437fb26993 100644
--- a/packages/ui/src/css/utilities/display.css
+++ b/packages/ui/src/css/utilities/display.css
@@ -1,110 +1,128 @@
-.bui-display-none {
- display: none;
-}
+/*
+ * 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.
+ */
-.bui-display-inline {
- display: inline;
-}
-
-.bui-display-inline-block {
- display: inline-block;
-}
-
-.bui-display-block {
- display: block;
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-display-none {
+@layer utilities {
+ .bui-display-none {
display: none;
}
- .xs\:bui-display-inline {
+ .bui-display-inline {
display: inline;
}
- .xs\:bui-display-inline-block {
+ .bui-display-inline-block {
display: inline-block;
}
- .xs\:bui-display-block {
+ .bui-display-block {
display: block;
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-display-none {
- display: none;
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-display-none {
+ display: none;
+ }
+
+ .xs\:bui-display-inline {
+ display: inline;
+ }
+
+ .xs\:bui-display-inline-block {
+ display: inline-block;
+ }
+
+ .xs\:bui-display-block {
+ display: block;
+ }
}
- .sm\:bui-display-inline {
- display: inline;
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-display-none {
+ display: none;
+ }
+
+ .sm\:bui-display-inline {
+ display: inline;
+ }
+
+ .sm\:bui-display-inline-block {
+ display: inline-block;
+ }
+
+ .sm\:bui-display-block {
+ display: block;
+ }
}
- .sm\:bui-display-inline-block {
- display: inline-block;
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-display-none {
+ display: none;
+ }
+
+ .md\:bui-display-inline {
+ display: inline;
+ }
+
+ .md\:bui-display-inline-block {
+ display: inline-block;
+ }
+
+ .md\:bui-display-block {
+ display: block;
+ }
}
- .sm\:bui-display-block {
- display: block;
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-display-none {
- display: none;
- }
-
- .md\:bui-display-inline {
- display: inline;
- }
-
- .md\:bui-display-inline-block {
- display: inline-block;
- }
-
- .md\:bui-display-block {
- display: block;
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-display-none {
- display: none;
- }
-
- .lg\:bui-display-inline {
- display: inline;
- }
-
- .lg\:bui-display-inline-block {
- display: inline-block;
- }
-
- .lg\:bui-display-block {
- display: block;
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-display-none {
- display: none;
- }
-
- .xl\:bui-display-inline {
- display: inline;
- }
-
- .xl\:bui-display-inline-block {
- display: inline-block;
- }
-
- .xl\:bui-display-block {
- display: block;
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-display-none {
+ display: none;
+ }
+
+ .lg\:bui-display-inline {
+ display: inline;
+ }
+
+ .lg\:bui-display-inline-block {
+ display: inline-block;
+ }
+
+ .lg\:bui-display-block {
+ display: block;
+ }
+ }
+
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-display-none {
+ display: none;
+ }
+
+ .xl\:bui-display-inline {
+ display: inline;
+ }
+
+ .xl\:bui-display-inline-block {
+ display: inline-block;
+ }
+
+ .xl\:bui-display-block {
+ display: block;
+ }
}
}
diff --git a/packages/ui/src/css/utilities/flex.css b/packages/ui/src/css/utilities/flex.css
index fa2b7b5ff2..2248addfee 100644
--- a/packages/ui/src/css/utilities/flex.css
+++ b/packages/ui/src/css/utilities/flex.css
@@ -1,306 +1,324 @@
-.bui-align-start {
- align-items: start;
-}
+/*
+ * 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.
+ */
-.bui-align-center {
- align-items: center;
-}
-
-.bui-align-end {
- align-items: end;
-}
-
-.bui-align-baseline {
- align-items: baseline;
-}
-
-.bui-align-stretch {
- align-items: stretch;
-}
-
-.bui-jc-start {
- justify-content: start;
-}
-
-.bui-jc-center {
- justify-content: center;
-}
-
-.bui-jc-end {
- justify-content: end;
-}
-
-.bui-jc-between {
- justify-content: space-between;
-}
-
-.bui-fd-row {
- flex-direction: row;
-}
-
-.bui-fd-column {
- flex-direction: column;
-}
-
-.bui-fd-row-reverse {
- flex-direction: row-reverse;
-}
-
-.bui-fd-column-reverse {
- flex-direction: column-reverse;
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-align-start {
+@layer utilities {
+ .bui-align-start {
align-items: start;
}
- .xs\:bui-align-center {
+ .bui-align-center {
align-items: center;
}
- .xs\:bui-align-end {
+ .bui-align-end {
align-items: end;
}
- .xs\:bui-align-stretch {
+ .bui-align-baseline {
+ align-items: baseline;
+ }
+
+ .bui-align-stretch {
align-items: stretch;
}
- .xs\:bui-jc-start {
+ .bui-jc-start {
justify-content: start;
}
- .xs\:bui-jc-center {
+ .bui-jc-center {
justify-content: center;
}
- .xs\:bui-jc-end {
+ .bui-jc-end {
justify-content: end;
}
- .xs\:bui-jc-between {
+ .bui-jc-between {
justify-content: space-between;
}
- .xs\:bui-fd-row {
+ .bui-fd-row {
flex-direction: row;
}
- .xs\:bui-fd-column {
+ .bui-fd-column {
flex-direction: column;
}
- .xs\:bui-fd-row-reverse {
+ .bui-fd-row-reverse {
flex-direction: row-reverse;
}
- .xs\:bui-fd-column-reverse {
+ .bui-fd-column-reverse {
flex-direction: column-reverse;
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-align-start {
- align-items: start;
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-align-start {
+ align-items: start;
+ }
+
+ .xs\:bui-align-center {
+ align-items: center;
+ }
+
+ .xs\:bui-align-end {
+ align-items: end;
+ }
+
+ .xs\:bui-align-stretch {
+ align-items: stretch;
+ }
+
+ .xs\:bui-jc-start {
+ justify-content: start;
+ }
+
+ .xs\:bui-jc-center {
+ justify-content: center;
+ }
+
+ .xs\:bui-jc-end {
+ justify-content: end;
+ }
+
+ .xs\:bui-jc-between {
+ justify-content: space-between;
+ }
+
+ .xs\:bui-fd-row {
+ flex-direction: row;
+ }
+
+ .xs\:bui-fd-column {
+ flex-direction: column;
+ }
+
+ .xs\:bui-fd-row-reverse {
+ flex-direction: row-reverse;
+ }
+
+ .xs\:bui-fd-column-reverse {
+ flex-direction: column-reverse;
+ }
}
- .sm\:bui-align-center {
- align-items: center;
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-align-start {
+ align-items: start;
+ }
+
+ .sm\:bui-align-center {
+ align-items: center;
+ }
+
+ .sm\:bui-align-end {
+ align-items: end;
+ }
+
+ .sm\:bui-align-stretch {
+ align-items: stretch;
+ }
+
+ .sm\:bui-jc-start {
+ justify-content: start;
+ }
+
+ .sm\:bui-jc-center {
+ justify-content: center;
+ }
+
+ .sm\:bui-jc-end {
+ justify-content: end;
+ }
+
+ .sm\:bui-jc-between {
+ justify-content: space-between;
+ }
+
+ .sm\:bui-fd-row {
+ flex-direction: row;
+ }
+
+ .sm\:bui-fd-column {
+ flex-direction: column;
+ }
+
+ .sm\:bui-fd-row-reverse {
+ flex-direction: row-reverse;
+ }
+
+ .sm\:bui-fd-column-reverse {
+ flex-direction: column-reverse;
+ }
}
- .sm\:bui-align-end {
- align-items: end;
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-align-start {
+ align-items: start;
+ }
+
+ .md\:bui-align-center {
+ align-items: center;
+ }
+
+ .md\:bui-align-end {
+ align-items: end;
+ }
+
+ .md\:bui-align-stretch {
+ align-items: stretch;
+ }
+
+ .md\:bui-jc-start {
+ justify-content: start;
+ }
+
+ .md\:bui-jc-center {
+ justify-content: center;
+ }
+
+ .md\:bui-jc-end {
+ justify-content: end;
+ }
+
+ .md\:bui-jc-between {
+ justify-content: space-between;
+ }
+
+ .md\:bui-fd-row {
+ flex-direction: row;
+ }
+
+ .md\:bui-fd-column {
+ flex-direction: column;
+ }
+
+ .md\:bui-fd-row-reverse {
+ flex-direction: row-reverse;
+ }
+
+ .md\:bui-fd-column-reverse {
+ flex-direction: column-reverse;
+ }
}
- .sm\:bui-align-stretch {
- align-items: stretch;
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-align-start {
+ align-items: start;
+ }
+
+ .lg\:bui-align-center {
+ align-items: center;
+ }
+
+ .lg\:bui-align-end {
+ align-items: end;
+ }
+
+ .lg\:bui-align-stretch {
+ align-items: stretch;
+ }
+
+ .lg\:bui-jc-start {
+ justify-content: start;
+ }
+
+ .lg\:bui-jc-center {
+ justify-content: center;
+ }
+
+ .lg\:bui-jc-end {
+ justify-content: end;
+ }
+
+ .lg\:bui-jc-between {
+ justify-content: space-between;
+ }
+
+ .lg\:bui-fd-row {
+ flex-direction: row;
+ }
+
+ .lg\:bui-fd-column {
+ flex-direction: column;
+ }
+
+ .lg\:bui-fd-row-reverse {
+ flex-direction: row-reverse;
+ }
+
+ .lg\:bui-fd-column-reverse {
+ flex-direction: column-reverse;
+ }
}
- .sm\:bui-jc-start {
- justify-content: start;
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-align-start {
+ align-items: start;
+ }
- .sm\:bui-jc-center {
- justify-content: center;
- }
+ .xl\:bui-align-center {
+ align-items: center;
+ }
- .sm\:bui-jc-end {
- justify-content: end;
- }
+ .xl\:bui-align-end {
+ align-items: end;
+ }
- .sm\:bui-jc-between {
- justify-content: space-between;
- }
+ .xl\:bui-align-stretch {
+ align-items: stretch;
+ }
- .sm\:bui-fd-row {
- flex-direction: row;
- }
+ .xl\:bui-jc-start {
+ justify-content: start;
+ }
- .sm\:bui-fd-column {
- flex-direction: column;
- }
+ .xl\:bui-jc-center {
+ justify-content: center;
+ }
- .sm\:bui-fd-row-reverse {
- flex-direction: row-reverse;
- }
+ .xl\:bui-jc-end {
+ justify-content: end;
+ }
- .sm\:bui-fd-column-reverse {
- flex-direction: column-reverse;
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-align-start {
- align-items: start;
- }
-
- .md\:bui-align-center {
- align-items: center;
- }
-
- .md\:bui-align-end {
- align-items: end;
- }
-
- .md\:bui-align-stretch {
- align-items: stretch;
- }
-
- .md\:bui-jc-start {
- justify-content: start;
- }
-
- .md\:bui-jc-center {
- justify-content: center;
- }
-
- .md\:bui-jc-end {
- justify-content: end;
- }
-
- .md\:bui-jc-between {
- justify-content: space-between;
- }
-
- .md\:bui-fd-row {
- flex-direction: row;
- }
-
- .md\:bui-fd-column {
- flex-direction: column;
- }
-
- .md\:bui-fd-row-reverse {
- flex-direction: row-reverse;
- }
-
- .md\:bui-fd-column-reverse {
- flex-direction: column-reverse;
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-align-start {
- align-items: start;
- }
-
- .lg\:bui-align-center {
- align-items: center;
- }
-
- .lg\:bui-align-end {
- align-items: end;
- }
-
- .lg\:bui-align-stretch {
- align-items: stretch;
- }
-
- .lg\:bui-jc-start {
- justify-content: start;
- }
-
- .lg\:bui-jc-center {
- justify-content: center;
- }
-
- .lg\:bui-jc-end {
- justify-content: end;
- }
-
- .lg\:bui-jc-between {
- justify-content: space-between;
- }
-
- .lg\:bui-fd-row {
- flex-direction: row;
- }
-
- .lg\:bui-fd-column {
- flex-direction: column;
- }
-
- .lg\:bui-fd-row-reverse {
- flex-direction: row-reverse;
- }
-
- .lg\:bui-fd-column-reverse {
- flex-direction: column-reverse;
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-align-start {
- align-items: start;
- }
-
- .xl\:bui-align-center {
- align-items: center;
- }
-
- .xl\:bui-align-end {
- align-items: end;
- }
-
- .xl\:bui-align-stretch {
- align-items: stretch;
- }
-
- .xl\:bui-jc-start {
- justify-content: start;
- }
-
- .xl\:bui-jc-center {
- justify-content: center;
- }
-
- .xl\:bui-jc-end {
- justify-content: end;
- }
-
- .xl\:bui-jc-between {
- justify-content: space-between;
- }
-
- .xl\:bui-fd-row {
- flex-direction: row;
- }
-
- .xl\:bui-fd-column {
- flex-direction: column;
- }
-
- .xl\:bui-fd-row-reverse {
- flex-direction: row-reverse;
- }
-
- .xl\:bui-fd-column-reverse {
- flex-direction: column-reverse;
+ .xl\:bui-jc-between {
+ justify-content: space-between;
+ }
+
+ .xl\:bui-fd-row {
+ flex-direction: row;
+ }
+
+ .xl\:bui-fd-column {
+ flex-direction: column;
+ }
+
+ .xl\:bui-fd-row-reverse {
+ flex-direction: row-reverse;
+ }
+
+ .xl\:bui-fd-column-reverse {
+ flex-direction: column-reverse;
+ }
}
}
diff --git a/packages/ui/src/css/utilities/gap.css b/packages/ui/src/css/utilities/gap.css
index ec4168fa6b..f9ea4f97d9 100644
--- a/packages/ui/src/css/utilities/gap.css
+++ b/packages/ui/src/css/utilities/gap.css
@@ -1,422 +1,440 @@
-.bui-gap {
- gap: var(--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.
+ */
-.bui-gap-0\.5 {
- gap: var(--bui-space-0_5);
-}
-
-.bui-gap-1 {
- gap: var(--bui-space-1);
-}
-
-.bui-gap-1\.5 {
- gap: var(--bui-space-1_5);
-}
-
-.bui-gap-2 {
- gap: var(--bui-space-2);
-}
-
-.bui-gap-3 {
- gap: var(--bui-space-3);
-}
-
-.bui-gap-4 {
- gap: var(--bui-space-4);
-}
-
-.bui-gap-5 {
- gap: var(--bui-space-5);
-}
-
-.bui-gap-6 {
- gap: var(--bui-space-6);
-}
-
-.bui-gap-7 {
- gap: var(--bui-space-7);
-}
-
-.bui-gap-8 {
- gap: var(--bui-space-8);
-}
-
-.bui-gap-9 {
- gap: var(--bui-space-9);
-}
-
-.bui-gap-10 {
- gap: var(--bui-space-10);
-}
-
-.bui-gap-11 {
- gap: var(--bui-space-11);
-}
-
-.bui-gap-12 {
- gap: var(--bui-space-12);
-}
-
-.bui-gap-13 {
- gap: var(--bui-space-13);
-}
-
-.bui-gap-14 {
- gap: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-gap {
- gap: var(--gap-xs);
+@layer utilities {
+ .bui-gap {
+ gap: var(--gap);
}
- .xs\:bui-gap-0\.5 {
+ .bui-gap-0\.5 {
gap: var(--bui-space-0_5);
}
- .xs\:bui-gap-1 {
+ .bui-gap-1 {
gap: var(--bui-space-1);
}
- .xs\:bui-gap-1\.5 {
+ .bui-gap-1\.5 {
gap: var(--bui-space-1_5);
}
- .xs\:bui-gap-2 {
+ .bui-gap-2 {
gap: var(--bui-space-2);
}
- .xs\:bui-gap-3 {
+ .bui-gap-3 {
gap: var(--bui-space-3);
}
- .xs\:bui-gap-4 {
+ .bui-gap-4 {
gap: var(--bui-space-4);
}
- .xs\:bui-gap-5 {
+ .bui-gap-5 {
gap: var(--bui-space-5);
}
- .xs\:bui-gap-6 {
+ .bui-gap-6 {
gap: var(--bui-space-6);
}
- .xs\:bui-gap-7 {
+ .bui-gap-7 {
gap: var(--bui-space-7);
}
- .xs\:bui-gap-8 {
+ .bui-gap-8 {
gap: var(--bui-space-8);
}
- .xs\:bui-gap-9 {
+ .bui-gap-9 {
gap: var(--bui-space-9);
}
- .xs\:bui-gap-10 {
+ .bui-gap-10 {
gap: var(--bui-space-10);
}
- .xs\:bui-gap-11 {
+ .bui-gap-11 {
gap: var(--bui-space-11);
}
- .xs\:bui-gap-12 {
+ .bui-gap-12 {
gap: var(--bui-space-12);
}
- .xs\:bui-gap-13 {
+ .bui-gap-13 {
gap: var(--bui-space-13);
}
- .xs\:bui-gap-14 {
+ .bui-gap-14 {
gap: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-gap {
- gap: var(--gap-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-gap {
+ gap: var(--gap-xs);
+ }
+
+ .xs\:bui-gap-0\.5 {
+ gap: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-gap-1 {
+ gap: var(--bui-space-1);
+ }
+
+ .xs\:bui-gap-1\.5 {
+ gap: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-gap-2 {
+ gap: var(--bui-space-2);
+ }
+
+ .xs\:bui-gap-3 {
+ gap: var(--bui-space-3);
+ }
+
+ .xs\:bui-gap-4 {
+ gap: var(--bui-space-4);
+ }
+
+ .xs\:bui-gap-5 {
+ gap: var(--bui-space-5);
+ }
+
+ .xs\:bui-gap-6 {
+ gap: var(--bui-space-6);
+ }
+
+ .xs\:bui-gap-7 {
+ gap: var(--bui-space-7);
+ }
+
+ .xs\:bui-gap-8 {
+ gap: var(--bui-space-8);
+ }
+
+ .xs\:bui-gap-9 {
+ gap: var(--bui-space-9);
+ }
+
+ .xs\:bui-gap-10 {
+ gap: var(--bui-space-10);
+ }
+
+ .xs\:bui-gap-11 {
+ gap: var(--bui-space-11);
+ }
+
+ .xs\:bui-gap-12 {
+ gap: var(--bui-space-12);
+ }
+
+ .xs\:bui-gap-13 {
+ gap: var(--bui-space-13);
+ }
+
+ .xs\:bui-gap-14 {
+ gap: var(--bui-space-14);
+ }
}
- .sm\:bui-gap-0\.5 {
- gap: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-gap {
+ gap: var(--gap-sm);
+ }
+
+ .sm\:bui-gap-0\.5 {
+ gap: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-gap-1 {
+ gap: var(--bui-space-1);
+ }
+
+ .sm\:bui-gap-1\.5 {
+ gap: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-gap-2 {
+ gap: var(--bui-space-2);
+ }
+
+ .sm\:bui-gap-3 {
+ gap: var(--bui-space-3);
+ }
+
+ .sm\:bui-gap-4 {
+ gap: var(--bui-space-4);
+ }
+
+ .sm\:bui-gap-5 {
+ gap: var(--bui-space-5);
+ }
+
+ .sm\:bui-gap-6 {
+ gap: var(--bui-space-6);
+ }
+
+ .sm\:bui-gap-7 {
+ gap: var(--bui-space-7);
+ }
+
+ .sm\:bui-gap-8 {
+ gap: var(--bui-space-8);
+ }
+
+ .sm\:bui-gap-9 {
+ gap: var(--bui-space-9);
+ }
+
+ .sm\:bui-gap-10 {
+ gap: var(--bui-space-10);
+ }
+
+ .sm\:bui-gap-11 {
+ gap: var(--bui-space-11);
+ }
+
+ .sm\:bui-gap-12 {
+ gap: var(--bui-space-12);
+ }
+
+ .sm\:bui-gap-13 {
+ gap: var(--bui-space-13);
+ }
+
+ .sm\:bui-gap-14 {
+ gap: var(--bui-space-14);
+ }
}
- .sm\:bui-gap-1 {
- gap: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-gap {
+ gap: var(--gap-md);
+ }
+
+ .md\:bui-gap-0\.5 {
+ gap: var(--bui-space-0_5);
+ }
+
+ .md\:bui-gap-1 {
+ gap: var(--bui-space-1);
+ }
+
+ .md\:bui-gap-1\.5 {
+ gap: var(--bui-space-1_5);
+ }
+
+ .md\:bui-gap-2 {
+ gap: var(--bui-space-2);
+ }
+
+ .md\:bui-gap-3 {
+ gap: var(--bui-space-3);
+ }
+
+ .md\:bui-gap-4 {
+ gap: var(--bui-space-4);
+ }
+
+ .md\:bui-gap-5 {
+ gap: var(--bui-space-5);
+ }
+
+ .md\:bui-gap-6 {
+ gap: var(--bui-space-6);
+ }
+
+ .md\:bui-gap-7 {
+ gap: var(--bui-space-7);
+ }
+
+ .md\:bui-gap-8 {
+ gap: var(--bui-space-8);
+ }
+
+ .md\:bui-gap-9 {
+ gap: var(--bui-space-9);
+ }
+
+ .md\:bui-gap-10 {
+ gap: var(--bui-space-10);
+ }
+
+ .md\:bui-gap-11 {
+ gap: var(--bui-space-11);
+ }
+
+ .md\:bui-gap-12 {
+ gap: var(--bui-space-12);
+ }
+
+ .md\:bui-gap-13 {
+ gap: var(--bui-space-13);
+ }
+
+ .md\:bui-gap-14 {
+ gap: var(--bui-space-14);
+ }
}
- .sm\:bui-gap-1\.5 {
- gap: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-gap {
+ gap: var(--gap-lg);
+ }
+
+ .lg\:bui-gap-0\.5 {
+ gap: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-gap-1 {
+ gap: var(--bui-space-1);
+ }
+
+ .lg\:bui-gap-1\.5 {
+ gap: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-gap-2 {
+ gap: var(--bui-space-2);
+ }
+
+ .lg\:bui-gap-3 {
+ gap: var(--bui-space-3);
+ }
+
+ .lg\:bui-gap-4 {
+ gap: var(--bui-space-4);
+ }
+
+ .lg\:bui-gap-5 {
+ gap: var(--bui-space-5);
+ }
+
+ .lg\:bui-gap-6 {
+ gap: var(--bui-space-6);
+ }
+
+ .lg\:bui-gap-7 {
+ gap: var(--bui-space-7);
+ }
+
+ .lg\:bui-gap-8 {
+ gap: var(--bui-space-8);
+ }
+
+ .lg\:bui-gap-9 {
+ gap: var(--bui-space-9);
+ }
+
+ .lg\:bui-gap-10 {
+ gap: var(--bui-space-10);
+ }
+
+ .lg\:bui-gap-11 {
+ gap: var(--bui-space-11);
+ }
+
+ .lg\:bui-gap-12 {
+ gap: var(--bui-space-12);
+ }
+
+ .lg\:bui-gap-13 {
+ gap: var(--bui-space-13);
+ }
+
+ .lg\:bui-gap-14 {
+ gap: var(--bui-space-14);
+ }
}
- .sm\:bui-gap-2 {
- gap: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-gap {
+ gap: var(--gap-xl);
+ }
- .sm\:bui-gap-3 {
- gap: var(--bui-space-3);
- }
+ .xl\:bui-gap-0\.5 {
+ gap: var(--bui-space-0_5);
+ }
- .sm\:bui-gap-4 {
- gap: var(--bui-space-4);
- }
+ .xl\:bui-gap-1 {
+ gap: var(--bui-space-1);
+ }
- .sm\:bui-gap-5 {
- gap: var(--bui-space-5);
- }
+ .xl\:bui-gap-1\.5 {
+ gap: var(--bui-space-1_5);
+ }
- .sm\:bui-gap-6 {
- gap: var(--bui-space-6);
- }
+ .xl\:bui-gap-2 {
+ gap: var(--bui-space-2);
+ }
- .sm\:bui-gap-7 {
- gap: var(--bui-space-7);
- }
+ .xl\:bui-gap-3 {
+ gap: var(--bui-space-3);
+ }
- .sm\:bui-gap-8 {
- gap: var(--bui-space-8);
- }
+ .xl\:bui-gap-4 {
+ gap: var(--bui-space-4);
+ }
- .sm\:bui-gap-9 {
- gap: var(--bui-space-9);
- }
+ .xl\:bui-gap-5 {
+ gap: var(--bui-space-5);
+ }
- .sm\:bui-gap-10 {
- gap: var(--bui-space-10);
- }
+ .xl\:bui-gap-6 {
+ gap: var(--bui-space-6);
+ }
- .sm\:bui-gap-11 {
- gap: var(--bui-space-11);
- }
+ .xl\:bui-gap-7 {
+ gap: var(--bui-space-7);
+ }
- .sm\:bui-gap-12 {
- gap: var(--bui-space-12);
- }
+ .xl\:bui-gap-8 {
+ gap: var(--bui-space-8);
+ }
- .sm\:bui-gap-13 {
- gap: var(--bui-space-13);
- }
+ .xl\:bui-gap-9 {
+ gap: var(--bui-space-9);
+ }
- .sm\:bui-gap-14 {
- gap: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-gap {
- gap: var(--gap-md);
- }
-
- .md\:bui-gap-0\.5 {
- gap: var(--bui-space-0_5);
- }
-
- .md\:bui-gap-1 {
- gap: var(--bui-space-1);
- }
-
- .md\:bui-gap-1\.5 {
- gap: var(--bui-space-1_5);
- }
-
- .md\:bui-gap-2 {
- gap: var(--bui-space-2);
- }
-
- .md\:bui-gap-3 {
- gap: var(--bui-space-3);
- }
-
- .md\:bui-gap-4 {
- gap: var(--bui-space-4);
- }
-
- .md\:bui-gap-5 {
- gap: var(--bui-space-5);
- }
-
- .md\:bui-gap-6 {
- gap: var(--bui-space-6);
- }
-
- .md\:bui-gap-7 {
- gap: var(--bui-space-7);
- }
-
- .md\:bui-gap-8 {
- gap: var(--bui-space-8);
- }
-
- .md\:bui-gap-9 {
- gap: var(--bui-space-9);
- }
-
- .md\:bui-gap-10 {
- gap: var(--bui-space-10);
- }
-
- .md\:bui-gap-11 {
- gap: var(--bui-space-11);
- }
-
- .md\:bui-gap-12 {
- gap: var(--bui-space-12);
- }
-
- .md\:bui-gap-13 {
- gap: var(--bui-space-13);
- }
-
- .md\:bui-gap-14 {
- gap: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-gap {
- gap: var(--gap-lg);
- }
-
- .lg\:bui-gap-0\.5 {
- gap: var(--bui-space-0_5);
- }
-
- .lg\:bui-gap-1 {
- gap: var(--bui-space-1);
- }
-
- .lg\:bui-gap-1\.5 {
- gap: var(--bui-space-1_5);
- }
-
- .lg\:bui-gap-2 {
- gap: var(--bui-space-2);
- }
-
- .lg\:bui-gap-3 {
- gap: var(--bui-space-3);
- }
-
- .lg\:bui-gap-4 {
- gap: var(--bui-space-4);
- }
-
- .lg\:bui-gap-5 {
- gap: var(--bui-space-5);
- }
-
- .lg\:bui-gap-6 {
- gap: var(--bui-space-6);
- }
-
- .lg\:bui-gap-7 {
- gap: var(--bui-space-7);
- }
-
- .lg\:bui-gap-8 {
- gap: var(--bui-space-8);
- }
-
- .lg\:bui-gap-9 {
- gap: var(--bui-space-9);
- }
-
- .lg\:bui-gap-10 {
- gap: var(--bui-space-10);
- }
-
- .lg\:bui-gap-11 {
- gap: var(--bui-space-11);
- }
-
- .lg\:bui-gap-12 {
- gap: var(--bui-space-12);
- }
-
- .lg\:bui-gap-13 {
- gap: var(--bui-space-13);
- }
-
- .lg\:bui-gap-14 {
- gap: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-gap {
- gap: var(--gap-xl);
- }
-
- .xl\:bui-gap-0\.5 {
- gap: var(--bui-space-0_5);
- }
-
- .xl\:bui-gap-1 {
- gap: var(--bui-space-1);
- }
-
- .xl\:bui-gap-1\.5 {
- gap: var(--bui-space-1_5);
- }
-
- .xl\:bui-gap-2 {
- gap: var(--bui-space-2);
- }
-
- .xl\:bui-gap-3 {
- gap: var(--bui-space-3);
- }
-
- .xl\:bui-gap-4 {
- gap: var(--bui-space-4);
- }
-
- .xl\:bui-gap-5 {
- gap: var(--bui-space-5);
- }
-
- .xl\:bui-gap-6 {
- gap: var(--bui-space-6);
- }
-
- .xl\:bui-gap-7 {
- gap: var(--bui-space-7);
- }
-
- .xl\:bui-gap-8 {
- gap: var(--bui-space-8);
- }
-
- .xl\:bui-gap-9 {
- gap: var(--bui-space-9);
- }
-
- .xl\:bui-gap-10 {
- gap: var(--bui-space-10);
- }
-
- .xl\:bui-gap-11 {
- gap: var(--bui-space-11);
- }
-
- .xl\:bui-gap-12 {
- gap: var(--bui-space-12);
- }
-
- .xl\:bui-gap-13 {
- gap: var(--bui-space-13);
- }
-
- .xl\:bui-gap-14 {
- gap: var(--bui-space-14);
+ .xl\:bui-gap-10 {
+ gap: var(--bui-space-10);
+ }
+
+ .xl\:bui-gap-11 {
+ gap: var(--bui-space-11);
+ }
+
+ .xl\:bui-gap-12 {
+ gap: var(--bui-space-12);
+ }
+
+ .xl\:bui-gap-13 {
+ gap: var(--bui-space-13);
+ }
+
+ .xl\:bui-gap-14 {
+ gap: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/grid.css b/packages/ui/src/css/utilities/grid.css
index 11de40bd7f..989a7fd88a 100644
--- a/packages/ui/src/css/utilities/grid.css
+++ b/packages/ui/src/css/utilities/grid.css
@@ -1,1292 +1,1310 @@
-.bui-columns-1 {
- grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-.bui-columns-2 {
- grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.bui-columns-3 {
- grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.bui-columns-4 {
- grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.bui-columns-5 {
- grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
-.bui-columns-6 {
- grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.bui-columns-7 {
- grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-
-.bui-columns-8 {
- grid-template-columns: repeat(8, minmax(0, 1fr));
-}
-
-.bui-columns-9 {
- grid-template-columns: repeat(9, minmax(0, 1fr));
-}
-
-.bui-columns-10 {
- grid-template-columns: repeat(10, minmax(0, 1fr));
-}
-
-.bui-columns-11 {
- grid-template-columns: repeat(11, minmax(0, 1fr));
-}
-
-.bui-columns-12 {
- grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.bui-columns-auto {
- grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-}
-
-.bui-col-span-1 {
- grid-column: span 1 / span 1;
-}
-
-.bui-col-span-2 {
- grid-column: span 2 / span 2;
-}
-
-.bui-col-span-3 {
- grid-column: span 3 / span 3;
-}
-
-.bui-col-span-4 {
- grid-column: span 4 / span 4;
-}
-
-.bui-col-span-5 {
- grid-column: span 5 / span 5;
-}
-
-.bui-col-span-6 {
- grid-column: span 6 / span 6;
-}
-
-.bui-col-span-7 {
- grid-column: span 7 / span 7;
-}
-
-.bui-col-span-8 {
- grid-column: span 8 / span 8;
-}
-
-.bui-col-span-9 {
- grid-column: span 9 / span 9;
-}
-
-.bui-col-span-10 {
- grid-column: span 10 / span 10;
-}
-
-.bui-col-span-11 {
- grid-column: span 11 / span 11;
-}
-
-.bui-col-span-12 {
- grid-column: span 12 / span 12;
-}
-
-.bui-col-span-auto {
- grid-column: span auto / span auto;
-}
-
-.bui-col-start-1 {
- grid-column-start: 1;
-}
-
-.bui-col-start-2 {
- grid-column-start: 2;
-}
-
-.bui-col-start-3 {
- grid-column-start: 3;
-}
-
-.bui-col-start-4 {
- grid-column-start: 4;
-}
-
-.bui-col-start-5 {
- grid-column-start: 5;
-}
-
-.bui-col-start-6 {
- grid-column-start: 6;
-}
-
-.bui-col-start-7 {
- grid-column-start: 7;
-}
-
-.bui-col-start-8 {
- grid-column-start: 8;
-}
-
-.bui-col-start-9 {
- grid-column-start: 9;
-}
-
-.bui-col-start-10 {
- grid-column-start: 10;
-}
-
-.bui-col-start-11 {
- grid-column-start: 11;
-}
-
-.bui-col-start-12 {
- grid-column-start: 12;
-}
-
-.bui-col-start-13 {
- grid-column-start: 13;
-}
-
-.bui-col-start-auto {
- grid-column-start: auto;
-}
-
-.bui-col-end-1 {
- grid-column-end: 1;
-}
-
-.bui-col-end-2 {
- grid-column-end: 2;
-}
-
-.bui-col-end-3 {
- grid-column-end: 3;
-}
-
-.bui-col-end-4 {
- grid-column-end: 4;
-}
-
-.bui-col-end-5 {
- grid-column-end: 5;
-}
-
-.bui-col-end-6 {
- grid-column-end: 6;
-}
-
-.bui-col-end-7 {
- grid-column-end: 7;
-}
-
-.bui-col-end-8 {
- grid-column-end: 8;
-}
-
-.bui-col-end-9 {
- grid-column-end: 9;
-}
-
-.bui-col-end-10 {
- grid-column-end: 10;
-}
-
-.bui-col-end-11 {
- grid-column-end: 11;
-}
-
-.bui-col-end-12 {
- grid-column-end: 12;
-}
-
-.bui-col-end-13 {
- grid-column-end: 13;
-}
-
-.bui-col-end-auto {
- grid-column-end: auto;
-}
-
-.bui-row-span-1 {
- grid-row: span 1 / span 1;
-}
-
-.bui-row-span-2 {
- grid-row: span 2 / span 2;
-}
-
-.bui-row-span-3 {
- grid-row: span 3 / span 3;
-}
-
-.bui-row-span-4 {
- grid-row: span 4 / span 4;
-}
-
-.bui-row-span-5 {
- grid-row: span 5 / span 5;
-}
-
-.bui-row-span-6 {
- grid-row: span 6 / span 6;
-}
-
-.bui-row-span-7 {
- grid-row: span 7 / span 7;
-}
-
-.bui-row-span-8 {
- grid-row: span 8 / span 8;
-}
-
-.bui-row-span-9 {
- grid-row: span 9 / span 9;
-}
-
-.bui-row-span-10 {
- grid-row: span 10 / span 10;
-}
-
-.bui-row-span-11 {
- grid-row: span 11 / span 11;
-}
-
-.bui-row-span-12 {
- grid-row: span 12 / span 12;
-}
-
-.bui-row-span-auto {
- grid-row: span auto / span auto;
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-columns-1 {
+/*
+ * 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));
}
- .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;
- }
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-columns-1 {
- grid-template-columns: repeat(1, minmax(0, 1fr));
- }
- .sm\:bui-columns-2 {
+ .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;
- }
-}
-/* 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 {
+ .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;
- }
-}
-/* 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 {
+ .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;
- }
-}
-/* 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 {
+ .bui-columns-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
- .xl\:bui-columns-6 {
+
+ .bui-columns-6 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
- .xl\:bui-columns-7 {
+
+ .bui-columns-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
- .xl\:bui-columns-8 {
+
+ .bui-columns-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
- .xl\:bui-columns-9 {
+
+ .bui-columns-9 {
grid-template-columns: repeat(9, minmax(0, 1fr));
}
- .xl\:bui-columns-10 {
+
+ .bui-columns-10 {
grid-template-columns: repeat(10, minmax(0, 1fr));
}
- .xl\:bui-columns-11 {
+
+ .bui-columns-11 {
grid-template-columns: repeat(11, minmax(0, 1fr));
}
- .xl\:bui-columns-12 {
+
+ .bui-columns-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
- .xl\:bui-columns-auto {
+
+ .bui-columns-auto {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
- .xl\:bui-col-span-1 {
+
+ .bui-col-span-1 {
grid-column: span 1 / span 1;
}
- .xl\:bui-col-span-2 {
+
+ .bui-col-span-2 {
grid-column: span 2 / span 2;
}
- .xl\:bui-col-span-3 {
+
+ .bui-col-span-3 {
grid-column: span 3 / span 3;
}
- .xl\:bui-col-span-4 {
+
+ .bui-col-span-4 {
grid-column: span 4 / span 4;
}
- .xl\:bui-col-span-5 {
+
+ .bui-col-span-5 {
grid-column: span 5 / span 5;
}
- .xl\:bui-col-span-6 {
+
+ .bui-col-span-6 {
grid-column: span 6 / span 6;
}
- .xl\:bui-col-span-7 {
+
+ .bui-col-span-7 {
grid-column: span 7 / span 7;
}
- .xl\:bui-col-span-8 {
+
+ .bui-col-span-8 {
grid-column: span 8 / span 8;
}
- .xl\:bui-col-span-9 {
+
+ .bui-col-span-9 {
grid-column: span 9 / span 9;
}
- .xl\:bui-col-span-10 {
+
+ .bui-col-span-10 {
grid-column: span 10 / span 10;
}
- .xl\:bui-col-span-11 {
+
+ .bui-col-span-11 {
grid-column: span 11 / span 11;
}
- .xl\:bui-col-span-12 {
+
+ .bui-col-span-12 {
grid-column: span 12 / span 12;
}
- .xl\:bui-col-span-auto {
+
+ .bui-col-span-auto {
grid-column: span auto / span auto;
}
- .xl\:bui-col-start-1 {
+
+ .bui-col-start-1 {
grid-column-start: 1;
}
- .xl\:bui-col-start-2 {
+
+ .bui-col-start-2 {
grid-column-start: 2;
}
- .xl\:bui-col-start-3 {
+
+ .bui-col-start-3 {
grid-column-start: 3;
}
- .xl\:bui-col-start-4 {
+
+ .bui-col-start-4 {
grid-column-start: 4;
}
- .xl\:bui-col-start-5 {
+
+ .bui-col-start-5 {
grid-column-start: 5;
}
- .xl\:bui-col-start-6 {
+
+ .bui-col-start-6 {
grid-column-start: 6;
}
- .xl\:bui-col-start-7 {
+
+ .bui-col-start-7 {
grid-column-start: 7;
}
- .xl\:bui-col-start-8 {
+
+ .bui-col-start-8 {
grid-column-start: 8;
}
- .xl\:bui-col-start-9 {
+
+ .bui-col-start-9 {
grid-column-start: 9;
}
- .xl\:bui-col-start-10 {
+
+ .bui-col-start-10 {
grid-column-start: 10;
}
- .xl\:bui-col-start-11 {
+
+ .bui-col-start-11 {
grid-column-start: 11;
}
- .xl\:bui-col-start-12 {
+
+ .bui-col-start-12 {
grid-column-start: 12;
}
- .xl\:bui-col-start-13 {
+
+ .bui-col-start-13 {
grid-column-start: 13;
}
- .xl\:bui-col-start-auto {
+
+ .bui-col-start-auto {
grid-column-start: auto;
}
- .xl\:bui-col-end-1 {
+
+ .bui-col-end-1 {
grid-column-end: 1;
}
- .xl\:bui-col-end-2 {
+
+ .bui-col-end-2 {
grid-column-end: 2;
}
- .xl\:bui-col-end-3 {
+
+ .bui-col-end-3 {
grid-column-end: 3;
}
- .xl\:bui-col-end-4 {
+
+ .bui-col-end-4 {
grid-column-end: 4;
}
- .xl\:bui-col-end-5 {
+
+ .bui-col-end-5 {
grid-column-end: 5;
}
- .xl\:bui-col-end-6 {
+
+ .bui-col-end-6 {
grid-column-end: 6;
}
- .xl\:bui-col-end-7 {
+
+ .bui-col-end-7 {
grid-column-end: 7;
}
- .xl\:bui-col-end-8 {
+
+ .bui-col-end-8 {
grid-column-end: 8;
}
- .xl\:bui-col-end-9 {
+
+ .bui-col-end-9 {
grid-column-end: 9;
}
- .xl\:bui-col-end-10 {
+
+ .bui-col-end-10 {
grid-column-end: 10;
}
- .xl\:bui-col-end-11 {
+
+ .bui-col-end-11 {
grid-column-end: 11;
}
- .xl\:bui-col-end-12 {
+
+ .bui-col-end-12 {
grid-column-end: 12;
}
- .xl\:bui-col-end-13 {
+
+ .bui-col-end-13 {
grid-column-end: 13;
}
- .xl\:bui-col-end-auto {
+
+ .bui-col-end-auto {
grid-column-end: auto;
}
- .xl\:bui-row-span-1 {
+
+ .bui-row-span-1 {
grid-row: span 1 / span 1;
}
- .xl\:bui-row-span-2 {
+
+ .bui-row-span-2 {
grid-row: span 2 / span 2;
}
- .xl\:bui-row-span-3 {
+
+ .bui-row-span-3 {
grid-row: span 3 / span 3;
}
- .xl\:bui-row-span-4 {
+
+ .bui-row-span-4 {
grid-row: span 4 / span 4;
}
- .xl\:bui-row-span-5 {
+
+ .bui-row-span-5 {
grid-row: span 5 / span 5;
}
- .xl\:bui-row-span-6 {
+
+ .bui-row-span-6 {
grid-row: span 6 / span 6;
}
- .xl\:bui-row-span-7 {
+
+ .bui-row-span-7 {
grid-row: span 7 / span 7;
}
- .xl\:bui-row-span-8 {
+
+ .bui-row-span-8 {
grid-row: span 8 / span 8;
}
- .xl\:bui-row-span-9 {
+
+ .bui-row-span-9 {
grid-row: span 9 / span 9;
}
- .xl\:bui-row-span-10 {
+
+ .bui-row-span-10 {
grid-row: span 10 / span 10;
}
- .xl\:bui-row-span-11 {
+
+ .bui-row-span-11 {
grid-row: span 11 / span 11;
}
- .xl\:bui-row-span-12 {
+
+ .bui-row-span-12 {
grid-row: span 12 / span 12;
}
- .xl\:bui-row-span-auto {
+
+ .bui-row-span-auto {
grid-row: span auto / span auto;
}
+
+ /* 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;
+ }
+ }
+
+ /* 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;
+ }
+ }
+
+ /* 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;
+ }
+ }
+
+ /* 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;
+ }
+ }
+
+ /* 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;
+ }
+ }
}
diff --git a/packages/ui/src/css/utilities/height.css b/packages/ui/src/css/utilities/height.css
index 5c245cbfb9..2028ed1510 100644
--- a/packages/ui/src/css/utilities/height.css
+++ b/packages/ui/src/css/utilities/height.css
@@ -1,86 +1,104 @@
-.bui-h {
- height: var(--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.
+ */
-.bui-min-h {
- min-height: var(--min-height);
-}
-
-.bui-max-h {
- max-height: var(--max-height);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-h {
+@layer utilities {
+ .bui-h {
height: var(--height);
}
- .xs\:bui-min-h {
+ .bui-min-h {
min-height: var(--min-height);
}
- .xs\:bui-max-h {
+ .bui-max-h {
max-height: var(--max-height);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-h {
- height: var(--height);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-h {
+ height: var(--height);
+ }
+
+ .xs\:bui-min-h {
+ min-height: var(--min-height);
+ }
+
+ .xs\:bui-max-h {
+ max-height: var(--max-height);
+ }
}
- .sm\:bui-min-h {
- min-height: var(--min-height);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-h {
+ height: var(--height);
+ }
+
+ .sm\:bui-min-h {
+ min-height: var(--min-height);
+ }
+
+ .sm\:bui-max-h {
+ max-height: var(--max-height);
+ }
}
- .sm\:bui-max-h {
- max-height: var(--max-height);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-h {
- height: var(--height);
- }
-
- .md\:bui-min-h {
- min-height: var(--min-height);
- }
-
- .md\:bui-max-h {
- max-height: var(--max-height);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-h {
- height: var(--height);
- }
-
- .lg\:bui-min-h {
- min-height: var(--min-height);
- }
-
- .lg\:bui-max-h {
- max-height: var(--max-height);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-h {
- height: var(--height);
- }
-
- .xl\:bui-min-h {
- min-height: var(--min-height);
- }
-
- .xl\:bui-max-h {
- max-height: var(--max-height);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-h {
+ height: var(--height);
+ }
+
+ .md\:bui-min-h {
+ min-height: var(--min-height);
+ }
+
+ .md\:bui-max-h {
+ max-height: var(--max-height);
+ }
+ }
+
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-h {
+ height: var(--height);
+ }
+
+ .lg\:bui-min-h {
+ min-height: var(--min-height);
+ }
+
+ .lg\:bui-max-h {
+ max-height: var(--max-height);
+ }
+ }
+
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-h {
+ height: var(--height);
+ }
+
+ .xl\:bui-min-h {
+ min-height: var(--min-height);
+ }
+
+ .xl\:bui-max-h {
+ max-height: var(--max-height);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/m.css b/packages/ui/src/css/utilities/m.css
index b2c1099d9b..75d150acfb 100644
--- a/packages/ui/src/css/utilities/m.css
+++ b/packages/ui/src/css/utilities/m.css
@@ -1,422 +1,440 @@
-.bui-m {
- margin: var(--m);
-}
+/*
+ * 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.
+ */
-.bui-m-0\.5 {
- margin: var(--bui-space-0_5);
-}
-
-.bui-m-1 {
- margin: var(--bui-space-1);
-}
-
-.bui-m-1\.5 {
- margin: var(--bui-space-1_5);
-}
-
-.bui-m-2 {
- margin: var(--bui-space-2);
-}
-
-.bui-m-3 {
- margin: var(--bui-space-3);
-}
-
-.bui-m-4 {
- margin: var(--bui-space-4);
-}
-
-.bui-m-5 {
- margin: var(--bui-space-5);
-}
-
-.bui-m-6 {
- margin: var(--bui-space-6);
-}
-
-.bui-m-7 {
- margin: var(--bui-space-7);
-}
-
-.bui-m-8 {
- margin: var(--bui-space-8);
-}
-
-.bui-m-9 {
- margin: var(--bui-space-9);
-}
-
-.bui-m-10 {
- margin: var(--bui-space-10);
-}
-
-.bui-m-11 {
- margin: var(--bui-space-11);
-}
-
-.bui-m-12 {
- margin: var(--bui-space-12);
-}
-
-.bui-m-13 {
- margin: var(--bui-space-13);
-}
-
-.bui-m-14 {
- margin: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-m {
- margin: var(--p-xs);
+@layer utilities {
+ .bui-m {
+ margin: var(--m);
}
- .xs\:bui-m-0\.5 {
+ .bui-m-0\.5 {
margin: var(--bui-space-0_5);
}
- .xs\:bui-m-1 {
+ .bui-m-1 {
margin: var(--bui-space-1);
}
- .xs\:bui-m-1\.5 {
+ .bui-m-1\.5 {
margin: var(--bui-space-1_5);
}
- .xs\:bui-m-2 {
+ .bui-m-2 {
margin: var(--bui-space-2);
}
- .xs\:bui-m-3 {
+ .bui-m-3 {
margin: var(--bui-space-3);
}
- .xs\:bui-m-4 {
+ .bui-m-4 {
margin: var(--bui-space-4);
}
- .xs\:bui-m-5 {
+ .bui-m-5 {
margin: var(--bui-space-5);
}
- .xs\:bui-m-6 {
+ .bui-m-6 {
margin: var(--bui-space-6);
}
- .xs\:bui-m-7 {
+ .bui-m-7 {
margin: var(--bui-space-7);
}
- .xs\:bui-m-8 {
+ .bui-m-8 {
margin: var(--bui-space-8);
}
- .xs\:bui-m-9 {
+ .bui-m-9 {
margin: var(--bui-space-9);
}
- .xs\:bui-m-10 {
+ .bui-m-10 {
margin: var(--bui-space-10);
}
- .xs\:bui-m-11 {
+ .bui-m-11 {
margin: var(--bui-space-11);
}
- .xs\:bui-m-12 {
+ .bui-m-12 {
margin: var(--bui-space-12);
}
- .xs\:bui-m-13 {
+ .bui-m-13 {
margin: var(--bui-space-13);
}
- .xs\:bui-m-14 {
+ .bui-m-14 {
margin: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-m {
- margin: var(--p-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-m {
+ margin: var(--p-xs);
+ }
+
+ .xs\:bui-m-0\.5 {
+ margin: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-m-1 {
+ margin: var(--bui-space-1);
+ }
+
+ .xs\:bui-m-1\.5 {
+ margin: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-m-2 {
+ margin: var(--bui-space-2);
+ }
+
+ .xs\:bui-m-3 {
+ margin: var(--bui-space-3);
+ }
+
+ .xs\:bui-m-4 {
+ margin: var(--bui-space-4);
+ }
+
+ .xs\:bui-m-5 {
+ margin: var(--bui-space-5);
+ }
+
+ .xs\:bui-m-6 {
+ margin: var(--bui-space-6);
+ }
+
+ .xs\:bui-m-7 {
+ margin: var(--bui-space-7);
+ }
+
+ .xs\:bui-m-8 {
+ margin: var(--bui-space-8);
+ }
+
+ .xs\:bui-m-9 {
+ margin: var(--bui-space-9);
+ }
+
+ .xs\:bui-m-10 {
+ margin: var(--bui-space-10);
+ }
+
+ .xs\:bui-m-11 {
+ margin: var(--bui-space-11);
+ }
+
+ .xs\:bui-m-12 {
+ margin: var(--bui-space-12);
+ }
+
+ .xs\:bui-m-13 {
+ margin: var(--bui-space-13);
+ }
+
+ .xs\:bui-m-14 {
+ margin: var(--bui-space-14);
+ }
}
- .sm\:bui-m-0\.5 {
- margin: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-m {
+ margin: var(--p-sm);
+ }
+
+ .sm\:bui-m-0\.5 {
+ margin: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-m-1 {
+ margin: var(--bui-space-1);
+ }
+
+ .sm\:bui-m-1\.5 {
+ margin: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-m-2 {
+ margin: var(--bui-space-2);
+ }
+
+ .sm\:bui-m-3 {
+ margin: var(--bui-space-3);
+ }
+
+ .sm\:bui-m-4 {
+ margin: var(--bui-space-4);
+ }
+
+ .sm\:bui-m-5 {
+ margin: var(--bui-space-5);
+ }
+
+ .sm\:bui-m-6 {
+ margin: var(--bui-space-6);
+ }
+
+ .sm\:bui-m-7 {
+ margin: var(--bui-space-7);
+ }
+
+ .sm\:bui-m-8 {
+ margin: var(--bui-space-8);
+ }
+
+ .sm\:bui-m-9 {
+ margin: var(--bui-space-9);
+ }
+
+ .sm\:bui-m-10 {
+ margin: var(--bui-space-10);
+ }
+
+ .sm\:bui-m-11 {
+ margin: var(--bui-space-11);
+ }
+
+ .sm\:bui-m-12 {
+ margin: var(--bui-space-12);
+ }
+
+ .sm\:bui-m-13 {
+ margin: var(--bui-space-13);
+ }
+
+ .sm\:bui-m-14 {
+ margin: var(--bui-space-14);
+ }
}
- .sm\:bui-m-1 {
- margin: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-m {
+ margin: var(--p-md);
+ }
+
+ .md\:bui-m-0\.5 {
+ margin: var(--bui-space-0_5);
+ }
+
+ .md\:bui-m-1 {
+ margin: var(--bui-space-1);
+ }
+
+ .md\:bui-m-1\.5 {
+ margin: var(--bui-space-1_5);
+ }
+
+ .md\:bui-m-2 {
+ margin: var(--bui-space-2);
+ }
+
+ .md\:bui-m-3 {
+ margin: var(--bui-space-3);
+ }
+
+ .md\:bui-m-4 {
+ margin: var(--bui-space-4);
+ }
+
+ .md\:bui-m-5 {
+ margin: var(--bui-space-5);
+ }
+
+ .md\:bui-m-6 {
+ margin: var(--bui-space-6);
+ }
+
+ .md\:bui-m-7 {
+ margin: var(--bui-space-7);
+ }
+
+ .md\:bui-m-8 {
+ margin: var(--bui-space-8);
+ }
+
+ .md\:bui-m-9 {
+ margin: var(--bui-space-9);
+ }
+
+ .md\:bui-m-10 {
+ margin: var(--bui-space-10);
+ }
+
+ .md\:bui-m-11 {
+ margin: var(--bui-space-11);
+ }
+
+ .md\:bui-m-12 {
+ margin: var(--bui-space-12);
+ }
+
+ .md\:bui-m-13 {
+ margin: var(--bui-space-13);
+ }
+
+ .md\:bui-m-14 {
+ margin: var(--bui-space-14);
+ }
}
- .sm\:bui-m-1\.5 {
- margin: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-m {
+ margin: var(--p-lg);
+ }
+
+ .lg\:bui-m-0\.5 {
+ margin: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-m-1 {
+ margin: var(--bui-space-1);
+ }
+
+ .lg\:bui-m-1\.5 {
+ margin: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-m-2 {
+ margin: var(--bui-space-2);
+ }
+
+ .lg\:bui-m-3 {
+ margin: var(--bui-space-3);
+ }
+
+ .lg\:bui-m-4 {
+ margin: var(--bui-space-4);
+ }
+
+ .lg\:bui-m-5 {
+ margin: var(--bui-space-5);
+ }
+
+ .lg\:bui-m-6 {
+ margin: var(--bui-space-6);
+ }
+
+ .lg\:bui-m-7 {
+ margin: var(--bui-space-7);
+ }
+
+ .lg\:bui-m-8 {
+ margin: var(--bui-space-8);
+ }
+
+ .lg\:bui-m-9 {
+ margin: var(--bui-space-9);
+ }
+
+ .lg\:bui-m-10 {
+ margin: var(--bui-space-10);
+ }
+
+ .lg\:bui-m-11 {
+ margin: var(--bui-space-11);
+ }
+
+ .lg\:bui-m-12 {
+ margin: var(--bui-space-12);
+ }
+
+ .lg\:bui-m-13 {
+ margin: var(--bui-space-13);
+ }
+
+ .lg\:bui-m-14 {
+ margin: var(--bui-space-14);
+ }
}
- .sm\:bui-m-2 {
- margin: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-m {
+ margin: var(--p-xl);
+ }
- .sm\:bui-m-3 {
- margin: var(--bui-space-3);
- }
+ .xl\:bui-m-0\.5 {
+ margin: var(--bui-space-0_5);
+ }
- .sm\:bui-m-4 {
- margin: var(--bui-space-4);
- }
+ .xl\:bui-m-1 {
+ margin: var(--bui-space-1);
+ }
- .sm\:bui-m-5 {
- margin: var(--bui-space-5);
- }
+ .xl\:bui-m-1\.5 {
+ margin: var(--bui-space-1_5);
+ }
- .sm\:bui-m-6 {
- margin: var(--bui-space-6);
- }
+ .xl\:bui-m-2 {
+ margin: var(--bui-space-2);
+ }
- .sm\:bui-m-7 {
- margin: var(--bui-space-7);
- }
+ .xl\:bui-m-3 {
+ margin: var(--bui-space-3);
+ }
- .sm\:bui-m-8 {
- margin: var(--bui-space-8);
- }
+ .xl\:bui-m-4 {
+ margin: var(--bui-space-4);
+ }
- .sm\:bui-m-9 {
- margin: var(--bui-space-9);
- }
+ .xl\:bui-m-5 {
+ margin: var(--bui-space-5);
+ }
- .sm\:bui-m-10 {
- margin: var(--bui-space-10);
- }
+ .xl\:bui-m-6 {
+ margin: var(--bui-space-6);
+ }
- .sm\:bui-m-11 {
- margin: var(--bui-space-11);
- }
+ .xl\:bui-m-7 {
+ margin: var(--bui-space-7);
+ }
- .sm\:bui-m-12 {
- margin: var(--bui-space-12);
- }
+ .xl\:bui-m-8 {
+ margin: var(--bui-space-8);
+ }
- .sm\:bui-m-13 {
- margin: var(--bui-space-13);
- }
+ .xl\:bui-m-9 {
+ margin: var(--bui-space-9);
+ }
- .sm\:bui-m-14 {
- margin: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-m {
- margin: var(--p-md);
- }
-
- .md\:bui-m-0\.5 {
- margin: var(--bui-space-0_5);
- }
-
- .md\:bui-m-1 {
- margin: var(--bui-space-1);
- }
-
- .md\:bui-m-1\.5 {
- margin: var(--bui-space-1_5);
- }
-
- .md\:bui-m-2 {
- margin: var(--bui-space-2);
- }
-
- .md\:bui-m-3 {
- margin: var(--bui-space-3);
- }
-
- .md\:bui-m-4 {
- margin: var(--bui-space-4);
- }
-
- .md\:bui-m-5 {
- margin: var(--bui-space-5);
- }
-
- .md\:bui-m-6 {
- margin: var(--bui-space-6);
- }
-
- .md\:bui-m-7 {
- margin: var(--bui-space-7);
- }
-
- .md\:bui-m-8 {
- margin: var(--bui-space-8);
- }
-
- .md\:bui-m-9 {
- margin: var(--bui-space-9);
- }
-
- .md\:bui-m-10 {
- margin: var(--bui-space-10);
- }
-
- .md\:bui-m-11 {
- margin: var(--bui-space-11);
- }
-
- .md\:bui-m-12 {
- margin: var(--bui-space-12);
- }
-
- .md\:bui-m-13 {
- margin: var(--bui-space-13);
- }
-
- .md\:bui-m-14 {
- margin: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-m {
- margin: var(--p-lg);
- }
-
- .lg\:bui-m-0\.5 {
- margin: var(--bui-space-0_5);
- }
-
- .lg\:bui-m-1 {
- margin: var(--bui-space-1);
- }
-
- .lg\:bui-m-1\.5 {
- margin: var(--bui-space-1_5);
- }
-
- .lg\:bui-m-2 {
- margin: var(--bui-space-2);
- }
-
- .lg\:bui-m-3 {
- margin: var(--bui-space-3);
- }
-
- .lg\:bui-m-4 {
- margin: var(--bui-space-4);
- }
-
- .lg\:bui-m-5 {
- margin: var(--bui-space-5);
- }
-
- .lg\:bui-m-6 {
- margin: var(--bui-space-6);
- }
-
- .lg\:bui-m-7 {
- margin: var(--bui-space-7);
- }
-
- .lg\:bui-m-8 {
- margin: var(--bui-space-8);
- }
-
- .lg\:bui-m-9 {
- margin: var(--bui-space-9);
- }
-
- .lg\:bui-m-10 {
- margin: var(--bui-space-10);
- }
-
- .lg\:bui-m-11 {
- margin: var(--bui-space-11);
- }
-
- .lg\:bui-m-12 {
- margin: var(--bui-space-12);
- }
-
- .lg\:bui-m-13 {
- margin: var(--bui-space-13);
- }
-
- .lg\:bui-m-14 {
- margin: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-m {
- margin: var(--p-xl);
- }
-
- .xl\:bui-m-0\.5 {
- margin: var(--bui-space-0_5);
- }
-
- .xl\:bui-m-1 {
- margin: var(--bui-space-1);
- }
-
- .xl\:bui-m-1\.5 {
- margin: var(--bui-space-1_5);
- }
-
- .xl\:bui-m-2 {
- margin: var(--bui-space-2);
- }
-
- .xl\:bui-m-3 {
- margin: var(--bui-space-3);
- }
-
- .xl\:bui-m-4 {
- margin: var(--bui-space-4);
- }
-
- .xl\:bui-m-5 {
- margin: var(--bui-space-5);
- }
-
- .xl\:bui-m-6 {
- margin: var(--bui-space-6);
- }
-
- .xl\:bui-m-7 {
- margin: var(--bui-space-7);
- }
-
- .xl\:bui-m-8 {
- margin: var(--bui-space-8);
- }
-
- .xl\:bui-m-9 {
- margin: var(--bui-space-9);
- }
-
- .xl\:bui-m-10 {
- margin: var(--bui-space-10);
- }
-
- .xl\:bui-m-11 {
- margin: var(--bui-space-11);
- }
-
- .xl\:bui-m-12 {
- margin: var(--bui-space-12);
- }
-
- .xl\:bui-m-13 {
- margin: var(--bui-space-13);
- }
-
- .xl\:bui-m-14 {
- margin: var(--bui-space-14);
+ .xl\:bui-m-10 {
+ margin: var(--bui-space-10);
+ }
+
+ .xl\:bui-m-11 {
+ margin: var(--bui-space-11);
+ }
+
+ .xl\:bui-m-12 {
+ margin: var(--bui-space-12);
+ }
+
+ .xl\:bui-m-13 {
+ margin: var(--bui-space-13);
+ }
+
+ .xl\:bui-m-14 {
+ margin: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/mb.css b/packages/ui/src/css/utilities/mb.css
index 576d4d488e..6394937af4 100644
--- a/packages/ui/src/css/utilities/mb.css
+++ b/packages/ui/src/css/utilities/mb.css
@@ -1,422 +1,440 @@
-.bui-mb {
- margin-bottom: var(--mb);
-}
+/*
+ * 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.
+ */
-.bui-mb-0\.5 {
- margin-bottom: var(--bui-space-0_5);
-}
-
-.bui-mb-1 {
- margin-bottom: var(--bui-space-1);
-}
-
-.bui-mb-1\.5 {
- margin-bottom: var(--bui-space-1_5);
-}
-
-.bui-mb-2 {
- margin-bottom: var(--bui-space-2);
-}
-
-.bui-mb-3 {
- margin-bottom: var(--bui-space-3);
-}
-
-.bui-mb-4 {
- margin-bottom: var(--bui-space-4);
-}
-
-.bui-mb-5 {
- margin-bottom: var(--bui-space-5);
-}
-
-.bui-mb-6 {
- margin-bottom: var(--bui-space-6);
-}
-
-.bui-mb-7 {
- margin-bottom: var(--bui-space-7);
-}
-
-.bui-mb-8 {
- margin-bottom: var(--bui-space-8);
-}
-
-.bui-mb-9 {
- margin-bottom: var(--bui-space-9);
-}
-
-.bui-mb-10 {
- margin-bottom: var(--bui-space-10);
-}
-
-.bui-mb-11 {
- margin-bottom: var(--bui-space-11);
-}
-
-.bui-mb-12 {
- margin-bottom: var(--bui-space-12);
-}
-
-.bui-mb-13 {
- margin-bottom: var(--bui-space-13);
-}
-
-.bui-mb-14 {
- margin-bottom: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-mb {
- margin-bottom: var(--pb-xs);
+@layer utilities {
+ .bui-mb {
+ margin-bottom: var(--mb);
}
- .xs\:bui-mb-0\.5 {
+ .bui-mb-0\.5 {
margin-bottom: var(--bui-space-0_5);
}
- .xs\:bui-mb-1 {
+ .bui-mb-1 {
margin-bottom: var(--bui-space-1);
}
- .xs\:bui-mb-1\.5 {
+ .bui-mb-1\.5 {
margin-bottom: var(--bui-space-1_5);
}
- .xs\:bui-mb-2 {
+ .bui-mb-2 {
margin-bottom: var(--bui-space-2);
}
- .xs\:bui-mb-3 {
+ .bui-mb-3 {
margin-bottom: var(--bui-space-3);
}
- .xs\:bui-mb-4 {
+ .bui-mb-4 {
margin-bottom: var(--bui-space-4);
}
- .xs\:bui-mb-5 {
+ .bui-mb-5 {
margin-bottom: var(--bui-space-5);
}
- .xs\:bui-mb-6 {
+ .bui-mb-6 {
margin-bottom: var(--bui-space-6);
}
- .xs\:bui-mb-7 {
+ .bui-mb-7 {
margin-bottom: var(--bui-space-7);
}
- .xs\:bui-mb-8 {
+ .bui-mb-8 {
margin-bottom: var(--bui-space-8);
}
- .xs\:bui-mb-9 {
+ .bui-mb-9 {
margin-bottom: var(--bui-space-9);
}
- .xs\:bui-mb-10 {
+ .bui-mb-10 {
margin-bottom: var(--bui-space-10);
}
- .xs\:bui-mb-11 {
+ .bui-mb-11 {
margin-bottom: var(--bui-space-11);
}
- .xs\:bui-mb-12 {
+ .bui-mb-12 {
margin-bottom: var(--bui-space-12);
}
- .xs\:bui-mb-13 {
+ .bui-mb-13 {
margin-bottom: var(--bui-space-13);
}
- .xs\:bui-mb-14 {
+ .bui-mb-14 {
margin-bottom: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-mb {
- margin-bottom: var(--pb-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-mb {
+ margin-bottom: var(--pb-xs);
+ }
+
+ .xs\:bui-mb-0\.5 {
+ margin-bottom: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-mb-1 {
+ margin-bottom: var(--bui-space-1);
+ }
+
+ .xs\:bui-mb-1\.5 {
+ margin-bottom: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-mb-2 {
+ margin-bottom: var(--bui-space-2);
+ }
+
+ .xs\:bui-mb-3 {
+ margin-bottom: var(--bui-space-3);
+ }
+
+ .xs\:bui-mb-4 {
+ margin-bottom: var(--bui-space-4);
+ }
+
+ .xs\:bui-mb-5 {
+ margin-bottom: var(--bui-space-5);
+ }
+
+ .xs\:bui-mb-6 {
+ margin-bottom: var(--bui-space-6);
+ }
+
+ .xs\:bui-mb-7 {
+ margin-bottom: var(--bui-space-7);
+ }
+
+ .xs\:bui-mb-8 {
+ margin-bottom: var(--bui-space-8);
+ }
+
+ .xs\:bui-mb-9 {
+ margin-bottom: var(--bui-space-9);
+ }
+
+ .xs\:bui-mb-10 {
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .xs\:bui-mb-11 {
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .xs\:bui-mb-12 {
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .xs\:bui-mb-13 {
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .xs\:bui-mb-14 {
+ margin-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-mb-0\.5 {
- margin-bottom: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-mb {
+ margin-bottom: var(--pb-sm);
+ }
+
+ .sm\:bui-mb-0\.5 {
+ margin-bottom: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-mb-1 {
+ margin-bottom: var(--bui-space-1);
+ }
+
+ .sm\:bui-mb-1\.5 {
+ margin-bottom: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-mb-2 {
+ margin-bottom: var(--bui-space-2);
+ }
+
+ .sm\:bui-mb-3 {
+ margin-bottom: var(--bui-space-3);
+ }
+
+ .sm\:bui-mb-4 {
+ margin-bottom: var(--bui-space-4);
+ }
+
+ .sm\:bui-mb-5 {
+ margin-bottom: var(--bui-space-5);
+ }
+
+ .sm\:bui-mb-6 {
+ margin-bottom: var(--bui-space-6);
+ }
+
+ .sm\:bui-mb-7 {
+ margin-bottom: var(--bui-space-7);
+ }
+
+ .sm\:bui-mb-8 {
+ margin-bottom: var(--bui-space-8);
+ }
+
+ .sm\:bui-mb-9 {
+ margin-bottom: var(--bui-space-9);
+ }
+
+ .sm\:bui-mb-10 {
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .sm\:bui-mb-11 {
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .sm\:bui-mb-12 {
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .sm\:bui-mb-13 {
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .sm\:bui-mb-14 {
+ margin-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-mb-1 {
- margin-bottom: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-mb {
+ margin-bottom: var(--pb-md);
+ }
+
+ .md\:bui-mb-0\.5 {
+ margin-bottom: var(--bui-space-0_5);
+ }
+
+ .md\:bui-mb-1 {
+ margin-bottom: var(--bui-space-1);
+ }
+
+ .md\:bui-mb-1\.5 {
+ margin-bottom: var(--bui-space-1_5);
+ }
+
+ .md\:bui-mb-2 {
+ margin-bottom: var(--bui-space-2);
+ }
+
+ .md\:bui-mb-3 {
+ margin-bottom: var(--bui-space-3);
+ }
+
+ .md\:bui-mb-4 {
+ margin-bottom: var(--bui-space-4);
+ }
+
+ .md\:bui-mb-5 {
+ margin-bottom: var(--bui-space-5);
+ }
+
+ .md\:bui-mb-6 {
+ margin-bottom: var(--bui-space-6);
+ }
+
+ .md\:bui-mb-7 {
+ margin-bottom: var(--bui-space-7);
+ }
+
+ .md\:bui-mb-8 {
+ margin-bottom: var(--bui-space-8);
+ }
+
+ .md\:bui-mb-9 {
+ margin-bottom: var(--bui-space-9);
+ }
+
+ .md\:bui-mb-10 {
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .md\:bui-mb-11 {
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .md\:bui-mb-12 {
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .md\:bui-mb-13 {
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .md\:bui-mb-14 {
+ margin-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-mb-1\.5 {
- margin-bottom: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-mb {
+ margin-bottom: var(--pb-lg);
+ }
+
+ .lg\:bui-mb-0\.5 {
+ margin-bottom: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-mb-1 {
+ margin-bottom: var(--bui-space-1);
+ }
+
+ .lg\:bui-mb-1\.5 {
+ margin-bottom: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-mb-2 {
+ margin-bottom: var(--bui-space-2);
+ }
+
+ .lg\:bui-mb-3 {
+ margin-bottom: var(--bui-space-3);
+ }
+
+ .lg\:bui-mb-4 {
+ margin-bottom: var(--bui-space-4);
+ }
+
+ .lg\:bui-mb-5 {
+ margin-bottom: var(--bui-space-5);
+ }
+
+ .lg\:bui-mb-6 {
+ margin-bottom: var(--bui-space-6);
+ }
+
+ .lg\:bui-mb-7 {
+ margin-bottom: var(--bui-space-7);
+ }
+
+ .lg\:bui-mb-8 {
+ margin-bottom: var(--bui-space-8);
+ }
+
+ .lg\:bui-mb-9 {
+ margin-bottom: var(--bui-space-9);
+ }
+
+ .lg\:bui-mb-10 {
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .lg\:bui-mb-11 {
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .lg\:bui-mb-12 {
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .lg\:bui-mb-13 {
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .lg\:bui-mb-14 {
+ margin-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-mb-2 {
- margin-bottom: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-mb {
+ margin-bottom: var(--pb-xl);
+ }
- .sm\:bui-mb-3 {
- margin-bottom: var(--bui-space-3);
- }
+ .xl\:bui-mb-0\.5 {
+ margin-bottom: var(--bui-space-0_5);
+ }
- .sm\:bui-mb-4 {
- margin-bottom: var(--bui-space-4);
- }
+ .xl\:bui-mb-1 {
+ margin-bottom: var(--bui-space-1);
+ }
- .sm\:bui-mb-5 {
- margin-bottom: var(--bui-space-5);
- }
+ .xl\:bui-mb-1\.5 {
+ margin-bottom: var(--bui-space-1_5);
+ }
- .sm\:bui-mb-6 {
- margin-bottom: var(--bui-space-6);
- }
+ .xl\:bui-mb-2 {
+ margin-bottom: var(--bui-space-2);
+ }
- .sm\:bui-mb-7 {
- margin-bottom: var(--bui-space-7);
- }
+ .xl\:bui-mb-3 {
+ margin-bottom: var(--bui-space-3);
+ }
- .sm\:bui-mb-8 {
- margin-bottom: var(--bui-space-8);
- }
+ .xl\:bui-mb-4 {
+ margin-bottom: var(--bui-space-4);
+ }
- .sm\:bui-mb-9 {
- margin-bottom: var(--bui-space-9);
- }
+ .xl\:bui-mb-5 {
+ margin-bottom: var(--bui-space-5);
+ }
- .sm\:bui-mb-10 {
- margin-bottom: var(--bui-space-10);
- }
+ .xl\:bui-mb-6 {
+ margin-bottom: var(--bui-space-6);
+ }
- .sm\:bui-mb-11 {
- margin-bottom: var(--bui-space-11);
- }
+ .xl\:bui-mb-7 {
+ margin-bottom: var(--bui-space-7);
+ }
- .sm\:bui-mb-12 {
- margin-bottom: var(--bui-space-12);
- }
+ .xl\:bui-mb-8 {
+ margin-bottom: var(--bui-space-8);
+ }
- .sm\:bui-mb-13 {
- margin-bottom: var(--bui-space-13);
- }
+ .xl\:bui-mb-9 {
+ margin-bottom: var(--bui-space-9);
+ }
- .sm\:bui-mb-14 {
- margin-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-mb {
- margin-bottom: var(--pb-md);
- }
-
- .md\:bui-mb-0\.5 {
- margin-bottom: var(--bui-space-0_5);
- }
-
- .md\:bui-mb-1 {
- margin-bottom: var(--bui-space-1);
- }
-
- .md\:bui-mb-1\.5 {
- margin-bottom: var(--bui-space-1_5);
- }
-
- .md\:bui-mb-2 {
- margin-bottom: var(--bui-space-2);
- }
-
- .md\:bui-mb-3 {
- margin-bottom: var(--bui-space-3);
- }
-
- .md\:bui-mb-4 {
- margin-bottom: var(--bui-space-4);
- }
-
- .md\:bui-mb-5 {
- margin-bottom: var(--bui-space-5);
- }
-
- .md\:bui-mb-6 {
- margin-bottom: var(--bui-space-6);
- }
-
- .md\:bui-mb-7 {
- margin-bottom: var(--bui-space-7);
- }
-
- .md\:bui-mb-8 {
- margin-bottom: var(--bui-space-8);
- }
-
- .md\:bui-mb-9 {
- margin-bottom: var(--bui-space-9);
- }
-
- .md\:bui-mb-10 {
- margin-bottom: var(--bui-space-10);
- }
-
- .md\:bui-mb-11 {
- margin-bottom: var(--bui-space-11);
- }
-
- .md\:bui-mb-12 {
- margin-bottom: var(--bui-space-12);
- }
-
- .md\:bui-mb-13 {
- margin-bottom: var(--bui-space-13);
- }
-
- .md\:bui-mb-14 {
- margin-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-mb {
- margin-bottom: var(--pb-lg);
- }
-
- .lg\:bui-mb-0\.5 {
- margin-bottom: var(--bui-space-0_5);
- }
-
- .lg\:bui-mb-1 {
- margin-bottom: var(--bui-space-1);
- }
-
- .lg\:bui-mb-1\.5 {
- margin-bottom: var(--bui-space-1_5);
- }
-
- .lg\:bui-mb-2 {
- margin-bottom: var(--bui-space-2);
- }
-
- .lg\:bui-mb-3 {
- margin-bottom: var(--bui-space-3);
- }
-
- .lg\:bui-mb-4 {
- margin-bottom: var(--bui-space-4);
- }
-
- .lg\:bui-mb-5 {
- margin-bottom: var(--bui-space-5);
- }
-
- .lg\:bui-mb-6 {
- margin-bottom: var(--bui-space-6);
- }
-
- .lg\:bui-mb-7 {
- margin-bottom: var(--bui-space-7);
- }
-
- .lg\:bui-mb-8 {
- margin-bottom: var(--bui-space-8);
- }
-
- .lg\:bui-mb-9 {
- margin-bottom: var(--bui-space-9);
- }
-
- .lg\:bui-mb-10 {
- margin-bottom: var(--bui-space-10);
- }
-
- .lg\:bui-mb-11 {
- margin-bottom: var(--bui-space-11);
- }
-
- .lg\:bui-mb-12 {
- margin-bottom: var(--bui-space-12);
- }
-
- .lg\:bui-mb-13 {
- margin-bottom: var(--bui-space-13);
- }
-
- .lg\:bui-mb-14 {
- margin-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-mb {
- margin-bottom: var(--pb-xl);
- }
-
- .xl\:bui-mb-0\.5 {
- margin-bottom: var(--bui-space-0_5);
- }
-
- .xl\:bui-mb-1 {
- margin-bottom: var(--bui-space-1);
- }
-
- .xl\:bui-mb-1\.5 {
- margin-bottom: var(--bui-space-1_5);
- }
-
- .xl\:bui-mb-2 {
- margin-bottom: var(--bui-space-2);
- }
-
- .xl\:bui-mb-3 {
- margin-bottom: var(--bui-space-3);
- }
-
- .xl\:bui-mb-4 {
- margin-bottom: var(--bui-space-4);
- }
-
- .xl\:bui-mb-5 {
- margin-bottom: var(--bui-space-5);
- }
-
- .xl\:bui-mb-6 {
- margin-bottom: var(--bui-space-6);
- }
-
- .xl\:bui-mb-7 {
- margin-bottom: var(--bui-space-7);
- }
-
- .xl\:bui-mb-8 {
- margin-bottom: var(--bui-space-8);
- }
-
- .xl\:bui-mb-9 {
- margin-bottom: var(--bui-space-9);
- }
-
- .xl\:bui-mb-10 {
- margin-bottom: var(--bui-space-10);
- }
-
- .xl\:bui-mb-11 {
- margin-bottom: var(--bui-space-11);
- }
-
- .xl\:bui-mb-12 {
- margin-bottom: var(--bui-space-12);
- }
-
- .xl\:bui-mb-13 {
- margin-bottom: var(--bui-space-13);
- }
-
- .xl\:bui-mb-14 {
- margin-bottom: var(--bui-space-14);
+ .xl\:bui-mb-10 {
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .xl\:bui-mb-11 {
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .xl\:bui-mb-12 {
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .xl\:bui-mb-13 {
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .xl\:bui-mb-14 {
+ margin-bottom: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/ml.css b/packages/ui/src/css/utilities/ml.css
index b11fe779fb..7b82b73ab8 100644
--- a/packages/ui/src/css/utilities/ml.css
+++ b/packages/ui/src/css/utilities/ml.css
@@ -1,422 +1,440 @@
-.bui-ml {
- margin-left: var(--ml);
-}
+/*
+ * 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.
+ */
-.bui-ml-0\.5 {
- margin-left: var(--bui-space-0_5);
-}
-
-.bui-ml-1 {
- margin-left: var(--bui-space-1);
-}
-
-.bui-ml-1\.5 {
- margin-left: var(--bui-space-1_5);
-}
-
-.bui-ml-2 {
- margin-left: var(--bui-space-2);
-}
-
-.bui-ml-3 {
- margin-left: var(--bui-space-3);
-}
-
-.bui-ml-4 {
- margin-left: var(--bui-space-4);
-}
-
-.bui-ml-5 {
- margin-left: var(--bui-space-5);
-}
-
-.bui-ml-6 {
- margin-left: var(--bui-space-6);
-}
-
-.bui-ml-7 {
- margin-left: var(--bui-space-7);
-}
-
-.bui-ml-8 {
- margin-left: var(--bui-space-8);
-}
-
-.bui-ml-9 {
- margin-left: var(--bui-space-9);
-}
-
-.bui-ml-10 {
- margin-left: var(--bui-space-10);
-}
-
-.bui-ml-11 {
- margin-left: var(--bui-space-11);
-}
-
-.bui-ml-12 {
- margin-left: var(--bui-space-12);
-}
-
-.bui-ml-13 {
- margin-left: var(--bui-space-13);
-}
-
-.bui-ml-14 {
- margin-left: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-ml {
- margin-left: var(--pl-xs);
+@layer utilities {
+ .bui-ml {
+ margin-left: var(--ml);
}
- .xs\:bui-ml-0\.5 {
+ .bui-ml-0\.5 {
margin-left: var(--bui-space-0_5);
}
- .xs\:bui-ml-1 {
+ .bui-ml-1 {
margin-left: var(--bui-space-1);
}
- .xs\:bui-ml-1\.5 {
+ .bui-ml-1\.5 {
margin-left: var(--bui-space-1_5);
}
- .xs\:bui-ml-2 {
+ .bui-ml-2 {
margin-left: var(--bui-space-2);
}
- .xs\:bui-ml-3 {
+ .bui-ml-3 {
margin-left: var(--bui-space-3);
}
- .xs\:bui-ml-4 {
+ .bui-ml-4 {
margin-left: var(--bui-space-4);
}
- .xs\:bui-ml-5 {
+ .bui-ml-5 {
margin-left: var(--bui-space-5);
}
- .xs\:bui-ml-6 {
+ .bui-ml-6 {
margin-left: var(--bui-space-6);
}
- .xs\:bui-ml-7 {
+ .bui-ml-7 {
margin-left: var(--bui-space-7);
}
- .xs\:bui-ml-8 {
+ .bui-ml-8 {
margin-left: var(--bui-space-8);
}
- .xs\:bui-ml-9 {
+ .bui-ml-9 {
margin-left: var(--bui-space-9);
}
- .xs\:bui-ml-10 {
+ .bui-ml-10 {
margin-left: var(--bui-space-10);
}
- .xs\:bui-ml-11 {
+ .bui-ml-11 {
margin-left: var(--bui-space-11);
}
- .xs\:bui-ml-12 {
+ .bui-ml-12 {
margin-left: var(--bui-space-12);
}
- .xs\:bui-ml-13 {
+ .bui-ml-13 {
margin-left: var(--bui-space-13);
}
- .xs\:bui-ml-14 {
+ .bui-ml-14 {
margin-left: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-ml {
- margin-left: var(--pl-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-ml {
+ margin-left: var(--pl-xs);
+ }
+
+ .xs\:bui-ml-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-ml-1 {
+ margin-left: var(--bui-space-1);
+ }
+
+ .xs\:bui-ml-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-ml-2 {
+ margin-left: var(--bui-space-2);
+ }
+
+ .xs\:bui-ml-3 {
+ margin-left: var(--bui-space-3);
+ }
+
+ .xs\:bui-ml-4 {
+ margin-left: var(--bui-space-4);
+ }
+
+ .xs\:bui-ml-5 {
+ margin-left: var(--bui-space-5);
+ }
+
+ .xs\:bui-ml-6 {
+ margin-left: var(--bui-space-6);
+ }
+
+ .xs\:bui-ml-7 {
+ margin-left: var(--bui-space-7);
+ }
+
+ .xs\:bui-ml-8 {
+ margin-left: var(--bui-space-8);
+ }
+
+ .xs\:bui-ml-9 {
+ margin-left: var(--bui-space-9);
+ }
+
+ .xs\:bui-ml-10 {
+ margin-left: var(--bui-space-10);
+ }
+
+ .xs\:bui-ml-11 {
+ margin-left: var(--bui-space-11);
+ }
+
+ .xs\:bui-ml-12 {
+ margin-left: var(--bui-space-12);
+ }
+
+ .xs\:bui-ml-13 {
+ margin-left: var(--bui-space-13);
+ }
+
+ .xs\:bui-ml-14 {
+ margin-left: var(--bui-space-14);
+ }
}
- .sm\:bui-ml-0\.5 {
- margin-left: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-ml {
+ margin-left: var(--pl-sm);
+ }
+
+ .sm\:bui-ml-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-ml-1 {
+ margin-left: var(--bui-space-1);
+ }
+
+ .sm\:bui-ml-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-ml-2 {
+ margin-left: var(--bui-space-2);
+ }
+
+ .sm\:bui-ml-3 {
+ margin-left: var(--bui-space-3);
+ }
+
+ .sm\:bui-ml-4 {
+ margin-left: var(--bui-space-4);
+ }
+
+ .sm\:bui-ml-5 {
+ margin-left: var(--bui-space-5);
+ }
+
+ .sm\:bui-ml-6 {
+ margin-left: var(--bui-space-6);
+ }
+
+ .sm\:bui-ml-7 {
+ margin-left: var(--bui-space-7);
+ }
+
+ .sm\:bui-ml-8 {
+ margin-left: var(--bui-space-8);
+ }
+
+ .sm\:bui-ml-9 {
+ margin-left: var(--bui-space-9);
+ }
+
+ .sm\:bui-ml-10 {
+ margin-left: var(--bui-space-10);
+ }
+
+ .sm\:bui-ml-11 {
+ margin-left: var(--bui-space-11);
+ }
+
+ .sm\:bui-ml-12 {
+ margin-left: var(--bui-space-12);
+ }
+
+ .sm\:bui-ml-13 {
+ margin-left: var(--bui-space-13);
+ }
+
+ .sm\:bui-ml-14 {
+ margin-left: var(--bui-space-14);
+ }
}
- .sm\:bui-ml-1 {
- margin-left: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-ml {
+ margin-left: var(--pl-md);
+ }
+
+ .md\:bui-ml-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ }
+
+ .md\:bui-ml-1 {
+ margin-left: var(--bui-space-1);
+ }
+
+ .md\:bui-ml-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ }
+
+ .md\:bui-ml-2 {
+ margin-left: var(--bui-space-2);
+ }
+
+ .md\:bui-ml-3 {
+ margin-left: var(--bui-space-3);
+ }
+
+ .md\:bui-ml-4 {
+ margin-left: var(--bui-space-4);
+ }
+
+ .md\:bui-ml-5 {
+ margin-left: var(--bui-space-5);
+ }
+
+ .md\:bui-ml-6 {
+ margin-left: var(--bui-space-6);
+ }
+
+ .md\:bui-ml-7 {
+ margin-left: var(--bui-space-7);
+ }
+
+ .md\:bui-ml-8 {
+ margin-left: var(--bui-space-8);
+ }
+
+ .md\:bui-ml-9 {
+ margin-left: var(--bui-space-9);
+ }
+
+ .md\:bui-ml-10 {
+ margin-left: var(--bui-space-10);
+ }
+
+ .md\:bui-ml-11 {
+ margin-left: var(--bui-space-11);
+ }
+
+ .md\:bui-ml-12 {
+ margin-left: var(--bui-space-12);
+ }
+
+ .md\:bui-ml-13 {
+ margin-left: var(--bui-space-13);
+ }
+
+ .md\:bui-ml-14 {
+ margin-left: var(--bui-space-14);
+ }
}
- .sm\:bui-ml-1\.5 {
- margin-left: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-ml {
+ margin-left: var(--pl-lg);
+ }
+
+ .lg\:bui-ml-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-ml-1 {
+ margin-left: var(--bui-space-1);
+ }
+
+ .lg\:bui-ml-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-ml-2 {
+ margin-left: var(--bui-space-2);
+ }
+
+ .lg\:bui-ml-3 {
+ margin-left: var(--bui-space-3);
+ }
+
+ .lg\:bui-ml-4 {
+ margin-left: var(--bui-space-4);
+ }
+
+ .lg\:bui-ml-5 {
+ margin-left: var(--bui-space-5);
+ }
+
+ .lg\:bui-ml-6 {
+ margin-left: var(--bui-space-6);
+ }
+
+ .lg\:bui-ml-7 {
+ margin-left: var(--bui-space-7);
+ }
+
+ .lg\:bui-ml-8 {
+ margin-left: var(--bui-space-8);
+ }
+
+ .lg\:bui-ml-9 {
+ margin-left: var(--bui-space-9);
+ }
+
+ .lg\:bui-ml-10 {
+ margin-left: var(--bui-space-10);
+ }
+
+ .lg\:bui-ml-11 {
+ margin-left: var(--bui-space-11);
+ }
+
+ .lg\:bui-ml-12 {
+ margin-left: var(--bui-space-12);
+ }
+
+ .lg\:bui-ml-13 {
+ margin-left: var(--bui-space-13);
+ }
+
+ .lg\:bui-ml-14 {
+ margin-left: var(--bui-space-14);
+ }
}
- .sm\:bui-ml-2 {
- margin-left: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-ml {
+ margin-left: var(--pl-xl);
+ }
- .sm\:bui-ml-3 {
- margin-left: var(--bui-space-3);
- }
+ .xl\:bui-ml-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ }
- .sm\:bui-ml-4 {
- margin-left: var(--bui-space-4);
- }
+ .xl\:bui-ml-1 {
+ margin-left: var(--bui-space-1);
+ }
- .sm\:bui-ml-5 {
- margin-left: var(--bui-space-5);
- }
+ .xl\:bui-ml-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ }
- .sm\:bui-ml-6 {
- margin-left: var(--bui-space-6);
- }
+ .xl\:bui-ml-2 {
+ margin-left: var(--bui-space-2);
+ }
- .sm\:bui-ml-7 {
- margin-left: var(--bui-space-7);
- }
+ .xl\:bui-ml-3 {
+ margin-left: var(--bui-space-3);
+ }
- .sm\:bui-ml-8 {
- margin-left: var(--bui-space-8);
- }
+ .xl\:bui-ml-4 {
+ margin-left: var(--bui-space-4);
+ }
- .sm\:bui-ml-9 {
- margin-left: var(--bui-space-9);
- }
+ .xl\:bui-ml-5 {
+ margin-left: var(--bui-space-5);
+ }
- .sm\:bui-ml-10 {
- margin-left: var(--bui-space-10);
- }
+ .xl\:bui-ml-6 {
+ margin-left: var(--bui-space-6);
+ }
- .sm\:bui-ml-11 {
- margin-left: var(--bui-space-11);
- }
+ .xl\:bui-ml-7 {
+ margin-left: var(--bui-space-7);
+ }
- .sm\:bui-ml-12 {
- margin-left: var(--bui-space-12);
- }
+ .xl\:bui-ml-8 {
+ margin-left: var(--bui-space-8);
+ }
- .sm\:bui-ml-13 {
- margin-left: var(--bui-space-13);
- }
+ .xl\:bui-ml-9 {
+ margin-left: var(--bui-space-9);
+ }
- .sm\:bui-ml-14 {
- margin-left: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-ml {
- margin-left: var(--pl-md);
- }
-
- .md\:bui-ml-0\.5 {
- margin-left: var(--bui-space-0_5);
- }
-
- .md\:bui-ml-1 {
- margin-left: var(--bui-space-1);
- }
-
- .md\:bui-ml-1\.5 {
- margin-left: var(--bui-space-1_5);
- }
-
- .md\:bui-ml-2 {
- margin-left: var(--bui-space-2);
- }
-
- .md\:bui-ml-3 {
- margin-left: var(--bui-space-3);
- }
-
- .md\:bui-ml-4 {
- margin-left: var(--bui-space-4);
- }
-
- .md\:bui-ml-5 {
- margin-left: var(--bui-space-5);
- }
-
- .md\:bui-ml-6 {
- margin-left: var(--bui-space-6);
- }
-
- .md\:bui-ml-7 {
- margin-left: var(--bui-space-7);
- }
-
- .md\:bui-ml-8 {
- margin-left: var(--bui-space-8);
- }
-
- .md\:bui-ml-9 {
- margin-left: var(--bui-space-9);
- }
-
- .md\:bui-ml-10 {
- margin-left: var(--bui-space-10);
- }
-
- .md\:bui-ml-11 {
- margin-left: var(--bui-space-11);
- }
-
- .md\:bui-ml-12 {
- margin-left: var(--bui-space-12);
- }
-
- .md\:bui-ml-13 {
- margin-left: var(--bui-space-13);
- }
-
- .md\:bui-ml-14 {
- margin-left: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-ml {
- margin-left: var(--pl-lg);
- }
-
- .lg\:bui-ml-0\.5 {
- margin-left: var(--bui-space-0_5);
- }
-
- .lg\:bui-ml-1 {
- margin-left: var(--bui-space-1);
- }
-
- .lg\:bui-ml-1\.5 {
- margin-left: var(--bui-space-1_5);
- }
-
- .lg\:bui-ml-2 {
- margin-left: var(--bui-space-2);
- }
-
- .lg\:bui-ml-3 {
- margin-left: var(--bui-space-3);
- }
-
- .lg\:bui-ml-4 {
- margin-left: var(--bui-space-4);
- }
-
- .lg\:bui-ml-5 {
- margin-left: var(--bui-space-5);
- }
-
- .lg\:bui-ml-6 {
- margin-left: var(--bui-space-6);
- }
-
- .lg\:bui-ml-7 {
- margin-left: var(--bui-space-7);
- }
-
- .lg\:bui-ml-8 {
- margin-left: var(--bui-space-8);
- }
-
- .lg\:bui-ml-9 {
- margin-left: var(--bui-space-9);
- }
-
- .lg\:bui-ml-10 {
- margin-left: var(--bui-space-10);
- }
-
- .lg\:bui-ml-11 {
- margin-left: var(--bui-space-11);
- }
-
- .lg\:bui-ml-12 {
- margin-left: var(--bui-space-12);
- }
-
- .lg\:bui-ml-13 {
- margin-left: var(--bui-space-13);
- }
-
- .lg\:bui-ml-14 {
- margin-left: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-ml {
- margin-left: var(--pl-xl);
- }
-
- .xl\:bui-ml-0\.5 {
- margin-left: var(--bui-space-0_5);
- }
-
- .xl\:bui-ml-1 {
- margin-left: var(--bui-space-1);
- }
-
- .xl\:bui-ml-1\.5 {
- margin-left: var(--bui-space-1_5);
- }
-
- .xl\:bui-ml-2 {
- margin-left: var(--bui-space-2);
- }
-
- .xl\:bui-ml-3 {
- margin-left: var(--bui-space-3);
- }
-
- .xl\:bui-ml-4 {
- margin-left: var(--bui-space-4);
- }
-
- .xl\:bui-ml-5 {
- margin-left: var(--bui-space-5);
- }
-
- .xl\:bui-ml-6 {
- margin-left: var(--bui-space-6);
- }
-
- .xl\:bui-ml-7 {
- margin-left: var(--bui-space-7);
- }
-
- .xl\:bui-ml-8 {
- margin-left: var(--bui-space-8);
- }
-
- .xl\:bui-ml-9 {
- margin-left: var(--bui-space-9);
- }
-
- .xl\:bui-ml-10 {
- margin-left: var(--bui-space-10);
- }
-
- .xl\:bui-ml-11 {
- margin-left: var(--bui-space-11);
- }
-
- .xl\:bui-ml-12 {
- margin-left: var(--bui-space-12);
- }
-
- .xl\:bui-ml-13 {
- margin-left: var(--bui-space-13);
- }
-
- .xl\:bui-ml-14 {
- margin-left: var(--bui-space-14);
+ .xl\:bui-ml-10 {
+ margin-left: var(--bui-space-10);
+ }
+
+ .xl\:bui-ml-11 {
+ margin-left: var(--bui-space-11);
+ }
+
+ .xl\:bui-ml-12 {
+ margin-left: var(--bui-space-12);
+ }
+
+ .xl\:bui-ml-13 {
+ margin-left: var(--bui-space-13);
+ }
+
+ .xl\:bui-ml-14 {
+ margin-left: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/mr.css b/packages/ui/src/css/utilities/mr.css
index 215a9dc88d..bac16b3ed3 100644
--- a/packages/ui/src/css/utilities/mr.css
+++ b/packages/ui/src/css/utilities/mr.css
@@ -1,422 +1,440 @@
-.bui-mr {
- margin-right: var(--mr);
-}
+/*
+ * 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.
+ */
-.bui-mr-0\.5 {
- margin-right: var(--bui-space-0_5);
-}
-
-.bui-mr-1 {
- margin-right: var(--bui-space-1);
-}
-
-.bui-mr-1\.5 {
- margin-right: var(--bui-space-1_5);
-}
-
-.bui-mr-2 {
- margin-right: var(--bui-space-2);
-}
-
-.bui-mr-3 {
- margin-right: var(--bui-space-3);
-}
-
-.bui-mr-4 {
- margin-right: var(--bui-space-4);
-}
-
-.bui-mr-5 {
- margin-right: var(--bui-space-5);
-}
-
-.bui-mr-6 {
- margin-right: var(--bui-space-6);
-}
-
-.bui-mr-7 {
- margin-right: var(--bui-space-7);
-}
-
-.bui-mr-8 {
- margin-right: var(--bui-space-8);
-}
-
-.bui-mr-9 {
- margin-right: var(--bui-space-9);
-}
-
-.bui-mr-10 {
- margin-right: var(--bui-space-10);
-}
-
-.bui-mr-11 {
- margin-right: var(--bui-space-11);
-}
-
-.bui-mr-12 {
- margin-right: var(--bui-space-12);
-}
-
-.bui-mr-13 {
- margin-right: var(--bui-space-13);
-}
-
-.bui-mr-14 {
- margin-right: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-mr {
- margin-right: var(--pr-xs);
+@layer utilities {
+ .bui-mr {
+ margin-right: var(--mr);
}
- .xs\:bui-mr-0\.5 {
+ .bui-mr-0\.5 {
margin-right: var(--bui-space-0_5);
}
- .xs\:bui-mr-1 {
+ .bui-mr-1 {
margin-right: var(--bui-space-1);
}
- .xs\:bui-mr-1\.5 {
+ .bui-mr-1\.5 {
margin-right: var(--bui-space-1_5);
}
- .xs\:bui-mr-2 {
+ .bui-mr-2 {
margin-right: var(--bui-space-2);
}
- .xs\:bui-mr-3 {
+ .bui-mr-3 {
margin-right: var(--bui-space-3);
}
- .xs\:bui-mr-4 {
+ .bui-mr-4 {
margin-right: var(--bui-space-4);
}
- .xs\:bui-mr-5 {
+ .bui-mr-5 {
margin-right: var(--bui-space-5);
}
- .xs\:bui-mr-6 {
+ .bui-mr-6 {
margin-right: var(--bui-space-6);
}
- .xs\:bui-mr-7 {
+ .bui-mr-7 {
margin-right: var(--bui-space-7);
}
- .xs\:bui-mr-8 {
+ .bui-mr-8 {
margin-right: var(--bui-space-8);
}
- .xs\:bui-mr-9 {
+ .bui-mr-9 {
margin-right: var(--bui-space-9);
}
- .xs\:bui-mr-10 {
+ .bui-mr-10 {
margin-right: var(--bui-space-10);
}
- .xs\:bui-mr-11 {
+ .bui-mr-11 {
margin-right: var(--bui-space-11);
}
- .xs\:bui-mr-12 {
+ .bui-mr-12 {
margin-right: var(--bui-space-12);
}
- .xs\:bui-mr-13 {
+ .bui-mr-13 {
margin-right: var(--bui-space-13);
}
- .xs\:bui-mr-14 {
+ .bui-mr-14 {
margin-right: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-mr {
- margin-right: var(--pr-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-mr {
+ margin-right: var(--pr-xs);
+ }
+
+ .xs\:bui-mr-0\.5 {
+ margin-right: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-mr-1 {
+ margin-right: var(--bui-space-1);
+ }
+
+ .xs\:bui-mr-1\.5 {
+ margin-right: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-mr-2 {
+ margin-right: var(--bui-space-2);
+ }
+
+ .xs\:bui-mr-3 {
+ margin-right: var(--bui-space-3);
+ }
+
+ .xs\:bui-mr-4 {
+ margin-right: var(--bui-space-4);
+ }
+
+ .xs\:bui-mr-5 {
+ margin-right: var(--bui-space-5);
+ }
+
+ .xs\:bui-mr-6 {
+ margin-right: var(--bui-space-6);
+ }
+
+ .xs\:bui-mr-7 {
+ margin-right: var(--bui-space-7);
+ }
+
+ .xs\:bui-mr-8 {
+ margin-right: var(--bui-space-8);
+ }
+
+ .xs\:bui-mr-9 {
+ margin-right: var(--bui-space-9);
+ }
+
+ .xs\:bui-mr-10 {
+ margin-right: var(--bui-space-10);
+ }
+
+ .xs\:bui-mr-11 {
+ margin-right: var(--bui-space-11);
+ }
+
+ .xs\:bui-mr-12 {
+ margin-right: var(--bui-space-12);
+ }
+
+ .xs\:bui-mr-13 {
+ margin-right: var(--bui-space-13);
+ }
+
+ .xs\:bui-mr-14 {
+ margin-right: var(--bui-space-14);
+ }
}
- .sm\:bui-mr-0\.5 {
- margin-right: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-mr {
+ margin-right: var(--pr-sm);
+ }
+
+ .sm\:bui-mr-0\.5 {
+ margin-right: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-mr-1 {
+ margin-right: var(--bui-space-1);
+ }
+
+ .sm\:bui-mr-1\.5 {
+ margin-right: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-mr-2 {
+ margin-right: var(--bui-space-2);
+ }
+
+ .sm\:bui-mr-3 {
+ margin-right: var(--bui-space-3);
+ }
+
+ .sm\:bui-mr-4 {
+ margin-right: var(--bui-space-4);
+ }
+
+ .sm\:bui-mr-5 {
+ margin-right: var(--bui-space-5);
+ }
+
+ .sm\:bui-mr-6 {
+ margin-right: var(--bui-space-6);
+ }
+
+ .sm\:bui-mr-7 {
+ margin-right: var(--bui-space-7);
+ }
+
+ .sm\:bui-mr-8 {
+ margin-right: var(--bui-space-8);
+ }
+
+ .sm\:bui-mr-9 {
+ margin-right: var(--bui-space-9);
+ }
+
+ .sm\:bui-mr-10 {
+ margin-right: var(--bui-space-10);
+ }
+
+ .sm\:bui-mr-11 {
+ margin-right: var(--bui-space-11);
+ }
+
+ .sm\:bui-mr-12 {
+ margin-right: var(--bui-space-12);
+ }
+
+ .sm\:bui-mr-13 {
+ margin-right: var(--bui-space-13);
+ }
+
+ .sm\:bui-mr-14 {
+ margin-right: var(--bui-space-14);
+ }
}
- .sm\:bui-mr-1 {
- margin-right: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-mr {
+ margin-right: var(--pr-md);
+ }
+
+ .md\:bui-mr-0\.5 {
+ margin-right: var(--bui-space-0_5);
+ }
+
+ .md\:bui-mr-1 {
+ margin-right: var(--bui-space-1);
+ }
+
+ .md\:bui-mr-1\.5 {
+ margin-right: var(--bui-space-1_5);
+ }
+
+ .md\:bui-mr-2 {
+ margin-right: var(--bui-space-2);
+ }
+
+ .md\:bui-mr-3 {
+ margin-right: var(--bui-space-3);
+ }
+
+ .md\:bui-mr-4 {
+ margin-right: var(--bui-space-4);
+ }
+
+ .md\:bui-mr-5 {
+ margin-right: var(--bui-space-5);
+ }
+
+ .md\:bui-mr-6 {
+ margin-right: var(--bui-space-6);
+ }
+
+ .md\:bui-mr-7 {
+ margin-right: var(--bui-space-7);
+ }
+
+ .md\:bui-mr-8 {
+ margin-right: var(--bui-space-8);
+ }
+
+ .md\:bui-mr-9 {
+ margin-right: var(--bui-space-9);
+ }
+
+ .md\:bui-mr-10 {
+ margin-right: var(--bui-space-10);
+ }
+
+ .md\:bui-mr-11 {
+ margin-right: var(--bui-space-11);
+ }
+
+ .md\:bui-mr-12 {
+ margin-right: var(--bui-space-12);
+ }
+
+ .md\:bui-mr-13 {
+ margin-right: var(--bui-space-13);
+ }
+
+ .md\:bui-mr-14 {
+ margin-right: var(--bui-space-14);
+ }
}
- .sm\:bui-mr-1\.5 {
- margin-right: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-mr {
+ margin-right: var(--pr-lg);
+ }
+
+ .lg\:bui-mr-0\.5 {
+ margin-right: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-mr-1 {
+ margin-right: var(--bui-space-1);
+ }
+
+ .lg\:bui-mr-1\.5 {
+ margin-right: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-mr-2 {
+ margin-right: var(--bui-space-2);
+ }
+
+ .lg\:bui-mr-3 {
+ margin-right: var(--bui-space-3);
+ }
+
+ .lg\:bui-mr-4 {
+ margin-right: var(--bui-space-4);
+ }
+
+ .lg\:bui-mr-5 {
+ margin-right: var(--bui-space-5);
+ }
+
+ .lg\:bui-mr-6 {
+ margin-right: var(--bui-space-6);
+ }
+
+ .lg\:bui-mr-7 {
+ margin-right: var(--bui-space-7);
+ }
+
+ .lg\:bui-mr-8 {
+ margin-right: var(--bui-space-8);
+ }
+
+ .lg\:bui-mr-9 {
+ margin-right: var(--bui-space-9);
+ }
+
+ .lg\:bui-mr-10 {
+ margin-right: var(--bui-space-10);
+ }
+
+ .lg\:bui-mr-11 {
+ margin-right: var(--bui-space-11);
+ }
+
+ .lg\:bui-mr-12 {
+ margin-right: var(--bui-space-12);
+ }
+
+ .lg\:bui-mr-13 {
+ margin-right: var(--bui-space-13);
+ }
+
+ .lg\:bui-mr-14 {
+ margin-right: var(--bui-space-14);
+ }
}
- .sm\:bui-mr-2 {
- margin-right: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-mr {
+ margin-right: var(--pr-xl);
+ }
- .sm\:bui-mr-3 {
- margin-right: var(--bui-space-3);
- }
+ .xl\:bui-mr-0\.5 {
+ margin-right: var(--bui-space-0_5);
+ }
- .sm\:bui-mr-4 {
- margin-right: var(--bui-space-4);
- }
+ .xl\:bui-mr-1 {
+ margin-right: var(--bui-space-1);
+ }
- .sm\:bui-mr-5 {
- margin-right: var(--bui-space-5);
- }
+ .xl\:bui-mr-1\.5 {
+ margin-right: var(--bui-space-1_5);
+ }
- .sm\:bui-mr-6 {
- margin-right: var(--bui-space-6);
- }
+ .xl\:bui-mr-2 {
+ margin-right: var(--bui-space-2);
+ }
- .sm\:bui-mr-7 {
- margin-right: var(--bui-space-7);
- }
+ .xl\:bui-mr-3 {
+ margin-right: var(--bui-space-3);
+ }
- .sm\:bui-mr-8 {
- margin-right: var(--bui-space-8);
- }
+ .xl\:bui-mr-4 {
+ margin-right: var(--bui-space-4);
+ }
- .sm\:bui-mr-9 {
- margin-right: var(--bui-space-9);
- }
+ .xl\:bui-mr-5 {
+ margin-right: var(--bui-space-5);
+ }
- .sm\:bui-mr-10 {
- margin-right: var(--bui-space-10);
- }
+ .xl\:bui-mr-6 {
+ margin-right: var(--bui-space-6);
+ }
- .sm\:bui-mr-11 {
- margin-right: var(--bui-space-11);
- }
+ .xl\:bui-mr-7 {
+ margin-right: var(--bui-space-7);
+ }
- .sm\:bui-mr-12 {
- margin-right: var(--bui-space-12);
- }
+ .xl\:bui-mr-8 {
+ margin-right: var(--bui-space-8);
+ }
- .sm\:bui-mr-13 {
- margin-right: var(--bui-space-13);
- }
+ .xl\:bui-mr-9 {
+ margin-right: var(--bui-space-9);
+ }
- .sm\:bui-mr-14 {
- margin-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-mr {
- margin-right: var(--pr-md);
- }
-
- .md\:bui-mr-0\.5 {
- margin-right: var(--bui-space-0_5);
- }
-
- .md\:bui-mr-1 {
- margin-right: var(--bui-space-1);
- }
-
- .md\:bui-mr-1\.5 {
- margin-right: var(--bui-space-1_5);
- }
-
- .md\:bui-mr-2 {
- margin-right: var(--bui-space-2);
- }
-
- .md\:bui-mr-3 {
- margin-right: var(--bui-space-3);
- }
-
- .md\:bui-mr-4 {
- margin-right: var(--bui-space-4);
- }
-
- .md\:bui-mr-5 {
- margin-right: var(--bui-space-5);
- }
-
- .md\:bui-mr-6 {
- margin-right: var(--bui-space-6);
- }
-
- .md\:bui-mr-7 {
- margin-right: var(--bui-space-7);
- }
-
- .md\:bui-mr-8 {
- margin-right: var(--bui-space-8);
- }
-
- .md\:bui-mr-9 {
- margin-right: var(--bui-space-9);
- }
-
- .md\:bui-mr-10 {
- margin-right: var(--bui-space-10);
- }
-
- .md\:bui-mr-11 {
- margin-right: var(--bui-space-11);
- }
-
- .md\:bui-mr-12 {
- margin-right: var(--bui-space-12);
- }
-
- .md\:bui-mr-13 {
- margin-right: var(--bui-space-13);
- }
-
- .md\:bui-mr-14 {
- margin-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-mr {
- margin-right: var(--pr-lg);
- }
-
- .lg\:bui-mr-0\.5 {
- margin-right: var(--bui-space-0_5);
- }
-
- .lg\:bui-mr-1 {
- margin-right: var(--bui-space-1);
- }
-
- .lg\:bui-mr-1\.5 {
- margin-right: var(--bui-space-1_5);
- }
-
- .lg\:bui-mr-2 {
- margin-right: var(--bui-space-2);
- }
-
- .lg\:bui-mr-3 {
- margin-right: var(--bui-space-3);
- }
-
- .lg\:bui-mr-4 {
- margin-right: var(--bui-space-4);
- }
-
- .lg\:bui-mr-5 {
- margin-right: var(--bui-space-5);
- }
-
- .lg\:bui-mr-6 {
- margin-right: var(--bui-space-6);
- }
-
- .lg\:bui-mr-7 {
- margin-right: var(--bui-space-7);
- }
-
- .lg\:bui-mr-8 {
- margin-right: var(--bui-space-8);
- }
-
- .lg\:bui-mr-9 {
- margin-right: var(--bui-space-9);
- }
-
- .lg\:bui-mr-10 {
- margin-right: var(--bui-space-10);
- }
-
- .lg\:bui-mr-11 {
- margin-right: var(--bui-space-11);
- }
-
- .lg\:bui-mr-12 {
- margin-right: var(--bui-space-12);
- }
-
- .lg\:bui-mr-13 {
- margin-right: var(--bui-space-13);
- }
-
- .lg\:bui-mr-14 {
- margin-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-mr {
- margin-right: var(--pr-xl);
- }
-
- .xl\:bui-mr-0\.5 {
- margin-right: var(--bui-space-0_5);
- }
-
- .xl\:bui-mr-1 {
- margin-right: var(--bui-space-1);
- }
-
- .xl\:bui-mr-1\.5 {
- margin-right: var(--bui-space-1_5);
- }
-
- .xl\:bui-mr-2 {
- margin-right: var(--bui-space-2);
- }
-
- .xl\:bui-mr-3 {
- margin-right: var(--bui-space-3);
- }
-
- .xl\:bui-mr-4 {
- margin-right: var(--bui-space-4);
- }
-
- .xl\:bui-mr-5 {
- margin-right: var(--bui-space-5);
- }
-
- .xl\:bui-mr-6 {
- margin-right: var(--bui-space-6);
- }
-
- .xl\:bui-mr-7 {
- margin-right: var(--bui-space-7);
- }
-
- .xl\:bui-mr-8 {
- margin-right: var(--bui-space-8);
- }
-
- .xl\:bui-mr-9 {
- margin-right: var(--bui-space-9);
- }
-
- .xl\:bui-mr-10 {
- margin-right: var(--bui-space-10);
- }
-
- .xl\:bui-mr-11 {
- margin-right: var(--bui-space-11);
- }
-
- .xl\:bui-mr-12 {
- margin-right: var(--bui-space-12);
- }
-
- .xl\:bui-mr-13 {
- margin-right: var(--bui-space-13);
- }
-
- .xl\:bui-mr-14 {
- margin-right: var(--bui-space-14);
+ .xl\:bui-mr-10 {
+ margin-right: var(--bui-space-10);
+ }
+
+ .xl\:bui-mr-11 {
+ margin-right: var(--bui-space-11);
+ }
+
+ .xl\:bui-mr-12 {
+ margin-right: var(--bui-space-12);
+ }
+
+ .xl\:bui-mr-13 {
+ margin-right: var(--bui-space-13);
+ }
+
+ .xl\:bui-mr-14 {
+ margin-right: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/mt.css b/packages/ui/src/css/utilities/mt.css
index 30035bf8bd..2f6ecc4aa8 100644
--- a/packages/ui/src/css/utilities/mt.css
+++ b/packages/ui/src/css/utilities/mt.css
@@ -1,422 +1,440 @@
-.bui-mt {
- margin-top: var(--mt);
-}
+/*
+ * 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.
+ */
-.bui-mt-0\.5 {
- margin-top: var(--bui-space-0_5);
-}
-
-.bui-mt-1 {
- margin-top: var(--bui-space-1);
-}
-
-.bui-mt-1\.5 {
- margin-top: var(--bui-space-1_5);
-}
-
-.bui-mt-2 {
- margin-top: var(--bui-space-2);
-}
-
-.bui-mt-3 {
- margin-top: var(--bui-space-3);
-}
-
-.bui-mt-4 {
- margin-top: var(--bui-space-4);
-}
-
-.bui-mt-5 {
- margin-top: var(--bui-space-5);
-}
-
-.bui-mt-6 {
- margin-top: var(--bui-space-6);
-}
-
-.bui-mt-7 {
- margin-top: var(--bui-space-7);
-}
-
-.bui-mt-8 {
- margin-top: var(--bui-space-8);
-}
-
-.bui-mt-9 {
- margin-top: var(--bui-space-9);
-}
-
-.bui-mt-10 {
- margin-top: var(--bui-space-10);
-}
-
-.bui-mt-11 {
- margin-top: var(--bui-space-11);
-}
-
-.bui-mt-12 {
- margin-top: var(--bui-space-12);
-}
-
-.bui-mt-13 {
- margin-top: var(--bui-space-13);
-}
-
-.bui-mt-14 {
- margin-top: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-mt {
- margin-top: var(--pt-xs);
+@layer utilities {
+ .bui-mt {
+ margin-top: var(--mt);
}
- .xs\:bui-mt-0\.5 {
+ .bui-mt-0\.5 {
margin-top: var(--bui-space-0_5);
}
- .xs\:bui-mt-1 {
+ .bui-mt-1 {
margin-top: var(--bui-space-1);
}
- .xs\:bui-mt-1\.5 {
+ .bui-mt-1\.5 {
margin-top: var(--bui-space-1_5);
}
- .xs\:bui-mt-2 {
+ .bui-mt-2 {
margin-top: var(--bui-space-2);
}
- .xs\:bui-mt-3 {
+ .bui-mt-3 {
margin-top: var(--bui-space-3);
}
- .xs\:bui-mt-4 {
+ .bui-mt-4 {
margin-top: var(--bui-space-4);
}
- .xs\:bui-mt-5 {
+ .bui-mt-5 {
margin-top: var(--bui-space-5);
}
- .xs\:bui-mt-6 {
+ .bui-mt-6 {
margin-top: var(--bui-space-6);
}
- .xs\:bui-mt-7 {
+ .bui-mt-7 {
margin-top: var(--bui-space-7);
}
- .xs\:bui-mt-8 {
+ .bui-mt-8 {
margin-top: var(--bui-space-8);
}
- .xs\:bui-mt-9 {
+ .bui-mt-9 {
margin-top: var(--bui-space-9);
}
- .xs\:bui-mt-10 {
+ .bui-mt-10 {
margin-top: var(--bui-space-10);
}
- .xs\:bui-mt-11 {
+ .bui-mt-11 {
margin-top: var(--bui-space-11);
}
- .xs\:bui-mt-12 {
+ .bui-mt-12 {
margin-top: var(--bui-space-12);
}
- .xs\:bui-mt-13 {
+ .bui-mt-13 {
margin-top: var(--bui-space-13);
}
- .xs\:bui-mt-14 {
+ .bui-mt-14 {
margin-top: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-mt {
- margin-top: var(--pt-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-mt {
+ margin-top: var(--pt-xs);
+ }
+
+ .xs\:bui-mt-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-mt-1 {
+ margin-top: var(--bui-space-1);
+ }
+
+ .xs\:bui-mt-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-mt-2 {
+ margin-top: var(--bui-space-2);
+ }
+
+ .xs\:bui-mt-3 {
+ margin-top: var(--bui-space-3);
+ }
+
+ .xs\:bui-mt-4 {
+ margin-top: var(--bui-space-4);
+ }
+
+ .xs\:bui-mt-5 {
+ margin-top: var(--bui-space-5);
+ }
+
+ .xs\:bui-mt-6 {
+ margin-top: var(--bui-space-6);
+ }
+
+ .xs\:bui-mt-7 {
+ margin-top: var(--bui-space-7);
+ }
+
+ .xs\:bui-mt-8 {
+ margin-top: var(--bui-space-8);
+ }
+
+ .xs\:bui-mt-9 {
+ margin-top: var(--bui-space-9);
+ }
+
+ .xs\:bui-mt-10 {
+ margin-top: var(--bui-space-10);
+ }
+
+ .xs\:bui-mt-11 {
+ margin-top: var(--bui-space-11);
+ }
+
+ .xs\:bui-mt-12 {
+ margin-top: var(--bui-space-12);
+ }
+
+ .xs\:bui-mt-13 {
+ margin-top: var(--bui-space-13);
+ }
+
+ .xs\:bui-mt-14 {
+ margin-top: var(--bui-space-14);
+ }
}
- .sm\:bui-mt-0\.5 {
- margin-top: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-mt {
+ margin-top: var(--pt-sm);
+ }
+
+ .sm\:bui-mt-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-mt-1 {
+ margin-top: var(--bui-space-1);
+ }
+
+ .sm\:bui-mt-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-mt-2 {
+ margin-top: var(--bui-space-2);
+ }
+
+ .sm\:bui-mt-3 {
+ margin-top: var(--bui-space-3);
+ }
+
+ .sm\:bui-mt-4 {
+ margin-top: var(--bui-space-4);
+ }
+
+ .sm\:bui-mt-5 {
+ margin-top: var(--bui-space-5);
+ }
+
+ .sm\:bui-mt-6 {
+ margin-top: var(--bui-space-6);
+ }
+
+ .sm\:bui-mt-7 {
+ margin-top: var(--bui-space-7);
+ }
+
+ .sm\:bui-mt-8 {
+ margin-top: var(--bui-space-8);
+ }
+
+ .sm\:bui-mt-9 {
+ margin-top: var(--bui-space-9);
+ }
+
+ .sm\:bui-mt-10 {
+ margin-top: var(--bui-space-10);
+ }
+
+ .sm\:bui-mt-11 {
+ margin-top: var(--bui-space-11);
+ }
+
+ .sm\:bui-mt-12 {
+ margin-top: var(--bui-space-12);
+ }
+
+ .sm\:bui-mt-13 {
+ margin-top: var(--bui-space-13);
+ }
+
+ .sm\:bui-mt-14 {
+ margin-top: var(--bui-space-14);
+ }
}
- .sm\:bui-mt-1 {
- margin-top: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-mt {
+ margin-top: var(--pt-md);
+ }
+
+ .md\:bui-mt-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ }
+
+ .md\:bui-mt-1 {
+ margin-top: var(--bui-space-1);
+ }
+
+ .md\:bui-mt-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ }
+
+ .md\:bui-mt-2 {
+ margin-top: var(--bui-space-2);
+ }
+
+ .md\:bui-mt-3 {
+ margin-top: var(--bui-space-3);
+ }
+
+ .md\:bui-mt-4 {
+ margin-top: var(--bui-space-4);
+ }
+
+ .md\:bui-mt-5 {
+ margin-top: var(--bui-space-5);
+ }
+
+ .md\:bui-mt-6 {
+ margin-top: var(--bui-space-6);
+ }
+
+ .md\:bui-mt-7 {
+ margin-top: var(--bui-space-7);
+ }
+
+ .md\:bui-mt-8 {
+ margin-top: var(--bui-space-8);
+ }
+
+ .md\:bui-mt-9 {
+ margin-top: var(--bui-space-9);
+ }
+
+ .md\:bui-mt-10 {
+ margin-top: var(--bui-space-10);
+ }
+
+ .md\:bui-mt-11 {
+ margin-top: var(--bui-space-11);
+ }
+
+ .md\:bui-mt-12 {
+ margin-top: var(--bui-space-12);
+ }
+
+ .md\:bui-mt-13 {
+ margin-top: var(--bui-space-13);
+ }
+
+ .md\:bui-mt-14 {
+ margin-top: var(--bui-space-14);
+ }
}
- .sm\:bui-mt-1\.5 {
- margin-top: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-mt {
+ margin-top: var(--pt-lg);
+ }
+
+ .lg\:bui-mt-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-mt-1 {
+ margin-top: var(--bui-space-1);
+ }
+
+ .lg\:bui-mt-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-mt-2 {
+ margin-top: var(--bui-space-2);
+ }
+
+ .lg\:bui-mt-3 {
+ margin-top: var(--bui-space-3);
+ }
+
+ .lg\:bui-mt-4 {
+ margin-top: var(--bui-space-4);
+ }
+
+ .lg\:bui-mt-5 {
+ margin-top: var(--bui-space-5);
+ }
+
+ .lg\:bui-mt-6 {
+ margin-top: var(--bui-space-6);
+ }
+
+ .lg\:bui-mt-7 {
+ margin-top: var(--bui-space-7);
+ }
+
+ .lg\:bui-mt-8 {
+ margin-top: var(--bui-space-8);
+ }
+
+ .lg\:bui-mt-9 {
+ margin-top: var(--bui-space-9);
+ }
+
+ .lg\:bui-mt-10 {
+ margin-top: var(--bui-space-10);
+ }
+
+ .lg\:bui-mt-11 {
+ margin-top: var(--bui-space-11);
+ }
+
+ .lg\:bui-mt-12 {
+ margin-top: var(--bui-space-12);
+ }
+
+ .lg\:bui-mt-13 {
+ margin-top: var(--bui-space-13);
+ }
+
+ .lg\:bui-mt-14 {
+ margin-top: var(--bui-space-14);
+ }
}
- .sm\:bui-mt-2 {
- margin-top: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-mt {
+ margin-top: var(--pt-xl);
+ }
- .sm\:bui-mt-3 {
- margin-top: var(--bui-space-3);
- }
+ .xl\:bui-mt-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ }
- .sm\:bui-mt-4 {
- margin-top: var(--bui-space-4);
- }
+ .xl\:bui-mt-1 {
+ margin-top: var(--bui-space-1);
+ }
- .sm\:bui-mt-5 {
- margin-top: var(--bui-space-5);
- }
+ .xl\:bui-mt-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ }
- .sm\:bui-mt-6 {
- margin-top: var(--bui-space-6);
- }
+ .xl\:bui-mt-2 {
+ margin-top: var(--bui-space-2);
+ }
- .sm\:bui-mt-7 {
- margin-top: var(--bui-space-7);
- }
+ .xl\:bui-mt-3 {
+ margin-top: var(--bui-space-3);
+ }
- .sm\:bui-mt-8 {
- margin-top: var(--bui-space-8);
- }
+ .xl\:bui-mt-4 {
+ margin-top: var(--bui-space-4);
+ }
- .sm\:bui-mt-9 {
- margin-top: var(--bui-space-9);
- }
+ .xl\:bui-mt-5 {
+ margin-top: var(--bui-space-5);
+ }
- .sm\:bui-mt-10 {
- margin-top: var(--bui-space-10);
- }
+ .xl\:bui-mt-6 {
+ margin-top: var(--bui-space-6);
+ }
- .sm\:bui-mt-11 {
- margin-top: var(--bui-space-11);
- }
+ .xl\:bui-mt-7 {
+ margin-top: var(--bui-space-7);
+ }
- .sm\:bui-mt-12 {
- margin-top: var(--bui-space-12);
- }
+ .xl\:bui-mt-8 {
+ margin-top: var(--bui-space-8);
+ }
- .sm\:bui-mt-13 {
- margin-top: var(--bui-space-13);
- }
+ .xl\:bui-mt-9 {
+ margin-top: var(--bui-space-9);
+ }
- .sm\:bui-mt-14 {
- margin-top: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-mt {
- margin-top: var(--pt-md);
- }
-
- .md\:bui-mt-0\.5 {
- margin-top: var(--bui-space-0_5);
- }
-
- .md\:bui-mt-1 {
- margin-top: var(--bui-space-1);
- }
-
- .md\:bui-mt-1\.5 {
- margin-top: var(--bui-space-1_5);
- }
-
- .md\:bui-mt-2 {
- margin-top: var(--bui-space-2);
- }
-
- .md\:bui-mt-3 {
- margin-top: var(--bui-space-3);
- }
-
- .md\:bui-mt-4 {
- margin-top: var(--bui-space-4);
- }
-
- .md\:bui-mt-5 {
- margin-top: var(--bui-space-5);
- }
-
- .md\:bui-mt-6 {
- margin-top: var(--bui-space-6);
- }
-
- .md\:bui-mt-7 {
- margin-top: var(--bui-space-7);
- }
-
- .md\:bui-mt-8 {
- margin-top: var(--bui-space-8);
- }
-
- .md\:bui-mt-9 {
- margin-top: var(--bui-space-9);
- }
-
- .md\:bui-mt-10 {
- margin-top: var(--bui-space-10);
- }
-
- .md\:bui-mt-11 {
- margin-top: var(--bui-space-11);
- }
-
- .md\:bui-mt-12 {
- margin-top: var(--bui-space-12);
- }
-
- .md\:bui-mt-13 {
- margin-top: var(--bui-space-13);
- }
-
- .md\:bui-mt-14 {
- margin-top: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-mt {
- margin-top: var(--pt-lg);
- }
-
- .lg\:bui-mt-0\.5 {
- margin-top: var(--bui-space-0_5);
- }
-
- .lg\:bui-mt-1 {
- margin-top: var(--bui-space-1);
- }
-
- .lg\:bui-mt-1\.5 {
- margin-top: var(--bui-space-1_5);
- }
-
- .lg\:bui-mt-2 {
- margin-top: var(--bui-space-2);
- }
-
- .lg\:bui-mt-3 {
- margin-top: var(--bui-space-3);
- }
-
- .lg\:bui-mt-4 {
- margin-top: var(--bui-space-4);
- }
-
- .lg\:bui-mt-5 {
- margin-top: var(--bui-space-5);
- }
-
- .lg\:bui-mt-6 {
- margin-top: var(--bui-space-6);
- }
-
- .lg\:bui-mt-7 {
- margin-top: var(--bui-space-7);
- }
-
- .lg\:bui-mt-8 {
- margin-top: var(--bui-space-8);
- }
-
- .lg\:bui-mt-9 {
- margin-top: var(--bui-space-9);
- }
-
- .lg\:bui-mt-10 {
- margin-top: var(--bui-space-10);
- }
-
- .lg\:bui-mt-11 {
- margin-top: var(--bui-space-11);
- }
-
- .lg\:bui-mt-12 {
- margin-top: var(--bui-space-12);
- }
-
- .lg\:bui-mt-13 {
- margin-top: var(--bui-space-13);
- }
-
- .lg\:bui-mt-14 {
- margin-top: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-mt {
- margin-top: var(--pt-xl);
- }
-
- .xl\:bui-mt-0\.5 {
- margin-top: var(--bui-space-0_5);
- }
-
- .xl\:bui-mt-1 {
- margin-top: var(--bui-space-1);
- }
-
- .xl\:bui-mt-1\.5 {
- margin-top: var(--bui-space-1_5);
- }
-
- .xl\:bui-mt-2 {
- margin-top: var(--bui-space-2);
- }
-
- .xl\:bui-mt-3 {
- margin-top: var(--bui-space-3);
- }
-
- .xl\:bui-mt-4 {
- margin-top: var(--bui-space-4);
- }
-
- .xl\:bui-mt-5 {
- margin-top: var(--bui-space-5);
- }
-
- .xl\:bui-mt-6 {
- margin-top: var(--bui-space-6);
- }
-
- .xl\:bui-mt-7 {
- margin-top: var(--bui-space-7);
- }
-
- .xl\:bui-mt-8 {
- margin-top: var(--bui-space-8);
- }
-
- .xl\:bui-mt-9 {
- margin-top: var(--bui-space-9);
- }
-
- .xl\:bui-mt-10 {
- margin-top: var(--bui-space-10);
- }
-
- .xl\:bui-mt-11 {
- margin-top: var(--bui-space-11);
- }
-
- .xl\:bui-mt-12 {
- margin-top: var(--bui-space-12);
- }
-
- .xl\:bui-mt-13 {
- margin-top: var(--bui-space-13);
- }
-
- .xl\:bui-mt-14 {
- margin-top: var(--bui-space-14);
+ .xl\:bui-mt-10 {
+ margin-top: var(--bui-space-10);
+ }
+
+ .xl\:bui-mt-11 {
+ margin-top: var(--bui-space-11);
+ }
+
+ .xl\:bui-mt-12 {
+ margin-top: var(--bui-space-12);
+ }
+
+ .xl\:bui-mt-13 {
+ margin-top: var(--bui-space-13);
+ }
+
+ .xl\:bui-mt-14 {
+ margin-top: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/mx.css b/packages/ui/src/css/utilities/mx.css
index 36bdf32796..4898fc2352 100644
--- a/packages/ui/src/css/utilities/mx.css
+++ b/packages/ui/src/css/utilities/mx.css
@@ -1,524 +1,542 @@
-.bui-mx {
- margin-left: var(--mx);
- margin-right: var(--mx);
-}
+/*
+ * 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.
+ */
-.bui-mx-0\.5 {
- margin-left: var(--bui-space-0_5);
- margin-right: var(--bui-space-0_5);
-}
-
-.bui-mx-1 {
- margin-left: var(--bui-space-1);
- margin-right: var(--bui-space-1);
-}
-
-.bui-mx-1\.5 {
- margin-left: var(--bui-space-1_5);
- margin-right: var(--bui-space-1_5);
-}
-
-.bui-mx-2 {
- margin-left: var(--bui-space-2);
- margin-right: var(--bui-space-2);
-}
-
-.bui-mx-3 {
- margin-left: var(--bui-space-3);
- margin-right: var(--bui-space-3);
-}
-
-.bui-mx-4 {
- margin-left: var(--bui-space-4);
- margin-right: var(--bui-space-4);
-}
-
-.bui-mx-5 {
- margin-left: var(--bui-space-5);
- margin-right: var(--bui-space-5);
-}
-
-.bui-mx-6 {
- margin-left: var(--bui-space-6);
- margin-right: var(--bui-space-6);
-}
-
-.bui-mx-7 {
- margin-left: var(--bui-space-7);
- margin-right: var(--bui-space-7);
-}
-
-.bui-mx-8 {
- margin-left: var(--bui-space-8);
- margin-right: var(--bui-space-8);
-}
-
-.bui-mx-9 {
- margin-left: var(--bui-space-9);
- margin-right: var(--bui-space-9);
-}
-
-.bui-mx-10 {
- margin-left: var(--bui-space-10);
- margin-right: var(--bui-space-10);
-}
-
-.bui-mx-11 {
- margin-left: var(--bui-space-11);
- margin-right: var(--bui-space-11);
-}
-
-.bui-mx-12 {
- margin-left: var(--bui-space-12);
- margin-right: var(--bui-space-12);
-}
-
-.bui-mx-13 {
- margin-left: var(--bui-space-13);
- margin-right: var(--bui-space-13);
-}
-
-.bui-mx-14 {
- margin-left: var(--bui-space-14);
- margin-right: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-mx {
- margin-left: var(--px-xs);
- margin-right: var(--px-xs);
+@layer utilities {
+ .bui-mx {
+ margin-left: var(--mx);
+ margin-right: var(--mx);
}
- .xs\:bui-mx-0\.5 {
+ .bui-mx-0\.5 {
margin-left: var(--bui-space-0_5);
margin-right: var(--bui-space-0_5);
}
- .xs\:bui-mx-1 {
+ .bui-mx-1 {
margin-left: var(--bui-space-1);
margin-right: var(--bui-space-1);
}
- .xs\:bui-mx-1\.5 {
+ .bui-mx-1\.5 {
margin-left: var(--bui-space-1_5);
margin-right: var(--bui-space-1_5);
}
- .xs\:bui-mx-2 {
+ .bui-mx-2 {
margin-left: var(--bui-space-2);
margin-right: var(--bui-space-2);
}
- .xs\:bui-mx-3 {
+ .bui-mx-3 {
margin-left: var(--bui-space-3);
margin-right: var(--bui-space-3);
}
- .xs\:bui-mx-4 {
+ .bui-mx-4 {
margin-left: var(--bui-space-4);
margin-right: var(--bui-space-4);
}
- .xs\:bui-mx-5 {
+ .bui-mx-5 {
margin-left: var(--bui-space-5);
margin-right: var(--bui-space-5);
}
- .xs\:bui-mx-6 {
+ .bui-mx-6 {
margin-left: var(--bui-space-6);
margin-right: var(--bui-space-6);
}
- .xs\:bui-mx-7 {
+ .bui-mx-7 {
margin-left: var(--bui-space-7);
margin-right: var(--bui-space-7);
}
- .xs\:bui-mx-8 {
+ .bui-mx-8 {
margin-left: var(--bui-space-8);
margin-right: var(--bui-space-8);
}
- .xs\:bui-mx-9 {
+ .bui-mx-9 {
margin-left: var(--bui-space-9);
margin-right: var(--bui-space-9);
}
- .xs\:bui-mx-10 {
+ .bui-mx-10 {
margin-left: var(--bui-space-10);
margin-right: var(--bui-space-10);
}
- .xs\:bui-mx-11 {
+ .bui-mx-11 {
margin-left: var(--bui-space-11);
margin-right: var(--bui-space-11);
}
- .xs\:bui-mx-12 {
+ .bui-mx-12 {
margin-left: var(--bui-space-12);
margin-right: var(--bui-space-12);
}
- .xs\:bui-mx-13 {
+ .bui-mx-13 {
margin-left: var(--bui-space-13);
margin-right: var(--bui-space-13);
}
- .xs\:bui-mx-14 {
+ .bui-mx-14 {
margin-left: var(--bui-space-14);
margin-right: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-mx {
- margin-left: var(--px-sm);
- margin-right: var(--px-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-mx {
+ margin-left: var(--px-xs);
+ margin-right: var(--px-xs);
+ }
+
+ .xs\:bui-mx-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ margin-right: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-mx-1 {
+ margin-left: var(--bui-space-1);
+ margin-right: var(--bui-space-1);
+ }
+
+ .xs\:bui-mx-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ margin-right: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-mx-2 {
+ margin-left: var(--bui-space-2);
+ margin-right: var(--bui-space-2);
+ }
+
+ .xs\:bui-mx-3 {
+ margin-left: var(--bui-space-3);
+ margin-right: var(--bui-space-3);
+ }
+
+ .xs\:bui-mx-4 {
+ margin-left: var(--bui-space-4);
+ margin-right: var(--bui-space-4);
+ }
+
+ .xs\:bui-mx-5 {
+ margin-left: var(--bui-space-5);
+ margin-right: var(--bui-space-5);
+ }
+
+ .xs\:bui-mx-6 {
+ margin-left: var(--bui-space-6);
+ margin-right: var(--bui-space-6);
+ }
+
+ .xs\:bui-mx-7 {
+ margin-left: var(--bui-space-7);
+ margin-right: var(--bui-space-7);
+ }
+
+ .xs\:bui-mx-8 {
+ margin-left: var(--bui-space-8);
+ margin-right: var(--bui-space-8);
+ }
+
+ .xs\:bui-mx-9 {
+ margin-left: var(--bui-space-9);
+ margin-right: var(--bui-space-9);
+ }
+
+ .xs\:bui-mx-10 {
+ margin-left: var(--bui-space-10);
+ margin-right: var(--bui-space-10);
+ }
+
+ .xs\:bui-mx-11 {
+ margin-left: var(--bui-space-11);
+ margin-right: var(--bui-space-11);
+ }
+
+ .xs\:bui-mx-12 {
+ margin-left: var(--bui-space-12);
+ margin-right: var(--bui-space-12);
+ }
+
+ .xs\:bui-mx-13 {
+ margin-left: var(--bui-space-13);
+ margin-right: var(--bui-space-13);
+ }
+
+ .xs\:bui-mx-14 {
+ margin-left: var(--bui-space-14);
+ margin-right: var(--bui-space-14);
+ }
}
- .sm\:bui-mx-0\.5 {
- margin-left: var(--bui-space-0_5);
- margin-right: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-mx {
+ margin-left: var(--px-sm);
+ margin-right: var(--px-sm);
+ }
+
+ .sm\:bui-mx-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ margin-right: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-mx-1 {
+ margin-left: var(--bui-space-1);
+ margin-right: var(--bui-space-1);
+ }
+
+ .sm\:bui-mx-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ margin-right: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-mx-2 {
+ margin-left: var(--bui-space-2);
+ margin-right: var(--bui-space-2);
+ }
+
+ .sm\:bui-mx-3 {
+ margin-left: var(--bui-space-3);
+ margin-right: var(--bui-space-3);
+ }
+
+ .sm\:bui-mx-4 {
+ margin-left: var(--bui-space-4);
+ margin-right: var(--bui-space-4);
+ }
+
+ .sm\:bui-mx-5 {
+ margin-left: var(--bui-space-5);
+ margin-right: var(--bui-space-5);
+ }
+
+ .sm\:bui-mx-6 {
+ margin-left: var(--bui-space-6);
+ margin-right: var(--bui-space-6);
+ }
+
+ .sm\:bui-mx-7 {
+ margin-left: var(--bui-space-7);
+ margin-right: var(--bui-space-7);
+ }
+
+ .sm\:bui-mx-8 {
+ margin-left: var(--bui-space-8);
+ margin-right: var(--bui-space-8);
+ }
+
+ .sm\:bui-mx-9 {
+ margin-left: var(--bui-space-9);
+ margin-right: var(--bui-space-9);
+ }
+
+ .sm\:bui-mx-10 {
+ margin-left: var(--bui-space-10);
+ margin-right: var(--bui-space-10);
+ }
+
+ .sm\:bui-mx-11 {
+ margin-left: var(--bui-space-11);
+ margin-right: var(--bui-space-11);
+ }
+
+ .sm\:bui-mx-12 {
+ margin-left: var(--bui-space-12);
+ margin-right: var(--bui-space-12);
+ }
+
+ .sm\:bui-mx-13 {
+ margin-left: var(--bui-space-13);
+ margin-right: var(--bui-space-13);
+ }
+
+ .sm\:bui-mx-14 {
+ margin-left: var(--bui-space-14);
+ margin-right: var(--bui-space-14);
+ }
}
- .sm\:bui-mx-1 {
- margin-left: var(--bui-space-1);
- margin-right: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-mx {
+ margin-left: var(--px-md);
+ margin-right: var(--px-md);
+ }
+
+ .md\:bui-mx-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ margin-right: var(--bui-space-0_5);
+ }
+
+ .md\:bui-mx-1 {
+ margin-left: var(--bui-space-1);
+ margin-right: var(--bui-space-1);
+ }
+
+ .md\:bui-mx-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ margin-right: var(--bui-space-1_5);
+ }
+
+ .md\:bui-mx-2 {
+ margin-left: var(--bui-space-2);
+ margin-right: var(--bui-space-2);
+ }
+
+ .md\:bui-mx-3 {
+ margin-left: var(--bui-space-3);
+ margin-right: var(--bui-space-3);
+ }
+
+ .md\:bui-mx-4 {
+ margin-left: var(--bui-space-4);
+ margin-right: var(--bui-space-4);
+ }
+
+ .md\:bui-mx-5 {
+ margin-left: var(--bui-space-5);
+ margin-right: var(--bui-space-5);
+ }
+
+ .md\:bui-mx-6 {
+ margin-left: var(--bui-space-6);
+ margin-right: var(--bui-space-6);
+ }
+
+ .md\:bui-mx-7 {
+ margin-left: var(--bui-space-7);
+ margin-right: var(--bui-space-7);
+ }
+
+ .md\:bui-mx-8 {
+ margin-left: var(--bui-space-8);
+ margin-right: var(--bui-space-8);
+ }
+
+ .md\:bui-mx-9 {
+ margin-left: var(--bui-space-9);
+ margin-right: var(--bui-space-9);
+ }
+
+ .md\:bui-mx-10 {
+ margin-left: var(--bui-space-10);
+ margin-right: var(--bui-space-10);
+ }
+
+ .md\:bui-mx-11 {
+ margin-left: var(--bui-space-11);
+ margin-right: var(--bui-space-11);
+ }
+
+ .md\:bui-mx-12 {
+ margin-left: var(--bui-space-12);
+ margin-right: var(--bui-space-12);
+ }
+
+ .md\:bui-mx-13 {
+ margin-left: var(--bui-space-13);
+ margin-right: var(--bui-space-13);
+ }
+
+ .md\:bui-mx-14 {
+ margin-left: var(--bui-space-14);
+ margin-right: var(--bui-space-14);
+ }
}
- .sm\:bui-mx-1\.5 {
- margin-left: var(--bui-space-1_5);
- margin-right: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-mx {
+ margin-left: var(--px-lg);
+ margin-right: var(--px-lg);
+ }
+
+ .lg\:bui-mx-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ margin-right: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-mx-1 {
+ margin-left: var(--bui-space-1);
+ margin-right: var(--bui-space-1);
+ }
+
+ .lg\:bui-mx-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ margin-right: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-mx-2 {
+ margin-left: var(--bui-space-2);
+ margin-right: var(--bui-space-2);
+ }
+
+ .lg\:bui-mx-3 {
+ margin-left: var(--bui-space-3);
+ margin-right: var(--bui-space-3);
+ }
+
+ .lg\:bui-mx-4 {
+ margin-left: var(--bui-space-4);
+ margin-right: var(--bui-space-4);
+ }
+
+ .lg\:bui-mx-5 {
+ margin-left: var(--bui-space-5);
+ margin-right: var(--bui-space-5);
+ }
+
+ .lg\:bui-mx-6 {
+ margin-left: var(--bui-space-6);
+ margin-right: var(--bui-space-6);
+ }
+
+ .lg\:bui-mx-7 {
+ margin-left: var(--bui-space-7);
+ margin-right: var(--bui-space-7);
+ }
+
+ .lg\:bui-mx-8 {
+ margin-left: var(--bui-space-8);
+ margin-right: var(--bui-space-8);
+ }
+
+ .lg\:bui-mx-9 {
+ margin-left: var(--bui-space-9);
+ margin-right: var(--bui-space-9);
+ }
+
+ .lg\:bui-mx-10 {
+ margin-left: var(--bui-space-10);
+ margin-right: var(--bui-space-10);
+ }
+
+ .lg\:bui-mx-11 {
+ margin-left: var(--bui-space-11);
+ margin-right: var(--bui-space-11);
+ }
+
+ .lg\:bui-mx-12 {
+ margin-left: var(--bui-space-12);
+ margin-right: var(--bui-space-12);
+ }
+
+ .lg\:bui-mx-13 {
+ margin-left: var(--bui-space-13);
+ margin-right: var(--bui-space-13);
+ }
+
+ .lg\:bui-mx-14 {
+ margin-left: var(--bui-space-14);
+ margin-right: var(--bui-space-14);
+ }
}
- .sm\:bui-mx-2 {
- margin-left: var(--bui-space-2);
- margin-right: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-mx {
+ margin-left: var(--px-xl);
+ margin-right: var(--px-xl);
+ }
- .sm\:bui-mx-3 {
- margin-left: var(--bui-space-3);
- margin-right: var(--bui-space-3);
- }
+ .xl\:bui-mx-0\.5 {
+ margin-left: var(--bui-space-0_5);
+ margin-right: var(--bui-space-0_5);
+ }
- .sm\:bui-mx-4 {
- margin-left: var(--bui-space-4);
- margin-right: var(--bui-space-4);
- }
+ .xl\:bui-mx-1 {
+ margin-left: var(--bui-space-1);
+ margin-right: var(--bui-space-1);
+ }
- .sm\:bui-mx-5 {
- margin-left: var(--bui-space-5);
- margin-right: var(--bui-space-5);
- }
+ .xl\:bui-mx-1\.5 {
+ margin-left: var(--bui-space-1_5);
+ margin-right: var(--bui-space-1_5);
+ }
- .sm\:bui-mx-6 {
- margin-left: var(--bui-space-6);
- margin-right: var(--bui-space-6);
- }
+ .xl\:bui-mx-2 {
+ margin-left: var(--bui-space-2);
+ margin-right: var(--bui-space-2);
+ }
- .sm\:bui-mx-7 {
- margin-left: var(--bui-space-7);
- margin-right: var(--bui-space-7);
- }
+ .xl\:bui-mx-3 {
+ margin-left: var(--bui-space-3);
+ margin-right: var(--bui-space-3);
+ }
- .sm\:bui-mx-8 {
- margin-left: var(--bui-space-8);
- margin-right: var(--bui-space-8);
- }
+ .xl\:bui-mx-4 {
+ margin-left: var(--bui-space-4);
+ margin-right: var(--bui-space-4);
+ }
- .sm\:bui-mx-9 {
- margin-left: var(--bui-space-9);
- margin-right: var(--bui-space-9);
- }
+ .xl\:bui-mx-5 {
+ margin-left: var(--bui-space-5);
+ margin-right: var(--bui-space-5);
+ }
- .sm\:bui-mx-10 {
- margin-left: var(--bui-space-10);
- margin-right: var(--bui-space-10);
- }
+ .xl\:bui-mx-6 {
+ margin-left: var(--bui-space-6);
+ margin-right: var(--bui-space-6);
+ }
- .sm\:bui-mx-11 {
- margin-left: var(--bui-space-11);
- margin-right: var(--bui-space-11);
- }
+ .xl\:bui-mx-7 {
+ margin-left: var(--bui-space-7);
+ margin-right: var(--bui-space-7);
+ }
- .sm\:bui-mx-12 {
- margin-left: var(--bui-space-12);
- margin-right: var(--bui-space-12);
- }
+ .xl\:bui-mx-8 {
+ margin-left: var(--bui-space-8);
+ margin-right: var(--bui-space-8);
+ }
- .sm\:bui-mx-13 {
- margin-left: var(--bui-space-13);
- margin-right: var(--bui-space-13);
- }
+ .xl\:bui-mx-9 {
+ margin-left: var(--bui-space-9);
+ margin-right: var(--bui-space-9);
+ }
- .sm\:bui-mx-14 {
- margin-left: var(--bui-space-14);
- margin-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-mx {
- margin-left: var(--px-md);
- margin-right: var(--px-md);
- }
-
- .md\:bui-mx-0\.5 {
- margin-left: var(--bui-space-0_5);
- margin-right: var(--bui-space-0_5);
- }
-
- .md\:bui-mx-1 {
- margin-left: var(--bui-space-1);
- margin-right: var(--bui-space-1);
- }
-
- .md\:bui-mx-1\.5 {
- margin-left: var(--bui-space-1_5);
- margin-right: var(--bui-space-1_5);
- }
-
- .md\:bui-mx-2 {
- margin-left: var(--bui-space-2);
- margin-right: var(--bui-space-2);
- }
-
- .md\:bui-mx-3 {
- margin-left: var(--bui-space-3);
- margin-right: var(--bui-space-3);
- }
-
- .md\:bui-mx-4 {
- margin-left: var(--bui-space-4);
- margin-right: var(--bui-space-4);
- }
-
- .md\:bui-mx-5 {
- margin-left: var(--bui-space-5);
- margin-right: var(--bui-space-5);
- }
-
- .md\:bui-mx-6 {
- margin-left: var(--bui-space-6);
- margin-right: var(--bui-space-6);
- }
-
- .md\:bui-mx-7 {
- margin-left: var(--bui-space-7);
- margin-right: var(--bui-space-7);
- }
-
- .md\:bui-mx-8 {
- margin-left: var(--bui-space-8);
- margin-right: var(--bui-space-8);
- }
-
- .md\:bui-mx-9 {
- margin-left: var(--bui-space-9);
- margin-right: var(--bui-space-9);
- }
-
- .md\:bui-mx-10 {
- margin-left: var(--bui-space-10);
- margin-right: var(--bui-space-10);
- }
-
- .md\:bui-mx-11 {
- margin-left: var(--bui-space-11);
- margin-right: var(--bui-space-11);
- }
-
- .md\:bui-mx-12 {
- margin-left: var(--bui-space-12);
- margin-right: var(--bui-space-12);
- }
-
- .md\:bui-mx-13 {
- margin-left: var(--bui-space-13);
- margin-right: var(--bui-space-13);
- }
-
- .md\:bui-mx-14 {
- margin-left: var(--bui-space-14);
- margin-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-mx {
- margin-left: var(--px-lg);
- margin-right: var(--px-lg);
- }
-
- .lg\:bui-mx-0\.5 {
- margin-left: var(--bui-space-0_5);
- margin-right: var(--bui-space-0_5);
- }
-
- .lg\:bui-mx-1 {
- margin-left: var(--bui-space-1);
- margin-right: var(--bui-space-1);
- }
-
- .lg\:bui-mx-1\.5 {
- margin-left: var(--bui-space-1_5);
- margin-right: var(--bui-space-1_5);
- }
-
- .lg\:bui-mx-2 {
- margin-left: var(--bui-space-2);
- margin-right: var(--bui-space-2);
- }
-
- .lg\:bui-mx-3 {
- margin-left: var(--bui-space-3);
- margin-right: var(--bui-space-3);
- }
-
- .lg\:bui-mx-4 {
- margin-left: var(--bui-space-4);
- margin-right: var(--bui-space-4);
- }
-
- .lg\:bui-mx-5 {
- margin-left: var(--bui-space-5);
- margin-right: var(--bui-space-5);
- }
-
- .lg\:bui-mx-6 {
- margin-left: var(--bui-space-6);
- margin-right: var(--bui-space-6);
- }
-
- .lg\:bui-mx-7 {
- margin-left: var(--bui-space-7);
- margin-right: var(--bui-space-7);
- }
-
- .lg\:bui-mx-8 {
- margin-left: var(--bui-space-8);
- margin-right: var(--bui-space-8);
- }
-
- .lg\:bui-mx-9 {
- margin-left: var(--bui-space-9);
- margin-right: var(--bui-space-9);
- }
-
- .lg\:bui-mx-10 {
- margin-left: var(--bui-space-10);
- margin-right: var(--bui-space-10);
- }
-
- .lg\:bui-mx-11 {
- margin-left: var(--bui-space-11);
- margin-right: var(--bui-space-11);
- }
-
- .lg\:bui-mx-12 {
- margin-left: var(--bui-space-12);
- margin-right: var(--bui-space-12);
- }
-
- .lg\:bui-mx-13 {
- margin-left: var(--bui-space-13);
- margin-right: var(--bui-space-13);
- }
-
- .lg\:bui-mx-14 {
- margin-left: var(--bui-space-14);
- margin-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-mx {
- margin-left: var(--px-xl);
- margin-right: var(--px-xl);
- }
-
- .xl\:bui-mx-0\.5 {
- margin-left: var(--bui-space-0_5);
- margin-right: var(--bui-space-0_5);
- }
-
- .xl\:bui-mx-1 {
- margin-left: var(--bui-space-1);
- margin-right: var(--bui-space-1);
- }
-
- .xl\:bui-mx-1\.5 {
- margin-left: var(--bui-space-1_5);
- margin-right: var(--bui-space-1_5);
- }
-
- .xl\:bui-mx-2 {
- margin-left: var(--bui-space-2);
- margin-right: var(--bui-space-2);
- }
-
- .xl\:bui-mx-3 {
- margin-left: var(--bui-space-3);
- margin-right: var(--bui-space-3);
- }
-
- .xl\:bui-mx-4 {
- margin-left: var(--bui-space-4);
- margin-right: var(--bui-space-4);
- }
-
- .xl\:bui-mx-5 {
- margin-left: var(--bui-space-5);
- margin-right: var(--bui-space-5);
- }
-
- .xl\:bui-mx-6 {
- margin-left: var(--bui-space-6);
- margin-right: var(--bui-space-6);
- }
-
- .xl\:bui-mx-7 {
- margin-left: var(--bui-space-7);
- margin-right: var(--bui-space-7);
- }
-
- .xl\:bui-mx-8 {
- margin-left: var(--bui-space-8);
- margin-right: var(--bui-space-8);
- }
-
- .xl\:bui-mx-9 {
- margin-left: var(--bui-space-9);
- margin-right: var(--bui-space-9);
- }
-
- .xl\:bui-mx-10 {
- margin-left: var(--bui-space-10);
- margin-right: var(--bui-space-10);
- }
-
- .xl\:bui-mx-11 {
- margin-left: var(--bui-space-11);
- margin-right: var(--bui-space-11);
- }
-
- .xl\:bui-mx-12 {
- margin-left: var(--bui-space-12);
- margin-right: var(--bui-space-12);
- }
-
- .xl\:bui-mx-13 {
- margin-left: var(--bui-space-13);
- margin-right: var(--bui-space-13);
- }
-
- .xl\:bui-mx-14 {
- margin-left: var(--bui-space-14);
- margin-right: var(--bui-space-14);
+ .xl\:bui-mx-10 {
+ margin-left: var(--bui-space-10);
+ margin-right: var(--bui-space-10);
+ }
+
+ .xl\:bui-mx-11 {
+ margin-left: var(--bui-space-11);
+ margin-right: var(--bui-space-11);
+ }
+
+ .xl\:bui-mx-12 {
+ margin-left: var(--bui-space-12);
+ margin-right: var(--bui-space-12);
+ }
+
+ .xl\:bui-mx-13 {
+ margin-left: var(--bui-space-13);
+ margin-right: var(--bui-space-13);
+ }
+
+ .xl\:bui-mx-14 {
+ margin-left: var(--bui-space-14);
+ margin-right: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/my.css b/packages/ui/src/css/utilities/my.css
index ab3aadf77e..a165ad478e 100644
--- a/packages/ui/src/css/utilities/my.css
+++ b/packages/ui/src/css/utilities/my.css
@@ -1,524 +1,542 @@
-.bui-my {
- margin-top: var(--my);
- margin-bottom: var(--my);
-}
+/*
+ * 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.
+ */
-.bui-my-0\.5 {
- margin-top: var(--bui-space-0_5);
- margin-bottom: var(--bui-space-0_5);
-}
-
-.bui-my-1 {
- margin-top: var(--bui-space-1);
- margin-bottom: var(--bui-space-1);
-}
-
-.bui-my-1\.5 {
- margin-top: var(--bui-space-1_5);
- margin-bottom: var(--bui-space-1_5);
-}
-
-.bui-my-2 {
- margin-top: var(--bui-space-2);
- margin-bottom: var(--bui-space-2);
-}
-
-.bui-my-3 {
- margin-top: var(--bui-space-3);
- margin-bottom: var(--bui-space-3);
-}
-
-.bui-my-4 {
- margin-top: var(--bui-space-4);
- margin-bottom: var(--bui-space-4);
-}
-
-.bui-my-5 {
- margin-top: var(--bui-space-5);
- margin-bottom: var(--bui-space-5);
-}
-
-.bui-my-6 {
- margin-top: var(--bui-space-6);
- margin-bottom: var(--bui-space-6);
-}
-
-.bui-my-7 {
- margin-top: var(--bui-space-7);
- margin-bottom: var(--bui-space-7);
-}
-
-.bui-my-8 {
- margin-top: var(--bui-space-8);
- margin-bottom: var(--bui-space-8);
-}
-
-.bui-my-9 {
- margin-top: var(--bui-space-9);
- margin-bottom: var(--bui-space-9);
-}
-
-.bui-my-10 {
- margin-top: var(--bui-space-10);
- margin-bottom: var(--bui-space-10);
-}
-
-.bui-my-11 {
- margin-top: var(--bui-space-11);
- margin-bottom: var(--bui-space-11);
-}
-
-.bui-my-12 {
- margin-top: var(--bui-space-12);
- margin-bottom: var(--bui-space-12);
-}
-
-.bui-my-13 {
- margin-top: var(--bui-space-13);
- margin-bottom: var(--bui-space-13);
-}
-
-.bui-my-14 {
- margin-top: var(--bui-space-14);
- margin-bottom: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-my {
- margin-top: var(--py-xs);
- margin-bottom: var(--py-xs);
+@layer utilities {
+ .bui-my {
+ margin-top: var(--my);
+ margin-bottom: var(--my);
}
- .xs\:bui-my-0\.5 {
+ .bui-my-0\.5 {
margin-top: var(--bui-space-0_5);
margin-bottom: var(--bui-space-0_5);
}
- .xs\:bui-my-1 {
+ .bui-my-1 {
margin-top: var(--bui-space-1);
margin-bottom: var(--bui-space-1);
}
- .xs\:bui-my-1\.5 {
+ .bui-my-1\.5 {
margin-top: var(--bui-space-1_5);
margin-bottom: var(--bui-space-1_5);
}
- .xs\:bui-my-2 {
+ .bui-my-2 {
margin-top: var(--bui-space-2);
margin-bottom: var(--bui-space-2);
}
- .xs\:bui-my-3 {
+ .bui-my-3 {
margin-top: var(--bui-space-3);
margin-bottom: var(--bui-space-3);
}
- .xs\:bui-my-4 {
+ .bui-my-4 {
margin-top: var(--bui-space-4);
margin-bottom: var(--bui-space-4);
}
- .xs\:bui-my-5 {
+ .bui-my-5 {
margin-top: var(--bui-space-5);
margin-bottom: var(--bui-space-5);
}
- .xs\:bui-my-6 {
+ .bui-my-6 {
margin-top: var(--bui-space-6);
margin-bottom: var(--bui-space-6);
}
- .xs\:bui-my-7 {
+ .bui-my-7 {
margin-top: var(--bui-space-7);
margin-bottom: var(--bui-space-7);
}
- .xs\:bui-my-8 {
+ .bui-my-8 {
margin-top: var(--bui-space-8);
margin-bottom: var(--bui-space-8);
}
- .xs\:bui-my-9 {
+ .bui-my-9 {
margin-top: var(--bui-space-9);
margin-bottom: var(--bui-space-9);
}
- .xs\:bui-my-10 {
+ .bui-my-10 {
margin-top: var(--bui-space-10);
margin-bottom: var(--bui-space-10);
}
- .xs\:bui-my-11 {
+ .bui-my-11 {
margin-top: var(--bui-space-11);
margin-bottom: var(--bui-space-11);
}
- .xs\:bui-my-12 {
+ .bui-my-12 {
margin-top: var(--bui-space-12);
margin-bottom: var(--bui-space-12);
}
- .xs\:bui-my-13 {
+ .bui-my-13 {
margin-top: var(--bui-space-13);
margin-bottom: var(--bui-space-13);
}
- .xs\:bui-my-14 {
+ .bui-my-14 {
margin-top: var(--bui-space-14);
margin-bottom: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-my {
- margin-top: var(--py-sm);
- margin-bottom: var(--py-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-my {
+ margin-top: var(--py-xs);
+ margin-bottom: var(--py-xs);
+ }
+
+ .xs\:bui-my-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ margin-bottom: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-my-1 {
+ margin-top: var(--bui-space-1);
+ margin-bottom: var(--bui-space-1);
+ }
+
+ .xs\:bui-my-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ margin-bottom: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-my-2 {
+ margin-top: var(--bui-space-2);
+ margin-bottom: var(--bui-space-2);
+ }
+
+ .xs\:bui-my-3 {
+ margin-top: var(--bui-space-3);
+ margin-bottom: var(--bui-space-3);
+ }
+
+ .xs\:bui-my-4 {
+ margin-top: var(--bui-space-4);
+ margin-bottom: var(--bui-space-4);
+ }
+
+ .xs\:bui-my-5 {
+ margin-top: var(--bui-space-5);
+ margin-bottom: var(--bui-space-5);
+ }
+
+ .xs\:bui-my-6 {
+ margin-top: var(--bui-space-6);
+ margin-bottom: var(--bui-space-6);
+ }
+
+ .xs\:bui-my-7 {
+ margin-top: var(--bui-space-7);
+ margin-bottom: var(--bui-space-7);
+ }
+
+ .xs\:bui-my-8 {
+ margin-top: var(--bui-space-8);
+ margin-bottom: var(--bui-space-8);
+ }
+
+ .xs\:bui-my-9 {
+ margin-top: var(--bui-space-9);
+ margin-bottom: var(--bui-space-9);
+ }
+
+ .xs\:bui-my-10 {
+ margin-top: var(--bui-space-10);
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .xs\:bui-my-11 {
+ margin-top: var(--bui-space-11);
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .xs\:bui-my-12 {
+ margin-top: var(--bui-space-12);
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .xs\:bui-my-13 {
+ margin-top: var(--bui-space-13);
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .xs\:bui-my-14 {
+ margin-top: var(--bui-space-14);
+ margin-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-my-0\.5 {
- margin-top: var(--bui-space-0_5);
- margin-bottom: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-my {
+ margin-top: var(--py-sm);
+ margin-bottom: var(--py-sm);
+ }
+
+ .sm\:bui-my-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ margin-bottom: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-my-1 {
+ margin-top: var(--bui-space-1);
+ margin-bottom: var(--bui-space-1);
+ }
+
+ .sm\:bui-my-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ margin-bottom: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-my-2 {
+ margin-top: var(--bui-space-2);
+ margin-bottom: var(--bui-space-2);
+ }
+
+ .sm\:bui-my-3 {
+ margin-top: var(--bui-space-3);
+ margin-bottom: var(--bui-space-3);
+ }
+
+ .sm\:bui-my-4 {
+ margin-top: var(--bui-space-4);
+ margin-bottom: var(--bui-space-4);
+ }
+
+ .sm\:bui-my-5 {
+ margin-top: var(--bui-space-5);
+ margin-bottom: var(--bui-space-5);
+ }
+
+ .sm\:bui-my-6 {
+ margin-top: var(--bui-space-6);
+ margin-bottom: var(--bui-space-6);
+ }
+
+ .sm\:bui-my-7 {
+ margin-top: var(--bui-space-7);
+ margin-bottom: var(--bui-space-7);
+ }
+
+ .sm\:bui-my-8 {
+ margin-top: var(--bui-space-8);
+ margin-bottom: var(--bui-space-8);
+ }
+
+ .sm\:bui-my-9 {
+ margin-top: var(--bui-space-9);
+ margin-bottom: var(--bui-space-9);
+ }
+
+ .sm\:bui-my-10 {
+ margin-top: var(--bui-space-10);
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .sm\:bui-my-11 {
+ margin-top: var(--bui-space-11);
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .sm\:bui-my-12 {
+ margin-top: var(--bui-space-12);
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .sm\:bui-my-13 {
+ margin-top: var(--bui-space-13);
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .sm\:bui-my-14 {
+ margin-top: var(--bui-space-14);
+ margin-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-my-1 {
- margin-top: var(--bui-space-1);
- margin-bottom: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-my {
+ margin-top: var(--py-md);
+ margin-bottom: var(--py-md);
+ }
+
+ .md\:bui-my-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ margin-bottom: var(--bui-space-0_5);
+ }
+
+ .md\:bui-my-1 {
+ margin-top: var(--bui-space-1);
+ margin-bottom: var(--bui-space-1);
+ }
+
+ .md\:bui-my-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ margin-bottom: var(--bui-space-1_5);
+ }
+
+ .md\:bui-my-2 {
+ margin-top: var(--bui-space-2);
+ margin-bottom: var(--bui-space-2);
+ }
+
+ .md\:bui-my-3 {
+ margin-top: var(--bui-space-3);
+ margin-bottom: var(--bui-space-3);
+ }
+
+ .md\:bui-my-4 {
+ margin-top: var(--bui-space-4);
+ margin-bottom: var(--bui-space-4);
+ }
+
+ .md\:bui-my-5 {
+ margin-top: var(--bui-space-5);
+ margin-bottom: var(--bui-space-5);
+ }
+
+ .md\:bui-my-6 {
+ margin-top: var(--bui-space-6);
+ margin-bottom: var(--bui-space-6);
+ }
+
+ .md\:bui-my-7 {
+ margin-top: var(--bui-space-7);
+ margin-bottom: var(--bui-space-7);
+ }
+
+ .md\:bui-my-8 {
+ margin-top: var(--bui-space-8);
+ margin-bottom: var(--bui-space-8);
+ }
+
+ .md\:bui-my-9 {
+ margin-top: var(--bui-space-9);
+ margin-bottom: var(--bui-space-9);
+ }
+
+ .md\:bui-my-10 {
+ margin-top: var(--bui-space-10);
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .md\:bui-my-11 {
+ margin-top: var(--bui-space-11);
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .md\:bui-my-12 {
+ margin-top: var(--bui-space-12);
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .md\:bui-my-13 {
+ margin-top: var(--bui-space-13);
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .md\:bui-my-14 {
+ margin-top: var(--bui-space-14);
+ margin-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-my-1\.5 {
- margin-top: var(--bui-space-1_5);
- margin-bottom: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-my {
+ margin-top: var(--py-lg);
+ margin-bottom: var(--py-lg);
+ }
+
+ .lg\:bui-my-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ margin-bottom: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-my-1 {
+ margin-top: var(--bui-space-1);
+ margin-bottom: var(--bui-space-1);
+ }
+
+ .lg\:bui-my-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ margin-bottom: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-my-2 {
+ margin-top: var(--bui-space-2);
+ margin-bottom: var(--bui-space-2);
+ }
+
+ .lg\:bui-my-3 {
+ margin-top: var(--bui-space-3);
+ margin-bottom: var(--bui-space-3);
+ }
+
+ .lg\:bui-my-4 {
+ margin-top: var(--bui-space-4);
+ margin-bottom: var(--bui-space-4);
+ }
+
+ .lg\:bui-my-5 {
+ margin-top: var(--bui-space-5);
+ margin-bottom: var(--bui-space-5);
+ }
+
+ .lg\:bui-my-6 {
+ margin-top: var(--bui-space-6);
+ margin-bottom: var(--bui-space-6);
+ }
+
+ .lg\:bui-my-7 {
+ margin-top: var(--bui-space-7);
+ margin-bottom: var(--bui-space-7);
+ }
+
+ .lg\:bui-my-8 {
+ margin-top: var(--bui-space-8);
+ margin-bottom: var(--bui-space-8);
+ }
+
+ .lg\:bui-my-9 {
+ margin-top: var(--bui-space-9);
+ margin-bottom: var(--bui-space-9);
+ }
+
+ .lg\:bui-my-10 {
+ margin-top: var(--bui-space-10);
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .lg\:bui-my-11 {
+ margin-top: var(--bui-space-11);
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .lg\:bui-my-12 {
+ margin-top: var(--bui-space-12);
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .lg\:bui-my-13 {
+ margin-top: var(--bui-space-13);
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .lg\:bui-my-14 {
+ margin-top: var(--bui-space-14);
+ margin-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-my-2 {
- margin-top: var(--bui-space-2);
- margin-bottom: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-my {
+ margin-top: var(--py-xl);
+ margin-bottom: var(--py-xl);
+ }
- .sm\:bui-my-3 {
- margin-top: var(--bui-space-3);
- margin-bottom: var(--bui-space-3);
- }
+ .xl\:bui-my-0\.5 {
+ margin-top: var(--bui-space-0_5);
+ margin-bottom: var(--bui-space-0_5);
+ }
- .sm\:bui-my-4 {
- margin-top: var(--bui-space-4);
- margin-bottom: var(--bui-space-4);
- }
+ .xl\:bui-my-1 {
+ margin-top: var(--bui-space-1);
+ margin-bottom: var(--bui-space-1);
+ }
- .sm\:bui-my-5 {
- margin-top: var(--bui-space-5);
- margin-bottom: var(--bui-space-5);
- }
+ .xl\:bui-my-1\.5 {
+ margin-top: var(--bui-space-1_5);
+ margin-bottom: var(--bui-space-1_5);
+ }
- .sm\:bui-my-6 {
- margin-top: var(--bui-space-6);
- margin-bottom: var(--bui-space-6);
- }
+ .xl\:bui-my-2 {
+ margin-top: var(--bui-space-2);
+ margin-bottom: var(--bui-space-2);
+ }
- .sm\:bui-my-7 {
- margin-top: var(--bui-space-7);
- margin-bottom: var(--bui-space-7);
- }
+ .xl\:bui-my-3 {
+ margin-top: var(--bui-space-3);
+ margin-bottom: var(--bui-space-3);
+ }
- .sm\:bui-my-8 {
- margin-top: var(--bui-space-8);
- margin-bottom: var(--bui-space-8);
- }
+ .xl\:bui-my-4 {
+ margin-top: var(--bui-space-4);
+ margin-bottom: var(--bui-space-4);
+ }
- .sm\:bui-my-9 {
- margin-top: var(--bui-space-9);
- margin-bottom: var(--bui-space-9);
- }
+ .xl\:bui-my-5 {
+ margin-top: var(--bui-space-5);
+ margin-bottom: var(--bui-space-5);
+ }
- .sm\:bui-my-10 {
- margin-top: var(--bui-space-10);
- margin-bottom: var(--bui-space-10);
- }
+ .xl\:bui-my-6 {
+ margin-top: var(--bui-space-6);
+ margin-bottom: var(--bui-space-6);
+ }
- .sm\:bui-my-11 {
- margin-top: var(--bui-space-11);
- margin-bottom: var(--bui-space-11);
- }
+ .xl\:bui-my-7 {
+ margin-top: var(--bui-space-7);
+ margin-bottom: var(--bui-space-7);
+ }
- .sm\:bui-my-12 {
- margin-top: var(--bui-space-12);
- margin-bottom: var(--bui-space-12);
- }
+ .xl\:bui-my-8 {
+ margin-top: var(--bui-space-8);
+ margin-bottom: var(--bui-space-8);
+ }
- .sm\:bui-my-13 {
- margin-top: var(--bui-space-13);
- margin-bottom: var(--bui-space-13);
- }
+ .xl\:bui-my-9 {
+ margin-top: var(--bui-space-9);
+ margin-bottom: var(--bui-space-9);
+ }
- .sm\:bui-my-14 {
- margin-top: var(--bui-space-14);
- margin-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-my {
- margin-top: var(--py-md);
- margin-bottom: var(--py-md);
- }
-
- .md\:bui-my-0\.5 {
- margin-top: var(--bui-space-0_5);
- margin-bottom: var(--bui-space-0_5);
- }
-
- .md\:bui-my-1 {
- margin-top: var(--bui-space-1);
- margin-bottom: var(--bui-space-1);
- }
-
- .md\:bui-my-1\.5 {
- margin-top: var(--bui-space-1_5);
- margin-bottom: var(--bui-space-1_5);
- }
-
- .md\:bui-my-2 {
- margin-top: var(--bui-space-2);
- margin-bottom: var(--bui-space-2);
- }
-
- .md\:bui-my-3 {
- margin-top: var(--bui-space-3);
- margin-bottom: var(--bui-space-3);
- }
-
- .md\:bui-my-4 {
- margin-top: var(--bui-space-4);
- margin-bottom: var(--bui-space-4);
- }
-
- .md\:bui-my-5 {
- margin-top: var(--bui-space-5);
- margin-bottom: var(--bui-space-5);
- }
-
- .md\:bui-my-6 {
- margin-top: var(--bui-space-6);
- margin-bottom: var(--bui-space-6);
- }
-
- .md\:bui-my-7 {
- margin-top: var(--bui-space-7);
- margin-bottom: var(--bui-space-7);
- }
-
- .md\:bui-my-8 {
- margin-top: var(--bui-space-8);
- margin-bottom: var(--bui-space-8);
- }
-
- .md\:bui-my-9 {
- margin-top: var(--bui-space-9);
- margin-bottom: var(--bui-space-9);
- }
-
- .md\:bui-my-10 {
- margin-top: var(--bui-space-10);
- margin-bottom: var(--bui-space-10);
- }
-
- .md\:bui-my-11 {
- margin-top: var(--bui-space-11);
- margin-bottom: var(--bui-space-11);
- }
-
- .md\:bui-my-12 {
- margin-top: var(--bui-space-12);
- margin-bottom: var(--bui-space-12);
- }
-
- .md\:bui-my-13 {
- margin-top: var(--bui-space-13);
- margin-bottom: var(--bui-space-13);
- }
-
- .md\:bui-my-14 {
- margin-top: var(--bui-space-14);
- margin-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-my {
- margin-top: var(--py-lg);
- margin-bottom: var(--py-lg);
- }
-
- .lg\:bui-my-0\.5 {
- margin-top: var(--bui-space-0_5);
- margin-bottom: var(--bui-space-0_5);
- }
-
- .lg\:bui-my-1 {
- margin-top: var(--bui-space-1);
- margin-bottom: var(--bui-space-1);
- }
-
- .lg\:bui-my-1\.5 {
- margin-top: var(--bui-space-1_5);
- margin-bottom: var(--bui-space-1_5);
- }
-
- .lg\:bui-my-2 {
- margin-top: var(--bui-space-2);
- margin-bottom: var(--bui-space-2);
- }
-
- .lg\:bui-my-3 {
- margin-top: var(--bui-space-3);
- margin-bottom: var(--bui-space-3);
- }
-
- .lg\:bui-my-4 {
- margin-top: var(--bui-space-4);
- margin-bottom: var(--bui-space-4);
- }
-
- .lg\:bui-my-5 {
- margin-top: var(--bui-space-5);
- margin-bottom: var(--bui-space-5);
- }
-
- .lg\:bui-my-6 {
- margin-top: var(--bui-space-6);
- margin-bottom: var(--bui-space-6);
- }
-
- .lg\:bui-my-7 {
- margin-top: var(--bui-space-7);
- margin-bottom: var(--bui-space-7);
- }
-
- .lg\:bui-my-8 {
- margin-top: var(--bui-space-8);
- margin-bottom: var(--bui-space-8);
- }
-
- .lg\:bui-my-9 {
- margin-top: var(--bui-space-9);
- margin-bottom: var(--bui-space-9);
- }
-
- .lg\:bui-my-10 {
- margin-top: var(--bui-space-10);
- margin-bottom: var(--bui-space-10);
- }
-
- .lg\:bui-my-11 {
- margin-top: var(--bui-space-11);
- margin-bottom: var(--bui-space-11);
- }
-
- .lg\:bui-my-12 {
- margin-top: var(--bui-space-12);
- margin-bottom: var(--bui-space-12);
- }
-
- .lg\:bui-my-13 {
- margin-top: var(--bui-space-13);
- margin-bottom: var(--bui-space-13);
- }
-
- .lg\:bui-my-14 {
- margin-top: var(--bui-space-14);
- margin-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-my {
- margin-top: var(--py-xl);
- margin-bottom: var(--py-xl);
- }
-
- .xl\:bui-my-0\.5 {
- margin-top: var(--bui-space-0_5);
- margin-bottom: var(--bui-space-0_5);
- }
-
- .xl\:bui-my-1 {
- margin-top: var(--bui-space-1);
- margin-bottom: var(--bui-space-1);
- }
-
- .xl\:bui-my-1\.5 {
- margin-top: var(--bui-space-1_5);
- margin-bottom: var(--bui-space-1_5);
- }
-
- .xl\:bui-my-2 {
- margin-top: var(--bui-space-2);
- margin-bottom: var(--bui-space-2);
- }
-
- .xl\:bui-my-3 {
- margin-top: var(--bui-space-3);
- margin-bottom: var(--bui-space-3);
- }
-
- .xl\:bui-my-4 {
- margin-top: var(--bui-space-4);
- margin-bottom: var(--bui-space-4);
- }
-
- .xl\:bui-my-5 {
- margin-top: var(--bui-space-5);
- margin-bottom: var(--bui-space-5);
- }
-
- .xl\:bui-my-6 {
- margin-top: var(--bui-space-6);
- margin-bottom: var(--bui-space-6);
- }
-
- .xl\:bui-my-7 {
- margin-top: var(--bui-space-7);
- margin-bottom: var(--bui-space-7);
- }
-
- .xl\:bui-my-8 {
- margin-top: var(--bui-space-8);
- margin-bottom: var(--bui-space-8);
- }
-
- .xl\:bui-my-9 {
- margin-top: var(--bui-space-9);
- margin-bottom: var(--bui-space-9);
- }
-
- .xl\:bui-my-10 {
- margin-top: var(--bui-space-10);
- margin-bottom: var(--bui-space-10);
- }
-
- .xl\:bui-my-11 {
- margin-top: var(--bui-space-11);
- margin-bottom: var(--bui-space-11);
- }
-
- .xl\:bui-my-12 {
- margin-top: var(--bui-space-12);
- margin-bottom: var(--bui-space-12);
- }
-
- .xl\:bui-my-13 {
- margin-top: var(--bui-space-13);
- margin-bottom: var(--bui-space-13);
- }
-
- .xl\:bui-my-14 {
- margin-top: var(--bui-space-14);
- margin-bottom: var(--bui-space-14);
+ .xl\:bui-my-10 {
+ margin-top: var(--bui-space-10);
+ margin-bottom: var(--bui-space-10);
+ }
+
+ .xl\:bui-my-11 {
+ margin-top: var(--bui-space-11);
+ margin-bottom: var(--bui-space-11);
+ }
+
+ .xl\:bui-my-12 {
+ margin-top: var(--bui-space-12);
+ margin-bottom: var(--bui-space-12);
+ }
+
+ .xl\:bui-my-13 {
+ margin-top: var(--bui-space-13);
+ margin-bottom: var(--bui-space-13);
+ }
+
+ .xl\:bui-my-14 {
+ margin-top: var(--bui-space-14);
+ margin-bottom: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/p.css b/packages/ui/src/css/utilities/p.css
index 113f10777e..27713d9662 100644
--- a/packages/ui/src/css/utilities/p.css
+++ b/packages/ui/src/css/utilities/p.css
@@ -1,422 +1,440 @@
-.bui-p {
- padding: var(--p);
-}
+/*
+ * 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.
+ */
-.bui-p-0\.5 {
- padding: var(--bui-space-0_5);
-}
-
-.bui-p-1 {
- padding: var(--bui-space-1);
-}
-
-.bui-p-1\.5 {
- padding: var(--bui-space-1_5);
-}
-
-.bui-p-2 {
- padding: var(--bui-space-2);
-}
-
-.bui-p-3 {
- padding: var(--bui-space-3);
-}
-
-.bui-p-4 {
- padding: var(--bui-space-4);
-}
-
-.bui-p-5 {
- padding: var(--bui-space-5);
-}
-
-.bui-p-6 {
- padding: var(--bui-space-6);
-}
-
-.bui-p-7 {
- padding: var(--bui-space-7);
-}
-
-.bui-p-8 {
- padding: var(--bui-space-8);
-}
-
-.bui-p-9 {
- padding: var(--bui-space-9);
-}
-
-.bui-p-10 {
- padding: var(--bui-space-10);
-}
-
-.bui-p-11 {
- padding: var(--bui-space-11);
-}
-
-.bui-p-12 {
- padding: var(--bui-space-12);
-}
-
-.bui-p-13 {
- padding: var(--bui-space-13);
-}
-
-.bui-p-14 {
- padding: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-p {
- padding: var(--p-xs);
+@layer utilities {
+ .bui-p {
+ padding: var(--p);
}
- .xs\:bui-p-0\.5 {
+ .bui-p-0\.5 {
padding: var(--bui-space-0_5);
}
- .xs\:bui-p-1 {
+ .bui-p-1 {
padding: var(--bui-space-1);
}
- .xs\:bui-p-1\.5 {
+ .bui-p-1\.5 {
padding: var(--bui-space-1_5);
}
- .xs\:bui-p-2 {
+ .bui-p-2 {
padding: var(--bui-space-2);
}
- .xs\:bui-p-3 {
+ .bui-p-3 {
padding: var(--bui-space-3);
}
- .xs\:bui-p-4 {
+ .bui-p-4 {
padding: var(--bui-space-4);
}
- .xs\:bui-p-5 {
+ .bui-p-5 {
padding: var(--bui-space-5);
}
- .xs\:bui-p-6 {
+ .bui-p-6 {
padding: var(--bui-space-6);
}
- .xs\:bui-p-7 {
+ .bui-p-7 {
padding: var(--bui-space-7);
}
- .xs\:bui-p-8 {
+ .bui-p-8 {
padding: var(--bui-space-8);
}
- .xs\:bui-p-9 {
+ .bui-p-9 {
padding: var(--bui-space-9);
}
- .xs\:bui-p-10 {
+ .bui-p-10 {
padding: var(--bui-space-10);
}
- .xs\:bui-p-11 {
+ .bui-p-11 {
padding: var(--bui-space-11);
}
- .xs\:bui-p-12 {
+ .bui-p-12 {
padding: var(--bui-space-12);
}
- .xs\:bui-p-13 {
+ .bui-p-13 {
padding: var(--bui-space-13);
}
- .xs\:bui-p-14 {
+ .bui-p-14 {
padding: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-p {
- padding: var(--p-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-p {
+ padding: var(--p-xs);
+ }
+
+ .xs\:bui-p-0\.5 {
+ padding: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-p-1 {
+ padding: var(--bui-space-1);
+ }
+
+ .xs\:bui-p-1\.5 {
+ padding: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-p-2 {
+ padding: var(--bui-space-2);
+ }
+
+ .xs\:bui-p-3 {
+ padding: var(--bui-space-3);
+ }
+
+ .xs\:bui-p-4 {
+ padding: var(--bui-space-4);
+ }
+
+ .xs\:bui-p-5 {
+ padding: var(--bui-space-5);
+ }
+
+ .xs\:bui-p-6 {
+ padding: var(--bui-space-6);
+ }
+
+ .xs\:bui-p-7 {
+ padding: var(--bui-space-7);
+ }
+
+ .xs\:bui-p-8 {
+ padding: var(--bui-space-8);
+ }
+
+ .xs\:bui-p-9 {
+ padding: var(--bui-space-9);
+ }
+
+ .xs\:bui-p-10 {
+ padding: var(--bui-space-10);
+ }
+
+ .xs\:bui-p-11 {
+ padding: var(--bui-space-11);
+ }
+
+ .xs\:bui-p-12 {
+ padding: var(--bui-space-12);
+ }
+
+ .xs\:bui-p-13 {
+ padding: var(--bui-space-13);
+ }
+
+ .xs\:bui-p-14 {
+ padding: var(--bui-space-14);
+ }
}
- .sm\:bui-p-0\.5 {
- padding: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-p {
+ padding: var(--p-sm);
+ }
+
+ .sm\:bui-p-0\.5 {
+ padding: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-p-1 {
+ padding: var(--bui-space-1);
+ }
+
+ .sm\:bui-p-1\.5 {
+ padding: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-p-2 {
+ padding: var(--bui-space-2);
+ }
+
+ .sm\:bui-p-3 {
+ padding: var(--bui-space-3);
+ }
+
+ .sm\:bui-p-4 {
+ padding: var(--bui-space-4);
+ }
+
+ .sm\:bui-p-5 {
+ padding: var(--bui-space-5);
+ }
+
+ .sm\:bui-p-6 {
+ padding: var(--bui-space-6);
+ }
+
+ .sm\:bui-p-7 {
+ padding: var(--bui-space-7);
+ }
+
+ .sm\:bui-p-8 {
+ padding: var(--bui-space-8);
+ }
+
+ .sm\:bui-p-9 {
+ padding: var(--bui-space-9);
+ }
+
+ .sm\:bui-p-10 {
+ padding: var(--bui-space-10);
+ }
+
+ .sm\:bui-p-11 {
+ padding: var(--bui-space-11);
+ }
+
+ .sm\:bui-p-12 {
+ padding: var(--bui-space-12);
+ }
+
+ .sm\:bui-p-13 {
+ padding: var(--bui-space-13);
+ }
+
+ .sm\:bui-p-14 {
+ padding: var(--bui-space-14);
+ }
}
- .sm\:bui-p-1 {
- padding: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-p {
+ padding: var(--p-md);
+ }
+
+ .md\:bui-p-0\.5 {
+ padding: var(--bui-space-0_5);
+ }
+
+ .md\:bui-p-1 {
+ padding: var(--bui-space-1);
+ }
+
+ .md\:bui-p-1\.5 {
+ padding: var(--bui-space-1_5);
+ }
+
+ .md\:bui-p-2 {
+ padding: var(--bui-space-2);
+ }
+
+ .md\:bui-p-3 {
+ padding: var(--bui-space-3);
+ }
+
+ .md\:bui-p-4 {
+ padding: var(--bui-space-4);
+ }
+
+ .md\:bui-p-5 {
+ padding: var(--bui-space-5);
+ }
+
+ .md\:bui-p-6 {
+ padding: var(--bui-space-6);
+ }
+
+ .md\:bui-p-7 {
+ padding: var(--bui-space-7);
+ }
+
+ .md\:bui-p-8 {
+ padding: var(--bui-space-8);
+ }
+
+ .md\:bui-p-9 {
+ padding: var(--bui-space-9);
+ }
+
+ .md\:bui-p-10 {
+ padding: var(--bui-space-10);
+ }
+
+ .md\:bui-p-11 {
+ padding: var(--bui-space-11);
+ }
+
+ .md\:bui-p-12 {
+ padding: var(--bui-space-12);
+ }
+
+ .md\:bui-p-13 {
+ padding: var(--bui-space-13);
+ }
+
+ .md\:bui-p-14 {
+ padding: var(--bui-space-14);
+ }
}
- .sm\:bui-p-1\.5 {
- padding: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-p {
+ padding: var(--p-lg);
+ }
+
+ .lg\:bui-p-0\.5 {
+ padding: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-p-1 {
+ padding: var(--bui-space-1);
+ }
+
+ .lg\:bui-p-1\.5 {
+ padding: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-p-2 {
+ padding: var(--bui-space-2);
+ }
+
+ .lg\:bui-p-3 {
+ padding: var(--bui-space-3);
+ }
+
+ .lg\:bui-p-4 {
+ padding: var(--bui-space-4);
+ }
+
+ .lg\:bui-p-5 {
+ padding: var(--bui-space-5);
+ }
+
+ .lg\:bui-p-6 {
+ padding: var(--bui-space-6);
+ }
+
+ .lg\:bui-p-7 {
+ padding: var(--bui-space-7);
+ }
+
+ .lg\:bui-p-8 {
+ padding: var(--bui-space-8);
+ }
+
+ .lg\:bui-p-9 {
+ padding: var(--bui-space-9);
+ }
+
+ .lg\:bui-p-10 {
+ padding: var(--bui-space-10);
+ }
+
+ .lg\:bui-p-11 {
+ padding: var(--bui-space-11);
+ }
+
+ .lg\:bui-p-12 {
+ padding: var(--bui-space-12);
+ }
+
+ .lg\:bui-p-13 {
+ padding: var(--bui-space-13);
+ }
+
+ .lg\:bui-p-14 {
+ padding: var(--bui-space-14);
+ }
}
- .sm\:bui-p-2 {
- padding: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-p {
+ padding: var(--p-xl);
+ }
- .sm\:bui-p-3 {
- padding: var(--bui-space-3);
- }
+ .xl\:bui-p-0\.5 {
+ padding: var(--bui-space-0_5);
+ }
- .sm\:bui-p-4 {
- padding: var(--bui-space-4);
- }
+ .xl\:bui-p-1 {
+ padding: var(--bui-space-1);
+ }
- .sm\:bui-p-5 {
- padding: var(--bui-space-5);
- }
+ .xl\:bui-p-1\.5 {
+ padding: var(--bui-space-1_5);
+ }
- .sm\:bui-p-6 {
- padding: var(--bui-space-6);
- }
+ .xl\:bui-p-2 {
+ padding: var(--bui-space-2);
+ }
- .sm\:bui-p-7 {
- padding: var(--bui-space-7);
- }
+ .xl\:bui-p-3 {
+ padding: var(--bui-space-3);
+ }
- .sm\:bui-p-8 {
- padding: var(--bui-space-8);
- }
+ .xl\:bui-p-4 {
+ padding: var(--bui-space-4);
+ }
- .sm\:bui-p-9 {
- padding: var(--bui-space-9);
- }
+ .xl\:bui-p-5 {
+ padding: var(--bui-space-5);
+ }
- .sm\:bui-p-10 {
- padding: var(--bui-space-10);
- }
+ .xl\:bui-p-6 {
+ padding: var(--bui-space-6);
+ }
- .sm\:bui-p-11 {
- padding: var(--bui-space-11);
- }
+ .xl\:bui-p-7 {
+ padding: var(--bui-space-7);
+ }
- .sm\:bui-p-12 {
- padding: var(--bui-space-12);
- }
+ .xl\:bui-p-8 {
+ padding: var(--bui-space-8);
+ }
- .sm\:bui-p-13 {
- padding: var(--bui-space-13);
- }
+ .xl\:bui-p-9 {
+ padding: var(--bui-space-9);
+ }
- .sm\:bui-p-14 {
- padding: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-p {
- padding: var(--p-md);
- }
-
- .md\:bui-p-0\.5 {
- padding: var(--bui-space-0_5);
- }
-
- .md\:bui-p-1 {
- padding: var(--bui-space-1);
- }
-
- .md\:bui-p-1\.5 {
- padding: var(--bui-space-1_5);
- }
-
- .md\:bui-p-2 {
- padding: var(--bui-space-2);
- }
-
- .md\:bui-p-3 {
- padding: var(--bui-space-3);
- }
-
- .md\:bui-p-4 {
- padding: var(--bui-space-4);
- }
-
- .md\:bui-p-5 {
- padding: var(--bui-space-5);
- }
-
- .md\:bui-p-6 {
- padding: var(--bui-space-6);
- }
-
- .md\:bui-p-7 {
- padding: var(--bui-space-7);
- }
-
- .md\:bui-p-8 {
- padding: var(--bui-space-8);
- }
-
- .md\:bui-p-9 {
- padding: var(--bui-space-9);
- }
-
- .md\:bui-p-10 {
- padding: var(--bui-space-10);
- }
-
- .md\:bui-p-11 {
- padding: var(--bui-space-11);
- }
-
- .md\:bui-p-12 {
- padding: var(--bui-space-12);
- }
-
- .md\:bui-p-13 {
- padding: var(--bui-space-13);
- }
-
- .md\:bui-p-14 {
- padding: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-p {
- padding: var(--p-lg);
- }
-
- .lg\:bui-p-0\.5 {
- padding: var(--bui-space-0_5);
- }
-
- .lg\:bui-p-1 {
- padding: var(--bui-space-1);
- }
-
- .lg\:bui-p-1\.5 {
- padding: var(--bui-space-1_5);
- }
-
- .lg\:bui-p-2 {
- padding: var(--bui-space-2);
- }
-
- .lg\:bui-p-3 {
- padding: var(--bui-space-3);
- }
-
- .lg\:bui-p-4 {
- padding: var(--bui-space-4);
- }
-
- .lg\:bui-p-5 {
- padding: var(--bui-space-5);
- }
-
- .lg\:bui-p-6 {
- padding: var(--bui-space-6);
- }
-
- .lg\:bui-p-7 {
- padding: var(--bui-space-7);
- }
-
- .lg\:bui-p-8 {
- padding: var(--bui-space-8);
- }
-
- .lg\:bui-p-9 {
- padding: var(--bui-space-9);
- }
-
- .lg\:bui-p-10 {
- padding: var(--bui-space-10);
- }
-
- .lg\:bui-p-11 {
- padding: var(--bui-space-11);
- }
-
- .lg\:bui-p-12 {
- padding: var(--bui-space-12);
- }
-
- .lg\:bui-p-13 {
- padding: var(--bui-space-13);
- }
-
- .lg\:bui-p-14 {
- padding: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-p {
- padding: var(--p-xl);
- }
-
- .xl\:bui-p-0\.5 {
- padding: var(--bui-space-0_5);
- }
-
- .xl\:bui-p-1 {
- padding: var(--bui-space-1);
- }
-
- .xl\:bui-p-1\.5 {
- padding: var(--bui-space-1_5);
- }
-
- .xl\:bui-p-2 {
- padding: var(--bui-space-2);
- }
-
- .xl\:bui-p-3 {
- padding: var(--bui-space-3);
- }
-
- .xl\:bui-p-4 {
- padding: var(--bui-space-4);
- }
-
- .xl\:bui-p-5 {
- padding: var(--bui-space-5);
- }
-
- .xl\:bui-p-6 {
- padding: var(--bui-space-6);
- }
-
- .xl\:bui-p-7 {
- padding: var(--bui-space-7);
- }
-
- .xl\:bui-p-8 {
- padding: var(--bui-space-8);
- }
-
- .xl\:bui-p-9 {
- padding: var(--bui-space-9);
- }
-
- .xl\:bui-p-10 {
- padding: var(--bui-space-10);
- }
-
- .xl\:bui-p-11 {
- padding: var(--bui-space-11);
- }
-
- .xl\:bui-p-12 {
- padding: var(--bui-space-12);
- }
-
- .xl\:bui-p-13 {
- padding: var(--bui-space-13);
- }
-
- .xl\:bui-p-14 {
- padding: var(--bui-space-14);
+ .xl\:bui-p-10 {
+ padding: var(--bui-space-10);
+ }
+
+ .xl\:bui-p-11 {
+ padding: var(--bui-space-11);
+ }
+
+ .xl\:bui-p-12 {
+ padding: var(--bui-space-12);
+ }
+
+ .xl\:bui-p-13 {
+ padding: var(--bui-space-13);
+ }
+
+ .xl\:bui-p-14 {
+ padding: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/pb.css b/packages/ui/src/css/utilities/pb.css
index bdd3881f86..f32d284f37 100644
--- a/packages/ui/src/css/utilities/pb.css
+++ b/packages/ui/src/css/utilities/pb.css
@@ -1,422 +1,440 @@
-.bui-pb {
- padding-bottom: var(--pb);
-}
+/*
+ * 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.
+ */
-.bui-pb-0\.5 {
- padding-bottom: var(--bui-space-0_5);
-}
-
-.bui-pb-1 {
- padding-bottom: var(--bui-space-1);
-}
-
-.bui-pb-1\.5 {
- padding-bottom: var(--bui-space-1_5);
-}
-
-.bui-pb-2 {
- padding-bottom: var(--bui-space-2);
-}
-
-.bui-pb-3 {
- padding-bottom: var(--bui-space-3);
-}
-
-.bui-pb-4 {
- padding-bottom: var(--bui-space-4);
-}
-
-.bui-pb-5 {
- padding-bottom: var(--bui-space-5);
-}
-
-.bui-pb-6 {
- padding-bottom: var(--bui-space-6);
-}
-
-.bui-pb-7 {
- padding-bottom: var(--bui-space-7);
-}
-
-.bui-pb-8 {
- padding-bottom: var(--bui-space-8);
-}
-
-.bui-pb-9 {
- padding-bottom: var(--bui-space-9);
-}
-
-.bui-pb-10 {
- padding-bottom: var(--bui-space-10);
-}
-
-.bui-pb-11 {
- padding-bottom: var(--bui-space-11);
-}
-
-.bui-pb-12 {
- padding-bottom: var(--bui-space-12);
-}
-
-.bui-pb-13 {
- padding-bottom: var(--bui-space-13);
-}
-
-.bui-pb-14 {
- padding-bottom: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-pb {
- padding-bottom: var(--pb-xs);
+@layer utilities {
+ .bui-pb {
+ padding-bottom: var(--pb);
}
- .xs\:bui-pb-0\.5 {
+ .bui-pb-0\.5 {
padding-bottom: var(--bui-space-0_5);
}
- .xs\:bui-pb-1 {
+ .bui-pb-1 {
padding-bottom: var(--bui-space-1);
}
- .xs\:bui-pb-1\.5 {
+ .bui-pb-1\.5 {
padding-bottom: var(--bui-space-1_5);
}
- .xs\:bui-pb-2 {
+ .bui-pb-2 {
padding-bottom: var(--bui-space-2);
}
- .xs\:bui-pb-3 {
+ .bui-pb-3 {
padding-bottom: var(--bui-space-3);
}
- .xs\:bui-pb-4 {
+ .bui-pb-4 {
padding-bottom: var(--bui-space-4);
}
- .xs\:bui-pb-5 {
+ .bui-pb-5 {
padding-bottom: var(--bui-space-5);
}
- .xs\:bui-pb-6 {
+ .bui-pb-6 {
padding-bottom: var(--bui-space-6);
}
- .xs\:bui-pb-7 {
+ .bui-pb-7 {
padding-bottom: var(--bui-space-7);
}
- .xs\:bui-pb-8 {
+ .bui-pb-8 {
padding-bottom: var(--bui-space-8);
}
- .xs\:bui-pb-9 {
+ .bui-pb-9 {
padding-bottom: var(--bui-space-9);
}
- .xs\:bui-pb-10 {
+ .bui-pb-10 {
padding-bottom: var(--bui-space-10);
}
- .xs\:bui-pb-11 {
+ .bui-pb-11 {
padding-bottom: var(--bui-space-11);
}
- .xs\:bui-pb-12 {
+ .bui-pb-12 {
padding-bottom: var(--bui-space-12);
}
- .xs\:bui-pb-13 {
+ .bui-pb-13 {
padding-bottom: var(--bui-space-13);
}
- .xs\:bui-pb-14 {
+ .bui-pb-14 {
padding-bottom: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-pb {
- padding-bottom: var(--pb-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-pb {
+ padding-bottom: var(--pb-xs);
+ }
+
+ .xs\:bui-pb-0\.5 {
+ padding-bottom: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-pb-1 {
+ padding-bottom: var(--bui-space-1);
+ }
+
+ .xs\:bui-pb-1\.5 {
+ padding-bottom: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-pb-2 {
+ padding-bottom: var(--bui-space-2);
+ }
+
+ .xs\:bui-pb-3 {
+ padding-bottom: var(--bui-space-3);
+ }
+
+ .xs\:bui-pb-4 {
+ padding-bottom: var(--bui-space-4);
+ }
+
+ .xs\:bui-pb-5 {
+ padding-bottom: var(--bui-space-5);
+ }
+
+ .xs\:bui-pb-6 {
+ padding-bottom: var(--bui-space-6);
+ }
+
+ .xs\:bui-pb-7 {
+ padding-bottom: var(--bui-space-7);
+ }
+
+ .xs\:bui-pb-8 {
+ padding-bottom: var(--bui-space-8);
+ }
+
+ .xs\:bui-pb-9 {
+ padding-bottom: var(--bui-space-9);
+ }
+
+ .xs\:bui-pb-10 {
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .xs\:bui-pb-11 {
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .xs\:bui-pb-12 {
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .xs\:bui-pb-13 {
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .xs\:bui-pb-14 {
+ padding-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-pb-0\.5 {
- padding-bottom: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-pb {
+ padding-bottom: var(--pb-sm);
+ }
+
+ .sm\:bui-pb-0\.5 {
+ padding-bottom: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-pb-1 {
+ padding-bottom: var(--bui-space-1);
+ }
+
+ .sm\:bui-pb-1\.5 {
+ padding-bottom: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-pb-2 {
+ padding-bottom: var(--bui-space-2);
+ }
+
+ .sm\:bui-pb-3 {
+ padding-bottom: var(--bui-space-3);
+ }
+
+ .sm\:bui-pb-4 {
+ padding-bottom: var(--bui-space-4);
+ }
+
+ .sm\:bui-pb-5 {
+ padding-bottom: var(--bui-space-5);
+ }
+
+ .sm\:bui-pb-6 {
+ padding-bottom: var(--bui-space-6);
+ }
+
+ .sm\:bui-pb-7 {
+ padding-bottom: var(--bui-space-7);
+ }
+
+ .sm\:bui-pb-8 {
+ padding-bottom: var(--bui-space-8);
+ }
+
+ .sm\:bui-pb-9 {
+ padding-bottom: var(--bui-space-9);
+ }
+
+ .sm\:bui-pb-10 {
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .sm\:bui-pb-11 {
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .sm\:bui-pb-12 {
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .sm\:bui-pb-13 {
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .sm\:bui-pb-14 {
+ padding-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-pb-1 {
- padding-bottom: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-pb {
+ padding-bottom: var(--pb-md);
+ }
+
+ .md\:bui-pb-0\.5 {
+ padding-bottom: var(--bui-space-0_5);
+ }
+
+ .md\:bui-pb-1 {
+ padding-bottom: var(--bui-space-1);
+ }
+
+ .md\:bui-pb-1\.5 {
+ padding-bottom: var(--bui-space-1_5);
+ }
+
+ .md\:bui-pb-2 {
+ padding-bottom: var(--bui-space-2);
+ }
+
+ .md\:bui-pb-3 {
+ padding-bottom: var(--bui-space-3);
+ }
+
+ .md\:bui-pb-4 {
+ padding-bottom: var(--bui-space-4);
+ }
+
+ .md\:bui-pb-5 {
+ padding-bottom: var(--bui-space-5);
+ }
+
+ .md\:bui-pb-6 {
+ padding-bottom: var(--bui-space-6);
+ }
+
+ .md\:bui-pb-7 {
+ padding-bottom: var(--bui-space-7);
+ }
+
+ .md\:bui-pb-8 {
+ padding-bottom: var(--bui-space-8);
+ }
+
+ .md\:bui-pb-9 {
+ padding-bottom: var(--bui-space-9);
+ }
+
+ .md\:bui-pb-10 {
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .md\:bui-pb-11 {
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .md\:bui-pb-12 {
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .md\:bui-pb-13 {
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .md\:bui-pb-14 {
+ padding-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-pb-1\.5 {
- padding-bottom: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-pb {
+ padding-bottom: var(--pb-lg);
+ }
+
+ .lg\:bui-pb-0\.5 {
+ padding-bottom: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-pb-1 {
+ padding-bottom: var(--bui-space-1);
+ }
+
+ .lg\:bui-pb-1\.5 {
+ padding-bottom: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-pb-2 {
+ padding-bottom: var(--bui-space-2);
+ }
+
+ .lg\:bui-pb-3 {
+ padding-bottom: var(--bui-space-3);
+ }
+
+ .lg\:bui-pb-4 {
+ padding-bottom: var(--bui-space-4);
+ }
+
+ .lg\:bui-pb-5 {
+ padding-bottom: var(--bui-space-5);
+ }
+
+ .lg\:bui-pb-6 {
+ padding-bottom: var(--bui-space-6);
+ }
+
+ .lg\:bui-pb-7 {
+ padding-bottom: var(--bui-space-7);
+ }
+
+ .lg\:bui-pb-8 {
+ padding-bottom: var(--bui-space-8);
+ }
+
+ .lg\:bui-pb-9 {
+ padding-bottom: var(--bui-space-9);
+ }
+
+ .lg\:bui-pb-10 {
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .lg\:bui-pb-11 {
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .lg\:bui-pb-12 {
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .lg\:bui-pb-13 {
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .lg\:bui-pb-14 {
+ padding-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-pb-2 {
- padding-bottom: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-pb {
+ padding-bottom: var(--pb-xl);
+ }
- .sm\:bui-pb-3 {
- padding-bottom: var(--bui-space-3);
- }
+ .xl\:bui-pb-0\.5 {
+ padding-bottom: var(--bui-space-0_5);
+ }
- .sm\:bui-pb-4 {
- padding-bottom: var(--bui-space-4);
- }
+ .xl\:bui-pb-1 {
+ padding-bottom: var(--bui-space-1);
+ }
- .sm\:bui-pb-5 {
- padding-bottom: var(--bui-space-5);
- }
+ .xl\:bui-pb-1\.5 {
+ padding-bottom: var(--bui-space-1_5);
+ }
- .sm\:bui-pb-6 {
- padding-bottom: var(--bui-space-6);
- }
+ .xl\:bui-pb-2 {
+ padding-bottom: var(--bui-space-2);
+ }
- .sm\:bui-pb-7 {
- padding-bottom: var(--bui-space-7);
- }
+ .xl\:bui-pb-3 {
+ padding-bottom: var(--bui-space-3);
+ }
- .sm\:bui-pb-8 {
- padding-bottom: var(--bui-space-8);
- }
+ .xl\:bui-pb-4 {
+ padding-bottom: var(--bui-space-4);
+ }
- .sm\:bui-pb-9 {
- padding-bottom: var(--bui-space-9);
- }
+ .xl\:bui-pb-5 {
+ padding-bottom: var(--bui-space-5);
+ }
- .sm\:bui-pb-10 {
- padding-bottom: var(--bui-space-10);
- }
+ .xl\:bui-pb-6 {
+ padding-bottom: var(--bui-space-6);
+ }
- .sm\:bui-pb-11 {
- padding-bottom: var(--bui-space-11);
- }
+ .xl\:bui-pb-7 {
+ padding-bottom: var(--bui-space-7);
+ }
- .sm\:bui-pb-12 {
- padding-bottom: var(--bui-space-12);
- }
+ .xl\:bui-pb-8 {
+ padding-bottom: var(--bui-space-8);
+ }
- .sm\:bui-pb-13 {
- padding-bottom: var(--bui-space-13);
- }
+ .xl\:bui-pb-9 {
+ padding-bottom: var(--bui-space-9);
+ }
- .sm\:bui-pb-14 {
- padding-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-pb {
- padding-bottom: var(--pb-md);
- }
-
- .md\:bui-pb-0\.5 {
- padding-bottom: var(--bui-space-0_5);
- }
-
- .md\:bui-pb-1 {
- padding-bottom: var(--bui-space-1);
- }
-
- .md\:bui-pb-1\.5 {
- padding-bottom: var(--bui-space-1_5);
- }
-
- .md\:bui-pb-2 {
- padding-bottom: var(--bui-space-2);
- }
-
- .md\:bui-pb-3 {
- padding-bottom: var(--bui-space-3);
- }
-
- .md\:bui-pb-4 {
- padding-bottom: var(--bui-space-4);
- }
-
- .md\:bui-pb-5 {
- padding-bottom: var(--bui-space-5);
- }
-
- .md\:bui-pb-6 {
- padding-bottom: var(--bui-space-6);
- }
-
- .md\:bui-pb-7 {
- padding-bottom: var(--bui-space-7);
- }
-
- .md\:bui-pb-8 {
- padding-bottom: var(--bui-space-8);
- }
-
- .md\:bui-pb-9 {
- padding-bottom: var(--bui-space-9);
- }
-
- .md\:bui-pb-10 {
- padding-bottom: var(--bui-space-10);
- }
-
- .md\:bui-pb-11 {
- padding-bottom: var(--bui-space-11);
- }
-
- .md\:bui-pb-12 {
- padding-bottom: var(--bui-space-12);
- }
-
- .md\:bui-pb-13 {
- padding-bottom: var(--bui-space-13);
- }
-
- .md\:bui-pb-14 {
- padding-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-pb {
- padding-bottom: var(--pb-lg);
- }
-
- .lg\:bui-pb-0\.5 {
- padding-bottom: var(--bui-space-0_5);
- }
-
- .lg\:bui-pb-1 {
- padding-bottom: var(--bui-space-1);
- }
-
- .lg\:bui-pb-1\.5 {
- padding-bottom: var(--bui-space-1_5);
- }
-
- .lg\:bui-pb-2 {
- padding-bottom: var(--bui-space-2);
- }
-
- .lg\:bui-pb-3 {
- padding-bottom: var(--bui-space-3);
- }
-
- .lg\:bui-pb-4 {
- padding-bottom: var(--bui-space-4);
- }
-
- .lg\:bui-pb-5 {
- padding-bottom: var(--bui-space-5);
- }
-
- .lg\:bui-pb-6 {
- padding-bottom: var(--bui-space-6);
- }
-
- .lg\:bui-pb-7 {
- padding-bottom: var(--bui-space-7);
- }
-
- .lg\:bui-pb-8 {
- padding-bottom: var(--bui-space-8);
- }
-
- .lg\:bui-pb-9 {
- padding-bottom: var(--bui-space-9);
- }
-
- .lg\:bui-pb-10 {
- padding-bottom: var(--bui-space-10);
- }
-
- .lg\:bui-pb-11 {
- padding-bottom: var(--bui-space-11);
- }
-
- .lg\:bui-pb-12 {
- padding-bottom: var(--bui-space-12);
- }
-
- .lg\:bui-pb-13 {
- padding-bottom: var(--bui-space-13);
- }
-
- .lg\:bui-pb-14 {
- padding-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-pb {
- padding-bottom: var(--pb-xl);
- }
-
- .xl\:bui-pb-0\.5 {
- padding-bottom: var(--bui-space-0_5);
- }
-
- .xl\:bui-pb-1 {
- padding-bottom: var(--bui-space-1);
- }
-
- .xl\:bui-pb-1\.5 {
- padding-bottom: var(--bui-space-1_5);
- }
-
- .xl\:bui-pb-2 {
- padding-bottom: var(--bui-space-2);
- }
-
- .xl\:bui-pb-3 {
- padding-bottom: var(--bui-space-3);
- }
-
- .xl\:bui-pb-4 {
- padding-bottom: var(--bui-space-4);
- }
-
- .xl\:bui-pb-5 {
- padding-bottom: var(--bui-space-5);
- }
-
- .xl\:bui-pb-6 {
- padding-bottom: var(--bui-space-6);
- }
-
- .xl\:bui-pb-7 {
- padding-bottom: var(--bui-space-7);
- }
-
- .xl\:bui-pb-8 {
- padding-bottom: var(--bui-space-8);
- }
-
- .xl\:bui-pb-9 {
- padding-bottom: var(--bui-space-9);
- }
-
- .xl\:bui-pb-10 {
- padding-bottom: var(--bui-space-10);
- }
-
- .xl\:bui-pb-11 {
- padding-bottom: var(--bui-space-11);
- }
-
- .xl\:bui-pb-12 {
- padding-bottom: var(--bui-space-12);
- }
-
- .xl\:bui-pb-13 {
- padding-bottom: var(--bui-space-13);
- }
-
- .xl\:bui-pb-14 {
- padding-bottom: var(--bui-space-14);
+ .xl\:bui-pb-10 {
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .xl\:bui-pb-11 {
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .xl\:bui-pb-12 {
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .xl\:bui-pb-13 {
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .xl\:bui-pb-14 {
+ padding-bottom: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/pl.css b/packages/ui/src/css/utilities/pl.css
index 07e064293a..65bbfcf5e8 100644
--- a/packages/ui/src/css/utilities/pl.css
+++ b/packages/ui/src/css/utilities/pl.css
@@ -1,422 +1,440 @@
-.bui-pl {
- padding-left: var(--pl);
-}
+/*
+ * 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.
+ */
-.bui-pl-0\.5 {
- padding-left: var(--bui-space-0_5);
-}
-
-.bui-pl-1 {
- padding-left: var(--bui-space-1);
-}
-
-.bui-pl-1\.5 {
- padding-left: var(--bui-space-1_5);
-}
-
-.bui-pl-2 {
- padding-left: var(--bui-space-2);
-}
-
-.bui-pl-3 {
- padding-left: var(--bui-space-3);
-}
-
-.bui-pl-4 {
- padding-left: var(--bui-space-4);
-}
-
-.bui-pl-5 {
- padding-left: var(--bui-space-5);
-}
-
-.bui-pl-6 {
- padding-left: var(--bui-space-6);
-}
-
-.bui-pl-7 {
- padding-left: var(--bui-space-7);
-}
-
-.bui-pl-8 {
- padding-left: var(--bui-space-8);
-}
-
-.bui-pl-9 {
- padding-left: var(--bui-space-9);
-}
-
-.bui-pl-10 {
- padding-left: var(--bui-space-10);
-}
-
-.bui-pl-11 {
- padding-left: var(--bui-space-11);
-}
-
-.bui-pl-12 {
- padding-left: var(--bui-space-12);
-}
-
-.bui-pl-13 {
- padding-left: var(--bui-space-13);
-}
-
-.bui-pl-14 {
- padding-left: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-pl {
- padding-left: var(--pl-xs);
+@layer utilities {
+ .bui-pl {
+ padding-left: var(--pl);
}
- .xs\:bui-pl-0\.5 {
+ .bui-pl-0\.5 {
padding-left: var(--bui-space-0_5);
}
- .xs\:bui-pl-1 {
+ .bui-pl-1 {
padding-left: var(--bui-space-1);
}
- .xs\:bui-pl-1\.5 {
+ .bui-pl-1\.5 {
padding-left: var(--bui-space-1_5);
}
- .xs\:bui-pl-2 {
+ .bui-pl-2 {
padding-left: var(--bui-space-2);
}
- .xs\:bui-pl-3 {
+ .bui-pl-3 {
padding-left: var(--bui-space-3);
}
- .xs\:bui-pl-4 {
+ .bui-pl-4 {
padding-left: var(--bui-space-4);
}
- .xs\:bui-pl-5 {
+ .bui-pl-5 {
padding-left: var(--bui-space-5);
}
- .xs\:bui-pl-6 {
+ .bui-pl-6 {
padding-left: var(--bui-space-6);
}
- .xs\:bui-pl-7 {
+ .bui-pl-7 {
padding-left: var(--bui-space-7);
}
- .xs\:bui-pl-8 {
+ .bui-pl-8 {
padding-left: var(--bui-space-8);
}
- .xs\:bui-pl-9 {
+ .bui-pl-9 {
padding-left: var(--bui-space-9);
}
- .xs\:bui-pl-10 {
+ .bui-pl-10 {
padding-left: var(--bui-space-10);
}
- .xs\:bui-pl-11 {
+ .bui-pl-11 {
padding-left: var(--bui-space-11);
}
- .xs\:bui-pl-12 {
+ .bui-pl-12 {
padding-left: var(--bui-space-12);
}
- .xs\:bui-pl-13 {
+ .bui-pl-13 {
padding-left: var(--bui-space-13);
}
- .xs\:bui-pl-14 {
+ .bui-pl-14 {
padding-left: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-pl {
- padding-left: var(--pl-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-pl {
+ padding-left: var(--pl-xs);
+ }
+
+ .xs\:bui-pl-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-pl-1 {
+ padding-left: var(--bui-space-1);
+ }
+
+ .xs\:bui-pl-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-pl-2 {
+ padding-left: var(--bui-space-2);
+ }
+
+ .xs\:bui-pl-3 {
+ padding-left: var(--bui-space-3);
+ }
+
+ .xs\:bui-pl-4 {
+ padding-left: var(--bui-space-4);
+ }
+
+ .xs\:bui-pl-5 {
+ padding-left: var(--bui-space-5);
+ }
+
+ .xs\:bui-pl-6 {
+ padding-left: var(--bui-space-6);
+ }
+
+ .xs\:bui-pl-7 {
+ padding-left: var(--bui-space-7);
+ }
+
+ .xs\:bui-pl-8 {
+ padding-left: var(--bui-space-8);
+ }
+
+ .xs\:bui-pl-9 {
+ padding-left: var(--bui-space-9);
+ }
+
+ .xs\:bui-pl-10 {
+ padding-left: var(--bui-space-10);
+ }
+
+ .xs\:bui-pl-11 {
+ padding-left: var(--bui-space-11);
+ }
+
+ .xs\:bui-pl-12 {
+ padding-left: var(--bui-space-12);
+ }
+
+ .xs\:bui-pl-13 {
+ padding-left: var(--bui-space-13);
+ }
+
+ .xs\:bui-pl-14 {
+ padding-left: var(--bui-space-14);
+ }
}
- .sm\:bui-pl-0\.5 {
- padding-left: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-pl {
+ padding-left: var(--pl-sm);
+ }
+
+ .sm\:bui-pl-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-pl-1 {
+ padding-left: var(--bui-space-1);
+ }
+
+ .sm\:bui-pl-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-pl-2 {
+ padding-left: var(--bui-space-2);
+ }
+
+ .sm\:bui-pl-3 {
+ padding-left: var(--bui-space-3);
+ }
+
+ .sm\:bui-pl-4 {
+ padding-left: var(--bui-space-4);
+ }
+
+ .sm\:bui-pl-5 {
+ padding-left: var(--bui-space-5);
+ }
+
+ .sm\:bui-pl-6 {
+ padding-left: var(--bui-space-6);
+ }
+
+ .sm\:bui-pl-7 {
+ padding-left: var(--bui-space-7);
+ }
+
+ .sm\:bui-pl-8 {
+ padding-left: var(--bui-space-8);
+ }
+
+ .sm\:bui-pl-9 {
+ padding-left: var(--bui-space-9);
+ }
+
+ .sm\:bui-pl-10 {
+ padding-left: var(--bui-space-10);
+ }
+
+ .sm\:bui-pl-11 {
+ padding-left: var(--bui-space-11);
+ }
+
+ .sm\:bui-pl-12 {
+ padding-left: var(--bui-space-12);
+ }
+
+ .sm\:bui-pl-13 {
+ padding-left: var(--bui-space-13);
+ }
+
+ .sm\:bui-pl-14 {
+ padding-left: var(--bui-space-14);
+ }
}
- .sm\:bui-pl-1 {
- padding-left: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-pl {
+ padding-left: var(--pl-md);
+ }
+
+ .md\:bui-pl-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ }
+
+ .md\:bui-pl-1 {
+ padding-left: var(--bui-space-1);
+ }
+
+ .md\:bui-pl-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ }
+
+ .md\:bui-pl-2 {
+ padding-left: var(--bui-space-2);
+ }
+
+ .md\:bui-pl-3 {
+ padding-left: var(--bui-space-3);
+ }
+
+ .md\:bui-pl-4 {
+ padding-left: var(--bui-space-4);
+ }
+
+ .md\:bui-pl-5 {
+ padding-left: var(--bui-space-5);
+ }
+
+ .md\:bui-pl-6 {
+ padding-left: var(--bui-space-6);
+ }
+
+ .md\:bui-pl-7 {
+ padding-left: var(--bui-space-7);
+ }
+
+ .md\:bui-pl-8 {
+ padding-left: var(--bui-space-8);
+ }
+
+ .md\:bui-pl-9 {
+ padding-left: var(--bui-space-9);
+ }
+
+ .md\:bui-pl-10 {
+ padding-left: var(--bui-space-10);
+ }
+
+ .md\:bui-pl-11 {
+ padding-left: var(--bui-space-11);
+ }
+
+ .md\:bui-pl-12 {
+ padding-left: var(--bui-space-12);
+ }
+
+ .md\:bui-pl-13 {
+ padding-left: var(--bui-space-13);
+ }
+
+ .md\:bui-pl-14 {
+ padding-left: var(--bui-space-14);
+ }
}
- .sm\:bui-pl-1\.5 {
- padding-left: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-pl {
+ padding-left: var(--pl-lg);
+ }
+
+ .lg\:bui-pl-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-pl-1 {
+ padding-left: var(--bui-space-1);
+ }
+
+ .lg\:bui-pl-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-pl-2 {
+ padding-left: var(--bui-space-2);
+ }
+
+ .lg\:bui-pl-3 {
+ padding-left: var(--bui-space-3);
+ }
+
+ .lg\:bui-pl-4 {
+ padding-left: var(--bui-space-4);
+ }
+
+ .lg\:bui-pl-5 {
+ padding-left: var(--bui-space-5);
+ }
+
+ .lg\:bui-pl-6 {
+ padding-left: var(--bui-space-6);
+ }
+
+ .lg\:bui-pl-7 {
+ padding-left: var(--bui-space-7);
+ }
+
+ .lg\:bui-pl-8 {
+ padding-left: var(--bui-space-8);
+ }
+
+ .lg\:bui-pl-9 {
+ padding-left: var(--bui-space-9);
+ }
+
+ .lg\:bui-pl-10 {
+ padding-left: var(--bui-space-10);
+ }
+
+ .lg\:bui-pl-11 {
+ padding-left: var(--bui-space-11);
+ }
+
+ .lg\:bui-pl-12 {
+ padding-left: var(--bui-space-12);
+ }
+
+ .lg\:bui-pl-13 {
+ padding-left: var(--bui-space-13);
+ }
+
+ .lg\:bui-pl-14 {
+ padding-left: var(--bui-space-14);
+ }
}
- .sm\:bui-pl-2 {
- padding-left: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-pl {
+ padding-left: var(--pl-xl);
+ }
- .sm\:bui-pl-3 {
- padding-left: var(--bui-space-3);
- }
+ .xl\:bui-pl-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ }
- .sm\:bui-pl-4 {
- padding-left: var(--bui-space-4);
- }
+ .xl\:bui-pl-1 {
+ padding-left: var(--bui-space-1);
+ }
- .sm\:bui-pl-5 {
- padding-left: var(--bui-space-5);
- }
+ .xl\:bui-pl-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ }
- .sm\:bui-pl-6 {
- padding-left: var(--bui-space-6);
- }
+ .xl\:bui-pl-2 {
+ padding-left: var(--bui-space-2);
+ }
- .sm\:bui-pl-7 {
- padding-left: var(--bui-space-7);
- }
+ .xl\:bui-pl-3 {
+ padding-left: var(--bui-space-3);
+ }
- .sm\:bui-pl-8 {
- padding-left: var(--bui-space-8);
- }
+ .xl\:bui-pl-4 {
+ padding-left: var(--bui-space-4);
+ }
- .sm\:bui-pl-9 {
- padding-left: var(--bui-space-9);
- }
+ .xl\:bui-pl-5 {
+ padding-left: var(--bui-space-5);
+ }
- .sm\:bui-pl-10 {
- padding-left: var(--bui-space-10);
- }
+ .xl\:bui-pl-6 {
+ padding-left: var(--bui-space-6);
+ }
- .sm\:bui-pl-11 {
- padding-left: var(--bui-space-11);
- }
+ .xl\:bui-pl-7 {
+ padding-left: var(--bui-space-7);
+ }
- .sm\:bui-pl-12 {
- padding-left: var(--bui-space-12);
- }
+ .xl\:bui-pl-8 {
+ padding-left: var(--bui-space-8);
+ }
- .sm\:bui-pl-13 {
- padding-left: var(--bui-space-13);
- }
+ .xl\:bui-pl-9 {
+ padding-left: var(--bui-space-9);
+ }
- .sm\:bui-pl-14 {
- padding-left: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-pl {
- padding-left: var(--pl-md);
- }
-
- .md\:bui-pl-0\.5 {
- padding-left: var(--bui-space-0_5);
- }
-
- .md\:bui-pl-1 {
- padding-left: var(--bui-space-1);
- }
-
- .md\:bui-pl-1\.5 {
- padding-left: var(--bui-space-1_5);
- }
-
- .md\:bui-pl-2 {
- padding-left: var(--bui-space-2);
- }
-
- .md\:bui-pl-3 {
- padding-left: var(--bui-space-3);
- }
-
- .md\:bui-pl-4 {
- padding-left: var(--bui-space-4);
- }
-
- .md\:bui-pl-5 {
- padding-left: var(--bui-space-5);
- }
-
- .md\:bui-pl-6 {
- padding-left: var(--bui-space-6);
- }
-
- .md\:bui-pl-7 {
- padding-left: var(--bui-space-7);
- }
-
- .md\:bui-pl-8 {
- padding-left: var(--bui-space-8);
- }
-
- .md\:bui-pl-9 {
- padding-left: var(--bui-space-9);
- }
-
- .md\:bui-pl-10 {
- padding-left: var(--bui-space-10);
- }
-
- .md\:bui-pl-11 {
- padding-left: var(--bui-space-11);
- }
-
- .md\:bui-pl-12 {
- padding-left: var(--bui-space-12);
- }
-
- .md\:bui-pl-13 {
- padding-left: var(--bui-space-13);
- }
-
- .md\:bui-pl-14 {
- padding-left: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-pl {
- padding-left: var(--pl-lg);
- }
-
- .lg\:bui-pl-0\.5 {
- padding-left: var(--bui-space-0_5);
- }
-
- .lg\:bui-pl-1 {
- padding-left: var(--bui-space-1);
- }
-
- .lg\:bui-pl-1\.5 {
- padding-left: var(--bui-space-1_5);
- }
-
- .lg\:bui-pl-2 {
- padding-left: var(--bui-space-2);
- }
-
- .lg\:bui-pl-3 {
- padding-left: var(--bui-space-3);
- }
-
- .lg\:bui-pl-4 {
- padding-left: var(--bui-space-4);
- }
-
- .lg\:bui-pl-5 {
- padding-left: var(--bui-space-5);
- }
-
- .lg\:bui-pl-6 {
- padding-left: var(--bui-space-6);
- }
-
- .lg\:bui-pl-7 {
- padding-left: var(--bui-space-7);
- }
-
- .lg\:bui-pl-8 {
- padding-left: var(--bui-space-8);
- }
-
- .lg\:bui-pl-9 {
- padding-left: var(--bui-space-9);
- }
-
- .lg\:bui-pl-10 {
- padding-left: var(--bui-space-10);
- }
-
- .lg\:bui-pl-11 {
- padding-left: var(--bui-space-11);
- }
-
- .lg\:bui-pl-12 {
- padding-left: var(--bui-space-12);
- }
-
- .lg\:bui-pl-13 {
- padding-left: var(--bui-space-13);
- }
-
- .lg\:bui-pl-14 {
- padding-left: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-pl {
- padding-left: var(--pl-xl);
- }
-
- .xl\:bui-pl-0\.5 {
- padding-left: var(--bui-space-0_5);
- }
-
- .xl\:bui-pl-1 {
- padding-left: var(--bui-space-1);
- }
-
- .xl\:bui-pl-1\.5 {
- padding-left: var(--bui-space-1_5);
- }
-
- .xl\:bui-pl-2 {
- padding-left: var(--bui-space-2);
- }
-
- .xl\:bui-pl-3 {
- padding-left: var(--bui-space-3);
- }
-
- .xl\:bui-pl-4 {
- padding-left: var(--bui-space-4);
- }
-
- .xl\:bui-pl-5 {
- padding-left: var(--bui-space-5);
- }
-
- .xl\:bui-pl-6 {
- padding-left: var(--bui-space-6);
- }
-
- .xl\:bui-pl-7 {
- padding-left: var(--bui-space-7);
- }
-
- .xl\:bui-pl-8 {
- padding-left: var(--bui-space-8);
- }
-
- .xl\:bui-pl-9 {
- padding-left: var(--bui-space-9);
- }
-
- .xl\:bui-pl-10 {
- padding-left: var(--bui-space-10);
- }
-
- .xl\:bui-pl-11 {
- padding-left: var(--bui-space-11);
- }
-
- .xl\:bui-pl-12 {
- padding-left: var(--bui-space-12);
- }
-
- .xl\:bui-pl-13 {
- padding-left: var(--bui-space-13);
- }
-
- .xl\:bui-pl-14 {
- padding-left: var(--bui-space-14);
+ .xl\:bui-pl-10 {
+ padding-left: var(--bui-space-10);
+ }
+
+ .xl\:bui-pl-11 {
+ padding-left: var(--bui-space-11);
+ }
+
+ .xl\:bui-pl-12 {
+ padding-left: var(--bui-space-12);
+ }
+
+ .xl\:bui-pl-13 {
+ padding-left: var(--bui-space-13);
+ }
+
+ .xl\:bui-pl-14 {
+ padding-left: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/position.css b/packages/ui/src/css/utilities/position.css
index 11cc0994b6..307e25cc04 100644
--- a/packages/ui/src/css/utilities/position.css
+++ b/packages/ui/src/css/utilities/position.css
@@ -1,134 +1,152 @@
-.bui-position-absolute {
- position: absolute;
-}
+/*
+ * 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.
+ */
-.bui-position-fixed {
- position: fixed;
-}
-
-.bui-position-sticky {
- position: sticky;
-}
-
-.bui-position-relative {
- position: relative;
-}
-
-.bui-position-static {
- position: static;
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-position-absolute {
+@layer utilities {
+ .bui-position-absolute {
position: absolute;
}
- .xs\:bui-position-fixed {
+ .bui-position-fixed {
position: fixed;
}
- .xs\:bui-position-sticky {
+ .bui-position-sticky {
position: sticky;
}
- .xs\:bui-position-relative {
+ .bui-position-relative {
position: relative;
}
- .xs\:bui-position-static {
+ .bui-position-static {
position: static;
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-position-absolute {
- position: absolute;
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-position-absolute {
+ position: absolute;
+ }
+
+ .xs\:bui-position-fixed {
+ position: fixed;
+ }
+
+ .xs\:bui-position-sticky {
+ position: sticky;
+ }
+
+ .xs\:bui-position-relative {
+ position: relative;
+ }
+
+ .xs\:bui-position-static {
+ position: static;
+ }
}
- .sm\:bui-position-fixed {
- position: fixed;
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-position-absolute {
+ position: absolute;
+ }
+
+ .sm\:bui-position-fixed {
+ position: fixed;
+ }
+
+ .sm\:bui-position-sticky {
+ position: sticky;
+ }
+
+ .sm\:bui-position-relative {
+ position: relative;
+ }
+
+ .sm\:bui-position-static {
+ position: static;
+ }
}
- .sm\:bui-position-sticky {
- position: sticky;
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-position-absolute {
+ position: absolute;
+ }
+
+ .md\:bui-position-fixed {
+ position: fixed;
+ }
+
+ .md\:bui-position-sticky {
+ position: sticky;
+ }
+
+ .md\:bui-position-relative {
+ position: relative;
+ }
+
+ .md\:bui-position-static {
+ position: static;
+ }
}
- .sm\:bui-position-relative {
- position: relative;
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-position-absolute {
+ position: absolute;
+ }
+
+ .lg\:bui-position-fixed {
+ position: fixed;
+ }
+
+ .lg\:bui-position-sticky {
+ position: sticky;
+ }
+
+ .lg\:bui-position-relative {
+ position: relative;
+ }
+
+ .lg\:bui-position-static {
+ position: static;
+ }
}
- .sm\:bui-position-static {
- position: static;
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-position-absolute {
- position: absolute;
- }
-
- .md\:bui-position-fixed {
- position: fixed;
- }
-
- .md\:bui-position-sticky {
- position: sticky;
- }
-
- .md\:bui-position-relative {
- position: relative;
- }
-
- .md\:bui-position-static {
- position: static;
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-position-absolute {
- position: absolute;
- }
-
- .lg\:bui-position-fixed {
- position: fixed;
- }
-
- .lg\:bui-position-sticky {
- position: sticky;
- }
-
- .lg\:bui-position-relative {
- position: relative;
- }
-
- .lg\:bui-position-static {
- position: static;
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-position-absolute {
- position: absolute;
- }
-
- .xl\:bui-position-fixed {
- position: fixed;
- }
-
- .xl\:bui-position-sticky {
- position: sticky;
- }
-
- .xl\:bui-position-relative {
- position: relative;
- }
-
- .xl\:bui-position-static {
- position: static;
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-position-absolute {
+ position: absolute;
+ }
+
+ .xl\:bui-position-fixed {
+ position: fixed;
+ }
+
+ .xl\:bui-position-sticky {
+ position: sticky;
+ }
+
+ .xl\:bui-position-relative {
+ position: relative;
+ }
+
+ .xl\:bui-position-static {
+ position: static;
+ }
}
}
diff --git a/packages/ui/src/css/utilities/pr.css b/packages/ui/src/css/utilities/pr.css
index c6fa94a1c5..e228fe1c13 100644
--- a/packages/ui/src/css/utilities/pr.css
+++ b/packages/ui/src/css/utilities/pr.css
@@ -1,422 +1,440 @@
-.bui-pr {
- padding-right: var(--pr);
-}
+/*
+ * 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.
+ */
-.bui-pr-0\.5 {
- padding-right: var(--bui-space-0_5);
-}
-
-.bui-pr-1 {
- padding-right: var(--bui-space-1);
-}
-
-.bui-pr-1\.5 {
- padding-right: var(--bui-space-1_5);
-}
-
-.bui-pr-2 {
- padding-right: var(--bui-space-2);
-}
-
-.bui-pr-3 {
- padding-right: var(--bui-space-3);
-}
-
-.bui-pr-4 {
- padding-right: var(--bui-space-4);
-}
-
-.bui-pr-5 {
- padding-right: var(--bui-space-5);
-}
-
-.bui-pr-6 {
- padding-right: var(--bui-space-6);
-}
-
-.bui-pr-7 {
- padding-right: var(--bui-space-7);
-}
-
-.bui-pr-8 {
- padding-right: var(--bui-space-8);
-}
-
-.bui-pr-9 {
- padding-right: var(--bui-space-9);
-}
-
-.bui-pr-10 {
- padding-right: var(--bui-space-10);
-}
-
-.bui-pr-11 {
- padding-right: var(--bui-space-11);
-}
-
-.bui-pr-12 {
- padding-right: var(--bui-space-12);
-}
-
-.bui-pr-13 {
- padding-right: var(--bui-space-13);
-}
-
-.bui-pr-14 {
- padding-right: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-pr {
- padding-right: var(--pr-xs);
+@layer utilities {
+ .bui-pr {
+ padding-right: var(--pr);
}
- .xs\:bui-pr-0\.5 {
+ .bui-pr-0\.5 {
padding-right: var(--bui-space-0_5);
}
- .xs\:bui-pr-1 {
+ .bui-pr-1 {
padding-right: var(--bui-space-1);
}
- .xs\:bui-pr-1\.5 {
+ .bui-pr-1\.5 {
padding-right: var(--bui-space-1_5);
}
- .xs\:bui-pr-2 {
+ .bui-pr-2 {
padding-right: var(--bui-space-2);
}
- .xs\:bui-pr-3 {
+ .bui-pr-3 {
padding-right: var(--bui-space-3);
}
- .xs\:bui-pr-4 {
+ .bui-pr-4 {
padding-right: var(--bui-space-4);
}
- .xs\:bui-pr-5 {
+ .bui-pr-5 {
padding-right: var(--bui-space-5);
}
- .xs\:bui-pr-6 {
+ .bui-pr-6 {
padding-right: var(--bui-space-6);
}
- .xs\:bui-pr-7 {
+ .bui-pr-7 {
padding-right: var(--bui-space-7);
}
- .xs\:bui-pr-8 {
+ .bui-pr-8 {
padding-right: var(--bui-space-8);
}
- .xs\:bui-pr-9 {
+ .bui-pr-9 {
padding-right: var(--bui-space-9);
}
- .xs\:bui-pr-10 {
+ .bui-pr-10 {
padding-right: var(--bui-space-10);
}
- .xs\:bui-pr-11 {
+ .bui-pr-11 {
padding-right: var(--bui-space-11);
}
- .xs\:bui-pr-12 {
+ .bui-pr-12 {
padding-right: var(--bui-space-12);
}
- .xs\:bui-pr-13 {
+ .bui-pr-13 {
padding-right: var(--bui-space-13);
}
- .xs\:bui-pr-14 {
+ .bui-pr-14 {
padding-right: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-pr {
- padding-right: var(--pr-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-pr {
+ padding-right: var(--pr-xs);
+ }
+
+ .xs\:bui-pr-0\.5 {
+ padding-right: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-pr-1 {
+ padding-right: var(--bui-space-1);
+ }
+
+ .xs\:bui-pr-1\.5 {
+ padding-right: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-pr-2 {
+ padding-right: var(--bui-space-2);
+ }
+
+ .xs\:bui-pr-3 {
+ padding-right: var(--bui-space-3);
+ }
+
+ .xs\:bui-pr-4 {
+ padding-right: var(--bui-space-4);
+ }
+
+ .xs\:bui-pr-5 {
+ padding-right: var(--bui-space-5);
+ }
+
+ .xs\:bui-pr-6 {
+ padding-right: var(--bui-space-6);
+ }
+
+ .xs\:bui-pr-7 {
+ padding-right: var(--bui-space-7);
+ }
+
+ .xs\:bui-pr-8 {
+ padding-right: var(--bui-space-8);
+ }
+
+ .xs\:bui-pr-9 {
+ padding-right: var(--bui-space-9);
+ }
+
+ .xs\:bui-pr-10 {
+ padding-right: var(--bui-space-10);
+ }
+
+ .xs\:bui-pr-11 {
+ padding-right: var(--bui-space-11);
+ }
+
+ .xs\:bui-pr-12 {
+ padding-right: var(--bui-space-12);
+ }
+
+ .xs\:bui-pr-13 {
+ padding-right: var(--bui-space-13);
+ }
+
+ .xs\:bui-pr-14 {
+ padding-right: var(--bui-space-14);
+ }
}
- .sm\:bui-pr-0\.5 {
- padding-right: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-pr {
+ padding-right: var(--pr-sm);
+ }
+
+ .sm\:bui-pr-0\.5 {
+ padding-right: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-pr-1 {
+ padding-right: var(--bui-space-1);
+ }
+
+ .sm\:bui-pr-1\.5 {
+ padding-right: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-pr-2 {
+ padding-right: var(--bui-space-2);
+ }
+
+ .sm\:bui-pr-3 {
+ padding-right: var(--bui-space-3);
+ }
+
+ .sm\:bui-pr-4 {
+ padding-right: var(--bui-space-4);
+ }
+
+ .sm\:bui-pr-5 {
+ padding-right: var(--bui-space-5);
+ }
+
+ .sm\:bui-pr-6 {
+ padding-right: var(--bui-space-6);
+ }
+
+ .sm\:bui-pr-7 {
+ padding-right: var(--bui-space-7);
+ }
+
+ .sm\:bui-pr-8 {
+ padding-right: var(--bui-space-8);
+ }
+
+ .sm\:bui-pr-9 {
+ padding-right: var(--bui-space-9);
+ }
+
+ .sm\:bui-pr-10 {
+ padding-right: var(--bui-space-10);
+ }
+
+ .sm\:bui-pr-11 {
+ padding-right: var(--bui-space-11);
+ }
+
+ .sm\:bui-pr-12 {
+ padding-right: var(--bui-space-12);
+ }
+
+ .sm\:bui-pr-13 {
+ padding-right: var(--bui-space-13);
+ }
+
+ .sm\:bui-pr-14 {
+ padding-right: var(--bui-space-14);
+ }
}
- .sm\:bui-pr-1 {
- padding-right: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-pr {
+ padding-right: var(--pr-md);
+ }
+
+ .md\:bui-pr-0\.5 {
+ padding-right: var(--bui-space-0_5);
+ }
+
+ .md\:bui-pr-1 {
+ padding-right: var(--bui-space-1);
+ }
+
+ .md\:bui-pr-1\.5 {
+ padding-right: var(--bui-space-1_5);
+ }
+
+ .md\:bui-pr-2 {
+ padding-right: var(--bui-space-2);
+ }
+
+ .md\:bui-pr-3 {
+ padding-right: var(--bui-space-3);
+ }
+
+ .md\:bui-pr-4 {
+ padding-right: var(--bui-space-4);
+ }
+
+ .md\:bui-pr-5 {
+ padding-right: var(--bui-space-5);
+ }
+
+ .md\:bui-pr-6 {
+ padding-right: var(--bui-space-6);
+ }
+
+ .md\:bui-pr-7 {
+ padding-right: var(--bui-space-7);
+ }
+
+ .md\:bui-pr-8 {
+ padding-right: var(--bui-space-8);
+ }
+
+ .md\:bui-pr-9 {
+ padding-right: var(--bui-space-9);
+ }
+
+ .md\:bui-pr-10 {
+ padding-right: var(--bui-space-10);
+ }
+
+ .md\:bui-pr-11 {
+ padding-right: var(--bui-space-11);
+ }
+
+ .md\:bui-pr-12 {
+ padding-right: var(--bui-space-12);
+ }
+
+ .md\:bui-pr-13 {
+ padding-right: var(--bui-space-13);
+ }
+
+ .md\:bui-pr-14 {
+ padding-right: var(--bui-space-14);
+ }
}
- .sm\:bui-pr-1\.5 {
- padding-right: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-pr {
+ padding-right: var(--pr-lg);
+ }
+
+ .lg\:bui-pr-0\.5 {
+ padding-right: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-pr-1 {
+ padding-right: var(--bui-space-1);
+ }
+
+ .lg\:bui-pr-1\.5 {
+ padding-right: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-pr-2 {
+ padding-right: var(--bui-space-2);
+ }
+
+ .lg\:bui-pr-3 {
+ padding-right: var(--bui-space-3);
+ }
+
+ .lg\:bui-pr-4 {
+ padding-right: var(--bui-space-4);
+ }
+
+ .lg\:bui-pr-5 {
+ padding-right: var(--bui-space-5);
+ }
+
+ .lg\:bui-pr-6 {
+ padding-right: var(--bui-space-6);
+ }
+
+ .lg\:bui-pr-7 {
+ padding-right: var(--bui-space-7);
+ }
+
+ .lg\:bui-pr-8 {
+ padding-right: var(--bui-space-8);
+ }
+
+ .lg\:bui-pr-9 {
+ padding-right: var(--bui-space-9);
+ }
+
+ .lg\:bui-pr-10 {
+ padding-right: var(--bui-space-10);
+ }
+
+ .lg\:bui-pr-11 {
+ padding-right: var(--bui-space-11);
+ }
+
+ .lg\:bui-pr-12 {
+ padding-right: var(--bui-space-12);
+ }
+
+ .lg\:bui-pr-13 {
+ padding-right: var(--bui-space-13);
+ }
+
+ .lg\:bui-pr-14 {
+ padding-right: var(--bui-space-14);
+ }
}
- .sm\:bui-pr-2 {
- padding-right: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-pr {
+ padding-right: var(--pr-xl);
+ }
- .sm\:bui-pr-3 {
- padding-right: var(--bui-space-3);
- }
+ .xl\:bui-pr-0\.5 {
+ padding-right: var(--bui-space-0_5);
+ }
- .sm\:bui-pr-4 {
- padding-right: var(--bui-space-4);
- }
+ .xl\:bui-pr-1 {
+ padding-right: var(--bui-space-1);
+ }
- .sm\:bui-pr-5 {
- padding-right: var(--bui-space-5);
- }
+ .xl\:bui-pr-1\.5 {
+ padding-right: var(--bui-space-1_5);
+ }
- .sm\:bui-pr-6 {
- padding-right: var(--bui-space-6);
- }
+ .xl\:bui-pr-2 {
+ padding-right: var(--bui-space-2);
+ }
- .sm\:bui-pr-7 {
- padding-right: var(--bui-space-7);
- }
+ .xl\:bui-pr-3 {
+ padding-right: var(--bui-space-3);
+ }
- .sm\:bui-pr-8 {
- padding-right: var(--bui-space-8);
- }
+ .xl\:bui-pr-4 {
+ padding-right: var(--bui-space-4);
+ }
- .sm\:bui-pr-9 {
- padding-right: var(--bui-space-9);
- }
+ .xl\:bui-pr-5 {
+ padding-right: var(--bui-space-5);
+ }
- .sm\:bui-pr-10 {
- padding-right: var(--bui-space-10);
- }
+ .xl\:bui-pr-6 {
+ padding-right: var(--bui-space-6);
+ }
- .sm\:bui-pr-11 {
- padding-right: var(--bui-space-11);
- }
+ .xl\:bui-pr-7 {
+ padding-right: var(--bui-space-7);
+ }
- .sm\:bui-pr-12 {
- padding-right: var(--bui-space-12);
- }
+ .xl\:bui-pr-8 {
+ padding-right: var(--bui-space-8);
+ }
- .sm\:bui-pr-13 {
- padding-right: var(--bui-space-13);
- }
+ .xl\:bui-pr-9 {
+ padding-right: var(--bui-space-9);
+ }
- .sm\:bui-pr-14 {
- padding-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-pr {
- padding-right: var(--pr-md);
- }
-
- .md\:bui-pr-0\.5 {
- padding-right: var(--bui-space-0_5);
- }
-
- .md\:bui-pr-1 {
- padding-right: var(--bui-space-1);
- }
-
- .md\:bui-pr-1\.5 {
- padding-right: var(--bui-space-1_5);
- }
-
- .md\:bui-pr-2 {
- padding-right: var(--bui-space-2);
- }
-
- .md\:bui-pr-3 {
- padding-right: var(--bui-space-3);
- }
-
- .md\:bui-pr-4 {
- padding-right: var(--bui-space-4);
- }
-
- .md\:bui-pr-5 {
- padding-right: var(--bui-space-5);
- }
-
- .md\:bui-pr-6 {
- padding-right: var(--bui-space-6);
- }
-
- .md\:bui-pr-7 {
- padding-right: var(--bui-space-7);
- }
-
- .md\:bui-pr-8 {
- padding-right: var(--bui-space-8);
- }
-
- .md\:bui-pr-9 {
- padding-right: var(--bui-space-9);
- }
-
- .md\:bui-pr-10 {
- padding-right: var(--bui-space-10);
- }
-
- .md\:bui-pr-11 {
- padding-right: var(--bui-space-11);
- }
-
- .md\:bui-pr-12 {
- padding-right: var(--bui-space-12);
- }
-
- .md\:bui-pr-13 {
- padding-right: var(--bui-space-13);
- }
-
- .md\:bui-pr-14 {
- padding-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-pr {
- padding-right: var(--pr-lg);
- }
-
- .lg\:bui-pr-0\.5 {
- padding-right: var(--bui-space-0_5);
- }
-
- .lg\:bui-pr-1 {
- padding-right: var(--bui-space-1);
- }
-
- .lg\:bui-pr-1\.5 {
- padding-right: var(--bui-space-1_5);
- }
-
- .lg\:bui-pr-2 {
- padding-right: var(--bui-space-2);
- }
-
- .lg\:bui-pr-3 {
- padding-right: var(--bui-space-3);
- }
-
- .lg\:bui-pr-4 {
- padding-right: var(--bui-space-4);
- }
-
- .lg\:bui-pr-5 {
- padding-right: var(--bui-space-5);
- }
-
- .lg\:bui-pr-6 {
- padding-right: var(--bui-space-6);
- }
-
- .lg\:bui-pr-7 {
- padding-right: var(--bui-space-7);
- }
-
- .lg\:bui-pr-8 {
- padding-right: var(--bui-space-8);
- }
-
- .lg\:bui-pr-9 {
- padding-right: var(--bui-space-9);
- }
-
- .lg\:bui-pr-10 {
- padding-right: var(--bui-space-10);
- }
-
- .lg\:bui-pr-11 {
- padding-right: var(--bui-space-11);
- }
-
- .lg\:bui-pr-12 {
- padding-right: var(--bui-space-12);
- }
-
- .lg\:bui-pr-13 {
- padding-right: var(--bui-space-13);
- }
-
- .lg\:bui-pr-14 {
- padding-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-pr {
- padding-right: var(--pr-xl);
- }
-
- .xl\:bui-pr-0\.5 {
- padding-right: var(--bui-space-0_5);
- }
-
- .xl\:bui-pr-1 {
- padding-right: var(--bui-space-1);
- }
-
- .xl\:bui-pr-1\.5 {
- padding-right: var(--bui-space-1_5);
- }
-
- .xl\:bui-pr-2 {
- padding-right: var(--bui-space-2);
- }
-
- .xl\:bui-pr-3 {
- padding-right: var(--bui-space-3);
- }
-
- .xl\:bui-pr-4 {
- padding-right: var(--bui-space-4);
- }
-
- .xl\:bui-pr-5 {
- padding-right: var(--bui-space-5);
- }
-
- .xl\:bui-pr-6 {
- padding-right: var(--bui-space-6);
- }
-
- .xl\:bui-pr-7 {
- padding-right: var(--bui-space-7);
- }
-
- .xl\:bui-pr-8 {
- padding-right: var(--bui-space-8);
- }
-
- .xl\:bui-pr-9 {
- padding-right: var(--bui-space-9);
- }
-
- .xl\:bui-pr-10 {
- padding-right: var(--bui-space-10);
- }
-
- .xl\:bui-pr-11 {
- padding-right: var(--bui-space-11);
- }
-
- .xl\:bui-pr-12 {
- padding-right: var(--bui-space-12);
- }
-
- .xl\:bui-pr-13 {
- padding-right: var(--bui-space-13);
- }
-
- .xl\:bui-pr-14 {
- padding-right: var(--bui-space-14);
+ .xl\:bui-pr-10 {
+ padding-right: var(--bui-space-10);
+ }
+
+ .xl\:bui-pr-11 {
+ padding-right: var(--bui-space-11);
+ }
+
+ .xl\:bui-pr-12 {
+ padding-right: var(--bui-space-12);
+ }
+
+ .xl\:bui-pr-13 {
+ padding-right: var(--bui-space-13);
+ }
+
+ .xl\:bui-pr-14 {
+ padding-right: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/pt.css b/packages/ui/src/css/utilities/pt.css
index cf557257e3..f9f17c1afc 100644
--- a/packages/ui/src/css/utilities/pt.css
+++ b/packages/ui/src/css/utilities/pt.css
@@ -1,422 +1,440 @@
-.bui-pt {
- padding-top: var(--pt);
-}
+/*
+ * 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.
+ */
-.bui-pt-0\.5 {
- padding-top: var(--bui-space-0_5);
-}
-
-.bui-pt-1 {
- padding-top: var(--bui-space-1);
-}
-
-.bui-pt-1\.5 {
- padding-top: var(--bui-space-1_5);
-}
-
-.bui-pt-2 {
- padding-top: var(--bui-space-2);
-}
-
-.bui-pt-3 {
- padding-top: var(--bui-space-3);
-}
-
-.bui-pt-4 {
- padding-top: var(--bui-space-4);
-}
-
-.bui-pt-5 {
- padding-top: var(--bui-space-5);
-}
-
-.bui-pt-6 {
- padding-top: var(--bui-space-6);
-}
-
-.bui-pt-7 {
- padding-top: var(--bui-space-7);
-}
-
-.bui-pt-8 {
- padding-top: var(--bui-space-8);
-}
-
-.bui-pt-9 {
- padding-top: var(--bui-space-9);
-}
-
-.bui-pt-10 {
- padding-top: var(--bui-space-10);
-}
-
-.bui-pt-11 {
- padding-top: var(--bui-space-11);
-}
-
-.bui-pt-12 {
- padding-top: var(--bui-space-12);
-}
-
-.bui-pt-13 {
- padding-top: var(--bui-space-13);
-}
-
-.bui-pt-14 {
- padding-top: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-pt {
- padding-top: var(--pt-xs);
+@layer utilities {
+ .bui-pt {
+ padding-top: var(--pt);
}
- .xs\:bui-pt-0\.5 {
+ .bui-pt-0\.5 {
padding-top: var(--bui-space-0_5);
}
- .xs\:bui-pt-1 {
+ .bui-pt-1 {
padding-top: var(--bui-space-1);
}
- .xs\:bui-pt-1\.5 {
+ .bui-pt-1\.5 {
padding-top: var(--bui-space-1_5);
}
- .xs\:bui-pt-2 {
+ .bui-pt-2 {
padding-top: var(--bui-space-2);
}
- .xs\:bui-pt-3 {
+ .bui-pt-3 {
padding-top: var(--bui-space-3);
}
- .xs\:bui-pt-4 {
+ .bui-pt-4 {
padding-top: var(--bui-space-4);
}
- .xs\:bui-pt-5 {
+ .bui-pt-5 {
padding-top: var(--bui-space-5);
}
- .xs\:bui-pt-6 {
+ .bui-pt-6 {
padding-top: var(--bui-space-6);
}
- .xs\:bui-pt-7 {
+ .bui-pt-7 {
padding-top: var(--bui-space-7);
}
- .xs\:bui-pt-8 {
+ .bui-pt-8 {
padding-top: var(--bui-space-8);
}
- .xs\:bui-pt-9 {
+ .bui-pt-9 {
padding-top: var(--bui-space-9);
}
- .xs\:bui-pt-10 {
+ .bui-pt-10 {
padding-top: var(--bui-space-10);
}
- .xs\:bui-pt-11 {
+ .bui-pt-11 {
padding-top: var(--bui-space-11);
}
- .xs\:bui-pt-12 {
+ .bui-pt-12 {
padding-top: var(--bui-space-12);
}
- .xs\:bui-pt-13 {
+ .bui-pt-13 {
padding-top: var(--bui-space-13);
}
- .xs\:bui-pt-14 {
+ .bui-pt-14 {
padding-top: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-pt {
- padding-top: var(--pt-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-pt {
+ padding-top: var(--pt-xs);
+ }
+
+ .xs\:bui-pt-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-pt-1 {
+ padding-top: var(--bui-space-1);
+ }
+
+ .xs\:bui-pt-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-pt-2 {
+ padding-top: var(--bui-space-2);
+ }
+
+ .xs\:bui-pt-3 {
+ padding-top: var(--bui-space-3);
+ }
+
+ .xs\:bui-pt-4 {
+ padding-top: var(--bui-space-4);
+ }
+
+ .xs\:bui-pt-5 {
+ padding-top: var(--bui-space-5);
+ }
+
+ .xs\:bui-pt-6 {
+ padding-top: var(--bui-space-6);
+ }
+
+ .xs\:bui-pt-7 {
+ padding-top: var(--bui-space-7);
+ }
+
+ .xs\:bui-pt-8 {
+ padding-top: var(--bui-space-8);
+ }
+
+ .xs\:bui-pt-9 {
+ padding-top: var(--bui-space-9);
+ }
+
+ .xs\:bui-pt-10 {
+ padding-top: var(--bui-space-10);
+ }
+
+ .xs\:bui-pt-11 {
+ padding-top: var(--bui-space-11);
+ }
+
+ .xs\:bui-pt-12 {
+ padding-top: var(--bui-space-12);
+ }
+
+ .xs\:bui-pt-13 {
+ padding-top: var(--bui-space-13);
+ }
+
+ .xs\:bui-pt-14 {
+ padding-top: var(--bui-space-14);
+ }
}
- .sm\:bui-pt-0\.5 {
- padding-top: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-pt {
+ padding-top: var(--pt-sm);
+ }
+
+ .sm\:bui-pt-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-pt-1 {
+ padding-top: var(--bui-space-1);
+ }
+
+ .sm\:bui-pt-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-pt-2 {
+ padding-top: var(--bui-space-2);
+ }
+
+ .sm\:bui-pt-3 {
+ padding-top: var(--bui-space-3);
+ }
+
+ .sm\:bui-pt-4 {
+ padding-top: var(--bui-space-4);
+ }
+
+ .sm\:bui-pt-5 {
+ padding-top: var(--bui-space-5);
+ }
+
+ .sm\:bui-pt-6 {
+ padding-top: var(--bui-space-6);
+ }
+
+ .sm\:bui-pt-7 {
+ padding-top: var(--bui-space-7);
+ }
+
+ .sm\:bui-pt-8 {
+ padding-top: var(--bui-space-8);
+ }
+
+ .sm\:bui-pt-9 {
+ padding-top: var(--bui-space-9);
+ }
+
+ .sm\:bui-pt-10 {
+ padding-top: var(--bui-space-10);
+ }
+
+ .sm\:bui-pt-11 {
+ padding-top: var(--bui-space-11);
+ }
+
+ .sm\:bui-pt-12 {
+ padding-top: var(--bui-space-12);
+ }
+
+ .sm\:bui-pt-13 {
+ padding-top: var(--bui-space-13);
+ }
+
+ .sm\:bui-pt-14 {
+ padding-top: var(--bui-space-14);
+ }
}
- .sm\:bui-pt-1 {
- padding-top: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-pt {
+ padding-top: var(--pt-md);
+ }
+
+ .md\:bui-pt-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ }
+
+ .md\:bui-pt-1 {
+ padding-top: var(--bui-space-1);
+ }
+
+ .md\:bui-pt-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ }
+
+ .md\:bui-pt-2 {
+ padding-top: var(--bui-space-2);
+ }
+
+ .md\:bui-pt-3 {
+ padding-top: var(--bui-space-3);
+ }
+
+ .md\:bui-pt-4 {
+ padding-top: var(--bui-space-4);
+ }
+
+ .md\:bui-pt-5 {
+ padding-top: var(--bui-space-5);
+ }
+
+ .md\:bui-pt-6 {
+ padding-top: var(--bui-space-6);
+ }
+
+ .md\:bui-pt-7 {
+ padding-top: var(--bui-space-7);
+ }
+
+ .md\:bui-pt-8 {
+ padding-top: var(--bui-space-8);
+ }
+
+ .md\:bui-pt-9 {
+ padding-top: var(--bui-space-9);
+ }
+
+ .md\:bui-pt-10 {
+ padding-top: var(--bui-space-10);
+ }
+
+ .md\:bui-pt-11 {
+ padding-top: var(--bui-space-11);
+ }
+
+ .md\:bui-pt-12 {
+ padding-top: var(--bui-space-12);
+ }
+
+ .md\:bui-pt-13 {
+ padding-top: var(--bui-space-13);
+ }
+
+ .md\:bui-pt-14 {
+ padding-top: var(--bui-space-14);
+ }
}
- .sm\:bui-pt-1\.5 {
- padding-top: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-pt {
+ padding-top: var(--pt-lg);
+ }
+
+ .lg\:bui-pt-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-pt-1 {
+ padding-top: var(--bui-space-1);
+ }
+
+ .lg\:bui-pt-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-pt-2 {
+ padding-top: var(--bui-space-2);
+ }
+
+ .lg\:bui-pt-3 {
+ padding-top: var(--bui-space-3);
+ }
+
+ .lg\:bui-pt-4 {
+ padding-top: var(--bui-space-4);
+ }
+
+ .lg\:bui-pt-5 {
+ padding-top: var(--bui-space-5);
+ }
+
+ .lg\:bui-pt-6 {
+ padding-top: var(--bui-space-6);
+ }
+
+ .lg\:bui-pt-7 {
+ padding-top: var(--bui-space-7);
+ }
+
+ .lg\:bui-pt-8 {
+ padding-top: var(--bui-space-8);
+ }
+
+ .lg\:bui-pt-9 {
+ padding-top: var(--bui-space-9);
+ }
+
+ .lg\:bui-pt-10 {
+ padding-top: var(--bui-space-10);
+ }
+
+ .lg\:bui-pt-11 {
+ padding-top: var(--bui-space-11);
+ }
+
+ .lg\:bui-pt-12 {
+ padding-top: var(--bui-space-12);
+ }
+
+ .lg\:bui-pt-13 {
+ padding-top: var(--bui-space-13);
+ }
+
+ .lg\:bui-pt-14 {
+ padding-top: var(--bui-space-14);
+ }
}
- .sm\:bui-pt-2 {
- padding-top: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-pt {
+ padding-top: var(--pt-xl);
+ }
- .sm\:bui-pt-3 {
- padding-top: var(--bui-space-3);
- }
+ .xl\:bui-pt-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ }
- .sm\:bui-pt-4 {
- padding-top: var(--bui-space-4);
- }
+ .xl\:bui-pt-1 {
+ padding-top: var(--bui-space-1);
+ }
- .sm\:bui-pt-5 {
- padding-top: var(--bui-space-5);
- }
+ .xl\:bui-pt-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ }
- .sm\:bui-pt-6 {
- padding-top: var(--bui-space-6);
- }
+ .xl\:bui-pt-2 {
+ padding-top: var(--bui-space-2);
+ }
- .sm\:bui-pt-7 {
- padding-top: var(--bui-space-7);
- }
+ .xl\:bui-pt-3 {
+ padding-top: var(--bui-space-3);
+ }
- .sm\:bui-pt-8 {
- padding-top: var(--bui-space-8);
- }
+ .xl\:bui-pt-4 {
+ padding-top: var(--bui-space-4);
+ }
- .sm\:bui-pt-9 {
- padding-top: var(--bui-space-9);
- }
+ .xl\:bui-pt-5 {
+ padding-top: var(--bui-space-5);
+ }
- .sm\:bui-pt-10 {
- padding-top: var(--bui-space-10);
- }
+ .xl\:bui-pt-6 {
+ padding-top: var(--bui-space-6);
+ }
- .sm\:bui-pt-11 {
- padding-top: var(--bui-space-11);
- }
+ .xl\:bui-pt-7 {
+ padding-top: var(--bui-space-7);
+ }
- .sm\:bui-pt-12 {
- padding-top: var(--bui-space-12);
- }
+ .xl\:bui-pt-8 {
+ padding-top: var(--bui-space-8);
+ }
- .sm\:bui-pt-13 {
- padding-top: var(--bui-space-13);
- }
+ .xl\:bui-pt-9 {
+ padding-top: var(--bui-space-9);
+ }
- .sm\:bui-pt-14 {
- padding-top: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-pt {
- padding-top: var(--pt-md);
- }
-
- .md\:bui-pt-0\.5 {
- padding-top: var(--bui-space-0_5);
- }
-
- .md\:bui-pt-1 {
- padding-top: var(--bui-space-1);
- }
-
- .md\:bui-pt-1\.5 {
- padding-top: var(--bui-space-1_5);
- }
-
- .md\:bui-pt-2 {
- padding-top: var(--bui-space-2);
- }
-
- .md\:bui-pt-3 {
- padding-top: var(--bui-space-3);
- }
-
- .md\:bui-pt-4 {
- padding-top: var(--bui-space-4);
- }
-
- .md\:bui-pt-5 {
- padding-top: var(--bui-space-5);
- }
-
- .md\:bui-pt-6 {
- padding-top: var(--bui-space-6);
- }
-
- .md\:bui-pt-7 {
- padding-top: var(--bui-space-7);
- }
-
- .md\:bui-pt-8 {
- padding-top: var(--bui-space-8);
- }
-
- .md\:bui-pt-9 {
- padding-top: var(--bui-space-9);
- }
-
- .md\:bui-pt-10 {
- padding-top: var(--bui-space-10);
- }
-
- .md\:bui-pt-11 {
- padding-top: var(--bui-space-11);
- }
-
- .md\:bui-pt-12 {
- padding-top: var(--bui-space-12);
- }
-
- .md\:bui-pt-13 {
- padding-top: var(--bui-space-13);
- }
-
- .md\:bui-pt-14 {
- padding-top: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-pt {
- padding-top: var(--pt-lg);
- }
-
- .lg\:bui-pt-0\.5 {
- padding-top: var(--bui-space-0_5);
- }
-
- .lg\:bui-pt-1 {
- padding-top: var(--bui-space-1);
- }
-
- .lg\:bui-pt-1\.5 {
- padding-top: var(--bui-space-1_5);
- }
-
- .lg\:bui-pt-2 {
- padding-top: var(--bui-space-2);
- }
-
- .lg\:bui-pt-3 {
- padding-top: var(--bui-space-3);
- }
-
- .lg\:bui-pt-4 {
- padding-top: var(--bui-space-4);
- }
-
- .lg\:bui-pt-5 {
- padding-top: var(--bui-space-5);
- }
-
- .lg\:bui-pt-6 {
- padding-top: var(--bui-space-6);
- }
-
- .lg\:bui-pt-7 {
- padding-top: var(--bui-space-7);
- }
-
- .lg\:bui-pt-8 {
- padding-top: var(--bui-space-8);
- }
-
- .lg\:bui-pt-9 {
- padding-top: var(--bui-space-9);
- }
-
- .lg\:bui-pt-10 {
- padding-top: var(--bui-space-10);
- }
-
- .lg\:bui-pt-11 {
- padding-top: var(--bui-space-11);
- }
-
- .lg\:bui-pt-12 {
- padding-top: var(--bui-space-12);
- }
-
- .lg\:bui-pt-13 {
- padding-top: var(--bui-space-13);
- }
-
- .lg\:bui-pt-14 {
- padding-top: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-pt {
- padding-top: var(--pt-xl);
- }
-
- .xl\:bui-pt-0\.5 {
- padding-top: var(--bui-space-0_5);
- }
-
- .xl\:bui-pt-1 {
- padding-top: var(--bui-space-1);
- }
-
- .xl\:bui-pt-1\.5 {
- padding-top: var(--bui-space-1_5);
- }
-
- .xl\:bui-pt-2 {
- padding-top: var(--bui-space-2);
- }
-
- .xl\:bui-pt-3 {
- padding-top: var(--bui-space-3);
- }
-
- .xl\:bui-pt-4 {
- padding-top: var(--bui-space-4);
- }
-
- .xl\:bui-pt-5 {
- padding-top: var(--bui-space-5);
- }
-
- .xl\:bui-pt-6 {
- padding-top: var(--bui-space-6);
- }
-
- .xl\:bui-pt-7 {
- padding-top: var(--bui-space-7);
- }
-
- .xl\:bui-pt-8 {
- padding-top: var(--bui-space-8);
- }
-
- .xl\:bui-pt-9 {
- padding-top: var(--bui-space-9);
- }
-
- .xl\:bui-pt-10 {
- padding-top: var(--bui-space-10);
- }
-
- .xl\:bui-pt-11 {
- padding-top: var(--bui-space-11);
- }
-
- .xl\:bui-pt-12 {
- padding-top: var(--bui-space-12);
- }
-
- .xl\:bui-pt-13 {
- padding-top: var(--bui-space-13);
- }
-
- .xl\:bui-pt-14 {
- padding-top: var(--bui-space-14);
+ .xl\:bui-pt-10 {
+ padding-top: var(--bui-space-10);
+ }
+
+ .xl\:bui-pt-11 {
+ padding-top: var(--bui-space-11);
+ }
+
+ .xl\:bui-pt-12 {
+ padding-top: var(--bui-space-12);
+ }
+
+ .xl\:bui-pt-13 {
+ padding-top: var(--bui-space-13);
+ }
+
+ .xl\:bui-pt-14 {
+ padding-top: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/px.css b/packages/ui/src/css/utilities/px.css
index 37a41d832e..bb0cf12bbb 100644
--- a/packages/ui/src/css/utilities/px.css
+++ b/packages/ui/src/css/utilities/px.css
@@ -1,524 +1,542 @@
-.bui-px {
- padding-left: var(--px);
- padding-right: var(--px);
-}
+/*
+ * 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.
+ */
-.bui-px-0\.5 {
- padding-left: var(--bui-space-0_5);
- padding-right: var(--bui-space-0_5);
-}
-
-.bui-px-1 {
- padding-left: var(--bui-space-1);
- padding-right: var(--bui-space-1);
-}
-
-.bui-px-1\.5 {
- padding-left: var(--bui-space-1_5);
- padding-right: var(--bui-space-1_5);
-}
-
-.bui-px-2 {
- padding-left: var(--bui-space-2);
- padding-right: var(--bui-space-2);
-}
-
-.bui-px-3 {
- padding-left: var(--bui-space-3);
- padding-right: var(--bui-space-3);
-}
-
-.bui-px-4 {
- padding-left: var(--bui-space-4);
- padding-right: var(--bui-space-4);
-}
-
-.bui-px-5 {
- padding-left: var(--bui-space-5);
- padding-right: var(--bui-space-5);
-}
-
-.bui-px-6 {
- padding-left: var(--bui-space-6);
- padding-right: var(--bui-space-6);
-}
-
-.bui-px-7 {
- padding-left: var(--bui-space-7);
- padding-right: var(--bui-space-7);
-}
-
-.bui-px-8 {
- padding-left: var(--bui-space-8);
- padding-right: var(--bui-space-8);
-}
-
-.bui-px-9 {
- padding-left: var(--bui-space-9);
- padding-right: var(--bui-space-9);
-}
-
-.bui-px-10 {
- padding-left: var(--bui-space-10);
- padding-right: var(--bui-space-10);
-}
-
-.bui-px-11 {
- padding-left: var(--bui-space-11);
- padding-right: var(--bui-space-11);
-}
-
-.bui-px-12 {
- padding-left: var(--bui-space-12);
- padding-right: var(--bui-space-12);
-}
-
-.bui-px-13 {
- padding-left: var(--bui-space-13);
- padding-right: var(--bui-space-13);
-}
-
-.bui-px-14 {
- padding-left: var(--bui-space-14);
- padding-right: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-px {
- padding-left: var(--px-xs);
- padding-right: var(--px-xs);
+@layer utilities {
+ .bui-px {
+ padding-left: var(--px);
+ padding-right: var(--px);
}
- .xs\:bui-px-0\.5 {
+ .bui-px-0\.5 {
padding-left: var(--bui-space-0_5);
padding-right: var(--bui-space-0_5);
}
- .xs\:bui-px-1 {
+ .bui-px-1 {
padding-left: var(--bui-space-1);
padding-right: var(--bui-space-1);
}
- .xs\:bui-px-1\.5 {
+ .bui-px-1\.5 {
padding-left: var(--bui-space-1_5);
padding-right: var(--bui-space-1_5);
}
- .xs\:bui-px-2 {
+ .bui-px-2 {
padding-left: var(--bui-space-2);
padding-right: var(--bui-space-2);
}
- .xs\:bui-px-3 {
+ .bui-px-3 {
padding-left: var(--bui-space-3);
padding-right: var(--bui-space-3);
}
- .xs\:bui-px-4 {
+ .bui-px-4 {
padding-left: var(--bui-space-4);
padding-right: var(--bui-space-4);
}
- .xs\:bui-px-5 {
+ .bui-px-5 {
padding-left: var(--bui-space-5);
padding-right: var(--bui-space-5);
}
- .xs\:bui-px-6 {
+ .bui-px-6 {
padding-left: var(--bui-space-6);
padding-right: var(--bui-space-6);
}
- .xs\:bui-px-7 {
+ .bui-px-7 {
padding-left: var(--bui-space-7);
padding-right: var(--bui-space-7);
}
- .xs\:bui-px-8 {
+ .bui-px-8 {
padding-left: var(--bui-space-8);
padding-right: var(--bui-space-8);
}
- .xs\:bui-px-9 {
+ .bui-px-9 {
padding-left: var(--bui-space-9);
padding-right: var(--bui-space-9);
}
- .xs\:bui-px-10 {
+ .bui-px-10 {
padding-left: var(--bui-space-10);
padding-right: var(--bui-space-10);
}
- .xs\:bui-px-11 {
+ .bui-px-11 {
padding-left: var(--bui-space-11);
padding-right: var(--bui-space-11);
}
- .xs\:bui-px-12 {
+ .bui-px-12 {
padding-left: var(--bui-space-12);
padding-right: var(--bui-space-12);
}
- .xs\:bui-px-13 {
+ .bui-px-13 {
padding-left: var(--bui-space-13);
padding-right: var(--bui-space-13);
}
- .xs\:bui-px-14 {
+ .bui-px-14 {
padding-left: var(--bui-space-14);
padding-right: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-px {
- padding-left: var(--px-sm);
- padding-right: var(--px-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-px {
+ padding-left: var(--px-xs);
+ padding-right: var(--px-xs);
+ }
+
+ .xs\:bui-px-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ padding-right: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-px-1 {
+ padding-left: var(--bui-space-1);
+ padding-right: var(--bui-space-1);
+ }
+
+ .xs\:bui-px-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ padding-right: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-px-2 {
+ padding-left: var(--bui-space-2);
+ padding-right: var(--bui-space-2);
+ }
+
+ .xs\:bui-px-3 {
+ padding-left: var(--bui-space-3);
+ padding-right: var(--bui-space-3);
+ }
+
+ .xs\:bui-px-4 {
+ padding-left: var(--bui-space-4);
+ padding-right: var(--bui-space-4);
+ }
+
+ .xs\:bui-px-5 {
+ padding-left: var(--bui-space-5);
+ padding-right: var(--bui-space-5);
+ }
+
+ .xs\:bui-px-6 {
+ padding-left: var(--bui-space-6);
+ padding-right: var(--bui-space-6);
+ }
+
+ .xs\:bui-px-7 {
+ padding-left: var(--bui-space-7);
+ padding-right: var(--bui-space-7);
+ }
+
+ .xs\:bui-px-8 {
+ padding-left: var(--bui-space-8);
+ padding-right: var(--bui-space-8);
+ }
+
+ .xs\:bui-px-9 {
+ padding-left: var(--bui-space-9);
+ padding-right: var(--bui-space-9);
+ }
+
+ .xs\:bui-px-10 {
+ padding-left: var(--bui-space-10);
+ padding-right: var(--bui-space-10);
+ }
+
+ .xs\:bui-px-11 {
+ padding-left: var(--bui-space-11);
+ padding-right: var(--bui-space-11);
+ }
+
+ .xs\:bui-px-12 {
+ padding-left: var(--bui-space-12);
+ padding-right: var(--bui-space-12);
+ }
+
+ .xs\:bui-px-13 {
+ padding-left: var(--bui-space-13);
+ padding-right: var(--bui-space-13);
+ }
+
+ .xs\:bui-px-14 {
+ padding-left: var(--bui-space-14);
+ padding-right: var(--bui-space-14);
+ }
}
- .sm\:bui-px-0\.5 {
- padding-left: var(--bui-space-0_5);
- padding-right: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-px {
+ padding-left: var(--px-sm);
+ padding-right: var(--px-sm);
+ }
+
+ .sm\:bui-px-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ padding-right: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-px-1 {
+ padding-left: var(--bui-space-1);
+ padding-right: var(--bui-space-1);
+ }
+
+ .sm\:bui-px-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ padding-right: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-px-2 {
+ padding-left: var(--bui-space-2);
+ padding-right: var(--bui-space-2);
+ }
+
+ .sm\:bui-px-3 {
+ padding-left: var(--bui-space-3);
+ padding-right: var(--bui-space-3);
+ }
+
+ .sm\:bui-px-4 {
+ padding-left: var(--bui-space-4);
+ padding-right: var(--bui-space-4);
+ }
+
+ .sm\:bui-px-5 {
+ padding-left: var(--bui-space-5);
+ padding-right: var(--bui-space-5);
+ }
+
+ .sm\:bui-px-6 {
+ padding-left: var(--bui-space-6);
+ padding-right: var(--bui-space-6);
+ }
+
+ .sm\:bui-px-7 {
+ padding-left: var(--bui-space-7);
+ padding-right: var(--bui-space-7);
+ }
+
+ .sm\:bui-px-8 {
+ padding-left: var(--bui-space-8);
+ padding-right: var(--bui-space-8);
+ }
+
+ .sm\:bui-px-9 {
+ padding-left: var(--bui-space-9);
+ padding-right: var(--bui-space-9);
+ }
+
+ .sm\:bui-px-10 {
+ padding-left: var(--bui-space-10);
+ padding-right: var(--bui-space-10);
+ }
+
+ .sm\:bui-px-11 {
+ padding-left: var(--bui-space-11);
+ padding-right: var(--bui-space-11);
+ }
+
+ .sm\:bui-px-12 {
+ padding-left: var(--bui-space-12);
+ padding-right: var(--bui-space-12);
+ }
+
+ .sm\:bui-px-13 {
+ padding-left: var(--bui-space-13);
+ padding-right: var(--bui-space-13);
+ }
+
+ .sm\:bui-px-14 {
+ padding-left: var(--bui-space-14);
+ padding-right: var(--bui-space-14);
+ }
}
- .sm\:bui-px-1 {
- padding-left: var(--bui-space-1);
- padding-right: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-px {
+ padding-left: var(--px-md);
+ padding-right: var(--px-md);
+ }
+
+ .md\:bui-px-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ padding-right: var(--bui-space-0_5);
+ }
+
+ .md\:bui-px-1 {
+ padding-left: var(--bui-space-1);
+ padding-right: var(--bui-space-1);
+ }
+
+ .md\:bui-px-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ padding-right: var(--bui-space-1_5);
+ }
+
+ .md\:bui-px-2 {
+ padding-left: var(--bui-space-2);
+ padding-right: var(--bui-space-2);
+ }
+
+ .md\:bui-px-3 {
+ padding-left: var(--bui-space-3);
+ padding-right: var(--bui-space-3);
+ }
+
+ .md\:bui-px-4 {
+ padding-left: var(--bui-space-4);
+ padding-right: var(--bui-space-4);
+ }
+
+ .md\:bui-px-5 {
+ padding-left: var(--bui-space-5);
+ padding-right: var(--bui-space-5);
+ }
+
+ .md\:bui-px-6 {
+ padding-left: var(--bui-space-6);
+ padding-right: var(--bui-space-6);
+ }
+
+ .md\:bui-px-7 {
+ padding-left: var(--bui-space-7);
+ padding-right: var(--bui-space-7);
+ }
+
+ .md\:bui-px-8 {
+ padding-left: var(--bui-space-8);
+ padding-right: var(--bui-space-8);
+ }
+
+ .md\:bui-px-9 {
+ padding-left: var(--bui-space-9);
+ padding-right: var(--bui-space-9);
+ }
+
+ .md\:bui-px-10 {
+ padding-left: var(--bui-space-10);
+ padding-right: var(--bui-space-10);
+ }
+
+ .md\:bui-px-11 {
+ padding-left: var(--bui-space-11);
+ padding-right: var(--bui-space-11);
+ }
+
+ .md\:bui-px-12 {
+ padding-left: var(--bui-space-12);
+ padding-right: var(--bui-space-12);
+ }
+
+ .md\:bui-px-13 {
+ padding-left: var(--bui-space-13);
+ padding-right: var(--bui-space-13);
+ }
+
+ .md\:bui-px-14 {
+ padding-left: var(--bui-space-14);
+ padding-right: var(--bui-space-14);
+ }
}
- .sm\:bui-px-1\.5 {
- padding-left: var(--bui-space-1_5);
- padding-right: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-px {
+ padding-left: var(--px-lg);
+ padding-right: var(--px-lg);
+ }
+
+ .lg\:bui-px-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ padding-right: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-px-1 {
+ padding-left: var(--bui-space-1);
+ padding-right: var(--bui-space-1);
+ }
+
+ .lg\:bui-px-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ padding-right: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-px-2 {
+ padding-left: var(--bui-space-2);
+ padding-right: var(--bui-space-2);
+ }
+
+ .lg\:bui-px-3 {
+ padding-left: var(--bui-space-3);
+ padding-right: var(--bui-space-3);
+ }
+
+ .lg\:bui-px-4 {
+ padding-left: var(--bui-space-4);
+ padding-right: var(--bui-space-4);
+ }
+
+ .lg\:bui-px-5 {
+ padding-left: var(--bui-space-5);
+ padding-right: var(--bui-space-5);
+ }
+
+ .lg\:bui-px-6 {
+ padding-left: var(--bui-space-6);
+ padding-right: var(--bui-space-6);
+ }
+
+ .lg\:bui-px-7 {
+ padding-left: var(--bui-space-7);
+ padding-right: var(--bui-space-7);
+ }
+
+ .lg\:bui-px-8 {
+ padding-left: var(--bui-space-8);
+ padding-right: var(--bui-space-8);
+ }
+
+ .lg\:bui-px-9 {
+ padding-left: var(--bui-space-9);
+ padding-right: var(--bui-space-9);
+ }
+
+ .lg\:bui-px-10 {
+ padding-left: var(--bui-space-10);
+ padding-right: var(--bui-space-10);
+ }
+
+ .lg\:bui-px-11 {
+ padding-left: var(--bui-space-11);
+ padding-right: var(--bui-space-11);
+ }
+
+ .lg\:bui-px-12 {
+ padding-left: var(--bui-space-12);
+ padding-right: var(--bui-space-12);
+ }
+
+ .lg\:bui-px-13 {
+ padding-left: var(--bui-space-13);
+ padding-right: var(--bui-space-13);
+ }
+
+ .lg\:bui-px-14 {
+ padding-left: var(--bui-space-14);
+ padding-right: var(--bui-space-14);
+ }
}
- .sm\:bui-px-2 {
- padding-left: var(--bui-space-2);
- padding-right: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-px {
+ padding-left: var(--px-xl);
+ padding-right: var(--px-xl);
+ }
- .sm\:bui-px-3 {
- padding-left: var(--bui-space-3);
- padding-right: var(--bui-space-3);
- }
+ .xl\:bui-px-0\.5 {
+ padding-left: var(--bui-space-0_5);
+ padding-right: var(--bui-space-0_5);
+ }
- .sm\:bui-px-4 {
- padding-left: var(--bui-space-4);
- padding-right: var(--bui-space-4);
- }
+ .xl\:bui-px-1 {
+ padding-left: var(--bui-space-1);
+ padding-right: var(--bui-space-1);
+ }
- .sm\:bui-px-5 {
- padding-left: var(--bui-space-5);
- padding-right: var(--bui-space-5);
- }
+ .xl\:bui-px-1\.5 {
+ padding-left: var(--bui-space-1_5);
+ padding-right: var(--bui-space-1_5);
+ }
- .sm\:bui-px-6 {
- padding-left: var(--bui-space-6);
- padding-right: var(--bui-space-6);
- }
+ .xl\:bui-px-2 {
+ padding-left: var(--bui-space-2);
+ padding-right: var(--bui-space-2);
+ }
- .sm\:bui-px-7 {
- padding-left: var(--bui-space-7);
- padding-right: var(--bui-space-7);
- }
+ .xl\:bui-px-3 {
+ padding-left: var(--bui-space-3);
+ padding-right: var(--bui-space-3);
+ }
- .sm\:bui-px-8 {
- padding-left: var(--bui-space-8);
- padding-right: var(--bui-space-8);
- }
+ .xl\:bui-px-4 {
+ padding-left: var(--bui-space-4);
+ padding-right: var(--bui-space-4);
+ }
- .sm\:bui-px-9 {
- padding-left: var(--bui-space-9);
- padding-right: var(--bui-space-9);
- }
+ .xl\:bui-px-5 {
+ padding-left: var(--bui-space-5);
+ padding-right: var(--bui-space-5);
+ }
- .sm\:bui-px-10 {
- padding-left: var(--bui-space-10);
- padding-right: var(--bui-space-10);
- }
+ .xl\:bui-px-6 {
+ padding-left: var(--bui-space-6);
+ padding-right: var(--bui-space-6);
+ }
- .sm\:bui-px-11 {
- padding-left: var(--bui-space-11);
- padding-right: var(--bui-space-11);
- }
+ .xl\:bui-px-7 {
+ padding-left: var(--bui-space-7);
+ padding-right: var(--bui-space-7);
+ }
- .sm\:bui-px-12 {
- padding-left: var(--bui-space-12);
- padding-right: var(--bui-space-12);
- }
+ .xl\:bui-px-8 {
+ padding-left: var(--bui-space-8);
+ padding-right: var(--bui-space-8);
+ }
- .sm\:bui-px-13 {
- padding-left: var(--bui-space-13);
- padding-right: var(--bui-space-13);
- }
+ .xl\:bui-px-9 {
+ padding-left: var(--bui-space-9);
+ padding-right: var(--bui-space-9);
+ }
- .sm\:bui-px-14 {
- padding-left: var(--bui-space-14);
- padding-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-px {
- padding-left: var(--px-md);
- padding-right: var(--px-md);
- }
-
- .md\:bui-px-0\.5 {
- padding-left: var(--bui-space-0_5);
- padding-right: var(--bui-space-0_5);
- }
-
- .md\:bui-px-1 {
- padding-left: var(--bui-space-1);
- padding-right: var(--bui-space-1);
- }
-
- .md\:bui-px-1\.5 {
- padding-left: var(--bui-space-1_5);
- padding-right: var(--bui-space-1_5);
- }
-
- .md\:bui-px-2 {
- padding-left: var(--bui-space-2);
- padding-right: var(--bui-space-2);
- }
-
- .md\:bui-px-3 {
- padding-left: var(--bui-space-3);
- padding-right: var(--bui-space-3);
- }
-
- .md\:bui-px-4 {
- padding-left: var(--bui-space-4);
- padding-right: var(--bui-space-4);
- }
-
- .md\:bui-px-5 {
- padding-left: var(--bui-space-5);
- padding-right: var(--bui-space-5);
- }
-
- .md\:bui-px-6 {
- padding-left: var(--bui-space-6);
- padding-right: var(--bui-space-6);
- }
-
- .md\:bui-px-7 {
- padding-left: var(--bui-space-7);
- padding-right: var(--bui-space-7);
- }
-
- .md\:bui-px-8 {
- padding-left: var(--bui-space-8);
- padding-right: var(--bui-space-8);
- }
-
- .md\:bui-px-9 {
- padding-left: var(--bui-space-9);
- padding-right: var(--bui-space-9);
- }
-
- .md\:bui-px-10 {
- padding-left: var(--bui-space-10);
- padding-right: var(--bui-space-10);
- }
-
- .md\:bui-px-11 {
- padding-left: var(--bui-space-11);
- padding-right: var(--bui-space-11);
- }
-
- .md\:bui-px-12 {
- padding-left: var(--bui-space-12);
- padding-right: var(--bui-space-12);
- }
-
- .md\:bui-px-13 {
- padding-left: var(--bui-space-13);
- padding-right: var(--bui-space-13);
- }
-
- .md\:bui-px-14 {
- padding-left: var(--bui-space-14);
- padding-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-px {
- padding-left: var(--px-lg);
- padding-right: var(--px-lg);
- }
-
- .lg\:bui-px-0\.5 {
- padding-left: var(--bui-space-0_5);
- padding-right: var(--bui-space-0_5);
- }
-
- .lg\:bui-px-1 {
- padding-left: var(--bui-space-1);
- padding-right: var(--bui-space-1);
- }
-
- .lg\:bui-px-1\.5 {
- padding-left: var(--bui-space-1_5);
- padding-right: var(--bui-space-1_5);
- }
-
- .lg\:bui-px-2 {
- padding-left: var(--bui-space-2);
- padding-right: var(--bui-space-2);
- }
-
- .lg\:bui-px-3 {
- padding-left: var(--bui-space-3);
- padding-right: var(--bui-space-3);
- }
-
- .lg\:bui-px-4 {
- padding-left: var(--bui-space-4);
- padding-right: var(--bui-space-4);
- }
-
- .lg\:bui-px-5 {
- padding-left: var(--bui-space-5);
- padding-right: var(--bui-space-5);
- }
-
- .lg\:bui-px-6 {
- padding-left: var(--bui-space-6);
- padding-right: var(--bui-space-6);
- }
-
- .lg\:bui-px-7 {
- padding-left: var(--bui-space-7);
- padding-right: var(--bui-space-7);
- }
-
- .lg\:bui-px-8 {
- padding-left: var(--bui-space-8);
- padding-right: var(--bui-space-8);
- }
-
- .lg\:bui-px-9 {
- padding-left: var(--bui-space-9);
- padding-right: var(--bui-space-9);
- }
-
- .lg\:bui-px-10 {
- padding-left: var(--bui-space-10);
- padding-right: var(--bui-space-10);
- }
-
- .lg\:bui-px-11 {
- padding-left: var(--bui-space-11);
- padding-right: var(--bui-space-11);
- }
-
- .lg\:bui-px-12 {
- padding-left: var(--bui-space-12);
- padding-right: var(--bui-space-12);
- }
-
- .lg\:bui-px-13 {
- padding-left: var(--bui-space-13);
- padding-right: var(--bui-space-13);
- }
-
- .lg\:bui-px-14 {
- padding-left: var(--bui-space-14);
- padding-right: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-px {
- padding-left: var(--px-xl);
- padding-right: var(--px-xl);
- }
-
- .xl\:bui-px-0\.5 {
- padding-left: var(--bui-space-0_5);
- padding-right: var(--bui-space-0_5);
- }
-
- .xl\:bui-px-1 {
- padding-left: var(--bui-space-1);
- padding-right: var(--bui-space-1);
- }
-
- .xl\:bui-px-1\.5 {
- padding-left: var(--bui-space-1_5);
- padding-right: var(--bui-space-1_5);
- }
-
- .xl\:bui-px-2 {
- padding-left: var(--bui-space-2);
- padding-right: var(--bui-space-2);
- }
-
- .xl\:bui-px-3 {
- padding-left: var(--bui-space-3);
- padding-right: var(--bui-space-3);
- }
-
- .xl\:bui-px-4 {
- padding-left: var(--bui-space-4);
- padding-right: var(--bui-space-4);
- }
-
- .xl\:bui-px-5 {
- padding-left: var(--bui-space-5);
- padding-right: var(--bui-space-5);
- }
-
- .xl\:bui-px-6 {
- padding-left: var(--bui-space-6);
- padding-right: var(--bui-space-6);
- }
-
- .xl\:bui-px-7 {
- padding-left: var(--bui-space-7);
- padding-right: var(--bui-space-7);
- }
-
- .xl\:bui-px-8 {
- padding-left: var(--bui-space-8);
- padding-right: var(--bui-space-8);
- }
-
- .xl\:bui-px-9 {
- padding-left: var(--bui-space-9);
- padding-right: var(--bui-space-9);
- }
-
- .xl\:bui-px-10 {
- padding-left: var(--bui-space-10);
- padding-right: var(--bui-space-10);
- }
-
- .xl\:bui-px-11 {
- padding-left: var(--bui-space-11);
- padding-right: var(--bui-space-11);
- }
-
- .xl\:bui-px-12 {
- padding-left: var(--bui-space-12);
- padding-right: var(--bui-space-12);
- }
-
- .xl\:bui-px-13 {
- padding-left: var(--bui-space-13);
- padding-right: var(--bui-space-13);
- }
-
- .xl\:bui-px-14 {
- padding-left: var(--bui-space-14);
- padding-right: var(--bui-space-14);
+ .xl\:bui-px-10 {
+ padding-left: var(--bui-space-10);
+ padding-right: var(--bui-space-10);
+ }
+
+ .xl\:bui-px-11 {
+ padding-left: var(--bui-space-11);
+ padding-right: var(--bui-space-11);
+ }
+
+ .xl\:bui-px-12 {
+ padding-left: var(--bui-space-12);
+ padding-right: var(--bui-space-12);
+ }
+
+ .xl\:bui-px-13 {
+ padding-left: var(--bui-space-13);
+ padding-right: var(--bui-space-13);
+ }
+
+ .xl\:bui-px-14 {
+ padding-left: var(--bui-space-14);
+ padding-right: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/py.css b/packages/ui/src/css/utilities/py.css
index e3738df00c..aeaef05c6e 100644
--- a/packages/ui/src/css/utilities/py.css
+++ b/packages/ui/src/css/utilities/py.css
@@ -1,524 +1,542 @@
-.bui-py {
- padding-top: var(--py);
- padding-bottom: var(--py);
-}
+/*
+ * 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.
+ */
-.bui-py-0\.5 {
- padding-top: var(--bui-space-0_5);
- padding-bottom: var(--bui-space-0_5);
-}
-
-.bui-py-1 {
- padding-top: var(--bui-space-1);
- padding-bottom: var(--bui-space-1);
-}
-
-.bui-py-1\.5 {
- padding-top: var(--bui-space-1_5);
- padding-bottom: var(--bui-space-1_5);
-}
-
-.bui-py-2 {
- padding-top: var(--bui-space-2);
- padding-bottom: var(--bui-space-2);
-}
-
-.bui-py-3 {
- padding-top: var(--bui-space-3);
- padding-bottom: var(--bui-space-3);
-}
-
-.bui-py-4 {
- padding-top: var(--bui-space-4);
- padding-bottom: var(--bui-space-4);
-}
-
-.bui-py-5 {
- padding-top: var(--bui-space-5);
- padding-bottom: var(--bui-space-5);
-}
-
-.bui-py-6 {
- padding-top: var(--bui-space-6);
- padding-bottom: var(--bui-space-6);
-}
-
-.bui-py-7 {
- padding-top: var(--bui-space-7);
- padding-bottom: var(--bui-space-7);
-}
-
-.bui-py-8 {
- padding-top: var(--bui-space-8);
- padding-bottom: var(--bui-space-8);
-}
-
-.bui-py-9 {
- padding-top: var(--bui-space-9);
- padding-bottom: var(--bui-space-9);
-}
-
-.bui-py-10 {
- padding-top: var(--bui-space-10);
- padding-bottom: var(--bui-space-10);
-}
-
-.bui-py-11 {
- padding-top: var(--bui-space-11);
- padding-bottom: var(--bui-space-11);
-}
-
-.bui-py-12 {
- padding-top: var(--bui-space-12);
- padding-bottom: var(--bui-space-12);
-}
-
-.bui-py-13 {
- padding-top: var(--bui-space-13);
- padding-bottom: var(--bui-space-13);
-}
-
-.bui-py-14 {
- padding-top: var(--bui-space-14);
- padding-bottom: var(--bui-space-14);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-py {
- padding-top: var(--py-xs);
- padding-bottom: var(--py-xs);
+@layer utilities {
+ .bui-py {
+ padding-top: var(--py);
+ padding-bottom: var(--py);
}
- .xs\:bui-py-0\.5 {
+ .bui-py-0\.5 {
padding-top: var(--bui-space-0_5);
padding-bottom: var(--bui-space-0_5);
}
- .xs\:bui-py-1 {
+ .bui-py-1 {
padding-top: var(--bui-space-1);
padding-bottom: var(--bui-space-1);
}
- .xs\:bui-py-1\.5 {
+ .bui-py-1\.5 {
padding-top: var(--bui-space-1_5);
padding-bottom: var(--bui-space-1_5);
}
- .xs\:bui-py-2 {
+ .bui-py-2 {
padding-top: var(--bui-space-2);
padding-bottom: var(--bui-space-2);
}
- .xs\:bui-py-3 {
+ .bui-py-3 {
padding-top: var(--bui-space-3);
padding-bottom: var(--bui-space-3);
}
- .xs\:bui-py-4 {
+ .bui-py-4 {
padding-top: var(--bui-space-4);
padding-bottom: var(--bui-space-4);
}
- .xs\:bui-py-5 {
+ .bui-py-5 {
padding-top: var(--bui-space-5);
padding-bottom: var(--bui-space-5);
}
- .xs\:bui-py-6 {
+ .bui-py-6 {
padding-top: var(--bui-space-6);
padding-bottom: var(--bui-space-6);
}
- .xs\:bui-py-7 {
+ .bui-py-7 {
padding-top: var(--bui-space-7);
padding-bottom: var(--bui-space-7);
}
- .xs\:bui-py-8 {
+ .bui-py-8 {
padding-top: var(--bui-space-8);
padding-bottom: var(--bui-space-8);
}
- .xs\:bui-py-9 {
+ .bui-py-9 {
padding-top: var(--bui-space-9);
padding-bottom: var(--bui-space-9);
}
- .xs\:bui-py-10 {
+ .bui-py-10 {
padding-top: var(--bui-space-10);
padding-bottom: var(--bui-space-10);
}
- .xs\:bui-py-11 {
+ .bui-py-11 {
padding-top: var(--bui-space-11);
padding-bottom: var(--bui-space-11);
}
- .xs\:bui-py-12 {
+ .bui-py-12 {
padding-top: var(--bui-space-12);
padding-bottom: var(--bui-space-12);
}
- .xs\:bui-py-13 {
+ .bui-py-13 {
padding-top: var(--bui-space-13);
padding-bottom: var(--bui-space-13);
}
- .xs\:bui-py-14 {
+ .bui-py-14 {
padding-top: var(--bui-space-14);
padding-bottom: var(--bui-space-14);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-py {
- padding-top: var(--py-sm);
- padding-bottom: var(--py-sm);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-py {
+ padding-top: var(--py-xs);
+ padding-bottom: var(--py-xs);
+ }
+
+ .xs\:bui-py-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ padding-bottom: var(--bui-space-0_5);
+ }
+
+ .xs\:bui-py-1 {
+ padding-top: var(--bui-space-1);
+ padding-bottom: var(--bui-space-1);
+ }
+
+ .xs\:bui-py-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ padding-bottom: var(--bui-space-1_5);
+ }
+
+ .xs\:bui-py-2 {
+ padding-top: var(--bui-space-2);
+ padding-bottom: var(--bui-space-2);
+ }
+
+ .xs\:bui-py-3 {
+ padding-top: var(--bui-space-3);
+ padding-bottom: var(--bui-space-3);
+ }
+
+ .xs\:bui-py-4 {
+ padding-top: var(--bui-space-4);
+ padding-bottom: var(--bui-space-4);
+ }
+
+ .xs\:bui-py-5 {
+ padding-top: var(--bui-space-5);
+ padding-bottom: var(--bui-space-5);
+ }
+
+ .xs\:bui-py-6 {
+ padding-top: var(--bui-space-6);
+ padding-bottom: var(--bui-space-6);
+ }
+
+ .xs\:bui-py-7 {
+ padding-top: var(--bui-space-7);
+ padding-bottom: var(--bui-space-7);
+ }
+
+ .xs\:bui-py-8 {
+ padding-top: var(--bui-space-8);
+ padding-bottom: var(--bui-space-8);
+ }
+
+ .xs\:bui-py-9 {
+ padding-top: var(--bui-space-9);
+ padding-bottom: var(--bui-space-9);
+ }
+
+ .xs\:bui-py-10 {
+ padding-top: var(--bui-space-10);
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .xs\:bui-py-11 {
+ padding-top: var(--bui-space-11);
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .xs\:bui-py-12 {
+ padding-top: var(--bui-space-12);
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .xs\:bui-py-13 {
+ padding-top: var(--bui-space-13);
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .xs\:bui-py-14 {
+ padding-top: var(--bui-space-14);
+ padding-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-py-0\.5 {
- padding-top: var(--bui-space-0_5);
- padding-bottom: var(--bui-space-0_5);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-py {
+ padding-top: var(--py-sm);
+ padding-bottom: var(--py-sm);
+ }
+
+ .sm\:bui-py-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ padding-bottom: var(--bui-space-0_5);
+ }
+
+ .sm\:bui-py-1 {
+ padding-top: var(--bui-space-1);
+ padding-bottom: var(--bui-space-1);
+ }
+
+ .sm\:bui-py-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ padding-bottom: var(--bui-space-1_5);
+ }
+
+ .sm\:bui-py-2 {
+ padding-top: var(--bui-space-2);
+ padding-bottom: var(--bui-space-2);
+ }
+
+ .sm\:bui-py-3 {
+ padding-top: var(--bui-space-3);
+ padding-bottom: var(--bui-space-3);
+ }
+
+ .sm\:bui-py-4 {
+ padding-top: var(--bui-space-4);
+ padding-bottom: var(--bui-space-4);
+ }
+
+ .sm\:bui-py-5 {
+ padding-top: var(--bui-space-5);
+ padding-bottom: var(--bui-space-5);
+ }
+
+ .sm\:bui-py-6 {
+ padding-top: var(--bui-space-6);
+ padding-bottom: var(--bui-space-6);
+ }
+
+ .sm\:bui-py-7 {
+ padding-top: var(--bui-space-7);
+ padding-bottom: var(--bui-space-7);
+ }
+
+ .sm\:bui-py-8 {
+ padding-top: var(--bui-space-8);
+ padding-bottom: var(--bui-space-8);
+ }
+
+ .sm\:bui-py-9 {
+ padding-top: var(--bui-space-9);
+ padding-bottom: var(--bui-space-9);
+ }
+
+ .sm\:bui-py-10 {
+ padding-top: var(--bui-space-10);
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .sm\:bui-py-11 {
+ padding-top: var(--bui-space-11);
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .sm\:bui-py-12 {
+ padding-top: var(--bui-space-12);
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .sm\:bui-py-13 {
+ padding-top: var(--bui-space-13);
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .sm\:bui-py-14 {
+ padding-top: var(--bui-space-14);
+ padding-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-py-1 {
- padding-top: var(--bui-space-1);
- padding-bottom: var(--bui-space-1);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-py {
+ padding-top: var(--py-md);
+ padding-bottom: var(--py-md);
+ }
+
+ .md\:bui-py-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ padding-bottom: var(--bui-space-0_5);
+ }
+
+ .md\:bui-py-1 {
+ padding-top: var(--bui-space-1);
+ padding-bottom: var(--bui-space-1);
+ }
+
+ .md\:bui-py-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ padding-bottom: var(--bui-space-1_5);
+ }
+
+ .md\:bui-py-2 {
+ padding-top: var(--bui-space-2);
+ padding-bottom: var(--bui-space-2);
+ }
+
+ .md\:bui-py-3 {
+ padding-top: var(--bui-space-3);
+ padding-bottom: var(--bui-space-3);
+ }
+
+ .md\:bui-py-4 {
+ padding-top: var(--bui-space-4);
+ padding-bottom: var(--bui-space-4);
+ }
+
+ .md\:bui-py-5 {
+ padding-top: var(--bui-space-5);
+ padding-bottom: var(--bui-space-5);
+ }
+
+ .md\:bui-py-6 {
+ padding-top: var(--bui-space-6);
+ padding-bottom: var(--bui-space-6);
+ }
+
+ .md\:bui-py-7 {
+ padding-top: var(--bui-space-7);
+ padding-bottom: var(--bui-space-7);
+ }
+
+ .md\:bui-py-8 {
+ padding-top: var(--bui-space-8);
+ padding-bottom: var(--bui-space-8);
+ }
+
+ .md\:bui-py-9 {
+ padding-top: var(--bui-space-9);
+ padding-bottom: var(--bui-space-9);
+ }
+
+ .md\:bui-py-10 {
+ padding-top: var(--bui-space-10);
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .md\:bui-py-11 {
+ padding-top: var(--bui-space-11);
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .md\:bui-py-12 {
+ padding-top: var(--bui-space-12);
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .md\:bui-py-13 {
+ padding-top: var(--bui-space-13);
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .md\:bui-py-14 {
+ padding-top: var(--bui-space-14);
+ padding-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-py-1\.5 {
- padding-top: var(--bui-space-1_5);
- padding-bottom: var(--bui-space-1_5);
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-py {
+ padding-top: var(--py-lg);
+ padding-bottom: var(--py-lg);
+ }
+
+ .lg\:bui-py-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ padding-bottom: var(--bui-space-0_5);
+ }
+
+ .lg\:bui-py-1 {
+ padding-top: var(--bui-space-1);
+ padding-bottom: var(--bui-space-1);
+ }
+
+ .lg\:bui-py-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ padding-bottom: var(--bui-space-1_5);
+ }
+
+ .lg\:bui-py-2 {
+ padding-top: var(--bui-space-2);
+ padding-bottom: var(--bui-space-2);
+ }
+
+ .lg\:bui-py-3 {
+ padding-top: var(--bui-space-3);
+ padding-bottom: var(--bui-space-3);
+ }
+
+ .lg\:bui-py-4 {
+ padding-top: var(--bui-space-4);
+ padding-bottom: var(--bui-space-4);
+ }
+
+ .lg\:bui-py-5 {
+ padding-top: var(--bui-space-5);
+ padding-bottom: var(--bui-space-5);
+ }
+
+ .lg\:bui-py-6 {
+ padding-top: var(--bui-space-6);
+ padding-bottom: var(--bui-space-6);
+ }
+
+ .lg\:bui-py-7 {
+ padding-top: var(--bui-space-7);
+ padding-bottom: var(--bui-space-7);
+ }
+
+ .lg\:bui-py-8 {
+ padding-top: var(--bui-space-8);
+ padding-bottom: var(--bui-space-8);
+ }
+
+ .lg\:bui-py-9 {
+ padding-top: var(--bui-space-9);
+ padding-bottom: var(--bui-space-9);
+ }
+
+ .lg\:bui-py-10 {
+ padding-top: var(--bui-space-10);
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .lg\:bui-py-11 {
+ padding-top: var(--bui-space-11);
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .lg\:bui-py-12 {
+ padding-top: var(--bui-space-12);
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .lg\:bui-py-13 {
+ padding-top: var(--bui-space-13);
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .lg\:bui-py-14 {
+ padding-top: var(--bui-space-14);
+ padding-bottom: var(--bui-space-14);
+ }
}
- .sm\:bui-py-2 {
- padding-top: var(--bui-space-2);
- padding-bottom: var(--bui-space-2);
- }
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-py {
+ padding-top: var(--py-xl);
+ padding-bottom: var(--py-xl);
+ }
- .sm\:bui-py-3 {
- padding-top: var(--bui-space-3);
- padding-bottom: var(--bui-space-3);
- }
+ .xl\:bui-py-0\.5 {
+ padding-top: var(--bui-space-0_5);
+ padding-bottom: var(--bui-space-0_5);
+ }
- .sm\:bui-py-4 {
- padding-top: var(--bui-space-4);
- padding-bottom: var(--bui-space-4);
- }
+ .xl\:bui-py-1 {
+ padding-top: var(--bui-space-1);
+ padding-bottom: var(--bui-space-1);
+ }
- .sm\:bui-py-5 {
- padding-top: var(--bui-space-5);
- padding-bottom: var(--bui-space-5);
- }
+ .xl\:bui-py-1\.5 {
+ padding-top: var(--bui-space-1_5);
+ padding-bottom: var(--bui-space-1_5);
+ }
- .sm\:bui-py-6 {
- padding-top: var(--bui-space-6);
- padding-bottom: var(--bui-space-6);
- }
+ .xl\:bui-py-2 {
+ padding-top: var(--bui-space-2);
+ padding-bottom: var(--bui-space-2);
+ }
- .sm\:bui-py-7 {
- padding-top: var(--bui-space-7);
- padding-bottom: var(--bui-space-7);
- }
+ .xl\:bui-py-3 {
+ padding-top: var(--bui-space-3);
+ padding-bottom: var(--bui-space-3);
+ }
- .sm\:bui-py-8 {
- padding-top: var(--bui-space-8);
- padding-bottom: var(--bui-space-8);
- }
+ .xl\:bui-py-4 {
+ padding-top: var(--bui-space-4);
+ padding-bottom: var(--bui-space-4);
+ }
- .sm\:bui-py-9 {
- padding-top: var(--bui-space-9);
- padding-bottom: var(--bui-space-9);
- }
+ .xl\:bui-py-5 {
+ padding-top: var(--bui-space-5);
+ padding-bottom: var(--bui-space-5);
+ }
- .sm\:bui-py-10 {
- padding-top: var(--bui-space-10);
- padding-bottom: var(--bui-space-10);
- }
+ .xl\:bui-py-6 {
+ padding-top: var(--bui-space-6);
+ padding-bottom: var(--bui-space-6);
+ }
- .sm\:bui-py-11 {
- padding-top: var(--bui-space-11);
- padding-bottom: var(--bui-space-11);
- }
+ .xl\:bui-py-7 {
+ padding-top: var(--bui-space-7);
+ padding-bottom: var(--bui-space-7);
+ }
- .sm\:bui-py-12 {
- padding-top: var(--bui-space-12);
- padding-bottom: var(--bui-space-12);
- }
+ .xl\:bui-py-8 {
+ padding-top: var(--bui-space-8);
+ padding-bottom: var(--bui-space-8);
+ }
- .sm\:bui-py-13 {
- padding-top: var(--bui-space-13);
- padding-bottom: var(--bui-space-13);
- }
+ .xl\:bui-py-9 {
+ padding-top: var(--bui-space-9);
+ padding-bottom: var(--bui-space-9);
+ }
- .sm\:bui-py-14 {
- padding-top: var(--bui-space-14);
- padding-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-py {
- padding-top: var(--py-md);
- padding-bottom: var(--py-md);
- }
-
- .md\:bui-py-0\.5 {
- padding-top: var(--bui-space-0_5);
- padding-bottom: var(--bui-space-0_5);
- }
-
- .md\:bui-py-1 {
- padding-top: var(--bui-space-1);
- padding-bottom: var(--bui-space-1);
- }
-
- .md\:bui-py-1\.5 {
- padding-top: var(--bui-space-1_5);
- padding-bottom: var(--bui-space-1_5);
- }
-
- .md\:bui-py-2 {
- padding-top: var(--bui-space-2);
- padding-bottom: var(--bui-space-2);
- }
-
- .md\:bui-py-3 {
- padding-top: var(--bui-space-3);
- padding-bottom: var(--bui-space-3);
- }
-
- .md\:bui-py-4 {
- padding-top: var(--bui-space-4);
- padding-bottom: var(--bui-space-4);
- }
-
- .md\:bui-py-5 {
- padding-top: var(--bui-space-5);
- padding-bottom: var(--bui-space-5);
- }
-
- .md\:bui-py-6 {
- padding-top: var(--bui-space-6);
- padding-bottom: var(--bui-space-6);
- }
-
- .md\:bui-py-7 {
- padding-top: var(--bui-space-7);
- padding-bottom: var(--bui-space-7);
- }
-
- .md\:bui-py-8 {
- padding-top: var(--bui-space-8);
- padding-bottom: var(--bui-space-8);
- }
-
- .md\:bui-py-9 {
- padding-top: var(--bui-space-9);
- padding-bottom: var(--bui-space-9);
- }
-
- .md\:bui-py-10 {
- padding-top: var(--bui-space-10);
- padding-bottom: var(--bui-space-10);
- }
-
- .md\:bui-py-11 {
- padding-top: var(--bui-space-11);
- padding-bottom: var(--bui-space-11);
- }
-
- .md\:bui-py-12 {
- padding-top: var(--bui-space-12);
- padding-bottom: var(--bui-space-12);
- }
-
- .md\:bui-py-13 {
- padding-top: var(--bui-space-13);
- padding-bottom: var(--bui-space-13);
- }
-
- .md\:bui-py-14 {
- padding-top: var(--bui-space-14);
- padding-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-py {
- padding-top: var(--py-lg);
- padding-bottom: var(--py-lg);
- }
-
- .lg\:bui-py-0\.5 {
- padding-top: var(--bui-space-0_5);
- padding-bottom: var(--bui-space-0_5);
- }
-
- .lg\:bui-py-1 {
- padding-top: var(--bui-space-1);
- padding-bottom: var(--bui-space-1);
- }
-
- .lg\:bui-py-1\.5 {
- padding-top: var(--bui-space-1_5);
- padding-bottom: var(--bui-space-1_5);
- }
-
- .lg\:bui-py-2 {
- padding-top: var(--bui-space-2);
- padding-bottom: var(--bui-space-2);
- }
-
- .lg\:bui-py-3 {
- padding-top: var(--bui-space-3);
- padding-bottom: var(--bui-space-3);
- }
-
- .lg\:bui-py-4 {
- padding-top: var(--bui-space-4);
- padding-bottom: var(--bui-space-4);
- }
-
- .lg\:bui-py-5 {
- padding-top: var(--bui-space-5);
- padding-bottom: var(--bui-space-5);
- }
-
- .lg\:bui-py-6 {
- padding-top: var(--bui-space-6);
- padding-bottom: var(--bui-space-6);
- }
-
- .lg\:bui-py-7 {
- padding-top: var(--bui-space-7);
- padding-bottom: var(--bui-space-7);
- }
-
- .lg\:bui-py-8 {
- padding-top: var(--bui-space-8);
- padding-bottom: var(--bui-space-8);
- }
-
- .lg\:bui-py-9 {
- padding-top: var(--bui-space-9);
- padding-bottom: var(--bui-space-9);
- }
-
- .lg\:bui-py-10 {
- padding-top: var(--bui-space-10);
- padding-bottom: var(--bui-space-10);
- }
-
- .lg\:bui-py-11 {
- padding-top: var(--bui-space-11);
- padding-bottom: var(--bui-space-11);
- }
-
- .lg\:bui-py-12 {
- padding-top: var(--bui-space-12);
- padding-bottom: var(--bui-space-12);
- }
-
- .lg\:bui-py-13 {
- padding-top: var(--bui-space-13);
- padding-bottom: var(--bui-space-13);
- }
-
- .lg\:bui-py-14 {
- padding-top: var(--bui-space-14);
- padding-bottom: var(--bui-space-14);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-py {
- padding-top: var(--py-xl);
- padding-bottom: var(--py-xl);
- }
-
- .xl\:bui-py-0\.5 {
- padding-top: var(--bui-space-0_5);
- padding-bottom: var(--bui-space-0_5);
- }
-
- .xl\:bui-py-1 {
- padding-top: var(--bui-space-1);
- padding-bottom: var(--bui-space-1);
- }
-
- .xl\:bui-py-1\.5 {
- padding-top: var(--bui-space-1_5);
- padding-bottom: var(--bui-space-1_5);
- }
-
- .xl\:bui-py-2 {
- padding-top: var(--bui-space-2);
- padding-bottom: var(--bui-space-2);
- }
-
- .xl\:bui-py-3 {
- padding-top: var(--bui-space-3);
- padding-bottom: var(--bui-space-3);
- }
-
- .xl\:bui-py-4 {
- padding-top: var(--bui-space-4);
- padding-bottom: var(--bui-space-4);
- }
-
- .xl\:bui-py-5 {
- padding-top: var(--bui-space-5);
- padding-bottom: var(--bui-space-5);
- }
-
- .xl\:bui-py-6 {
- padding-top: var(--bui-space-6);
- padding-bottom: var(--bui-space-6);
- }
-
- .xl\:bui-py-7 {
- padding-top: var(--bui-space-7);
- padding-bottom: var(--bui-space-7);
- }
-
- .xl\:bui-py-8 {
- padding-top: var(--bui-space-8);
- padding-bottom: var(--bui-space-8);
- }
-
- .xl\:bui-py-9 {
- padding-top: var(--bui-space-9);
- padding-bottom: var(--bui-space-9);
- }
-
- .xl\:bui-py-10 {
- padding-top: var(--bui-space-10);
- padding-bottom: var(--bui-space-10);
- }
-
- .xl\:bui-py-11 {
- padding-top: var(--bui-space-11);
- padding-bottom: var(--bui-space-11);
- }
-
- .xl\:bui-py-12 {
- padding-top: var(--bui-space-12);
- padding-bottom: var(--bui-space-12);
- }
-
- .xl\:bui-py-13 {
- padding-top: var(--bui-space-13);
- padding-bottom: var(--bui-space-13);
- }
-
- .xl\:bui-py-14 {
- padding-top: var(--bui-space-14);
- padding-bottom: var(--bui-space-14);
+ .xl\:bui-py-10 {
+ padding-top: var(--bui-space-10);
+ padding-bottom: var(--bui-space-10);
+ }
+
+ .xl\:bui-py-11 {
+ padding-top: var(--bui-space-11);
+ padding-bottom: var(--bui-space-11);
+ }
+
+ .xl\:bui-py-12 {
+ padding-top: var(--bui-space-12);
+ padding-bottom: var(--bui-space-12);
+ }
+
+ .xl\:bui-py-13 {
+ padding-top: var(--bui-space-13);
+ padding-bottom: var(--bui-space-13);
+ }
+
+ .xl\:bui-py-14 {
+ padding-top: var(--bui-space-14);
+ padding-bottom: var(--bui-space-14);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/sm.css b/packages/ui/src/css/utilities/sm.css
index 61baaa6b0d..a9c8ea8ab5 100644
--- a/packages/ui/src/css/utilities/sm.css
+++ b/packages/ui/src/css/utilities/sm.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
diff --git a/packages/ui/src/css/utilities/width.css b/packages/ui/src/css/utilities/width.css
index 6dad08814a..5a9ff0a899 100644
--- a/packages/ui/src/css/utilities/width.css
+++ b/packages/ui/src/css/utilities/width.css
@@ -1,86 +1,104 @@
-.bui-w {
- width: var(--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.
+ */
-.bui-min-w {
- min-width: var(--min-width);
-}
-
-.bui-max-w {
- max-width: var(--max-width);
-}
-
-/* Breakpoint xs */
-@media (min-width: 640px) {
- .xs\:bui-w {
+@layer utilities {
+ .bui-w {
width: var(--width);
}
- .xs\:bui-min-w {
+ .bui-min-w {
min-width: var(--min-width);
}
- .xs\:bui-max-w {
+ .bui-max-w {
max-width: var(--max-width);
}
-}
-/* Breakpoint sm */
-@media (min-width: 768px) {
- .sm\:bui-w {
- width: var(--width);
+ /* Breakpoint xs */
+ @media (min-width: 640px) {
+ .xs\:bui-w {
+ width: var(--width);
+ }
+
+ .xs\:bui-min-w {
+ min-width: var(--min-width);
+ }
+
+ .xs\:bui-max-w {
+ max-width: var(--max-width);
+ }
}
- .sm\:bui-min-w {
- min-width: var(--min-width);
+ /* Breakpoint sm */
+ @media (min-width: 768px) {
+ .sm\:bui-w {
+ width: var(--width);
+ }
+
+ .sm\:bui-min-w {
+ min-width: var(--min-width);
+ }
+
+ .sm\:bui-max-w {
+ max-width: var(--max-width);
+ }
}
- .sm\:bui-max-w {
- max-width: var(--max-width);
- }
-}
-
-/* Breakpoint md */
-@media (min-width: 1024px) {
- .md\:bui-w {
- width: var(--width);
- }
-
- .md\:bui-min-w {
- min-width: var(--min-width);
- }
-
- .md\:bui-max-w {
- max-width: var(--max-width);
- }
-}
-
-/* Breakpoint lg */
-@media (min-width: 1280px) {
- .lg\:bui-w {
- width: var(--width);
- }
-
- .lg\:bui-min-w {
- min-width: var(--min-width);
- }
-
- .lg\:bui-max-w {
- max-width: var(--max-width);
- }
-}
-
-/* Breakpoint xl */
-@media (min-width: 1536px) {
- .xl\:bui-w {
- width: var(--width);
- }
-
- .xl\:bui-min-w {
- min-width: var(--min-width);
- }
-
- .xl\:bui-max-w {
- max-width: var(--max-width);
+ /* Breakpoint md */
+ @media (min-width: 1024px) {
+ .md\:bui-w {
+ width: var(--width);
+ }
+
+ .md\:bui-min-w {
+ min-width: var(--min-width);
+ }
+
+ .md\:bui-max-w {
+ max-width: var(--max-width);
+ }
+ }
+
+ /* Breakpoint lg */
+ @media (min-width: 1280px) {
+ .lg\:bui-w {
+ width: var(--width);
+ }
+
+ .lg\:bui-min-w {
+ min-width: var(--min-width);
+ }
+
+ .lg\:bui-max-w {
+ max-width: var(--max-width);
+ }
+ }
+
+ /* Breakpoint xl */
+ @media (min-width: 1536px) {
+ .xl\:bui-w {
+ width: var(--width);
+ }
+
+ .xl\:bui-min-w {
+ min-width: var(--min-width);
+ }
+
+ .xl\:bui-max-w {
+ max-width: var(--max-width);
+ }
}
}
diff --git a/packages/ui/src/css/utilities/xs.css b/packages/ui/src/css/utilities/xs.css
index 27adb7c7e4..2907c7d468 100644
--- a/packages/ui/src/css/utilities/xs.css
+++ b/packages/ui/src/css/utilities/xs.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2024 The Backstage Authors
+ * 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.
diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts
index e21632016e..92991db990 100644
--- a/packages/ui/src/utils/componentDefinitions.ts
+++ b/packages/ui/src/utils/componentDefinitions.ts
@@ -175,6 +175,7 @@ export const componentDefinitions = {
item: 'bui-MenuItem',
itemListBox: 'bui-MenuItemListBox',
itemListBoxCheck: 'bui-MenuItemListBoxCheck',
+ itemWrapper: 'bui-MenuItemWrapper',
itemContent: 'bui-MenuItemContent',
itemArrow: 'bui-MenuItemArrow',
separator: 'bui-MenuSeparator',
@@ -184,6 +185,12 @@ export const componentDefinitions = {
emptyState: 'bui-MenuEmptyState',
},
},
+ PasswordField: {
+ classNames: {
+ root: 'bui-PasswordField',
+ inputVisibility: 'bui-InputVisibility',
+ },
+ },
Popover: {
classNames: {
root: 'bui-Popover',
@@ -296,6 +303,7 @@ export const componentDefinitions = {
inputWrapper: 'bui-InputWrapper',
input: 'bui-Input',
inputIcon: 'bui-InputIcon',
+ inputAction: 'bui-InputAction',
},
dataAttributes: {
invalid: [true, false] as const,
diff --git a/packages/ui/src/utils/extractProps.ts b/packages/ui/src/utils/extractProps.ts
index 1668117909..3914072ff4 100644
--- a/packages/ui/src/utils/extractProps.ts
+++ b/packages/ui/src/utils/extractProps.ts
@@ -86,16 +86,25 @@ export function extractProps(
}
// Ensure keys from props that are defined in propDefs are removed
- const cleanedProps = Object.keys(props).reduce((acc, key) => {
- if (!propDefs.hasOwnProperty(key)) {
- acc[key] = props[key];
- }
- return acc;
- }, {} as { [key: string]: any });
+ const { cleanedProps, dataProps } = Object.keys(props).reduce(
+ (acc, key) => {
+ if (key.startsWith('data-')) {
+ acc.dataProps[key] = props[key];
+ }
+ if (!propDefs.hasOwnProperty(key)) {
+ acc.cleanedProps[key] = props[key];
+ }
+ return acc;
+ },
+ { dataProps: {}, cleanedProps: {} } as {
+ dataProps: { [key: string]: any };
+ cleanedProps: { [key: string]: any };
+ },
+ );
const newClassNames = className
.filter(name => name && name.trim() !== '')
.join(' ');
- return { ...cleanedProps, className: newClassNames, style };
+ return { ...cleanedProps, className: newClassNames, style, dataProps };
}
diff --git a/plugins/app-visualizer/CHANGELOG.md b/plugins/app-visualizer/CHANGELOG.md
index ea0b147aff..cdd5db4986 100644
--- a/plugins/app-visualizer/CHANGELOG.md
+++ b/plugins/app-visualizer/CHANGELOG.md
@@ -1,5 +1,14 @@
# @backstage/plugin-app-visualizer
+## 0.1.24-next.2
+
+### Patch Changes
+
+- 4406144: Ensure that the text rendering has react keys for all elements
+- Updated dependencies
+ - @backstage/core-components@0.18.2-next.3
+ - @backstage/frontend-plugin-api@0.12.1-next.2
+
## 0.1.24-next.1
### Patch Changes
diff --git a/plugins/app-visualizer/package.json b/plugins/app-visualizer/package.json
index fa30acefe2..f55c085ed0 100644
--- a/plugins/app-visualizer/package.json
+++ b/plugins/app-visualizer/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-app-visualizer",
- "version": "0.1.24-next.1",
+ "version": "0.1.24-next.2",
"description": "Visualizes the Backstage app structure",
"backstage": {
"role": "frontend-plugin",
diff --git a/plugins/catalog-backend-module-aws/CHANGELOG.md b/plugins/catalog-backend-module-aws/CHANGELOG.md
index a77ccf785c..2ee7746b87 100644
--- a/plugins/catalog-backend-module-aws/CHANGELOG.md
+++ b/plugins/catalog-backend-module-aws/CHANGELOG.md
@@ -1,5 +1,11 @@
# @backstage/plugin-catalog-backend-module-aws
+## 0.4.16-next.2
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+
## 0.4.16-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-aws/package.json b/plugins/catalog-backend-module-aws/package.json
index 39b199d03d..eef358548a 100644
--- a/plugins/catalog-backend-module-aws/package.json
+++ b/plugins/catalog-backend-module-aws/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-aws",
- "version": "0.4.16-next.1",
+ "version": "0.4.16-next.2",
"description": "A Backstage catalog backend module that helps integrate towards AWS",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-backend-module-azure/CHANGELOG.md b/plugins/catalog-backend-module-azure/CHANGELOG.md
index 8f04f5cae5..d170204031 100644
--- a/plugins/catalog-backend-module-azure/CHANGELOG.md
+++ b/plugins/catalog-backend-module-azure/CHANGELOG.md
@@ -1,5 +1,11 @@
# @backstage/plugin-catalog-backend-module-azure
+## 0.3.10-next.2
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+
## 0.3.10-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-azure/package.json b/plugins/catalog-backend-module-azure/package.json
index a390224e50..2b2ef5fe35 100644
--- a/plugins/catalog-backend-module-azure/package.json
+++ b/plugins/catalog-backend-module-azure/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-azure",
- "version": "0.3.10-next.1",
+ "version": "0.3.10-next.2",
"description": "A Backstage catalog backend module that helps integrate towards Azure",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-backend-module-bitbucket-cloud/CHANGELOG.md b/plugins/catalog-backend-module-bitbucket-cloud/CHANGELOG.md
index bce5bc231b..f9ac3b6966 100644
--- a/plugins/catalog-backend-module-bitbucket-cloud/CHANGELOG.md
+++ b/plugins/catalog-backend-module-bitbucket-cloud/CHANGELOG.md
@@ -1,5 +1,11 @@
# @backstage/plugin-catalog-backend-module-bitbucket-cloud
+## 0.5.4-next.2
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+
## 0.5.4-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-bitbucket-cloud/package.json b/plugins/catalog-backend-module-bitbucket-cloud/package.json
index e10df5a382..e77dfa9ee0 100644
--- a/plugins/catalog-backend-module-bitbucket-cloud/package.json
+++ b/plugins/catalog-backend-module-bitbucket-cloud/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-bitbucket-cloud",
- "version": "0.5.4-next.1",
+ "version": "0.5.4-next.2",
"description": "A Backstage catalog backend module that helps integrate towards Bitbucket Cloud",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-backend-module-bitbucket-server/CHANGELOG.md b/plugins/catalog-backend-module-bitbucket-server/CHANGELOG.md
index cb7767ce16..fe2cae0334 100644
--- a/plugins/catalog-backend-module-bitbucket-server/CHANGELOG.md
+++ b/plugins/catalog-backend-module-bitbucket-server/CHANGELOG.md
@@ -1,5 +1,11 @@
# @backstage/plugin-catalog-backend-module-bitbucket-server
+## 0.5.4-next.2
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+
## 0.5.4-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-bitbucket-server/package.json b/plugins/catalog-backend-module-bitbucket-server/package.json
index 21d6ece100..c9021d42c1 100644
--- a/plugins/catalog-backend-module-bitbucket-server/package.json
+++ b/plugins/catalog-backend-module-bitbucket-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-bitbucket-server",
- "version": "0.5.4-next.1",
+ "version": "0.5.4-next.2",
"backstage": {
"role": "backend-plugin-module",
"pluginId": "catalog",
diff --git a/plugins/catalog-backend-module-gerrit/CHANGELOG.md b/plugins/catalog-backend-module-gerrit/CHANGELOG.md
index c1f9fe3867..0235f98580 100644
--- a/plugins/catalog-backend-module-gerrit/CHANGELOG.md
+++ b/plugins/catalog-backend-module-gerrit/CHANGELOG.md
@@ -1,5 +1,11 @@
# @backstage/plugin-catalog-backend-module-gerrit
+## 0.3.7-next.2
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+
## 0.3.7-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-gerrit/package.json b/plugins/catalog-backend-module-gerrit/package.json
index 7427ed0906..e345190ece 100644
--- a/plugins/catalog-backend-module-gerrit/package.json
+++ b/plugins/catalog-backend-module-gerrit/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-gerrit",
- "version": "0.3.7-next.1",
+ "version": "0.3.7-next.2",
"backstage": {
"role": "backend-plugin-module",
"pluginId": "catalog",
diff --git a/plugins/catalog-backend-module-github-org/CHANGELOG.md b/plugins/catalog-backend-module-github-org/CHANGELOG.md
index df63d6fb8f..61b5aa19dd 100644
--- a/plugins/catalog-backend-module-github-org/CHANGELOG.md
+++ b/plugins/catalog-backend-module-github-org/CHANGELOG.md
@@ -1,5 +1,13 @@
# @backstage/plugin-catalog-backend-module-github-org
+## 0.3.15-next.2
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+- Updated dependencies
+ - @backstage/plugin-catalog-backend-module-github@0.11.1-next.2
+
## 0.3.15-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-github-org/package.json b/plugins/catalog-backend-module-github-org/package.json
index 0329bebbf6..93bc6517e0 100644
--- a/plugins/catalog-backend-module-github-org/package.json
+++ b/plugins/catalog-backend-module-github-org/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-github-org",
- "version": "0.3.15-next.1",
+ "version": "0.3.15-next.2",
"description": "The github-org backend module for the catalog plugin.",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-backend-module-github/CHANGELOG.md b/plugins/catalog-backend-module-github/CHANGELOG.md
index 2921c3960d..da546ffe8e 100644
--- a/plugins/catalog-backend-module-github/CHANGELOG.md
+++ b/plugins/catalog-backend-module-github/CHANGELOG.md
@@ -1,5 +1,11 @@
# @backstage/plugin-catalog-backend-module-github
+## 0.11.1-next.2
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+
## 0.11.1-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-github/package.json b/plugins/catalog-backend-module-github/package.json
index c91bb5e96a..32c8a14614 100644
--- a/plugins/catalog-backend-module-github/package.json
+++ b/plugins/catalog-backend-module-github/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-github",
- "version": "0.11.1-next.1",
+ "version": "0.11.1-next.2",
"description": "A Backstage catalog backend module that helps integrate towards GitHub",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-backend-module-gitlab-org/CHANGELOG.md b/plugins/catalog-backend-module-gitlab-org/CHANGELOG.md
index b162bf1103..b6e85af5fd 100644
--- a/plugins/catalog-backend-module-gitlab-org/CHANGELOG.md
+++ b/plugins/catalog-backend-module-gitlab-org/CHANGELOG.md
@@ -1,5 +1,13 @@
# @backstage/plugin-catalog-backend-module-gitlab-org
+## 0.2.14-next.2
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+- Updated dependencies
+ - @backstage/plugin-catalog-backend-module-gitlab@0.7.4-next.2
+
## 0.2.14-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-gitlab-org/package.json b/plugins/catalog-backend-module-gitlab-org/package.json
index 80c1ba769c..9be7de1635 100644
--- a/plugins/catalog-backend-module-gitlab-org/package.json
+++ b/plugins/catalog-backend-module-gitlab-org/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-gitlab-org",
- "version": "0.2.14-next.1",
+ "version": "0.2.14-next.2",
"description": "The gitlab-org backend module for the catalog plugin.",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-backend-module-gitlab/CHANGELOG.md b/plugins/catalog-backend-module-gitlab/CHANGELOG.md
index 18a1915ee6..91dbf57f9e 100644
--- a/plugins/catalog-backend-module-gitlab/CHANGELOG.md
+++ b/plugins/catalog-backend-module-gitlab/CHANGELOG.md
@@ -1,5 +1,12 @@
# @backstage/plugin-catalog-backend-module-gitlab
+## 0.7.4-next.2
+
+### Patch Changes
+
+- 0443119: Fixed an issue in `GitlabDiscoveryEntityProvider` where entity fetching could fail for projects with special characters or that had been renamed or moved.
+- 99fcf98: Removed unused dependencies
+
## 0.7.4-next.1
### Patch Changes
diff --git a/plugins/catalog-backend-module-gitlab/package.json b/plugins/catalog-backend-module-gitlab/package.json
index 0c20cdd30a..1de716499e 100644
--- a/plugins/catalog-backend-module-gitlab/package.json
+++ b/plugins/catalog-backend-module-gitlab/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-gitlab",
- "version": "0.7.4-next.1",
+ "version": "0.7.4-next.2",
"description": "A Backstage catalog backend module that helps integrate towards GitLab",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-backend-module-msgraph/CHANGELOG.md b/plugins/catalog-backend-module-msgraph/CHANGELOG.md
index 3db73151fe..9bd2ff31d0 100644
--- a/plugins/catalog-backend-module-msgraph/CHANGELOG.md
+++ b/plugins/catalog-backend-module-msgraph/CHANGELOG.md
@@ -1,5 +1,11 @@
# @backstage/plugin-catalog-backend-module-msgraph
+## 0.8.1-next.1
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+
## 0.8.1-next.0
### Patch Changes
diff --git a/plugins/catalog-backend-module-msgraph/package.json b/plugins/catalog-backend-module-msgraph/package.json
index 35d38e12d4..bcf0ae17a3 100644
--- a/plugins/catalog-backend-module-msgraph/package.json
+++ b/plugins/catalog-backend-module-msgraph/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-msgraph",
- "version": "0.8.1-next.0",
+ "version": "0.8.1-next.1",
"description": "A Backstage catalog backend module that helps integrate towards Microsoft Graph",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-backend-module-puppetdb/CHANGELOG.md b/plugins/catalog-backend-module-puppetdb/CHANGELOG.md
index cdbee9bfb8..7645b8d390 100644
--- a/plugins/catalog-backend-module-puppetdb/CHANGELOG.md
+++ b/plugins/catalog-backend-module-puppetdb/CHANGELOG.md
@@ -1,5 +1,11 @@
# @backstage/plugin-catalog-backend-module-puppetdb
+## 0.2.15-next.1
+
+### Patch Changes
+
+- 99fcf98: Removed unused dependencies
+
## 0.2.15-next.0
### Patch Changes
diff --git a/plugins/catalog-backend-module-puppetdb/package.json b/plugins/catalog-backend-module-puppetdb/package.json
index d76b965b90..4a01305a1a 100644
--- a/plugins/catalog-backend-module-puppetdb/package.json
+++ b/plugins/catalog-backend-module-puppetdb/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-catalog-backend-module-puppetdb",
- "version": "0.2.15-next.0",
+ "version": "0.2.15-next.1",
"description": "A Backstage catalog backend module that helps integrate towards PuppetDB",
"backstage": {
"role": "backend-plugin-module",
diff --git a/plugins/catalog-graph/CHANGELOG.md b/plugins/catalog-graph/CHANGELOG.md
index b492c41a37..41c3c1c519 100644
--- a/plugins/catalog-graph/CHANGELOG.md
+++ b/plugins/catalog-graph/CHANGELOG.md
@@ -1,5 +1,14 @@
# @backstage/plugin-catalog-graph
+## 0.5.2-next.2
+
+### Patch Changes
+
+- 431130c: Added `renderEdge` prop to `;
+ query(
+ _query: SearchQuery,
+ _options?: {
+ signal?: AbortSignal;
+ },
+ ): Promise;
}
// @public (undocumented)
export interface SearchApi {
// (undocumented)
- query(query: SearchQuery): Promise;
+ query(
+ query: SearchQuery,
+ options?: {
+ signal?: AbortSignal;
+ },
+ ): Promise;
}
// @public (undocumented)
diff --git a/plugins/search-react/src/api.ts b/plugins/search-react/src/api.ts
index 24a247a641..61da8a3d77 100644
--- a/plugins/search-react/src/api.ts
+++ b/plugins/search-react/src/api.ts
@@ -28,7 +28,10 @@ export const searchApiRef = createApiRef({
* @public
*/
export interface SearchApi {
- query(query: SearchQuery): Promise;
+ query(
+ query: SearchQuery,
+ options?: { signal?: AbortSignal },
+ ): Promise;
}
/**
@@ -39,7 +42,10 @@ export interface SearchApi {
export class MockSearchApi implements SearchApi {
constructor(public mockedResults?: SearchResultSet) {}
- query(): Promise {
+ query(
+ _query: SearchQuery,
+ _options?: { signal?: AbortSignal },
+ ): Promise {
return Promise.resolve(this.mockedResults || { results: [] });
}
}
diff --git a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx
index 173d6c3450..36757dafff 100644
--- a/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx
+++ b/plugins/search-react/src/components/SearchAutocomplete/SearchAutocomplete.test.tsx
@@ -95,12 +95,17 @@ describe('SearchAutocomplete', () => {
);
await waitFor(() => {
- expect(query).toHaveBeenCalledWith({
- filters: {},
- pageCursor: undefined,
- term: options[0],
- types: [],
- });
+ expect(query).toHaveBeenCalledWith(
+ {
+ filters: {},
+ pageCursor: undefined,
+ term: options[0],
+ types: [],
+ },
+ {
+ signal: expect.any(AbortSignal),
+ },
+ );
});
});
@@ -117,23 +122,33 @@ describe('SearchAutocomplete', () => {
);
await waitFor(() => {
- expect(query).toHaveBeenCalledWith({
- filters: {},
- pageCursor: undefined,
- term: options[0],
- types: [],
- });
+ expect(query).toHaveBeenCalledWith(
+ {
+ filters: {},
+ pageCursor: undefined,
+ term: options[0],
+ types: [],
+ },
+ {
+ signal: expect.any(AbortSignal),
+ },
+ );
});
await userEvent.click(screen.getByLabelText('Clear'));
await waitFor(() => {
- expect(query).toHaveBeenCalledWith({
- filters: {},
- pageCursor: undefined,
- term: '',
- types: [],
- });
+ expect(query).toHaveBeenCalledWith(
+ {
+ filters: {},
+ pageCursor: undefined,
+ term: '',
+ types: [],
+ },
+ {
+ signal: expect.any(AbortSignal),
+ },
+ );
});
});
@@ -154,12 +169,17 @@ describe('SearchAutocomplete', () => {
await userEvent.click(screen.getByText(options[0]));
await waitFor(() => {
- expect(query).toHaveBeenCalledWith({
- filters: {},
- pageCursor: undefined,
- term: options[0],
- types: [],
- });
+ expect(query).toHaveBeenCalledWith(
+ {
+ filters: {},
+ pageCursor: undefined,
+ term: options[0],
+ types: [],
+ },
+ {
+ signal: expect.any(AbortSignal),
+ },
+ );
});
});
diff --git a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx
index 54889792db..977f413f97 100644
--- a/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx
+++ b/plugins/search-react/src/components/SearchBar/SearchBar.test.tsx
@@ -171,6 +171,9 @@ describe('SearchBar', () => {
expect(searchApiMock.query).toHaveBeenLastCalledWith(
expect.objectContaining({ term: value }),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
jest.runAllTimers();
@@ -203,6 +206,9 @@ describe('SearchBar', () => {
expect(searchApiMock.query).toHaveBeenLastCalledWith(
expect.objectContaining({ term: '' }),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
});
@@ -254,6 +260,9 @@ describe('SearchBar', () => {
await waitFor(() =>
expect(searchApiMock.query).not.toHaveBeenLastCalledWith(
expect.objectContaining({ term: value }),
+ expect.objectContaining({
+ signal: expect.any(AbortSignal),
+ }),
),
);
@@ -265,6 +274,9 @@ describe('SearchBar', () => {
expect(searchApiMock.query).toHaveBeenLastCalledWith(
expect.objectContaining({ term: value }),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
jest.runAllTimers();
diff --git a/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx b/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx
index d8d3b75aa2..7191b842d3 100644
--- a/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx
+++ b/plugins/search-react/src/components/SearchFilter/SearchFilter.test.tsx
@@ -178,6 +178,7 @@ describe('SearchFilter', () => {
await waitFor(() => {
expect(searchApiMock.query).toHaveBeenLastCalledWith(
expect.objectContaining({ filters: { field: [values[0]] } }),
+ { signal: expect.any(Object) },
);
});
@@ -186,6 +187,7 @@ describe('SearchFilter', () => {
await waitFor(() => {
expect(searchApiMock.query).toHaveBeenLastCalledWith(
expect.objectContaining({ filters: {} }),
+ { signal: expect.any(Object) },
);
});
});
@@ -217,6 +219,7 @@ describe('SearchFilter', () => {
expect.objectContaining({
filters: { ...filters, field: [values[0]] },
}),
+ { signal: expect.any(Object) },
);
});
@@ -225,6 +228,7 @@ describe('SearchFilter', () => {
await waitFor(() => {
expect(searchApiMock.query).toHaveBeenLastCalledWith(
expect.objectContaining({ filters }),
+ { signal: expect.any(Object) },
);
});
});
@@ -421,6 +425,7 @@ describe('SearchFilter', () => {
expect.objectContaining({
filters: { [name]: values[0] },
}),
+ { signal: expect.any(AbortSignal) },
);
});
@@ -437,6 +442,7 @@ describe('SearchFilter', () => {
expect.objectContaining({
filters: {},
}),
+ { signal: expect.any(AbortSignal) },
);
});
});
@@ -479,6 +485,7 @@ describe('SearchFilter', () => {
expect.objectContaining({
filters: { ...filters, [name]: values[0] },
}),
+ { signal: expect.any(AbortSignal) },
);
});
@@ -493,6 +500,7 @@ describe('SearchFilter', () => {
await waitFor(() => {
expect(searchApiMock.query).toHaveBeenLastCalledWith(
expect.objectContaining({ filters }),
+ { signal: expect.any(AbortSignal) },
);
});
});
diff --git a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
index d601caadd9..e482dc3a75 100644
--- a/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
+++ b/plugins/search-react/src/components/SearchPagination/SearchPagination.test.tsx
@@ -197,6 +197,9 @@ describe('SearchPagination', () => {
expect.objectContaining({
pageLimit: 10,
}),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
});
@@ -229,6 +232,9 @@ describe('SearchPagination', () => {
expect.objectContaining({
pageCursor: 'Mg==', // page: 2
}),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
await userEvent.click(screen.getByLabelText('Previous page'));
@@ -239,6 +245,9 @@ describe('SearchPagination', () => {
expect.objectContaining({
pageCursor: 'MQ==', // page: 1
}),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
});
@@ -271,6 +280,9 @@ describe('SearchPagination', () => {
pageCursor: undefined,
pageLimit: 10,
}),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
});
});
diff --git a/plugins/search-react/src/context/SearchContext.test.tsx b/plugins/search-react/src/context/SearchContext.test.tsx
index f604183c7f..cbdf684b70 100644
--- a/plugins/search-react/src/context/SearchContext.test.tsx
+++ b/plugins/search-react/src/context/SearchContext.test.tsx
@@ -264,11 +264,14 @@ describe('SearchContext', () => {
result.current.setTerm(term);
});
- expect(searchApiMock.query).toHaveBeenLastCalledWith({
- term,
- types: ['*'],
- filters: {},
- });
+ expect(searchApiMock.query).toHaveBeenLastCalledWith(
+ {
+ term,
+ types: ['*'],
+ filters: {},
+ },
+ { signal: expect.any(AbortSignal) },
+ );
});
it('When types is set', async () => {
@@ -286,11 +289,14 @@ describe('SearchContext', () => {
result.current.setTypes(types);
});
- expect(searchApiMock.query).toHaveBeenLastCalledWith({
- types,
- term: '',
- filters: {},
- });
+ expect(searchApiMock.query).toHaveBeenLastCalledWith(
+ {
+ types,
+ term: '',
+ filters: {},
+ },
+ { signal: expect.any(AbortSignal) },
+ );
});
it('When filters are set', async () => {
@@ -308,11 +314,14 @@ describe('SearchContext', () => {
result.current.setFilters(filters);
});
- expect(searchApiMock.query).toHaveBeenLastCalledWith({
- filters,
- term: '',
- types: ['*'],
- });
+ expect(searchApiMock.query).toHaveBeenLastCalledWith(
+ {
+ filters,
+ term: '',
+ types: ['*'],
+ },
+ { signal: expect.any(AbortSignal) },
+ );
});
it('When page limit is set', async () => {
@@ -330,12 +339,15 @@ describe('SearchContext', () => {
result.current.setPageLimit(pageLimit);
});
- expect(searchApiMock.query).toHaveBeenLastCalledWith({
- pageLimit,
- term: '',
- types: ['*'],
- filters: {},
- });
+ expect(searchApiMock.query).toHaveBeenLastCalledWith(
+ {
+ pageLimit,
+ term: '',
+ types: ['*'],
+ filters: {},
+ },
+ { signal: expect.any(AbortSignal) },
+ );
});
it('When page cursor is set', async () => {
@@ -353,12 +365,15 @@ describe('SearchContext', () => {
result.current.setPageCursor(pageCursor);
});
- expect(searchApiMock.query).toHaveBeenLastCalledWith({
- pageCursor,
- term: '',
- types: ['*'],
- filters: {},
- });
+ expect(searchApiMock.query).toHaveBeenLastCalledWith(
+ {
+ pageCursor,
+ term: '',
+ types: ['*'],
+ filters: {},
+ },
+ { signal: expect.any(AbortSignal) },
+ );
});
it('provides function for fetch the next page', async () => {
@@ -382,12 +397,15 @@ describe('SearchContext', () => {
result.current.fetchNextPage!();
});
- expect(searchApiMock.query).toHaveBeenLastCalledWith({
- term: '',
- types: ['*'],
- filters: {},
- pageCursor: 'NEXT',
- });
+ expect(searchApiMock.query).toHaveBeenLastCalledWith(
+ {
+ term: '',
+ types: ['*'],
+ filters: {},
+ pageCursor: 'NEXT',
+ },
+ { signal: expect.any(AbortSignal) },
+ );
});
it('provides function for fetch the previous page', async () => {
@@ -410,12 +428,15 @@ describe('SearchContext', () => {
result.current.fetchPreviousPage!();
});
- expect(searchApiMock.query).toHaveBeenLastCalledWith({
- term: '',
- types: ['*'],
- filters: {},
- pageCursor: 'PREVIOUS',
- });
+ expect(searchApiMock.query).toHaveBeenLastCalledWith(
+ {
+ term: '',
+ types: ['*'],
+ filters: {},
+ pageCursor: 'PREVIOUS',
+ },
+ { signal: expect.any(AbortSignal) },
+ );
});
});
@@ -456,11 +477,14 @@ describe('SearchContext', () => {
});
await waitFor(() => {
- expect(searchApiMock.query).toHaveBeenCalledWith({
- term: '',
- types: ['*'],
- filters: {},
- });
+ expect(searchApiMock.query).toHaveBeenCalledWith(
+ {
+ term: '',
+ types: ['*'],
+ filters: {},
+ },
+ { signal: expect.any(AbortSignal) },
+ );
expect(analyticsApiMock.captureEvent).not.toHaveBeenCalled();
});
@@ -470,11 +494,14 @@ describe('SearchContext', () => {
});
await waitFor(() => {
- expect(searchApiMock.query).toHaveBeenCalledWith({
- term: 'eva',
- types: ['*'],
- filters: {},
- });
+ expect(searchApiMock.query).toHaveBeenCalledWith(
+ {
+ term: 'eva',
+ types: ['*'],
+ filters: {},
+ },
+ { signal: expect.any(AbortSignal) },
+ );
expect(analyticsApiMock.captureEvent).toHaveBeenCalledWith({
action: 'search',
subject: 'eva',
@@ -493,11 +520,14 @@ describe('SearchContext', () => {
});
await waitFor(() => {
- expect(searchApiMock.query).toHaveBeenCalledWith({
- term: 'eva.m',
- types: ['*'],
- filters: {},
- });
+ expect(searchApiMock.query).toHaveBeenCalledWith(
+ {
+ term: 'eva.m',
+ types: ['*'],
+ filters: {},
+ },
+ { signal: expect.any(AbortSignal) },
+ );
expect(analyticsApiMock.captureEvent).toHaveBeenCalledWith({
action: 'search',
subject: 'eva.m',
@@ -531,11 +561,14 @@ describe('SearchContext', () => {
});
await waitFor(() => {
- expect(searchApiMock.query).toHaveBeenLastCalledWith({
- term: 'term',
- types: ['*'],
- filters: {},
- });
+ expect(searchApiMock.query).toHaveBeenLastCalledWith(
+ {
+ term: 'term',
+ types: ['*'],
+ filters: {},
+ },
+ { signal: expect.any(AbortSignal) },
+ );
expect(analyticsApiMock.captureEvent).toHaveBeenCalledWith({
action: 'search',
subject: 'term',
diff --git a/plugins/search-react/src/context/SearchContext.tsx b/plugins/search-react/src/context/SearchContext.tsx
index 3bd29c881a..ba06010789 100644
--- a/plugins/search-react/src/context/SearchContext.tsx
+++ b/plugins/search-react/src/context/SearchContext.tsx
@@ -23,6 +23,7 @@ import {
useCallback,
useContext,
useEffect,
+ useRef,
useState,
} from 'react';
import useAsync, { AsyncState } from 'react-use/esm/useAsync';
@@ -132,15 +133,28 @@ const useSearchContextValue = (
const prevTerm = usePrevious(term);
const prevFilters = usePrevious(filters);
+ const abortControllerRef = useRef(null);
const result = useAsync(async () => {
- const resultSet = await searchApi.query({
- term,
- types,
- filters,
- pageLimit,
- pageCursor,
- });
+ // Here we cancel the previous request before making a new one
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ }
+
+ const controller = new AbortController();
+ abortControllerRef.current = controller;
+
+ const resultSet = await searchApi.query(
+ {
+ term,
+ types,
+ filters,
+ pageLimit,
+ pageCursor,
+ },
+ { signal: controller.signal },
+ );
+
if (term) {
analytics.captureEvent('search', term, {
value: resultSet.numberOfResults,
@@ -162,6 +176,14 @@ const useSearchContextValue = (
setPageCursor(result.value?.previousPageCursor);
}, [result.value?.previousPageCursor]);
+ useEffect(() => {
+ return () => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ }
+ };
+ }, []);
+
useEffect(() => {
// Any time a term is reset, we want to start from page 0.
// Only reset the term if it has been modified by the user at least once, the initial state must not reset the term.
diff --git a/plugins/search/src/apis.test.ts b/plugins/search/src/apis.test.ts
index 15745d2e68..1bb245dc9f 100644
--- a/plugins/search/src/apis.test.ts
+++ b/plugins/search/src/apis.test.ts
@@ -52,10 +52,19 @@ describe('apis', () => {
identityApi.getCredentials.mockResolvedValue({});
await client.query(query);
expect(getBaseUrl).toHaveBeenLastCalledWith('search');
- expect(mockFetch).toHaveBeenLastCalledWith(
- `${baseUrl}/query?term=`,
- undefined,
- );
+ expect(mockFetch).toHaveBeenLastCalledWith(`${baseUrl}/query?term=`, {
+ signal: undefined,
+ });
+ });
+
+ it('Fetch is called with abort signal when provided', async () => {
+ identityApi.getCredentials.mockResolvedValue({});
+ const abortController = new AbortController();
+ await client.query(query, { signal: abortController.signal });
+ expect(getBaseUrl).toHaveBeenLastCalledWith('search');
+ expect(mockFetch).toHaveBeenLastCalledWith(`${baseUrl}/query?term=`, {
+ signal: abortController.signal,
+ });
});
it('Resolves JSON from fetch response', async () => {
diff --git a/plugins/search/src/apis.ts b/plugins/search/src/apis.ts
index b56d88a22c..03e6b6d1d4 100644
--- a/plugins/search/src/apis.ts
+++ b/plugins/search/src/apis.ts
@@ -30,12 +30,17 @@ export class SearchClient implements SearchApi {
this.fetchApi = options.fetchApi;
}
- async query(query: SearchQuery): Promise {
+ async query(
+ query: SearchQuery,
+ options?: { signal?: AbortSignal },
+ ): Promise {
const queryString = qs.stringify(query);
const url = `${await this.discoveryApi.getBaseUrl(
'search',
)}/query?${queryString}`;
- const response = await this.fetchApi.fetch(url);
+ const response = await this.fetchApi.fetch(url, {
+ signal: options?.signal,
+ });
if (!response.ok) {
throw await ResponseError.fromResponse(response);
diff --git a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx
index 37b7c13665..e7c47b7d30 100644
--- a/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx
+++ b/plugins/search/src/components/HomePageComponent/HomePageSearchBar.test.tsx
@@ -48,6 +48,9 @@ describe('('Search');
@@ -232,6 +238,7 @@ describe('SearchModal', () => {
expect(searchApiMock.query).toHaveBeenCalledWith(
expect.objectContaining({ term: 'term' }),
+ { signal: expect.any(AbortSignal) },
);
const fullResultsBtn = screen.getByRole('button', {
diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx
index 1245ceed5a..a0dd2976e6 100644
--- a/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx
+++ b/plugins/search/src/components/SearchType/SearchType.Accordion.test.tsx
@@ -157,18 +157,28 @@ describe('SearchType.Accordion', () => {
,
);
- expect(searchApiMock.query).toHaveBeenCalledWith({
- term: 'abc',
- types: [],
- filters: { foo: 'bar' },
- pageLimit: 0,
- });
- expect(searchApiMock.query).toHaveBeenCalledWith({
- term: 'abc',
- types: [expectedType.value],
- filters: {},
- pageLimit: 0,
- });
+ expect(searchApiMock.query).toHaveBeenCalledWith(
+ {
+ term: 'abc',
+ types: [],
+ filters: { foo: 'bar' },
+ pageLimit: 0,
+ },
+ {
+ signal: expect.any(AbortSignal),
+ },
+ );
+ expect(searchApiMock.query).toHaveBeenCalledWith(
+ {
+ term: 'abc',
+ types: [expectedType.value],
+ filters: {},
+ pageLimit: 0,
+ },
+ {
+ signal: expect.any(AbortSignal),
+ },
+ );
await waitFor(() => {
const countLabels = getAllByText('1234 results');
expect(countLabels.length).toEqual(2);
diff --git a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx
index 65c96b1e60..8168418ed2 100644
--- a/plugins/search/src/components/SearchType/SearchType.Accordion.tsx
+++ b/plugins/search/src/components/SearchType/SearchType.Accordion.tsx
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-import { cloneElement, Fragment, useEffect, useState } from 'react';
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
import { useApi } from '@backstage/core-plugin-api';
import { searchApiRef, useSearch } from '@backstage/plugin-search-react';
import Accordion from '@material-ui/core/Accordion';
@@ -86,6 +86,7 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => {
const [expanded, setExpanded] = useState(true);
const { defaultValue, name, showCounts, types: givenTypes } = props;
const { t } = useTranslationRef(searchTranslationRef);
+ const abortControllerRef = useRef(null);
const toggleExpanded = () => setExpanded(prevState => !prevState);
const handleClick = (type: string) => {
@@ -117,18 +118,29 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => {
if (!showCounts) {
return {};
}
+ // Here we cancel the previous requests before making a new one
+ // All requests are made with a new AbortController signal
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ }
+
+ const controller = new AbortController();
+ abortControllerRef.current = controller;
const counts = await Promise.all(
definedTypes
.map(type => type.value)
.map(async type => {
- const { numberOfResults } = await searchApi.query({
- term,
- types: type ? [type] : [],
- filters:
- types.includes(type) || (!types.length && !type) ? filters : {},
- pageLimit: 0,
- });
+ const { numberOfResults } = await searchApi.query(
+ {
+ term,
+ types: type ? [type] : [],
+ filters:
+ types.includes(type) || (!types.length && !type) ? filters : {},
+ pageLimit: 0,
+ },
+ { signal: controller.signal },
+ );
return [
type,
@@ -145,6 +157,14 @@ export const SearchTypeAccordion = (props: SearchTypeAccordionProps) => {
return Object.fromEntries(counts);
}, [filters, showCounts, term, types]);
+ useEffect(() => {
+ return () => {
+ if (abortControllerRef.current) {
+ abortControllerRef.current.abort();
+ }
+ };
+ }, []);
+
return (
diff --git a/plugins/search/src/components/SearchType/SearchType.test.tsx b/plugins/search/src/components/SearchType/SearchType.test.tsx
index 231463c9bf..e62ac19fee 100644
--- a/plugins/search/src/components/SearchType/SearchType.test.tsx
+++ b/plugins/search/src/components/SearchType/SearchType.test.tsx
@@ -192,6 +192,9 @@ describe('SearchType', () => {
expect.objectContaining({
types: [values[0]],
}),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
});
@@ -240,6 +243,9 @@ describe('SearchType', () => {
expect.objectContaining({
types: [...typeValues, values[0]],
}),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
});
@@ -253,7 +259,12 @@ describe('SearchType', () => {
await waitFor(() => {
expect(searchApiMock.query).toHaveBeenLastCalledWith(
- expect.objectContaining([]),
+ expect.objectContaining({
+ types: typeValues,
+ }),
+ {
+ signal: expect.any(AbortSignal),
+ },
);
});
});
diff --git a/plugins/signals/CHANGELOG.md b/plugins/signals/CHANGELOG.md
index 1e41067d82..02e57ebeca 100644
--- a/plugins/signals/CHANGELOG.md
+++ b/plugins/signals/CHANGELOG.md
@@ -1,5 +1,14 @@
# @backstage/plugin-signals
+## 0.0.24-next.3
+
+### Patch Changes
+
+- 7b41d9d: Remove `app-root-element:signals/signals-display` which was not doing anything useful
+- Updated dependencies
+ - @backstage/core-components@0.18.2-next.3
+ - @backstage/frontend-plugin-api@0.12.1-next.2
+
## 0.0.24-next.2
### Patch Changes
diff --git a/plugins/signals/package.json b/plugins/signals/package.json
index 13bf863b60..d67709a5ca 100644
--- a/plugins/signals/package.json
+++ b/plugins/signals/package.json
@@ -1,6 +1,6 @@
{
"name": "@backstage/plugin-signals",
- "version": "0.0.24-next.2",
+ "version": "0.0.24-next.3",
"backstage": {
"role": "frontend-plugin",
"pluginId": "signals",
diff --git a/plugins/signals/report-alpha.api.md b/plugins/signals/report-alpha.api.md
index cd2f384e10..91bd2b6726 100644
--- a/plugins/signals/report-alpha.api.md
+++ b/plugins/signals/report-alpha.api.md
@@ -8,7 +8,6 @@ import { ApiFactory } from '@backstage/frontend-plugin-api';
import { ExtensionBlueprintParams } from '@backstage/frontend-plugin-api';
import { ExtensionDataRef } from '@backstage/frontend-plugin-api';
import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
-import { JSX as JSX_2 } from 'react';
import { OverridableFrontendPlugin } from '@backstage/frontend-plugin-api';
// @alpha (undocumented)
@@ -31,17 +30,6 @@ const _default: OverridableFrontendPlugin<
params: ApiFactory,
) => ExtensionBlueprintParams;
}>;
- 'app-root-element:signals/signals-display': ExtensionDefinition<{
- kind: 'app-root-element';
- name: 'signals-display';
- config: {};
- configInput: {};
- output: ExtensionDataRef;
- inputs: {};
- params: {
- element: JSX.Element;
- };
- }>;
}
>;
export default _default;
diff --git a/plugins/signals/src/alpha.tsx b/plugins/signals/src/alpha.tsx
index 5f9cd6f91b..c32bff140e 100644
--- a/plugins/signals/src/alpha.tsx
+++ b/plugins/signals/src/alpha.tsx
@@ -16,15 +16,12 @@
import {
ApiBlueprint,
- AppRootElementBlueprint,
createFrontendPlugin,
discoveryApiRef,
identityApiRef,
} from '@backstage/frontend-plugin-api';
import { signalApiRef } from '@backstage/plugin-signals-react';
import { SignalClient } from './api/SignalClient';
-import { SignalsDisplay } from './plugin';
-import { compatWrapper } from '@backstage/core-compat-api';
const api = ApiBlueprint.make({
params: defineParams =>
@@ -43,16 +40,9 @@ const api = ApiBlueprint.make({
}),
});
-const signalsDisplayAppRootElement = AppRootElementBlueprint.make({
- name: 'signals-display',
- params: {
- element: compatWrapper(