@foris/avocado-core 0.4.0 → 0.4.2

package/dist/core.es.js

@@ -0,0 +1 @@
+

package/dist/core.umd.js

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

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './src/index.js'

package/dist/scss/_animation.scss

@@ -0,0 +1,14 @@
+@use './variables' as *;
+
+@mixin animateSkeleton {
+  animation: skeletonAnimation 2s cubic-bezier(.4,0,.6,1) infinite;
+  @keyframes skeletonAnimation {
+    50% {
+      opacity: 0.5;
+    }
+  }
+}
+
+@mixin skeleton {
+  @include animateSkeleton;
+}

package/dist/scss/_fonts.scss

@@ -0,0 +1,26 @@
+/* roboto-regular */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'),
+    url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+}
+
+/* roboto-500 */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'),
+    url('../fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+}
+
+/* roboto-700 */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'),
+    url('../fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+}

package/dist/scss/_grid.scss

@@ -0,0 +1,181 @@
+// This grid use CSS Flexbox. To transform this grid in css use https://www.sassmeister.com/ <3
+@import './variables';
+
+// Quantity columns
+$gridColumns: 12;
+
+// Breakpoints prefix
+$breakpointsPrefix: (
+  full: '',
+  md: '_md',
+);
+
+// Max width of content
+$maxWidth: 1440px;
+
+// Values for justify-content
+$justifyContent: (
+  around: space-around,
+  between: space-between,
+  center: center,
+  end: flex-end,
+  start: flex-start,
+);
+
+// Values for align-items and align-self
+$alignItems: (
+  baseline: baseline,
+  center: center,
+  end: flex-end,
+  start: flex-start,
+  stretch: stretch,
+);
+
+// Values for spacing
+$gridSpacing: (
+  full: 24px,
+  md: 16px,
+);
+
+// Calculates width column
+@function calculateWidth($columnNumber) {
+  @return unquote((100 / $gridColumns) * $columnNumber + '%');
+}
+
+// Generate responsive spacing
+@mixin responsiveSpacing($colPrefix) {
+  @if $colPrefix == map-get($breakpointsPrefix, full) {
+    margin-left: -#{map-get($gridSpacing, full)};
+    width: calc(100% + #{map-get($gridSpacing, full)});
+    padding: 0 map-get($gridSpacing, full);
+  } @else if $colPrefix == map-get($breakpointsPrefix, md) {
+    margin-left: -#{map-get($gridSpacing, md)};
+    width: calc(100% + #{map-get($gridSpacing, md)});
+    padding: 0 map-get($gridSpacing, md);
+  }
+  > [class*='col_'] {
+    @if $colPrefix == map-get($breakpointsPrefix, full) {
+      padding-top: map-get($gridSpacing, full);
+      padding-left: map-get($gridSpacing, full);
+    } @else if $colPrefix == map-get($breakpointsPrefix, md) {
+      padding-top: map-get($gridSpacing, md);
+      padding-left: map-get($gridSpacing, md);
+    }
+  }
+}
+
+// Generate offset by margin-left
+@mixin generateOffset($columnNumber) {
+  @if $columnNumber == $gridColumns {
+    margin-left: 100%;
+  } @else if $columnNumber != $gridColumns and $columnNumber != 0 {
+    margin-left: (100 / ($gridColumns / $columnNumber)) * 1%;
+  } @else if $columnNumber == 0 {
+    margin-left: 0;
+  }
+}
+
+// Generate classes for each breakpoints
+@mixin contentFlexboxGrid($colPrefix) {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+
+  // Classes next to container_row. Example:
+  // <div class="container_row row__between" />
+  @each $key, $value in $justifyContent {
+    &.row#{$colPrefix}__#{$key} {
+      justify-content: $value;
+    }
+  }
+
+  // <div class="container_row row_align__center" />
+  @each $key, $value in $alignItems {
+    &.row_align#{$colPrefix}__#{$key} {
+      align-items: $value;
+    }
+  }
+
+  // <div class="container_row rowWrap" />
+  &.row_wrap#{$colPrefix} {
+    flex-wrap: wrap;
+  }
+
+  // <div class="container_row rowNoWrap" />
+  &.row_noWrap#{$colPrefix} {
+    flex-wrap: nowrap;
+  }
+
+  // <div class="container_row rowBlock" />
+  // This stop flex properties and keep the width of the columns
+  &.row_block#{$colPrefix} {
+    display: block;
+  }
+
+  // To add spacing between columns
+  // <div class="container_row rowSpacing" />
+  &.row_spacing {
+    @include responsiveSpacing($colPrefix);
+  }
+
+  // Classes under container_row. Example:
+  // <div class="container_row" >
+  //   <div class="col_6 col_md_12" />
+  @for $i from 1 through $gridColumns {
+    .col#{$colPrefix}_#{$i} {
+      flex: 0 0 calculateWidth($i);
+      max-width: calculateWidth($i);
+    }
+  }
+
+  // <div class="container_row" >
+  //   <div class="col_offset_4" />
+  @for $i from 1 through $gridColumns {
+    .col_offset#{$colPrefix}_#{$i} {
+      @include generateOffset($i);
+    }
+  }
+
+  // <div class="container_row" >
+  //   <div class="col_align__center" />
+  @each $key, $value in $alignItems {
+    .col_align#{$colPrefix}__#{$key} {
+      align-self: $value;
+    }
+  }
+
+  // <div class="container_row" >
+  //   <div class="col_hidden" />
+  .col_hidden#{$colPrefix} {
+    display: none;
+  }
+
+  // <div class="container_row" >
+  //   <div class="col_show" />
+  .col_show#{$colPrefix} {
+    display: flex;
+  }
+}
+
+// Generate all classes for container_row
+@mixin respond-to($media) {
+  @if $media == full {
+    @include contentFlexboxGrid(map-get($breakpointsPrefix, full));
+  } @else if $media == md {
+    @media (max-width: map-get($breakpoints, md )) {
+      @include contentFlexboxGrid(map-get($breakpointsPrefix, md));
+    }
+  }
+}
+
+// Main classes of grid: container and container_row
+.container {
+  margin: 0 auto;
+  max-width: $maxWidth;
+  width: 100%;
+  &_row {
+    @include respond-to(full);
+    @include respond-to(md);
+  }
+}

package/dist/scss/_mixin.scss

@@ -0,0 +1,70 @@
+@use './variables' as *;
+
+@mixin flex($justify, $align: flex-start) {
+  display: flex;
+  justify-content: $justify;
+  align-items: #{$align};
+}
+
+@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);
+  font-weight: map-get($fonts, #{$weight});
+}
+
+@mixin box($bg, $radius, $border: none) {
+  @warn "This box mixin is deprecated!";
+  @if ($bg == transparent) {
+    background: $bg;
+  } @else {
+    background: map-get($colors, $bg);
+  }
+  @if ($border == 'none') {
+    border: $border;
+  } @else if ($border != 'none') {
+    border: map-get($borders, md) solid map-get($colors, $border);
+  }
+  border-radius: $radius;
+}
+
+@mixin focusBorder() {
+  outline: none;
+  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: 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});
+}
+
+@mixin focus-style($theme: '') {
+  border-radius: 8px;
+  outline: none;
+
+  @if $theme == 'dark' {
+    box-shadow: 0 0 0 3px var(--color-gray-90), 0 0 0 5px var(--color-info-30);
+  } @else {
+    box-shadow: 0 0 0 3px var(--color-neutral-00),
+      0 0 0 5px var(--color-info-30);
+  }
+}