@foris/avocado-core 0.3.0 → 0.4.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.
@@ -1,270 +0,0 @@
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-30-20: rgba(203, 213, 225, 20%);
36
- --color-gray-30-15: rgba(203, 213, 225, 15%);
37
- --color-gray-30-10: rgba(203, 213, 225, 10%);
38
- --color-gray-30-00: rgba(203, 213, 225, 0%);
39
-
40
- --color-brand-90: #003f52;
41
- --color-brand-80: #004c65;
42
- --color-brand-70: #00708f;
43
- --color-brand-60: #0086a8;
44
- --color-brand-50: #3397b9;
45
- --color-brand-40: #66b3cb;
46
- --color-brand-30: #99cddc;
47
- --color-brand-20: #cce6ee;
48
- --color-brand-10: #e6f2f6;
49
-
50
- --color-blue-10: #f1f9ff;
51
- --color-blue-50: #337ad3;
52
- --color-blue-60: #1a5cac;
53
- --color-blue-50-10: rgba(51, 122, 211, 10%);
54
- --color-blue-50-20: rgba(51, 122, 211, 20%);
55
- --color-blue-50-70: rgba(51, 122, 211, 70%);
56
- --color-red-10: #fff3f1;
57
- --color-red-50: #d13f3d;
58
- --color-red-60: #a82326;
59
- --color-red-50-10: rgba(209, 63, 61, 10%);
60
- --color-red-50-20: rgba(209, 63, 61, 20%);
61
- --color-red-50-70: rgba(209, 63, 61, 70%);
62
- --color-green-10: #eaffe9;
63
- --color-green-50: #3f8e43;
64
- --color-green-60: #266f2b;
65
- --color-green-50-10: rgba(63, 142, 67, 10%);
66
- --color-green-50-20: rgba(63, 142, 67, 20%);
67
- --color-green-50-70: rgba(63, 142, 67, 70%);
68
- --color-orange-10: #fff5ed;
69
- --color-orange-50: #e87228;
70
- --color-orange-60: #934200;
71
- --color-orange-50-10: rgba(232, 114, 40, 10%);
72
- --color-orange-50-20: rgba(232, 114, 40, 20%);
73
- --color-orange-50-70: rgba(232, 114, 40, 70%);
74
- --color-sky-blue-40: #A3D5E1;
75
- --color-sky-blue-50: #6FC7DB;
76
- --color-sky-blue-60: #3E9DB2;
77
- --color-orange-40: #F4CD9F;
78
- --color-orange-50: #F4BA75;
79
- --color-orange-60: #D1944D;
80
- --color-pink-40: #E086B7;
81
- --color-pink-50: #D45E9E;
82
- --color-pink-60: #B84684;
83
- }
84
-
85
- :root,
86
- .avocado-light-theme {
87
- --sb-background-color: var(--color-gray-00);
88
-
89
- --color-neutral-90: var(--color-gray-90);
90
- --color-neutral-85: var(--color-gray-85);
91
- --color-neutral-80: var(--color-gray-80);
92
- --color-neutral-70: var(--color-gray-70);
93
- --color-neutral-50: var(--color-gray-50);
94
- --color-neutral-30: var(--color-gray-30);
95
- --color-neutral-10: var(--color-gray-10);
96
- --color-neutral-05: var(--color-gray-05);
97
- --color-neutral-00: var(--color-gray-00);
98
-
99
- --color-primary-90: var(--color-brand-90);
100
- --color-primary-80: var(--color-brand-80);
101
- --color-primary-70: var(--color-brand-70);
102
- --color-primary-60: var(--color-brand-60);
103
- --color-primary-50: var(--color-brand-50);
104
- --color-primary-40: var(--color-brand-40);
105
- --color-primary-30: var(--color-brand-30);
106
- --color-primary-20: var(--color-brand-20);
107
- --color-primary-10: var(--color-brand-10);
108
-
109
- --color-info-10: var(--color-blue-10);
110
- --color-info-50: var(--color-blue-50);
111
- --color-info-60: var(--color-blue-60);
112
- --color-info-opacity: var(--color-blue-50-10);
113
- --color-info-border: var(--color-blue-50-70);
114
- --color-error-10: var(--color-red-10);
115
- --color-error-50: var(--color-red-50);
116
- --color-error-60: var(--color-red-60);
117
- --color-error-opacity: var(--color-red-50-10);
118
- --color-error-border: var(--color-red-50-70);
119
- --color-success-10: var(--color-green-10);
120
- --color-success-50: var(--color-green-50);
121
- --color-success-60: var(--color-green-60);
122
- --color-success-opacity: var(--color-green-50-10);
123
- --color-success-border: var(--color-green-50-70);
124
- --color-warning-10: var(--color-orange-10);
125
- --color-warning-50: var(--color-orange-50);
126
- --color-warning-60: var(--color-orange-60);
127
- --color-warning-opacity: var(--color-orange-50-10);
128
- --color-warning-border: var(--color-orange-50-70);
129
-
130
- --color-palette-1-10: #fef0f1;
131
- --color-palette-1-50: #f26870;
132
- --color-palette-1-80: #a42929;
133
- --color-palette-2-10: #fffbef;
134
- --color-palette-2-50: #ffd056;
135
- --color-palette-2-80: #926900;
136
- --color-palette-3-10: #f5fbf2;
137
- --color-palette-3-50: #92d274;
138
- --color-palette-3-80: #327114;
139
- --color-palette-4-10: #f0f7fc;
140
- --color-palette-4-50: #61aade;
141
- --color-palette-4-80: #075893;
142
- --color-palette-5-10: #f6f1fb;
143
- --color-palette-5-50: #9f6fd0;
144
- --color-palette-5-80: #5a2490;
145
- --color-palette-6-10: #fff5f2;
146
- --color-palette-6-50: #fa9677;
147
- --color-palette-6-80: #a74020;
148
- --color-palette-7-10: #f8fbf2;
149
- --color-palette-7-50: #b7d674;
150
- --color-palette-7-80: #5a7a18;
151
- --color-palette-8-10: #f0f4fc;
152
- --color-palette-8-50: #6789df;
153
- --color-palette-8-80: #133794;
154
- --color-palette-9-10: #fbeff6;
155
- --color-palette-9-50: #d45e9e;
156
- --color-palette-9-80: #8d0c52;
157
- --color-palette-10-10: #fef9f2;
158
- --color-palette-10-50: #f4ba75;
159
- --color-palette-10-80: #a15700;
160
- --color-palette-11-10: #f2fbfa;
161
- --color-palette-11-50: #74d0c5;
162
- --color-palette-11-80: #09675c;
163
- --color-palette-12-10: #f4f2fc;
164
- --color-palette-12-50: #8e7adc;
165
- --color-palette-12-80: #361c9f;
166
- --color-palette-13-10: #fef0f1;
167
- --color-palette-13-50: #f26870;
168
- --color-palette-13-80: #a61019;
169
- --color-palette-14-10: #fcfcf1;
170
- --color-palette-14-50: #dbdd72;
171
- --color-palette-14-80: #686a0e;
172
- --color-palette-15-10: #eaf7fa;
173
- --color-palette-15-50: #6fc7db;
174
- --color-palette-15-80: #116477;
175
- --color-palette-16-10: #faf1fb;
176
- --color-palette-16-50: #c96ed1;
177
- --color-palette-16-80: #710f7b;
178
- --color-palette-17-10: #f4fbf7;
179
- --color-palette-17-50: #89d7ad;
180
- --color-palette-17-80: #136d3d;
181
- --color-palette-18-10: #fff4f4;
182
- --color-palette-18-50: #f98a8a;
183
- --color-palette-18-80: #a42929;
184
-
185
- --shadow-sm: 0 0 2px 0 rgba(49, 61, 73, 0.5);
186
- --shadow-md: 0 1px 2px 1px rgba(49, 61, 73, 0.1),
187
- 0 2px 8px 0 rgba(49, 61, 73, 0.2);
188
- --shadow-lg: 0 0 4px 1px rgba(49, 61, 73, 0.1),
189
- 0 2px 16px 0 rgba(49, 61, 73, 0.3);
190
- --shadow-elevate: 0 2px 4px 0 rgba(49, 61, 73, 0.2);
191
- }
192
-
193
- .avocado-dark-theme {
194
- --sb-background-color: var(--color-gray-90);
195
-
196
- --color-neutral-90: var(--color-gray-00);
197
- --color-neutral-85: var(--color-gray-05);
198
- --color-neutral-80: var(--color-gray-10);
199
- --color-neutral-70: var(--color-gray-30);
200
- --color-neutral-50: var(--color-gray-50);
201
- --color-neutral-30: var(--color-gray-70);
202
- --color-neutral-10: var(--color-gray-80);
203
- --color-neutral-05: var(--color-gray-85);
204
- --color-neutral-00: var(--color-gray-90);
205
-
206
- --color-primary-90: var(--color-brand-10);
207
- --color-primary-80: var(--color-brand-20);
208
- --color-primary-70: var(--color-brand-30);
209
- --color-primary-60: var(--color-brand-40);
210
- --color-primary-50: var(--color-brand-50);
211
- --color-primary-40: var(--color-brand-60);
212
- --color-primary-30: var(--color-brand-70);
213
- --color-primary-20: var(--color-brand-80);
214
- --color-primary-10: var(--color-brand-90);
215
-
216
- --color-info-10: var(--color-blue-60);
217
- --color-info-60: var(--color-blue-10);
218
- --color-info-opacity: var(--color-blue-50-20);
219
- --color-error-10: var(--color-red-60);
220
- --color-error-60: var(--color-red-10);
221
- --color-error-opacity: var(--color-red-50-20);
222
- --color-success-10: var(--color-green-60);
223
- --color-success-60: var(--color-green-10);
224
- --color-success-opacity: var(--color-green-50-20);
225
- --color-warning-10: var(--color-orange-60);
226
- --color-warning-60: var(--color-orange-10);
227
- --color-warning-opacity: var(--color-orange-50-20);
228
-
229
- --color-palette-1-80: #fef0f1;
230
- --color-palette-1-10: #a42929;
231
- --color-palette-2-80: #fffbef;
232
- --color-palette-2-10: #926900;
233
- --color-palette-3-80: #f5fbf2;
234
- --color-palette-3-10: #327114;
235
- --color-palette-4-80: #f0f7fc;
236
- --color-palette-4-10: #075893;
237
- --color-palette-5-80: #f6f1fb;
238
- --color-palette-5-10: #5a2490;
239
- --color-palette-6-80: #fff5f2;
240
- --color-palette-6-10: #a74020;
241
- --color-palette-7-80: #f8fbf2;
242
- --color-palette-7-10: #5a7a18;
243
- --color-palette-8-80: #f0f4fc;
244
- --color-palette-8-10: #133794;
245
- --color-palette-9-80: #fbeff6;
246
- --color-palette-9-10: #8d0c52;
247
- --color-palette-10-80: #fef9f2;
248
- --color-palette-10-10: #a15700;
249
- --color-palette-11-80: #f2fbfa;
250
- --color-palette-11-10: #09675c;
251
- --color-palette-12-80: #f4f2fc;
252
- --color-palette-12-10: #361c9f;
253
- --color-palette-13-80: #fef0f1;
254
- --color-palette-13-10: #a61019;
255
- --color-palette-14-80: #fcfcf1;
256
- --color-palette-14-10: #686a0e;
257
- --color-palette-15-80: #eaf7fa;
258
- --color-palette-15-10: #116477;
259
- --color-palette-16-80: #faf1fb;
260
- --color-palette-16-10: #710f7b;
261
- --color-palette-17-80: #f4fbf7;
262
- --color-palette-17-10: #136d3d;
263
- --color-palette-18-80: #fff4f4;
264
- --color-palette-18-10: #a42929;
265
-
266
- --shadow-sm: 0 0 2px 0 rgba(0, 0, 0, 0.5);
267
- --shadow-md: 0 1px 2px 1px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.2);
268
- --shadow-lg: 0 0 4px 1px rgba(0, 0, 0, 0.1), 0 2px 16px 0 rgba(0, 0, 0, 0.3);
269
- --shadow-elevate: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
270
- }
@@ -1,194 +0,0 @@
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: #5ecbdc,
137
- 2: #f69b70,
138
- 3: peru,
139
- 4: pink,
140
- 5: yellow,
141
- );
142
-
143
- // Check if we can delete or move this var
144
- $zIndex: (
145
- basic: 1,
146
- element: 2,
147
- intermediate: 3,
148
- select: 4,
149
- modal: 10,
150
- menu: 11,
151
- );
152
-
153
- // DT borders
154
- $borders: (
155
- md: 1px,
156
- );
157
-
158
- // DT radius
159
- $radius: (
160
- sm: 0.125rem,
161
- md: 0.25rem,
162
- lg: 0.5rem,
163
- );
164
-
165
- // DT spacing
166
- $spacing: (
167
- xxs: 0.25rem,
168
- xs: 0.5rem,
169
- sm: 0.75rem,
170
- md: 1rem,
171
- lg: 1.25rem,
172
- xl: 1.5rem,
173
- xxl: 2rem,
174
- xxxl: 2.75rem,
175
- );
176
-
177
- // DT shadow - use css variables and then delete this
178
- $shadow: (
179
- sm: 0 0 2px 0 rgba(49, 61, 73, 0.5),
180
- md: (
181
- 0 1px 2px 1px rgba(49, 61, 73, 0.1),
182
- 0 1px 6px 0 rgba(49, 61, 73, 0.2),
183
- ),
184
- lg: (
185
- 0 0 4px 1px rgba(49, 61, 73, 0.1),
186
- 0 2px 16px 0 rgba(49, 61, 73, 0.3),
187
- ),
188
- elevate: (
189
- 0 2px 4px 0 rgba(49, 61, 73, 0.15),
190
- ),
191
- );
192
-
193
- // Replace and remove this var
194
- $boxShadow: 0 0 3px 0 rgba(map-get($colors, layout-grey-90), 0.2);
@@ -1,7 +0,0 @@
1
- @forward './variables';
2
- @forward './mixin';
3
-
4
- @import './normalize';
5
- @import './fonts';
6
- @import './grid';
7
- @import './themes';