diff --git a/packages/demo-app-ts/package.json b/packages/demo-app-ts/package.json index 4a294c12..3853d095 100644 --- a/packages/demo-app-ts/package.json +++ b/packages/demo-app-ts/package.json @@ -9,9 +9,9 @@ "serve:demo-app": "node scripts/serve" }, "dependencies": { - "@patternfly/react-core": "^6.0.0-alpha.26", - "@patternfly/react-icons": "^6.0.0-alpha.11", - "@patternfly/react-styles": "^6.0.0-alpha.11", + "@patternfly/react-core": "6.0.0-alpha.70", + "@patternfly/react-icons": "6.0.0-alpha.24", + "@patternfly/react-styles": "6.0.0-alpha.24", "react": "^18", "react-dom": "^18", "react-router": "^5.3.3", diff --git a/packages/demo-app-ts/src/App.css b/packages/demo-app-ts/src/App.css index 7a7a4ddb..3351c0e6 100755 --- a/packages/demo-app-ts/src/App.css +++ b/packages/demo-app-ts/src/App.css @@ -43,3 +43,10 @@ transform: rotate(360deg); } } + +#ts-demo-app-page-id { + flex: 1 +} +.pf-v6-c-tab-content { + flex: 1; +} diff --git a/packages/demo-app-ts/src/App.tsx b/packages/demo-app-ts/src/App.tsx index 8652e9b8..e3d1b210 100755 --- a/packages/demo-app-ts/src/App.tsx +++ b/packages/demo-app-ts/src/App.tsx @@ -53,9 +53,9 @@ class App extends React.Component<{}, AppState> { const htmlElement = document.getElementsByTagName('html')[0]; if (htmlElement) { if (isDarkTheme) { - htmlElement.classList.add('pf-v5-theme-dark'); + htmlElement.classList.add('pf-v6-theme-dark'); } else { - htmlElement.classList.remove('pf-v5-theme-dark'); + htmlElement.classList.remove('pf-v6-theme-dark'); } } }; @@ -207,7 +207,7 @@ class App extends React.Component<{}, AppState> { return ( - + {this.getPages()} diff --git a/packages/demo-app-ts/src/Demo.css b/packages/demo-app-ts/src/Demo.css index b93877a5..224ca68a 100644 --- a/packages/demo-app-ts/src/Demo.css +++ b/packages/demo-app-ts/src/Demo.css @@ -6,35 +6,35 @@ } .pf-ri__topology-demo .pf-topology-visualization-surface { - border: 1px solid var(--pf-v5-global--BorderColor--100); + border: 1px solid var(--pf-t--global--border--color--100); border-top: none; } -.pf-ri__topology-demo .pf-v5-c-tab-content { +.pf-ri__topology-demo .pf-v6-c-tab-content { display: flex; flex-direction: column; flex-grow: 1; } -.pf-ri__topology-demo .pf-v5-c-tab-content:focus { +.pf-ri__topology-demo .pf-v6-c-tab-content:focus { outline: none; } -.pf-ri__topology-demo .pf-v5-c-toolbar { - --pf-v5-c-toolbar__expandable-content--lg--PaddingBottom: 0; - --pf-v5-c-toolbar--PaddingBottom: 0; +.pf-ri__topology-demo .pf-v6-c-toolbar { + --pf-v6-c-toolbar__expandable-content--lg--PaddingBottom: 0; + --pf-v6-c-toolbar--PaddingBottom: 0; } -.pf-ri__topology-demo .pf-v5-c-toolbar__item .pf-v5-l-flex { - --pf-v5-l-flex--FlexWrap: no-wrap; +.pf-ri__topology-demo .pf-v6-c-toolbar__item .pf-v6-l-flex { + --pf-v6-l-flex--FlexWrap: no-wrap; } -.pf-ri__topology-demo .pf-v5-c-toolbar__item .pf-v5-c-form-control { +.pf-ri__topology-demo .pf-v6-c-toolbar__item .pf-v6-c-form-control { width: 70px; } .pf-ri-topology-context-menu { z-index: 1050; } -.pf-ri-topology-context-menu__kebab-wrapper.pf-v5-c-dropdown__menu-item { +.pf-ri-topology-context-menu__kebab-wrapper.pf-v6-c-dropdown__menu-item { padding: 0; } .pf-ri__topology-demo__package-input { @@ -42,35 +42,39 @@ } .pf-ri-topology__node__background { - fill: var(--pf-v5-global--palette--black-400); + fill: var(--pf-t--color--gray--40); stroke-width: 1px; - stroke: var(--pf-v5-global--palette--black-1000); + stroke: var(--pf-t--color--black); } .pf-ri-topology__node__background.pf-m-selected { - fill: var(--pf-v5-global--active-color--100); + fill: var(--pf-t--color--blue--50); } .pf-ri-topology__node__background.pf-m-hover { - fill: var(--pf-v5-global--palette--green-300); + fill: var(--pf-t--color--green--40); } .pf-ri-topology__node__background.pf-m-drop-target { - fill: var(--pf-v5-global--palette--light-blue-200); + fill: var(--pf-t--color--blue--20); } -.pf-v5-c-page__main-section#\/topology-demo-page-section, -.pf-v5-c-page__main-section#\/topology-pipelines-demo-page-section, -.pf-v5-c-page__main-section#\/topology-pipelines-groups-demo-page-section { - --pf-v5-c-page__main-section--PaddingTop: 0; - --pf-v5-c-page__main-section--PaddingRight: 0; - --pf-v5-c-page__main-section--PaddingLeft: 0; - --pf-v5-c-page__main-section--PaddingBottom: 0; +.pf-v6-c-page__main-section#\/topology-demo-page-section, +.pf-v6-c-page__main-section#\/topology-pipelines-demo-page-section, +.pf-v6-c-page__main-section#\/topology-pipelines-groups-demo-page-section { + --pf-v6-c-page__main-section--PaddingTop: 0; + --pf-v6-c-page__main-section--PaddingRight: 0; + --pf-v6-c-page__main-section--PaddingLeft: 0; + --pf-v6-c-page__main-section--PaddingBottom: 0; } .topology-demo-badge > rect { - fill: var(--pf-v5-global--palette--red-100); + fill: var(--pf-t--color--red--50); } .topology-demo-badge > text { - fill: var(--pf-v5-global--palette--gold-100); + fill: var(--pf-t--global--color--nonstatus--gold--200); } + +.pf-v6-c-toolbar__content.pf-m-hidden { + display: none; +} \ No newline at end of file diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx index 9a22fb7e..272a7f18 100644 --- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx +++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx @@ -6,8 +6,8 @@ import { MenuToggle, MenuToggleElement, Select, - SelectList, SelectOption, + SelectList, TextInput, ToolbarItem } from '@patternfly/react-core'; diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx index e5db01b1..f2f147ee 100644 --- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx +++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsViewBar.tsx @@ -31,7 +31,7 @@ const OptionsContextBar: React.FC<{ controller: Controller }> = observer(({ cont const layoutDropdown = ( - + , document.getElementById('root')); diff --git a/packages/module/package.json b/packages/module/package.json index 155bb9d5..6ebbe5c3 100644 --- a/packages/module/package.json +++ b/packages/module/package.json @@ -33,9 +33,9 @@ "tag": "alpha" }, "dependencies": { - "@patternfly/react-core": "^6.0.0-alpha.26", - "@patternfly/react-icons": "^6.0.0-alpha.11", - "@patternfly/react-styles": "^6.0.0-alpha.11", + "@patternfly/react-core": "6.0.0-alpha.70", + "@patternfly/react-icons": "6.0.0-alpha.24", + "@patternfly/react-styles": "6.0.0-alpha.24", "@types/d3": "^7.4.0", "@types/d3-force": "^1.2.1", "@types/react-measure": "^2.0.6", @@ -54,11 +54,11 @@ "react-dom": "^17 || ^18" }, "devDependencies": { - "@patternfly/documentation-framework": "^5.2.15", - "@patternfly/patternfly": "^6.0.0-alpha.74", + "@patternfly/documentation-framework": "6.0.0-alpha.50", + "@patternfly/patternfly": "6.0.0-alpha.167", "@patternfly/patternfly-a11y": "^4.3.1", - "@patternfly/react-code-editor": "^6.0.0-alpha.26", - "@patternfly/react-table": "^6.0.0-alpha.26", + "@patternfly/react-code-editor": "6.0.0-alpha.70", + "@patternfly/react-table": "6.0.0-alpha.71", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "camel-case": "^3.0.0", diff --git a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx index ed3ca9a2..b236b8f1 100644 --- a/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx +++ b/packages/module/patternfly-docs/content/examples/TopologyLayoutsDemo.tsx @@ -259,7 +259,7 @@ export const LayoutsDemo: React.FC = () => { const layoutDropdown = ( - + button { +.ws-extensions-t-topology .pf-topology-view__project-toolbar .pf-v6-c-dropdown>button { justify-content: space-between; width: 150px; } diff --git a/packages/module/patternfly-docs/content/examples/topology-pipelines-example.css b/packages/module/patternfly-docs/content/examples/topology-pipelines-example.css index 7f0f3102..dc5eb606 100644 --- a/packages/module/patternfly-docs/content/examples/topology-pipelines-example.css +++ b/packages/module/patternfly-docs/content/examples/topology-pipelines-example.css @@ -1,6 +1,6 @@ .ws-react-t-pipelines { height: 300px; - border: 1px solid var(--pf-v5-global--palette--black-900); + border: 1px solid var(--pf-t--color--black); padding: 0; - margin: var(--pf-v5-global--spacer--md); + margin: var(--pf-t--global--spacer--300); } diff --git a/packages/module/patternfly-docs/generated/index.js b/packages/module/patternfly-docs/generated/index.js deleted file mode 100644 index 6423ff5f..00000000 --- a/packages/module/patternfly-docs/generated/index.js +++ /dev/null @@ -1,157 +0,0 @@ -module.exports = { - '/topology/anchors/extensions': { - id: "Anchors", - title: "Anchors", - toc: [[{"text":"Using custom anchors"}]], - examples: ["Using custom anchors"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 13, - Component: () => import(/* webpackChunkName: "topology/anchors/extensions/index" */ './topology/anchors/extensions') - }, - '/topology/context-menu/extensions': { - id: "Context Menu", - title: "Context Menu", - toc: [[{"text":"Topology with context menus"}]], - examples: ["Topology with context menus"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 23, - Component: () => import(/* webpackChunkName: "topology/context-menu/extensions/index" */ './topology/context-menu/extensions') - }, - '/topology/control-bar/extensions': { - id: "Control Bar", - title: "Control Bar", - toc: [[{"text":"Topology with a control bar"}]], - examples: ["Topology with a control bar"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 31, - Component: () => import(/* webpackChunkName: "topology/control-bar/extensions/index" */ './topology/control-bar/extensions') - }, - '/topology/custom-edges/extensions': { - id: "Custom Edges", - title: "Custom Edges", - toc: [[{"text":"Using custom edges"}]], - examples: ["Using custom edges"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 12, - Component: () => import(/* webpackChunkName: "topology/custom-edges/extensions/index" */ './topology/custom-edges/extensions') - }, - '/topology/custom-nodes/extensions': { - id: "Custom Nodes", - title: "Custom Nodes", - toc: [[{"text":"Using custom nodes"}]], - examples: ["Using custom nodes"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 11, - Component: () => import(/* webpackChunkName: "topology/custom-nodes/extensions/index" */ './topology/custom-nodes/extensions') - }, - '/topology/drag-and-drop/extensions': { - id: "Drag and Drop", - title: "Drag and Drop", - toc: [[{"text":"Drag and Drop"}],{"text":"Functions"},[{"text":"withDragNode"},{"text":"withSourceDrag"},{"text":"withTargetDrag"},{"text":"withDndDrop"}]], - examples: ["Drag and Drop"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 24, - Component: () => import(/* webpackChunkName: "topology/drag-and-drop/extensions/index" */ './topology/drag-and-drop/extensions') - }, - '/topology/getting-started/extensions': { - id: "Getting started", - title: "Getting started", - toc: [[{"text":"Getting started with react-topology"}]], - examples: ["Getting started with react-topology"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 1, - Component: () => import(/* webpackChunkName: "topology/getting-started/extensions/index" */ './topology/getting-started/extensions') - }, - '/topology/layouts/extensions': { - id: "Layouts", - title: "Layouts", - toc: [[{"text":"Layouts"},{"text":"Examples"}]], - examples: ["Examples"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - Component: () => import(/* webpackChunkName: "topology/layouts/extensions/index" */ './topology/layouts/extensions') - }, - '/topology/panzoom/extensions': { - id: "Pan/Zoom", - title: "Pan/Zoom", - toc: [[{"text":"Providing pan and zoom on the graph"}]], - examples: ["Providing pan and zoom on the graph"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 22, - Component: () => import(/* webpackChunkName: "topology/panzoom/extensions/index" */ './topology/panzoom/extensions') - }, - '/topology/pipelines/extensions': { - id: "Pipelines", - title: "Pipelines", - toc: [[{"text":"Getting Started with Topology Pipelines"}],{"text":"Functions"},[{"text":"getSpacerNodes"},{"text":"getEdgesFromNodes"}]], - examples: ["Getting Started with Topology Pipelines"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 71, - Component: () => import(/* webpackChunkName: "topology/pipelines/extensions/index" */ './topology/pipelines/extensions') - }, - '/topology/selection/extensions': { - id: "Selection", - title: "Selection", - toc: [[{"text":"Using selection"}]], - examples: ["Using selection"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 21, - Component: () => import(/* webpackChunkName: "topology/selection/extensions/index" */ './topology/selection/extensions') - }, - '/topology/sidebar/extensions': { - id: "Sidebar", - title: "Sidebar", - toc: [[{"text":"Topology with a side bar"}]], - examples: ["Topology with a side bar"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 33, - Component: () => import(/* webpackChunkName: "topology/sidebar/extensions/index" */ './topology/sidebar/extensions') - }, - '/topology/toolbar/extensions': { - id: "Toolbar", - title: "Toolbar", - toc: [[{"text":"Topology with a toolbar"}]], - examples: ["Topology with a toolbar"], - section: "topology", - subsection: "", - source: "extensions", - tabName: null, - sortValue: 32, - Component: () => import(/* webpackChunkName: "topology/toolbar/extensions/index" */ './topology/toolbar/extensions') - } -}; \ No newline at end of file diff --git a/packages/module/patternfly-docs/pages/index.js b/packages/module/patternfly-docs/pages/index.js index 4bfe5333..2cb7977a 100644 --- a/packages/module/patternfly-docs/pages/index.js +++ b/packages/module/patternfly-docs/pages/index.js @@ -10,7 +10,7 @@ const centerStyle = { const IndexPage = () => { return ( - +
Patternfly topology docs diff --git a/packages/module/src/behavior/useBendpoint.tsx b/packages/module/src/behavior/useBendpoint.tsx index 358a166b..8dac68a7 100644 --- a/packages/module/src/behavior/useBendpoint.tsx +++ b/packages/module/src/behavior/useBendpoint.tsx @@ -14,10 +14,6 @@ import { } from './dnd-types'; import { useDndDrag, WithDndDragProps } from './useDndDrag'; -export interface WithBendpoint { - sourceDragRef: ConnectDragSource; -} - export const useBendpoint = <DropResult, CollectedProps, Props = {}>( point: Point, spec?: Omit< @@ -103,8 +99,3 @@ export const withBendpoint = Component.displayName = `withBendpoint(${WrappedComponent.displayName || WrappedComponent.name})`; return observer(Component); }; - -/** - * @deprecated Use withBendpoint instead - */ -export const WithBendpoint = withBendpoint; diff --git a/packages/module/src/behavior/withContextMenu.tsx b/packages/module/src/behavior/withContextMenu.tsx index c51884b3..b0b212c5 100644 --- a/packages/module/src/behavior/withContextMenu.tsx +++ b/packages/module/src/behavior/withContextMenu.tsx @@ -18,7 +18,7 @@ export const withContextMenu = container?: Element | null | undefined | (() => Element), className?: string, atPoint: boolean = true, - waitElement: React.ReactElement = <Spinner className="pf-v5-u-mx-md" size="md" /> + waitElement: React.ReactElement = <Spinner className="pf-v6-u-mx-md" size="md" /> ) => <P extends WithContextMenuProps>(WrappedComponent: React.ComponentType<P>) => { const Component: React.FunctionComponent<Omit<P, keyof WithContextMenuProps>> = (props) => { diff --git a/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx b/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx index a9e169e6..0d356f97 100644 --- a/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx +++ b/packages/module/src/components/TopologyControlBar/TopologyControlBar.tsx @@ -349,7 +349,7 @@ export const TopologyControlBar: React.FunctionComponent<TopologyControlBarProps > {button.icon} {(button.ariaLabel || button.tooltip) && ( - <span className="pf-v5-screen-reader">{button.ariaLabel || button.tooltip}</span> + <span className="pf-v6-screen-reader">{button.ariaLabel || button.tooltip}</span> )} </Button> ); @@ -366,7 +366,7 @@ export const TopologyControlBar: React.FunctionComponent<TopologyControlBarProps {(randomId) => ( <Toolbar className={className} style={{ backgroundColor: 'transparent', padding: 0 }} id={randomId}> <ToolbarContent> - <ToolbarGroup spaceItems={{ default: 'spaceItemsNone' }}> + <ToolbarGroup gap={{ default: 'gapNone' }}> {controlButtons.map((button: TopologyControlButton) => button.hidden ? null : <ToolbarItem key={button.id}>{renderButton(button)}</ToolbarItem> )} diff --git a/packages/module/src/components/TopologyControlBar/__tests__/__snapshots__/TopologyControlBar.test.tsx.snap b/packages/module/src/components/TopologyControlBar/__tests__/__snapshots__/TopologyControlBar.test.tsx.snap index 99caaf13..6675daf4 100644 --- a/packages/module/src/components/TopologyControlBar/__tests__/__snapshots__/TopologyControlBar.test.tsx.snap +++ b/packages/module/src/components/TopologyControlBar/__tests__/__snapshots__/TopologyControlBar.test.tsx.snap @@ -17,7 +17,7 @@ exports[`TopologyControlBar should accept button options correctly 1`] = ` class="pf-v6-c-toolbar__content-section" > <div - class="pf-v6-c-toolbar__group" + class="pf-v6-c-toolbar__group pf-m-gap-none" > <div class="pf-v6-c-toolbar__item" @@ -39,7 +39,7 @@ exports[`TopologyControlBar should accept button options correctly 1`] = ` test zoom in </span> <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" > test-zoom-in-aria-label </span> @@ -75,7 +75,7 @@ exports[`TopologyControlBar should accept button options correctly 1`] = ` /> </svg> <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" > Zoom Out </span> @@ -111,7 +111,7 @@ exports[`TopologyControlBar should accept button options correctly 1`] = ` /> </svg> <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" > Reset View </span> @@ -150,7 +150,7 @@ exports[`TopologyControlBar should display the default controls correctly 1`] = class="pf-v6-c-toolbar__content-section" > <div - class="pf-v6-c-toolbar__group" + class="pf-v6-c-toolbar__group pf-m-gap-none" > <div class="pf-v6-c-toolbar__item" @@ -182,7 +182,7 @@ exports[`TopologyControlBar should display the default controls correctly 1`] = /> </svg> <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" > Zoom In </span> @@ -218,7 +218,7 @@ exports[`TopologyControlBar should display the default controls correctly 1`] = /> </svg> <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" > Zoom Out </span> @@ -254,7 +254,7 @@ exports[`TopologyControlBar should display the default controls correctly 1`] = /> </svg> <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" > Fit to Screen </span> @@ -290,7 +290,7 @@ exports[`TopologyControlBar should display the default controls correctly 1`] = /> </svg> <span - class="pf-v5-screen-reader" + class="pf-v6-screen-reader" > Reset View </span> diff --git a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx index d6c97544..005ccd09 100644 --- a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx +++ b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import { Dropdown, DropdownItem } from '@patternfly/react-core'; +import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import { css } from '@patternfly/react-styles'; import topologyStyles from '../../css/topology-components'; // FIXME fully qualified due to the effect of long build times on storybook import Popper from '../popper/Popper'; -import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; interface ContextSubMenuItemProps { label: React.ReactNode; @@ -63,7 +63,7 @@ const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({ <div ref={subMenuRef} role="presentation" - className="pf-v5-c-dropdown pf-m-expanded" + className="pf-v6-c-dropdown pf-m-expanded" onMouseLeave={(e) => { // only close the sub menu if the mouse does not enter the item if (!nodeRef.current || !nodeRef.current.contains(e.relatedTarget as Node)) { diff --git a/packages/module/src/components/contextmenu/index.ts b/packages/module/src/components/contextmenu/index.ts index 5489acdf..0c56b371 100644 --- a/packages/module/src/components/contextmenu/index.ts +++ b/packages/module/src/components/contextmenu/index.ts @@ -2,4 +2,4 @@ export { default as ContextMenu } from './ContextMenu'; export { default as ContextSubMenuItem } from './ContextSubMenuItem'; // re-export dropdown components as context menu components -export { DropdownItem as ContextMenuItem, Divider as ContextMenuSeparator } from '@patternfly/react-core'; +export { Divider as ContextMenuSeparator, DropdownItem as ContextMenuItem } from '@patternfly/react-core'; diff --git a/packages/module/src/components/groups/DefaultGroup.tsx b/packages/module/src/components/groups/DefaultGroup.tsx index c0633cae..7194df36 100644 --- a/packages/module/src/components/groups/DefaultGroup.tsx +++ b/packages/module/src/components/groups/DefaultGroup.tsx @@ -84,6 +84,8 @@ interface DefaultGroupProps { contextMenuOpen?: boolean; /** Flag indicating whether to use hull layout or rect layout for expanded groups. Defaults to hull (true) */ hulledOutline?: boolean; + /** Border radius for rectangular groups when expanded. Defaults to 16px */ + borderRadius?: number; } type DefaultGroupInnerProps = Omit<DefaultGroupProps, 'element'> & { element: Node }; diff --git a/packages/module/src/components/groups/DefaultGroupExpanded.tsx b/packages/module/src/components/groups/DefaultGroupExpanded.tsx index 39e7d2a1..c4076724 100644 --- a/packages/module/src/components/groups/DefaultGroupExpanded.tsx +++ b/packages/module/src/components/groups/DefaultGroupExpanded.tsx @@ -44,6 +44,7 @@ type DefaultGroupExpandedProps = { labelPosition?: LabelPosition; labelIconPadding?: number; hulledOutline?: boolean; + borderRadius?: number; } & CollapsibleGroupProps & WithDragNodeProps & WithSelectionProps & @@ -141,7 +142,8 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> = labelPosition, labelIconPadding, onCollapseChange, - hulledOutline = true + hulledOutline = true, + borderRadius = 16 }) => { const [hovered, hoverRef] = useHover(200, 500); const [labelHover, labelHoverRef] = useHover(0); @@ -293,10 +295,18 @@ const DefaultGroupExpanded: React.FunctionComponent<DefaultGroupExpandedProps> = y={boxRef.current.y} width={boxRef.current.width} height={boxRef.current.height} + rx={borderRadius} + ry={borderRadius} /> )} </g> - {groupLabel && isHover ? <Layer id={TOP_LAYER}>{groupLabel}</Layer> : groupLabel} + {groupLabel && isHover ? ( + <Layer id={TOP_LAYER}> + <g className={innerGroupClassName}>{groupLabel}</g> + </Layer> + ) : ( + groupLabel + )} </Layer> </g> ); diff --git a/packages/module/src/components/nodes/DefaultNode.tsx b/packages/module/src/components/nodes/DefaultNode.tsx index c3420764..4f41b269 100644 --- a/packages/module/src/components/nodes/DefaultNode.tsx +++ b/packages/module/src/components/nodes/DefaultNode.tsx @@ -354,6 +354,7 @@ const DefaultNodeInner: React.FunctionComponent<DefaultNodeInnerProps> = observe {showLabel && (label || element.getLabel()) && ( <Layer id={isHover ? TOP_LAYER : undefined}> <g + className={groupClassName} transform={ isHover ? `${scaleNode ? `translate(${translateX}, ${translateY})` : ''} scale(${nodeScale})` diff --git a/packages/module/src/css/topology-components.css b/packages/module/src/css/topology-components.css index 81d8cdf4..ae4b73c1 100644 --- a/packages/module/src/css/topology-components.css +++ b/packages/module/src/css/topology-components.css @@ -1,250 +1,206 @@ :root { --pf-topology-visualization-surface--BackgroundColor: transparent; - --pf-topology__node--Color: #393f44; - /* Create connector */ /* Remove --pf-topology-create-connector-color at a breaking change */ - --pf-topology-create-connector-color: var(--pf-v5-global--secondary-color--100); - --pf-topology__create-connector-color--Stroke: var(--pf-topology-create-connector-color, var(--pf-v5-global--secondary-color--100)); - --pf-topology__create-connector-color--Fill: var(--pf-topology-create-connector-color, var(--pf-v5-global--secondary-color--100)); + --pf-topology-create-connector-color: var(--pf-t--global--border--color--on-secondary); + --pf-topology__create-connector-color--Stroke: var(--pf-topology-create-connector-color, var(--pf-t--global--border--color--on-secondary)); + --pf-topology__create-connector-color--Fill: var(--pf-topology-create-connector-color, var(--pf-t--global--border--color--on-secondary)); /* node */ - --pf-topology__node__background--Fill: var(--pf-v5-global--BackgroundColor--100); - --pf-topology__node__background--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology__node__background--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); - --pf-topology__node--m-dragging--background--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); - - --pf-topology__node--m-hover--background--Stroke: var(--pf-topology__node__background--Stroke); - - --pf-topology__node--m-disabled--Background--Fill: var(--pf-v5-global--BackgroundColor--200); - --pf-topology__node--m-disabled--Background--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology__node--m-info--Background--Fill: var(--pf-v5-global--primary-color--light-100); - --pf-topology__node--m-success--Background--Fill: var(--pf-v5-global--success-color--100); - --pf-topology__node--m-warning--Background--Fill: var(--pf-v5-global--warning-color--100); - --pf-topology__node--m-danger--Background--Fill: var(--pf-v5-global--danger-color--100); - --pf-topology__node--m-selected--Background--Fill: var(--pf-v5-global--active-color--100); - - --pf-topology__node--m-selected--node__background--Stroke: var(--pf-v5-global--active-color--100); - --pf-topology__node--m-info--node__background--Stroke: var(--pf-v5-global--primary-color--light-100); - --pf-topology__node--m-success--node__background--Stroke: var(--pf-v5-global--success-color--100); - --pf-topology__node--m-warning--node__background--Stroke: var(--pf-v5-global--warning-color--100); - --pf-topology__node--m-danger--node__background--Stroke: var(--pf-v5-global--danger-color--100); - - /* node decorators */ - --pf-topology__node_decorator--Color: var(--pf-v5-global--Color--200); - --pf-topology__node__decorator__bg--Fill: var(--pf-v5-global--BackgroundColor--light-100); - --pf-topology__node__decorator__bg--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology__node__decorator__bg--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); + --pf-topology__node--Color: var(--pf-t--global--icon--color--regular); + --pf-topology__node__background--Fill: var(--pf-t--global--background--color--floating--default); + --pf-topology__node__background--Stroke: var(--pf-t--global--border--color--default); + --pf-topology__node__background--StrokeWidth: var(--pf-t--global--border--width--regular); + --pf-topology__node--m-dragging--background--StrokeWidth: var(--pf-t--global--border--width--regular); - --pf-topology__node__decorator__status--m-info--Color: var(--pf-v5-global--primary-color--light-100); - --pf-topology__node__decorator__status--m-danger--Color: var(--pf-v5-global--danger-color--100); - --pf-topology__node__decorator__status--m-warning--Color: var(--pf-v5-global--warning-color--100); - --pf-topology__node__decorator__status--m-success--Color: var(--pf-v5-global--success-color--100); + /* Status changes */ + --pf-topology__node--m-disabled--Background--Fill: var(--pf-t--global--background--color--disabled--default); + --pf-topology__node--m-disabled--Background--Stroke: var(--pf-t--global--border--color--disabled); - /* node labels */ - --pf-topology__node__label__text--Fill: var(--pf-v5-global--palette--black-1000); - --pf-topology__node__label__text--m-secondary--Fill: var(--pf-v5-global--Color--200); - - --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-v5-global--Color--light-100); - --pf-topology__node--m-selected--m-info--node__label__text--Fill: var(--pf-v5-global--palette--black-1000); - --pf-topology__node--m-selected--m-danger--node__label__text--Fill: var(--pf-v5-global--Color--light-100); - --pf-topology__node--m-selected--m-warning--node__label__text--Fill: var(--pf-v5-global--palette--black-1000); - --pf-topology__node--m-selected--m-success--node__label__text--Fill: var(--pf-v5-global--Color--light-100); - - --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-v5-global--Color--light-100); - --pf-topology__node--m-selected--m-info--node__label__text--m-secondary--Fill: var(--pf-v5-global--palette--black-1000); - --pf-topology__node--m-selected--m-warning--node__label__text--m-secondary--Fill: var(--pf-v5-global--palette--black-1000); - --pf-topology__node--m-selected--m-success--node__label__text--m-secondary--Fill: var(--pf-v5-global--Color--light-100); - --pf-topology__node--m-selected--m-danger--node__label__text--m-secondary--Fill: var(--pf-v5-global--Color--light-100); - - --pf-topology__node__label__background--Fill: var(--pf-v5-global--BackgroundColor--100); - --pf-topology__node__label__background--Stroke: var(--pf-v5-global--BorderColor--100); - - --pf-topology__node--m-hover--label__background--Stroke: var(--pf-topology__node__label__background--Stroke); - - --pf-topology__node--m-selected--node__label__background--Stroke: var(--pf-v5-global--active-color--100); - --pf-topology__node--m-info--node__label__background--Stroke: var(--pf-v5-global--primary-color--light-100); - --pf-topology__node--m-success--node__label__background--Stroke: var(--pf-v5-global--success-color--100); - --pf-topology__node--m-warning--node__label__background--Stroke: var(--pf-v5-global--warning-color--100); - --pf-topology__node--m-danger--node__label__background--Stroke: var(--pf-v5-global--danger-color--100); - --pf-topology__node__label__background--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); - --pf-topology__node__label--m-dragging--background--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); - - --pf-topology__node--m-selected--node__label__background--Fill: var(--pf-v5-global--active-color--100); - --pf-topology__node--m-selected--m-info--node__label__background--Fill: var(--pf-v5-global--primary-color--light-100); - --pf-topology__node--m-selected--m-danger--node__label__background--Fill: var(--pf-v5-global--danger-color--100); - --pf-topology__node--m-selected--m-warning--node__label__background--Fill: var(--pf-v5-global--warning-color--100); - --pf-topology__node--m-selected--m-success--node__label__background--Fill: var(--pf-v5-global--success-color--100); + --pf-topology__node--m-info--Background--Fill: var(--pf-t--global--color--nonstatus--blue--default); + --pf-topology__node--m-info--Background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default); - /* node label icon */ - --pf-topology__node__label__icon--Color: var(--pf-v5-global--Color--200); + --pf-topology__node--m-success--Background--Fill: var(--pf-t--global--color--status--success--default); + --pf-topology__node--m-success--Background--Stroke: var(--pf-t--global--border--color--status--success--default); - --pf-topology__node__label__icon__background--Fill: var(--pf-v5-global--palette--white); - --pf-topology__node__label__icon__background--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); - --pf-topology__node__label__icon__background--Stroke: var(--pf-v5-global--BorderColor--100); + --pf-topology__node--m-warning--Background--Fill: var(--pf-t--global--color--status--warning--default); + --pf-topology__node--m-warning--Background--Stroke: var(--pf-t--global--border--color--status--warning--default); - --pf-topology__node--m-selected--label__icon__background--Stroke: var(--pf-v5-global--active-color--100); - --pf-topology__node--m-info--label__icon__background--Stroke: var(--pf-v5-global--primary-color--light-100); - --pf-topology__node--m-success--label__icon__background--Stroke: var(--pf-v5-global--success-color--100); - --pf-topology__node--m-warning--label__icon__background--Stroke: var(--pf-v5-global--warning-color--100); - --pf-topology__node--m-danger--label__icon__background--Stroke: var(--pf-v5-global--danger-color--100); + --pf-topology__node--m-danger--Background--Fill: var(--pf-t--global--color--status--danger--default); + --pf-topology__node--m-danger--Background--Stroke: var(--pf-t--global--border--color--status--danger--default); - --pf-topology__node__label__badge__rect--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); + --pf-topology__node--m-selected--Background--Fill: var(--pf-t--global--border--color--brand--default); + --pf-topology__node--m-selected--Background--Stroke: var(--pf-t--global--border--color--brand--default); - --pf-topology__node__separator--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology__node--m-selected--separator--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology__node__action-icon__icon--Color: var(--pf-v5-global--palette--black-1000); - --pf-topology__node--m-selected--action-icon__icon--Color: var(--pf-v5-global--Color--light-100); + /* Hover changes */ + --pf-topology__node--m-hover--background--Stroke: var(--pf-t--global--border--color--default); + --pf-topology__node--m--hover--m-info--node__background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--hover); + --pf-topology__node--m--hover--m-success--node__background--Stroke: var(--pf-t--global--border--color--status--success--hover); + --pf-topology__node--m--hover--m-warning--node__background--Stroke: var(--pf-t--global--border--color--status--warning--hover); + --pf-topology__node--m--hover--m-danger--node__background--Stroke: var(--pf-t--global--border--color--status--danger--hover); - /* group */ - --pf-topology__group--m-selected--topology__node__action-icon__icon--Color: var(--pf-v5-global--palette--white); + /* Selection changes */ + --pf-topology__node--m-selected__background--StrokeWidth: var(--pf-t--global--border--width--strong); - --pf-topology__group__background--Fill: var(--pf-v5-global--BackgroundColor--light-300); - --pf-topology__group__background--Stroke: var(--pf-v5-global--palette--white); - - --pf-topology__group--m-alt-group--topology__group__background--Fill: var(--pf-v5-global--palette--white); - --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-v5-global--palette--blue-50); - - --pf-topology__group--m-selected--topology__group__background--Stroke: var(--pf-v5-global--active-color--100); - --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-v5-global--BackgroundColor--dark-400); - --pf-topology__group--m-selected--m-hover--topology__group__background--Stroke: var(--pf-v5-global--palette--blue-600); - --pf-topology__group--m-drop-target--topology__group__background--Fill: var(--pf-v5-global--palette--blue-50); - --pf-topology__group--m-drop-target--topology__group__background--Stroke: var(--pf-v5-global--active-color--100); - --pf-topology__group__collapsed-badge__node__label__badge__rect--Fill: var(--pf-v5-global--palette--white); - --pf-topology__group__collapsed-badge__node__label__badge__rect--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology__group__collapsed-badge__node__label__badge__text--Fill: var(--pf-v5-global--palette--black-800); - - --pf-topology__group__label__node__label__background--Fill: var(--pf-v5-global--BackgroundColor--dark-300); - --pf-topology__group__label__node__label__background--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); - --pf-topology__group__label__text--Fill: var(--pf-v5-global--palette--white); - --pf-topology__group__label__node__action-icon__icon--Color: var(--pf-v5-global--palette--white); - --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-v5-global--active-color--100); + /* node decorators */ + --pf-topology__node_decorator--Color: var(--pf-t--global--icon--color--regular); + --pf-topology__node__decorator__bg--Fill: var(--pf-t--global--background--color--floating--default); + --pf-topology__node__decorator__bg--Stroke: var(--pf-t--global--border--color--default); + --pf-topology__node__decorator__bg--StrokeWidth: var(--pf-t--global--border--width--regular); - /* edge */ - --pf-topology__edge--Stroke: var(--pf-v5-global--secondary-color--100); - --pf-topology__edge--StrokeWidth: var(--pf-v5-global--BorderWidth--sm); - --pf-topology__edge--HoverStroke: var(--pf-v5-global--Color--100); - --pf-topology__edge--ActiveStroke: var(--pf-v5-global--active-color--100); - --pf-topology__edge--ActiveStrokeWidth: 2px; - --pf-topology__edge--InteractiveStroke: var(--pf-v5-global--active-color--100); + --pf-topology__node__decorator__status--m-info--Color: var(--pf-t--global--icon--color--brand--default); + --pf-topology__node__decorator__status--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default); + --pf-topology__node__decorator__status--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default); + --pf-topology__node__decorator__status--m-success--Color: var(--pf-t--global--icon--color--status--success--default); - --pf-topology__edge--m-info--EdgeStroke: var(--pf-v5-global--primary-color--light-100); - --pf-topology__edge--m-success--EdgeStroke: var(--pf-v5-global--success-color--100); - --pf-topology__edge--m-warning--EdgeStroke: var(--pf-v5-global--warning-color--100); - --pf-topology__edge--m-danger--EdgeStroke: var(--pf-v5-global--danger-color--100); + /* node labels */ + --pf-topology__node__label__text--Fill: var(--pf-t--global--text--color--regular); + --pf-topology__node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--subtle); + + --pf-topology__node--m-hover--node__label__text--Fill: var(--pf-t--global--text--color--on-brand--default); + --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-t--global--text--color--on-brand--default); + --pf-topology__node--m-selected--m-info--node__label__text--Fill: var(--pf-t--global--text--color--nonstatus--on-blue--default); + --pf-topology__node--m-selected--m-danger--node__label__text--Fill: var(--pf-t--global--text--color--status--on-danger--default); + --pf-topology__node--m-selected--m-warning--node__label__text--Fill: var(--pf-t--global--text--color--regular); + --pf-topology__node--m-selected--m-success--node__label__text--Fill: var(--pf-t--global--text--color--status--on-success--default); + + --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--on-brand--default); + --pf-topology__node--m-selected--m-info--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--nonstatus--on-blue--default); + --pf-topology__node--m-selected--m-warning--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--status--on-warning--default); + --pf-topology__node--m-selected--m-success--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--status--on-success--default); + --pf-topology__node--m-selected--m-danger--node__label__text--m-secondary--Fill: var(--pf-t--global--text--color--status--on-danger--default); + + --pf-topology__node__label__background--Fill: var(--pf-t--global--background--color--floating--default); + --pf-topology__node__label__background--Stroke: var(--pf-t--global--border--color--default); + + --pf-topology__node--m-hover--label__background--Stroke: var(--pf-t--global--border--color--default); + + --pf-topology__node--m-selected--node__label__background--Stroke: var(--pf-t--global--border--color--brand--default); + --pf-topology__node--m-info--node__label__background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default); + --pf-topology__node--m-success--node__label__background--Stroke: var(--pf-t--global--border--color--status--success--default); + --pf-topology__node--m-warning--node__label__background--Stroke: var(--pf-t--global--border--color--status--warning--default); + --pf-topology__node--m-danger--node__label__background--Stroke: var(--pf-t--global--border--color--status--danger--default); + --pf-topology__node__label__background--StrokeWidth: var(--pf-t--global--border--width--regular); + --pf-topology__node__label--m-dragging--background--StrokeWidth: var(--pf-t--global--border--width--regular); + + --pf-topology__node--m--hover--m-info--node__label__background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--hover); + --pf-topology__node--m--hover--m-success--node__label__background--Stroke: var(--pf-t--global--border--color--status--success--hover); + --pf-topology__node--m--hover--m-warning--node__label__background--Stroke: var(--pf-t--global--border--color--status--warning--hover); + --pf-topology__node--m--hover--m-danger--node__label__background--Stroke: var(--pf-t--global--border--color--status--danger--hover); + + --pf-topology__node--m-selected--node__label__background--Fill: var(--pf-t--global--color--brand--default); + --pf-topology__node--m-selected--m-info--node__label__background--Fill: var(--pf-t--global--color--nonstatus--blue--default); + --pf-topology__node--m-selected--m-danger--node__label__background--Fill: var(--pf-t--global--color--status--danger--default); + --pf-topology__node--m-selected--m-warning--node__label__background--Fill: var(--pf-t--global--color--status--warning--default); + --pf-topology__node--m-selected--m-success--node__label__background--Fill: var(--pf-t--global--color--status--success--default); - --pf-topology__edge--m-selected--background--Stroke: var(--pf-v5-global--active-color--200); - --pf-topology__edge--m-hover--background--Stroke: var(--pf-v5-global--BorderColor--100); + /* node label icon */ + --pf-topology__node__label__icon--Color: var(--pf-t--global--icon--color--regular); - --pf-topology__edge__tag__text--Fill: var(--pf-v5-global--palette--white); - --pf-topology__edge__tag__text--Stroke: var(--pf-v5-global--palette--white); + --pf-topology__node__label__icon__background--Fill: var(--pf-t--global--background--color--floating--default); + --pf-topology__node__label__icon__background--StrokeWidth: var(--pf-t--global--border--width--regular); + --pf-topology__node__label__icon__background--Stroke: var(--pf-t--global--border--color--default); - --pf-topology__edge__tag__background--Fill: var(--pf-v5-global--secondary-color--100); - --pf-topology__edge__tag--m-info--background--Fill: var(--pf-v5-global--primary-color--light-100); - --pf-topology__edge__tag--m-success--background--Fill: var(--pf-v5-global--success-color--100); - --pf-topology__edge__tag--m-warning--background--Fill: var(--pf-v5-global--warning-color--100); + --pf-topology__node--m-selected--label__icon__background--Stroke: var(--pf-t--global--border--color--brand--default); + --pf-topology__node--m-selected--label__icon__background--StrokeWidth: var(--pf-t--global--border--width--strong); + --pf-topology__node--m-info--label__icon__background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default); + --pf-topology__node--m-success--label__icon__background--Stroke: var(--pf-t--global--border--color--status--success--default); + --pf-topology__node--m-warning--label__icon__background--Stroke: var(--pf-t--global--border--color--status--warning--default); + --pf-topology__node--m-danger--label__icon__background--Stroke: var(--pf-t--global--border--color--status--danger--default); - --pf-topology__edge__tag--m-warning--text--Fill: var(--pf-v5-global--palette--black-1000); - --pf-topology__edge__tag--m-warning--text--Stroke: var(--pf-v5-global--palette--black-1000); + --pf-topology__node__label__badge__rect--StrokeWidth: var(--pf-t--global--border--width--regular); - --pf-topology__edge__tag--m-danger--background--Fill: var(--pf-v5-global--danger-color--100); + --pf-topology__node__separator--Stroke: var(--pf-t--global--border--color--default); + --pf-topology__node__separator--StrokeWidth: var(--pf-t--global--border--width--regular); + --pf-topology__node--m-selected--separator--Stroke: var(--pf-t--global--border--color--default); - /* connectors */ - --pf-topology-connector-arrow--m-alt-connector-arrow--Fill: var(--pf-v5-global--palette--white); + --pf-topology__node__action-icon__icon--Color: var(--pf-t--global--icon--color--regular); + --pf-topology__node--m-selected--action-icon__icon--Color: var(--pf-t--global--icon--color--on-brand--default); - --pf-topology__connector-square--m-source--Fill: var(--pf-v5-global--BackgroundColor--100); + /* group */ + --pf-topology__group--m-selected--topology__node__action-icon__icon--Color: var(--pf-t--global--icon--color--inverse); - --pf-topology-default-create-connector__arrow--Fill: var(--pf-v5-global--Color--light-200); + --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-t--global--background--color--secondary--default); - --pf-topology-default-create-connector--m-hover--line--Stroke: var(--pf-v5-global--Color--100); - --pf-topology-default-create-connector--m-hover--arrow--Fill: var(--pf-v5-global--Color--100); - --pf-topology-default-create-connector--m-hover--arrow--Stroke: var(--pf-v5-global--Color--100); -} + --pf-topology__group__background--Fill: var(--pf-t--global--background--color--secondary--default); + --pf-topology__group__background--Stroke: var(--pf-t--global--border--color--default); + --pf-topology__group__background--StrokeWidth: 5px; -/* DARK THEME OVERRIDES */ -:root:where(.pf-v5-theme-dark) { - --pf-topology-visualization-surface--BackgroundColor: var(--pf-v5-global--BackgroundColor--200); + --pf-topology__group--m-alt-group--topology__group__background--Fill: var(--pf-t--global--background--color--primary--default); + --pf-topology__group--m-alt-group--topology__group__background--Stroke: var(--pf-t--global--border--color--default); - --pf-topology__node--Color: var(--pf-v5-global--Color--100); + --pf-topology__group--m-selected--topology__group__background--Stroke: var(--pf-t--global--border--color--clicked); + --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-t--global--border--color--hover); + --pf-topology__group--m-selected--m-hover--topology__group__background--Stroke: var(--pf-t--global--border--color--hover); + --pf-topology__group--m-drop-target--topology__group__background--Fill: var(--pf-t--global--color--nonstatus--blue--default); + --pf-topology__group--m-drop-target--topology__group__background--Stroke: var(--pf-t--global--border--color--brand--default); + --pf-topology__group__collapsed-badge__node__label__badge__rect--Fill: var(--pf-t--global--background--color--floating--default); + --pf-topology__group__collapsed-badge__node__label__badge__rect--Stroke: var(--pf-t--global--border--color--default); + --pf-topology__group__collapsed-badge__node__label__badge__text--Fill: var(--pf-t--global--text--color--regular); - /* dark create connector */ - --pf-topology__create-connector-color--Stroke: var(--pf-v5-global--palette--black-300); - --pf-topology__create-connector-color--Fill: var(--pf-v5-global--palette--black-100); - --pf-topology-default-create-connector__arrow--Fill: var(--pf-v5-global--BackgroundColor--100); - --pf-topology-default-create-connector--m-hover--line--Stroke: var(--pf-v5-global--palette--black-100); - --pf-topology-default-create-connector--m-hover--arrow--Fill: var(--pf-v5-global--palette--black-100); - --pf-topology-default-create-connector--m-hover--arrow--Stroke: var(--pf-v5-global--palette--black-100); + --pf-topology__group__label__node__label__background--Fill: var(--pf-t--global--background--color--inverse--default); + --pf-topology__group__label__node__label__background--StrokeWidth: var(--pf-t--global--border--width--regular); + --pf-topology__group__label__text--Fill: var(--pf-t--global--text--color--inverse); + --pf-topology__group__label__node__action-icon__icon--Color: var(--pf-t--global--icon--color--inverse); + --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-t--global--color--brand--default); - /* dark node */ - --pf-topology__node__background--Fill: var(--pf-v5-global--BackgroundColor--300); - --pf-topology__node__background--Stroke: var(--pf-v5-global--palette--black-300); + /* edge */ + --pf-topology__edge--Stroke: #707070; + --pf-topology__edge--StrokeWidth: var(--pf-t--global--border--width--regular); + --pf-topology__edge--HoverStroke: var(--pf-t--global--border--color--hover); + --pf-topology__edge--ActiveStroke: var(--pf-t--global--border--color--clicked); + --pf-topology__edge--ActiveStrokeWidth: var(--pf-t--global--border--width--strong); + --pf-topology__edge--InteractiveStroke: var(--pf-t--global--border--color--brand--default); - --pf-topology__node--m-disabled--Background--Fill: var(--pf-topology__node__background--Fill); - --pf-topology__node--m-disabled--Background--Stroke: var(--pf-v5-global--palette--black-500); + --pf-topology__edge--m-info--EdgeStroke: var(--pf-t--global--border--color--brand--default); + --pf-topology__edge--m-success--EdgeStroke: var(--pf-t--global--border--color--status--success--default); + --pf-topology__edge--m-warning--EdgeStroke: var(--pf-t--global--border--color--status--warning--default); + --pf-topology__edge--m-danger--EdgeStroke: var(--pf-t--global--border--color--status--danger--default); - --pf-topology__node--m-dragging--background--StrokeWidth: 2px; + --pf-topology__edge--m-info--EdgeFill: var(--pf-t--global--border--color--brand--default); + --pf-topology__edge--m-success--EdgeFill: var(--pf-t--global--border--color--status--success--default); + --pf-topology__edge--m-warning--EdgeFill: var(--pf-t--global--border--color--status--warning--default); + --pf-topology__edge--m-danger--EdgeFill: var(--pf-t--global--border--color--status--danger--default); - --pf-topology__node--m-hover--background--Stroke: var(--pf-v5-global--palette--black-100); - --pf-topology__node--m-hover--label__background--Stroke: var(--pf-v5-global--palette--black-100); + --pf-topology__edge--m-selected--background--Stroke: var(--pf-t--global--border--color--default); + --pf-topology__edge--m-hover--background--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default); - /* dark node labels */ - --pf-topology__node__label__background--Fill: var(--pf-v5-global--BackgroundColor--300); - --pf-topology__node__label__background--Stroke: var(--pf-v5-global--BorderColor--300); - --pf-topology__node__label--m-dragging--background--StrokeWidth: 2px; - --pf-topology__node__label__text--Fill: var(--pf-v5-global--Color--100); + --pf-topology__edge__tag__text--Fill: var(--pf-t--global--text--color--inverse); + --pf-topology__edge__tag__text--Stroke: var(--pf-t--global--text--color--inverse); - /* dark selected nodes */ - --pf-topology__node--m-selected--node__background--Stroke: var(--pf-v5-global--primary-color--300); - --pf-topology__node--m-selected--node__label__background--Stroke: var(--pf-v5-global--primary-color--300); - --pf-topology__node--m-selected--node__label__background--Fill: var(--pf-v5-global--primary-color--300); + --pf-topology__edge__tag__background--Fill: var(--pf-t--global--background--color--inverse--default); + --pf-topology__edge__tag--m-info--background--Fill: var(--pf-t--global--color--nonstatus--blue--default); - --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-v5-global--Color--100); - --pf-topology__node--m-selected--m-info--node__label__text--Fill: var(--pf-v5-global--palette--black-900); - --pf-topology__node--m-selected--m-danger--node__label__text--Fill: var(--pf-v5-global--palette--black-900); - --pf-topology__node--m-selected--m-warning--node__label__text--Fill: var(--pf-v5-global--palette--black-900); - --pf-topology__node--m-selected--m-success--node__label__text--Fill: var(--pf-v5-global--palette--black-900); + --pf-topology__edge__tag--m-info--text--Fill: var(--pf-t--global--text--color--nonstatus--on-blue--default); + --pf-topology__edge__tag--m-info--text--Stroke: var(--pf-t--global--text--color--nonstatus--on-blue--default); - --pf-topology__node--m-selected--node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--node__label__text--Fill); - --pf-topology__node--m-selected--m-info--node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--m-info--node__label__text--Fill); - --pf-topology__node--m-selected--m-warning--node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--m-warning--node__label__text--Fill); - --pf-topology__node--m-selected--m-success--node__label__text--m-secondary--Fill: var(--pf-topology__node--m-selected--m-success--node__label__text--Fill); - --pf-topology__node--m-selected--m-danger--node__label__text--m-secondary--Fill: var(--pf-v5-global--palette--black-900); + --pf-topology__edge__tag--m-success--background--Fill: var(--pf-t--global--color--status--success--default); - --pf-topology__node__label__icon--Color: var(--pf-v5-global--palette--black-600); + --pf-topology__edge__tag--m-success--text--Fill: var(--pf-t--global--text--color--status--on-success--default); + --pf-topology__edge__tag--m-success--text--Stroke: var(--pf-t--global--text--color--status--on-success--default); - --pf-topology__node__action-icon__icon--Color: var(--pf-v5-global--Color--100); + --pf-topology__edge__tag--m-warning--background--Fill: var(--pf-t--global--color--status--warning--default); - /* dark group */ - --pf-topology__group__background--Fill: var(--pf-v5-global--BackgroundColor--300); - --pf-topology__group__background--Stroke: var(--pf-v5-global--palette--black-300); - --pf-topology__group--m-alt-group--topology__group__background--Fill: var(--pf-v5-global--palette--black-500); - --pf-topology__group--m-alt-group--topology__group__background--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology__group--m-selected--topology__group__background--Fill: var(--pf-v5-global--primary-color--300); - --pf-topology__group--m-selected--topology__group__background--Stroke: var(--pf-v5-global--active-color--300); - --pf-topology__group--m-hover--topology__group__background--Stroke: var(--pf-v5-global--primary-color--light-100); - --pf-topology__group--m-selected--m-hover--topology__group__background--Stroke: var(--pf-v5-global--palette--blue-100); - --pf-topology__group--m-drop-target--topology__group__background--Stroke: var(--pf-v5-global--palette--blue-300); + --pf-topology__edge__tag--m-warning--text--Fill: var(--pf-t--global--text--color--status--on-warning--default); + --pf-topology__edge__tag--m-warning--text--Stroke: var(--pf-t--global--text--color--status--on-warning--default); - --pf-topology__group__label__node__label__background--StrokeWidth: 2px; - --pf-topology__group__label__node__label__background--Stroke: var(--pf-v5-global--palette--black-300); - --pf-topology__group--m-hover--label__node__label__background--Stroke: var(--pf-v5-global--palette--black-100); - --pf-topology__group--m-selected--label__node__label__background--Stroke: var(--pf-v5-global--primary-color--300); + --pf-topology__edge__tag--m-danger--background--Fill: var(--pf-t--global--color--status--danger--default); - --pf-topology__group--m-selected--group__label__node__label__background--Fill: var(--pf-v5-global--primary-color--300); + --pf-topology__edge__tag--m-danger--text--Fill: var(--pf-t--global--text--color--status--on-danger--default); + --pf-topology__edge__tag--m-danger--text--Stroke: var(--pf-t--global--text--color--status--on-danger--default); - /* dark edge */ - --pf-topology__edge--HoverStroke: var(--pf-v5-global--palette--black-300); - --pf-topology__edge--m-hover--background--Stroke: var(--pf-v5-global--palette--black-600); + /* connectors */ + --pf-topology-connector-arrow--m-alt-connector-arrow--Fill: var(--pf-t--global--icon--color--regular); - --pf-topology__edge--ActiveStroke: var(--pf-v5-global--palette--blue-300); - --pf-topology__edge--m-selected--background--Stroke: var(--pf-v5-global--palette--black-600); + --pf-topology__connector-square--m-source--Fill: var(--pf-t--global--background--color--secondary--default); - --pf-topology__edge__tag__background--Fill: var(--pf-v5-global--palette--black-300); - --pf-topology__edge__tag__text--Fill: var(--pf-v5-global--palette--black-900); - --pf-topology__edge__tag__text--Stroke: var(--pf-v5-global--palette--black-900); + --pf-topology-default-create-connector__arrow--Fill: var(--pf-t--global--background--color--secondary--default); + --pf-topology-default-create-connector--m-hover--line--Stroke: var(--pf-t--global--border--color--default); + --pf-topology-default-create-connector--m-hover--arrow--Fill: var(--pf-t--global--border--color--default); + --pf-topology-default-create-connector--m-hover--arrow--Stroke: var(--pf-t--global--border--color--default); } .pf-topology-visualization-surface { @@ -272,12 +228,12 @@ .pf-topology-context-sub-menu { position: relative; - padding-right: var(--pf-v5-global--spacer--lg) !important; + padding-right: var(--pf-t--global--spacer--lg) !important; } .pf-topology-context-sub-menu__arrow { position: absolute; - right: var(--pf-v5-global--spacer--xs); + right: var(--pf-t--global--spacer--xs); top: 50%; transform: translateY(-50%); } @@ -294,17 +250,16 @@ fill: var(--pf-topology__node--Color); } -.pf-topology__node.pf-m-hover { - --pf-topology__node__background--Stroke: var(--pf-topology__node--m-hover--background--Stroke); - --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-hover--label__background--Stroke); -} - .pf-topology__node__background { fill: var(--pf-topology__node__background--Fill); stroke-width: var(--pf-topology__node__background--StrokeWidth); stroke: var(--pf-topology__node__background--Stroke); } +.pf-topology__node__background.pf-m-hover { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-info--node__background--Stroke); +} + .pf-topology__node__background.pf-m-disabled { --pf-topology__node__background--Fill: var(--pf-topology__node--m-disabled--Background--Fill); --pf-topology__node__background--Stroke: var(--pf-topology__node--m-disabled--Background--Stroke); @@ -314,10 +269,18 @@ --pf-topology__node__background--Fill: var(--pf-topology__node--m-info--Background--Fill); } +.pf-topology__node__background.pf-m-hover.pf-m-info { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-info--node__background--Stroke); +} + .pf-topology__node__background.pf-m-success { --pf-topology__node__background--Fill: var(--pf-topology__node--m-success--Background--Fill); } +.pf-topology__node__background.pf-m-success.pf-m-hover { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-success--node__background--Stroke); +} + .pf-topology__node__background.pf-m-warning { --pf-topology__node__background--Fill: var(--pf-topology__node--m-warning--Background--Fill); } @@ -340,24 +303,48 @@ } .pf-topology__node.pf-m-selected .pf-topology__node__background { - stroke-width: 2px; - --pf-topology__node__background--Stroke: var(--pf-topology__node--m-selected--node__background--Stroke); + stroke-width: var(--pf-topology__node--m-selected__background--StrokeWidth); + --pf-topology__node__background--Stroke: var(--pf-topology__node--m-selected--Background--Stroke); } .pf-topology__node.pf-m-info .pf-topology__node__background { - --pf-topology__node__background--Stroke: var(--pf-topology__node--m-info--node__background--Stroke); + --pf-topology__node__background--Stroke: var(--pf-topology__node--m-info--Background--Stroke); +} + +.pf-topology__node.pf-m-hover .pf-topology__node__background { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m-hover--background--Stroke); +} + +.pf-topology__node.pf-m-hover.pf-m-selected .pf-topology__node__background { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m-selected--Background--Stroke); +} + +.pf-topology__node.pf-m-hover.pf-m-info .pf-topology__node__background { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m-info--Background--Stroke); } .pf-topology__node.pf-m-success .pf-topology__node__background { - --pf-topology__node__background--Stroke: var(--pf-topology__node--m-success--node__background--Stroke); + --pf-topology__node__background--Stroke: var(--pf-topology__node--m-success--Background--Stroke); +} + +.pf-topology__node.pf-m-hover.pf-m-success .pf-topology__node__background { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-success--node__label__background--Stroke); } .pf-topology__node.pf-m-warning .pf-topology__node__background { - --pf-topology__node__background--Stroke: var(--pf-topology__node--m-warning--node__background--Stroke); + --pf-topology__node__background--Stroke: var(--pf-topology__node--m-warning--Background--Stroke); +} + +.pf-topology__node.pf-m-hover.pf-m-warning .pf-topology__node__background { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-warning--node__label__background--Stroke); } .pf-topology__node.pf-m-danger .pf-topology__node__background { - --pf-topology__node__background--Stroke: var(--pf-topology__node--m-danger--node__background--Stroke); + --pf-topology__node__background--Stroke: var(--pf-topology__node--m-danger--Background--Stroke); +} + +.pf-topology__node.pf-m-hover.pf-m-danger .pf-topology__node__background { + --pf-topology__node__background--Stroke: var(--pf-topology__node--m--hover--m-danger--node__label__background--Stroke); } /* Node decorator */ @@ -368,7 +355,7 @@ } .pf-topology__node__decorator svg { - fill: var(--pf-topology__node_decorator--Color); + fill: var(--pf-topology__node_decorator--Color); } .pf-topology__node__decorator__bg { @@ -378,7 +365,7 @@ } .pf-topology__node__decorator__icon { - font-size: var(--pf-v5-global--icon--FontSize--sm); + font-size: var(--pf-t--global--icon--size--font--body--sm); color: var(--pf-topology__node_decorator--Color); } @@ -407,13 +394,13 @@ .pf-topology__node__label > text { fill: var(--pf-topology__node__label__text--Fill); - font-size: var(--pf-v5-global--FontSize--sm); + font-size: var(--pf-t--global--font--size--body--sm); pointer-events: none; } .pf-topology__node__label > text.pf-m-secondary { fill: var(--pf-topology__node__label__text--m-secondary--Fill); - font-size: var(--pf-v5-global--FontSize--xs); + font-size: var(--pf-t--global--font--size--body--sm); } .pf-topology__node__label__background { @@ -423,7 +410,6 @@ } .pf-topology__node.pf-m-selected { - stroke-width: 2px; --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-selected--node__label__background--Stroke); --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--node__label__background--Fill); --pf-topology__node__separator--Stroke: var(--pf-topology__node--m-selected--node__label__text--m-secondary--Fill); @@ -434,18 +420,34 @@ --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-info--node__label__background--Stroke); } +.pf-topology__node.pf-m-hover.pf-m-info { + --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m--hover--m-info--node__label__background--Stroke); +} + .pf-topology__node.pf-m-success { --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-success--node__label__background--Stroke); } +.pf-topology__node.pf-m-hover.pf-m-success { + --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m--hover--m-success--node__label__background--Stroke); +} .pf-topology__node.pf-m-warning { --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-warning--node__label__background--Stroke); } +.pf-topology__node.pf-m-hover.pf-m-warning { + --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m--hover--m-warning--node__label__background--Stroke); +} + .pf-topology__node.pf-m-danger { --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m-danger--node__label__background--Stroke); } +.pf-topology__node.pf-m-hover.pf-m-danger { + --pf-topology__node__label__background--Stroke: var(--pf-topology__node--m--hover--m-danger--node__label__background--Stroke); +} + + .pf-topology__node.pf-m-selected.pf-m-info { --pf-topology__node__label__background--Fill: var(--pf-topology__node--m-selected--m-info--node__label__background--Fill); --pf-topology__node--m-selected--node__label__text--Fill: var(--pf-topology__node--m-selected--m-info--node__label__text--Fill); @@ -477,7 +479,7 @@ } .pf-topology__node__label__badge > text { - font-size: var(--pf-v5-global--FontSize--xs); + font-size: var(--pf-t--global--font--size--body--sm); pointer-events: none; } @@ -498,7 +500,7 @@ } .pf-topology__node.pf-m-selected .pf-topology__node__label__icon__background { - stroke-width: 2px; + stroke-width: var(--pf-topology__node--m-selected--label__icon__background--StrokeWidth); stroke: var(--pf-topology__node--m-selected--label__icon__background--Stroke); } @@ -520,7 +522,7 @@ .pf-topology__node__separator { stroke: var(--pf-topology__node__separator--Stroke); - stroke-width: 1; + stroke-width: var(--pf-topology__node__separator--StrokeWidth); } .pf-topology__node__action-icon { @@ -552,7 +554,7 @@ .pf-topology__group__background { fill: var(--pf-topology__group__background--Fill); stroke: var(--pf-topology__group__background--Stroke); - stroke-width: 5px; + stroke-width: var(--pf-topology__group__background--StrokeWidth); } .pf-topology__group.pf-m-alt-group .pf-topology__group__background { @@ -567,13 +569,13 @@ .pf-topology__group.pf-m-hover .pf-topology__group__background { --pf-topology__group__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke); - --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke); + --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke); } .pf-topology__group.pf-m-hover.pf-m-selected .pf-topology__group__background { --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill); --pf-topology__group__background--Stroke: var(--pf-topology__group--m-selected--m-hover--topology__group__background--Stroke); - --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke); + --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-selected--m-hover--topology__group__background--Stroke); } .pf-topology__group.pf-m-drop-target .pf-topology__group__background { @@ -588,7 +590,7 @@ } .pf-topology__group__collapsed-badge.pf-topology__node__label__badge > text { - font-size: var(--pf-v5-global--FontSize--xs); + font-size: var(--pf-t--global--font--size--body--sm); pointer-events: none; fill: var(--pf-topology__group__collapsed-badge__node__label__badge__text--Fill); } @@ -602,7 +604,7 @@ .pf-topology__group__label > text { fill: var(--pf-topology__group__label__text--Fill); - font-size: var(--pf-v5-global--FontSize--sm); + font-size: var(--pf-t--global--font--size--body--sm); pointer-events: none; } @@ -612,7 +614,7 @@ .pf-topology__group.pf-m-selected .pf-topology__group__label .pf-topology__node__label__background { fill: var(--pf-topology__group--m-selected--group__label__node__label__background--Fill); - --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-selected--label__node__label__background--Stroke); + --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke); } /* Edge */ @@ -622,7 +624,7 @@ --edge--stroke: var(--pf-topology__edge--Stroke); --edge--fill: var(--edge--stroke); --edge--opacity: 1; - --edge--cursor: default; + --edge--cursor: pointer; --edge--hover--stroke: var(--pf-topology__edge--HoverStroke); --edge--hover--fill: var(--edge--hover--stroke); --edge--active--stroke: var(--pf-topology__edge--ActiveStroke); @@ -635,39 +637,33 @@ cursor: var(--edge--cursor); stroke: var(--edge--stroke); - fill: none; + fill: var(--edge--fill); opacity: var(--edge--opacity); } -.pf-topology__edge.pf-m-selectable { - --edge--cursor: pointer; -} .pf-topology__edge.pf-m-info { --edge--stroke: var(--pf-topology__edge--m-info--EdgeStroke); + --edge--fill: var(--pf-topology__edge--m-info--EdgeFill); } .pf-topology__edge.pf-m-success { --edge--stroke: var(--pf-topology__edge--m-success--EdgeStroke); - --edge--fill: var(--pf-v5-global--success-color--100); + --edge--fill: var(--pf-topology__edge--m-success--EdgeFill); } .pf-topology__edge.pf-m-warning { --edge--stroke: var(--pf-topology__edge--m-warning--EdgeStroke); - --edge--fill: var(--pf-v5-global--warning-color--100); + --edge--fill: var(--pf-topology__edge--m-warning--EdgeFill); } .pf-topology__edge.pf-m-danger { --edge--stroke: var(--pf-topology__edge--m-danger--EdgeStroke); - --edge--file: var(--pf-v5-global--danger-color--100); + --edge--file: var(--pf-topology__edge--m-danger--EdgeFill); } .pf-topology__edge__background { stroke-width: 10px; stroke: transparent; fill: none; - cursor: var(--edge--cursor); -} -.pf-topology__edge__background.pf-m-selectable { - cursor: pointer; } .pf-topology__edge.pf-m-selected .pf-topology__edge__background { stroke: var(--pf-topology__edge--m-selected--background--Stroke); @@ -679,9 +675,8 @@ .pf-topology__edge__link { stroke-width: var(--edge--stroke-width); stroke-dasharray: var(--edge--stroke-dasharray); + fill-opacity: 0; animation: pf-topology__edge__dash 0s linear infinite forwards; - --edge--cursor: pointer; - fill: none; } .pf-topology__edge__link.pf-m-dotted { @@ -713,38 +708,30 @@ .pf-topology__edge.pf-m-selected .pf-topology__edge__link, .pf-topology__edge.pf-m-selected .pf-topology-connector-arrow { + fill: var(--edge--active--fill); stroke: var(--edge--active--stroke); stroke-width: var(--edge--active--stroke-width); } -.pf-topology__edge.pf-m-selected .pf-topology-connector-arrow { - fill: var(--edge--active--fill); -} .pf-topology__edge.pf-m-selected.pf-m-hover .pf-topology__edge__link, -.pf-topology__edge.pf-m-selected.pf-m-hover .pf-topology-connector-arrow { - stroke: var(--edge--active--stroke); -} .pf-topology__edge.pf-m-selected.pf-m-hover .pf-topology-connector-arrow { fill: var(--edge--active--fill); + stroke: var(--edge--active--stroke); } .pf-topology__edge.pf-m-dragging { pointer-events: none; } .pf-topology__edge.pf-m-hover .pf-topology__edge__link, -.pf-topology__edge.pf-m-hover .pf-topology-connector-arrow { - stroke: var(--edge--hover--stroke); -} .pf-topology__edge.pf-m-hover .pf-topology-connector-arrow { fill: var(--edge--hover--fill); + stroke: var(--edge--hover--stroke); } .pf-topology__edge.pf-m-dragging .pf-topology__edge__link, -.pf-topology__edge.pf-m-dragging .pf-topology-connector-arrow { - stroke: var(--edge--interactive--stroke); -} .pf-topology__edge.pf-m-dragging .pf-topology-connector-arrow { fill: var(--edge--interactive--fill); + stroke: var(--edge--interactive--stroke); } .pf-topology__edge .pf-topology-connector-arrow { @@ -773,10 +760,21 @@ fill: var(--pf-topology__edge__tag--m-info--background--Fill); } +.pf-topology__edge__tag.pf-m-info > text { + fill: var(--pf-topology__edge__tag--m-info--text--Fill); + stroke: var(--pf-topology__edge__tag--m-info--text--Stroke); +} + + .pf-topology__edge__tag.pf-m-success .pf-topology__edge__tag__background { fill: var(--pf-topology__edge__tag--m-success--background--Fill); } +.pf-topology__edge__tag.pf-m-success > text { + fill: var(--pf-topology__edge__tag--m-success--text--Fill); + stroke: var(--pf-topology__edge__tag--m-success--text--Stroke); +} + .pf-topology__edge__tag.pf-m-warning .pf-topology__edge__tag__background { fill: var(--pf-topology__edge__tag--m-warning--background--Fill); } @@ -790,11 +788,16 @@ fill: var(--pf-topology__edge__tag--m-danger--background--Fill); } +.pf-topology__edge__tag.pf-m-danger > text { + fill: var(--pf-topology__edge__tag--m-danger--text--Fill); + stroke: var(--pf-topology__edge__tag--m-danger--text--Stroke); +} + + /* Connectors */ .pf-topology-connector-arrow { stroke-width: 1; stroke: var(--edge--stroke); - fill: var(--edge--fill) } .pf-topology-connector-arrow.pf-m-alt-connector-arrow { @@ -860,4 +863,3 @@ .pf-topology-default-create-connector__create__cursor { fill: var(--pf-topology__create-connector-color--Fill); } - diff --git a/packages/module/src/css/topology-controlbar.css b/packages/module/src/css/topology-controlbar.css index d920085a..d81b8b7f 100644 --- a/packages/module/src/css/topology-controlbar.css +++ b/packages/module/src/css/topology-controlbar.css @@ -1,22 +1,23 @@ .pf-topology-control-bar { position: absolute; - bottom: var(--pf-v5-global--spacer--md); - left: var(--pf-v5-global--spacer--xl); + bottom: 0; + left: var(--pf-t--global--spacer--lg); } -.pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary { - margin-right: var(--pf-v5-global--spacer--xs); - margin-top: var(--pf-v5-global--spacer--xs); +.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary { + margin-right: var(--pf-t--global--spacer--gap--control-to-control--default); + margin-top: var(--pf-t--global--spacer--xs); + padding: var(--pf-t--global--spacer--control--vertical--plain) var(--pf-t--global--spacer--control--horizontal--default); border: none; - border-radius: var(--pf-v5-global--BorderRadius--sm); - box-shadow: var(--pf-v5-global--BoxShadow--sm); + border-radius: var(--pf-t--global--border--radius--small); + box-shadow: var(--pf-t--global--box-shadow--sm); } -.pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary:not(.pf-m-disabled) { - background-color: var(--pf-v5-global--BackgroundColor--100); +.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary:not(.pf-m-disabled) { + background-color: var(--pf-t--global--background--color--primary--default); } -.pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary:after { +.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary:after { display: none; } -.pf-topology-control-bar__button.pf-v5-c-button.pf-m-tertiary:hover { +.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary:hover { border: none; - box-shadow: var(--pf-v5-global--BoxShadow--md); + box-shadow: var(--pf-t--global--box-shadow--md); } diff --git a/packages/module/src/css/topology-pipelines.css b/packages/module/src/css/topology-pipelines.css index 84d24e28..29b1cb56 100644 --- a/packages/module/src/css/topology-pipelines.css +++ b/packages/module/src/css/topology-pipelines.css @@ -1,155 +1,121 @@ :root { /* pill */ - --pf-topology-pipelines__pill--Color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-text--FontSize: var(--pf-v5-global--FontSize--sm); - --pf-topology-pipelines__pill-text--FontFamily: var(--pf-v5-global--FontFamily--sans-serif); - --pf-topology-pipelines__pill-background--Fill: var(--pf-v5-global--BackgroundColor--100); - --pf-topology-pipelines__pill-background--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology-pipelines__pill-background--StrokeWidth: 1px; + --pf-topology-pipelines__pill--Color: var(--pf-t--global--text--color--regular); + --pf-topology-pipelines__pill-text--FontSize: var(--pf-t--global--font--size--body--sm); + --pf-topology-pipelines__pill-text--FontFamily: var(--pf-t--global--font--family--body); + --pf-topology-pipelines__pill-background--Fill: var(--pf-t--global--background--color--floating--default); + --pf-topology-pipelines__pill-background--Stroke: var(--pf-t--global--border--color--default); + --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-t--global--border--width--regular); /* pill with status */ - --pf-topology-pipelines__pill-background--m-danger--Fill: var(--pf-v5-global--danger-color--100); - --pf-topology-pipelines__pill-background--m-success--Fill: var(--pf-v5-global--success-color--100); - --pf-topology-pipelines__pill-background--m-warning--Fill: var(--pf-v5-global--warning-color--100); - --pf-topology-pipelines__pill-background--m-skipped--Fill: var(--pf-v5-global--secondary-color--100); - --pf-topology-pipelines__pill-background--m-in-progress--Fill: var(--pf-v5-global--info-color--100); - --pf-topology-pipelines__pill-background--m-pending--Fill: var(--pf-v5-global--BackgroundColor--100); - --pf-topology-pipelines__pill-background--m-running--Fill: var(--pf-v5-global--BackgroundColor--100); - --pf-topology-pipelines__pill-background--m-idle--Fill: var(--pf-v5-global--BackgroundColor--100); - - --pf-topology-pipelines__pill-background--m-danger--Stroke: var(--pf-v5-global--danger-color--100); - --pf-topology-pipelines__pill-background--m-success--Stroke: var(--pf-v5-global--success-color--100); - --pf-topology-pipelines__pill-background--m-warning--Stroke: var(--pf-v5-global--warning-color--100); - --pf-topology-pipelines__pill-background--m-skipped--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology-pipelines__pill-background--m-in-progress--Stroke: var(--pf-v5-global--info-color--100); - --pf-topology-pipelines__pill-background--m-pending--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology-pipelines__pill-background--m-running--Stroke: var(--pf-v5-global--BorderColor--100); - --pf-topology-pipelines__pill-background--m-idle--Stroke: var(--pf-v5-global--BorderColor--100); + --pf-topology-pipelines__pill-background--m-danger--Fill: var(--pf-t--global--color--status--danger--default); + --pf-topology-pipelines__pill-background--m-success--Fill: var(--pf-t--global--color--status--success--default); + --pf-topology-pipelines__pill-background--m-warning--Fill: var(--pf-t--global--color--status--warning--default); + --pf-topology-pipelines__pill-background--m-skipped--Fill: var(--pf-t--global--color--nonstatus--gray--default); + --pf-topology-pipelines__pill-background--m-in-progress--Fill: var(--pf-t--global--color--nonstatus--blue--default); + --pf-topology-pipelines__pill-background--m-pending--Fill: var(--pf-t--global--background--color--floating--default); + --pf-topology-pipelines__pill-background--m-running--Fill: var(--pf-t--global--icon--color--on-brand--default); + --pf-topology-pipelines__pill-background--m-idle--Fill: var(--pf-t--global--background--color--floating--default); + + --pf-topology-pipelines__pill-background--m-danger--Stroke: var(--pf-t--global--border--color--status--danger--default); + --pf-topology-pipelines__pill-background--m-success--Stroke: var(--pf-t--global--border--color--status--success--default); + --pf-topology-pipelines__pill-background--m-warning--Stroke: var(--pf-t--global--border--color--status--warning--default); + --pf-topology-pipelines__pill-background--m-skipped--Stroke: var(--pf-t--global--border--color--nonstatus--gray--default); + --pf-topology-pipelines__pill-background--m-in-progress--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default); + --pf-topology-pipelines__pill-background--m-pending--Stroke: var(--pf-t--global--border--color--default); + --pf-topology-pipelines__pill-background--m-running--Stroke: var(--pf-t--global--border--color--nonstatus--blue--default); + --pf-topology-pipelines__pill-background--m-idle--Stroke: var(--pf-t--global--border--color--default); /* selected pill */ - --pf-topology-pipelines__pill-background--m-selected--Fill: var(--pf-v5-global--active-color--100); - --pf-topology-pipelines__pill-background--m-selected--Stroke: var(--pf-v5-global--active-color--100); - --pf-topology-pipelines__pill-background--m-selected__text--Color: var(--pf-v5-global--Color--light-100); + --pf-topology-pipelines__pill-background--m-selected--Fill: var(--pf-t--global--color--brand--default); + --pf-topology-pipelines__pill-background--m-selected--Stroke: var(--pf-t--global--border--color--brand--default); + --pf-topology-pipelines__pill-background--m-selected__text--Color: var(--pf-t--global--text--color--on-brand--default); /* selected pill with status */ - --pf-topology-pipelines__pill-background--m-selected--m-danger--Fill: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-background--m-selected--m-success--Fill: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-background--m-selected--m-warning--Fill: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-background--m-selected--m-skipped--Fill: var(--pf-v5-global--secondary-color--100); - --pf-topology-pipelines__pill-background--m-selected--m-in-progress--Fill: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-background--m-selected--m-pending--Fill: var(--pf-v5-global--BorderColor--100); - --pf-topology-pipelines__pill-background--m-selected--m-running--Fill: var(--pf-v5-global--BorderColor--100); - --pf-topology-pipelines__pill-background--m-selected--m-idle--Fill: var(--pf-v5-global--BorderColor--100); + --pf-topology-pipelines__pill-background--m-selected--m-danger--Fill: var(--pf-t--global--color--status--danger--default); + --pf-topology-pipelines__pill-background--m-selected--m-success--Fill: var(--pf-t--global--color--status--success--default); + --pf-topology-pipelines__pill-background--m-selected--m-warning--Fill: var(--pf-t--global--color--status--warning--default); + --pf-topology-pipelines__pill-background--m-selected--m-skipped--Fill: var(--pf-t--global--color--nonstatus--gray--clicked); + --pf-topology-pipelines__pill-background--m-selected--m-in-progress--Fill: var(--pf-t--global--color--nonstatus--blue--default); + --pf-topology-pipelines__pill-background--m-selected--m-pending--Fill: var(--pf-t--global--color--brand--default); + --pf-topology-pipelines__pill-background--m-selected--m-running--Fill: var(--pf-t--global--color--nonstatus--blue--default); + --pf-topology-pipelines__pill-background--m-selected--m-idle--Fill: var(--pf-t--global--color--brand--default); --pf-topology-pipelines__pill-text--Color: var(--pf-topology-pipelines__pill--Color); - --pf-topology-pipelines__pill-text--m-selected--Color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-text--m-selected--m-danger--Color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-text--m-selected--m-success--Color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-text--m-selected--m-warning--Color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-text--m-selected--m-skipped--Color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-v5-global--palette--black-1000); - --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-v5-global--palette--black-1000); - --pf-topology-pipelines__pill-text--m-selected--m-idle--Color: var(--pf-v5-global--palette--black-1000); + --pf-topology-pipelines__pill-text--m-selected--Color: var(--pf-t--global--text--color--on-brand--default); + --pf-topology-pipelines__pill-text--m-selected--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default); + --pf-topology-pipelines__pill-text--m-selected--m-success--Color: var(--pf-t--global--text--color--status--on-success--default); + --pf-topology-pipelines__pill-text--m-selected--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default); + --pf-topology-pipelines__pill-text--m-selected--m-skipped--Color: var(--pf-t--global--text--color--nonstatus--on-gray--clicked); + --pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default); + --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-t--global--text--color--on-brand--default); + --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-t--global--text--color--on-brand--default); + --pf-topology-pipelines__pill-text--m-selected--m-idle--Color: var(--pf-t--global--text--color--on-brand--default); /* pill status icon */ - --pf-topology-pipelines__pill-status--color: var(--pf-v5-global--BorderColor--100); - --pf-topology-pipelines__pill-status--m-danger--color: var(--pf-v5-global--danger-color--100); - --pf-topology-pipelines__pill-status--m-success--color: var(--pf-v5-global--success-color--100); - --pf-topology-pipelines__pill-status--m-warning--color: var(--pf-v5-global--warning-color--100); - --pf-topology-pipelines__pill-status--m-skipped--color: var(--pf-v5-global--secondary-color--100); - --pf-topology-pipelines__pill-status--m-in-progress--color: var(--pf-v5-global--info-color--100); - --pf-topology-pipelines__pill-status--m-pending--color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-status--m-running--color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-status--m-idle--color: var(--pf-v5-global--Color--100); + --pf-topology-pipelines__pill-status--color: var(--pf-t--global--icon--color--regular); + --pf-topology-pipelines__pill-status--m-danger--color: var(--pf-t--global--icon--color--status--danger--default); + --pf-topology-pipelines__pill-status--m-success--color: var(--pf-t--global--icon--color--status--success--default); + --pf-topology-pipelines__pill-status--m-warning--color: var(--pf-t--global--icon--color--status--warning--default); + --pf-topology-pipelines__pill-status--m-skipped--color: var(--pf-t--global--icon--color--subtle); + --pf-topology-pipelines__pill-status--m-in-progress--color: var(--pf-t--global--icon--color--brand--default); + --pf-topology-pipelines__pill-status--m-pending--color: var(--pf-t--global--icon--color--regular); + --pf-topology-pipelines__pill-status--m-running--color: var(--pf-t--global--icon--color--brand--default); + --pf-topology-pipelines__pill-status--m-idle--color: var(--pf-t--global--icon--color--regular); /* selected pill status icon */ - --pf-topology-pipelines__pill-status--m-selected--color: var(--pf-v5-global--active-color--100); - --pf-topology-pipelines__pill-status--m-selected--m-danger--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-status--m-selected--m-success--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-status--m-selected--m-warning--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-status--m-selected--m-skipped--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-status--m-selected--m-in-progress--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__pill-status--m-selected--m-pending--color: var(--pf-v5-global--palette--black-1000); - --pf-topology-pipelines__pill-status--m-selected--m-running--color: var(--pf-v5-global--palette--black-1000); - --pf-topology-pipelines__pill-status--m-selected--m-idle--color: var(--pf-v5-global--palette--black-1000); - - --pf-topology-pipelines__pill-badge--fill: var(--pf-v5-global--palette--black-200); - --pf-topology-pipelines__pill-badge--text--fill: var(--pf-v5-global--palette--black-1000); + --pf-topology-pipelines__pill-status--m-selected--color: var(--pf-t--global--color--brand--clicked); + --pf-topology-pipelines__pill-status--m-selected--m-danger--color: var(--pf-t--global--icon--color--status--on-danger--default); + --pf-topology-pipelines__pill-status--m-selected--m-success--color: var(--pf-t--global--icon--color--status--on-success--default); + --pf-topology-pipelines__pill-status--m-selected--m-warning--color: var(--pf-t--global--icon--color--status--on-warning--default); + --pf-topology-pipelines__pill-status--m-selected--m-skipped--color: var(--pf-t--global--icon--color--nonstatus--on-gray--clicked); + --pf-topology-pipelines__pill-status--m-selected--m-in-progress--color: var(--pf-t--global--icon--color--nonstatus--on-blue--default); + --pf-topology-pipelines__pill-status--m-selected--m-pending--color: var(--pf-t--global--icon--color--on-brand--default); + --pf-topology-pipelines__pill-status--m-selected--m-running--color: var(--pf-t--global--icon--color--nonstatus--on-blue--default); + --pf-topology-pipelines__pill-status--m-selected--m-idle--color: var(--pf-t--global--icon--color--on-brand--default); + + --pf-topology-pipelines__pill-badge--fill: var(--pf-t--global--color--nonstatus--gray--default); + --pf-topology-pipelines__pill-badge--text--fill: var(--pf-t--global--text--color--nonstatus--on-gray--default); /* status icon, (hidden details) */ - --pf-topology-pipelines__status-icon--color: var(--pf-v5-global--BorderColor--100); - --pf-topology-pipelines__status-icon--fill: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__status-icon--m-danger--color: var(--pf-v5-global--danger-color--100); - --pf-topology-pipelines__status-icon--m-success--color: var(--pf-v5-global--success-color--100); - --pf-topology-pipelines__status-icon--m-warning--color: var(--pf-v5-global--warning-color--100); - --pf-topology-pipelines__status-icon--m-skipped--color: var(--pf-v5-global--secondary-color--100); - --pf-topology-pipelines__status-icon--m-in-progress--color: var(--pf-v5-global--info-color--100); - --pf-topology-pipelines__status-icon--m-pending--color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__status-icon--m-running--color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__status-icon--m-idle--color: var(--pf-v5-global--Color--100); - - --pf-topology-pipelines__status-icon--m-selected--color: var(--pf-v5-global--active-color--100); - --pf-topology-pipelines__status-icon--m-selected--m-danger--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__status-icon--m-selected--m-success--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__status-icon--m-selected--m-warning--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__status-icon--m-selected--m-skipped--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__status-icon--m-selected--m-in-progress--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__status-icon--m-selected--m-pending--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__status-icon--m-selected--m-running--color: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__status-icon--m-selected--m-idle--color: var(--pf-v5-global--Color--light-100); - - /* pipelines node label */ - --pf-topology-pipelines__node__label__background--fill: var(--pf-v5-global--Color--light-100); - --pf-topology-pipelines__node__label__background--m-selected--fill: var(--pf-v5-global--active-color--100); + --pf-topology-pipelines__status-icon--color: var(--pf-t--global--border--color--default); + --pf-topology-pipelines__status-icon--fill: var(--pf-t--global--background--color--floating--default); + --pf-topology-pipelines__status-icon--m-danger--color: var(--pf-t--global--icon--color--status--danger--default); + --pf-topology-pipelines__status-icon--m-success--color: var(--pf-t--global--icon--color--status--success--default); + --pf-topology-pipelines__status-icon--m-warning--color: var(--pf-t--global--icon--color--status--warning--default); + --pf-topology-pipelines__status-icon--m-skipped--color: var(--pf-t--global--icon--color--regular); + --pf-topology-pipelines__status-icon--m-in-progress--color: var(--pf-t--global--icon--color--regular); + --pf-topology-pipelines__status-icon--m-pending--color: var(--pf-t--global--icon--color--regular); + --pf-topology-pipelines__status-icon--m-running--color: var(--pf-t--global--icon--color--brand--default); + --pf-topology-pipelines__status-icon--m-idle--color: var(--pf-t--global--icon--color--regular); + + --pf-topology-pipelines__status-icon--m-selected--color: var(--pf-t--global--icon--color--brand--default); + --pf-topology-pipelines__status-icon--m-selected--m-danger--color: var(--pf-t--global--icon--color--status--on-danger--default); + --pf-topology-pipelines__status-icon--m-selected--m-success--color: var(--pf-t--global--icon--color--status--on-success--default); + --pf-topology-pipelines__status-icon--m-selected--m-warning--color: var(--pf-t--global--icon--color--status--on-warning--default); + --pf-topology-pipelines__status-icon--m-selected--m-skipped--color: var(--pf-t--global--icon--color--nonstatus--on-gray--default); + --pf-topology-pipelines__status-icon--m-selected--m-in-progress--color: var(--pf-t--global--icon--color--on-brand--default); + --pf-topology-pipelines__status-icon--m-selected--m-pending--color: var(--pf-t--global--icon--color--on-brand--default); + --pf-topology-pipelines__status-icon--m-selected--m-running--color: var(--pf-t--global--icon--color--on-brand--default); + --pf-topology-pipelines__status-icon--m-selected--m-idle--color: var(--pf-t--global--icon--color--on-brand--default); + /* when expression */ - --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-v5-global--BorderColor--200); - --pf-topology-pipelines__when-expression-background--Fill: var(--pf-v5-global--BorderColor--200); - --pf-topology-pipelines__when-expression--connector--Stroke: var(--pf-v5-global--BorderColor--100); + --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-t--global--border--color--default); + --pf-topology-pipelines__when-expression-background--Fill: var(--pf-t--global--color--nonstatus--gray--clicked); + --pf-topology-pipelines__when-expression--connector--Stroke: var(--pf-t--global--border--color--default); /* when expression with status */ - --pf-topology-pipelines__when-expression--m-danger--color: var(--pf-v5-global--danger-color--100); - --pf-topology-pipelines__when-expression--m-success--color: var(--pf-v5-global--success-color--100); - --pf-topology-pipelines__when-expression--m-warning--color: var(--pf-v5-global--BorderColor--200); - --pf-topology-pipelines__when-expression--m-skipped--color: var(--pf-v5-global--secondary-color--100); - --pf-topology-pipelines__when-expression--m-in-progress--color: var(--pf-v5-global--info-color--100); + --pf-topology-pipelines__when-expression--m-danger--color: var(--pf-t--global--icon--color--status--danger--default); + --pf-topology-pipelines__when-expression--m-success--color: var(--pf-t--global--icon--color--status--success--default); + --pf-topology-pipelines__when-expression--m-warning--color: var(--pf-t--global--icon--color--status--warning--default); + --pf-topology-pipelines__when-expression--m-skipped--color: var(--pf-t--global--icon--color--regular); + --pf-topology-pipelines__when-expression--m-in-progress--color: var(--pf-t--global--icon--color--regular); /* selected when expression */ - --pf-topology-pipelines__when-expression--m-selected--color: var(--pf-v5-global--active-color--100); -} - - -/* DARK THEME OVERRIDES */ -:root:where(.pf-v5-theme-dark) { - - /* dark pill */ - --pf-topology-pipelines__pill--Color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-background--Fill: var(--pf-v5-global--BackgroundColor--300); - --pf-topology-pipelines__pill-background--Stroke: var(--pf-v5-global--palette--black-300); - - /* dark node labels */ - --pf-topology-pipelines__pill-text--Color: var(--pf-v5-global--Color--100); - - /* dark selected nodes */ - --pf-topology-pipelines__pill-text--m-selected--Color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-text--m-selected--m-danger--Color: var(--pf-v5-global--palette--black-900); - --pf-topology-pipelines__pill-text--m-selected--m-success--Color: var(--pf-v5-global--palette--black-900); - --pf-topology-pipelines__pill-text--m-selected--m-warning--Color: var(--pf-v5-global--palette--black-900); - --pf-topology-pipelines__pill-text--m-selected--m-skipped--Color: var(--pf-v5-global--BackgroundColor--150); - --pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color: var(--pf-v5-global--palette--black-900); - --pf-topology-pipelines__pill-text--m-selected--m-pending--Color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-text--m-selected--m-running--Color: var(--pf-v5-global--Color--100); - --pf-topology-pipelines__pill-text--m-selected--m-idle--Color: var(--pf-v5-global--Color--100); - - --pf-topology-pipelines__pill__label__icon--Color: var(--pf-v5-global--palette--black-600); - - --pf-topology-pipelines__pill__action-icon__icon--Color: var(--pf-v5-global--Color--100); - - --pf-topology-pipelines__pill-badge--fill: var(--pf-v5-global--palette--black-500); - --pf-topology-pipelines__pill-badge--text--fill: var(--pf-v5-global--Color--100); + --pf-topology-pipelines__when-expression--m-selected--color: var(--pf-t--global--color--brand--default); } .pf-topology-pipelines__pill { @@ -183,15 +149,15 @@ } .pf-topology-pipelines__pill.pf-m-running .pf-topology-pipelines__pill-background { - --pf-topology-pipelines__pill-background--Stroke: var(--pf-v5-global--BorderColor--100); + --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-in-progress--Stroke); } .pf-topology-pipelines__pill.pf-m-idle .pf-topology-pipelines__pill-background { - --pf-topology-pipelines__pill-background--Stroke: var(--pf-v5-global--BorderColor--100); + --pf-topology-pipelines__pill-background--Stroke: var(--pf-t--global--border--color--default); } .pf-topology-pipelines__pill.pf-m-pending .pf-topology-pipelines__pill-background { - --pf-topology-pipelines__pill-background--Stroke: var(--pf-v5-global--BorderColor--100); + --pf-topology-pipelines__pill-background--Stroke: var(--pf-t--global--border--color--default); } .pf-topology-pipelines__pill.pf-m-selected .pf-topology-pipelines__pill-background { @@ -240,23 +206,20 @@ } .pf-topology-pipelines__pill.pf-m-hover.pf-m-danger .pf-topology-pipelines__pill-background { - --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-v5-global--BorderWidth--md); + --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-t--global--border--width--strong); } - .pf-topology-pipelines__pill.pf-m-hover.pf-m-success .pf-topology-pipelines__pill-background { - --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-v5-global--BorderWidth--md); + --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-t--global--border--width--strong); } - .pf-topology-pipelines__pill.pf-m-hover.pf-m-warning .pf-topology-pipelines__pill-background { - --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-v5-global--BorderWidth--md); + --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-t--global--border--width--strong); } - .pf-topology-pipelines__pill.pf-m-hover.pf-m-skipped .pf-topology-pipelines__pill-background { - --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-v5-global--BorderWidth--md); + --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-t--global--border--width--strong); } .pf-topology-pipelines__pill.pf-m-hover.pf-m-in-progress .pf-topology-pipelines__pill-background { - --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-v5-global--BorderWidth--md); + --pf-topology-pipelines__pill-background--StrokeWidth: var(--pf-t--global--border--width--strong); } /* Node label */ @@ -305,43 +268,33 @@ .pf-topology-pipelines__pill-status { color: var(--pf-topology-pipelines__pill-status--color); } - .pf-topology-pipelines__pill-status.pf-m-selected { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--color); } - .pf-topology-pipelines__pill-status.pf-m-selected { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--color); } - .pf-topology-pipelines__pill-status.pf-m-danger { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-danger--color); } - .pf-topology-pipelines__pill-status.pf-m-success { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-success--color); } - .pf-topology-pipelines__pill-status.pf-m-warning { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-warning--color); } - .pf-topology-pipelines__pill-status.pf-m-skipped { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-skipped--color); } - .pf-topology-pipelines__pill-status.pf-m-in-progress { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-in-progress--color); } - .pf-topology-pipelines__pill-status.pf-m-pending { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-pending--color); } - .pf-topology-pipelines__pill-status.pf-m-running { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-running--color); } - .pf-topology-pipelines__pill-status.pf-m-idle { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-idle--color); } @@ -349,35 +302,27 @@ .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-danger { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-danger--color); } - .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-success { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-success--color); } - .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-warning { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-warning--color); } - .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-skipped { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-skipped--color); } - .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-in-progress { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-in-progress--color); } - .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-pending { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-pending--color); } - .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-running { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-running--color); } - .pf-topology-pipelines__pill-status.pf-m-selected.pf-m-idle { --pf-topology-pipelines__pill-status--color: var(--pf-topology-pipelines__pill-status--m-selected--m-idle--color); } - .pf-topology-pipelines__pill-status.pf-m-spin { filter: blur(0); -webkit-filter: blur(0); @@ -385,13 +330,11 @@ transform-origin: center; animation: status-spin 2s infinite linear; } - @keyframes status-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); @@ -402,48 +345,37 @@ fill: var(--pf-topology-pipelines__pill-badge--fill); stroke-width: 0; } - .pf-topology-pipelines__pill-badge text { fill: var(--pf-topology-pipelines__pill-badge--text--fill); color: var(--pf-topology__node--Color); } - .pf-topology-pipelines__pill.pf-m-selectable { cursor: pointer; } - .pf-topology-pipelines__pill.pf-m-selected .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--Color); } - .pf-topology-pipelines__pill.pf-m-selected.pf-m-danger .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-danger--Color); } - .pf-topology-pipelines__pill.pf-m-selected.pf-m-success .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-success--Color); } - .pf-topology-pipelines__pill.pf-m-selected.pf-m-warning .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-warning--Color); } - .pf-topology-pipelines__pill.pf-m-selected.pf-m-skipped .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-skipped--Color); } - .pf-topology-pipelines__pill.pf-m-selected.pf-m-in-progress .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-in-progress--Color); } - .pf-topology-pipelines__pill.pf-m-selected.pf-m-pending .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-pending--Color); } - .pf-topology-pipelines__pill.pf-m-selected.pf-m-running .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-running--Color); } - .pf-topology-pipelines__pill.pf-m-selected.pf-m-idle .pf-topology__node__action-icon__icon { --pf-topology__node__action-icon__icon--Color: var(--pf-topology-pipelines__pill-text--m-selected--m-idle--Color); } @@ -452,26 +384,21 @@ stroke: var(--pf-topology-pipelines__when-expression-background--Stroke); fill: var(--pf-topology-pipelines__when-expression-background--Fill); } - .pf-topology-pipelines__pill.pf-m-selected .pf-topology-pipelines__when-expression-background { --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-selected--color); } - .pf-topology-pipelines__when-expression-background.pf-m-success { --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-success--color); --pf-topology-pipelines__when-expression-background--Fill: var(--pf-topology-pipelines__when-expression--m-success--color); } - .pf-topology-pipelines__when-expression-background.pf-m-unmet { --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-warning--color); --pf-topology-pipelines__when-expression-background--Fill: var(--pf-topology-pipelines__when-expression--m-warning--color); } - .pf-topology-pipelines__when-expression-background.pf-m-skipped { --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-skipped--color); --pf-topology-pipelines__when-expression-background--Fill: var(--pf-topology-pipelines__when-expression--m-skipped--color); } - .pf-topology-pipelines__when-expression-background.pf-m-in-progress { --pf-topology-pipelines__when-expression-background--Stroke: var(--pf-topology-pipelines__when-expression--m-in-progress--color); --pf-topology-pipelines__when-expression-background--Fill: var(--pf-topology-pipelines__when-expression--m-in-progress--color); @@ -484,43 +411,33 @@ .pf-topology-pipelines__status-icon { color: var(--pf-topology-pipelines__status-icon--color); } - .pf-topology-pipelines__status-icon.pf-m-selected { fill: var(--pf-topology-pipelines__status-icon--fill); } - .pf-topology-pipelines__status-icon.pf-m-selected { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--color); } - .pf-topology-pipelines__status-icon.pf-m-danger { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-danger--color); } - .pf-topology-pipelines__status-icon.pf-m-success { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-success--color); } - .pf-topology-pipelines__status-icon.pf-m-warning { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-warning--color); } - .pf-topology-pipelines__status-icon.pf-m-skipped { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-skipped--color); } - .pf-topology-pipelines__status-icon.pf-m-in-progress { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-in-progress--color); } - .pf-topology-pipelines__status-icon.pf-m-pending { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-pending--color); } - .pf-topology-pipelines__status-icon.pf-m-running { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-running--color); } - .pf-topology-pipelines__status-icon.pf-m-idle { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-idle--color); } @@ -528,31 +445,24 @@ .pf-topology-pipelines__status-icon.pf-m-selected.pf-m-danger { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--m-danger--color); } - .pf-topology-pipelines__status-icon.pf-m-selected.pf-m-success { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--m-success--color); } - .pf-topology-pipelines__status-icon.pf-m-selected.pf-m-warning { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--m-warning--color); } - .pf-topology-pipelines__status-icon.pf-m-selected.pf-m-skipped { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--m-skipped--color); } - .pf-topology-pipelines__status-icon.pf-m-selected.pf-m-in-progress { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--m-in-progress--color); } - .pf-topology-pipelines__status-icon.pf-m-selected.pf-m-pending { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--m-pending--color); } - .pf-topology-pipelines__status-icon.pf-m-selected.pf-m-running { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--m-running--color); } - .pf-topology-pipelines__status-icon.pf-m-selected.pf-m-idle { --pf-topology-pipelines__status-icon--color: var(--pf-topology-pipelines__status-icon--m-selected--m-idle--color); } @@ -565,31 +475,24 @@ .pf-topology-pipelines__status-icon-background.pf-m-danger { --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-danger--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-success { --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-success--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-warning { --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-warning--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-skipped { --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-skipped--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-in-progress { --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-in-progress--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-pending { --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-pending--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-running { --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-running--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-idle { --pf-topology-pipelines__pill-background--Stroke: var(--pf-topology-pipelines__pill-background--m-idle--Stroke); } @@ -597,96 +500,27 @@ .pf-topology-pipelines__status-icon-background.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__status-icon--m-selected--color); } - .pf-topology-pipelines__status-icon-background.pf-m-danger.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-danger--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-success.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-success--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-warning.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-warning--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-skipped.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-skipped--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-in-progress.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-in-progress--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-pending.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-pending--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-running.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-running--Stroke); } - .pf-topology-pipelines__status-icon-background.pf-m-idle.pf-m-selected { --pf-topology-pipelines__pill-background--Fill: var(--pf-topology-pipelines__pill-background--m-idle--Stroke); -} - -.pf-topology-pipelines__group__collapsed .pf-topology__node__label__badge > rect, -.pf-topology-pipelines__group__expanded .pf-topology__node__label__badge > rect { - stroke: var(--pf-v5-global--BorderColor--100); - fill: var(--pf-v5-global--palette--black-150); -} - -.pf-topology__node__label__badge > text { - fill: var(--pf-v5-global--Color--100); -} - -.pf-topology-pipelines__group__label > text { - fill: var(--pf-topology-pipelines__pill-text--Color); - font-size: var(--pf-v5-global--FontSize--sm); - pointer-events: none; -} - -.pf-topology-pipelines__group.pf-m-selected .pf-topology-pipelines__group__label>text { - fill: var(--pf-v5-global--Color--light-100); - font-size: var(--pf-v5-global--FontSize--sm); - pointer-events: none; -} - -.pf-topology-pipelines__node__background { - fill: var(--pf-topology__node__background--Fill); - stroke-width: var(--pf-topology__node__background--StrokeWidth); - stroke: var(--pf-topology__node__background--Stroke); -} - -.pf-topology-pipelines__node__label__background { - fill: var(--pf-topology-pipelines__node__label__background--fill); -} - -.pf-topology-pipelines__group-inner.pf-m-selected .pf-topology__group__background { - --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill); - --pf-topology__group__background--Stroke: var(--pf-topology__group--m-selected--topology__group__background--Stroke); -} - -.pf-topology-pipelines__group-inner.pf-m-hover .pf-topology__group__background { - --pf-topology__group__background--Stroke: var(--pf-topology__group--m-hover--topology__group__background--Stroke); - --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke); -} - -.pf-topology-pipelines__group-inner.pf-m-hover.pf-m-selected .pf-topology__group__background { - --pf-topology__group__background--Fill: var(--pf-topology__group--m-selected--topology__group__background--Fill); - --pf-topology__group__background--Stroke: var(--pf-topology__group--m-selected--m-hover--topology__group__background--Stroke); - --pf-topology__group__label__node__label__background--Stroke: var(--pf-topology__group--m-hover--label__node__label__background--Stroke); -} - -.pf-topology__node__action-icon { - fill: var(--pf-v5-global--Color--light-100); - stroke: var(--pf-v5-global--active-color--100); -} - -.pf-topology-pipelines__group.pf-m-selected .pf-topology-pipelines__node__label__background { - fill: var(--pf-v5-global--active-color--100); -} - -.pf-topology-pipelines__group.pf-m-selected .pf-topology-pipelines__group__label .pf-topology__node__action-icon .pf-topology__node__action-icon__icon { - color: white; } \ No newline at end of file diff --git a/packages/module/src/css/topology-side-bar.css b/packages/module/src/css/topology-side-bar.css index 0388eacb..fd044845 100644 --- a/packages/module/src/css/topology-side-bar.css +++ b/packages/module/src/css/topology-side-bar.css @@ -9,7 +9,7 @@ width: 0; max-width: 100%; height: 100%; - background-color: var(--pf-v5-global--BackgroundColor--100); + background-color: var(--pf-t--global--background--color--primary--default); overflow-x: hidden; opacity: 0; z-index: 5; @@ -23,7 +23,7 @@ .pf-topology-side-bar.shown { width: 100%; } -.pf-topology-side-bar__dismiss.pf-v5-c-button { +.pf-topology-side-bar__dismiss.pf-v6-c-button { position: absolute; top: calc(2rem - 0.375rem + 0.0625rem); right: 1rem; @@ -36,7 +36,7 @@ .pf-topology-resizable-side-bar { width: 100%; height: 100%; - background-color: var(--pf-v5-global--BackgroundColor--100); + background-color: var(--pf-t--global--background--color--primary--default); overflow-x: hidden; } @@ -50,7 +50,7 @@ @media (min-width: 768px) { .pf-topology-container__with-sidebar { overflow-x: hidden; - background-color: var(--pf-v5-global--Color--light-200) !important; + background-color: var(--pf-t--global--background--color--secondary--default) !important; } .pf-topology-container__with-sidebar .pf-topology-content { -webkit-transition: width 0.15s linear; @@ -66,7 +66,7 @@ } .pf-topology-side-bar.shown { - box-shadow: var(--pf-v5-global--BoxShadow--md); + box-shadow: var(--pf-t--global--box-shadow--md); width: calc(100% - 180px); max-width: 550px; } diff --git a/packages/module/src/css/topology-view.css b/packages/module/src/css/topology-view.css index 4c3f933d..faf380d3 100644 --- a/packages/module/src/css/topology-view.css +++ b/packages/module/src/css/topology-view.css @@ -1,5 +1,5 @@ .pf-topology-content { - background-color: var(--pf-v5-global--Color--light-200); + background-color: var(--pf-t--global--background--color--secondary--default); position: relative; display: flex; justify-content: center; diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx index 4a5b8cb6..0f2d2aae 100644 --- a/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx +++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroup.tsx @@ -99,6 +99,8 @@ export interface DefaultTaskGroupProps { collapsedShadowCount?: number; /** Shadow offset for the collapsed group */ collapsedShadowOffset?: number; + /** Radius of the border on expanded groups. Defaults to 16px */ + borderRadius?: number; /** Flag if the element selected. Part of WithSelectionProps */ selected?: boolean; /** Function to call when the element should become selected (or deselected). Part of WithSelectionProps */ diff --git a/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx b/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx index 0628ba46..63b04fe3 100644 --- a/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx +++ b/packages/module/src/pipelines/components/groups/DefaultTaskGroupExpanded.tsx @@ -49,7 +49,8 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro labelIcon, labelIconPadding, onCollapseChange, - labelPosition + labelPosition, + borderRadius = 16 }) => { const [hovered, hoverRef] = useHover(200, 500); const [labelHover, labelHoverRef] = useHover(0); @@ -215,9 +216,17 @@ const DefaultTaskGroupExpanded: React.FunctionComponent<Omit<DefaultTaskGroupPro width={bounds.width} height={bounds.height} className={styles.topologyGroupBackground} + rx={borderRadius} + ry={borderRadius} /> </g> - {groupLabel && isHover ? <Layer id={TOP_LAYER}>{groupLabel}</Layer> : groupLabel} + {groupLabel && isHover ? ( + <Layer id={TOP_LAYER}> + <g className={innerGroupClassName}>{groupLabel}</g> + </Layer> + ) : ( + groupLabel + )} </Layer> </g> ); diff --git a/packages/module/src/pipelines/components/nodes/TaskNode.tsx b/packages/module/src/pipelines/components/nodes/TaskNode.tsx index 527f4005..865e7f1d 100644 --- a/packages/module/src/pipelines/components/nodes/TaskNode.tsx +++ b/packages/module/src/pipelines/components/nodes/TaskNode.tsx @@ -56,8 +56,6 @@ export interface TaskNodeProps { badgeBorderColor?: string; /** Additional classes to use for the label's badge */ badgeClassName?: string; - /** @deprecated Use badgePopoverParams instead */ - badgePopoverProps?: string; /** Set to use a tooltip on the badge, takes precedence over the badgePopoverParams */ badgeTooltip?: React.ReactNode; /** Set to use a popover on the badge, ignored if the badgeTooltip parameter is set */ @@ -80,8 +78,6 @@ export interface TaskNodeProps { toolTip?: React.ReactNode; /** Tooltip properties to pass along to the node's tooltip */ toolTipProps?: Omit<TooltipProps, 'content'>; - /** @deprecated Flag if the node has a 'when expression' */ - hasWhenExpression?: boolean; /** Size of the when expression indicator */ whenSize?: number; /** Distance from the when expression indicator to the node */ @@ -114,11 +110,9 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer( className, statusIconSize = STATUS_ICON_SIZE, scaleNode, - badgePopoverProps, toolTip, toolTipProps, disableTooltip = false, - hasWhenExpression = false, whenSize = 0, whenOffset = 0, ...rest @@ -133,17 +127,6 @@ const TaskNodeInner: React.FC<TaskNodeInnerProps> = observer( const detailsLevel = element.getGraph().getDetailsLevel(); const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM; - if (badgePopoverProps) { - // eslint-disable-next-line no-console - console.warn('badgePopoverProps is deprecated. Use badgePopoverParams instead.'); - } - if (hasWhenExpression) { - // eslint-disable-next-line no-console - console.warn( - 'hasWhenExpression is deprecated. Set whenSize and whenOffset only when showing the when expression.' - ); - } - useAnchor( React.useCallback( (node: Node) => new TaskNodeSourceAnchor(node, detailsLevel, statusIconSize + 4, verticalLayout), @@ -240,7 +223,6 @@ const TaskNode: React.FC<TaskNodeProps> = ({ taskIconPadding = 4, truncateLength = 14, disableTooltip = false, - hasWhenExpression = false, whenSize = 0, whenOffset = 0, ...rest @@ -260,7 +242,6 @@ const TaskNode: React.FC<TaskNodeProps> = ({ taskIconPadding={taskIconPadding} truncateLength={truncateLength} disableTooltip={disableTooltip} - hasWhenExpression={hasWhenExpression} whenSize={whenSize} whenOffset={whenOffset} {...rest} diff --git a/packages/module/src/pipelines/components/nodes/TaskPill.tsx b/packages/module/src/pipelines/components/nodes/TaskPill.tsx index 49d9f108..1476a8d2 100644 --- a/packages/module/src/pipelines/components/nodes/TaskPill.tsx +++ b/packages/module/src/pipelines/components/nodes/TaskPill.tsx @@ -55,7 +55,6 @@ const TaskPill: React.FC<TaskPillProps> = observer( badgeBorderColor, badgeClassName = styles.topologyPipelinesPillBadge, badgeTooltip, - badgePopoverProps, badgePopoverParams, nameLabelClass, taskIconClass, @@ -67,7 +66,6 @@ const TaskPill: React.FC<TaskPillProps> = observer( disableTooltip = false, selected, onSelect, - hasWhenExpression = false, onContextMenu, contextMenuOpen, actionIcon, @@ -95,17 +93,6 @@ const TaskPill: React.FC<TaskPillProps> = observer( const detailsLevel = element.getGraph().getDetailsLevel(); const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM; - if (badgePopoverProps) { - // eslint-disable-next-line no-console - console.warn('badgePopoverProps is deprecated. Use badgePopoverParams instead.'); - } - if (hasWhenExpression) { - // eslint-disable-next-line no-console - console.warn( - 'hasWhenExpression is deprecated. Set whenSize and whenOffset only when showing the when expression.' - ); - } - const textWidth = textSize?.width ?? 0; const textHeight = textSize?.height ?? 0; diff --git a/packages/module/src/pipelines/decorators/WhenDecorator.tsx b/packages/module/src/pipelines/decorators/WhenDecorator.tsx index 90c13eb4..8bb644e8 100644 --- a/packages/module/src/pipelines/decorators/WhenDecorator.tsx +++ b/packages/module/src/pipelines/decorators/WhenDecorator.tsx @@ -28,8 +28,6 @@ interface WhenDecoratorProps { width?: number; /** Height of the when decorator */ height?: number; - /** @deprecated Additional classes added to the label */ - nameLabelClass?: string; /** WhenStatus to depict */ status?: WhenStatus; /** Flag indicating the status indicator */ diff --git a/yarn.lock b/yarn.lock index 090753fe..d38b10cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2655,10 +2655,10 @@ dependencies: "@octokit/openapi-types" "^12.11.0" -"@patternfly/ast-helpers@^1.15.7": - version "1.15.7" - resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.15.7.tgz#7a97266955d2badd17ea0b33d333edced3b0e7c8" - integrity sha512-dR0ISWsdOPZB1iX80eShePTcA+9HZIZfFPPRwiJm7FCwbZxUj96ybvbL9Z+xmlQB4NbO1E+pd4vbbiyYh8f4dg== +"@patternfly/ast-helpers@^1.4.0-alpha.39": + version "1.4.0-alpha.39" + resolved "https://registry.yarnpkg.com/@patternfly/ast-helpers/-/ast-helpers-1.4.0-alpha.39.tgz#3f9e314d7b0b33a9c2c96bbea87b7be2a5af9256" + integrity sha512-f8jgLbJATx9zwDMPR2cah/O2TybljM2QLNNpMQ/PdKLrBGDqf5b4ML+FL+9I383Jm1KD104bTb0Vv//vGcIsow== dependencies: acorn "^8.4.1" acorn-class-fields "^1.0.0" @@ -2666,16 +2666,16 @@ acorn-static-class-features "^1.0.0" astring "^1.7.5" -"@patternfly/documentation-framework@^5.2.15": - version "5.15.7" - resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-5.15.7.tgz#014b6e192db689570452772ec82002d0fd9c9dc9" - integrity sha512-atIcjvG2SEYH3GvvHXhDRE0TA/dC9Yjv1gR9XcyhKounzd0UNc6vFCUw+IS3MJzbBzspUncD+M6yV0SxofN4GA== +"@patternfly/documentation-framework@6.0.0-alpha.50": + version "6.0.0-alpha.50" + resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-6.0.0-alpha.50.tgz#8265589b44d737b8b13f9fde5221f9f6acbfa0ec" + integrity sha512-oyZrCOF2TIEFZXcpwEcPAgx5CxQMMIcoPs4v1RUHqzldJIzqo0ijmdyLl8uQlaq2wVNq7o6A0zZ/Mic2oGFofQ== dependencies: "@babel/core" "^7.24.3" "@babel/preset-env" "^7.24.3" "@babel/preset-react" "^7.24.1" "@mdx-js/util" "1.6.16" - "@patternfly/ast-helpers" "^1.15.7" + "@patternfly/ast-helpers" "^1.4.0-alpha.39" "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9" autoprefixer "9.8.6" babel-loader "^9.1.3" @@ -2722,7 +2722,7 @@ style-to-object "0.3.0" to-vfile "6.1.0" typedoc "0.23.0" - typescript "4.3.5" + typescript "4.7.4" unified "9.1.0" unist-util-remove "2.0.0" unist-util-visit "2.0.3" @@ -2748,61 +2748,61 @@ puppeteer-cluster "^0.23.0" xmldoc "^1.1.2" -"@patternfly/patternfly@^6.0.0-alpha.74": - version "6.0.0-prerelease.1" - resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-prerelease.1.tgz#37041576dce395a592acc286d5c3913ed7ab7f83" - integrity sha512-iAtWvRoL5cF3T0P2OI0Gt+rdDGOb5Fc1+PPRFZgVNe9+euD5rHiIeo0dLS9WVeWRcNfJ5hWJ47nQZsdvnGFHuA== +"@patternfly/patternfly@6.0.0-alpha.167": + version "6.0.0-alpha.167" + resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-6.0.0-alpha.167.tgz#6e633af885e0387fac686ed0d1cb64fe1e97c503" + integrity sha512-f5c/j4ZlziuCILZm2klu6JTSvW23gB8SXpNIKuY9XVxV+55++ifDTkG8C8XBE+Jkthx7Sng937jZdDM1xw5qrw== -"@patternfly/react-code-editor@^6.0.0-alpha.26": - version "6.0.0-alpha.59" - resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.59.tgz#1ac33318145a41bce18a18c26441dab5bc479197" - integrity sha512-sb+WcQdcO5m+3j3KGVuFyQ+hr6Db9LSGzj0e2rb8XGFaqqJ3ubkxrn80HmLed8yE/iryxj8aSKgGNQDceo+hWQ== +"@patternfly/react-code-editor@6.0.0-alpha.70": + version "6.0.0-alpha.70" + resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-6.0.0-alpha.70.tgz#ea03d6da13d2f0c7c14a748e0eaf226154a7286f" + integrity sha512-UuFXT83tMaSmyghXdADFTP/woy8TuNwx2LKwhrFxqdzg1OFUNtXXpXEQKtwDZJSH080+OOK4Fnb21lchgVhbXA== dependencies: "@monaco-editor/react" "^4.6.0" - "@patternfly/react-core" "^6.0.0-alpha.59" - "@patternfly/react-icons" "^6.0.0-alpha.21" - "@patternfly/react-styles" "^6.0.0-alpha.21" + "@patternfly/react-core" "^6.0.0-alpha.70" + "@patternfly/react-icons" "^6.0.0-alpha.24" + "@patternfly/react-styles" "^6.0.0-alpha.24" react-dropzone "14.2.3" - tslib "^2.5.0" + tslib "^2.6.2" -"@patternfly/react-core@^6.0.0-alpha.26", "@patternfly/react-core@^6.0.0-alpha.59": - version "6.0.0-alpha.59" - resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.59.tgz#cbf83e3c81cf4ceddc1f0abba58d0286e06a832e" - integrity sha512-U4Ej8WPoh6SnsnsQWiW/HgvTn+y2nK+ac1Ud71vQ5cdMz0/KHjJ8bERajY/zaJQqoUgnYOsh30HhSyaW0eDOIg== +"@patternfly/react-core@6.0.0-alpha.70", "@patternfly/react-core@^6.0.0-alpha.70": + version "6.0.0-alpha.70" + resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-6.0.0-alpha.70.tgz#05d7fcb0213c247b78363b8dd2ce3099add41568" + integrity sha512-ZiYqF3tmT/Wb4Ar064X2yXjJobntRBq4Xz+bNzBiSrdi1E99ds12kP9K/zfUH6uIrGwGDupb8vbAPZ+AKgjjPQ== dependencies: - "@patternfly/react-icons" "^6.0.0-alpha.21" - "@patternfly/react-styles" "^6.0.0-alpha.21" - "@patternfly/react-tokens" "^6.0.0-alpha.21" - focus-trap "7.5.2" + "@patternfly/react-icons" "^6.0.0-alpha.24" + "@patternfly/react-styles" "^6.0.0-alpha.24" + "@patternfly/react-tokens" "^6.0.0-alpha.24" + focus-trap "7.5.4" react-dropzone "^14.2.3" - tslib "^2.5.0" - -"@patternfly/react-icons@^6.0.0-alpha.11", "@patternfly/react-icons@^6.0.0-alpha.21": - version "6.0.0-alpha.21" - resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-alpha.21.tgz#fc07ccfccbdfaa255caacb25dfa02085ee28b980" - integrity sha512-0yFAHkD/jFma+PNq34wacyJxB9oj9OoMZF2UJHtCVbAUVhNXZCQP9FN4KtzRqVi3yxKFlY8JX6M49cZnSMG38w== - -"@patternfly/react-styles@^6.0.0-alpha.11", "@patternfly/react-styles@^6.0.0-alpha.21": - version "6.0.0-alpha.21" - resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.21.tgz#c89b33c30fc4993ed777827c34041ea7c900ad52" - integrity sha512-Xe/oV0q9uDPEMlBeLBo8r78CWOw4RavO9ofmxiFHgSovdoF75saYrDdfRs2bfz++R6GtgVoeyygB4QzhTTdHMw== - -"@patternfly/react-table@^6.0.0-alpha.26": - version "6.0.0-alpha.59" - resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.0.0-alpha.59.tgz#9c0b2aed96ac08f7e502cf2429c82e14445ba356" - integrity sha512-pRpXooz71KECWf8vb/Z4Amq/LPvfdn+n0VXzEacwSoT7cabl70prukwDxvDl45JhM7q6v/5V7EBYsZeCgI3/UQ== - dependencies: - "@patternfly/react-core" "^6.0.0-alpha.59" - "@patternfly/react-icons" "^6.0.0-alpha.21" - "@patternfly/react-styles" "^6.0.0-alpha.21" - "@patternfly/react-tokens" "^6.0.0-alpha.21" + tslib "^2.6.2" + +"@patternfly/react-icons@6.0.0-alpha.24", "@patternfly/react-icons@^6.0.0-alpha.24": + version "6.0.0-alpha.24" + resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-6.0.0-alpha.24.tgz#631f24bbe3be8ab23c5aa2fbf00b06c99b763c87" + integrity sha512-SRW9sTaHTbMJu+lf7+vWe5fNI1hfquZB6xlJe54D4WAzgzPDTxwPRi6I/KEboKBMZOvU/FYxH2/L5TCYmH51Hw== + +"@patternfly/react-styles@6.0.0-alpha.24", "@patternfly/react-styles@^6.0.0-alpha.24": + version "6.0.0-alpha.24" + resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-6.0.0-alpha.24.tgz#62825924061a993028af7bda0429a492639dc12a" + integrity sha512-9Gh0CbeShaNOJSRy/Y7dEx+Nc9rlDrgjSF9rMtjlFTLfU7HvVavrfuBTGV5NpFJlVBtudJAsDaNRTlC22kKokg== + +"@patternfly/react-table@6.0.0-alpha.71": + version "6.0.0-alpha.71" + resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-6.0.0-alpha.71.tgz#79b189854be49b5e50ddbd8f6856242e1f795a45" + integrity sha512-bY8h4X6zJT6WGVDmrkgtdZO6IocjBQYvmtTLxunHIJSOXeIwPECazEaLTxs3CP9f9I4v3TODYUxQkM/34/AK0w== + dependencies: + "@patternfly/react-core" "^6.0.0-alpha.70" + "@patternfly/react-icons" "^6.0.0-alpha.24" + "@patternfly/react-styles" "^6.0.0-alpha.24" + "@patternfly/react-tokens" "^6.0.0-alpha.24" lodash "^4.17.19" - tslib "^2.5.0" + tslib "^2.6.2" -"@patternfly/react-tokens@^6.0.0-alpha.21": - version "6.0.0-alpha.21" - resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.21.tgz#5e2064c40a18e3ae92e4ac06656c5d9c06fe7fde" - integrity sha512-hPXZaDm7x6tbTw9nmEbG1Hz+ys1HfqQw23mPp2zr2eJy4vm9lw4bJLhcooS/J/QYePoTVpeE1FdnRLTDBhGErw== +"@patternfly/react-tokens@^6.0.0-alpha.24": + version "6.0.0-alpha.24" + resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-6.0.0-alpha.24.tgz#ddac29451212d450e92ce7b745a0848f32fab770" + integrity sha512-jIVaGxxZD8Wsp2Xbf8z9mrpfYQx4NzlWlUza0IoTuwslEdcxt77Yo3sh0qlyfRBDNx+Q01tdEFXftJ+6OZQ3Gw== "@pmmmwh/react-refresh-webpack-plugin@0.5.7": version "0.5.7" @@ -4620,7 +4620,7 @@ bluebird@^3.5.0, bluebird@^3.5.1: body-parser@1.20.0: version "1.20.0" - resolved "https://registry.npmjs.org/body-parser/-/body-parser-1.20.0.tgz" + resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5" integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg== dependencies: bytes "3.1.2" @@ -7329,7 +7329,7 @@ expect@^29.0.0, expect@^29.2.2: express@4.18.1: version "4.18.1" - resolved "https://registry.npmjs.org/express/-/express-4.18.1.tgz" + resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf" integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q== dependencies: accepts "~1.3.8" @@ -7681,10 +7681,10 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" -focus-trap@7.5.2: - version "7.5.2" - resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.2.tgz#e5ee678d10a18651f2591ffb66c949fb098d57cf" - integrity sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw== +focus-trap@7.5.4: + version "7.5.4" + resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.5.4.tgz#6c4e342fe1dae6add9c2aa332a6e7a0bbd495ba2" + integrity sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w== dependencies: tabbable "^6.2.0" @@ -12125,7 +12125,7 @@ puppeteer@^14.2.0: qs@6.10.3: version "6.10.3" - resolved "https://registry.npmjs.org/qs/-/qs-6.10.3.tgz" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e" integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ== dependencies: side-channel "^1.0.4" @@ -14245,11 +14245,16 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3: resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz" integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA== -tslib@^2.4.0, tslib@^2.5.0: +tslib@^2.4.0: version "2.5.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== +tslib@^2.6.2: + version "2.6.3" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0" + integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ== + tsscmp@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/tsscmp/-/tsscmp-1.0.6.tgz#85b99583ac3589ec4bfef825b5000aa911d605eb" @@ -14350,10 +14355,10 @@ typedoc@0.23.0: minimatch "^5.1.0" shiki "^0.10.1" -typescript@4.3.5: - version "4.3.5" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4" - integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== +typescript@4.7.4: + version "4.7.4" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" + integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== typescript@^4.7.4: version "4.8.4"