@foris/avocado-core 0.4.0 → 0.4.2

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 (16) hide show
  1. package/dist/core.es.js +1 -0
  2. package/dist/core.umd.js +1 -0
  3. package/dist/fonts/Roboto/Roboto-Bold.ttf +0 -0
  4. package/dist/fonts/Roboto/Roboto-Medium.ttf +0 -0
  5. package/dist/fonts/Roboto/Roboto-Regular.ttf +0 -0
  6. package/dist/index.d.ts +1 -0
  7. package/dist/scss/_animation.scss +14 -0
  8. package/dist/scss/_fonts.scss +26 -0
  9. package/dist/scss/_grid.scss +181 -0
  10. package/dist/scss/_mixin.scss +70 -0
  11. package/dist/scss/_normalize.scss +488 -0
  12. package/dist/scss/_themes.scss +267 -0
  13. package/dist/scss/_variables.scss +193 -0
  14. package/dist/scss/avocado.scss +7 -0
  15. package/dist/style.css +1 -0
  16. package/package.json +1 -1
package/dist/scss/_themes.scss ADDED
@@ -0,0 +1,267 @@
1
+ :root {
2
+ --color-gray-100: #000000;
3
+ --color-gray-90: #313d49;
4
+ --color-gray-85: #323e4b;
5
+ --color-gray-80: #3c4b5a;
6
+ --color-gray-70: #465669;
7
+ --color-gray-50: #8c93a6;
8
+ --color-gray-30: #cbd5e1;
9
+ --color-gray-10: #e9eff2;
10
+ --color-gray-05: #fafbfc;
11
+ --color-gray-00: #ffffff;
12
+
13
+ --color-gray-100-60: rgba(0, 0, 0, 60%);
14
+ --color-gray-100-50: rgba(0, 0, 0, 50%);
15
+ --color-gray-100-50: rgba(0, 0, 0, 50%);
16
+ --color-gray-100-30: rgba(0, 0, 0, 30%);
17
+ --color-gray-100-20: rgba(0, 0, 0, 20%);
18
+ --color-gray-100-10: rgba(0, 0, 0, 10%);
19
+ --color-gray-100-05: rgba(0, 0, 0, 5%);
20
+ --color-gray-100-00: rgba(0, 0, 0, 0%);
21
+
22
+ --color-gray-90-70: rgba(49, 61, 73, 70%);
23
+ --color-gray-90-50: rgba(49, 61, 73, 50%);
24
+ --color-gray-90-40: rgba(49, 61, 73, 40%);
25
+ --color-gray-90-30: rgba(49, 61, 73, 30%);
26
+ --color-gray-90-20: rgba(49, 61, 73, 20%);
27
+ --color-gray-90-10: rgba(49, 61, 73, 10%);
28
+ --color-gray-90-05: rgba(49, 61, 73, 5%);
29
+ --color-gray-90-02: rgba(49, 61, 73, 2%);
30
+ --color-gray-90-00: rgba(49, 61, 73, 0%);
31
+
32
+ --color-gray-80-20: rgba(60, 75, 90, 20%);
33
+ --color-gray-80-10: rgba(60, 75, 90, 10%);
34
+
35
+ --color-gray-70-20: rgba(70, 86, 105, 20%);
36
+
37
+ --color-gray-30-20: rgba(203, 213, 225, 20%);
38
+ --color-gray-30-15: rgba(203, 213, 225, 15%);
39
+ --color-gray-30-10: rgba(203, 213, 225, 10%);
40
+ --color-gray-30-00: rgba(203, 213, 225, 0%);
41
+
42
+ --color-brand-90: #003f52;
43
+ --color-brand-80: #004c65;
44
+ --color-brand-70: #00708f;
45
+ --color-brand-60: #0086a8;
46
+ --color-brand-50: #3397b9;
47
+ --color-brand-40: #66b3cb;
48
+ --color-brand-30: #99cddc;
49
+ --color-brand-20: #cce6ee;
50
+ --color-brand-10: #e6f2f6;
51
+
52
+ --color-blue-10: #f1f9ff;
53
+ --color-blue-50: #337ad3;
54
+ --color-blue-60: #1a5cac;
55
+ --color-blue-50-10: rgba(51, 122, 211, 10%);
56
+ --color-blue-50-20: rgba(51, 122, 211, 20%);
57
+ --color-blue-50-70: rgba(51, 122, 211, 70%);
58
+ --color-red-10: #fff3f1;
59
+ --color-red-50: #d13f3d;
60
+ --color-red-60: #a82326;
61
+ --color-red-50-10: rgba(209, 63, 61, 10%);
62
+ --color-red-50-20: rgba(209, 63, 61, 20%);
63
+ --color-red-50-70: rgba(209, 63, 61, 70%);
64
+ --color-green-10: #eaffe9;
65
+ --color-green-50: #3f8e43;
66
+ --color-green-60: #266f2b;
67
+ --color-green-50-10: rgba(63, 142, 67, 10%);
68
+ --color-green-50-20: rgba(63, 142, 67, 20%);
69
+ --color-green-50-70: rgba(63, 142, 67, 70%);
70
+ --color-orange-10: #fff5ed;
71
+ --color-orange-50: #e87228;
72
+ --color-orange-60: #934200;
73
+ --color-orange-50-10: rgba(232, 114, 40, 10%);
74
+ --color-orange-50-20: rgba(232, 114, 40, 20%);
75
+ --color-orange-50-70: rgba(232, 114, 40, 70%);
76
+ }
77
+
78
+ :root,
79
+ .avocado-light-theme {
80
+ --sb-background-color: var(--color-gray-00);
81
+
82
+ --color-neutral-90: var(--color-gray-90);
83
+ --color-neutral-85: var(--color-gray-85);
84
+ --color-neutral-80: var(--color-gray-80);
85
+ --color-neutral-70: var(--color-gray-70);
86
+ --color-neutral-50: var(--color-gray-50);
87
+ --color-neutral-30: var(--color-gray-30);
88
+ --color-neutral-10: var(--color-gray-10);
89
+ --color-neutral-05: var(--color-gray-05);
90
+ --color-neutral-00: var(--color-gray-00);
91
+
92
+ --color-neutral-30-20: var(--color-gray-30-20);
93
+
94
+ --color-primary-90: var(--color-brand-90);
95
+ --color-primary-80: var(--color-brand-80);
96
+ --color-primary-70: var(--color-brand-70);
97
+ --color-primary-60: var(--color-brand-60);
98
+ --color-primary-50: var(--color-brand-50);
99
+ --color-primary-40: var(--color-brand-40);
100
+ --color-primary-30: var(--color-brand-30);
101
+ --color-primary-20: var(--color-brand-20);
102
+ --color-primary-10: var(--color-brand-10);
103
+
104
+ --color-info-10: var(--color-blue-10);
105
+ --color-info-50: var(--color-blue-50);
106
+ --color-info-60: var(--color-blue-60);
107
+ --color-info-opacity: var(--color-blue-50-10);
108
+ --color-info-border: var(--color-blue-50-70);
109
+ --color-error-10: var(--color-red-10);
110
+ --color-error-50: var(--color-red-50);
111
+ --color-error-60: var(--color-red-60);
112
+ --color-error-opacity: var(--color-red-50-10);
113
+ --color-error-border: var(--color-red-50-70);
114
+ --color-success-10: var(--color-green-10);
115
+ --color-success-50: var(--color-green-50);
116
+ --color-success-60: var(--color-green-60);
117
+ --color-success-opacity: var(--color-green-50-10);
118
+ --color-success-border: var(--color-green-50-70);
119
+ --color-warning-10: var(--color-orange-10);
120
+ --color-warning-50: var(--color-orange-50);
121
+ --color-warning-60: var(--color-orange-60);
122
+ --color-warning-opacity: var(--color-orange-50-10);
123
+ --color-warning-border: var(--color-orange-50-70);
124
+
125
+ --color-palette-1-10: #fef0f1;
126
+ --color-palette-1-50: #f26870;
127
+ --color-palette-1-80: #a42929;
128
+ --color-palette-2-10: #fffbef;
129
+ --color-palette-2-50: #ffd056;
130
+ --color-palette-2-80: #926900;
131
+ --color-palette-3-10: #f5fbf2;
132
+ --color-palette-3-50: #92d274;
133
+ --color-palette-3-80: #327114;
134
+ --color-palette-4-10: #f0f7fc;
135
+ --color-palette-4-50: #61aade;
136
+ --color-palette-4-80: #075893;
137
+ --color-palette-5-10: #f6f1fb;
138
+ --color-palette-5-50: #9f6fd0;
139
+ --color-palette-5-80: #5a2490;
140
+ --color-palette-6-10: #fff5f2;
141
+ --color-palette-6-50: #fa9677;
142
+ --color-palette-6-80: #a74020;
143
+ --color-palette-7-10: #f8fbf2;
144
+ --color-palette-7-50: #b7d674;
145
+ --color-palette-7-80: #5a7a18;
146
+ --color-palette-8-10: #f0f4fc;
147
+ --color-palette-8-50: #6789df;
148
+ --color-palette-8-80: #133794;
149
+ --color-palette-9-10: #fbeff6;
150
+ --color-palette-9-50: #d45e9e;
151
+ --color-palette-9-80: #8d0c52;
152
+ --color-palette-10-10: #fef9f2;
153
+ --color-palette-10-50: #f4ba75;
154
+ --color-palette-10-80: #a15700;
155
+ --color-palette-11-10: #f2fbfa;
156
+ --color-palette-11-50: #74d0c5;
157
+ --color-palette-11-80: #09675c;
158
+ --color-palette-12-10: #f4f2fc;
159
+ --color-palette-12-50: #8e7adc;
160
+ --color-palette-12-80: #361c9f;
161
+ --color-palette-13-10: #fef0f1;
162
+ --color-palette-13-50: #f26870;
163
+ --color-palette-13-80: #a61019;
164
+ --color-palette-14-10: #fcfcf1;
165
+ --color-palette-14-50: #dbdd72;
166
+ --color-palette-14-80: #686a0e;
167
+ --color-palette-15-10: #eaf7fa;
168
+ --color-palette-15-50: #6fc7db;
169
+ --color-palette-15-80: #116477;
170
+ --color-palette-16-10: #faf1fb;
171
+ --color-palette-16-50: #c96ed1;
172
+ --color-palette-16-80: #710f7b;
173
+ --color-palette-17-10: #f4fbf7;
174
+ --color-palette-17-50: #89d7ad;
175
+ --color-palette-17-80: #136d3d;
176
+ --color-palette-18-10: #fff4f4;
177
+ --color-palette-18-50: #f98a8a;
178
+ --color-palette-18-80: #a42929;
179
+
180
+ --shadow-sm: 0 0 2px 0 rgba(49, 61, 73, 0.5);
181
+ --shadow-md: 0 1px 2px 1px rgba(49, 61, 73, 0.1),
182
+ 0 2px 8px 0 rgba(49, 61, 73, 0.2);
183
+ --shadow-lg: 0 0 4px 1px rgba(49, 61, 73, 0.1),
184
+ 0 2px 16px 0 rgba(49, 61, 73, 0.3);
185
+ --shadow-elevate: 0 2px 4px 0 rgba(49, 61, 73, 0.2);
186
+ }
187
+
188
+ .avocado-dark-theme {
189
+ --sb-background-color: var(--color-gray-90);
190
+
191
+ --color-neutral-90: var(--color-gray-05);
192
+ --color-neutral-85: var(--color-gray-05);
193
+ --color-neutral-80: var(--color-gray-10);
194
+ --color-neutral-70: var(--color-gray-30);
195
+ --color-neutral-50: var(--color-gray-50);
196
+ --color-neutral-30: var(--color-gray-70);
197
+ --color-neutral-10: var(--color-gray-80);
198
+ --color-neutral-05: var(--color-gray-85);
199
+ --color-neutral-00: var(--color-gray-90);
200
+
201
+ --color-neutral-30-20: var(--color-gray-70-20);
202
+
203
+ --color-primary-90: var(--color-brand-10);
204
+ --color-primary-80: var(--color-brand-20);
205
+ --color-primary-70: var(--color-brand-30);
206
+ --color-primary-60: var(--color-brand-40);
207
+ --color-primary-50: var(--color-brand-50);
208
+ --color-primary-40: var(--color-brand-60);
209
+ --color-primary-30: var(--color-brand-70);
210
+ --color-primary-20: var(--color-brand-80);
211
+ --color-primary-10: var(--color-brand-90);
212
+
213
+ --color-info-10: var(--color-blue-60);
214
+ --color-info-60: var(--color-blue-10);
215
+ --color-info-opacity: var(--color-blue-50-20);
216
+ --color-error-10: var(--color-red-60);
217
+ --color-error-60: var(--color-red-10);
218
+ --color-error-opacity: var(--color-red-50-20);
219
+ --color-success-10: var(--color-green-60);
220
+ --color-success-60: var(--color-green-10);
221
+ --color-success-opacity: var(--color-green-50-20);
222
+ --color-warning-10: var(--color-orange-60);
223
+ --color-warning-60: var(--color-orange-10);
224
+ --color-warning-opacity: var(--color-orange-50-20);
225
+
226
+ --color-palette-1-80: #fef0f1;
227
+ --color-palette-1-10: #a42929;
228
+ --color-palette-2-80: #fffbef;
229
+ --color-palette-2-10: #926900;
230
+ --color-palette-3-80: #f5fbf2;
231
+ --color-palette-3-10: #327114;
232
+ --color-palette-4-80: #f0f7fc;
233
+ --color-palette-4-10: #075893;
234
+ --color-palette-5-80: #f6f1fb;
235
+ --color-palette-5-10: #5a2490;
236
+ --color-palette-6-80: #fff5f2;
237
+ --color-palette-6-10: #a74020;
238
+ --color-palette-7-80: #f8fbf2;
239
+ --color-palette-7-10: #5a7a18;
240
+ --color-palette-8-80: #f0f4fc;
241
+ --color-palette-8-10: #133794;
242
+ --color-palette-9-80: #fbeff6;
243
+ --color-palette-9-10: #8d0c52;
244
+ --color-palette-10-80: #fef9f2;
245
+ --color-palette-10-10: #a15700;
246
+ --color-palette-11-80: #f2fbfa;
247
+ --color-palette-11-10: #09675c;
248
+ --color-palette-12-80: #f4f2fc;
249
+ --color-palette-12-10: #361c9f;
250
+ --color-palette-13-80: #fef0f1;
251
+ --color-palette-13-10: #a61019;
252
+ --color-palette-14-80: #fcfcf1;
253
+ --color-palette-14-10: #686a0e;
254
+ --color-palette-15-80: #eaf7fa;
255
+ --color-palette-15-10: #116477;
256
+ --color-palette-16-80: #faf1fb;
257
+ --color-palette-16-10: #710f7b;
258
+ --color-palette-17-80: #f4fbf7;
259
+ --color-palette-17-10: #136d3d;
260
+ --color-palette-18-80: #fff4f4;
261
+ --color-palette-18-10: #a42929;
262
+
263
+ --shadow-sm: 0 0 2px 0 rgba(0, 0, 0, 0.5);
264
+ --shadow-md: 0 1px 2px 1px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.2);
265
+ --shadow-lg: 0 0 4px 1px rgba(0, 0, 0, 0.1), 0 2px 16px 0 rgba(0, 0, 0, 0.3);
266
+ --shadow-elevate: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
267
+ }
package/dist/scss/_variables.scss ADDED
@@ -0,0 +1,193 @@
1
+ // Line height
2
+ $lineHeight: 1.15;
3
+
4
+ // Calendar colors
5
+ $calendarColorsQuantity: 18;
6
+
7
+ // Breakpoints
8
+ $breakpoints: (
9
+ md: 992px,
10
+ );
11
+
12
+ // Default font
13
+ $font-stack: 'Roboto', sans-serif;
14
+
15
+ // Values for font-weight
16
+ $fonts: (
17
+ thin: 100,
18
+ light: 300,
19
+ regular: 400,
20
+ medium: 500,
21
+ bold: 700,
22
+ black: 900,
23
+ );
24
+
25
+ // Values for font-size
26
+ $sizeText: (
27
+ 30: 1.875rem,
28
+ 28: 1.75rem,
29
+ 24: 1.5rem,
30
+ 22: 1.375rem,
31
+ 18: 1.125rem,
32
+ 16: 1rem,
33
+ 14: 0.875rem,
34
+ 12: 0.75rem,
35
+ 10: 0.625rem,
36
+ 8: 0.5rem,
37
+ );
38
+
39
+ // Colors available
40
+ $colors: (
41
+ transparent: transparent,
42
+ darwined-blue-10: #6993c9,
43
+ darwined-blue-30: #507aaf,
44
+ darwined-blue-50: #376197,
45
+ darwined-blue-70: #294870,
46
+ darwined-blue-90: #1a365b,
47
+ primary-darwin-50: #376197,
48
+ foris-blue-10: #bce9f0,
49
+ foris-blue-30: #5ecbdc,
50
+ foris-blue-50: #00abc8,
51
+ foris-blue-70: #0b718e,
52
+ foris-blue-90: #005066,
53
+ foris-green-10: #e0efe7,
54
+ foris-green-30: #add8c4,
55
+ foris-green-50: #6bbe9c,
56
+ foris-green-70: #52987c,
57
+ foris-green-90: #306e55,
58
+ foris-white: #ffffff,
59
+ layout-light: #fafafa,
60
+ layout-dark: #333333,
61
+ layout-black: #000000,
62
+ layout-grey-5: #f4f5f6,
63
+ layout-grey-10: #efeff0,
64
+ layout-grey-20: #dedfe2,
65
+ layout-grey-30: #c7c7cb,
66
+ layout-grey-50: #96979e,
67
+ layout-grey-70: #58595f,
68
+ layout-grey-90: #1b1c1d,
69
+ message-alert-30: #ffda85,
70
+ message-alert-50: #ffc949,
71
+ message-alert-70: #f6b215,
72
+ massages-alert-alert-50: #fec91b,
73
+ message-negative-30: #ff5f58,
74
+ message-negative-50: #e33932,
75
+ message-negative-70: #bc271c,
76
+ massages-negative-error-30: #ff5252,
77
+ message-positive-30: #8bd173,
78
+ message-positive-50: #5eb840,
79
+ message-positive-70: #359116,
80
+ massages-positive-confirmation-50: #35ab5f,
81
+ );
82
+
83
+ // Colors palette
84
+ $colorsPalette: (
85
+ palette1: #f69b70,
86
+ palette2: #afcea7,
87
+ palette3: #a5d3d8,
88
+ palette4: #f9cf85,
89
+ palette5: #cca89f,
90
+ palette6: #9db2b4,
91
+ palette7: #cdd89d,
92
+ palette8: #d9c69e,
93
+ palette9: #b79e72,
94
+ palette10: #9dd8b9,
95
+ palette11: #81b1b6,
96
+ palette12: #8ca792,
97
+ palette13: #e0ac52,
98
+ palette14: #a9bdcd,
99
+ palette15: #f7b07d,
100
+ palette16: #b4c8b9,
101
+ palette17: #a49473,
102
+ palette18: #628387,
103
+ palette19: #dd8e53,
104
+ palette20: #a27e76,
105
+ palette21: #6f9e85,
106
+ palette22: #768c9e,
107
+ palette23: #d17b55,
108
+ palette24: #83ab78,
109
+ palette25: #d0c2a7,
110
+ palette26: #a3ac7c,
111
+ );
112
+
113
+ // Check if we can delete this var
114
+ $colorsPrincipal: (
115
+ darwined-blue-10: #6993c9,
116
+ darwined-blue-30: #507aaf,
117
+ darwined-blue-50: #376197,
118
+ darwined-blue-70: #294870,
119
+ darwined-blue-90: #1a365b,
120
+ );
121
+
122
+ // Check if we can delete this var
123
+ $colorsConfirm: (
124
+ message-negative-30: #ff5f58,
125
+ message-negative-50: #e33932,
126
+ message-negative-70: #bc271c,
127
+ message-alert-30: #fecf4f,
128
+ message-alert-50: #ffbb00,
129
+ message-positive-30: #54cb97,
130
+ message-positive-50: #3fbc89,
131
+ message-positive-70: #21865d,
132
+ );
133
+
134
+ // Check if we can move this var or change this values
135
+ $donutColors: (
136
+ 1: var(--color-palette-15-50),
137
+ 2: var(--color-palette-10-50),
138
+ 3: var(--color-orange-50),
139
+ 4: var(--color-gray-30),
140
+ );
141
+
142
+ // Check if we can delete or move this var
143
+ $zIndex: (
144
+ basic: 1,
145
+ element: 2,
146
+ intermediate: 3,
147
+ select: 4,
148
+ modal: 10,
149
+ menu: 11,
150
+ );
151
+
152
+ // DT borders
153
+ $borders: (
154
+ md: 1px,
155
+ );
156
+
157
+ // DT radius
158
+ $radius: (
159
+ sm: 0.125rem,
160
+ md: 0.25rem,
161
+ lg: 0.5rem,
162
+ );
163
+
164
+ // DT spacing
165
+ $spacing: (
166
+ xxs: 0.25rem,
167
+ xs: 0.5rem,
168
+ sm: 0.75rem,
169
+ md: 1rem,
170
+ lg: 1.25rem,
171
+ xl: 1.5rem,
172
+ xxl: 2rem,
173
+ xxxl: 2.75rem,
174
+ );
175
+
176
+ // DT shadow - use css variables and then delete this
177
+ $shadow: (
178
+ sm: 0 0 2px 0 rgba(49, 61, 73, 0.5),
179
+ md: (
180
+ 0 1px 2px 1px rgba(49, 61, 73, 0.1),
181
+ 0 1px 6px 0 rgba(49, 61, 73, 0.2),
182
+ ),
183
+ lg: (
184
+ 0 0 4px 1px rgba(49, 61, 73, 0.1),
185
+ 0 2px 16px 0 rgba(49, 61, 73, 0.3),
186
+ ),
187
+ elevate: (
188
+ 0 2px 4px 0 rgba(49, 61, 73, 0.15),
189
+ ),
190
+ );
191
+
192
+ // Replace and remove this var
193
+ $boxShadow: 0 0 3px 0 rgba(map-get($colors, layout-grey-90), 0.2);
package/dist/scss/avocado.scss ADDED
@@ -0,0 +1,7 @@
1
+ @forward './variables';
2
+ @forward './mixin';
3
+
4
+ @import './normalize';
5
+ @import './fonts';
6
+ @import './grid';
7
+ @import './themes';