Skip to content

Commit 2ce72f0

Browse files
sam-b-rosesam-b-rose
committed
Fix color migration tests
1 parent c18cc22 commit 2ce72f0

File tree

6 files changed

+153
-34
lines changed

6 files changed

+153
-34
lines changed

‎polaris-migrator/src/migrations/replace-sass-color/color-maps.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,18 @@ export const colorMap = createMap({
2727
dark: '--p-text-critical',
2828
base: '--p-text-critical',
2929
},
30+
ink: {
31+
base: '--p-text',
32+
light: '--p-text-subdued',
33+
lighter: '--p-text-subdued',
34+
lightest: '--p-text-subdued',
35+
},
3036
sky: {
3137
dark: '--p-text-subdued-on-dark',
3238
base: '--p-text-on-dark',
3339
light: '--p-text-on-dark',
3440
lighter: '--p-text-on-dark',
3541
},
36-
ink: {
37-
base: '--p-text',
38-
lighter: '--p-text-subdued',
39-
lightest: '--p-text-subdued',
40-
},
4142
black: {
4243
base: '--p-text',
4344
},
@@ -98,6 +99,9 @@ export const borderColorMap = createMap({
9899
ink: {
99100
lightest: '--p-border',
100101
},
102+
sky: {
103+
light: '--p-border-subdued',
104+
},
101105
});
102106

103107
export const fillColorMap = createMap({

‎polaris-migrator/src/migrations/replace-sass-color/replace-sass-color.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,27 @@ import {
1010
hasSassFunction,
1111
} from '../../utilities/sass';
1212

13-
import {backgroundColorMap, borderColorMap, colorMap} from './color-maps';
13+
import {
14+
backgroundColorMap,
15+
borderColorMap,
16+
colorMap,
17+
fillColorMap,
18+
} from './color-maps';
1419

1520
const tokenColorsKeys = Object.keys(tokenColors);
1621
const maps = {
1722
colorMap,
1823
backgroundColorMap,
1924
borderColorMap,
25+
fillColorMap,
2026
};
2127
const propertyMap: {[key: string]: keyof typeof maps} = {
2228
color: 'colorMap',
2329
background: 'backgroundColorMap',
2430
'background-color': 'backgroundColorMap',
2531
border: 'borderColorMap',
2632
'border-color': 'borderColorMap',
33+
fill: 'fillColorMap',
2734
};
2835

2936
export default function replaceSassColors(

‎polaris-migrator/src/migrations/replace-sass-color/tests/replace-sass-color.input.scss‎

Lines changed: 68 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,76 @@
11
.my-class {
2-
// static colors
3-
color: white;
4-
color: black;
5-
6-
// color() function
2+
// color
3+
color: color('blue');
4+
color: color('blue', 'dark');
5+
color: color('green');
6+
color: color('green', 'dark');
7+
color: color('yellow');
8+
color: color('yellow', 'dark');
9+
color: color('red');
10+
color: color('red', 'dark');
711
color: color('ink');
12+
color: color('ink', 'light');
813
color: color('ink', 'lighter');
9-
color: color('ink', 'lighter', #f2ece4);
10-
color: var(--p-text, color('white'));
14+
color: color('ink', 'lightest');
15+
color: color('sky');
16+
color: color('sky', 'dark');
17+
color: color('sky', 'light');
18+
color: color('sky', 'lighter');
19+
color: color('black');
20+
color: color('white');
1121

12-
background: color('white');
22+
// background
23+
background-color: color('green', 'light');
24+
background-color: color('green', 'lighter');
25+
background-color: color('yellow', 'light');
26+
background-color: color('yellow', 'lighter');
27+
background-color: color('red', 'light');
28+
background-color: color('red', 'lighter');
29+
background-color: color('ink');
30+
background-color: color('ink', 'dark');
31+
background-color: color('sky');
32+
background-color: color('sky', 'light');
33+
background-color: color('sky', 'lighter');
1334
background-color: color('black');
35+
background-color: color('white');
1436

15-
border: var(--p-border-width-1) solid color('sky');
37+
// border
38+
border-color: color('green', 'dark');
39+
border-color: color('green');
40+
border-color: color('green', 'light');
41+
border-color: color('green', 'lighter');
42+
border-color: color('yellow', 'dark');
43+
border-color: color('yellow');
44+
border-color: color('yellow', 'light');
45+
border-color: color('yellow', 'lighter');
46+
border-color: color('red', 'dark');
47+
border-color: color('red');
48+
border-color: color('red', 'light');
49+
border-color: color('red', 'lighter');
50+
border-color: color('ink', 'lightest');
1651
border-color: color('sky', 'light');
52+
53+
// fill
54+
fill: color('green', 'dark');
55+
fill: color('green');
56+
fill: color('yellow', 'dark');
57+
fill: color('yellow');
58+
fill: color('red', 'dark');
59+
fill: color('red');
60+
fill: color('ink');
61+
fill: color('ink', 'light');
62+
fill: color('ink', 'lighter');
63+
fill: color('ink', 'lightest');
64+
fill: color('black');
65+
fill: color('white');
66+
67+
// Skip color() with a for-background argument
68+
color: color('ink', 'lighter', #f2ece4);
69+
70+
// Remove color() fallbacks
71+
color: var(--p-text, color('white'));
72+
73+
// Handle declarations with multiple values
74+
border: var(--p-border-width-1) solid color('ink', 'lightest');
75+
background: border-box color('sky', 'light');
1776
}

‎polaris-migrator/src/migrations/replace-sass-color/tests/replace-sass-color.output.scss‎

Lines changed: 68 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,76 @@
11
.my-class {
2-
// static colors
3-
color: white;
4-
color: black;
5-
6-
// color() function
2+
// color
3+
color: var(--p-interactive);
4+
color: var(--p-interactive-hovered);
5+
color: var(--p-text-success);
6+
color: var(--p-text-success);
7+
color: var(--p-text-warning);
8+
color: var(--p-text-warning);
9+
color: var(--p-text-critical);
10+
color: var(--p-text-critical);
711
color: var(--p-text);
812
color: var(--p-text-subdued);
9-
color: color('ink', 'lighter', #f2ece4);
13+
color: var(--p-text-subdued);
14+
color: var(--p-text-subdued);
15+
color: var(--p-text-on-dark);
16+
color: var(--p-text-subdued-on-dark);
17+
color: var(--p-text-on-dark);
18+
color: var(--p-text-on-dark);
1019
color: var(--p-text);
20+
color: var(--p-text-on-dark);
1121

12-
background: var(--p-surface);
22+
// background
23+
background-color: var(--p-surface-success);
24+
background-color: var(--p-surface-success-subdued);
25+
background-color: var(--p-surface-warning);
26+
background-color: var(--p-surface-warning-subdued);
27+
background-color: var(--p-surface-critical);
28+
background-color: var(--p-surface-critical-subdued);
29+
background-color: var(--p-surface-neutral-subdued-dark);
30+
background-color: var(--p-surface-dark);
31+
background-color: var(--p-surface-neutral);
32+
background-color: var(--p-surface-neutral-subdued);
33+
background-color: var(--p-surface-subdued);
1334
background-color: var(--p-surface-dark);
35+
background-color: var(--p-surface);
36+
37+
// border
38+
border-color: var(--p-border-success);
39+
border-color: var(--p-border-success);
40+
border-color: var(--p-border-success-subdued);
41+
border-color: var(--p-border-success-subdued);
42+
border-color: var(--p-border-warning);
43+
border-color: var(--p-border-warning);
44+
border-color: var(--p-border-warning-disabled);
45+
border-color: var(--p-border-warning-subdued);
46+
border-color: var(--p-border-critical);
47+
border-color: var(--p-border-critical);
48+
border-color: var(--p-border-critical-subdued);
49+
border-color: var(--p-border-critical-subdued);
50+
border-color: var(--p-border);
51+
border-color: var(--p-border-subdued);
52+
53+
// fill
54+
fill: var(--p-icon-success);
55+
fill: var(--p-icon-success);
56+
fill: var(--p-icon-warning);
57+
fill: var(--p-icon-warning);
58+
fill: var(--p-icon-critical);
59+
fill: var(--p-icon-critical);
60+
fill: var(--p-icon);
61+
fill: var(--p-icon);
62+
fill: var(--p-icon-subdued);
63+
fill: var(--p-icon-disabled);
64+
fill: var(--p-icon);
65+
fill: var(--p-icon-on-dark);
66+
67+
// Skip color() with a for-background argument
68+
color: color('ink', 'lighter', #f2ece4);
69+
70+
// Remove color() fallbacks
71+
color: var(--p-text);
1472

15-
border: var(--p-border-width-1) solid var(--p-border-subdued);
16-
border-color: var(--p-border-disabled);
73+
// Handle declarations with multiple values
74+
border: var(--p-border-width-1) solid var(--p-border);
75+
background: border-box var(--p-surface-neutral-subdued);
1776
}

‎polaris-migrator/src/migrations/replace-sass-color/tests/with-namespace.input.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
@use 'global-styles/legacy-polaris-v8';
22

33
.my-class {
4-
// static colors
5-
color: white;
6-
color: black;
7-
8-
// color() function
94
color: legacy-polaris-v8.color('ink');
105
color: legacy-polaris-v8.color('ink', 'lighter');
116
color: legacy-polaris-v8.color('ink', 'lighter', #f2ece4);

‎polaris-migrator/src/migrations/replace-sass-color/tests/with-namespace.output.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
@use 'global-styles/legacy-polaris-v8';
22

33
.my-class {
4-
// static colors
5-
color: white;
6-
color: black;
7-
8-
// color() function
94
color: var(--p-text);
105
color: var(--p-text-subdued);
116
color: legacy-polaris-v8.color('ink', 'lighter', #f2ece4);

0 commit comments

Comments
 (0)