Неожиданный порядок разрешения переменных в CSS с гнездованием VAR/свойства ⇐ CSS

[Anonymous]

Моя цель состоит в том, чтобы иметь архитектуру, в которой тень определяется один раз, но цвет изменяется в зависимости от атрибута HTML-атрибута .
Примечание. Приведен код, предназначенная только для демонстрации изолированной проблемы. /> У меня есть некоторые гипотезы о том, почему это происходит, но я не знаю. ИИ дает ошибочные ответы и говорит, чтобы удалить функциональность. < /P>

Код: Выделить всё

:root {
--dark-color: #333;
--light-color: #f0f0f0;

--responsive-color: var(--light-color);

--responsive-shadow: 0 20px var(--responsive-color);
}

[data-color-mode="dark"] {
--responsive-color: var(--dark-color);
}

div {
background: var(--responsive-color);
box-shadow: var(--responsive-shadow);

color: grey;
}< /code>

Expected: Background color and shadow color to be light



Expected: Background color and shadow color to be dark

одно грязное решение (которого я хочу избежать)-это дублировать-responsive-shadow: 0 20px var (-отзывчивый цвет); к внутреннему [Data-color-mode = "Dark"] {} css block. Оно работает. Но ужасно для многих или переменного количества цветовых палитров.
Идея?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ty-nesting