Справочник

Типы TypeScript

Все публичные типы экспортируются из корня пакета:

import type {
  // Цветовая точка
  ColorStop,

  // Линейный градиент
  GradientOptions,
  ColorInterpolation,

  // Радиальный градиент
  RadialGradientOptions,
  RadialGradientLayer,
  RadialHarmonyType,

  // Конический градиент
  ConicGradientOptions,

  // Генераторы гармоний
  HarmonyGradientOptions,

  // Доступность
  AccessibleGradientOptions,
  GradientWcagReport,
  WcagLevel,

  // Экспорт в canvas
  CanvasGradientConfig,
  CanvasGradientStop,
} from 'css-magic-gradient'

Значения WcagLevel:

type WcagLevel = 'AAA' | 'AA' | 'AA-large' | 'fail'

Значения ColorInterpolation:

type ColorInterpolation = 'srgb' | 'oklch' | 'lab' | 'hsl' | 'oklab' | 'lch'

Пример кастомного сериализатора / цветовой точки:

import type { ColorStop, GradientOptions } from 'css-magic-gradient'

const stops: ColorStop[] = [
  { color: '#ff6b6b', position: '0%' },
  { color: '#feca57', opacity: 0.8, position: '100%' },
]

const opts: GradientOptions = {
  direction: 'to right',
  interpolation: 'oklch',
}

Архитектура

css-magic-gradient
│
├── createLinearGradient      — linear-gradient / repeating-linear-gradient
│     Режим авто-яркости      — более светлая стартовая точка выводится из базового цвета
│     Режим ColorStop[]       — явный массив точек; непрозрачность точки → rgba()
│     CSS Color Level 4       — добавляет `in <space>` к CSS-объявлению градиента
│
├── createRadialGradient      — radial-gradient / repeating-radial-gradient
│     Режимы: авто / явный / слои / гармония
│     createRadialGradientLayers — генерирует массивы многокольцевых слоёв
│
├── createConicGradient       — conic-gradient / repeating-conic-gradient
│     createRainbowConicGradient — полный цикл тонов HSL
│
├── Генераторы цветовых гармоний
│     createComplementaryGradient / createTriadicGradient
│     createAnalogousGradient / createTetradicGradient
│     createSplitComplementaryGradient / createMonochromaticGradient
│     createHueWheelGradient
│     — все используют interpolateColors / createColorScale из color-value-tools
│
├── Генераторы палитр
│     createTintGradient / createShadeGradient / createToneGradient
│     — используют оттенки / тени / тона на основе Oklab из color-value-tools
│
├── Пресеты (src/presets.ts)
│     15 фиксированных строк градиентов
│
├── Доступность (src/accessibility.ts)
│     bestGradientTextColor    — выбирает #000 или #fff для лучшего контраста
│     gradientContrastRatio    — минимальный контраст по 11 выборочным точкам
│     gradientWcagLevel        — подробный GradientWcagReport
│     createAccessibleGradient — итеративно подстраивает, пока не достигнут целевой уровень
│
├── Утилиты CSS-переменных (src/css-variables.ts)
│     extractGradientVariables — парсит имена var() из строки градиента
│     resolveGradientVariables — подставляет значения переменных из карты
│
├── Экспорт в canvas (src/canvas-export.ts)
│     gradientToCanvasGradient — применяет точки к CanvasGradient
│     gradientToImageData      — рендерит в ImageData заданного размера
│     gradientToDataURL        — рендерит в data URL PNG
│
├── Интеграция с Vue 3 (src/vue-gradient-plugin.ts)
│     VueGradientPlugin        — регистрирует $use* на инстансе Vue
│     useLinearGradient / useRadialGradient / useConicGradient
│     хуки use*Gradient        — ComputedRef<string>; SSR-безопасно; без доступа к DOM
│
└── Интеграция с React (src/react-gradient-plugin.ts)
      useLinearGradient / useRadialGradient / useConicGradient
      хуки use*Gradient        — string через useMemo; SSR-безопасно; без зависимости от Vue

Размер бандла и peer-зависимости

Точка входа	Peer-зависимости	Примечания
`css-magic-gradient`	`vue ^3.0.0` (опционально)	Основные функции, пресеты, доступность, утилиты CSS-переменных, экспорт в canvas, хуки Vue
`css-magic-gradient/vue`	`vue ^3.0.0`	Только хуки Vue (подпуть-алиас для основной точки входа)
`css-magic-gradient/react`	`react ^17.0.0` (опционально)	Только хуки React — без зависимости от Vue

Пакет поставляется как ESM + CommonJS (dist/*.js). Vue и React — опциональные peer-зависимости, основной бандл полностью работоспособен без них. Единственная runtime-зависимость — color-value-tools (математика цвета для генераторов гармоний и палитр).

// Ядро
import {
  createLinearGradient,
  createTetradicGradient,
  sunsetGradient,
  createAccessibleGradient,
  extractGradientVariables,
  gradientToDataURL,
} from 'css-magic-gradient'

// Хуки Vue (подпуть-алиас)
import { useTetradicGradient } from 'css-magic-gradient/vue'

// Хуки React
import { useTintGradient } from 'css-magic-gradient/react'

Лицензия

MIT

Справочник ​

Типы TypeScript ​

Архитектура ​

Размер бандла и peer-зависимости ​

Лицензия ​

Справочник

Типы TypeScript

Архитектура

Размер бандла и peer-зависимости

Лицензия