@rbxts/react-clean-ui 1.2.2 → 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"),
@@ -263,6 +292,13 @@ local DarkTheme = createTheme({
 			borderColor = Color3.fromHex("#3A4352"),
 			borderThickness = 1,
 			cornerRadius = 8,
+			intents = {
+				primary = {
+					default = {
+						backgroundColor = Color3.fromHex("#2A303B"),
+					},
+				},
+			},
 			spacing = {
 				xs = 1,
 				sm = 2,
@@ -490,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

@@ -574,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,

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

@@ -487,6 +487,76 @@ local SandstoneTheme = createTheme({
 				cornerRadius = 4,
 			},
 		},
+		progressBar = {
+			header = {
+				spacing = {
+					xs = 2,
+					sm = 4,
+					md = 6,
+					lg = 8,
+					xl = 10,
+				},
+				label = {
+					typography = {
+						size = Enum.FontSize.Size18,
+						color = Color3.fromHex("#244F4A"),
+					},
+				},
+				value = {
+					typography = {
+						size = Enum.FontSize.Size18,
+						color = Color3.fromHex("#9B8B73"),
+					},
+				},
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#EFE5D3"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#CDBFA8"),
+				borderThickness = 1,
+				cornerRadius = 4,
+			},
+			fill = {
+				cornerRadius = 4,
+				intents = {
+					primary = {
+						default = {
+							backgroundColor = Color3.fromHex("#4E8179"),
+						},
+					},
+					success = {
+						default = {
+							backgroundColor = Color3.fromHex("#5B8A6A"),
+						},
+					},
+					info = {
+						default = {
+							backgroundColor = Color3.fromHex("#6F98AE"),
+						},
+					},
+					warning = {
+						default = {
+							backgroundColor = Color3.fromHex("#C3994C"),
+						},
+					},
+					danger = {
+						default = {
+							backgroundColor = Color3.fromHex("#B46861"),
+						},
+					},
+				},
+				stripe = {
+					enabled = false,
+					image = {
+						image = 86644568183933,
+						tileSize = "16px",
+						transparency = 0.85,
+					},
+					duration = 0.75,
+					direction = 1,
+				},
+			},
+		},
 		toast = {
 			width = 300,
 			fadeDuration = 0.5,

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

@@ -569,6 +569,79 @@ local WoodenTheme = createTheme({
 				borderColor = Color3.fromHex("#3D2712"),
 			},
 		},
+		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("#FFF7CF"),
+					},
+				},
+				value = {
+					typography = {
+						size = Enum.FontSize.Size18,
+						color = Color3.fromHex("#D3CBA3"),
+					},
+				},
+			},
+			track = {
+				backgroundColor = Color3.fromHex("#5C3A18"),
+				backgroundTransparency = 0,
+				borderColor = Color3.fromHex("#3D2712"),
+				borderThickness = 2,
+				cornerRadius = 0,
+			},
+			fill = {
+				cornerRadius = 0,
+				intents = {
+					primary = {
+						default = {
+							backgroundColor = Color3.fromHex("#A16B30"),
+						},
+					},
+					success = {
+						default = {
+							backgroundColor = Color3.fromHex("#4E6A24"),
+						},
+					},
+					info = {
+						default = {
+							backgroundColor = Color3.fromHex("#2C5270"),
+						},
+					},
+					warning = {
+						default = {
+							backgroundColor = Color3.fromHex("#A67A20"),
+						},
+					},
+					danger = {
+						default = {
+							backgroundColor = Color3.fromHex("#7A3220"),
+						},
+					},
+				},
+				stripe = {
+					enabled = false,
+					image = {
+						image = 86644568183933,
+						tileSize = "16px",
+						transparency = 0.65,
+					},
+					duration = 0.85,
+					direction = 1,
+				},
+			},
+		},
 		slider = {
 			height = 20,
 			bar = {

package/package.json

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