@weni/unnnic-system 1.3.2 → 1.4.1

package/src/assets/scss/fonts.scss

@@ -1,34 +1,34 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
-
-// Font family
-$unnnic-font-family-primary: 'Aleo', serif;
-$unnnic-font-family-secondary: Lato;
-
-// Font weight
-$unnnic-font-weight-black: 900;
-$unnnic-font-weight-bold: 700;
-$unnnic-font-weight-regular: 400;
-$unnnic-font-weight-light: 300;
-
-// Font size
-$unnnic-font-size-body-sm: 0.5rem;
-$unnnic-font-size-body-md: 0.75rem;
-$unnnic-font-size-body-gt: 0.875rem;
-$unnnic-font-size-body-lg: 1rem;
-
-$unnnic-font-size-title-sm: 1.25rem;
-$unnnic-font-size-title-md: 1.5rem;
-$unnnic-font-size-title-lg: 2rem;
-
-$unnnic-font-size-h4: 2.5rem;
-$unnnic-font-size-h3: 3rem;
-$unnnic-font-size-h2: 3.5rem;
-$unnnic-font-size-h1: 4.5rem;
-
-// Line height
-// Add this to font size when using
-$unnnic-line-height-small: 0.25rem;
-$unnnic-line-height-medium: 0.5rem;
-$unnnic-line-height-md: $unnnic-line-height-medium;
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+
+// Font family
+$unnnic-font-family-primary: 'Aleo', serif;
+$unnnic-font-family-secondary: Lato;
+
+// Font weight
+$unnnic-font-weight-black: 900;
+$unnnic-font-weight-bold: 700;
+$unnnic-font-weight-regular: 400;
+$unnnic-font-weight-light: 300;
+
+// Font size
+$unnnic-font-size-body-sm: 0.5rem;
+$unnnic-font-size-body-md: 0.75rem;
+$unnnic-font-size-body-gt: 0.875rem;
+$unnnic-font-size-body-lg: 1rem;
+
+$unnnic-font-size-title-sm: 1.25rem;
+$unnnic-font-size-title-md: 1.5rem;
+$unnnic-font-size-title-lg: 2rem;
+
+$unnnic-font-size-h4: 2.5rem;
+$unnnic-font-size-h3: 3rem;
+$unnnic-font-size-h2: 3.5rem;
+$unnnic-font-size-h1: 4.5rem;
+
+// Line height
+// Add this to font size when using
+$unnnic-line-height-small: 0.25rem;
+$unnnic-line-height-medium: 0.5rem;
+$unnnic-line-height-md: $unnnic-line-height-medium;
 $unnnic-line-height-large: 1rem;

package/src/assets/scss/grid.scss

@@ -1,52 +1,52 @@
-.unnnic-grid-xs {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
-    padding: 0 16px;
-}
-
-.unnnic-grid-sm {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
-    padding: 0 16px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-md {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
-    padding: 0 48px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-lg {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 64px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-xl {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 176px;
-    box-sizing: border-box;
-}
-
-.unnnic-grid-giant {
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
-    padding: 0 24px;
-    box-sizing: border-box;
-}
-
-@for $i from 1 to 13 {
-    .unnnic-grid-span-#{$i} {
-        grid-column: span #{$i};
-    }
+.unnnic-grid-xs {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+}
+
+.unnnic-grid-sm {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/4)*100% - (16px * 3/4)));
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-md {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/6)*100% - (16px * 5/6)));
+    padding: 0 48px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-lg {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 64px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-xl {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 176px;
+    box-sizing: border-box;
+}
+
+.unnnic-grid-giant {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, calc((1/12)*100% - (16px * 11/12)));
+    padding: 0 24px;
+    box-sizing: border-box;
+}
+
+@for $i from 1 to 13 {
+    .unnnic-grid-span-#{$i} {
+        grid-column: span #{$i};
+    }
 }

package/src/assets/scss/spacing.scss

@@ -1,92 +1,92 @@
-// Icon size
-$unnnic-icon-size-xl: 2.5rem;
-$unnnic-icon-size-lg: 2rem;
-$unnnic-icon-size-md: 1.5rem;
-$unnnic-icon-size-ant: 1.25rem;
-$unnnic-icon-size-sm: 1rem;
-$unnnic-icon-size-xs: 0.75rem;
-
-// Avatar size
-$unnnic-avatar-size-lg: 6.5rem;
-$unnnic-avatar-size-md: 4.5rem;
-$unnnic-avatar-size-sm: 2.5rem;
-$unnnic-avatar-size-xs: 2rem;
-$unnnic-avatar-size-nano: 1.25rem;
-
-// Border radius
-$unnnic-border-radius-sm: 0.25rem;
-$unnnic-border-radius-md: 0.5rem;
-$unnnic-border-radius-lg: 1rem;
-$unnnic-border-radius-pill: 37.5rem;
-
-// Border width
-$unnnic-border-width-thinner: 0.0625rem;
-$unnnic-border-width-thin: 0.125rem;
-$unnnic-border-width-thick: 0.25rem;
-
-// Shadow levels
-$unnnic-shadow-level-near: 0rem 0.25rem 8px rgba(0, 0, 0, .12);
-$unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
-$unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
-$unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
-
-// Opacity levels
-$unnnic-opacity-level-darkest: 0.8;
-$unnnic-opacity-level-dark: 0.64;
-$unnnic-opacity-level-clarifying: 0.48;
-$unnnic-opacity-level-overlay: 0.4;
-$unnnic-opacity-level-clear: 0.32;
-$unnnic-opacity-level-light: 0.16;
-$unnnic-opacity-level-extra-light: 0.08;
-
-// Spacing
-$unnnic-inset-nano: 0.5rem;
-$unnnic-inset-xs: 0.75rem;
-$unnnic-inset-sm: 1rem;
-$unnnic-inset-md: 1.5rem;
-$unnnic-inset-lg: 2rem;
-$unnnic-spacing-inset-nano: $unnnic-inset-nano;
-$unnnic-spacing-inset-xs: $unnnic-inset-xs;
-$unnnic-spacing-inset-sm: $unnnic-inset-sm;
-$unnnic-spacing-inset-md: $unnnic-inset-md;
-$unnnic-spacing-inset-lg: $unnnic-inset-lg;
-
-// Squish
-$unnnic-squish-nano: 0.5rem 1rem;
-$unnnic-squish-xs: 0.75rem 1rem;
-$unnnic-squish-sm: 0.75rem 1.5rem;
-$unnnic-squish-md: 1rem 1.5rem;
-$unnnic-squish-lg: 1.5rem 2rem;
-
-// Inline
-$unnnic-inline-nano: 0.25rem;
-$unnnic-inline-xs: 0.5rem;
-$unnnic-inline-ant: 0.75rem;
-$unnnic-inline-sm: 1rem;
-$unnnic-inline-md: 1.5rem;
-$unnnic-inline-lg: 2rem;
-$unnnic-inline-xl: 2.5rem;
-$unnnic-inline-giant: 3rem;
-$unnnic-inline-xgiant: 4rem;
-$unnnic-inline-awesome: 5rem;
-$unnnic-spacing-inline-nano: $unnnic-inline-nano;
-$unnnic-spacing-inline-xs: $unnnic-inline-xs;
-$unnnic-spacing-inline-ant: $unnnic-inline-ant;
-$unnnic-spacing-inline-sm: $unnnic-inline-sm;
-$unnnic-spacing-inline-md: $unnnic-inline-md;
-$unnnic-spacing-inline-lg: $unnnic-inline-lg;
-$unnnic-spacing-inline-xl: $unnnic-inline-xl;
-$unnnic-spacing-inline-giant: $unnnic-inline-giant;
-$unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
-$unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
-
-// Stack
-$unnnic-spacing-stack-nano: 0.25rem;
-$unnnic-spacing-stack-xs: 0.5rem;
-$unnnic-spacing-stack-sm: 1rem;
-$unnnic-spacing-stack-md: 1.5rem;
-$unnnic-spacing-stack-lg: 2rem;
-$unnnic-spacing-stack-xl: 2.5rem;
-$unnnic-spacing-stack-giant: 3rem;
-$unnnic-spacing-stack-xgiant: 4rem;
-$unnnic-spacing-stack-awesome: 5rem;
+// Icon size
+$unnnic-icon-size-xl: 2.5rem;
+$unnnic-icon-size-lg: 2rem;
+$unnnic-icon-size-md: 1.5rem;
+$unnnic-icon-size-ant: 1.25rem;
+$unnnic-icon-size-sm: 1rem;
+$unnnic-icon-size-xs: 0.75rem;
+
+// Avatar size
+$unnnic-avatar-size-lg: 6.5rem;
+$unnnic-avatar-size-md: 4.5rem;
+$unnnic-avatar-size-sm: 2.5rem;
+$unnnic-avatar-size-xs: 2rem;
+$unnnic-avatar-size-nano: 1.25rem;
+
+// Border radius
+$unnnic-border-radius-sm: 0.25rem;
+$unnnic-border-radius-md: 0.5rem;
+$unnnic-border-radius-lg: 1rem;
+$unnnic-border-radius-pill: 37.5rem;
+
+// Border width
+$unnnic-border-width-thinner: 0.0625rem;
+$unnnic-border-width-thin: 0.125rem;
+$unnnic-border-width-thick: 0.25rem;
+
+// Shadow levels
+$unnnic-shadow-level-near: 0rem 0.25rem 8px rgba(0, 0, 0, .12);
+$unnnic-shadow-level-separated: 0px 8px 16px rgba(0, 0, 0, .08);
+$unnnic-shadow-level-far: 0px 12px 32px rgba(0, 0, 0, .04);
+$unnnic-shadow-level-distant: 0px 20px 40px rgba(0, 0, 0, .06);
+
+// Opacity levels
+$unnnic-opacity-level-darkest: 0.8;
+$unnnic-opacity-level-dark: 0.64;
+$unnnic-opacity-level-clarifying: 0.48;
+$unnnic-opacity-level-overlay: 0.4;
+$unnnic-opacity-level-clear: 0.32;
+$unnnic-opacity-level-light: 0.16;
+$unnnic-opacity-level-extra-light: 0.08;
+
+// Spacing
+$unnnic-inset-nano: 0.5rem;
+$unnnic-inset-xs: 0.75rem;
+$unnnic-inset-sm: 1rem;
+$unnnic-inset-md: 1.5rem;
+$unnnic-inset-lg: 2rem;
+$unnnic-spacing-inset-nano: $unnnic-inset-nano;
+$unnnic-spacing-inset-xs: $unnnic-inset-xs;
+$unnnic-spacing-inset-sm: $unnnic-inset-sm;
+$unnnic-spacing-inset-md: $unnnic-inset-md;
+$unnnic-spacing-inset-lg: $unnnic-inset-lg;
+
+// Squish
+$unnnic-squish-nano: 0.5rem 1rem;
+$unnnic-squish-xs: 0.75rem 1rem;
+$unnnic-squish-sm: 0.75rem 1.5rem;
+$unnnic-squish-md: 1rem 1.5rem;
+$unnnic-squish-lg: 1.5rem 2rem;
+
+// Inline
+$unnnic-inline-nano: 0.25rem;
+$unnnic-inline-xs: 0.5rem;
+$unnnic-inline-ant: 0.75rem;
+$unnnic-inline-sm: 1rem;
+$unnnic-inline-md: 1.5rem;
+$unnnic-inline-lg: 2rem;
+$unnnic-inline-xl: 2.5rem;
+$unnnic-inline-giant: 3rem;
+$unnnic-inline-xgiant: 4rem;
+$unnnic-inline-awesome: 5rem;
+$unnnic-spacing-inline-nano: $unnnic-inline-nano;
+$unnnic-spacing-inline-xs: $unnnic-inline-xs;
+$unnnic-spacing-inline-ant: $unnnic-inline-ant;
+$unnnic-spacing-inline-sm: $unnnic-inline-sm;
+$unnnic-spacing-inline-md: $unnnic-inline-md;
+$unnnic-spacing-inline-lg: $unnnic-inline-lg;
+$unnnic-spacing-inline-xl: $unnnic-inline-xl;
+$unnnic-spacing-inline-giant: $unnnic-inline-giant;
+$unnnic-spacing-inline-xgiant: $unnnic-inline-xgiant;
+$unnnic-spacing-inline-awesome: $unnnic-inline-awesome;
+
+// Stack
+$unnnic-spacing-stack-nano: 0.25rem;
+$unnnic-spacing-stack-xs: 0.5rem;
+$unnnic-spacing-stack-sm: 1rem;
+$unnnic-spacing-stack-md: 1.5rem;
+$unnnic-spacing-stack-lg: 2rem;
+$unnnic-spacing-stack-xl: 2.5rem;
+$unnnic-spacing-stack-giant: 3rem;
+$unnnic-spacing-stack-xgiant: 4rem;
+$unnnic-spacing-stack-awesome: 5rem;

package/src/assets/scss/unnnic.scss

@@ -1,10 +1,10 @@
-@import './colors.scss';
-@import './fonts.scss';
-@import './spacing.scss';
-@import './grid.scss';
-
-.unnnic {
-    &--clickable {
-        cursor: pointer;
-    }
-}
+@import './colors.scss';
+@import './fonts.scss';
+@import './spacing.scss';
+@import './grid.scss';
+
+.unnnic {
+    &--clickable {
+        cursor: pointer;
+    }
+}

package/src/components/Accordion/Accordion.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon-svg.vue';
+import unnnicIconSvg from '../Icon.vue';
 
 export default {
   model: {

package/src/components/Alert/Alert.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import unnnicIconSvg from '../Icon-svg.vue';
+import unnnicIconSvg from '../Icon.vue';
 import Version1dot1 from './Version1dot1.vue';
 
 export default {

package/src/components/Alert/Version1dot1.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   components: {

package/src/components/AvatarIcon/AvatarIcon.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {

package/src/components/Banner/InfoBanner.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-banner',

package/src/components/Breadcrumb/Breadcrumb.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-breadcrumb',

package/src/components/Button/Button.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-button',

package/src/components/Button/ButtonIcon.vue

@@ -1,18 +1,18 @@
 <template>
   <button
-    :class="['button-icon', size]"
+    :class="['button-icon', size, type]"
     v-on="$listeners"
   >
     <unnnic-icon
       :icon="icon"
-      scheme="neutral-darkest"
+      :scheme="iconScheme"
       size="ant"
     ></unnnic-icon>
   </button>
 </template>
 
 <script>
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {
@@ -20,6 +20,11 @@ export default {
   },
 
   props: {
+    type: {
+      type: String,
+      default: 'secondary',
+    },
+
     size: {
       type: String,
       required: true,
@@ -33,6 +38,16 @@ export default {
       required: true,
     },
   },
+
+  computed: {
+    iconScheme() {
+      if (this.type === 'primary') {
+        return 'neutral-snow';
+      }
+
+      return 'neutral-darkest';
+    },
+  },
 };
 </script>
 
@@ -40,23 +55,9 @@ export default {
 @import "../../assets/scss/unnnic.scss";
 
 .button-icon {
-  background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
-  border-radius: $unnnic-border-radius-sm;
-  position: relative;
   border: 0;
   cursor: pointer;
-
-  &:before {
-    content: " ";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
-    border-radius: inherit;
-    pointer-events: none;
-  }
+  border-radius: $unnnic-border-radius-sm;
 
   &.small {
     padding: $unnnic-spacing-inset-nano;
@@ -66,11 +67,36 @@ export default {
     padding: $unnnic-spacing-inset-xs;
   }
 
-  &:hover {
-    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
+  &.primary {
+    background-color: $unnnic-color-neutral-darkest;
+
+    &:hover {
+      opacity: $unnnic-opacity-level-clear;
+    }
+  }
+
+  &.secondary {
+    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
+    position: relative;
 
     &:before {
-      border: 0;
+      content: " ";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    &:hover {
+      background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
+
+      &:before {
+        border: 0;
+      }
     }
   }
 }

package/src/components/Card/BlankCard.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/CardCompany.vue

@@ -64,7 +64,7 @@
 
 <script>
 import UnnnicTag from '../Tag/Tag.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 import UnnnicDropdown from '../Dropdown/Dropdown.vue';
 import UnnnicDropdownItem from '../Dropdown/DropdownItem.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';

package/src/components/Card/CardData.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import unnnicIcon from '../Icon-svg.vue';
+import unnnicIcon from '../Icon.vue';
 
 export default {
   components: { unnnicIcon },

package/src/components/Card/ContentCard.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/DashCard.vue

@@ -31,7 +31,7 @@
 
 <script>
 import UnnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/MarketplaceCard.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/StatusCard.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   name: 'unnnic-card',

package/src/components/Card/TitleCard.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 import ToolTip from '../ToolTip/ToolTip.vue';
 
 export default {

package/src/components/CardProject/CardProject.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import unnnicIcon from '../Icon-svg.vue';
+import unnnicIcon from '../Icon.vue';
 import unnnicDropdown from '../Dropdown/Dropdown.vue';
 import unnnicTag from '../Tag/Tag.vue';
 import unnnicAvatarIcon from '../AvatarIcon/AvatarIcon.vue';

package/src/components/Carousel/TagCarousel.vue

@@ -49,7 +49,7 @@
 
 <script>
 import UnnnicTag from '../Tag/Tag.vue';
-import UnnnicIconSvg from '../Icon-svg.vue';
+import UnnnicIconSvg from '../Icon.vue';
 
 export default {
   name: 'unnnic-tag-carousel',

package/src/components/ChatText/ChatText.vue

@@ -27,7 +27,7 @@
 
 <script>
 import UnnnicToolTip from '../ToolTip/ToolTip.vue';
-import UnnnicIcon from '../Icon-svg.vue';
+import UnnnicIcon from '../Icon.vue';
 
 export default {
   components: {