css/themes/consta-light.css - master - Starolat/DeepDive

css/themes/consta-light.css
145 строк7 KB
Starolat Sergei
chore: sync project state for Gitverse
16 июн 2026, 16:06
16 июн 2026, 16:061cb951e
/* --- DeepDive Analytics: Consta Light Theme --- */
/* Дизайн-система Consta (Газпром нефть) - светлая тема */
/* https://consta.design */

:root {
    /* ===== Базовые цвета Consta ===== */
    --consta-base-base: #002033;        /* Базовый цвет содержимого */
    --consta-base-essential: #fff;      /* Базовый цвет поверхностей */
    --consta-base-project: #0071b2;     /* Проектный цвет */
    --consta-base-phantom: #004269;     /* Тонирующий цвет */
    --consta-base-path: #0078d2;        /* Цвет ссылок и контролов */
    --consta-base-system: #ced8de;      /* Системный цвет */
    --consta-base-shadow: #002033;      /* Цвет тени */
    
    /* Системные цвета */
    --consta-success: #22c38e;
    --consta-alert: #eb5757;
    --consta-warning: #f38b00;
    --consta-caution: #f2c94c;
    --consta-normal: #56b9f2;
    --consta-critical: #33000f;

    /* ===== Фоны (Backgrounds) ===== */
    --primary-bg: #fff;                                          /* color-bg-default */
    --surface-bg: #fff;                                          /* color-bg-default */
    --surface-hover: rgba(0, 66, 105, 0.07);                     /* color-control-bg-ghost */
    --surface-secondary: rgba(0, 113, 178, 0.08);                /* color-bg-secondary */
    --surface-ghost: rgba(0, 66, 105, 0.07);                     /* color-bg-ghost */
    
    /* Границы */
    --border-color: rgba(0, 66, 105, 0.25);                      /* color-control-bg-border-default */
    --border-color-hover: rgba(0, 66, 105, 0.52);                /* color-control-bg-border-default-hover */
    --border-light: rgba(0, 66, 105, 0.2);                       /* color-bg-border */
    --border-focus: #0078d2;                                     /* color-control-bg-border-focus */
    --panel-border-color: rgba(0, 66, 105, 0.12);                /* Менее яркие границы для панелей */
    
    /* ===== Текст (Typography) ===== */
    --text-primary: #002033;                                     /* color-typo-primary */
    --text-primary-color: #002033;
    --text-secondary: rgba(0, 32, 51, 0.6);                      /* color-typo-secondary */
    --text-secondary-color: rgba(0, 32, 51, 0.6);
    --text-tertiary: rgba(0, 32, 51, 0.3);                       /* color-typo-ghost */
    --text-ghost: rgba(0, 32, 51, 0.3);
    --text-brand: #0071b2;                                       /* color-typo-brand */
    --text-link: #0078d2;                                        /* color-typo-link */
    --text-link-hover: #0078d2;                                  /* color-typo-link-hover */
    
    /* ===== Акценты ===== */
    --accent-color: #0078d2;                                     /* color-base-path */
    --accent-hover: #3394dd;                                     /* Осветлённый path */
    --accent-color-hover: #3394dd;
    --accent-light: rgba(0, 120, 210, 0.15);
    --accent-color-light: rgba(0, 120, 210, 0.15);
    --accent-bg: rgba(0, 120, 210, 0.1);
    --accent-dim: #0071b2;
    
    /* Фокус и активные состояния */
    --focus-bg: rgba(0, 120, 210, 0.3);                          /* color-control-bg-focus */
    --active-bg: rgba(0, 120, 210, 0.5);                         /* color-control-bg-active */
    
    /* ===== Статусы ===== */
    --success-color: #22c38e;
    --success-bg: rgba(34, 195, 142, 0.12);
    --success-color-hover: #1ba87a;
    
    --warning-color: #f38b00;
    --warning-bg: rgba(243, 139, 0, 0.12);
    --warning-color-hover: #d47600;
    
    --error-color: #eb5757;
    --error-color-hover: #d34040;
    --error-bg: rgba(235, 87, 87, 0.12);
    
    --caution-color: #f2c94c;
    --caution-bg: rgba(242, 201, 76, 0.12);
    
    --info-color: #56b9f2;
    --info-bg: rgba(86, 185, 242, 0.12);
    
    --normal-color: #56b9f2;
    --normal-bg: rgba(86, 185, 242, 0.12);
    
    --critical-color: #33000f;
    --critical-bg: rgba(51, 0, 15, 0.12);
    
    /* ===== Системные цвета ===== */
    --system-color: #ced8de;
    --system-bg: rgba(206, 216, 222, 0.5);
    
    /* ===== Тени ===== */
    --shadow-sm: 0 2px 4px rgba(0, 32, 51, 0.02), 0 4px 8px rgba(0, 32, 51, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 32, 51, 0.04), 0 8px 16px rgba(0, 32, 51, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 32, 51, 0.08), 0 16px 32px rgba(0, 32, 51, 0.16);
    --shadow-glow: 0 0 0 3px rgba(0, 120, 210, 0.3);
    --box-shadow: var(--shadow-sm);
    
    /* ===== Скроллбар ===== */
    --scroll-bg: rgba(0, 66, 105, 0.06);
    --scroll-thumb: rgba(0, 66, 105, 0.24);
    --scroll-thumb-hover: rgba(0, 66, 105, 0.32);
    
    /* ===== Модальные окна ===== */
    --modal-overlay-bg: rgba(6, 20, 25, 0.85);  /* color-bg-tone из Consta */
    
    /* ===== Скругления (Radius) ===== */
    --radius-xs: 2px;
    --radius-s: 4px;
    --radius-m: 8px;
    
    /* ===== Report Widgets (Отчётные виджеты) ===== */
    --report-widget-bg: #2f5597;
    --report-widget-border: rgba(255, 255, 255, 0.2);
    --report-text-primary: #ffffff;
    --report-text-secondary: rgba(255, 255, 255, 0.85);
    --report-status-positive-bg: #dcfce7;
    --report-status-positive-text: #166534;
    --report-status-negative-bg: #fee2e2;
    --report-status-negative-text: #991b1b;
    --report-value-positive: #bbf7d0;
    --report-value-negative: #fecaca;
    
    /* ===== Цвета графиков План / Факт / Прогноз ===== */
    --chart-plan-color: #2f5597;
    --chart-fact-color: #8faadc;
    --chart-forecast-color: #b0b8c0;
    --chart-trend-color: #f38b00;
    --chart-trend-forecast-color: #9b59b6;
    --chart-outlier-color: #eb5757;
    --chart-confidence-color: rgba(243, 139, 0, 0.15);
    
    /* ===== Consta Base Color Aliases ===== */
    --color-base-base: var(--consta-base-base);
    --color-base-essential: var(--consta-base-essential);
    --color-base-project: var(--consta-base-project);
    --color-base-phantom: var(--consta-base-phantom);
    --color-base-path: var(--consta-base-path);
    --color-base-system: var(--consta-base-system);
    --color-base-shadow: var(--consta-base-shadow);
    --color-base-success: var(--consta-success);
    --color-base-alert: var(--consta-alert);
    --color-base-warning: var(--consta-warning);
    --color-base-caution: var(--consta-caution);
    --color-base-normal: var(--consta-normal);
    --color-base-critical: var(--consta-critical);
}