@weni/unnnic-system 1.16.23 → 1.16.25-develop.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 (9) hide show
  1. package/dist/scss/colors.scss +133 -13
  2. package/dist/scss/spacing.scss +40 -29
  3. package/dist/unnnic.css +1 -1
  4. package/package.json +1 -1
  5. package/src/assets/scss/colors.scss +133 -13
  6. package/src/assets/scss/spacing.scss +40 -29
  7. package/src/components/NavbarChats/NavbarChats.vue +148 -0
  8. package/src/stories/NavbarChats.stories.js +68 -0
  9. package/src/utils/colorsList.js +51 -0
package/dist/scss/colors.scss CHANGED
@@ -1,21 +1,82 @@
1
- /* Background */
2
- $unnnic-color-background-solo: #E8F4F4;
3
- $unnnic-color-background-sky: #F4F6F8;
4
- $unnnic-color-background-grass: #F5F6F6;
5
- $unnnic-color-background-carpet: #F9F9F9;
6
- $unnnic-color-background-snow: #FFFFFF;
1
+ $unnnic-color-weni-50: #EEFFFC;
2
+ $unnnic-color-weni-100: #C6FFF7;
3
+ $unnnic-color-weni-200: #8EFFF1;
4
+ $unnnic-color-weni-300: #4DFBEA;
5
+ $unnnic-color-weni-400: #19E8DA;
6
+ $unnnic-color-weni-500: #00DED2;
7
+ $unnnic-color-weni-600: #00A49F;
8
+ $unnnic-color-weni-700: #028380;
9
+ $unnnic-color-weni-800: #086766;
10
+ $unnnic-color-weni-900: #0C5554;
11
+ $unnnic-color-weni-950: #003234;
7
12
 
8
- /* Neutral */
9
13
  $unnnic-color-neutral-black: #272B33;
10
14
  $unnnic-color-neutral-darkest: #3B414D;
11
15
  $unnnic-color-neutral-dark: #4E5666;
12
16
  $unnnic-color-neutral-cloudy: #67738B;
13
- $unnnic-color-neutral-cleanest: #9CACCC;
14
- $unnnic-color-neutral-clean: #D0D3D9;
17
+ $unnnic-color-neutral-clean: #9CACCC;
18
+ $unnnic-color-neutral-cleanest: #D0D3D9;
15
19
  $unnnic-color-neutral-soft: #E2E6ED;
16
- $unnnic-color-neutral-lightest: #F4F6F8;
17
- $unnnic-color-neutral-light: #F9F9F9;
18
- $unnnic-color-neutral-snow: #FFFFFF;
20
+ $unnnic-color-neutral-light: #F4F6F8;
21
+ $unnnic-color-neutral-lightest: #F9F9F9;
22
+ $unnnic-color-neutral-white: #FFFFFF;
23
+
24
+ $unnnic-color-background-solo: #E8F4F4;
25
+ $unnnic-color-background-sky: $unnnic-color-neutral-light;
26
+ $unnnic-color-background-grass: #F5F6F6;
27
+ $unnnic-color-background-lightest: $unnnic-color-neutral-lightest;
28
+ $unnnic-color-background-white: $unnnic-color-neutral-white;
29
+
30
+ $unnnic-color-aux-green-100: #C6F6D5;
31
+ $unnnic-color-aux-green-300: #68D391;
32
+ $unnnic-color-aux-green-500: #38A169;
33
+ $unnnic-color-aux-green-700: #276749;
34
+ $unnnic-color-aux-green-900: #1C4532;
35
+
36
+ $unnnic-color-aux-blue-100: #BEE3F8;
37
+ $unnnic-color-aux-blue-300: #63B3ED;
38
+ $unnnic-color-aux-blue-500: #3182CE;
39
+ $unnnic-color-aux-blue-700: #2C5282;
40
+ $unnnic-color-aux-blue-900: #1A365D;
41
+
42
+ $unnnic-color-aux-purple-100: #E9D8FD;
43
+ $unnnic-color-aux-purple-300: #B794F4;
44
+ $unnnic-color-aux-purple-500: #805AD5;
45
+ $unnnic-color-aux-purple-700: #553C9A;
46
+ $unnnic-color-aux-purple-900: #322659;
47
+
48
+ $unnnic-color-aux-red-100: #FED7D7;
49
+ $unnnic-color-aux-red-300: #FC8181;
50
+ $unnnic-color-aux-red-500: #E53E3E;
51
+ $unnnic-color-aux-red-700: #9B2C2C;
52
+ $unnnic-color-aux-red-900: #63171B;
53
+
54
+ $unnnic-color-aux-orange-100: #FEEBC8;
55
+ $unnnic-color-aux-orange-300: #F6AD55;
56
+ $unnnic-color-aux-orange-500: #DD6B20;
57
+ $unnnic-color-aux-orange-700: #9C4221;
58
+ $unnnic-color-aux-orange-900: #652B19;
59
+
60
+ $unnnic-color-aux-yellow-100: #FEFCBF;
61
+ $unnnic-color-aux-yellow-300: #F6E05E;
62
+ $unnnic-color-aux-yellow-500: #D69E2E;
63
+ $unnnic-color-aux-yellow-700: #975A16;
64
+ $unnnic-color-aux-yellow-900: #5F370E;
65
+
66
+ $unnnic-color-floweditor-blue: #0080A3;
67
+ $unnnic-color-floweditor-purple: #7A00A3;
68
+ $unnnic-color-floweditor-wine: #A3006A;
69
+ $unnnic-color-floweditor-orange: #F99707;
70
+ $unnnic-color-floweditor-pink: #DE16BA;
71
+ $unnnic-color-floweditor-turquoise: $unnnic-color-weni-500;
72
+ $unnnic-color-floweditor-green: #00A339;
73
+
74
+ /* Background */
75
+ $unnnic-color-background-carpet: $unnnic-color-neutral-lightest;
76
+ $unnnic-color-background-snow: $unnnic-color-neutral-white;
77
+
78
+ /* Neutral */
79
+ $unnnic-color-neutral-snow: $unnnic-color-neutral-white;
19
80
 
20
81
  /* Feedback colors */
21
82
  $unnnic-color-feedback-red: #FF4545;
@@ -38,7 +99,7 @@ $unnnic-color-aux-baby-green: #B2FCA6;
38
99
  $unnnic-color-aux-baby-pink: #FFCBF6;
39
100
 
40
101
  /* Brand */
41
- $unnnic-color-brand-weni: #00DED2;
102
+ $unnnic-color-brand-weni: $unnnic-color-weni-500;
42
103
  $unnnic-color-brand-weni-dark: #005E5A;
43
104
  $unnnic-color-brand-weni-soft: #009E96;
44
105
  $unnnic-color-brand-sec-dark: #262626;
@@ -55,6 +116,8 @@ $scheme-colors:
55
116
  "background-grass" $unnnic-color-background-grass,
56
117
  "background-carpet" $unnnic-color-background-carpet,
57
118
  "background-snow" $unnnic-color-background-snow,
119
+ "background-lightest" $unnnic-color-background-lightest,
120
+ "background-white" $unnnic-color-background-white,
58
121
 
59
122
  /* Neutral */
60
123
  "neutral-black" $unnnic-color-neutral-black,
@@ -66,6 +129,7 @@ $scheme-colors:
66
129
  "neutral-soft" $unnnic-color-neutral-soft,
67
130
  "neutral-lightest" $unnnic-color-neutral-lightest,
68
131
  "neutral-light" $unnnic-color-neutral-light,
132
+ "neutral-white" $unnnic-color-neutral-white,
69
133
  "neutral-snow" $unnnic-color-neutral-snow,
70
134
 
71
135
  /* Feedback colors */
@@ -88,7 +152,63 @@ $scheme-colors:
88
152
  "aux-baby-green" $unnnic-color-aux-baby-green,
89
153
  "aux-baby-pink" $unnnic-color-aux-baby-pink,
90
154
 
155
+ "aux-green-100" $unnnic-color-aux-green-100,
156
+ "aux-green-300" $unnnic-color-aux-green-300,
157
+ "aux-green-500" $unnnic-color-aux-green-500,
158
+ "aux-green-700" $unnnic-color-aux-green-700,
159
+ "aux-green-900" $unnnic-color-aux-green-900,
160
+
161
+ "aux-blue-100" $unnnic-color-aux-blue-100,
162
+ "aux-blue-300" $unnnic-color-aux-blue-300,
163
+ "aux-blue-500" $unnnic-color-aux-blue-500,
164
+ "aux-blue-700" $unnnic-color-aux-blue-700,
165
+ "aux-blue-900" $unnnic-color-aux-blue-900,
166
+
167
+ "aux-purple-100" $unnnic-color-aux-purple-100,
168
+ "aux-purple-300" $unnnic-color-aux-purple-300,
169
+ "aux-purple-500" $unnnic-color-aux-purple-500,
170
+ "aux-purple-700" $unnnic-color-aux-purple-700,
171
+ "aux-purple-900" $unnnic-color-aux-purple-900,
172
+
173
+ "aux-red-100" $unnnic-color-aux-red-100,
174
+ "aux-red-300" $unnnic-color-aux-red-300,
175
+ "aux-red-500" $unnnic-color-aux-red-500,
176
+ "aux-red-700" $unnnic-color-aux-red-700,
177
+ "aux-red-900" $unnnic-color-aux-red-900,
178
+
179
+ "aux-orange-100" $unnnic-color-aux-orange-100,
180
+ "aux-orange-300" $unnnic-color-aux-orange-300,
181
+ "aux-orange-500" $unnnic-color-aux-orange-500,
182
+ "aux-orange-700" $unnnic-color-aux-orange-700,
183
+ "aux-orange-900" $unnnic-color-aux-orange-900,
184
+
185
+ "aux-yellow-100" $unnnic-color-aux-yellow-100,
186
+ "aux-yellow-300" $unnnic-color-aux-yellow-300,
187
+ "aux-yellow-500" $unnnic-color-aux-yellow-500,
188
+ "aux-yellow-700" $unnnic-color-aux-yellow-700,
189
+ "aux-yellow-900" $unnnic-color-aux-yellow-900,
190
+
191
+ "floweditor-blue" $unnnic-color-floweditor-blue,
192
+ "floweditor-purple" $unnnic-color-floweditor-purple,
193
+ "floweditor-wine" $unnnic-color-floweditor-wine,
194
+ "floweditor-orange" $unnnic-color-floweditor-orange,
195
+ "floweditor-pink" $unnnic-color-floweditor-pink,
196
+ "floweditor-turquoise" $unnnic-color-floweditor-turquoise,
197
+ "floweditor-green" $unnnic-color-floweditor-green,
198
+
91
199
  /* Brand */
200
+ "weni-50" $unnnic-color-weni-50,
201
+ "weni-100" $unnnic-color-weni-100,
202
+ "weni-200" $unnnic-color-weni-200,
203
+ "weni-300" $unnnic-color-weni-300,
204
+ "weni-400" $unnnic-color-weni-400,
205
+ "weni-500" $unnnic-color-weni-500,
206
+ "weni-600" $unnnic-color-weni-600,
207
+ "weni-700" $unnnic-color-weni-700,
208
+ "weni-800" $unnnic-color-weni-800,
209
+ "weni-900" $unnnic-color-weni-900,
210
+ "weni-950" $unnnic-color-weni-950,
211
+
92
212
  "brand-weni" $unnnic-color-brand-weni,
93
213
  "brand-weni-dark" $unnnic-color-brand-weni-dark,
94
214
  "brand-weni-soft" $unnnic-color-brand-weni-soft,
package/dist/scss/spacing.scss CHANGED
@@ -40,11 +40,22 @@ $unnnic-opacity-level-light: 0.16;
40
40
  $unnnic-opacity-level-extra-light: 0.08;
41
41
 
42
42
  // Spacing
43
- $unnnic-inset-nano: 0.5 * $unnnic-font-size;
44
- $unnnic-inset-xs: 0.75 * $unnnic-font-size;
45
- $unnnic-inset-sm: 1 * $unnnic-font-size;
46
- $unnnic-inset-md: 1.5 * $unnnic-font-size;
47
- $unnnic-inset-lg: 2 * $unnnic-font-size;
43
+ $unnnic-spacing-nano: 0.25 * $unnnic-font-size;
44
+ $unnnic-spacing-xs: 0.5 * $unnnic-font-size;
45
+ $unnnic-spacing-ant: 0.75 * $unnnic-font-size;
46
+ $unnnic-spacing-sm: $unnnic-font-size;
47
+ $unnnic-spacing-md: 1.5 * $unnnic-font-size;
48
+ $unnnic-spacing-lg: 2 * $unnnic-font-size;
49
+ $unnnic-spacing-xl: 2.5 * $unnnic-font-size;
50
+ $unnnic-spacing-giant: 3 * $unnnic-font-size;
51
+ $unnnic-spacing-xgiant: 4 * $unnnic-font-size;
52
+ $unnnic-spacing-awesome: 5 * $unnnic-font-size;
53
+
54
+ $unnnic-inset-nano: $unnnic-spacing-xs;
55
+ $unnnic-inset-xs: $unnnic-spacing-ant;
56
+ $unnnic-inset-sm: $unnnic-spacing-sm;
57
+ $unnnic-inset-md: $unnnic-spacing-md;
58
+ $unnnic-inset-lg: $unnnic-spacing-lg;
48
59
  $unnnic-spacing-inset-nano: $unnnic-inset-nano;
49
60
  $unnnic-spacing-inset-xs: $unnnic-inset-xs;
50
61
  $unnnic-spacing-inset-sm: $unnnic-inset-sm;
@@ -52,23 +63,23 @@ $unnnic-spacing-inset-md: $unnnic-inset-md;
52
63
  $unnnic-spacing-inset-lg: $unnnic-inset-lg;
53
64
 
54
65
  // Squish
55
- $unnnic-squish-nano: 0.5 * $unnnic-font-size 1 * $unnnic-font-size;
56
- $unnnic-squish-xs: 0.75 * $unnnic-font-size 1 * $unnnic-font-size;
57
- $unnnic-squish-sm: 0.75 * $unnnic-font-size 1.5 * $unnnic-font-size;
58
- $unnnic-squish-md: 1 * $unnnic-font-size 1.5 * $unnnic-font-size;
59
- $unnnic-squish-lg: 1.5 * $unnnic-font-size 2 * $unnnic-font-size;
66
+ $unnnic-squish-nano: $unnnic-spacing-xs $unnnic-spacing-sm;
67
+ $unnnic-squish-xs: $unnnic-spacing-ant $unnnic-spacing-sm;
68
+ $unnnic-squish-sm: $unnnic-spacing-ant $unnnic-spacing-md;
69
+ $unnnic-squish-md: $unnnic-spacing-sm $unnnic-spacing-md;
70
+ $unnnic-squish-lg: $unnnic-spacing-md $unnnic-spacing-lg;
60
71
 
61
72
  // Inline
62
- $unnnic-inline-nano: 0.25 * $unnnic-font-size;
63
- $unnnic-inline-xs: 0.5 * $unnnic-font-size;
64
- $unnnic-inline-ant: 0.75 * $unnnic-font-size;
65
- $unnnic-inline-sm: 1 * $unnnic-font-size;
66
- $unnnic-inline-md: 1.5 * $unnnic-font-size;
67
- $unnnic-inline-lg: 2 * $unnnic-font-size;
68
- $unnnic-inline-xl: 2.5 * $unnnic-font-size;
69
- $unnnic-inline-giant: 3 * $unnnic-font-size;
70
- $unnnic-inline-xgiant: 4 * $unnnic-font-size;
71
- $unnnic-inline-awesome: 5 * $unnnic-font-size;
73
+ $unnnic-inline-nano: $unnnic-spacing-nano;
74
+ $unnnic-inline-xs: $unnnic-spacing-xs;
75
+ $unnnic-inline-ant: $unnnic-spacing-ant;
76
+ $unnnic-inline-sm: $unnnic-spacing-sm;
77
+ $unnnic-inline-md: $unnnic-spacing-md;
78
+ $unnnic-inline-lg: $unnnic-spacing-lg;
79
+ $unnnic-inline-xl: $unnnic-spacing-xl;
80
+ $unnnic-inline-giant: $unnnic-spacing-giant;
81
+ $unnnic-inline-xgiant: $unnnic-spacing-xgiant;
82
+ $unnnic-inline-awesome: $unnnic-spacing-awesome;
72
83
  $unnnic-spacing-inline-nano: $unnnic-inline-nano;
73
84
  $unnnic-spacing-inline-xs: $unnnic-inline-xs;
74
85
  $unnnic-spacing-inline-ant: $unnnic-inline-ant;
@@ -81,12 +92,12 @@ $unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
81
92
  $unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
82
93
 
83
94
  // Stack
84
- $unnnic-spacing-stack-nano: 0.25 * $unnnic-font-size;
85
- $unnnic-spacing-stack-xs: 0.5 * $unnnic-font-size;
86
- $unnnic-spacing-stack-sm: 1 * $unnnic-font-size;
87
- $unnnic-spacing-stack-md: 1.5 * $unnnic-font-size;
88
- $unnnic-spacing-stack-lg: 2 * $unnnic-font-size;
89
- $unnnic-spacing-stack-xl: 2.5 * $unnnic-font-size;
90
- $unnnic-spacing-stack-giant: 3 * $unnnic-font-size;
91
- $unnnic-spacing-stack-xgiant: 4 * $unnnic-font-size;
92
- $unnnic-spacing-stack-awesome: 5 * $unnnic-font-size;
95
+ $unnnic-spacing-stack-nano: $unnnic-spacing-nano;
96
+ $unnnic-spacing-stack-xs: $unnnic-spacing-xs;
97
+ $unnnic-spacing-stack-sm: $unnnic-spacing-sm;
98
+ $unnnic-spacing-stack-md: $unnnic-spacing-md;
99
+ $unnnic-spacing-stack-lg: $unnnic-spacing-lg;
100
+ $unnnic-spacing-stack-xl: $unnnic-spacing-xl;
101
+ $unnnic-spacing-stack-giant: $unnnic-spacing-giant;
102
+ $unnnic-spacing-stack-xgiant: $unnnic-spacing-xgiant;
103
+ $unnnic-spacing-stack-awesome: $unnnic-spacing-awesome;