@foris/avocado-core 0.2.1 → 0.3.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 (4) hide show
  1. package/dist/scss/_animation.scss +14 -0
  2. package/dist/scss/_themes.scss +136 -54
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
package/dist/scss/_animation.scss ADDED
@@ -0,0 +1,14 @@
1
+ @use './variables' as *;
2
+
3
+ @mixin animateSkeleton {
4
+ animation: skeletonAnimation 2s cubic-bezier(.4,0,.6,1) infinite;
5
+ @keyframes skeletonAnimation {
6
+ 50% {
7
+ opacity: 0.5;
8
+ }
9
+ }
10
+ }
11
+
12
+ @mixin skeleton {
13
+ @include animateSkeleton;
14
+ }
package/dist/scss/_themes.scss CHANGED
@@ -1,4 +1,5 @@
1
1
  :root {
2
+ --color-gray-100: #000000;
2
3
  --color-gray-90: #313d49;
3
4
  --color-gray-85: #323e4b;
4
5
  --color-gray-80: #3c4b5a;
@@ -9,6 +10,33 @@
9
10
  --color-gray-05: #fafbfc;
10
11
  --color-gray-00: #ffffff;
11
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
+
12
40
  --color-brand-90: #003f52;
13
41
  --color-brand-80: #004c65;
14
42
  --color-brand-70: #00708f;
@@ -22,23 +50,82 @@
22
50
  --color-blue-10: #f1f9ff;
23
51
  --color-blue-50: #337ad3;
24
52
  --color-blue-60: #1a5cac;
25
- --color-blue-opacity: rgba(51, 122, 211, 10%);
26
- --color-blue-border: rgba(51, 122, 211, 70%);
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%);
27
56
  --color-red-10: #fff3f1;
28
57
  --color-red-50: #d13f3d;
29
58
  --color-red-60: #a82326;
30
- --color-red-opacity: rgba(209, 63, 61, 10%);
31
- --color-red-border: rgba(209, 63, 61, 70%);
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%);
32
62
  --color-green-10: #eaffe9;
33
63
  --color-green-50: #3f8e43;
34
64
  --color-green-60: #266f2b;
35
- --color-green-opacity: rgba(63, 142, 67, 10%);
36
- --color-green-border: rgba(63, 142, 67, 70%);
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%);
37
68
  --color-orange-10: #fff5ed;
38
69
  --color-orange-50: #e87228;
39
70
  --color-orange-60: #934200;
40
- --color-orange-opacity: rgba(232, 114, 40, 10%);
41
- --color-orange-border: rgba(232, 114, 40, 70%);
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);
42
129
 
43
130
  --color-palette-1-10: #fef0f1;
44
131
  --color-palette-1-50: #f26870;
@@ -103,52 +190,6 @@
103
190
  --shadow-elevate: 0 2px 4px 0 rgba(49, 61, 73, 0.2);
104
191
  }
105
192
 
106
- :root,
107
- .avocado-light-theme {
108
- --sb-background-color: var(--color-gray-00);
109
-
110
- --color-neutral-90: var(--color-gray-90);
111
- --color-neutral-85: var(--color-gray-85);
112
- --color-neutral-80: var(--color-gray-80);
113
- --color-neutral-70: var(--color-gray-70);
114
- --color-neutral-50: var(--color-gray-50);
115
- --color-neutral-30: var(--color-gray-30);
116
- --color-neutral-10: var(--color-gray-10);
117
- --color-neutral-05: var(--color-gray-05);
118
- --color-neutral-00: var(--color-gray-00);
119
-
120
- --color-primary-90: var(--color-brand-90);
121
- --color-primary-80: var(--color-brand-80);
122
- --color-primary-70: var(--color-brand-70);
123
- --color-primary-60: var(--color-brand-60);
124
- --color-primary-50: var(--color-brand-50);
125
- --color-primary-40: var(--color-brand-40);
126
- --color-primary-30: var(--color-brand-30);
127
- --color-primary-20: var(--color-brand-20);
128
- --color-primary-10: var(--color-brand-10);
129
-
130
- --color-info-10: var(--color-blue-10);
131
- --color-info-50: var(--color-blue-50);
132
- --color-info-60: var(--color-blue-60);
133
- --color-info-opacity: var(--color-blue-opacity);
134
- --color-info-border: var(--color-blue-border);
135
- --color-error-10: var(--color-red-10);
136
- --color-error-50: var(--color-red-50);
137
- --color-error-60: var(--color-red-60);
138
- --color-error-opacity: var(--color-red-opacity);
139
- --color-error-border: var(--color-red-border);
140
- --color-success-10: var(--color-green-10);
141
- --color-success-50: var(--color-green-50);
142
- --color-success-60: var(--color-green-60);
143
- --color-success-opacity: var(--color-green-opacity);
144
- --color-success-border: var(--color-green-border);
145
- --color-warning-10: var(--color-orange-10);
146
- --color-warning-50: var(--color-orange-50);
147
- --color-warning-60: var(--color-orange-60);
148
- --color-warning-opacity: var(--color-orange-opacity);
149
- --color-warning-border: var(--color-orange-border);
150
- }
151
-
152
193
  .avocado-dark-theme {
153
194
  --sb-background-color: var(--color-gray-90);
154
195
 
@@ -174,12 +215,53 @@
174
215
 
175
216
  --color-info-10: var(--color-blue-60);
176
217
  --color-info-60: var(--color-blue-10);
218
+ --color-info-opacity: var(--color-blue-50-20);
177
219
  --color-error-10: var(--color-red-60);
178
220
  --color-error-60: var(--color-red-10);
221
+ --color-error-opacity: var(--color-red-50-20);
179
222
  --color-success-10: var(--color-green-60);
180
223
  --color-success-60: var(--color-green-10);
224
+ --color-success-opacity: var(--color-green-50-20);
181
225
  --color-warning-10: var(--color-orange-60);
182
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;
183
265
 
184
266
  --shadow-sm: 0 0 2px 0 rgba(0, 0, 0, 0.5);
185
267
  --shadow-md: 0 1px 2px 1px rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.2);