陈帅
6 years ago
committed by
GitHub
GitHub
14 changed files with 1524 additions and 831 deletions
@ -0,0 +1,110 @@ |
|||
/* stylelint-disable */ |
|||
.bezierEasingMixin() { |
|||
@functions: ~`(function() { |
|||
var NEWTON_ITERATIONS = 4; |
|||
var NEWTON_MIN_SLOPE = 0.001; |
|||
var SUBDIVISION_PRECISION = 0.0000001; |
|||
var SUBDIVISION_MAX_ITERATIONS = 10; |
|||
|
|||
var kSplineTableSize = 11; |
|||
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); |
|||
|
|||
var float32ArraySupported = typeof Float32Array === 'function'; |
|||
|
|||
function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; } |
|||
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; } |
|||
function C (aA1) { return 3.0 * aA1; } |
|||
|
|||
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. |
|||
function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; } |
|||
|
|||
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. |
|||
function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); } |
|||
|
|||
function binarySubdivide (aX, aA, aB, mX1, mX2) { |
|||
var currentX, currentT, i = 0; |
|||
do { |
|||
currentT = aA + (aB - aA) / 2.0; |
|||
currentX = calcBezier(currentT, mX1, mX2) - aX; |
|||
if (currentX > 0.0) { |
|||
aB = currentT; |
|||
} else { |
|||
aA = currentT; |
|||
} |
|||
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); |
|||
return currentT; |
|||
} |
|||
|
|||
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) { |
|||
for (var i = 0; i < NEWTON_ITERATIONS; ++i) { |
|||
var currentSlope = getSlope(aGuessT, mX1, mX2); |
|||
if (currentSlope === 0.0) { |
|||
return aGuessT; |
|||
} |
|||
var currentX = calcBezier(aGuessT, mX1, mX2) - aX; |
|||
aGuessT -= currentX / currentSlope; |
|||
} |
|||
return aGuessT; |
|||
} |
|||
|
|||
var BezierEasing = function (mX1, mY1, mX2, mY2) { |
|||
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { |
|||
throw new Error('bezier x values must be in [0, 1] range'); |
|||
} |
|||
|
|||
// Precompute samples table |
|||
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); |
|||
if (mX1 !== mY1 || mX2 !== mY2) { |
|||
for (var i = 0; i < kSplineTableSize; ++i) { |
|||
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); |
|||
} |
|||
} |
|||
|
|||
function getTForX (aX) { |
|||
var intervalStart = 0.0; |
|||
var currentSample = 1; |
|||
var lastSample = kSplineTableSize - 1; |
|||
|
|||
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { |
|||
intervalStart += kSampleStepSize; |
|||
} |
|||
--currentSample; |
|||
|
|||
// Interpolate to provide an initial guess for t |
|||
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]); |
|||
var guessForT = intervalStart + dist * kSampleStepSize; |
|||
|
|||
var initialSlope = getSlope(guessForT, mX1, mX2); |
|||
if (initialSlope >= NEWTON_MIN_SLOPE) { |
|||
return newtonRaphsonIterate(aX, guessForT, mX1, mX2); |
|||
} else if (initialSlope === 0.0) { |
|||
return guessForT; |
|||
} else { |
|||
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); |
|||
} |
|||
} |
|||
|
|||
return function BezierEasing (x) { |
|||
if (mX1 === mY1 && mX2 === mY2) { |
|||
return x; // linear |
|||
} |
|||
// Because JavaScript number are imprecise, we should guarantee the extremes are right. |
|||
if (x === 0) { |
|||
return 0; |
|||
} |
|||
if (x === 1) { |
|||
return 1; |
|||
} |
|||
return calcBezier(getTForX(x), mY1, mY2); |
|||
}; |
|||
}; |
|||
|
|||
this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18); |
|||
// less 3 requires a return |
|||
return ''; |
|||
})()`; |
|||
} |
|||
// It is hacky way to make this function will be compiled preferentially by less |
|||
// resolve error: `ReferenceError: colorPalette is not defined` |
|||
// https://github.com/ant-design/ant-motion/issues/44 |
|||
.bezierEasingMixin(); |
|||
@ -1,78 +0,0 @@ |
|||
const tinyColor = require('./tiny-color'); |
|||
|
|||
// We create a very complex algorithm which take the place of original tint/shade color system
|
|||
// to make sure no one can understand it 👻
|
|||
// and create an entire color palette magicly by inputing just a single primary color.
|
|||
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
|
|||
module.exports = { |
|||
install: function(less, pluginManager, functions) { |
|||
functions.add('color-palette', function(arg1, arg2) { |
|||
const color = arg1.value; |
|||
const index = arg2.value; |
|||
|
|||
var hueStep = 2; |
|||
var saturationStep = 16; |
|||
var saturationStep2 = 5; |
|||
var brightnessStep1 = 5; |
|||
var brightnessStep2 = 15; |
|||
var lightColorCount = 5; |
|||
var darkColorCount = 4; |
|||
|
|||
var getHue = function(hsv, i, isLight) { |
|||
var hue; |
|||
if (hsv.h >= 60 && hsv.h <= 240) { |
|||
hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; |
|||
} else { |
|||
hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; |
|||
} |
|||
if (hue < 0) { |
|||
hue += 360; |
|||
} else if (hue >= 360) { |
|||
hue -= 360; |
|||
} |
|||
return Math.round(hue); |
|||
}; |
|||
|
|||
var getSaturation = function(hsv, i, isLight) { |
|||
var saturation; |
|||
if (isLight) { |
|||
saturation = Math.round(hsv.s * 100) - saturationStep * i; |
|||
} else if (i == darkColorCount) { |
|||
saturation = Math.round(hsv.s * 100) + saturationStep; |
|||
} else { |
|||
saturation = Math.round(hsv.s * 100) + saturationStep2 * i; |
|||
} |
|||
if (saturation > 100) { |
|||
saturation = 100; |
|||
} |
|||
if (isLight && i === lightColorCount && saturation > 10) { |
|||
saturation = 10; |
|||
} |
|||
if (saturation < 6) { |
|||
saturation = 6; |
|||
} |
|||
return Math.round(saturation); |
|||
}; |
|||
var getValue = function(hsv, i, isLight) { |
|||
if (isLight) { |
|||
return Math.round(hsv.v * 100) + brightnessStep1 * i; |
|||
} |
|||
return Math.round(hsv.v * 100) - brightnessStep2 * i; |
|||
}; |
|||
|
|||
// Calculation
|
|||
return (function() { |
|||
var isLight = index <= 6; |
|||
var hsv = tinyColor(color).toHsv(); |
|||
var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; |
|||
const newColor = tinyColor({ |
|||
h: getHue(hsv, i, isLight), |
|||
s: getSaturation(hsv, i, isLight), |
|||
v: getValue(hsv, i, isLight), |
|||
}).toLessColor(less); |
|||
|
|||
return newColor; |
|||
})(); |
|||
}); |
|||
}, |
|||
}; |
|||
@ -0,0 +1,75 @@ |
|||
/* stylelint-disable no-duplicate-selectors */ |
|||
@import "bezierEasing"; |
|||
@import "tinyColor"; |
|||
|
|||
// We create a very complex algorithm which take the place of original tint/shade color system |
|||
// to make sure no one can understand it 👻 |
|||
// and create an entire color palette magicly by inputing just a single primary color. |
|||
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin |
|||
.colorPaletteMixin() { |
|||
@functions: ~`(function() { |
|||
var hueStep = 2; |
|||
var saturationStep = 16; |
|||
var saturationStep2 = 5; |
|||
var brightnessStep1 = 5; |
|||
var brightnessStep2 = 15; |
|||
var lightColorCount = 5; |
|||
var darkColorCount = 4; |
|||
|
|||
var getHue = function(hsv, i, isLight) { |
|||
var hue; |
|||
if (hsv.h >= 60 && hsv.h <= 240) { |
|||
hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i; |
|||
} else { |
|||
hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i; |
|||
} |
|||
if (hue < 0) { |
|||
hue += 360; |
|||
} else if (hue >= 360) { |
|||
hue -= 360; |
|||
} |
|||
return Math.round(hue); |
|||
}; |
|||
var getSaturation = function(hsv, i, isLight) { |
|||
var saturation; |
|||
if (isLight) { |
|||
saturation = Math.round(hsv.s * 100) - saturationStep * i; |
|||
} else if (i == darkColorCount) { |
|||
saturation = Math.round(hsv.s * 100) + saturationStep; |
|||
} else { |
|||
saturation = Math.round(hsv.s * 100) + saturationStep2 * i; |
|||
} |
|||
if (saturation > 100) { |
|||
saturation = 100; |
|||
} |
|||
if (isLight && i === lightColorCount && saturation > 10) { |
|||
saturation = 10; |
|||
} |
|||
if (saturation < 6) { |
|||
saturation = 6; |
|||
} |
|||
return Math.round(saturation); |
|||
}; |
|||
var getValue = function(hsv, i, isLight) { |
|||
if (isLight) { |
|||
return Math.round(hsv.v * 100) + brightnessStep1 * i; |
|||
} |
|||
return Math.round(hsv.v * 100) - brightnessStep2 * i; |
|||
}; |
|||
|
|||
this.colorPalette = function(color, index) { |
|||
var isLight = index <= 6; |
|||
var hsv = tinycolor(color).toHsv(); |
|||
var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1; |
|||
return tinycolor({ |
|||
h: getHue(hsv, i, isLight), |
|||
s: getSaturation(hsv, i, isLight), |
|||
v: getValue(hsv, i, isLight), |
|||
}).toHexString(); |
|||
}; |
|||
})()`; |
|||
} |
|||
// It is hacky way to make this function will be compiled preferentially by less |
|||
// resolve error: `ReferenceError: colorPalette is not defined` |
|||
// https://github.com/ant-design/ant-motion/issues/44 |
|||
.colorPaletteMixin(); |
|||
@ -1,150 +1,146 @@ |
|||
@plugin 'color-palette'; |
|||
|
|||
// Less has bug for inline plugin. |
|||
// We have to import an empty nest file for the less tree parse. |
|||
@import 'lessFix'; |
|||
@import 'colorPalette'; |
|||
|
|||
// color palettes |
|||
@blue-1: color-palette(@blue-6, 1); |
|||
@blue-2: color-palette(@blue-6, 2); |
|||
@blue-3: color-palette(@blue-6, 3); |
|||
@blue-4: color-palette(@blue-6, 4); |
|||
@blue-5: color-palette(@blue-6, 5); |
|||
@blue-1: color(~`colorPalette('@{blue-6}', 1) `); |
|||
@blue-2: color(~`colorPalette('@{blue-6}', 2) `); |
|||
@blue-3: color(~`colorPalette('@{blue-6}', 3) `); |
|||
@blue-4: color(~`colorPalette('@{blue-6}', 4) `); |
|||
@blue-5: color(~`colorPalette('@{blue-6}', 5) `); |
|||
@blue-6: #1890ff; |
|||
@blue-7: color-palette(@blue-6, 7); |
|||
@blue-8: color-palette(@blue-6, 8); |
|||
@blue-9: color-palette(@blue-6, 9); |
|||
@blue-10: color-palette(@blue-6, 10); |
|||
@blue-7: color(~`colorPalette('@{blue-6}', 7) `); |
|||
@blue-8: color(~`colorPalette('@{blue-6}', 8) `); |
|||
@blue-9: color(~`colorPalette('@{blue-6}', 9) `); |
|||
@blue-10: color(~`colorPalette('@{blue-6}', 10) `); |
|||
|
|||
@purple-1: color-palette(@purple-6, 1); |
|||
@purple-2: color-palette(@purple-6, 2); |
|||
@purple-3: color-palette(@purple-6, 3); |
|||
@purple-4: color-palette(@purple-6, 4); |
|||
@purple-5: color-palette(@purple-6, 5); |
|||
@purple-1: color(~`colorPalette('@{purple-6}', 1) `); |
|||
@purple-2: color(~`colorPalette('@{purple-6}', 2) `); |
|||
@purple-3: color(~`colorPalette('@{purple-6}', 3) `); |
|||
@purple-4: color(~`colorPalette('@{purple-6}', 4) `); |
|||
@purple-5: color(~`colorPalette('@{purple-6}', 5) `); |
|||
@purple-6: #722ed1; |
|||
@purple-7: color-palette(@purple-6, 7); |
|||
@purple-8: color-palette(@purple-6, 8); |
|||
@purple-9: color-palette(@purple-6, 9); |
|||
@purple-10: color-palette(@purple-6, 10); |
|||
@purple-7: color(~`colorPalette('@{purple-6}', 7) `); |
|||
@purple-8: color(~`colorPalette('@{purple-6}', 8) `); |
|||
@purple-9: color(~`colorPalette('@{purple-6}', 9) `); |
|||
@purple-10: color(~`colorPalette('@{purple-6}', 10) `); |
|||
|
|||
@cyan-1: color-palette(@cyan-6, 1); |
|||
@cyan-2: color-palette(@cyan-6, 2); |
|||
@cyan-3: color-palette(@cyan-6, 3); |
|||
@cyan-4: color-palette(@cyan-6, 4); |
|||
@cyan-5: color-palette(@cyan-6, 5); |
|||
@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `); |
|||
@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `); |
|||
@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `); |
|||
@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `); |
|||
@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `); |
|||
@cyan-6: #13c2c2; |
|||
@cyan-7: color-palette(@cyan-6, 7); |
|||
@cyan-8: color-palette(@cyan-6, 8); |
|||
@cyan-9: color-palette(@cyan-6, 9); |
|||
@cyan-10: color-palette(@cyan-6, 10); |
|||
@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `); |
|||
@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `); |
|||
@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `); |
|||
@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `); |
|||
|
|||
@green-1: color-palette(@green-6, 1); |
|||
@green-2: color-palette(@green-6, 2); |
|||
@green-3: color-palette(@green-6, 3); |
|||
@green-4: color-palette(@green-6, 4); |
|||
@green-5: color-palette(@green-6, 5); |
|||
@green-1: color(~`colorPalette('@{green-6}', 1) `); |
|||
@green-2: color(~`colorPalette('@{green-6}', 2) `); |
|||
@green-3: color(~`colorPalette('@{green-6}', 3) `); |
|||
@green-4: color(~`colorPalette('@{green-6}', 4) `); |
|||
@green-5: color(~`colorPalette('@{green-6}', 5) `); |
|||
@green-6: #52c41a; |
|||
@green-7: color-palette(@green-6, 7); |
|||
@green-8: color-palette(@green-6, 8); |
|||
@green-9: color-palette(@green-6, 9); |
|||
@green-10: color-palette(@green-6, 10); |
|||
@green-7: color(~`colorPalette('@{green-6}', 7) `); |
|||
@green-8: color(~`colorPalette('@{green-6}', 8) `); |
|||
@green-9: color(~`colorPalette('@{green-6}', 9) `); |
|||
@green-10: color(~`colorPalette('@{green-6}', 10) `); |
|||
|
|||
@magenta-1: color-palette(@magenta-6, 1); |
|||
@magenta-2: color-palette(@magenta-6, 2); |
|||
@magenta-3: color-palette(@magenta-6, 3); |
|||
@magenta-4: color-palette(@magenta-6, 4); |
|||
@magenta-5: color-palette(@magenta-6, 5); |
|||
@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `); |
|||
@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `); |
|||
@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `); |
|||
@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `); |
|||
@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `); |
|||
@magenta-6: #eb2f96; |
|||
@magenta-7: color-palette(@magenta-6, 7); |
|||
@magenta-8: color-palette(@magenta-6, 8); |
|||
@magenta-9: color-palette(@magenta-6, 9); |
|||
@magenta-10: color-palette(@magenta-6, 10); |
|||
@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `); |
|||
@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `); |
|||
@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `); |
|||
@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `); |
|||
|
|||
// alias of magenta |
|||
@pink-1: color-palette(@pink-6, 1); |
|||
@pink-2: color-palette(@pink-6, 2); |
|||
@pink-3: color-palette(@pink-6, 3); |
|||
@pink-4: color-palette(@pink-6, 4); |
|||
@pink-5: color-palette(@pink-6, 5); |
|||
@pink-1: color(~`colorPalette('@{pink-6}', 1) `); |
|||
@pink-2: color(~`colorPalette('@{pink-6}', 2) `); |
|||
@pink-3: color(~`colorPalette('@{pink-6}', 3) `); |
|||
@pink-4: color(~`colorPalette('@{pink-6}', 4) `); |
|||
@pink-5: color(~`colorPalette('@{pink-6}', 5) `); |
|||
@pink-6: #eb2f96; |
|||
@pink-7: color-palette(@pink-6, 7); |
|||
@pink-8: color-palette(@pink-6, 8); |
|||
@pink-9: color-palette(@pink-6, 9); |
|||
@pink-10: color-palette(@pink-6, 10); |
|||
@pink-7: color(~`colorPalette('@{pink-6}', 7) `); |
|||
@pink-8: color(~`colorPalette('@{pink-6}', 8) `); |
|||
@pink-9: color(~`colorPalette('@{pink-6}', 9) `); |
|||
@pink-10: color(~`colorPalette('@{pink-6}', 10) `); |
|||
|
|||
@red-1: color-palette(@red-6, 1); |
|||
@red-2: color-palette(@red-6, 2); |
|||
@red-3: color-palette(@red-6, 3); |
|||
@red-4: color-palette(@red-6, 4); |
|||
@red-5: color-palette(@red-6, 5); |
|||
@red-1: color(~`colorPalette('@{red-6}', 1) `); |
|||
@red-2: color(~`colorPalette('@{red-6}', 2) `); |
|||
@red-3: color(~`colorPalette('@{red-6}', 3) `); |
|||
@red-4: color(~`colorPalette('@{red-6}', 4) `); |
|||
@red-5: color(~`colorPalette('@{red-6}', 5) `); |
|||
@red-6: #f5222d; |
|||
@red-7: color-palette(@red-6, 7); |
|||
@red-8: color-palette(@red-6, 8); |
|||
@red-9: color-palette(@red-6, 9); |
|||
@red-10: color-palette(@red-6, 10); |
|||
@red-7: color(~`colorPalette('@{red-6}', 7) `); |
|||
@red-8: color(~`colorPalette('@{red-6}', 8) `); |
|||
@red-9: color(~`colorPalette('@{red-6}', 9) `); |
|||
@red-10: color(~`colorPalette('@{red-6}', 10) `); |
|||
|
|||
@orange-1: color-palette(@orange-6, 1); |
|||
@orange-2: color-palette(@orange-6, 2); |
|||
@orange-3: color-palette(@orange-6, 3); |
|||
@orange-4: color-palette(@orange-6, 4); |
|||
@orange-5: color-palette(@orange-6, 5); |
|||
@orange-1: color(~`colorPalette('@{orange-6}', 1) `); |
|||
@orange-2: color(~`colorPalette('@{orange-6}', 2) `); |
|||
@orange-3: color(~`colorPalette('@{orange-6}', 3) `); |
|||
@orange-4: color(~`colorPalette('@{orange-6}', 4) `); |
|||
@orange-5: color(~`colorPalette('@{orange-6}', 5) `); |
|||
@orange-6: #fa8c16; |
|||
@orange-7: color-palette(@orange-6, 7); |
|||
@orange-8: color-palette(@orange-6, 8); |
|||
@orange-9: color-palette(@orange-6, 9); |
|||
@orange-10: color-palette(@orange-6, 10); |
|||
@orange-7: color(~`colorPalette('@{orange-6}', 7) `); |
|||
@orange-8: color(~`colorPalette('@{orange-6}', 8) `); |
|||
@orange-9: color(~`colorPalette('@{orange-6}', 9) `); |
|||
@orange-10: color(~`colorPalette('@{orange-6}', 10) `); |
|||
|
|||
@yellow-1: color-palette(@yellow-6, 1); |
|||
@yellow-2: color-palette(@yellow-6, 2); |
|||
@yellow-3: color-palette(@yellow-6, 3); |
|||
@yellow-4: color-palette(@yellow-6, 4); |
|||
@yellow-5: color-palette(@yellow-6, 5); |
|||
@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `); |
|||
@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `); |
|||
@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `); |
|||
@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `); |
|||
@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `); |
|||
@yellow-6: #fadb14; |
|||
@yellow-7: color-palette(@yellow-6, 7); |
|||
@yellow-8: color-palette(@yellow-6, 8); |
|||
@yellow-9: color-palette(@yellow-6, 9); |
|||
@yellow-10: color-palette(@yellow-6, 10); |
|||
@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `); |
|||
@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `); |
|||
@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `); |
|||
@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `); |
|||
|
|||
@volcano-1: color-palette(@volcano-6, 1); |
|||
@volcano-2: color-palette(@volcano-6, 2); |
|||
@volcano-3: color-palette(@volcano-6, 3); |
|||
@volcano-4: color-palette(@volcano-6, 4); |
|||
@volcano-5: color-palette(@volcano-6, 5); |
|||
@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `); |
|||
@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `); |
|||
@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `); |
|||
@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `); |
|||
@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `); |
|||
@volcano-6: #fa541c; |
|||
@volcano-7: color-palette(@volcano-6, 7); |
|||
@volcano-8: color-palette(@volcano-6, 8); |
|||
@volcano-9: color-palette(@volcano-6, 9); |
|||
@volcano-10: color-palette(@volcano-6, 10); |
|||
@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `); |
|||
@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `); |
|||
@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `); |
|||
@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `); |
|||
|
|||
@geekblue-1: color-palette(@geekblue-6, 1); |
|||
@geekblue-2: color-palette(@geekblue-6, 2); |
|||
@geekblue-3: color-palette(@geekblue-6, 3); |
|||
@geekblue-4: color-palette(@geekblue-6, 4); |
|||
@geekblue-5: color-palette(@geekblue-6, 5); |
|||
@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `); |
|||
@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `); |
|||
@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `); |
|||
@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `); |
|||
@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `); |
|||
@geekblue-6: #2f54eb; |
|||
@geekblue-7: color-palette(@geekblue-6, 7); |
|||
@geekblue-8: color-palette(@geekblue-6, 8); |
|||
@geekblue-9: color-palette(@geekblue-6, 9); |
|||
@geekblue-10: color-palette(@geekblue-6, 10); |
|||
@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `); |
|||
@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `); |
|||
@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `); |
|||
@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `); |
|||
|
|||
@lime-1: color-palette(@lime-6, 1); |
|||
@lime-2: color-palette(@lime-6, 2); |
|||
@lime-3: color-palette(@lime-6, 3); |
|||
@lime-4: color-palette(@lime-6, 4); |
|||
@lime-5: color-palette(@lime-6, 5); |
|||
@lime-1: color(~`colorPalette('@{lime-6}', 1) `); |
|||
@lime-2: color(~`colorPalette('@{lime-6}', 2) `); |
|||
@lime-3: color(~`colorPalette('@{lime-6}', 3) `); |
|||
@lime-4: color(~`colorPalette('@{lime-6}', 4) `); |
|||
@lime-5: color(~`colorPalette('@{lime-6}', 5) `); |
|||
@lime-6: #a0d911; |
|||
@lime-7: color-palette(@lime-6, 7); |
|||
@lime-8: color-palette(@lime-6, 8); |
|||
@lime-9: color-palette(@lime-6, 9); |
|||
@lime-10: color-palette(@lime-6, 10); |
|||
@lime-7: color(~`colorPalette('@{lime-6}', 7) `); |
|||
@lime-8: color(~`colorPalette('@{lime-6}', 8) `); |
|||
@lime-9: color(~`colorPalette('@{lime-6}', 9) `); |
|||
@lime-10: color(~`colorPalette('@{lime-6}', 10) `); |
|||
|
|||
@gold-1: color-palette(@gold-6, 1); |
|||
@gold-2: color-palette(@gold-6, 2); |
|||
@gold-3: color-palette(@gold-6, 3); |
|||
@gold-4: color-palette(@gold-6, 4); |
|||
@gold-5: color-palette(@gold-6, 5); |
|||
@gold-1: color(~`colorPalette('@{gold-6}', 1) `); |
|||
@gold-2: color(~`colorPalette('@{gold-6}', 2) `); |
|||
@gold-3: color(~`colorPalette('@{gold-6}', 3) `); |
|||
@gold-4: color(~`colorPalette('@{gold-6}', 4) `); |
|||
@gold-5: color(~`colorPalette('@{gold-6}', 5) `); |
|||
@gold-6: #faad14; |
|||
@gold-7: color-palette(@gold-6, 7); |
|||
@gold-8: color-palette(@gold-6, 8); |
|||
@gold-9: color-palette(@gold-6, 9); |
|||
@gold-10: color-palette(@gold-6, 10); |
|||
@gold-7: color(~`colorPalette('@{gold-6}', 7) `); |
|||
@gold-8: color(~`colorPalette('@{gold-6}', 8) `); |
|||
@gold-9: color(~`colorPalette('@{gold-6}', 9) `); |
|||
@gold-10: color(~`colorPalette('@{gold-6}', 10) `); |
|||
|
|||
@ -1 +0,0 @@ |
|||
// Do not remove |
|||
@ -1 +0,0 @@ |
|||
@import './empty'; |
|||
@ -1,594 +0,0 @@ |
|||
// TinyColor v1.4.1
|
|||
// https://github.com/bgrins/TinyColor
|
|||
// 2016-07-07, Brian Grinstead, MIT License
|
|||
var trimLeft = /^\s+/, |
|||
trimRight = /\s+$/, |
|||
tinyCounter = 0, |
|||
mathRound = Math.round, |
|||
mathMin = Math.min, |
|||
mathMax = Math.max; |
|||
|
|||
function tinycolor(color, opts) { |
|||
color = color ? color : ''; |
|||
opts = opts || {}; |
|||
|
|||
// If we are called as a function, call using new instead
|
|||
if (!(this instanceof tinycolor)) { |
|||
return new tinycolor(color, opts); |
|||
} |
|||
|
|||
var rgb = inputToRGB(color); |
|||
(this._originalInput = color), |
|||
(this._r = rgb.r), |
|||
(this._g = rgb.g), |
|||
(this._b = rgb.b), |
|||
(this._a = rgb.a), |
|||
(this._roundA = mathRound(100 * this._a) / 100), |
|||
(this._format = opts.format || rgb.format); |
|||
this._gradientType = opts.gradientType; |
|||
|
|||
// Don't let the range of [0,255] come back in [0,1].
|
|||
// Potentially lose a little bit of precision here, but will fix issues where
|
|||
// .5 gets interpreted as half of the total, instead of half of 1
|
|||
// If it was supposed to be 128, this was already taken care of by inputToRgb
|
|||
if (this._r < 1) { |
|||
this._r = mathRound(this._r); |
|||
} |
|||
if (this._g < 1) { |
|||
this._g = mathRound(this._g); |
|||
} |
|||
if (this._b < 1) { |
|||
this._b = mathRound(this._b); |
|||
} |
|||
|
|||
this._ok = rgb.ok; |
|||
this._tc_id = tinyCounter++; |
|||
} |
|||
|
|||
tinycolor.prototype = { |
|||
toHsv: function() { |
|||
var hsv = rgbToHsv(this._r, this._g, this._b); |
|||
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; |
|||
}, |
|||
toLessColor: function(less) { |
|||
return less.color([this._r, this._g, this._b], this._a); |
|||
}, |
|||
}; |
|||
|
|||
// Given a string or object, convert that input to RGB
|
|||
// Possible string inputs:
|
|||
//
|
|||
// "red"
|
|||
// "#f00" or "f00"
|
|||
// "#ff0000" or "ff0000"
|
|||
// "#ff000000" or "ff000000"
|
|||
// "rgb 255 0 0" or "rgb (255, 0, 0)"
|
|||
// "rgb 1.0 0 0" or "rgb (1, 0, 0)"
|
|||
// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
|
|||
// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
|
|||
// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
|
|||
// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
|
|||
// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
|
|||
//
|
|||
function inputToRGB(color) { |
|||
var rgb = { r: 0, g: 0, b: 0 }; |
|||
var a = 1; |
|||
var s = null; |
|||
var v = null; |
|||
var l = null; |
|||
var ok = false; |
|||
var format = false; |
|||
|
|||
if (typeof color == 'string') { |
|||
color = stringInputToObject(color); |
|||
} |
|||
|
|||
if (typeof color == 'object') { |
|||
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) { |
|||
rgb = rgbToRgb(color.r, color.g, color.b); |
|||
ok = true; |
|||
format = String(color.r).substr(-1) === '%' ? 'prgb' : 'rgb'; |
|||
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) { |
|||
s = convertToPercentage(color.s); |
|||
v = convertToPercentage(color.v); |
|||
rgb = hsvToRgb(color.h, s, v); |
|||
ok = true; |
|||
format = 'hsv'; |
|||
} else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) { |
|||
s = convertToPercentage(color.s); |
|||
l = convertToPercentage(color.l); |
|||
rgb = hslToRgb(color.h, s, l); |
|||
ok = true; |
|||
format = 'hsl'; |
|||
} |
|||
|
|||
if (color.hasOwnProperty('a')) { |
|||
a = color.a; |
|||
} |
|||
} |
|||
|
|||
a = boundAlpha(a); |
|||
|
|||
return { |
|||
ok: ok, |
|||
format: color.format || format, |
|||
r: mathMin(255, mathMax(rgb.r, 0)), |
|||
g: mathMin(255, mathMax(rgb.g, 0)), |
|||
b: mathMin(255, mathMax(rgb.b, 0)), |
|||
a: a, |
|||
}; |
|||
} |
|||
|
|||
// Conversion Functions
|
|||
// --------------------
|
|||
|
|||
// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from:
|
|||
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
|
|||
|
|||
// rgbToRgb
|
|||
// Handle bounds / percentage checking to conform to CSS color spec
|
|||
// <http://www.w3.org/TR/css3-color/>
|
|||
// *Assumes:* r, g, b in [0, 255] or [0, 1]
|
|||
// *Returns:* { r, g, b } in [0, 255]
|
|||
function rgbToRgb(r, g, b) { |
|||
return { |
|||
r: bound01(r, 255) * 255, |
|||
g: bound01(g, 255) * 255, |
|||
b: bound01(b, 255) * 255, |
|||
}; |
|||
} |
|||
|
|||
// hslToRgb
|
|||
// Converts an HSL color value to RGB.
|
|||
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
|
|||
// *Returns:* { r, g, b } in the set [0, 255]
|
|||
function hslToRgb(h, s, l) { |
|||
var r, g, b; |
|||
|
|||
h = bound01(h, 360); |
|||
s = bound01(s, 100); |
|||
l = bound01(l, 100); |
|||
|
|||
function hue2rgb(p, q, t) { |
|||
if (t < 0) t += 1; |
|||
if (t > 1) t -= 1; |
|||
if (t < 1 / 6) return p + (q - p) * 6 * t; |
|||
if (t < 1 / 2) return q; |
|||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; |
|||
return p; |
|||
} |
|||
|
|||
if (s === 0) { |
|||
r = g = b = l; // achromatic
|
|||
} else { |
|||
var q = l < 0.5 ? l * (1 + s) : l + s - l * s; |
|||
var p = 2 * l - q; |
|||
r = hue2rgb(p, q, h + 1 / 3); |
|||
g = hue2rgb(p, q, h); |
|||
b = hue2rgb(p, q, h - 1 / 3); |
|||
} |
|||
|
|||
return { r: r * 255, g: g * 255, b: b * 255 }; |
|||
} |
|||
|
|||
// rgbToHsv
|
|||
// Converts an RGB color value to HSV
|
|||
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
|
|||
// *Returns:* { h, s, v } in [0,1]
|
|||
function rgbToHsv(r, g, b) { |
|||
r = bound01(r, 255); |
|||
g = bound01(g, 255); |
|||
b = bound01(b, 255); |
|||
|
|||
var max = mathMax(r, g, b), |
|||
min = mathMin(r, g, b); |
|||
var h, |
|||
s, |
|||
v = max; |
|||
|
|||
var d = max - min; |
|||
s = max === 0 ? 0 : d / max; |
|||
|
|||
if (max == min) { |
|||
h = 0; // achromatic
|
|||
} else { |
|||
switch (max) { |
|||
case r: |
|||
h = (g - b) / d + (g < b ? 6 : 0); |
|||
break; |
|||
case g: |
|||
h = (b - r) / d + 2; |
|||
break; |
|||
case b: |
|||
h = (r - g) / d + 4; |
|||
break; |
|||
} |
|||
h /= 6; |
|||
} |
|||
return { h: h, s: s, v: v }; |
|||
} |
|||
|
|||
// hsvToRgb
|
|||
// Converts an HSV color value to RGB.
|
|||
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
|
|||
// *Returns:* { r, g, b } in the set [0, 255]
|
|||
function hsvToRgb(h, s, v) { |
|||
h = bound01(h, 360) * 6; |
|||
s = bound01(s, 100); |
|||
v = bound01(v, 100); |
|||
|
|||
var i = Math.floor(h), |
|||
f = h - i, |
|||
p = v * (1 - s), |
|||
q = v * (1 - f * s), |
|||
t = v * (1 - (1 - f) * s), |
|||
mod = i % 6, |
|||
r = [v, q, p, p, t, v][mod], |
|||
g = [t, v, v, q, p, p][mod], |
|||
b = [p, p, t, v, v, q][mod]; |
|||
|
|||
return { r: r * 255, g: g * 255, b: b * 255 }; |
|||
} |
|||
|
|||
// Big List of Colors
|
|||
// ------------------
|
|||
// <http://www.w3.org/TR/css3-color/#svg-color>
|
|||
var names = (tinycolor.names = { |
|||
aliceblue: 'f0f8ff', |
|||
antiquewhite: 'faebd7', |
|||
aqua: '0ff', |
|||
aquamarine: '7fffd4', |
|||
azure: 'f0ffff', |
|||
beige: 'f5f5dc', |
|||
bisque: 'ffe4c4', |
|||
black: '000', |
|||
blanchedalmond: 'ffebcd', |
|||
blue: '00f', |
|||
blueviolet: '8a2be2', |
|||
brown: 'a52a2a', |
|||
burlywood: 'deb887', |
|||
burntsienna: 'ea7e5d', |
|||
cadetblue: '5f9ea0', |
|||
chartreuse: '7fff00', |
|||
chocolate: 'd2691e', |
|||
coral: 'ff7f50', |
|||
cornflowerblue: '6495ed', |
|||
cornsilk: 'fff8dc', |
|||
crimson: 'dc143c', |
|||
cyan: '0ff', |
|||
darkblue: '00008b', |
|||
darkcyan: '008b8b', |
|||
darkgoldenrod: 'b8860b', |
|||
darkgray: 'a9a9a9', |
|||
darkgreen: '006400', |
|||
darkgrey: 'a9a9a9', |
|||
darkkhaki: 'bdb76b', |
|||
darkmagenta: '8b008b', |
|||
darkolivegreen: '556b2f', |
|||
darkorange: 'ff8c00', |
|||
darkorchid: '9932cc', |
|||
darkred: '8b0000', |
|||
darksalmon: 'e9967a', |
|||
darkseagreen: '8fbc8f', |
|||
darkslateblue: '483d8b', |
|||
darkslategray: '2f4f4f', |
|||
darkslategrey: '2f4f4f', |
|||
darkturquoise: '00ced1', |
|||
darkviolet: '9400d3', |
|||
deeppink: 'ff1493', |
|||
deepskyblue: '00bfff', |
|||
dimgray: '696969', |
|||
dimgrey: '696969', |
|||
dodgerblue: '1e90ff', |
|||
firebrick: 'b22222', |
|||
floralwhite: 'fffaf0', |
|||
forestgreen: '228b22', |
|||
fuchsia: 'f0f', |
|||
gainsboro: 'dcdcdc', |
|||
ghostwhite: 'f8f8ff', |
|||
gold: 'ffd700', |
|||
goldenrod: 'daa520', |
|||
gray: '808080', |
|||
green: '008000', |
|||
greenyellow: 'adff2f', |
|||
grey: '808080', |
|||
honeydew: 'f0fff0', |
|||
hotpink: 'ff69b4', |
|||
indianred: 'cd5c5c', |
|||
indigo: '4b0082', |
|||
ivory: 'fffff0', |
|||
khaki: 'f0e68c', |
|||
lavender: 'e6e6fa', |
|||
lavenderblush: 'fff0f5', |
|||
lawngreen: '7cfc00', |
|||
lemonchiffon: 'fffacd', |
|||
lightblue: 'add8e6', |
|||
lightcoral: 'f08080', |
|||
lightcyan: 'e0ffff', |
|||
lightgoldenrodyellow: 'fafad2', |
|||
lightgray: 'd3d3d3', |
|||
lightgreen: '90ee90', |
|||
lightgrey: 'd3d3d3', |
|||
lightpink: 'ffb6c1', |
|||
lightsalmon: 'ffa07a', |
|||
lightseagreen: '20b2aa', |
|||
lightskyblue: '87cefa', |
|||
lightslategray: '789', |
|||
lightslategrey: '789', |
|||
lightsteelblue: 'b0c4de', |
|||
lightyellow: 'ffffe0', |
|||
lime: '0f0', |
|||
limegreen: '32cd32', |
|||
linen: 'faf0e6', |
|||
magenta: 'f0f', |
|||
maroon: '800000', |
|||
mediumaquamarine: '66cdaa', |
|||
mediumblue: '0000cd', |
|||
mediumorchid: 'ba55d3', |
|||
mediumpurple: '9370db', |
|||
mediumseagreen: '3cb371', |
|||
mediumslateblue: '7b68ee', |
|||
mediumspringgreen: '00fa9a', |
|||
mediumturquoise: '48d1cc', |
|||
mediumvioletred: 'c71585', |
|||
midnightblue: '191970', |
|||
mintcream: 'f5fffa', |
|||
mistyrose: 'ffe4e1', |
|||
moccasin: 'ffe4b5', |
|||
navajowhite: 'ffdead', |
|||
navy: '000080', |
|||
oldlace: 'fdf5e6', |
|||
olive: '808000', |
|||
olivedrab: '6b8e23', |
|||
orange: 'ffa500', |
|||
orangered: 'ff4500', |
|||
orchid: 'da70d6', |
|||
palegoldenrod: 'eee8aa', |
|||
palegreen: '98fb98', |
|||
paleturquoise: 'afeeee', |
|||
palevioletred: 'db7093', |
|||
papayawhip: 'ffefd5', |
|||
peachpuff: 'ffdab9', |
|||
peru: 'cd853f', |
|||
pink: 'ffc0cb', |
|||
plum: 'dda0dd', |
|||
powderblue: 'b0e0e6', |
|||
purple: '800080', |
|||
rebeccapurple: '663399', |
|||
red: 'f00', |
|||
rosybrown: 'bc8f8f', |
|||
royalblue: '4169e1', |
|||
saddlebrown: '8b4513', |
|||
salmon: 'fa8072', |
|||
sandybrown: 'f4a460', |
|||
seagreen: '2e8b57', |
|||
seashell: 'fff5ee', |
|||
sienna: 'a0522d', |
|||
silver: 'c0c0c0', |
|||
skyblue: '87ceeb', |
|||
slateblue: '6a5acd', |
|||
slategray: '708090', |
|||
slategrey: '708090', |
|||
snow: 'fffafa', |
|||
springgreen: '00ff7f', |
|||
steelblue: '4682b4', |
|||
tan: 'd2b48c', |
|||
teal: '008080', |
|||
thistle: 'd8bfd8', |
|||
tomato: 'ff6347', |
|||
turquoise: '40e0d0', |
|||
violet: 'ee82ee', |
|||
wheat: 'f5deb3', |
|||
white: 'fff', |
|||
whitesmoke: 'f5f5f5', |
|||
yellow: 'ff0', |
|||
yellowgreen: '9acd32', |
|||
}); |
|||
|
|||
// Utilities
|
|||
// ---------
|
|||
|
|||
// Return a valid alpha value [0,1] with all invalid values being set to 1
|
|||
function boundAlpha(a) { |
|||
a = parseFloat(a); |
|||
|
|||
if (isNaN(a) || a < 0 || a > 1) { |
|||
a = 1; |
|||
} |
|||
|
|||
return a; |
|||
} |
|||
|
|||
// Take input from [0, n] and return it as [0, 1]
|
|||
function bound01(n, max) { |
|||
if (isOnePointZero(n)) { |
|||
n = '100%'; |
|||
} |
|||
|
|||
var processPercent = isPercentage(n); |
|||
n = mathMin(max, mathMax(0, parseFloat(n))); |
|||
|
|||
// Automatically convert percentage into number
|
|||
if (processPercent) { |
|||
n = parseInt(n * max, 10) / 100; |
|||
} |
|||
|
|||
// Handle floating point rounding errors
|
|||
if (Math.abs(n - max) < 0.000001) { |
|||
return 1; |
|||
} |
|||
|
|||
// Convert into [0, 1] range if it isn't already
|
|||
return (n % max) / parseFloat(max); |
|||
} |
|||
|
|||
// Force a number between 0 and 1
|
|||
function clamp01(val) { |
|||
return mathMin(1, mathMax(0, val)); |
|||
} |
|||
|
|||
// Parse a base-16 hex value into a base-10 integer
|
|||
function parseIntFromHex(val) { |
|||
return parseInt(val, 16); |
|||
} |
|||
|
|||
// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
|
|||
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
|
|||
function isOnePointZero(n) { |
|||
return typeof n == 'string' && n.indexOf('.') != -1 && parseFloat(n) === 1; |
|||
} |
|||
|
|||
// Check to see if string passed in is a percentage
|
|||
function isPercentage(n) { |
|||
return typeof n === 'string' && n.indexOf('%') != -1; |
|||
} |
|||
|
|||
// Force a hex value to have 2 characters
|
|||
function pad2(c) { |
|||
return c.length == 1 ? '0' + c : '' + c; |
|||
} |
|||
|
|||
// Replace a decimal with it's percentage value
|
|||
function convertToPercentage(n) { |
|||
if (n <= 1) { |
|||
n = n * 100 + '%'; |
|||
} |
|||
|
|||
return n; |
|||
} |
|||
|
|||
// Converts a decimal to a hex value
|
|||
function convertDecimalToHex(d) { |
|||
return Math.round(parseFloat(d) * 255).toString(16); |
|||
} |
|||
// Converts a hex value to a decimal
|
|||
function convertHexToDecimal(h) { |
|||
return parseIntFromHex(h) / 255; |
|||
} |
|||
|
|||
var matchers = (function() { |
|||
// <http://www.w3.org/TR/css3-values/#integers>
|
|||
var CSS_INTEGER = '[-\\+]?\\d+%?'; |
|||
|
|||
// <http://www.w3.org/TR/css3-values/#number-value>
|
|||
var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?'; |
|||
|
|||
// Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
|
|||
var CSS_UNIT = '(?:' + CSS_NUMBER + ')|(?:' + CSS_INTEGER + ')'; |
|||
|
|||
// Actual matching.
|
|||
// Parentheses and commas are optional, but not required.
|
|||
// Whitespace can take the place of commas or opening paren
|
|||
var PERMISSIVE_MATCH3 = |
|||
'[\\s|\\(]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')[,|\\s]+(' + CSS_UNIT + ')\\s*\\)?'; |
|||
var PERMISSIVE_MATCH4 = |
|||
'[\\s|\\(]+(' + |
|||
CSS_UNIT + |
|||
')[,|\\s]+(' + |
|||
CSS_UNIT + |
|||
')[,|\\s]+(' + |
|||
CSS_UNIT + |
|||
')[,|\\s]+(' + |
|||
CSS_UNIT + |
|||
')\\s*\\)?'; |
|||
|
|||
return { |
|||
CSS_UNIT: new RegExp(CSS_UNIT), |
|||
rgb: new RegExp('rgb' + PERMISSIVE_MATCH3), |
|||
rgba: new RegExp('rgba' + PERMISSIVE_MATCH4), |
|||
hsl: new RegExp('hsl' + PERMISSIVE_MATCH3), |
|||
hsla: new RegExp('hsla' + PERMISSIVE_MATCH4), |
|||
hsv: new RegExp('hsv' + PERMISSIVE_MATCH3), |
|||
hsva: new RegExp('hsva' + PERMISSIVE_MATCH4), |
|||
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, |
|||
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, |
|||
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, |
|||
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, |
|||
}; |
|||
})(); |
|||
|
|||
// isValidCSSUnit
|
|||
// Take in a single string / number and check to see if it looks like a CSS unit
|
|||
// (see matchers above for definition).
|
|||
function isValidCSSUnit(color) { |
|||
return !!matchers.CSS_UNIT.exec(color); |
|||
} |
|||
|
|||
// stringInputToObject
|
|||
// Permissive string parsing. Take in a number of formats, and output an object
|
|||
// based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v}
|
|||
function stringInputToObject(color) { |
|||
color = color |
|||
.replace(trimLeft, '') |
|||
.replace(trimRight, '') |
|||
.toLowerCase(); |
|||
var named = false; |
|||
if (names[color]) { |
|||
color = names[color]; |
|||
named = true; |
|||
} else if (color == 'transparent') { |
|||
return { r: 0, g: 0, b: 0, a: 0, format: 'name' }; |
|||
} |
|||
|
|||
// Try to match string input using regular expressions.
|
|||
// Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
|
|||
// Just return an object and let the conversion functions handle that.
|
|||
// This way the result will be the same whether the tinycolor is initialized with string or object.
|
|||
var match; |
|||
if ((match = matchers.rgb.exec(color))) { |
|||
return { r: match[1], g: match[2], b: match[3] }; |
|||
} |
|||
if ((match = matchers.rgba.exec(color))) { |
|||
return { r: match[1], g: match[2], b: match[3], a: match[4] }; |
|||
} |
|||
if ((match = matchers.hsl.exec(color))) { |
|||
return { h: match[1], s: match[2], l: match[3] }; |
|||
} |
|||
if ((match = matchers.hsla.exec(color))) { |
|||
return { h: match[1], s: match[2], l: match[3], a: match[4] }; |
|||
} |
|||
if ((match = matchers.hsv.exec(color))) { |
|||
return { h: match[1], s: match[2], v: match[3] }; |
|||
} |
|||
if ((match = matchers.hsva.exec(color))) { |
|||
return { h: match[1], s: match[2], v: match[3], a: match[4] }; |
|||
} |
|||
if ((match = matchers.hex8.exec(color))) { |
|||
return { |
|||
r: parseIntFromHex(match[1]), |
|||
g: parseIntFromHex(match[2]), |
|||
b: parseIntFromHex(match[3]), |
|||
a: convertHexToDecimal(match[4]), |
|||
format: named ? 'name' : 'hex8', |
|||
}; |
|||
} |
|||
if ((match = matchers.hex6.exec(color))) { |
|||
return { |
|||
r: parseIntFromHex(match[1]), |
|||
g: parseIntFromHex(match[2]), |
|||
b: parseIntFromHex(match[3]), |
|||
format: named ? 'name' : 'hex', |
|||
}; |
|||
} |
|||
if ((match = matchers.hex4.exec(color))) { |
|||
return { |
|||
r: parseIntFromHex(match[1] + '' + match[1]), |
|||
g: parseIntFromHex(match[2] + '' + match[2]), |
|||
b: parseIntFromHex(match[3] + '' + match[3]), |
|||
a: convertHexToDecimal(match[4] + '' + match[4]), |
|||
format: named ? 'name' : 'hex8', |
|||
}; |
|||
} |
|||
if ((match = matchers.hex3.exec(color))) { |
|||
return { |
|||
r: parseIntFromHex(match[1] + '' + match[1]), |
|||
g: parseIntFromHex(match[2] + '' + match[2]), |
|||
b: parseIntFromHex(match[3] + '' + match[3]), |
|||
format: named ? 'name' : 'hex', |
|||
}; |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
|
|||
module.exports = tinycolor; |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue