@weni/unnnic-system 3.1.4 → 3.2.1

package/src/assets/scss/fonts.scss

@@ -1,146 +1,17 @@
-@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;
+// Do not edit directly, this file was auto-generated.
 
-// Font weight
-$unnnic-font-weight-black: 900;
+$unnnic-font-size: 16px;
+$unnnic-font-family: Lato;
 $unnnic-font-weight-bold: 700;
 $unnnic-font-weight-medium: 500;
 $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;
-
-// New typography tokens
-$unnnic-text-display-1: 1.5 * $unnnic-font-size;    // 24px
-$unnnic-text-display-2: 1.25 * $unnnic-font-size;   // 20px
-$unnnic-text-display-3: 1 * $unnnic-font-size;      // 16px
-$unnnic-text-display-4: 1 * $unnnic-font-size;      // 16px
-$unnnic-text-body: 0.875 * $unnnic-font-size;       // 14px
-$unnnic-text-emphasis: 0.875 * $unnnic-font-size;   // 14px
-$unnnic-text-action: 0.875 * $unnnic-font-size;     // 14px
-$unnnic-text-caption-1: 0.75 * $unnnic-font-size;   // 12px
-$unnnic-text-caption-2: 0.75 * $unnnic-font-size;   // 12px
-
-// Typography line heights
-$unnnic-line-height-display-1: 2 * $unnnic-font-size;     // 32px
-$unnnic-line-height-display-2: 1.6875 * $unnnic-font-size; // 27px
-$unnnic-line-height-display-3: 1.375 * $unnnic-font-size;  // 22px
-$unnnic-line-height-display-4: 1.375 * $unnnic-font-size;  // 22px
-$unnnic-line-height-body: 1.3125 * $unnnic-font-size;      // 21px
-$unnnic-line-height-emphasis: 1.3125 * $unnnic-font-size;  // 21px
-$unnnic-line-height-action: 1.3125 * $unnnic-font-size;    // 21px
-$unnnic-line-height-caption-1: 1.125 * $unnnic-font-size;  // 18px
-$unnnic-line-height-caption-2: 1.125 * $unnnic-font-size;  // 18px
-
-.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;
-      }
-    }
-  }
-}
+$unnnic-font-display-1: 700 calc(1.5 * 16px) /* 24px */ / calc(2 * 16px) /* 32px */ Lato;
+$unnnic-font-display-2: 700 calc(1.25 * 16px) /* 20px */ / calc(1.6875 * 16px) /* 27px */ Lato;
+$unnnic-font-display-3: 700 calc(1 * 16px) /* 16px */ / calc(1.375 * 16px) /* 22px */ Lato;
+$unnnic-font-display-4: 400 calc(1 * 16px) /* 16px */ / calc(1.375 * 16px) /* 22px */ Lato;
+$unnnic-font-body: 400 calc(0.875 * 16px) /* 14px */ / calc(1.3125 * 16px) /* 21px */ Lato;
+$unnnic-font-emphasis: 500 calc(0.875 * 16px) /* 14px */ / calc(1.3125 * 16px) /* 21px */ Lato;
+$unnnic-font-action: 700 calc(0.875 * 16px) /* 14px */ / calc(1.3125 * 16px) /* 21px */ Lato;
+$unnnic-font-caption-1: 500 calc(0.75 * 16px) /* 12px */ / calc(1.125 * 16px) /* 18px */ Lato;
+$unnnic-font-caption-2: 400 calc(0.75 * 16px) /* 12px */ / calc(1.125 * 16px) /* 18px */ Lato;

package/src/assets/scss/icon-sizes.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-icon-size-3: 0.75 * 16px /* 12px */;
+$unnnic-icon-size-4: 16px /* 16px */;
+$unnnic-icon-size-5: 1.25 * 16px /* 20px */;
+$unnnic-icon-size-6: 1.5 * 16px /* 24px */;
+$unnnic-icon-size-7: 2 * 16px /* 32px */;
+$unnnic-icon-size-10: 2.5 * 16px /* 40px */;

package/src/assets/scss/radii.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-radius-0: 0 /* 0px */;
+$unnnic-radius-1: 0.25 * 16px /* 4px */;
+$unnnic-radius-2: 0.5 * 16px /* 8px */;
+$unnnic-radius-3: 0.75 * 16px /* 12px */;
+$unnnic-radius-4: 1 * 16px /* 16px */;
+$unnnic-radius-full: 100%;

package/src/assets/scss/shadows.scss

@@ -0,0 +1,5 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-shadow-1: 0px 0.25 * 16px /* 4px */ 16px /* 16px */ 0px rgba(0, 0, 0, 0.16);
+$unnnic-shadow-2: 0px 1.5 * 16px /* 24px */ 3 * 16px /* 48px */ 0px rgba(0, 0, 0, 0.16);

package/src/assets/scss/spaces.scss

@@ -0,0 +1,17 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$unnnic-space-0: 0 /* 0px */;
+$unnnic-space-1: 0.25 * 16px /* 4px */;
+$unnnic-space-2: 0.5 * 16px /* 8px */;
+$unnnic-space-3: 0.75 * 16px /* 12px */;
+$unnnic-space-4: 1 * 16px /* 16px */;
+$unnnic-space-5: 1.25 * 16px /* 20px */;
+$unnnic-space-6: 1.5 * 16px /* 24px */;
+$unnnic-space-7: 1.75 * 16px /* 28px */;
+$unnnic-space-8: 2 * 16px /* 32px */;
+$unnnic-space-10: 2.5 * 16px /* 40px */;
+$unnnic-space-12: 3 * 16px /* 48px */;
+$unnnic-space-16: 4 * 16px /* 64px */;
+$unnnic-space-20: 5 * 16px /* 80px */;
+$unnnic-space-05: 0.125 * 16px /* 2px */;

package/src/assets/scss/unnnic.scss

@@ -1,12 +1,24 @@
-@forward './colors';
+@forward './deprecated/colors';
+@forward './deprecated/fonts';
+@forward './deprecated/spacing';
+@forward './deprecated/grid';
 @forward './fonts';
-@forward './spacing';
-@forward './grid';
+@forward './radii';
+@forward './shadows';
+@forward './spaces';
+@forward './icon-sizes';
+@forward './colors';
 
-@use './colors' as *;
+@use './deprecated/colors' as *;
+@use './deprecated/fonts' as *;
+@use './deprecated/spacing' as *;
+@use './deprecated/grid' as *;
 @use './fonts' as *;
-@use './spacing' as *;
-@use './grid' as *;
+@use './radii' as *;
+@use './shadows' as *;
+@use './spaces' as *;
+@use './icon-sizes' as *;
+@use './colors' as *;
 
 .unnnic {
     &--clickable {

package/src/assets/tokens/colors.json

@@ -0,0 +1,374 @@
+{
+  "color": {
+    "white": {
+      "value": "#FFFFFF"
+    },
+    "black": {
+      "value": "#000000"
+    },
+    "gray": {
+      "50": {
+        "value": "#F6F7F9"
+      },
+      "100": {
+        "value": "#ECEEF2"
+      },
+      "200": {
+        "value": "#D6D9E1"
+      },
+      "300": {
+        "value": "#B2B9C7"
+      },
+      "400": {
+        "value": "#8893A8"
+      },
+      "500": {
+        "value": "#67738B"
+      },
+      "600": {
+        "value": "#545E75"
+      },
+      "700": {
+        "value": "#454D5F"
+      },
+      "800": {
+        "value": "#3B4151"
+      },
+      "900": {
+        "value": "#353945"
+      },
+      "950": {
+        "value": "#23262E"
+      }
+    },
+    "teal": {
+      "50": {
+        "value": "#EFFEFC"
+      },
+      "100": {
+        "value": "#C7FFF7"
+      },
+      "200": {
+        "value": "#90FFEF"
+      },
+      "300": {
+        "value": "#51F7E7"
+      },
+      "400": {
+        "value": "#1DE4D7"
+      },
+      "500": {
+        "value": "#04C8BD"
+      },
+      "600": {
+        "value": "#00A49F"
+      },
+      "700": {
+        "value": "#05807D"
+      },
+      "800": {
+        "value": "#0A6564"
+      },
+      "900": {
+        "value": "#0D5453"
+      },
+      "950": {
+        "value": "#003133"
+      }
+    },
+      "green": {
+        "50": {
+          "value": "#F0F9F3"
+        },
+        "100": {
+          "value": "#DAF1E0"
+        },
+        "200": {
+          "value": "#B7E3C6"
+        },
+        "300": {
+          "value": "#88CDA4"
+        },
+        "400": {
+          "value": "#56B17E"
+        },
+        "500": {
+          "value": "#38A169"
+        },
+        "600": {
+          "value": "#24774C"
+        },
+        "700": {
+          "value": "#1D5F3F"
+        },
+        "800": {
+          "value": "#194C34"
+        },
+        "900": {
+          "value": "#153F2C"
+        },
+        "950": {
+          "value": "#0B2318"
+        }
+      },
+      "blue": {
+        "50": {
+          "value": "#F2F7FD"
+        },
+        "100": {
+          "value": "#E5EEF9"
+        },
+        "200": {
+          "value": "#C4DBF3"
+        },
+        "300": {
+          "value": "#90BDE9"
+        },
+        "400": {
+          "value": "#559BDB"
+        },
+        "500": {
+          "value": "#3182CE"
+        },
+        "600": {
+          "value": "#2062A9"
+        },
+        "700": {
+          "value": "#1B4F89"
+        },
+        "800": {
+          "value": "#1A4472"
+        },
+        "900": {
+          "value": "#1B3A5F"
+        },
+        "950": {
+          "value": "#12253F"
+        }
+      },
+      "purple": {
+        "50": {
+          "value": "#F6F5FD"
+        },
+        "100": {
+          "value": "#EEECFB"
+        },
+        "200": {
+          "value": "#DFDCF8"
+        },
+        "300": {
+          "value": "#C7BFF3"
+        },
+        "400": {
+          "value": "#AA9BEA"
+        },
+        "500": {
+          "value": "#8D72E0"
+        },
+        "600": {
+          "value": "#805AD5"
+        },
+        "700": {
+          "value": "#6B41C0"
+        },
+        "800": {
+          "value": "#5A36A1"
+        },
+        "900": {
+          "value": "#4B2E84"
+        },
+        "950": {
+          "value": "#2E1C59"
+        }
+      },
+      "red": {
+        "50": {
+          "value": "#FDF3F3"
+        },
+        "100": {
+          "value": "#FDE3E3"
+        },
+        "200": {
+          "value": "#FCCCCC"
+        },
+        "300": {
+          "value": "#F8A9A9"
+        },
+        "400": {
+          "value": "#F27777"
+        },
+        "500": {
+          "value": "#E53E3E"
+        },
+        "600": {
+          "value": "#D32F2F"
+        },
+        "700": {
+          "value": "#B22323"
+        },
+        "800": {
+          "value": "#932121"
+        },
+        "900": {
+          "value": "#7A2222"
+        },
+        "950": {
+          "value": "#420D0D"
+        }
+      },
+      "orange": {
+        "50": {
+          "value": "#FDF8EF"
+        },
+        "100": {
+          "value": "#FBEED9"
+        },
+        "200": {
+          "value": "#F7DAB1"
+        },
+        "300": {
+          "value": "#F1C080"
+        },
+        "400": {
+          "value": "#EB9D4C"
+        },
+        "500": {
+          "value": "#E5812A"
+        },
+        "600": {
+          "value": "#DD6B20"
+        },
+        "700": {
+          "value": "#B2501C"
+        },
+        "800": {
+          "value": "#8E401E"
+        },
+        "900": {
+          "value": "#73361B"
+        },
+        "950": {
+          "value": "#3E1A0C"
+        }
+      },
+      "yellow": {
+        "50": {
+          "value": "#FBF7EB"
+        },
+        "100": {
+          "value": "#F5EDCC"
+        },
+        "200": {
+          "value": "#EDD89B"
+        },
+        "300": {
+          "value": "#E2BC62"
+        },
+        "400": {
+          "value": "#D69E2E"
+        },
+        "500": {
+          "value": "#C88D2A"
+        },
+        "600": {
+          "value": "#AC6E22"
+        },
+        "700": {
+          "value": "#8A501E"
+        },
+        "800": {
+          "value": "#734120"
+        },
+        "900": {
+          "value": "#633720"
+        },
+        "950": {
+          "value": "#391B0F"
+        }
+      },
+    "bg": {
+      "base": {
+        "value": "{color.white}"
+      },
+      "soft": {
+        "value": "{color.gray.50}"
+      },
+      "muted": {
+        "value": "{color.gray.100}"
+      },
+      "active": {
+        "value": "{color.teal.600}"
+      },
+      "info": {
+        "value": "{color.blue.100}"
+      },
+      "success": {
+        "value": "{color.green.100}"
+      },
+      "warning": {
+        "value": "{color.yellow.50}"
+      },
+      "critical": {
+        "value": "{color.red.50}"
+      }
+    },
+    "fg": {
+      "base": {
+        "value": "{color.gray.500}"
+      },
+      "muted": {
+        "value": "{color.gray.300}"
+      },
+      "emphasized": {
+        "value": "{color.gray.900}"
+      },
+      "inverted": {
+        "value": "{color.white}"
+      },
+      "active": {
+        "value": "{color.teal.600}"
+      },
+      "info": {
+        "value": "{color.blue.500}"
+      },
+      "success": {
+        "value": "{color.green.500}"
+      },
+      "warning": {
+        "value": "{color.yellow.500}"
+      },
+      "critical": {
+        "value": "{color.red.500}"
+      }
+    },
+    "border": {
+      "base": {
+        "value": "{color.gray.200}"
+      },
+      "soft": {
+        "value": "{color.gray.100}"
+      },
+      "muted": {
+        "value": "{color.gray.200}"
+      },
+      "emphasized": {
+        "value": "{color.gray.400}"
+      },
+      "active": {
+        "value": "{color.teal.600}"
+      },
+      "info": {
+        "value": "{color.blue.300}"
+      },
+      "success": {
+        "value": "{color.green.300}"
+      },
+      "warning": {
+        "value": "{color.yellow.300}"
+      },
+      "critical": {
+        "value": "{color.red.300}"
+      }
+    }
+  }
+}

package/src/assets/tokens/fonts.json

@@ -0,0 +1,52 @@
+{
+  "font": {
+    "size": {
+      "value": "16px"
+    },
+    "family": {
+      "value": "Lato"
+    },
+    "weight": {
+      "bold": {
+        "value": "700"
+      },
+      "medium": {
+        "value": "500"
+      },
+      "regular": {
+        "value": "400"
+      }
+    },
+    "display": {
+      "1": {
+        "value": "{font.weight.bold} calc(1.5 * {font.size}) /* 24px */ / calc(2 * {font.size}) /* 32px */ {font.family}"
+      },
+      "2": {
+        "value": "{font.weight.bold} calc(1.25 * {font.size}) /* 20px */ / calc(1.6875 * {font.size}) /* 27px */ {font.family}"
+      },
+      "3": {
+        "value": "{font.weight.bold} calc(1 * {font.size}) /* 16px */ / calc(1.375 * {font.size}) /* 22px */ {font.family}"
+      },
+      "4": {
+        "value": "{font.weight.regular} calc(1 * {font.size}) /* 16px */ / calc(1.375 * {font.size}) /* 22px */ {font.family}"
+      }
+    },
+    "body": {
+      "value": "{font.weight.regular} calc(0.875 * {font.size}) /* 14px */ / calc(1.3125 * {font.size}) /* 21px */ {font.family}"
+    },
+    "emphasis": {
+      "value": "{font.weight.medium} calc(0.875 * {font.size}) /* 14px */ / calc(1.3125 * {font.size}) /* 21px */ {font.family}"
+    },
+    "action": {
+      "value": "{font.weight.bold} calc(0.875 * {font.size}) /* 14px */ / calc(1.3125 * {font.size}) /* 21px */ {font.family}"
+    },
+    "caption": {
+      "1": {
+        "value": "{font.weight.medium} calc(0.75 * {font.size}) /* 12px */ / calc(1.125 * {font.size}) /* 18px */ {font.family}"
+      },
+      "2": {
+        "value": "{font.weight.regular} calc(0.75 * {font.size}) /* 12px */ / calc(1.125 * {font.size}) /* 18px */ {font.family}"
+      }
+    }
+  }
+}

package/src/assets/tokens/icon-sizes.json

@@ -0,0 +1,22 @@
+{
+    "icon-size": {
+        "3": {
+            "value": "0.75 * {font.size} /* 12px */"
+        },
+        "4": {
+            "value": "{font.size} /* 16px */"
+        },
+        "5": {
+            "value": "1.25 * {font.size} /* 20px */"
+        },
+        "6": {
+            "value": "1.5 * {font.size} /* 24px */"
+        },
+        "7": {
+            "value": "2 * {font.size} /* 32px */"
+        },
+        "10": {
+            "value": "2.5 * {font.size} /* 40px */"
+        }
+    }
+}