@codacy/ui-components 0.65.52 → 0.65.53

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.
@@ -1,162 +1,111 @@
1
- export declare const baseColors: {
2
- 'blue-99': string;
3
- 'blue-95': string;
4
- 'blue-90': string;
5
- 'blue-80': string;
6
- 'blue-70': string;
7
- 'blue-60': string;
8
- 'blue-50': string;
9
- 'blue-40': string;
10
- 'blue-30': string;
11
- 'blue-20': string;
12
- 'blue-10': string;
13
- 'orange-99': string;
14
- 'orange-95': string;
15
- 'orange-90': string;
16
- 'orange-80': string;
17
- 'orange-70': string;
18
- 'orange-60': string;
19
- 'orange-50': string;
20
- 'orange-40': string;
21
- 'orange-30': string;
22
- 'orange-20': string;
23
- 'orange-10': string;
24
- 'purple-99': string;
25
- 'purple-95': string;
26
- 'purple-90': string;
27
- 'purple-80': string;
28
- 'purple-70': string;
29
- 'purple-60': string;
30
- 'purple-50': string;
31
- 'purple-40': string;
32
- 'purple-30': string;
33
- 'purple-20': string;
34
- 'purple-10': string;
35
- 'grey-99': string;
36
- 'grey-95': string;
37
- 'grey-90': string;
38
- 'grey-80': string;
39
- 'grey-70': string;
40
- 'grey-60': string;
41
- 'grey-50': string;
42
- 'grey-40': string;
43
- 'grey-30': string;
44
- 'grey-20': string;
45
- 'grey-10': string;
46
- white: string;
47
- 'red-99': string;
48
- 'red-95': string;
49
- 'red-90': string;
50
- 'red-80': string;
51
- 'red-70': string;
52
- 'red-60': string;
53
- 'red-50': string;
54
- 'red-40': string;
55
- 'red-30': string;
56
- 'red-20': string;
57
- 'red-10': string;
58
- 'green-99': string;
59
- 'green-95': string;
60
- 'green-90': string;
61
- 'green-80': string;
62
- 'green-70': string;
63
- 'green-60': string;
64
- 'green-50': string;
65
- 'green-40': string;
66
- 'green-30': string;
67
- 'green-20': string;
68
- 'green-10': string;
69
- 'yellow-99': string;
70
- 'yellow-95': string;
71
- 'yellow-90': string;
72
- 'yellow-80': string;
73
- 'yellow-70': string;
74
- 'yellow-60': string;
75
- 'yellow-50': string;
76
- 'yellow-40': string;
77
- 'yellow-30': string;
78
- 'yellow-20': string;
79
- 'yellow-10': string;
1
+ export declare const colorNames: readonly ["blue", "grey", "purple", "orange", "turquoise", "magenta", "red", "green", "yellow"];
2
+ declare type ColorName = (typeof colorNames)[number];
3
+ declare type ColorNumber = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 99;
4
+ declare type ColorType = {
5
+ [key in `${ColorName}-${ColorNumber}` | 'white']: string;
80
6
  };
7
+ export declare const baseColors: ColorType;
81
8
  export declare const functionalColorsFx: (colors: {
82
9
  white: string;
83
- "blue-99": string;
84
- "blue-95": string;
85
- "blue-90": string;
86
- "blue-80": string;
87
- "blue-70": string;
88
- "blue-60": string;
89
- "blue-50": string;
90
- "blue-40": string;
91
- "blue-30": string;
92
- "blue-20": string;
93
10
  "blue-10": string;
94
- "orange-99": string;
95
- "orange-95": string;
96
- "orange-90": string;
97
- "orange-80": string;
98
- "orange-70": string;
99
- "orange-60": string;
100
- "orange-50": string;
101
- "orange-40": string;
102
- "orange-30": string;
103
- "orange-20": string;
11
+ "blue-20": string;
12
+ "blue-30": string;
13
+ "blue-40": string;
14
+ "blue-50": string;
15
+ "blue-60": string;
16
+ "blue-70": string;
17
+ "blue-80": string;
18
+ "blue-90": string;
19
+ "blue-95": string;
20
+ "blue-99": string;
21
+ "green-10": string;
22
+ "green-20": string;
23
+ "green-30": string;
24
+ "green-40": string;
25
+ "green-50": string;
26
+ "green-60": string;
27
+ "green-70": string;
28
+ "green-80": string;
29
+ "green-90": string;
30
+ "green-95": string;
31
+ "green-99": string;
32
+ "grey-10": string;
33
+ "grey-20": string;
34
+ "grey-30": string;
35
+ "grey-40": string;
36
+ "grey-50": string;
37
+ "grey-60": string;
38
+ "grey-70": string;
39
+ "grey-80": string;
40
+ "grey-90": string;
41
+ "grey-95": string;
42
+ "grey-99": string;
43
+ "magenta-10": string;
44
+ "magenta-20": string;
45
+ "magenta-30": string;
46
+ "magenta-40": string;
47
+ "magenta-50": string;
48
+ "magenta-60": string;
49
+ "magenta-70": string;
50
+ "magenta-80": string;
51
+ "magenta-90": string;
52
+ "magenta-95": string;
53
+ "magenta-99": string;
104
54
  "orange-10": string;
105
- "purple-99": string;
106
- "purple-95": string;
107
- "purple-90": string;
108
- "purple-80": string;
109
- "purple-70": string;
110
- "purple-60": string;
111
- "purple-50": string;
112
- "purple-40": string;
113
- "purple-30": string;
114
- "purple-20": string;
55
+ "orange-20": string;
56
+ "orange-30": string;
57
+ "orange-40": string;
58
+ "orange-50": string;
59
+ "orange-60": string;
60
+ "orange-70": string;
61
+ "orange-80": string;
62
+ "orange-90": string;
63
+ "orange-95": string;
64
+ "orange-99": string;
115
65
  "purple-10": string;
116
- "grey-99": string;
117
- "grey-95": string;
118
- "grey-90": string;
119
- "grey-80": string;
120
- "grey-70": string;
121
- "grey-60": string;
122
- "grey-50": string;
123
- "grey-40": string;
124
- "grey-30": string;
125
- "grey-20": string;
126
- "grey-10": string;
127
- "red-99": string;
128
- "red-95": string;
129
- "red-90": string;
130
- "red-80": string;
131
- "red-70": string;
132
- "red-60": string;
133
- "red-50": string;
134
- "red-40": string;
135
- "red-30": string;
136
- "red-20": string;
66
+ "purple-20": string;
67
+ "purple-30": string;
68
+ "purple-40": string;
69
+ "purple-50": string;
70
+ "purple-60": string;
71
+ "purple-70": string;
72
+ "purple-80": string;
73
+ "purple-90": string;
74
+ "purple-95": string;
75
+ "purple-99": string;
137
76
  "red-10": string;
138
- "green-99": string;
139
- "green-95": string;
140
- "green-90": string;
141
- "green-80": string;
142
- "green-70": string;
143
- "green-60": string;
144
- "green-50": string;
145
- "green-40": string;
146
- "green-30": string;
147
- "green-20": string;
148
- "green-10": string;
149
- "yellow-99": string;
150
- "yellow-95": string;
151
- "yellow-90": string;
152
- "yellow-80": string;
153
- "yellow-70": string;
154
- "yellow-60": string;
155
- "yellow-50": string;
156
- "yellow-40": string;
157
- "yellow-30": string;
158
- "yellow-20": string;
77
+ "red-20": string;
78
+ "red-30": string;
79
+ "red-40": string;
80
+ "red-50": string;
81
+ "red-60": string;
82
+ "red-70": string;
83
+ "red-80": string;
84
+ "red-90": string;
85
+ "red-95": string;
86
+ "red-99": string;
87
+ "turquoise-10": string;
88
+ "turquoise-20": string;
89
+ "turquoise-30": string;
90
+ "turquoise-40": string;
91
+ "turquoise-50": string;
92
+ "turquoise-60": string;
93
+ "turquoise-70": string;
94
+ "turquoise-80": string;
95
+ "turquoise-90": string;
96
+ "turquoise-95": string;
97
+ "turquoise-99": string;
159
98
  "yellow-10": string;
99
+ "yellow-20": string;
100
+ "yellow-30": string;
101
+ "yellow-40": string;
102
+ "yellow-50": string;
103
+ "yellow-60": string;
104
+ "yellow-70": string;
105
+ "yellow-80": string;
106
+ "yellow-90": string;
107
+ "yellow-95": string;
108
+ "yellow-99": string;
160
109
  }) => {
161
110
  'brand-primary': string;
162
111
  'brand-hover': string;
@@ -198,26 +147,11 @@ export declare const functionalColorsFx: (colors: {
198
147
  'text-tertiary': string;
199
148
  'text-inverted': string;
200
149
  'text-disabled': string;
201
- 'text-danger': string;
202
- 'text-success': string;
203
- 'text-warning': string;
204
- 'text-info': string;
205
- 'text-attention': string;
206
150
  'background-primary': string;
207
151
  'background-secondary': string;
208
152
  'background-brand': string;
209
153
  'background-subtle': string;
210
- 'background-danger': string;
211
- 'background-success': string;
212
- 'background-warning': string;
213
- 'background-info': string;
214
- 'background-attention': string;
215
154
  'border-primary': string;
216
- 'border-danger': string;
217
- 'border-success': string;
218
- 'border-info': string;
219
- 'border-warning': string;
220
- 'border-attention': string;
221
155
  'border-brand-primary': string;
222
156
  'border-brand-hover': string;
223
157
  'border-brand-pressed': string;
@@ -231,14 +165,29 @@ export declare const functionalColorsFx: (colors: {
231
165
  'icon-brand-enabled': string;
232
166
  'icon-brand-hover': string;
233
167
  'icon-brand-disabled': string;
234
- 'icon-danger': string;
235
- 'icon-success': string;
236
- 'icon-warning': string;
237
- 'icon-info': string;
238
- 'icon-attention': string;
239
168
  'icon-inverted': string;
169
+ "background-success": string;
170
+ "background-danger": string;
171
+ "background-warning": string;
172
+ "background-info": string;
173
+ "background-attention": string;
174
+ "border-success": string;
175
+ "border-danger": string;
176
+ "border-warning": string;
177
+ "border-info": string;
178
+ "border-attention": string;
179
+ "text-success": string;
180
+ "text-danger": string;
181
+ "text-warning": string;
182
+ "text-info": string;
183
+ "text-attention": string;
184
+ "icon-success": string;
185
+ "icon-danger": string;
186
+ "icon-warning": string;
187
+ "icon-info": string;
188
+ "icon-attention": string;
240
189
  };
241
- declare const functionalColors: {
190
+ export declare const functionalColors: {
242
191
  'brand-primary': string;
243
192
  'brand-hover': string;
244
193
  'brand-pressed': string;
@@ -279,26 +228,11 @@ declare const functionalColors: {
279
228
  'text-tertiary': string;
280
229
  'text-inverted': string;
281
230
  'text-disabled': string;
282
- 'text-danger': string;
283
- 'text-success': string;
284
- 'text-warning': string;
285
- 'text-info': string;
286
- 'text-attention': string;
287
231
  'background-primary': string;
288
232
  'background-secondary': string;
289
233
  'background-brand': string;
290
234
  'background-subtle': string;
291
- 'background-danger': string;
292
- 'background-success': string;
293
- 'background-warning': string;
294
- 'background-info': string;
295
- 'background-attention': string;
296
235
  'border-primary': string;
297
- 'border-danger': string;
298
- 'border-success': string;
299
- 'border-info': string;
300
- 'border-warning': string;
301
- 'border-attention': string;
302
236
  'border-brand-primary': string;
303
237
  'border-brand-hover': string;
304
238
  'border-brand-pressed': string;
@@ -312,12 +246,27 @@ declare const functionalColors: {
312
246
  'icon-brand-enabled': string;
313
247
  'icon-brand-hover': string;
314
248
  'icon-brand-disabled': string;
315
- 'icon-danger': string;
316
- 'icon-success': string;
317
- 'icon-warning': string;
318
- 'icon-info': string;
319
- 'icon-attention': string;
320
249
  'icon-inverted': string;
250
+ "background-success": string;
251
+ "background-danger": string;
252
+ "background-warning": string;
253
+ "background-info": string;
254
+ "background-attention": string;
255
+ "border-success": string;
256
+ "border-danger": string;
257
+ "border-warning": string;
258
+ "border-info": string;
259
+ "border-attention": string;
260
+ "text-success": string;
261
+ "text-danger": string;
262
+ "text-warning": string;
263
+ "text-info": string;
264
+ "text-attention": string;
265
+ "icon-success": string;
266
+ "icon-danger": string;
267
+ "icon-warning": string;
268
+ "icon-info": string;
269
+ "icon-attention": string;
321
270
  };
322
271
  export declare type BaseColor = keyof typeof baseColors;
323
272
  export declare type FunctionalColor = keyof typeof functionalColors;
@@ -4,98 +4,84 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.functionalColorsFx = exports.codacyThemeColors = exports.baseColors = void 0;
7
+ exports.functionalColorsFx = exports.functionalColors = exports.colorNames = exports.codacyThemeColors = exports.baseColors = void 0;
8
8
  var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
9
- var baseColors = exports.baseColors = {
10
- // BLUE - Quality
11
- 'blue-99': '#F0F6FF',
12
- 'blue-95': '#E5EFFF',
13
- 'blue-90': '#DBE9FF',
14
- 'blue-80': '#C2D9FF',
15
- 'blue-70': '#94BDFF',
16
- 'blue-60': '#608BFF',
17
- 'blue-50': '#3172FC',
18
- 'blue-40': '#0061FA',
19
- 'blue-30': '#004AC2',
20
- 'blue-20': '#004AC2',
21
- 'blue-10': '#00174A',
22
- // ORANGE - Security
23
- 'orange-99': '#FFFCFA',
24
- 'orange-95': '#FFF2E6',
25
- 'orange-90': '#FEE5CD',
26
- 'orange-80': '#FECA9A',
27
- 'orange-70': '#FDB068',
28
- 'orange-60': '#FD9535',
29
- 'orange-50': '#FD881C',
30
- 'orange-40': '#F47603',
31
- 'orange-30': '#C56002',
32
- 'orange-20': '#653101',
33
- 'orange-10': '#321901',
34
- // PURPLE - Codacy
35
- 'purple-99': '#FCFBFE',
36
- 'purple-95': '#F1EAFA',
37
- 'purple-90': '#E4D5F6',
38
- 'purple-80': '#C8ACEC',
39
- 'purple-70': '#AD82E3',
40
- 'purple-60': '#9F6DDE',
41
- 'purple-50': '#8443D5',
42
- 'purple-40': '#712DC8',
43
- 'purple-30': '#532192',
44
- 'purple-20': '#421A75',
45
- 'purple-10': '#18092A',
46
- // GREY - Neutral
47
- 'grey-99': '#F4F6FB',
48
- 'grey-95': '#E8EDF7',
49
- 'grey-90': '#DAE2F1',
50
- 'grey-80': '#C8D2E4',
51
- 'grey-70': '#B9C5DA',
52
- 'grey-60': '#99A7C2',
53
- 'grey-50': '#798CAF',
54
- 'grey-40': '#5C7199',
55
- 'grey-30': '#415986',
56
- 'grey-20': '#2C4168',
57
- 'grey-10': '#182949',
58
- // WHITE
59
- white: '#FFFFFF',
60
- // RED - Error
61
- 'red-99': '#FFF6F5',
62
- 'red-95': '#FFEDEB',
63
- 'red-90': '#FFDAD6',
64
- 'red-80': '#FFB3AD',
65
- 'red-70': '#FF8980',
66
- 'red-60': '#FB5851',
67
- 'red-50': '#D52E2A',
68
- 'red-40': '#CC292B',
69
- 'red-30': '#960311',
70
- 'red-20': '#680008',
71
- 'red-10': '#410003',
72
- // GREEN - Success
73
- 'green-99': '#F7FCF9',
74
- 'green-95': '#ECF9EF',
75
- 'green-90': '#D9F2E0',
76
- 'green-80': '#B3E5C1',
77
- 'green-70': '#8CD9A2',
78
- 'green-60': '#66CC83',
79
- 'green-50': '#40BF64',
80
- 'green-40': '#339950',
81
- 'green-30': '#26733C',
82
- 'green-20': '#1A4C28',
83
- 'green-10': '#0D2614',
84
- // YELLOW - Warning
85
- 'yellow-99': '#FFFDFA',
86
- 'yellow-95': '#FFF6E5',
87
- 'yellow-90': '#FFECCC',
88
- 'yellow-80': '#FFD999',
89
- 'yellow-70': '#FFC666',
90
- 'yellow-60': '#FFB433',
91
- 'yellow-50': '#FFA101',
92
- 'yellow-40': '#EB9400',
93
- 'yellow-30': '#996000',
94
- 'yellow-20': '#664000',
95
- 'yellow-10': '#332000'
9
+ var colorNames = exports.colorNames = ['blue', 'grey', 'purple', 'orange', 'turquoise', 'magenta', 'red', 'green', 'yellow'];
10
+ var semantics = ['danger', 'success', 'warning', 'info', 'attention'];
11
+ var generateBaseColors = function generateBaseColors(color) {
12
+ var colors = {};
13
+ colors["".concat(color.name, "-99")] = "hsl(".concat(color.hue, ", ").concat(color.saturation, "%, 98%)");
14
+ colors["".concat(color.name, "-95")] = "hsl(".concat(color.hue, ", ").concat(color.saturation, "%, 95%)");
15
+ colors["".concat(color.name, "-90")] = "hsl(".concat(color.hue, ", ").concat(color.saturation, "%, 90%)");
16
+ for (var i = 80; i >= 10; i -= 10) {
17
+ colors["".concat(color.name, "-").concat(i)] = "hsl(".concat(color.hue, ", ").concat(color.saturation, "%, ").concat(color.lightnessStart + i, "%)");
18
+ }
19
+ return colors;
20
+ };
21
+ var baseColors = exports.baseColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, generateBaseColors({
22
+ name: 'turquoise',
23
+ hue: 183,
24
+ saturation: 50,
25
+ lightnessStart: 0
26
+ })), generateBaseColors({
27
+ name: 'blue',
28
+ hue: 217,
29
+ saturation: 100,
30
+ lightnessStart: 7
31
+ })), generateBaseColors({
32
+ name: 'magenta',
33
+ hue: 310,
34
+ saturation: 63,
35
+ lightnessStart: 2
36
+ })), generateBaseColors({
37
+ name: 'purple',
38
+ hue: 266,
39
+ saturation: 64,
40
+ lightnessStart: 7
41
+ })), generateBaseColors({
42
+ name: 'orange',
43
+ hue: 29,
44
+ saturation: 98,
45
+ lightnessStart: 7
46
+ })), generateBaseColors({
47
+ name: 'grey',
48
+ hue: 219,
49
+ saturation: 25,
50
+ lightnessStart: 7
51
+ })), generateBaseColors({
52
+ name: 'red',
53
+ hue: 359,
54
+ saturation: 67,
55
+ lightnessStart: 7
56
+ })), generateBaseColors({
57
+ name: 'green',
58
+ hue: 137,
59
+ saturation: 50,
60
+ lightnessStart: 0
61
+ })), generateBaseColors({
62
+ name: 'yellow',
63
+ hue: 38,
64
+ saturation: 100,
65
+ lightnessStart: 7
66
+ })), {}, {
67
+ white: '#FFFFFF'
68
+ });
69
+ var semanticFunctionalColorsFx = function semanticFunctionalColorsFx(prefix, number) {
70
+ var colors = {};
71
+ var semanticMapToColor = {
72
+ danger: 'red',
73
+ success: 'green',
74
+ warning: 'yellow',
75
+ info: 'blue',
76
+ attention: 'purple'
77
+ };
78
+ semantics.map(function (semantic) {
79
+ return colors["".concat(prefix, "-").concat(semantic)] = baseColors["".concat(semanticMapToColor[semantic], "-").concat(number)];
80
+ });
81
+ return colors;
96
82
  };
97
83
  var functionalColorsFx = exports.functionalColorsFx = function functionalColorsFx(colors) {
98
- return {
84
+ return (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, semanticFunctionalColorsFx('text', 40)), semanticFunctionalColorsFx('background', 95)), semanticFunctionalColorsFx('border', 40)), semanticFunctionalColorsFx('icon', 40)), {}, {
99
85
  // Brand
100
86
  'brand-primary': colors['blue-40'],
101
87
  'brand-hover': colors['blue-30'],
@@ -156,30 +142,14 @@ var functionalColorsFx = exports.functionalColorsFx = function functionalColorsF
156
142
  'text-tertiary': colors['grey-50'],
157
143
  'text-inverted': colors['white'],
158
144
  'text-disabled': colors['grey-70'],
159
- // Text - Semantic
160
- 'text-danger': colors['red-40'],
161
- 'text-success': colors['green-40'],
162
- 'text-warning': colors['yellow-40'],
163
- 'text-info': colors['blue-40'],
164
- 'text-attention': colors['purple-40'],
165
145
  // Background
166
146
  'background-primary': colors['white'],
167
147
  'background-secondary': colors['grey-99'],
168
148
  // Background - Semantic
169
149
  'background-brand': colors['blue-95'],
170
150
  'background-subtle': colors['grey-95'],
171
- 'background-danger': colors['red-95'],
172
- 'background-success': colors['green-95'],
173
- 'background-warning': colors['yellow-95'],
174
- 'background-info': colors['blue-95'],
175
- 'background-attention': colors['purple-95'],
176
151
  // Border
177
152
  'border-primary': colors['grey-95'],
178
- 'border-danger': colors['red-40'],
179
- 'border-success': colors['green-40'],
180
- 'border-info': colors['blue-40'],
181
- 'border-warning': colors['yellow-40'],
182
- 'border-attention': colors['purple-70'],
183
153
  // Border - Brand
184
154
  'border-brand-primary': colors['blue-70'],
185
155
  'border-brand-hover': colors['blue-40'],
@@ -199,13 +169,8 @@ var functionalColorsFx = exports.functionalColorsFx = function functionalColorsF
199
169
  'icon-brand-enabled': colors['blue-40'],
200
170
  'icon-brand-hover': colors['blue-30'],
201
171
  'icon-brand-disabled': colors['blue-70'],
202
- 'icon-danger': colors['red-40'],
203
- 'icon-success': colors['green-40'],
204
- 'icon-warning': colors['yellow-40'],
205
- 'icon-info': colors['blue-40'],
206
- 'icon-attention': colors['purple-50'],
207
172
  'icon-inverted': colors['white']
208
- };
173
+ });
209
174
  };
210
- var functionalColors = functionalColorsFx(baseColors);
175
+ var functionalColors = exports.functionalColors = functionalColorsFx(baseColors);
211
176
  var codacyThemeColors = exports.codacyThemeColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseColors), functionalColors);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codacy/ui-components",
3
- "version": "0.65.52",
3
+ "version": "0.65.53",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "",