From ddd263bd39d4de262e6c891dce6c6ff6ba2a3379 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D1=80=D1=82=D1=91=D0=BC=20=D0=9C=D1=83=D1=84=D0=B0?= =?UTF-8?q?=D0=B7=D0=B0=D0=BB=D0=BE=D0=B2?= <67755036+artemmufazalov@users.noreply.github.com> Date: Thu, 14 Dec 2023 16:04:46 +0300 Subject: [PATCH] feat: update to uikit5 (#607) --- package-lock.json | 244 +++++++++----- package.json | 11 +- .../BasicNodeViewer/BasicNodeViewer.scss | 14 +- .../CircularProgressBar.scss | 8 +- src/components/DateRange/DateRange.scss | 6 +- .../DiagnosticCard/DiagnosticCard.scss | 8 +- src/components/Divider/Divider.scss | 2 +- src/components/EmptyState/EmptyState.scss | 17 +- src/components/EntityStatus/EntityStatus.scss | 48 ++- .../ExternalLinkWithIcon.tsx | 4 +- .../FullNodeViewer/FullNodeViewer.scss | 5 +- src/components/Fullscreen/Fullscreen.scss | 11 +- src/components/Icon/Icon.tsx | 6 +- src/components/InfoViewer/InfoViewer.scss | 12 +- .../LabelWithPopover/LabelWithPopover.tsx | 5 +- .../NodeHostWrapper/NodeHostWrapper.tsx | 4 +- src/components/PoolBar/PoolBar.scss | 12 +- src/components/PoolUsage/PoolUsage.scss | 32 +- .../ProgressViewer/ProgressViewer.scss | 33 +- .../QueryExecutionStatus.scss | 6 +- .../SpeedMultiMeter/SpeedMultiMeter.scss | 10 +- .../SpeedMultiMeter/SpeedMultiMeter.tsx | 25 +- src/components/SplitPane/SplitPane.scss | 10 +- .../TableSkeleton/TableSkeleton.scss | 2 +- src/components/Tablet/Tablet.scss | 20 +- .../TabletsStatistic/TabletsStatistic.scss | 26 +- src/components/Tag/Tag.scss | 6 +- .../TruncatedQuery/TruncatedQuery.scss | 2 +- src/components/UsageLabel/UsageLabel.scss | 4 +- src/components/UsageLabel/UsageLabel.tsx | 2 +- src/components/VirtualTable/VirtualTable.scss | 6 +- src/containers/App/App.scss | 44 ++- src/containers/App/TipPopup/TipPopup.js | 66 ---- src/containers/App/TipPopup/TipPopup.scss | 46 --- .../AsideNavigation/AsideNavigation.scss | 5 +- .../Authentication/Authentication.scss | 8 +- .../Cluster/ClusterInfo/ClusterInfo.scss | 10 +- .../Cluster/ClusterInfo/ClusterInfo.tsx | 2 +- .../ClusterInfoSkeleton.scss | 6 +- .../Cluster/VersionsBar/VersionsBar.tsx | 2 +- src/containers/Header/Header.scss | 2 +- src/containers/Heatmap/Heatmap.scss | 8 +- .../Heatmap/Histogram/Histogram.scss | 12 +- .../Node/NodeStructure/NodeStructure.scss | 23 +- src/containers/Node/NodeStructure/Pdisk.tsx | 2 +- src/containers/ReduxTooltip/ReduxTooltip.js | 2 +- src/containers/ReduxTooltip/ReduxTooltip.scss | 19 +- .../DiskStateProgressBar.scss | 46 +-- src/containers/Storage/PDisk/PDisk.scss | 8 +- .../Storage/PDiskPopup/PDiskPopup.tsx | 2 +- src/containers/Storage/Storage.scss | 2 +- .../Storage/StorageGroups/StorageGroups.scss | 2 +- .../Storage/UsageFilter/UsageFilter.scss | 13 +- .../Storage/VDiskPopup/VDiskPopup.scss | 2 +- .../Storage/VDiskPopup/VDiskPopup.tsx | 2 +- src/containers/Tablet/Tablet.scss | 10 +- .../TabletsFilters/TabletsFilters.scss | 5 +- src/containers/Tenant/Acl/Acl.scss | 16 +- .../Diagnostics/Consumers/Consumers.scss | 4 - .../TopicStats/ConsumersTopicStats.scss | 9 +- .../DetailedOverview/DetailedOverview.scss | 6 - .../Tenant/Diagnostics/Diagnostics.scss | 4 +- .../Tenant/Diagnostics/HotKeys/HotKeys.scss | 4 +- .../Tenant/Diagnostics/Network/Network.scss | 18 +- .../Network/NodeNetwork/NodeNetwork.scss | 16 +- .../Diagnostics/Partitions/Partitions.scss | 6 +- .../PartitionsControls/PartitionsControls.tsx | 1 - .../Healthcheck/Healthcheck.scss | 24 +- .../Healthcheck/IssuesViewer/IssueTree.scss | 37 +-- .../IssueTreeItem/IssueTreeItem.scss | 6 +- .../MetricsCards/MetricCard/MetricCard.scss | 14 +- .../TenantOverview/TenantOverview.scss | 4 +- .../Diagnostics/TopShards/TopShards.scss | 2 +- .../Tenant/ObjectSummary/ObjectSummary.scss | 12 +- .../Tenant/ObjectSummary/ObjectSummary.tsx | 3 +- .../Query/ExecuteResult/ExecuteResult.scss | 9 +- .../Query/ExplainResult/ExplainResult.scss | 7 +- .../Tenant/Query/Issues/Issues.scss | 25 +- .../Tenant/Query/Preview/Preview.scss | 10 +- .../Query/QueryDuration/QueryDuration.scss | 2 +- .../Tenant/Query/QueryEditor/QueryEditor.scss | 12 +- .../QueryEditorControls.scss | 9 - .../QueryEditorControls.tsx | 24 +- .../Tenant/Query/SaveQuery/SaveQuery.scss | 10 +- .../Query/SavedQueries/SavedQueries.tsx | 6 +- src/containers/Tenant/Tenant.scss | 3 +- .../Tenant/utils/schemaControls.tsx | 4 +- src/containers/UserSettings/Setting.tsx | 6 +- .../GroupedNodesTree/GroupedNodesTree.scss | 5 +- .../NodesTreeTitle/NodesTreeTitle.scss | 2 +- .../NodesTreeTitle/NodesTreeTitle.tsx | 2 +- src/index.tsx | 1 + src/styles/mixins.scss | 72 ++--- src/styles/themes.scss | 73 +++++ src/styles/themes/dark-hc.scss | 296 +++++++++++++++++ src/styles/themes/dark.scss | 297 ++++++++++++++++++ src/styles/themes/light-hc.scss | 289 +++++++++++++++++ src/styles/themes/light.scss | 291 +++++++++++++++++ 98 files changed, 1819 insertions(+), 772 deletions(-) delete mode 100644 src/containers/App/TipPopup/TipPopup.js delete mode 100644 src/containers/App/TipPopup/TipPopup.scss create mode 100644 src/styles/themes.scss create mode 100644 src/styles/themes/dark-hc.scss create mode 100644 src/styles/themes/dark.scss create mode 100644 src/styles/themes/light-hc.scss create mode 100644 src/styles/themes/light.scss diff --git a/package-lock.json b/package-lock.json index 59aed2d78..88da4ba22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4689,6 +4689,11 @@ "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==" }, + "@bem-react/classname": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@bem-react/classname/-/classname-1.6.0.tgz", + "integrity": "sha512-SFBwUHMcb7TFFK5ld88+JhecoEun3/kHZ6KvLDjj3w5hv/tfRV8mtGHA8N42uMctXLF4bPEcr96xwXXcRFuweg==" + }, "@commitlint/cli": { "version": "15.0.0", "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-15.0.0.tgz", @@ -5340,6 +5345,31 @@ "resolved": "https://registry.npmjs.org/@gravity-ui/axios-wrapper/-/axios-wrapper-1.3.0.tgz", "integrity": "sha512-5hR8aGLfRG1hyxFG4CxANSdX//Z6ADzs+mFj9M0sbf0NYynVAid7G3+/44234B/g5GK7jxrycLPMvlQ/sIlWRw==" }, + "@gravity-ui/components": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/@gravity-ui/components/-/components-2.9.1.tgz", + "integrity": "sha512-PrCVecEbI81O6GaCA/KK2rx8e22hsTKadH1OpcQDUogeyBbyEL+0tVID8eKz77Eijm4Od1wMxn96dmBOxAhECg==", + "requires": { + "@bem-react/classname": "^1.6.0", + "@gravity-ui/i18n": "^1.1.0", + "@gravity-ui/icons": "^2.4.0", + "lodash": "^4.17.21", + "resize-observer-polyfill": "^1.5.1", + "universal-cookie": "^6.1.1" + }, + "dependencies": { + "@gravity-ui/i18n": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.1.0.tgz", + "integrity": "sha512-Ck+LNE1S2GGaMKMijIYWogiM/tYk0wHPlqLrhZmzp6P5keIu8YnPDeIlwAzq4eYVSrtTudLmshFB9QmYAeLryQ==" + }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + } + } + }, "@gravity-ui/date-utils": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@gravity-ui/date-utils/-/date-utils-1.1.1.tgz", @@ -5592,24 +5622,29 @@ "integrity": "sha512-KNYNhQjA9XqLo0RVEwNRqdA7/Lx5LLrNDtqWCvOGzXTwKU0GFNlWJaoSvk7u97apag23nTxgmpk551FlRCfehA==" }, "@gravity-ui/icons": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/icons/-/icons-2.2.0.tgz", - "integrity": "sha512-CsYg+Dj08Yp1eGKux7c+sm7HSPJRDvDBjyOHnL6UR19QM+HCpdGiyrR2VVBvYadwm2eOeX4JNSn+vMPrqsmJdg==", - "dev": true + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/@gravity-ui/icons/-/icons-2.8.1.tgz", + "integrity": "sha512-cldaFAN3W2OAzEZBiurD7RsqyqGhS7xoVS9TC4DrOG9bXy8dWUvNEeeOnKgpIvZgAGFlTmg01BK6jMH0IFFSPw==" }, "@gravity-ui/navigation": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@gravity-ui/navigation/-/navigation-0.4.0.tgz", - "integrity": "sha512-YCRSe8/ZRrlcXMrS09P5BNrJeZizWHZ3fKyQD+fquSkyb107Mz7ct1sPYRnpBiF29I5X7hLgs8QOgyAM9jDaGQ==", + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/navigation/-/navigation-1.8.0.tgz", + "integrity": "sha512-TmYR133rPdETwj07+YgvqoJf3jVjI8ad0QAhHU6XmPyjTZhsR8/BuQ+XZ8W/VCkJgDwO27rNEmcfOXcvcnXdqw==", "requires": { + "@gravity-ui/i18n": "^1.1.0", "react-transition-group": "^4.4.1", "tslib": "^2.4.0" }, "dependencies": { + "@gravity-ui/i18n": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.1.0.tgz", + "integrity": "sha512-Ck+LNE1S2GGaMKMijIYWogiM/tYk0wHPlqLrhZmzp6P5keIu8YnPDeIlwAzq4eYVSrtTudLmshFB9QmYAeLryQ==" + }, "tslib": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==" + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" } } }, @@ -5677,51 +5712,45 @@ "dev": true }, "@gravity-ui/uikit": { - "version": "4.11.1", - "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-4.11.1.tgz", - "integrity": "sha512-0aYBRApH1mZ6hR0vmvPkU23kfxV1KPsNbgt1nee+/3JzW0ZelXZEyKJSdxuzMxNIMgKD3hotjvNYogsK+Gnb3A==", + "version": "5.24.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.24.0.tgz", + "integrity": "sha512-NpMzh46rj4h0viW8DO9jE6qyGLqVPDK86fBWUKfxOvOT92eRzwNltVpEpGPgWUrtZQQWs7Vxb3BD/WRAcem3dQ==", "dev": true, "requires": { - "@gravity-ui/i18n": "^1.0.0", - "@popperjs/core": "2.11.6", - "bem-cn-lite": "4.0.0", + "@bem-react/classname": "^1.6.0", + "@gravity-ui/i18n": "^1.1.0", + "@gravity-ui/icons": "^2.5.0", + "@popperjs/core": "^2.11.8", "blueimp-md5": "^2.19.0", - "focus-trap": "7.4.0", - "lodash": "4.17.21", - "react-copy-to-clipboard": "5.1.0", - "react-popper": "2.3.0", - "react-sortable-hoc": "2.0.0", + "focus-trap": "^7.5.2", + "lodash": "^4.17.21", + "react-beautiful-dnd": "^13.1.1", + "react-copy-to-clipboard": "^5.1.0", + "react-popper": "^2.3.0", "react-transition-group": "^4.4.5", - "react-virtualized-auto-sizer": "1.0.7", - "react-window": "1.8.8", - "resize-observer-polyfill": "1.5.1", - "tabbable": "6.1.1", - "tslib": "2.3.1", - "utility-types": "3.10.0" + "react-virtualized-auto-sizer": "^1.0.20", + "react-window": "^1.8.9", + "tabbable": "^6.2.0", + "tslib": "^2.6.1", + "utility-types": "^3.10.0" }, "dependencies": { + "@gravity-ui/i18n": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@gravity-ui/i18n/-/i18n-1.1.0.tgz", + "integrity": "sha512-Ck+LNE1S2GGaMKMijIYWogiM/tYk0wHPlqLrhZmzp6P5keIu8YnPDeIlwAzq4eYVSrtTudLmshFB9QmYAeLryQ==", + "dev": true + }, "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, - "react-transition-group": { - "version": "4.4.5", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", - "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "dev": true, - "requires": { - "@babel/runtime": "^7.5.5", - "dom-helpers": "^5.0.1", - "loose-envify": "^1.4.0", - "prop-types": "^15.6.2" - } - }, "tslib": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz", - "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "dev": true } } @@ -6404,9 +6433,9 @@ } }, "@popperjs/core": { - "version": "2.11.6", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", - "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "dev": true }, "@rollup/plugin-babel": { @@ -6816,6 +6845,11 @@ "@types/node": "*" } }, + "@types/cookie": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.4.tgz", + "integrity": "sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA==" + }, "@types/eslint": { "version": "8.21.1", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz", @@ -9750,6 +9784,15 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-box-model": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz", + "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==", + "dev": true, + "requires": { + "tiny-invariant": "^1.0.6" + } + }, "css-declaration-sorter": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz", @@ -12384,12 +12427,12 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "focus-trap": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.4.0.tgz", - "integrity": "sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg==", + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.5.4.tgz", + "integrity": "sha512-N7kHdlgsO/v+iD/dMoJKtsSqs5Dz/dXZVebRgJw23LDk+jMi/974zyiOYDziY2JPp8xivq9BmUGwIJMiuSBi7w==", "dev": true, "requires": { - "tabbable": "^6.1.1" + "tabbable": "^6.2.0" } }, "follow-redirects": { @@ -13335,15 +13378,6 @@ "side-channel": "^1.0.4" } }, - "invariant": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", - "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, - "requires": { - "loose-envify": "^1.0.0" - } - }, "ip-regex": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz", @@ -18740,6 +18774,12 @@ "performance-now": "^2.1.0" } }, + "raf-schd": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz", + "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==", + "dev": true + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -18811,6 +18851,32 @@ } } }, + "react-beautiful-dnd": { + "version": "13.1.1", + "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz", + "integrity": "sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==", + "dev": true, + "requires": { + "@babel/runtime": "^7.9.2", + "css-box-model": "^1.2.0", + "memoize-one": "^5.1.1", + "raf-schd": "^4.0.2", + "react-redux": "^7.2.0", + "redux": "^4.0.4", + "use-memo-one": "^1.1.1" + }, + "dependencies": { + "redux": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", + "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", + "dev": true, + "requires": { + "@babel/runtime": "^7.9.2" + } + } + } + }, "react-copy-to-clipboard": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz", @@ -18923,9 +18989,9 @@ "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, "react-fast-compare": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz", - "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", "dev": true }, "react-is": { @@ -19130,17 +19196,6 @@ } } }, - "react-sortable-hoc": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz", - "integrity": "sha512-JZUw7hBsAHXK7PTyErJyI7SopSBFRcFHDjWW5SWjcugY0i6iH7f+eJkY8cJmGMlZ1C9xz1J3Vjz0plFpavVeRg==", - "dev": true, - "requires": { - "@babel/runtime": "^7.2.0", - "invariant": "^2.2.4", - "prop-types": "^15.5.7" - } - }, "react-split": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/react-split/-/react-split-2.0.14.tgz", @@ -19151,9 +19206,9 @@ } }, "react-transition-group": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", - "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "requires": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -19170,15 +19225,15 @@ } }, "react-virtualized-auto-sizer": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz", - "integrity": "sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==", + "version": "1.0.20", + "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.20.tgz", + "integrity": "sha512-OdIyHwj4S4wyhbKHOKM1wLSj/UDXm839Z3Cvfg2a9j+He6yDa6i5p0qQvEiCnyQlGO/HyfSnigQwuxvYalaAXA==", "dev": true }, "react-window": { - "version": "1.8.8", - "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.8.tgz", - "integrity": "sha512-D4IiBeRtGXziZ1n0XklnFGu7h9gU684zepqyKzgPNzrsrk7xOCxni+TCckjg2Nr/DiaEEGVVmnhYSlT2rB47dQ==", + "version": "1.8.10", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", + "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", "dev": true, "requires": { "@babel/runtime": "^7.0.0", @@ -20791,9 +20846,9 @@ "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, "tabbable": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz", - "integrity": "sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", "dev": true }, "table": { @@ -21424,6 +21479,15 @@ "crypto-random-string": "^2.0.0" } }, + "universal-cookie": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-6.1.1.tgz", + "integrity": "sha512-33S9x3CpdUnnjwTNs2Fgc41WGve2tdLtvaK2kPSbZRc5pGpz2vQFbRWMxlATsxNNe/Cy8SzmnmbuBM85jpZPtA==", + "requires": { + "@types/cookie": "^0.5.1", + "cookie": "^0.5.0" + } + }, "universalify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz", @@ -21494,6 +21558,12 @@ "requires-port": "^1.0.0" } }, + "use-memo-one": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.3.tgz", + "integrity": "sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==", + "dev": true + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -22296,9 +22366,9 @@ "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==" }, "ydb-ui-components": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/ydb-ui-components/-/ydb-ui-components-3.3.1.tgz", - "integrity": "sha512-zviAbIILxRjXjg8/oEMNnhcKV3NC+EumFUw7Tht6XLJy+6kCFgLtAkrNbBB3ARMPRTjMWxrZT3ZTMnJ4CAytNQ==", + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/ydb-ui-components/-/ydb-ui-components-3.5.0.tgz", + "integrity": "sha512-vcGJhudLvJnE0BirvFWFjQb/iZb/oZcBQdrcgb41+3t8FSxbdS8+w1yBxxhZ7kt0kFup0FPk0Stj9quxVbXgNA==", "requires": { "@gravity-ui/i18n": "^1.0.0", "bem-cn-lite": "^4.1.0", diff --git a/package.json b/package.json index c5b23b622..1796e3643 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,10 @@ }, "dependencies": { "@gravity-ui/axios-wrapper": "^1.3.0", + "@gravity-ui/components": "^2.9.1", "@gravity-ui/date-utils": "^1.1.1", "@gravity-ui/i18n": "^1.0.0", - "@gravity-ui/navigation": "^0.4.0", + "@gravity-ui/navigation": "^1.8.0", "@gravity-ui/paranoid": "^1.4.0", "@gravity-ui/react-data-table": "^1.0.3", "@types/react": "^17.0.58", @@ -40,7 +41,7 @@ "reselect": "4.1.6", "sass": "1.32.8", "web-vitals": "1.1.2", - "ydb-ui-components": "^3.3.1" + "ydb-ui-components": "^3.5.0" }, "scripts": { "start": "react-app-rewired start", @@ -107,11 +108,11 @@ "@commitlint/cli": "^15.0.0", "@commitlint/config-conventional": "^15.0.0", "@gravity-ui/eslint-config": "^1.0.2", - "@gravity-ui/icons": "^2.2.0", + "@gravity-ui/icons": "^2.8.1", "@gravity-ui/prettier-config": "^1.0.1", "@gravity-ui/stylelint-config": "^1.0.1", "@gravity-ui/tsconfig": "^1.0.0", - "@gravity-ui/uikit": "^4.11.1", + "@gravity-ui/uikit": "^5.24.0", "@playwright/test": "^1.31.1", "@testing-library/jest-dom": "^5.15.0", "@testing-library/react": "^11.2.7", @@ -139,6 +140,6 @@ "url": "^0.11.0" }, "peerDependencies": { - "@gravity-ui/uikit": "^3.0.1" + "@gravity-ui/uikit": "^5.24.0" } } diff --git a/src/components/BasicNodeViewer/BasicNodeViewer.scss b/src/components/BasicNodeViewer/BasicNodeViewer.scss index 68edff996..3529d3dec 100644 --- a/src/components/BasicNodeViewer/BasicNodeViewer.scss +++ b/src/components/BasicNodeViewer/BasicNodeViewer.scss @@ -1,20 +1,17 @@ @import '../../styles/mixins.scss'; .basic-node-viewer { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); - display: flex; align-items: center; margin: 15px 0; + @include body-2-typography(); + &__title { margin: 0 20px 0 0; - font-size: var(--yc-text-body-2-font-size); font-weight: 600; - line-height: var(--yc-text-body-2-line-height); text-transform: uppercase; } @@ -25,15 +22,10 @@ &__label { margin-right: 10px; - font-size: var(--yc-text-body-2-font-size); line-height: 18px; white-space: nowrap; - color: var(--yc-color-text-hint); - - .yc-root_theme_dark & { - color: var(--yc-color-text-hint); - } + color: var(--g-color-text-hint); } &__link { diff --git a/src/components/CircularProgressBar/CircularProgressBar.scss b/src/components/CircularProgressBar/CircularProgressBar.scss index 64174986a..9ac4ad37f 100644 --- a/src/components/CircularProgressBar/CircularProgressBar.scss +++ b/src/components/CircularProgressBar/CircularProgressBar.scss @@ -21,7 +21,7 @@ } &__circle-bg { - stroke: var(--yc-color-base-simple-hover); + stroke: var(--g-color-base-simple-hover); fill: none; } @@ -30,13 +30,13 @@ fill: none; &_status_good { - stroke: var(--yc-color-private-green-550); + stroke: var(--ydb-color-status-green); } &_status_warning { - stroke: var(--yc-color-private-yellow-550); + stroke: var(--ydb-color-status-yellow); } &_status_danger { - stroke: var(--yc-color-private-red-550); + stroke: var(--ydb-color-status-red); } } } diff --git a/src/components/DateRange/DateRange.scss b/src/components/DateRange/DateRange.scss index 2f78d6303..8c036523e 100644 --- a/src/components/DateRange/DateRange.scss +++ b/src/components/DateRange/DateRange.scss @@ -3,9 +3,9 @@ min-width: 190px; padding: 5px 8px; - color: var(--yc-color-text-primary); - border: 1px solid var(--yc-color-line-generic); - border-radius: var(--yc-border-radius-m); + color: var(--g-color-text-primary); + border: 1px solid var(--g-color-line-generic); + border-radius: var(--g-border-radius-m); background: transparent; } } diff --git a/src/components/DiagnosticCard/DiagnosticCard.scss b/src/components/DiagnosticCard/DiagnosticCard.scss index 9b5c07f67..bf5bf8197 100644 --- a/src/components/DiagnosticCard/DiagnosticCard.scss +++ b/src/components/DiagnosticCard/DiagnosticCard.scss @@ -5,18 +5,18 @@ padding: 16px; padding-bottom: 28px; - border: 1px solid var(--yc-color-line-generic); + border: 1px solid var(--g-color-line-generic); border-radius: 8px; background-color: transparent; &_active { - border-color: var(--yc-color-base-info-heavy); - background-color: var(--yc-color-base-selection); + border-color: var(--g-color-base-info-medium); + background-color: var(--g-color-base-selection); } &:hover { cursor: pointer; - box-shadow: 0px 1px 5px var(--yc-color-sfx-shadow); + box-shadow: 0px 1px 5px var(--g-color-sfx-shadow); } } diff --git a/src/components/Divider/Divider.scss b/src/components/Divider/Divider.scss index 74358c9a6..48fb823f2 100644 --- a/src/components/Divider/Divider.scss +++ b/src/components/Divider/Divider.scss @@ -3,5 +3,5 @@ height: 100%; margin: 0 4px; - background-color: var(--yc-color-line-generic); + background-color: var(--g-color-line-generic); } diff --git a/src/components/EmptyState/EmptyState.scss b/src/components/EmptyState/EmptyState.scss index b6bf2e179..22a1c3d36 100644 --- a/src/components/EmptyState/EmptyState.scss +++ b/src/components/EmptyState/EmptyState.scss @@ -1,3 +1,5 @@ +@import '../../styles/mixins.scss'; + .empty-state { padding: 20px; @@ -31,10 +33,10 @@ margin-right: 60px; - color: var(--yc-color-base-info-hover); + color: var(--g-color-base-info-light-hover); - .yc-root_theme_dark & { - color: var(--yc-color-base-generic); + .g-root_theme_dark & { + color: var(--g-color-base-generic); } } @@ -45,21 +47,18 @@ font-weight: 500; &_size_s { - font-size: var(--yc-text-subheader-3-font-size); - line-height: var(--yc-text-subheader-3-line-height); + @include lead-typography(); } &_size_m { - font-size: var(--yc-text-header-2-font-size); - line-height: var(--yc-text-header-2-line-height); + @include header-2-typography(); } } &__description { grid-area: description; - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); } &__actions { diff --git a/src/components/EntityStatus/EntityStatus.scss b/src/components/EntityStatus/EntityStatus.scss index 66e06d942..8bb0c9773 100644 --- a/src/components/EntityStatus/EntityStatus.scss +++ b/src/components/EntityStatus/EntityStatus.scss @@ -1,3 +1,5 @@ +@import '../../styles/mixins.scss'; + .entity-status { display: inline-flex; align-items: center; @@ -5,11 +7,11 @@ max-width: 100%; height: 100%; - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); &__clipboard-button { display: none; + justify-content: center; align-items: center; margin-left: 8px; @@ -33,28 +35,22 @@ a { text-decoration: none; - color: var(--yc-color-text-link); + color: var(--g-color-text-link); } a:hover { - color: var(--yc-color-text-link-hover); + color: var(--g-color-text-link-hover); } &__label { margin-right: 2px; - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); - - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); - &_size_m { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); - } + @include body-2-typography(); &_size_l { - font-size: var(--yc-text-header-2-font-size); + font-size: var(--g-text-header-2-font-size); } } @@ -108,45 +104,39 @@ &__status-color { &_state_running, &_state_green { - background-color: var(--yc-color-infographics-positive-heavy); + background-color: var(--ydb-color-status-green); } &_state_yellow { - background-color: var(--yc-color-infographics-warning-heavy); + background-color: var(--ydb-color-status-yellow); } &_state_blue { - background-color: var(--yc-color-infographics-info-heavy); + background-color: var(--ydb-color-status-blue); } - &_state_red { - background: var(--yc-color-infographics-danger-heavy); + background-color: var(--ydb-color-status-red); } &_state_gray, &_state_grey { - background: var(--yc-color-text-complementary); + background-color: var(--ydb-color-status-grey); } &_state_orange { - background: var(--yc-color-base-warning-orange); + background-color: var(--ydb-color-status-orange); } } &__label, &__status-icon { &_state_blue { - color: var(--yc-color-infographics-info-heavy); + color: var(--ydb-color-status-blue); } &_state_yellow { - color: var(--yc-color-infographics-warning-heavy); + color: var(--ydb-color-status-yellow); } &_state_orange { - color: var(--yc-color-base-warning-orange); + color: var(--ydb-color-status-orange); } &_state_red { - color: var(--yc-color-infographics-danger-heavy); + color: var(--ydb-color-status-red); } } - - &_size_m { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); - } } diff --git a/src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx b/src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx index b61efd4bf..a6fc45c9c 100644 --- a/src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx +++ b/src/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx @@ -2,7 +2,7 @@ import block from 'bem-cn-lite'; import {Link} from '@gravity-ui/uikit'; -import {IconWrapper} from '../Icon/Icon'; +import {Icon} from '../Icon/Icon'; import './ExternalLinkWithIcon.scss'; @@ -18,7 +18,7 @@ export const ExternalLinkWithIcon = ({title, url}: ExternalLinkWithIconProps) => {title} {'\u00a0'} - + ); }; diff --git a/src/components/FullNodeViewer/FullNodeViewer.scss b/src/components/FullNodeViewer/FullNodeViewer.scss index cb1a28bcf..7e41e2cfb 100644 --- a/src/components/FullNodeViewer/FullNodeViewer.scss +++ b/src/components/FullNodeViewer/FullNodeViewer.scss @@ -1,8 +1,7 @@ @import '../../styles/mixins.scss'; .full-node-viewer { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); &__common-info { display: flex; @@ -29,8 +28,6 @@ &__section-title { margin: 15px 0 10px; - font-size: var(--yc-text-body-2-font-size); font-weight: 600; - line-height: var(--yc-text-body-2-line-height); } } diff --git a/src/components/Fullscreen/Fullscreen.scss b/src/components/Fullscreen/Fullscreen.scss index 51a1f7d34..5ee305c04 100644 --- a/src/components/Fullscreen/Fullscreen.scss +++ b/src/components/Fullscreen/Fullscreen.scss @@ -1,6 +1,6 @@ .kv-fullscreen { // should expand to fill the content area, keeping aside navigation visible - // counts on .ycn-aside-header__content to have position: relative, it is set in App.scss + // counts on .gn-aside-header__content to have position: relative, it is set in App.scss position: absolute; z-index: 10; top: 0; @@ -12,19 +12,12 @@ overflow: hidden; flex-grow: 1; - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); &__close-button { position: fixed; z-index: 11; top: 8px; right: 20px; - - .yc-button__text { - display: flex; - align-items: center; - - margin: 0 6px; - } } } diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index f8638b87a..5222e2b83 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -32,8 +32,4 @@ export const Icon = ({ ); }; -// When used with uikit components Icon is considered as text element and corresponding styles are applied -// IconWrapper overrides displayName to 'Icon', so it will be considered as an icon with right styles -export const IconWrapper = (props: IconProps) => ; - -IconWrapper.displayName = 'Icon'; +Icon.displayName = 'Icon'; diff --git a/src/components/InfoViewer/InfoViewer.scss b/src/components/InfoViewer/InfoViewer.scss index 60c28c26b..a31c77ce0 100644 --- a/src/components/InfoViewer/InfoViewer.scss +++ b/src/components/InfoViewer/InfoViewer.scss @@ -1,6 +1,6 @@ .info-viewer { - --ydb-info-viewer-font-size: var(--yc-text-body-2-font-size); - --ydb-info-viewer-line-height: var(--yc-text-body-2-line-height); + --ydb-info-viewer-font-size: var(--g-text-body-2-font-size); + --ydb-info-viewer-line-height: var(--g-text-body-2-line-height); --ydb-info-viewer-title-font-weight: 600; --ydb-info-viewer-title-margin: 15px 0 10px; --ydb-info-viewer-items-gap: 7px; @@ -39,7 +39,7 @@ white-space: nowrap; - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } &__label-text { @@ -58,7 +58,7 @@ margin: 0 2px; - border-bottom: 1px dotted var(--yc-color-text-secondary); + border-bottom: 1px dotted var(--g-color-text-secondary); } &__value { @@ -71,8 +71,8 @@ &_size { &_s { - --ydb-info-viewer-font-size: var(--yc-text-body-1-font-size); - --ydb-info-viewer-line-height: var(--yc-text-body-1-line-height); + --ydb-info-viewer-font-size: var(--g-text-body-1-font-size); + --ydb-info-viewer-line-height: var(--g-text-body-1-line-height); --ydb-info-viewer-title-font-weight: 500; --ydb-info-viewer-title-margin: 0 0 4px; --ydb-info-viewer-items-gap: 4px; diff --git a/src/components/LabelWithPopover/LabelWithPopover.tsx b/src/components/LabelWithPopover/LabelWithPopover.tsx index b64bff02c..09fed720c 100644 --- a/src/components/LabelWithPopover/LabelWithPopover.tsx +++ b/src/components/LabelWithPopover/LabelWithPopover.tsx @@ -1,6 +1,6 @@ import type {ReactNode} from 'react'; -import {HelpPopover} from '@gravity-ui/uikit'; +import {HelpPopover} from '@gravity-ui/components'; interface LabelWithPopoverProps { text: ReactNode; @@ -16,7 +16,8 @@ export const LabelWithPopover = ({ contentClassName, }: LabelWithPopoverProps) => (
- {text + '\u00a0'} + {text} + {'\u00a0'}
); diff --git a/src/components/NodeHostWrapper/NodeHostWrapper.tsx b/src/components/NodeHostWrapper/NodeHostWrapper.tsx index 8ae4f6011..1eb336c96 100644 --- a/src/components/NodeHostWrapper/NodeHostWrapper.tsx +++ b/src/components/NodeHostWrapper/NodeHostWrapper.tsx @@ -9,7 +9,7 @@ import {isUnavailableNode} from '../../utils/nodes'; import EntityStatus from '../EntityStatus/EntityStatus'; import {NodeEndpointsTooltipContent} from '../TooltipsContent'; -import {IconWrapper} from '../Icon'; +import {Icon} from '../Icon'; import {CellWithPopover} from '../CellWithPopover/CellWithPopover'; import './NodeHostWrapper.scss'; @@ -56,7 +56,7 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => { className={b('external-button')} target="_blank" > - + )} diff --git a/src/components/PoolBar/PoolBar.scss b/src/components/PoolBar/PoolBar.scss index bddcac03a..dc81c5571 100644 --- a/src/components/PoolBar/PoolBar.scss +++ b/src/components/PoolBar/PoolBar.scss @@ -20,13 +20,13 @@ } &_type_normal { - border-color: var(--yc-color-infographics-positive-heavy); + border-color: var(--ydb-color-status-green); } &_type_warning { - border-color: var(--yc-color-infographics-warning-heavy); + border-color: var(--ydb-color-status-yellow); } &_type_danger { - border-color: var(--yc-color-infographics-danger-heavy); + border-color: var(--ydb-color-status-red); } &__value { @@ -37,13 +37,13 @@ min-height: 1px; &_type_normal { - background-color: var(--yc-color-infographics-positive-heavy); + background-color: var(--ydb-color-status-green); } &_type_warning { - background-color: var(--yc-color-infographics-warning-heavy); + background-color: var(--ydb-color-status-yellow); } &_type_danger { - background-color: var(--yc-color-infographics-danger-heavy); + background-color: var(--ydb-color-status-red); } } } diff --git a/src/components/PoolUsage/PoolUsage.scss b/src/components/PoolUsage/PoolUsage.scss index 10deeed2f..60e2dc74b 100644 --- a/src/components/PoolUsage/PoolUsage.scss +++ b/src/components/PoolUsage/PoolUsage.scss @@ -1,6 +1,8 @@ +@import '../../styles/mixins.scss'; + .ydb-pool-usage { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); + &__info { display: flex; justify-content: space-between; @@ -8,7 +10,7 @@ } &__pool-name { - color: var(--yc-color-text-primary); + color: var(--g-color-text-primary); } &__value { @@ -17,21 +19,17 @@ } &__threads { - font-size: var(--yc-text-body-1-font-size); + font-size: var(--g-text-body-1-font-size); - color: var(--yc-color-text-hint); - - .yc-root_theme_dark & { - color: var(--yc-color-text-hint); - } + color: var(--g-color-text-hint); } &__percents { margin-right: 2px; - font-size: var(--yc-text-body-1-font-size); + font-size: var(--g-text-body-1-font-size); - color: var(--yc-color-text-primary); + color: var(--g-color-text-primary); } &__visual { @@ -44,10 +42,10 @@ height: 6px; - font-size: var(--yc-text-body-2-font-size); + font-size: var(--g-text-body-2-font-size); border-radius: 4px; - background-color: var(--yc-color-base-generic-accent); + background-color: var(--g-color-base-generic-accent); } &__usage-line { @@ -58,16 +56,16 @@ height: 100%; &_type_green { - background-color: var(--yc-color-base-positive-heavy); + background-color: var(--ydb-color-status-green); } &_type_blue { - background-color: var(--yc-color-base-info-heavy); + background-color: var(--ydb-color-status-blue); } &_type_yellow { - background-color: var(--yc-color-text-warning-heavy); + background-color: var(--ydb-color-status-yellow); } &_type_red { - background-color: var(--yc-color-base-danger-heavy); + background-color: var(--ydb-color-status-red); } } } diff --git a/src/components/ProgressViewer/ProgressViewer.scss b/src/components/ProgressViewer/ProgressViewer.scss index 6f7b77288..0c6fff5f3 100644 --- a/src/components/ProgressViewer/ProgressViewer.scss +++ b/src/components/ProgressViewer/ProgressViewer.scss @@ -1,3 +1,5 @@ +@import '../../styles/mixins.scss'; + .progress-viewer { position: relative; z-index: 0; @@ -11,12 +13,12 @@ height: 23px; padding: 0 4px; - font-size: var(--yc-text-body-2-font-size); + font-size: var(--g-text-body-2-font-size); white-space: nowrap; - color: var(--yc-color-text-light-primary); + color: var(--g-color-text-light-primary); border-radius: 2px; - background: var(--yc-color-base-generic); + background: var(--g-color-base-generic); &__line { position: absolute; @@ -26,13 +28,13 @@ height: 100%; &_bg_scarlet { - background: var(--yc-color-infographics-danger-heavy); + background: var(--ydb-color-status-red); } &_bg_apple { - background: var(--yc-color-infographics-positive-heavy); + background: var(--ydb-color-status-green); } &_bg_saffron { - background: var(--yc-color-infographics-warning-heavy); + background: var(--ydb-color-status-yellow); } } @@ -40,30 +42,29 @@ position: relative; z-index: 1; &_text_contrast0 { - color: var(--yc-color-text-light-primary); + color: var(--g-color-text-light-primary); } &_text_contrast70 { - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); } } &_size_xs { height: 20px; - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); } &_size_s { height: 28px; - font-size: var(--yc-text-body-1-font-size); + font-size: var(--g-text-body-1-font-size); line-height: 28px; } &_size_m { height: 32px; - font-size: var(--yc-text-body-2-font-size); + font-size: var(--g-text-body-2-font-size); line-height: 32px; } @@ -71,25 +72,25 @@ height: 24px; font-size: 13px; - line-height: var(--yc-text-subheader-3-line-height); + line-height: var(--g-text-subheader-3-line-height); } &_size_n { height: 36px; - font-size: var(--yc-text-body-1-font-size); + font-size: var(--g-text-body-1-font-size); line-height: 36px; } &_size_l { height: 38px; - font-size: var(--yc-text-subheader-3-font-size); + font-size: var(--g-text-subheader-3-font-size); line-height: 38px; } &_size_head { - font-size: var(--yc-text-body-1-font-size); + font-size: var(--g-text-body-1-font-size); line-height: 36px; } } diff --git a/src/components/QueryExecutionStatus/QueryExecutionStatus.scss b/src/components/QueryExecutionStatus/QueryExecutionStatus.scss index 1e4733f9e..67faa6c41 100644 --- a/src/components/QueryExecutionStatus/QueryExecutionStatus.scss +++ b/src/components/QueryExecutionStatus/QueryExecutionStatus.scss @@ -4,11 +4,11 @@ align-items: center; - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); &__result-status-icon { - color: var(--yc-color-text-positive); + color: var(--g-color-text-positive); &_error { - color: var(--yc-color-text-danger); + color: var(--g-color-text-danger); } } } diff --git a/src/components/SpeedMultiMeter/SpeedMultiMeter.scss b/src/components/SpeedMultiMeter/SpeedMultiMeter.scss index 51329a316..c9a4cfff5 100644 --- a/src/components/SpeedMultiMeter/SpeedMultiMeter.scss +++ b/src/components/SpeedMultiMeter/SpeedMultiMeter.scss @@ -35,7 +35,7 @@ height: 6px; &_highlighted { - background: var(--yc-color-line-generic); + background: var(--g-color-line-generic); } } @@ -44,11 +44,11 @@ height: 100%; &_color_light { - background: var(--yc-color-infographics-info-medium); + background: var(--g-color-base-info-medium); } &_color_dark { - background: var(--yc-color-infographics-info-heavy); + background: var(--g-color-base-info-heavy); } } @@ -82,11 +82,11 @@ line-height: 18px; &_color_primary { - color: var(--yc-color-text-primary); + color: var(--g-color-text-primary); } &_color_secondary { - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } } } diff --git a/src/components/SpeedMultiMeter/SpeedMultiMeter.tsx b/src/components/SpeedMultiMeter/SpeedMultiMeter.tsx index 509ac8cda..e496b5698 100644 --- a/src/components/SpeedMultiMeter/SpeedMultiMeter.tsx +++ b/src/components/SpeedMultiMeter/SpeedMultiMeter.tsx @@ -101,19 +101,18 @@ export const SpeedMultiMeter = ({ {withValue && (
{formatValue(valueToDisplay)}
)} -
- -
- {renderValues()} -
- -
+ +
+ {renderValues()} +
+ ); diff --git a/src/components/SplitPane/SplitPane.scss b/src/components/SplitPane/SplitPane.scss index 4868a4aa4..39ac812fb 100644 --- a/src/components/SplitPane/SplitPane.scss +++ b/src/components/SplitPane/SplitPane.scss @@ -24,7 +24,7 @@ position: relative; z-index: 10; - background: var(--yc-color-base-background); + background: var(--g-color-base-background); &::after { position: absolute; @@ -35,12 +35,12 @@ content: ''; - background-color: var(--yc-color-base-generic-ultralight); + background-color: var(--g-color-base-generic-ultralight); } &.active::after, &:hover::after { - background-color: var(--yc-color-line-generic-hover); + background-color: var(--g-color-line-generic-hover); transition: background-color 1s ease; } @@ -67,7 +67,7 @@ border-width: 1px 0; border-style: solid; - border-color: var(--yc-color-base-generic-hover); + border-color: var(--g-color-base-generic-hover); transform: translate(-50%, -50%); } @@ -91,7 +91,7 @@ border-width: 0 1px; border-style: solid; - border-color: var(--yc-color-base-generic-hover); + border-color: var(--g-color-base-generic-hover); transform: translate(-50%, -50%); } diff --git a/src/components/TableSkeleton/TableSkeleton.scss b/src/components/TableSkeleton/TableSkeleton.scss index d11991da8..a828114b1 100644 --- a/src/components/TableSkeleton/TableSkeleton.scss +++ b/src/components/TableSkeleton/TableSkeleton.scss @@ -8,7 +8,7 @@ height: var(--data-table-row-height); .yc-skeleton { - height: var(--yc-text-body-2-line-height); + height: var(--g-text-body-2-line-height); } } diff --git a/src/components/Tablet/Tablet.scss b/src/components/Tablet/Tablet.scss index 652c4f2e4..09b8e8658 100644 --- a/src/components/Tablet/Tablet.scss +++ b/src/components/Tablet/Tablet.scss @@ -1,8 +1,8 @@ .tablet { cursor: pointer; - color: var(--yc-color-text-complementary); - border-color: var(--yc-color-base-generic-medium-hover); + color: var(--g-color-text-complementary); + border-color: var(--g-color-base-generic-medium-hover); &__wrapper { margin-right: 2px; @@ -17,24 +17,24 @@ } &_status_gray { - background-color: var(--yc-color-text-complementary); + background-color: var(--ydb-color-status-grey); } &_status_yellow { - background-color: var(--yc-color-base-warning-heavy); + background-color: var(--ydb-color-status-yellow); } &_status_orange { - background-color: var(--yc-color-text-warning-heavy); + background-color: var(--ydb-color-status-orange); } &_status_red { - background-color: var(--yc-color-base-danger-heavy); + background-color: var(--ydb-color-status-red); } &_status_green { - background-color: var(--yc-color-base-positive-heavy); + background-color: var(--ydb-color-status-green); } - &_state_blue { - background-color: var(--yc-color-base-info-heavy); + &_status_blue { + background-color: var(--ydb-color-status-blue); } &_status_black { - background-color: var(--yc-color-text-secondary); + background-color: var(--ydb-color-status-black); } } diff --git a/src/components/TabletsStatistic/TabletsStatistic.scss b/src/components/TabletsStatistic/TabletsStatistic.scss index 929a4920e..bbc620549 100644 --- a/src/components/TabletsStatistic/TabletsStatistic.scss +++ b/src/components/TabletsStatistic/TabletsStatistic.scss @@ -15,33 +15,33 @@ text-decoration: none; text-transform: uppercase; - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); border: 1px solid; border-radius: 2px; &_state_green { - color: var(--yc-color-text-positive); - background-color: var(--yc-color-base-positive); + color: var(--g-color-text-positive); + background-color: var(--g-color-base-positive-light); } &_state_yellow { - color: var(--yc-color-text-warning); - background-color: var(--yc-color-base-warning); + color: var(--g-color-text-warning); + background-color: var(--g-color-base-warning-light); } &_state_blue { - color: var(--yc-color-text-info); - background-color: var(--yc-color-base-info); + color: var(--g-color-text-info); + background-color: var(--g-color-base-info-light); } &_state_orange { - color: var(--yc-color-text-warning-heavy); - background-color: var(--yc-color-infographics-warning-light); + color: var(--g-color-text-warning-heavy); + background-color: var(--g-color-base-warning-light); } &_state_red { - color: var(--yc-color-text-danger); - background: var(--yc-color-base-danger); + color: var(--g-color-text-danger); + background: var(--g-color-base-danger-light); } &_state_gray { - color: var(--yc-color-text-secondary); - border: 1px solid var(--yc-color-line-generic-hover); + color: var(--g-color-text-secondary); + border: 1px solid var(--g-color-line-generic-hover); } } } diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss index 5da2cb570..bc3747eaa 100644 --- a/src/components/Tag/Tag.scss +++ b/src/components/Tag/Tag.scss @@ -5,15 +5,15 @@ font-size: 12px; text-transform: uppercase; - color: var(--yc-color-text-primary); + color: var(--g-color-text-primary); border-radius: 3px; - background: var(--yc-color-base-generic); + background: var(--g-color-base-generic); &:last-child { margin-right: 0; } &_type_blue { - background-color: var(--yc-color-celestial-thunder); + background-color: var(--g-color-celestial-thunder); } } diff --git a/src/components/TruncatedQuery/TruncatedQuery.scss b/src/components/TruncatedQuery/TruncatedQuery.scss index 6dcf7c6b5..5bbbaecd1 100644 --- a/src/components/TruncatedQuery/TruncatedQuery.scss +++ b/src/components/TruncatedQuery/TruncatedQuery.scss @@ -10,7 +10,7 @@ &_color { &_secondary { - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } } } diff --git a/src/components/UsageLabel/UsageLabel.scss b/src/components/UsageLabel/UsageLabel.scss index e93b0d435..ec458b385 100644 --- a/src/components/UsageLabel/UsageLabel.scss +++ b/src/components/UsageLabel/UsageLabel.scss @@ -1,6 +1,6 @@ .ydb-usage-label { &_overload { - color: var(--yc-color-text-light-primary); - background-color: var(--yc-color-base-danger-heavy); + color: var(--g-color-text-light-primary); + background-color: var(--ydb-color-status-red); } } diff --git a/src/components/UsageLabel/UsageLabel.tsx b/src/components/UsageLabel/UsageLabel.tsx index 40cd02c2e..f7446c3e3 100644 --- a/src/components/UsageLabel/UsageLabel.tsx +++ b/src/components/UsageLabel/UsageLabel.tsx @@ -6,7 +6,7 @@ import './UsageLabel.scss'; const b = cn('ydb-usage-label'); -interface UsageLabelProps extends LabelProps { +interface UsageLabelProps extends Omit { value: number | string; overloadThreshold?: number; } diff --git a/src/components/VirtualTable/VirtualTable.scss b/src/components/VirtualTable/VirtualTable.scss index 614dde9b7..8c8e98ddc 100644 --- a/src/components/VirtualTable/VirtualTable.scss +++ b/src/components/VirtualTable/VirtualTable.scss @@ -8,11 +8,11 @@ --virtual-table-sort-icon-space: 18px; - --virtual-table-border-color: var(--yc-color-base-generic-hover); - --virtual-table-hover-color: var(--yc-color-base-float-hover); + --virtual-table-border-color: var(--g-color-base-generic-hover); + --virtual-table-hover-color: var(--g-color-base-float-hover); width: 100%; - @include body2-typography(); + @include body-2-typography(); &__table { width: 100%; diff --git a/src/containers/App/App.scss b/src/containers/App/App.scss index fc4084e13..75f1893e2 100644 --- a/src/containers/App/App.scss +++ b/src/containers/App/App.scss @@ -23,30 +23,38 @@ body, } :root { - --yc-color-infographics-yellow-light: rgba(255, 199, 0, 0.15); - --yc-color-infographics-yellow-medium: rgba(255, 219, 77, 0.4); - --yc-color-base-warning-orange: #ff922e; + --g-color-base-yellow-light: rgba(255, 199, 0, 0.15); + --g-color-base-yellow-medium: rgba(255, 219, 77, 0.4); --data-table-row-height: 40px; } -.yc-root { - --ydb-data-table-color-hover: var(--yc-color-base-float-hover); +.g-root { + --ydb-data-table-color-hover: var(--g-color-base-float-hover); + + // Colors for tablets, status icons and progress bars + --ydb-color-status-grey: var(--g-color-base-neutral-heavy); + --ydb-color-status-green: var(--g-color-base-positive-heavy); + --ydb-color-status-yellow: var(--g-color-base-warning-heavy); + --ydb-color-status-orange: #ff922e; + --ydb-color-status-red: var(--g-color-base-danger-heavy); + --ydb-color-status-blue: var(--g-color-base-info-heavy); + --ydb-color-status-black: var(--g-color-base-misc-heavy); } :is(#tab, .yc-tabs-item_active .yc-tabs-item__title) { - color: var(--yc-color-text-primary) !important; + color: var(--g-color-text-primary) !important; } :is(#tab, .yc-tabs-item__title) { - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } -.ycn-aside-header__pane-container { +.gn-aside-header__pane-container { height: 100%; } -.ycn-aside-header__content { +.gn-aside-header__content { position: relative; display: flex; @@ -71,7 +79,7 @@ body, .data-table { width: 100%; - @include body2-typography(); + @include body-2-typography(); &__table { max-width: 100%; @@ -105,22 +113,10 @@ body, justify-content: center; align-items: center; } - - // Should be removed after https://github.com/ydb-platform/ydb-embedded-ui/issues/344 - .yc-button__text { - display: flex; - align-items: center; - } - - .g-select { - .yc-button__text { - align-items: baseline; - } - } } .error { - color: var(--yc-color-text-danger); + color: var(--g-color-text-danger); } .data-table__row:hover .entity-status__clipboard-button, @@ -128,7 +124,7 @@ body, display: flex; } -.yc-root .data-table_highlight-rows .data-table__row:hover { +.g-root .data-table_highlight-rows .data-table__row:hover { background: var(--ydb-data-table-color-hover); } diff --git a/src/containers/App/TipPopup/TipPopup.js b/src/containers/App/TipPopup/TipPopup.js deleted file mode 100644 index 50d508229..000000000 --- a/src/containers/App/TipPopup/TipPopup.js +++ /dev/null @@ -1,66 +0,0 @@ -import {useState, useEffect} from 'react'; -import cn from 'bem-cn-lite'; - -import {Button, Icon, Popup} from '@gravity-ui/uikit'; -import closeIcon from '../../../assets/icons/close.svg'; - -import {DATA_QA_TUNE_COLUMNS_POPUP} from '../../../utils/constants'; - -import './TipPopup.scss'; - -const b = cn('km-tip-popup'); - -const DATA = { - [DATA_QA_TUNE_COLUMNS_POPUP]: { - id: 1, - title: 'New feature: column selector', - description: 'Now you can easily tune columns visibility! 🚀', - }, -}; - -function TipPopup({dbChangePopupVisibility, dataAttribute, initialIsPopupVisible}) { - const [isPopupVisible, setIsPopupVisible] = useState(initialIsPopupVisible ?? true); - const [anchor, setAnchor] = useState(null); - - useEffect(() => { - const interval = setInterval(() => { - const anchor = document.querySelector(`[data-qa='${dataAttribute}']`); - if (anchor) { - setAnchor(anchor); - clearInterval(interval); - } - }, 200); - return () => { - clearInterval(interval); - }; - }, []); - - const onClosePopupClick = () => { - dbChangePopupVisibility(false); - setIsPopupVisible(false); - }; - - const tipData = DATA[dataAttribute]; - - return tipData && anchor ? ( - -
-
{tipData.title}
-
{tipData.description}
-
- -
-
- - ) : null; -} - -export default TipPopup; diff --git a/src/containers/App/TipPopup/TipPopup.scss b/src/containers/App/TipPopup/TipPopup.scss deleted file mode 100644 index 0c16cb4a3..000000000 --- a/src/containers/App/TipPopup/TipPopup.scss +++ /dev/null @@ -1,46 +0,0 @@ -.km-tip-popup { - position: relative; - z-index: 1; - - max-width: 250px; - padding: 16px 20px 20px 16px; - - font-size: 13px; - line-height: 18px; - - color: var(--yc-color-text-primary); - border-radius: 4px; - background-color: var(--yc-color-base-background); - - &__wrapper { - border: 1px solid var(--yc-color-text-info) !important; - border-radius: 4px; - - .popup2__tail { - border: 1px solid var(--yc-color-text-info) !important; - background-color: var(--yc-color-base-background); - } - } - - &__cross-icon-wrapper { - position: absolute; - top: 16px; - right: 12px; - } - - &__cross-icon { - color: var(--yc-color-text-secondary); - } - - &__title { - margin-bottom: 8px; - padding-right: 36px; - - font-size: 17px; - line-height: 24px; - } - - &__content { - color: var(--yc-color-text-complementary); - } -} diff --git a/src/containers/AsideNavigation/AsideNavigation.scss b/src/containers/AsideNavigation/AsideNavigation.scss index 2d7cbe99c..97300eeff 100644 --- a/src/containers/AsideNavigation/AsideNavigation.scss +++ b/src/containers/AsideNavigation/AsideNavigation.scss @@ -6,7 +6,7 @@ margin-left: 16px; - line-height: var(--yc-text-body-2-line-height); + line-height: var(--g-text-body-2-line-height); } &__user-info-wrapper { display: flex; @@ -15,9 +15,6 @@ &__ydb-internal-user-title { font-weight: 500; } - &__user-icon { - color: var(--yc-color-text-misc); - } &__ydb-user-wrapper { width: 300px; padding: 10px; diff --git a/src/containers/Authentication/Authentication.scss b/src/containers/Authentication/Authentication.scss index 9642e28c1..894a3cb6e 100644 --- a/src/containers/Authentication/Authentication.scss +++ b/src/containers/Authentication/Authentication.scss @@ -28,8 +28,8 @@ width: 100%; - font-size: var(--yc-text-body-1-font-size); - line-height: var(--yc-text-header-1-line-height); + font-size: var(--g-text-body-1-font-size); + line-height: var(--g-text-header-1-line-height); } &__logo { @@ -45,7 +45,7 @@ margin: 34px 0 16px; font-weight: 600; - @include title-typography(); + @include header-2-typography; } &__form-wrapper { @@ -60,7 +60,7 @@ padding: 40px; border-radius: 16px; - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); } &__field-wrapper { diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss index d91cc1c19..beb86dc6e 100644 --- a/src/containers/Cluster/ClusterInfo/ClusterInfo.scss +++ b/src/containers/Cluster/ClusterInfo/ClusterInfo.scss @@ -25,20 +25,18 @@ } &__title .entity-status__name { - font-size: var(--yc-text-header-1-font-size); - font-weight: var(--yc-text-header-font-weight); - line-height: var(--yc-text-header-1-line-height); + font-weight: var(--g-text-header-font-weight); + @include header-1-typography(); } &__title-skeleton { width: 20%; min-width: 200px; - height: var(--yc-text-header-1-line-height); + height: var(--g-text-header-1-line-height); } &__error { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); } &__info { diff --git a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx index d6c1c585e..9dd34a2e9 100644 --- a/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx +++ b/src/containers/Cluster/ClusterInfo/ClusterInfo.tsx @@ -9,7 +9,7 @@ import {Tags} from '../../../components/Tags'; import {Tablet} from '../../../components/Tablet'; import {ResponseError} from '../../../components/Errors/ResponseError'; import {ExternalLinkWithIcon} from '../../../components/ExternalLinkWithIcon/ExternalLinkWithIcon'; -import {IconWrapper as Icon} from '../../../components/Icon/Icon'; +import {Icon} from '../../../components/Icon/Icon'; import {ContentWithPopup} from '../../../components/ContentWithPopup/ContentWithPopup'; import type {IResponseError} from '../../../types/api/error'; diff --git a/src/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.scss b/src/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.scss index 585b67293..0da666d6e 100644 --- a/src/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.scss +++ b/src/containers/Cluster/ClusterInfoSkeleton/ClusterInfoSkeleton.scss @@ -9,10 +9,10 @@ display: flex; align-items: flex-start; - min-height: var(--yc-text-body-2-font-size); + min-height: var(--g-text-body-2-font-size); .yc-skeleton { - min-height: var(--yc-text-body-2-font-size); + min-height: var(--g-text-body-2-font-size); } } @@ -31,7 +31,7 @@ width: 100px; margin: 0 2px; - border-bottom: 1px dotted var(--yc-color-text-secondary); + border-bottom: 1px dotted var(--g-color-text-secondary); } } diff --git a/src/containers/Cluster/VersionsBar/VersionsBar.tsx b/src/containers/Cluster/VersionsBar/VersionsBar.tsx index 4ac751a4e..0a2755ff7 100644 --- a/src/containers/Cluster/VersionsBar/VersionsBar.tsx +++ b/src/containers/Cluster/VersionsBar/VersionsBar.tsx @@ -15,7 +15,7 @@ interface VersionsBarProps { export const VersionsBar = ({versionsValues = []}: VersionsBarProps) => { return (
- +
{versionsValues.map((item, index) => (
} - contentClassName={b('vdisk-details')} + tooltipContentClassName={b('vdisk-details')} >
); diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss index afb90c256..3e47dfcf4 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/Healthcheck.scss @@ -74,35 +74,35 @@ &_good, &_green { - color: var(--yc-color-text-positive); - background-color: var(--yc-color-base-positive); + color: var(--g-color-text-positive); + background-color: var(--g-color-base-positive-light); } &_degraded, &_yellow { - color: var(--yc-color-text-warning); - background-color: var(--yc-color-base-warning); + color: var(--g-color-text-warning); + background-color: var(--g-color-base-warning-light); } &_blue { - color: var(--yc-color-text-info); - background-color: var(--yc-color-base-info); + color: var(--g-color-text-info); + background-color: var(--g-color-base-info-light); } &_emergency, &_red { - color: var(--yc-color-text-danger); - background-color: var(--yc-color-base-danger); + color: var(--g-color-text-danger); + background-color: var(--g-color-base-danger-light); } &_unspecified, &_gray, &_grey { - color: var(--yc-color-text-misc); - background-color: var(--yc-color-base-misc); + color: var(--g-color-text-misc); + background-color: var(--g-color-base-misc-light); } &_maintenance_required, &_orange { - color: var(--yc-color-text-warning-heavy); - background-color: var(--yc-color-infographics-warning-light); + color: var(--g-color-text-warning-heavy); + background-color: var(--g-color-base-warning-light); } } } diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss index 3e80dcbe2..609fb67f8 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTree.scss @@ -1,40 +1,5 @@ @import '../../../../../../styles/mixins.scss'; -.indicator { - width: 12px; - height: 12px; - margin-right: 4px; - - border-radius: 4px; - - &_good, - &_green { - background-color: var(--yc-color-base-positive-heavy); - } - &_degraded, - &_yellow { - background-color: var(--yc-color-base-warning-heavy); - } - - &_blue { - background-color: var(--yc-color-base-info-heavy); - } - - &_emergency, - &_red { - background: var(--yc-color-base-danger-heavy); - } - &_unspecified, - &_gray, - &_grey { - background: var(--yc-color-text-complementary); - } - &_maintenance_required, - &_orange { - background: var(--yc-color-text-warning-heavy); - } -} - .issue-tree { display: flex; @@ -54,7 +19,7 @@ padding: 8px 20px; border-radius: 4px; - background: var(--yc-color-base-generic); + background: var(--g-color-base-generic); } &__inspector { diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss index ad700747b..b6c58d107 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss @@ -21,10 +21,10 @@ cursor: pointer; - color: var(--yc-color-text-link); + color: var(--g-color-text-link); &:hover { - color: var(--yc-color-text-link-hover); + color: var(--g-color-text-link-hover); } } &_message { @@ -45,6 +45,6 @@ } &__field-label { - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } } diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss b/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss index 2ba1eee3a..f67990aff 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/MetricsCards/MetricCard/MetricCard.scss @@ -20,11 +20,11 @@ flex-direction: column; align-items: center; - font-size: var(--yc-text-header-1-font-size); - line-height: var(--yc-text-header-1-line-height); text-align: center; - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); + + @include header-1-typography(); } &__progress { @@ -35,18 +35,18 @@ } &__resources { - font-size: var(--yc-text-body-1-font-size); + font-size: var(--g-text-body-1-font-size); - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } &_active { #{$b}__content { - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); } #{$b}__progress-bar-circle-bg { - stroke: var(--yc-color-base-float); + stroke: var(--g-color-base-float); } } } diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss index 876cbbea4..c69509393 100644 --- a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss +++ b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss @@ -43,9 +43,9 @@ &__title { margin-bottom: 10px; - font-size: var(--yc-text-body-2-font-size); font-weight: 700; - line-height: var(--yc-text-body-2-line-height); + + @include body-2-typography(); } &__table { diff --git a/src/containers/Tenant/Diagnostics/TopShards/TopShards.scss b/src/containers/Tenant/Diagnostics/TopShards/TopShards.scss index c4b433620..49c0ad7d1 100644 --- a/src/containers/Tenant/Diagnostics/TopShards/TopShards.scss +++ b/src/containers/Tenant/Diagnostics/TopShards/TopShards.scss @@ -5,7 +5,7 @@ height: 100%; - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); &__loader { display: flex; diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.scss b/src/containers/Tenant/ObjectSummary/ObjectSummary.scss index 8901942da..4d49f6395 100644 --- a/src/containers/Tenant/ObjectSummary/ObjectSummary.scss +++ b/src/containers/Tenant/ObjectSummary/ObjectSummary.scss @@ -29,7 +29,7 @@ top: 19px; // centered relative to the heading right: 5px; // centered relative to the collapsed panel - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); &_hidden { visibility: hidden; } @@ -86,14 +86,10 @@ &__info-controls { display: flex; gap: 4px; - - .yc-button__text { - margin: 0 6px; - } } &__info-action-button { - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); &_hidden { display: none; } @@ -116,7 +112,7 @@ padding: 12px 12px 10px; - border-bottom: 1px solid var(--yc-color-line-generic); + border-bottom: 1px solid var(--g-color-line-generic); } &__info-title { @@ -144,7 +140,7 @@ text-transform: lowercase; border-radius: 3px; - background-color: var(--yc-color-base-generic); + background-color: var(--g-color-base-generic); &_error { padding: 3px 0; diff --git a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx index 6518ca6cf..17cd7b095 100644 --- a/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx +++ b/src/containers/Tenant/ObjectSummary/ObjectSummary.tsx @@ -5,7 +5,8 @@ import {Link} from 'react-router-dom'; import qs from 'qs'; import cn from 'bem-cn-lite'; -import {Button, HelpPopover, Tabs} from '@gravity-ui/uikit'; +import {Button, Tabs} from '@gravity-ui/uikit'; +import {HelpPopover} from '@gravity-ui/components'; import SplitPane from '../../../components/SplitPane'; import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard'; diff --git a/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss b/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss index 98d94d5b0..f9f2050da 100644 --- a/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss +++ b/src/containers/Tenant/Query/ExecuteResult/ExecuteResult.scss @@ -44,8 +44,8 @@ height: 53px; padding: 12px 20px; - border-bottom: 1px solid var(--yc-color-line-generic); - background-color: var(--yc-color-base-background); + border-bottom: 1px solid var(--g-color-line-generic); + background-color: var(--g-color-base-background); } &__controls-right { @@ -57,9 +57,6 @@ &__controls-left { display: flex; gap: 4px; - .yc-button__text { - margin: 0 6px; - } } &__inspector { max-width: calc(100% - 50px); @@ -81,7 +78,7 @@ height: 100%; margin: 20px; - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); @include table-styles(); table { width: 100% !important; diff --git a/src/containers/Tenant/Query/ExplainResult/ExplainResult.scss b/src/containers/Tenant/Query/ExplainResult/ExplainResult.scss index 2c8b39034..62a1e97aa 100644 --- a/src/containers/Tenant/Query/ExplainResult/ExplainResult.scss +++ b/src/containers/Tenant/Query/ExplainResult/ExplainResult.scss @@ -22,8 +22,8 @@ height: 53px; padding: 12px 20px; - border-bottom: 1px solid var(--yc-color-line-generic); - background-color: var(--yc-color-base-background); + border-bottom: 1px solid var(--g-color-line-generic); + background-color: var(--g-color-base-background); } &__controls-right { display: flex; @@ -34,9 +34,6 @@ &__controls-left { display: flex; gap: 4px; - .yc-button__text { - margin: 0 6px; - } } &__explain-canvas-container { overflow-y: auto; diff --git a/src/containers/Tenant/Query/Issues/Issues.scss b/src/containers/Tenant/Query/Issues/Issues.scss index 1573e982b..ca0db8864 100644 --- a/src/containers/Tenant/Query/Issues/Issues.scss +++ b/src/containers/Tenant/Query/Issues/Issues.scss @@ -12,7 +12,7 @@ padding: 10px 0; - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); } &__error-message-text { @@ -48,7 +48,7 @@ text-align: left; - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } &__message { @@ -57,9 +57,9 @@ margin-right: auto; margin-left: 10px; - font-family: var(--yc-font-family-monospace); - font-size: var(--yc-text-code-2-font-size); - line-height: var(--yc-text-header-2-line-height); + font-family: var(--g-font-family-monospace); + font-size: var(--g-text-code-2-font-size); + line-height: var(--g-text-header-2-line-height); } &__message-text { @@ -79,14 +79,11 @@ font-size: 12px; - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); } &__arrow-toggle { margin-right: 5px; - .yc-button__text { - margin: 0 5px; - } } } @@ -98,19 +95,19 @@ white-space: nowrap; &_severity_fatal &__icon { - color: var(--yc-color-text-danger); + color: var(--g-color-text-danger); } &_severity_error &__icon { - color: var(--yc-color-text-danger); + color: var(--g-color-text-danger); } &_severity_warning &__icon { - color: var(--yc-color-text-warning); + color: var(--g-color-text-warning); } &_severity_info &__icon { - color: var(--yc-color-text-info); + color: var(--g-color-text-info); } &__title { @@ -118,6 +115,6 @@ text-transform: capitalize; - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); } } diff --git a/src/containers/Tenant/Query/Preview/Preview.scss b/src/containers/Tenant/Query/Preview/Preview.scss index 0855d0e3b..cbdb4c596 100644 --- a/src/containers/Tenant/Query/Preview/Preview.scss +++ b/src/containers/Tenant/Query/Preview/Preview.scss @@ -4,10 +4,6 @@ height: 100%; @include query-data-table; - .yc-button__text { - margin: 0 6px; - } - &__header { position: sticky; top: 0; @@ -19,8 +15,8 @@ height: 53px; padding: 0 20px; - border-bottom: 1px solid var(--yc-color-line-generic); - background-color: var(--yc-color-base-background); + border-bottom: 1px solid var(--g-color-line-generic); + background-color: var(--g-color-base-background); } &__title { @@ -30,7 +26,7 @@ &__table-name { margin-left: 4px; - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); } &__controls-left { diff --git a/src/containers/Tenant/Query/QueryDuration/QueryDuration.scss b/src/containers/Tenant/Query/QueryDuration/QueryDuration.scss index f296218c4..e7700ec5b 100644 --- a/src/containers/Tenant/Query/QueryDuration/QueryDuration.scss +++ b/src/containers/Tenant/Query/QueryDuration/QueryDuration.scss @@ -4,7 +4,7 @@ margin-left: 10px; - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); &__item-with-popover { white-space: nowrap; diff --git a/src/containers/Tenant/Query/QueryEditor/QueryEditor.scss b/src/containers/Tenant/Query/QueryEditor/QueryEditor.scss index 533b76dee..e0f989a0f 100644 --- a/src/containers/Tenant/Query/QueryEditor/QueryEditor.scss +++ b/src/containers/Tenant/Query/QueryEditor/QueryEditor.scss @@ -11,12 +11,6 @@ @include query-data-table; - & .yc-button__text { - display: flex; - justify-content: center; - align-items: center; - } - &__monaco { position: relative; @@ -25,7 +19,7 @@ width: 100%; height: 100%; - border: 1px solid var(--yc-color-line-generic); + border: 1px solid var(--g-color-line-generic); } &__monaco-wrapper { @@ -40,12 +34,12 @@ display: flex; flex-direction: column; - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); &_top { padding: 0 16px; - border-bottom: 1px solid var(--yc-color-line-generic); + border-bottom: 1px solid var(--g-color-line-generic); } } } diff --git a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss index 908cb2557..cfc218757 100644 --- a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss +++ b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.scss @@ -14,15 +14,6 @@ gap: 12px; } - &__run { - .yc-button__text { - display: flex; - justify-content: center; - align-items: center; - gap: 8px; - } - } - &__mode-selector { $b: &; diff --git a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx index e2c8bc39c..ac5c34076 100644 --- a/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx +++ b/src/containers/Tenant/Query/QueryEditorControls/QueryEditorControls.tsx @@ -92,19 +92,17 @@ export const QueryEditorControls = ({ return (
-
- -
+
diff --git a/src/containers/Tenant/Tenant.scss b/src/containers/Tenant/Tenant.scss index 3de018c6b..503195e8b 100644 --- a/src/containers/Tenant/Tenant.scss +++ b/src/containers/Tenant/Tenant.scss @@ -3,7 +3,6 @@ .tenant-page { overflow: hidden; - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); @include flex-container(); } diff --git a/src/containers/Tenant/utils/schemaControls.tsx b/src/containers/Tenant/utils/schemaControls.tsx index 1a06ba92e..3cc9eedf0 100644 --- a/src/containers/Tenant/utils/schemaControls.tsx +++ b/src/containers/Tenant/utils/schemaControls.tsx @@ -6,7 +6,7 @@ import {Button} from '@gravity-ui/uikit'; import {setShowPreview} from '../../../store/reducers/schema/schema'; import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant'; import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants'; -import {IconWrapper} from '../../../components/Icon'; +import {Icon} from '../../../components/Icon'; import i18n from '../i18n'; @@ -44,7 +44,7 @@ export const getControls = title={i18n('actions.openPreview')} size="s" > - + ); diff --git a/src/containers/UserSettings/Setting.tsx b/src/containers/UserSettings/Setting.tsx index 385560d8d..7518ccf08 100644 --- a/src/containers/UserSettings/Setting.tsx +++ b/src/containers/UserSettings/Setting.tsx @@ -82,7 +82,11 @@ export const Setting = ({ }; return ( - + {getSettingsElement(type)} ); diff --git a/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss b/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss index 1b17b922a..d0b1b0e41 100644 --- a/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss +++ b/src/containers/Versions/GroupedNodesTree/GroupedNodesTree.scss @@ -8,7 +8,7 @@ margin-top: 10px; margin-bottom: 10px; - border: 1px solid var(--yc-color-line-generic); + border: 1px solid var(--g-color-line-generic); border-radius: 10px; } @@ -29,8 +29,7 @@ } .ydb-tree-view { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); // Apply margin ignoring first element of the tree .ydb-tree-view { diff --git a/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss b/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss index ab28cfe18..292a29f6f 100644 --- a/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss +++ b/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.scss @@ -24,7 +24,7 @@ &__info-label { font-weight: 200; - color: var(--yc-color-text-complementary); + color: var(--g-color-text-complementary); &_margin_left { margin-left: 5px; diff --git a/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx b/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx index a21b0801f..4079bb935 100644 --- a/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx +++ b/src/containers/Versions/NodesTreeTitle/NodesTreeTitle.tsx @@ -53,7 +53,7 @@ export const NodesTreeTitle = ({ {versionsValues ? (
Versions - +
) : null}
diff --git a/src/index.tsx b/src/index.tsx index a0e75bfb2..b4988ceae 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,6 +9,7 @@ import configureStore from './store'; import reportWebVitals from './reportWebVitals'; import HistoryContext from './contexts/HistoryContext'; +import './styles/themes.scss'; import './styles/constants.scss'; import './index.css'; diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index d360880cb..3bfe12986 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -15,26 +15,29 @@ flex-direction: column; } -@mixin body-typography() { - font-size: var(--yc-text-body-1-font-size); - line-height: var(--yc-text-body-1-line-height); +@mixin body-1-typography() { + font-size: var(--g-text-body-1-font-size); + line-height: var(--g-text-body-1-line-height); } -@mixin body2-typography() { - font-size: var(--yc-text-body-2-font-size); - line-height: var(--yc-text-body-2-line-height); +@mixin body-2-typography() { + font-size: var(--g-text-body-2-font-size); + line-height: var(--g-text-body-2-line-height); } -@mixin body3-typography() { - font-size: var(--yc-text-body-3-font-size); - line-height: var(--yc-text-body-3-line-height); +@mixin body-3-typography() { + font-size: var(--g-text-body-3-font-size); + line-height: var(--g-text-body-3-line-height); } @mixin lead-typography() { - font-size: var(--yc-text-subheader-3-font-size); - line-height: var(--yc-text-subheader-3-line-height); + font-size: var(--g-text-subheader-3-font-size); + line-height: var(--g-text-subheader-3-line-height); } - -@mixin title-typography() { - font-size: var(--yc-text-header-2-font-size); - line-height: var(--yc-text-header-2-line-height); +@mixin header-1-typography() { + font-size: var(--g-text-header-1-font-size); + line-height: var(--g-text-header-1-line-height); +} +@mixin header-2-typography() { + font-size: var(--g-text-header-2-font-size); + line-height: var(--g-text-header-2-line-height); } @mixin sticky-top { @@ -42,7 +45,7 @@ top: 0; left: 0; - background-color: var(--yc-color-base-background); + background-color: var(--g-color-base-background); } @mixin loader() { @@ -82,9 +85,8 @@ @mixin info-viewer-title { margin: 15px 0 10px; - font-size: var(--yc-text-body-2-font-size); font-weight: 600; - line-height: var(--yc-text-body-2-line-height); + @include body-2-typography(); } @mixin query-data-table() { @@ -113,7 +115,7 @@ } &__th { - box-shadow: inset 0 -1px 0 0 var(--yc-tabs-color-divider); + box-shadow: inset 0 -1px 0 0 var(--g-tabs-color-divider); } } } @@ -121,14 +123,14 @@ .link { text-decoration: none; - color: var(--yc-color-text-link); + color: var(--g-color-text-link); &_external { margin-right: 10px; } &:hover { - color: var(--yc-color-text-link-hover); + color: var(--g-color-text-link-hover); } } @@ -143,8 +145,8 @@ z-index: 2000; left: $left; - border-right: $border-width solid var(--yc-color-line-generic); - background-color: var(--yc-color-base-background); + border-right: $border-width solid var(--g-color-line-generic); + background-color: var(--g-color-base-background); } .data-table__row:hover .data-table__td:nth-child(#{$nth}) { background-color: var(--ydb-data-table-color-hover) !important; @@ -199,9 +201,9 @@ @mixin json-tree-styles { // stylelint-disable - font-family: var(--yc-font-family-monospace) !important; - font-size: var(--yc-text-code-1-font-size) !important; - line-height: var(--yc-text-code-1-line-height) !important; + font-family: var(--g-font-family-monospace) !important; + font-size: var(--g-text-code-1-font-size) !important; + line-height: var(--g-text-code-1-line-height) !important; // stylelint-enable .json-inspector__leaf_composite:before { @@ -210,7 +212,7 @@ font-size: 9px; - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } .json-inspector__leaf_composite.json-inspector__leaf_root:before { left: 0; @@ -224,7 +226,7 @@ & .json-inspector { &__key { - color: var(--yc-color-text-misc); + color: var(--g-color-text-misc); } &__leaf { position: relative; @@ -241,7 +243,7 @@ width: 300px; margin-bottom: 10px; - border: 1px solid var(--yc-color-line-generic); + border: 1px solid var(--g-color-line-generic); border-radius: 4px; } &__search { @@ -251,11 +253,11 @@ margin: 0; padding: 0; - font-family: var(--yc-text-body-font-family); + font-family: var(--g-text-body-font-family); font-size: 13px; vertical-align: top; - color: var(--yc-color-text-primary); + color: var(--g-color-text-primary); border: 0 solid transparent; border-width: 0 8px; border-right-width: 22px; @@ -264,18 +266,18 @@ } &__value { &_helper { - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } } &__line:hover:after { - background: var(--yc-color-base-simple-hover); + background: var(--g-color-base-simple-hover); } &__show-original:before { - color: var(--yc-color-text-secondary); + color: var(--g-color-text-secondary); } &__show-original:hover:after, &__show-original:hover:before { - color: var(--yc-color-text-primary); + color: var(--g-color-text-primary); } } } diff --git a/src/styles/themes.scss b/src/styles/themes.scss new file mode 100644 index 000000000..df980850d --- /dev/null +++ b/src/styles/themes.scss @@ -0,0 +1,73 @@ +@import './themes/light'; +@import './themes/light-hc'; +@import './themes/dark'; +@import './themes/dark-hc'; + +// Override @gravity-ui/uikit color palette with our own colors + +.g-root { + --g-text-header-font-weight: 500; + --g-text-subheader-font-weight: 500; + --g-text-display-font-weight: 500; + --g-text-accent-font-weight: 500; + + &_theme_light { + --g-color-base-background: rgb(255, 255, 255); + --g-color-base-brand: var(--g-color-private-blue-550-solid); + --g-color-base-brand-hover: var(--g-color-private-blue-600-solid); + --g-color-base-selection: var(--g-color-private-blue-100); + --g-color-base-selection-hover: var(--g-color-private-blue-200); + --g-color-line-brand: var(--g-color-private-blue-550-solid); + --g-color-text-brand: var(--g-color-private-blue-600-solid); + --g-color-text-brand-heavy: var(--g-color-private-blue-700-solid); + --g-color-text-brand-contrast: var(--g-color-text-light-primary); + --g-color-text-link: var(--g-color-private-blue-600-solid); + --g-color-text-link-hover: var(--g-color-private-blue-800-solid); + @include colors-private-light; + } + + &_theme_light-hc { + --g-color-base-background: rgb(255, 255, 255); + --g-color-base-brand: var(--g-color-private-blue-600-solid); + --g-color-base-brand-hover: var(--g-color-private-blue-800-solid); + --g-color-base-selection: var(--g-color-private-blue-250); + --g-color-base-selection-hover: var(--g-color-private-blue-350); + --g-color-line-brand: var(--g-color-private-blue-600-solid); + --g-color-text-brand: var(--g-color-private-blue-650-solid); + --g-color-text-brand-heavy: var(--g-color-private-blue-900-solid); + --g-color-text-brand-contrast: var(--g-color-text-light-primary); + --g-color-text-link: var(--g-color-private-blue-650-solid); + --g-color-text-link-hover: var(--g-color-private-blue-850-solid); + @include colors-private-light-hc; + } + + &_theme_dark { + --g-color-base-background: rgb(45, 44, 51); + --g-color-base-brand: var(--g-color-private-blue-450-solid); + --g-color-base-brand-hover: var(--g-color-private-blue-600-solid); + --g-color-base-selection: var(--g-color-private-blue-150); + --g-color-base-selection-hover: var(--g-color-private-blue-200); + --g-color-line-brand: var(--g-color-private-blue-550-solid); + --g-color-text-brand: var(--g-color-private-blue-550-solid); + --g-color-text-brand-heavy: var(--g-color-private-blue-600-solid); + --g-color-text-brand-contrast: var(--g-color-text-light-primary); + --g-color-text-link: var(--g-color-private-blue-550-solid); + --g-color-text-link-hover: var(--g-color-private-blue-700-solid); + @include colors-private-dark; + } + + &_theme_dark-hc { + --g-color-base-background: rgb(34, 35, 38); + --g-color-base-brand: var(--g-color-private-blue-450-solid); + --g-color-base-brand-hover: var(--g-color-private-blue-650-solid); + --g-color-base-selection: var(--g-color-private-blue-250); + --g-color-base-selection-hover: var(--g-color-private-blue-400); + --g-color-line-brand: var(--g-color-private-blue-550-solid); + --g-color-text-brand: var(--g-color-private-blue-650-solid); + --g-color-text-brand-heavy: var(--g-color-private-blue-850-solid); + --g-color-text-brand-contrast: var(--g-color-text-light-primary); + --g-color-text-link: var(--g-color-private-blue-650-solid); + --g-color-text-link-hover: var(--g-color-private-blue-800-solid); + @include colors-private-dark-hc; + } +} diff --git a/src/styles/themes/dark-hc.scss b/src/styles/themes/dark-hc.scss new file mode 100644 index 000000000..2932a8643 --- /dev/null +++ b/src/styles/themes/dark-hc.scss @@ -0,0 +1,296 @@ +@mixin colors-private-dark-hc { + --g-color-private-white-50: rgba(255, 255, 255, 0.05); + --g-color-private-white-70: rgba(255, 255, 255, 0.07); + --g-color-private-white-100: rgba(255, 255, 255, 0.1); + --g-color-private-white-150: rgba(255, 255, 255, 0.15); + --g-color-private-white-200: rgba(255, 255, 255, 0.2); + --g-color-private-white-250: rgba(255, 255, 255, 0.25); + --g-color-private-white-300: rgba(255, 255, 255, 0.3); + --g-color-private-white-350: rgba(255, 255, 255, 0.35); + --g-color-private-white-400: rgba(255, 255, 255, 0.4); + --g-color-private-white-450: rgba(255, 255, 255, 0.45); + --g-color-private-white-500: rgba(255, 255, 255, 0.5); + --g-color-private-white-550: rgba(255, 255, 255, 0.55); + --g-color-private-white-600: rgba(255, 255, 255, 0.6); + --g-color-private-white-650: rgba(255, 255, 255, 0.65); + --g-color-private-white-700: rgba(255, 255, 255, 0.7); + --g-color-private-white-750: rgba(255, 255, 255, 0.75); + --g-color-private-white-800: rgba(255, 255, 255, 0.8); + --g-color-private-white-850: rgba(255, 255, 255, 0.85); + --g-color-private-white-900: rgba(255, 255, 255, 0.9); + --g-color-private-white-950: rgba(255, 255, 255, 0.95); + + --g-color-private-white-50-solid: rgb(45, 46, 49); + --g-color-private-white-100-solid: rgb(56, 57, 60); + --g-color-private-white-150-solid: rgb(67, 68, 71); + --g-color-private-white-200-solid: rgb(78, 79, 81); + --g-color-private-white-250-solid: rgb(89, 90, 92); + --g-color-private-white-300-solid: rgb(100, 101, 103); + --g-color-private-white-350-solid: rgb(111, 112, 114); + --g-color-private-white-400-solid: rgb(122, 123, 125); + --g-color-private-white-450-solid: rgb(133, 134, 136); + --g-color-private-white-500-solid: rgb(144, 145, 147); + --g-color-private-white-550-solid: rgb(156, 156, 157); + --g-color-private-white-600-solid: rgb(167, 167, 168); + --g-color-private-white-650-solid: rgb(178, 178, 179); + --g-color-private-white-700-solid: rgb(189, 189, 190); + --g-color-private-white-750-solid: rgb(200, 200, 201); + --g-color-private-white-800-solid: rgb(211, 211, 212); + --g-color-private-white-850-solid: rgb(222, 222, 223); + --g-color-private-white-900-solid: rgb(233, 233, 233); + --g-color-private-white-950-solid: rgb(244, 244, 244); + --g-color-private-white-1000-solid: rgb(255, 255, 255); + + /*————————— To review opaque —————————*/ + --g-color-private-white-opaque-150: rgba(56, 57, 60, 0.97); + + --g-color-private-black-20: rgba(0, 0, 0, 0.02); + --g-color-private-black-50: rgba(0, 0, 0, 0.05); + --g-color-private-black-100: rgba(0, 0, 0, 0.1); + --g-color-private-black-150: rgba(0, 0, 0, 0.15); + --g-color-private-black-200: rgba(0, 0, 0, 0.2); + --g-color-private-black-250: rgba(0, 0, 0, 0.25); + --g-color-private-black-300: rgba(0, 0, 0, 0.3); + --g-color-private-black-350: rgba(0, 0, 0, 0.35); + --g-color-private-black-400: rgba(0, 0, 0, 0.4); + --g-color-private-black-450: rgba(0, 0, 0, 0.45); + --g-color-private-black-500: rgba(0, 0, 0, 0.5); + --g-color-private-black-550: rgba(0, 0, 0, 0.55); + --g-color-private-black-600: rgba(0, 0, 0, 0.6); + --g-color-private-black-650: rgba(0, 0, 0, 0.65); + --g-color-private-black-700: rgba(0, 0, 0, 0.7); + --g-color-private-black-750: rgba(0, 0, 0, 0.75); + --g-color-private-black-800: rgba(0, 0, 0, 0.8); + --g-color-private-black-850: rgba(0, 0, 0, 0.85); + --g-color-private-black-900: rgba(0, 0, 0, 0.9); + --g-color-private-black-950: rgba(0, 0, 0, 0.95); + + --g-color-private-black-1000-solid: rgb(0, 0, 0); + + --g-color-private-black-rock-850: rgb(45, 44, 51); + --g-color-private-black-rock-950: rgb(34, 35, 38); + + --g-color-private-blue-50: rgba(82, 130, 255, 0.1); + --g-color-private-blue-100: rgba(82, 130, 255, 0.15); + --g-color-private-blue-150: rgba(82, 130, 255, 0.2); + --g-color-private-blue-200: rgba(82, 130, 255, 0.3); + --g-color-private-blue-250: rgba(82, 130, 255, 0.4); + --g-color-private-blue-300: rgba(82, 130, 255, 0.5); + --g-color-private-blue-350: rgba(82, 130, 255, 0.6); + --g-color-private-blue-400: rgba(82, 130, 255, 0.7); + --g-color-private-blue-450: rgba(82, 130, 255, 0.8); + --g-color-private-blue-500: rgba(82, 130, 255, 0.9); + + --g-color-private-blue-50-solid: rgb(39, 45, 60); + --g-color-private-blue-100-solid: rgb(41, 49, 71); + --g-color-private-blue-150-solid: rgb(44, 54, 81); + --g-color-private-blue-200-solid: rgb(48, 64, 103); + --g-color-private-blue-250-solid: rgb(53, 73, 125); + --g-color-private-blue-300-solid: rgb(58, 83, 147); + --g-color-private-blue-350-solid: rgb(63, 92, 168); + --g-color-private-blue-400-solid: rgb(68, 102, 190); + --g-color-private-blue-450-solid: rgb(72, 111, 212); + --g-color-private-blue-500-solid: rgb(77, 121, 233); + --g-color-private-blue-550-solid: rgb(82, 130, 255); + --g-color-private-blue-600-solid: rgb(99, 143, 255); + --g-color-private-blue-650-solid: rgb(117, 155, 255); + --g-color-private-blue-700-solid: rgb(134, 168, 255); + --g-color-private-blue-750-solid: rgb(151, 180, 255); + --g-color-private-blue-800-solid: rgb(169, 193, 255); + --g-color-private-blue-850-solid: rgb(186, 205, 255); + --g-color-private-blue-900-solid: rgb(203, 218, 255); + --g-color-private-blue-950-solid: rgb(220, 230, 255); + --g-color-private-blue-1000-solid: rgb(229, 236, 255); + + --g-color-private-green-50: rgba(91, 181, 87, 0.1); + --g-color-private-green-100: rgba(91, 181, 87, 0.15); + --g-color-private-green-150: rgb(0, 0, 0); + --g-color-private-green-200: rgba(91, 181, 87, 0.3); + --g-color-private-green-250: rgba(91, 181, 87, 0.4); + --g-color-private-green-300: rgba(91, 181, 87, 0.5); + --g-color-private-green-350: rgba(91, 181, 87, 0.6); + --g-color-private-green-400: rgba(91, 181, 87, 0.7); + --g-color-private-green-450: rgba(91, 181, 87, 0.8); + --g-color-private-green-500: rgba(91, 181, 87, 0.9); + + --g-color-private-green-50-solid: rgb(40, 50, 43); + --g-color-private-green-100-solid: rgb(43, 57, 45); + --g-color-private-green-150-solid: rgb(45, 64, 48); + --g-color-private-green-200-solid: rgb(51, 79, 53); + --g-color-private-green-250-solid: rgb(57, 93, 58); + --g-color-private-green-300-solid: rgb(63, 108, 63); + --g-color-private-green-350-solid: rgb(68, 123, 67); + --g-color-private-green-400-solid: rgb(74, 137, 72); + --g-color-private-green-450-solid: rgb(80, 152, 77); + --g-color-private-green-500-solid: rgb(85, 166, 82); + --g-color-private-green-550-solid: rgb(91, 181, 87); + --g-color-private-green-600-solid: rgb(107, 188, 104); + --g-color-private-green-650-solid: rgb(124, 196, 121); + --g-color-private-green-700-solid: rgb(140, 203, 137); + --g-color-private-green-750-solid: rgb(157, 211, 154); + --g-color-private-green-800-solid: rgb(173, 218, 171); + --g-color-private-green-850-solid: rgb(189, 225, 188); + --g-color-private-green-900-solid: rgb(206, 233, 205); + --g-color-private-green-950-solid: rgb(222, 240, 221); + --g-color-private-green-1000-solid: rgb(230, 244, 230); + + --g-color-private-yellow-50: rgba(255, 203, 0, 0.1); + --g-color-private-yellow-100: rgba(255, 203, 0, 0.15); + --g-color-private-yellow-150: rgba(255, 203, 0, 0.2); + --g-color-private-yellow-200: rgba(255, 203, 0, 0.3); + --g-color-private-yellow-250: rgba(255, 203, 0, 0.4); + --g-color-private-yellow-300: rgba(255, 203, 0, 0.5); + --g-color-private-yellow-350: rgba(255, 203, 0, 0.6); + --g-color-private-yellow-400: rgba(255, 203, 0, 0.7); + --g-color-private-yellow-450: rgba(255, 203, 0, 0.8); + --g-color-private-yellow-500: rgba(255, 203, 0, 0.9); + + --g-color-private-yellow-50-solid: rgb(56, 52, 34); + --g-color-private-yellow-100-solid: rgb(67, 60, 32); + --g-color-private-yellow-150-solid: rgb(78, 69, 30); + --g-color-private-yellow-200-solid: rgb(100, 85, 27); + --g-color-private-yellow-250-solid: rgb(122, 102, 23); + --g-color-private-yellow-300-solid: rgb(144, 119, 19); + --g-color-private-yellow-350-solid: rgb(167, 136, 15); + --g-color-private-yellow-400-solid: rgb(189, 153, 11); + --g-color-private-yellow-450-solid: rgb(211, 169, 8); + --g-color-private-yellow-500-solid: rgb(233, 186, 4); + --g-color-private-yellow-550-solid: rgb(255, 203, 0); + --g-color-private-yellow-600-solid: rgb(255, 208, 26); + --g-color-private-yellow-650-solid: rgb(255, 213, 51); + --g-color-private-yellow-700-solid: rgb(255, 219, 76); + --g-color-private-yellow-750-solid: rgb(255, 224, 102); + --g-color-private-yellow-800-solid: rgb(255, 229, 128); + --g-color-private-yellow-850-solid: rgb(255, 234, 153); + --g-color-private-yellow-900-solid: rgb(255, 239, 179); + --g-color-private-yellow-950-solid: rgb(255, 245, 204); + --g-color-private-yellow-1000-solid: rgb(255, 247, 217); + + --g-color-private-orange-50: rgba(200, 99, 12, 0.1); + --g-color-private-orange-100: rgba(200, 99, 12, 0.15); + --g-color-private-orange-150: rgba(200, 99, 12, 0.2); + --g-color-private-orange-200: rgba(200, 99, 12, 0.3); + --g-color-private-orange-250: rgba(200, 99, 12, 0.4); + --g-color-private-orange-300: rgba(200, 99, 12, 0.5); + --g-color-private-orange-350: rgba(200, 99, 12, 0.6); + --g-color-private-orange-400: rgba(200, 99, 12, 0.7); + --g-color-private-orange-450: rgba(200, 99, 12, 0.8); + --g-color-private-orange-500: rgba(200, 99, 12, 0.9); + + --g-color-private-orange-50-solid: rgb(51, 41, 35); + --g-color-private-orange-100-solid: rgb(59, 45, 34); + --g-color-private-orange-150-solid: rgb(67, 48, 33); + --g-color-private-orange-200-solid: rgb(84, 54, 30); + --g-color-private-orange-250-solid: rgb(100, 61, 28); + --g-color-private-orange-300-solid: rgb(117, 67, 25); + --g-color-private-orange-350-solid: rgb(134, 73, 22); + --g-color-private-orange-400-solid: rgb(150, 80, 20); + --g-color-private-orange-450-solid: rgb(167, 86, 17); + --g-color-private-orange-500-solid: rgb(183, 93, 15); + --g-color-private-orange-550-solid: rgb(200, 99, 12); + --g-color-private-orange-600-solid: rgb(206, 115, 36); + --g-color-private-orange-650-solid: rgb(211, 130, 61); + --g-color-private-orange-700-solid: rgb(216, 146, 85); + --g-color-private-orange-750-solid: rgb(222, 161, 109); + --g-color-private-orange-800-solid: rgb(227, 177, 133); + --g-color-private-orange-850-solid: rgb(233, 193, 158); + --g-color-private-orange-900-solid: rgb(239, 208, 182); + --g-color-private-orange-950-solid: rgb(244, 224, 206); + --g-color-private-orange-1000-solid: rgb(247, 232, 219); + + --g-color-private-red-50: rgba(232, 73, 69, 0.1); + --g-color-private-red-100: rgba(232, 73, 69, 0.15); + --g-color-private-red-150: rgba(232, 73, 69, 0.2); + --g-color-private-red-200: rgba(232, 73, 69, 0.3); + --g-color-private-red-250: rgba(232, 73, 69, 0.4); + --g-color-private-red-300: rgba(232, 73, 69, 0.5); + --g-color-private-red-350: rgba(232, 73, 69, 0.6); + --g-color-private-red-400: rgba(232, 73, 69, 0.7); + --g-color-private-red-450: rgba(232, 73, 69, 0.8); + --g-color-private-red-500: rgba(232, 73, 69, 0.9); + + --g-color-private-red-50-solid: rgb(54, 39, 41); + --g-color-private-red-100-solid: rgb(64, 41, 43); + --g-color-private-red-150-solid: rgb(74, 43, 44); + --g-color-private-red-200-solid: rgb(93, 46, 47); + --g-color-private-red-250-solid: rgb(113, 50, 51); + --g-color-private-red-300-solid: rgb(133, 54, 54); + --g-color-private-red-350-solid: rgb(153, 58, 57); + --g-color-private-red-400-solid: rgb(172, 61, 60); + --g-color-private-red-450-solid: rgb(192, 65, 63); + --g-color-private-red-500-solid: rgb(212, 69, 66); + --g-color-private-red-550-solid: rgb(232, 73, 69); + --g-color-private-red-600-solid: rgb(234, 91, 88); + --g-color-private-red-650-solid: rgb(236, 109, 107); + --g-color-private-red-700-solid: rgb(239, 127, 125); + --g-color-private-red-750-solid: rgb(241, 146, 144); + --g-color-private-red-800-solid: rgb(243, 164, 162); + --g-color-private-red-850-solid: rgb(246, 182, 181); + --g-color-private-red-900-solid: rgb(248, 200, 199); + --g-color-private-red-950-solid: rgb(250, 219, 218); + --g-color-private-red-1000-solid: rgb(252, 228, 227); + + --g-color-private-purple-50: rgba(143, 82, 204, 0.1); + --g-color-private-purple-100: rgba(143, 82, 204, 0.15); + --g-color-private-purple-150: rgba(143, 82, 204, 0.2); + --g-color-private-purple-200: rgba(143, 82, 204, 0.3); + --g-color-private-purple-250: rgba(143, 82, 204, 0.4); + --g-color-private-purple-300: rgba(143, 82, 204, 0.5); + --g-color-private-purple-350: rgba(143, 82, 204, 0.6); + --g-color-private-purple-400: rgba(143, 82, 204, 0.7); + --g-color-private-purple-450: rgba(143, 82, 204, 0.8); + --g-color-private-purple-500: rgba(143, 82, 204, 0.9); + + --g-color-private-purple-50-solid: rgb(45, 40, 55); + --g-color-private-purple-100-solid: rgb(50, 42, 63); + --g-color-private-purple-150-solid: rgb(56, 44, 71); + --g-color-private-purple-200-solid: rgb(67, 49, 88); + --g-color-private-purple-250-solid: rgb(78, 54, 104); + --g-color-private-purple-300-solid: rgb(89, 59, 121); + --g-color-private-purple-350-solid: rgb(99, 63, 138); + --g-color-private-purple-400-solid: rgb(110, 68, 154); + --g-color-private-purple-450-solid: rgb(121, 73, 171); + --g-color-private-purple-500-solid: rgb(132, 77, 187); + --g-color-private-purple-550-solid: rgb(143, 82, 204); + --g-color-private-purple-600-solid: rgb(154, 99, 209); + --g-color-private-purple-650-solid: rgb(165, 117, 214); + --g-color-private-purple-700-solid: rgb(177, 134, 219); + --g-color-private-purple-750-solid: rgb(188, 151, 224); + --g-color-private-purple-800-solid: rgb(199, 169, 230); + --g-color-private-purple-850-solid: rgb(210, 186, 235); + --g-color-private-purple-900-solid: rgb(221, 203, 240); + --g-color-private-purple-950-solid: rgb(233, 220, 245); + --g-color-private-purple-1000-solid: rgb(238, 229, 247); + + --g-color-private-cool-grey-50: rgba(96, 128, 156, 0.1); + --g-color-private-cool-grey-100: rgba(96, 128, 156, 0.15); + --g-color-private-cool-grey-150: rgba(96, 128, 156, 0.2); + --g-color-private-cool-grey-200: rgba(96, 128, 156, 0.3); + --g-color-private-cool-grey-250: rgba(96, 128, 156, 0.4); + --g-color-private-cool-grey-300: rgba(96, 128, 156, 0.5); + --g-color-private-cool-grey-350: rgba(96, 128, 156, 0.6); + --g-color-private-cool-grey-400: rgba(96, 128, 156, 0.7); + --g-color-private-cool-grey-450: rgba(96, 128, 156, 0.8); + --g-color-private-cool-grey-500: rgba(96, 128, 156, 0.9); + + --g-color-private-cool-grey-50-solid: rgb(40, 44, 50); + --g-color-private-cool-grey-100-solid: rgb(43, 49, 56); + --g-color-private-cool-grey-150-solid: rgb(46, 54, 62); + --g-color-private-cool-grey-200-solid: rgb(53, 63, 73); + --g-color-private-cool-grey-250-solid: rgb(59, 72, 85); + --g-color-private-cool-grey-300-solid: rgb(65, 81, 97); + --g-color-private-cool-grey-350-solid: rgb(71, 91, 109); + --g-color-private-cool-grey-400-solid: rgb(77, 100, 121); + --g-color-private-cool-grey-450-solid: rgb(84, 109, 132); + --g-color-private-cool-grey-500-solid: rgb(90, 119, 144); + --g-color-private-cool-grey-550-solid: rgb(96, 128, 156); + --g-color-private-cool-grey-600-solid: rgb(112, 141, 166); + --g-color-private-cool-grey-650-solid: rgb(128, 153, 176); + --g-color-private-cool-grey-700-solid: rgb(144, 166, 186); + --g-color-private-cool-grey-750-solid: rgb(160, 179, 195); + --g-color-private-cool-grey-800-solid: rgb(176, 191, 205); + --g-color-private-cool-grey-850-solid: rgb(191, 204, 215); + --g-color-private-cool-grey-900-solid: rgb(207, 217, 225); + --g-color-private-cool-grey-950-solid: rgb(223, 230, 235); + --g-color-private-cool-grey-1000-solid: rgb(231, 236, 240); +} diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss new file mode 100644 index 000000000..4bc35223a --- /dev/null +++ b/src/styles/themes/dark.scss @@ -0,0 +1,297 @@ +@mixin colors-private-dark { + --g-color-private-white-20: rgba(255, 255, 255, 0.02); + --g-color-private-white-50: rgba(255, 255, 255, 0.05); + --g-color-private-white-70: rgba(255, 255, 255, 0.07); + --g-color-private-white-100: rgba(255, 255, 255, 0.1); + --g-color-private-white-150: rgba(255, 255, 255, 0.15); + --g-color-private-white-200: rgba(255, 255, 255, 0.2); + --g-color-private-white-250: rgba(255, 255, 255, 0.25); + --g-color-private-white-300: rgba(255, 255, 255, 0.3); + --g-color-private-white-350: rgba(255, 255, 255, 0.35); + --g-color-private-white-400: rgba(255, 255, 255, 0.4); + --g-color-private-white-450: rgba(255, 255, 255, 0.45); + --g-color-private-white-500: rgba(255, 255, 255, 0.5); + --g-color-private-white-550: rgba(255, 255, 255, 0.55); + --g-color-private-white-600: rgba(255, 255, 255, 0.6); + --g-color-private-white-650: rgba(255, 255, 255, 0.65); + --g-color-private-white-700: rgba(255, 255, 255, 0.7); + --g-color-private-white-750: rgba(255, 255, 255, 0.75); + --g-color-private-white-800: rgba(255, 255, 255, 0.8); + --g-color-private-white-850: rgba(255, 255, 255, 0.85); + --g-color-private-white-900: rgba(255, 255, 255, 0.9); + --g-color-private-white-950: rgba(255, 255, 255, 0.95); + + --g-color-private-white-20-solid: rgb(49, 48, 55); + --g-color-private-white-50-solid: rgb(56, 55, 61); + --g-color-private-white-70-solid: rgb(60, 59, 65); + --g-color-private-white-100-solid: rgb(66, 65, 71); + --g-color-private-white-150-solid: rgb(77, 76, 82); + --g-color-private-white-200-solid: rgb(87, 86, 92); + --g-color-private-white-250-solid: rgb(97, 97, 102); + --g-color-private-white-300-solid: rgb(108, 107, 112); + --g-color-private-white-350-solid: rgb(119, 118, 122); + --g-color-private-white-400-solid: rgb(129, 128, 133); + --g-color-private-white-450-solid: rgb(139, 139, 143); + --g-color-private-white-500-solid: rgb(150, 150, 153); + --g-color-private-white-550-solid: rgb(160, 160, 163); + --g-color-private-white-600-solid: rgb(171, 171, 173); + --g-color-private-white-650-solid: rgb(182, 181, 184); + --g-color-private-white-700-solid: rgb(192, 192, 194); + --g-color-private-white-750-solid: rgb(202, 202, 204); + --g-color-private-white-800-solid: rgb(213, 213, 214); + --g-color-private-white-850-solid: rgb(223, 223, 224); + --g-color-private-white-900-solid: rgb(234, 234, 235); + --g-color-private-white-950-solid: rgb(245, 245, 245); + --g-color-private-white-1000-solid: rgb(255, 255, 255); + + --g-color-private-white-opaque-150: rgba(76, 75, 81, 0.95); + + --g-color-private-black-20: rgba(0, 0, 0, 0.02); + --g-color-private-black-50: rgba(0, 0, 0, 0.05); + --g-color-private-black-100: rgba(0, 0, 0, 0.1); + --g-color-private-black-150: rgba(0, 0, 0, 0.15); + --g-color-private-black-200: rgba(0, 0, 0, 0.2); + --g-color-private-black-250: rgba(0, 0, 0, 0.25); + --g-color-private-black-300: rgba(0, 0, 0, 0.3); + --g-color-private-black-350: rgba(0, 0, 0, 0.35); + --g-color-private-black-400: rgba(0, 0, 0, 0.4); + --g-color-private-black-450: rgba(0, 0, 0, 0.45); + --g-color-private-black-500: rgba(0, 0, 0, 0.5); + --g-color-private-black-550: rgba(0, 0, 0, 0.55); + --g-color-private-black-600: rgba(0, 0, 0, 0.6); + --g-color-private-black-650: rgba(0, 0, 0, 0.65); + --g-color-private-black-700: rgba(0, 0, 0, 0.7); + --g-color-private-black-750: rgba(0, 0, 0, 0.75); + --g-color-private-black-800: rgba(0, 0, 0, 0.8); + --g-color-private-black-850: rgba(0, 0, 0, 0.85); + --g-color-private-black-900: rgba(0, 0, 0, 0.9); + --g-color-private-black-950: rgba(0, 0, 0, 0.95); + + --g-color-private-black-1000-solid: rgb(0, 0, 0); + + --g-color-private-black-rock-850: rgb(45, 44, 51); + + --g-color-private-blue-50: rgba(82, 130, 255, 0.1); + --g-color-private-blue-100: rgba(82, 130, 255, 0.15); + --g-color-private-blue-150: rgba(82, 130, 255, 0.2); + --g-color-private-blue-200: rgba(82, 130, 255, 0.3); + --g-color-private-blue-250: rgba(82, 130, 255, 0.4); + --g-color-private-blue-300: rgba(82, 130, 255, 0.5); + --g-color-private-blue-350: rgba(82, 130, 255, 0.6); + --g-color-private-blue-400: rgba(82, 130, 255, 0.7); + --g-color-private-blue-450: rgba(82, 130, 255, 0.8); + --g-color-private-blue-500: rgba(82, 130, 255, 0.9); + + --g-color-private-blue-50-solid: rgb(49, 53, 71); + --g-color-private-blue-100-solid: rgb(51, 57, 82); + --g-color-private-blue-150-solid: rgb(52, 61, 92); + --g-color-private-blue-200-solid: rgb(56, 70, 112); + --g-color-private-blue-250-solid: rgb(60, 78, 133); + --g-color-private-blue-300-solid: rgb(64, 87, 153); + --g-color-private-blue-350-solid: rgb(67, 96, 173); + --g-color-private-blue-400-solid: rgb(71, 104, 194); + --g-color-private-blue-450-solid: rgb(75, 113, 214); + --g-color-private-blue-500-solid: rgb(78, 121, 235); + --g-color-private-blue-550-solid: rgb(82, 130, 255); + --g-color-private-blue-600-solid: rgb(99, 143, 255); + --g-color-private-blue-650-solid: rgb(117, 155, 255); + --g-color-private-blue-700-solid: rgb(134, 168, 255); + --g-color-private-blue-750-solid: rgb(151, 180, 255); + --g-color-private-blue-800-solid: rgb(169, 193, 255); + --g-color-private-blue-850-solid: rgb(186, 205, 255); + --g-color-private-blue-900-solid: rgb(203, 218, 255); + --g-color-private-blue-950-solid: rgb(220, 230, 255); + --g-color-private-blue-1000-solid: rgb(229, 236, 255); + + --g-color-private-green-50: rgba(91, 181, 87, 0.1); + --g-color-private-green-100: rgba(91, 181, 87, 0.15); + --g-color-private-green-150: rgba(91, 181, 87, 0.2); + --g-color-private-green-200: rgba(91, 181, 87, 0.3); + --g-color-private-green-250: rgba(91, 181, 87, 0.4); + --g-color-private-green-300: rgba(91, 181, 87, 0.5); + --g-color-private-green-350: rgba(91, 181, 87, 0.6); + --g-color-private-green-400: rgba(91, 181, 87, 0.7); + --g-color-private-green-450: rgba(91, 181, 87, 0.8); + --g-color-private-green-500: rgba(91, 181, 87, 0.9); + + --g-color-private-green-50-solid: rgb(50, 58, 55); + --g-color-private-green-100-solid: rgb(52, 65, 56); + --g-color-private-green-150-solid: rgb(54, 71, 58); + --g-color-private-green-200-solid: rgb(59, 85, 62); + --g-color-private-green-250-solid: rgb(63, 99, 65); + --g-color-private-green-300-solid: rgb(68, 113, 69); + --g-color-private-green-350-solid: rgb(73, 126, 73); + --g-color-private-green-400-solid: rgb(77, 140, 76); + --g-color-private-green-450-solid: rgb(82, 154, 80); + --g-color-private-green-500-solid: rgb(86, 167, 83); + --g-color-private-green-550-solid: rgb(91, 181, 87); + --g-color-private-green-600-solid: rgb(107, 188, 104); + --g-color-private-green-650-solid: rgb(124, 196, 121); + --g-color-private-green-700-solid: rgb(140, 203, 137); + --g-color-private-green-750-solid: rgb(157, 211, 154); + --g-color-private-green-800-solid: rgb(173, 218, 171); + --g-color-private-green-850-solid: rgb(189, 225, 188); + --g-color-private-green-900-solid: rgb(206, 233, 205); + --g-color-private-green-950-solid: rgb(222, 240, 221); + --g-color-private-green-1000-solid: rgb(230, 244, 230); + + --g-color-private-yellow-50: rgba(255, 203, 0, 0.1); + --g-color-private-yellow-100: rgba(255, 203, 0, 0.15); + --g-color-private-yellow-150: rgba(255, 203, 0, 0.2); + --g-color-private-yellow-200: rgba(255, 203, 0, 0.3); + --g-color-private-yellow-250: rgba(255, 203, 0, 0.4); + --g-color-private-yellow-300: rgba(255, 203, 0, 0.5); + --g-color-private-yellow-350: rgba(255, 203, 0, 0.6); + --g-color-private-yellow-400: rgba(255, 203, 0, 0.7); + --g-color-private-yellow-450: rgba(255, 203, 0, 0.8); + --g-color-private-yellow-500: rgba(255, 203, 0, 0.9); + + --g-color-private-yellow-50-solid: rgb(66, 60, 46); + --g-color-private-yellow-100-solid: rgb(77, 68, 43); + --g-color-private-yellow-150-solid: rgb(87, 76, 41); + --g-color-private-yellow-200-solid: rgb(108, 92, 36); + --g-color-private-yellow-250-solid: rgb(129, 108, 31); + --g-color-private-yellow-300-solid: rgb(150, 124, 25); + --g-color-private-yellow-350-solid: rgb(171, 140, 20); + --g-color-private-yellow-400-solid: rgb(192, 155, 15); + --g-color-private-yellow-450-solid: rgb(213, 171, 10); + --g-color-private-yellow-500-solid: rgb(233, 186, 4); + --g-color-private-yellow-550-solid: rgb(255, 203, 0); + --g-color-private-yellow-600-solid: rgb(255, 208, 26); + --g-color-private-yellow-650-solid: rgb(255, 213, 51); + --g-color-private-yellow-700-solid: rgb(255, 219, 76); + --g-color-private-yellow-750-solid: rgb(255, 224, 102); + --g-color-private-yellow-800-solid: rgb(255, 229, 128); + --g-color-private-yellow-850-solid: rgb(255, 234, 153); + --g-color-private-yellow-900-solid: rgb(255, 239, 179); + --g-color-private-yellow-950-solid: rgb(255, 245, 204); + --g-color-private-yellow-1000-solid: rgb(255, 247, 217); + + --g-color-private-orange-50: rgba(200, 99, 12, 0.1); + --g-color-private-orange-100: rgba(200, 99, 12, 0.15); + --g-color-private-orange-150: rgba(200, 99, 12, 0.2); + --g-color-private-orange-200: rgba(200, 99, 12, 0.3); + --g-color-private-orange-250: rgba(200, 99, 12, 0.4); + --g-color-private-orange-300: rgba(200, 99, 12, 0.5); + --g-color-private-orange-350: rgba(200, 99, 12, 0.6); + --g-color-private-orange-400: rgba(200, 99, 12, 0.7); + --g-color-private-orange-450: rgba(200, 99, 12, 0.8); + --g-color-private-orange-500: rgba(200, 99, 12, 0.9); + + --g-color-private-orange-50-solid: rgb(61, 50, 47); + --g-color-private-orange-100-solid: rgb(68, 52, 45); + --g-color-private-orange-150-solid: rgb(76, 55, 43); + --g-color-private-orange-200-solid: rgb(92, 61, 39); + --g-color-private-orange-250-solid: rgb(107, 66, 35); + --g-color-private-orange-300-solid: rgb(123, 71, 32); + --g-color-private-orange-350-solid: rgb(138, 77, 28); + --g-color-private-orange-400-solid: rgb(153, 82, 24); + --g-color-private-orange-450-solid: rgb(169, 88, 20); + --g-color-private-orange-500-solid: rgb(185, 94, 16); + --g-color-private-orange-550-solid: rgb(200, 99, 12); + --g-color-private-orange-600-solid: rgb(206, 115, 36); + --g-color-private-orange-650-solid: rgb(211, 130, 61); + --g-color-private-orange-700-solid: rgb(216, 146, 85); + --g-color-private-orange-750-solid: rgb(222, 161, 109); + --g-color-private-orange-800-solid: rgb(227, 177, 133); + --g-color-private-orange-850-solid: rgb(233, 193, 158); + --g-color-private-orange-900-solid: rgb(239, 208, 182); + --g-color-private-orange-950-solid: rgb(244, 224, 206); + --g-color-private-orange-1000-solid: rgb(247, 232, 219); + + --g-color-private-red-50: rgba(232, 73, 69, 0.1); + --g-color-private-red-100: rgba(232, 73, 69, 0.15); + --g-color-private-red-150: rgba(232, 73, 69, 0.2); + --g-color-private-red-200: rgba(232, 73, 69, 0.3); + --g-color-private-red-250: rgba(232, 73, 69, 0.4); + --g-color-private-red-300: rgba(232, 73, 69, 0.5); + --g-color-private-red-350: rgba(232, 73, 69, 0.6); + --g-color-private-red-400: rgba(232, 73, 69, 0.7); + --g-color-private-red-450: rgba(232, 73, 69, 0.8); + --g-color-private-red-500: rgba(232, 73, 69, 0.9); + + --g-color-private-red-50-solid: rgb(64, 47, 53); + --g-color-private-red-100-solid: rgb(73, 48, 54); + --g-color-private-red-150-solid: rgb(82, 50, 55); + --g-color-private-red-200-solid: rgb(101, 53, 57); + --g-color-private-red-250-solid: rgb(120, 56, 58); + --g-color-private-red-300-solid: rgb(138, 58, 60); + --g-color-private-red-350-solid: rgb(157, 61, 62); + --g-color-private-red-400-solid: rgb(176, 64, 64); + --g-color-private-red-450-solid: rgb(195, 67, 65); + --g-color-private-red-500-solid: rgb(213, 70, 68); + --g-color-private-red-550-solid: rgb(232, 73, 69); + --g-color-private-red-600-solid: rgb(234, 91, 88); + --g-color-private-red-650-solid: rgb(236, 109, 107); + --g-color-private-red-700-solid: rgb(239, 127, 125); + --g-color-private-red-750-solid: rgb(241, 146, 144); + --g-color-private-red-800-solid: rgb(243, 164, 162); + --g-color-private-red-850-solid: rgb(246, 182, 181); + --g-color-private-red-900-solid: rgb(248, 200, 199); + --g-color-private-red-950-solid: rgb(250, 219, 218); + --g-color-private-red-1000-solid: rgb(252, 228, 227); + + --g-color-private-purple-50: rgba(143, 82, 204, 0.1); + --g-color-private-purple-100: rgba(143, 82, 204, 0.15); + --g-color-private-purple-150: rgba(143, 82, 204, 0.2); + --g-color-private-purple-200: rgba(143, 82, 204, 0.3); + --g-color-private-purple-250: rgba(143, 82, 204, 0.4); + --g-color-private-purple-300: rgba(143, 82, 204, 0.5); + --g-color-private-purple-350: rgba(143, 82, 204, 0.6); + --g-color-private-purple-400: rgba(143, 82, 204, 0.7); + --g-color-private-purple-450: rgba(143, 82, 204, 0.8); + --g-color-private-purple-500: rgba(143, 82, 204, 0.9); + + --g-color-private-purple-50-solid: rgb(55, 48, 66); + --g-color-private-purple-100-solid: rgb(60, 50, 74); + --g-color-private-purple-150-solid: rgb(65, 52, 82); + --g-color-private-purple-200-solid: rgb(74, 55, 97); + --g-color-private-purple-250-solid: rgb(84, 59, 112); + --g-color-private-purple-300-solid: rgb(94, 63, 128); + --g-color-private-purple-350-solid: rgb(104, 67, 143); + --g-color-private-purple-400-solid: rgb(114, 71, 158); + --g-color-private-purple-450-solid: rgb(123, 74, 173); + --g-color-private-purple-500-solid: rgb(133, 78, 189); + --g-color-private-purple-550-solid: rgb(143, 82, 204); + --g-color-private-purple-600-solid: rgb(154, 99, 209); + --g-color-private-purple-650-solid: rgb(165, 117, 214); + --g-color-private-purple-700-solid: rgb(177, 134, 219); + --g-color-private-purple-750-solid: rgb(188, 151, 224); + --g-color-private-purple-800-solid: rgb(199, 169, 230); + --g-color-private-purple-850-solid: rgb(210, 186, 235); + --g-color-private-purple-900-solid: rgb(221, 203, 240); + --g-color-private-purple-950-solid: rgb(233, 220, 245); + --g-color-private-purple-1000-solid: rgb(238, 229, 247); + + --g-color-private-cool-grey-50: rgba(96, 128, 156, 0.1); + --g-color-private-cool-grey-100: rgba(96, 128, 156, 0.15); + --g-color-private-cool-grey-150: rgba(96, 128, 156, 0.2); + --g-color-private-cool-grey-200: rgba(96, 128, 156, 0.3); + --g-color-private-cool-grey-250: rgba(96, 128, 156, 0.4); + --g-color-private-cool-grey-300: rgba(96, 128, 156, 0.5); + --g-color-private-cool-grey-350: rgba(96, 128, 156, 0.6); + --g-color-private-cool-grey-400: rgba(96, 128, 156, 0.7); + --g-color-private-cool-grey-450: rgba(96, 128, 156, 0.8); + --g-color-private-cool-grey-500: rgba(96, 128, 156, 0.9); + + --g-color-private-cool-grey-50-solid: rgb(50, 52, 62); + --g-color-private-cool-grey-100-solid: rgb(53, 57, 67); + --g-color-private-cool-grey-150-solid: rgb(55, 61, 72); + --g-color-private-cool-grey-200-solid: rgb(60, 69, 82); + --g-color-private-cool-grey-250-solid: rgb(65, 78, 93); + --g-color-private-cool-grey-300-solid: rgb(70, 86, 103); + --g-color-private-cool-grey-350-solid: rgb(76, 94, 114); + --g-color-private-cool-grey-400-solid: rgb(81, 103, 125); + --g-color-private-cool-grey-450-solid: rgb(86, 111, 135); + --g-color-private-cool-grey-500-solid: rgb(91, 120, 146); + --g-color-private-cool-grey-550-solid: rgb(96, 128, 156); + --g-color-private-cool-grey-600-solid: rgb(112, 141, 166); + --g-color-private-cool-grey-650-solid: rgb(128, 153, 176); + --g-color-private-cool-grey-700-solid: rgb(144, 166, 186); + --g-color-private-cool-grey-750-solid: rgb(160, 179, 195); + --g-color-private-cool-grey-800-solid: rgb(176, 191, 205); + --g-color-private-cool-grey-850-solid: rgb(191, 204, 215); + --g-color-private-cool-grey-900-solid: rgb(207, 217, 225); + --g-color-private-cool-grey-950-solid: rgb(223, 230, 235); + --g-color-private-cool-grey-1000-solid: rgb(231, 236, 240); +} diff --git a/src/styles/themes/light-hc.scss b/src/styles/themes/light-hc.scss new file mode 100644 index 000000000..decf9fd70 --- /dev/null +++ b/src/styles/themes/light-hc.scss @@ -0,0 +1,289 @@ +@mixin colors-private-light-hc { + --g-color-private-white-50: rgba(255, 255, 255, 0.05); + --g-color-private-white-70: rgba(255, 255, 255, 0.07); + --g-color-private-white-100: rgba(255, 255, 255, 0.1); + --g-color-private-white-150: rgba(255, 255, 255, 0.15); + --g-color-private-white-200: rgba(255, 255, 255, 0.2); + --g-color-private-white-250: rgba(255, 255, 255, 0.25); + --g-color-private-white-300: rgba(255, 255, 255, 0.3); + --g-color-private-white-350: rgba(255, 255, 255, 0.35); + --g-color-private-white-400: rgba(255, 255, 255, 0.4); + --g-color-private-white-450: rgba(255, 255, 255, 0.45); + --g-color-private-white-500: rgba(255, 255, 255, 0.5); + --g-color-private-white-550: rgba(255, 255, 255, 0.55); + --g-color-private-white-600: rgba(255, 255, 255, 0.6); + --g-color-private-white-650: rgba(255, 255, 255, 0.65); + --g-color-private-white-700: rgba(255, 255, 255, 0.7); + --g-color-private-white-750: rgba(255, 255, 255, 0.75); + --g-color-private-white-800: rgba(255, 255, 255, 0.8); + --g-color-private-white-850: rgba(255, 255, 255, 0.85); + --g-color-private-white-900: rgba(255, 255, 255, 0.9); + --g-color-private-white-950: rgba(255, 255, 255, 0.95); + + --g-color-private-white-1000-solid: rgb(255, 255, 255); + + --g-color-private-black-50: rgba(0, 0, 0, 0.05); + --g-color-private-black-100: rgba(0, 0, 0, 0.1); + --g-color-private-black-150: rgba(0, 0, 0, 0.15); + --g-color-private-black-200: rgba(0, 0, 0, 0.2); + --g-color-private-black-250: rgba(0, 0, 0, 0.25); + --g-color-private-black-300: rgba(0, 0, 0, 0.3); + --g-color-private-black-350: rgba(0, 0, 0, 0.35); + --g-color-private-black-400: rgba(0, 0, 0, 0.4); + --g-color-private-black-450: rgba(0, 0, 0, 0.45); + --g-color-private-black-500: rgba(0, 0, 0, 0.5); + --g-color-private-black-550: rgba(0, 0, 0, 0.55); + --g-color-private-black-600: rgba(0, 0, 0, 0.6); + --g-color-private-black-650: rgba(0, 0, 0, 0.65); + --g-color-private-black-700: rgba(0, 0, 0, 0.7); + --g-color-private-black-750: rgba(0, 0, 0, 0.75); + --g-color-private-black-800: rgba(0, 0, 0, 0.8); + --g-color-private-black-850: rgba(0, 0, 0, 0.85); + --g-color-private-black-900: rgba(0, 0, 0, 0.9); + --g-color-private-black-950: rgba(0, 0, 0, 0.95); + + --g-color-private-black-50-solid: rgb(242, 242, 242); + --g-color-private-black-100-solid: rgb(229, 229, 229); + --g-color-private-black-150-solid: rgb(217, 217, 217); + --g-color-private-black-200-solid: rgb(204, 204, 204); + --g-color-private-black-250-solid: rgb(191, 191, 191); + --g-color-private-black-300-solid: rgb(179, 179, 179); + --g-color-private-black-350-solid: rgb(166, 166, 166); + --g-color-private-black-400-solid: rgb(153, 153, 153); + --g-color-private-black-450-solid: rgb(140, 140, 140); + --g-color-private-black-500-solid: rgb(128, 128, 128); + --g-color-private-black-550-solid: rgb(115, 115, 115); + --g-color-private-black-600-solid: rgb(102, 102, 102); + --g-color-private-black-650-solid: rgb(89, 89, 89); + --g-color-private-black-700-solid: rgb(76, 76, 76); + --g-color-private-black-750-solid: rgb(64, 64, 64); + --g-color-private-black-800-solid: rgb(51, 51, 51); + --g-color-private-black-850-solid: rgb(38, 38, 38); + --g-color-private-black-900-solid: rgb(26, 26, 26); + --g-color-private-black-950-solid: rgb(13, 13, 13); + --g-color-private-black-1000-solid: rgb(0, 0, 0); + + --g-color-private-blue-50: rgba(82, 130, 255, 0.1); + --g-color-private-blue-100: rgba(82, 130, 255, 0.15); + --g-color-private-blue-150: rgba(82, 130, 255, 0.2); + --g-color-private-blue-200: rgba(82, 130, 255, 0.3); + --g-color-private-blue-250: rgba(82, 130, 255, 0.4); + --g-color-private-blue-300: rgba(82, 130, 255, 0.5); + --g-color-private-blue-350: rgba(82, 130, 255, 0.6); + --g-color-private-blue-400: rgba(82, 130, 255, 0.7); + --g-color-private-blue-450: rgba(82, 130, 255, 0.8); + --g-color-private-blue-500: rgba(82, 130, 255, 0.9); + + --g-color-private-blue-50-solid: rgb(238, 243, 255); + --g-color-private-blue-100-solid: rgb(229, 236, 255); + --g-color-private-blue-150-solid: rgb(220, 230, 255); + --g-color-private-blue-200-solid: rgb(203, 218, 255); + --g-color-private-blue-250-solid: rgb(186, 205, 255); + --g-color-private-blue-300-solid: rgb(168, 193, 255); + --g-color-private-blue-350-solid: rgb(151, 180, 255); + --g-color-private-blue-400-solid: rgb(134, 168, 255); + --g-color-private-blue-450-solid: rgb(116, 155, 255); + --g-color-private-blue-500-solid: rgb(99, 143, 255); + --g-color-private-blue-550-solid: rgb(82, 130, 255); + --g-color-private-blue-600-solid: rgb(77, 121, 233); + --g-color-private-blue-650-solid: rgb(72, 111, 212); + --g-color-private-blue-700-solid: rgb(67, 102, 190); + --g-color-private-blue-750-solid: rgb(63, 92, 168); + --g-color-private-blue-800-solid: rgb(58, 83, 147); + --g-color-private-blue-850-solid: rgb(53, 73, 125); + --g-color-private-blue-900-solid: rgb(48, 64, 103); + --g-color-private-blue-950-solid: rgb(44, 54, 81); + --g-color-private-blue-1000-solid: rgb(41, 49, 71); + + --g-color-private-green-50: rgba(59, 201, 53, 0.1); + --g-color-private-green-100: rgba(59, 201, 53, 0.15); + --g-color-private-green-150: rgba(59, 201, 53, 0.2); + --g-color-private-green-200: rgba(59, 201, 53, 0.3); + --g-color-private-green-250: rgba(59, 201, 53, 0.4); + --g-color-private-green-300: rgba(59, 201, 53, 0.5); + --g-color-private-green-350: rgba(59, 201, 53, 0.6); + --g-color-private-green-400: rgba(59, 201, 53, 0.7); + --g-color-private-green-450: rgba(59, 201, 53, 0.8); + --g-color-private-green-500: rgba(59, 201, 53, 0.9); + + --g-color-private-green-50-solid: rgb(235, 250, 235); + --g-color-private-green-100-solid: rgb(226, 247, 225); + --g-color-private-green-150-solid: rgb(216, 244, 215); + --g-color-private-green-200-solid: rgb(196, 239, 194); + --g-color-private-green-250-solid: rgb(177, 233, 174); + --g-color-private-green-300-solid: rgb(157, 228, 154); + --g-color-private-green-350-solid: rgb(137, 223, 134); + --g-color-private-green-400-solid: rgb(118, 217, 114); + --g-color-private-green-450-solid: rgb(98, 212, 93); + --g-color-private-green-500-solid: rgb(79, 206, 73); + --g-color-private-green-550-solid: rgb(59, 201, 53); + --g-color-private-green-600-solid: rgb(56, 184, 51); + --g-color-private-green-650-solid: rgb(54, 168, 50); + --g-color-private-green-700-solid: rgb(51, 151, 48); + --g-color-private-green-750-solid: rgb(49, 135, 47); + --g-color-private-green-800-solid: rgb(47, 118, 46); + --g-color-private-green-850-solid: rgb(44, 101, 44); + --g-color-private-green-900-solid: rgb(41, 85, 43); + --g-color-private-green-950-solid: rgb(39, 68, 41); + --g-color-private-green-1000-solid: rgb(38, 60, 40); + + --g-color-private-yellow-50: rgba(255, 219, 77, 0.1); + --g-color-private-yellow-100: rgba(255, 219, 77, 0.15); + --g-color-private-yellow-150: rgba(255, 219, 77, 0.2); + --g-color-private-yellow-200: rgba(255, 219, 77, 0.3); + --g-color-private-yellow-250: rgba(255, 219, 77, 0.4); + --g-color-private-yellow-300: rgba(255, 219, 77, 0.5); + --g-color-private-yellow-350: rgba(255, 219, 77, 0.6); + --g-color-private-yellow-400: rgba(255, 219, 77, 0.7); + --g-color-private-yellow-450: rgba(255, 219, 77, 0.8); + --g-color-private-yellow-500: rgba(255, 219, 77, 0.9); + + --g-color-private-yellow-50-solid: rgb(255, 251, 237); + --g-color-private-yellow-100-solid: rgb(255, 250, 228); + --g-color-private-yellow-150-solid: rgb(255, 248, 219); + --g-color-private-yellow-200-solid: rgb(255, 244, 202); + --g-color-private-yellow-250-solid: rgb(255, 241, 184); + --g-color-private-yellow-300-solid: rgb(255, 237, 166); + --g-color-private-yellow-350-solid: rgb(255, 233, 148); + --g-color-private-yellow-400-solid: rgb(255, 230, 130); + --g-color-private-yellow-450-solid: rgb(255, 226, 113); + --g-color-private-yellow-500-solid: rgb(255, 223, 95); + --g-color-private-yellow-550-solid: rgb(255, 219, 77); + --g-color-private-yellow-600-solid: rgb(233, 201, 73); + --g-color-private-yellow-650-solid: rgb(211, 182, 69); + --g-color-private-yellow-700-solid: rgb(189, 164, 65); + --g-color-private-yellow-750-solid: rgb(167, 145, 61); + --g-color-private-yellow-800-solid: rgb(144, 127, 58); + --g-color-private-yellow-850-solid: rgb(122, 109, 54); + --g-color-private-yellow-900-solid: rgb(100, 90, 50); + --g-color-private-yellow-950-solid: rgb(78, 72, 46); + --g-color-private-yellow-1000-solid: rgb(67, 63, 44); + + --g-color-private-orange-50: rgba(255, 119, 0, 0.1); + --g-color-private-orange-100: rgba(255, 119, 0, 0.15); + --g-color-private-orange-150: rgba(255, 119, 0, 0.2); + --g-color-private-orange-200: rgba(255, 119, 0, 0.3); + --g-color-private-orange-250: rgba(255, 119, 0, 0.4); + --g-color-private-orange-300: rgba(255, 119, 0, 0.5); + --g-color-private-orange-350: rgba(255, 119, 0, 0.6); + --g-color-private-orange-400: rgba(255, 119, 0, 0.7); + --g-color-private-orange-450: rgba(255, 119, 0, 0.8); + --g-color-private-orange-500: rgba(255, 119, 0, 0.9); + + --g-color-private-orange-50-solid: rgb(255, 241, 230); + --g-color-private-orange-100-solid: rgb(255, 235, 217); + --g-color-private-orange-150-solid: rgb(255, 228, 204); + --g-color-private-orange-200-solid: rgb(255, 214, 179); + --g-color-private-orange-250-solid: rgb(255, 201, 153); + --g-color-private-orange-300-solid: rgb(255, 187, 128); + --g-color-private-orange-350-solid: rgb(255, 173, 102); + --g-color-private-orange-400-solid: rgb(255, 160, 76); + --g-color-private-orange-450-solid: rgb(255, 146, 51); + --g-color-private-orange-500-solid: rgb(255, 133, 26); + --g-color-private-orange-550-solid: rgb(255, 119, 0); + --g-color-private-orange-600-solid: rgb(233, 111, 4); + --g-color-private-orange-650-solid: rgb(211, 102, 8); + --g-color-private-orange-700-solid: rgb(189, 94, 11); + --g-color-private-orange-750-solid: rgb(167, 85, 15); + --g-color-private-orange-800-solid: rgb(144, 77, 19); + --g-color-private-orange-850-solid: rgb(122, 69, 23); + --g-color-private-orange-900-solid: rgb(100, 60, 27); + --g-color-private-orange-950-solid: rgb(78, 52, 30); + --g-color-private-orange-1000-solid: rgb(67, 48, 32); + + --g-color-private-red-50: rgba(255, 4, 0, 0.1); + --g-color-private-red-100: rgba(255, 4, 0, 0.15); + --g-color-private-red-150: rgba(255, 4, 0, 0.2); + --g-color-private-red-200: rgba(255, 4, 0, 0.3); + --g-color-private-red-250: rgba(255, 4, 0, 0.4); + --g-color-private-red-300: rgba(255, 4, 0, 0.5); + --g-color-private-red-350: rgba(255, 4, 0, 0.6); + --g-color-private-red-400: rgba(255, 4, 0, 0.7); + --g-color-private-red-450: rgba(255, 4, 0, 0.8); + --g-color-private-red-500: rgba(255, 4, 0, 0.9); + + --g-color-private-red-50-solid: rgb(255, 230, 230); + --g-color-private-red-100-solid: rgb(255, 217, 217); + --g-color-private-red-150-solid: rgb(255, 205, 204); + --g-color-private-red-200-solid: rgb(255, 180, 179); + --g-color-private-red-250-solid: rgb(255, 155, 153); + --g-color-private-red-300-solid: rgb(255, 130, 128); + --g-color-private-red-350-solid: rgb(255, 105, 102); + --g-color-private-red-400-solid: rgb(255, 80, 76); + --g-color-private-red-450-solid: rgb(255, 55, 51); + --g-color-private-red-500-solid: rgb(255, 30, 26); + --g-color-private-red-550-solid: rgb(255, 4, 0); + --g-color-private-red-600-solid: rgb(233, 8, 4); + --g-color-private-red-650-solid: rgb(211, 11, 8); + --g-color-private-red-700-solid: rgb(189, 14, 11); + --g-color-private-red-750-solid: rgb(166, 17, 15); + --g-color-private-red-800-solid: rgb(144, 20, 19); + --g-color-private-red-850-solid: rgb(122, 23, 23); + --g-color-private-red-900-solid: rgb(100, 26, 27); + --g-color-private-red-950-solid: rgb(78, 29, 30); + --g-color-private-red-1000-solid: rgb(67, 30, 32); + + --g-color-private-purple-50: rgba(143, 82, 204, 0.1); + --g-color-private-purple-100: rgba(143, 82, 204, 0.15); + --g-color-private-purple-150: rgba(143, 82, 204, 0.2); + --g-color-private-purple-200: rgba(143, 82, 204, 0.3); + --g-color-private-purple-250: rgba(143, 82, 204, 0.4); + --g-color-private-purple-300: rgba(143, 82, 204, 0.5); + --g-color-private-purple-350: rgba(143, 82, 204, 0.6); + --g-color-private-purple-400: rgba(143, 82, 204, 0.7); + --g-color-private-purple-450: rgba(143, 82, 204, 0.8); + --g-color-private-purple-500: rgba(143, 82, 204, 0.9); + + --g-color-private-purple-50-solid: rgb(244, 238, 250); + --g-color-private-purple-100-solid: rgb(238, 229, 247); + --g-color-private-purple-150-solid: rgb(233, 220, 245); + --g-color-private-purple-200-solid: rgb(221, 203, 240); + --g-color-private-purple-250-solid: rgb(210, 186, 235); + --g-color-private-purple-300-solid: rgb(199, 169, 230); + --g-color-private-purple-350-solid: rgb(188, 151, 224); + --g-color-private-purple-400-solid: rgb(177, 134, 219); + --g-color-private-purple-450-solid: rgb(165, 117, 214); + --g-color-private-purple-500-solid: rgb(154, 99, 209); + --g-color-private-purple-550-solid: rgb(143, 82, 204); + --g-color-private-purple-600-solid: rgb(132, 77, 187); + --g-color-private-purple-650-solid: rgb(121, 73, 171); + --g-color-private-purple-700-solid: rgb(110, 68, 154); + --g-color-private-purple-750-solid: rgb(99, 63, 138); + --g-color-private-purple-800-solid: rgb(89, 59, 121); + --g-color-private-purple-850-solid: rgb(78, 54, 104); + --g-color-private-purple-900-solid: rgb(67, 49, 88); + --g-color-private-purple-950-solid: rgb(56, 44, 71); + --g-color-private-purple-1000-solid: rgb(50, 42, 63); + + --g-color-private-cool-grey-50: rgba(107, 132, 153, 0.1); + --g-color-private-cool-grey-100: rgba(107, 132, 153, 0.15); + --g-color-private-cool-grey-150: rgba(107, 132, 153, 0.2); + --g-color-private-cool-grey-200: rgba(107, 132, 153, 0.3); + --g-color-private-cool-grey-250: rgba(107, 132, 153, 0.4); + --g-color-private-cool-grey-300: rgba(107, 132, 153, 0.5); + --g-color-private-cool-grey-350: rgba(107, 132, 153, 0.6); + --g-color-private-cool-grey-400: rgba(107, 132, 153, 0.7); + --g-color-private-cool-grey-450: rgba(107, 132, 153, 0.8); + --g-color-private-cool-grey-500: rgba(107, 132, 153, 0.9); + + --g-color-private-cool-grey-50-solid: rgb(240, 243, 245); + --g-color-private-cool-grey-100-solid: rgb(233, 237, 240); + --g-color-private-cool-grey-150-solid: rgb(225, 230, 235); + --g-color-private-cool-grey-200-solid: rgb(211, 218, 224); + --g-color-private-cool-grey-250-solid: rgb(196, 206, 214); + --g-color-private-cool-grey-300-solid: rgb(181, 193, 204); + --g-color-private-cool-grey-350-solid: rgb(166, 181, 194); + --g-color-private-cool-grey-400-solid: rgb(151, 169, 184); + --g-color-private-cool-grey-450-solid: rgb(137, 157, 173); + --g-color-private-cool-grey-500-solid: rgb(122, 144, 163); + --g-color-private-cool-grey-550-solid: rgb(107, 132, 153); + --g-color-private-cool-grey-600-solid: rgb(100, 122, 142); + --g-color-private-cool-grey-650-solid: rgb(92, 113, 130); + --g-color-private-cool-grey-700-solid: rgb(85, 103, 118); + --g-color-private-cool-grey-750-solid: rgb(78, 93, 107); + --g-color-private-cool-grey-800-solid: rgb(70, 83, 96); + --g-color-private-cool-grey-850-solid: rgb(63, 74, 84); + --g-color-private-cool-grey-900-solid: rgb(56, 64, 73); + --g-color-private-cool-grey-950-solid: rgb(49, 54, 61); + --g-color-private-cool-grey-1000-solid: rgb(45, 50, 55); +} diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss new file mode 100644 index 000000000..adfc317d0 --- /dev/null +++ b/src/styles/themes/light.scss @@ -0,0 +1,291 @@ +@mixin colors-private-light { + --g-color-private-white-50: rgba(255, 255, 255, 0.05); + --g-color-private-white-70: rgba(255, 255, 255, 0.07); + --g-color-private-white-100: rgba(255, 255, 255, 0.1); + --g-color-private-white-150: rgba(255, 255, 255, 0.15); + --g-color-private-white-200: rgba(255, 255, 255, 0.2); + --g-color-private-white-250: rgba(255, 255, 255, 0.25); + --g-color-private-white-300: rgba(255, 255, 255, 0.3); + --g-color-private-white-350: rgba(255, 255, 255, 0.35); + --g-color-private-white-400: rgba(255, 255, 255, 0.4); + --g-color-private-white-450: rgba(255, 255, 255, 0.45); + --g-color-private-white-500: rgba(255, 255, 255, 0.5); + --g-color-private-white-550: rgba(255, 255, 255, 0.55); + --g-color-private-white-600: rgba(255, 255, 255, 0.6); + --g-color-private-white-650: rgba(255, 255, 255, 0.65); + --g-color-private-white-700: rgba(255, 255, 255, 0.7); + --g-color-private-white-750: rgba(255, 255, 255, 0.75); + --g-color-private-white-800: rgba(255, 255, 255, 0.8); + --g-color-private-white-850: rgba(255, 255, 255, 0.85); + --g-color-private-white-900: rgba(255, 255, 255, 0.9); + --g-color-private-white-950: rgba(255, 255, 255, 0.95); + + --g-color-private-white-1000-solid: rgb(255, 255, 255); + + --g-color-private-black-50: rgba(0, 0, 0, 0.05); + --g-color-private-black-70: rgba(0, 0, 0, 0.07); + --g-color-private-black-100: rgba(0, 0, 0, 0.1); + --g-color-private-black-150: rgba(0, 0, 0, 0.15); + --g-color-private-black-200: rgba(0, 0, 0, 0.2); + --g-color-private-black-250: rgba(0, 0, 0, 0.25); + --g-color-private-black-300: rgba(0, 0, 0, 0.3); + --g-color-private-black-350: rgba(0, 0, 0, 0.35); + --g-color-private-black-400: rgba(0, 0, 0, 0.4); + --g-color-private-black-450: rgba(0, 0, 0, 0.45); + --g-color-private-black-500: rgba(0, 0, 0, 0.5); + --g-color-private-black-550: rgba(0, 0, 0, 0.55); + --g-color-private-black-600: rgba(0, 0, 0, 0.6); + --g-color-private-black-650: rgba(0, 0, 0, 0.65); + --g-color-private-black-700: rgba(0, 0, 0, 0.7); + --g-color-private-black-750: rgba(0, 0, 0, 0.75); + --g-color-private-black-800: rgba(0, 0, 0, 0.8); + --g-color-private-black-850: rgba(0, 0, 0, 0.85); + --g-color-private-black-900: rgba(0, 0, 0, 0.9); + --g-color-private-black-950: rgba(0, 0, 0, 0.95); + + --g-color-private-black-20-solid: rgb(250, 250, 250); + --g-color-private-black-50-solid: rgb(242, 242, 242); + --g-color-private-black-100-solid: rgb(229, 229, 229); + --g-color-private-black-150-solid: rgb(217, 217, 217); + --g-color-private-black-200-solid: rgb(204, 204, 204); + --g-color-private-black-250-solid: rgb(191, 191, 191); + --g-color-private-black-300-solid: rgb(179, 179, 179); + --g-color-private-black-350-solid: rgb(166, 166, 166); + --g-color-private-black-400-solid: rgb(153, 153, 153); + --g-color-private-black-450-solid: rgb(140, 140, 140); + --g-color-private-black-500-solid: rgb(128, 128, 128); + --g-color-private-black-550-solid: rgb(115, 115, 115); + --g-color-private-black-600-solid: rgb(102, 102, 102); + --g-color-private-black-650-solid: rgb(89, 89, 89); + --g-color-private-black-700-solid: rgb(76, 76, 76); + --g-color-private-black-750-solid: rgb(64, 64, 64); + --g-color-private-black-800-solid: rgb(51, 51, 51); + --g-color-private-black-850-solid: rgb(38, 38, 38); + --g-color-private-black-900-solid: rgb(26, 26, 26); + --g-color-private-black-950-solid: rgb(13, 13, 13); + --g-color-private-black-1000-solid: rgb(0, 0, 0); + + --g-color-private-blue-50: rgba(82, 130, 255, 0.1); + --g-color-private-blue-100: rgba(82, 130, 255, 0.15); + --g-color-private-blue-150: rgba(82, 130, 255, 0.2); + --g-color-private-blue-200: rgba(82, 130, 255, 0.3); + --g-color-private-blue-250: rgba(82, 130, 255, 0.4); + --g-color-private-blue-300: rgba(82, 130, 255, 0.5); + --g-color-private-blue-350: rgba(82, 130, 255, 0.6); + --g-color-private-blue-400: rgba(82, 130, 255, 0.7); + --g-color-private-blue-450: rgba(82, 130, 255, 0.8); + --g-color-private-blue-500: rgba(82, 130, 255, 0.9); + + --g-color-private-blue-50-solid: rgb(238, 243, 255); + --g-color-private-blue-100-solid: rgb(229, 236, 255); + --g-color-private-blue-150-solid: rgb(220, 230, 255); + --g-color-private-blue-200-solid: rgb(203, 218, 255); + --g-color-private-blue-250-solid: rgb(186, 205, 255); + --g-color-private-blue-300-solid: rgb(168, 193, 255); + --g-color-private-blue-350-solid: rgb(151, 180, 255); + --g-color-private-blue-400-solid: rgb(134, 168, 255); + --g-color-private-blue-450-solid: rgb(116, 155, 255); + --g-color-private-blue-500-solid: rgb(99, 143, 255); + --g-color-private-blue-550-solid: rgb(82, 130, 255); + --g-color-private-blue-600-solid: rgb(78, 121, 235); + --g-color-private-blue-650-solid: rgb(74, 113, 214); + --g-color-private-blue-700-solid: rgb(71, 104, 194); + --g-color-private-blue-750-solid: rgb(67, 96, 173); + --g-color-private-blue-800-solid: rgb(63, 87, 153); + --g-color-private-blue-850-solid: rgb(60, 79, 133); + --g-color-private-blue-900-solid: rgb(56, 70, 112); + --g-color-private-blue-950-solid: rgb(52, 61, 92); + --g-color-private-blue-1000-solid: rgb(51, 57, 82); + + --g-color-private-green-50: rgba(59, 201, 53, 0.1); + --g-color-private-green-100: rgba(59, 201, 53, 0.15); + --g-color-private-green-150: rgba(59, 201, 53, 0.2); + --g-color-private-green-200: rgba(59, 201, 53, 0.3); + --g-color-private-green-250: rgba(59, 201, 53, 0.4); + --g-color-private-green-300: rgba(59, 201, 53, 0.5); + --g-color-private-green-350: rgba(59, 201, 53, 0.6); + --g-color-private-green-400: rgba(59, 201, 53, 0.7); + --g-color-private-green-450: rgba(59, 201, 53, 0.8); + --g-color-private-green-500: rgba(59, 201, 53, 0.9); + + --g-color-private-green-50-solid: rgb(235, 250, 235); + --g-color-private-green-100-solid: rgb(226, 247, 225); + --g-color-private-green-150-solid: rgb(216, 244, 215); + --g-color-private-green-200-solid: rgb(196, 239, 194); + --g-color-private-green-250-solid: rgb(177, 233, 174); + --g-color-private-green-300-solid: rgb(157, 228, 154); + --g-color-private-green-350-solid: rgb(137, 223, 134); + --g-color-private-green-400-solid: rgb(118, 217, 114); + --g-color-private-green-450-solid: rgb(98, 212, 93); + --g-color-private-green-500-solid: rgb(79, 206, 73); + --g-color-private-green-550-solid: rgb(59, 201, 53); + --g-color-private-green-600-solid: rgb(58, 185, 53); + --g-color-private-green-650-solid: rgb(56, 170, 53); + --g-color-private-green-700-solid: rgb(55, 154, 52); + --g-color-private-green-750-solid: rgb(53, 138, 52); + --g-color-private-green-800-solid: rgb(52, 123, 52); + --g-color-private-green-850-solid: rgb(51, 107, 52); + --g-color-private-green-900-solid: rgb(49, 91, 52); + --g-color-private-green-950-solid: rgb(48, 75, 51); + --g-color-private-green-1000-solid: rgb(47, 68, 51); + + --g-color-private-yellow-50: rgba(255, 219, 77, 0.1); + --g-color-private-yellow-100: rgba(255, 219, 77, 0.15); + --g-color-private-yellow-150: rgba(255, 219, 77, 0.2); + --g-color-private-yellow-200: rgba(255, 219, 77, 0.3); + --g-color-private-yellow-250: rgba(255, 219, 77, 0.4); + --g-color-private-yellow-300: rgba(255, 219, 77, 0.5); + --g-color-private-yellow-350: rgba(255, 219, 77, 0.6); + --g-color-private-yellow-400: rgba(255, 219, 77, 0.7); + --g-color-private-yellow-450: rgba(255, 219, 77, 0.8); + --g-color-private-yellow-500: rgba(255, 219, 77, 0.9); + + --g-color-private-yellow-50-solid: rgb(255, 251, 237); + --g-color-private-yellow-100-solid: rgb(255, 250, 228); + --g-color-private-yellow-150-solid: rgb(255, 248, 219); + --g-color-private-yellow-200-solid: rgb(255, 244, 202); + --g-color-private-yellow-250-solid: rgb(255, 241, 184); + --g-color-private-yellow-300-solid: rgb(255, 237, 166); + --g-color-private-yellow-350-solid: rgb(255, 233, 148); + --g-color-private-yellow-400-solid: rgb(255, 230, 130); + --g-color-private-yellow-450-solid: rgb(255, 226, 113); + --g-color-private-yellow-500-solid: rgb(255, 223, 95); + --g-color-private-yellow-550-solid: rgb(255, 219, 77); + --g-color-private-yellow-600-solid: rgb(234, 201, 74); + --g-color-private-yellow-650-solid: rgb(213, 184, 72); + --g-color-private-yellow-700-solid: rgb(192, 166, 69); + --g-color-private-yellow-750-solid: rgb(171, 149, 67); + --g-color-private-yellow-800-solid: rgb(150, 131, 64); + --g-color-private-yellow-850-solid: rgb(129, 114, 61); + --g-color-private-yellow-900-solid: rgb(108, 96, 59); + --g-color-private-yellow-950-solid: rgb(87, 79, 56); + --g-color-private-yellow-1000-solid: rgb(77, 70, 55); + + --g-color-private-orange-50: rgba(255, 119, 0, 0.1); + --g-color-private-orange-100: rgba(255, 119, 0, 0.15); + --g-color-private-orange-150: rgba(255, 119, 0, 0.2); + --g-color-private-orange-200: rgba(255, 119, 0, 0.3); + --g-color-private-orange-250: rgba(255, 119, 0, 0.4); + --g-color-private-orange-300: rgba(255, 119, 0, 0.5); + --g-color-private-orange-350: rgba(255, 119, 0, 0.6); + --g-color-private-orange-400: rgba(255, 119, 0, 0.7); + --g-color-private-orange-450: rgba(255, 119, 0, 0.8); + --g-color-private-orange-500: rgba(255, 119, 0, 0.9); + + --g-color-private-orange-50-solid: rgb(255, 241, 230); + --g-color-private-orange-100-solid: rgb(255, 235, 217); + --g-color-private-orange-150-solid: rgb(255, 228, 204); + --g-color-private-orange-200-solid: rgb(255, 214, 179); + --g-color-private-orange-250-solid: rgb(255, 201, 153); + --g-color-private-orange-300-solid: rgb(255, 187, 128); + --g-color-private-orange-350-solid: rgb(255, 173, 102); + --g-color-private-orange-400-solid: rgb(255, 160, 76); + --g-color-private-orange-450-solid: rgb(255, 146, 51); + --g-color-private-orange-500-solid: rgb(255, 133, 26); + --g-color-private-orange-550-solid: rgb(255, 119, 0); + --g-color-private-orange-600-solid: rgb(234, 112, 5); + --g-color-private-orange-650-solid: rgb(213, 104, 10); + --g-color-private-orange-700-solid: rgb(192, 96, 15); + --g-color-private-orange-750-solid: rgb(171, 89, 20); + --g-color-private-orange-800-solid: rgb(150, 81, 25); + --g-color-private-orange-850-solid: rgb(129, 74, 31); + --g-color-private-orange-900-solid: rgb(108, 67, 36); + --g-color-private-orange-950-solid: rgb(87, 59, 41); + --g-color-private-orange-1000-solid: rgb(77, 55, 43); + + --g-color-private-red-50: rgba(255, 4, 0, 0.1); + --g-color-private-red-100: rgba(255, 4, 0, 0.15); + --g-color-private-red-150: rgba(255, 4, 0, 0.2); + --g-color-private-red-200: rgba(255, 4, 0, 0.3); + --g-color-private-red-250: rgba(255, 4, 0, 0.4); + --g-color-private-red-300: rgba(255, 4, 0, 0.5); + --g-color-private-red-350: rgba(255, 4, 0, 0.6); + --g-color-private-red-400: rgba(255, 4, 0, 0.7); + --g-color-private-red-450: rgba(255, 4, 0, 0.8); + --g-color-private-red-500: rgba(255, 4, 0, 0.9); + + --g-color-private-red-50-solid: rgb(255, 230, 230); + --g-color-private-red-100-solid: rgb(255, 217, 217); + --g-color-private-red-150-solid: rgb(255, 205, 204); + --g-color-private-red-200-solid: rgb(255, 180, 179); + --g-color-private-red-250-solid: rgb(255, 155, 153); + --g-color-private-red-300-solid: rgb(255, 130, 128); + --g-color-private-red-350-solid: rgb(255, 105, 102); + --g-color-private-red-400-solid: rgb(255, 80, 76); + --g-color-private-red-450-solid: rgb(255, 55, 51); + --g-color-private-red-500-solid: rgb(255, 30, 26); + --g-color-private-red-550-solid: rgb(255, 4, 0); + --g-color-private-red-600-solid: rgb(234, 8, 5); + --g-color-private-red-650-solid: rgb(213, 12, 10); + --g-color-private-red-700-solid: rgb(192, 16, 15); + --g-color-private-red-750-solid: rgb(171, 20, 20); + --g-color-private-red-800-solid: rgb(150, 24, 25); + --g-color-private-red-850-solid: rgb(129, 28, 31); + --g-color-private-red-900-solid: rgb(108, 32, 36); + --g-color-private-red-950-solid: rgb(87, 36, 41); + --g-color-private-red-1000-solid: rgb(77, 38, 43); + + --g-color-private-purple-50: rgba(143, 82, 204, 0.1); + --g-color-private-purple-100: rgba(143, 82, 204, 0.15); + --g-color-private-purple-150: rgba(143, 82, 204, 0.2); + --g-color-private-purple-200: rgba(143, 82, 204, 0.3); + --g-color-private-purple-250: rgba(143, 82, 204, 0.4); + --g-color-private-purple-300: rgba(143, 82, 204, 0.5); + --g-color-private-purple-350: rgba(143, 82, 204, 0.6); + --g-color-private-purple-400: rgba(143, 82, 204, 0.7); + --g-color-private-purple-450: rgba(143, 82, 204, 0.8); + --g-color-private-purple-500: rgba(143, 82, 204, 0.9); + + --g-color-private-purple-50-solid: rgb(244, 238, 250); + --g-color-private-purple-100-solid: rgb(238, 229, 247); + --g-color-private-purple-150-solid: rgb(233, 220, 245); + --g-color-private-purple-200-solid: rgb(221, 203, 240); + --g-color-private-purple-250-solid: rgb(210, 186, 235); + --g-color-private-purple-300-solid: rgb(199, 169, 230); + --g-color-private-purple-350-solid: rgb(188, 151, 224); + --g-color-private-purple-400-solid: rgb(177, 134, 219); + --g-color-private-purple-450-solid: rgb(165, 117, 214); + --g-color-private-purple-500-solid: rgb(154, 99, 209); + --g-color-private-purple-550-solid: rgb(143, 82, 204); + --g-color-private-purple-600-solid: rgb(133, 78, 189); + --g-color-private-purple-650-solid: rgb(123, 74, 173); + --g-color-private-purple-700-solid: rgb(114, 71, 158); + --g-color-private-purple-750-solid: rgb(104, 67, 143); + --g-color-private-purple-800-solid: rgb(94, 63, 128); + --g-color-private-purple-850-solid: rgb(84, 59, 112); + --g-color-private-purple-900-solid: rgb(74, 55, 97); + --g-color-private-purple-950-solid: rgb(65, 52, 82); + --g-color-private-purple-1000-solid: rgb(60, 50, 74); + + --g-color-private-cool-grey-50: rgba(107, 132, 153, 0.1); + --g-color-private-cool-grey-100: rgba(107, 132, 153, 0.15); + --g-color-private-cool-grey-150: rgba(107, 132, 153, 0.2); + --g-color-private-cool-grey-200: rgba(107, 132, 153, 0.3); + --g-color-private-cool-grey-250: rgba(107, 132, 153, 0.4); + --g-color-private-cool-grey-300: rgba(107, 132, 153, 0.5); + --g-color-private-cool-grey-350: rgba(107, 132, 153, 0.6); + --g-color-private-cool-grey-400: rgba(107, 132, 153, 0.7); + --g-color-private-cool-grey-450: rgba(107, 132, 153, 0.8); + --g-color-private-cool-grey-500: rgba(107, 132, 153, 0.9); + + --g-color-private-cool-grey-50-solid: rgb(240, 243, 245); + --g-color-private-cool-grey-100-solid: rgb(233, 237, 240); + --g-color-private-cool-grey-150-solid: rgb(225, 230, 235); + --g-color-private-cool-grey-200-solid: rgb(211, 218, 224); + --g-color-private-cool-grey-250-solid: rgb(196, 206, 214); + --g-color-private-cool-grey-300-solid: rgb(181, 193, 204); + --g-color-private-cool-grey-350-solid: rgb(166, 181, 194); + --g-color-private-cool-grey-400-solid: rgb(151, 169, 184); + --g-color-private-cool-grey-450-solid: rgb(137, 157, 173); + --g-color-private-cool-grey-500-solid: rgb(122, 144, 163); + --g-color-private-cool-grey-550-solid: rgb(107, 132, 153); + --g-color-private-cool-grey-600-solid: rgb(101, 123, 143); + --g-color-private-cool-grey-650-solid: rgb(95, 114, 133); + --g-color-private-cool-grey-700-solid: rgb(88, 106, 122); + --g-color-private-cool-grey-750-solid: rgb(82, 97, 112); + --g-color-private-cool-grey-800-solid: rgb(76, 88, 102); + --g-color-private-cool-grey-850-solid: rgb(70, 79, 92); + --g-color-private-cool-grey-900-solid: rgb(64, 70, 82); + --g-color-private-cool-grey-950-solid: rgb(57, 62, 71); + --g-color-private-cool-grey-1000-solid: rgb(54, 57, 66); +}