gradient.d.ts 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /**
  2. * borrow from gradient-parser, but we delete some browser compatible prefix such as `-webkit-`
  3. * @see https://github.com/rafaelcaricio/gradient-parser
  4. */
  5. import { CSSKeywordValue, CSSUnitValue } from '../css';
  6. export interface LinearGradientNode {
  7. type: 'linear-gradient';
  8. orientation?: DirectionalNode | AngularNode | undefined;
  9. colorStops: ColorStop[];
  10. }
  11. export interface RepeatingLinearGradientNode {
  12. type: 'repeating-linear-gradient';
  13. orientation?: DirectionalNode | AngularNode | undefined;
  14. colorStops: ColorStop[];
  15. }
  16. export interface RadialGradientNode {
  17. type: 'radial-gradient';
  18. orientation?: (ShapeNode | DefaultRadialNode | ExtentKeywordNode)[] | undefined;
  19. colorStops: ColorStop[];
  20. }
  21. export interface RepeatingRadialGradientNode {
  22. type: 'repeating-radial-gradient';
  23. orientation?: (ShapeNode | DefaultRadialNode | ExtentKeywordNode)[] | undefined;
  24. colorStops: ColorStop[];
  25. }
  26. export interface DirectionalNode {
  27. type: 'directional';
  28. value: 'left' | 'top' | 'bottom' | 'right' | 'left top' | 'top left' | 'left bottom' | 'bottom left' | 'right top' | 'top right' | 'right bottom' | 'bottom right';
  29. }
  30. export interface AngularNode {
  31. type: 'angular';
  32. value: string;
  33. }
  34. export interface LiteralNode {
  35. type: 'literal';
  36. value: string;
  37. length?: PxNode | EmNode | PercentNode | undefined;
  38. }
  39. export interface HexNode {
  40. type: 'hex';
  41. value: string;
  42. length?: PxNode | EmNode | PercentNode | undefined;
  43. }
  44. export interface RgbNode {
  45. type: 'rgb';
  46. value: [string, string, string];
  47. length?: PxNode | EmNode | PercentNode | undefined;
  48. }
  49. export interface RgbaNode {
  50. type: 'rgba';
  51. value: [string, string, string, string?];
  52. length?: PxNode | EmNode | PercentNode | undefined;
  53. }
  54. export interface ShapeNode {
  55. type: 'shape';
  56. style?: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode | undefined;
  57. value: 'ellipse' | 'circle';
  58. at?: PositionNode | undefined;
  59. }
  60. export interface DefaultRadialNode {
  61. type: 'default-radial';
  62. at: PositionNode;
  63. }
  64. export interface PositionKeywordNode {
  65. type: 'position-keyword';
  66. value: 'center' | 'left' | 'top' | 'bottom' | 'right';
  67. }
  68. export interface PositionNode {
  69. type: 'position';
  70. value: {
  71. x: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode;
  72. y: ExtentKeywordNode | PxNode | EmNode | PercentNode | PositionKeywordNode;
  73. };
  74. }
  75. export interface ExtentKeywordNode {
  76. type: 'extent-keyword';
  77. value: 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner' | 'contain' | 'cover';
  78. at?: PositionNode | undefined;
  79. }
  80. export interface PxNode {
  81. type: 'px';
  82. value: string;
  83. }
  84. export interface EmNode {
  85. type: 'em';
  86. value: string;
  87. }
  88. export interface PercentNode {
  89. type: '%';
  90. value: string;
  91. }
  92. export type ColorStop = LiteralNode | HexNode | RgbNode | RgbaNode;
  93. export type GradientNode = LinearGradientNode | RepeatingLinearGradientNode | RadialGradientNode | RepeatingRadialGradientNode;
  94. export declare function colorStopToString(colorStop: ColorStop): string;
  95. export declare const parseGradient: (code: string) => GradientNode[];
  96. export declare function computeLinearGradient(width: number, height: number, angle: CSSUnitValue): {
  97. x1: number;
  98. y1: number;
  99. x2: number;
  100. y2: number;
  101. };
  102. export declare function computeRadialGradient(width: number, height: number, cx: CSSUnitValue, cy: CSSUnitValue, size?: CSSUnitValue | CSSKeywordValue): {
  103. x: number;
  104. y: number;
  105. r: number;
  106. };
  107. //# sourceMappingURL=gradient.d.ts.map