@comicrelief/component-library 8.25.5 → 8.25.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/dist/index.js CHANGED
@@ -412,12 +412,6 @@ Object.defineProperty(exports, "spacing", {
412
412
  return _spacing.default;
413
413
  }
414
414
  });
415
- Object.defineProperty(exports, "srTheme", {
416
- enumerable: true,
417
- get: function () {
418
- return _theme2.default;
419
- }
420
- });
421
415
  Object.defineProperty(exports, "zIndex", {
422
416
  enumerable: true,
423
417
  get: function () {
@@ -425,7 +419,6 @@ Object.defineProperty(exports, "zIndex", {
425
419
  }
426
420
  });
427
421
  var _theme = _interopRequireDefault(require("./theme/crTheme/theme"));
428
- var _theme2 = _interopRequireDefault(require("./theme/srTheme/theme"));
429
422
  var _ThemeProvider = _interopRequireDefault(require("./theme/ThemeProvider"));
430
423
  var _hideVisually = _interopRequireDefault(require("./theme/shared/hideVisually"));
431
424
  var _zIndex = _interopRequireDefault(require("./theme/shared/zIndex"));
@@ -15,11 +15,6 @@ const colors = {
15
15
  coral: '#F9686D',
16
16
  coral_dark: '#961D35',
17
17
  coral_light: '#FFCECE',
18
- cwg_22_blue: '#204794',
19
- cwg_22_orange: '#FB6326',
20
- cwg_22_purple: '#7B3ED3',
21
- cwg_22_red: '#E62731',
22
- cwg_22_yellow: '#F8E928',
23
18
  deep_violet_dark: '#2C0230',
24
19
  deep_violet: '#2C0230' /** Will be removed */,
25
20
  deep_violet_light: '#3e1c43',
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "8.25.5",
4
+ "version": "8.25.7",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  /* Theme */
2
2
  export { default as crTheme } from './theme/crTheme/theme';
3
- export { default as srTheme } from './theme/srTheme/theme';
4
3
  export { default as ThemeProvider } from './theme/ThemeProvider';
5
4
 
6
5
  /* Utils */
@@ -9,11 +9,6 @@ const colors = {
9
9
  coral: '#F9686D',
10
10
  coral_dark: '#961D35',
11
11
  coral_light: '#FFCECE',
12
- cwg_22_blue: '#204794',
13
- cwg_22_orange: '#FB6326',
14
- cwg_22_purple: '#7B3ED3',
15
- cwg_22_red: '#E62731',
16
- cwg_22_yellow: '#F8E928',
17
12
  deep_violet_dark: '#2C0230',
18
13
  deep_violet: '#2C0230' /** Will be removed */,
19
14
  deep_violet_light: '#3e1c43',
@@ -1,205 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _styledComponents = require("styled-components");
9
- var _colors = _interopRequireDefault(require("./colors"));
10
- const buttonColors = {
11
- black: {
12
- background: (0, _colors.default)('black'),
13
- color: (0, _colors.default)('white'),
14
- hoverBackground: (0, _colors.default)('grey'),
15
- hoverColor: (0, _colors.default)('black')
16
- },
17
- blue: {
18
- background: (0, _colors.default)('blue'),
19
- color: (0, _colors.default)('black'),
20
- hoverBackground: (0, _colors.default)('blue_light'),
21
- hoverColor: (0, _colors.default)('black')
22
- },
23
- blue_dark: {
24
- background: (0, _colors.default)('blue_dark'),
25
- color: (0, _colors.default)('white'),
26
- hoverBackground: (0, _colors.default)('blue'),
27
- hoverColor: (0, _colors.default)('black')
28
- },
29
- blue_light: {
30
- background: (0, _colors.default)('blue_light'),
31
- color: (0, _colors.default)('black'),
32
- hoverBackground: (0, _colors.default)('blue_dark'),
33
- hoverColor: (0, _colors.default)('white')
34
- },
35
- coral: {
36
- background: (0, _colors.default)('coral'),
37
- color: (0, _colors.default)('black'),
38
- hoverBackground: (0, _colors.default)('coral_light'),
39
- hoverColor: (0, _colors.default)('black')
40
- },
41
- coral_dark: {
42
- background: (0, _colors.default)('coral_dark'),
43
- color: (0, _colors.default)('white'),
44
- hoverBackground: (0, _colors.default)('coral'),
45
- hoverColor: (0, _colors.default)('black')
46
- },
47
- coral_light: {
48
- background: (0, _colors.default)('coral_light'),
49
- color: (0, _colors.default)('black'),
50
- hoverBackground: (0, _colors.default)('coral_dark'),
51
- hoverColor: (0, _colors.default)('white')
52
- },
53
- green: {
54
- background: (0, _colors.default)('green'),
55
- color: (0, _colors.default)('black'),
56
- hoverBackground: (0, _colors.default)('green_light'),
57
- hoverColor: (0, _colors.default)('black')
58
- },
59
- green_dark: {
60
- background: (0, _colors.default)('green_dark'),
61
- color: (0, _colors.default)('white'),
62
- hoverBackground: (0, _colors.default)('green'),
63
- hoverColor: (0, _colors.default)('black')
64
- },
65
- green_light: {
66
- background: (0, _colors.default)('green_light'),
67
- color: (0, _colors.default)('black'),
68
- hoverBackground: (0, _colors.default)('green_dark'),
69
- hoverColor: (0, _colors.default)('white')
70
- },
71
- grey: {
72
- background: (0, _colors.default)('grey'),
73
- color: (0, _colors.default)('black'),
74
- hoverBackground: (0, _colors.default)('grey_light'),
75
- hoverColor: (0, _colors.default)('black')
76
- },
77
- grey_dark: {
78
- background: (0, _colors.default)('grey_dark'),
79
- color: (0, _colors.default)('white'),
80
- hoverBackground: (0, _colors.default)('grey'),
81
- hoverColor: (0, _colors.default)('black')
82
- },
83
- grey_light: {
84
- background: (0, _colors.default)('grey_light'),
85
- color: (0, _colors.default)('black'),
86
- hoverBackground: (0, _colors.default)('grey_dark'),
87
- hoverColor: (0, _colors.default)('white')
88
- },
89
- magenta: {
90
- background: (0, _colors.default)('magenta'),
91
- color: (0, _colors.default)('black'),
92
- hoverBackground: (0, _colors.default)('magenta_light'),
93
- hoverColor: (0, _colors.default)('black')
94
- },
95
- magenta_dark: {
96
- background: (0, _colors.default)('magenta_dark'),
97
- color: (0, _colors.default)('white'),
98
- hoverBackground: (0, _colors.default)('magenta'),
99
- hoverColor: (0, _colors.default)('black')
100
- },
101
- magenta_light: {
102
- background: (0, _colors.default)('magenta_light'),
103
- color: (0, _colors.default)('black'),
104
- hoverBackground: (0, _colors.default)('magenta_dark'),
105
- hoverColor: (0, _colors.default)('white')
106
- },
107
- orange: {
108
- background: (0, _colors.default)('orange'),
109
- color: (0, _colors.default)('black'),
110
- hoverBackground: (0, _colors.default)('orange_light'),
111
- hoverColor: (0, _colors.default)('black')
112
- },
113
- orange_dark: {
114
- background: (0, _colors.default)('orange_dark'),
115
- color: (0, _colors.default)('white'),
116
- hoverBackground: (0, _colors.default)('orange'),
117
- hoverColor: (0, _colors.default)('black')
118
- },
119
- orange_light: {
120
- background: (0, _colors.default)('orange_light'),
121
- color: (0, _colors.default)('black'),
122
- hoverBackground: (0, _colors.default)('orange_dark'),
123
- hoverColor: (0, _colors.default)('white')
124
- },
125
- purple: {
126
- background: (0, _colors.default)('purple'),
127
- color: (0, _colors.default)('black'),
128
- hoverBackground: (0, _colors.default)('purple_light'),
129
- hoverColor: (0, _colors.default)('black')
130
- },
131
- purple_dark: {
132
- background: (0, _colors.default)('purple_dark'),
133
- color: (0, _colors.default)('white'),
134
- hoverBackground: (0, _colors.default)('purple'),
135
- hoverColor: (0, _colors.default)('black')
136
- },
137
- purple_light: {
138
- background: (0, _colors.default)('purple_light'),
139
- color: (0, _colors.default)('black'),
140
- hoverBackground: (0, _colors.default)('purple_dark'),
141
- hoverColor: (0, _colors.default)('white')
142
- },
143
- red: {
144
- background: (0, _colors.default)('red'),
145
- color: (0, _colors.default)('white'),
146
- hoverBackground: (0, _colors.default)('red_dark'),
147
- hoverColor: (0, _colors.default)('white')
148
- },
149
- teal: {
150
- background: (0, _colors.default)('teal'),
151
- color: (0, _colors.default)('black'),
152
- hoverBackground: (0, _colors.default)('teal_light'),
153
- hoverColor: (0, _colors.default)('black')
154
- },
155
- teal_dark: {
156
- background: (0, _colors.default)('teal_dark'),
157
- color: (0, _colors.default)('white'),
158
- hoverBackground: (0, _colors.default)('teal'),
159
- hoverColor: (0, _colors.default)('black')
160
- },
161
- teal_light: {
162
- background: (0, _colors.default)('teal_light'),
163
- color: (0, _colors.default)('black'),
164
- hoverBackground: (0, _colors.default)('teal_dark'),
165
- hoverColor: (0, _colors.default)('white')
166
- },
167
- transparent: {
168
- background: 'rgba(255, 255, 255, 0.5)',
169
- color: 'inherit',
170
- hoverBackground: 'rgba(255, 255, 255, 0.7)',
171
- hoverColor: 'inherit'
172
- },
173
- white: {
174
- background: (0, _colors.default)('white'),
175
- color: (0, _colors.default)('black'),
176
- hoverBackground: (0, _colors.default)('grey'),
177
- hoverColor: (0, _colors.default)('black')
178
- },
179
- yellow: {
180
- background: (0, _colors.default)('yellow'),
181
- color: (0, _colors.default)('black'),
182
- hoverBackground: (0, _colors.default)('yellow_light'),
183
- hoverColor: (0, _colors.default)('black')
184
- },
185
- yellow_dark: {
186
- background: (0, _colors.default)('yellow_dark'),
187
- color: (0, _colors.default)('white'),
188
- hoverBackground: (0, _colors.default)('yellow'),
189
- hoverColor: (0, _colors.default)('black')
190
- },
191
- yellow_light: {
192
- background: (0, _colors.default)('yellow_light'),
193
- color: (0, _colors.default)('black'),
194
- hoverBackground: (0, _colors.default)('yellow_dark'),
195
- hoverColor: (0, _colors.default)('white')
196
- }
197
- };
198
- var _default = colorName => {
199
- let style = 'inherit';
200
- if (colorName) {
201
- style = (0, _styledComponents.css)(["background-color:", ";color:", ";:hover{background-color:", ";color:", ";}"], buttonColors[colorName].background, buttonColors[colorName].color, buttonColors[colorName].hoverBackground, buttonColors[colorName].hoverColor);
202
- }
203
- return style;
204
- };
205
- exports.default = _default;
@@ -1,59 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- const colors = {
8
- black: '#030e1a',
9
- black_dark: '#030e1a',
10
- blue: '#223c59',
11
- blue_dark: '#3a4972',
12
- blue_donate: '#2042AD',
13
- blue_donate_interact: '#001A85',
14
- blue_light: '#274084',
15
- blue_royal: '#6489FC',
16
- coral: '#FF6F61',
17
- coral_dark: '#961D35',
18
- coral_light: '#FFCECE',
19
- deep_violet_dark: '#2C0230',
20
- deep_violet: '#2C0230' /** Will be removed */,
21
- deep_violet_light: '#3e1c43',
22
- green: '#4ecd57',
23
- green_dark: '#1B651D',
24
- green_light: '#F4F2F4',
25
- grey: '#969598',
26
- grey_dark: '#222222',
27
- grey_extra_light: '#f0f0f0',
28
- grey_for_forms: '#666',
29
- grey_light: '#f4f2f4',
30
- grey_medium: '#E1E2E3',
31
- magenta: '#FC59CE',
32
- magenta_dark: '#821C5D',
33
- magenta_light: '#FEB4DC',
34
- orange: '#FF9635',
35
- orange_dark: '#984316',
36
- orange_light: '#FEE3CC',
37
- purple: '#6F3AAB',
38
- lavender: '#C180F9',
39
- purple_dark: '#48276E',
40
- purple_light: '#DFC6F6',
41
- red: '#e52530',
42
- red_dark: '#e52530',
43
- ruby_dark: '#e7135d',
44
- teal: '#4ECDBE',
45
- teal_dark: '#13767C',
46
- teal_light: '#86E4E9',
47
- white: '#FFFFFF',
48
- white_smoke: '#fbf5f5',
49
- yellow: '#FFE400',
50
- yellow_dark: '#665700',
51
- yellow_light: '#FEFD5A'
52
- };
53
- var _default = colorName => {
54
- if (colorName) {
55
- return colors[colorName];
56
- }
57
- return 'inherit';
58
- };
59
- exports.default = _default;
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- const fontSizes = {
8
- xxs: '0.69375rem',
9
- xs: '0.83125rem',
10
- s: '1rem',
11
- m: '1.2rem',
12
- l: '1.44rem',
13
- xl: '1.725rem',
14
- xxl: '4.125rem',
15
- super: '7.3125rem'
16
- };
17
- var _default = size => {
18
- if (size) {
19
- return fontSizes[size];
20
- }
21
- return '';
22
- };
23
- exports.default = _default;
@@ -1,35 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _styledComponents = require("styled-components");
9
- var _colors = _interopRequireDefault(require("./colors"));
10
- const linkStyles = {
11
- standard: {
12
- color: (0, _colors.default)('black'),
13
- border: "1px solid ".concat((0, _colors.default)('black')),
14
- weight: '700',
15
- paddingBottom: '0.06em',
16
- hoverColor: (0, _colors.default)('black'),
17
- hoverBorder: "2px solid ".concat((0, _colors.default)('black'))
18
- },
19
- standard_white: {
20
- color: (0, _colors.default)('white'),
21
- border: "1px solid ".concat((0, _colors.default)('white')),
22
- weight: 'normal',
23
- paddingBottom: '0.06em',
24
- hoverColor: (0, _colors.default)('white'),
25
- hoverBorder: '1px solid trasparent'
26
- }
27
- };
28
- var _default = (styleName, underline) => {
29
- let style = (0, _styledComponents.css)(["padding-bottom:0.06em;color:", ";border-bottom:solid 1px;border-bottom-color:inherit;font-weight:700;:hover{color:inherit;font-weight:700;}"], (0, _colors.default)('black'));
30
- if (styleName) {
31
- style = (0, _styledComponents.css)(["padding:", ";color:", ";border-bottom:", ";font-weight:", ";:hover{color:", ";border-bottom:", ";font-weight:", ";}"], linkStyles[styleName].padding, linkStyles[styleName].color, underline && linkStyles[styleName].border, linkStyles[styleName].weight, linkStyles[styleName].hoverColor, underline && linkStyles[styleName].hoverBorder, linkStyles[styleName].hoverWeight);
32
- }
33
- return style;
34
- };
35
- exports.default = _default;
@@ -1,26 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.default = void 0;
8
- var _colors = _interopRequireDefault(require("./colors"));
9
- var _buttonColors = _interopRequireDefault(require("./buttonColors"));
10
- var _linkStyles = _interopRequireDefault(require("./linkStyles"));
11
- var _fontSizes = _interopRequireDefault(require("./fontSizes"));
12
- var _allBreakpoints = _interopRequireDefault(require("../shared/allBreakpoints"));
13
- var _fontFamilies = _interopRequireDefault(require("../shared/fontFamilies"));
14
- var _default = exports.default = {
15
- color: _colors.default,
16
- buttonColors: _buttonColors.default,
17
- linkStyles: _linkStyles.default,
18
- fontSize: _fontSizes.default,
19
- allBreakpoints: _allBreakpoints.default,
20
- fontFamilies: _fontFamilies.default,
21
- font: {
22
- regular: 'Founders',
23
- semiBold: 'Founders_semi_bold',
24
- bold: 'Founders_bold'
25
- }
26
- };
@@ -1,206 +0,0 @@
1
- import { css } from 'styled-components';
2
- import color from './colors';
3
-
4
- const buttonColors = {
5
- black: {
6
- background: color('black'),
7
- color: color('white'),
8
- hoverBackground: color('grey'),
9
- hoverColor: color('black')
10
- },
11
- blue: {
12
- background: color('blue'),
13
- color: color('black'),
14
- hoverBackground: color('blue_light'),
15
- hoverColor: color('black')
16
- },
17
- blue_dark: {
18
- background: color('blue_dark'),
19
- color: color('white'),
20
- hoverBackground: color('blue'),
21
- hoverColor: color('black')
22
- },
23
- blue_light: {
24
- background: color('blue_light'),
25
- color: color('black'),
26
- hoverBackground: color('blue_dark'),
27
- hoverColor: color('white')
28
- },
29
- coral: {
30
- background: color('coral'),
31
- color: color('black'),
32
- hoverBackground: color('coral_light'),
33
- hoverColor: color('black')
34
- },
35
- coral_dark: {
36
- background: color('coral_dark'),
37
- color: color('white'),
38
- hoverBackground: color('coral'),
39
- hoverColor: color('black')
40
- },
41
- coral_light: {
42
- background: color('coral_light'),
43
- color: color('black'),
44
- hoverBackground: color('coral_dark'),
45
- hoverColor: color('white')
46
- },
47
- green: {
48
- background: color('green'),
49
- color: color('black'),
50
- hoverBackground: color('green_light'),
51
- hoverColor: color('black')
52
- },
53
- green_dark: {
54
- background: color('green_dark'),
55
- color: color('white'),
56
- hoverBackground: color('green'),
57
- hoverColor: color('black')
58
- },
59
- green_light: {
60
- background: color('green_light'),
61
- color: color('black'),
62
- hoverBackground: color('green_dark'),
63
- hoverColor: color('white')
64
- },
65
- grey: {
66
- background: color('grey'),
67
- color: color('black'),
68
- hoverBackground: color('grey_light'),
69
- hoverColor: color('black')
70
- },
71
- grey_dark: {
72
- background: color('grey_dark'),
73
- color: color('white'),
74
- hoverBackground: color('grey'),
75
- hoverColor: color('black')
76
- },
77
- grey_light: {
78
- background: color('grey_light'),
79
- color: color('black'),
80
- hoverBackground: color('grey_dark'),
81
- hoverColor: color('white')
82
- },
83
- magenta: {
84
- background: color('magenta'),
85
- color: color('black'),
86
- hoverBackground: color('magenta_light'),
87
- hoverColor: color('black')
88
- },
89
- magenta_dark: {
90
- background: color('magenta_dark'),
91
- color: color('white'),
92
- hoverBackground: color('magenta'),
93
- hoverColor: color('black')
94
- },
95
- magenta_light: {
96
- background: color('magenta_light'),
97
- color: color('black'),
98
- hoverBackground: color('magenta_dark'),
99
- hoverColor: color('white')
100
- },
101
- orange: {
102
- background: color('orange'),
103
- color: color('black'),
104
- hoverBackground: color('orange_light'),
105
- hoverColor: color('black')
106
- },
107
- orange_dark: {
108
- background: color('orange_dark'),
109
- color: color('white'),
110
- hoverBackground: color('orange'),
111
- hoverColor: color('black')
112
- },
113
- orange_light: {
114
- background: color('orange_light'),
115
- color: color('black'),
116
- hoverBackground: color('orange_dark'),
117
- hoverColor: color('white')
118
- },
119
- purple: {
120
- background: color('purple'),
121
- color: color('black'),
122
- hoverBackground: color('purple_light'),
123
- hoverColor: color('black')
124
- },
125
- purple_dark: {
126
- background: color('purple_dark'),
127
- color: color('white'),
128
- hoverBackground: color('purple'),
129
- hoverColor: color('black')
130
- },
131
- purple_light: {
132
- background: color('purple_light'),
133
- color: color('black'),
134
- hoverBackground: color('purple_dark'),
135
- hoverColor: color('white')
136
- },
137
- red: {
138
- background: color('red'),
139
- color: color('white'),
140
- hoverBackground: color('red_dark'),
141
- hoverColor: color('white')
142
- },
143
- teal: {
144
- background: color('teal'),
145
- color: color('black'),
146
- hoverBackground: color('teal_light'),
147
- hoverColor: color('black')
148
- },
149
- teal_dark: {
150
- background: color('teal_dark'),
151
- color: color('white'),
152
- hoverBackground: color('teal'),
153
- hoverColor: color('black')
154
- },
155
- teal_light: {
156
- background: color('teal_light'),
157
- color: color('black'),
158
- hoverBackground: color('teal_dark'),
159
- hoverColor: color('white')
160
- },
161
- transparent: {
162
- background: 'rgba(255, 255, 255, 0.5)',
163
- color: 'inherit',
164
- hoverBackground: 'rgba(255, 255, 255, 0.7)',
165
- hoverColor: 'inherit'
166
- },
167
- white: {
168
- background: color('white'),
169
- color: color('black'),
170
- hoverBackground: color('grey'),
171
- hoverColor: color('black')
172
- },
173
- yellow: {
174
- background: color('yellow'),
175
- color: color('black'),
176
- hoverBackground: color('yellow_light'),
177
- hoverColor: color('black')
178
- },
179
- yellow_dark: {
180
- background: color('yellow_dark'),
181
- color: color('white'),
182
- hoverBackground: color('yellow'),
183
- hoverColor: color('black')
184
- },
185
- yellow_light: {
186
- background: color('yellow_light'),
187
- color: color('black'),
188
- hoverBackground: color('yellow_dark'),
189
- hoverColor: color('white')
190
- }
191
- };
192
-
193
- export default colorName => {
194
- let style = 'inherit';
195
- if (colorName) {
196
- style = css`
197
- background-color: ${buttonColors[colorName].background};
198
- color: ${buttonColors[colorName].color};
199
- :hover {
200
- background-color: ${buttonColors[colorName].hoverBackground};
201
- color: ${buttonColors[colorName].hoverColor};
202
- }
203
- `;
204
- }
205
- return style;
206
- };
@@ -1,53 +0,0 @@
1
- const colors = {
2
- black: '#030e1a',
3
- black_dark: '#030e1a',
4
- blue: '#223c59',
5
- blue_dark: '#3a4972',
6
- blue_donate: '#2042AD',
7
- blue_donate_interact: '#001A85',
8
- blue_light: '#274084',
9
- blue_royal: '#6489FC',
10
- coral: '#FF6F61',
11
- coral_dark: '#961D35',
12
- coral_light: '#FFCECE',
13
- deep_violet_dark: '#2C0230',
14
- deep_violet: '#2C0230' /** Will be removed */,
15
- deep_violet_light: '#3e1c43',
16
- green: '#4ecd57',
17
- green_dark: '#1B651D',
18
- green_light: '#F4F2F4',
19
- grey: '#969598',
20
- grey_dark: '#222222',
21
- grey_extra_light: '#f0f0f0',
22
- grey_for_forms: '#666',
23
- grey_light: '#f4f2f4',
24
- grey_medium: '#E1E2E3',
25
- magenta: '#FC59CE',
26
- magenta_dark: '#821C5D',
27
- magenta_light: '#FEB4DC',
28
- orange: '#FF9635',
29
- orange_dark: '#984316',
30
- orange_light: '#FEE3CC',
31
- purple: '#6F3AAB',
32
- lavender: '#C180F9',
33
- purple_dark: '#48276E',
34
- purple_light: '#DFC6F6',
35
- red: '#e52530',
36
- red_dark: '#e52530',
37
- ruby_dark: '#e7135d',
38
- teal: '#4ECDBE',
39
- teal_dark: '#13767C',
40
- teal_light: '#86E4E9',
41
- white: '#FFFFFF',
42
- white_smoke: '#fbf5f5',
43
- yellow: '#FFE400',
44
- yellow_dark: '#665700',
45
- yellow_light: '#FEFD5A'
46
- };
47
-
48
- export default colorName => {
49
- if (colorName) {
50
- return colors[colorName];
51
- }
52
- return 'inherit';
53
- };
@@ -1,17 +0,0 @@
1
- const fontSizes = {
2
- xxs: '0.69375rem',
3
- xs: '0.83125rem',
4
- s: '1rem',
5
- m: '1.2rem',
6
- l: '1.44rem',
7
- xl: '1.725rem',
8
- xxl: '4.125rem',
9
- super: '7.3125rem'
10
- };
11
-
12
- export default size => {
13
- if (size) {
14
- return fontSizes[size];
15
- }
16
- return '';
17
- };
@@ -1,51 +0,0 @@
1
- import { css } from 'styled-components';
2
- import color from './colors';
3
-
4
- const linkStyles = {
5
- standard: {
6
- color: color('black'),
7
- border: `1px solid ${color('black')}`,
8
- weight: '700',
9
- paddingBottom: '0.06em',
10
- hoverColor: color('black'),
11
- hoverBorder: `2px solid ${color('black')}`
12
- },
13
- standard_white: {
14
- color: color('white'),
15
- border: `1px solid ${color('white')}`,
16
- weight: 'normal',
17
- paddingBottom: '0.06em',
18
- hoverColor: color('white'),
19
- hoverBorder: '1px solid trasparent'
20
- }
21
- };
22
-
23
- export default (styleName, underline) => {
24
- let style = css`
25
- padding-bottom: 0.06em;
26
- color: ${color('black')};
27
- border-bottom: solid 1px;
28
- border-bottom-color: inherit;
29
- font-weight: 700;
30
- :hover {
31
- color: inherit;
32
- font-weight: 700;
33
- }
34
- `;
35
-
36
- if (styleName) {
37
- style = css`
38
- padding: ${linkStyles[styleName].padding};
39
- color: ${linkStyles[styleName].color};
40
- border-bottom: ${underline && linkStyles[styleName].border};
41
- font-weight: ${linkStyles[styleName].weight};
42
- :hover {
43
- color: ${linkStyles[styleName].hoverColor};
44
- border-bottom: ${underline && linkStyles[styleName].hoverBorder};
45
- font-weight: ${linkStyles[styleName].hoverWeight};
46
- }
47
- `;
48
- }
49
-
50
- return style;
51
- };
@@ -1,20 +0,0 @@
1
- import color from './colors';
2
- import buttonColors from './buttonColors';
3
- import linkStyles from './linkStyles';
4
- import fontSize from './fontSizes';
5
- import allBreakpoints from '../shared/allBreakpoints';
6
- import fontFamilies from '../shared/fontFamilies';
7
-
8
- export default {
9
- color,
10
- buttonColors,
11
- linkStyles,
12
- fontSize,
13
- allBreakpoints,
14
- fontFamilies,
15
- font: {
16
- regular: 'Founders',
17
- semiBold: 'Founders_semi_bold',
18
- bold: 'Founders_bold'
19
- }
20
- };