Платформа 3V/Навигатор/Темы навигатора: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
 
(не показано 13 промежуточных версий 2 участников)
Строка 19: Строка 19:
  
 
== Темы по умолчанию ==
 
== Темы по умолчанию ==
−
В навигаторе описаны 3 темы по умолчанию:
+
По умолчанию описаны 3 темы:
 
* Стандартная (default)
 
* Стандартная (default)
 
* Классическая (gray)
 
* Классическая (gray)
Строка 70: Строка 70:
 
{| class="wikitable"
 
{| class="wikitable"
 
|-
 
|-
−
! Свойство !! Значение(из темы default) !! Описание
+
! style="min-width: 210px" | Свойство !! Значение(из темы default) !! style="min-width: 250px" | Описание
 
|-
 
|-
 
| --font-size || "14px" ||  
 
| --font-size || "14px" ||  
Строка 97: Строка 97:
 
|-
 
|-
 
| --warning-color || "#f08513" ||  
 
| --warning-color || "#f08513" ||  
 +
|-
 +
| --expander-color || "rgba(var(--main-color-rgb), 0.6)" ||
 +
|-
 +
| colspan="3" | '''UI'''
 
|-
 
|-
 
| --padding || "8px" ||  
 
| --padding || "8px" ||  
Строка 117: Строка 121:
 
|-
 
|-
 
| --active-bg || "rgba(var(--accent-color-rgb), 0.1)" ||  
 
| --active-bg || "rgba(var(--accent-color-rgb), 0.1)" ||  
 +
|-
 +
| --btn-primary-hover || "#107adb" ||
 +
|-
 +
| --btn-primary-active || "#0e6dc4" ||
 
|-
 
|-
 
| --border-color || "#e4ecf3" ||  
 
| --border-color || "#e4ecf3" ||  
 
|-
 
|-
 
| --border-disabled-color || "#80b3ee" ||  
 
| --border-disabled-color || "#80b3ee" ||  
 +
|-
 +
| colspan="3" | '''Tree'''
 
|-
 
|-
 
| --treeItem-current-color || "var(--hover-bg)" ||  
 
| --treeItem-current-color || "var(--hover-bg)" ||  
Строка 127: Строка 137:
 
|-
 
|-
 
| --treeItem-hover-color || "var(--hover-bg)" ||  
 
| --treeItem-hover-color || "var(--hover-bg)" ||  
 +
|-
 +
| colspan="3" | '''Sidebar'''
 
|-
 
|-
 
| --sidebar-bg || "var(--background-color)" ||  
 
| --sidebar-bg || "var(--background-color)" ||  
Строка 143: Строка 155:
 
|-
 
|-
 
| --sidebar-input-color || "rgb(var(--sidebar-input-color-rgb))" ||  
 
| --sidebar-input-color || "rgb(var(--sidebar-input-color-rgb))" ||  
 +
|-
 +
| colspan="3" | '''Scrollbar'''
 
|-
 
|-
 
| --scrollbar-color-rgb || "var(--main-color-rgb)" ||  
 
| --scrollbar-color-rgb || "var(--main-color-rgb)" ||  
Строка 151: Строка 165:
 
|-
 
|-
 
| --scrollbar-padding || "4px" ||  
 
| --scrollbar-padding || "4px" ||  
 +
|-
 +
| colspan="3" | '''Icon'''
 
|-
 
|-
 
| --icon-color-rgb || "var(--main-color)" ||  
 
| --icon-color-rgb || "var(--main-color)" ||  
 
|-
 
|-
 
| --icon-color || "rgb(var(--icon-color-rgb))" ||  
 
| --icon-color || "rgb(var(--icon-color-rgb))" ||  
 +
|-
 +
| colspan="3" | '''Input'''
 
|-
 
|-
 
| --input-bg || "var(--background-color)" ||  
 
| --input-bg || "var(--background-color)" ||  
Строка 165: Строка 183:
 
|-
 
|-
 
| --object-bg || "var(--background-color)" ||  
 
| --object-bg || "var(--background-color)" ||  
 +
|-
 +
| colspan="3" | '''Images'''
 
|-
 
|-
 
| --img-home-bg || "url(~@bsc/trv-theme/images/white-theme/layout/logo-background.svg) bottom right no-repeat / 500px 415px" ||  
 
| --img-home-bg || "url(~@bsc/trv-theme/images/white-theme/layout/logo-background.svg) bottom right no-repeat / 500px 415px" ||  
Строка 231: Строка 251:
 
|-
 
|-
 
| --img-checkbox-falsechecked-hover || "url(~@bsc/trv-theme/images/white-theme/icons/ui/falsechecked_hover.svg)" ||  
 
| --img-checkbox-falsechecked-hover || "url(~@bsc/trv-theme/images/white-theme/icons/ui/falsechecked_hover.svg)" ||  
 +
|-
 +
| --img-checkbox-unchecked-disabled || "var(--img-checkbox-unchecked)" ||
 +
|-
 +
| colspan="3" | '''Tabs'''
 
|-
 
|-
 
| --tabs-bg || "#eef2f8" ||  
 
| --tabs-bg || "#eef2f8" ||  
 +
|-
 +
| colspan="3" | '''Checkbox'''
 
|-
 
|-
 
| --checkbox-color || "#fff" ||  
 
| --checkbox-color || "#fff" ||  
 
|-
 
|-
 
| --checkbox-border || "var(--border-color)" ||  
 
| --checkbox-border || "var(--border-color)" ||  
 +
|-
 +
| colspan="3" | '''Button'''
 
|-
 
|-
 
| --btn-bg || "var(--accent-color)" ||  
 
| --btn-bg || "var(--accent-color)" ||  
Строка 247: Строка 275:
 
|-
 
|-
 
| --btn-default-bordercolor || "var(--border-color)" ||  
 
| --btn-default-bordercolor || "var(--border-color)" ||  
 +
|-
 +
| colspan="3" | '''Dropzone remove'''
 
|-
 
|-
 
| --remove-zone-border || "#f59e9e" ||  
 
| --remove-zone-border || "#f59e9e" ||  
Строка 253: Строка 283:
 
|-
 
|-
 
| --remove-zone-bg-darken || "#ffcbcb" ||  
 
| --remove-zone-bg-darken || "#ffcbcb" ||  
 +
|-
 +
| colspan="3" | '''Grid/Pivot'''
 
|-
 
|-
 
| --grid-border-color || "#e5ecf3" ||  
 
| --grid-border-color || "#e5ecf3" ||  
Строка 273: Строка 305:
 
|-
 
|-
 
| --grid-tr-color || "var(--main-color)" ||  
 
| --grid-tr-color || "var(--main-color)" ||  
 +
|-
 +
| --grid-scrollbar-size || "18px" ||
 +
|-
 +
| --grid-scrollbar-padding || "4px" ||
 +
|-
 +
| colspan="3" | '''Home'''
 
|-
 
|-
 
| --home-title-color || "var(--main-color)" ||  
 
| --home-title-color || "var(--main-color)" ||  
Строка 279: Строка 317:
 
|-
 
|-
 
| --home-hover-bg || "var(--hover-bg)" ||  
 
| --home-hover-bg || "var(--hover-bg)" ||  
 +
|-
 +
| colspan="3" | '''ACE(json/html) editor'''
 +
|-
 +
| --ace-print-margin || "#ebebeb" ||
 +
|-
 +
| --ace-gutter-active-line || "#dadada" ||
 +
|-
 +
| --ace-selection || "#b5d5ff" ||
 +
|-
 +
| --ace-active-line || "#e8f2fe" ||
 +
|-
 +
| --ace-string || "#2a00ff" ||
 +
|-
 +
| --ace-numeric || "#00008b" ||
 +
|-
 +
| --ace-variable || "#7f0055" ||
 +
|-
 +
| --ace-type || "#7f007f" ||
 +
|-
 +
| --ace-class || "var(--main-color)" ||
 +
|-
 +
| --ace-constant || "var(--main-color)" ||
 +
|-
 +
| --ace-keyword || "#7f0055" ||
 +
|-
 +
| --ace-gutter-color || "#888888" ||
 +
|-
 +
| --ace-cursor || "black" ||
 +
|-
 +
| --ace-step || "#ffff00" ||
 +
|-
 +
| --ace-bracket-border-color || "#c0c0c0" ||
 +
|-
 +
| --ace-selected-word-border-color || "#b5d5ff" ||
 +
|-
 +
| --ace-fold-border-color || "black" ||
 +
|-
 +
| --ace-fold-background-color || "#3c4c72" ||
 +
|-
 +
| --ace-escape || "var(--main-color)" ||
 +
|-
 +
| --ace-other || "var(--main-color)" ||
 +
|-
 +
| --ace-function || "#3c4c72" ||
 +
|-
 +
| --ace-attribute-name || "#7f007f" ||
 +
|-
 +
| --ace-invalid-color || "var(--main-color)" ||
 +
|-
 +
| --ace-invalid-background-color || "transparent" ||
 +
|-
 +
| --ace-invalid-deprecated-background-color || "transparent" ||
 +
|-
 +
| --ace-comment || "#719682" ||
 +
|-
 +
| --ace-invisible || "#ddd" ||
 +
|-
 +
| --ace-variable-parameter || "var(--main-color)" ||
 +
|-
 +
| --ace-tag || "#197674" ||
 +
|-
 +
| --ace-indent-guide || style="word-break: break-all;" | "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==) right repeat-y" ||
 +
|-
 +
| --ace-info || style="word-break: break-all;" | "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAB2k804AAAAPklEQVQY02NgIB68QuO3tiLznjAwpKTgNyDbMegwisCHZUETUZV0ZqOquBpXj2rtnpSJT1AEnnRmL2OgGgAAIKkRQap2htgAAAAASUVORK5CYII=)" ||
 +
|-
 +
| --ace-fold-widget || style="word-break: break-all;" | "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42mWKsQ0AMAzC8ixLlrzQjzmBiEjp0A6WwBCSPgKAXoLkqSot7nN3yMwR7pZ32NzpKkVoDBUxKAAAAABJRU5ErkJggg==)" ||
 +
|-
 +
| --ace-fold-widget-closed || style="word-break: break-all;" | "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAOUlEQVR42jXKwQkAMAgDwKwqKD4EwQ26sSOkVWjgIIHAzPiCgaqiqnJHZnKICBERHN194O5b9vbLuAVRL+l0YWnZAAAAAElFTkSuQmCCXA==)" ||
 
|}
 
|}
 +
 +
== Настройка оформления строки с фокусной ячейкой и самой фокусной ячейки ==
 +
Чтобы задать кастомное оформление для строки с фокусной ячейкой или самой фокусной ячейки нужно в теме задать css-переменные вида:
 +
 +
--grid-focused-row-ИМЯ-CSS-СВОЙСТВА (для оформления строки с фокусной ячейкой)
 +
 +
--grid-focused-cell-ИМЯ-CSS-СВОЙСТВА (для оформления фокусной ячейки)
 +
 +
например:<br/>
 +
<syntaxhighlight lang="CSS">
 +
'--grid-focused-row-background-color': 'green',
 +
'--grid-focused-row-color': 'magenta',
 +
'--grid-focused-cell-border-color': 'red',
 +
'--grid-focused-cell-color': 'blue',
 +
'--grid-focused-cell-background-color': 'yellow'
 +
</syntaxhighlight>
  
 
== Примечания ==
 
== Примечания ==

Текущая версия на 14:20, 20 апреля 2021


Тема

Тема это объект представляющий из себя следующие свойства:

Свойство Описание
name Идентификатор/имя темы (по которому в дальнейшем тему можно применить)
title Наименование темы для комбобокса выбора темы
properties Справочник/мапа css-переменных, содержание темы
parent Ссылка на родительскую тему, таким образом текущая тема может доопределять/переопределять css-переменные родительской темы
parentName Тоже что parent, но возможность задать родительскую тему через ее имя

Темы по умолчанию

По умолчанию описаны 3 темы:

  • Стандартная (default)
  • Классическая (gray)
  • Тёмная (black)

Добавление кастомной темы

Есть две возможности добавления кастомных тем:

  • В прикладном коде (работает для случая прикладного приложения использующего компоненты навигатора, но не для самого навигатора)
  • В конфиге веб-приложения (работает и для навигатора и для прикладного приложения)

Добавление кастомной темы в прикладном коде

import { Theme, themeGray, ThemeService } from '@bsc/common-ui';

  constructor(private themeService: ThemeService) {}

  initTheme() {
    const customTheme: Theme = {
      name: 'testCodeTheme',
      parent: themeGray,
      properties: {
        '--img-cell-pattern': 'none'
      },
    };
    this.themeService.addAvailableTheme(customTheme);
    this.themeService.setActiveTheme(customTheme);
  }

Добавление кастомной темы в конфиге веб-приложения

В конфиг веб-приложения добавлен блок theme. Здесь в свойстве "additionalThemes" можно задать набор тем. А также задать тему по умолчанию "defaultThemeName". 

  "theme": {
    "defaultThemeName": "testConfigTheme",
    "additionalThemes": [
      {
        "name": "testConfigTheme",
        "parentName": "gray",
        "properties": {
          "--img-cell-pattern": "none"
        }
      }
    ]
  }

Описание css-переменных темы

Поскольку тема реализована через css-переменные, то ссылаться на значения других переменных можно через var(--имя_переменной), имена css-переменных всегда начинаются с --

Свойство Значение(из темы default) Описание
--font-size "14px"
--font-size-small "12px"
--regular "var(--font-size) 'Roboto', sans-serif"
--black "#000"
--white "#fff"
--background-color-rgb 255, 255, 255
--background-color "rgb(var(--background-color-rgb))"
--main-color-rgb 41, 53, 65
--main-color "rgb(var(--main-color-rgb))"
--sub-color "#697c8e"
--readonly-color "#8798a9"
--error-color "#f37575"
--warning-color "#f08513"
--expander-color "rgba(var(--main-color-rgb), 0.6)"
UI
--padding "8px"
--border-radius "4px"
--transition "0.3s"
--transparent-color-rgb "var(--main-color-rgb)"
--transparent-color "rgb(var(--transparent-color-rgb))"
--accent-color-rgb 23, 135, 238
--accent-color "rgb(var(--accent-color-rgb))"
--label-color "#8798a9"
--hover-bg "rgba(var(--accent-color-rgb), 0.06)"
--active-bg "rgba(var(--accent-color-rgb), 0.1)"
--btn-primary-hover "#107adb"
--btn-primary-active "#0e6dc4"
--border-color "#e4ecf3"
--border-disabled-color "#80b3ee"
Tree
--treeItem-current-color "var(--hover-bg)"
--treeItem-checked-color "var(--treeItem-current-color)"
--treeItem-hover-color "var(--hover-bg)"
Sidebar
--sidebar-bg "var(--background-color)"
--sidebar-bg-lighten "#fff"
--sidebar-border "var(--border-color)"
--sidebar-separator-bg "var(--sidebar-border)"
--sidebar-input-bg "var(--background-color)"
--sidebar-input-border "var(--border-color)"
--sidebar-input-color-rgb "var(--main-color-rgb)"
--sidebar-input-color "rgb(var(--sidebar-input-color-rgb))"
Scrollbar
--scrollbar-color-rgb "var(--main-color-rgb)"
--scrollbar-color "rgb(var(--scrollbar-color-rgb))"
--scrollbar-size "14px"
--scrollbar-padding "4px"
Icon
--icon-color-rgb "var(--main-color)"
--icon-color "rgb(var(--icon-color-rgb))"
Input
--input-bg "var(--background-color)"
--input-color "var(--main-color)"
--input-border "var(--border-color)"
--input-padding "var(--padding)"
--object-bg "var(--background-color)"
Images
--img-home-bg "url(~@bsc/trv-theme/images/white-theme/layout/logo-background.svg) bottom right no-repeat / 500px 415px"
--img-home-bg-filter "grayscale(1)"
--img-home-logo "url(~@bsc/trv-theme/images/new-design/logo-big.png) center center no-repeat"
--img-home-logo-w "414px"
--img-home-logo-h "100px"
--img-bin "url(~@bsc/trv-theme/images/white-theme/icons/ui/bin-big.svg)"
--img-area-empty "url(~@bsc/trv-theme/images/constructor/empty.svg)"
--img-refresh-area "url(~@bsc/trv-theme/images/white-theme/icons/ui/refresh.svg)" обновить отчет (при изменении параметров)
--img-no-active-area "url(~@bsc/trv-theme/images/constructor/noActiveArea.svg)" пустой(еще не настроенный) отчет
--img-no-active-area-indicators "url(~@bsc/trv-theme/images/constructor/Indicators.svg)" пустой(еще не настроенный) показатель
--img-loader-gif "url(~@bsc/trv-theme/images/loader/trivium.gif)" индикатор загрузки
--img-cell-loader "url(~@bsc/trv-theme/images/loader/loader.gif)" картинка, которая отображается в ячейках, данные которых еще грузятся
--img-cell-pattern "url(~@bsc/trv-theme/images/white-theme/icons/cell-pattern.png)" картинка, которой заполняется фон заблокированных ячеек
--img-logo-mini "url(~@bsc/trv-theme/images/new-design/logo.png)"
--img-home "url(~@bsc/trv-theme/images/white-theme/layout/home.svg)"
--img-toggle-expanded "url(~@bsc/trv-theme/images/white-theme/icons/ui/arrow-down.svg)"
--img-toggle-collapsed "url(~@bsc/trv-theme/images/white-theme/icons/ui/arrow-right.svg)"
--img-arrows-updown "url(~@bsc/trv-theme/images/white-theme/icons/ui/arrows-updown.svg)"
--img-group-1 "url(~@bsc/trv-theme/images/constructor/group1.svg)"
--img-group-2 "url(~@bsc/trv-theme/images/constructor/group2.svg)"
--img-group-3 "url(~@bsc/trv-theme/images/constructor/group3.svg)"
--img-person-svg "url(~@bsc/trv-theme/images/white-theme/icons/person-white.svg)"
--img-sort "url(~@bsc/trv-theme/images/white-theme/icons/ui/sort.svg)"
--img-sort-down "url(~@bsc/trv-theme/images/white-theme/icons/ui/sortDown.svg)"
--img-sort-up "url(~@bsc/trv-theme/images/white-theme/icons/ui/sortUp.svg)"
--img-checkbox-unchecked "url(~@bsc/trv-theme/images/white-theme/icons/ui/unchecked.svg)"
--img-checkbox-unchecked-hover "url(~@bsc/trv-theme/images/white-theme/icons/ui/unchecked_hover.svg)"
--img-checkbox-checked "url(~@bsc/trv-theme/images/white-theme/icons/ui/checked2.svg)"
--img-checkbox-checked-hover "url(~@bsc/trv-theme/images/white-theme/icons/ui/checked2_hover.svg)"
--img-checkbox-halfchecked "url(~@bsc/trv-theme/images/white-theme/icons/ui/halfchecked.svg)"
--img-checkbox-halfchecked-hover "url(~@bsc/trv-theme/images/white-theme/icons/ui/halfchecked_hover.svg)"
--img-checkbox-falsechecked "url(~@bsc/trv-theme/images/white-theme/icons/ui/falsechecked.svg)"
--img-checkbox-falsechecked-hover "url(~@bsc/trv-theme/images/white-theme/icons/ui/falsechecked_hover.svg)"
--img-checkbox-unchecked-disabled "var(--img-checkbox-unchecked)"
Tabs
--tabs-bg "#eef2f8"
Checkbox
--checkbox-color "#fff"
--checkbox-border "var(--border-color)"
Button
--btn-bg "var(--accent-color)"
--btn-color "#fff"
--btn-default-bg "transparent"
--btn-default-color "var(--main-color)"
--btn-default-bordercolor "var(--border-color)"
Dropzone remove
--remove-zone-border "#f59e9e"
--remove-zone-bg "#ffe4e4"
--remove-zone-bg-darken "#ffcbcb"
Grid/Pivot
--grid-border-color "#e5ecf3"
--grid-cell-active "var(--accent-color)"
--grid-thead-color "#656565"
--grid-thead-bg "#f2f5f9"
--grid-abcd-color "var(--label-color)"
--grid-deleted "#e84b56"
--grid-wrapper-bg "#444444"
--grid-sys-number-color "var(--label-color)"
--grid-tr-bg "var(--background-color)"
--grid-tr-color "var(--main-color)"
--grid-scrollbar-size "18px"
--grid-scrollbar-padding "4px"
Home
--home-title-color "var(--main-color)"
--home-links-color "var(--sub-color)"
--home-hover-bg "var(--hover-bg)"
ACE(json/html) editor
--ace-print-margin "#ebebeb"
--ace-gutter-active-line "#dadada"
--ace-selection "#b5d5ff"
--ace-active-line "#e8f2fe"
--ace-string "#2a00ff"
--ace-numeric "#00008b"
--ace-variable "#7f0055"
--ace-type "#7f007f"
--ace-class "var(--main-color)"
--ace-constant "var(--main-color)"
--ace-keyword "#7f0055"
--ace-gutter-color "#888888"
--ace-cursor "black"
--ace-step "#ffff00"
--ace-bracket-border-color "#c0c0c0"
--ace-selected-word-border-color "#b5d5ff"
--ace-fold-border-color "black"
--ace-fold-background-color "#3c4c72"
--ace-escape "var(--main-color)"
--ace-other "var(--main-color)"
--ace-function "#3c4c72"
--ace-attribute-name "#7f007f"
--ace-invalid-color "var(--main-color)"
--ace-invalid-background-color "transparent"
--ace-invalid-deprecated-background-color "transparent"
--ace-comment "#719682"
--ace-invisible "#ddd"
--ace-variable-parameter "var(--main-color)"
--ace-tag "#197674"
--ace-indent-guide "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==) right repeat-y"
--ace-info "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAJ0Uk5TAAB2k804AAAAPklEQVQY02NgIB68QuO3tiLznjAwpKTgNyDbMegwisCHZUETUZV0ZqOquBpXj2rtnpSJT1AEnnRmL2OgGgAAIKkRQap2htgAAAAASUVORK5CYII=)"
--ace-fold-widget "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAANElEQVR42mWKsQ0AMAzC8ixLlrzQjzmBiEjp0A6WwBCSPgKAXoLkqSot7nN3yMwR7pZ32NzpKkVoDBUxKAAAAABJRU5ErkJggg==)"
--ace-fold-widget-closed "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAGCAYAAAAG5SQMAAAAOUlEQVR42jXKwQkAMAgDwKwqKD4EwQ26sSOkVWjgIIHAzPiCgaqiqnJHZnKICBERHN194O5b9vbLuAVRL+l0YWnZAAAAAElFTkSuQmCCXA==)"

Настройка оформления строки с фокусной ячейкой и самой фокусной ячейки

Чтобы задать кастомное оформление для строки с фокусной ячейкой или самой фокусной ячейки нужно в теме задать css-переменные вида:

--grid-focused-row-ИМЯ-CSS-СВОЙСТВА (для оформления строки с фокусной ячейкой)

--grid-focused-cell-ИМЯ-CSS-СВОЙСТВА (для оформления фокусной ячейки)

например:

'--grid-focused-row-background-color': 'green',
'--grid-focused-row-color': 'magenta',
'--grid-focused-cell-border-color': 'red',
'--grid-focused-cell-color': 'blue',
'--grid-focused-cell-background-color': 'yellow'

Примечания

  1. Коллекции в переменных с цветами.
    Некоторые css переменные пришлось сделать не удобными, например:
    --accent-color-rgb: 23, 135, 238;
--accent-color: rgb(var(--accent-color-rgb));
    --accent-color-rgb приходится задавать коллекцией(раньше вообще не было --accent-color-rgb, а был только --accent-color), потому что есть достаточно много мест с заданием прозрачности в виде rgba(цвет, 0.5), это работает с цветами, но не работает с переменными внутри которых какой-нибудь шестнадцатиричный цвет, но нашлось решение с коллекцией, в результате такой вариант работает:
    --accent-color-rgb: 23, 135, 238;
--accent-color: rgb(var(--accent-color-rgb));
--active-bg: rgba(var(--accent-color-rgb), 0.1);
    а такой вариант не работал:
    --accent-color: #1787ee;
--active-bg: rgba(var(--accent-color), 0.1);
  2. Цвета типов объектов.
    Текущий вариант с заданием цветов для разных типов объектов, не получается вынести в таком виде в css переменные:
    $object-color: (
 'report': #e84b56,
 'indicator': #ebbb28,
 'operand': #7455f0,
 'dictionary': #1daa5d,
 'dictionary-external': #1daa5d,
 'dictionary-calendar': #1daa5d,
 'calc': #1787ee,
 'dashboard': #933fba,
 'etl': #1aa4b8,
 'workflow': #1787ee,
 'htmlpage': #1787ee,
 'customobject': #1787ee,
 'resource': #15b8ae,
 'number': #1787ee,
 'user-element': #1787ee,
 'layers': #1787ee,
 'dictionary-linked': #1787ee,
 'card-server': #ff7264,
 'client-card': #7455f0,
 'data-source': #fb6900,
 'virtual-top': #0066dd,
 'virtual-bottom': #0066dd,
 'dictionary-relation': #1daa5d,
 'receiver': #1daa5d,
 'warning-line': #e84b56,
);
    проблема еще в том, что в нескольких местах по этому объекту проходят циклом и задают разные классы на основе этого объекта, например:
    // Цвета иконок
@each $name, $color in $object-color {
 .trvi-#{$name} {
 color: $color;
 }
}
Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Навигатор/Темы_навигатора&oldid=1669