diff --git a/.storybook/decorators/withTheme.tsx b/.storybook/decorators/withTheme.tsx
deleted file mode 100644
index 55cfc848..00000000
--- a/.storybook/decorators/withTheme.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import type {DecoratorFn} from '@storybook/react';
-import {useTheme} from '@gravity-ui/uikit';
-
-export const withTheme: DecoratorFn = (Story, context) => {
- const themeValue = context.globals.theme;
- const [theme, setTheme] = useTheme();
-
- React.useEffect(() => {
- if (theme !== themeValue) {
- setTheme(themeValue);
- }
- }, [theme, themeValue, setTheme]);
-
- return ;
-};
diff --git a/package-lock.json b/package-lock.json
index 65a18872..f640fa48 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
"@gravity-ui/prettier-config": "^1.0.0",
"@gravity-ui/stylelint-config": "^1.0.0",
"@gravity-ui/tsconfig": "^1.0.0",
- "@gravity-ui/uikit": "^4.7.0",
+ "@gravity-ui/uikit": "^5.0.0-beta.0",
"@storybook/addon-essentials": "^7.0.26",
"@storybook/cli": "^7.0.18",
"@storybook/preset-scss": "^1.0.3",
@@ -62,9 +62,9 @@
"typescript": "^4.9.5"
},
"peerDependencies": {
- "@gravity-ui/uikit": "^4.0.0",
- "react": "^17.0.0 || ^18.0.0",
- "react-dom": "^17.0.0 || ^18.0.0"
+ "@gravity-ui/uikit": "^4.0.0 | ^5.0.0-beta.0",
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@@ -3400,9 +3400,9 @@
"dev": true
},
"node_modules/@gravity-ui/uikit": {
- "version": "4.22.1",
- "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-4.22.1.tgz",
- "integrity": "sha512-BeH8IgIFp1HRoJYWEkMd4OfwSOpD5u9vAU/187APopYTX+vLgsS+n7FYRFKGIcBr//0bwhzu1D/G1lW1luQlXg==",
+ "version": "5.0.0-beta.0",
+ "resolved": "https://registry.npmjs.org/@gravity-ui/uikit/-/uikit-5.0.0-beta.0.tgz",
+ "integrity": "sha512-lAwg+0qMR8XqZISjllJAEkxpUlUFqmGlNHu3HYXVoPpg8QwkmhpQ52iDkzfGyU4U12+5Gr7iJDAEMozHr2aGMw==",
"dev": true,
"dependencies": {
"@gravity-ui/i18n": "^1.1.0",
@@ -3418,7 +3418,6 @@
"react-transition-group": "^4.4.5",
"react-virtualized-auto-sizer": "^1.0.20",
"react-window": "^1.8.9",
- "resize-observer-polyfill": "^1.5.1",
"tabbable": "^6.1.2",
"tslib": "^2.5.3",
"utility-types": "^3.10.0"
diff --git a/package.json b/package.json
index 79a1ef23..57df8c67 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
"@gravity-ui/prettier-config": "^1.0.0",
"@gravity-ui/stylelint-config": "^1.0.0",
"@gravity-ui/tsconfig": "^1.0.0",
- "@gravity-ui/uikit": "^4.7.0",
+ "@gravity-ui/uikit": "^5.0.0-beta.0",
"@storybook/addon-essentials": "^7.0.26",
"@storybook/cli": "^7.0.18",
"@storybook/preset-scss": "^1.0.3",
@@ -89,7 +89,7 @@
"typescript": "^4.9.5"
},
"peerDependencies": {
- "@gravity-ui/uikit": "^4.0.0",
+ "@gravity-ui/uikit": "^5.0.0-beta.0",
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
},
diff --git a/src/components/ActionsPanel/ActionsPanel.scss b/src/components/ActionsPanel/ActionsPanel.scss
index 6b5f0587..5c2a5524 100644
--- a/src/components/ActionsPanel/ActionsPanel.scss
+++ b/src/components/ActionsPanel/ActionsPanel.scss
@@ -2,7 +2,7 @@
.#{variables.$ns}actions-panel {
box-sizing: border-box;
- background-color: var(--yc-color-base-special);
+ background-color: var(--g-color-base-brand);
min-width: 200px;
height: 52px;
padding: 4px 20px;
diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.scss b/src/components/AdaptiveTabs/AdaptiveTabs.scss
index 0369948c..ba9d3383 100644
--- a/src/components/AdaptiveTabs/AdaptiveTabs.scss
+++ b/src/components/AdaptiveTabs/AdaptiveTabs.scss
@@ -4,11 +4,11 @@
$block: '.#{variables.$ns}adaptive-tabs';
#{$block} {
- --gc-tabs-color-divider: var(--yc-color-line-generic);
- --gc-tabs-color-border-active: var(--yc-color-text-info);
- --gc-tabs-color-text-active: var(--yc-color-text-primary);
- --gc-tabs-color-text-inactive: var(--yc-color-text-complementary);
- --gc-tabs-color-text-disabled: var(--yc-color-text-secondary);
+ --gc-tabs-color-divider: var(--g-color-line-generic);
+ --gc-tabs-color-border-active: var(--g-color-text-info);
+ --gc-tabs-color-text-active: var(--g-color-text-primary);
+ --gc-tabs-color-text-inactive: var(--g-color-text-complementary);
+ --gc-tabs-color-text-disabled: var(--g-color-text-secondary);
&_size {
&_m {
--gc-tabs-height: 36px;
diff --git a/src/components/ChangelogDialog/ChangelogDialog.scss b/src/components/ChangelogDialog/ChangelogDialog.scss
index 9f445dee..22b81a8f 100644
--- a/src/components/ChangelogDialog/ChangelogDialog.scss
+++ b/src/components/ChangelogDialog/ChangelogDialog.scss
@@ -27,7 +27,7 @@ $maxItemsHeight: 70vh;
}
&__empty-placeholder {
- color: var(--yc-color-text-secondary);
+ color: var(--g-color-text-secondary);
text-align: center;
}
}
diff --git a/src/components/ChangelogDialog/components/Item/Item.scss b/src/components/ChangelogDialog/components/Item/Item.scss
index 1f8edaa6..d14e046f 100644
--- a/src/components/ChangelogDialog/components/Item/Item.scss
+++ b/src/components/ChangelogDialog/components/Item/Item.scss
@@ -12,8 +12,8 @@ $metaWidth: 124px;
}
&__date {
- line-height: var(--yc-text-subheader-3-line-height);
- color: var(--yc-color-text-secondary);
+ line-height: var(--g-text-subheader-3-line-height);
+ color: var(--g-color-text-secondary);
}
&__label-new {
diff --git a/src/components/FormRow/FormRow.scss b/src/components/FormRow/FormRow.scss
index 22cca750..e5ed7b1c 100644
--- a/src/components/FormRow/FormRow.scss
+++ b/src/components/FormRow/FormRow.scss
@@ -29,7 +29,7 @@
&__required-mark {
line-height: 0;
vertical-align: baseline;
- color: var(--yc-color-text-danger);
+ color: var(--g-color-text-danger);
font-size: inherit;
}
@@ -46,7 +46,7 @@
&__field-description {
margin: 10px 0 0;
- color: var(--yc-color-text-secondary);
+ color: var(--g-color-text-secondary);
word-break: break-word;
}
}
diff --git a/src/components/ItemSelector/ItemSelector.scss b/src/components/ItemSelector/ItemSelector.scss
index 6fdf66b3..b67f1ac6 100644
--- a/src/components/ItemSelector/ItemSelector.scss
+++ b/src/components/ItemSelector/ItemSelector.scss
@@ -16,7 +16,7 @@ $block: '.#{variables.$ns}item-selector';
padding-top: 8px;
&:not(:last-child) {
- border-right: 1px solid var(--yc-color-line-generic);
+ border-right: 1px solid var(--g-color-line-generic);
}
}
diff --git a/src/components/Notification/Notification.scss b/src/components/Notification/Notification.scss
index 99d33ba5..4283a623 100644
--- a/src/components/Notification/Notification.scss
+++ b/src/components/Notification/Notification.scss
@@ -13,7 +13,7 @@ $notificationSourceIconSize: 36px;
width: 100%;
&:hover {
- background: var(--yc-color-base-simple-hover);
+ background: var(--g-color-base-simple-hover);
}
&__right {
@@ -47,7 +47,7 @@ $notificationSourceIconSize: 36px;
&__right-meta {
display: flex;
gap: 4px;
- color: var(--yc-color-text-secondary);
+ color: var(--g-color-text-secondary);
}
&__right-title {
@@ -55,20 +55,20 @@ $notificationSourceIconSize: 36px;
font-size: 13px;
line-height: 18px;
- color: var(--yc-color-text-primary);
+ color: var(--g-color-text-primary);
}
&__right-content {
font-size: 13px;
line-height: 18px;
- color: var(--yc-color-text-secondary);
+ color: var(--g-color-text-secondary);
}
&_unread {
- background: var(--yc-color-base-selection);
+ background: var(--g-color-base-selection);
&:hover {
- background: var(--yc-color-base-selection-hover);
+ background: var(--g-color-base-selection-hover);
}
}
@@ -94,20 +94,20 @@ $notificationSourceIconSize: 36px;
}
&__action_icon {
- color: var(--yc-color-text-secondary);
+ color: var(--g-color-text-secondary);
}
&_theme_success {
- border-left: 4px solid var(--yc-color-line-positive);
+ border-left: 4px solid var(--g-color-line-positive);
}
&_theme_info {
- border-left: 4px solid var(--yc-color-line-info);
+ border-left: 4px solid var(--g-color-line-info);
}
&_theme_warning {
- border-left: 4px solid var(--yc-color-line-warning);
+ border-left: 4px solid var(--g-color-line-warning);
}
&_theme_danger {
- border-left: 4px solid var(--yc-color-line-danger);
+ border-left: 4px solid var(--g-color-line-danger);
}
&__swipe-wrap {
@@ -148,39 +148,39 @@ $notificationSourceIconSize: 36px;
}
&__swipe-action_theme_base {
- background: var(--yc-color-base-misc);
+ background: var(--g-color-base-misc-light);
}
&__swipe-action_theme_base &__swipe-action-icon {
- background: var(--yc-color-text-misc);
+ background: var(--g-color-text-misc-light);
}
&__swipe-action_theme_base &__swipe-action-text {
- color: var(--yc-color-text-misc);
+ color: var(--g-color-text-misc-heavy);
}
&__swipe-action_theme_warning {
- background: var(--yc-color-base-warning);
+ background: var(--g-color-base-warning-light);
}
&__swipe-action_theme_warning &__swipe-action-icon {
- background: var(--yc-color-base-warning-heavy);
+ background: var(--g-color-base-warning-heavy);
}
&__swipe-action_theme_warning &__swipe-action-text {
- color: var(--yc-color-base-warning-heavy);
+ color: var(--g-color-text-warning-heavy);
}
&__swipe-action_theme_danger {
- background: var(--yc-color-base-danger);
+ background: var(--g-color-base-danger-light);
}
&__swipe-action_theme_danger &__swipe-action-icon {
- background: var(--yc-color-base-danger-heavy);
+ background: var(--g-color-base-danger-heavy);
}
&__swipe-action_theme_danger &__swipe-action-text {
- color: var(--yc-color-base-danger-heavy);
+ color: var(--g-color-text-danger-heavy);
}
&__swipe-action-icon {
padding: 8px;
border-radius: 100%;
- color: var(--yc-color-base-background);
+ color: var(--g-color-base-background);
}
&__swipe-action-text {
diff --git a/src/components/Notifications/Notifications.scss b/src/components/Notifications/Notifications.scss
index 335fd378..ec09b915 100644
--- a/src/components/Notifications/Notifications.scss
+++ b/src/components/Notifications/Notifications.scss
@@ -5,14 +5,14 @@ $block: '.#{variables.$ns}notifications';
#{$block} {
display: flex;
flex-direction: column;
- color: var(--yc-color-text-primary);
- background: var(--yc-color-base-background);
+ color: var(--g-color-text-primary);
+ background: var(--g-color-base-background);
height: 100%;
&__head {
display: flex;
padding: 16px;
- border-bottom: 1px solid var(--yc-color-line-generic);
+ border-bottom: 1px solid var(--g-color-line-generic);
}
&__head-title {
@@ -22,7 +22,7 @@ $block: '.#{variables.$ns}notifications';
font-size: 17px;
line-height: 24px;
- color: var(--yc-color-text-primary);
+ color: var(--g-color-text-primary);
}
&__body {
@@ -65,7 +65,7 @@ $block: '.#{variables.$ns}notifications';
&__notification-wrapper:not(:first-child)::before {
content: '';
display: block;
- border-top: 1px solid var(--yc-color-line-generic);
+ border-top: 1px solid var(--g-color-line-generic);
margin: 0 12px;
}
diff --git a/src/components/Notifications/NotificationsEmptyState.tsx b/src/components/Notifications/NotificationsEmptyState.tsx
index f3901413..c477109c 100644
--- a/src/components/Notifications/NotificationsEmptyState.tsx
+++ b/src/components/Notifications/NotificationsEmptyState.tsx
@@ -12,7 +12,7 @@ const nothingFoundDarkSvg = `