@weni/unnnic-system 1.10.19 → 1.10.21

package/src/assets/img/flag/pt-br.svg

@@ -1,21 +1,21 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0)">
-<rect x="5.00018" y="8.75049" width="29.9997" height="22.4998" fill="#2B9F5A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M20 11.563L7.81262 20.0004L20 28.4378L32.1874 20.0004L20 11.563Z" fill="#FFD018"/>
-<path d="M25.625 20.0004C25.625 23.1069 23.1066 25.6253 20 25.6253C16.8934 25.6253 14.3751 23.1069 14.3751 20.0004C14.3751 16.8938 16.8934 14.3754 20 14.3754C23.1066 14.3754 25.625 16.8938 25.625 20.0004Z" fill="#41479B"/>
-<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="14" y="14" width="12" height="12">
-<path d="M25.625 20.0004C25.625 23.1069 23.1066 25.6253 20 25.6253C16.8934 25.6253 14.3751 23.1069 14.3751 20.0004C14.3751 16.8938 16.8934 14.3754 20 14.3754C23.1066 14.3754 25.625 16.8938 25.625 20.0004Z" fill="#41479B"/>
-</mask>
-<g mask="url(#mask0)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5145 18.8243L13.4375 18.1254C13.3604 17.4265 13.3605 17.4265 13.3607 17.4265L13.3653 17.426L13.3762 17.4248L13.416 17.4207C13.4502 17.4173 13.4998 17.4126 13.5635 17.407C13.6908 17.3957 13.8746 17.3811 14.1046 17.3669C14.5643 17.3385 15.2108 17.3117 15.9628 17.3178C17.4554 17.3299 19.4102 17.4717 21.1474 18.0151C22.8725 18.5547 24.3406 19.3889 25.3724 20.082C25.89 20.4296 26.3021 20.7446 26.5866 20.9743C26.729 21.0892 26.8397 21.1831 26.916 21.2492C26.9542 21.2823 26.9837 21.3085 27.0044 21.327L27.0286 21.3489L27.0357 21.3553L27.0379 21.3573C27.038 21.3575 27.0392 21.3586 26.5624 21.8753C26.0856 22.3921 26.0857 22.3922 26.0858 22.3922L26.0826 22.3893L26.0662 22.3746C26.0509 22.3609 26.0269 22.3396 25.9946 22.3116C25.9299 22.2554 25.8319 22.1723 25.7032 22.0684C25.4458 21.8606 25.0669 21.5707 24.5884 21.2493C23.6281 20.6044 22.2837 19.844 20.7276 19.3572C19.1835 18.8742 17.3883 18.7356 15.9513 18.724C15.2384 18.7182 14.6252 18.7436 14.1913 18.7704C13.9746 18.7838 13.8031 18.7975 13.6869 18.8078C13.6288 18.8129 13.5846 18.8171 13.5554 18.82L13.5232 18.8233L13.5145 18.8243Z" fill="#F5F8FB"/>
-</g>
-<path d="M18.1251 22.3441C18.1251 22.603 17.9152 22.8129 17.6563 22.8129C17.3974 22.8129 17.1876 22.603 17.1876 22.3441C17.1876 22.0852 17.3974 21.8754 17.6563 21.8754C17.9152 21.8754 18.1251 22.0852 18.1251 22.3441Z" fill="#F5F8FB"/>
-<path d="M20.9375 23.2816C20.9375 23.5405 20.7276 23.7504 20.4687 23.7504C20.2099 23.7504 20 23.5405 20 23.2816C20 23.0227 20.2099 22.8129 20.4687 22.8129C20.7276 22.8129 20.9375 23.0227 20.9375 23.2816Z" fill="#F5F8FB"/>
-<path d="M22.8125 22.3441C22.8125 22.603 22.6026 22.8129 22.3437 22.8129C22.0849 22.8129 21.875 22.603 21.875 22.3441C21.875 22.0852 22.0849 21.8754 22.3437 21.8754C22.6026 21.8754 22.8125 22.0852 22.8125 22.3441Z" fill="#F5F8FB"/>
-</g>
-<defs>
-<clipPath id="clip0">
-<rect width="40" height="39.9996" fill="white" transform="translate(0 0.000366211)"/>
-</clipPath>
-</defs>
-</svg>
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect x="5.00018" y="8.75049" width="29.9997" height="22.4998" fill="#2B9F5A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 11.563L7.81262 20.0004L20 28.4378L32.1874 20.0004L20 11.563Z" fill="#FFD018"/>
+<path d="M25.625 20.0004C25.625 23.1069 23.1066 25.6253 20 25.6253C16.8934 25.6253 14.3751 23.1069 14.3751 20.0004C14.3751 16.8938 16.8934 14.3754 20 14.3754C23.1066 14.3754 25.625 16.8938 25.625 20.0004Z" fill="#41479B"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="14" y="14" width="12" height="12">
+<path d="M25.625 20.0004C25.625 23.1069 23.1066 25.6253 20 25.6253C16.8934 25.6253 14.3751 23.1069 14.3751 20.0004C14.3751 16.8938 16.8934 14.3754 20 14.3754C23.1066 14.3754 25.625 16.8938 25.625 20.0004Z" fill="#41479B"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5145 18.8243L13.4375 18.1254C13.3604 17.4265 13.3605 17.4265 13.3607 17.4265L13.3653 17.426L13.3762 17.4248L13.416 17.4207C13.4502 17.4173 13.4998 17.4126 13.5635 17.407C13.6908 17.3957 13.8746 17.3811 14.1046 17.3669C14.5643 17.3385 15.2108 17.3117 15.9628 17.3178C17.4554 17.3299 19.4102 17.4717 21.1474 18.0151C22.8725 18.5547 24.3406 19.3889 25.3724 20.082C25.89 20.4296 26.3021 20.7446 26.5866 20.9743C26.729 21.0892 26.8397 21.1831 26.916 21.2492C26.9542 21.2823 26.9837 21.3085 27.0044 21.327L27.0286 21.3489L27.0357 21.3553L27.0379 21.3573C27.038 21.3575 27.0392 21.3586 26.5624 21.8753C26.0856 22.3921 26.0857 22.3922 26.0858 22.3922L26.0826 22.3893L26.0662 22.3746C26.0509 22.3609 26.0269 22.3396 25.9946 22.3116C25.9299 22.2554 25.8319 22.1723 25.7032 22.0684C25.4458 21.8606 25.0669 21.5707 24.5884 21.2493C23.6281 20.6044 22.2837 19.844 20.7276 19.3572C19.1835 18.8742 17.3883 18.7356 15.9513 18.724C15.2384 18.7182 14.6252 18.7436 14.1913 18.7704C13.9746 18.7838 13.8031 18.7975 13.6869 18.8078C13.6288 18.8129 13.5846 18.8171 13.5554 18.82L13.5232 18.8233L13.5145 18.8243Z" fill="#F5F8FB"/>
+</g>
+<path d="M18.1251 22.3441C18.1251 22.603 17.9152 22.8129 17.6563 22.8129C17.3974 22.8129 17.1876 22.603 17.1876 22.3441C17.1876 22.0852 17.3974 21.8754 17.6563 21.8754C17.9152 21.8754 18.1251 22.0852 18.1251 22.3441Z" fill="#F5F8FB"/>
+<path d="M20.9375 23.2816C20.9375 23.5405 20.7276 23.7504 20.4687 23.7504C20.2099 23.7504 20 23.5405 20 23.2816C20 23.0227 20.2099 22.8129 20.4687 22.8129C20.7276 22.8129 20.9375 23.0227 20.9375 23.2816Z" fill="#F5F8FB"/>
+<path d="M22.8125 22.3441C22.8125 22.603 22.6026 22.8129 22.3437 22.8129C22.0849 22.8129 21.875 22.603 21.875 22.3441C21.875 22.0852 22.0849 21.8754 22.3437 21.8754C22.6026 21.8754 22.8125 22.0852 22.8125 22.3441Z" fill="#F5F8FB"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="40" height="39.9996" fill="white" transform="translate(0 0.000366211)"/>
+</clipPath>
+</defs>
+</svg>

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