@foris/avocado-core 0.0.4 → 0.1.1
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.
- package/dist/core.umd.js +1 -1
- package/dist/scss/_grid.scss +1 -0
- package/dist/scss/_mixin.scss +36 -0
- package/dist/scss/_themes.scss +77 -0
- package/dist/scss/avocado.scss +1 -0
- package/dist/style.css +1 -1
- package/package.json +5 -5
package/dist/core.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict"
|
|
1
|
+
(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict"});
|
package/dist/scss/_grid.scss
CHANGED
package/dist/scss/_mixin.scss
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
@mixin text($size, $color, $weight: regular) {
|
|
10
|
+
@warn "This text mixin is deprecated!";
|
|
10
11
|
font-family: $font-stack;
|
|
11
12
|
font-size: map-get($sizeText, $size);
|
|
12
13
|
color: map-get($colors, $color);
|
|
@@ -14,6 +15,7 @@
|
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
@mixin box($bg, $radius, $border: none) {
|
|
18
|
+
@warn "This box mixin is deprecated!";
|
|
17
19
|
@if ($bg == transparent) {
|
|
18
20
|
background: $bg;
|
|
19
21
|
} @else {
|
|
@@ -32,3 +34,37 @@
|
|
|
32
34
|
box-shadow: 0 0 0 3px map-get($colors, foris-white),
|
|
33
35
|
0 0 0 5px map-get($colors, darwined-blue-30);
|
|
34
36
|
}
|
|
37
|
+
|
|
38
|
+
// Mixins using css vars
|
|
39
|
+
@mixin box-style($bg, $radius, $border: none) {
|
|
40
|
+
@if ($bg == transparent) {
|
|
41
|
+
background-color: transparent;
|
|
42
|
+
} @else {
|
|
43
|
+
background-color: var(--color-#{$bg});
|
|
44
|
+
}
|
|
45
|
+
@if ($border == 'none') {
|
|
46
|
+
border: $border;
|
|
47
|
+
} @else if ($border != 'none') {
|
|
48
|
+
border: 1px solid var(--color-#{$border});
|
|
49
|
+
}
|
|
50
|
+
border-radius: $radius;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@mixin font-style($size, $color, $weight: regular) {
|
|
54
|
+
font-family: $font-stack;
|
|
55
|
+
font-size: map-get($sizeText, $size);
|
|
56
|
+
color: var(--color-#{$color});
|
|
57
|
+
font-weight: map-get($fonts, #{$weight});
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@mixin focus-style($theme: '') {
|
|
61
|
+
border-radius: 8px;
|
|
62
|
+
outline: none;
|
|
63
|
+
|
|
64
|
+
@if $theme == 'dark' {
|
|
65
|
+
box-shadow: 0 0 0 3px var(--color-gray-90), 0 0 0 5px var(--color-info-30);
|
|
66
|
+
} @else {
|
|
67
|
+
box-shadow: 0 0 0 3px var(--color-neutral-00),
|
|
68
|
+
0 0 0 5px var(--color-info-30);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-gray-90: #313d49;
|
|
3
|
+
--color-gray-85: #354250;
|
|
4
|
+
--color-gray-80: #3c4b5a;
|
|
5
|
+
--color-gray-70: #465669;
|
|
6
|
+
--color-gray-50: #8c93a6;
|
|
7
|
+
--color-gray-30: #cbd5e1;
|
|
8
|
+
--color-gray-10: #e9eff2;
|
|
9
|
+
--color-gray-05: #fafbfc;
|
|
10
|
+
--color-gray-00: #ffffff;
|
|
11
|
+
--color-brand-90: #003f52;
|
|
12
|
+
--color-brand-80: #004c65;
|
|
13
|
+
--color-brand-70: #00708f;
|
|
14
|
+
--color-brand-60: #0086a8;
|
|
15
|
+
--color-brand-50: #3397b9;
|
|
16
|
+
--color-brand-40: #66b3cb;
|
|
17
|
+
--color-brand-30: #99cddc;
|
|
18
|
+
--color-brand-20: #cce6ee;
|
|
19
|
+
--color-brand-10: #e6f2f6;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:root,
|
|
23
|
+
.avocado-light-theme {
|
|
24
|
+
--sb-background-color: var(--color-gray-00);
|
|
25
|
+
--color-neutral-90: var(--color-gray-90);
|
|
26
|
+
--color-neutral-85: var(--color-gray-85);
|
|
27
|
+
--color-neutral-80: var(--color-gray-80);
|
|
28
|
+
--color-neutral-70: var(--color-gray-70);
|
|
29
|
+
--color-neutral-50: var(--color-gray-50);
|
|
30
|
+
--color-neutral-30: var(--color-gray-30);
|
|
31
|
+
--color-neutral-10: var(--color-gray-10);
|
|
32
|
+
--color-neutral-05: var(--color-gray-05);
|
|
33
|
+
--color-neutral-00: var(--color-gray-00);
|
|
34
|
+
--color-primary-90: var(--color-brand-90);
|
|
35
|
+
--color-primary-80: var(--color-brand-80);
|
|
36
|
+
--color-primary-70: var(--color-brand-70);
|
|
37
|
+
--color-primary-60: var(--color-brand-60);
|
|
38
|
+
--color-primary-50: var(--color-brand-50);
|
|
39
|
+
--color-primary-40: var(--color-brand-40);
|
|
40
|
+
--color-primary-30: var(--color-brand-30);
|
|
41
|
+
--color-primary-20: var(--color-brand-20);
|
|
42
|
+
--color-primary-10: var(--color-brand-10);
|
|
43
|
+
--color-info-30: #c6dfff;
|
|
44
|
+
--color-info-50: #3a7fd9;
|
|
45
|
+
--color-info-70: #174178;
|
|
46
|
+
--color-error-30: #fcdada;
|
|
47
|
+
--color-error-50: #ef4444;
|
|
48
|
+
--color-error-70: #8c0104;
|
|
49
|
+
--color-success-30: #d7f9e3;
|
|
50
|
+
--color-success-50: #1cba5f;
|
|
51
|
+
--color-success-70: #0d592d;
|
|
52
|
+
--color-warning-30: #ffeba6;
|
|
53
|
+
--color-warning-50: #ffd056;
|
|
54
|
+
--color-warning-70: #704e00;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.avocado-dark-theme {
|
|
58
|
+
--sb-background-color: var(--color-gray-90);
|
|
59
|
+
--color-neutral-90: var(--color-gray-00);
|
|
60
|
+
--color-neutral-85: var(--color-gray-05);
|
|
61
|
+
--color-neutral-80: var(--color-gray-10);
|
|
62
|
+
--color-neutral-70: var(--color-gray-30);
|
|
63
|
+
--color-neutral-50: var(--color-gray-50);
|
|
64
|
+
--color-neutral-30: var(--color-gray-70);
|
|
65
|
+
--color-neutral-10: var(--color-gray-80);
|
|
66
|
+
--color-neutral-05: var(--color-gray-85);
|
|
67
|
+
--color-neutral-00: var(--color-gray-90);
|
|
68
|
+
--color-primary-90: var(--color-brand-10);
|
|
69
|
+
--color-primary-80: var(--color-brand-20);
|
|
70
|
+
--color-primary-70: var(--color-brand-30);
|
|
71
|
+
--color-primary-60: var(--color-brand-40);
|
|
72
|
+
--color-primary-50: var(--color-brand-50);
|
|
73
|
+
--color-primary-40: var(--color-brand-60);
|
|
74
|
+
--color-primary-30: var(--color-brand-70);
|
|
75
|
+
--color-primary-20: var(--color-brand-80);
|
|
76
|
+
--color-primary-10: var(--color-brand-90);
|
|
77
|
+
}
|
package/dist/scss/avocado.scss
CHANGED