Темизация

Надо подумать про то, чтобы сократить количество переменных, допустим у нас есть несколько уровней:

1. Глобальный
2. Компонентный

Есть следующая структура:

:root {
  --color-yellow-900: #fc0;
  --button-view-default-fill-color-base: var(--color-yellow-900);
}

.Button {
  background-color: var(--button-view-default-fill-color-base);
}

Вместо этого можно сделать следующее (используем фолбек и при необходимости можем поменять токен у кнопки):

:root {
  --color-yellow-900: #fc0;
-  --button-view-default-fill-color-base: var(--color-yellow-900);
}

.Button {
-  background-color: var(--button-view-default-fill-color-base);
+  background-color: var(--button-view-default-fill-color-base, var(--color-yellow-900));
}

TODO:

• Подумать как переопределять общий цвет у всех компонентов (возможно в качестве fallback нужно указать токен а не значение)