@foris/avocado-core 0.0.3 → 0.1.0

package/dist/core.umd.js

@@ -1 +1 @@
-(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict";const n=""});
+(function(n){typeof define=="function"&&define.amd?define(n):n()})(function(){"use strict"});

package/dist/scss/_grid.scss

@@ -1,6 +1,5 @@
 // This grid use CSS Flexbox. To transform this grid in css use https://www.sassmeister.com/ <3
-@use './variables' as variables;
-@use 'sass:math';
+@import './variables';
 
 // Quantity columns
 $gridColumns: 12;
@@ -40,7 +39,7 @@ $gridSpacing: (
 
 // Calculates width column
 @function calculateWidth($columnNumber) {
-  @return unquote(math.div(100, $gridColumns) * $columnNumber + '%');
+  @return unquote((100 / $gridColumns) * $columnNumber + '%');
 }
 
 // Generate responsive spacing
@@ -70,9 +69,7 @@ $gridSpacing: (
   @if $columnNumber == $gridColumns {
     margin-left: 100%;
   } @else if $columnNumber != $gridColumns and $columnNumber != 0 {
-    // For sassmeister.com you can use this line:
-    // margin-left: (100 / ($gridColumns / $columnNumber)) * 1%;
-    margin-left: math.div(100, math.div($gridColumns, $columnNumber)) * 1%;
+    margin-left: (100 / ($gridColumns / $columnNumber)) * 1%;
   } @else if $columnNumber == 0 {
     margin-left: 0;
   }
@@ -166,7 +163,7 @@ $gridSpacing: (
   @if $media == full {
     @include contentFlexboxGrid(map-get($breakpointsPrefix, full));
   } @else if $media == md {
-    @media (max-width: map-get(variables.$breakpoints, md )) {
+    @media (max-width: map-get($breakpoints, md )) {
       @include contentFlexboxGrid(map-get($breakpointsPrefix, md));
     }
   }

package/dist/scss/_mixin.scss

@@ -7,6 +7,7 @@
 }
 
 @mixin text($size, $color, $weight: regular) {
+  @warn "This text mixin is deprecated!";
   font-family: $font-stack;
   font-size: map-get($sizeText, $size);
   color: map-get($colors, $color);
@@ -14,6 +15,7 @@
 }
 
 @mixin box($bg, $radius, $border: none) {
+  @warn "This box mixin is deprecated!";
   @if ($bg == transparent) {
     background: $bg;
   } @else {
@@ -32,3 +34,25 @@
   box-shadow: 0 0 0 3px map-get($colors, foris-white),
     0 0 0 5px map-get($colors, darwined-blue-30);
 }
+
+// Mixins using css vars
+@mixin box-style($bg, $radius, $border: none) {
+  @if ($bg == transparent) {
+    background-color: transparent;
+  } @else {
+    background-color: var(--color-#{$bg});
+  }
+  @if ($border == 'none') {
+    border: $border;
+  } @else if ($border != 'none') {
+    border-color: 1px solid var(--color-#{$border});
+  }
+  border-radius: $radius;
+}
+
+@mixin font-style($size, $color, $weight: regular) {
+  font-family: $font-stack;
+  font-size: map-get($sizeText, $size);
+  color: var(--color-#{$color});
+  font-weight: map-get($fonts, #{$weight});
+}

package/dist/scss/_themes.scss

@@ -0,0 +1,56 @@
+:root,
+.avocado-light-theme {
+  --sb-background-color: #ffffff;
+  --color-neutral-90: #313d49;
+  --color-neutral-85: #354250;
+  --color-neutral-80: #3c4b5a;
+  --color-neutral-70: #465669;
+  --color-neutral-50: #8c93a6;
+  --color-neutral-30: #cbd5e1;
+  --color-neutral-10: #e9eff2;
+  --color-neutral-05: #fafbfc;
+  --color-neutral-00: #ffffff;
+  --color-primary-90: #003f52;
+  --color-primary-80: #004d65;
+  --color-primary-70: #006786;
+  --color-primary-60: #0084a8;
+  --color-primary-50: #3397b9;
+  --color-primary-40: #66b3cb;
+  --color-primary-30: #99cddc;
+  --color-primary-20: #cce6ee;
+  --color-primary-10: #e6f2f6;
+  --color-info-30: #c6dfff;
+  --color-info-50: #3a7fd9;
+  --color-info-70: #174178;
+  --color-error-30: #fcdada;
+  --color-error-50: #ef4444;
+  --color-error-70: #8c0104;
+  --color-success-30: #d7f9e3;
+  --color-success-50: #1cba5f;
+  --color-success-70: #0d592d;
+  --color-warning-30: #ffeba6;
+  --color-warning-50: #ffd056;
+  --color-warning-70: #704e00;
+}
+
+.avocado-dark-theme {
+  --sb-background-color: #313d49;
+  --color-neutral-90: #ffffff;
+  --color-neutral-85: #fafbfc;
+  --color-neutral-80: #e9eff2;
+  --color-neutral-70: #cbd5e1;
+  --color-neutral-50: #8c93a6;
+  --color-neutral-30: #465669;
+  --color-neutral-10: #3c4b5a;
+  --color-neutral-05: #354250;
+  --color-neutral-00: #313d49;
+  --color-primary-90: #e6f2f6;
+  --color-primary-80: #cce6ee;
+  --color-primary-70: #99cddc;
+  --color-primary-60: #66b3cb;
+  --color-primary-50: #3397b9;
+  --color-primary-40: #0084a8;
+  --color-primary-30: #006786;
+  --color-primary-20: #004d65;
+  --color-primary-10: #003f52;
+}

package/dist/scss/avocado.scss

@@ -1,5 +1,7 @@
+@forward './variables';
+@forward './mixin';
+
 @import './normalize';
 @import './fonts';
 @import './grid';
-@import './mixin';
-@import './variables';
+@import './themes';