Пример:

:root {
    --PrimaryThemeColor: #3acfb6; /* with or without quotes */
}

.ColorSwatch:after {
  content: var(--PrimaryThemeColor);
}

Когда это визуализируется, вычисленный CSS буквально это значение.

content: var(--PrimaryThemeColor);

Даже если я использую постпроцессор, который вводит вычисленное значение как запасной вариант, само значение не является строкой, поэтому оно недопустимо дляcontent.

.ColorSwatch:after {
    content: #3acfb6;
    content: var(--PrimaryThemeColor);
}