@rbxts/react-clean-ui 1.2.5 → 1.2.7

package/out/Components/Layout/Tabs.luau

@@ -14,6 +14,7 @@ local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
 local CssHelper = _Helpers.CssHelper
+local SizeHelper = _Helpers.SizeHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local TypographyHelper = _Helpers.TypographyHelper
 local _HoverButton = TS.import(script, script.Parent.Parent, "Input", "HoverButton")
@@ -21,11 +22,44 @@ local HoverButton = _HoverButton.HoverButton
 local HoverButtonContext = _HoverButton.HoverButtonContext
 local TabsContext = React.createContext({
 	selected = nil,
-	setSelected = function() end,
+	claimTab = function() end,
+	selectTab = function() end,
 })
+local TabsListContext = React.createContext({
+	fill = false,
+})
+local function TabButtonCorners()
+	local theme = React.useContext(CleanThemeContext)
+	local cornerRadius = theme.components.tabs.button.cornerRadius
+	if not (type(cornerRadius) == "table") then
+		return React.createElement(Corners, {
+			radius = theme.components.tabs.list.cornerRadius,
+		})
+	end
+	local fallback = SizeHelper:toUDim(theme.components.tabs.list.cornerRadius)
+	local topLeftRadius = if cornerRadius.topLeft ~= nil then CssHelper:parseCssSize(cornerRadius.topLeft) else fallback
+	local topRightRadius = if cornerRadius.topRight ~= nil then CssHelper:parseCssSize(cornerRadius.topRight) else fallback
+	local bottomLeftRadius = if cornerRadius.bottomLeft ~= nil then CssHelper:parseCssSize(cornerRadius.bottomLeft) else fallback
+	local bottomRightRadius = if cornerRadius.bottomRight ~= nil then CssHelper:parseCssSize(cornerRadius.bottomRight) else fallback
+	local isZero = function(radius)
+		return radius.Scale == 0 and radius.Offset == 0
+	end
+	if isZero(topLeftRadius) and isZero(topRightRadius) and isZero(bottomLeftRadius) and isZero(bottomRightRadius) then
+		return nil
+	end
+	return React.createElement("uicorner", {
+		key = "Corners",
+		TopLeftRadius = topLeftRadius,
+		TopRightRadius = topRightRadius,
+		BottomLeftRadius = bottomLeftRadius,
+		BottomRightRadius = bottomRightRadius,
+	})
+end
 local function TabButtonContent(props)
 	local theme = React.useContext(CleanThemeContext)
 	local hover = React.useContext(HoverButtonContext)
+	local _binding = React.useContext(TabsListContext)
+	local fill = _binding.fill
 	local _result = hover
 	if _result ~= nil then
 		_result = _result.isSelected
@@ -41,13 +75,29 @@ local function TabButtonContent(props)
 		_result_1 = if _result_2 then "hover" else "default"
 	end
 	local intent = ColorHelper:getIntentColors(theme, "primary", _result_1, theme.components.tabs.button.intents)
-	return React.createElement(React.Fragment, nil, React.createElement(Corners, {
-		radius = theme.components.tabs.list.cornerRadius,
+	local _condition = intent.borderThickness
+	if _condition == nil then
+		_condition = theme.components.tabs.button.borderThickness
+	end
+	local borderThickness = _condition
+	return React.createElement(React.Fragment, nil, React.createElement(TabButtonCorners), borderThickness > 0 and (React.createElement("uistroke", {
+		key = "Stroke",
+		Thickness = borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = intent.borderColor,
+	})), React.createElement(Gradient, {
+		value = intent.backgroundGradient,
 	}), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.tabs.button.spacing, theme.components.tabs.button.padding),
 	}), React.createElement(BoxShadow, {
 		value = intent.boxShadow,
-	}), React.createElement(Text, {
+	}), fill and (React.createElement("uilistlayout", {
+		key = "TitleLayout",
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})), React.createElement(Text, {
 		name = "TabTitleText",
 		TextColor3 = intent.textColor,
 		text = props.text,
@@ -58,16 +108,13 @@ local function TabTitle(props)
 	local theme = React.useContext(CleanThemeContext)
 	local _binding = React.useContext(TabsContext)
 	local selected = _binding.selected
-	local setSelected = _binding.setSelected
+	local claimTab = _binding.claimTab
+	local selectTab = _binding.selectTab
+	local _binding_1 = React.useContext(TabsListContext)
+	local fill = _binding_1.fill
 	local isSelected = selected == props.value
 	React.useEffect(function()
-		setSelected(function(current)
-			local _condition = current
-			if _condition == nil then
-				_condition = props.value
-			end
-			return _condition
-		end)
+		claimTab(props.value)
 	end, {})
 	local buttonDefault = ColorHelper:getIntentColors(theme, "primary", "default", theme.components.tabs.button.intents)
 	local buttonHover = ColorHelper:getIntentColors(theme, "primary", "hover", theme.components.tabs.button.intents)
@@ -82,7 +129,7 @@ local function TabTitle(props)
 		name = `TabButton-{props.value}`,
 		default = {
 			Size = UDim2.fromScale(0, 0),
-			AutomaticSize = Enum.AutomaticSize.XY,
+			AutomaticSize = if fill then Enum.AutomaticSize.Y else Enum.AutomaticSize.XY,
 			BackgroundColor3 = buttonDefault.backgroundColor,
 			BackgroundTransparency = buttonDefault.backgroundTransparency,
 			BorderSizePixel = 0,
@@ -96,7 +143,7 @@ local function TabTitle(props)
 			TileSize = buttonDefaultBackgroundImage.TileSize,
 			Event = {
 				Activated = function()
-					setSelected(props.value)
+					selectTab(props.value)
 				end,
 			},
 		},
@@ -153,7 +200,15 @@ local TabsList = React.forwardRef(function(props, ref)
 		value = theme.components.tabs.list.backgroundGradient,
 	}), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.list.spacing, theme.components.tabs.list.padding),
-	}), React.createElement(HStack, nil, props.children))
+	}), React.createElement(TabsListContext.Provider, {
+		value = {
+			fill = props.fill == true,
+		},
+	}, React.createElement(HStack, {
+		HorizontalFlex = if props.fill then Enum.UIFlexAlignment.Fill else nil,
+		Wraps = if props.fill then false else nil,
+		Padding = if theme.components.tabs.list.gap ~= nil then UDim.new(0, theme.components.tabs.list.gap) else nil,
+	}, props.children)))
 end)
 local TabsBody = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
@@ -162,12 +217,12 @@ local TabsBody = React.forwardRef(function(props, ref)
 		ref = ref,
 		width = "100%",
 		backgroundImage = props.backgroundImage or theme.components.tabs.backgroundImage,
-	}, React.createElement("uistroke", {
+	}, theme.components.tabs.borderThickness > 0 and (React.createElement("uistroke", {
 		key = "Stroke",
 		Thickness = theme.components.tabs.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 		Color = theme.components.tabs.borderColor,
-	}), React.createElement(Padding, {
+	})), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, {}, theme.components.tabs.spacing, theme.components.tabs.padding),
 	}), React.createElement(Corners, {
 		radius = theme.components.tabs.cornerRadius,
@@ -176,16 +231,41 @@ local TabsBody = React.forwardRef(function(props, ref)
 	}), props.children)
 end)
 local Tabs = React.forwardRef(function(props, _ref)
-	local selected, setSelected = React.useState(props.defaultValue)
+	local theme = React.useContext(CleanThemeContext)
+	local uncontrolledSelected, setUncontrolledSelected = React.useState(props.defaultValue)
+	local controlled = props.value ~= nil
+	local selected = if controlled then props.value else uncontrolledSelected
+	local onValueChange = props.onValueChange
 	local contextValue = React.useMemo(function()
 		return {
 			selected = selected,
-			setSelected = setSelected,
+			claimTab = function(value)
+				if not controlled then
+					setUncontrolledSelected(function(current)
+						local _condition = current
+						if _condition == nil then
+							_condition = value
+						end
+						return _condition
+					end)
+				end
+			end,
+			selectTab = function(value)
+				if not controlled then
+					setUncontrolledSelected(value)
+				end
+				local _result = onValueChange
+				if _result ~= nil then
+					_result(value)
+				end
+			end,
 		}
-	end, { selected })
+	end, { selected, controlled, onValueChange })
 	return React.createElement(TabsContext.Provider, {
 		value = contextValue,
-	}, React.createElement(VStack, nil, props.children))
+	}, React.createElement(VStack, {
+		Padding = if theme.components.tabs.gap ~= nil then UDim.new(0, theme.components.tabs.gap) else nil,
+	}, props.children))
 end)
 Tabs.List = TabsList
 Tabs.Body = TabsBody

package/out/Components/Layout/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Column';
 export * from './Accordion';
+export * from './BreakpointProvider';
 export * from './Container';
 export * from './Draggable';
 export * from './Droppable';

package/out/Components/Layout/init.luau

@@ -7,6 +7,9 @@ end
 for _k, _v in TS.import(script, script, "Accordion") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "BreakpointProvider") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Container") or {} do
 	exports[_k] = _v
 end

package/out/Components/Surface/Badge.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { IconElementProps, IntentElementProps, ScalableElementProps } from "../../Interfaces/";
+export interface BadgeProps extends IntentElementProps, ScalableElementProps, IconElementProps {
+    text: string;
+    name?: string;
+    LayoutOrder?: number;
+    Position?: UDim2;
+    AnchorPoint?: Vector2;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<ImageLabel>>;

package/out/Components/Surface/Badge.luau

@@ -0,0 +1,89 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
+local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
+local Padding = _Decorator.Padding
+local Text = TS.import(script, script.Parent.Parent, "Typography").Text
+local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
+local ColorHelper = _Helpers.ColorHelper
+local CssHelper = _Helpers.CssHelper
+local SpacingHelper = _Helpers.SpacingHelper
+local TypographyHelper = _Helpers.TypographyHelper
+local HStack = TS.import(script, script.Parent.Parent, "Layout").HStack
+local Icon = TS.import(script, script.Parent, "Icon").Icon
+local Badge = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local badgeTheme = theme.components.badge
+	local scale = props.scale or theme.default.scale
+	local intentColors = ColorHelper:getIntentColors(theme, props.intent, "default", badgeTheme.intents)
+	local backgroundImage = CssHelper:resolveBackgroundImage(intentColors.backgroundImage)
+	local padding = SpacingHelper:GetResolvedPadding(theme, {}, badgeTheme.spacing, badgeTheme.padding, scale)
+	local gap = math.ceil(SpacingHelper:GetPadding(theme, scale, badgeTheme.spacing) / 2)
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Badge"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Active = false
+	_attributes.Selectable = false
+	_attributes.Size = UDim2.fromOffset(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.Position = props.Position
+	_attributes.AnchorPoint = props.AnchorPoint
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.BackgroundColor3 = intentColors.backgroundColor
+	local _condition_1 = intentColors.backgroundTransparency
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	_attributes.BackgroundTransparency = _condition_1
+	_attributes.BorderSizePixel = 0
+	local _condition_2 = backgroundImage.Image
+	if _condition_2 == nil then
+		_condition_2 = ""
+	end
+	_attributes.Image = _condition_2
+	_attributes.ImageColor3 = backgroundImage.ImageColor3
+	_attributes.ImageTransparency = backgroundImage.ImageTransparency
+	_attributes.ScaleType = backgroundImage.ScaleType
+	_attributes.SliceCenter = backgroundImage.SliceCenter
+	_attributes.SliceScale = backgroundImage.SliceScale
+	_attributes.TileSize = backgroundImage.TileSize
+	return React.createElement("imagelabel", _attributes, React.createElement(Corners, {
+		radius = badgeTheme.cornerRadius,
+	}), badgeTheme.borderThickness > 0 and (React.createElement("uistroke", {
+		key = "Stroke",
+		Thickness = badgeTheme.borderThickness,
+		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
+		Color = intentColors.borderColor,
+	})), React.createElement(Gradient, {
+		value = intentColors.backgroundGradient,
+	}), React.createElement(Padding, {
+		resolvedPadding = padding,
+	}), React.createElement(HStack, {
+		valign = "Center",
+		Wraps = false,
+		Padding = UDim.new(0, gap),
+	}, props.icon ~= nil and React.createElement(Icon, {
+		name = "BadgeIcon",
+		LayoutOrder = 1,
+		scale = scale,
+		icon = props.icon,
+		color = intentColors.textColor,
+	}), React.createElement(Text, {
+		name = "BadgeText",
+		LayoutOrder = 2,
+		text = props.text,
+		TextWrap = false,
+		typography = TypographyHelper:getTypography(theme, scale, badgeTheme.typography),
+		TextColor3 = intentColors.textColor,
+	})))
+end)
+return {
+	Badge = Badge,
+}

package/out/Components/Surface/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Badge';
 export * from './Box';
 export * from './Card';
 export * from './Icon';

package/out/Components/Surface/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "Badge") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Box") or {} do
 	exports[_k] = _v
 end

package/out/Contexts/breakpoint.context.d.ts

@@ -0,0 +1,9 @@
+import React from "@rbxts/react";
+import { Breakpoint, ResponsiveValue } from "../Interfaces/responsive.types";
+export interface BreakpointContextValue {
+    width: number;
+    breakpoint: Breakpoint;
+}
+export declare const BreakpointContext: React.Context<BreakpointContextValue | undefined>;
+export declare function useBreakpoint(): Breakpoint;
+export declare function useBreakpointValue<T>(value: ResponsiveValue<T> | undefined): T | undefined;

package/out/Contexts/breakpoint.context.luau

@@ -0,0 +1,65 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Workspace = TS.import(script, TS.getModule(script, "@rbxts", "services")).Workspace
+local BreakpointHelper = TS.import(script, script.Parent.Parent, "Helpers", "breakpoint.helper").BreakpointHelper
+local SizeHelper = TS.import(script, script.Parent.Parent, "Helpers", "size.helper").SizeHelper
+local CleanThemeContext = TS.import(script, script.Parent, "theme.context").CleanThemeContext
+local BreakpointContext = React.createContext(nil)
+local function getViewportBreakpoint(breakpoints)
+	local camera = Workspace.CurrentCamera
+	if camera == nil then
+		return nil
+	end
+	return BreakpointHelper:getBreakpoint(camera.ViewportSize.X, breakpoints)
+end
+local function useBreakpoint()
+	local context = React.useContext(BreakpointContext)
+	local theme = React.useContext(CleanThemeContext)
+	local viewportBreakpoint, setViewportBreakpoint = React.useState(function()
+		return (if context == nil then getViewportBreakpoint(theme.breakpoints) else nil) or "xs"
+	end)
+	React.useEffect(function()
+		if context ~= nil then
+			return nil
+		end
+		local viewportConnection
+		local update = function()
+			local resolved = getViewportBreakpoint(theme.breakpoints)
+			if resolved ~= nil then
+				setViewportBreakpoint(resolved)
+			end
+		end
+		local bindCamera = function()
+			local _result = viewportConnection
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+			viewportConnection = nil
+			local camera = Workspace.CurrentCamera
+			if camera ~= nil then
+				viewportConnection = camera:GetPropertyChangedSignal("ViewportSize"):Connect(update)
+			end
+			update()
+		end
+		local cameraConnection = Workspace:GetPropertyChangedSignal("CurrentCamera"):Connect(bindCamera)
+		bindCamera()
+		return function()
+			cameraConnection:Disconnect()
+			local _result = viewportConnection
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+		end
+	end, { context == nil, theme.breakpoints })
+	return if context ~= nil then context.breakpoint else viewportBreakpoint
+end
+local function useBreakpointValue(value)
+	local breakpoint = useBreakpoint()
+	return SizeHelper:resolveResponsiveValue(value, breakpoint)
+end
+return {
+	useBreakpoint = useBreakpoint,
+	useBreakpointValue = useBreakpointValue,
+	BreakpointContext = BreakpointContext,
+}

package/out/Contexts/index.d.ts

@@ -1,3 +1,4 @@
+export * from './breakpoint.context';
 export * from './draggable.context';
 export * from './droppable.context';
 export * from './modal.context';

package/out/Contexts/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "breakpoint.context") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "draggable.context") or {} do
 	exports[_k] = _v
 end

package/out/Helpers/color.helper.luau

@@ -40,7 +40,17 @@ do
 			_overrideMatching = _overrideMatching[selectedIntent]
 		end
 		local overrideMatching = _overrideMatching
-		local layers = { defaultPrimary.default, defaultMatching.default, defaultPrimary[state], defaultMatching[state], self:resolveComponentDefaultLayer(componentPrimary), self:resolveComponentDefaultLayer(componentMatching), self:resolveComponentStateLayer(componentPrimary, state), self:resolveComponentStateLayer(componentMatching, state), self:resolveComponentDefaultLayer(overridePrimary), self:resolveComponentDefaultLayer(overrideMatching), self:resolveComponentStateLayer(overridePrimary, state), self:resolveComponentStateLayer(overrideMatching, state) }
+		local _exp = defaultPrimary.default
+		local _result = defaultMatching
+		if _result ~= nil then
+			_result = _result.default
+		end
+		local _exp_1 = defaultPrimary[state]
+		local _result_1 = defaultMatching
+		if _result_1 ~= nil then
+			_result_1 = _result_1[state]
+		end
+		local layers = { _exp, _result, _exp_1, _result_1, self:resolveComponentDefaultLayer(componentPrimary), self:resolveComponentDefaultLayer(componentMatching), self:resolveComponentStateLayer(componentPrimary, state), self:resolveComponentStateLayer(componentMatching, state), self:resolveComponentDefaultLayer(overridePrimary), self:resolveComponentDefaultLayer(overrideMatching), self:resolveComponentStateLayer(overridePrimary, state), self:resolveComponentStateLayer(overrideMatching, state) }
 		return self:mergeLayers(layers)
 	end
 	function ColorHelper:mergeLayers(layers)

package/out/Interfaces/semantics.d.ts

@@ -1,3 +1,3 @@
 export type ButtonFlag = "default" | "hover" | "focus" | "disabled";
 export type TextVariant = "display" | "title" | "heading" | "body" | "label" | "caption";
-export type Intent = "primary" | "success" | "warning" | "danger" | "info";
+export type Intent = "primary" | "secondary" | "success" | "warning" | "danger" | "info";

package/out/Theme/theme.style.d.ts

@@ -14,6 +14,7 @@ export interface IntentScheme {
     textColor: Color3;
     backgroundColor: Color3;
     borderColor: Color3;
+    borderThickness?: number;
     backgroundTransparency?: number;
     boxShadow?: CssShadow;
     typography?: Partial<TypographyStyle>;

package/out/Theme/theme.template.d.ts

@@ -2,7 +2,7 @@ import { CssShadow, CssSize, ScaledCssPadding, Breakpoint, BreakpointValue, Scal
 import { TypographyStyle, ScaledTypographyStyle, IntentScheme, IntentColors, InlineIntentColors, CssBackgroundImage, CssPosition, CssCornerRadius } from "./theme.style";
 export interface ThemeTemplate {
     colors: {
-        intents: Record<Intent, IntentColors>;
+        intents: Record<Exclude<Intent, "secondary">, IntentColors> & Partial<Record<"secondary", IntentColors>>;
     };
     breakpoints: BreakpointValue<number>;
     default: {
@@ -55,6 +55,14 @@ export interface ThemeTemplate {
             backgroundGradient?: CssBackgroundGradient;
             intents?: Partial<Record<Intent, InlineIntentColors>>;
         };
+        badge: {
+            cornerRadius: CssSize;
+            borderThickness: number;
+            spacing?: ScaleSizeValue<number>;
+            padding?: ScaledCssPadding;
+            typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
+            intents?: Partial<Record<Intent, InlineIntentColors>>;
+        };
         button: {
             backgroundTransparency: number;
             cornerRadius: CssSize;
@@ -70,6 +78,8 @@ export interface ThemeTemplate {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
+            backgroundColor?: Color3;
+            backgroundTransparency?: number;
             typography?: Partial<TypographyStyle> | ScaledTypographyStyle;
             backgroundImage?: CssBackgroundImage;
             backgroundGradient?: CssBackgroundGradient;
@@ -80,6 +90,10 @@ export interface ThemeTemplate {
             borderColor: Color3;
             borderThickness: number;
             cornerRadius: CssSize;
+            backgroundColor?: Color3;
+            backgroundTransparency?: number;
+            textColor?: Color3;
+            iconColor?: Color3;
             backgroundImage?: CssBackgroundImage;
             backgroundGradient?: CssBackgroundGradient;
             dropDownBackgroundColor: Color3;
@@ -144,7 +158,9 @@ export interface ThemeTemplate {
             cornerRadius: CssSize;
             spacing?: ScaleSizeValue<number>;
             padding?: ScaledCssPadding;
+            gap?: number;
             list: {
+                gap?: number;
                 borderColor?: Color3;
                 backgroundColor?: Color3;
                 backgroundTransparency?: number;
@@ -157,7 +173,7 @@ export interface ThemeTemplate {
             };
             button: {
                 borderThickness: number;
-                cornerRadius: CssSize;
+                cornerRadius: CssSize | CssCornerRadius;
                 spacing?: ScaleSizeValue<number>;
                 padding?: ScaledCssPadding;
                 boxShadow?: CssShadow;

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

@@ -17,6 +17,18 @@ local DarkTheme = createTheme({
 					backgroundColor = Color3.fromHex("#4775CC"),
 				},
 			},
+			secondary = {
+				default = {
+					textColor = Color3.fromHex("#D5DAE3"),
+					borderColor = Color3.fromHex("#4A5263"),
+					backgroundColor = Color3.fromHex("#3A414E"),
+				},
+				hover = {
+					textColor = Color3.fromHex("#FFFFFF"),
+					borderColor = Color3.fromHex("#5E687B"),
+					backgroundColor = Color3.fromHex("#474F5E"),
+				},
+			},
 			success = {
 				default = {
 					textColor = Color3.fromHex("#75E0A7"),
@@ -150,6 +162,55 @@ local DarkTheme = createTheme({
 			cornerRadius = 8,
 			boxShadow = "2px 2px 8px 0px",
 		},
+		badge = {
+			cornerRadius = "50%",
+			borderThickness = 1,
+			intents = {
+				primary = {
+					default = {
+						textColor = Color3.fromHex("#E8EDF8"),
+						backgroundColor = Color3.fromHex("#252B36"),
+						borderColor = Color3.fromHex("#343B49"),
+						backgroundTransparency = 0,
+					},
+				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#D5DAE3"),
+						backgroundColor = Color3.fromHex("#2A303B"),
+						borderColor = Color3.fromHex("#4A5263"),
+					},
+				},
+				success = {
+					default = {
+						textColor = Color3.fromHex("#75E0A7"),
+						backgroundColor = Color3.fromHex("#1B3A2A"),
+						borderColor = Color3.fromHex("#258A56"),
+					},
+				},
+				info = {
+					default = {
+						textColor = Color3.fromHex("#8DD0FF"),
+						backgroundColor = Color3.fromHex("#1B3345"),
+						borderColor = Color3.fromHex("#2F79B4"),
+					},
+				},
+				warning = {
+					default = {
+						textColor = Color3.fromHex("#FFD978"),
+						backgroundColor = Color3.fromHex("#3A2F17"),
+						borderColor = Color3.fromHex("#B68522"),
+					},
+				},
+				danger = {
+					default = {
+						textColor = Color3.fromHex("#FF8D8D"),
+						backgroundColor = Color3.fromHex("#3F1F1F"),
+						borderColor = Color3.fromHex("#B93A3A"),
+					},
+				},
+			},
+		},
 		button = {
 			backgroundTransparency = 0,
 			borderThickness = 1,
@@ -174,6 +235,21 @@ local DarkTheme = createTheme({
 						backgroundColor = Color3.fromHex("#b8b8b8"),
 					},
 				},
+				secondary = {
+					default = {
+						textColor = Color3.fromHex("#FFFFFF"),
+						borderColor = Color3.fromHex("#5E687B"),
+						backgroundGradient = {
+							colors = { Color3.fromHex("#3A414E"), Color3.fromHex("#474F5E") },
+							rotation = 90,
+						},
+					},
+					disabled = {
+						backgroundColor = Color3.fromHex("#1D222B"),
+						borderColor = Color3.fromHex("#343B49"),
+						textColor = Color3.fromHex("#697386"),
+					},
+				},
 				success = {
 					default = {
 						textColor = Color3.fromHex("#FFFFFF"),
@@ -489,6 +565,13 @@ local DarkTheme = createTheme({
 							backgroundTransparency = 0,
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#3A414E"),
+							backgroundTransparency = 0,
+							borderColor = Color3.fromHex("#4A5263"),
+						},
+					},
 				},
 			},
 			footer = {
@@ -499,6 +582,13 @@ local DarkTheme = createTheme({
 							backgroundTransparency = 0,
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#3A414E"),
+							backgroundTransparency = 0,
+							borderColor = Color3.fromHex("#4A5263"),
+						},
+					},
 				},
 			},
 		},
@@ -570,6 +660,15 @@ local DarkTheme = createTheme({
 							},
 						},
 					},
+					secondary = {
+						default = {
+							backgroundColor = Color3.fromHex("#FFFFFF"),
+							backgroundGradient = {
+								colors = { Color3.fromHex("#6B7486"), Color3.fromHex("#474F5E") },
+								rotation = 90,
+							},
+						},
+					},
 					success = {
 						default = {
 							backgroundColor = Color3.fromHex("#FFFFFF"),