feat: update theme defaults

Author: luangjokaj

dist/cherry.js

@@ -1,6 +1,6 @@
 {
 	"name": "cherry-components",
-	"version": "0.0.2-14",
+	"version": "0.0.2-15",
 	"description": "Cherry React Components",
 	"main": "dist/cherry.js",
 	"module": "dist/cherry.module.js",

dist/cherry.module.js

@@ -2,42 +2,51 @@ const localTheme = {
 	spacing: {
 		maxWidth: "1280px",
 		maxWidthLimit: "1440px",
-		paddingTopBody: { mobile: "0px", desktop: "0px" },
-		marginContainer: { mobile: "20px", desktop: "20px" },
-		marginRow: { default: "-10px", medium: "-30px", big: "-50px" },
-		gutterCol: { default: "10px", medium: "30px", big: "50px" },
+		paddingTopBody: {
+			mobile: "76px",
+			desktop: "76px",
+		},
+		marginContainer: {
+			mobile: "20px",
+			desktop: "20px",
+		},
+		marginRow: {
+			default: "-10px",
+			medium: "-30px",
+			big: "-50px",
+		},
+		gutterCol: {
+			default: "10px",
+			medium: "30px",
+			big: "50px",
+		},
 		breakpoints: [0, 576, 768, 992, 1200, 1440, 1920],
 	},
 	colors: {
-		primaryLight: "#FDA4AF",
-		primary: "#F43F5E",
-		primaryDark: "#9F1239",
-
-		secondaryLight: "#7DD3FC",
-		secondary: "#0EA5E9",
+		primaryLight: "#fda4af",
+		primary: "#f43f5e",
+		primaryDark: "#9f1239",
+		secondaryLight: "#7dd3fc",
+		secondary: "#0ea5e9",
 		secondaryDark: "#075985",
-
-		tertiaryLight: "#D8B4FE",
-		tertiary: "#A855F7",
-		tertiaryDark: "#6B21A8",
-
-		dark: "#000",
-		light: "#fff",
-
-		grayLight: "#E5E7EB",
-		gray: "#9CA3AF",
-		grayDark: "#4B5563",
-
-		success: "#28A745",
-		error: "#DC3545",
-		warning: "#FFC107",
-		info: "#17A2B8",
+		tertiaryLight: "#d8b4fe",
+		tertiary: "#a855f7",
+		tertiaryDark: "#6b21a8",
+		dark: "#000000",
+		light: "#ffffff",
+		grayLight: "#e5e7eb",
+		gray: "#9ca3af",
+		grayDark: "#4b5563",
+		success: "#28a745",
+		error: "#dc3545",
+		warning: "#ffc107",
+		info: "#17a2b8",
 	},
 	fonts: {
-		text: "'Inter', sans-serif",
-		head: "'Inter', sans-serif",
-		special: "'Inter', sans-serif",
-		mono: "'Inter', monospace",
+		text: "Inter",
+		head: "Inter",
+		special: "Inter",
+		mono: "Inter",
 	},
 	sizes: {
 		hero1: {
@@ -72,62 +81,62 @@ const localTheme = {
 		},
 		h1: {
 			size: {
-				mobile: "38px",
+				mobile: "30px",
 				desktop: "40px",
 			},
 			lineheight: {
-				mobile: "1.2",
-				desktop: "1.2",
+				mobile: "1.20",
+				desktop: "1.20",
 			},
 		},
 		h2: {
 			size: {
-				mobile: "28px",
+				mobile: "22px",
 				desktop: "32px",
 			},
 			lineheight: {
-				mobile: "1.2",
-				desktop: "1.2",
+				mobile: "1.20",
+				desktop: "1.20",
 			},
 		},
 		h3: {
 			size: {
-				mobile: "24px",
+				mobile: "18px",
 				desktop: "28px",
 			},
 			lineheight: {
-				mobile: "1.2",
-				desktop: "1.2",
+				mobile: "1.20",
+				desktop: "1.20",
 			},
 		},
 		h4: {
 			size: {
-				mobile: "22px",
+				mobile: "16px",
 				desktop: "24px",
 			},
 			lineheight: {
-				mobile: "1.3",
-				desktop: "1.3",
+				mobile: "1.30",
+				desktop: "1.30",
 			},
 		},
 		h5: {
 			size: {
-				mobile: "18px",
+				mobile: "14px",
 				desktop: "20px",
 			},
 			lineheight: {
-				mobile: "1.4",
-				desktop: "1.4",
+				mobile: "1.40",
+				desktop: "1.40",
 			},
 		},
 		h6: {
 			size: {
-				mobile: "16px",
+				mobile: "12px",
 				desktop: "18px",
 			},
 			lineheight: {
-				mobile: "1.4",
-				desktop: "1.4",
+				mobile: "1.40",
+				desktop: "1.40",
 			},
 		},
 		eyebrow: {
@@ -156,8 +165,8 @@ const localTheme = {
 				desktop: "16px",
 			},
 			lineheight: {
-				mobile: "1",
-				desktop: "1",
+				mobile: "1.00",
+				desktop: "1.00",
 			},
 		},
 		buttonBig: {
@@ -166,8 +175,8 @@ const localTheme = {
 				desktop: "18px",
 			},
 			lineheight: {
-				mobile: "1",
-				desktop: "1",
+				mobile: "1.00",
+				desktop: "1.00",
 			},
 		},
 		lead: {
@@ -177,7 +186,7 @@ const localTheme = {
 			},
 			lineheight: {
 				mobile: "1.35",
-				desktop: "1.35",
+				desktop: "1.45",
 			},
 		},
 		input: {
@@ -186,8 +195,8 @@ const localTheme = {
 				desktop: "16px",
 			},
 			lineheight: {
-				mobile: "1",
-				desktop: "1",
+				mobile: "1.00",
+				desktop: "1.00",
 			},
 		},
 		inputBig: {
@@ -196,8 +205,8 @@ const localTheme = {
 				desktop: "18px",
 			},
 			lineheight: {
-				mobile: "1",
-				desktop: "1",
+				mobile: "1.00",
+				desktop: "1.00",
 			},
 		},
 		strong: {
@@ -206,8 +215,8 @@ const localTheme = {
 				desktop: "16px",
 			},
 			lineheight: {
-				mobile: "1.5",
-				desktop: "1.5",
+				mobile: "1.50",
+				desktop: "1.50",
 			},
 		},
 		text: {
@@ -216,8 +225,8 @@ const localTheme = {
 				desktop: "16px",
 			},
 			lineheight: {
-				mobile: "1.5",
-				desktop: "1.5",
+				mobile: "1.50",
+				desktop: "1.50",
 			},
 		},
 		small: {
@@ -226,18 +235,18 @@ const localTheme = {
 				desktop: "14px",
 			},
 			lineheight: {
-				mobile: "1.3",
-				desktop: "1.3",
+				mobile: "1.30",
+				desktop: "1.30",
 			},
 		},
 		blockquote: {
 			size: {
-				mobile: "16px",
+				mobile: "14px",
 				desktop: "18px",
 			},
 			lineheight: {
-				mobile: "1.5",
-				desktop: "1.5",
+				mobile: "1.50",
+				desktop: "1.50",
 			},
 		},
 	},