Создание нескольких классов попутного ветра по умолчанию ⇐ CSS

[Гость]

Я пытаюсь создать серию попутных классов для приложения и столкнулся с проблемой с цветами «по умолчанию» для определенных атрибутов.

У нас есть файл JSON, содержащий все наши цвета. Затем мы передаем этот файл JSON в параметр presets в нашем файле tailwind.config.js. Например:

{ "тема": { "продлевать": { "нейтральный": { "accent": "#8C9FB8", "сильный": "#0D192A", "слабый": "#5F738B", "текст": "#435469", "кнопка": "#435469", "заполнитель": "#8C9FB8", "фон": "#EFF3F9", "слабый фон": "#F7F9FC", "фон отключен": "#DDE5F0", "background-tooltip": "#304055", "сильный фон": "#0D192A", "граница": "#C6D1E1", "кнопка границы": "#8C9FB8", "border-focus": "#6D89AF", "template-blend": "#5F738B" }, "Опасность": { "фон-средний": "#E01939", "слабый фон": "#FFEBF0", "border-focus": "#EE707B", "прижатая граница": "#E7445A", "accent": "#E01939", "кнопка": "#B7233C", "текст": "#8E2637", "сильный": "#5F232D" }, "Информация": { "фон": "#B7EBF9", "слабый фон": "#E2F7FD", "border": "#60D1ED", "accent": "#41BEE0", "текст": "#2A7085", "наведение текста": "#2A7085", "сильный": "#224752" }, ... } В целом этот подход работает, однако я изо всех сил пытаюсь понять, как подобрать правильные значения по умолчанию для различных элементов DOM, которые мы хотим стилизовать.

В настоящее время, например, чтобы стилизовать текст с помощью цвета текста по умолчанию, вам нужно написать класс text-neutral-text, потому что вам нужно указать, какой цвет использовать из блок нейтральный. Я бы хотел, чтобы это было нейтральным к тексту.

Мы могли бы использовать значение DEFAULT, но оно также будет применяться для border-neutral, который должен иметь другой цвет.

Можно ли здесь иметь разные значения по умолчанию для каждого элемента DOM или есть лучший способ структурировать нашу конфигурацию Tailwind, чтобы мы могли использовать эти значения по умолчанию?