@skbkontur/colors 2.0.0-alpha.2 → 2.0.0-alpha.3
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/CHANGELOG.md +84 -0
- package/README.md +104 -171
- package/dist/colors.default-dark.js +16 -16
- package/dist/colors.default-light.js +17 -17
- package/dist/esm/consts/params/abney-correction.d.ts +2 -0
- package/dist/esm/consts/params/chroma-params.d.ts +2 -0
- package/dist/esm/{constants/chroma-settings.js → consts/params/chroma-params.js} +1 -1
- package/dist/esm/consts/params/logo-lightness.d.ts +1 -0
- package/dist/esm/consts/params/logo-lightness.js +1 -0
- package/dist/esm/get-colors-base.d.ts +12 -0
- package/dist/esm/get-colors-base.js +81 -0
- package/dist/{cjs/get-default-tokens.d.ts → esm/get-colors-default-tokens.d.ts} +2 -2
- package/dist/{cjs/get-default-tokens.js → esm/get-colors-default-tokens.js} +34 -38
- package/dist/esm/get-colors.d.ts +3 -10
- package/dist/esm/get-colors.js +6 -8
- package/dist/esm/get-default-tokens.d.ts +1 -1
- package/dist/esm/get-default-tokens.js +33 -33
- package/dist/esm/helpers/get-interactions.js +1 -1
- package/dist/esm/helpers/get-logo.js +4 -4
- package/dist/esm/helpers/get-palette.d.ts +3 -3
- package/dist/esm/helpers/get-palette.js +6 -6
- package/dist/esm/helpers/get-promo.js +1 -1
- package/dist/esm/types/{generator-tokens.d.ts → tokens-base-generator.d.ts} +2 -2
- package/dist/esm/types/tokens.d.ts +12 -0
- package/dist/esm/types/tokens.js +1 -0
- package/dist/esm/utils/convert-color.d.ts +3 -0
- package/dist/esm/utils/convert-color.js +133 -0
- package/dist/tokens/brand-blue-deep_accent-brand.css +33 -33
- package/dist/tokens/brand-blue-deep_accent-gray.css +33 -33
- package/dist/tokens/brand-blue_accent-brand.css +33 -33
- package/dist/tokens/brand-blue_accent-gray.css +33 -33
- package/dist/tokens/brand-green_accent-brand.css +33 -33
- package/dist/tokens/brand-green_accent-gray.css +33 -33
- package/dist/tokens/brand-mint_accent-brand.css +33 -33
- package/dist/tokens/brand-mint_accent-gray.css +33 -33
- package/dist/tokens/brand-orange_accent-gray.css +33 -33
- package/dist/tokens/brand-purple_accent-brand.css +33 -33
- package/dist/tokens/brand-purple_accent-gray.css +33 -33
- package/dist/tokens/brand-red_accent-gray.css +33 -33
- package/dist/tokens/brand-violet_accent-brand.css +33 -33
- package/dist/tokens/brand-violet_accent-gray.css +33 -33
- package/dist/tokens-js/brand-blue-deep_accent-brand.js +33 -33
- package/dist/tokens-js/brand-blue-deep_accent-gray.js +33 -33
- package/dist/tokens-js/brand-blue_accent-brand.js +33 -33
- package/dist/tokens-js/brand-blue_accent-gray.js +33 -33
- package/dist/tokens-js/brand-green_accent-brand.js +33 -33
- package/dist/tokens-js/brand-green_accent-gray.js +33 -33
- package/dist/tokens-js/brand-mint_accent-brand.js +33 -33
- package/dist/tokens-js/brand-mint_accent-gray.js +33 -33
- package/dist/tokens-js/brand-orange_accent-gray.js +33 -33
- package/dist/tokens-js/brand-purple_accent-brand.js +33 -33
- package/dist/tokens-js/brand-purple_accent-gray.js +33 -33
- package/dist/tokens-js/brand-red_accent-gray.js +33 -33
- package/dist/tokens-js/brand-violet_accent-brand.js +33 -33
- package/dist/tokens-js/brand-violet_accent-gray.js +33 -33
- package/dist/tokens-mobile/brand-blue-deep_accent-brand.json +304 -304
- package/dist/tokens-mobile/brand-blue-deep_accent-gray.json +304 -304
- package/dist/tokens-mobile/brand-blue_accent-brand.json +304 -304
- package/dist/tokens-mobile/brand-blue_accent-gray.json +304 -304
- package/dist/tokens-mobile/brand-green_accent-brand.json +304 -304
- package/dist/tokens-mobile/brand-green_accent-gray.json +304 -304
- package/dist/tokens-mobile/brand-mint_accent-brand.json +304 -304
- package/dist/tokens-mobile/brand-mint_accent-gray.json +304 -304
- package/dist/tokens-mobile/brand-orange_accent-gray.json +303 -303
- package/dist/tokens-mobile/brand-purple_accent-brand.json +304 -304
- package/dist/tokens-mobile/brand-purple_accent-gray.json +304 -304
- package/dist/tokens-mobile/brand-red_accent-gray.json +303 -303
- package/dist/tokens-mobile/brand-violet_accent-brand.json +300 -300
- package/dist/tokens-mobile/brand-violet_accent-gray.json +302 -302
- package/package.json +13 -22
- package/scripts/babel-register.js +4 -0
- package/scripts/tokens-base.json +3499 -0
- package/scripts/tokens.json +710 -0
- package/dist/cjs/constants/abney-correction.d.ts +0 -2
- package/dist/cjs/constants/abney-correction.js +0 -1105
- package/dist/cjs/constants/chroma-settings.d.ts +0 -2
- package/dist/cjs/constants/chroma-settings.js +0 -105
- package/dist/cjs/constants/default-swatch.js +0 -112
- package/dist/cjs/constants/interaction-settings.js +0 -19
- package/dist/cjs/constants/logo-lightness.d.ts +0 -1
- package/dist/cjs/constants/logo-lightness.js +0 -4
- package/dist/cjs/constants/promo-hue-shift.js +0 -14
- package/dist/cjs/constants/warning-hue-patch.js +0 -25
- package/dist/cjs/get-base-tokens.d.ts +0 -26
- package/dist/cjs/get-base-tokens.js +0 -319
- package/dist/cjs/get-colors.d.ts +0 -20
- package/dist/cjs/get-colors.js +0 -20
- package/dist/cjs/helpers/get-interactions.d.ts +0 -7
- package/dist/cjs/helpers/get-interactions.js +0 -61
- package/dist/cjs/helpers/get-logo.d.ts +0 -6
- package/dist/cjs/helpers/get-logo.js +0 -32
- package/dist/cjs/helpers/get-palette.d.ts +0 -76
- package/dist/cjs/helpers/get-palette.js +0 -287
- package/dist/cjs/helpers/get-promo.d.ts +0 -12
- package/dist/cjs/helpers/get-promo.js +0 -56
- package/dist/cjs/types/base-tokens.js +0 -2
- package/dist/cjs/types/generator-tokens.d.ts +0 -43
- package/dist/cjs/types/generator-tokens.js +0 -2
- package/dist/cjs/utils/format-variable.d.ts +0 -2
- package/dist/cjs/utils/format-variable.js +0 -15
- package/dist/esm/constants/abney-correction.d.ts +0 -2
- package/dist/esm/constants/chroma-settings.d.ts +0 -2
- package/dist/esm/constants/default-swatch.d.ts +0 -109
- package/dist/esm/constants/interaction-settings.d.ts +0 -8
- package/dist/esm/constants/logo-lightness.d.ts +0 -1
- package/dist/esm/constants/logo-lightness.js +0 -1
- package/dist/esm/constants/promo-hue-shift.d.ts +0 -3
- package/dist/esm/constants/warning-hue-patch.d.ts +0 -3
- package/dist/esm/get-base-tokens.d.ts +0 -26
- package/dist/esm/get-base-tokens.js +0 -257
- package/dist/esm/types/base-tokens.d.ts +0 -125
- /package/dist/{cjs/constants → esm/consts}/default-swatch.d.ts +0 -0
- /package/dist/esm/{constants → consts}/default-swatch.js +0 -0
- /package/dist/esm/{constants → consts/params}/abney-correction.js +0 -0
- /package/dist/{cjs/constants/interaction-settings.d.ts → esm/consts/params/interactions.d.ts} +0 -0
- /package/dist/esm/{constants/interaction-settings.js → consts/params/interactions.js} +0 -0
- /package/dist/{cjs/constants → esm/consts/params}/promo-hue-shift.d.ts +0 -0
- /package/dist/esm/{constants → consts/params}/promo-hue-shift.js +0 -0
- /package/dist/{cjs/constants → esm/consts/params}/warning-hue-patch.d.ts +0 -0
- /package/dist/esm/{constants → consts/params}/warning-hue-patch.js +0 -0
- /package/dist/esm/types/{base-tokens.js → tokens-base-generator.js} +0 -0
- /package/dist/{cjs/types/base-tokens.d.ts → esm/types/tokens-base.d.ts} +0 -0
- /package/dist/esm/types/{generator-tokens.js → tokens-base.js} +0 -0
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
|
-
exports.getPressed = exports.getHover = void 0;
|
|
4
|
-
var culori_1 = require('culori');
|
|
5
|
-
var interaction_settings_1 = require('../constants/interaction-settings');
|
|
6
|
-
function applyOklchDelta(oklchColor, dL, dC) {
|
|
7
|
-
var _a = oklchColor.l,
|
|
8
|
-
l = _a === void 0 ? 0 : _a,
|
|
9
|
-
_b = oklchColor.c,
|
|
10
|
-
c = _b === void 0 ? 0 : _b,
|
|
11
|
-
_c = oklchColor.h,
|
|
12
|
-
h = _c === void 0 ? 0 : _c;
|
|
13
|
-
var safeH = h === undefined || isNaN(h) ? 0 : h;
|
|
14
|
-
var newL = Math.max(0, Math.min(1, l + dL / 100));
|
|
15
|
-
var newC = Math.max(0, c + dC);
|
|
16
|
-
return 'oklch('.concat(newL.toFixed(3), ' ').concat(newC.toFixed(3), ' ').concat(safeH.toFixed(0), ')');
|
|
17
|
-
}
|
|
18
|
-
function getHover(hex) {
|
|
19
|
-
var toOklch = (0, culori_1.converter)('oklch');
|
|
20
|
-
var oklchColor = toOklch(hex);
|
|
21
|
-
if (!oklchColor) {
|
|
22
|
-
return { light: hex, dark: hex };
|
|
23
|
-
}
|
|
24
|
-
var lightHoverColor = applyOklchDelta(
|
|
25
|
-
oklchColor,
|
|
26
|
-
interaction_settings_1.HOVER_LIGHT_L,
|
|
27
|
-
interaction_settings_1.HOVER_LIGHT_C
|
|
28
|
-
);
|
|
29
|
-
var darkHoverColor = applyOklchDelta(
|
|
30
|
-
oklchColor,
|
|
31
|
-
interaction_settings_1.HOVER_DARK_L,
|
|
32
|
-
interaction_settings_1.HOVER_DARK_C
|
|
33
|
-
);
|
|
34
|
-
return {
|
|
35
|
-
light: lightHoverColor,
|
|
36
|
-
dark: darkHoverColor,
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
exports.getHover = getHover;
|
|
40
|
-
function getPressed(hex) {
|
|
41
|
-
var toOklch = (0, culori_1.converter)('oklch');
|
|
42
|
-
var oklchColor = toOklch(hex);
|
|
43
|
-
if (!oklchColor) {
|
|
44
|
-
return { light: hex, dark: hex };
|
|
45
|
-
}
|
|
46
|
-
var lightPressedColor = applyOklchDelta(
|
|
47
|
-
oklchColor,
|
|
48
|
-
interaction_settings_1.PRESSED_LIGHT_L,
|
|
49
|
-
interaction_settings_1.PRESSED_LIGHT_C
|
|
50
|
-
);
|
|
51
|
-
var darkPressedColor = applyOklchDelta(
|
|
52
|
-
oklchColor,
|
|
53
|
-
interaction_settings_1.PRESSED_DARK_L,
|
|
54
|
-
interaction_settings_1.PRESSED_DARK_C
|
|
55
|
-
);
|
|
56
|
-
return {
|
|
57
|
-
light: lightPressedColor,
|
|
58
|
-
dark: darkPressedColor,
|
|
59
|
-
};
|
|
60
|
-
}
|
|
61
|
-
exports.getPressed = getPressed;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
|
-
exports.getLogo = void 0;
|
|
4
|
-
var culori_1 = require('culori');
|
|
5
|
-
var logo_lightness_1 = require('../constants/logo-lightness');
|
|
6
|
-
function getLogo(hex) {
|
|
7
|
-
var toOklch = (0, culori_1.converter)('oklch');
|
|
8
|
-
var oklchColor = toOklch(hex);
|
|
9
|
-
var lightThemeLogoColor = hex;
|
|
10
|
-
if (!oklchColor) {
|
|
11
|
-
var fallbackColor = 'oklch('.concat(logo_lightness_1.MIN_LOGO_LIGHTNESS, '% 0 0)');
|
|
12
|
-
return { light: hex, dark: fallbackColor };
|
|
13
|
-
}
|
|
14
|
-
var _a = oklchColor.l,
|
|
15
|
-
l = _a === void 0 ? 0 : _a,
|
|
16
|
-
_b = oklchColor.c,
|
|
17
|
-
c = _b === void 0 ? 0 : _b;
|
|
18
|
-
var h = oklchColor.h;
|
|
19
|
-
var safeH = h === undefined || isNaN(h) ? 0 : h;
|
|
20
|
-
l = l || 0;
|
|
21
|
-
c = c || 0;
|
|
22
|
-
var percentL = l * 100;
|
|
23
|
-
if (percentL < logo_lightness_1.MIN_LOGO_LIGHTNESS) {
|
|
24
|
-
l = logo_lightness_1.MIN_LOGO_LIGHTNESS / 100;
|
|
25
|
-
}
|
|
26
|
-
var darkThemeLogoColor = 'oklch('.concat(l.toFixed(3), ' ').concat(c.toFixed(3), ' ').concat(safeH.toFixed(0), ')');
|
|
27
|
-
return {
|
|
28
|
-
light: lightThemeLogoColor,
|
|
29
|
-
dark: darkThemeLogoColor,
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
exports.getLogo = getLogo;
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
GeneratorColorAbneyCorrection,
|
|
3
|
-
GeneratorColorChromaSettingsGroup,
|
|
4
|
-
GeneratorColorPalette,
|
|
5
|
-
GeneratorColorWarningHuePatch,
|
|
6
|
-
} from '../types/generator-tokens';
|
|
7
|
-
interface GeneratePaletteParams {
|
|
8
|
-
color: string;
|
|
9
|
-
type?: 'default' | 'warning';
|
|
10
|
-
settings?: {
|
|
11
|
-
chromaSettings?: GeneratorColorChromaSettingsGroup;
|
|
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,287 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
var __assign =
|
|
3
|
-
(this && this.__assign) ||
|
|
4
|
-
function () {
|
|
5
|
-
__assign =
|
|
6
|
-
Object.assign ||
|
|
7
|
-
function (t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
11
|
-
}
|
|
12
|
-
return t;
|
|
13
|
-
};
|
|
14
|
-
return __assign.apply(this, arguments);
|
|
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) {
|
|
48
|
-
if (mod && mod.__esModule) return mod;
|
|
49
|
-
var result = {};
|
|
50
|
-
if (mod != null)
|
|
51
|
-
for (var k in mod)
|
|
52
|
-
if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
53
|
-
__setModuleDefault(result, mod);
|
|
54
|
-
return result;
|
|
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++) {
|
|
61
|
-
if (ar || !(i in from)) {
|
|
62
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
63
|
-
ar[i] = from[i];
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
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');
|
|
83
|
-
function getPalette(_a) {
|
|
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);
|
|
106
|
-
}
|
|
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;
|
|
148
|
-
}
|
|
149
|
-
exports.getPalette = getPalette;
|
|
150
|
-
function getAbneyHueShift(lightness, currentHue, abneyData) {
|
|
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;
|
|
167
|
-
}
|
|
168
|
-
if (i === hueRanges.length - 1 && currentHue >= startRange && currentHue < 360) {
|
|
169
|
-
selectedHueRange = startRange;
|
|
170
|
-
break;
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
return lightnessData[selectedHueRange] !== undefined ? lightnessData[selectedHueRange] : 0;
|
|
174
|
-
}
|
|
175
|
-
exports.getAbneyHueShift = getAbneyHueShift;
|
|
176
|
-
function applyAbneyShift(lightness, currentHue, abneyData) {
|
|
177
|
-
var abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
|
|
178
|
-
return (currentHue + abneyShift + 360) % 360;
|
|
179
|
-
}
|
|
180
|
-
exports.applyAbneyShift = applyAbneyShift;
|
|
181
|
-
function applyWarningHuePatch(currentHue, lightness, warningHuePatchData, isWarningMode) {
|
|
182
|
-
if (isWarningMode) {
|
|
183
|
-
var patch = warningHuePatchData[lightness];
|
|
184
|
-
if (patch !== undefined) {
|
|
185
|
-
return (currentHue + patch + 360) % 360;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
return currentHue;
|
|
189
|
-
}
|
|
190
|
-
exports.applyWarningHuePatch = applyWarningHuePatch;
|
|
191
|
-
function findClosestLightnessStep(targetL, availableLightnessSteps) {
|
|
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;
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
return closestStep;
|
|
209
|
-
}
|
|
210
|
-
function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
|
|
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];
|
|
260
|
-
}
|
|
261
|
-
if (nextRangeIndex > 0) {
|
|
262
|
-
return correctedHueMap[nextRangeIndex - 1];
|
|
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
|
-
};
|
|
277
|
-
}
|
|
278
|
-
exports.calculateBaseHueAndCorrectionRange = calculateBaseHueAndCorrectionRange;
|
|
279
|
-
function calcOnBrand(hex) {
|
|
280
|
-
var whiteContrast = Math.abs(Number((0, apca_w3_1.calcAPCA)('#fff', hex)));
|
|
281
|
-
var blackContrast = Math.abs(Number((0, apca_w3_1.calcAPCA)('#000', hex)));
|
|
282
|
-
if (whiteContrast + 10 >= blackContrast) {
|
|
283
|
-
return DefaultSwatch.whiteAlpha;
|
|
284
|
-
}
|
|
285
|
-
return DefaultSwatch.blackAlpha;
|
|
286
|
-
}
|
|
287
|
-
exports.calcOnBrand = calcOnBrand;
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
|
-
exports.getPromoHueShift = exports.getPromo = void 0;
|
|
4
|
-
var culori_1 = require('culori');
|
|
5
|
-
var promo_hue_shift_1 = require('../constants/promo-hue-shift');
|
|
6
|
-
function getPromo(color, hueShifts) {
|
|
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'));
|
|
33
|
-
}
|
|
34
|
-
exports.getPromo = getPromo;
|
|
35
|
-
function getPromoHueShift(currentHue, promoHueShifts) {
|
|
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;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
return promoHueShifts[selectedHueRange] !== undefined ? promoHueShifts[selectedHueRange] : 0;
|
|
55
|
-
}
|
|
56
|
-
exports.getPromoHueShift = getPromoHueShift;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
export interface GeneratorColorChromaSettingsGroup {
|
|
2
|
-
[key: number]: {
|
|
3
|
-
vivid: GeneratorColorChromaSettings;
|
|
4
|
-
normal: GeneratorColorChromaSettings;
|
|
5
|
-
dim: GeneratorColorChromaSettings;
|
|
6
|
-
};
|
|
7
|
-
}
|
|
8
|
-
export interface GeneratorColorChromaSettings {
|
|
9
|
-
rel: number;
|
|
10
|
-
min?: number;
|
|
11
|
-
max?: number;
|
|
12
|
-
}
|
|
13
|
-
export interface GeneratorColorPalette {
|
|
14
|
-
vivid: {
|
|
15
|
-
[key: number]: string;
|
|
16
|
-
};
|
|
17
|
-
normal: {
|
|
18
|
-
[key: number]: string;
|
|
19
|
-
};
|
|
20
|
-
dim: {
|
|
21
|
-
[key: number]: string;
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
export interface GeneratorColorAbneyCorrection {
|
|
25
|
-
[lightness: number]: {
|
|
26
|
-
[hueShiftRange: number]: number;
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
export interface GeneratorColorWarningHuePatch {
|
|
30
|
-
[lightness: number]: number;
|
|
31
|
-
}
|
|
32
|
-
export interface GeneratorPaletteParams {
|
|
33
|
-
color: string;
|
|
34
|
-
type?: 'default' | 'warning' | 'promo';
|
|
35
|
-
settings?: {
|
|
36
|
-
chromaSettings?: GeneratorColorChromaSettingsGroup;
|
|
37
|
-
abneyCorrection?: GeneratorColorAbneyCorrection;
|
|
38
|
-
promoHueShifts?: {
|
|
39
|
-
[hueRange: number]: number;
|
|
40
|
-
};
|
|
41
|
-
warningHuePatch?: GeneratorColorWarningHuePatch;
|
|
42
|
-
};
|
|
43
|
-
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
3
|
-
exports.kebabCaseToCamelCase = exports.camelCaseToKebabCase = void 0;
|
|
4
|
-
var camelCaseToKebabCase = function (str) {
|
|
5
|
-
return str.replace(/[A-Z]/g, function (match) {
|
|
6
|
-
return '-'.concat(match.toLowerCase());
|
|
7
|
-
});
|
|
8
|
-
};
|
|
9
|
-
exports.camelCaseToKebabCase = camelCaseToKebabCase;
|
|
10
|
-
var kebabCaseToCamelCase = function (str) {
|
|
11
|
-
return str.replace(/-(\w)/g, function (_, c) {
|
|
12
|
-
return c.toUpperCase();
|
|
13
|
-
});
|
|
14
|
-
};
|
|
15
|
-
exports.kebabCaseToCamelCase = kebabCaseToCamelCase;
|