@codacy/ui-components 0.50.4 → 0.52.0

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 (19) hide show
  1. package/lib/Button/styles.js +3 -3
  2. package/lib/CloseButton/index.js +3 -3
  3. package/lib/Dropdown/Dropdown.styles.js +9 -9
  4. package/lib/Link/Link.js +15 -4
  5. package/lib/Link/Link.styles.js +2 -2
  6. package/lib/Link/Link.types.d.ts +2 -0
  7. package/lib/Modal/styles.js +15 -15
  8. package/lib/PillLabel/PillLabel.js +6 -4
  9. package/lib/PillLabel/PillLabel.styles.js +15 -39
  10. package/lib/PillLabel/PillLabel.types.d.ts +3 -1
  11. package/lib/Popup/styles.js +3 -3
  12. package/lib/Skeleton/Skeleton.js +2 -1
  13. package/lib/Stepper/Stepper.js +1 -1
  14. package/lib/Tab/Tab.styles.js +20 -17
  15. package/lib/Tab/Tab.types.d.ts +2 -1
  16. package/lib/Toggle/Toggle.js +1 -1
  17. package/lib/theme/colors.d.ts +44 -17
  18. package/lib/theme/colors.js +72 -52
  19. package/package.json +1 -1
package/lib/Toggle/Toggle.js CHANGED
@@ -58,7 +58,7 @@ var Toggle = function Toggle(_ref) {
58
58
  size: size
59
59
  }, /*#__PURE__*/React.createElement(ToggleHandler, null, !isIndeterminate && /*#__PURE__*/React.createElement(Icon, {
60
60
  icon: isChecked ? CheckIcon : CloseIcon,
61
- color: !isChecked && disabled ? 'ui-border' : 'neutral-0',
61
+ color: !isChecked && disabled ? 'ui-border' : 'text-invert',
62
62
  size: size === 'md' ? 'sm' : 'xs',
63
63
  bold: true
64
64
  }))));
package/lib/theme/colors.d.ts CHANGED
@@ -1,11 +1,5 @@
1
1
  declare const themeColors: {
2
2
  'brand-primary': string;
3
- /** Stop using these values -------- */
4
- 'accent-focus': string;
5
- 'accent-hover': string;
6
- 'accent-active': string;
7
- 'accent-disabled': string;
8
- /** --------------------------------- */
9
3
  'accent-primary': string;
10
4
  'accent-primary-hover': string;
11
5
  'accent-primary-focus': string;
@@ -28,6 +22,7 @@ declare const themeColors: {
28
22
  'accent-danger-disabled': string;
29
23
  'accent-warning': string;
30
24
  'accent-info': string;
25
+ 'accent-attention': string;
31
26
  'text-primary': string;
32
27
  'text-secondary': string;
33
28
  'text-complementary': string;
@@ -37,12 +32,14 @@ declare const themeColors: {
37
32
  'text-success': string;
38
33
  'text-warning': string;
39
34
  'text-danger': string;
35
+ 'text-attention': string;
40
36
  'background-primary': string;
41
37
  'background-secondary': string;
42
38
  'background-info': string;
43
39
  'background-success': string;
44
40
  'background-warning': string;
45
41
  'background-danger': string;
42
+ 'background-attention': string;
46
43
  'background-neutral': string;
47
44
  'control-border': string;
48
45
  'control-background': string;
@@ -58,17 +55,6 @@ declare const themeColors: {
58
55
  'icon-success': string;
59
56
  'icon-warning': string;
60
57
  'icon-danger': string;
61
- 'blue-900': string;
62
- 'blue-800': string;
63
- 'blue-700': string;
64
- 'blue-600': string;
65
- 'blue-500': string;
66
- 'blue-400': string;
67
- 'blue-300': string;
68
- 'blue-200': string;
69
- 'blue-100': string;
70
- 'blue-50': string;
71
- 'blue-0': string;
72
58
  'neutral-900': string;
73
59
  'neutral-800': string;
74
60
  'neutral-700': string;
@@ -80,6 +66,47 @@ declare const themeColors: {
80
66
  'neutral-100': string;
81
67
  'neutral-50': string;
82
68
  'neutral-0': string;
69
+ 'secondary-100': string;
70
+ 'secondary-200': string;
71
+ 'secondary-300': string;
72
+ 'secondary-400': string;
73
+ 'secondary-500': string;
74
+ 'secondary-600': string;
75
+ 'secondary-700': string;
76
+ 'secondary-800': string;
77
+ 'secondary-900': string;
78
+ 'blue-900': string;
79
+ 'blue-800': string;
80
+ 'blue-700': string;
81
+ 'blue-600': string;
82
+ 'blue-500': string;
83
+ 'blue-400': string;
84
+ 'blue-300': string;
85
+ 'blue-200': string;
86
+ 'blue-100': string;
87
+ 'blue-50': string;
88
+ /** @deprecated Use black-50 instead */
89
+ 'blue-0': string;
90
+ 'black-700': string;
91
+ 'black-600': string;
92
+ 'black-500': string;
93
+ 'black-400': string;
94
+ 'black-300': string;
95
+ 'black-200': string;
96
+ 'black-100': string;
97
+ 'black-80': string;
98
+ 'black-60': string;
99
+ 'black-50': string;
100
+ white: string;
101
+ 'purple-100': string;
102
+ 'purple-200': string;
103
+ 'purple-300': string;
104
+ 'purple-400': string;
105
+ 'purple-500': string;
106
+ 'purple-600': string;
107
+ 'purple-700': string;
108
+ 'purple-800': string;
109
+ 'purple-900': string;
83
110
  'red-400': string;
84
111
  'red-300': string;
85
112
  'red-200': string;
package/lib/theme/colors.js CHANGED
@@ -3,7 +3,7 @@ var baseColors = {
3
3
  // BLUE
4
4
  'blue-900': '#0052CC',
5
5
  'blue-800': '#2562EA',
6
- 'blue-700': '#2A6CFF',
6
+ 'blue-700': '#286CFC',
7
7
  'blue-600': '#3E7AFF',
8
8
  'blue-500': '#6695FF',
9
9
  'blue-400': '#94B4FF',
@@ -11,29 +11,32 @@ var baseColors = {
11
11
  'blue-200': '#D0DDFE',
12
12
  'blue-100': '#DDE6FF',
13
13
  'blue-50': '#EBF1FF',
14
+
15
+ /** @deprecated Use black-50 instead */
14
16
  'blue-0': '#F9FBFF',
15
- // NEUTRAL
16
- 'neutral-900': '#172B4D',
17
- // Figma - neutral
18
- 'neutral-800': '#1D3660',
19
- // Figma - black-600
20
- 'neutral-700': '#354B71',
21
- // Figma - black-500
22
- 'neutral-600': '#4C6083',
23
- // Figma - black-400 (secondary)
24
- 'neutral-500': '#7E90B2',
25
- // Figma - black-300 (complementary)
26
- 'neutral-400': '#B6C6E0',
27
- // Figma - black-200
28
- 'neutral-300': '#C9D8EF',
29
- // Figma - black-100
30
- 'neutral-200': '#E5ECF5',
31
- // Figma - black-80 (borders)
32
- 'neutral-100': '#F2F5FD',
33
- // Figma - black-60
34
- 'neutral-50': '#F5F8FE',
35
- 'neutral-0': '#FFFFFF',
36
- // Figma - white
17
+ // BLACK
18
+ 'black-700': '#172B4D',
19
+ 'black-600': '#1D3660',
20
+ 'black-500': '#354B71',
21
+ 'black-400': '#4C6083',
22
+ 'black-300': '#7E90B2',
23
+ 'black-200': '#B6C6E0',
24
+ 'black-100': '#C9D8EF',
25
+ 'black-80': '#E5ECF5',
26
+ 'black-60': '#F2F5FD',
27
+ 'black-50': '#F5F8FE',
28
+ // WHITE
29
+ white: '#FFFFFF',
30
+ // PURPLE
31
+ 'purple-100': '#FAF7FD',
32
+ 'purple-200': '#DECDF4',
33
+ 'purple-300': '#C3A3EB',
34
+ 'purple-400': '#A77AE1',
35
+ 'purple-500': '#8C50D8',
36
+ 'purple-600': '#712DC8',
37
+ 'purple-700': '#5A239E',
38
+ 'purple-800': '#421A75',
39
+ 'purple-900': '#2A114B',
37
40
  // REDS
38
41
  'red-400': '#C92C22',
39
42
  'red-300': '#E04440',
@@ -53,24 +56,16 @@ var baseColors = {
53
56
  };
54
57
  var functionalColors = {
55
58
  'brand-primary': baseColors['blue-700'],
56
-
57
- /** Stop using these values -------- */
58
- 'accent-focus': baseColors['blue-600'],
59
- 'accent-hover': baseColors['blue-800'],
60
- 'accent-active': baseColors['blue-900'],
61
- 'accent-disabled': baseColors['blue-400'],
62
-
63
- /** --------------------------------- */
64
59
  'accent-primary': baseColors['blue-700'],
65
60
  'accent-primary-hover': baseColors['blue-800'],
66
61
  'accent-primary-focus': baseColors['blue-800'],
67
62
  'accent-primary-active': baseColors['blue-900'],
68
63
  'accent-primary-disabled': baseColors['blue-400'],
69
- 'accent-subtle': baseColors['neutral-500'],
70
- 'accent-subtle-hover': baseColors['neutral-600'],
71
- 'accent-subtle-focus': baseColors['neutral-600'],
72
- 'accent-subtle-active': baseColors['neutral-700'],
73
- 'accent-subtle-disabled': baseColors['neutral-300'],
64
+ 'accent-subtle': baseColors['black-300'],
65
+ 'accent-subtle-hover': baseColors['black-400'],
66
+ 'accent-subtle-focus': baseColors['black-400'],
67
+ 'accent-subtle-active': baseColors['black-500'],
68
+ 'accent-subtle-disabled': baseColors['black-100'],
74
69
  'accent-success': baseColors['green-100'],
75
70
  'accent-success-hover': baseColors['green-200'],
76
71
  'accent-success-focus': baseColors['green-200'],
@@ -82,37 +77,62 @@ var functionalColors = {
82
77
  'accent-danger-active': baseColors['red-400'],
83
78
  'accent-danger-disabled': baseColors['red-100'],
84
79
  'accent-warning': baseColors['orange-100'],
85
- 'accent-info': baseColors['blue-700'],
86
- 'text-primary': baseColors['neutral-900'],
87
- 'text-secondary': baseColors['neutral-600'],
88
- 'text-complementary': baseColors['neutral-500'],
89
- 'text-invert': baseColors['neutral-0'],
90
- 'text-placeholder': baseColors['neutral-400'],
80
+ 'accent-info': baseColors['blue-600'],
81
+ 'accent-attention': baseColors['purple-400'],
82
+ 'text-primary': baseColors['black-700'],
83
+ 'text-secondary': baseColors['black-400'],
84
+ 'text-complementary': baseColors['black-300'],
85
+ 'text-invert': baseColors['white'],
86
+ 'text-placeholder': baseColors['black-200'],
91
87
  'text-info': baseColors['blue-800'],
92
88
  'text-success': baseColors['green-300'],
93
89
  'text-warning': baseColors['orange-200'],
94
90
  'text-danger': baseColors['red-400'],
95
- 'background-primary': baseColors['neutral-0'],
96
- 'background-secondary': baseColors['neutral-50'],
91
+ 'text-attention': baseColors['purple-600'],
92
+ 'background-primary': baseColors['white'],
93
+ 'background-secondary': baseColors['black-50'],
97
94
  'background-info': baseColors['blue-50'],
98
95
  'background-success': baseColors['green-50'],
99
96
  'background-warning': baseColors['orange-50'],
100
97
  'background-danger': baseColors['red-50'],
101
- 'background-neutral': baseColors['neutral-200'],
98
+ 'background-attention': baseColors['purple-100'],
99
+ 'background-neutral': baseColors['black-80'],
102
100
  'control-border': baseColors['blue-300'],
103
- 'control-background': baseColors['neutral-0'],
104
- 'control-active-background': baseColors['neutral-100'],
101
+ 'control-background': baseColors['white'],
102
+ 'control-active-background': baseColors['black-60'],
105
103
  'control-active-border': baseColors['blue-700'],
106
104
  'control-invalid-border': baseColors['red-200'],
107
105
  'control-disabled': baseColors['blue-100'],
108
- 'ui-border': baseColors['neutral-200'],
109
- 'ui-navbar': baseColors['neutral-900'],
110
- 'ui-navbar-text': baseColors['neutral-300'],
111
- 'icon-primary': baseColors['neutral-400'],
106
+ 'ui-border': baseColors['black-80'],
107
+ 'ui-navbar': baseColors['black-700'],
108
+ 'ui-navbar-text': baseColors['black-100'],
109
+ 'icon-primary': baseColors['black-200'],
112
110
  'icon-info': baseColors['blue-700'],
113
111
  'icon-success': baseColors['green-200'],
114
112
  'icon-warning': baseColors['orange-100'],
115
- 'icon-danger': baseColors['red-200']
113
+ 'icon-danger': baseColors['red-200'],
114
+ // NEUTRAL
115
+ 'neutral-900': baseColors['black-700'],
116
+ 'neutral-800': baseColors['black-600'],
117
+ 'neutral-700': baseColors['black-500'],
118
+ 'neutral-600': baseColors['black-400'],
119
+ 'neutral-500': baseColors['black-300'],
120
+ 'neutral-400': baseColors['black-200'],
121
+ 'neutral-300': baseColors['black-100'],
122
+ 'neutral-200': baseColors['black-80'],
123
+ 'neutral-100': baseColors['black-60'],
124
+ 'neutral-50': baseColors['black-50'],
125
+ 'neutral-0': baseColors['white'],
126
+ // SECONDARY
127
+ 'secondary-100': baseColors['purple-100'],
128
+ 'secondary-200': baseColors['purple-200'],
129
+ 'secondary-300': baseColors['purple-300'],
130
+ 'secondary-400': baseColors['purple-400'],
131
+ 'secondary-500': baseColors['purple-500'],
132
+ 'secondary-600': baseColors['purple-600'],
133
+ 'secondary-700': baseColors['purple-700'],
134
+ 'secondary-800': baseColors['purple-800'],
135
+ 'secondary-900': baseColors['purple-900']
116
136
  };
117
137
 
118
138
  var themeColors = _objectSpread(_objectSpread({}, baseColors), functionalColors);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codacy/ui-components",
3
- "version": "0.50.4",
3
+ "version": "0.52.0",
4
4
  "description": "",
5
5
  "license": "ISC",
6
6
  "author": "",