@skbkontur/colors 1.1.2-d1791.0 → 2.0.0-alpha.0
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/dist/cjs/constants/abney-correction.js +1102 -1102
- package/dist/cjs/constants/chroma-settings.js +102 -102
- package/dist/cjs/constants/default-swatch.d.ts +97 -95
- package/dist/cjs/constants/default-swatch.js +99 -97
- package/dist/cjs/constants/interaction-settings.d.ts +8 -0
- package/dist/cjs/constants/interaction-settings.js +19 -0
- package/dist/cjs/constants/logo-lightness.js +2 -2
- package/dist/cjs/constants/promo-hue-shift.d.ts +1 -1
- package/dist/cjs/constants/promo-hue-shift.js +11 -11
- package/dist/cjs/constants/warning-hue-patch.d.ts +1 -1
- package/dist/cjs/constants/warning-hue-patch.js +22 -22
- package/dist/cjs/get-base-tokens.d.ts +11 -9
- package/dist/cjs/get-base-tokens.js +178 -202
- package/dist/cjs/get-colors.d.ts +19 -0
- package/dist/cjs/get-colors.js +16 -0
- package/dist/cjs/get-default-tokens.d.ts +642 -1275
- package/dist/cjs/get-default-tokens.js +993 -1280
- package/dist/cjs/helpers/get-interactions.d.ts +7 -0
- package/dist/cjs/helpers/get-interactions.js +61 -0
- package/dist/cjs/helpers/get-logo.d.ts +2 -2
- package/dist/cjs/helpers/get-logo.js +28 -25
- package/dist/cjs/helpers/get-palette.d.ts +69 -42
- package/dist/cjs/helpers/get-palette.js +249 -204
- package/dist/cjs/helpers/get-promo.d.ts +10 -4
- package/dist/cjs/helpers/get-promo.js +48 -50
- package/dist/cjs/types/base-tokens.d.ts +115 -43
- package/dist/cjs/types/base-tokens.js +2 -2
- package/dist/cjs/types/generator-tokens.d.ts +30 -30
- package/dist/cjs/types/generator-tokens.js +2 -2
- package/dist/cjs/utils/format-variable.d.ts +2 -0
- package/dist/cjs/utils/format-variable.js +15 -0
- package/dist/colors.default-dark.js +325 -0
- package/dist/colors.default-light.js +326 -0
- package/dist/colors.js +319 -0
- package/dist/colors.less +319 -0
- package/dist/colors.scss +319 -0
- package/dist/esm/constants/abney-correction.js +1100 -1100
- package/dist/esm/constants/chroma-settings.js +100 -100
- package/dist/esm/constants/default-swatch.d.ts +97 -95
- package/dist/esm/constants/default-swatch.js +97 -95
- package/dist/esm/constants/interaction-settings.d.ts +8 -0
- package/dist/esm/constants/interaction-settings.js +8 -0
- package/dist/esm/constants/promo-hue-shift.d.ts +1 -1
- package/dist/esm/constants/promo-hue-shift.js +9 -9
- package/dist/esm/constants/warning-hue-patch.d.ts +1 -1
- package/dist/esm/constants/warning-hue-patch.js +20 -20
- package/dist/esm/get-base-tokens.d.ts +11 -9
- package/dist/esm/get-base-tokens.js +130 -172
- package/dist/esm/get-colors.d.ts +19 -0
- package/dist/esm/get-colors.js +12 -0
- package/dist/esm/get-default-tokens.d.ts +642 -1275
- package/dist/esm/get-default-tokens.js +991 -1278
- package/dist/esm/helpers/get-interactions.d.ts +7 -0
- package/dist/esm/helpers/get-interactions.js +49 -0
- package/dist/esm/helpers/get-logo.d.ts +2 -2
- package/dist/esm/helpers/get-logo.js +24 -21
- package/dist/esm/helpers/get-palette.d.ts +69 -42
- package/dist/esm/helpers/get-palette.js +197 -175
- package/dist/esm/helpers/get-promo.d.ts +10 -4
- package/dist/esm/helpers/get-promo.js +44 -46
- package/dist/esm/types/base-tokens.d.ts +115 -43
- package/dist/esm/types/generator-tokens.d.ts +30 -30
- package/dist/esm/utils/format-variable.d.ts +2 -0
- package/dist/esm/utils/format-variable.js +10 -0
- package/dist/tokens/brand-blue-deep_accent-brand.css +643 -0
- package/dist/tokens/brand-blue-deep_accent-gray.css +643 -0
- package/dist/tokens/brand-blue_accent-brand.css +643 -0
- package/dist/tokens/brand-blue_accent-gray.css +643 -0
- package/dist/tokens/brand-green_accent-brand.css +643 -0
- package/dist/tokens/brand-green_accent-gray.css +643 -0
- package/dist/tokens/brand-mint_accent-brand.css +643 -0
- package/dist/tokens/brand-mint_accent-gray.css +643 -0
- package/dist/tokens/brand-orange_accent-gray.css +643 -0
- package/dist/tokens/brand-purple_accent-brand.css +643 -0
- package/dist/tokens/brand-purple_accent-gray.css +643 -0
- package/dist/tokens/brand-red_accent-gray.css +643 -0
- package/dist/tokens/brand-violet_accent-brand.css +643 -0
- package/dist/tokens/brand-violet_accent-gray.css +643 -0
- package/dist/tokens-js/brand-blue-deep_accent-brand.js +644 -0
- package/dist/tokens-js/brand-blue-deep_accent-gray.js +644 -0
- package/dist/tokens-js/brand-blue_accent-brand.js +644 -0
- package/dist/tokens-js/brand-blue_accent-gray.js +644 -0
- package/dist/tokens-js/brand-green_accent-brand.js +644 -0
- package/dist/tokens-js/brand-green_accent-gray.js +644 -0
- package/dist/tokens-js/brand-mint_accent-brand.js +644 -0
- package/dist/tokens-js/brand-mint_accent-gray.js +644 -0
- package/dist/tokens-js/brand-orange_accent-gray.js +644 -0
- package/dist/tokens-js/brand-purple_accent-brand.js +644 -0
- package/dist/tokens-js/brand-purple_accent-gray.js +644 -0
- package/dist/tokens-js/brand-red_accent-gray.js +644 -0
- package/dist/tokens-js/brand-violet_accent-brand.js +644 -0
- package/dist/tokens-js/brand-violet_accent-gray.js +644 -0
- package/dist/tokens-mobile/brand-blue-deep_accent-brand.json +718 -0
- package/dist/tokens-mobile/brand-blue-deep_accent-gray.json +718 -0
- package/dist/tokens-mobile/brand-blue_accent-brand.json +718 -0
- package/dist/tokens-mobile/brand-blue_accent-gray.json +718 -0
- package/dist/tokens-mobile/brand-green_accent-brand.json +718 -0
- package/dist/tokens-mobile/brand-green_accent-gray.json +718 -0
- package/dist/tokens-mobile/brand-mint_accent-brand.json +718 -0
- package/dist/tokens-mobile/brand-mint_accent-gray.json +718 -0
- package/dist/tokens-mobile/brand-orange_accent-gray.json +718 -0
- package/dist/tokens-mobile/brand-purple_accent-brand.json +718 -0
- package/dist/tokens-mobile/brand-purple_accent-gray.json +718 -0
- package/dist/tokens-mobile/brand-red_accent-gray.json +718 -0
- package/dist/tokens-mobile/brand-violet_accent-brand.json +718 -0
- package/dist/tokens-mobile/brand-violet_accent-gray.json +718 -0
- package/package.json +7 -6
- package/dist/cjs/get-tokens.d.ts +0 -15
- package/dist/cjs/get-tokens.js +0 -13
- package/dist/esm/get-tokens.d.ts +0 -15
- package/dist/esm/get-tokens.js +0 -9
|
@@ -1,242 +1,287 @@
|
|
|
1
|
-
|
|
2
|
-
var __assign =
|
|
3
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
var __assign =
|
|
3
|
+
(this && this.__assign) ||
|
|
4
|
+
function () {
|
|
5
|
+
__assign =
|
|
6
|
+
Object.assign ||
|
|
7
|
+
function (t) {
|
|
4
8
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
t[p] = s[p];
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
8
11
|
}
|
|
9
12
|
return t;
|
|
10
|
-
|
|
13
|
+
};
|
|
11
14
|
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __createBinding =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
}
|
|
29
|
-
|
|
15
|
+
};
|
|
16
|
+
var __createBinding =
|
|
17
|
+
(this && this.__createBinding) ||
|
|
18
|
+
(Object.create
|
|
19
|
+
? function (o, m, k, k2) {
|
|
20
|
+
if (k2 === undefined) k2 = k;
|
|
21
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
22
|
+
if (!desc || ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
23
|
+
desc = {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () {
|
|
26
|
+
return m[k];
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
Object.defineProperty(o, k2, desc);
|
|
31
|
+
}
|
|
32
|
+
: function (o, m, k, k2) {
|
|
33
|
+
if (k2 === undefined) k2 = k;
|
|
34
|
+
o[k2] = m[k];
|
|
35
|
+
});
|
|
36
|
+
var __setModuleDefault =
|
|
37
|
+
(this && this.__setModuleDefault) ||
|
|
38
|
+
(Object.create
|
|
39
|
+
? function (o, v) {
|
|
40
|
+
Object.defineProperty(o, 'default', { enumerable: true, value: v });
|
|
41
|
+
}
|
|
42
|
+
: function (o, v) {
|
|
43
|
+
o['default'] = v;
|
|
44
|
+
});
|
|
45
|
+
var __importStar =
|
|
46
|
+
(this && this.__importStar) ||
|
|
47
|
+
function (mod) {
|
|
30
48
|
if (mod && mod.__esModule) return mod;
|
|
31
49
|
var result = {};
|
|
32
|
-
if (mod != null)
|
|
50
|
+
if (mod != null)
|
|
51
|
+
for (var k in mod)
|
|
52
|
+
if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
53
|
__setModuleDefault(result, mod);
|
|
34
54
|
return result;
|
|
35
|
-
};
|
|
36
|
-
var __spreadArray =
|
|
37
|
-
|
|
55
|
+
};
|
|
56
|
+
var __spreadArray =
|
|
57
|
+
(this && this.__spreadArray) ||
|
|
58
|
+
function (to, from, pack) {
|
|
59
|
+
if (pack || arguments.length === 2)
|
|
60
|
+
for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
38
61
|
if (ar || !(i in from)) {
|
|
39
|
-
|
|
40
|
-
|
|
62
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
63
|
+
ar[i] = from[i];
|
|
41
64
|
}
|
|
42
|
-
|
|
65
|
+
}
|
|
43
66
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
44
|
-
};
|
|
45
|
-
Object.defineProperty(exports,
|
|
46
|
-
exports.calcOnBrand =
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
var
|
|
67
|
+
};
|
|
68
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
69
|
+
exports.calcOnBrand =
|
|
70
|
+
exports.calculateBaseHueAndCorrectionRange =
|
|
71
|
+
exports.applyWarningHuePatch =
|
|
72
|
+
exports.applyAbneyShift =
|
|
73
|
+
exports.getAbneyHueShift =
|
|
74
|
+
exports.getPalette =
|
|
75
|
+
void 0;
|
|
76
|
+
var culori_1 = require('culori');
|
|
77
|
+
var apca_w3_1 = require('apca-w3');
|
|
78
|
+
var DefaultSwatch = __importStar(require('../constants/default-swatch'));
|
|
79
|
+
var chroma_settings_1 = require('../constants/chroma-settings');
|
|
80
|
+
var abney_correction_1 = require('../constants/abney-correction');
|
|
81
|
+
var promo_hue_shift_1 = require('../constants/promo-hue-shift');
|
|
82
|
+
var warning_hue_patch_1 = require('../constants/warning-hue-patch');
|
|
54
83
|
function getPalette(_a) {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
};
|
|
78
|
-
var result = {
|
|
79
|
-
vivid: {},
|
|
80
|
-
normal: {},
|
|
81
|
-
dim: {},
|
|
82
|
-
};
|
|
83
|
-
var isWarning = type === 'warning';
|
|
84
|
-
for (var Lstr in settings.chromaSettings) {
|
|
85
|
-
var L = +Lstr;
|
|
86
|
-
if (L === 100) {
|
|
87
|
-
result.vivid[L] = "oklch(100% 0 0)";
|
|
88
|
-
result.normal[L] = "oklch(100% 0 0)";
|
|
89
|
-
result.dim[L] = "oklch(100% 0 0)";
|
|
90
|
-
continue;
|
|
91
|
-
}
|
|
92
|
-
var hueAfterWarningPatch = applyWarningHuePatch(currentHue, L, settings.warningHuePatch, isWarning);
|
|
93
|
-
var appliedHueShift = applyAbneyShift(L, hueAfterWarningPatch, settings.abneyCorrection);
|
|
94
|
-
var chromaMax = (0, culori_1.clampChroma)({ mode: 'oklch', l: L / 100, c: 1, h: appliedHueShift }, 'oklch').c;
|
|
95
|
-
var currentParams = settings.chromaSettings[L];
|
|
96
|
-
var vividN = calculateChromaValue(currentParams.vivid.rel, currentParams.vivid.min, currentParams.vivid.max, chromaMax);
|
|
97
|
-
var normN = calculateChromaValue(currentParams.normal.rel, currentParams.normal.min, currentParams.normal.max, chromaMax);
|
|
98
|
-
var dimN = calculateChromaValue(currentParams.dim.rel, currentParams.dim.min, currentParams.dim.max, chromaMax);
|
|
99
|
-
result.vivid[L] = "oklch(".concat(L, "% ").concat(vividN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
|
|
100
|
-
result.normal[L] = "oklch(".concat(L, "% ").concat(normN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
|
|
101
|
-
result.dim[L] = "oklch(".concat(L, "% ").concat(dimN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
|
|
84
|
+
var color = _a.color,
|
|
85
|
+
_b = _a.type,
|
|
86
|
+
type = _b === void 0 ? 'default' : _b,
|
|
87
|
+
customSettings = _a.settings;
|
|
88
|
+
var defaultSettings = {
|
|
89
|
+
chromaSettings: chroma_settings_1.CHROMA_SETTINGS,
|
|
90
|
+
abneyCorrection: abney_correction_1.ABNEY_CORRECTION,
|
|
91
|
+
promoHueShifts: promo_hue_shift_1.PROMO_HUE_SHIFTS,
|
|
92
|
+
warningHuePatch: warning_hue_patch_1.WARNING_HUE_PATCH,
|
|
93
|
+
};
|
|
94
|
+
var settings = __assign(__assign({}, defaultSettings), customSettings);
|
|
95
|
+
var toOklch = (0, culori_1.converter)('oklch');
|
|
96
|
+
var oklchColor = toOklch(color);
|
|
97
|
+
var currentHue = (oklchColor === null || oklchColor === void 0 ? void 0 : oklchColor.h) || 0;
|
|
98
|
+
var toNorm = function (x) {
|
|
99
|
+
return x / 100;
|
|
100
|
+
};
|
|
101
|
+
var calculateChromaValue = function (rel, min, max, baseChromaMax) {
|
|
102
|
+
var raw = (baseChromaMax * rel) / 100;
|
|
103
|
+
var value = raw;
|
|
104
|
+
if (min !== undefined) {
|
|
105
|
+
value = Math.max(toNorm(min), value);
|
|
102
106
|
}
|
|
103
|
-
|
|
107
|
+
if (max !== undefined) {
|
|
108
|
+
value = Math.min(toNorm(max), value);
|
|
109
|
+
}
|
|
110
|
+
return Math.min(value, baseChromaMax);
|
|
111
|
+
};
|
|
112
|
+
var result = {
|
|
113
|
+
vivid: {},
|
|
114
|
+
normal: {},
|
|
115
|
+
dim: {},
|
|
116
|
+
};
|
|
117
|
+
var isWarning = type === 'warning';
|
|
118
|
+
for (var Lstr in settings.chromaSettings) {
|
|
119
|
+
var L = +Lstr;
|
|
120
|
+
if (L === 100) {
|
|
121
|
+
result.vivid[L] = 'oklch(100% 0 0)';
|
|
122
|
+
result.normal[L] = 'oklch(100% 0 0)';
|
|
123
|
+
result.dim[L] = 'oklch(100% 0 0)';
|
|
124
|
+
continue;
|
|
125
|
+
}
|
|
126
|
+
var hueAfterWarningPatch = applyWarningHuePatch(currentHue, L, settings.warningHuePatch, isWarning);
|
|
127
|
+
var appliedHueShift = applyAbneyShift(L, hueAfterWarningPatch, settings.abneyCorrection);
|
|
128
|
+
var chromaMax = (0, culori_1.clampChroma)({ mode: 'oklch', l: L / 100, c: 1, h: appliedHueShift }, 'oklch').c;
|
|
129
|
+
var currentParams = settings.chromaSettings[L];
|
|
130
|
+
var vividN = calculateChromaValue(
|
|
131
|
+
currentParams.vivid.rel,
|
|
132
|
+
currentParams.vivid.min,
|
|
133
|
+
currentParams.vivid.max,
|
|
134
|
+
chromaMax
|
|
135
|
+
);
|
|
136
|
+
var normN = calculateChromaValue(
|
|
137
|
+
currentParams.normal.rel,
|
|
138
|
+
currentParams.normal.min,
|
|
139
|
+
currentParams.normal.max,
|
|
140
|
+
chromaMax
|
|
141
|
+
);
|
|
142
|
+
var dimN = calculateChromaValue(currentParams.dim.rel, currentParams.dim.min, currentParams.dim.max, chromaMax);
|
|
143
|
+
result.vivid[L] = 'oklch('.concat(L, '% ').concat(vividN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
|
|
144
|
+
result.normal[L] = 'oklch('.concat(L, '% ').concat(normN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
|
|
145
|
+
result.dim[L] = 'oklch('.concat(L, '% ').concat(dimN.toFixed(3), ' ').concat(appliedHueShift.toFixed(0), ')');
|
|
146
|
+
}
|
|
147
|
+
return result;
|
|
104
148
|
}
|
|
105
149
|
exports.getPalette = getPalette;
|
|
106
150
|
function getAbneyHueShift(lightness, currentHue, abneyData) {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
151
|
+
var lightnessData = abneyData[lightness];
|
|
152
|
+
if (!lightnessData) {
|
|
153
|
+
return 0;
|
|
154
|
+
}
|
|
155
|
+
var hueRanges = Object.keys(lightnessData)
|
|
156
|
+
.map(Number)
|
|
157
|
+
.sort(function (a, b) {
|
|
158
|
+
return a - b;
|
|
159
|
+
});
|
|
160
|
+
var selectedHueRange = hueRanges[0];
|
|
161
|
+
for (var i = 0; i < hueRanges.length; i++) {
|
|
162
|
+
var startRange = hueRanges[i];
|
|
163
|
+
var endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
|
|
164
|
+
if (currentHue >= startRange && currentHue < endRange) {
|
|
165
|
+
selectedHueRange = startRange;
|
|
166
|
+
break;
|
|
110
167
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
var selectedHueRange = hueRanges[0];
|
|
115
|
-
for (var i = 0; i < hueRanges.length; i++) {
|
|
116
|
-
var startRange = hueRanges[i];
|
|
117
|
-
var endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
|
|
118
|
-
if (currentHue >= startRange && currentHue < endRange) {
|
|
119
|
-
selectedHueRange = startRange;
|
|
120
|
-
break;
|
|
121
|
-
}
|
|
122
|
-
if (i === hueRanges.length - 1 && currentHue >= startRange && currentHue < 360) {
|
|
123
|
-
selectedHueRange = startRange;
|
|
124
|
-
break;
|
|
125
|
-
}
|
|
168
|
+
if (i === hueRanges.length - 1 && currentHue >= startRange && currentHue < 360) {
|
|
169
|
+
selectedHueRange = startRange;
|
|
170
|
+
break;
|
|
126
171
|
}
|
|
127
|
-
|
|
172
|
+
}
|
|
173
|
+
return lightnessData[selectedHueRange] !== undefined ? lightnessData[selectedHueRange] : 0;
|
|
128
174
|
}
|
|
129
175
|
exports.getAbneyHueShift = getAbneyHueShift;
|
|
130
176
|
function applyAbneyShift(lightness, currentHue, abneyData) {
|
|
131
|
-
|
|
132
|
-
|
|
177
|
+
var abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
|
|
178
|
+
return (currentHue + abneyShift + 360) % 360;
|
|
133
179
|
}
|
|
134
180
|
exports.applyAbneyShift = applyAbneyShift;
|
|
135
181
|
function applyWarningHuePatch(currentHue, lightness, warningHuePatchData, isWarningMode) {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
}
|
|
182
|
+
if (isWarningMode) {
|
|
183
|
+
var patch = warningHuePatchData[lightness];
|
|
184
|
+
if (patch !== undefined) {
|
|
185
|
+
return (currentHue + patch + 360) % 360;
|
|
141
186
|
}
|
|
142
|
-
|
|
187
|
+
}
|
|
188
|
+
return currentHue;
|
|
143
189
|
}
|
|
144
190
|
exports.applyWarningHuePatch = applyWarningHuePatch;
|
|
145
191
|
function findClosestLightnessStep(targetL, availableLightnessSteps) {
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
192
|
+
if (availableLightnessSteps.length === 0) {
|
|
193
|
+
return targetL;
|
|
194
|
+
}
|
|
195
|
+
var sortedSteps = __spreadArray([], availableLightnessSteps, true).sort(function (a, b) {
|
|
196
|
+
return a - b;
|
|
197
|
+
});
|
|
198
|
+
var closestStep = sortedSteps[0];
|
|
199
|
+
var minDiff = Math.abs(targetL - closestStep);
|
|
200
|
+
for (var i = 1; i < sortedSteps.length; i++) {
|
|
201
|
+
var currentStep = sortedSteps[i];
|
|
202
|
+
var diff = Math.abs(targetL - currentStep);
|
|
203
|
+
if (diff < minDiff || (diff === minDiff && currentStep > closestStep)) {
|
|
204
|
+
minDiff = diff;
|
|
205
|
+
closestStep = currentStep;
|
|
159
206
|
}
|
|
160
|
-
|
|
207
|
+
}
|
|
208
|
+
return closestStep;
|
|
161
209
|
}
|
|
162
210
|
function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
return correctedHueMap_1[nextRangeIndex - 1];
|
|
213
|
-
}
|
|
214
|
-
return correctedHueMap_1[correctedHueMap_1.length - 1];
|
|
215
|
-
};
|
|
216
|
-
var selectedRange = findCorrectRange();
|
|
217
|
-
if (!selectedRange) {
|
|
218
|
-
console.error('Could not determine the correct hue range.');
|
|
219
|
-
return null;
|
|
220
|
-
}
|
|
221
|
-
var baseHue = (targetHue_1 - selectedRange.shift + 360) % 360;
|
|
222
|
-
return {
|
|
223
|
-
baseHue: baseHue,
|
|
224
|
-
correctionLightness: closestLightness,
|
|
225
|
-
correctionHueRange: selectedRange.rawHue,
|
|
226
|
-
};
|
|
211
|
+
var toOklch = (0, culori_1.converter)('oklch');
|
|
212
|
+
var oklch = toOklch(inputColorString);
|
|
213
|
+
if (!oklch) {
|
|
214
|
+
console.warn('Could not parse color string: '.concat(inputColorString));
|
|
215
|
+
return null;
|
|
216
|
+
}
|
|
217
|
+
var targetLightness = Math.round(oklch.l * 100);
|
|
218
|
+
var targetHue = oklch.h;
|
|
219
|
+
if (isNaN(targetHue)) {
|
|
220
|
+
console.warn('Achromatic color detected ('.concat(inputColorString, '). Defaulting hue to 0.'));
|
|
221
|
+
targetHue = 0;
|
|
222
|
+
}
|
|
223
|
+
var availableLightnessSteps = Object.keys(abneyData).map(Number);
|
|
224
|
+
if (availableLightnessSteps.length === 0) {
|
|
225
|
+
console.warn('Abney correction data is empty, cannot calculate base hue.');
|
|
226
|
+
return null;
|
|
227
|
+
}
|
|
228
|
+
var closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
|
|
229
|
+
var lightnessCorrectionData = abneyData[closestLightness];
|
|
230
|
+
if (!lightnessCorrectionData) {
|
|
231
|
+
console.warn('No Abney correction data for lightness '.concat(closestLightness, '.'));
|
|
232
|
+
return null;
|
|
233
|
+
}
|
|
234
|
+
var correctedHueMap = Object.entries(lightnessCorrectionData).map(function (_a) {
|
|
235
|
+
var rawHueStr = _a[0],
|
|
236
|
+
shift = _a[1];
|
|
237
|
+
var rawHue = Number(rawHueStr);
|
|
238
|
+
return {
|
|
239
|
+
rawHue: rawHue,
|
|
240
|
+
shift: shift,
|
|
241
|
+
correctedHue: (rawHue + shift + 360) % 360,
|
|
242
|
+
};
|
|
243
|
+
});
|
|
244
|
+
correctedHueMap.sort(function (a, b) {
|
|
245
|
+
if (a.correctedHue !== b.correctedHue) {
|
|
246
|
+
return a.correctedHue - b.correctedHue;
|
|
247
|
+
}
|
|
248
|
+
return a.rawHue - b.rawHue;
|
|
249
|
+
});
|
|
250
|
+
if (correctedHueMap.length === 0) {
|
|
251
|
+
console.warn('No hue ranges defined for lightness '.concat(closestLightness, '.'));
|
|
252
|
+
return null;
|
|
253
|
+
}
|
|
254
|
+
var findCorrectRange = function () {
|
|
255
|
+
var nextRangeIndex = correctedHueMap.findIndex(function (range) {
|
|
256
|
+
return range.correctedHue > targetHue;
|
|
257
|
+
});
|
|
258
|
+
if (nextRangeIndex === 0) {
|
|
259
|
+
return correctedHueMap[correctedHueMap.length - 1];
|
|
227
260
|
}
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
return null;
|
|
261
|
+
if (nextRangeIndex > 0) {
|
|
262
|
+
return correctedHueMap[nextRangeIndex - 1];
|
|
231
263
|
}
|
|
264
|
+
return correctedHueMap[correctedHueMap.length - 1];
|
|
265
|
+
};
|
|
266
|
+
var selectedRange = findCorrectRange();
|
|
267
|
+
if (!selectedRange) {
|
|
268
|
+
console.error('Could not determine the correct hue range.');
|
|
269
|
+
return null;
|
|
270
|
+
}
|
|
271
|
+
var baseHue = (targetHue - selectedRange.shift + 360) % 360;
|
|
272
|
+
return {
|
|
273
|
+
baseHue: baseHue,
|
|
274
|
+
correctionLightness: closestLightness,
|
|
275
|
+
correctionHueRange: selectedRange.rawHue,
|
|
276
|
+
};
|
|
232
277
|
}
|
|
233
278
|
exports.calculateBaseHueAndCorrectionRange = calculateBaseHueAndCorrectionRange;
|
|
234
279
|
function calcOnBrand(hex) {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
280
|
+
var whiteContrast = Number((0, apca_w3_1.calcAPCA)('#fff', hex));
|
|
281
|
+
var blackContrast = Number((0, apca_w3_1.calcAPCA)('#000', hex));
|
|
282
|
+
if (whiteContrast - 10 <= blackContrast) {
|
|
283
|
+
return DefaultSwatch.whiteAlpha;
|
|
284
|
+
}
|
|
285
|
+
return DefaultSwatch.blackAlpha;
|
|
241
286
|
}
|
|
242
287
|
exports.calcOnBrand = calcOnBrand;
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
export declare function getPromo(
|
|
1
|
+
export declare function getPromo(
|
|
2
|
+
color: string,
|
|
3
|
+
hueShifts?: {
|
|
2
4
|
[hueRange: number]: number;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
+
}
|
|
6
|
+
): string;
|
|
7
|
+
export declare function getPromoHueShift(
|
|
8
|
+
currentHue: number,
|
|
9
|
+
promoHueShifts: {
|
|
5
10
|
[hueRange: number]: number;
|
|
6
|
-
}
|
|
11
|
+
}
|
|
12
|
+
): number;
|
|
@@ -1,58 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports,
|
|
1
|
+
'use strict';
|
|
2
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
3
|
exports.getPromoHueShift = exports.getPromo = void 0;
|
|
4
|
-
var culori_1 = require(
|
|
5
|
-
var promo_hue_shift_1 = require(
|
|
4
|
+
var culori_1 = require('culori');
|
|
5
|
+
var promo_hue_shift_1 = require('../constants/promo-hue-shift');
|
|
6
6
|
function getPromo(color, hueShifts) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
catch (error) {
|
|
34
|
-
console.error('Error generating promo palette:', error);
|
|
35
|
-
return '';
|
|
36
|
-
}
|
|
7
|
+
if (hueShifts === void 0) {
|
|
8
|
+
hueShifts = promo_hue_shift_1.PROMO_HUE_SHIFTS;
|
|
9
|
+
}
|
|
10
|
+
var toOklch = (0, culori_1.converter)('oklch');
|
|
11
|
+
var oklchColor = toOklch(color);
|
|
12
|
+
if (!oklchColor) {
|
|
13
|
+
throw new Error('Invalid color string: '.concat(color));
|
|
14
|
+
}
|
|
15
|
+
var currentHue = oklchColor.h;
|
|
16
|
+
var promoHueShift = getPromoHueShift(currentHue, hueShifts);
|
|
17
|
+
var correctedHue = (currentHue + promoHueShift + 360) % 360;
|
|
18
|
+
var promoLightness = oklchColor.l * 100;
|
|
19
|
+
if (promoLightness >= 50) {
|
|
20
|
+
promoLightness = promoLightness - 32;
|
|
21
|
+
}
|
|
22
|
+
promoLightness = Math.min(Math.max(promoLightness, 30), 34);
|
|
23
|
+
var promoChroma = 0.1;
|
|
24
|
+
var finalLightness = Math.round(promoLightness) / 100;
|
|
25
|
+
var finalChroma = Math.round(promoChroma * 100) / 100;
|
|
26
|
+
var promoOklch = {
|
|
27
|
+
mode: 'oklch',
|
|
28
|
+
l: finalLightness,
|
|
29
|
+
c: finalChroma,
|
|
30
|
+
h: correctedHue,
|
|
31
|
+
};
|
|
32
|
+
return (0, culori_1.formatHex)((0, culori_1.clampChroma)(promoOklch, 'oklch'));
|
|
37
33
|
}
|
|
38
34
|
exports.getPromo = getPromo;
|
|
39
35
|
function getPromoHueShift(currentHue, promoHueShifts) {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
36
|
+
var hueRanges = Object.keys(promoHueShifts)
|
|
37
|
+
.map(Number)
|
|
38
|
+
.sort(function (a, b) {
|
|
39
|
+
return a - b;
|
|
40
|
+
});
|
|
41
|
+
var selectedHueRange = hueRanges[0];
|
|
42
|
+
for (var i = 0; i < hueRanges.length; i++) {
|
|
43
|
+
var startRange = hueRanges[i];
|
|
44
|
+
var endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
|
|
45
|
+
if (currentHue >= startRange && currentHue < endRange) {
|
|
46
|
+
selectedHueRange = startRange;
|
|
47
|
+
break;
|
|
48
|
+
}
|
|
49
|
+
if (i === hueRanges.length - 1 && (currentHue >= startRange || currentHue < hueRanges[0])) {
|
|
50
|
+
selectedHueRange = startRange;
|
|
51
|
+
break;
|
|
55
52
|
}
|
|
56
|
-
|
|
53
|
+
}
|
|
54
|
+
return promoHueShifts[selectedHueRange] !== undefined ? promoHueShifts[selectedHueRange] : 0;
|
|
57
55
|
}
|
|
58
56
|
exports.getPromoHueShift = getPromoHueShift;
|