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 ? (
) : 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);
+}