CSS变量/自定义属性中的引用/别名

Question

我正在尝试使用CSS自定义属性编写主题系统。主题有两个应该独立的层：调色板层和应用程序层。

目前，我正在努力使各个图层彼此独立。可以在级联中进一步更改应用程序层，但是无法重新应用调色板层，而不必重新应用应用程序层。

可以在Codepen上找到一个基本示例：https://codepen.io/conordesign/pen/REzgWw

HTML：

<div class="theme-warm text-primary">
  I want to be red.
  <div class="theme-cold">I want to be blue.</div>
</div>

CSS：

/* PALETTE LAYER */

.theme-warm {
  --primary: red;
  --secondary: orange;
}

.theme-cold {
  --primary: blue;
  --secondary: aqua;
}

/* APPLICATION LAYER */

.text-primary {
  --text-color: var(--primary);
}

.text-secondary {
  --text-color: var(--secondary);
}

/* STYLES */

div {
  color: var(--text-color);
}

我看到的问题是，--text-color在父div上被评估为--primary，但在子div上没有被评估。

如果我向子级添加.text-primary，则所有操作均按预期方式进行-但是，每次调色板层更改时都必须重新声明应用程序层是不理想的。

理想情况下，我想在.text-primary中说一种方式：“好吧，--text-color将会是--primary，但不要评估--primary直到实际使用--text-color。”本质上，在这种情况下，我希望--primary是引用/别名变量。

我知道我在问很多新技术，任何想法都将不胜感激！