@atlaskit/codemod-cli 0.8.4 → 0.8.5
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 +6 -0
- package/dist/cjs/main.js +1 -1
- package/dist/cjs/presets/theme-to-design-tokens/theme-to-design-tokens.js +20 -56
- package/dist/cjs/presets/theme-to-design-tokens/utils/ast-meta.js +6 -22
- package/dist/cjs/presets/theme-to-design-tokens/utils/legacy-colors.js +7 -5
- package/dist/cjs/presets/theme-to-design-tokens/utils/tokens.js +38 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/presets/theme-to-design-tokens/theme-to-design-tokens.js +16 -53
- package/dist/es2019/presets/theme-to-design-tokens/utils/ast-meta.js +5 -12
- package/dist/es2019/presets/theme-to-design-tokens/utils/legacy-colors.js +7 -5
- package/dist/es2019/presets/theme-to-design-tokens/utils/tokens.js +12 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/main.js +1 -1
- package/dist/esm/presets/theme-to-design-tokens/theme-to-design-tokens.js +19 -54
- package/dist/esm/presets/theme-to-design-tokens/utils/ast-meta.js +5 -18
- package/dist/esm/presets/theme-to-design-tokens/utils/legacy-colors.js +7 -5
- package/dist/esm/presets/theme-to-design-tokens/utils/tokens.js +24 -0
- package/dist/esm/version.json +1 -1
- package/dist/types/presets/theme-to-design-tokens/utils/ast-meta.d.ts +0 -1
- package/dist/types/presets/theme-to-design-tokens/utils/tokens.d.ts +2 -0
- package/package.json +2 -3
- package/dist/cjs/presets/theme-to-design-tokens/utils/color-difference.js +0 -174
- package/dist/cjs/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +0 -129
- package/dist/cjs/presets/theme-to-design-tokens/utils/color-to-token.js +0 -88
- package/dist/es2019/presets/theme-to-design-tokens/utils/color-difference.js +0 -150
- package/dist/es2019/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +0 -122
- package/dist/es2019/presets/theme-to-design-tokens/utils/color-to-token.js +0 -75
- package/dist/esm/presets/theme-to-design-tokens/utils/color-difference.js +0 -160
- package/dist/esm/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +0 -122
- package/dist/esm/presets/theme-to-design-tokens/utils/color-to-token.js +0 -78
- package/dist/types/presets/theme-to-design-tokens/types.d.ts +0 -2
- package/dist/types/presets/theme-to-design-tokens/utils/color-difference.d.ts +0 -66
- package/dist/types/presets/theme-to-design-tokens/utils/color-palette-tokens-map.d.ts +0 -21
- package/dist/types/presets/theme-to-design-tokens/utils/color-to-token.d.ts +0 -12
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
/* eslint-disable @atlassian/tangerine/import/entry-points */
|
|
2
|
-
import { convert } from 'chromatism'; // Design token values are not currently exposed from @atlaskit/tokens
|
|
3
|
-
// In a follow up ticket we will expose them again via another entrypoint.
|
|
4
|
-
|
|
5
|
-
import defaultTokenValues from '@atlaskit/tokens/token-names';
|
|
6
|
-
export const legacyColorPalette = {
|
|
7
|
-
R50: '#FFEBE6',
|
|
8
|
-
R75: '#FFBDAD',
|
|
9
|
-
R100: '#FF8F73',
|
|
10
|
-
R200: '#FF7452',
|
|
11
|
-
R300: '#FF5630',
|
|
12
|
-
R400: '#DE350B',
|
|
13
|
-
R500: '#BF2600',
|
|
14
|
-
Y50: '#FFFAE6',
|
|
15
|
-
Y75: '#FFF0B3',
|
|
16
|
-
Y100: '#FFE380',
|
|
17
|
-
Y200: '#FFC400',
|
|
18
|
-
Y300: '#FFAB00',
|
|
19
|
-
Y400: '#FF991F',
|
|
20
|
-
Y500: '#FF8B00',
|
|
21
|
-
G50: '#E3FCEF',
|
|
22
|
-
G75: '#ABF5D1',
|
|
23
|
-
G100: '#79F2C0',
|
|
24
|
-
G200: '#57D9A3',
|
|
25
|
-
G300: '#36B37E',
|
|
26
|
-
G400: '#00875A',
|
|
27
|
-
G500: '#006644',
|
|
28
|
-
B50: '#DEEBFF',
|
|
29
|
-
B75: '#B3D4FF',
|
|
30
|
-
B100: '#4C9AFF',
|
|
31
|
-
B200: '#2684FF',
|
|
32
|
-
B300: '#0065FF',
|
|
33
|
-
B400: '#0052CC',
|
|
34
|
-
B500: '#0747A6',
|
|
35
|
-
P50: '#EAE6FF',
|
|
36
|
-
P75: '#C0B6F2',
|
|
37
|
-
P100: '#998DD9',
|
|
38
|
-
P200: '#8777D9',
|
|
39
|
-
P300: '#6554C0',
|
|
40
|
-
P400: '#5243AA',
|
|
41
|
-
P500: '#403294',
|
|
42
|
-
T50: '#E6FCFF',
|
|
43
|
-
T75: '#B3F5FF',
|
|
44
|
-
T100: '#79E2F2',
|
|
45
|
-
T200: '#00C7E6',
|
|
46
|
-
T300: '#00B8D9',
|
|
47
|
-
T400: '#00A3BF',
|
|
48
|
-
T500: '#008DA6',
|
|
49
|
-
N0: '#FFFFFF',
|
|
50
|
-
N10: '#FAFBFC',
|
|
51
|
-
N20: '#F4F5F7',
|
|
52
|
-
N30: '#EBECF0',
|
|
53
|
-
N40: '#DFE1E6',
|
|
54
|
-
N50: '#C1C7D0',
|
|
55
|
-
N60: '#B3BAC5',
|
|
56
|
-
N70: '#A5ADBA',
|
|
57
|
-
N80: '#97A0AF',
|
|
58
|
-
N90: '#8993A4',
|
|
59
|
-
N100: '#7A869A',
|
|
60
|
-
N200: '#6B778C',
|
|
61
|
-
N300: '#5E6C84',
|
|
62
|
-
N400: '#505F79',
|
|
63
|
-
N500: '#42526E',
|
|
64
|
-
N600: '#344563',
|
|
65
|
-
N700: '#253858',
|
|
66
|
-
N800: '#172B4D',
|
|
67
|
-
N900: '#091E42'
|
|
68
|
-
};
|
|
69
|
-
export function findClosetMatchingToken(paletteName) {
|
|
70
|
-
const paletteColor = legacyColorPalette[paletteName];
|
|
71
|
-
|
|
72
|
-
if (!paletteColor) {
|
|
73
|
-
return undefined;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
const tokens = Object.entries(defaultTokenValues).map(([key, value]) => {
|
|
77
|
-
try {
|
|
78
|
-
const diff = deltaE(paletteColor, value);
|
|
79
|
-
return [key, diff];
|
|
80
|
-
} catch (e) {
|
|
81
|
-
return [key, 99999];
|
|
82
|
-
}
|
|
83
|
-
}).sort((a, b) => {
|
|
84
|
-
const left = a[1];
|
|
85
|
-
const right = b[1];
|
|
86
|
-
return left - right;
|
|
87
|
-
});
|
|
88
|
-
const [token, diff] = tokens[0];
|
|
89
|
-
|
|
90
|
-
if (diff < 10) {
|
|
91
|
-
return token;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
return undefined;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
function toRgbArray(color) {
|
|
98
|
-
const colr = convert(color);
|
|
99
|
-
return [colr.rgb.r, colr.rgb.g, colr.rgb.b];
|
|
100
|
-
}
|
|
101
|
-
/**
|
|
102
|
-
* Color difference function ripped from https://stackoverflow.com/a/52453462
|
|
103
|
-
*
|
|
104
|
-
* **Color difference**
|
|
105
|
-
* - <= 1.0 not perceptible by human eyes
|
|
106
|
-
* - 1-2 Perceptible through close observation
|
|
107
|
-
* - 2-10 Perceptible at a glance
|
|
108
|
-
* - 11-49 Colors are more similar than opposite
|
|
109
|
-
* - 100 Colors are opposite
|
|
110
|
-
*/
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
function deltaE(rgbA, rgbB) {
|
|
114
|
-
let labA = rgb2lab(toRgbArray(rgbA));
|
|
115
|
-
let labB = rgb2lab(toRgbArray(rgbB));
|
|
116
|
-
let deltaL = labA[0] - labB[0];
|
|
117
|
-
let deltaA = labA[1] - labB[1];
|
|
118
|
-
let deltaB = labA[2] - labB[2];
|
|
119
|
-
let c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
|
|
120
|
-
let c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
|
|
121
|
-
let deltaC = c1 - c2;
|
|
122
|
-
let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
|
|
123
|
-
deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
|
|
124
|
-
let sc = 1.0 + 0.045 * c1;
|
|
125
|
-
let sh = 1.0 + 0.015 * c1;
|
|
126
|
-
let deltaLKlsl = deltaL / 1.0;
|
|
127
|
-
let deltaCkcsc = deltaC / sc;
|
|
128
|
-
let deltaHkhsh = deltaH / sh;
|
|
129
|
-
let i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
|
|
130
|
-
return i < 0 ? 0 : Math.sqrt(i);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
function rgb2lab(rgb) {
|
|
134
|
-
let r = rgb[0] / 255,
|
|
135
|
-
g = rgb[1] / 255,
|
|
136
|
-
b = rgb[2] / 255,
|
|
137
|
-
x,
|
|
138
|
-
y,
|
|
139
|
-
z;
|
|
140
|
-
r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
|
|
141
|
-
g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
|
|
142
|
-
b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
|
|
143
|
-
x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
|
|
144
|
-
y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
|
|
145
|
-
z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
|
|
146
|
-
x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
|
|
147
|
-
y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
|
|
148
|
-
z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
|
|
149
|
-
return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
|
|
150
|
-
}
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
const colorMap = {
|
|
2
|
-
resting: {
|
|
3
|
-
text: {
|
|
4
|
-
B300: ['color.text.selected', 'color.text.link.resting', 'color.iconBorder.brand'],
|
|
5
|
-
B400: ['color.text.selected', 'color.text.link.resting', 'color.iconBorder.brand'],
|
|
6
|
-
R300: ['color.text.danger', 'color.iconBorder.danger'],
|
|
7
|
-
R400: ['color.text.danger', 'color.iconBorder.danger'],
|
|
8
|
-
Y300: ['color.text.warning', 'color.iconBorder.warning'],
|
|
9
|
-
Y400: ['color.text.warning', 'color.iconBorder.warning'],
|
|
10
|
-
P300: ['color.text.discovery', 'color.iconBorder.discovery'],
|
|
11
|
-
P400: ['color.text.discovery', 'color.iconBorder.discovery'],
|
|
12
|
-
G300: ['color.text.success', 'color.iconBorder.success'],
|
|
13
|
-
G400: ['color.text.success', 'color.iconBorder.success'],
|
|
14
|
-
N0: ['color.text.onBold'],
|
|
15
|
-
N70: ['color.text.lowEmphasis'],
|
|
16
|
-
N80: ['color.text.lowEmphasis'],
|
|
17
|
-
N90: ['color.text.lowEmphasis'],
|
|
18
|
-
N100: ['color.text.lowEmphasis'],
|
|
19
|
-
N200: ['color.text.lowEmphasis'],
|
|
20
|
-
N300: ['color.text.lowEmphasis'],
|
|
21
|
-
N400: ['color.text.mediumEmphasis'],
|
|
22
|
-
N500: ['color.text.mediumEmphasis'],
|
|
23
|
-
N600: ['color.text.mediumEmphasis'],
|
|
24
|
-
N700: ['color.text.highEmphasis'],
|
|
25
|
-
N800: ['color.text.highEmphasis'],
|
|
26
|
-
N900: ['color.text.highEmphasis']
|
|
27
|
-
},
|
|
28
|
-
background: {
|
|
29
|
-
B75: ['color.background.selected.resting'],
|
|
30
|
-
N40: ['color.background.subtleNeutral.resting', 'color.background.sunken'],
|
|
31
|
-
B50: ['color.background.subtleBrand.resting', 'color.background.selected.resting'],
|
|
32
|
-
Y75: ['color.background.subtleWarning.resting'],
|
|
33
|
-
P50: ['color.background.subtleDiscovery.resting'],
|
|
34
|
-
R50: ['color.background.subtleDanger.resting'],
|
|
35
|
-
G50: ['color.background.subtleSuccess.resting'],
|
|
36
|
-
P300: ['color.background.boldDiscovery.resting'],
|
|
37
|
-
P400: ['color.background.boldDiscovery.resting'],
|
|
38
|
-
G300: ['color.background.boldSuccess.resting'],
|
|
39
|
-
Y300: ['color.background.boldWarning.resting'],
|
|
40
|
-
Y500: ['color.background.boldWarning.resting'],
|
|
41
|
-
R400: ['color.background.boldDanger.resting'],
|
|
42
|
-
B400: ['color.background.boldBrand.resting'],
|
|
43
|
-
N0: ['color.background.default', 'color.background.overlay', 'color.background.card']
|
|
44
|
-
},
|
|
45
|
-
border: {
|
|
46
|
-
N10: ['color.border.neutral'],
|
|
47
|
-
N20: ['color.border.neutral'],
|
|
48
|
-
N30: ['color.border.neutral'],
|
|
49
|
-
N40: ['color.border.neutral'],
|
|
50
|
-
N50: ['color.border.neutral'],
|
|
51
|
-
N60: ['color.border.neutral'],
|
|
52
|
-
N70: ['color.border.neutral'],
|
|
53
|
-
B100: ['color.border.focus'],
|
|
54
|
-
B300: ['color.iconBorder.brand', 'color.text.selected'],
|
|
55
|
-
B400: ['color.iconBorder.brand', 'color.text.selected'],
|
|
56
|
-
R300: ['color.iconBorder.danger'],
|
|
57
|
-
R400: ['color.iconBorder.danger'],
|
|
58
|
-
Y300: ['color.iconBorder.warning'],
|
|
59
|
-
Y400: ['color.iconBorder.warning'],
|
|
60
|
-
P300: ['color.iconBorder.discovery'],
|
|
61
|
-
P400: ['color.iconBorder.discovery'],
|
|
62
|
-
G300: ['color.iconBorder.success'],
|
|
63
|
-
G400: ['color.iconBorder.success']
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
hover: {
|
|
67
|
-
text: {
|
|
68
|
-
B300: ['color.text.link.resting'],
|
|
69
|
-
B400: ['color.text.link.resting']
|
|
70
|
-
},
|
|
71
|
-
background: {
|
|
72
|
-
B50: ['color.background.selected.hover'],
|
|
73
|
-
B75: ['color.background.selected.hover'],
|
|
74
|
-
P200: ['color.background.boldDiscovery.hover'],
|
|
75
|
-
P300: ['color.background.boldDiscovery.hover'],
|
|
76
|
-
G200: ['color.background.boldSuccess.hover'],
|
|
77
|
-
R300: ['color.background.boldDanger.hover'],
|
|
78
|
-
Y200: ['color.background.boldWarning.hover'],
|
|
79
|
-
B300: ['color.background.boldBrand.hover']
|
|
80
|
-
},
|
|
81
|
-
border: {}
|
|
82
|
-
},
|
|
83
|
-
pressed: {
|
|
84
|
-
text: {
|
|
85
|
-
B300: ['color.text.link.pressed'],
|
|
86
|
-
B400: ['color.text.link.pressed']
|
|
87
|
-
},
|
|
88
|
-
background: {
|
|
89
|
-
B50: ['color.background.selected.pressed'],
|
|
90
|
-
B75: ['color.background.selected.pressed'],
|
|
91
|
-
P400: ['color.background.boldDiscovery.pressed'],
|
|
92
|
-
P500: ['color.background.boldDiscovery.pressed'],
|
|
93
|
-
G400: ['color.background.boldSuccess.pressed'],
|
|
94
|
-
R500: ['color.background.boldDanger.pressed'],
|
|
95
|
-
Y400: ['color.background.boldWarning.pressed'],
|
|
96
|
-
B500: ['color.background.boldBrand.pressed']
|
|
97
|
-
},
|
|
98
|
-
border: {}
|
|
99
|
-
},
|
|
100
|
-
disabled: {
|
|
101
|
-
text: {
|
|
102
|
-
N60: ['color.text.disabled'],
|
|
103
|
-
N70: ['color.text.disabled'],
|
|
104
|
-
N80: ['color.text.disabled'],
|
|
105
|
-
N90: ['color.text.disabled'],
|
|
106
|
-
N100: ['color.text.disabled']
|
|
107
|
-
},
|
|
108
|
-
background: {
|
|
109
|
-
N10: ['color.background.disabled'],
|
|
110
|
-
N20: ['color.background.disabled'],
|
|
111
|
-
N30: ['color.background.disabled'],
|
|
112
|
-
N40: ['color.background.disabled']
|
|
113
|
-
},
|
|
114
|
-
border: {
|
|
115
|
-
N10: ['color.background.disabled'],
|
|
116
|
-
N20: ['color.background.disabled'],
|
|
117
|
-
N30: ['color.background.disabled'],
|
|
118
|
-
N40: ['color.background.disabled']
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
export default colorMap;
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { findClosetMatchingToken } from './color-difference';
|
|
2
|
-
import colorTokensMap from './color-palette-tokens-map';
|
|
3
|
-
|
|
4
|
-
function normalizeName(name) {
|
|
5
|
-
if (!name) {
|
|
6
|
-
return 'unknown';
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
if (name.startsWith('background')) {
|
|
10
|
-
return 'background';
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
if (name.toLowerCase().includes('color') || name === 'color' || name === 'fill' || name === 'stroke') {
|
|
14
|
-
return 'text';
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
if (name.startsWith('border') || name.toLowerCase().replace('-', '') === 'boxshadow') {
|
|
18
|
-
return 'border';
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return 'unknown';
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
export default function colorToToken(paletteName, {
|
|
25
|
-
state = 'resting',
|
|
26
|
-
propertyName
|
|
27
|
-
}, getLowConfidenceFuzzyResult = () => []) {
|
|
28
|
-
const normalizedPropertyName = normalizeName(propertyName);
|
|
29
|
-
const value = paletteName.toUpperCase();
|
|
30
|
-
const tokenSuggestionProperties = colorTokensMap[state];
|
|
31
|
-
const tokenSuggestionProperty = tokenSuggestionProperties && normalizedPropertyName !== 'unknown' && tokenSuggestionProperties[normalizedPropertyName];
|
|
32
|
-
const tokenSuggestionValue = tokenSuggestionProperty && tokenSuggestionProperty[value];
|
|
33
|
-
|
|
34
|
-
if (tokenSuggestionValue && tokenSuggestionValue.length === 1) {
|
|
35
|
-
return {
|
|
36
|
-
confidence: 'high',
|
|
37
|
-
suggestion: tokenSuggestionValue,
|
|
38
|
-
fallbackNeeded: true
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
if (tokenSuggestionValue && tokenSuggestionValue.length > 2) {
|
|
43
|
-
return {
|
|
44
|
-
confidence: 'medium',
|
|
45
|
-
suggestion: tokenSuggestionValue,
|
|
46
|
-
fallbackNeeded: true
|
|
47
|
-
};
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
const closestTokenName = findClosetMatchingToken(value);
|
|
51
|
-
|
|
52
|
-
if (closestTokenName) {
|
|
53
|
-
return {
|
|
54
|
-
confidence: 'low',
|
|
55
|
-
suggestion: [closestTokenName],
|
|
56
|
-
fallbackNeeded: true
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
const fuzzyResult = getLowConfidenceFuzzyResult();
|
|
61
|
-
|
|
62
|
-
if (fuzzyResult.length) {
|
|
63
|
-
return {
|
|
64
|
-
confidence: 'low',
|
|
65
|
-
suggestion: fuzzyResult,
|
|
66
|
-
fallbackNeeded: true
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
return {
|
|
71
|
-
confidence: 'unknown',
|
|
72
|
-
suggestion: [],
|
|
73
|
-
fallbackNeeded: true
|
|
74
|
-
};
|
|
75
|
-
}
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
|
|
3
|
-
/* eslint-disable @atlassian/tangerine/import/entry-points */
|
|
4
|
-
import { convert } from 'chromatism'; // Design token values are not currently exposed from @atlaskit/tokens
|
|
5
|
-
// In a follow up ticket we will expose them again via another entrypoint.
|
|
6
|
-
|
|
7
|
-
import defaultTokenValues from '@atlaskit/tokens/token-names';
|
|
8
|
-
export var legacyColorPalette = {
|
|
9
|
-
R50: '#FFEBE6',
|
|
10
|
-
R75: '#FFBDAD',
|
|
11
|
-
R100: '#FF8F73',
|
|
12
|
-
R200: '#FF7452',
|
|
13
|
-
R300: '#FF5630',
|
|
14
|
-
R400: '#DE350B',
|
|
15
|
-
R500: '#BF2600',
|
|
16
|
-
Y50: '#FFFAE6',
|
|
17
|
-
Y75: '#FFF0B3',
|
|
18
|
-
Y100: '#FFE380',
|
|
19
|
-
Y200: '#FFC400',
|
|
20
|
-
Y300: '#FFAB00',
|
|
21
|
-
Y400: '#FF991F',
|
|
22
|
-
Y500: '#FF8B00',
|
|
23
|
-
G50: '#E3FCEF',
|
|
24
|
-
G75: '#ABF5D1',
|
|
25
|
-
G100: '#79F2C0',
|
|
26
|
-
G200: '#57D9A3',
|
|
27
|
-
G300: '#36B37E',
|
|
28
|
-
G400: '#00875A',
|
|
29
|
-
G500: '#006644',
|
|
30
|
-
B50: '#DEEBFF',
|
|
31
|
-
B75: '#B3D4FF',
|
|
32
|
-
B100: '#4C9AFF',
|
|
33
|
-
B200: '#2684FF',
|
|
34
|
-
B300: '#0065FF',
|
|
35
|
-
B400: '#0052CC',
|
|
36
|
-
B500: '#0747A6',
|
|
37
|
-
P50: '#EAE6FF',
|
|
38
|
-
P75: '#C0B6F2',
|
|
39
|
-
P100: '#998DD9',
|
|
40
|
-
P200: '#8777D9',
|
|
41
|
-
P300: '#6554C0',
|
|
42
|
-
P400: '#5243AA',
|
|
43
|
-
P500: '#403294',
|
|
44
|
-
T50: '#E6FCFF',
|
|
45
|
-
T75: '#B3F5FF',
|
|
46
|
-
T100: '#79E2F2',
|
|
47
|
-
T200: '#00C7E6',
|
|
48
|
-
T300: '#00B8D9',
|
|
49
|
-
T400: '#00A3BF',
|
|
50
|
-
T500: '#008DA6',
|
|
51
|
-
N0: '#FFFFFF',
|
|
52
|
-
N10: '#FAFBFC',
|
|
53
|
-
N20: '#F4F5F7',
|
|
54
|
-
N30: '#EBECF0',
|
|
55
|
-
N40: '#DFE1E6',
|
|
56
|
-
N50: '#C1C7D0',
|
|
57
|
-
N60: '#B3BAC5',
|
|
58
|
-
N70: '#A5ADBA',
|
|
59
|
-
N80: '#97A0AF',
|
|
60
|
-
N90: '#8993A4',
|
|
61
|
-
N100: '#7A869A',
|
|
62
|
-
N200: '#6B778C',
|
|
63
|
-
N300: '#5E6C84',
|
|
64
|
-
N400: '#505F79',
|
|
65
|
-
N500: '#42526E',
|
|
66
|
-
N600: '#344563',
|
|
67
|
-
N700: '#253858',
|
|
68
|
-
N800: '#172B4D',
|
|
69
|
-
N900: '#091E42'
|
|
70
|
-
};
|
|
71
|
-
export function findClosetMatchingToken(paletteName) {
|
|
72
|
-
var paletteColor = legacyColorPalette[paletteName];
|
|
73
|
-
|
|
74
|
-
if (!paletteColor) {
|
|
75
|
-
return undefined;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
var tokens = Object.entries(defaultTokenValues).map(function (_ref) {
|
|
79
|
-
var _ref2 = _slicedToArray(_ref, 2),
|
|
80
|
-
key = _ref2[0],
|
|
81
|
-
value = _ref2[1];
|
|
82
|
-
|
|
83
|
-
try {
|
|
84
|
-
var _diff = deltaE(paletteColor, value);
|
|
85
|
-
|
|
86
|
-
return [key, _diff];
|
|
87
|
-
} catch (e) {
|
|
88
|
-
return [key, 99999];
|
|
89
|
-
}
|
|
90
|
-
}).sort(function (a, b) {
|
|
91
|
-
var left = a[1];
|
|
92
|
-
var right = b[1];
|
|
93
|
-
return left - right;
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
var _tokens$ = _slicedToArray(tokens[0], 2),
|
|
97
|
-
token = _tokens$[0],
|
|
98
|
-
diff = _tokens$[1];
|
|
99
|
-
|
|
100
|
-
if (diff < 10) {
|
|
101
|
-
return token;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
return undefined;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
function toRgbArray(color) {
|
|
108
|
-
var colr = convert(color);
|
|
109
|
-
return [colr.rgb.r, colr.rgb.g, colr.rgb.b];
|
|
110
|
-
}
|
|
111
|
-
/**
|
|
112
|
-
* Color difference function ripped from https://stackoverflow.com/a/52453462
|
|
113
|
-
*
|
|
114
|
-
* **Color difference**
|
|
115
|
-
* - <= 1.0 not perceptible by human eyes
|
|
116
|
-
* - 1-2 Perceptible through close observation
|
|
117
|
-
* - 2-10 Perceptible at a glance
|
|
118
|
-
* - 11-49 Colors are more similar than opposite
|
|
119
|
-
* - 100 Colors are opposite
|
|
120
|
-
*/
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
function deltaE(rgbA, rgbB) {
|
|
124
|
-
var labA = rgb2lab(toRgbArray(rgbA));
|
|
125
|
-
var labB = rgb2lab(toRgbArray(rgbB));
|
|
126
|
-
var deltaL = labA[0] - labB[0];
|
|
127
|
-
var deltaA = labA[1] - labB[1];
|
|
128
|
-
var deltaB = labA[2] - labB[2];
|
|
129
|
-
var c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
|
|
130
|
-
var c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
|
|
131
|
-
var deltaC = c1 - c2;
|
|
132
|
-
var deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
|
|
133
|
-
deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
|
|
134
|
-
var sc = 1.0 + 0.045 * c1;
|
|
135
|
-
var sh = 1.0 + 0.015 * c1;
|
|
136
|
-
var deltaLKlsl = deltaL / 1.0;
|
|
137
|
-
var deltaCkcsc = deltaC / sc;
|
|
138
|
-
var deltaHkhsh = deltaH / sh;
|
|
139
|
-
var i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
|
|
140
|
-
return i < 0 ? 0 : Math.sqrt(i);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
function rgb2lab(rgb) {
|
|
144
|
-
var r = rgb[0] / 255,
|
|
145
|
-
g = rgb[1] / 255,
|
|
146
|
-
b = rgb[2] / 255,
|
|
147
|
-
x,
|
|
148
|
-
y,
|
|
149
|
-
z;
|
|
150
|
-
r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
|
|
151
|
-
g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
|
|
152
|
-
b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
|
|
153
|
-
x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
|
|
154
|
-
y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
|
|
155
|
-
z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
|
|
156
|
-
x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
|
|
157
|
-
y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
|
|
158
|
-
z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
|
|
159
|
-
return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
|
|
160
|
-
}
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
var colorMap = {
|
|
2
|
-
resting: {
|
|
3
|
-
text: {
|
|
4
|
-
B300: ['color.text.selected', 'color.text.link.resting', 'color.iconBorder.brand'],
|
|
5
|
-
B400: ['color.text.selected', 'color.text.link.resting', 'color.iconBorder.brand'],
|
|
6
|
-
R300: ['color.text.danger', 'color.iconBorder.danger'],
|
|
7
|
-
R400: ['color.text.danger', 'color.iconBorder.danger'],
|
|
8
|
-
Y300: ['color.text.warning', 'color.iconBorder.warning'],
|
|
9
|
-
Y400: ['color.text.warning', 'color.iconBorder.warning'],
|
|
10
|
-
P300: ['color.text.discovery', 'color.iconBorder.discovery'],
|
|
11
|
-
P400: ['color.text.discovery', 'color.iconBorder.discovery'],
|
|
12
|
-
G300: ['color.text.success', 'color.iconBorder.success'],
|
|
13
|
-
G400: ['color.text.success', 'color.iconBorder.success'],
|
|
14
|
-
N0: ['color.text.onBold'],
|
|
15
|
-
N70: ['color.text.lowEmphasis'],
|
|
16
|
-
N80: ['color.text.lowEmphasis'],
|
|
17
|
-
N90: ['color.text.lowEmphasis'],
|
|
18
|
-
N100: ['color.text.lowEmphasis'],
|
|
19
|
-
N200: ['color.text.lowEmphasis'],
|
|
20
|
-
N300: ['color.text.lowEmphasis'],
|
|
21
|
-
N400: ['color.text.mediumEmphasis'],
|
|
22
|
-
N500: ['color.text.mediumEmphasis'],
|
|
23
|
-
N600: ['color.text.mediumEmphasis'],
|
|
24
|
-
N700: ['color.text.highEmphasis'],
|
|
25
|
-
N800: ['color.text.highEmphasis'],
|
|
26
|
-
N900: ['color.text.highEmphasis']
|
|
27
|
-
},
|
|
28
|
-
background: {
|
|
29
|
-
B75: ['color.background.selected.resting'],
|
|
30
|
-
N40: ['color.background.subtleNeutral.resting', 'color.background.sunken'],
|
|
31
|
-
B50: ['color.background.subtleBrand.resting', 'color.background.selected.resting'],
|
|
32
|
-
Y75: ['color.background.subtleWarning.resting'],
|
|
33
|
-
P50: ['color.background.subtleDiscovery.resting'],
|
|
34
|
-
R50: ['color.background.subtleDanger.resting'],
|
|
35
|
-
G50: ['color.background.subtleSuccess.resting'],
|
|
36
|
-
P300: ['color.background.boldDiscovery.resting'],
|
|
37
|
-
P400: ['color.background.boldDiscovery.resting'],
|
|
38
|
-
G300: ['color.background.boldSuccess.resting'],
|
|
39
|
-
Y300: ['color.background.boldWarning.resting'],
|
|
40
|
-
Y500: ['color.background.boldWarning.resting'],
|
|
41
|
-
R400: ['color.background.boldDanger.resting'],
|
|
42
|
-
B400: ['color.background.boldBrand.resting'],
|
|
43
|
-
N0: ['color.background.default', 'color.background.overlay', 'color.background.card']
|
|
44
|
-
},
|
|
45
|
-
border: {
|
|
46
|
-
N10: ['color.border.neutral'],
|
|
47
|
-
N20: ['color.border.neutral'],
|
|
48
|
-
N30: ['color.border.neutral'],
|
|
49
|
-
N40: ['color.border.neutral'],
|
|
50
|
-
N50: ['color.border.neutral'],
|
|
51
|
-
N60: ['color.border.neutral'],
|
|
52
|
-
N70: ['color.border.neutral'],
|
|
53
|
-
B100: ['color.border.focus'],
|
|
54
|
-
B300: ['color.iconBorder.brand', 'color.text.selected'],
|
|
55
|
-
B400: ['color.iconBorder.brand', 'color.text.selected'],
|
|
56
|
-
R300: ['color.iconBorder.danger'],
|
|
57
|
-
R400: ['color.iconBorder.danger'],
|
|
58
|
-
Y300: ['color.iconBorder.warning'],
|
|
59
|
-
Y400: ['color.iconBorder.warning'],
|
|
60
|
-
P300: ['color.iconBorder.discovery'],
|
|
61
|
-
P400: ['color.iconBorder.discovery'],
|
|
62
|
-
G300: ['color.iconBorder.success'],
|
|
63
|
-
G400: ['color.iconBorder.success']
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
hover: {
|
|
67
|
-
text: {
|
|
68
|
-
B300: ['color.text.link.resting'],
|
|
69
|
-
B400: ['color.text.link.resting']
|
|
70
|
-
},
|
|
71
|
-
background: {
|
|
72
|
-
B50: ['color.background.selected.hover'],
|
|
73
|
-
B75: ['color.background.selected.hover'],
|
|
74
|
-
P200: ['color.background.boldDiscovery.hover'],
|
|
75
|
-
P300: ['color.background.boldDiscovery.hover'],
|
|
76
|
-
G200: ['color.background.boldSuccess.hover'],
|
|
77
|
-
R300: ['color.background.boldDanger.hover'],
|
|
78
|
-
Y200: ['color.background.boldWarning.hover'],
|
|
79
|
-
B300: ['color.background.boldBrand.hover']
|
|
80
|
-
},
|
|
81
|
-
border: {}
|
|
82
|
-
},
|
|
83
|
-
pressed: {
|
|
84
|
-
text: {
|
|
85
|
-
B300: ['color.text.link.pressed'],
|
|
86
|
-
B400: ['color.text.link.pressed']
|
|
87
|
-
},
|
|
88
|
-
background: {
|
|
89
|
-
B50: ['color.background.selected.pressed'],
|
|
90
|
-
B75: ['color.background.selected.pressed'],
|
|
91
|
-
P400: ['color.background.boldDiscovery.pressed'],
|
|
92
|
-
P500: ['color.background.boldDiscovery.pressed'],
|
|
93
|
-
G400: ['color.background.boldSuccess.pressed'],
|
|
94
|
-
R500: ['color.background.boldDanger.pressed'],
|
|
95
|
-
Y400: ['color.background.boldWarning.pressed'],
|
|
96
|
-
B500: ['color.background.boldBrand.pressed']
|
|
97
|
-
},
|
|
98
|
-
border: {}
|
|
99
|
-
},
|
|
100
|
-
disabled: {
|
|
101
|
-
text: {
|
|
102
|
-
N60: ['color.text.disabled'],
|
|
103
|
-
N70: ['color.text.disabled'],
|
|
104
|
-
N80: ['color.text.disabled'],
|
|
105
|
-
N90: ['color.text.disabled'],
|
|
106
|
-
N100: ['color.text.disabled']
|
|
107
|
-
},
|
|
108
|
-
background: {
|
|
109
|
-
N10: ['color.background.disabled'],
|
|
110
|
-
N20: ['color.background.disabled'],
|
|
111
|
-
N30: ['color.background.disabled'],
|
|
112
|
-
N40: ['color.background.disabled']
|
|
113
|
-
},
|
|
114
|
-
border: {
|
|
115
|
-
N10: ['color.background.disabled'],
|
|
116
|
-
N20: ['color.background.disabled'],
|
|
117
|
-
N30: ['color.background.disabled'],
|
|
118
|
-
N40: ['color.background.disabled']
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
export default colorMap;
|