Release 1.3.1

.storybook/YourTheme.ts

@@ -6,5 +6,5 @@ export default create({
   brandTarget: "_self",
   // appBg: "#F6F4EB",
   appBorderRadius: 8,
-  fontBase: '"Plus Jakarta Sans", sans-serif',
+  fontBase: '"Onest", sans-serif',
 });

.storybook/manager-head.html

@@ -1,12 +1,9 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Onest:[email protected]&display=swap" rel="stylesheet" />
 
 <style>
   body {
-    font-family: "Plus Jakarta Sans", sans-serif;
+    font-family: "Onest", sans-serif;
   }
-</style>
+</style>

.storybook/preview-head.html

@@ -1,12 +1,9 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Onest:[email protected]&display=swap" rel="stylesheet" />
 
 <style>
   body {
-    font-family: "Plus Jakarta Sans", sans-serif;
+    font-family: "Onest", sans-serif;
   }
-</style>
+</style>

lib/customization/styles/components/alert.styles.ts

@@ -170,8 +170,8 @@ const close = cva(["zn-font-medium", "zn-absolute", "zn-top-3", "zn-right-3"], {
     },
   },
 });
-const titleText = cva(["zn-font-medium", "zn-m-0", "zn-text-sm"]);
-const descriptionText = cva(["zn-m-0", "zn-text-sm", "zn-font-normal"]);
+const titleText = cva(["zn-font-medium", "zn-m-0", "zn-text-base"]);
+const descriptionText = cva(["zn-m-0", "zn-text-base", "zn-font-normal"]);
 
 const alertStyles = {
   base,

lib/customization/styles/components/button.styles.ts

@@ -31,8 +31,10 @@ const base = cva(
           "zn-bg-primary-100",
           "zn-border",
           "zn-border-transparent",
+          "zn-text-primary-500",
 
-          "hover:zn-bg-primary-50",
+          "hover:zn-bg-primary-100",
+          "hover:zn-text-primary-400",
 
           "focus:zn-bg-primary-200",
 
@@ -47,14 +49,14 @@ const base = cva(
         outline: [
           "zn-border",
           "zn-bg-white",
-          "zn-border-primary-50",
-          "zn-text-gray-900",
+          "zn-border-primary-200",
+          "zn-text-primary-500",
 
-          "hover:zn-border-gray-100",
-          "hover:zn-text-primary-500",
+          "hover:zn-border-primary-200",
+          "hover:zn-text-primary-400",
 
-          "active:zn-border-gray-100",
-          "active:zn-text-primary-500",
+          "active:zn-border-primary-200",
+          "active:zn-text-primary-300",
 
           "disabled:zn-bg-gray-100",
           "disabled:zn-text-gray-400",
@@ -68,7 +70,7 @@ const base = cva(
           "hover:zn-text-primary-500",
 
           "active:zn-bg-primary-50",
-          "active:zn-text-primary-500",
+          "active:zn-text-primary-300",
 
           "disabled:zn-text-gray-400",
         ],
@@ -84,8 +86,8 @@ const base = cva(
       size: {
         xs: ["zn-text-xs", "zn-h-6", "zn-py-1", "zn-px-2"],
         sm: ["zn-text-sm", "zn-h-8", "zn-py-1", "zn-px-3"],
-        md: ["zn-text-sm", "zn-h-10", "zn-py-1", "zn-px-[20px]"],
-        lg: ["zn-text-base", "zn-h-12", "zn-py-1", "zn-px-[24px]"],
+        md: ["zn-text-base", "zn-h-10", "zn-py-1", "zn-px-[20px]"],
+        lg: ["zn-text-lg", "zn-h-12", "zn-py-1", "zn-px-[24px]"],
       },
       isDanger: {
         true: [],

lib/customization/styles/components/calendar.styles.ts

@@ -11,7 +11,7 @@ const labelCell = cva([
   "zn-text-center",
   "zn-font-medium",
   "zn-h-[36px]",
-  "zn-text-sm",
+  "zn-text-base",
 ]);
 const valueCell = cva(["zn-px-1"]);
 const valueCellInner = cva(
@@ -22,7 +22,7 @@ const valueCellInner = cva(
     "zn-h-[28px]",
     "zn-mx-auto",
     "zn-text-center",
-    "zn-text-sm",
+    "zn-text-base",
     "zn-border",
     "zn-border-transparent",
     "zn-rounded",
@@ -147,7 +147,7 @@ const header = cva([
   "zn-px-[20px]",
   "zn-pt-4",
   // "zn-border-b",
-  // "zn-border-base",
+  // "zn-border-gray-200",
 ]);
 const headerButton = cva(
   [

lib/customization/styles/components/checkbox.styles.ts

@@ -59,7 +59,7 @@ const input = cva(
     },
   }
 );
-const label = cva(["zn-text-sm", "zn-font-medium", "zn-text-gray-900"], {
+const label = cva(["zn-text-base", "zn-font-medium", "zn-text-gray-900"], {
   variants: {
     isDisabled: {
       true: ["zn-text-gray-400"],

lib/customization/styles/components/date-picker.styles.ts

@@ -21,7 +21,7 @@ const container = cva(
       variant: {
         outline: [
           "zn-border",
-          "zn-border-base",
+          "zn-border-gray-200",
 
           "hover:!zn-border-primary-500",
 
@@ -79,8 +79,8 @@ const input = cva(
       size: {
         xs: ["zn-text-xs"],
         sm: ["zn-text-sm"],
-        md: ["zn-text-sm"],
-        lg: ["zn-text-base"],
+        md: ["zn-text-base"],
+        lg: ["zn-text-lg"],
       },
       variant: {
         outline: [],

lib/customization/styles/components/input.styles.ts

@@ -21,7 +21,7 @@ const container = cva(
       variant: {
         outline: [
           "zn-border",
-          "zn-border-base",
+          "zn-border-gray-200",
 
           "hover:!zn-border-primary-500",
 
@@ -54,8 +54,8 @@ const container = cva(
           "zn-border-b",
           "zn-border-b-primary-500",
 
-          "hover:zn-shadow-[0_1px_0_0_var(--color-primary)]",
-          "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary)]",
+          "hover:zn-shadow-[0_1px_0_0_var(--color-primary-500)]",
+          "focus-within:!zn-shadow-[0_1px_0_0_var(--color-primary-500)]",
           "focus-within:!zn-border-b-primary-500",
 
           "!zn-px-0",
@@ -98,8 +98,8 @@ const input = cva(
       size: {
         xs: ["zn-px-4", "zn-text-xs"],
         sm: ["zn-px-4", "zn-text-sm"],
-        md: ["zn-px-4", "zn-text-sm"],
-        lg: ["zn-px-4", "zn-text-base"],
+        md: ["zn-px-4", "zn-text-base"],
+        lg: ["zn-px-4", "zn-text-lg"],
       },
       variant: {
         outline: [],

lib/customization/styles/components/menu.styles.ts

@@ -13,7 +13,7 @@ const item = cva(
     "zn-px-3",
     "zn-py-2",
     "zn-rounded-base",
-    "zn-text-sm",
+    "zn-text-base",
     "zn-font-medium",
     "zn-flex",
     "zn-items-center",

lib/customization/styles/components/number-input.styles.ts

@@ -25,7 +25,7 @@ const container = cva(
       variant: {
         outline: [
           "zn-border",
-          "zn-border-base",
+          "zn-border-gray-200",
 
           "hover:!zn-border-primary-500",
 
@@ -87,8 +87,8 @@ const input = cva(
       size: {
         xs: ["zn-px-2", "zn-text-xs"],
         sm: ["zn-px-2", "zn-text-sm"],
-        md: ["zn-px-3", "zn-text-sm"],
-        lg: ["zn-px-3", "zn-text-base"],
+        md: ["zn-px-3", "zn-text-base"],
+        lg: ["zn-px-3", "zn-text-lg"],
       },
       variant: {
         outline: [],

lib/customization/styles/components/popover.styles.ts

@@ -4,7 +4,7 @@ const base = cva([
   "zn-rounded-base",
   "zn-bg-white",
   "zn-text-gray-900",
-  "zn-text-sm",
+  "zn-text-base",
   "zn-shadow-base",
 ]);
 const arrow = cva([]);

lib/customization/styles/components/radio.styles.ts

@@ -56,7 +56,7 @@ const input = cva(
     },
   }
 );
-const label = cva(["zn-text-sm", "zn-font-medium", "zn-text-gray-900"], {
+const label = cva(["zn-text-base", "zn-font-medium", "zn-text-gray-900"], {
   variants: {
     isDisabled: {
       true: ["zn-text-gray-400"],

lib/customization/styles/components/select.styles.ts

@@ -21,7 +21,7 @@ const container = cva(
       variant: {
         outline: [
           "zn-border",
-          "zn-border-base",
+          "zn-border-gray-200",
 
           "hover:!zn-border-primary-500",
 
@@ -116,8 +116,8 @@ const inputGroup = cva(
       size: {
         xs: ["zn-px-4", "zn-text-xs"],
         sm: ["zn-px-4", "zn-text-sm"],
-        md: ["zn-px-4", "zn-text-sm"],
-        lg: ["zn-px-4", "zn-text-base"],
+        md: ["zn-px-4", "zn-text-base"],
+        lg: ["zn-px-4", "zn-text-lg"],
       },
       variant: {
         outline: [],

lib/customization/styles/components/spinner.styles.ts

@@ -25,7 +25,7 @@ const overlay = cva([
   "zn-flex-col",
   "zn-gap-2",
 ]);
-const description = cva(["zn-text-gray-900", "zn-text-sm"]);
+const description = cva(["zn-text-gray-900", "zn-text-base"]);
 const spinnerStyles = {
   spinner,
   container,

lib/customization/styles/components/table.styles.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 const tableBorder = cva([], {
   variants: {
     isBordered: {
-      true: ["zn-border", "zn-border-base", "zn-border-collapse"],
+      true: ["zn-border", "zn-border-gray-200", "zn-border-collapse"],
       false: [],
     },
   },
@@ -22,11 +22,11 @@ const cell = cva(["zn-text-left"], {
 });
 const th = cva([
   "zn-uppercase",
-  "zn-text-sm",
+  "zn-text-base",
   "zn-font-semibold",
   "zn-text-gray-900",
 ]);
-const td = cva(["zn-text-sm"]);
+const td = cva(["zn-text-base"]);
 const tableStyles = {
   base,
   row,

lib/customization/styles/components/tabs.styles.ts

@@ -29,7 +29,7 @@ const li = cva(
     "zn-py-2",
     "zn-relative",
     "zn-cursor-pointer",
-    "zn-text-sm",
+    "zn-text-base",
   ],
   {
     variants: {

lib/customization/styles/components/textarea.styles.ts

@@ -12,14 +12,14 @@ const base = cva(
     "zn-w-full",
     "zn-px-4",
     "zn-py-3",
-    "zn-text-sm",
+    "zn-text-base",
   ],
   {
     variants: {
       variant: {
         outline: [
           "zn-border",
-          "zn-border-base",
+          "zn-border-gray-200",
 
           "hover:!zn-border-primary-500",
 

lib/customization/styles/components/tooltip.styles.ts

@@ -6,7 +6,7 @@ const base = cva([
   "zn-rounded-base",
   "zn-px-2",
   "zn-py-2",
-  "zn-text-sm",
+  "zn-text-base",
   "zn-shadow-base",
 ]);
 

lib/customization/theme/color-generator.ts

@@ -8,7 +8,7 @@ export const getPalette = (color: string | chroma.Color) => {
   const palette = [];
 
   // Create 50
-  palette.push(colors(0.05).rgb().join(" "));
+  palette.push(colors(0.04).rgb().join(" "));
 
   // Create 100-900
   for (let i = 0.1; i < 0.9; i += 0.1) {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zeni-ui",
   "private": false,
-  "version": "1.3.0-beta",
+  "version": "1.3.1-beta",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

src/index.css

@@ -1,7 +1,7 @@
-@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');
 
 :root {
-  font-family: "Plus Jakarta Sans", system-ui, Avenir, Helvetica, Arial,
+  font-family: "Onest", system-ui, Avenir, Helvetica, Arial,
     sans-serif;
   line-height: 1.5;
   font-weight: 400;

tailwind.config.js

@@ -45,6 +45,9 @@ export default {
       boxShadow: {
         base: "0px 6px 18px 0px rgba(4, 4, 7, 0.05)",
       },
+      // fontSize: {
+      //   base: '16px',
+      // },
     },
   },
   variants: {