compute color distance #94

Author: tbela99

dist/index-umd-web.js

@@ -1,88 +1,3 @@
-/**
- * color types enum
- */
-declare enum ColorType {
-    /**
-     * convert color to hex
-     */
-    HEX = 0,
-    /**
-     * convert color to rgb
-     */
-    RGBA = 1,
-    /**
-     * convert color to hwb
-     */
-    HWB = 2,
-    /**
-     * convert color to hsl
-     */
-    HSLA = 3,
-    /**
-     * convert color to cmyk
-     */
-    DEVICE_CMYK = 4,
-    /**
-     * convert color to lch
-     */
-    LCH = 5,
-    /**
-     * convert color to oklch
-     */
-    OKLCH = 6,
-    /**
-     * convert color to lab
-     */
-    LAB = 7,
-    /**
-     * convert color to oklab
-     */
-    OKLAB = 8,
-    /**
-     * convert color to xyz
-     */
-    XYZ_D65 = 9,
-    /**
-     * convert color to xyz-d50
-     */
-    XYZ_D50 = 10,
-    /**
-     * convert color to srgb
-     */
-    SRGB = 11,
-    /**
-     * convert color to srgb-linear
-     */
-    SRGB_LINEAR = 12,
-    /**
-     * convert color to display-p3
-     */
-    DISPLAY_P3 = 13,
-    /**
-     * convert color to a98-rgb
-     */
-    A98_RGB = 14,
-    /**
-     * convert color to prophoto-rgb
-     */
-    PROPHOTO_RGB = 15,
-    /**
-     * convert color to rec2020
-     */
-    REC2020 = 16,
-    /**
-     * alias for hsl
-     */
-    HSL = 3,
-    /**
-     * alias for rgba
-     */
-    RGB = 1,
-    /**
-     * alias for xyz-d65
-     */
-    XYZ = 9
-}
 /**
  * validation level enum
  */
@@ -227,6 +142,35 @@ declare enum EnumToken {
     TimingFunction = 17,
     TimelineFunction = 16
 }
+declare enum ColorType {
+    SYS = 0,
+    DPSYS = 1,
+    LIT = 2,
+    HEX = 3,
+    RGBA = 4,
+    HSLA = 5,
+    HWB = 6,
+    CMYK = 7,
+    OKLAB = 8,
+    OKLCH = 9,
+    LAB = 10,
+    LCH = 11,
+    COLOR = 12,
+    SRGB = 13,
+    PROPHOTO_RGB = 14,
+    A98_RGB = 15,
+    REC2020 = 16,
+    DISPLAY_P3 = 17,
+    SRGB_LINEAR = 18,
+    XYZ_D50 = 19,
+    XYZ_D65 = 20,
+    LIGHT_DARK = 21,
+    COLOR_MIX = 22,
+    RGB = 4,
+    HSL = 5,
+    XYZ = 20,
+    DEVICE_CMYK = 7
+}
 
 /**
  * minify ast
@@ -288,34 +232,8 @@ declare function renderToken(token: Token, options?: RenderOptions, cache?: {
     [key: string]: any;
 }, reducer?: (acc: string, curr: Token) => string, errors?: ErrorDescription[]): string;
 
-declare enum ColorKind {
-    SYS = 0,
-    DPSYS = 1,
-    LIT = 2,
-    HEX = 3,
-    RGBA = 4,
-    HSLA = 5,
-    HWB = 6,
-    DEVICE_CMYK = 7,
-    OKLAB = 8,
-    OKLCH = 9,
-    LAB = 10,
-    LCH = 11,
-    COLOR = 12,
-    SRGB = 13,
-    PROPHOTO_RGB = 14,
-    A98_RGB = 15,
-    REC2020 = 16,
-    DISPLAY_P3 = 17,
-    SRGB_LINEAR = 18,
-    XYZ_D50 = 19,
-    XYZ_D65 = 20,
-    LIGHT_DARK = 21,
-    COLOR_MIX = 22,
-    RGB = 4,
-    HSL = 5,
-    XYZ = 20
-}
+declare function okLabDistance(okLab1: [number, number, number], okLab2: [number, number, number]): number;
+declare function isOkLabClose(color1: ColorToken, color2: ColorToken, threshold?: number): boolean;
 
 /**
  * parse css string
@@ -710,7 +628,7 @@ export declare interface ColorToken extends BaseToken {
 
     typ: EnumToken.ColorTokenType;
     val: string;
-    kin: ColorKind;
+    kin: ColorType;
     chi?: Token[];
     /* calculated */
     cal?: 'rel' | 'mix';
@@ -1441,4 +1359,4 @@ declare function parse(iterator: string, opt?: ParserOptions): Promise<ParseResu
  */
 declare function transform(css: string, options?: TransformOptions): Promise<TransformResult>;
 
-export { ColorType, EnumToken, ValidationLevel, dirname, expand, load, minify, parse, parseString, parseTokens, render, renderToken, resolve, transform, walk, walkValues };
+export { ColorType, EnumToken, ValidationLevel, dirname, expand, isOkLabClose, load, minify, okLabDistance, parse, parseString, parseTokens, render, renderToken, resolve, transform, walk, walkValues };

dist/index.cjs

@@ -4,92 +4,6 @@ var SyntaxValidationResult;
     SyntaxValidationResult[SyntaxValidationResult["Drop"] = 1] = "Drop";
     SyntaxValidationResult[SyntaxValidationResult["Lenient"] = 2] = "Lenient"; /* preserve unknown at-rules, declarations and pseudo-classes */
 })(SyntaxValidationResult || (SyntaxValidationResult = {}));
-/**
- * color types enum
- */
-var ColorType;
-(function (ColorType) {
-    /**
-     * convert color to hex
-     */
-    ColorType[ColorType["HEX"] = 0] = "HEX";
-    /**
-     * convert color to rgb
-     */
-    ColorType[ColorType["RGBA"] = 1] = "RGBA";
-    /**
-     * convert color to hwb
-     */
-    ColorType[ColorType["HWB"] = 2] = "HWB";
-    /**
-     * convert color to hsl
-     */
-    ColorType[ColorType["HSLA"] = 3] = "HSLA";
-    /**
-     * convert color to cmyk
-     */
-    ColorType[ColorType["DEVICE_CMYK"] = 4] = "DEVICE_CMYK";
-    /**
-     * convert color to lch
-     */
-    ColorType[ColorType["LCH"] = 5] = "LCH";
-    /**
-     * convert color to oklch
-     */
-    ColorType[ColorType["OKLCH"] = 6] = "OKLCH";
-    /**
-     * convert color to lab
-     */
-    ColorType[ColorType["LAB"] = 7] = "LAB";
-    /**
-     * convert color to oklab
-     */
-    ColorType[ColorType["OKLAB"] = 8] = "OKLAB";
-    /**
-     * convert color to xyz
-     */
-    ColorType[ColorType["XYZ_D65"] = 9] = "XYZ_D65";
-    /**
-     * convert color to xyz-d50
-     */
-    ColorType[ColorType["XYZ_D50"] = 10] = "XYZ_D50";
-    /**
-     * convert color to srgb
-     */
-    ColorType[ColorType["SRGB"] = 11] = "SRGB";
-    /**
-     * convert color to srgb-linear
-     */
-    ColorType[ColorType["SRGB_LINEAR"] = 12] = "SRGB_LINEAR";
-    /**
-     * convert color to display-p3
-     */
-    ColorType[ColorType["DISPLAY_P3"] = 13] = "DISPLAY_P3";
-    /**
-     * convert color to a98-rgb
-     */
-    ColorType[ColorType["A98_RGB"] = 14] = "A98_RGB";
-    /**
-     * convert color to prophoto-rgb
-     */
-    ColorType[ColorType["PROPHOTO_RGB"] = 15] = "PROPHOTO_RGB";
-    /**
-     * convert color to rec2020
-     */
-    ColorType[ColorType["REC2020"] = 16] = "REC2020";
-    /**
-     * alias for hsl
-     */
-    ColorType[ColorType["HSL"] = 3] = "HSL";
-    /**
-     * alias for rgba
-     */
-    ColorType[ColorType["RGB"] = 1] = "RGB";
-    /**
-     * alias for xyz-d65
-     */
-    ColorType[ColorType["XYZ"] = 9] = "XYZ";
-})(ColorType || (ColorType = {}));
 /**
  * validation level enum
  */
@@ -240,5 +154,36 @@ var EnumToken;
     EnumToken[EnumToken["TimingFunction"] = 17] = "TimingFunction";
     EnumToken[EnumToken["TimelineFunction"] = 16] = "TimelineFunction";
 })(EnumToken || (EnumToken = {}));
+// xyz-d65 is an alias for xyz
+var ColorType;
+(function (ColorType) {
+    ColorType[ColorType["SYS"] = 0] = "SYS";
+    ColorType[ColorType["DPSYS"] = 1] = "DPSYS";
+    ColorType[ColorType["LIT"] = 2] = "LIT";
+    ColorType[ColorType["HEX"] = 3] = "HEX";
+    ColorType[ColorType["RGBA"] = 4] = "RGBA";
+    ColorType[ColorType["HSLA"] = 5] = "HSLA";
+    ColorType[ColorType["HWB"] = 6] = "HWB";
+    ColorType[ColorType["CMYK"] = 7] = "CMYK";
+    ColorType[ColorType["OKLAB"] = 8] = "OKLAB";
+    ColorType[ColorType["OKLCH"] = 9] = "OKLCH";
+    ColorType[ColorType["LAB"] = 10] = "LAB";
+    ColorType[ColorType["LCH"] = 11] = "LCH";
+    ColorType[ColorType["COLOR"] = 12] = "COLOR";
+    ColorType[ColorType["SRGB"] = 13] = "SRGB";
+    ColorType[ColorType["PROPHOTO_RGB"] = 14] = "PROPHOTO_RGB";
+    ColorType[ColorType["A98_RGB"] = 15] = "A98_RGB";
+    ColorType[ColorType["REC2020"] = 16] = "REC2020";
+    ColorType[ColorType["DISPLAY_P3"] = 17] = "DISPLAY_P3";
+    ColorType[ColorType["SRGB_LINEAR"] = 18] = "SRGB_LINEAR";
+    ColorType[ColorType["XYZ_D50"] = 19] = "XYZ_D50";
+    ColorType[ColorType["XYZ_D65"] = 20] = "XYZ_D65";
+    ColorType[ColorType["LIGHT_DARK"] = 21] = "LIGHT_DARK";
+    ColorType[ColorType["COLOR_MIX"] = 22] = "COLOR_MIX";
+    ColorType[ColorType["RGB"] = 4] = "RGB";
+    ColorType[ColorType["HSL"] = 5] = "HSL";
+    ColorType[ColorType["XYZ"] = 20] = "XYZ";
+    ColorType[ColorType["DEVICE_CMYK"] = 7] = "DEVICE_CMYK";
+})(ColorType || (ColorType = {}));
 
 export { ColorType, EnumToken, SyntaxValidationResult, ValidationLevel };

dist/index.d.ts

@@ -1,12 +1,12 @@
 import { isIdentStart, isIdent, isIdentColor, mathFuncs, isColor, parseColor, isPseudo, pseudoElements, isAtKeyword, isFunction, isNumber, isPercentage, isFlex, isDimension, parseDimension, isHexColor, isHash, mediaTypes } from '../syntax/syntax.js';
-import { EnumToken, ValidationLevel, SyntaxValidationResult } from '../ast/types.js';
+import { EnumToken, ColorType, ValidationLevel, SyntaxValidationResult } from '../ast/types.js';
 import { minify, definedPropertySettings, combinators } from '../ast/minify.js';
 import { walkValues, walk, WalkerOptionEnum } from '../ast/walk.js';
 import { expand } from '../ast/expand.js';
 import './utils/config.js';
 import { parseDeclarationNode } from './utils/declaration.js';
 import { renderToken } from '../renderer/render.js';
-import { funcLike, timingFunc, timelineFunc, COLORS_NAMES, ColorKind, systemColors, deprecatedSystemColors, colorsFunc } from '../syntax/color/utils/constants.js';
+import { funcLike, timingFunc, timelineFunc, COLORS_NAMES, systemColors, deprecatedSystemColors, colorsFunc } from '../syntax/color/utils/constants.js';
 import { buildExpression } from '../ast/math/expression.js';
 import { tokenize } from './tokenize.js';
 import '../validation/config.js';
@@ -674,7 +674,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                 if (name == null && [EnumToken.IdenTokenType, EnumToken.DashedIdenTokenType].includes(tokens[i].typ)) {
                     name = tokens.slice(0, i + 1);
                 }
-                else if (name == null && tokens[i].typ == EnumToken.ColorTokenType && [ColorKind.SYS, ColorKind.DPSYS].includes(tokens[i].kin)) {
+                else if (name == null && tokens[i].typ == EnumToken.ColorTokenType && [ColorType.SYS, ColorType.DPSYS].includes(tokens[i].kin)) {
                     name = tokens.slice(0, i + 1);
                     tokens[i].typ = EnumToken.IdenTokenType;
                 }
@@ -960,7 +960,7 @@ function parseAtRulePrelude(tokens, atRule) {
                     const node = value.chi.splice(nameIndex, 1)[0];
                     // 'background'
                     // @ts-ignore
-                    if (node.typ == EnumToken.ColorTokenType && node.kin == ColorKind.DPSYS) {
+                    if (node.typ == EnumToken.ColorTokenType && node.kin == ColorType.DPSYS) {
                         // @ts-ignore
                         delete node.kin;
                         node.typ = EnumToken.IdenTokenType;
@@ -1096,8 +1096,8 @@ function parseSelector(tokens) {
                 }
             }
             else if (value.typ == EnumToken.ColorTokenType) {
-                if (value.kin == ColorKind.LIT || value.kin == ColorKind.HEX || value.kin == ColorKind.SYS || value.kin == ColorKind.DPSYS) {
-                    if (value.kin == ColorKind.HEX) {
+                if (value.kin == ColorType.LIT || value.kin == ColorType.HEX || value.kin == ColorType.SYS || value.kin == ColorType.DPSYS) {
+                    if (value.kin == ColorType.HEX) {
                         if (!isIdent(value.val.slice(1))) {
                             continue;
                         }
@@ -1276,22 +1276,22 @@ function getTokenType(val, hint) {
         return {
             typ: EnumToken.ColorTokenType,
             val: v,
-            kin: ColorKind.LIT
+            kin: ColorType.LIT
         };
     }
     if (isIdent(val)) {
         if (systemColors.has(v)) {
             return {
                 typ: EnumToken.ColorTokenType,
                 val,
-                kin: ColorKind.SYS
+                kin: ColorType.SYS
             };
         }
         if (deprecatedSystemColors.has(v)) {
             return {
                 typ: EnumToken.ColorTokenType,
                 val,
-                kin: ColorKind.DPSYS
+                kin: ColorType.DPSYS
             };
         }
         return {
@@ -1303,7 +1303,7 @@ function getTokenType(val, hint) {
         return {
             typ: EnumToken.ColorTokenType,
             val,
-            kin: ColorKind.HEX
+            kin: ColorType.HEX
         };
     }
     if (val.charAt(0) == '#' && isHash(val)) {