ydb-embedded-ui 4.25.0 → 4.26.0

package/dist/containers/Heatmap/Histogram/Histogram.scss

@@ -13,22 +13,22 @@
         margin-top: 30px;
         margin-left: 50px;
 
-        border-bottom: 1px solid var(--yc-color-base-generic);
-        border-left: 1px solid var(--yc-color-base-generic);
+        border-bottom: 1px solid var(--g-color-base-generic);
+        border-left: 1px solid var(--g-color-base-generic);
     }
     &__x-min {
         position: absolute;
         bottom: -25px;
         left: -3px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__x-max {
         position: absolute;
         right: 0;
         bottom: -25px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__y-min {
         position: absolute;
@@ -39,7 +39,7 @@
 
         text-align: right;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__y-max {
         position: absolute;
@@ -50,7 +50,7 @@
 
         text-align: right;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__item {
         width: 1.5%;

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -8,7 +8,7 @@
     flex-direction: column;
     flex-shrink: 0;
     @include flex-container();
-    @include body2-typography();
+    @include body-2-typography();
 
     &__pdisk {
         display: flex;
@@ -18,7 +18,7 @@
         margin-bottom: 8px;
         padding: 0 10px 0 20px;
 
-        border: 1px solid var(--yc-color-line-generic);
+        border: 1px solid var(--g-color-line-generic);
         border-radius: 5px;
     }
 
@@ -54,7 +54,7 @@
         &-label {
             font-weight: 400;
 
-            color: var(--yc-color-text-secondary);
+            color: var(--g-color-text-secondary);
         }
     }
 
@@ -79,7 +79,7 @@
     &__link {
         text-decoration: none;
 
-        color: var(--yc-color-base-special);
+        color: var(--g-color-base-brand);
     }
 
     &__vdisks-header {
@@ -94,6 +94,7 @@
         overflow: auto;
 
         min-width: 200px;
+        max-width: unset;
         max-height: 90vh;
 
         .vdisk-pdisk-node__column {
@@ -109,13 +110,13 @@
         align-items: center;
 
         &_selected {
-            color: var(--yc-color-text-info);
+            color: var(--g-color-text-info);
         }
     }
 
     &__vdisk-details-button {
         &_selected {
-            color: var(--yc-color-text-info);
+            color: var(--g-color-text-info);
         }
     }
 
@@ -127,10 +128,6 @@
 
         transform: translateY(-1px);
 
-        .yc-button__text {
-            margin: 0 4px;
-        }
-
         &_hidden {
             visibility: hidden;
         }
@@ -160,15 +157,15 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 }
 
 @keyframes onSelectedVdiskAnimation {
     0% {
-        background-color: var(--yc-color-base-info-hover);
+        background-color: var(--g-color-base-info-light-hover);
     }
 }

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -143,7 +143,7 @@ function getColumns({
                     <Popover
                         placement={['right']}
                         content={<Vdisk {...row} />}
-                        contentClassName={b('vdisk-details')}
+                        tooltipContentClassName={b('vdisk-details')}
                     >
                         <Button
                             view="flat-secondary"

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -43,7 +43,7 @@ function ReduxTooltip(props) {
                 <Popup
                     open={visible}
                     placement={['top', 'bottom', 'left', 'right']}
-                    className={popupClassName}
+                    contentClassName={popupClassName}
                     anchorRef={fakeAnchor}
                     onOutsideClick={hideTooltip}
                 >

package/dist/containers/ReduxTooltip/ReduxTooltip.scss

@@ -6,8 +6,6 @@
     animation: none !important;
 }
 
-.pool-tooltip,
-.tablet-tooltip,
 .node-tootltip,
 .tabletsOverall-tooltip,
 .histogram-tooltip {
@@ -16,7 +14,7 @@
     &__label {
         padding-right: 15px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }
 
@@ -54,18 +52,3 @@
 
     word-break: break-word;
 }
-
-.tablet-tooltip {
-    padding: 10px;
-    &__label {
-        padding-right: 15px;
-
-        color: var(--yc-color-text-secondary);
-    }
-
-    &__value {
-        &_blue {
-            color: var(--yc-color-base-special);
-        }
-    }
-}

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -10,14 +10,14 @@
     display: block;
 
     min-width: 50px;
-    height: var(--yc-text-body-3-line-height);
+    height: var(--g-text-body-3-line-height);
 
     text-align: center;
 
-    color: var(--yc-color-text-primary);
-    border: $border-width solid var(--yc-color-infographics-misc-heavy);
+    color: var(--g-color-text-primary);
+    border: $border-width solid var(--g-color-base-misc-heavy);
     border-radius: $outer-border-radius;
-    background-color: var(--yc-color-infographics-misc-light);
+    background-color: var(--g-color-base-misc-light);
 
     &_compact {
         min-width: 0;
@@ -31,16 +31,16 @@
     }
 
     #{$block}__filled {
-        background-color: var(--yc-color-infographics-misc-medium);
+        background-color: var(--g-color-base-misc-medium);
     }
 
     &_green {
-        border-color: var(--yc-color-infographics-positive-heavy);
-        background-color: var(--yc-color-infographics-positive-light);
+        border-color: var(--g-color-base-positive-heavy);
+        background-color: var(--g-color-base-positive-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-positive-medium);
+            background-color: var(--g-color-base-positive-medium);
 
-            .yc-root_theme_dark & {
+            .g-root_theme_dark & {
                 // the common medium green is too bright for this case
                 background-color: rgb(124, 227, 121, 0.4);
             }
@@ -48,33 +48,33 @@
     }
 
     &_blue {
-        border-color: var(--yc-color-infographics-info-heavy);
-        background-color: var(--yc-color-infographics-info-light);
+        border-color: var(--g-color-base-info-heavy);
+        background-color: var(--g-color-base-info-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-info-medium);
+            background-color: var(--g-color-base-info-medium);
         }
     }
 
     &_yellow {
-        border-color: var(--yc-color-infographics-warning-heavy);
-        background-color: var(--yc-color-infographics-yellow-light);
+        border-color: var(--g-color-base-warning-heavy);
+        background-color: var(--g-color-base-yellow-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-yellow-medium);
+            background-color: var(--g-color-base-yellow-medium);
         }
     }
 
     &_orange {
-        border-color: var(--yc-color-base-warning-orange);
-        background-color: var(--yc-color-infographics-warning-light);
+        border-color: var(--ydb-color-status-orange);
+        background-color: var(--g-color-base-warning-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-warning-medium);
+            background-color: var(--g-color-base-warning-medium);
         }
     }
     &_red {
-        border-color: var(--yc-color-infographics-danger-heavy);
-        background-color: var(--yc-color-infographics-danger-light);
+        border-color: var(--g-color-base-danger-heavy);
+        background-color: var(--g-color-base-danger-light);
         #{$block}__filled {
-            background-color: var(--yc-color-infographics-danger-medium);
+            background-color: var(--g-color-base-danger-medium);
         }
     }
 
@@ -98,9 +98,9 @@
         position: relative;
         z-index: 2;
 
-        font-size: var(--yc-text-body-1-font-size);
+        font-size: var(--g-text-body-1-font-size);
         // bar height minus borders
-        line-height: calc(var(--yc-text-body-3-line-height) - #{$border-width * 2});
+        line-height: calc(var(--g-text-body-3-line-height) - #{$border-width * 2});
 
         color: inherit;
     }

package/dist/containers/Storage/PDisk/PDisk.scss

@@ -25,7 +25,7 @@
         flex-shrink: 0;
 
         .stack__layer {
-            background: var(--yc-color-base-background);
+            background: var(--g-color-base-background);
 
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);
@@ -45,9 +45,9 @@
         top: 0;
         right: 4px;
 
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-3-line-height);
+        font-size: var(--g-text-body-1-font-size);
+        line-height: var(--g-text-body-3-line-height);
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 }

package/dist/containers/Storage/PDiskPopup/PDiskPopup.tsx

@@ -66,7 +66,7 @@ export const PDiskPopup = ({data, nodes, ...props}: PDiskPopupProps) => {
 
     return (
         <Popup
-            className={b()}
+            contentClassName={b()}
             placement={['top', 'bottom']}
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty

package/dist/containers/Storage/Storage.scss

@@ -8,7 +8,7 @@
     &__table {
         .yc-tooltip {
             // stylelint-disable-next-line declaration-no-important
-            height: var(--yc-text-body-2-line-height) !important;
+            height: var(--g-text-body-2-line-height) !important;
         }
 
         table {

package/dist/containers/Storage/StorageGroups/StorageGroups.scss

@@ -20,7 +20,7 @@
         }
 
         .stack__layer {
-            background: var(--yc-color-base-background);
+            background: var(--g-color-base-background);
 
             .data-table__row:hover & {
                 background: var(--ydb-data-table-color-hover);

package/dist/containers/Storage/UsageFilter/UsageFilter.scss

@@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 .usage-filter {
     min-width: 100px;
 
@@ -5,10 +7,9 @@
         flex-grow: 1;
 
         &-title {
-            height: var(--yc-text-body-1-line-height);
+            height: var(--g-text-body-1-line-height);
 
-            font-size: var(--yc-text-body-1-font-size);
-            line-height: var(--yc-text-body-1-line-height);
+            @include body-1-typography();
         }
 
         &-meta {
@@ -17,8 +18,8 @@
 
             padding: 0 5px;
 
-            font-size: var(--yc-text-caption-2-font-size);
-            line-height: var(--yc-text-caption-2-line-height);
+            font-size: var(--g-text-caption-2-font-size);
+            line-height: var(--g-text-caption-2-line-height);
 
             border-radius: 3px;
         }
@@ -31,7 +32,7 @@
             left: 0;
 
             border-radius: 3px;
-            background-color: var(--yc-color-infographics-info-medium);
+            background-color: var(--g-color-base-info-medium);
         }
     }
 }

package/dist/containers/Storage/VDiskPopup/VDiskPopup.scss

@@ -5,7 +5,7 @@
         margin-top: 8px;
         padding-top: 8px;
 
-        border-top: 1px solid var(--yc-color-line-generic);
+        border-top: 1px solid var(--g-color-line-generic);
     }
 
     &__donor-label {

package/dist/containers/Storage/VDiskPopup/VDiskPopup.tsx

@@ -147,7 +147,7 @@ export const VDiskPopup = ({data, nodes, ...props}: VDiskPopupProps) => {
 
     return (
         <Popup
-            className={b()}
+            contentClassName={b()}
             placement={['top', 'bottom']}
             // bigger offset for easier switching to neighbour nodes
             // matches the default offset for popup with arrow out of a sense of beauty

package/dist/containers/Tablet/Tablet.scss

@@ -20,7 +20,7 @@
     }
     &__history-title {
         margin-bottom: 15px;
-        @include body2-typography();
+        @include body-2-typography();
     }
 
     &__placeholder {
@@ -46,10 +46,10 @@
     &__title {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 
     &__loader {
@@ -88,10 +88,10 @@
     &__top-label {
         margin-right: 16px;
 
-        font-size: var(--yc-text-body-2-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-2-line-height);
         text-transform: uppercase;
+
+        @include body-2-typography();
     }
 
     &__host {

package/dist/containers/TabletsFilters/TabletsFilters.scss

@@ -8,8 +8,7 @@
     &__node {
         overflow: hidden;
 
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
+        @include body-1-typography();
     }
 
     &__node-meta {
@@ -18,7 +17,7 @@
         white-space: nowrap;
         text-overflow: ellipsis;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &__items {

package/dist/containers/Tenant/Acl/Acl.scss

@@ -23,20 +23,6 @@
 
         padding-bottom: 16px;
 
-        background-color: var(--yc-color-base-background);
-        .yc-staff-card {
-            display: inline-block;
-        }
-    }
-
-    &__text {
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
-
-        color: var(--yc-color-text-primary);
-
-        &::first-letter {
-            color: var(--yc-color-text-danger);
-        }
+        background-color: var(--g-color-base-background);
     }
 }

package/dist/containers/Tenant/Diagnostics/Consumers/Consumers.scss

@@ -16,10 +16,6 @@
         @include search();
     }
 
-    &__table-settings .yc-icon {
-        width: 20px;
-    }
-
     &__table-wrapper {
         overflow: auto;
         @include flex-container();

package/dist/containers/Tenant/Diagnostics/Consumers/TopicStats/ConsumersTopicStats.scss

@@ -1,6 +1,7 @@
+@import '../../../../../styles/mixins.scss';
+
 .ydb-diagnostics-consumers-topic-stats {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__wrapper {
         display: flex;
@@ -8,7 +9,7 @@
 
         padding-left: 16px;
 
-        border-left: 1px solid var(--yc-color-line-generic);
+        border-left: 1px solid var(--g-color-line-generic);
     }
 
     &__item {
@@ -20,7 +21,7 @@
     &__label {
         margin-bottom: 4px;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
     &__value {
         display: flex;

package/dist/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss

@@ -23,11 +23,5 @@
         position: absolute;
         top: 23px;
         right: 13px;
-
-        & .yc-button__text {
-            display: flex;
-
-            margin: 0 4px;
-        }
     }
 }

package/dist/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -8,7 +8,7 @@
     &__header-wrapper {
         padding: 13px 20px 16px;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
 
     &__tabs {
@@ -16,7 +16,7 @@
         justify-content: space-between;
         align-items: center;
 
-        box-shadow: inset 0 -1px 0 0 var(--yc-color-line-generic);
+        box-shadow: inset 0 -1px 0 0 var(--g-color-line-generic);
         & .yc-tabs_direction_horizontal {
             box-shadow: unset;
         }

package/dist/containers/Tenant/Diagnostics/HotKeys/HotKeys.scss

@@ -9,7 +9,7 @@
 
     max-height: 100%;
 
-    background-color: var(--yc-color-base-background);
+    background-color: var(--g-color-base-background);
 
     &__table-content {
         overflow: auto;
@@ -28,7 +28,7 @@
         width: 100%;
         padding: 10px 0;
 
-        background-color: var(--yc-color-base-background);
+        background-color: var(--g-color-base-background);
     }
     &__loader {
         display: flex;

package/dist/containers/Tenant/Diagnostics/Network/Network.scss

@@ -9,8 +9,7 @@
     max-width: 1305px;
     height: 100%;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    @include body-2-typography();
 
     &__nodes-row {
         display: flex;
@@ -36,7 +35,7 @@
     &__left {
         height: 100%;
 
-        border-right: 1px solid var(--yc-color-base-generic-accent);
+        border-right: 1px solid var(--g-color-base-generic-accent);
     }
 
     &__placeholder {
@@ -74,25 +73,24 @@
     &__nodes-title {
         margin: 0 0 15px;
 
-        font-size: var(--yc-text-body-2-font-size);
-        line-height: var(--yc-text-body-2-line-height);
+        color: var(--g-color-text-secondary);
+        border-bottom: 1px solid var(--g-color-base-generic-accent);
 
-        color: var(--yc-color-text-secondary);
-        border-bottom: 1px solid var(--yc-color-base-generic-accent);
+        @include body-2-typography();
     }
 
     &__link {
         text-decoration: none;
 
-        color: var(--yc-color-base-special);
+        color: var(--g-color-base-brand);
     }
 
     &__title {
         margin: 20px 0;
 
-        font-size: var(--yc-text-body-1-font-size);
         font-weight: 500;
-        line-height: var(--yc-text-body-1-line-height);
+
+        @include body-1-typography();
     }
 
     &__checkbox-wrapper {

package/dist/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.scss

@@ -14,7 +14,7 @@
     text-align: center;
     text-transform: uppercase;
 
-    color: var(--yc-color-text-complementary);
+    color: var(--g-color-text-complementary);
     border: 1px solid transparent;
     border-radius: 4px;
 
@@ -28,27 +28,27 @@
     }
 
     &_gray {
-        background: var(--yc-color-text-secondary);
+        background: var(--ydb-color-status-grey);
     }
 
     &_black {
-        color: var(--yc-color-text-light-primary);
-        background-color: var(--yc-color-text-primary);
+        color: var(--g-color-text-light-primary);
+        background-color: var(--ydb-color-status-black);
     }
 
     &_green {
-        background-color: var(--yc-color-base-positive-heavy);
+        background-color: var(--ydb-color-status-green);
     }
 
     &_yellow {
-        background-color: var(--yc-color-base-warning-heavy);
+        background-color: var(--ydb-color-status-yellow);
     }
 
     &_red {
-        background-color: var(--yc-color-text-yandex-red);
+        background-color: var(--ydb-color-status-red);
     }
 
     &:hover {
-        border: 1px solid var(--yc-color-text-primary);
+        border: 1px solid var(--g-color-text-primary);
     }
 }