Что такое gradiente

Gradiente - это лёгкий инструмент для работы с градиентами как со структурированными данными.

Он позволяет перейти от строк к предсказуемому и управляемому представлению.

Проблема

Градиенты чаще всего записываются как строки

linear-gradient(to right, red, blue)

Это работает для рендеринга в HTML/CSS, но у этого есть ряд проблем с:

• валидированием
• трансформирование в другие системы
• анализом
• переиспользованием

Идея

gradiente рассматривает градиенты как данные.

import { parseStringToAbi } from 'gradiente'

const result = parseStringToAbi(
  'linear-gradient(to right, red, blue)'
)

Вместо строки используется структурированное представление.

Почему это важно

Когда градиенты становятся структурированными, можно:

• валидировать входные данные
• строить редакторы
• преобразовывать между форматами
• генерировать градиенты программно

Pattern DSL

В gradiente есть небольшой DSL для валидации структуры градиента.

^[color-stop,~color-stop].

Это определяет, какие входные данные допустимы.

Пример

color-stop, color-stop ✅
color-stop, color-stop, color-stop ✅
color-stop, color-hint ❌

Чем gradiente не является

• не движок рендеринга
• не замена CSS
• не визуальный инструмент

Это слой данных для градиентов.

Где используется

Gradiente рассчитан на работу с:

• canvas-системами
• рендер-движками
• визуальными редакторами
• инструментами вроде Flowscape

Дальше

Начать с базового использования:

👉 Быстрый старт →

Или перейти к DSL:

👉 Pattern DSL →