diff --git a/.storybook/YourTheme.ts b/.storybook/YourTheme.ts
index ea535bc..6f4cbdd 100644
--- a/.storybook/YourTheme.ts
+++ b/.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',
});
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
index 26c26cd..1b46d3b 100644
--- a/.storybook/manager-head.html
+++ b/.storybook/manager-head.html
@@ -1,12 +1,9 @@
-
+
+
\ No newline at end of file
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 26c26cd..1b46d3b 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,12 +1,9 @@
-
+
+
\ No newline at end of file
diff --git a/lib/customization/styles/components/alert.styles.ts b/lib/customization/styles/components/alert.styles.ts
index 4ba4bc6..eeb76a4 100644
--- a/lib/customization/styles/components/alert.styles.ts
+++ b/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,
diff --git a/lib/customization/styles/components/button.styles.ts b/lib/customization/styles/components/button.styles.ts
index 4775a3f..95d6df9 100644
--- a/lib/customization/styles/components/button.styles.ts
+++ b/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: [],
diff --git a/lib/customization/styles/components/calendar.styles.ts b/lib/customization/styles/components/calendar.styles.ts
index 7fbf191..4d3906b 100644
--- a/lib/customization/styles/components/calendar.styles.ts
+++ b/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(
[
diff --git a/lib/customization/styles/components/checkbox.styles.ts b/lib/customization/styles/components/checkbox.styles.ts
index 2142b45..b1a78dc 100644
--- a/lib/customization/styles/components/checkbox.styles.ts
+++ b/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"],
diff --git a/lib/customization/styles/components/date-picker.styles.ts b/lib/customization/styles/components/date-picker.styles.ts
index c21de20..e66de5c 100644
--- a/lib/customization/styles/components/date-picker.styles.ts
+++ b/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: [],
diff --git a/lib/customization/styles/components/input.styles.ts b/lib/customization/styles/components/input.styles.ts
index a219519..93b892e 100644
--- a/lib/customization/styles/components/input.styles.ts
+++ b/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: [],
diff --git a/lib/customization/styles/components/menu.styles.ts b/lib/customization/styles/components/menu.styles.ts
index 9c8aca4..612e62c 100644
--- a/lib/customization/styles/components/menu.styles.ts
+++ b/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",
diff --git a/lib/customization/styles/components/number-input.styles.ts b/lib/customization/styles/components/number-input.styles.ts
index 6115547..e9bd03a 100644
--- a/lib/customization/styles/components/number-input.styles.ts
+++ b/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: [],
diff --git a/lib/customization/styles/components/popover.styles.ts b/lib/customization/styles/components/popover.styles.ts
index 663792e..714a9fe 100644
--- a/lib/customization/styles/components/popover.styles.ts
+++ b/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([]);
diff --git a/lib/customization/styles/components/radio.styles.ts b/lib/customization/styles/components/radio.styles.ts
index 9a318d5..db7d870 100644
--- a/lib/customization/styles/components/radio.styles.ts
+++ b/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"],
diff --git a/lib/customization/styles/components/select.styles.ts b/lib/customization/styles/components/select.styles.ts
index 229c86c..e5dc6cc 100644
--- a/lib/customization/styles/components/select.styles.ts
+++ b/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: [],
diff --git a/lib/customization/styles/components/spinner.styles.ts b/lib/customization/styles/components/spinner.styles.ts
index 94aef65..b4e6447 100644
--- a/lib/customization/styles/components/spinner.styles.ts
+++ b/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,
diff --git a/lib/customization/styles/components/table.styles.ts b/lib/customization/styles/components/table.styles.ts
index abf36f5..a37d7f1 100644
--- a/lib/customization/styles/components/table.styles.ts
+++ b/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,
diff --git a/lib/customization/styles/components/tabs.styles.ts b/lib/customization/styles/components/tabs.styles.ts
index bb80d89..f2eaa11 100644
--- a/lib/customization/styles/components/tabs.styles.ts
+++ b/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: {
diff --git a/lib/customization/styles/components/textarea.styles.ts b/lib/customization/styles/components/textarea.styles.ts
index 9b26a89..6047cea 100644
--- a/lib/customization/styles/components/textarea.styles.ts
+++ b/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",
diff --git a/lib/customization/styles/components/tooltip.styles.ts b/lib/customization/styles/components/tooltip.styles.ts
index 1feda94..22b86cf 100644
--- a/lib/customization/styles/components/tooltip.styles.ts
+++ b/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",
]);
diff --git a/lib/customization/theme/color-generator.ts b/lib/customization/theme/color-generator.ts
index 54bbe70..8cd2e60 100644
--- a/lib/customization/theme/color-generator.ts
+++ b/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) {
diff --git a/package.json b/package.json
index e12ff4d..91f24ba 100644
--- a/package.json
+++ b/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",
diff --git a/src/index.css b/src/index.css
index cfb03ba..5935802 100644
--- a/src/index.css
+++ b/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;
diff --git a/tailwind.config.js b/tailwind.config.js
index da9be54..e72e027 100644
--- a/tailwind.config.js
+++ b/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: {