Skip to content

Commit aba148b

Browse files
rroppolorroppolo
authored
UIDS-501 Export color variables for use in js (#504)
1 parent 728d677 commit aba148b

File tree

7 files changed

+1188
-554
lines changed

7 files changed

+1188
-554
lines changed

‎jest.config.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ module.exports = {
7878
// A map from regular expressions to module names that allow to stub out resources with a single module
7979
moduleNameMapper: {
8080
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|mdx)$": "<rootDir>/spec/__mocks__/fileMock.js",
81-
'\\.(css|less|scss)$': '<rootDir>/spec/__mocks__/styleMock.js',
81+
'\\.(?:(?!variables).)+.(css|less|scss)$': '<rootDir>/spec/__mocks__/styleMock.js',
8282
'^src/([^\\.]*)$': "<rootDir>/src/$1",
8383
},
8484

@@ -136,7 +136,7 @@ module.exports = {
136136
// snapshotSerializers: [],
137137

138138
// The test environment that will be used for testing
139-
// testEnvironment: "jest-environment-jsdom",
139+
testEnvironment: "jest-environment-jsdom",
140140

141141
// Options that will be passed to the testEnvironment
142142
// testEnvironmentOptions: {},
@@ -171,6 +171,11 @@ module.exports = {
171171

172172
// A map from regular expressions to paths to transformers
173173
// transform: null,
174+
"transform": {
175+
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
176+
// transform exported scss variables for use in javascript
177+
"variables.scss$": "<rootDir>/node_modules/jest-css-modules-transform"
178+
},
174179

175180
// An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
176181
// transformIgnorePatterns: [

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
"@testing-library/react-hooks": "^3.2.1",
8585
"@testing-library/user-event": "^13.5.0",
8686
"babel-eslint": "^10.0.3",
87+
"babel-jest": "^27.4.6",
8788
"babel-loader": "^8.0.6",
8889
"babel-plugin-module-resolver": "^4.0.0",
8990
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
@@ -103,7 +104,8 @@
103104
"eslint-plugin-react": "^7.18.3",
104105
"eslint-plugin-react-hooks": "^2.5.1",
105106
"eslint-utils": "^1.4.3",
106-
"jest": "^26.6.3",
107+
"jest": "^27.4.6",
108+
"jest-css-modules-transform": "^4.3.0",
107109
"node-sass": "^4.14.1",
108110
"nodemon": "^2.0.15",
109111
"prop-types": "^15.6.1",

‎scss/colors/palette.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
// When updating this file, please consider the values in src/Styles/palette.js
1+
// When updating this file, please export the color variable in variables.scss
2+
// so it is available in src/Styles/palette.js
23

34
$ux-black: #000000;
45
$ux-blue: #3F6DCA;
@@ -35,11 +36,11 @@ $ux-blue-800: #0B2D72;
3536
$ux-blue-900: #031D52;
3637

3738
$ux-emerald-100: #BFDDD5;
38-
$ux-emerald-200: #91CABB;
39+
$ux-emerald-200: #91CABB;
3940
$ux-emerald-300: #65B8A2;
4041
$ux-emerald-400: #3EA388;
4142
$ux-emerald-500: $ux-emerald;
42-
$ux-emerald-600: #177863;
43+
$ux-emerald-600: #177863;
4344
$ux-emerald-700: #156152;
4445
$ux-emerald-800: #0D4A3E;
4546
$ux-emerald-900: #073B31;
@@ -108,15 +109,15 @@ $ux-sand-100: #ECE1D4;
108109
$ux-sand-200: #E8DAC9;
109110
$ux-sand-300: #E5D2BD;
110111
$ux-sand-400: #DFC7AF;
111-
$ux-sand-500: $ux-sand;
112+
$ux-sand-500: $ux-sand;
112113
$ux-sand-600: #D4B191;
113114
$ux-sand-700: #CFAA86;
114115
$ux-sand-800: #C59B72;
115116
$ux-sand-900: #BA8E5E;
116117

117118
$ux-teal-100: #CAE1E2;
118119
$ux-teal-200: #A2CBCD;
119-
$ux-teal-300: #85A9AA;
120+
$ux-teal-300: #85A9AA;
120121
$ux-teal-400: #408F91;
121122
$ux-teal-500: #2A7779;
122123
$ux-teal-600: #1C5D5F;

‎scss/variables.scss‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
@import './colors/palette';
2+
3+
:export {
4+
UX_BLACK: $ux-black;
5+
UX_BLUE: $ux-blue;
6+
UX_CREAM: $ux-cream;
7+
UX_EMERALD: $ux-emerald;
8+
UX_GRAY: $ux-gray;
9+
UX_GREEN: $ux-green;
10+
UX_NAVY: $ux-navy;
11+
UX_ORANGE: $ux-orange;
12+
UX_PURPLE: $ux-purple;
13+
UX_RED: $ux-red;
14+
UX_SAND: $ux-sand;
15+
UX_TEAL: $ux-teal;
16+
UX_YELLOW: $ux-yellow;
17+
UX_WHITE: $ux-white;
18+
UX_BLUE_100: $ux-blue-100;
19+
UX_BLUE_200: $ux-blue-200;
20+
UX_BLUE_300: $ux-blue-300;
21+
UX_BLUE_400: $ux-blue-400;
22+
UX_BLUE_500: $ux-blue;
23+
UX_BLUE_600: $ux-blue-600;
24+
UX_BLUE_700: $ux-blue-700;
25+
UX_BLUE_800: $ux-blue-800;
26+
UX_BLUE_900: $ux-blue-900;
27+
28+
UX_EMERALD_100: $ux-emerald-100;
29+
UX_EMERALD_200: $ux-emerald-200;
30+
UX_EMERALD_300: $ux-emerald-300;
31+
UX_EMERALD_400: $ux-emerald-400;
32+
UX_EMERALD_500: $ux-emerald;
33+
UX_EMERALD_600: $ux-emerald-600;
34+
UX_EMERALD_700: $ux-emerald-700;
35+
UX_EMERALD_800: $ux-emerald-800;
36+
UX_EMERALD_900: $ux-emerald-900;
37+
38+
UX_GRAY_100: $ux-gray-100;
39+
UX_GRAY_200: $ux-gray-200;
40+
UX_GRAY_300: $ux-gray-300;
41+
UX_GRAY_400: $ux-gray-400;
42+
UX_GRAY_500: $ux-gray;
43+
UX_GRAY_600: $ux-gray-600;
44+
UX_GRAY_700: $ux-gray-700;
45+
UX_GRAY_800: $ux-gray-800;
46+
UX_GRAY_900: $ux-gray-900;
47+
48+
UX_GREEN_100: $ux-green-100;
49+
UX_GREEN_200: $ux-green-200;
50+
UX_GREEN_300: $ux-green-300;
51+
UX_GREEN_400: $ux-green-400;
52+
UX_GREEN_500: $ux-green;
53+
UX_GREEN_600: $ux-green-600;
54+
UX_GREEN_700: $ux-green-700;
55+
UX_GREEN_800: $ux-green-800;
56+
UX_GREEN_900: $ux-green-900;
57+
58+
UX_NAVY_100: $ux-navy-100;
59+
UX_NAVY_200: $ux-navy-200;
60+
UX_NAVY_300: $ux-navy-300;
61+
UX_NAVY_400: $ux-navy-400;
62+
UX_NAVY_500: $ux-navy;
63+
UX_NAVY_600: $ux-navy-600;
64+
UX_NAVY_700: $ux-navy-700;
65+
UX_NAVY_800: $ux-navy-800;
66+
UX_NAVY_900: $ux-navy-900;
67+
68+
UX_NEUTRAL_100: $ux-white;
69+
UX_NEUTRAL_200: $ux-cream;
70+
UX_NEUTRAL_300: $ux-neutral-300;
71+
UX_NEUTRAL_400: $ux-neutral-400;
72+
UX_NEUTRAL_500: $ux-neutral-500;
73+
UX_NEUTRAL_600: $ux-neutral-600;
74+
UX_NEUTRAL_700: $ux-neutral-700;
75+
UX_NEUTRAL_800: $ux-neutral-800;
76+
UX_NEUTRAL_900: $ux-black;
77+
78+
UX_ORANGE_100: $ux-orange-100;
79+
UX_ORANGE_200: $ux-orange-200;
80+
UX_ORANGE_300: $ux-orange-300;
81+
UX_ORANGE_400: $ux-orange-400;
82+
UX_ORANGE_500: $ux-orange;
83+
UX_ORANGE_600: $ux-orange-600;
84+
UX_ORANGE_700: $ux-orange-700;
85+
UX_ORANGE_800: $ux-orange-800;
86+
UX_ORANGE_900: $ux-orange-900;
87+
88+
UX_RED_100: $ux-red-100;
89+
UX_RED_200: $ux-red-200;
90+
UX_RED_300: $ux-red-300;
91+
UX_RED_400: $ux-red-400;
92+
UX_RED_500: $ux-red;
93+
UX_RED_600: $ux-red-600;
94+
UX_RED_700: $ux-red-700;
95+
UX_RED_800: $ux-red-800;
96+
UX_RED_900: $ux-red-900;
97+
98+
UX_SAND_100: $ux-sand-100;
99+
UX_SAND_200: $ux-sand-200;
100+
UX_SAND_300: $ux-sand-300;
101+
UX_SAND_400: $ux-sand-400;
102+
UX_SAND_500: $ux-sand;
103+
UX_SAND_600: $ux-sand-600;
104+
UX_SAND_700: $ux-sand-700;
105+
UX_SAND_800: $ux-sand-800;
106+
UX_SAND_900: $ux-sand-900;
107+
108+
UX_TEAL_100: $ux-teal-100;
109+
UX_TEAL_200: $ux-teal-200;
110+
UX_TEAL_300: $ux-teal-300;
111+
UX_TEAL_400: $ux-teal-400;
112+
UX_TEAL_500: $ux-teal-500;
113+
UX_TEAL_600: $ux-teal-600;
114+
UX_TEAL_700: $ux-teal;
115+
UX_TEAL_800: $ux-teal-800;
116+
UX_TEAL_900: $ux-teal-900;
117+
118+
UX_YELLOW_100: $ux-yellow-100;
119+
UX_YELLOW_200: $ux-yellow-200;
120+
UX_YELLOW_300: $ux-yellow-300;
121+
UX_YELLOW_400: $ux-yellow-400;
122+
UX_YELLOW_500: $ux-yellow;
123+
UX_YELLOW_600: $ux-yellow-600;
124+
UX_YELLOW_700: $ux-yellow-700;
125+
UX_YELLOW_800: $ux-yellow-800;
126+
UX_YELLOW_900: $ux-yellow-900;
127+
}

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8954,7 +8954,7 @@ exports[`Storyshots Design System/Styles/Color Palette Green 1`] = `
89548954
<div
89558955
style={
89568956
Object {
8957-
"backgroundColor": "#21B36C",
8957+
"backgroundColor": "#04713C",
89588958
"flexBasis": "11%",
89598959
"height": "100%",
89608960
}
@@ -8976,7 +8976,7 @@ exports[`Storyshots Design System/Styles/Color Palette Green 1`] = `
89768976
UX_GREEN_500
89778977
</div>
89788978
<div>
8979-
#21B36C
8979+
#04713C
89808980
</div>
89818981
</p>
89828982
</div>
@@ -9236,7 +9236,7 @@ exports[`Storyshots Design System/Styles/Color Palette Navy 1`] = `
92369236
<div
92379237
style={
92389238
Object {
9239-
"backgroundColor": "#234574",
9239+
"backgroundColor": "#011936",
92409240
"flexBasis": "11%",
92419241
"height": "100%",
92429242
}
@@ -9258,7 +9258,7 @@ exports[`Storyshots Design System/Styles/Color Palette Navy 1`] = `
92589258
UX_NAVY_500
92599259
</div>
92609260
<div>
9261-
#234574
9261+
#011936
92629262
</div>
92639263
</p>
92649264
</div>
@@ -9916,7 +9916,7 @@ exports[`Storyshots Design System/Styles/Color Palette Orange 1`] = `
99169916
<div
99179917
style={
99189918
Object {
9919-
"backgroundColor": "#653B05",
9919+
"backgroundColor": "#3D2200",
99209920
"flexBasis": "11%",
99219921
"height": "100%",
99229922
}
@@ -9938,7 +9938,7 @@ exports[`Storyshots Design System/Styles/Color Palette Orange 1`] = `
99389938
UX_ORANGE_900
99399939
</div>
99409940
<div>
9941-
#653B05
9941+
#3D2200
99429942
</div>
99439943
</p>
99449944
</div>
@@ -10198,7 +10198,7 @@ exports[`Storyshots Design System/Styles/Color Palette Red 1`] = `
1019810198
<div
1019910199
style={
1020010200
Object {
10201-
"backgroundColor": "#851414",
10201+
"backgroundColor": "#470404",
1020210202
"flexBasis": "11%",
1020310203
"height": "100%",
1020410204
}
@@ -10220,7 +10220,7 @@ exports[`Storyshots Design System/Styles/Color Palette Red 1`] = `
1022010220
UX_RED_900
1022110221
</div>
1022210222
<div>
10223-
#851414
10223+
#470404
1022410224
</div>
1022510225
</p>
1022610226
</div>

0 commit comments

Comments
 (0)