@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.
Files changed (34) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/main.js +1 -1
  3. package/dist/cjs/presets/theme-to-design-tokens/theme-to-design-tokens.js +20 -56
  4. package/dist/cjs/presets/theme-to-design-tokens/utils/ast-meta.js +6 -22
  5. package/dist/cjs/presets/theme-to-design-tokens/utils/legacy-colors.js +7 -5
  6. package/dist/cjs/presets/theme-to-design-tokens/utils/tokens.js +38 -0
  7. package/dist/cjs/version.json +1 -1
  8. package/dist/es2019/presets/theme-to-design-tokens/theme-to-design-tokens.js +16 -53
  9. package/dist/es2019/presets/theme-to-design-tokens/utils/ast-meta.js +5 -12
  10. package/dist/es2019/presets/theme-to-design-tokens/utils/legacy-colors.js +7 -5
  11. package/dist/es2019/presets/theme-to-design-tokens/utils/tokens.js +12 -0
  12. package/dist/es2019/version.json +1 -1
  13. package/dist/esm/main.js +1 -1
  14. package/dist/esm/presets/theme-to-design-tokens/theme-to-design-tokens.js +19 -54
  15. package/dist/esm/presets/theme-to-design-tokens/utils/ast-meta.js +5 -18
  16. package/dist/esm/presets/theme-to-design-tokens/utils/legacy-colors.js +7 -5
  17. package/dist/esm/presets/theme-to-design-tokens/utils/tokens.js +24 -0
  18. package/dist/esm/version.json +1 -1
  19. package/dist/types/presets/theme-to-design-tokens/utils/ast-meta.d.ts +0 -1
  20. package/dist/types/presets/theme-to-design-tokens/utils/tokens.d.ts +2 -0
  21. package/package.json +2 -3
  22. package/dist/cjs/presets/theme-to-design-tokens/utils/color-difference.js +0 -174
  23. package/dist/cjs/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +0 -129
  24. package/dist/cjs/presets/theme-to-design-tokens/utils/color-to-token.js +0 -88
  25. package/dist/es2019/presets/theme-to-design-tokens/utils/color-difference.js +0 -150
  26. package/dist/es2019/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +0 -122
  27. package/dist/es2019/presets/theme-to-design-tokens/utils/color-to-token.js +0 -75
  28. package/dist/esm/presets/theme-to-design-tokens/utils/color-difference.js +0 -160
  29. package/dist/esm/presets/theme-to-design-tokens/utils/color-palette-tokens-map.js +0 -122
  30. package/dist/esm/presets/theme-to-design-tokens/utils/color-to-token.js +0 -78
  31. package/dist/types/presets/theme-to-design-tokens/types.d.ts +0 -2
  32. package/dist/types/presets/theme-to-design-tokens/utils/color-difference.d.ts +0 -66
  33. package/dist/types/presets/theme-to-design-tokens/utils/color-palette-tokens-map.d.ts +0 -21
  34. 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;