@skbkontur/colors 2.0.0-alpha.3 → 2.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/colors.less +319 -0
- package/colors.scss +319 -0
- package/lib/consts/default-swatch.d.ts +108 -0
- package/lib/consts/default-swatch.js +108 -0
- package/{dist/esm/consts/default-swatch.js → lib/consts/default-swatch.ts} +11 -7
- package/lib/consts/params/abney-correction.js +1102 -0
- package/{dist/esm/consts/params/abney-correction.js → lib/consts/params/abney-correction.ts} +3 -1
- package/lib/consts/params/chroma-params.js +102 -0
- package/{dist/esm/consts/params/chroma-params.js → lib/consts/params/chroma-params.ts} +3 -1
- package/lib/consts/params/interactions.ts +9 -0
- package/lib/consts/params/logo-lightness.ts +1 -0
- package/{dist/esm → lib}/consts/params/promo-hue-shift.d.ts +1 -1
- package/lib/consts/params/promo-hue-shift.js +11 -0
- package/{dist/esm/consts/params/promo-hue-shift.js → lib/consts/params/promo-hue-shift.ts} +1 -1
- package/{dist/esm → lib}/consts/params/warning-hue-patch.d.ts +1 -1
- package/lib/consts/params/warning-hue-patch.js +22 -0
- package/{dist/esm/consts/params/warning-hue-patch.js → lib/consts/params/warning-hue-patch.ts} +1 -1
- package/lib/get-colors-base.d.ts +11 -0
- package/lib/get-colors-base.js +78 -0
- package/{dist/esm/get-colors-base.js → lib/get-colors-base.ts} +44 -26
- package/lib/get-colors-default-tokens.d.ts +645 -0
- package/lib/get-colors-default-tokens.js +647 -0
- package/lib/get-colors-default-tokens.ts +646 -0
- package/lib/get-colors.d.ts +40 -0
- package/lib/get-colors.js +28 -0
- package/lib/get-colors.ts +65 -0
- package/{dist/esm → lib}/helpers/get-interactions.d.ts +2 -2
- package/lib/helpers/get-interactions.js +35 -0
- package/lib/helpers/get-interactions.ts +64 -0
- package/{dist/esm → lib}/helpers/get-logo.d.ts +2 -2
- package/lib/helpers/get-logo.js +25 -0
- package/lib/helpers/get-logo.ts +40 -0
- package/lib/helpers/get-palette.d.ts +51 -0
- package/lib/helpers/get-palette.js +204 -0
- package/lib/helpers/get-palette.ts +261 -0
- package/lib/helpers/get-promo.d.ts +6 -0
- package/lib/helpers/get-promo.js +47 -0
- package/lib/helpers/get-promo.ts +55 -0
- package/lib/types/tokens-base-generator.d.ts +43 -0
- package/{dist/esm/types/tokens-base-generator.d.ts → lib/types/tokens-base-generator.ts} +10 -15
- package/lib/types/tokens-base.d.ts +55 -0
- package/{dist/esm/types/tokens-base.d.ts → lib/types/tokens-base.ts} +7 -2
- package/lib/types/tokens.d.ts +12 -0
- package/{dist/esm/types/tokens.d.ts → lib/types/tokens.ts} +7 -1
- package/lib/utils/convert-color.js +144 -0
- package/lib/utils/convert-color.ts +163 -0
- package/lib/utils/format-variable.js +6 -0
- package/lib/utils/format-variable.ts +7 -0
- package/package.json +41 -7
- package/{dist/tokens-mobile → tokens-mobile}/brand-blue-deep_accent-brand.json +117 -117
- package/{dist/tokens-mobile → tokens-mobile}/brand-blue-deep_accent-gray.json +135 -135
- package/{dist/tokens-mobile → tokens-mobile}/brand-blue_accent-brand.json +117 -117
- package/{dist/tokens-mobile → tokens-mobile}/brand-blue_accent-gray.json +135 -135
- package/{dist/tokens-mobile → tokens-mobile}/brand-green_accent-brand.json +117 -117
- package/{dist/tokens-mobile → tokens-mobile}/brand-green_accent-gray.json +135 -135
- package/{dist/tokens-mobile → tokens-mobile}/brand-mint_accent-brand.json +117 -117
- package/{dist/tokens-mobile → tokens-mobile}/brand-mint_accent-gray.json +135 -135
- package/{dist/tokens-mobile → tokens-mobile}/brand-orange_accent-gray.json +135 -135
- package/{dist/tokens-mobile → tokens-mobile}/brand-purple_accent-brand.json +117 -117
- package/{dist/tokens-mobile → tokens-mobile}/brand-purple_accent-gray.json +135 -135
- package/{dist/tokens-mobile → tokens-mobile}/brand-red_accent-gray.json +135 -135
- package/{dist/tokens-mobile → tokens-mobile}/brand-violet_accent-brand.json +117 -117
- package/{dist/tokens-mobile → tokens-mobile}/brand-violet_accent-gray.json +135 -135
- package/CHANGELOG.md +0 -84
- package/dist/colors.default-dark.js +0 -332
- package/dist/colors.default-light.js +0 -336
- package/dist/colors.less +0 -319
- package/dist/colors.scss +0 -319
- package/dist/esm/consts/default-swatch.d.ts +0 -109
- package/dist/esm/get-colors-base.d.ts +0 -12
- package/dist/esm/get-colors-default-tokens.d.ts +0 -645
- package/dist/esm/get-colors-default-tokens.js +0 -992
- package/dist/esm/get-colors.d.ts +0 -13
- package/dist/esm/get-colors.js +0 -14
- package/dist/esm/get-default-tokens.d.ts +0 -645
- package/dist/esm/get-default-tokens.js +0 -992
- package/dist/esm/helpers/get-interactions.js +0 -49
- package/dist/esm/helpers/get-logo.js +0 -28
- package/dist/esm/helpers/get-palette.d.ts +0 -76
- package/dist/esm/helpers/get-palette.js +0 -232
- package/dist/esm/helpers/get-promo.d.ts +0 -12
- package/dist/esm/helpers/get-promo.js +0 -51
- package/dist/esm/utils/convert-color.js +0 -133
- package/dist/esm/utils/format-variable.js +0 -10
- package/dist/tokens-js/brand-blue-deep_accent-brand.js +0 -644
- package/dist/tokens-js/brand-blue-deep_accent-gray.js +0 -644
- package/dist/tokens-js/brand-blue_accent-brand.js +0 -644
- package/dist/tokens-js/brand-blue_accent-gray.js +0 -644
- package/dist/tokens-js/brand-green_accent-brand.js +0 -644
- package/dist/tokens-js/brand-green_accent-gray.js +0 -644
- package/dist/tokens-js/brand-mint_accent-brand.js +0 -644
- package/dist/tokens-js/brand-mint_accent-gray.js +0 -644
- package/dist/tokens-js/brand-orange_accent-gray.js +0 -644
- package/dist/tokens-js/brand-purple_accent-brand.js +0 -644
- package/dist/tokens-js/brand-purple_accent-gray.js +0 -644
- package/dist/tokens-js/brand-red_accent-gray.js +0 -644
- package/dist/tokens-js/brand-violet_accent-brand.js +0 -644
- package/dist/tokens-js/brand-violet_accent-gray.js +0 -644
- package/scripts/babel-register.js +0 -4
- package/scripts/tokens-base.json +0 -3499
- package/scripts/tokens.json +0 -710
- /package/{dist/colors.js → colors.js} +0 -0
- /package/{dist/esm → lib}/consts/params/abney-correction.d.ts +0 -0
- /package/{dist/esm → lib}/consts/params/chroma-params.d.ts +0 -0
- /package/{dist/esm → lib}/consts/params/interactions.d.ts +0 -0
- /package/{dist/esm → lib}/consts/params/interactions.js +0 -0
- /package/{dist/esm → lib}/consts/params/logo-lightness.d.ts +0 -0
- /package/{dist/esm → lib}/consts/params/logo-lightness.js +0 -0
- /package/{dist/esm → lib}/types/tokens-base-generator.js +0 -0
- /package/{dist/esm → lib}/types/tokens-base.js +0 -0
- /package/{dist/esm → lib}/types/tokens.js +0 -0
- /package/{dist/esm → lib}/utils/convert-color.d.ts +0 -0
- /package/{dist/esm → lib}/utils/format-variable.d.ts +0 -0
- /package/{dist/tokens → tokens}/brand-blue-deep_accent-brand.css +0 -0
- /package/{dist/tokens → tokens}/brand-blue-deep_accent-gray.css +0 -0
- /package/{dist/tokens → tokens}/brand-blue_accent-brand.css +0 -0
- /package/{dist/tokens → tokens}/brand-blue_accent-gray.css +0 -0
- /package/{dist/tokens → tokens}/brand-green_accent-brand.css +0 -0
- /package/{dist/tokens → tokens}/brand-green_accent-gray.css +0 -0
- /package/{dist/tokens → tokens}/brand-mint_accent-brand.css +0 -0
- /package/{dist/tokens → tokens}/brand-mint_accent-gray.css +0 -0
- /package/{dist/tokens → tokens}/brand-orange_accent-gray.css +0 -0
- /package/{dist/tokens → tokens}/brand-purple_accent-brand.css +0 -0
- /package/{dist/tokens → tokens}/brand-purple_accent-gray.css +0 -0
- /package/{dist/tokens → tokens}/brand-red_accent-gray.css +0 -0
- /package/{dist/tokens → tokens}/brand-violet_accent-brand.css +0 -0
- /package/{dist/tokens → tokens}/brand-violet_accent-gray.css +0 -0
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { converter } from 'culori';
|
|
2
|
-
import {
|
|
3
|
-
HOVER_LIGHT_L,
|
|
4
|
-
HOVER_LIGHT_C,
|
|
5
|
-
HOVER_DARK_L,
|
|
6
|
-
HOVER_DARK_C,
|
|
7
|
-
PRESSED_LIGHT_L,
|
|
8
|
-
PRESSED_LIGHT_C,
|
|
9
|
-
PRESSED_DARK_L,
|
|
10
|
-
PRESSED_DARK_C,
|
|
11
|
-
} from '../consts/params/interactions.js';
|
|
12
|
-
function applyOklchDelta(oklchColor, dL, dC) {
|
|
13
|
-
var _a = oklchColor.l,
|
|
14
|
-
l = _a === void 0 ? 0 : _a,
|
|
15
|
-
_b = oklchColor.c,
|
|
16
|
-
c = _b === void 0 ? 0 : _b,
|
|
17
|
-
_c = oklchColor.h,
|
|
18
|
-
h = _c === void 0 ? 0 : _c;
|
|
19
|
-
var safeH = h === undefined || isNaN(h) ? 0 : h;
|
|
20
|
-
var newL = Math.max(0, Math.min(1, l + dL / 100));
|
|
21
|
-
var newC = Math.max(0, c + dC);
|
|
22
|
-
return 'oklch('.concat(newL.toFixed(3), ' ').concat(newC.toFixed(3), ' ').concat(safeH.toFixed(0), ')');
|
|
23
|
-
}
|
|
24
|
-
export function getHover(hex) {
|
|
25
|
-
var toOklch = converter('oklch');
|
|
26
|
-
var oklchColor = toOklch(hex);
|
|
27
|
-
if (!oklchColor) {
|
|
28
|
-
return { light: hex, dark: hex };
|
|
29
|
-
}
|
|
30
|
-
var lightHoverColor = applyOklchDelta(oklchColor, HOVER_LIGHT_L, HOVER_LIGHT_C);
|
|
31
|
-
var darkHoverColor = applyOklchDelta(oklchColor, HOVER_DARK_L, HOVER_DARK_C);
|
|
32
|
-
return {
|
|
33
|
-
light: lightHoverColor,
|
|
34
|
-
dark: darkHoverColor,
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
export function getPressed(hex) {
|
|
38
|
-
var toOklch = converter('oklch');
|
|
39
|
-
var oklchColor = toOklch(hex);
|
|
40
|
-
if (!oklchColor) {
|
|
41
|
-
return { light: hex, dark: hex };
|
|
42
|
-
}
|
|
43
|
-
var lightPressedColor = applyOklchDelta(oklchColor, PRESSED_LIGHT_L, PRESSED_LIGHT_C);
|
|
44
|
-
var darkPressedColor = applyOklchDelta(oklchColor, PRESSED_DARK_L, PRESSED_DARK_C);
|
|
45
|
-
return {
|
|
46
|
-
light: lightPressedColor,
|
|
47
|
-
dark: darkPressedColor,
|
|
48
|
-
};
|
|
49
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { converter } from 'culori';
|
|
2
|
-
import { LOGO_LIGHTNESS_MIN } from '../consts/params/logo-lightness.js';
|
|
3
|
-
export function getLogo(hex) {
|
|
4
|
-
var toOklch = converter('oklch');
|
|
5
|
-
var oklchColor = toOklch(hex);
|
|
6
|
-
var lightThemeLogoColor = hex;
|
|
7
|
-
if (!oklchColor) {
|
|
8
|
-
var fallbackColor = 'oklch('.concat(LOGO_LIGHTNESS_MIN, '% 0 0)');
|
|
9
|
-
return { light: hex, dark: fallbackColor };
|
|
10
|
-
}
|
|
11
|
-
var _a = oklchColor.l,
|
|
12
|
-
l = _a === void 0 ? 0 : _a,
|
|
13
|
-
_b = oklchColor.c,
|
|
14
|
-
c = _b === void 0 ? 0 : _b;
|
|
15
|
-
var h = oklchColor.h;
|
|
16
|
-
var safeH = h === undefined || isNaN(h) ? 0 : h;
|
|
17
|
-
l = l || 0;
|
|
18
|
-
c = c || 0;
|
|
19
|
-
var percentL = l * 100;
|
|
20
|
-
if (percentL < LOGO_LIGHTNESS_MIN) {
|
|
21
|
-
l = LOGO_LIGHTNESS_MIN / 100;
|
|
22
|
-
}
|
|
23
|
-
var darkThemeLogoColor = 'oklch('.concat(l.toFixed(3), ' ').concat(c.toFixed(3), ' ').concat(safeH.toFixed(0), ')');
|
|
24
|
-
return {
|
|
25
|
-
light: lightThemeLogoColor,
|
|
26
|
-
dark: darkThemeLogoColor,
|
|
27
|
-
};
|
|
28
|
-
}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
GeneratorColorAbneyCorrection,
|
|
3
|
-
GeneratorColorChromaParamsGroup,
|
|
4
|
-
GeneratorColorPalette,
|
|
5
|
-
GeneratorColorWarningHuePatch,
|
|
6
|
-
} from '../types/tokens-base-generator.js';
|
|
7
|
-
interface GeneratePaletteParams {
|
|
8
|
-
color: string;
|
|
9
|
-
type?: 'default' | 'warning';
|
|
10
|
-
settings?: {
|
|
11
|
-
chromaSettings?: GeneratorColorChromaParamsGroup;
|
|
12
|
-
abneyCorrection?: GeneratorColorAbneyCorrection;
|
|
13
|
-
promoHueShifts?: {
|
|
14
|
-
[hueRange: number]: number;
|
|
15
|
-
};
|
|
16
|
-
warningHuePatch?: GeneratorColorWarningHuePatch;
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
export declare function getPalette({
|
|
20
|
-
color,
|
|
21
|
-
type,
|
|
22
|
-
settings: customSettings,
|
|
23
|
-
}: GeneratePaletteParams): GeneratorColorPalette;
|
|
24
|
-
export declare function getAbneyHueShift(
|
|
25
|
-
lightness: number,
|
|
26
|
-
currentHue: number,
|
|
27
|
-
abneyData: GeneratorColorAbneyCorrection
|
|
28
|
-
): number;
|
|
29
|
-
export declare function applyAbneyShift(
|
|
30
|
-
lightness: number,
|
|
31
|
-
currentHue: number,
|
|
32
|
-
abneyData: GeneratorColorAbneyCorrection
|
|
33
|
-
): number;
|
|
34
|
-
export declare function applyWarningHuePatch(
|
|
35
|
-
currentHue: number,
|
|
36
|
-
lightness: number,
|
|
37
|
-
warningHuePatchData: GeneratorColorWarningHuePatch,
|
|
38
|
-
isWarningMode: boolean
|
|
39
|
-
): number;
|
|
40
|
-
export declare function calculateBaseHueAndCorrectionRange(
|
|
41
|
-
inputColorString: string,
|
|
42
|
-
abneyData: GeneratorColorAbneyCorrection
|
|
43
|
-
): {
|
|
44
|
-
baseHue: number;
|
|
45
|
-
correctionLightness: number;
|
|
46
|
-
correctionHueRange: number;
|
|
47
|
-
} | null;
|
|
48
|
-
export declare function calcOnBrand(hex: string): {
|
|
49
|
-
4: string;
|
|
50
|
-
6: string;
|
|
51
|
-
8: string;
|
|
52
|
-
12: string;
|
|
53
|
-
16: string;
|
|
54
|
-
20: string;
|
|
55
|
-
24: string;
|
|
56
|
-
28: string;
|
|
57
|
-
32: string;
|
|
58
|
-
36: string;
|
|
59
|
-
40: string;
|
|
60
|
-
44: string;
|
|
61
|
-
48: string;
|
|
62
|
-
52: string;
|
|
63
|
-
56: string;
|
|
64
|
-
60: string;
|
|
65
|
-
64: string;
|
|
66
|
-
68: string;
|
|
67
|
-
72: string;
|
|
68
|
-
76: string;
|
|
69
|
-
80: string;
|
|
70
|
-
84: string;
|
|
71
|
-
88: string;
|
|
72
|
-
92: string;
|
|
73
|
-
96: string;
|
|
74
|
-
100: string;
|
|
75
|
-
};
|
|
76
|
-
export {};
|
|
@@ -1,232 +0,0 @@
|
|
|
1
|
-
var __assign =
|
|
2
|
-
(this && this.__assign) ||
|
|
3
|
-
function () {
|
|
4
|
-
__assign =
|
|
5
|
-
Object.assign ||
|
|
6
|
-
function (t) {
|
|
7
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
-
s = arguments[i];
|
|
9
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
return __assign.apply(this, arguments);
|
|
14
|
-
};
|
|
15
|
-
var __spreadArray =
|
|
16
|
-
(this && this.__spreadArray) ||
|
|
17
|
-
function (to, from, pack) {
|
|
18
|
-
if (pack || arguments.length === 2)
|
|
19
|
-
for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
20
|
-
if (ar || !(i in from)) {
|
|
21
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
22
|
-
ar[i] = from[i];
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
26
|
-
};
|
|
27
|
-
import { clampChroma, converter } from 'culori';
|
|
28
|
-
import { calcAPCA } from 'apca-w3';
|
|
29
|
-
import * as DefaultSwatch from '../consts/default-swatch.js';
|
|
30
|
-
import { CHROMA_PARAMS } from '../consts/params/chroma-params.js';
|
|
31
|
-
import { ABNEY_CORRECTION } from '../consts/params/abney-correction.js';
|
|
32
|
-
import { PROMO_HUE_SHIFTS } from '../consts/params/promo-hue-shift.js';
|
|
33
|
-
import { WARNING_HUE_PATCH } from '../consts/params/warning-hue-patch.js';
|
|
34
|
-
export function getPalette(_a) {
|
|
35
|
-
var color = _a.color,
|
|
36
|
-
_b = _a.type,
|
|
37
|
-
type = _b === void 0 ? 'default' : _b,
|
|
38
|
-
customSettings = _a.settings;
|
|
39
|
-
var defaultSettings = {
|
|
40
|
-
chromaSettings: CHROMA_PARAMS,
|
|
41
|
-
abneyCorrection: ABNEY_CORRECTION,
|
|
42
|
-
promoHueShifts: PROMO_HUE_SHIFTS,
|
|
43
|
-
warningHuePatch: WARNING_HUE_PATCH,
|
|
44
|
-
};
|
|
45
|
-
var settings = __assign(__assign({}, defaultSettings), customSettings);
|
|
46
|
-
var toOklch = converter('oklch');
|
|
47
|
-
var oklchColor = toOklch(color);
|
|
48
|
-
var currentHue = (oklchColor === null || oklchColor === void 0 ? void 0 : oklchColor.h) || 0;
|
|
49
|
-
var toNorm = function (x) {
|
|
50
|
-
return x / 100;
|
|
51
|
-
};
|
|
52
|
-
var calculateChromaValue = function (rel, min, max, baseChromaMax) {
|
|
53
|
-
var raw = (baseChromaMax * rel) / 100;
|
|
54
|
-
var value = raw;
|
|
55
|
-
if (min !== undefined) {
|
|
56
|
-
value = Math.max(toNorm(min), value);
|
|
57
|
-
}
|
|
58
|
-
if (max !== undefined) {
|
|
59
|
-
value = Math.min(toNorm(max), value);
|
|
60
|
-
}
|
|
61
|
-
return Math.min(value, baseChromaMax);
|
|
62
|
-
};
|
|
63
|
-
var result = {
|
|
64
|
-
vivid: {},
|
|
65
|
-
normal: {},
|
|
66
|
-
dim: {},
|
|
67
|
-
};
|
|
68
|
-
var isWarning = type === 'warning';
|
|
69
|
-
for (var Lstr in settings.chromaSettings) {
|
|
70
|
-
var L = +Lstr;
|
|
71
|
-
if (L === 100) {
|
|
72
|
-
result.vivid[L] = 'oklch(100% 0 0)';
|
|
73
|
-
result.normal[L] = 'oklch(100% 0 0)';
|
|
74
|
-
result.dim[L] = 'oklch(100% 0 0)';
|
|
75
|
-
continue;
|
|
76
|
-
}
|
|
77
|
-
var hueAfterWarningPatch = applyWarningHuePatch(currentHue, L, settings.warningHuePatch, isWarning);
|
|
78
|
-
var appliedHueShift = applyAbneyShift(L, hueAfterWarningPatch, settings.abneyCorrection);
|
|
79
|
-
var chromaMax = clampChroma({ mode: 'oklch', l: L / 100, c: 1, h: appliedHueShift }, 'oklch').c;
|
|
80
|
-
var currentParams = settings.chromaSettings[L];
|
|
81
|
-
var vividN = calculateChromaValue(
|
|
82
|
-
currentParams.vivid.rel,
|
|
83
|
-
currentParams.vivid.min,
|
|
84
|
-
currentParams.vivid.max,
|
|
85
|
-
chromaMax
|
|
86
|
-
);
|
|
87
|
-
var normN = calculateChromaValue(
|
|
88
|
-
currentParams.normal.rel,
|
|
89
|
-
currentParams.normal.min,
|
|
90
|
-
currentParams.normal.max,
|
|
91
|
-
chromaMax
|
|
92
|
-
);
|
|
93
|
-
var dimN = calculateChromaValue(currentParams.dim.rel, currentParams.dim.min, currentParams.dim.max, chromaMax);
|
|
94
|
-
result.vivid[L] = 'oklch('.concat(L, '% ').concat(vividN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
|
|
95
|
-
result.normal[L] = 'oklch('.concat(L, '% ').concat(normN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
|
|
96
|
-
result.dim[L] = 'oklch('.concat(L, '% ').concat(dimN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
|
|
97
|
-
}
|
|
98
|
-
return result;
|
|
99
|
-
}
|
|
100
|
-
export function getAbneyHueShift(lightness, currentHue, abneyData) {
|
|
101
|
-
var lightnessData = abneyData[lightness];
|
|
102
|
-
if (!lightnessData) {
|
|
103
|
-
return 0;
|
|
104
|
-
}
|
|
105
|
-
var hueRanges = Object.keys(lightnessData)
|
|
106
|
-
.map(Number)
|
|
107
|
-
.sort(function (a, b) {
|
|
108
|
-
return a - b;
|
|
109
|
-
});
|
|
110
|
-
var selectedHueRange = hueRanges[0];
|
|
111
|
-
for (var i = 0; i < hueRanges.length; i++) {
|
|
112
|
-
var startRange = hueRanges[i];
|
|
113
|
-
var endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
|
|
114
|
-
if (currentHue >= startRange && currentHue < endRange) {
|
|
115
|
-
selectedHueRange = startRange;
|
|
116
|
-
break;
|
|
117
|
-
}
|
|
118
|
-
if (i === hueRanges.length - 1 && currentHue >= startRange && currentHue < 360) {
|
|
119
|
-
selectedHueRange = startRange;
|
|
120
|
-
break;
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
return lightnessData[selectedHueRange] !== undefined ? lightnessData[selectedHueRange] : 0;
|
|
124
|
-
}
|
|
125
|
-
export function applyAbneyShift(lightness, currentHue, abneyData) {
|
|
126
|
-
var abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
|
|
127
|
-
return (currentHue + abneyShift + 360) % 360;
|
|
128
|
-
}
|
|
129
|
-
export function applyWarningHuePatch(currentHue, lightness, warningHuePatchData, isWarningMode) {
|
|
130
|
-
if (isWarningMode) {
|
|
131
|
-
var patch = warningHuePatchData[lightness];
|
|
132
|
-
if (patch !== undefined) {
|
|
133
|
-
return (currentHue + patch + 360) % 360;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
return currentHue;
|
|
137
|
-
}
|
|
138
|
-
function findClosestLightnessStep(targetL, availableLightnessSteps) {
|
|
139
|
-
if (availableLightnessSteps.length === 0) {
|
|
140
|
-
return targetL;
|
|
141
|
-
}
|
|
142
|
-
var sortedSteps = __spreadArray([], availableLightnessSteps, true).sort(function (a, b) {
|
|
143
|
-
return a - b;
|
|
144
|
-
});
|
|
145
|
-
var closestStep = sortedSteps[0];
|
|
146
|
-
var minDiff = Math.abs(targetL - closestStep);
|
|
147
|
-
for (var i = 1; i < sortedSteps.length; i++) {
|
|
148
|
-
var currentStep = sortedSteps[i];
|
|
149
|
-
var diff = Math.abs(targetL - currentStep);
|
|
150
|
-
if (diff < minDiff || (diff === minDiff && currentStep > closestStep)) {
|
|
151
|
-
minDiff = diff;
|
|
152
|
-
closestStep = currentStep;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
return closestStep;
|
|
156
|
-
}
|
|
157
|
-
export function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
|
|
158
|
-
var toOklch = converter('oklch');
|
|
159
|
-
var oklch = toOklch(inputColorString);
|
|
160
|
-
if (!oklch) {
|
|
161
|
-
console.warn('Could not parse color string: '.concat(inputColorString));
|
|
162
|
-
return null;
|
|
163
|
-
}
|
|
164
|
-
var targetLightness = Math.round(oklch.l * 100);
|
|
165
|
-
var targetHue = oklch.h;
|
|
166
|
-
if (isNaN(targetHue)) {
|
|
167
|
-
console.warn('Achromatic color detected ('.concat(inputColorString, '). Defaulting hue to 0.'));
|
|
168
|
-
targetHue = 0;
|
|
169
|
-
}
|
|
170
|
-
var availableLightnessSteps = Object.keys(abneyData).map(Number);
|
|
171
|
-
if (availableLightnessSteps.length === 0) {
|
|
172
|
-
console.warn('Abney correction data is empty, cannot calculate base hue.');
|
|
173
|
-
return null;
|
|
174
|
-
}
|
|
175
|
-
var closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
|
|
176
|
-
var lightnessCorrectionData = abneyData[closestLightness];
|
|
177
|
-
if (!lightnessCorrectionData) {
|
|
178
|
-
console.warn('No Abney correction data for lightness '.concat(closestLightness, '.'));
|
|
179
|
-
return null;
|
|
180
|
-
}
|
|
181
|
-
var correctedHueMap = Object.entries(lightnessCorrectionData).map(function (_a) {
|
|
182
|
-
var rawHueStr = _a[0],
|
|
183
|
-
shift = _a[1];
|
|
184
|
-
var rawHue = Number(rawHueStr);
|
|
185
|
-
return {
|
|
186
|
-
rawHue: rawHue,
|
|
187
|
-
shift: shift,
|
|
188
|
-
correctedHue: (rawHue + shift + 360) % 360,
|
|
189
|
-
};
|
|
190
|
-
});
|
|
191
|
-
correctedHueMap.sort(function (a, b) {
|
|
192
|
-
if (a.correctedHue !== b.correctedHue) {
|
|
193
|
-
return a.correctedHue - b.correctedHue;
|
|
194
|
-
}
|
|
195
|
-
return a.rawHue - b.rawHue;
|
|
196
|
-
});
|
|
197
|
-
if (correctedHueMap.length === 0) {
|
|
198
|
-
console.warn('No hue ranges defined for lightness '.concat(closestLightness, '.'));
|
|
199
|
-
return null;
|
|
200
|
-
}
|
|
201
|
-
var findCorrectRange = function () {
|
|
202
|
-
var nextRangeIndex = correctedHueMap.findIndex(function (range) {
|
|
203
|
-
return range.correctedHue > targetHue;
|
|
204
|
-
});
|
|
205
|
-
if (nextRangeIndex === 0) {
|
|
206
|
-
return correctedHueMap[correctedHueMap.length - 1];
|
|
207
|
-
}
|
|
208
|
-
if (nextRangeIndex > 0) {
|
|
209
|
-
return correctedHueMap[nextRangeIndex - 1];
|
|
210
|
-
}
|
|
211
|
-
return correctedHueMap[correctedHueMap.length - 1];
|
|
212
|
-
};
|
|
213
|
-
var selectedRange = findCorrectRange();
|
|
214
|
-
if (!selectedRange) {
|
|
215
|
-
console.error('Could not determine the correct hue range.');
|
|
216
|
-
return null;
|
|
217
|
-
}
|
|
218
|
-
var baseHue = (targetHue - selectedRange.shift + 360) % 360;
|
|
219
|
-
return {
|
|
220
|
-
baseHue: baseHue,
|
|
221
|
-
correctionLightness: closestLightness,
|
|
222
|
-
correctionHueRange: selectedRange.rawHue,
|
|
223
|
-
};
|
|
224
|
-
}
|
|
225
|
-
export function calcOnBrand(hex) {
|
|
226
|
-
var whiteContrast = Math.abs(Number(calcAPCA('#fff', hex)));
|
|
227
|
-
var blackContrast = Math.abs(Number(calcAPCA('#000', hex)));
|
|
228
|
-
if (whiteContrast + 10 >= blackContrast) {
|
|
229
|
-
return DefaultSwatch.whiteAlpha;
|
|
230
|
-
}
|
|
231
|
-
return DefaultSwatch.blackAlpha;
|
|
232
|
-
}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { clampChroma, converter, formatHex } from 'culori';
|
|
2
|
-
import { PROMO_HUE_SHIFTS } from '../consts/params/promo-hue-shift.js';
|
|
3
|
-
export function getPromo(color, hueShifts) {
|
|
4
|
-
if (hueShifts === void 0) {
|
|
5
|
-
hueShifts = PROMO_HUE_SHIFTS;
|
|
6
|
-
}
|
|
7
|
-
var toOklch = converter('oklch');
|
|
8
|
-
var oklchColor = toOklch(color);
|
|
9
|
-
if (!oklchColor) {
|
|
10
|
-
throw new Error('Invalid color string: '.concat(color));
|
|
11
|
-
}
|
|
12
|
-
var currentHue = oklchColor.h;
|
|
13
|
-
var promoHueShift = getPromoHueShift(currentHue, hueShifts);
|
|
14
|
-
var correctedHue = (currentHue + promoHueShift + 360) % 360;
|
|
15
|
-
var promoLightness = oklchColor.l * 100;
|
|
16
|
-
if (promoLightness >= 50) {
|
|
17
|
-
promoLightness = promoLightness - 32;
|
|
18
|
-
}
|
|
19
|
-
promoLightness = Math.min(Math.max(promoLightness, 30), 34);
|
|
20
|
-
var promoChroma = 0.1;
|
|
21
|
-
var finalLightness = Math.round(promoLightness) / 100;
|
|
22
|
-
var finalChroma = Math.round(promoChroma * 100) / 100;
|
|
23
|
-
var promoOklch = {
|
|
24
|
-
mode: 'oklch',
|
|
25
|
-
l: finalLightness,
|
|
26
|
-
c: finalChroma,
|
|
27
|
-
h: correctedHue,
|
|
28
|
-
};
|
|
29
|
-
return formatHex(clampChroma(promoOklch, 'oklch'));
|
|
30
|
-
}
|
|
31
|
-
export function getPromoHueShift(currentHue, promoHueShifts) {
|
|
32
|
-
var hueRanges = Object.keys(promoHueShifts)
|
|
33
|
-
.map(Number)
|
|
34
|
-
.sort(function (a, b) {
|
|
35
|
-
return a - b;
|
|
36
|
-
});
|
|
37
|
-
var selectedHueRange = hueRanges[0];
|
|
38
|
-
for (var i = 0; i < hueRanges.length; i++) {
|
|
39
|
-
var startRange = hueRanges[i];
|
|
40
|
-
var endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
|
|
41
|
-
if (currentHue >= startRange && currentHue < endRange) {
|
|
42
|
-
selectedHueRange = startRange;
|
|
43
|
-
break;
|
|
44
|
-
}
|
|
45
|
-
if (i === hueRanges.length - 1 && (currentHue >= startRange || currentHue < hueRanges[0])) {
|
|
46
|
-
selectedHueRange = startRange;
|
|
47
|
-
break;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
return promoHueShifts[selectedHueRange] !== undefined ? promoHueShifts[selectedHueRange] : 0;
|
|
51
|
-
}
|
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import { converter, formatHex } from 'culori';
|
|
2
|
-
export function convertColorFormat(obj, format) {
|
|
3
|
-
if (format === void 0) {
|
|
4
|
-
format = 'hex/rgba';
|
|
5
|
-
}
|
|
6
|
-
var result = obj;
|
|
7
|
-
result = convertOklchToHex(obj);
|
|
8
|
-
result = convertAlphaOklchToRgba(result);
|
|
9
|
-
switch (format) {
|
|
10
|
-
case 'oklch':
|
|
11
|
-
return obj;
|
|
12
|
-
case 'hex/rgba':
|
|
13
|
-
return result;
|
|
14
|
-
case 'hex-aarrggbb':
|
|
15
|
-
return convertToAarrggbbRecursive(result);
|
|
16
|
-
default:
|
|
17
|
-
return result;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
function convertOklchToHex(obj) {
|
|
21
|
-
if (typeof obj !== 'object' || obj === null) {
|
|
22
|
-
return obj;
|
|
23
|
-
}
|
|
24
|
-
if (Array.isArray(obj)) {
|
|
25
|
-
return obj.map(function (item) {
|
|
26
|
-
if (typeof item === 'object' && item !== null) {
|
|
27
|
-
return convertOklchToHex(item);
|
|
28
|
-
}
|
|
29
|
-
return item;
|
|
30
|
-
});
|
|
31
|
-
}
|
|
32
|
-
var newObj = {};
|
|
33
|
-
for (var key in obj) {
|
|
34
|
-
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
35
|
-
var value = obj[key];
|
|
36
|
-
if (typeof value === 'string' && value.startsWith('oklch(') && !value.includes('/')) {
|
|
37
|
-
var oklchColor = converter('oklch')(value);
|
|
38
|
-
var rgbColor = converter('rgb')(oklchColor);
|
|
39
|
-
value = formatHex(rgbColor);
|
|
40
|
-
}
|
|
41
|
-
if (typeof value === 'object' && value !== null) {
|
|
42
|
-
newObj[key] = convertOklchToHex(value);
|
|
43
|
-
} else {
|
|
44
|
-
newObj[key] = value;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
return newObj;
|
|
49
|
-
}
|
|
50
|
-
var convertOklchToRgba = function (oklchString) {
|
|
51
|
-
var _a;
|
|
52
|
-
var oklch = converter('oklch')(oklchString);
|
|
53
|
-
var rgb = converter('rgb')(oklch);
|
|
54
|
-
var r = Math.round(rgb.r * 255);
|
|
55
|
-
var g = Math.round(rgb.g * 255);
|
|
56
|
-
var b = Math.round(rgb.b * 255);
|
|
57
|
-
var alpha = (_a = oklch.alpha) !== null && _a !== void 0 ? _a : 1;
|
|
58
|
-
return 'rgba('.concat(r, ', ').concat(g, ', ').concat(b, ', ').concat(alpha, ')');
|
|
59
|
-
};
|
|
60
|
-
function convertAlphaOklchToRgba(obj) {
|
|
61
|
-
if (typeof obj !== 'object' || obj === null) {
|
|
62
|
-
return obj;
|
|
63
|
-
}
|
|
64
|
-
if (Array.isArray(obj)) {
|
|
65
|
-
return obj.map(function (item) {
|
|
66
|
-
if (typeof item === 'object' && item !== null) {
|
|
67
|
-
return convertAlphaOklchToRgba(item);
|
|
68
|
-
}
|
|
69
|
-
return item;
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
var newObj = {};
|
|
73
|
-
for (var key in obj) {
|
|
74
|
-
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
75
|
-
var value = obj[key];
|
|
76
|
-
if (typeof value === 'string' && value.includes('oklch(')) {
|
|
77
|
-
value = convertOklchToRgba(value);
|
|
78
|
-
}
|
|
79
|
-
if (typeof value === 'object' && value !== null) {
|
|
80
|
-
newObj[key] = convertAlphaOklchToRgba(value);
|
|
81
|
-
} else {
|
|
82
|
-
newObj[key] = value;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
return newObj;
|
|
87
|
-
}
|
|
88
|
-
var convertToAarrggbb = function (colorString) {
|
|
89
|
-
var _a;
|
|
90
|
-
var color = converter('rgb')(colorString);
|
|
91
|
-
if (!color) {
|
|
92
|
-
return colorString;
|
|
93
|
-
}
|
|
94
|
-
var r = Math.round(color.r * 255);
|
|
95
|
-
var g = Math.round(color.g * 255);
|
|
96
|
-
var b = Math.round(color.b * 255);
|
|
97
|
-
var alpha = Math.round(((_a = color.alpha) !== null && _a !== void 0 ? _a : 1) * 255);
|
|
98
|
-
var toHex = function (c) {
|
|
99
|
-
return c.toString(16).padStart(2, '0');
|
|
100
|
-
};
|
|
101
|
-
var rgbHex = ''.concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).toUpperCase();
|
|
102
|
-
if (alpha === 255) {
|
|
103
|
-
return '#'.concat(rgbHex);
|
|
104
|
-
}
|
|
105
|
-
return '#'.concat(toHex(alpha)).concat(rgbHex).toUpperCase();
|
|
106
|
-
};
|
|
107
|
-
function convertToAarrggbbRecursive(obj) {
|
|
108
|
-
if (typeof obj !== 'object' || obj === null) {
|
|
109
|
-
return obj;
|
|
110
|
-
}
|
|
111
|
-
if (Array.isArray(obj)) {
|
|
112
|
-
return obj.map(function (item) {
|
|
113
|
-
if (typeof item === 'object' && item !== null) {
|
|
114
|
-
return convertToAarrggbbRecursive(item);
|
|
115
|
-
}
|
|
116
|
-
return item;
|
|
117
|
-
});
|
|
118
|
-
}
|
|
119
|
-
var newObj = {};
|
|
120
|
-
for (var key in obj) {
|
|
121
|
-
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
|
122
|
-
var value = obj[key];
|
|
123
|
-
if (typeof value === 'string') {
|
|
124
|
-
newObj[key] = convertToAarrggbb(value);
|
|
125
|
-
} else if (typeof value === 'object' && value !== null) {
|
|
126
|
-
newObj[key] = convertToAarrggbbRecursive(value);
|
|
127
|
-
} else {
|
|
128
|
-
newObj[key] = value;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
return newObj;
|
|
133
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export var camelCaseToKebabCase = function (str) {
|
|
2
|
-
return str.replace(/[A-Z]/g, function (match) {
|
|
3
|
-
return '-'.concat(match.toLowerCase());
|
|
4
|
-
});
|
|
5
|
-
};
|
|
6
|
-
export var kebabCaseToCamelCase = function (str) {
|
|
7
|
-
return str.replace(/-(\w)/g, function (_, c) {
|
|
8
|
-
return c.toUpperCase();
|
|
9
|
-
});
|
|
10
|
-
};
|