@foris/avocado-core 0.0.4 → 0.1.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.
package/dist/core.umd.js CHANGED
@@ -1 +1 @@
1
- (function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict";const n=""});
1
+ (function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict"});
@@ -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,25 @@
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-color: 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
+ }
@@ -0,0 +1,56 @@
1
+ :root,
2
+ .avocado-light-theme {
3
+ --sb-background-color: #ffffff;
4
+ --color-neutral-90: #313d49;
5
+ --color-neutral-85: #354250;
6
+ --color-neutral-80: #3c4b5a;
7
+ --color-neutral-70: #465669;
8
+ --color-neutral-50: #8c93a6;
9
+ --color-neutral-30: #cbd5e1;
10
+ --color-neutral-10: #e9eff2;
11
+ --color-neutral-05: #fafbfc;
12
+ --color-neutral-00: #ffffff;
13
+ --color-primary-90: #003f52;
14
+ --color-primary-80: #004d65;
15
+ --color-primary-70: #006786;
16
+ --color-primary-60: #0084a8;
17
+ --color-primary-50: #3397b9;
18
+ --color-primary-40: #66b3cb;
19
+ --color-primary-30: #99cddc;
20
+ --color-primary-20: #cce6ee;
21
+ --color-primary-10: #e6f2f6;
22
+ --color-info-30: #c6dfff;
23
+ --color-info-50: #3a7fd9;
24
+ --color-info-70: #174178;
25
+ --color-error-30: #fcdada;
26
+ --color-error-50: #ef4444;
27
+ --color-error-70: #8c0104;
28
+ --color-success-30: #d7f9e3;
29
+ --color-success-50: #1cba5f;
30
+ --color-success-70: #0d592d;
31
+ --color-warning-30: #ffeba6;
32
+ --color-warning-50: #ffd056;
33
+ --color-warning-70: #704e00;
34
+ }
35
+
36
+ .avocado-dark-theme {
37
+ --sb-background-color: #313d49;
38
+ --color-neutral-90: #ffffff;
39
+ --color-neutral-85: #fafbfc;
40
+ --color-neutral-80: #e9eff2;
41
+ --color-neutral-70: #cbd5e1;
42
+ --color-neutral-50: #8c93a6;
43
+ --color-neutral-30: #465669;
44
+ --color-neutral-10: #3c4b5a;
45
+ --color-neutral-05: #354250;
46
+ --color-neutral-00: #313d49;
47
+ --color-primary-90: #e6f2f6;
48
+ --color-primary-80: #cce6ee;
49
+ --color-primary-70: #99cddc;
50
+ --color-primary-60: #66b3cb;
51
+ --color-primary-50: #3397b9;
52
+ --color-primary-40: #0084a8;
53
+ --color-primary-30: #006786;
54
+ --color-primary-20: #004d65;
55
+ --color-primary-10: #003f52;
56
+ }
@@ -4,3 +4,4 @@
4
4
  @import './normalize';
5
5
  @import './fonts';
6
6
  @import './grid';
7
+ @import './themes';