@backstage/ui 0.12.0-next.1 → 0.12.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +61 -0
- package/dist/components/Accordion/Accordion.module.css.esm.js +2 -2
- package/dist/components/Alert/Alert.module.css.esm.js +2 -2
- package/dist/components/Avatar/Avatar.module.css.esm.js +2 -2
- package/dist/components/Box/Box.module.css.esm.js +2 -2
- package/dist/components/Button/Button.module.css.esm.js +2 -2
- package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js +2 -2
- package/dist/components/ButtonLink/ButtonLink.module.css.esm.js +2 -2
- package/dist/components/Card/Card.module.css.esm.js +2 -2
- package/dist/components/Checkbox/Checkbox.module.css.esm.js +2 -2
- package/dist/components/Dialog/Dialog.module.css.esm.js +2 -2
- package/dist/components/Flex/Flex.module.css.esm.js +2 -2
- package/dist/components/Grid/Grid.module.css.esm.js +2 -2
- package/dist/components/Header/Header.module.css.esm.js +2 -2
- package/dist/components/Menu/Menu.module.css.esm.js +2 -2
- package/dist/components/PasswordField/PasswordField.esm.js +129 -0
- package/dist/components/PasswordField/PasswordField.esm.js.map +1 -0
- package/dist/components/PasswordField/PasswordField.module.css.esm.js +8 -0
- package/dist/components/PasswordField/PasswordField.module.css.esm.js.map +1 -0
- package/dist/components/PasswordField/definition.esm.js +15 -0
- package/dist/components/PasswordField/definition.esm.js.map +1 -0
- package/dist/components/Popover/Popover.module.css.esm.js +2 -2
- package/dist/components/RadioGroup/RadioGroup.module.css.esm.js +2 -2
- package/dist/components/SearchField/SearchField.module.css.esm.js +2 -2
- package/dist/components/Select/Select.module.css.esm.js +2 -2
- package/dist/components/Skeleton/Skeleton.module.css.esm.js +2 -2
- package/dist/components/Switch/Switch.module.css.esm.js +2 -2
- package/dist/components/Table/components/Table.esm.js +61 -54
- package/dist/components/Table/components/Table.esm.js.map +1 -1
- package/dist/components/Table/hooks/useCompletePagination.esm.js +12 -7
- package/dist/components/Table/hooks/useCompletePagination.esm.js.map +1 -1
- package/dist/components/Tabs/Tabs.module.css.esm.js +2 -2
- package/dist/components/TagGroup/TagGroup.esm.js +45 -41
- package/dist/components/TagGroup/TagGroup.esm.js.map +1 -1
- package/dist/components/TagGroup/TagGroup.module.css.esm.js +2 -2
- package/dist/components/TextField/TextField.module.css.esm.js +2 -2
- package/dist/components/ToggleButton/ToggleButton.module.css.esm.js +2 -2
- package/dist/components/Tooltip/Tooltip.module.css.esm.js +2 -2
- package/{css → dist/css}/styles.css +924 -602
- package/dist/index.d.ts +48 -6
- package/dist/index.esm.js +2 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +26 -26
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,66 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.12.0-next.2
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- b63c25b: **BREAKING**: Removed gray scale tokens and renamed background surface tokens to neutral tokens
|
|
8
|
+
|
|
9
|
+
The `--bui-gray-1` through `--bui-gray-8` tokens have been removed. The `--bui-bg-surface-*` and `--bui-bg-neutral-on-surface-*` tokens have been replaced by a unified `--bui-bg-neutral-*` scale.
|
|
10
|
+
|
|
11
|
+
**Migration:**
|
|
12
|
+
|
|
13
|
+
Replace surface tokens directly:
|
|
14
|
+
|
|
15
|
+
```diff
|
|
16
|
+
- background: var(--bui-bg-surface-0);
|
|
17
|
+
+ background: var(--bui-bg-neutral-0);
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Replace on-surface tokens shifted by +1:
|
|
21
|
+
|
|
22
|
+
```diff
|
|
23
|
+
- background: var(--bui-bg-neutral-on-surface-0);
|
|
24
|
+
+ background: var(--bui-bg-neutral-1);
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Replace gray tokens 1-4 with neutral equivalents (`--bui-gray-5` through `--bui-gray-8` have no direct replacement):
|
|
28
|
+
|
|
29
|
+
```diff
|
|
30
|
+
- background: var(--bui-gray-1);
|
|
31
|
+
+ background: var(--bui-bg-neutral-1);
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Patch Changes
|
|
35
|
+
|
|
36
|
+
- c8ae765: Fixed nested Accordion icon state issue where the inner accordion's arrow icon would incorrectly show as expanded when only the outer accordion was expanded. The CSS selector now uses a direct parent selector to ensure the icon only responds to its own accordion's expanded state.
|
|
37
|
+
|
|
38
|
+
Affected components: Accordion
|
|
39
|
+
|
|
40
|
+
- 5c76d13: Allow `ref` as a prop on the `Tag` component
|
|
41
|
+
|
|
42
|
+
Affected components: Tag
|
|
43
|
+
|
|
44
|
+
- 741a98d: Allow data to be passed directly to the `useTable` hook using the property `data` instead of `getData()` for mode `"complete"`.
|
|
45
|
+
|
|
46
|
+
This simplifies usage as data changes, rather than having to perform a `useEffect` when data changes, and then reloading the data. It also happens immediately, so stale data won't remain until a rerender (with an internal async state change), so less flickering.
|
|
47
|
+
|
|
48
|
+
Affected components: Table
|
|
49
|
+
|
|
50
|
+
- a0fe1b2: Fixed changing columns after first render from crashing. It now renders the table with the new column layout as columns change.
|
|
51
|
+
|
|
52
|
+
Affected components: Table
|
|
53
|
+
|
|
54
|
+
- becf851: export PasswordField component
|
|
55
|
+
- a7e0d50: Prepare for React Router v7 migration by updating to v6.30.2 across all NFS packages and enabling v7 future flags. Convert routes from splat paths to parent/child structure with Outlet components.
|
|
56
|
+
- 8c39412: The Table component now wraps the react-aria-components `Table` with a `ResizableTableContainer` only if any column has a width property set. This means that column widths can adapt to the content otherwise (if no width is explicitly set).
|
|
57
|
+
|
|
58
|
+
Affected components: Table
|
|
59
|
+
|
|
60
|
+
- 20131c5: Migrated to use the standard `backstage-cli package build` for CSS bundling instead of a custom build script.
|
|
61
|
+
- Updated dependencies
|
|
62
|
+
- @backstage/version-bridge@1.0.12-next.0
|
|
63
|
+
|
|
3
64
|
## 0.12.0-next.1
|
|
4
65
|
|
|
5
66
|
### Minor Changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Accordion_bui-
|
|
4
|
-
var styles = {"bui-Accordion":"Accordion_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Accordion_bui-Accordion__089e06ba75 {\n width: 100%;\n background-color: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-3);\n padding: var(--bui-space-3);\n }\n\n .Accordion_bui-AccordionTrigger__089e06ba75 {\n all: unset;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .Accordion_bui-AccordionTriggerButton__089e06ba75 {\n all: unset;\n width: 100%;\n color: var(--bui-fg-primary);\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n text-align: left;\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n\n &[data-disabled='true'] {\n background-color: transparent;\n color: var(--bui-fg-disabled);\n cursor: not-allowed;\n }\n }\n\n .Accordion_bui-AccordionTriggerTitle__089e06ba75 {\n font-size: var(--bui-font-size-4);\n font-weight: var(--bui-font-weight-bold);\n line-height: 140%;\n }\n\n .Accordion_bui-AccordionTriggerSubtitle__089e06ba75 {\n font-size: var(--bui-font-size-2);\n line-height: 140%;\n color: var(--bui-fg-secondary);\n }\n\n .Accordion_bui-AccordionTriggerIcon__089e06ba75 {\n transition: transform 150ms ease-out;\n flex-shrink: 0;\n width: 1rem;\n height: 1rem;\n\n .Accordion_bui-Accordion__089e06ba75[data-expanded='true'] > .Accordion_bui-AccordionTrigger__089e06ba75 & {\n transform: rotate(180deg);\n }\n }\n\n .Accordion_bui-AccordionPanel__089e06ba75 {\n .Accordion_bui-Accordion__089e06ba75[data-expanded='true'] > & {\n padding-top: var(--bui-space-1);\n }\n }\n\n .Accordion_bui-AccordionGroup__089e06ba75 {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n width: 100%;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Accordion":"Accordion_bui-Accordion__089e06ba75","bui-AccordionTrigger":"Accordion_bui-AccordionTrigger__089e06ba75","bui-AccordionTriggerButton":"Accordion_bui-AccordionTriggerButton__089e06ba75","bui-AccordionTriggerTitle":"Accordion_bui-AccordionTriggerTitle__089e06ba75","bui-AccordionTriggerSubtitle":"Accordion_bui-AccordionTriggerSubtitle__089e06ba75","bui-AccordionTriggerIcon":"Accordion_bui-AccordionTriggerIcon__089e06ba75","bui-AccordionPanel":"Accordion_bui-AccordionPanel__089e06ba75","bui-AccordionGroup":"Accordion_bui-AccordionGroup__089e06ba75"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Alert_bui-
|
|
4
|
-
var styles = {"bui-Alert":"Alert_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Alert_bui-Alert__aec8196e6c {\n --alert-bg: var(--bui-bg-neutral-1);\n --alert-fg: var(--bui-fg-primary);\n\n display: flex;\n gap: var(--bui-space-6);\n padding: var(--bui-space-3) var(--bui-space-3);\n border-radius: var(--bui-radius-3);\n font-family: var(--bui-font-regular);\n font-size: var(--bui-font-size-3);\n line-height: 1.5;\n\n /* Apply variables */\n background-color: var(--alert-bg);\n color: var(--alert-fg);\n }\n\n .Alert_bui-Alert__aec8196e6c[data-status='info'] {\n --alert-bg: var(--bui-bg-info);\n --alert-fg: var(--bui-fg-info-on-bg);\n }\n\n .Alert_bui-Alert__aec8196e6c[data-status='success'] {\n --alert-bg: var(--bui-bg-success);\n --alert-fg: var(--bui-fg-success-on-bg);\n }\n\n .Alert_bui-Alert__aec8196e6c[data-status='warning'] {\n --alert-bg: var(--bui-bg-warning);\n --alert-fg: var(--bui-fg-warning-on-bg);\n }\n\n .Alert_bui-Alert__aec8196e6c[data-status='danger'] {\n --alert-bg: var(--bui-bg-danger);\n --alert-fg: var(--bui-fg-danger-on-bg);\n }\n\n .Alert_bui-AlertIcon__aec8196e6c {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n\n /* Add slight top margin when there's a description for better alignment */\n .Alert_bui-Alert__aec8196e6c[data-has-description='true'] & {\n margin-top: 0.125rem;\n }\n }\n\n .Alert_bui-AlertContentWrapper__aec8196e6c {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--bui-space-3);\n flex: 1;\n min-width: 0;\n\n /* Center align when there's no description */\n .Alert_bui-Alert__aec8196e6c[data-has-description='false'] & {\n align-items: center;\n }\n }\n\n .Alert_bui-AlertContent__aec8196e6c {\n flex: 1;\n min-width: 0;\n word-wrap: break-word;\n }\n\n .Alert_bui-AlertTitle__aec8196e6c {\n font-weight: var(--bui-font-weight-bold);\n font-size: var(--bui-font-size-3);\n }\n\n .Alert_bui-AlertDescription__aec8196e6c {\n font-size: var(--bui-font-size-2);\n opacity: 0.9;\n }\n\n .Alert_bui-AlertSpinner__aec8196e6c {\n display: flex;\n\n & svg {\n width: 1rem;\n height: 1rem;\n animation: Alert_bui-spin__aec8196e6c 1s linear infinite;\n }\n }\n\n .Alert_bui-AlertActions__aec8196e6c {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n margin-left: auto;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Alert_bui-AlertSpinner__aec8196e6c svg {\n animation: none;\n }\n }\n\n @keyframes Alert_bui-spin__aec8196e6c {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Alert":"Alert_bui-Alert__aec8196e6c","bui-AlertIcon":"Alert_bui-AlertIcon__aec8196e6c","bui-AlertContentWrapper":"Alert_bui-AlertContentWrapper__aec8196e6c","bui-AlertContent":"Alert_bui-AlertContent__aec8196e6c","bui-AlertTitle":"Alert_bui-AlertTitle__aec8196e6c","bui-AlertDescription":"Alert_bui-AlertDescription__aec8196e6c","bui-AlertSpinner":"Alert_bui-AlertSpinner__aec8196e6c","bui-spin":"Alert_bui-spin__aec8196e6c","bui-AlertActions":"Alert_bui-AlertActions__aec8196e6c"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Avatar_bui-
|
|
4
|
-
var styles = {"bui-AvatarRoot":"Avatar_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Avatar_bui-AvatarRoot__00c2bf8db3 {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n border-radius: 100%;\n user-select: none;\n font-weight: 500;\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-neutral-2);\n font-size: 1rem;\n line-height: 1;\n overflow: hidden;\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='x-small'] {\n height: 1.25rem;\n width: 1.25rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='small'] {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='medium'] {\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='large'] {\n height: 2.5rem;\n width: 2.5rem;\n }\n\n .Avatar_bui-AvatarRoot__00c2bf8db3[data-size='x-large'] {\n height: 3rem;\n width: 3rem;\n }\n\n .Avatar_bui-AvatarImage__00c2bf8db3 {\n object-fit: cover;\n height: 100%;\n width: 100%;\n display: block;\n }\n\n .Avatar_bui-AvatarFallback__00c2bf8db3 {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 100%;\n width: 100%;\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: var(--bui-radius-full);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-AvatarRoot":"Avatar_bui-AvatarRoot__00c2bf8db3","bui-AvatarImage":"Avatar_bui-AvatarImage__00c2bf8db3","bui-AvatarFallback":"Avatar_bui-AvatarFallback__00c2bf8db3"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Box_bui-
|
|
4
|
-
var styles = {"bui-Box":"Box_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Box_bui-Box__e31c8ab801 {\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='0'] {\n background-color: var(--bui-bg-neutral-0);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Box_bui-Box__e31c8ab801[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Box":"Box_bui-Box__e31c8ab801"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button_bui-
|
|
4
|
-
var styles = {"bui-Button":"Button_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Button_bui-Button__0181170b3d {\n --loading-duration: 200ms;\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='primary'][data-destructive='true'] {\n /* Custom properties matching future token names (without bui- prefix) */\n --bg-solid-danger: #dc2626;\n --bg-solid-danger-hover: #b91c1c;\n --bg-solid-danger-pressed: #991b1b;\n --bg-solid-danger-disabled: #fca5a5;\n --fg-solid-danger: var(--bui-white);\n\n [data-theme-mode='dark'] & {\n --bg-solid-danger: #ef4444;\n --bg-solid-danger-hover: #dc2626;\n --bg-solid-danger-pressed: #b91c1c;\n --bg-solid-danger-disabled: #7f1d1d;\n }\n\n --bg: var(--bg-solid-danger);\n --bg-hover: var(--bg-solid-danger-hover);\n --bg-active: var(--bg-solid-danger-pressed);\n --fg: var(--fg-solid-danger);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg: var(--bg-solid-danger-disabled);\n --bg-hover: var(--bg-solid-danger-disabled);\n --bg-active: var(--bg-solid-danger-disabled);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-border-danger);\n outline-offset: 2px;\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='secondary'][data-destructive='true'] {\n /* Custom properties for hover/active states (no tokens exist yet) */\n --bg-danger-hover: #fecaca;\n --bg-danger-pressed: #fca5a5;\n\n [data-theme-mode='dark'] & {\n --bg-danger-hover: #450a0a;\n --bg-danger-pressed: #7f1d1d;\n }\n\n --bg: var(--bui-bg-danger);\n --bg-hover: var(--bg-danger-hover);\n --bg-active: var(--bg-danger-pressed);\n --fg: var(--bui-fg-danger);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .Button_bui-Button__0181170b3d[data-variant='tertiary'][data-destructive='true'] {\n /* Custom properties for hover/active states (no tokens exist yet) */\n --bg-danger-hover: #fecaca;\n --bg-danger-pressed: #fca5a5;\n\n [data-theme-mode='dark'] & {\n --bg-danger-hover: #450a0a;\n --bg-danger-pressed: #7f1d1d;\n }\n\n --bg-hover: var(--bui-bg-danger);\n --bg-active: var(--bg-danger-pressed);\n --fg: var(--bui-fg-danger);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n box-shadow: inset 0 0 0 2px var(--bui-border-danger);\n }\n }\n\n .Button_bui-Button__0181170b3d[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Button_bui-Button__0181170b3d[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .Button_bui-ButtonContent__0181170b3d {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .Button_bui-Button__0181170b3d[data-loading='true'] & {\n opacity: 0;\n }\n }\n\n .Button_bui-ButtonSpinner__0181170b3d {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .Button_bui-Button__0181170b3d[data-loading='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: Button_bui-spin__0181170b3d 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .Button_bui-Button__0181170b3d {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonContent__0181170b3d {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonSpinner__0181170b3d {\n transition-duration: 50ms;\n }\n\n .Button_bui-ButtonSpinner__0181170b3d svg {\n animation: none;\n }\n }\n\n @keyframes Button_bui-spin__0181170b3d {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Button":"Button_bui-Button__0181170b3d","bui-ButtonContent":"Button_bui-ButtonContent__0181170b3d","bui-ButtonSpinner":"Button_bui-ButtonSpinner__0181170b3d","bui-spin":"Button_bui-spin__0181170b3d"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonIcon_bui-
|
|
4
|
-
var styles = {"bui-ButtonIcon":"ButtonIcon_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d {\n --loading-duration: 200ms;\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n user-select: none;\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-size='small'] {\n width: 2rem;\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-size='medium'] {\n width: 2.5rem;\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ButtonIcon_bui-ButtonIconContent__e74bc07c5d {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-loading='true'] & {\n opacity: 0;\n }\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d[data-loading='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: ButtonIcon_bui-spin__e74bc07c5d 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ButtonIcon_bui-ButtonIcon__e74bc07c5d {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconContent__e74bc07c5d {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d svg {\n animation: none;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__e74bc07c5d","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__e74bc07c5d","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__e74bc07c5d","bui-spin":"ButtonIcon_bui-spin__e74bc07c5d"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonLink_bui-
|
|
4
|
-
var styles = {"bui-ButtonLink":"ButtonLink_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonLink_bui-ButtonLink__372a7ccc7e {\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n border: none;\n user-select: none;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n text-decoration: none;\n transition: background-color 200ms ease-out, box-shadow 200ms ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &:focus-visible {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-surface='1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-surface='2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-surface='3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &:focus-visible {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-size='small'] {\n font-size: var(--bui-font-size-3);\n padding: 0 var(--bui-space-2);\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ButtonLink_bui-ButtonLink__372a7ccc7e[data-size='medium'] {\n font-size: var(--bui-font-size-4);\n padding: 0 var(--bui-space-3);\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ButtonLink_bui-ButtonLinkContent__372a7ccc7e {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--bui-space-1_5);\n height: 100%;\n width: 100%;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ButtonLink_bui-ButtonLink__372a7ccc7e {\n transition-duration: 50ms;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ButtonLink":"ButtonLink_bui-ButtonLink__372a7ccc7e","bui-ButtonLinkContent":"ButtonLink_bui-ButtonLinkContent__372a7ccc7e"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Card_bui-
|
|
4
|
-
var styles = {"bui-Card":"Card_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Card_bui-Card__e4b6b3d7c7 {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n background-color: var(--bui-bg-neutral-1);\n border-radius: var(--bui-radius-3);\n padding-block: var(--bui-space-3);\n color: var(--bui-fg-primary);\n border: 1px solid var(--bui-border);\n overflow: hidden;\n min-height: 0;\n width: 100%;\n }\n\n .Card_bui-CardBody__e4b6b3d7c7 {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding-inline: var(--bui-space-3);\n }\n\n .Card_bui-CardHeader__e4b6b3d7c7 {\n padding-inline: var(--bui-space-3);\n }\n\n .Card_bui-CardFooter__e4b6b3d7c7 {\n padding-inline: var(--bui-space-3);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Card":"Card_bui-Card__e4b6b3d7c7","bui-CardBody":"Card_bui-CardBody__e4b6b3d7c7","bui-CardHeader":"Card_bui-CardHeader__e4b6b3d7c7","bui-CardFooter":"Card_bui-CardFooter__e4b6b3d7c7"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Checkbox_bui-
|
|
4
|
-
var styles = {"bui-Checkbox":"Checkbox_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Checkbox_bui-Checkbox__ec409ffa14 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n user-select: none;\n cursor: pointer;\n }\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .Checkbox_bui-CheckboxIndicator__ec409ffa14 {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: 2px;\n transition: background-color 0.2s ease-in-out;\n background-color: var(--bui-bg-neutral-1);\n padding: 0;\n flex-shrink: 0;\n color: transparent;\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-focus-visible] & {\n transition: none;\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-selected] & {\n background-color: var(--bui-bg-solid);\n box-shadow: none;\n color: var(--bui-fg-solid);\n }\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-indeterminate] & {\n background-color: var(--bui-bg-neutral-1);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n color: var(--bui-fg-primary);\n }\n\n .Checkbox_bui-Checkbox__ec409ffa14[data-hovered]:not([data-selected]):not([data-indeterminate])\n & {\n box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n }\n\n @media (prefers-reduced-motion: reduce) {\n & {\n transition: none;\n }\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Checkbox":"Checkbox_bui-Checkbox__ec409ffa14","bui-CheckboxIndicator":"Checkbox_bui-CheckboxIndicator__ec409ffa14"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Dialog_bui-
|
|
4
|
-
var styles = {"bui-DialogOverlay":"Dialog_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Dialog_bui-DialogOverlay__9038fccb28 {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: color-mix(in srgb, var(--bui-bg-neutral-2) 80%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n }\n\n [data-theme='dark'] .Dialog_bui-Dialog__9038fccb28 {\n background: rgba(0, 0, 0, 0.5);\n }\n\n .Dialog_bui-DialogOverlay__9038fccb28[data-entering] {\n animation: Dialog_fade-in__9038fccb28 200ms ease-out forwards;\n }\n\n .Dialog_bui-DialogOverlay__9038fccb28[data-exiting] {\n animation: Dialog_fade-out__9038fccb28 150ms ease-out forwards;\n }\n\n .Dialog_bui-Dialog__9038fccb28 {\n background: var(--bui-bg-neutral-1);\n border-radius: 0.5rem;\n border: 1px solid var(--bui-border);\n color: var(--bui-fg-primary);\n position: relative;\n width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));\n max-width: calc(100vw - 3rem);\n height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));\n max-height: calc(100vh - 3rem);\n display: flex;\n flex-direction: column;\n outline: none;\n }\n\n /* Dialog entering animation */\n .Dialog_bui-DialogOverlay__9038fccb28[data-entering] .Dialog_bui-Dialog__9038fccb28 {\n animation: Dialog_dialog-enter__9038fccb28 150ms ease-out forwards;\n }\n\n /* Dialog exiting animation */\n .Dialog_bui-DialogOverlay__9038fccb28[data-exiting] .Dialog_bui-Dialog__9038fccb28 {\n animation: Dialog_dialog-exit__9038fccb28 150ms ease-out forwards;\n }\n\n .Dialog_bui-DialogHeader__9038fccb28 {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-2);\n border-bottom: 1px solid var(--bui-border);\n }\n\n .Dialog_bui-DialogHeaderTitle__9038fccb28 {\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-bold);\n margin: 0;\n }\n\n .Dialog_bui-DialogFooter__9038fccb28 {\n display: flex;\n align-items: center;\n justify-content: end;\n gap: var(--bui-space-2);\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-3);\n border-top: 1px solid var(--bui-border);\n }\n\n .Dialog_bui-DialogBody__9038fccb28 {\n padding: var(--bui-space-3);\n flex: 1;\n overflow-y: auto;\n }\n\n /* Keyframe animations */\n @keyframes Dialog_fade-in__9038fccb28 {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes Dialog_fade-out__9038fccb28 {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @keyframes Dialog_dialog-enter__9038fccb28 {\n from {\n opacity: 0.5;\n transform: scale(0.8);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n\n @keyframes Dialog_dialog-exit__9038fccb28 {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-DialogOverlay":"Dialog_bui-DialogOverlay__9038fccb28","bui-Dialog":"Dialog_bui-Dialog__9038fccb28","fade-in":"Dialog_fade-in__9038fccb28","fade-out":"Dialog_fade-out__9038fccb28","dialog-enter":"Dialog_dialog-enter__9038fccb28","dialog-exit":"Dialog_dialog-exit__9038fccb28","bui-DialogHeader":"Dialog_bui-DialogHeader__9038fccb28","bui-DialogHeaderTitle":"Dialog_bui-DialogHeaderTitle__9038fccb28","bui-DialogFooter":"Dialog_bui-DialogFooter__9038fccb28","bui-DialogBody":"Dialog_bui-DialogBody__9038fccb28"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Flex_bui-
|
|
4
|
-
var styles = {"bui-Flex":"Flex_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Flex_bui-Flex__d21378eb09 {\n display: flex;\n\n /* This helps when using `truncate` on text inside a flex container */\n min-width: 0;\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='0'] {\n background-color: var(--bui-bg-neutral-0);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Flex_bui-Flex__d21378eb09[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Flex":"Flex_bui-Flex__d21378eb09"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Grid_bui-
|
|
4
|
-
var styles = {"bui-Grid":"Grid_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Grid_bui-Grid__9f67130f09 {\n display: grid;\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='0'],\n .Grid_bui-GridItem__9f67130f09[data-surface='0'] {\n background-color: var(--bui-bg-neutral-0);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='1'],\n .Grid_bui-GridItem__9f67130f09[data-surface='1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='2'],\n .Grid_bui-GridItem__9f67130f09[data-surface='2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='3'],\n .Grid_bui-GridItem__9f67130f09[data-surface='3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='danger'],\n .Grid_bui-GridItem__9f67130f09[data-surface='danger'] {\n background-color: var(--bui-bg-danger);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='warning'],\n .Grid_bui-GridItem__9f67130f09[data-surface='warning'] {\n background-color: var(--bui-bg-warning);\n }\n\n .Grid_bui-Grid__9f67130f09[data-surface='success'],\n .Grid_bui-GridItem__9f67130f09[data-surface='success'] {\n background-color: var(--bui-bg-success);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Grid":"Grid_bui-Grid__9f67130f09","bui-GridItem":"Grid_bui-GridItem__9f67130f09"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Header_bui-
|
|
4
|
-
var styles = {"bui-HeaderToolbar":"Header_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Header_bui-HeaderToolbar__844bf781e8 {\n margin-bottom: var(--bui-space-6);\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0px;\n right: 0px;\n height: 16px;\n background-color: var(--bui-bg-neutral-0);\n z-index: 0;\n }\n\n &[data-has-tabs='true'] {\n margin-bottom: 0;\n }\n }\n\n .Header_bui-HeaderToolbarWrapper__844bf781e8 {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n background-color: var(--bui-bg-neutral-1);\n padding-inline: var(--bui-space-5);\n border-bottom: 1px solid var(--bui-border);\n color: var(--bui-fg-primary);\n height: 52px;\n }\n\n .Header_bui-HeaderToolbarContent__844bf781e8 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .Header_bui-HeaderToolbarName__844bf781e8 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n flex-shrink: 0;\n }\n\n .Header_bui-HeaderToolbarIcon__844bf781e8 {\n width: 16px;\n height: 16px;\n color: var(--bui-fg-primary);\n\n & svg {\n width: 100%;\n height: 100%;\n }\n }\n\n .Header_bui-HeaderToolbarControls__844bf781e8 {\n position: absolute;\n right: var(--bui-space-5);\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .Header_bui-HeaderTabsWrapper__844bf781e8 {\n margin-bottom: var(--bui-space-4);\n padding-inline: var(--bui-space-3);\n border-bottom: 1px solid var(--bui-border);\n background-color: var(--bui-bg-neutral-1);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-HeaderToolbar":"Header_bui-HeaderToolbar__844bf781e8","bui-HeaderToolbarWrapper":"Header_bui-HeaderToolbarWrapper__844bf781e8","bui-HeaderToolbarContent":"Header_bui-HeaderToolbarContent__844bf781e8","bui-HeaderToolbarName":"Header_bui-HeaderToolbarName__844bf781e8","bui-HeaderToolbarIcon":"Header_bui-HeaderToolbarIcon__844bf781e8","bui-HeaderToolbarControls":"Header_bui-HeaderToolbarControls__844bf781e8","bui-HeaderTabsWrapper":"Header_bui-HeaderTabsWrapper__844bf781e8"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Menu_bui-
|
|
4
|
-
var styles = {"bui-MenuPopover":"Menu_bui-
|
|
3
|
+
var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Menu_bui-MenuPopover__02d9661e47 {\n display: flex;\n flex-direction: column;\n box-shadow: var(--bui-shadow);\n border: 1px solid var(--bui-border);\n border-radius: var(--bui-radius-2);\n background: var(--bui-bg-neutral-1);\n color: var(--bui-fg-primary);\n outline: none;\n transition: transform 200ms, opacity 200ms;\n /* Let React Aria handle height constraints naturally */\n min-height: 0;\n /* Remove overflow from popover since ScrollArea will handle it */\n overflow: hidden;\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--origin);\n opacity: 0;\n }\n\n &[data-placement='top'] {\n --origin: translateY(8px);\n }\n\n &[data-placement='bottom'] {\n --origin: translateY(-8px);\n }\n\n &[data-placement='right'] {\n --origin: translateX(-8px);\n }\n\n &[data-placement='left'] {\n --origin: translateX(8px);\n }\n }\n\n .Menu_bui-MenuContent__02d9661e47 {\n max-height: inherit;\n box-sizing: border-box;\n overflow: auto;\n min-width: 150px;\n box-sizing: border-box;\n outline: none;\n padding-block: var(--bui-space-1);\n }\n\n .Menu_bui-MenuItem__02d9661e47 {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &[data-focused] .Menu_bui-MenuItemWrapper__02d9661e47 {\n background: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-open] .Menu_bui-MenuItemWrapper__02d9661e47 {\n background: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-color='danger'] .Menu_bui-MenuItemWrapper__02d9661e47 {\n color: var(--bui-fg-danger);\n }\n\n &[data-color='danger'][data-focused] .Menu_bui-MenuItemWrapper__02d9661e47 {\n background: var(--bui-bg-danger);\n color: var(--bui-fg-danger);\n }\n\n &[data-has-submenu] {\n & > .Menu_bui-MenuItemWrapper__02d9661e47 > .Menu_bui-MenuItemArrow__02d9661e47 {\n display: block;\n }\n }\n }\n\n .Menu_bui-MenuItemWrapper__02d9661e47 {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 2rem;\n padding-inline: var(--bui-space-2);\n border-radius: var(--bui-radius-2);\n outline: none;\n cursor: default;\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-6);\n }\n\n .Menu_bui-MenuItemListBox__02d9661e47 {\n padding-inline: var(--bui-space-1);\n display: block;\n\n &:hover .Menu_bui-MenuItemWrapper__02d9661e47 {\n background: var(--bui-bg-neutral-2);\n color: var(--bui-fg-primary);\n }\n\n &[data-selected] .Menu_bui-MenuItemListBoxCheck__02d9661e47 {\n & > svg {\n opacity: 1;\n color: var(--bui-fg-primary);\n }\n }\n }\n\n .Menu_bui-MenuItemListBoxCheck__02d9661e47 {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n opacity: 0;\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu_bui-MenuItemContent__02d9661e47 {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu_bui-MenuItemArrow__02d9661e47 {\n display: none;\n width: 1rem;\n height: 1rem;\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu_bui-MenuSection__02d9661e47 {\n &:first-child .Menu_bui-MenuSectionHeader__02d9661e47 {\n padding-top: 0;\n }\n }\n\n .Menu_bui-MenuSectionHeader__02d9661e47 {\n height: 2rem;\n display: flex;\n align-items: center;\n padding-top: var(--bui-space-3);\n padding-left: var(--bui-space-3);\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-1);\n font-weight: bold;\n letter-spacing: 0.05rem;\n text-transform: uppercase;\n }\n\n .Menu_bui-MenuSeparator__02d9661e47 {\n height: 1px;\n background: var(--bui-border);\n margin-inline: var(--bui-space-1_5);\n margin-block: var(--bui-space-1);\n }\n\n .Menu_bui-MenuSearchField__02d9661e47 {\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--bui-border);\n background-color: var(--bui-bg-neutral-1);\n height: 2rem;\n\n &[data-empty] {\n .Menu_bui-MenuSearchFieldClear__02d9661e47 {\n visibility: hidden;\n }\n }\n }\n\n .Menu_bui-MenuSearchFieldInput__02d9661e47 {\n flex: 1;\n display: flex;\n align-items: center;\n padding: 0;\n border: none;\n background-color: transparent;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n width: 100%;\n height: 100%;\n outline: none;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &:first-child {\n padding-inline: var(--bui-space-3) 0;\n }\n }\n\n .Menu_bui-MenuSearchFieldClear__02d9661e47 {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: 2rem;\n height: 2rem;\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & > svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Menu_bui-MenuEmptyState__02d9661e47 {\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-2);\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-MenuPopover":"Menu_bui-MenuPopover__02d9661e47","bui-MenuContent":"Menu_bui-MenuContent__02d9661e47","bui-MenuItem":"Menu_bui-MenuItem__02d9661e47","bui-MenuItemWrapper":"Menu_bui-MenuItemWrapper__02d9661e47","bui-MenuItemArrow":"Menu_bui-MenuItemArrow__02d9661e47","bui-MenuItemListBox":"Menu_bui-MenuItemListBox__02d9661e47","bui-MenuItemListBoxCheck":"Menu_bui-MenuItemListBoxCheck__02d9661e47","bui-MenuItemContent":"Menu_bui-MenuItemContent__02d9661e47","bui-MenuSection":"Menu_bui-MenuSection__02d9661e47","bui-MenuSectionHeader":"Menu_bui-MenuSectionHeader__02d9661e47","bui-MenuSeparator":"Menu_bui-MenuSeparator__02d9661e47","bui-MenuSearchField":"Menu_bui-MenuSearchField__02d9661e47","bui-MenuSearchFieldClear":"Menu_bui-MenuSearchFieldClear__02d9661e47","bui-MenuSearchFieldInput":"Menu_bui-MenuSearchFieldInput__02d9661e47","bui-MenuEmptyState":"Menu_bui-MenuEmptyState__02d9661e47"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useEffect, useState } from 'react';
|
|
3
|
+
import { TextField, Input, Button } from 'react-aria-components';
|
|
4
|
+
import clsx from 'clsx';
|
|
5
|
+
import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
|
|
6
|
+
import { FieldError } from '../FieldError/FieldError.esm.js';
|
|
7
|
+
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
8
|
+
import { PasswordFieldDefinition } from './definition.esm.js';
|
|
9
|
+
import { RiEyeLine, RiEyeOffLine } from '@remixicon/react';
|
|
10
|
+
import stylesPasswordField from './PasswordField.module.css.esm.js';
|
|
11
|
+
|
|
12
|
+
const PasswordField = forwardRef(
|
|
13
|
+
(props, ref) => {
|
|
14
|
+
const {
|
|
15
|
+
label,
|
|
16
|
+
"aria-label": ariaLabel,
|
|
17
|
+
"aria-labelledby": ariaLabelledBy
|
|
18
|
+
} = props;
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
21
|
+
console.warn(
|
|
22
|
+
"PasswordField requires either a visible label, aria-label, or aria-labelledby for accessibility"
|
|
23
|
+
);
|
|
24
|
+
}
|
|
25
|
+
}, [label, ariaLabel, ariaLabelledBy]);
|
|
26
|
+
const {
|
|
27
|
+
classNames: classNamesPasswordField,
|
|
28
|
+
dataAttributes,
|
|
29
|
+
cleanedProps
|
|
30
|
+
} = useStyles(PasswordFieldDefinition, {
|
|
31
|
+
size: "small",
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
const {
|
|
35
|
+
className,
|
|
36
|
+
description,
|
|
37
|
+
icon,
|
|
38
|
+
isRequired,
|
|
39
|
+
secondaryLabel,
|
|
40
|
+
placeholder,
|
|
41
|
+
...rest
|
|
42
|
+
} = cleanedProps;
|
|
43
|
+
const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
|
|
44
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
45
|
+
return /* @__PURE__ */ jsxs(
|
|
46
|
+
TextField,
|
|
47
|
+
{
|
|
48
|
+
className: clsx(
|
|
49
|
+
classNamesPasswordField.root,
|
|
50
|
+
stylesPasswordField[classNamesPasswordField.root],
|
|
51
|
+
className
|
|
52
|
+
),
|
|
53
|
+
...dataAttributes,
|
|
54
|
+
"aria-label": ariaLabel,
|
|
55
|
+
"aria-labelledby": ariaLabelledBy,
|
|
56
|
+
type: "password",
|
|
57
|
+
...rest,
|
|
58
|
+
ref,
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ jsx(
|
|
61
|
+
FieldLabel,
|
|
62
|
+
{
|
|
63
|
+
label,
|
|
64
|
+
secondaryLabel: secondaryLabelText,
|
|
65
|
+
description
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ jsxs(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
className: clsx(
|
|
72
|
+
classNamesPasswordField.inputWrapper,
|
|
73
|
+
stylesPasswordField[classNamesPasswordField.inputWrapper]
|
|
74
|
+
),
|
|
75
|
+
"data-size": dataAttributes["data-size"],
|
|
76
|
+
children: [
|
|
77
|
+
icon && /* @__PURE__ */ jsx(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
className: clsx(
|
|
81
|
+
classNamesPasswordField.inputIcon,
|
|
82
|
+
stylesPasswordField[classNamesPasswordField.inputIcon]
|
|
83
|
+
),
|
|
84
|
+
"data-size": dataAttributes["data-size"],
|
|
85
|
+
"aria-hidden": "true",
|
|
86
|
+
children: icon
|
|
87
|
+
}
|
|
88
|
+
),
|
|
89
|
+
/* @__PURE__ */ jsx(
|
|
90
|
+
Input,
|
|
91
|
+
{
|
|
92
|
+
className: clsx(
|
|
93
|
+
classNamesPasswordField.input,
|
|
94
|
+
stylesPasswordField[classNamesPasswordField.input]
|
|
95
|
+
),
|
|
96
|
+
...icon && { "data-icon": true },
|
|
97
|
+
placeholder,
|
|
98
|
+
type: isVisible ? "text" : "password"
|
|
99
|
+
}
|
|
100
|
+
),
|
|
101
|
+
/* @__PURE__ */ jsx(
|
|
102
|
+
Button,
|
|
103
|
+
{
|
|
104
|
+
"data-size": dataAttributes["data-size"],
|
|
105
|
+
"data-variant": "tertiary",
|
|
106
|
+
"aria-label": isVisible ? "Hide value" : "Show value",
|
|
107
|
+
"aria-controls": isVisible ? "text" : "password",
|
|
108
|
+
"aria-expanded": isVisible,
|
|
109
|
+
onPress: () => setIsVisible((v) => !v),
|
|
110
|
+
className: clsx(
|
|
111
|
+
classNamesPasswordField.inputVisibility,
|
|
112
|
+
stylesPasswordField[classNamesPasswordField.inputVisibility]
|
|
113
|
+
),
|
|
114
|
+
children: isVisible ? /* @__PURE__ */ jsx(RiEyeLine, {}) : /* @__PURE__ */ jsx(RiEyeOffLine, {})
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
),
|
|
120
|
+
/* @__PURE__ */ jsx(FieldError, {})
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
PasswordField.displayName = "PasswordField";
|
|
127
|
+
|
|
128
|
+
export { PasswordField };
|
|
129
|
+
//# sourceMappingURL=PasswordField.esm.js.map
|