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 = ` diff --git a/src/components/Notifications/__stories__/Notifications.stories.tsx b/src/components/Notifications/__stories__/Notifications.stories.tsx index 32c9a852..47ab5660 100644 --- a/src/components/Notifications/__stories__/Notifications.stories.tsx +++ b/src/components/Notifications/__stories__/Notifications.stories.tsx @@ -12,7 +12,7 @@ const Template: ComponentStory = (args) => (