@atlaskit/codemod-cli 0.8.4 → 0.8.7
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 +18 -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/sinceRef.js +2 -2
- 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/sinceRef.js +1 -1
- 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/sinceRef.js +1 -1
- 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 +4 -5
- 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,14 +1,12 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
2
|
|
|
3
3
|
/* eslint-disable no-console */
|
|
4
|
-
import colorToToken from './utils/color-to-token';
|
|
5
4
|
import { isDecendantOfToken, isDecendantOfType } from './utils/ast';
|
|
6
5
|
import { cleanMeta, getMetaFromAncestors } from './utils/ast-meta';
|
|
7
6
|
import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from './utils/color';
|
|
8
7
|
import Search from './utils/fuzzy-search';
|
|
9
8
|
import { legacyColorMetaMap } from './utils/legacy-colors';
|
|
10
|
-
import
|
|
11
|
-
var tokens = Object.keys(designTokens);
|
|
9
|
+
import { tokens } from './utils/tokens';
|
|
12
10
|
var search = Search(tokens, false);
|
|
13
11
|
|
|
14
12
|
function hasImportDeclaration(j, source, sourcePath) {
|
|
@@ -36,58 +34,25 @@ function insertTokenImport(j, source) {
|
|
|
36
34
|
source.get().node.program.body.unshift(newImport);
|
|
37
35
|
}
|
|
38
36
|
|
|
39
|
-
function buildToken(j,
|
|
40
|
-
var callExpr = j.callExpression(j.identifier('token'), [j.stringLiteral(
|
|
41
|
-
callExpr.comments = [j.commentBlock(" [token-confidence: ".concat(tokenResult.confidence, "] "))];
|
|
37
|
+
function buildToken(j, tokenId, node) {
|
|
38
|
+
var callExpr = j.callExpression(j.identifier('token'), [j.stringLiteral(tokenId), node].filter(Boolean));
|
|
42
39
|
return callExpr;
|
|
43
40
|
}
|
|
44
41
|
|
|
45
|
-
function getTokenFromNode(j, path
|
|
46
|
-
var baseMeta = arguments.length >
|
|
42
|
+
function getTokenFromNode(j, path) {
|
|
43
|
+
var baseMeta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
47
44
|
var foundMeta = getMetaFromAncestors(j, path);
|
|
48
|
-
var
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
if (!name) {
|
|
58
|
-
return false;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
var result = /(hover|active|disabled)/.exec(name.toLowerCase());
|
|
62
|
-
|
|
63
|
-
if (result) {
|
|
64
|
-
if (result[0] === 'active') {
|
|
65
|
-
state = 'pressed';
|
|
66
|
-
} else {
|
|
67
|
-
state = result[0];
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
return true;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
return false;
|
|
74
|
-
});
|
|
75
|
-
var tokenResult = colorToToken(paletteColor || '', {
|
|
76
|
-
state: state,
|
|
77
|
-
propertyName: propertyName
|
|
78
|
-
}, function () {
|
|
79
|
-
var searchTerm = cleanMeta([].concat(_toConsumableArray(foundMeta), _toConsumableArray(baseMeta))).join(' ');
|
|
80
|
-
var results = search.get(searchTerm);
|
|
81
|
-
|
|
82
|
-
if (results) {
|
|
83
|
-
return results.map(function (result) {
|
|
84
|
-
return result[1];
|
|
85
|
-
});
|
|
86
|
-
}
|
|
45
|
+
var meta = cleanMeta([].concat(_toConsumableArray(foundMeta), _toConsumableArray(baseMeta)));
|
|
46
|
+
var results = search.get(meta.join(' '));
|
|
47
|
+
var tokenId = ['utility.UNSAFE_util.MISSING_TOKEN'];
|
|
48
|
+
|
|
49
|
+
if (results) {
|
|
50
|
+
tokenId = results.map(function (result) {
|
|
51
|
+
return result[1];
|
|
52
|
+
});
|
|
53
|
+
}
|
|
87
54
|
|
|
88
|
-
|
|
89
|
-
});
|
|
90
|
-
return tokenResult;
|
|
55
|
+
return tokenId[0];
|
|
91
56
|
}
|
|
92
57
|
|
|
93
58
|
export default function transformer(file, api) {
|
|
@@ -105,7 +70,7 @@ export default function transformer(file, api) {
|
|
|
105
70
|
insertTokenImport(j, source);
|
|
106
71
|
var key = path.value.property.type === 'Identifier' ? path.value.property.name : undefined;
|
|
107
72
|
var colorMeta = legacyColorMetaMap[key] || [];
|
|
108
|
-
var tokenId = getTokenFromNode(j, path,
|
|
73
|
+
var tokenId = getTokenFromNode(j, path, colorMeta);
|
|
109
74
|
j(path).replaceWith(buildToken(j, tokenId, path.value));
|
|
110
75
|
transformed = true;
|
|
111
76
|
});
|
|
@@ -120,7 +85,7 @@ export default function transformer(file, api) {
|
|
|
120
85
|
debug && console.log('file:', file.path);
|
|
121
86
|
insertTokenImport(j, source);
|
|
122
87
|
var colorMeta = legacyColorMetaMap[valuePath.name] || [];
|
|
123
|
-
var tokenId = getTokenFromNode(j, valuePath,
|
|
88
|
+
var tokenId = getTokenFromNode(j, valuePath, colorMeta);
|
|
124
89
|
j(path).replaceWith(j.objectProperty(path.value.key, buildToken(j, tokenId, valuePath.value)));
|
|
125
90
|
transformed = true;
|
|
126
91
|
});
|
|
@@ -136,7 +101,7 @@ export default function transformer(file, api) {
|
|
|
136
101
|
debug && console.log('file:', file.path);
|
|
137
102
|
insertTokenImport(j, source);
|
|
138
103
|
var colorMeta = legacyColorMetaMap[path.value.name] || [];
|
|
139
|
-
var tokenId = getTokenFromNode(j, path,
|
|
104
|
+
var tokenId = getTokenFromNode(j, path, colorMeta);
|
|
140
105
|
j(path).replaceWith(buildToken(j, tokenId, path.value));
|
|
141
106
|
transformed = true;
|
|
142
107
|
});
|
|
@@ -151,7 +116,7 @@ export default function transformer(file, api) {
|
|
|
151
116
|
insertTokenImport(j, source);
|
|
152
117
|
var value = path === null || path === void 0 ? void 0 : (_path$value = path.value) === null || _path$value === void 0 ? void 0 : (_path$value$value = _path$value.value) === null || _path$value$value === void 0 ? void 0 : _path$value$value.toString();
|
|
153
118
|
var colorMeta = legacyColorMetaMap[value] || [];
|
|
154
|
-
var tokenId = getTokenFromNode(j, path,
|
|
119
|
+
var tokenId = getTokenFromNode(j, path, colorMeta);
|
|
155
120
|
var tokenNode = buildToken(j, tokenId, path.value);
|
|
156
121
|
j(path).replaceWith(isDecendantOfType(j, path, j.JSXAttribute) ? j.jsxExpressionContainer(tokenNode) : tokenNode);
|
|
157
122
|
transformed = true;
|
|
@@ -1,19 +1,5 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
-
import
|
|
3
|
-
var tokens = Object.keys(designTokens);
|
|
4
|
-
export var getUniqueWordsFromTokens = tokens.reduce(function (accum, val) {
|
|
5
|
-
return [].concat(_toConsumableArray(accum), _toConsumableArray(val.split('.')));
|
|
6
|
-
}, []).reduce(function (accum, val) {
|
|
7
|
-
return [].concat(_toConsumableArray(accum), _toConsumableArray(val.split(/(?=[A-Z])/g).map(function (e) {
|
|
8
|
-
return e.toLowerCase();
|
|
9
|
-
})));
|
|
10
|
-
}, []).reduce(function (accum, val) {
|
|
11
|
-
if (!accum.includes(val)) {
|
|
12
|
-
accum.push(val);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
return accum;
|
|
16
|
-
}, []);
|
|
2
|
+
import { getUniqueWordsFromTokens } from './tokens';
|
|
17
3
|
export function getMetaFromAncestors(j, path) {
|
|
18
4
|
var meta = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
19
5
|
var parent = path.parentPath;
|
|
@@ -38,15 +24,16 @@ export function getMetaFromAncestors(j, path) {
|
|
|
38
24
|
var quasi = grandParent.value.quasis[expressionIndex];
|
|
39
25
|
var propertyName = (quasi.value.cooked || quasi.value.raw || '').replace(/\n/g, '').split(/;|{|}/).filter(function (el) {
|
|
40
26
|
return !el.match(/\.|\@|\(|\)/);
|
|
41
|
-
}).pop().
|
|
27
|
+
}).pop().split(/:/g)[0].trim();
|
|
42
28
|
grandParent.value.quasis.slice(0, expressionIndex + 1).map(function (q) {
|
|
43
29
|
return q.value.cooked;
|
|
44
30
|
}) // We reverse so the most nested one is first which we're more likely than not interested in
|
|
45
|
-
.reverse().
|
|
31
|
+
.reverse().some(function (str) {
|
|
46
32
|
var result = /(hover|active|disabled|focus)/.exec(str.toLowerCase());
|
|
47
33
|
|
|
48
34
|
if (result) {
|
|
49
35
|
meta.push(result[0]);
|
|
36
|
+
return true;
|
|
50
37
|
}
|
|
51
38
|
});
|
|
52
39
|
meta.push(propertyName);
|
|
@@ -74,7 +61,7 @@ export function cleanMeta(meta) {
|
|
|
74
61
|
return e.toLowerCase();
|
|
75
62
|
}) : []));
|
|
76
63
|
}, []).reduce(function (accum, val) {
|
|
77
|
-
accum.push(val.replace(/:/g, '').replace(/,/g, '').replace('grey', 'neutral').replace('texts', 'text').replace('error', 'danger').replace('invalid', 'danger').replace('removed', 'danger').replace('removal', 'danger').replace('remove', 'danger').replace('valid', 'success').replace('successful', 'success').replace('risk', 'warning').replace('primary', 'bold').replace('info', 'bold').replace('secondary', 'subtle').replace('hyperlink', 'link').replace('
|
|
64
|
+
accum.push(val.replace(/:/g, '').replace(/,/g, '').replace('grey', 'neutral').replace('skeleton', 'neutral').replace('texts', 'text').replace('red', 'danger').replace('error', 'danger').replace('invalid', 'danger').replace('removed', 'danger').replace('removal', 'danger').replace('remove', 'danger').replace('focus', 'focused').replace('valid', 'success').replace('successful', 'success').replace('risk', 'warning').replace('caution', 'warning').replace('warn', 'warning').replace('primary', 'bold').replace('info', 'bold').replace('secondary', 'subtle').replace('hyperlink', 'link').replace('anchor', 'link').replace('active', 'pressed').replace('hover', 'hovered').replace('dragged', 'overlay').replace('dragging', 'overlay').replace('drag', 'overlay').replace('background-color', 'background').replace('color', 'text').replace('icons', 'icon').replace('glyph', 'icon').replace('stroke', 'border').replace('border-left', 'border').replace('border-right', 'border').replace('border-top', 'border').replace('border-bottom', 'border').replace('box-shadow', 'shadow'));
|
|
78
65
|
return accum;
|
|
79
66
|
}, []).filter(function (val) {
|
|
80
67
|
return getUniqueWordsFromTokens.includes(val);
|
|
@@ -43,10 +43,12 @@ export var legacyColorMetaMap = {
|
|
|
43
43
|
T300: ['accent', 'teal'],
|
|
44
44
|
T400: ['accent', 'teal'],
|
|
45
45
|
T500: ['accent', 'teal'],
|
|
46
|
-
N0: ['
|
|
46
|
+
N0: ['inverse'],
|
|
47
|
+
N700: ['text'],
|
|
47
48
|
N800: ['text'],
|
|
49
|
+
N900: ['text'],
|
|
48
50
|
background: ['background', 'default'],
|
|
49
|
-
backgroundActive: ['background', '
|
|
51
|
+
backgroundActive: ['background', 'pressed'],
|
|
50
52
|
backgroundHover: ['background', 'hovered'],
|
|
51
53
|
backgroundOnLayer: ['background', 'blanket'],
|
|
52
54
|
text: ['text'],
|
|
@@ -56,9 +58,9 @@ export var legacyColorMetaMap = {
|
|
|
56
58
|
placeholderText: ['text', 'subtlest'],
|
|
57
59
|
heading: ['text'],
|
|
58
60
|
subtleHeading: ['text', 'subtle'],
|
|
59
|
-
link: ['
|
|
60
|
-
linkHover: ['
|
|
61
|
-
linkActive: ['
|
|
61
|
+
link: ['link'],
|
|
62
|
+
linkHover: ['link', 'hovered'],
|
|
63
|
+
linkActive: ['link', 'pressed'],
|
|
62
64
|
linkOutline: ['border', 'selected'],
|
|
63
65
|
primary: ['brand'],
|
|
64
66
|
blue: ['accent', 'blue'],
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import designTokens from '@atlaskit/tokens/token-names';
|
|
3
|
+
import renameMapping from '@atlaskit/tokens/rename-mapping';
|
|
4
|
+
export var tokens = Object.keys(designTokens).filter(function (t) {
|
|
5
|
+
return !t.includes('UNSAFE') && !t.includes('interaction');
|
|
6
|
+
}).filter(function (t) {
|
|
7
|
+
return !renameMapping.find(function (_ref) {
|
|
8
|
+
var path = _ref.path;
|
|
9
|
+
return t === path.replace(/\.[default]\g/, '');
|
|
10
|
+
});
|
|
11
|
+
});
|
|
12
|
+
export var getUniqueWordsFromTokens = Object.keys(designTokens).reduce(function (accum, val) {
|
|
13
|
+
return [].concat(_toConsumableArray(accum), _toConsumableArray(val.split('.')));
|
|
14
|
+
}, []).reduce(function (accum, val) {
|
|
15
|
+
return [].concat(_toConsumableArray(accum), _toConsumableArray(val.split(/(?=[A-Z])/g).map(function (e) {
|
|
16
|
+
return e.toLowerCase();
|
|
17
|
+
})));
|
|
18
|
+
}, []).reduce(function (accum, val) {
|
|
19
|
+
if (!accum.includes(val)) {
|
|
20
|
+
accum.push(val);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return accum;
|
|
24
|
+
}, []);
|
package/dist/esm/sinceRef.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
2
2
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
|
-
import simpleGit from 'simple-git
|
|
3
|
+
import simpleGit from 'simple-git';
|
|
4
4
|
import { ValidationError } from './types';
|
|
5
5
|
var packageRegex = /"(@(?:atlaskit|atlassian|atlassiansox)\/.*)": "(.*)"/;
|
|
6
6
|
|
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/codemod-cli",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.7",
|
|
4
4
|
"description": "A cli for distributing codemods for atlassian-frontend components and services",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -17,26 +17,25 @@
|
|
|
17
17
|
"releaseModel": "continuous"
|
|
18
18
|
},
|
|
19
19
|
"scripts": {
|
|
20
|
-
"prestart": "cd ../../ &&
|
|
20
|
+
"prestart": "cd ../../ && yarn build @atlaskit/codemod-utils",
|
|
21
21
|
"start": "./bin/codemod-cli.js"
|
|
22
22
|
},
|
|
23
23
|
"bin": {
|
|
24
24
|
"codemod-cli": "./bin/codemod-cli.js"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@atlaskit/tokens": "^0.
|
|
27
|
+
"@atlaskit/tokens": "^0.7.0",
|
|
28
28
|
"@babel/runtime": "^7.0.0",
|
|
29
29
|
"@types/chalk": "^2.2.0",
|
|
30
30
|
"@types/jscodeshift": "^0.11.0",
|
|
31
31
|
"chalk": "^2.1.0",
|
|
32
|
-
"chromatism": "^2.6.0",
|
|
33
32
|
"enquirer": "^2.3.4",
|
|
34
33
|
"glob": "^7.1.2",
|
|
35
34
|
"jscodeshift": "^0.13.0",
|
|
36
35
|
"meow": "^8.1.1",
|
|
37
36
|
"projector-spawn": "^1.0.1",
|
|
38
37
|
"semver": "^7.3.0",
|
|
39
|
-
"simple-git": "^
|
|
38
|
+
"simple-git": "^2.48.0"
|
|
40
39
|
},
|
|
41
40
|
"devDependencies": {
|
|
42
41
|
"@atlaskit/docs": "*",
|
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.findClosetMatchingToken = findClosetMatchingToken;
|
|
9
|
-
exports.legacyColorPalette = void 0;
|
|
10
|
-
|
|
11
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
|
-
|
|
13
|
-
var _chromatism = require("chromatism");
|
|
14
|
-
|
|
15
|
-
var _tokenNames = _interopRequireDefault(require("@atlaskit/tokens/token-names"));
|
|
16
|
-
|
|
17
|
-
/* eslint-disable @atlassian/tangerine/import/entry-points */
|
|
18
|
-
// Design token values are not currently exposed from @atlaskit/tokens
|
|
19
|
-
// In a follow up ticket we will expose them again via another entrypoint.
|
|
20
|
-
var legacyColorPalette = {
|
|
21
|
-
R50: '#FFEBE6',
|
|
22
|
-
R75: '#FFBDAD',
|
|
23
|
-
R100: '#FF8F73',
|
|
24
|
-
R200: '#FF7452',
|
|
25
|
-
R300: '#FF5630',
|
|
26
|
-
R400: '#DE350B',
|
|
27
|
-
R500: '#BF2600',
|
|
28
|
-
Y50: '#FFFAE6',
|
|
29
|
-
Y75: '#FFF0B3',
|
|
30
|
-
Y100: '#FFE380',
|
|
31
|
-
Y200: '#FFC400',
|
|
32
|
-
Y300: '#FFAB00',
|
|
33
|
-
Y400: '#FF991F',
|
|
34
|
-
Y500: '#FF8B00',
|
|
35
|
-
G50: '#E3FCEF',
|
|
36
|
-
G75: '#ABF5D1',
|
|
37
|
-
G100: '#79F2C0',
|
|
38
|
-
G200: '#57D9A3',
|
|
39
|
-
G300: '#36B37E',
|
|
40
|
-
G400: '#00875A',
|
|
41
|
-
G500: '#006644',
|
|
42
|
-
B50: '#DEEBFF',
|
|
43
|
-
B75: '#B3D4FF',
|
|
44
|
-
B100: '#4C9AFF',
|
|
45
|
-
B200: '#2684FF',
|
|
46
|
-
B300: '#0065FF',
|
|
47
|
-
B400: '#0052CC',
|
|
48
|
-
B500: '#0747A6',
|
|
49
|
-
P50: '#EAE6FF',
|
|
50
|
-
P75: '#C0B6F2',
|
|
51
|
-
P100: '#998DD9',
|
|
52
|
-
P200: '#8777D9',
|
|
53
|
-
P300: '#6554C0',
|
|
54
|
-
P400: '#5243AA',
|
|
55
|
-
P500: '#403294',
|
|
56
|
-
T50: '#E6FCFF',
|
|
57
|
-
T75: '#B3F5FF',
|
|
58
|
-
T100: '#79E2F2',
|
|
59
|
-
T200: '#00C7E6',
|
|
60
|
-
T300: '#00B8D9',
|
|
61
|
-
T400: '#00A3BF',
|
|
62
|
-
T500: '#008DA6',
|
|
63
|
-
N0: '#FFFFFF',
|
|
64
|
-
N10: '#FAFBFC',
|
|
65
|
-
N20: '#F4F5F7',
|
|
66
|
-
N30: '#EBECF0',
|
|
67
|
-
N40: '#DFE1E6',
|
|
68
|
-
N50: '#C1C7D0',
|
|
69
|
-
N60: '#B3BAC5',
|
|
70
|
-
N70: '#A5ADBA',
|
|
71
|
-
N80: '#97A0AF',
|
|
72
|
-
N90: '#8993A4',
|
|
73
|
-
N100: '#7A869A',
|
|
74
|
-
N200: '#6B778C',
|
|
75
|
-
N300: '#5E6C84',
|
|
76
|
-
N400: '#505F79',
|
|
77
|
-
N500: '#42526E',
|
|
78
|
-
N600: '#344563',
|
|
79
|
-
N700: '#253858',
|
|
80
|
-
N800: '#172B4D',
|
|
81
|
-
N900: '#091E42'
|
|
82
|
-
};
|
|
83
|
-
exports.legacyColorPalette = legacyColorPalette;
|
|
84
|
-
|
|
85
|
-
function findClosetMatchingToken(paletteName) {
|
|
86
|
-
var paletteColor = legacyColorPalette[paletteName];
|
|
87
|
-
|
|
88
|
-
if (!paletteColor) {
|
|
89
|
-
return undefined;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
var tokens = Object.entries(_tokenNames.default).map(function (_ref) {
|
|
93
|
-
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
94
|
-
key = _ref2[0],
|
|
95
|
-
value = _ref2[1];
|
|
96
|
-
|
|
97
|
-
try {
|
|
98
|
-
var _diff = deltaE(paletteColor, value);
|
|
99
|
-
|
|
100
|
-
return [key, _diff];
|
|
101
|
-
} catch (e) {
|
|
102
|
-
return [key, 99999];
|
|
103
|
-
}
|
|
104
|
-
}).sort(function (a, b) {
|
|
105
|
-
var left = a[1];
|
|
106
|
-
var right = b[1];
|
|
107
|
-
return left - right;
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
var _tokens$ = (0, _slicedToArray2.default)(tokens[0], 2),
|
|
111
|
-
token = _tokens$[0],
|
|
112
|
-
diff = _tokens$[1];
|
|
113
|
-
|
|
114
|
-
if (diff < 10) {
|
|
115
|
-
return token;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
return undefined;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
function toRgbArray(color) {
|
|
122
|
-
var colr = (0, _chromatism.convert)(color);
|
|
123
|
-
return [colr.rgb.r, colr.rgb.g, colr.rgb.b];
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Color difference function ripped from https://stackoverflow.com/a/52453462
|
|
127
|
-
*
|
|
128
|
-
* **Color difference**
|
|
129
|
-
* - <= 1.0 not perceptible by human eyes
|
|
130
|
-
* - 1-2 Perceptible through close observation
|
|
131
|
-
* - 2-10 Perceptible at a glance
|
|
132
|
-
* - 11-49 Colors are more similar than opposite
|
|
133
|
-
* - 100 Colors are opposite
|
|
134
|
-
*/
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
function deltaE(rgbA, rgbB) {
|
|
138
|
-
var labA = rgb2lab(toRgbArray(rgbA));
|
|
139
|
-
var labB = rgb2lab(toRgbArray(rgbB));
|
|
140
|
-
var deltaL = labA[0] - labB[0];
|
|
141
|
-
var deltaA = labA[1] - labB[1];
|
|
142
|
-
var deltaB = labA[2] - labB[2];
|
|
143
|
-
var c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
|
|
144
|
-
var c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
|
|
145
|
-
var deltaC = c1 - c2;
|
|
146
|
-
var deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
|
|
147
|
-
deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
|
|
148
|
-
var sc = 1.0 + 0.045 * c1;
|
|
149
|
-
var sh = 1.0 + 0.015 * c1;
|
|
150
|
-
var deltaLKlsl = deltaL / 1.0;
|
|
151
|
-
var deltaCkcsc = deltaC / sc;
|
|
152
|
-
var deltaHkhsh = deltaH / sh;
|
|
153
|
-
var i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
|
|
154
|
-
return i < 0 ? 0 : Math.sqrt(i);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
function rgb2lab(rgb) {
|
|
158
|
-
var r = rgb[0] / 255,
|
|
159
|
-
g = rgb[1] / 255,
|
|
160
|
-
b = rgb[2] / 255,
|
|
161
|
-
x,
|
|
162
|
-
y,
|
|
163
|
-
z;
|
|
164
|
-
r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
|
|
165
|
-
g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
|
|
166
|
-
b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
|
|
167
|
-
x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
|
|
168
|
-
y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.0;
|
|
169
|
-
z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
|
|
170
|
-
x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
|
|
171
|
-
y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
|
|
172
|
-
z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
|
|
173
|
-
return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
|
|
174
|
-
}
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var colorMap = {
|
|
8
|
-
resting: {
|
|
9
|
-
text: {
|
|
10
|
-
B300: ['color.text.selected', 'color.text.link.resting', 'color.iconBorder.brand'],
|
|
11
|
-
B400: ['color.text.selected', 'color.text.link.resting', 'color.iconBorder.brand'],
|
|
12
|
-
R300: ['color.text.danger', 'color.iconBorder.danger'],
|
|
13
|
-
R400: ['color.text.danger', 'color.iconBorder.danger'],
|
|
14
|
-
Y300: ['color.text.warning', 'color.iconBorder.warning'],
|
|
15
|
-
Y400: ['color.text.warning', 'color.iconBorder.warning'],
|
|
16
|
-
P300: ['color.text.discovery', 'color.iconBorder.discovery'],
|
|
17
|
-
P400: ['color.text.discovery', 'color.iconBorder.discovery'],
|
|
18
|
-
G300: ['color.text.success', 'color.iconBorder.success'],
|
|
19
|
-
G400: ['color.text.success', 'color.iconBorder.success'],
|
|
20
|
-
N0: ['color.text.onBold'],
|
|
21
|
-
N70: ['color.text.lowEmphasis'],
|
|
22
|
-
N80: ['color.text.lowEmphasis'],
|
|
23
|
-
N90: ['color.text.lowEmphasis'],
|
|
24
|
-
N100: ['color.text.lowEmphasis'],
|
|
25
|
-
N200: ['color.text.lowEmphasis'],
|
|
26
|
-
N300: ['color.text.lowEmphasis'],
|
|
27
|
-
N400: ['color.text.mediumEmphasis'],
|
|
28
|
-
N500: ['color.text.mediumEmphasis'],
|
|
29
|
-
N600: ['color.text.mediumEmphasis'],
|
|
30
|
-
N700: ['color.text.highEmphasis'],
|
|
31
|
-
N800: ['color.text.highEmphasis'],
|
|
32
|
-
N900: ['color.text.highEmphasis']
|
|
33
|
-
},
|
|
34
|
-
background: {
|
|
35
|
-
B75: ['color.background.selected.resting'],
|
|
36
|
-
N40: ['color.background.subtleNeutral.resting', 'color.background.sunken'],
|
|
37
|
-
B50: ['color.background.subtleBrand.resting', 'color.background.selected.resting'],
|
|
38
|
-
Y75: ['color.background.subtleWarning.resting'],
|
|
39
|
-
P50: ['color.background.subtleDiscovery.resting'],
|
|
40
|
-
R50: ['color.background.subtleDanger.resting'],
|
|
41
|
-
G50: ['color.background.subtleSuccess.resting'],
|
|
42
|
-
P300: ['color.background.boldDiscovery.resting'],
|
|
43
|
-
P400: ['color.background.boldDiscovery.resting'],
|
|
44
|
-
G300: ['color.background.boldSuccess.resting'],
|
|
45
|
-
Y300: ['color.background.boldWarning.resting'],
|
|
46
|
-
Y500: ['color.background.boldWarning.resting'],
|
|
47
|
-
R400: ['color.background.boldDanger.resting'],
|
|
48
|
-
B400: ['color.background.boldBrand.resting'],
|
|
49
|
-
N0: ['color.background.default', 'color.background.overlay', 'color.background.card']
|
|
50
|
-
},
|
|
51
|
-
border: {
|
|
52
|
-
N10: ['color.border.neutral'],
|
|
53
|
-
N20: ['color.border.neutral'],
|
|
54
|
-
N30: ['color.border.neutral'],
|
|
55
|
-
N40: ['color.border.neutral'],
|
|
56
|
-
N50: ['color.border.neutral'],
|
|
57
|
-
N60: ['color.border.neutral'],
|
|
58
|
-
N70: ['color.border.neutral'],
|
|
59
|
-
B100: ['color.border.focus'],
|
|
60
|
-
B300: ['color.iconBorder.brand', 'color.text.selected'],
|
|
61
|
-
B400: ['color.iconBorder.brand', 'color.text.selected'],
|
|
62
|
-
R300: ['color.iconBorder.danger'],
|
|
63
|
-
R400: ['color.iconBorder.danger'],
|
|
64
|
-
Y300: ['color.iconBorder.warning'],
|
|
65
|
-
Y400: ['color.iconBorder.warning'],
|
|
66
|
-
P300: ['color.iconBorder.discovery'],
|
|
67
|
-
P400: ['color.iconBorder.discovery'],
|
|
68
|
-
G300: ['color.iconBorder.success'],
|
|
69
|
-
G400: ['color.iconBorder.success']
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
hover: {
|
|
73
|
-
text: {
|
|
74
|
-
B300: ['color.text.link.resting'],
|
|
75
|
-
B400: ['color.text.link.resting']
|
|
76
|
-
},
|
|
77
|
-
background: {
|
|
78
|
-
B50: ['color.background.selected.hover'],
|
|
79
|
-
B75: ['color.background.selected.hover'],
|
|
80
|
-
P200: ['color.background.boldDiscovery.hover'],
|
|
81
|
-
P300: ['color.background.boldDiscovery.hover'],
|
|
82
|
-
G200: ['color.background.boldSuccess.hover'],
|
|
83
|
-
R300: ['color.background.boldDanger.hover'],
|
|
84
|
-
Y200: ['color.background.boldWarning.hover'],
|
|
85
|
-
B300: ['color.background.boldBrand.hover']
|
|
86
|
-
},
|
|
87
|
-
border: {}
|
|
88
|
-
},
|
|
89
|
-
pressed: {
|
|
90
|
-
text: {
|
|
91
|
-
B300: ['color.text.link.pressed'],
|
|
92
|
-
B400: ['color.text.link.pressed']
|
|
93
|
-
},
|
|
94
|
-
background: {
|
|
95
|
-
B50: ['color.background.selected.pressed'],
|
|
96
|
-
B75: ['color.background.selected.pressed'],
|
|
97
|
-
P400: ['color.background.boldDiscovery.pressed'],
|
|
98
|
-
P500: ['color.background.boldDiscovery.pressed'],
|
|
99
|
-
G400: ['color.background.boldSuccess.pressed'],
|
|
100
|
-
R500: ['color.background.boldDanger.pressed'],
|
|
101
|
-
Y400: ['color.background.boldWarning.pressed'],
|
|
102
|
-
B500: ['color.background.boldBrand.pressed']
|
|
103
|
-
},
|
|
104
|
-
border: {}
|
|
105
|
-
},
|
|
106
|
-
disabled: {
|
|
107
|
-
text: {
|
|
108
|
-
N60: ['color.text.disabled'],
|
|
109
|
-
N70: ['color.text.disabled'],
|
|
110
|
-
N80: ['color.text.disabled'],
|
|
111
|
-
N90: ['color.text.disabled'],
|
|
112
|
-
N100: ['color.text.disabled']
|
|
113
|
-
},
|
|
114
|
-
background: {
|
|
115
|
-
N10: ['color.background.disabled'],
|
|
116
|
-
N20: ['color.background.disabled'],
|
|
117
|
-
N30: ['color.background.disabled'],
|
|
118
|
-
N40: ['color.background.disabled']
|
|
119
|
-
},
|
|
120
|
-
border: {
|
|
121
|
-
N10: ['color.background.disabled'],
|
|
122
|
-
N20: ['color.background.disabled'],
|
|
123
|
-
N30: ['color.background.disabled'],
|
|
124
|
-
N40: ['color.background.disabled']
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
var _default = colorMap;
|
|
129
|
-
exports.default = _default;
|