базовый включает в себя сырые цветовые значения, так называемые токены, в виде #BFBFBF. Для более безболезненного переноса в разработку, рекомендуется именовать их типа --color-grey-500. 500 тут это среднее значение в палитре этого цвета. Так при экспорте имя переменной без проблем схавается таблицами стилей и сразу будет работать.

семантический Это уже смысловые переменные. Используются они для указания состояний для общих стилей сущностей. Например --text-color-grey-500 — это имя переменной. Значение будет браться из базовой переменной --color-grey-500.

компонентный Тут более узконаправленные переменные. Для каждого конкретного компонента задаем значение из числа семантических. Например --button-primary-idle-text который будет равняться --text-color-grey-500.

Для чего это надо? Это надо для того, что бы в будущем, если дизайн система собирается быть неприлично большой, более быстро контролировать и вносить изменения, в данном случае работу с цветами. Поменяешь тут, поменяется везде. И вроде бы звучит просто и логично, всем и так понятно как это в теории работает НО. Но на практике это очень много всего, раздутые компоненты и полный рот переменных, в которых нужно уметь ориентироваться 💀

В тестовом надо было такое показать, делал первый раз, офигел, но получилось вроде нормик. До этого делал тоже на переменных, но в разы проще. Но делать такую монструозную систему в каждом проекте наверное не стоит