This is an automated email from the ASF dual-hosted git repository. marat pushed a commit to branch main in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
The following commit(s) were added to refs/heads/main by this push: new 542daa38 Fix #852 542daa38 is described below commit 542daa388ea3c4161fcc2cbaaff3d3dfde0d4651 Author: Marat Gubaidullin <marat.gubaidul...@gmail.com> AuthorDate: Fri Aug 11 13:04:03 2023 -0400 Fix #852 --- karavan-vscode/package-lock.json | 189 +++++++++++------------------- karavan-vscode/package.json | 8 +- karavan-vscode/src/webviewContent.ts | 2 +- karavan-vscode/webview/App.tsx | 2 +- karavan-vscode/webview/index.css | 220 ++++++++++++++++++----------------- 5 files changed, 188 insertions(+), 233 deletions(-) diff --git a/karavan-vscode/package-lock.json b/karavan-vscode/package-lock.json index d2feef88..dd37d9da 100644 --- a/karavan-vscode/package-lock.json +++ b/karavan-vscode/package-lock.json @@ -1,18 +1,18 @@ { "name": "karavan", - "version": "3.21.1-SNAPSHOT", + "version": "4.0.0-RC2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "karavan", - "version": "3.21.1-SNAPSHOT", + "version": "4.0.0-RC2", "license": "Apache-2.0", "dependencies": { - "@monaco-editor/react": "4.5.0", - "@patternfly/patternfly": "4.224.2", - "@patternfly/react-core": "4.276.8", - "@patternfly/react-table": "4.113.0", + "@monaco-editor/react": "4.5.1", + "@patternfly/patternfly": "^5.0.2", + "@patternfly/react-core": "^5.0.0", + "@patternfly/react-table": "^5.0.0", "@types/js-yaml": "4.0.5", "@types/uuid": "9.0.1", "html-to-image": "1.11.11", @@ -2108,9 +2108,9 @@ } }, "node_modules/@monaco-editor/react": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.0.tgz", - "integrity": "sha512-VJMkp5Fe1+w8pLEq8tZPHZKu8zDXQIA1FtiDTSNccg1D3wg1YIZaH2es2Qpvop1k62g3c/YySRb3bnGXu2XwYQ==", + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.5.1.tgz", + "integrity": "sha512-NNDFdP+2HojtNhCkRfE6/D6ro6pBNihaOzMbGK84lNWzRu+CfBjwzGt4jmnqimLuqp5yE5viHS2vi+QOAnD5FQ==", "dependencies": { "@monaco-editor/loader": "^1.3.3" }, @@ -2165,63 +2165,62 @@ } }, "node_modules/@patternfly/patternfly": { - "version": "4.224.2", - "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-4.224.2.tgz", - "integrity": "sha512-HGNV26uyHSIECuhjPg/WGn0mXbAotcs6ODfhAOkfYjIgGylddgiwElxUe1rpEHV5mQJJ2rMn4OdeJIIpzRX61g==" + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-5.0.2.tgz", + "integrity": "sha512-PB8+MLdYVgF1hIOxGmnVsZG+YHUX3RePe5W1oMS4gS00EmSgw1cobr1Qbpy/BqqS8/R9DRN4hZ2FKDT0d5tkFQ==" }, "node_modules/@patternfly/react-core": { - "version": "4.276.8", - "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-4.276.8.tgz", - "integrity": "sha512-dn322rEzBeiVztZEuCZMUUittNb8l1hk30h9ZN31FLZLLVtXGlThFNV9ieqOJYA9zrYxYZrHMkTnOxSWVacMZg==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-5.0.0.tgz", + "integrity": "sha512-kewRVFhLw0Dvt8250pqrO47sVRx8E93sMGZbHQomJnZdachYeQ9STnQTP2gvOBq/GPnMei0LZLv0T99g8mPE4w==", "dependencies": { - "@patternfly/react-icons": "^4.93.6", - "@patternfly/react-styles": "^4.92.6", - "@patternfly/react-tokens": "^4.94.6", - "focus-trap": "6.9.2", - "react-dropzone": "9.0.0", - "tippy.js": "5.1.2", - "tslib": "^2.0.0" + "@patternfly/react-icons": "^5.0.0", + "@patternfly/react-styles": "^5.0.0", + "@patternfly/react-tokens": "^5.0.0", + "focus-trap": "7.4.3", + "react-dropzone": "^14.2.3", + "tslib": "^2.5.0" }, "peerDependencies": { - "react": "^16.8 || ^17 || ^18", - "react-dom": "^16.8 || ^17 || ^18" + "react": "^17 || ^18", + "react-dom": "^17 || ^18" } }, "node_modules/@patternfly/react-icons": { - "version": "4.93.6", - "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-4.93.6.tgz", - "integrity": "sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-5.0.0.tgz", + "integrity": "sha512-GG5Y/UYl0h346MyDU9U650Csaq4Mxk8S6U8XC7ERk/xIrRr2RF67O2uY7zKBDMTNLYdBvPzgc2s3OMV1+d2/mg==", "peerDependencies": { - "react": "^16.8 || ^17 || ^18", - "react-dom": "^16.8 || ^17 || ^18" + "react": "^17 || ^18", + "react-dom": "^17 || ^18" } }, "node_modules/@patternfly/react-styles": { - "version": "4.92.6", - "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-4.92.6.tgz", - "integrity": "sha512-b8uQdEReMyeoMzjpMri845QxqtupY/tIFFYfVeKoB2neno8gkcW1RvDdDe62LF88q45OktCwAe/8A99ker10Iw==" + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-5.0.0.tgz", + "integrity": "sha512-xbSCgjx+fPrXbIzUznwTFWtJEbzVS0Wn4zrejdKJYQTY+4YcuPlFkeq2tl3syzwGsaYMpHiFwQiTaKyTvlwtuw==" }, "node_modules/@patternfly/react-table": { - "version": "4.113.0", - "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-4.113.0.tgz", - "integrity": "sha512-qxa3NWCdYasqQQL1rqEd8DyNa8oWr6HNveNW5YJRakE7imWZhUPG2Nd6Op60+KYX8kbCSl7gwSmgAZAYMBMZkQ==", - "dependencies": { - "@patternfly/react-core": "^4.276.8", - "@patternfly/react-icons": "^4.93.6", - "@patternfly/react-styles": "^4.92.6", - "@patternfly/react-tokens": "^4.94.6", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-5.0.0.tgz", + "integrity": "sha512-Q3MBo9+ZmBvLJzVHxmV9f/4qQAz5Si743zVLHRwjh+tjbn/DrcbxJdT8Uxa3NGKkpvszzgi/LPeXipJOHOELug==", + "dependencies": { + "@patternfly/react-core": "^5.0.0", + "@patternfly/react-icons": "^5.0.0", + "@patternfly/react-styles": "^5.0.0", + "@patternfly/react-tokens": "^5.0.0", "lodash": "^4.17.19", - "tslib": "^2.0.0" + "tslib": "^2.5.0" }, "peerDependencies": { - "react": "^16.8 || ^17 || ^18", - "react-dom": "^16.8 || ^17 || ^18" + "react": "^17 || ^18", + "react-dom": "^17 || ^18" } }, "node_modules/@patternfly/react-tokens": { - "version": "4.94.6", - "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-4.94.6.tgz", - "integrity": "sha512-tm7C6nat+uKMr1hrapis7hS3rN9cr41tpcCKhx6cod6FLU8KwF2Yt5KUxakhIOCEcE/M/EhXhAw/qejp8w0r7Q==" + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-5.0.0.tgz", + "integrity": "sha512-to2CXIZ6WTuzBcjLZ+nXi5LhnYkSIDu3RBMRZwrplmECOoUWv87CC+2T0EVxtASRtpQfikjD2PDKMsif5i0BxQ==" }, "node_modules/@svgr/babel-plugin-add-jsx-attribute": { "version": "7.0.0", @@ -3358,12 +3357,9 @@ } }, "node_modules/attr-accept": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz", - "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==", - "dependencies": { - "core-js": "^2.5.0" - }, + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz", + "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==", "engines": { "node": ">=4" } @@ -4001,16 +3997,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/core-js": { - "version": "3.31.1", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.31.1.tgz", - "integrity": "sha512-2sKLtfq1eFST7l7v62zaqXacPc7uG8ZAya8ogijLhTtaKNcpzpB4TMoTw2Si+8GYKRwFPMMtUT0263QFWFfqyQ==", - "hasInstallScript": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, "node_modules/core-js-compat": { "version": "3.31.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.1.tgz", @@ -5399,14 +5385,14 @@ } }, "node_modules/file-selector": { - "version": "0.1.19", - "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz", - "integrity": "sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==", + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", + "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", "dependencies": { - "tslib": "^2.0.1" + "tslib": "^2.4.0" }, "engines": { - "node": ">= 10" + "node": ">= 12" } }, "node_modules/file-type": { @@ -5475,11 +5461,11 @@ "dev": true }, "node_modules/focus-trap": { - "version": "6.9.2", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.2.tgz", - "integrity": "sha512-gBEuXOPNOKPrLdZpMFUSTyIo1eT2NSZRrwZ9r/0Jqw5tmT3Yvxfmu8KBHw8xW2XQkw6E/JoG+OlEq7UDtSUNgw==", + "version": "7.4.3", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.3.tgz", + "integrity": "sha512-BgSSbK4GPnS2VbtZ50VtOv1Sti6DIkj3+LkVjiWMNjLeAp1SH1UlLx3ULu/DCu4vq5R4/uvTm+zrvsMsuYmGLg==", "dependencies": { - "tabbable": "^5.3.2" + "tabbable": "^6.1.2" } }, "node_modules/for-each": { @@ -7680,16 +7666,6 @@ "node": ">=16" } }, - "node_modules/popper.js": { - "version": "1.16.1", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", - "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", - "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/postcss": { "version": "8.4.26", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz", @@ -7872,18 +7848,6 @@ "react-is": "^16.13.1" } }, - "node_modules/prop-types-extra": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", - "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", - "dependencies": { - "react-is": "^16.3.2", - "warning": "^4.0.0" - }, - "peerDependencies": { - "react": ">=0.14.0" - } - }, "node_modules/prr": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", @@ -7952,20 +7916,19 @@ } }, "node_modules/react-dropzone": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-9.0.0.tgz", - "integrity": "sha512-wZ2o9B2qkdE3RumWhfyZT9swgJYJPeU5qHEcMU8weYpmLex1eeWX0CC32/Y0VutB+BBi2D+iePV/YZIiB4kZGw==", + "version": "14.2.3", + "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz", + "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==", "dependencies": { - "attr-accept": "^1.1.3", - "file-selector": "^0.1.8", - "prop-types": "^15.6.2", - "prop-types-extra": "^1.1.0" + "attr-accept": "^2.2.2", + "file-selector": "^0.6.0", + "prop-types": "^15.8.1" }, "engines": { - "node": ">= 6" + "node": ">= 10.13" }, "peerDependencies": { - "react": ">=0.14.0" + "react": ">= 16.8 || 18.0.0" } }, "node_modules/react-is": { @@ -8852,9 +8815,9 @@ } }, "node_modules/tabbable": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", - "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==" + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" }, "node_modules/table": { "version": "6.8.1", @@ -9015,14 +8978,6 @@ "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", "dev": true }, - "node_modules/tippy.js": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-5.1.2.tgz", - "integrity": "sha512-Qtrv2wqbRbaKMUb6bWWBQWPayvcDKNrGlvihxtsyowhT7RLGEh1STWuy6EMXC6QLkfKPB2MLnf8W2mzql9VDAw==", - "dependencies": { - "popper.js": "^1.16.0" - } - }, "node_modules/to-buffer": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz", @@ -9591,14 +9546,6 @@ "integrity": "sha512-eOpPHogvorZRobNqJGhapa0JdwaxpjVvyBp0QIUMRMSf8ZAlqOdEquKuRmw9Qwu0qXtJIWqFtMkmvJjUZmMjVA==", "dev": true }, - "node_modules/warning": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/karavan-vscode/package.json b/karavan-vscode/package.json index 6a498cda..7c24929a 100644 --- a/karavan-vscode/package.json +++ b/karavan-vscode/package.json @@ -706,10 +706,10 @@ "open-in-browser": "vscode-test-web --extensionDevelopmentPath=. ../karavan-demo/hello-world/" }, "dependencies": { - "@monaco-editor/react": "4.5.0", - "@patternfly/patternfly": "4.224.2", - "@patternfly/react-core": "4.276.8", - "@patternfly/react-table": "4.113.0", + "@monaco-editor/react": "4.5.1", + "@patternfly/patternfly": "^5.0.2", + "@patternfly/react-core": "^5.0.0", + "@patternfly/react-table": "^5.0.0", "@types/js-yaml": "4.0.5", "@types/uuid": "9.0.1", "html-to-image": "1.11.11", diff --git a/karavan-vscode/src/webviewContent.ts b/karavan-vscode/src/webviewContent.ts index 5dbe2103..f5aa169d 100644 --- a/karavan-vscode/src/webviewContent.ts +++ b/karavan-vscode/src/webviewContent.ts @@ -21,7 +21,7 @@ export function getWebviewContent(context: ExtensionContext, webview: Webview): <main class="pf-c-page__main" tabindex="-1"> <section class="pf-c-page__main-section pf-m-dark-200 loading-page"><svg class="pf-c-spinner pf-m-xl progress-stepper" role="progressbar" aria-valuetext="Loading..." - viewBox="0 0 100 100" style="--pf-c-spinner--diameter:80px" aria-label="Loading..."> + viewBox="0 0 100 100" style="--pf-v5-c-spinner--diameter:80px" aria-label="Loading..."> <circle class="pf-c-spinner__path" cx="50" cy="50" r="45" fill="none"></circle> </svg></section> </main> diff --git a/karavan-vscode/webview/App.tsx b/karavan-vscode/webview/App.tsx index 9b96c794..232ab606 100644 --- a/karavan-vscode/webview/App.tsx +++ b/karavan-vscode/webview/App.tsx @@ -179,7 +179,7 @@ class App extends React.Component<Props, State> { <Page className="karavan"> {!loaded && <PageSection variant={dark ? "dark" : "light"} className="loading-page"> - <Spinner className="progress-stepper" isSVG diameter="80px" aria-label="Loading..." /> + <Spinner className="progress-stepper" diameter="80px" aria-label="Loading..." /> {/* {loadingMessages.map(message => <Text component={TextVariants.h5}>{message}</Text>)} */} <Text component={TextVariants.h5}>Loading...</Text> </PageSection> diff --git a/karavan-vscode/webview/index.css b/karavan-vscode/webview/index.css index 9b1a74f9..c4cad423 100644 --- a/karavan-vscode/webview/index.css +++ b/karavan-vscode/webview/index.css @@ -6,26 +6,26 @@ body, } body, :root, #root, .karavan { - --pf-global--primary-color--100: var(--vscode-focusBorder) !important; - --pf-global--primary-color--200: var(--vscode-focusBorder) !important; - --pf-global--active-color--100: var(--vscode-focusBorder) !important; - --pf-global--link--Color: var(--vscode-focusBorder) !important; - --pf-c-tabs__link--after--BorderColor: var(--vscode-focusBorder) !important; - --pf-c-switch__input--checked__toggle--BackgroundColor: var(--vscode-focusBorder) !important; - --pf-c-button--m-plain--Color: var(--vscode-focusBorder) !important; - --pf-c-button--m-secondary--Color: var(--vscode-focusBorder) !important; - - --pf-global--Color--100: var(--vscode-foreground) !important; - - --step-border-color: var(--pf-global--active-color--200); + --pf-v5-global--primary-color--100: var(--vscode-focusBorder) !important; + --pf-v5-global--primary-color--200: var(--vscode-focusBorder) !important; + --pf-v5-global--active-color--100: var(--vscode-focusBorder) !important; + --pf-v5-global--link--Color: var(--vscode-focusBorder) !important; + --pf-v5-c-tabs__link--after--BorderColor: var(--vscode-focusBorder) !important; + --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--vscode-focusBorder) !important; + --pf-v5-c-button--m-plain--Color: var(--vscode-focusBorder) !important; + --pf-v5-c-button--m-secondary--Color: var(--vscode-focusBorder) !important; + + --pf-v5-global--Color--100: var(--vscode-foreground) !important; + + --step-border-color: var(--pf-v5-global--active-color--200); --step-border-color-selected:var(--vscode-focusBorder); } -.vscode-dark .pf-c-page { +.vscode-dark .pf-v5-c-page { background-color: var(--vscode-editor-background); } -.karavan .pf-c-drawer__content { +.karavan .pf-v5-c-drawer__content { background-color: transparent; } @@ -33,34 +33,34 @@ body, :root, #root, .karavan { color: var(--vscode-foreground) !important; } -.vscode-dark .pf-c-button.pf-m-primary { +.vscode-dark .pf-v5-c-button.pf-m-primary { color: var(--vscode-foreground) !important; background-color: var(--vscode-focusBorder) !important; } -.vscode-dark .pf-c-button.pf-m-primary:hover { - color: var(--pf-c-button--m-primary--hover--Color); +.vscode-dark .pf-v5-c-button.pf-m-primary:hover { + color: var(--pf-v5-c-button--m-primary--hover--Color); background-color: var(--vscode-button-hoverBackground) !important; } -.vscode-dark .pf-c-button.pf-m-secondary { +.vscode-dark .pf-v5-c-button.pf-m-secondary { color: var(--vscode-focusBorder) !important; background-color: var(--vscode-button-secondaryBackground) !important; } .vscode-dark .karavan { - color: var(--pf-global--Color--200); + color: var(--pf-v5-global--Color--200); } .vscode-dark .karavan .top-icon { - fill: var(--pf-global--Color--200); + fill: var(--pf-v5-global--Color--200); } .vscode-dark .karavan .main-tabs { background-color: var(--vscode-tab-inactiveBackground); } -.vscode-dark .karavan .main-tabs .pf-c-tabs__list { +.vscode-dark .karavan .main-tabs .pf-v5-c-tabs__list { background-color: var(--vscode-tab-inactiveBackground); } @@ -68,12 +68,12 @@ body, :root, #root, .karavan { border-color: var(--vscode-tab-inactiveBackground); } -.vscode-dark .karavan .main-tabs .pf-c-tabs__item.pf-m-current { +.vscode-dark .karavan .main-tabs .pf-v5-c-tabs__item.pf-m-current { background-color: var(--vscode-tab-activeBackground); } -.karavan .main-tabs .pf-c-tabs__item-text { - color: var(--pf-global--palette--black-400); +.karavan .main-tabs .pf-v5-c-tabs__item-text { + color: var(--pf-v5-global--palette--black-400); } .karavan .loading-page { @@ -93,16 +93,16 @@ body, :root, #root, .karavan { } */ /* Tabs */ -.vscode-dark .pf-c-tabs__link::after { - border-color: var(--pf-global--active-color--100); +.vscode-dark .pf-v5-c-tabs__link::after { + border-color: var(--pf-v5-global--active-color--100); } -.vscode-dark .pf-c-tabs__scroll-button { +.vscode-dark .pf-v5-c-tabs__scroll-button { color: #cecece; background-color: var(--vscode-editor-background); } -.vscode-dark .pf-c-tabs__scroll-button::before { +.vscode-dark .pf-v5-c-tabs__scroll-button::before { border-color: var(--vscode-tab-inactiveBackground); } @@ -117,26 +117,26 @@ body, :root, #root, .karavan { } .vscode-dark .karavan .dsl-page .flows .step-element .header-route { - color: var(--pf-global--Color--200); + color: var(--pf-v5-global--Color--200); } .vscode-dark .karavan .dsl-page .flows .step-element-with-steps { - border-color: var(--pf-global--Color--200); + border-color: var(--pf-v5-global--Color--200); } .vscode-dark .step-element .selected .text { - color: var(--pf-global--info-color--100); + color: var(--pf-v5-global--info-color--100); } .vscode-dark .step-element .selected .header-icon { - border-color: var(--pf-global--info-color--100); - background: var(--pf-global--info-color--100); + border-color: var(--pf-v5-global--info-color--100); + background: var(--pf-v5-global--info-color--100); border-width: 2px; } .vscode-dark .step-element .header-icon { - background: var(--pf-global--BorderColor--200); - border-color: var(--pf-global--Color--200); + background: var(--pf-v5-global--BorderColor--200); + border-color: var(--pf-v5-global--Color--200); } .vscode-dark .step-element .header .text-bottom { @@ -150,21 +150,21 @@ body, :root, #root, .karavan { /* Connections */ .vscode-dark .karavan .dsl-page .graph .connections .arrow { - stroke: var(--pf-global--BorderColor--light-100); - fill: var(--pf-global--BorderColor--light-100); + stroke: var(--pf-v5-global--BorderColor--light-100); + fill: var(--pf-v5-global--BorderColor--light-100); } .vscode-dark .karavan .dsl-page .graph .connections .path { - stroke: var(--pf-global--BorderColor--light-100); + stroke: var(--pf-v5-global--BorderColor--light-100); } .vscode-dark .karavan .dsl-page .graph .connections .path-incoming { - stroke: var(--pf-global--BorderColor--light-100); + stroke: var(--pf-v5-global--BorderColor--light-100); } .vscode-dark .karavan .dsl-page .graph .connections .circle-outgoing, .vscode-dark .karavan .dsl-page .graph .connections .circle-incoming { - stroke: var(--pf-global--Color--200); - fill: var(--pf-global--BorderColor--200); + stroke: var(--pf-v5-global--Color--200); + fill: var(--pf-v5-global--BorderColor--200); } /* Properties */ @@ -175,17 +175,17 @@ body, :root, #root, .karavan { margin-bottom: 0; } -.vscode-dark .karavan .pf-c-drawer__splitter { +.vscode-dark .karavan .pf-v5-c-drawer__splitter { background: var(--vscode-tab-inactiveBackground); } -.vscode-dark .karavan .pf-c-drawer__splitter::after { +.vscode-dark .karavan .pf-v5-c-drawer__splitter::after { border: var(--vscode-tab-inactiveBackground) solid; border-width: 2px; } -.vscode-dark .karavan .pf-c-switch { - --pf-c-switch__input--checked__toggle--BackgroundColor: var(--vscode-focusBorder); +.vscode-dark .karavan .pf-v5-c-switch { + --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--vscode-focusBorder); } .vscode-dark .karavan .properties .text-field { @@ -194,52 +194,52 @@ body, :root, #root, .karavan { color: var(--vscode-input-foreground); } -.vscode-dark .pf-c-select { - --pf-c-select__toggle--BackgroundColor: var(--vscode-input-background); - --pf-c-select__toggle--before--BorderTopColor: var(--vscode-input-background); - --pf-c-select__toggle--before--BorderRightColor: var(--vscode-input-background); - --pf-c-select__toggle--before--BorderBottomColor: var(--vscode-input-background); - --pf-c-select__toggle--before--BorderLeftColor: var(--vscode-input-background); - --pf-c-select__toggle--Color: var(--pf-global--Color--200); +.vscode-dark .pf-v5-c-select { + --pf-v5-c-select__toggle--BackgroundColor: var(--vscode-input-background); + --pf-v5-c-select__toggle--before--BorderTopColor: var(--vscode-input-background); + --pf-v5-c-select__toggle--before--BorderRightColor: var(--vscode-input-background); + --pf-v5-c-select__toggle--before--BorderBottomColor: var(--vscode-input-background); + --pf-v5-c-select__toggle--before--BorderLeftColor: var(--vscode-input-background); + --pf-v5-c-select__toggle--Color: var(--pf-v5-global--Color--200); } -.vscode-dark .pf-c-select__menu { +.vscode-dark .pf-v5-c-select__menu { background-color: var(--vscode-input-background); - box-shadow: var(--pf-c-select__menu--BoxShadow); + box-shadow: var(--pf-v5-c-select__menu--BoxShadow); } -.vscode-dark .karavan .properties .pf-c-select__menu-item { +.vscode-dark .karavan .properties .pf-v5-c-select__menu-item { color: var(--vscode-input-foreground); } -.vscode-dark .karavan .properties .pf-c-select__menu-item:hover { +.vscode-dark .karavan .properties .pf-v5-c-select__menu-item:hover { color: var(--vscode-input-foreground); background-color: var(--vscode-focusBorder); } -.vscode-dark .karavan .properties .pf-c-select__menu-item:hover .pf-c-select__menu-item-description { +.vscode-dark .karavan .properties .pf-v5-c-select__menu-item:hover .pf-v5-c-select__menu-item-description { color: var(--vscode-input-foreground); } -.vscode-dark .karavan .properties .pf-c-select__toggle-typeahead { +.vscode-dark .karavan .properties .pf-v5-c-select__toggle-typeahead { color: var(--vscode-input-foreground); } -.vscode-dark .karavan .properties .pf-c-input-group, -.vscode-dark .karavan .properties .pf-c-text-input-group { +.vscode-dark .karavan .properties .pf-v5-c-input-group, +.vscode-dark .karavan .properties .pf-v5-c-text-input-group { background-color: var(--vscode-input-background); border-color: var(--vscode-input-foreground);; color: var(--vscode-input-foreground); - --pf-c-text-input-group__text--before--BorderColor: transparent; - --pf-c-text-input-group__text--after--BorderBottomColor: transparent; + --pf-v5-c-text-input-group__text--before--BorderColor: transparent; + --pf-v5-c-text-input-group__text--after--BorderBottomColor: transparent; } -.vscode-dark .karavan .properties .pf-c-input-group .pf-m-control { +.vscode-dark .karavan .properties .pf-v5-c-input-group .pf-m-control { background-color: transparent; color: var(--vscode-input-foreground); } -.vscode-dark .karavan .properties .pf-c-input-group .pf-c-button.pf-m-control::after { +.vscode-dark .karavan .properties .pf-v5-c-input-group .pf-v5-c-button.pf-m-control::after { border-radius: initial; border-right: none; border-top: none; @@ -247,54 +247,54 @@ body, :root, #root, .karavan { border-bottom-color: transparent; } -.vscode-dark .karavan .properties .pf-c-input-group .pf-c-button.pf-m-control:hover::after { +.vscode-dark .karavan .properties .pf-v5-c-input-group .pf-v5-c-button.pf-m-control:hover::after { border-bottom-color: var(--vscode-focusBorder); } -.vscode-dark .karavan .properties .input-group .pf-c-chip-group .pf-c-chip { - --pf-c-chip--BackgroundColor: transparent; - --pf-c-chip__text--Color: var(--vscode-input-foreground); - --pf-c-chip--before--BorderColor: var(--vscode-input-foreground); +.vscode-dark .karavan .properties .input-group .pf-v5-c-chip-group .pf-v5-c-chip { + --pf-v5-c-chip--BackgroundColor: transparent; + --pf-v5-c-chip__text--Color: var(--vscode-input-foreground); + --pf-v5-c-chip--before--BorderColor: var(--vscode-input-foreground); } -.vscode-dark .karavan .properties .input-group .pf-c-chip-group li:last-child .pf-c-chip { - --pf-c-chip--before--BorderColor: transparent; +.vscode-dark .karavan .properties .input-group .pf-v5-c-chip-group li:last-child .pf-v5-c-chip { + --pf-v5-c-chip--before--BorderColor: transparent; } -.vscode-dark .karavan .properties .pf-c-select__toggle-text { +.vscode-dark .karavan .properties .pf-v5-c-select__toggle-text { color: var(--vscode-input-foreground); } -.vscode-dark .karavan .properties .pf-c-expandable-section__toggle-icon { +.vscode-dark .karavan .properties .pf-v5-c-expandable-section__toggle-icon { color: var(--vscode-focusBorder); } .vscode-dark .karavan .properties .object-value { - --pf-c-card--BackgroundColor: transparent; + --pf-v5-c-card--BackgroundColor: transparent; border-color: var(--vscode-input-foreground); } /* Popover */ -.vscode-dark .pf-c-popover { - --pf-c-popover__content--BackgroundColor: var(--vscode-tab-activeBackground); - --pf-c-popover__arrow--BackgroundColor: var(--vscode-tab-activeBackground); +.vscode-dark .pf-v5-c-popover { + --pf-v5-c-popover__content--BackgroundColor: var(--vscode-tab-activeBackground); + --pf-v5-c-popover__arrow--BackgroundColor: var(--vscode-tab-activeBackground); } -.vscode-dark .pf-c-tooltip { - --pf-c-tooltip__content--BackgroundColor: var(--vscode-input-background); +.vscode-dark .pf-v5-c-tooltip { + --pf-v5-c-tooltip__content--BackgroundColor: var(--vscode-input-background); } /* Modal */ .vscode-dark .dsl-modal .dsl-card .icon { height: 24px; - background: var(--pf-global--BorderColor--200); - border-color: var(--pf-global--Color--200); + background: var(--pf-v5-global--BorderColor--200); + border-color: var(--pf-v5-global--Color--200); border-radius: 24px; padding: 4px; } -.vscode-dark .pf-c-modal-box { - --pf-c-modal-box--BackgroundColor: var(--vscode-input-background); +.vscode-dark .pf-v5-c-modal-box { + --pf-v5-c-modal-box--BackgroundColor: var(--vscode-input-background); } .vscode-dark .dsl-modal .search .text-field { @@ -314,7 +314,7 @@ body, :root, #root, .karavan { .vscode-dark .karavan .kamelet-section, .vscode-dark .karavan .tools-section, -.vscode-dark .karavan .tools-section .pf-c-toolbar, +.vscode-dark .karavan .tools-section .pf-v5-c-toolbar, .vscode-dark .karavan .kamelets-page { background-color: transparent; border: none; @@ -334,13 +334,13 @@ color: var(--vscode-editor-foreground); color: var(--vscode-input-foreground); } -.vscode-dark .kamelet-modal-card .pf-c-table { +.vscode-dark .kamelet-modal-card .pf-v5-c-table { background-color: transparent; color: var(--vscode-input-foreground); } -.vscode-dark .pf-c-table { - --pf-c-table--cell--Color: var(--vscode-input-foreground); +.vscode-dark .pf-v5-c-table { + --pf-v5-c-table--cell--Color: var(--vscode-input-foreground); color: var(--vscode-input-foreground); } @@ -349,13 +349,13 @@ color: var(--vscode-editor-foreground); background: var(--vscode-editor-background); border: none; } -.vscode-dark .karavan .project-builder .header .pf-c-badge { - --pf-c-badge--BackgroundColor: var(--pf-global--primary-color--200); +.vscode-dark .karavan .project-builder .header .pf-v5-c-badge { + --pf-v5-c-badge--BackgroundColor: var(--pf-v5-global--primary-color--200); } .vscode-dark .karavan .project-builder h2, -.vscode-dark .karavan .project-builder .pf-c-card__title, -.vscode-dark .karavan .project-builder .pf-c-form__label-text { +.vscode-dark .karavan .project-builder .pf-v5-c-card__title, +.vscode-dark .karavan .project-builder .pf-v5-c-form__label-text { color: var(--vscode-editor-foreground); } @@ -369,42 +369,42 @@ color: var(--vscode-editor-foreground); color: var(--vscode-input-foreground); } -.vscode-dark .karavan .project-builder .pf-c-input-group { +.vscode-dark .karavan .project-builder .pf-v5-c-input-group { background-color: transparent; border-color: var(--vscode-input-foreground); color: var(--vscode-input-foreground); - --pf-c-text-input-group__text--before--BorderColor: transparent; - --pf-c-text-input-group__text--after--BorderBottomColor: transparent; + --pf-v5-c-text-input-group__text--before--BorderColor: transparent; + --pf-v5-c-text-input-group__text--after--BorderBottomColor: transparent; } -.vscode-dark .karavan .project-builder .pf-c-toggle-group { - --pf-c-toggle-group__button--BackgroundColor: transparent; - --pf-c-toggle-group__button--Color: var(--vscode-editor-foreground); +.vscode-dark .karavan .project-builder .pf-v5-c-toggle-group { + --pf-v5-c-toggle-group__button--BackgroundColor: transparent; + --pf-v5-c-toggle-group__button--Color: var(--vscode-editor-foreground); } -.vscode-dark .karavan .project-builder .pf-c-toggle-group .pf-c-toggle-group__button.pf-m-selected { - --pf-c-toggle-group__button--BackgroundColor: var(--pf-global--primary-color--200); +.vscode-dark .karavan .project-builder .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button.pf-m-selected { + --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--primary-color--200); } -.vscode-dark .karavan .project-builder .pf-c-toggle-group .pf-c-toggle-group__button:hover { - --pf-c-toggle-group__button--BackgroundColor: var(--vscode-input-background); +.vscode-dark .karavan .project-builder .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button:hover { + --pf-v5-c-toggle-group__button--BackgroundColor: var(--vscode-input-background); } -.vscode-dark .karavan .project-builder .pf-c-progress-stepper__step-icon { +.vscode-dark .karavan .project-builder .pf-v5-c-progress-stepper__step-icon { background-color: var(--vscode-input-background); } -.vscode-dark .karavan .project-builder .footer .buttons .pf-c-toolbar { +.vscode-dark .karavan .project-builder .footer .buttons .pf-v5-c-toolbar { background: transparent; } -.vscode-dark .project-builder .pf-c-table { +.vscode-dark .project-builder .pf-v5-c-table { background-color: transparent; color: var(--vscode-input-foreground); } -.vscode-dark .pf-c-table { - --pf-c-table--cell--Color: var(--vscode-input-foreground); +.vscode-dark .pf-v5-c-table { + --pf-v5-c-table--cell--Color: var(--vscode-input-foreground); color: var(--vscode-input-foreground); } @@ -416,4 +416,12 @@ color: var(--vscode-editor-foreground); .vscode-dark .karavan .tools-section .knowledge-tabs { background-color: transparent; +} + +.vscode-dark .dsl-modal .pf-v5-c-page__main-section.pf-m-dark-100 { + --pf-v5-c-page__main-section--BackgroundColor: transparent; +} + +.vscode-dark .dsl-modal .pf-v5-c-toggle-group .pf-v5-c-toggle-group__button.pf-m-selected { + --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-global--primary-color--200); } \ No newline at end of file