@rbxts/react-clean-ui 1.1.0 → 1.2.4

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

@@ -158,16 +158,30 @@ local DarkTheme = createTheme({
 				primary = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
+						backgroundColor = Color3.fromHex("#FFFFFF"),
+						borderColor = Color3.fromHex("#6B96F0"),
+						backgroundGradient = {
+							colors = { Color3.fromHex("#365FAF"), Color3.fromHex("#4775CC") },
+							rotation = 90,
+						},
 					},
 					disabled = {
 						backgroundColor = Color3.fromHex("#1D222B"),
 						borderColor = Color3.fromHex("#343B49"),
 						textColor = Color3.fromHex("#697386"),
 					},
+					hover = {
+						backgroundColor = Color3.fromHex("#b8b8b8"),
+					},
 				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
+						borderColor = Color3.fromHex("#42C982"),
+						backgroundGradient = {
+							colors = { Color3.fromHex("#237A4D"), Color3.fromHex("#2D965F") },
+							rotation = 90,
+						},
 					},
 					disabled = {
 						backgroundColor = Color3.fromHex("#1D222B"),
@@ -178,6 +192,11 @@ local DarkTheme = createTheme({
 				info = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
+						borderColor = Color3.fromHex("#3ED6E8"),
+						backgroundGradient = {
+							colors = { Color3.fromHex("#0E7C8C"), Color3.fromHex("#20B4C4") },
+							rotation = 90,
+						},
 					},
 					disabled = {
 						backgroundColor = Color3.fromHex("#1D222B"),
@@ -188,6 +207,11 @@ local DarkTheme = createTheme({
 				warning = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
+						borderColor = Color3.fromHex("#E0AD3E"),
+						backgroundGradient = {
+							colors = { Color3.fromHex("#916B1D"), Color3.fromHex("#AF8427") },
+							rotation = 90,
+						},
 					},
 					disabled = {
 						backgroundColor = Color3.fromHex("#1D222B"),
@@ -198,6 +222,11 @@ local DarkTheme = createTheme({
 				danger = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
+						borderColor = Color3.fromHex("#EB6262"),
+						backgroundGradient = {
+							colors = { Color3.fromHex("#A63737"), Color3.fromHex("#C64646") },
+							rotation = 90,
+						},
 					},
 					disabled = {
 						backgroundColor = Color3.fromHex("#1D222B"),
@@ -214,6 +243,7 @@ local DarkTheme = createTheme({
 			placeholder = {
 				color = Color3.fromHex("#697386"),
 			},
+			iconColor = Color3.fromHex("#697386"),
 		},
 		select = {
 			dropDownBackgroundColor = Color3.fromHex("#20252E"),
@@ -238,11 +268,37 @@ local DarkTheme = createTheme({
 					},
 				},
 			},
+			optGroup = {
+				textColor = Color3.fromHex("#8892A6"),
+				spacing = {
+					xs = 4,
+					sm = 6,
+					md = 8,
+					lg = 10,
+					xl = 12,
+				},
+			},
+			search = {
+				spacing = {
+					xs = 4,
+					sm = 6,
+					md = 8,
+					lg = 10,
+					xl = 12,
+				},
+			},
 		},
 		checkbox = {
 			borderColor = Color3.fromHex("#3A4352"),
 			borderThickness = 1,
 			cornerRadius = 8,
+			intents = {
+				primary = {
+					default = {
+						backgroundColor = Color3.fromHex("#2A303B"),
+					},
+				},
+			},
 			spacing = {
 				xs = 1,
 				sm = 2,
@@ -251,6 +307,30 @@ local DarkTheme = createTheme({
 				xl = 8,
 			},
 		},
+		switch = {
+			width = 40,
+			height = 22,
+			cornerRadius = "100%",
+			borderThickness = 1,
+			disabledTransparency = 0.5,
+			animation = {
+				duration = 0.15,
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#2A303B"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#3A4352"),
+			},
+			thumb = {
+				inset = 2,
+				cornerRadius = "100%",
+				backgroundColor = Color3.fromHex("#E8EDF8"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#4B74C7"),
+				borderThickness = 1,
+				boxShadow = "0px 0px 2px 1px",
+			},
+		},
 		tabs = {
 			borderColor = Color3.fromHex("#343B49"),
 			backgroundColor = Color3.fromHex("#1B1F27"),
@@ -301,6 +381,57 @@ local DarkTheme = createTheme({
 				},
 			},
 		},
+		pagination = {
+			backgroundColor = Color3.fromHex("#14181F"),
+			backgroundTransparency = 0,
+			borderColor = Color3.fromHex("#343B49"),
+			borderThickness = 1,
+			cornerRadius = 8,
+			spacing = {
+				xs = 2,
+				sm = 4,
+				md = 6,
+				lg = 8,
+				xl = 12,
+			},
+			item = {
+				borderThickness = 0,
+				cornerRadius = 4,
+				spacing = {
+					xs = 1,
+					sm = 2,
+					md = 4,
+					lg = 6,
+					xl = 8,
+				},
+				intents = {
+					primary = {
+						default = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#AAB3C2"),
+						},
+						hover = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#FFFFFF"),
+						},
+						focus = {
+							textColor = Color3.fromHex("#FFFFFF"),
+							backgroundColor = Color3.fromHex("#2A303B"),
+							backgroundTransparency = 0,
+							boxShadow = "2px 2px 6px 0px",
+							typography = {
+								weight = Enum.FontWeight.Bold,
+							},
+						},
+						disabled = {
+							backgroundTransparency = 1,
+							borderColor = Color3.fromHex("#343B49"),
+							textColor = Color3.fromHex("#697386"),
+						},
+					},
+				},
+			},
+		},
 		accordion = {
 			borderColor = Color3.fromHex("#4B5568"),
 			header = {
@@ -330,6 +461,14 @@ local DarkTheme = createTheme({
 				backgroundColor = Color3.fromHex("#171B22"),
 			},
 		},
+		table = {
+			backgroundColor = Color3.fromHex("#171B22"),
+			borderColor = Color3.fromHex("#4B5568"),
+			rowDividerColor = Color3.fromHex("#343C4A"),
+			header = {
+				backgroundColor = Color3.fromHex("#252B36"),
+			},
+		},
 		draggable = {
 			placeholder = {
 				backgroundColor = Color3.fromHex("#2A303B"),
@@ -387,6 +526,92 @@ local DarkTheme = createTheme({
 				cornerRadius = "100%",
 			},
 		},
+		progressBar = {
+			animation = {
+				duration = 0.2,
+			},
+			header = {
+				spacing = {
+					xs = 2,
+					sm = 4,
+					md = 6,
+					lg = 8,
+					xl = 10,
+				},
+				label = {
+					typography = {
+						size = Enum.FontSize.Size18,
+						color = Color3.fromHex("#E8EDF8"),
+					},
+				},
+				value = {
+					typography = {
+						size = Enum.FontSize.Size18,
+						color = Color3.fromHex("#697386"),
+					},
+				},
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#2A303B"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#3A4352"),
+				borderThickness = 1,
+				cornerRadius = "100%",
+			},
+			fill = {
+				cornerRadius = "100%",
+				intents = {
+					primary = {
+						default = {
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundGradient = {
+								colors = { Color3.fromHex("#5A87DE"), Color3.fromHex("#345FAF") },
+								rotation = 90,
+							},
+						},
+					},
+					success = {
+						default = {
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundGradient = {
+								colors = { Color3.fromHex("#40A871"), Color3.fromHex("#237A4D") },
+								rotation = 90,
+							},
+						},
+					},
+					info = {
+						default = {
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundGradient = {
+								colors = { Color3.fromHex("#4799D0"), Color3.fromHex("#286D9F") },
+								rotation = 90,
+							},
+						},
+					},
+					warning = {
+						default = {
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundGradient = {
+								colors = { Color3.fromHex("#C29639"), Color3.fromHex("#916B1D") },
+								rotation = 90,
+							},
+						},
+					},
+					danger = {
+						default = {
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundGradient = {
+								colors = { Color3.fromHex("#D95858"), Color3.fromHex("#A63737") },
+								rotation = 90,
+							},
+						},
+					},
+				},
+				stripe = {
+					enabled = false,
+				},
+			},
+		},
 		toast = {
 			width = 300,
 			fadeDuration = 0.5,

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

@@ -194,6 +194,7 @@ local DefaultTheme = {
 			placeholder = {
 				color = Color3.fromHex("#8A8A8A"),
 			},
+			iconColor = Color3.fromHex("#8A8A8A"),
 		},
 		select = {
 			dropDownBackgroundColor = Color3.fromHex("#FFFFFF"),
@@ -216,6 +217,25 @@ local DefaultTheme = {
 					},
 				},
 			},
+			optGroup = {
+				textColor = Color3.fromHex("#5C6577"),
+				spacing = {
+					xs = 4,
+					sm = 6,
+					md = 8,
+					lg = 10,
+					xl = 12,
+				},
+			},
+			search = {
+				spacing = {
+					xs = 4,
+					sm = 6,
+					md = 8,
+					lg = 10,
+					xl = 12,
+				},
+			},
 		},
 		checkbox = {
 			borderColor = Color3.fromHex("#D9DEE8"),
@@ -229,6 +249,30 @@ local DefaultTheme = {
 				xl = 8,
 			},
 		},
+		switch = {
+			width = 40,
+			height = 22,
+			cornerRadius = "100%",
+			borderThickness = 1,
+			disabledTransparency = 0.5,
+			animation = {
+				duration = 0.15,
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#D9DEE8"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#D9DEE8"),
+			},
+			thumb = {
+				inset = 2,
+				cornerRadius = "100%",
+				backgroundColor = Color3.fromHex("#FFFFFF"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#D9DEE8"),
+				borderThickness = 1,
+				boxShadow = "0px 0px 2px 1px",
+			},
+		},
 		tabs = {
 			borderColor = Color3.fromHex("#D9DEE8"),
 			backgroundColor = Color3.fromHex("#FFFFFF"),
@@ -279,6 +323,57 @@ local DefaultTheme = {
 				},
 			},
 		},
+		pagination = {
+			backgroundColor = Color3.fromHex("#F5F5F5"),
+			backgroundTransparency = 0,
+			borderColor = Color3.fromHex("#D9DEE8"),
+			borderThickness = 1,
+			cornerRadius = 8,
+			spacing = {
+				xs = 2,
+				sm = 4,
+				md = 6,
+				lg = 8,
+				xl = 12,
+			},
+			item = {
+				borderThickness = 0,
+				cornerRadius = 4,
+				spacing = {
+					xs = 1,
+					sm = 2,
+					md = 4,
+					lg = 6,
+					xl = 8,
+				},
+				intents = {
+					primary = {
+						default = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#4F4F4F"),
+						},
+						hover = {
+							backgroundTransparency = 1,
+							textColor = Color3.fromHex("#000000"),
+						},
+						focus = {
+							textColor = Color3.fromHex("#000000"),
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundTransparency = 0,
+							boxShadow = "2px 2px 2px 2px",
+							typography = {
+								weight = Enum.FontWeight.Bold,
+							},
+						},
+						disabled = {
+							backgroundTransparency = 1,
+							borderColor = Color3.fromHex("#D9DEE8"),
+							textColor = Color3.fromHex("#8A8A8A"),
+						},
+					},
+				},
+			},
+		},
 		accordion = {
 			borderColor = Color3.fromHex("#D9DEE8"),
 			borderThickness = 1,
@@ -337,6 +432,31 @@ local DefaultTheme = {
 				duration = 0.2,
 			},
 		},
+		table = {
+			backgroundColor = Color3.fromHex("#FFFFFF"),
+			backgroundTransparency = 0,
+			borderColor = Color3.fromHex("#D9DEE8"),
+			borderThickness = 1,
+			cornerRadius = 8,
+			rowDividerColor = Color3.fromHex("#D9DEE8"),
+			rowDividerThickness = 1,
+			header = {
+				backgroundColor = Color3.fromHex("#F2F4F8"),
+				backgroundTransparency = 0,
+				typography = {
+					weight = Enum.FontWeight.Bold,
+				},
+			},
+			cell = {
+				spacing = {
+					xs = 4,
+					sm = 8,
+					md = 12,
+					lg = 16,
+					xl = 24,
+				},
+			},
+		},
 		draggable = {
 			placeholder = {
 				backgroundColor = Color3.fromHex("#D9DEE8"),
@@ -454,6 +574,86 @@ local DefaultTheme = {
 				aspectRatio = 1,
 			},
 		},
+		progressBar = {
+			height = {
+				xs = 8,
+				sm = 12,
+				md = 16,
+				lg = 20,
+				xl = 30,
+			},
+			animation = {
+				duration = 0.2,
+			},
+			header = {
+				spacing = {
+					xs = 2,
+					sm = 4,
+					md = 6,
+					lg = 8,
+					xl = 10,
+				},
+				label = {
+					typography = {
+						size = Enum.FontSize.Size18,
+						color = Color3.fromHex("#1D2433"),
+					},
+				},
+				value = {
+					typography = {
+						size = Enum.FontSize.Size18,
+						color = Color3.fromHex("#5C6577"),
+					},
+				},
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#F5F5F5"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#D9DEE8"),
+				borderThickness = 1,
+				cornerRadius = 4,
+			},
+			fill = {
+				cornerRadius = 4,
+				intents = {
+					primary = {
+						default = {
+							backgroundColor = Color3.fromHex("#477FE8"),
+						},
+					},
+					success = {
+						default = {
+							backgroundColor = Color3.fromHex("#2E9D63"),
+						},
+					},
+					info = {
+						default = {
+							backgroundColor = Color3.fromHex("#3187C8"),
+						},
+					},
+					warning = {
+						default = {
+							backgroundColor = Color3.fromHex("#E7A92F"),
+						},
+					},
+					danger = {
+						default = {
+							backgroundColor = Color3.fromHex("#D64545"),
+						},
+					},
+				},
+				stripe = {
+					enabled = true,
+					image = {
+						image = 86644568183933,
+						tileSize = "16px",
+						transparency = 0.9,
+					},
+					duration = 0.75,
+					direction = 1,
+				},
+			},
+		},
 		toast = {
 			fadeDuration = 0.5,
 			width = 300,
@@ -536,6 +736,16 @@ local DefaultTheme = {
 				},
 			},
 		},
+		modal = {
+			fadeDuration = 0.2,
+			baseZIndex = 1000,
+			zIndexStep = 10,
+			width = 420,
+			backdrop = {
+				backgroundColor = Color3.fromRGB(0, 0, 0),
+				backgroundTransparency = 0.5,
+			},
+		},
 		charts = {
 			colors = { Color3.fromHex("#2E9D63"), Color3.fromHex("#D64545"), Color3.fromHex("#E7A92F"), Color3.fromHex("#3187C8"), Color3.fromHex("#8E5AD7"), Color3.fromHex("#2FA7A1"), Color3.fromHex("#F26D4F"), Color3.fromHex("#D94F9D"), Color3.fromHex("#6B7C93"), Color3.fromHex("#7CB342") },
 			pie = {