@weni/unnnic-system 1.16.17 → 1.16.19-develop.0

package/src/assets/scss/fonts.scss

@@ -1,123 +1,123 @@
-@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');
-
-$unnnic-font-size: 16px;
-
-// 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.5 * $unnnic-font-size;
-$unnnic-font-size-body-md: 0.75 * $unnnic-font-size;
-$unnnic-font-size-body-gt: 0.875 * $unnnic-font-size;
-$unnnic-font-size-body-lg: 1 * $unnnic-font-size;
-
-$unnnic-font-size-title-sm: 1.25 * $unnnic-font-size;
-$unnnic-font-size-title-md: 1.5 * $unnnic-font-size;
-$unnnic-font-size-title-lg: 2 * $unnnic-font-size;
-
-$unnnic-font-size-h4: 2.5 * $unnnic-font-size;
-$unnnic-font-size-h3: 3 * $unnnic-font-size;
-$unnnic-font-size-h2: 3.5 * $unnnic-font-size;
-$unnnic-font-size-h1: 4.5 * $unnnic-font-size;
-
-// Line height
-// Add this to font size when using
-$unnnic-line-height-small: 0.25 * $unnnic-font-size;
-$unnnic-line-height-medium: 0.5 * $unnnic-font-size;
-$unnnic-line-height-md: $unnnic-line-height-medium;
-$unnnic-line-height-large: 1 * $unnnic-font-size;
-
-.unnnic-font {
-  font-weight: $unnnic-font-weight-regular;
-  font-family: $unnnic-font-family-primary;
-
-  $font-sizes:
-    "body-sm" $unnnic-font-size-body-sm,
-    "body-md" $unnnic-font-size-body-md,
-    "body-gt" $unnnic-font-size-body-gt,
-    "body-lg" $unnnic-font-size-body-lg,
-
-    "title-sm" $unnnic-font-size-title-sm,
-    "title-md" $unnnic-font-size-title-md,
-    "title-lg" $unnnic-font-size-title-lg,
-
-    "h4" $unnnic-font-size-h4,
-    "h3" $unnnic-font-size-h3,
-    "h2" $unnnic-font-size-h2,
-    "h1" $unnnic-font-size-h1;
-
-  $font-weights:
-    "black" $unnnic-font-weight-black,
-    "bold" $unnnic-font-weight-bold,
-    "light" $unnnic-font-weight-light;
-
-  &.secondary {
-    font-family: $unnnic-font-family-secondary;
-  }
-
-  @each $name, $size in $font-sizes {
-    &.#{$name} {
-      font-size: $size;
-      line-height: $size + $unnnic-line-height-md;
-    }
-  }
-
-  @each $name, $weight in $font-weights {
-    &.#{$name} {
-      font-weight: $weight;
-    }
-  }
-}
-
-
-.u {
-  &.font {
-    font-weight: $unnnic-font-weight-regular;
-    font-family: $unnnic-font-family-primary;
-
-    $font-sizes:
-      "body-sm" $unnnic-font-size-body-sm,
-      "body-md" $unnnic-font-size-body-md,
-      "body-gt" $unnnic-font-size-body-gt,
-      "body-lg" $unnnic-font-size-body-lg,
-
-      "title-sm" $unnnic-font-size-title-sm,
-      "title-md" $unnnic-font-size-title-md,
-      "title-lg" $unnnic-font-size-title-lg,
-
-      "h4" $unnnic-font-size-h4,
-      "h3" $unnnic-font-size-h3,
-      "h2" $unnnic-font-size-h2,
-      "h1" $unnnic-font-size-h1;
-
-    $font-weights:
-      "black" $unnnic-font-weight-black,
-      "bold" $unnnic-font-weight-bold,
-      "light" $unnnic-font-weight-light;
-
-    &.secondary {
-      font-family: $unnnic-font-family-secondary;
-    }
-
-    @each $name, $size in $font-sizes {
-      &.#{$name} {
-        font-size: $size;
-        line-height: $size + $unnnic-line-height-md;
-      }
-    }
-
-    @each $name, $weight in $font-weights {
-      &.#{$name} {
-        font-weight: $weight;
-      }
-    }
-  }
-}
+@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');
+
+$unnnic-font-size: 16px;
+
+// 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.5 * $unnnic-font-size;
+$unnnic-font-size-body-md: 0.75 * $unnnic-font-size;
+$unnnic-font-size-body-gt: 0.875 * $unnnic-font-size;
+$unnnic-font-size-body-lg: 1 * $unnnic-font-size;
+
+$unnnic-font-size-title-sm: 1.25 * $unnnic-font-size;
+$unnnic-font-size-title-md: 1.5 * $unnnic-font-size;
+$unnnic-font-size-title-lg: 2 * $unnnic-font-size;
+
+$unnnic-font-size-h4: 2.5 * $unnnic-font-size;
+$unnnic-font-size-h3: 3 * $unnnic-font-size;
+$unnnic-font-size-h2: 3.5 * $unnnic-font-size;
+$unnnic-font-size-h1: 4.5 * $unnnic-font-size;
+
+// Line height
+// Add this to font size when using
+$unnnic-line-height-small: 0.25 * $unnnic-font-size;
+$unnnic-line-height-medium: 0.5 * $unnnic-font-size;
+$unnnic-line-height-md: $unnnic-line-height-medium;
+$unnnic-line-height-large: 1 * $unnnic-font-size;
+
+.unnnic-font {
+  font-weight: $unnnic-font-weight-regular;
+  font-family: $unnnic-font-family-primary;
+
+  $font-sizes:
+    "body-sm" $unnnic-font-size-body-sm,
+    "body-md" $unnnic-font-size-body-md,
+    "body-gt" $unnnic-font-size-body-gt,
+    "body-lg" $unnnic-font-size-body-lg,
+
+    "title-sm" $unnnic-font-size-title-sm,
+    "title-md" $unnnic-font-size-title-md,
+    "title-lg" $unnnic-font-size-title-lg,
+
+    "h4" $unnnic-font-size-h4,
+    "h3" $unnnic-font-size-h3,
+    "h2" $unnnic-font-size-h2,
+    "h1" $unnnic-font-size-h1;
+
+  $font-weights:
+    "black" $unnnic-font-weight-black,
+    "bold" $unnnic-font-weight-bold,
+    "light" $unnnic-font-weight-light;
+
+  &.secondary {
+    font-family: $unnnic-font-family-secondary;
+  }
+
+  @each $name, $size in $font-sizes {
+    &.#{$name} {
+      font-size: $size;
+      line-height: $size + $unnnic-line-height-md;
+    }
+  }
+
+  @each $name, $weight in $font-weights {
+    &.#{$name} {
+      font-weight: $weight;
+    }
+  }
+}
+
+
+.u {
+  &.font {
+    font-weight: $unnnic-font-weight-regular;
+    font-family: $unnnic-font-family-primary;
+
+    $font-sizes:
+      "body-sm" $unnnic-font-size-body-sm,
+      "body-md" $unnnic-font-size-body-md,
+      "body-gt" $unnnic-font-size-body-gt,
+      "body-lg" $unnnic-font-size-body-lg,
+
+      "title-sm" $unnnic-font-size-title-sm,
+      "title-md" $unnnic-font-size-title-md,
+      "title-lg" $unnnic-font-size-title-lg,
+
+      "h4" $unnnic-font-size-h4,
+      "h3" $unnnic-font-size-h3,
+      "h2" $unnnic-font-size-h2,
+      "h1" $unnnic-font-size-h1;
+
+    $font-weights:
+      "black" $unnnic-font-weight-black,
+      "bold" $unnnic-font-weight-bold,
+      "light" $unnnic-font-weight-light;
+
+    &.secondary {
+      font-family: $unnnic-font-family-secondary;
+    }
+
+    @each $name, $size in $font-sizes {
+      &.#{$name} {
+        font-size: $size;
+        line-height: $size + $unnnic-line-height-md;
+      }
+    }
+
+    @each $name, $weight in $font-weights {
+      &.#{$name} {
+        font-weight: $weight;
+      }
+    }
+  }
+}

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.5 * $unnnic-font-size;
-$unnnic-icon-size-lg: 2 * $unnnic-font-size;
-$unnnic-icon-size-md: 1.5 * $unnnic-font-size;
-$unnnic-icon-size-ant: 1.25 * $unnnic-font-size;
-$unnnic-icon-size-sm: 1 * $unnnic-font-size;
-$unnnic-icon-size-xs: 0.75 * $unnnic-font-size;
-
-// Avatar size
-$unnnic-avatar-size-lg: 6.5 * $unnnic-font-size;
-$unnnic-avatar-size-md: 4.5 * $unnnic-font-size;
-$unnnic-avatar-size-sm: 2.5 * $unnnic-font-size;
-$unnnic-avatar-size-xs: 2 * $unnnic-font-size;
-$unnnic-avatar-size-nano: 1.25 * $unnnic-font-size;
-
-// Border radius
-$unnnic-border-radius-sm: 0.25 * $unnnic-font-size;
-$unnnic-border-radius-md: 0.5 * $unnnic-font-size;
-$unnnic-border-radius-lg: 1 * $unnnic-font-size;
-$unnnic-border-radius-pill: 37.5 * $unnnic-font-size;
-
-// Border width
-$unnnic-border-width-thinner: 0.0625 * $unnnic-font-size;
-$unnnic-border-width-thin: 0.125 * $unnnic-font-size;
-$unnnic-border-width-thick: 0.25 * $unnnic-font-size;
-
-// Shadow levels
-$unnnic-shadow-level-near: 0 * $unnnic-font-size 0.25 * $unnnic-font-size 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.5 * $unnnic-font-size;
-$unnnic-inset-xs: 0.75 * $unnnic-font-size;
-$unnnic-inset-sm: 1 * $unnnic-font-size;
-$unnnic-inset-md: 1.5 * $unnnic-font-size;
-$unnnic-inset-lg: 2 * $unnnic-font-size;
-$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.5 * $unnnic-font-size 1 * $unnnic-font-size;
-$unnnic-squish-xs: 0.75 * $unnnic-font-size 1 * $unnnic-font-size;
-$unnnic-squish-sm: 0.75 * $unnnic-font-size 1.5 * $unnnic-font-size;
-$unnnic-squish-md: 1 * $unnnic-font-size 1.5 * $unnnic-font-size;
-$unnnic-squish-lg: 1.5 * $unnnic-font-size 2 * $unnnic-font-size;
-
-// Inline
-$unnnic-inline-nano: 0.25 * $unnnic-font-size;
-$unnnic-inline-xs: 0.5 * $unnnic-font-size;
-$unnnic-inline-ant: 0.75 * $unnnic-font-size;
-$unnnic-inline-sm: 1 * $unnnic-font-size;
-$unnnic-inline-md: 1.5 * $unnnic-font-size;
-$unnnic-inline-lg: 2 * $unnnic-font-size;
-$unnnic-inline-xl: 2.5 * $unnnic-font-size;
-$unnnic-inline-giant: 3 * $unnnic-font-size;
-$unnnic-inline-xgiant: 4 * $unnnic-font-size;
-$unnnic-inline-awesome: 5 * $unnnic-font-size;
-$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.25 * $unnnic-font-size;
-$unnnic-spacing-stack-xs: 0.5 * $unnnic-font-size;
-$unnnic-spacing-stack-sm: 1 * $unnnic-font-size;
-$unnnic-spacing-stack-md: 1.5 * $unnnic-font-size;
-$unnnic-spacing-stack-lg: 2 * $unnnic-font-size;
-$unnnic-spacing-stack-xl: 2.5 * $unnnic-font-size;
-$unnnic-spacing-stack-giant: 3 * $unnnic-font-size;
-$unnnic-spacing-stack-xgiant: 4 * $unnnic-font-size;
-$unnnic-spacing-stack-awesome: 5 * $unnnic-font-size;
+// Icon size
+$unnnic-icon-size-xl: 2.5 * $unnnic-font-size;
+$unnnic-icon-size-lg: 2 * $unnnic-font-size;
+$unnnic-icon-size-md: 1.5 * $unnnic-font-size;
+$unnnic-icon-size-ant: 1.25 * $unnnic-font-size;
+$unnnic-icon-size-sm: 1 * $unnnic-font-size;
+$unnnic-icon-size-xs: 0.75 * $unnnic-font-size;
+
+// Avatar size
+$unnnic-avatar-size-lg: 6.5 * $unnnic-font-size;
+$unnnic-avatar-size-md: 4.5 * $unnnic-font-size;
+$unnnic-avatar-size-sm: 2.5 * $unnnic-font-size;
+$unnnic-avatar-size-xs: 2 * $unnnic-font-size;
+$unnnic-avatar-size-nano: 1.25 * $unnnic-font-size;
+
+// Border radius
+$unnnic-border-radius-sm: 0.25 * $unnnic-font-size;
+$unnnic-border-radius-md: 0.5 * $unnnic-font-size;
+$unnnic-border-radius-lg: 1 * $unnnic-font-size;
+$unnnic-border-radius-pill: 37.5 * $unnnic-font-size;
+
+// Border width
+$unnnic-border-width-thinner: 0.0625 * $unnnic-font-size;
+$unnnic-border-width-thin: 0.125 * $unnnic-font-size;
+$unnnic-border-width-thick: 0.25 * $unnnic-font-size;
+
+// Shadow levels
+$unnnic-shadow-level-near: 0 * $unnnic-font-size 0.25 * $unnnic-font-size 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.5 * $unnnic-font-size;
+$unnnic-inset-xs: 0.75 * $unnnic-font-size;
+$unnnic-inset-sm: 1 * $unnnic-font-size;
+$unnnic-inset-md: 1.5 * $unnnic-font-size;
+$unnnic-inset-lg: 2 * $unnnic-font-size;
+$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.5 * $unnnic-font-size 1 * $unnnic-font-size;
+$unnnic-squish-xs: 0.75 * $unnnic-font-size 1 * $unnnic-font-size;
+$unnnic-squish-sm: 0.75 * $unnnic-font-size 1.5 * $unnnic-font-size;
+$unnnic-squish-md: 1 * $unnnic-font-size 1.5 * $unnnic-font-size;
+$unnnic-squish-lg: 1.5 * $unnnic-font-size 2 * $unnnic-font-size;
+
+// Inline
+$unnnic-inline-nano: 0.25 * $unnnic-font-size;
+$unnnic-inline-xs: 0.5 * $unnnic-font-size;
+$unnnic-inline-ant: 0.75 * $unnnic-font-size;
+$unnnic-inline-sm: 1 * $unnnic-font-size;
+$unnnic-inline-md: 1.5 * $unnnic-font-size;
+$unnnic-inline-lg: 2 * $unnnic-font-size;
+$unnnic-inline-xl: 2.5 * $unnnic-font-size;
+$unnnic-inline-giant: 3 * $unnnic-font-size;
+$unnnic-inline-xgiant: 4 * $unnnic-font-size;
+$unnnic-inline-awesome: 5 * $unnnic-font-size;
+$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.25 * $unnnic-font-size;
+$unnnic-spacing-stack-xs: 0.5 * $unnnic-font-size;
+$unnnic-spacing-stack-sm: 1 * $unnnic-font-size;
+$unnnic-spacing-stack-md: 1.5 * $unnnic-font-size;
+$unnnic-spacing-stack-lg: 2 * $unnnic-font-size;
+$unnnic-spacing-stack-xl: 2.5 * $unnnic-font-size;
+$unnnic-spacing-stack-giant: 3 * $unnnic-font-size;
+$unnnic-spacing-stack-xgiant: 4 * $unnnic-font-size;
+$unnnic-spacing-stack-awesome: 5 * $unnnic-font-size;

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;
+    }
+}