From f47aa91c5e0aa10bac9504b727f0e4ce6036173e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Thu, 13 Dec 2018 22:15:26 +0800 Subject: [PATCH] Revert "Revert "Use less @plugin" (#13613)" (#13621) This reverts commit 2c79d2a7c1a908fe9ba0b62e5202a3fd686f15b4. --- .gitignore | 1 + .stylelintrc | 3 + components/button/style/mixin.less | 22 +- components/input/style/mixin.less | 4 +- components/style/color/bezierEasing.less | 110 -- components/style/color/color-palette.js | 78 ++ components/style/color/colorPalette.less | 75 -- components/style/color/colors.less | 240 ++--- components/style/color/empty.less | 1 + components/style/color/lessFix.less | 1 + components/style/color/tiny-color.js | 594 +++++++++++ components/style/color/tinyColor.less | 1184 ---------------------- components/style/themes/default.less | 41 +- package.json | 1 + 14 files changed, 831 insertions(+), 1524 deletions(-) delete mode 100644 components/style/color/bezierEasing.less create mode 100644 components/style/color/color-palette.js delete mode 100644 components/style/color/colorPalette.less create mode 100644 components/style/color/empty.less create mode 100644 components/style/color/lessFix.less create mode 100644 components/style/color/tiny-color.js delete mode 100644 components/style/color/tinyColor.less diff --git a/.gitignore b/.gitignore index 7c56f5e78f..3175f05027 100644 --- a/.gitignore +++ b/.gitignore @@ -37,6 +37,7 @@ components/**/*.js components/**/*.jsx !components/**/__tests__/*.js !components/**/__tests__/*.js.snap +!components/style/color/*.js /.history # Docs templates site/theme/template/IconDisplay/*.js diff --git a/.stylelintrc b/.stylelintrc index 9d422fb7ca..5ce0c6413d 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,6 +1,9 @@ { "extends": ["stylelint-config-standard", "stylelint-config-prettier"], "rules": { + "at-rule-no-unknown": [true, { + ignoreAtRules: ["plugin"] + }], "comment-empty-line-before": null, "declaration-empty-line-before": null, "function-comma-newline-after": null, diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 285d47cff8..395f54a042 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -29,16 +29,12 @@ &:hover, &:focus { - .button-color( - @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) ` - ); + .button-color(@color; color-palette(@background, 5) ; color-palette(@background, 5)); } &:active, &.active { - .button-color( - @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) ` - ); + .button-color(@color; color-palette(@background, 7) ; color-palette(@background, 7)); } .button-disabled(); @@ -64,20 +60,16 @@ .button-color(@color; @background; @border); &:hover { - .button-color( - @btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) ` - ); + .button-color(@btn-primary-color; color-palette(@color, 5) ; color-palette(@color, 5)); } &:focus { - .button-color(~`colorPalette('@{color}', 5) `; #fff; ~`colorPalette('@{color}', 5) `); + .button-color(color-palette(@color, 5) ; #fff; color-palette(@color, 5)); } &:active, &.active { - .button-color( - @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) ` - ); + .button-color(@btn-primary-color; color-palette(@color, 7) ; color-palette(@color, 7)); } .button-disabled(); @@ -89,12 +81,12 @@ &:hover, &:focus { - .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `); + .button-color(color-palette(@color, 5) ; transparent; color-palette(@color, 5)); } &:active, &.active { - .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `); + .button-color(color-palette(@color, 7) ; transparent; color-palette(@color, 7)); } .button-disabled(); diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less index 21a3c42602..6139d1fef0 100644 --- a/components/input/style/mixin.less +++ b/components/input/style/mixin.less @@ -18,7 +18,7 @@ // input status // == when focus or actived .active(@color: @outline-color) { - border-color: ~`colorPalette('@{color}', 5) `; + border-color: color-palette(@color, 5); outline: 0; box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%); border-right-width: @border-width-base !important; @@ -26,7 +26,7 @@ // == when hoverd .hover(@color: @input-hover-border-color) { - border-color: ~`colorPalette('@{color}', 5) `; + border-color: color-palette(@color, 5); border-right-width: @border-width-base !important; } diff --git a/components/style/color/bezierEasing.less b/components/style/color/bezierEasing.less deleted file mode 100644 index f53ffb3680..0000000000 --- a/components/style/color/bezierEasing.less +++ /dev/null @@ -1,110 +0,0 @@ -/* 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(); diff --git a/components/style/color/color-palette.js b/components/style/color/color-palette.js new file mode 100644 index 0000000000..e9a003725f --- /dev/null +++ b/components/style/color/color-palette.js @@ -0,0 +1,78 @@ +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; + })(); + }); + }, +}; diff --git a/components/style/color/colorPalette.less b/components/style/color/colorPalette.less deleted file mode 100644 index 069991137c..0000000000 --- a/components/style/color/colorPalette.less +++ /dev/null @@ -1,75 +0,0 @@ -/* 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(); diff --git a/components/style/color/colors.less b/components/style/color/colors.less index b489eed0cb..d86dc34a70 100644 --- a/components/style/color/colors.less +++ b/components/style/color/colors.less @@ -1,146 +1,150 @@ -@import 'colorPalette'; +@plugin 'color-palette'; + +// Less has bug for inline plugin. +// We have to import an empty nest file for the less tree parse. +@import 'lessFix'; // color palettes -@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-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-6: #1890ff; -@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) `); +@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); -@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-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-6: #722ed1; -@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) `); +@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); -@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-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-6: #13c2c2; -@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) `); +@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); -@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-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-6: #52c41a; -@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) `); +@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); -@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-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-6: #eb2f96; -@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) `); +@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); // alias of magenta -@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-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-6: #eb2f96; -@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) `); +@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); -@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-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-6: #f5222d; -@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) `); +@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); -@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-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-6: #fa8c16; -@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) `); +@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); -@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-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-6: #fadb14; -@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) `); +@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); -@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-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-6: #fa541c; -@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) `); +@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); -@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-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-6: #2f54eb; -@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) `); +@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); -@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-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-6: #a0d911; -@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) `); +@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); -@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-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-6: #faad14; -@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) `); +@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); diff --git a/components/style/color/empty.less b/components/style/color/empty.less new file mode 100644 index 0000000000..9e6472f207 --- /dev/null +++ b/components/style/color/empty.less @@ -0,0 +1 @@ +// Do not remove diff --git a/components/style/color/lessFix.less b/components/style/color/lessFix.less new file mode 100644 index 0000000000..8ccb804b10 --- /dev/null +++ b/components/style/color/lessFix.less @@ -0,0 +1 @@ +@import './empty'; diff --git a/components/style/color/tiny-color.js b/components/style/color/tiny-color.js new file mode 100644 index 0000000000..a261df965f --- /dev/null +++ b/components/style/color/tiny-color.js @@ -0,0 +1,594 @@ +// 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: +// + +// rgbToRgb +// Handle bounds / percentage checking to conform to CSS color spec +// +// *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 +// ------------------ +// +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 +// +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() { + // + var CSS_INTEGER = '[-\\+]?\\d+%?'; + + // + 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; diff --git a/components/style/color/tinyColor.less b/components/style/color/tinyColor.less deleted file mode 100644 index e576c78687..0000000000 --- a/components/style/color/tinyColor.less +++ /dev/null @@ -1,1184 +0,0 @@ -/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ -.tinyColorMixin() { -@functions: ~`(function() { -// 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, - mathRandom = Math.random; - -function tinycolor (color, opts) { - - color = (color) ? color : ''; - opts = opts || { }; - - // If input is already a tinycolor, return itself - if (color instanceof tinycolor) { - return color; - } - // 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 = { - isDark: function() { - return this.getBrightness() < 128; - }, - isLight: function() { - return !this.isDark(); - }, - isValid: function() { - return this._ok; - }, - getOriginalInput: function() { - return this._originalInput; - }, - getFormat: function() { - return this._format; - }, - getAlpha: function() { - return this._a; - }, - getBrightness: function() { - //http://www.w3.org/TR/AERT#color-contrast - var rgb = this.toRgb(); - return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; - }, - getLuminance: function() { - //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef - var rgb = this.toRgb(); - var RsRGB, GsRGB, BsRGB, R, G, B; - RsRGB = rgb.r/255; - GsRGB = rgb.g/255; - BsRGB = rgb.b/255; - - if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);} - if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);} - if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);} - return (0.2126 * R) + (0.7152 * G) + (0.0722 * B); - }, - setAlpha: function(value) { - this._a = boundAlpha(value); - this._roundA = mathRound(100*this._a) / 100; - return this; - }, - 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 }; - }, - toHsvString: function() { - var hsv = rgbToHsv(this._r, this._g, this._b); - var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); - return (this._a == 1) ? - "hsv(" + h + ", " + s + "%, " + v + "%)" : - "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; - }, - toHsl: function() { - var hsl = rgbToHsl(this._r, this._g, this._b); - return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; - }, - toHslString: function() { - var hsl = rgbToHsl(this._r, this._g, this._b); - var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); - return (this._a == 1) ? - "hsl(" + h + ", " + s + "%, " + l + "%)" : - "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; - }, - toHex: function(allow3Char) { - return rgbToHex(this._r, this._g, this._b, allow3Char); - }, - toHexString: function(allow3Char) { - return '#' + this.toHex(allow3Char); - }, - toHex8: function(allow4Char) { - return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char); - }, - toHex8String: function(allow4Char) { - return '#' + this.toHex8(allow4Char); - }, - toRgb: function() { - return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; - }, - toRgbString: function() { - return (this._a == 1) ? - "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : - "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; - }, - toPercentageRgb: function() { - return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; - }, - toPercentageRgbString: function() { - return (this._a == 1) ? - "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : - "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; - }, - toName: function() { - if (this._a === 0) { - return "transparent"; - } - - if (this._a < 1) { - return false; - } - - return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; - }, - toFilter: function(secondColor) { - var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a); - var secondHex8String = hex8String; - var gradientType = this._gradientType ? "GradientType = 1, " : ""; - - if (secondColor) { - var s = tinycolor(secondColor); - secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a); - } - - return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; - }, - toString: function(format) { - var formatSet = !!format; - format = format || this._format; - - var formattedString = false; - var hasAlpha = this._a < 1 && this._a >= 0; - var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name"); - - if (needsAlphaFormat) { - // Special case for "transparent", all other non-alpha formats - // will return rgba when there is transparency. - if (format === "name" && this._a === 0) { - return this.toName(); - } - return this.toRgbString(); - } - if (format === "rgb") { - formattedString = this.toRgbString(); - } - if (format === "prgb") { - formattedString = this.toPercentageRgbString(); - } - if (format === "hex" || format === "hex6") { - formattedString = this.toHexString(); - } - if (format === "hex3") { - formattedString = this.toHexString(true); - } - if (format === "hex4") { - formattedString = this.toHex8String(true); - } - if (format === "hex8") { - formattedString = this.toHex8String(); - } - if (format === "name") { - formattedString = this.toName(); - } - if (format === "hsl") { - formattedString = this.toHslString(); - } - if (format === "hsv") { - formattedString = this.toHsvString(); - } - - return formattedString || this.toHexString(); - }, - clone: function() { - return tinycolor(this.toString()); - }, - - _applyModification: function(fn, args) { - var color = fn.apply(null, [this].concat([].slice.call(args))); - this._r = color._r; - this._g = color._g; - this._b = color._b; - this.setAlpha(color._a); - return this; - }, - lighten: function() { - return this._applyModification(lighten, arguments); - }, - brighten: function() { - return this._applyModification(brighten, arguments); - }, - darken: function() { - return this._applyModification(darken, arguments); - }, - desaturate: function() { - return this._applyModification(desaturate, arguments); - }, - saturate: function() { - return this._applyModification(saturate, arguments); - }, - greyscale: function() { - return this._applyModification(greyscale, arguments); - }, - spin: function() { - return this._applyModification(spin, arguments); - }, - - _applyCombination: function(fn, args) { - return fn.apply(null, [this].concat([].slice.call(args))); - }, - analogous: function() { - return this._applyCombination(analogous, arguments); - }, - complement: function() { - return this._applyCombination(complement, arguments); - }, - monochromatic: function() { - return this._applyCombination(monochromatic, arguments); - }, - splitcomplement: function() { - return this._applyCombination(splitcomplement, arguments); - }, - triad: function() { - return this._applyCombination(triad, arguments); - }, - tetrad: function() { - return this._applyCombination(tetrad, arguments); - } -}; - -// If input is an object, force 1 into "1.0" to handle ratios properly -// String input requires "1.0" as input, so 1 will be treated as 1 -tinycolor.fromRatio = function(color, opts) { - if (typeof color == "object") { - var newColor = {}; - for (var i in color) { - if (color.hasOwnProperty(i)) { - if (i === "a") { - newColor[i] = color[i]; - } - else { - newColor[i] = convertToPercentage(color[i]); - } - } - } - color = newColor; - } - - return tinycolor(color, opts); -}; - -// 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: -// - -// rgbToRgb -// Handle bounds / percentage checking to conform to CSS color spec -// -// *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 - }; -} - -// rgbToHsl -// Converts an RGB color value to HSL. -// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] -// *Returns:* { h, s, l } in [0,1] -function rgbToHsl(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, l = (max + min) / 2; - - if(max == min) { - h = s = 0; // achromatic - } - else { - var d = max - min; - s = l > 0.5 ? d / (2 - max - min) : d / (max + min); - 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, l: l }; -} - -// 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 }; -} - -// rgbToHex -// Converts an RGB color to hex -// Assumes r, g, and b are contained in the set [0, 255] -// Returns a 3 or 6 character hex -function rgbToHex(r, g, b, allow3Char) { - - var hex = [ - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)) - ]; - - // Return a 3 character hex if possible - if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { - return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); - } - - return hex.join(""); -} - -// rgbaToHex -// Converts an RGBA color plus alpha transparency to hex -// Assumes r, g, b are contained in the set [0, 255] and -// a in [0, 1]. Returns a 4 or 8 character rgba hex -function rgbaToHex(r, g, b, a, allow4Char) { - - var hex = [ - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)), - pad2(convertDecimalToHex(a)) - ]; - - // Return a 4 character hex if possible - if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) { - return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0); - } - - return hex.join(""); -} - -// rgbaToArgbHex -// Converts an RGBA color to an ARGB Hex8 string -// Rarely used, but required for "toFilter()" -function rgbaToArgbHex(r, g, b, a) { - - var hex = [ - pad2(convertDecimalToHex(a)), - pad2(mathRound(r).toString(16)), - pad2(mathRound(g).toString(16)), - pad2(mathRound(b).toString(16)) - ]; - - return hex.join(""); -} - -// equals -// Can be called with any tinycolor input -tinycolor.equals = function (color1, color2) { - if (!color1 || !color2) { return false; } - return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); -}; - -tinycolor.random = function() { - return tinycolor.fromRatio({ - r: mathRandom(), - g: mathRandom(), - b: mathRandom() - }); -}; - -// Modification Functions -// ---------------------- -// Thanks to less.js for some of the basics here -// - -function desaturate(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.s -= amount / 100; - hsl.s = clamp01(hsl.s); - return tinycolor(hsl); -} - -function saturate(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.s += amount / 100; - hsl.s = clamp01(hsl.s); - return tinycolor(hsl); -} - -function greyscale(color) { - return tinycolor(color).desaturate(100); -} - -function lighten (color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.l += amount / 100; - hsl.l = clamp01(hsl.l); - return tinycolor(hsl); -} - -function brighten(color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var rgb = tinycolor(color).toRgb(); - rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); - rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); - rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); - return tinycolor(rgb); -} - -function darken (color, amount) { - amount = (amount === 0) ? 0 : (amount || 10); - var hsl = tinycolor(color).toHsl(); - hsl.l -= amount / 100; - hsl.l = clamp01(hsl.l); - return tinycolor(hsl); -} - -// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. -// Values outside of this range will be wrapped into this range. -function spin(color, amount) { - var hsl = tinycolor(color).toHsl(); - var hue = (hsl.h + amount) % 360; - hsl.h = hue < 0 ? 360 + hue : hue; - return tinycolor(hsl); -} - -// Combination Functions -// --------------------- -// Thanks to jQuery xColor for some of the ideas behind these -// - -function complement(color) { - var hsl = tinycolor(color).toHsl(); - hsl.h = (hsl.h + 180) % 360; - return tinycolor(hsl); -} - -function triad(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) - ]; -} - -function tetrad(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), - tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) - ]; -} - -function splitcomplement(color) { - var hsl = tinycolor(color).toHsl(); - var h = hsl.h; - return [ - tinycolor(color), - tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), - tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) - ]; -} - -function analogous(color, results, slices) { - results = results || 6; - slices = slices || 30; - - var hsl = tinycolor(color).toHsl(); - var part = 360 / slices; - var ret = [tinycolor(color)]; - - for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { - hsl.h = (hsl.h + part) % 360; - ret.push(tinycolor(hsl)); - } - return ret; -} - -function monochromatic(color, results) { - results = results || 6; - var hsv = tinycolor(color).toHsv(); - var h = hsv.h, s = hsv.s, v = hsv.v; - var ret = []; - var modification = 1 / results; - - while (results--) { - ret.push(tinycolor({ h: h, s: s, v: v})); - v = (v + modification) % 1; - } - - return ret; -} - -// Utility Functions -// --------------------- - -tinycolor.mix = function(color1, color2, amount) { - amount = (amount === 0) ? 0 : (amount || 50); - - var rgb1 = tinycolor(color1).toRgb(); - var rgb2 = tinycolor(color2).toRgb(); - - var p = amount / 100; - - var rgba = { - r: ((rgb2.r - rgb1.r) * p) + rgb1.r, - g: ((rgb2.g - rgb1.g) * p) + rgb1.g, - b: ((rgb2.b - rgb1.b) * p) + rgb1.b, - a: ((rgb2.a - rgb1.a) * p) + rgb1.a - }; - - return tinycolor(rgba); -}; - -// Readability Functions -// --------------------- -// false -// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false -tinycolor.isReadable = function(color1, color2, wcag2) { - var readability = tinycolor.readability(color1, color2); - var wcag2Parms, out; - - out = false; - - wcag2Parms = validateWCAG2Parms(wcag2); - switch (wcag2Parms.level + wcag2Parms.size) { - case "AAsmall": - case "AAAlarge": - out = readability >= 4.5; - break; - case "AAlarge": - out = readability >= 3; - break; - case "AAAsmall": - out = readability >= 7; - break; - } - return out; - -}; - -// mostReadable -// Given a base color and a list of possible foreground or background -// colors for that base, returns the most readable color. -// Optionally returns Black or White if the most readable color is unreadable. -// *Example* -// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255" -// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff" -// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3" -// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff" -tinycolor.mostReadable = function(baseColor, colorList, args) { - var bestColor = null; - var bestScore = 0; - var readability; - var includeFallbackColors, level, size ; - args = args || {}; - includeFallbackColors = args.includeFallbackColors ; - level = args.level; - size = args.size; - - for (var i= 0; i < colorList.length ; i++) { - readability = tinycolor.readability(baseColor, colorList[i]); - if (readability > bestScore) { - bestScore = readability; - bestColor = tinycolor(colorList[i]); - } - } - - if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) { - return bestColor; - } - else { - args.includeFallbackColors=false; - return tinycolor.mostReadable(baseColor,["#fff", "#000"],args); - } -}; - -// Big List of Colors -// ------------------ -// -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" -}; - -// Make it easy to access colors via hexNames[hex] -var hexNames = tinycolor.hexNames = flip(names); - -// Utilities -// --------- - -// { 'name1': 'val1' } becomes { 'val1': 'name1' } -function flip(o) { - var flipped = { }; - for (var i in o) { - if (o.hasOwnProperty(i)) { - flipped[o[i]] = i; - } - } - return flipped; -} - -// 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 -// -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() { - - // - var CSS_INTEGER = "[-\\+]?\\d+%?"; - - // - 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; -} - -function validateWCAG2Parms(parms) { - // return valid WCAG2 parms for isReadable. - // If input parms are invalid, return {"level":"AA", "size":"small"} - var level, size; - parms = parms || {"level":"AA", "size":"small"}; - level = (parms.level || "AA").toUpperCase(); - size = (parms.size || "small").toLowerCase(); - if (level !== "AA" && level !== "AAA") { - level = "AA"; - } - if (size !== "small" && size !== "large") { - size = "small"; - } - return {"level":level, "size":size}; -} - -this.tinycolor = tinycolor; - -})()`; -} -// 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 -.tinyColorMixin(); diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 1dac261e0c..57b97f3ea8 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -16,18 +16,19 @@ // Color used by default to control hover and active backgrounds and for // alert info backgrounds. -@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%) -@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%) -@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused -@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused -@primary-5: color( - ~`colorPalette('@{primary-color}', 5) ` +@primary-1: color-palette(@primary-color, 1); // replace tint(@primary-color, 90%) +@primary-2: color-palette(@primary-color, 2); // replace tint(@primary-color, 80%) +@primary-3: color-palette(@primary-color, 3); // unused +@primary-4: color-palette(@primary-color, 4); // unused +@primary-5: color-palette( + @primary-color, + 5 ); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%) @primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color -@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%) -@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused -@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused -@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused +@primary-7: color-palette(@primary-color, 7); // replace shade(@primary-color, 5%) +@primary-8: color-palette(@primary-color, 8); // unused +@primary-9: color-palette(@primary-color, 9); // unused +@primary-10: color-palette(@primary-color, 10); // unused // Base Scaffolding Variables // --- @@ -73,8 +74,8 @@ // LINK @link-color : @primary-color; -@link-hover-color : color(~`colorPalette("@{link-color}", 5)`); -@link-active-color : color(~`colorPalette("@{link-color}", 7)`); +@link-hover-color : color-palette(@link-color, 5); +@link-active-color : color-palette(@link-color, 7); @link-decoration : none; @link-hover-decoration : none; @@ -520,17 +521,17 @@ // Alert // --- -@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `; -@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `; +@alert-success-border-color: color-palette(@success-color, 3); +@alert-success-bg-color: color-palette(@success-color, 1); @alert-success-icon-color: @success-color; -@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `; -@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `; +@alert-info-border-color: color-palette(@info-color, 3); +@alert-info-bg-color: color-palette(@info-color, 1); @alert-info-icon-color: @info-color; -@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `; -@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `; +@alert-warning-border-color: color-palette(@warning-color, 3); +@alert-warning-bg-color: color-palette(@warning-color, 1); @alert-warning-icon-color: @warning-color; -@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `; -@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `; +@alert-error-border-color: color-palette(@error-color, 3); +@alert-error-bg-color: color-palette(@error-color, 1); @alert-error-icon-color: @error-color; // List diff --git a/package.json b/package.json index 65c7c989b4..93cd9ae8b8 100644 --- a/package.json +++ b/package.json @@ -136,6 +136,7 @@ "jest": "^23.6.0", "jsdom": "^13.0.0", "jsonml.js": "^0.1.0", + "less": "^3.9.0", "lint-staged": "^8.0.2", "lz-string": "^1.4.4", "majo": "^0.6.2",