@weni/unnnic-system 1.10.21 → 1.10.22

package/.eslintrc.js

@@ -3,18 +3,23 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ['plugin:vue/essential', '@vue/airbnb'],
+  extends: [
+    'plugin:vue/essential',
+    '@vue/airbnb',
+  ],
   parserOptions: {
     parser: 'babel-eslint',
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'comma-dangle': ['error', 'always-multiline'],
   },
   overrides: [
     {
-      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'],
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
+      ],
       env: {
         jest: true,
       },

package/README.md

@@ -1,2 +1,2 @@
-# unnnic
-Design system
+# unnnic
+Design system

package/dist/scss/colors.scss

@@ -1,97 +1,97 @@
-/* Background */
-$unnnic-color-background-solo: #E8F4F4;
-$unnnic-color-background-sky: #F4F6F8;
-$unnnic-color-background-grass: #F5F6F6;
-$unnnic-color-background-carpet: #F9F9F9;
-$unnnic-color-background-snow: #FFFFFF;
-
-/* Neutral */
-$unnnic-color-neutral-black: #272B33;
-$unnnic-color-neutral-darkest: #3B414D;
-$unnnic-color-neutral-dark: #4E5666;
-$unnnic-color-neutral-cloudy: #67738B;
-$unnnic-color-neutral-cleanest: #9CACCC;
-$unnnic-color-neutral-clean: #D0D3D9;
-$unnnic-color-neutral-soft: #E2E6ED;
-$unnnic-color-neutral-lightest: #F4F6F8;
-$unnnic-color-neutral-light: #F9F9F9;
-$unnnic-color-neutral-snow: #FFFFFF;
-
-/* Feedback colors */
-$unnnic-color-feedback-red: #FF4545;
-$unnnic-color-feedback-green: #47D66F;
-$unnnic-color-feedback-yellow: #FDBA38;
-$unnnic-color-feedback-blue: #2856FC;
-$unnnic-color-feedback-grey: #ECECEC;
-
-/* Auxiliary colors */
-$unnnic-color-aux-blue: #00DED3;
-$unnnic-color-aux-purple: #8416DE;
-$unnnic-color-aux-orange: #F4691F;
-$unnnic-color-aux-lemon: #CCDE0B;
-$unnnic-color-aux-pink: #DE16BA;
-
-$unnnic-color-aux-baby-blue: #8EDEF5;
-$unnnic-color-aux-baby-yellow: #FBF391;
-$unnnic-color-aux-baby-red: #F48E8E;
-$unnnic-color-aux-baby-green: #B2FCA6;
-$unnnic-color-aux-baby-pink: #FFCBF6;
-
-/* Brand */
-$unnnic-color-brand-weni: #00DED2;
-$unnnic-color-brand-weni-dark: #005E5A;
-$unnnic-color-brand-weni-soft: #009E96;
-$unnnic-color-brand-sec-dark: #262626;
-$unnnic-color-brand-sec-soft: #808080;
-$unnnic-color-brand-sec: #CCCCCC;
-
-:export{
-    unnnicColorBackgroundSolo: $unnnic-color-background-solo;
-}
-
-$scheme-colors:
-  "background-solo" $unnnic-color-background-solo,
-  "background-sky" $unnnic-color-background-sky,
-  "background-grass" $unnnic-color-background-grass,
-  "background-carpet" $unnnic-color-background-carpet,
-  "background-snow" $unnnic-color-background-snow,
-
-  /* Neutral */
-  "neutral-black" $unnnic-color-neutral-black,
-  "neutral-darkest" $unnnic-color-neutral-darkest,
-  "neutral-dark" $unnnic-color-neutral-dark,
-  "neutral-cloudy" $unnnic-color-neutral-cloudy,
-  "neutral-cleanest" $unnnic-color-neutral-cleanest,
-  "neutral-clean" $unnnic-color-neutral-clean,
-  "neutral-soft" $unnnic-color-neutral-soft,
-  "neutral-lightest" $unnnic-color-neutral-lightest,
-  "neutral-light" $unnnic-color-neutral-light,
-  "neutral-snow" $unnnic-color-neutral-snow,
-
-  /* Feedback colors */
-  "feedback-red" $unnnic-color-feedback-red,
-  "feedback-green" $unnnic-color-feedback-green,
-  "feedback-yellow" $unnnic-color-feedback-yellow,
-  "feedback-blue" $unnnic-color-feedback-blue,
-  "feedback-grey" $unnnic-color-feedback-grey,
-
-  /* Auxiliary colors */
-  "aux-blue" $unnnic-color-aux-blue,
-  "aux-purple" $unnnic-color-aux-purple,
-  "aux-orange" $unnnic-color-aux-orange,
-  "aux-lemon" $unnnic-color-aux-lemon,
-  "aux-pink" $unnnic-color-aux-pink,
-
-  "aux-baby-blue" $unnnic-color-aux-baby-blue,
-  "aux-baby-yellow" $unnnic-color-aux-baby-yellow,
-  "aux-baby-red" $unnnic-color-aux-baby-red,
-  "aux-baby-green" $unnnic-color-aux-baby-green,
-  "aux-baby-pink" $unnnic-color-aux-baby-pink,
-
-  /* Brand */
-  "brand-weni" $unnnic-color-brand-weni,
-  "brand-weni-dark" $unnnic-color-brand-weni-dark,
-  "brand-weni-soft" $unnnic-color-brand-weni-soft,
-  "brand-sec-dark" $unnnic-color-brand-sec-dark,
-  "brand-sec-soft" $unnnic-color-brand-sec-soft,
-  "brand-sec" $unnnic-color-brand-sec;
+/* Background */
+$unnnic-color-background-solo: #E8F4F4;
+$unnnic-color-background-sky: #F4F6F8;
+$unnnic-color-background-grass: #F5F6F6;
+$unnnic-color-background-carpet: #F9F9F9;
+$unnnic-color-background-snow: #FFFFFF;
+
+/* Neutral */
+$unnnic-color-neutral-black: #272B33;
+$unnnic-color-neutral-darkest: #3B414D;
+$unnnic-color-neutral-dark: #4E5666;
+$unnnic-color-neutral-cloudy: #67738B;
+$unnnic-color-neutral-cleanest: #9CACCC;
+$unnnic-color-neutral-clean: #D0D3D9;
+$unnnic-color-neutral-soft: #E2E6ED;
+$unnnic-color-neutral-lightest: #F4F6F8;
+$unnnic-color-neutral-light: #F9F9F9;
+$unnnic-color-neutral-snow: #FFFFFF;
+
+/* Feedback colors */
+$unnnic-color-feedback-red: #FF4545;
+$unnnic-color-feedback-green: #47D66F;
+$unnnic-color-feedback-yellow: #FDBA38;
+$unnnic-color-feedback-blue: #2856FC;
+$unnnic-color-feedback-grey: #ECECEC;
+
+/* Auxiliary colors */
+$unnnic-color-aux-blue: #00DED3;
+$unnnic-color-aux-purple: #8416DE;
+$unnnic-color-aux-orange: #F4691F;
+$unnnic-color-aux-lemon: #CCDE0B;
+$unnnic-color-aux-pink: #DE16BA;
+
+$unnnic-color-aux-baby-blue: #8EDEF5;
+$unnnic-color-aux-baby-yellow: #FBF391;
+$unnnic-color-aux-baby-red: #F48E8E;
+$unnnic-color-aux-baby-green: #B2FCA6;
+$unnnic-color-aux-baby-pink: #FFCBF6;
+
+/* Brand */
+$unnnic-color-brand-weni: #00DED2;
+$unnnic-color-brand-weni-dark: #005E5A;
+$unnnic-color-brand-weni-soft: #009E96;
+$unnnic-color-brand-sec-dark: #262626;
+$unnnic-color-brand-sec-soft: #808080;
+$unnnic-color-brand-sec: #CCCCCC;
+
+:export{
+    unnnicColorBackgroundSolo: $unnnic-color-background-solo;
+}
+
+$scheme-colors:
+  "background-solo" $unnnic-color-background-solo,
+  "background-sky" $unnnic-color-background-sky,
+  "background-grass" $unnnic-color-background-grass,
+  "background-carpet" $unnnic-color-background-carpet,
+  "background-snow" $unnnic-color-background-snow,
+
+  /* Neutral */
+  "neutral-black" $unnnic-color-neutral-black,
+  "neutral-darkest" $unnnic-color-neutral-darkest,
+  "neutral-dark" $unnnic-color-neutral-dark,
+  "neutral-cloudy" $unnnic-color-neutral-cloudy,
+  "neutral-cleanest" $unnnic-color-neutral-cleanest,
+  "neutral-clean" $unnnic-color-neutral-clean,
+  "neutral-soft" $unnnic-color-neutral-soft,
+  "neutral-lightest" $unnnic-color-neutral-lightest,
+  "neutral-light" $unnnic-color-neutral-light,
+  "neutral-snow" $unnnic-color-neutral-snow,
+
+  /* Feedback colors */
+  "feedback-red" $unnnic-color-feedback-red,
+  "feedback-green" $unnnic-color-feedback-green,
+  "feedback-yellow" $unnnic-color-feedback-yellow,
+  "feedback-blue" $unnnic-color-feedback-blue,
+  "feedback-grey" $unnnic-color-feedback-grey,
+
+  /* Auxiliary colors */
+  "aux-blue" $unnnic-color-aux-blue,
+  "aux-purple" $unnnic-color-aux-purple,
+  "aux-orange" $unnnic-color-aux-orange,
+  "aux-lemon" $unnnic-color-aux-lemon,
+  "aux-pink" $unnnic-color-aux-pink,
+
+  "aux-baby-blue" $unnnic-color-aux-baby-blue,
+  "aux-baby-yellow" $unnnic-color-aux-baby-yellow,
+  "aux-baby-red" $unnnic-color-aux-baby-red,
+  "aux-baby-green" $unnnic-color-aux-baby-green,
+  "aux-baby-pink" $unnnic-color-aux-baby-pink,
+
+  /* Brand */
+  "brand-weni" $unnnic-color-brand-weni,
+  "brand-weni-dark" $unnnic-color-brand-weni-dark,
+  "brand-weni-soft" $unnnic-color-brand-weni-soft,
+  "brand-sec-dark" $unnnic-color-brand-sec-dark,
+  "brand-sec-soft" $unnnic-color-brand-sec-soft,
+  "brand-sec" $unnnic-color-brand-sec;

package/dist/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/dist/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/dist/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/dist/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;
+    }
+}