123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- /**
- * borrow from gradient-parser, but we delete some browser compatible prefix such as `-webkit-`
- * @see https://github.com/rafaelcaricio/gradient-parser
- */
- import { CSSKeywordValue, CSSUnitValue } from '../css';
- export interface LinearGradientNode {
- type: 'linear-gradient';
- orientation?: DirectionalNode | AngularNode | undefined;
- colorStops: ColorStop[];
- }
- export interface RepeatingLinearGradientNode {
- type: 'repeating-linear-gradient';
- orientation?: DirectionalNode | AngularNode | undefined;
- colorStops: ColorStop[];
- }
- export interface RadialGradientNode {
- type: 'radial-gradient';
- orientation?: (ShapeNode | DefaultRadialNode | ExtentKeywordNode)[] | undefined;
- colorStops: ColorStop[];
- }
- export interface RepeatingRadialGradientNode {
- type: 'repeating-radial-gradient';
- orientation?: (ShapeNode | DefaultRadialNode | ExtentKeywordNode)[] | undefined;
- colorStops: ColorStop[];
- }
- export interface DirectionalNode {
- type: 'directional';
- value: 'left' | 'top' | 'bottom' | 'right' | 'left top' | 'top left' | 'left bottom' | 'bottom left' | 'right top' | 'top right' | 'right bottom' | 'bottom right';
- }
- export interface AngularNode {
- type: 'angular';
- value: string;
- }
- export interface LiteralNode {
- type: 'literal';
- value: string;
- length?: PxNode | EmNode | PercentNode | undefined;
- }
- export interface HexNode {
- type: 'hex';
- value: string;
- length?: PxNode | EmNode | PercentNode | undefined;
- }
- export interface RgbNode {
- type: 'rgb';
- value: [string, string, string];
- length?: PxNode | EmNode | PercentNode | undefined;
- }
- export interface RgbaNode {
- type: 'rgba';
- value: [string, string, string, string?];
- length?: PxNode | EmNode | PercentNode | undefined;
- }
- export interface ShapeNode {
- type: 'shape';
- style?: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | undefined;
- value: 'ellipse' | 'circle';
- at?: PositionNode | undefined;
- }
- export interface DefaultRadialNode {
- type: 'default-radial';
- at: PositionNode;
- }
- export interface PositionKeywordNode {
- type: 'position-keyword';
- value: 'center' | 'left' | 'top' | 'bottom' | 'right';
- }
- export interface PositionNode {
- type: 'position';
- value: {
- x: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode;
- y: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode;
- };
- }
- export interface ExtentKeywordNode {
- type: 'extent-keyword';
- value: 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner' | 'contain' | 'cover';
- at?: PositionNode | undefined;
- }
- export interface PxNode {
- type: 'px';
- value: string;
- }
- export interface EmNode {
- type: 'em';
- value: string;
- }
- export interface PercentNode {
- type: '%';
- value: string;
- }
- export type ColorStop = LiteralNode | HexNode | RgbNode | RgbaNode;
- export type GradientNode = LinearGradientNode | RepeatingLinearGradientNode | RadialGradientNode | RepeatingRadialGradientNode;
- export declare function colorStopToString(colorStop: ColorStop): string;
- export declare const parseGradient: (code: string) => GradientNode[];
- export declare function computeLinearGradient(width: number, height: number, angle: CSSUnitValue): {
- x1: number;
- y1: number;
- x2: number;
- y2: number;
- };
- export declare function computeRadialGradient(width: number, height: number, cx: CSSUnitValue, cy: CSSUnitValue, size?: CSSUnitValue | CSSKeywordValue): {
- x: number;
- y: number;
- r: number;
- };
- //# sourceMappingURL=gradient.d.ts.map
|