@rbxts/react-clean-ui 1.2.5 → 1.2.7

package/out/Theme/themes/default.theme.luau

@@ -15,6 +15,18 @@ local DefaultTheme = {
 					backgroundColor = Color3.fromHex("F5F5F5"),
 				},
 			},
+			secondary = {
+				default = {
+					textColor = Color3.fromHex("#1D2433"),
+					borderColor = Color3.fromHex("#C5CAD3"),
+					backgroundColor = Color3.fromHex("#E4E7EC"),
+				},
+				hover = {
+					textColor = Color3.fromHex("#1D2433"),
+					borderColor = Color3.fromHex("#B8BEC9"),
+					backgroundColor = Color3.fromHex("#D5D9E0"),
+				},
+			},
 			success = {
 				default = {
 					textColor = Color3.fromHex("#2E9D63"),
@@ -148,6 +160,84 @@ local DefaultTheme = {
 			cornerRadius = 8,
 			boxShadow = "2px 2px 2px 2px",
 		},
+		badge = {
+			cornerRadius = "50%",
+			borderThickness = 1,
+			padding = {
+				xs = "1px 4px",
+				sm = "2px 6px",
+				md = "2px 8px",
+				lg = "4px 10px",
+				xl = "6px 14px",
+			},
+			typography = {
+				xs = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size10,
+				},
+				sm = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size12,
+				},
+				md = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size14,
+				},
+				lg = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size18,
+				},
+				xl = {
+					weight = Enum.FontWeight.Bold,
+					size = Enum.FontSize.Size24,
+				},
+			},
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#1D2433"),
+						backgroundColor = Color3.fromHex("#EEF1F6"),
+						borderColor = Color3.fromHex("#D9DEE8"),
+						backgroundTransparency = 0,
+					},
+				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#6B7C93"),
+						borderColor = Color3.fromHex("#56657A"),
+					},
+				},
+				success = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#2E9D63"),
+						borderColor = Color3.fromHex("#237D4D"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#3187C8"),
+						borderColor = Color3.fromHex("#266CA2"),
+					},
+				},
+				warning = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#E7A92F"),
+						borderColor = Color3.fromHex("#C58B1D"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#D64545"),
+						borderColor = Color3.fromHex("#B53535"),
+					},
+				},
+			},
+		},
 		button = {
 			backgroundTransparency = 0,
 			borderThickness = 1,
@@ -164,6 +254,18 @@ local DefaultTheme = {
 						textColor = Color3.fromHex("#8A8A8A"),
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#1D2433"),
+						backgroundColor = Color3.fromHex("#E4E7EC"),
+						borderColor = Color3.fromHex("#C5CAD3"),
+					},
+					hover = {
+						textColor = Color3.fromHex("#1D2433"),
+						backgroundColor = Color3.fromHex("#D5D9E0"),
+						borderColor = Color3.fromHex("#B8BEC9"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
@@ -478,6 +580,13 @@ local DefaultTheme = {
 							borderColor = Color3.fromHex("#D9DEE8"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#6B7C93"),
+							backgroundTransparency = 0.7,
+							borderColor = Color3.fromHex("#56657A"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#2E9D63"),
@@ -517,6 +626,13 @@ local DefaultTheme = {
 							borderColor = Color3.fromHex("#D9DEE8"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#6B7C93"),
+							backgroundTransparency = 0.7,
+							borderColor = Color3.fromHex("#56657A"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#2E9D63"),
@@ -621,6 +737,11 @@ local DefaultTheme = {
 							backgroundColor = Color3.fromHex("#477FE8"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#6B7C93"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#2E9D63"),
@@ -671,6 +792,9 @@ local DefaultTheme = {
 				primary = {
 					backgroundTransparency = 0,
 				},
+				secondary = {
+					backgroundColor = Color3.fromHex("#E4E7EC"),
+				},
 				success = {
 					backgroundColor = Color3.fromHex("#dcf5e8"),
 				},
@@ -694,6 +818,9 @@ local DefaultTheme = {
 						backgroundColor = Color3.fromHex("#000000"),
 						backgroundTransparency = 0.5,
 					},
+					secondary = {
+						backgroundColor = Color3.fromHex("#6B7C93"),
+					},
 					success = {
 						backgroundColor = Color3.fromHex("#237D4D"),
 					},
@@ -722,6 +849,9 @@ local DefaultTheme = {
 			cornerRadius = 8,
 			boxShadow = "2px 2px 2px 2px",
 			intents = {
+				secondary = {
+					textColor = Color3.fromHex("#1D2433"),
+				},
 				success = {
 					textColor = Color3.fromHex("#FFFFFF"),
 				},

package/out/Theme/themes/sandstone.theme.luau

@@ -17,6 +17,18 @@ local SandstoneTheme = createTheme({
 					backgroundColor = Color3.fromHex("#C4DDD7"),
 				},
 			},
+			secondary = {
+				default = {
+					textColor = Color3.fromHex("#5E5446"),
+					borderColor = Color3.fromHex("#A89A84"),
+					backgroundColor = Color3.fromHex("#EAE2D4"),
+				},
+				hover = {
+					textColor = Color3.fromHex("#4A4034"),
+					borderColor = Color3.fromHex("#928470"),
+					backgroundColor = Color3.fromHex("#DFD5C3"),
+				},
+			},
 			success = {
 				default = {
 					textColor = Color3.fromHex("#2E6245"),
@@ -150,6 +162,55 @@ local SandstoneTheme = createTheme({
 			cornerRadius = 4,
 			boxShadow = "0px 3px 8px 0px",
 		},
+		badge = {
+			cornerRadius = 4,
+			borderThickness = 1,
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#244F4A"),
+						backgroundColor = Color3.fromHex("#D9E9E5"),
+						borderColor = Color3.fromHex("#4E8179"),
+						backgroundTransparency = 0,
+					},
+				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#5E5446"),
+						backgroundColor = Color3.fromHex("#EAE2D4"),
+						borderColor = Color3.fromHex("#A89A84"),
+					},
+				},
+				success = {
+					default = {
+						textColor = Color3.fromHex("#2E6245"),
+						backgroundColor = Color3.fromHex("#DDEBDD"),
+						borderColor = Color3.fromHex("#5B8A6A"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#365F78"),
+						backgroundColor = Color3.fromHex("#DDEAF0"),
+						borderColor = Color3.fromHex("#6F98AE"),
+					},
+				},
+				warning = {
+					default = {
+						textColor = Color3.fromHex("#7A5721"),
+						backgroundColor = Color3.fromHex("#F5E8C8"),
+						borderColor = Color3.fromHex("#C3994C"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#8A3D3A"),
+						backgroundColor = Color3.fromHex("#F2D9D5"),
+						borderColor = Color3.fromHex("#B46861"),
+					},
+				},
+			},
+		},
 		button = {
 			backgroundTransparency = 0,
 			borderThickness = 1,
@@ -165,6 +226,16 @@ local SandstoneTheme = createTheme({
 						textColor = Color3.fromHex("#9B8B73"),
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#5E5446"),
+					},
+					disabled = {
+						backgroundColor = Color3.fromHex("#E8DFCF"),
+						borderColor = Color3.fromHex("#D8CDBA"),
+						textColor = Color3.fromHex("#9B8B73"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#2E6245"),
@@ -450,6 +521,13 @@ local SandstoneTheme = createTheme({
 							backgroundTransparency = 0,
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#E3D9C6"),
+							backgroundTransparency = 0,
+							borderColor = Color3.fromHex("#A89A84"),
+						},
+					},
 				},
 			},
 			footer = {
@@ -460,6 +538,13 @@ local SandstoneTheme = createTheme({
 							backgroundTransparency = 0,
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#E3D9C6"),
+							backgroundTransparency = 0,
+							borderColor = Color3.fromHex("#A89A84"),
+						},
+					},
 				},
 			},
 		},
@@ -524,6 +609,11 @@ local SandstoneTheme = createTheme({
 							backgroundColor = Color3.fromHex("#4E8179"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#A89A84"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#5B8A6A"),

package/out/Theme/themes/wooden.theme.luau

@@ -39,9 +39,93 @@ local WoodenTheme = createTheme({
 					textColor = Color3.fromHex("#FFF7CF"),
 				},
 			},
+			secondary = {
+				default = {
+					textColor = Color3.fromHex("#D3CBA3"),
+					borderColor = Color3.fromHex("#3D2712"),
+					backgroundColor = Color3.fromHex("#5C3A18"),
+				},
+			},
 		},
 	},
 	components = {
+		badge = {
+			cornerRadius = "4px",
+			borderThickness = 2,
+			padding = "2px 10px",
+			typography = {
+				xs = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+				sm = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+				md = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+				lg = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+				xl = {
+					font = font,
+					size = Enum.FontSize.Size18,
+					weight = Enum.FontWeight.Regular,
+				},
+			},
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#7A4A20"),
+						backgroundTransparency = 0,
+					},
+				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#D3CBA3"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#5C3A18"),
+					},
+				},
+				success = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#4E6A24"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#2C5270"),
+					},
+				},
+				warning = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#A67A20"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#FFF7CF"),
+						borderColor = Color3.fromHex("#3D2712"),
+						backgroundColor = Color3.fromHex("#7A3220"),
+					},
+				},
+			},
+		},
 		button = {
 			cornerRadius = 0,
 			backgroundTransparency = 1,
@@ -68,6 +152,27 @@ local WoodenTheme = createTheme({
 						},
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#D3CBA3"),
+						borderColor = Color3.fromHex("#3D2712"),
+						borderThickness = 3,
+						backgroundColor = Color3.fromHex("#FFFFFF"),
+						backgroundTransparency = 0,
+						backgroundImage = {
+							image = "",
+						},
+						backgroundGradient = {
+							colors = { Color3.fromHex("#7A4A20"), Color3.fromHex("#5C3A18") },
+							rotation = 90,
+						},
+					},
+					hover = {
+						backgroundGradient = {
+							colors = { Color3.fromHex("#8A5A28"), Color3.fromHex("#6B4520") },
+						},
+					},
+				},
 				success = {
 					default = {
 						backgroundImage = {
@@ -327,6 +432,15 @@ local WoodenTheme = createTheme({
 							},
 						},
 					},
+					secondary = {
+						default = {
+							textColor = Color3.fromHex("#D3CBA3"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#5C3A18"),
+							},
+						},
+					},
 					success = {
 						default = {
 							backgroundTransparency = 1,
@@ -388,6 +502,15 @@ local WoodenTheme = createTheme({
 							},
 						},
 					},
+					secondary = {
+						default = {
+							textColor = Color3.fromHex("#D3CBA3"),
+							backgroundTransparency = 1,
+							backgroundImage = {
+								tintColor = Color3.fromHex("#5C3A18"),
+							},
+						},
+					},
 					success = {
 						default = {
 							backgroundTransparency = 1,
@@ -609,6 +732,11 @@ local WoodenTheme = createTheme({
 							backgroundColor = Color3.fromHex("#A16B30"),
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#8C7B62"),
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#4E6A24"),
@@ -728,6 +856,10 @@ local WoodenTheme = createTheme({
 					borderColor = Color3.fromHex("#3D2712"),
 					backgroundTransparency = 0,
 				},
+				secondary = {
+					textColor = Color3.fromHex("#D3CBA3"),
+					backgroundColor = Color3.fromHex("#5C3A18"),
+				},
 				success = {
 					backgroundColor = Color3.fromHex("#4E6A24"),
 				},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbxts/react-clean-ui",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "A clean UI library for Roblox TypeScript projects",
   "main": "out/init.lua",
   "scripts": {