CSS Magic Gradient

TypeScript-библиотека для генерации CSS-градиентов — линейных, радиальных и конических. Включает готовые пресеты градиентов, генераторы цветовой гармонии, утилиты доступности WCAG, поддержку CSS-переменных, экспорт в canvas, реактивные хуки для Vue 3 и хуки для React — с единственной runtime-зависимостью.

Возможности

• createLinearGradient — линейные (и повторяющиеся) градиенты из одного базового цвета или явных цветовых точек; принимает hex, rgb(), hsl(), именованные CSS-цвета и CSS-переменные; интерполяция CSS Color Level 4 через in oklch / lab / hsl
• createRadialGradient — радиальные градиенты в режиме авто-яркости, явных точек, нескольких слоёв или цветовой гармонии; circle / ellipse, произвольные размер и позиция
• createConicGradient — конические градиенты с вращением тона, цветовой шкалой, гармонией или явными точками; createRainbowConicGradient для радуги на весь спектр одним вызовом
• Генераторы цветовых гармоний — createComplementaryGradient, createTriadicGradient, createAnalogousGradient, createTetradicGradient, createSplitComplementaryGradient — все на основе color-value-tools для перцептивно равномерной интерполяции
• Генераторы палитр — createTintGradient, createShadeGradient, createToneGradient — оттенки, тени и тона на основе Oklab
• 15 пресетов градиентов — sunsetGradient, oceanGradient, auroraGradient и ещё 12 готовых строк градиентов
• Доступность (WCAG) — bestGradientTextColor, gradientContrastRatio (11-точечная выборка), gradientWcagLevel, createAccessibleGradient — автоматическая подстройка точек под AA / AAA
• Утилиты CSS-переменных — extractGradientVariables, resolveGradientVariables
• Экспорт в canvas и изображения — gradientToCanvasGradient, gradientToImageData, gradientToDataURL; работает с любым CanvasRenderingContext2D или серверной библиотекой canvas
• Интеграция с Vue 3 — VueGradientPlugin + 17 реактивных хуков use*, возвращающих ComputedRef<string>; SSR-безопасно; собственная точка входа (css-magic-gradient/vue), никогда не загружается, если не импортирована явно
• Интеграция с React — те же 17 хуков в css-magic-gradient/react; обычная string через useMemo; без зависимости от Vue; SSR-безопасно
• Полный TypeScript — экспортированные типы для всех опций, форм возврата и дискриминированных union-типов
• Единственная runtime-зависимость — color-value-tools для математики цвета; Vue и React — опциональные peer-зависимости, и ни одна из них никогда не подключается основной точкой входа