@weni/unnnic-system 3.3.1 → 3.3.3

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 (7) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/style.css +1 -1
  3. package/package.json +1 -1
  4. package/src/assets/scss/colors.scss +2 -2
  5. package/src/assets/scss/scheme-colors.scss +131 -4
  6. package/src/assets/tokens/colors.json +2 -2
  7. package/src/types/scheme-colors.d.ts +119 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@weni/unnnic-system",
3
- "version": "3.3.1",
3
+ "version": "3.3.3",
4
4
  "type": "commonjs",
5
5
  "files": [
6
6
  "dist",
package/src/assets/scss/colors.scss CHANGED
@@ -95,8 +95,8 @@ $unnnic-color-bg-base: #FFFFFF;
95
95
  $unnnic-color-bg-soft: #F6F7F9;
96
96
  $unnnic-color-bg-muted: #ECEEF2;
97
97
  $unnnic-color-bg-active: #00A49F;
98
- $unnnic-color-bg-info: #E5EEF9;
99
- $unnnic-color-bg-success: #DAF1E0;
98
+ $unnnic-color-bg-info: #F2F7FD;
99
+ $unnnic-color-bg-success: #F0F9F3;
100
100
  $unnnic-color-bg-warning: #FBF7EB;
101
101
  $unnnic-color-bg-critical: #FDF3F3;
102
102
  $unnnic-color-fg-base: #67738B;
package/src/assets/scss/scheme-colors.scss CHANGED
@@ -4,6 +4,136 @@
4
4
  // Global scheme colors mapping for all components
5
5
 
6
6
  $unnnic-scheme-colors:
7
+ 'white' $unnnic-color-white,
8
+
9
+ 'black' $unnnic-color-black,
10
+
11
+ 'gray-50' $unnnic-color-gray-50,
12
+ 'gray-100' $unnnic-color-gray-100,
13
+ 'gray-200' $unnnic-color-gray-200,
14
+ 'gray-300' $unnnic-color-gray-300,
15
+ 'gray-400' $unnnic-color-gray-400,
16
+ 'gray-500' $unnnic-color-gray-500,
17
+ 'gray-600' $unnnic-color-gray-600,
18
+ 'gray-700' $unnnic-color-gray-700,
19
+ 'gray-800' $unnnic-color-gray-800,
20
+ 'gray-900' $unnnic-color-gray-900,
21
+ 'gray-950' $unnnic-color-gray-950,
22
+
23
+ 'teal-50' $unnnic-color-teal-50,
24
+ 'teal-100' $unnnic-color-teal-100,
25
+ 'teal-200' $unnnic-color-teal-200,
26
+ 'teal-300' $unnnic-color-teal-300,
27
+ 'teal-400' $unnnic-color-teal-400,
28
+ 'teal-500' $unnnic-color-teal-500,
29
+ 'teal-600' $unnnic-color-teal-600,
30
+ 'teal-700' $unnnic-color-teal-700,
31
+ 'teal-800' $unnnic-color-teal-800,
32
+ 'teal-900' $unnnic-color-teal-900,
33
+ 'teal-950' $unnnic-color-teal-950,
34
+
35
+ 'green-50' $unnnic-color-green-50,
36
+ 'green-100' $unnnic-color-green-100,
37
+ 'green-200' $unnnic-color-green-200,
38
+ 'green-300' $unnnic-color-green-300,
39
+ 'green-400' $unnnic-color-green-400,
40
+ 'green-500' $unnnic-color-green-500,
41
+ 'green-600' $unnnic-color-green-600,
42
+ 'green-700' $unnnic-color-green-700,
43
+ 'green-800' $unnnic-color-green-800,
44
+ 'green-900' $unnnic-color-green-900,
45
+ 'green-950' $unnnic-color-green-950,
46
+
47
+ 'blue-50' $unnnic-color-blue-50,
48
+ 'blue-100' $unnnic-color-blue-100,
49
+ 'blue-200' $unnnic-color-blue-200,
50
+ 'blue-300' $unnnic-color-blue-300,
51
+ 'blue-400' $unnnic-color-blue-400,
52
+ 'blue-500' $unnnic-color-blue-500,
53
+ 'blue-600' $unnnic-color-blue-600,
54
+ 'blue-700' $unnnic-color-blue-700,
55
+ 'blue-800' $unnnic-color-blue-800,
56
+ 'blue-900' $unnnic-color-blue-900,
57
+ 'blue-950' $unnnic-color-blue-950,
58
+
59
+ 'purple-50' $unnnic-color-purple-50,
60
+ 'purple-100' $unnnic-color-purple-100,
61
+ 'purple-200' $unnnic-color-purple-200,
62
+ 'purple-300' $unnnic-color-purple-300,
63
+ 'purple-400' $unnnic-color-purple-400,
64
+ 'purple-500' $unnnic-color-purple-500,
65
+ 'purple-600' $unnnic-color-purple-600,
66
+ 'purple-700' $unnnic-color-purple-700,
67
+ 'purple-800' $unnnic-color-purple-800,
68
+ 'purple-900' $unnnic-color-purple-900,
69
+ 'purple-950' $unnnic-color-purple-950,
70
+
71
+ 'red-50' $unnnic-color-red-50,
72
+ 'red-100' $unnnic-color-red-100,
73
+ 'red-200' $unnnic-color-red-200,
74
+ 'red-300' $unnnic-color-red-300,
75
+ 'red-400' $unnnic-color-red-400,
76
+ 'red-500' $unnnic-color-red-500,
77
+ 'red-600' $unnnic-color-red-600,
78
+ 'red-700' $unnnic-color-red-700,
79
+ 'red-800' $unnnic-color-red-800,
80
+ 'red-900' $unnnic-color-red-900,
81
+ 'red-950' $unnnic-color-red-950,
82
+
83
+ 'orange-50' $unnnic-color-orange-50,
84
+ 'orange-100' $unnnic-color-orange-100,
85
+ 'orange-200' $unnnic-color-orange-200,
86
+ 'orange-300' $unnnic-color-orange-300,
87
+ 'orange-400' $unnnic-color-orange-400,
88
+ 'orange-500' $unnnic-color-orange-500,
89
+ 'orange-600' $unnnic-color-orange-600,
90
+ 'orange-700' $unnnic-color-orange-700,
91
+ 'orange-800' $unnnic-color-orange-800,
92
+ 'orange-900' $unnnic-color-orange-900,
93
+ 'orange-950' $unnnic-color-orange-950,
94
+
95
+ 'yellow-50' $unnnic-color-yellow-50,
96
+ 'yellow-100' $unnnic-color-yellow-100,
97
+ 'yellow-200' $unnnic-color-yellow-200,
98
+ 'yellow-300' $unnnic-color-yellow-300,
99
+ 'yellow-400' $unnnic-color-yellow-400,
100
+ 'yellow-500' $unnnic-color-yellow-500,
101
+ 'yellow-600' $unnnic-color-yellow-600,
102
+ 'yellow-700' $unnnic-color-yellow-700,
103
+ 'yellow-800' $unnnic-color-yellow-800,
104
+ 'yellow-900' $unnnic-color-yellow-900,
105
+ 'yellow-950' $unnnic-color-yellow-950,
106
+
107
+ 'bg-base' $unnnic-color-bg-base,
108
+ 'bg-soft' $unnnic-color-bg-soft,
109
+ 'bg-muted' $unnnic-color-bg-muted,
110
+ 'bg-active' $unnnic-color-bg-active,
111
+ 'bg-info' $unnnic-color-bg-info,
112
+ 'bg-success' $unnnic-color-bg-success,
113
+ 'bg-warning' $unnnic-color-bg-warning,
114
+ 'bg-critical' $unnnic-color-bg-critical,
115
+
116
+ 'fg-base' $unnnic-color-fg-base,
117
+ 'fg-muted' $unnnic-color-fg-muted,
118
+ 'fg-emphasized' $unnnic-color-fg-emphasized,
119
+ 'fg-inverted' $unnnic-color-fg-inverted,
120
+ 'fg-active' $unnnic-color-fg-active,
121
+ 'fg-info' $unnnic-color-fg-info,
122
+ 'fg-success' $unnnic-color-fg-success,
123
+ 'fg-warning' $unnnic-color-fg-warning,
124
+ 'fg-critical' $unnnic-color-fg-critical,
125
+
126
+ 'border-base' $unnnic-color-border-base,
127
+ 'border-soft' $unnnic-color-border-soft,
128
+ 'border-muted' $unnnic-color-border-muted,
129
+ 'border-emphasized' $unnnic-color-border-emphasized,
130
+ 'border-active' $unnnic-color-border-active,
131
+ 'border-info' $unnnic-color-border-info,
132
+ 'border-success' $unnnic-color-border-success,
133
+ 'border-warning' $unnnic-color-border-warning,
134
+ 'border-critical' $unnnic-color-border-critical,
135
+
136
+ // Deprecated
7
137
  'background-solo' $unnnic-color-teal-50,
8
138
  'background-sky' $unnnic-color-gray-50,
9
139
  'background-grass' $unnnic-color-green-50,
@@ -97,10 +227,7 @@ $unnnic-scheme-colors:
97
227
  'brand-sec-dark' $unnnic-color-blue-800,
98
228
  'brand-sec-soft' $unnnic-color-blue-100,
99
229
  'brand-sec' $unnnic-color-blue-600,
100
-
101
- 'bg-base' $unnnic-color-bg-base,
102
- 'bg-soft' $unnnic-color-bg-soft,
103
-
230
+
104
231
  'teal-50' $unnnic-color-teal-50,
105
232
  'teal-100' $unnnic-color-teal-100,
106
233
  'teal-200' $unnnic-color-teal-200,
package/src/assets/tokens/colors.json CHANGED
@@ -300,10 +300,10 @@
300
300
  "value": "{color.teal.600}"
301
301
  },
302
302
  "info": {
303
- "value": "{color.blue.100}"
303
+ "value": "{color.blue.50}"
304
304
  },
305
305
  "success": {
306
- "value": "{color.green.100}"
306
+ "value": "{color.green.50}"
307
307
  },
308
308
  "warning": {
309
309
  "value": "{color.yellow.50}"
package/src/types/scheme-colors.d.ts CHANGED
@@ -1,4 +1,122 @@
1
1
  export type SchemeColor =
2
+ | 'white'
3
+ | 'black'
4
+ | 'gray-50'
5
+ | 'gray-100'
6
+ | 'gray-200'
7
+ | 'gray-300'
8
+ | 'gray-400'
9
+ | 'gray-500'
10
+ | 'gray-600'
11
+ | 'gray-700'
12
+ | 'gray-800'
13
+ | 'gray-900'
14
+ | 'gray-950'
15
+ | 'teal-50'
16
+ | 'teal-100'
17
+ | 'teal-200'
18
+ | 'teal-300'
19
+ | 'teal-400'
20
+ | 'teal-500'
21
+ | 'teal-600'
22
+ | 'teal-700'
23
+ | 'teal-800'
24
+ | 'teal-900'
25
+ | 'teal-950'
26
+ | 'green-50'
27
+ | 'green-100'
28
+ | 'green-200'
29
+ | 'green-300'
30
+ | 'green-400'
31
+ | 'green-500'
32
+ | 'green-600'
33
+ | 'green-700'
34
+ | 'green-800'
35
+ | 'green-900'
36
+ | 'green-950'
37
+ | 'blue-50'
38
+ | 'blue-100'
39
+ | 'blue-200'
40
+ | 'blue-300'
41
+ | 'blue-400'
42
+ | 'blue-500'
43
+ | 'blue-600'
44
+ | 'blue-700'
45
+ | 'blue-800'
46
+ | 'blue-900'
47
+ | 'blue-950'
48
+ | 'purple-50'
49
+ | 'purple-100'
50
+ | 'purple-200'
51
+ | 'purple-300'
52
+ | 'purple-400'
53
+ | 'purple-500'
54
+ | 'purple-600'
55
+ | 'purple-700'
56
+ | 'purple-800'
57
+ | 'purple-900'
58
+ | 'purple-950'
59
+ | 'red-50'
60
+ | 'red-100'
61
+ | 'red-200'
62
+ | 'red-300'
63
+ | 'red-400'
64
+ | 'red-500'
65
+ | 'red-600'
66
+ | 'red-700'
67
+ | 'red-800'
68
+ | 'red-900'
69
+ | 'red-950'
70
+ | 'orange-50'
71
+ | 'orange-100'
72
+ | 'orange-200'
73
+ | 'orange-300'
74
+ | 'orange-400'
75
+ | 'orange-500'
76
+ | 'orange-600'
77
+ | 'orange-700'
78
+ | 'orange-800'
79
+ | 'orange-900'
80
+ | 'orange-950'
81
+ | 'yellow-50'
82
+ | 'yellow-100'
83
+ | 'yellow-200'
84
+ | 'yellow-300'
85
+ | 'yellow-400'
86
+ | 'yellow-500'
87
+ | 'yellow-600'
88
+ | 'yellow-700'
89
+ | 'yellow-800'
90
+ | 'yellow-900'
91
+ | 'yellow-950'
92
+ | 'bg-base'
93
+ | 'bg-soft'
94
+ | 'bg-muted'
95
+ | 'bg-active'
96
+ | 'bg-info'
97
+ | 'bg-success'
98
+ | 'bg-warning'
99
+ | 'bg-critical'
100
+ | 'fg-base'
101
+ | 'fg-muted'
102
+ | 'fg-emphasized'
103
+ | 'fg-inverted'
104
+ | 'fg-active'
105
+ | 'fg-info'
106
+ | 'fg-success'
107
+ | 'fg-warning'
108
+ | 'fg-critical'
109
+ | 'border-base'
110
+ | 'border-soft'
111
+ | 'border-muted'
112
+ | 'border-emphasized'
113
+ | 'border-active'
114
+ | 'border-info'
115
+ | 'border-success'
116
+ | 'border-warning'
117
+ | 'border-critical'
118
+
119
+ // Deprecated
2
120
  | 'background-solo'
3
121
  | 'background-sky'
4
122
  | 'background-grass'
@@ -85,17 +203,4 @@ export type SchemeColor =
85
203
  | 'brand-weni-soft'
86
204
  | 'brand-sec-dark'
87
205
  | 'brand-sec-soft'
88
- | 'brand-sec'
89
- | 'bg-base'
90
- | 'bg-soft'
91
- | 'teal-50'
92
- | 'teal-100'
93
- | 'teal-200'
94
- | 'teal-300'
95
- | 'teal-400'
96
- | 'teal-500'
97
- | 'teal-600'
98
- | 'teal-700'
99
- | 'teal-800'
100
- | 'teal-900'
101
- | 'teal-950';
206
+ | 'brand-sec';