@foris/avocado-core 0.1.0 → 0.2.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 (5) hide show
  1. package/dist/scss/_grid.scss +1 -0
  2. package/dist/scss/_mixin.scss +13 -1
  3. package/dist/scss/_themes.scss +59 -38
  4. package/dist/style.css +1 -1
  5. package/package.json +1 -1
package/dist/scss/_grid.scss CHANGED
@@ -173,6 +173,7 @@ $gridSpacing: (
173
173
  .container {
174
174
  margin: 0 auto;
175
175
  max-width: $maxWidth;
176
+ width: 100%;
176
177
  &_row {
177
178
  @include respond-to(full);
178
179
  @include respond-to(md);
package/dist/scss/_mixin.scss CHANGED
@@ -45,7 +45,7 @@
45
45
  @if ($border == 'none') {
46
46
  border: $border;
47
47
  } @else if ($border != 'none') {
48
- border-color: 1px solid var(--color-#{$border});
48
+ border: 1px solid var(--color-#{$border});
49
49
  }
50
50
  border-radius: $radius;
51
51
  }
@@ -56,3 +56,15 @@
56
56
  color: var(--color-#{$color});
57
57
  font-weight: map-get($fonts, #{$weight});
58
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
+ }
package/dist/scss/_themes.scss CHANGED
@@ -1,24 +1,45 @@
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
+
1
22
  :root,
2
23
  .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;
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);
22
43
  --color-info-30: #c6dfff;
23
44
  --color-info-50: #3a7fd9;
24
45
  --color-info-70: #174178;
@@ -34,23 +55,23 @@
34
55
  }
35
56
 
36
57
  .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;
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);
56
77
  }