src/components/DiskStateProgressBar/DiskStateProgressBar.scss - main - githubmirror/ydb-embedded-ui

src/components/DiskStateProgressBar/DiskStateProgressBar.scss
503 строки17 KB
Konstantin Kozlov
feat: implement new Infra styles for yandex-team (#4197)
10 авг 2026, 10:44
10 авг 2026, 10:44d2f3ac1
@use '../../styles/mixins';

.storage-disk-progress-bar {
    $block: &;

    $border-width: 1px;
    $outer-border-radius: var(--disk-border-radius, var(--g-border-radius-m));
    $inner-border-radius: $outer-border-radius - $border-width;
    $outer-compact-border-radius: var(--disk-border-radius-compact, var(--g-border-radius-xs));
    $inner-compact-border-radius: $outer-compact-border-radius - $border-width;

    --progress-bar-full-height: var(--g-text-subheader-2-line-height);
    --progress-bar-compact-height: 12px;
    --ydb-progress-bar-font-color: var(--g-color-text-primary);

    --stripe-width: 4px;
    --stripe-step: 8px;

    position: relative;
    z-index: 0;

    overflow: hidden;

    min-width: 50px;
    height: var(--progress-bar-full-height);

    text-align: center;

    color: var(--g-color-text-primary);
    border: $border-width solid var(--entity-state-border-color);
    border-radius: $outer-border-radius;
    background-color: var(--entity-state-background-color);

    @include mixins.entity-state-colors($block);

    // SolidRed severity (6): solid red background for critical errors in State mode
    &_solidred {
        --entity-state-font-color: var(--g-color-text-light-primary);
        --entity-state-border-color: var(--g-color-base-danger-heavy);
        --entity-state-background-color: var(--g-color-base-danger-heavy);
        --entity-state-fill-color: var(--g-color-base-danger-heavy);
        --entity-state-icon-color: var(--g-color-text-light-primary);
        --entity-state-stripe-color: var(--g-color-text-dark-hint);

        &#{$block}_highlighted {
            --entity-state-background-color: var(--g-color-base-danger-heavy-hover);
            --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
        }
    }

    &_expert-mode {
        --entity-state-compact-background-color: var(--entity-state-background-color);

        &#{$block}_grey {
            --entity-state-background-color: var(--g-color-base-neutral-light);
            --entity-state-border-color: var(--g-color-line-generic);
            --entity-state-icon-color: rgba(162, 162, 162, 1);

            &#{$block}_highlighted {
                --entity-state-background-color: var(--g-color-base-neutral-light-hover);
            }
        }
    }

    &_legend-inactive {
        border: none;
    }

    &_overlap-icon-at-top-left {
        overflow: visible;
    }

    // State mode: specific visual variants
    &_mode-state {
        // OK state
        &#{$block}_green {
            --entity-state-border-color: var(--g-color-base-positive-medium);
        }

        // Initial state
        &#{$block}_yellow {
            --entity-state-border-color: var(--g-color-base-warning-medium);
            --entity-state-icon-color: var(--g-color-text-warning-heavy);
        }

        // PDisk Error
        &#{$block}_red {
            --entity-state-background-color: var(--g-color-base-danger-medium);
            --entity-state-border-color: var(--g-color-base-danger-heavy);
        }
    }

    &_mode-all {
        &#{$block}_green {
            --entity-state-background-color: transparent;
            --entity-state-border-color: var(--g-color-base-positive-medium);
            --entity-state-fill-color: var(--g-color-base-positive-light);

            &#{$block}_all-mode-has-issues {
                --entity-state-fill-color: var(--g-color-base-positive-medium);
                --entity-state-border-color: var(--g-color-line-positive);
            }

            &#{$block}_highlighted {
                --entity-state-border-color: var(--g-color-line-positive);
                --entity-state-background-color: var(--entity-state-fill-color);
            }
        }

        &#{$block}_yellow {
            --entity-state-background-color: transparent;
            --entity-state-border-color: var(--g-color-line-warning);
            --entity-state-icon-color: var(--g-color-base-warning-heavy);
            --entity-state-fill-color: var(--g-color-base-warning-light);

            &#{$block}_highlighted {
                --entity-state-border-color: var(--g-color-line-warning);
                --entity-state-icon-color: var(--g-color-base-warning-heavy);
                --entity-state-background-color: var(--entity-state-fill-color);
            }
        }

        &#{$block}_red {
            --entity-state-background-color: transparent;
            --entity-state-border-color: var(--g-color-line-danger);
            --entity-state-icon-color: var(--g-color-base-danger-heavy);
            --entity-state-fill-color: var(--g-color-base-danger-light);

            &#{$block}_highlighted {
                --entity-state-border-color: var(--g-color-line-danger);
                --entity-state-icon-color: var(--g-color-base-danger-heavy);
                --entity-state-background-color: var(--entity-state-fill-color);
            }
        }

        &#{$block}_solidred {
            --entity-state-background-color: var(--g-color-base-danger-medium);
            --entity-state-fill-color: var(--g-color-base-danger-heavy);
            --entity-state-border-color: var(--g-color-base-danger-heavy);
            --entity-state-icon-color: var(--g-color-text-primary);

            &#{$block}_highlighted {
                --entity-state-background-color: var(--g-color-base-danger-medium-hover);
                --entity-state-fill-color: var(--g-color-base-danger-heavy-hover);
                --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
            }
        }

        &#{$block}_grey {
            --entity-state-background-color: var(--g-color-base-neutral-medium);
            --entity-state-border-color: none;
            --entity-state-fill-color: var(--g-color-base-neutral-medium);

            border: none;

            &#{$block}_highlighted {
                --entity-state-background-color: var(--g-color-base-neutral-medium-hover);
                --entity-state-border-color: none;
                --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);

                border: none;
            }
        }

        #{$block}__fill-bar {
            border-radius: calc(var(--disk-border-radius, var(--g-border-radius-m)) - 1px) 0 0
                calc(var(--disk-border-radius, var(--g-border-radius-m)) - 1px);
        }

        #{$block}__icon_overlap-top-left {
            background-image: radial-gradient(
                circle,
                var(--g-color-base-background) 0 calc(50% - 1px),
                transparent calc(50% - 1px)
            );
        }
    }

    &_mode-space {
        &:not(#{$block}_legend-inactive):not(#{$block}_darkgrey) {
            --entity-state-stripe-border-color: var(--entity-state-border-color);
        }

        &#{$block}_green {
            --entity-state-border-color: var(--g-color-line-positive);
            --ydb-progress-bar-font-color: var(--g-color-text-positive-heavy);
        }

        &#{$block}_spacecyan {
            --entity-state-background-color: var(--ydb-space-cyan-bg);
            --entity-state-border-color: var(--ydb-space-cyan-text);
            --ydb-progress-bar-font-color: var(--ydb-space-cyan-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-cyan-bg-hover);
            }
        }

        &#{$block}_spacelightyellow {
            --entity-state-background-color: var(--ydb-space-light-yellow-bg);
            --entity-state-border-color: var(
                --ydb-space-light-yellow-border,
                var(--ydb-space-light-yellow-text)
            );
            --entity-state-stripe-color: var(--ydb-space-light-yellow-stripe);
            --ydb-progress-bar-font-color: var(--ydb-space-light-yellow-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-light-yellow-bg-hover);
                --entity-state-stripe-color: var(--ydb-space-light-yellow-stripe-hover);
            }
        }

        &#{$block}_yellow {
            --entity-state-border-color: var(--g-color-text-warning-heavy);
            --ydb-progress-bar-font-color: var(--g-color-text-warning-heavy);
        }

        &#{$block}_spacelightorange {
            --entity-state-background-color: var(--ydb-space-light-orange-bg);
            --entity-state-border-color: var(--ydb-space-light-orange-text);
            --ydb-progress-bar-font-color: var(--ydb-space-light-orange-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-light-orange-bg-hover);
            }
        }

        &#{$block}_spacepreorange {
            --entity-state-background-color: var(--ydb-space-pre-orange-bg);
            --entity-state-border-color: var(--ydb-space-pre-orange-text);
            --ydb-progress-bar-font-color: var(--ydb-space-pre-orange-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-pre-orange-bg-hover);
            }
        }

        &#{$block}_spaceorange {
            --entity-state-background-color: var(--ydb-space-orange-bg);
            --entity-state-border-color: var(--ydb-space-orange-text);
            --ydb-progress-bar-font-color: var(--ydb-space-orange-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-orange-bg-hover);
            }
        }

        &#{$block}_red {
            --entity-state-border-color: var(--g-color-base-danger-heavy);
            --ydb-progress-bar-font-color: var(--g-color-base-danger-heavy);
        }

        &#{$block}_spaceblack {
            --entity-state-background-color: var(--ydb-space-black-bg);
            --entity-state-border-color: var(--ydb-space-black-border);
            --ydb-progress-bar-font-color: var(--ydb-space-black-text);
            &#{$block}_highlighted {
                --entity-state-background-color: var(--ydb-space-black-bg-hover);
                --entity-state-border-color: var(--ydb-space-black-border-hover);
            }
        }
    }

    &_mode-frontqueues {
        &:not(#{$block}_solidred):not(#{$block}_darkgrey) {
            --entity-state-stripe-color2: var(--g-color-base-background);
            --entity-state-stripe-border-color: var(--entity-state-border-color);
        }

        &#{$block}_green {
            --entity-state-border-color: var(--g-color-line-positive);
        }

        &#{$block}_yellow {
            --entity-state-border-color: var(--g-color-line-warning);
            --entity-state-icon-color: var(--g-color-text-warning-heavy);
        }

        &#{$block}_red {
            --entity-state-border-color: var(--g-color-line-danger);
            --entity-state-icon-color: var(--g-color-text-danger);
        }
    }

    &_mode-compaction {
        --entity-state-background-color: transparent;

        &:not(#{$block}_darkgrey) {
            --entity-state-stripe-color: var(--g-color-base-neutral-light);
            --entity-state-stripe-border-color: var(--entity-state-border-color);

            &#{$block}_highlighted {
                --entity-state-stripe-color: var(--entity-state-background-color);
            }
        }

        &#{$block}_green {
            --entity-state-border-color: var(--g-color-line-positive);
            --entity-state-icon-color: var(--g-color-text-positive);
        }

        &#{$block}_yellow {
            --entity-state-border-color: var(--g-color-line-warning);
            --entity-state-icon-color: var(--g-color-text-warning);
        }

        &#{$block}_red {
            --entity-state-border-color: var(--g-color-line-danger);
            --entity-state-icon-color: var(--g-color-text-danger);
        }
    }

    &_compact {
        min-width: 8px;
        height: var(--progress-bar-compact-height);

        border-radius: $outer-compact-border-radius;
        background-color: var(
            --entity-state-compact-background-color,
            var(--entity-state-fill-color)
        );
    }

    &_faded {
        background-color: unset;
    }

    &_inactive {
        opacity: 0.5;
    }

    &_empty {
        color: var(--g-color-text-hint);
        border-style: dashed;
        background-color: unset;
    }

    &_striped {
        --entity-state-icon-color: var(--g-color-base-neutral-heavy-hover);
        overflow: hidden;
        // Inset shadow = border overlay without shrinking the striped fill
        border: none;
        background-color: var(--entity-state-stripe-background-color, transparent);
        background-image: repeating-linear-gradient(
            135deg,
            var(--entity-state-stripe-color, var(--entity-state-background-color)) 0,
            var(--entity-state-stripe-color, var(--entity-state-background-color))
                var(--stripe-width),
            var(--entity-state-stripe-color2, transparent) var(--stripe-width),
            var(--entity-state-stripe-color2, transparent) var(--stripe-step)
        );
        box-shadow: 0 0 0 $border-width
            var(--entity-state-stripe-border-color, var(--entity-state-shadow-color)) inset;

        &#{$block}_solidred {
            --entity-state-stripe-color: var(--g-color-text-dark-hint);
            --entity-state-stripe-color2: transparent;
            --entity-state-icon-color: var(--g-color-text-light-primary);
            background-color: var(--entity-state-background-color);
            box-shadow: none;
        }
    }

    &__fill-bar {
        position: absolute;
        top: 0;
        left: 0;

        height: 100%;

        border-radius: $inner-border-radius 0 0 $inner-border-radius;
        background-color: var(--entity-state-fill-color);

        &_faded {
            // Bg color is light variant, use it to make bar less bright
            background-color: var(--entity-state-background-color);
        }

        &_compact {
            border-radius: $inner-compact-border-radius;
        }

        &_inverted {
            right: 0;
            left: auto;

            border-radius: 0 $inner-border-radius $inner-border-radius 0;
        }
    }

    &__all-mode-indicators {
        position: absolute;
        z-index: 2;
        inset: 0;

        display: grid;
        align-items: center;
        grid-template-columns: 16px 12px 17px;
        column-gap: var(--g-spacing-1);

        box-sizing: border-box;
        padding-inline: calc(var(--g-spacing-1) - $border-width);

        pointer-events: none;

        #{$block}_grey &,
        #{$block}_striped & {
            padding-inline: var(--g-spacing-1);
        }
    }

    &__all-mode-capacity-alert-indicator-slot {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    &__all-mode-capacity-alert-indicator-icon {
        color: rgba(162, 162, 162, 1);
    }

    &__all-mode-front-queues-indicator-slot {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        color: var(--g-color-text-primary);
    }

    &__all-mode-compaction-indicator-slot {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    &__title {
        position: relative;
        z-index: 2;

        margin-right: var(--g-spacing-1);

        font-family: var(--g-text-caption-font-family);
        font-size: var(--g-text-caption-1-font-size);
        // bar height minus borders
        line-height: calc(var(--progress-bar-full-height) - #{$border-width * 2});

        color: var(--ydb-progress-bar-font-color);

        &_text {
            margin-right: var(--g-spacing-1);
        }

        &_compact {
            margin-right: auto;
            margin-left: var(--g-spacing-1);
        }
    }

    &__icon-group {
        position: relative;
        z-index: 2;

        display: inline-flex;
        align-items: center;

        margin-left: calc(var(--g-spacing-1) - $border-width);

        // Icons inside group don't have individual margin-left
        #{$block}__icon {
            margin-left: 0;

            &_overlapped {
                // Second icon overlaps the first by 3px
                margin-left: -3px;
            }
        }
    }

    &__icon {
        position: relative;
        z-index: 2;

        margin-left: calc(var(--g-spacing-1) - $border-width);

        color: var(--entity-state-icon-color, var(--entity-state-border-color));

        &_overlap-top-left {
            position: absolute;
            z-index: 3;
            top: -6px;
            left: -4px;

            margin-left: 0;
        }
    }

    &__text-label {
        position: relative;
        z-index: 2;

        margin-left: var(--g-spacing-1);

        font-size: var(--g-text-caption-2-font-size);

        color: var(--ydb-progress-bar-font-color, var(--entity-state-border-color));
    }
}