@gradient-ui/gradient-engine 0.6.0 → 1.0.1

package/dist/types-cjs/palette.d.cts

@@ -0,0 +1,13 @@
+import { type ColorInput } from './color.cjs';
+export declare const COLOR_SHADES: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+export type ColorShade = (typeof COLOR_SHADES)[number];
+export type ColorPalette = Record<ColorShade, string>;
+export interface ColorPalettePair {
+    colors: ColorPalette;
+    onColors: ColorPalette;
+}
+export declare const SHADE_TONES: Record<ColorShade, number>;
+export declare const ON_SHADE_TONES: Record<ColorShade, number>;
+export declare const createPalette: (seed: ColorInput) => ColorPalette;
+export declare const createOnPalette: (seed: ColorInput) => ColorPalette;
+export declare const createPalettePair: (seed: ColorInput) => ColorPalettePair;

package/dist/types-cjs/presets.d.cts

@@ -0,0 +1,239 @@
+import type { GradientAnimationOptions, GradientAnimationPreset, GradientOptions, GradientRecipe, GradientShadowOptions, GradientType } from './types.cjs';
+export interface GradientPreset {
+    label: string;
+    description?: string;
+    gradient: Omit<GradientOptions, 'shade' | 'colors'> & {
+        recipe: GradientRecipe;
+        type?: GradientType;
+    };
+    shadow?: GradientShadowOptions;
+    dropShadow?: GradientShadowOptions;
+    animation?: Omit<GradientAnimationOptions, 'name' | 'selector'> & {
+        preset: GradientAnimationPreset;
+    };
+}
+export type GradientPresetRegistry = Record<string, GradientPreset>;
+export declare const defineGradientPreset: <T extends GradientPreset>(preset: T) => T;
+export declare const defineGradientPresetRegistry: <T extends GradientPresetRegistry>(presets: T) => T;
+export declare const gradientPresets: {
+    materialBorder: {
+        label: string;
+        description: string;
+        gradient: {
+            recipe: "glare";
+            type: "linear";
+            direction: number;
+        };
+        shadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+            spread: number;
+        };
+        dropShadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+        };
+        animation: {
+            preset: "shift";
+            duration: number;
+            easing: string;
+        };
+    };
+    materialAction: {
+        label: string;
+        description: string;
+        gradient: {
+            recipe: "glare";
+            type: "linear";
+            direction: number;
+        };
+        shadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+            spread: number;
+        };
+        dropShadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+        };
+        animation: {
+            preset: "shift";
+            duration: number;
+            easing: string;
+        };
+    };
+    materialSurface: {
+        label: string;
+        description: string;
+        gradient: {
+            recipe: "monochrome";
+            type: "linear";
+            direction: number;
+        };
+        shadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+            spread: number;
+        };
+        dropShadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+        };
+        animation: {
+            preset: "pulse";
+            duration: number;
+            easing: string;
+        };
+    };
+    brandGlare: {
+        label: string;
+        description: string;
+        gradient: {
+            recipe: "glare";
+            type: "linear";
+            direction: number;
+        };
+        shadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+            spread: number;
+        };
+        dropShadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+        };
+        animation: {
+            preset: "shift";
+            duration: number;
+            easing: string;
+        };
+    };
+    softMono: {
+        label: string;
+        description: string;
+        gradient: {
+            recipe: "monochrome";
+            type: "linear";
+            direction: number;
+        };
+        shadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+            spread: number;
+        };
+        dropShadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+        };
+        animation: {
+            preset: "pulse";
+            duration: number;
+            easing: string;
+        };
+    };
+    neonDuo: {
+        label: string;
+        description: string;
+        gradient: {
+            recipe: "duotone";
+            type: "linear";
+            direction: number;
+        };
+        shadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+            spread: number;
+        };
+        dropShadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+        };
+        animation: {
+            preset: "shift";
+            duration: number;
+            easing: string;
+        };
+    };
+    orbitalConic: {
+        label: string;
+        description: string;
+        gradient: {
+            recipe: "triadic";
+            type: "conic";
+            direction: number;
+            position: string;
+        };
+        shadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+            spread: number;
+        };
+        dropShadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+        };
+        animation: {
+            preset: "rotate";
+            duration: number;
+        };
+    };
+    auroraRadial: {
+        label: string;
+        description: string;
+        gradient: {
+            recipe: "analogous";
+            type: "radial";
+            direction: number;
+            position: string;
+            shape: "circle";
+        };
+        shadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+            spread: number;
+        };
+        dropShadow: {
+            layers: number;
+            opacity: number;
+            blur: number;
+            y: number;
+        };
+        animation: {
+            preset: "hue-rotate";
+            duration: number;
+            easing: string;
+        };
+    };
+};
+export type GradientPresetName = keyof typeof gradientPresets;
+export declare const getGradientPreset: (name: GradientPresetName | string, registry?: GradientPresetRegistry) => GradientPreset;

package/dist/types-cjs/recipes.d.cts

@@ -0,0 +1,14 @@
+import type { GradientRecipe } from './types.cjs';
+export declare const gradientRecipes: {
+    glare: (base: string) => import("./types.cjs").GradientStop[];
+    monochrome: (base: string) => import("./types.cjs").GradientStop[];
+    complementary: (base: string) => import("./types.cjs").GradientStop[];
+    'split-complementary': (base: string) => import("./types.cjs").GradientStop[];
+    analogous: (base: string) => import("./types.cjs").GradientStop[];
+    triadic: (base: string) => import("./types.cjs").GradientStop[];
+    tetradic: (base: string) => import("./types.cjs").GradientStop[];
+    rectangle: (base: string) => import("./types.cjs").GradientStop[];
+    square: (base: string) => import("./types.cjs").GradientStop[];
+    duotone: (base: string, colors: readonly string[] | undefined) => import("./types.cjs").GradientStop[];
+};
+export declare const createRecipeStops: (base: string, recipe: GradientRecipe, colors?: readonly string[]) => import("./types.cjs").GradientStop[];

package/dist/types-cjs/scheme.d.cts

@@ -0,0 +1,3 @@
+export type ThemeMode = 'light' | 'dark';
+export type ThemeTokens = Record<string, string>;
+export declare const createSemanticTokens: (seed: string, mode: ThemeMode) => ThemeTokens;

package/dist/types-cjs/tokens.d.cts

@@ -0,0 +1,107 @@
+import type { ColorInput } from './color.cjs';
+import { type GradientPresetName, type GradientPresetRegistry } from './presets.cjs';
+import type { GradientAnimationOptions, GradientMorphBlendMode, GradientMorphBlob, GradientMorphOptions, GradientModel, GradientOptions, GradientRecipe, GradientShadowOptions, GradientStop } from './types.cjs';
+export type GradientTokenRecipe = GradientRecipe | GradientPresetName | 'mesh' | 'soft';
+export interface GradientTokenEntry {
+    value: string;
+    cssVar: string;
+    model?: GradientModel;
+    layers?: string[];
+    stops?: GradientStop[];
+    svg?: string;
+}
+export interface GradientEffectTokenEntry {
+    boxShadow?: {
+        value: string;
+        cssVar: string;
+    };
+    dropShadow?: {
+        value: string;
+        cssVar: string;
+    };
+    morph?: {
+        value: string;
+        cssVar: string;
+        svg: string;
+        blendMode: GradientMorphBlendMode;
+        blendModeCssVar: string;
+    };
+}
+export interface GradientAnimationTokenEntry {
+    name: string;
+    value: string;
+    css: string;
+    keyframes: string;
+    cssVar: string;
+}
+export interface CreatedGradientPreset {
+    name: string;
+    label: string;
+    description?: string;
+    gradient: GradientTokenEntry;
+    effects?: GradientEffectTokenEntry;
+    animation?: GradientAnimationTokenEntry;
+    cssVars: Record<string, string>;
+    cssText: string;
+    keyframes: string;
+}
+export interface GradientTokenOptions {
+    recipes?: readonly GradientTokenRecipe[];
+    effects?: boolean;
+    animations?: boolean;
+    morph?: GradientMorphOptions;
+    registry?: GradientPresetRegistry;
+    prefix?: string;
+}
+export interface CreatedGradientTokens {
+    gradients: Record<string, GradientTokenEntry>;
+    effects: Record<string, GradientEffectTokenEntry>;
+    animations: Record<string, GradientAnimationTokenEntry>;
+    cssVars: Record<string, string>;
+    cssText: string;
+    keyframes: string;
+}
+export interface GradientMaterialOptions extends Omit<GradientOptions, 'recipe'> {
+    animation?: GradientAnimationOptions;
+    animations?: boolean;
+    className?: string;
+    dropShadow?: GradientShadowOptions;
+    effects?: boolean;
+    id?: string;
+    morph?: GradientMorphOptions;
+    prefix?: string;
+    recipe?: GradientTokenRecipe;
+    registry?: GradientPresetRegistry;
+    shadow?: GradientShadowOptions;
+}
+export interface CreatedGradientMaterial {
+    id: string;
+    className: string;
+    style: Record<string, string>;
+    cssVars: Record<string, string>;
+    cssText: string;
+    keyframes: string;
+    preset: CreatedGradientPreset;
+    gradient: GradientTokenEntry;
+    effects?: GradientEffectTokenEntry;
+    animation?: GradientAnimationTokenEntry;
+    morphBlobs?: GradientMorphBlob[];
+}
+export declare const clearGradientMaterialCache: () => void;
+export declare const setGradientMaterialCacheLimit: (limit: number) => void;
+export declare const getGradientMaterialCacheStats: () => {
+    limit: number;
+    size: number;
+};
+export declare const createGradientPreset: (seed: ColorInput, recipe?: GradientTokenRecipe, options?: GradientOptions & {
+    animation?: GradientAnimationOptions;
+    dropShadow?: GradientShadowOptions;
+    effects?: boolean;
+    morph?: GradientMorphOptions;
+    prefix?: string;
+    registry?: GradientPresetRegistry;
+    shadow?: GradientShadowOptions;
+    animations?: boolean;
+}) => CreatedGradientPreset;
+export declare const createGradientTokens: (seed: ColorInput, options?: GradientTokenOptions) => CreatedGradientTokens;
+export declare const createGradientMaterial: (seed: ColorInput, options?: GradientMaterialOptions) => CreatedGradientMaterial;

package/dist/types-cjs/types.d.cts

@@ -0,0 +1,127 @@
+import type { ColorShade } from './palette.cjs';
+export type GradientDirection = number | string;
+export type GradientType = 'linear' | 'radial' | 'conic';
+export type GradientRecipe = 'glare' | 'monochrome' | 'complementary' | 'split-complementary' | 'analogous' | 'triadic' | 'tetradic' | 'rectangle' | 'square' | 'duotone';
+export type GradientShape = 'circle' | 'ellipse';
+export type GradientAnimationPreset = 'shift' | 'pulse' | 'rotate' | 'hue-rotate';
+export interface GradientStop {
+    color: string;
+    position: number;
+    opacity?: number;
+}
+export interface GradientModel {
+    type: GradientType;
+    stops: GradientStop[];
+    direction: GradientDirection;
+    shape?: GradientShape;
+    position?: string;
+    size?: string;
+}
+export interface GradientOptions {
+    direction?: GradientDirection;
+    recipe?: GradientRecipe;
+    shade?: ColorShade;
+    type?: GradientType;
+    shape?: GradientShape;
+    position?: string;
+    size?: string;
+    colors?: readonly string[];
+}
+export interface GradientShadowOptions {
+    x?: number | string;
+    y?: number | string;
+    blur?: number | string;
+    spread?: number | string;
+    opacity?: number;
+    layers?: number;
+}
+export type GradientMorphPreset = 'soft' | 'liquid' | 'ripple';
+export declare const GRADIENT_MORPH_BLEND_MODES: readonly ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
+export type GradientMorphBlendMode = (typeof GRADIENT_MORPH_BLEND_MODES)[number];
+export declare const DEFAULT_GRADIENT_MORPH_BLEND_MODE = "hard-light";
+export interface GradientMorphOptions {
+    id?: string;
+    preset?: GradientMorphPreset;
+    blendMode?: GradientMorphBlendMode;
+    blobCount?: number;
+    blobOpacity?: number;
+    blur?: number;
+    contrast?: number;
+    duration?: number | string;
+    opacity?: number;
+    scale?: number;
+    selector?: string;
+}
+export interface GradientMorphMarkupOptions extends GradientMorphOptions {
+    width?: number;
+    height?: number;
+    rx?: number;
+}
+export interface GradientMorphBlob {
+    animationName: string;
+    blur: number;
+    color: string;
+    delay: number;
+    dx: number;
+    dx2: number;
+    dy: number;
+    dy2: number;
+    duration: number | string;
+    opacity: number;
+    originX: string;
+    originY: string;
+    rotateMid: number;
+    rotateTo: number;
+    scaleMid: number;
+    scaleTo: number;
+    size: number;
+    x: number;
+    y: number;
+}
+export interface SvgGradientOptions {
+    id?: string;
+    width?: number;
+    height?: number;
+    rx?: number;
+    x1?: string;
+    x2?: string;
+    y1?: string;
+    y2?: string;
+    cx?: string;
+    cy?: string;
+    r?: string;
+}
+export interface SvgPathAnimationOptions extends SvgGradientOptions {
+    path?: string;
+    strokeWidth?: number;
+    linecap?: 'butt' | 'round' | 'square';
+    duration?: number | string;
+    repeatCount?: number | string;
+    backgroundStroke?: string;
+    activeStroke?: string;
+    backgroundOpacity?: number;
+}
+export interface SvgSourceAnimationOptions extends SvgPathAnimationOptions {
+    normalizeStrokeWidth?: boolean;
+    sourceOpacity?: number;
+    viewBoxPadding?: number | false;
+    strokeWidthBase?: number;
+}
+export interface CanvasGradientOptions {
+    x0?: number;
+    y0?: number;
+    x1?: number;
+    y1?: number;
+    r0?: number;
+    r1?: number;
+    startAngle?: number;
+    width?: number;
+    height?: number;
+}
+export interface GradientAnimationOptions {
+    name?: string;
+    preset?: GradientAnimationPreset;
+    duration?: number | string;
+    easing?: string;
+    selector?: string;
+}

package/dist/types-cjs/utils.d.cts

@@ -0,0 +1,10 @@
+import type { GradientDirection, GradientStop } from './types.cjs';
+export declare const normalizeDirection: (direction?: GradientDirection) => string;
+export declare const toCssLength: (value: number | string) => string;
+export declare const addCssLength: (value: number | string, offset: number) => string;
+export declare const toCssDuration: (value: number | string) => string;
+export declare const clamp: (value: number, min?: number, max?: number) => number;
+export declare const toCssColor: (color: string, opacity?: number) => string;
+export declare const formatStop: ({ color, opacity, position }: GradientStop) => string;
+export declare const createStop: (color: string, position: number, opacity?: number) => GradientStop;
+export declare const getConicStops: (stops: readonly GradientStop[]) => readonly GradientStop[];

package/dist/utils-Bry9BTmj.cjs

@@ -0,0 +1 @@
+"use strict";const clamp$1=(value,min=0,max=1)=>Math.min(max,Math.max(min,value)),toLinear=value=>{const channel=value/255;return channel<=.04045?channel/12.92:((channel+.055)/1.055)**2.4},parseHex=value=>{const hex=value.slice(1),normalized=hex.length===3||hex.length===4?hex.slice(0,3).split("").map(character=>character.repeat(2)).join(""):hex.slice(0,6);return normalized.length!==6||!/^[\da-f]{6}$/i.test(normalized)?null:{r:parseInt(normalized.slice(0,2),16),g:parseInt(normalized.slice(2,4),16),b:parseInt(normalized.slice(4,6),16)}},parseRgb=value=>{const match=value.match(/^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*[\d.]+%?)?\s*\)$/i);return match?{r:clamp$1(Number(match[1]),0,255),g:clamp$1(Number(match[2]),0,255),b:clamp$1(Number(match[3]),0,255)}:null},parseColor=input=>{if(typeof input=="number"){const value2=input&16777215;return{r:value2>>16&255,g:value2>>8&255,b:value2&255}}const value=input.trim();return value.startsWith("#")?parseHex(value):value.toLowerCase().startsWith("rgb")?parseRgb(value):null},rgbToHex=({r,g,b})=>`#${[r,g,b].map(channel=>Math.round(channel).toString(16).padStart(2,"0")).join("")}`,rgbToChannels=({r,g,b})=>`${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`,colorToHex=(input,fallback)=>{const color=parseColor(input)??parseColor(fallback);if(!color)throw new Error(`Invalid fallback color: ${fallback}`);return rgbToHex(color)},relativeLuminance=color=>.2126*toLinear(color.r)+.7152*toLinear(color.g)+.0722*toLinear(color.b),getContrastingColor=color=>{const parsed=parseColor(color);if(!parsed)return"#ffffff";const luminance=relativeLuminance(parsed),whiteContrast=1.05/(luminance+.05),darkContrast=(luminance+.05)/.055;return whiteContrast>=darkContrast?"#ffffff":"#0d0d12"};const DEFAULT_GRADIENT_POSITION="center",DEFAULT_GRADIENT_SIZE="farthest-corner",normalizeDirection=(direction=135)=>typeof direction=="number"?`${direction}deg`:direction,toCssLength=value=>typeof value=="number"?`${value}px`:value,toCssDuration=value=>typeof value=="number"?`${value}ms`:value,clamp=(value,min=0,max=1)=>Math.min(max,Math.max(min,value)),toCssColor=(color,opacity)=>{if(opacity===void 0)return color;const parsed=parseColor(color);return parsed?`rgb(${rgbToChannels(parsed).replace(/,/g,"")} / ${clamp(opacity)})`:color},formatStop=({color,opacity,position})=>`${toCssColor(color,opacity)} ${position}%`,createStop=(color,position,opacity)=>({color,position}),getConicStops=stops=>{if(stops.length<=1)return stops;const firstHalf=stops.map(stop=>({...stop,position:stop.position/2})),secondHalf=[...stops].reverse().map(stop=>({...stop,position:100-stop.position/2}));return[...firstHalf,...secondHalf]};exports.DEFAULT_GRADIENT_DIRECTION=135;exports.DEFAULT_GRADIENT_POSITION=DEFAULT_GRADIENT_POSITION;exports.DEFAULT_GRADIENT_SIZE=DEFAULT_GRADIENT_SIZE;exports.clamp=clamp;exports.colorToHex=colorToHex;exports.createStop=createStop;exports.formatStop=formatStop;exports.getConicStops=getConicStops;exports.getContrastingColor=getContrastingColor;exports.normalizeDirection=normalizeDirection;exports.parseColor=parseColor;exports.rgbToChannels=rgbToChannels;exports.rgbToHex=rgbToHex;exports.toCssColor=toCssColor;exports.toCssDuration=toCssDuration;exports.toCssLength=toCssLength;

package/dist/utils-VaqPefmS.js

@@ -0,0 +1,76 @@
+const clamp$1 = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value)), toLinear = (value) => {
+  const channel = value / 255;
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}, parseHex = (value) => {
+  const hex = value.slice(1), normalized = hex.length === 3 || hex.length === 4 ? hex.slice(0, 3).split("").map((character) => character.repeat(2)).join("") : hex.slice(0, 6);
+  return normalized.length !== 6 || !/^[\da-f]{6}$/i.test(normalized) ? null : {
+    r: parseInt(normalized.slice(0, 2), 16),
+    g: parseInt(normalized.slice(2, 4), 16),
+    b: parseInt(normalized.slice(4, 6), 16)
+  };
+}, parseRgb = (value) => {
+  const match = value.match(
+    /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*[\d.]+%?)?\s*\)$/i
+  );
+  return match ? {
+    r: clamp$1(Number(match[1]), 0, 255),
+    g: clamp$1(Number(match[2]), 0, 255),
+    b: clamp$1(Number(match[3]), 0, 255)
+  } : null;
+}, parseColor = (input) => {
+  if (typeof input == "number") {
+    const value2 = input & 16777215;
+    return {
+      r: value2 >> 16 & 255,
+      g: value2 >> 8 & 255,
+      b: value2 & 255
+    };
+  }
+  const value = input.trim();
+  return value.startsWith("#") ? parseHex(value) : value.toLowerCase().startsWith("rgb") ? parseRgb(value) : null;
+}, rgbToHex = ({ r, g, b }) => `#${[r, g, b].map((channel) => Math.round(channel).toString(16).padStart(2, "0")).join("")}`, rgbToChannels = ({ r, g, b }) => `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`, colorToHex = (input, fallback) => {
+  const color = parseColor(input) ?? parseColor(fallback);
+  if (!color)
+    throw new Error(`Invalid fallback color: ${fallback}`);
+  return rgbToHex(color);
+}, relativeLuminance = (color) => 0.2126 * toLinear(color.r) + 0.7152 * toLinear(color.g) + 0.0722 * toLinear(color.b), getContrastingColor = (color) => {
+  const parsed = parseColor(color);
+  if (!parsed) return "#ffffff";
+  const luminance = relativeLuminance(parsed), whiteContrast = 1.05 / (luminance + 0.05), darkContrast = (luminance + 0.05) / 0.055;
+  return whiteContrast >= darkContrast ? "#ffffff" : "#0d0d12";
+}, DEFAULT_GRADIENT_DIRECTION = 135, DEFAULT_GRADIENT_POSITION = "center", DEFAULT_GRADIENT_SIZE = "farthest-corner", normalizeDirection = (direction = 135) => typeof direction == "number" ? `${direction}deg` : direction, toCssLength = (value) => typeof value == "number" ? `${value}px` : value, toCssDuration = (value) => typeof value == "number" ? `${value}ms` : value, clamp = (value, min = 0, max = 1) => Math.min(max, Math.max(min, value)), toCssColor = (color, opacity) => {
+  if (opacity === void 0) return color;
+  const parsed = parseColor(color);
+  return parsed ? `rgb(${rgbToChannels(parsed).replace(/,/g, "")} / ${clamp(opacity)})` : color;
+}, formatStop = ({ color, opacity, position }) => `${toCssColor(color, opacity)} ${position}%`, createStop = (color, position, opacity) => ({
+  color,
+  position
+}), getConicStops = (stops) => {
+  if (stops.length <= 1) return stops;
+  const firstHalf = stops.map((stop) => ({
+    ...stop,
+    position: stop.position / 2
+  })), secondHalf = [...stops].reverse().map((stop) => ({
+    ...stop,
+    position: 100 - stop.position / 2
+  }));
+  return [...firstHalf, ...secondHalf];
+};
+export {
+  DEFAULT_GRADIENT_DIRECTION as D,
+  rgbToHex as a,
+  clamp as b,
+  colorToHex as c,
+  DEFAULT_GRADIENT_SIZE as d,
+  DEFAULT_GRADIENT_POSITION as e,
+  formatStop as f,
+  getContrastingColor as g,
+  getConicStops as h,
+  createStop as i,
+  toCssLength as j,
+  toCssColor as k,
+  normalizeDirection as n,
+  parseColor as p,
+  rgbToChannels as r,
+  toCssDuration as t
+};