@rbxts-ui/components 7.0.2 → 8.0.1

package/dist/buttons/TextButton.luau

@@ -4,13 +4,23 @@ local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primiti
 local Frame = _primitives.Frame
 local Text = _primitives.Text
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
 local lerpBinding = _pretty_react_hooks.lerpBinding
 local useMotion = _pretty_react_hooks.useMotion
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local useTextButtonStyle = makeStyle({
+	bgColor = "surfaceHover",
+	green = "success",
+	red = "danger",
+	blue = "accent",
+	black = "mark",
+	darkGray = "neutralButton",
+	textDefault = "textPrimary",
+	textOnDark = "textInverse",
+})
 local TextButtonVariant
 do
 	local _inverse = {}
@@ -52,25 +62,26 @@ local function TextButton(_param)
 	if hasOutline == nil then
 		hasOutline = true
 	end
-	local theme = defaultTheme
+	local styleOverride = _param.style
 	local rem = useRem()
+	local style = useTextButtonStyle(styleOverride)
 	local hover, hoverMotion = useMotion(0)
 	local colorVariant = {
-		[TextButtonVariant.Green] = theme.palette.green,
-		[TextButtonVariant.Red] = theme.palette.red,
-		[TextButtonVariant.Blue] = theme.palette.blue,
-		[TextButtonVariant.Black] = theme.palette.black,
-		[TextButtonVariant.DarkGray] = theme.palette.darkgray,
+		[TextButtonVariant.Green] = style.green,
+		[TextButtonVariant.Red] = style.red,
+		[TextButtonVariant.Blue] = style.blue,
+		[TextButtonVariant.Black] = style.black,
+		[TextButtonVariant.DarkGray] = style.darkGray,
 	}
 	local color = colorVariant[variant]
-	local textColor = if variant == TextButtonVariant.Black then theme.palette.white else theme.palette.crust
+	local textColor = if variant == TextButtonVariant.Black then style.textOnDark else style.textDefault
 	local _condition = radius
 	if _condition == nil then
 		_condition = 1
 	end
 	local cornerRadius = UDim.new(_condition, 0)
 	local _exp = React.createElement(Frame, {
-		backgroundColor = theme.palette.offwhite,
+		backgroundColor = style.bgColor,
 		backgroundTransparency = if isDisabled then 0.7 else 0,
 		cornerRadius = cornerRadius,
 		size = UDim2.new(1, 0, 1, 0),

package/dist/display/AlertBox.luau

@@ -6,13 +6,19 @@ local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primiti
 local Frame = _primitives.Frame
 local Text = _primitives.Text
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
+local useAlertBoxStyle = makeStyle({
+	warning = "warning",
+	info = "accent",
+	textColor = "textPrimary",
+})
 local InfoIcon = TS.import(script, script.Parent.Parent, "icons", "InfoIcon").InfoIcon
 local WarningIcon = TS.import(script, script.Parent.Parent, "icons", "WarningIcon").WarningIcon
 local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
 local function AlertBox(props)
 	local rem = useRem()
-	local variantColor = if props.variant == "warning" then defaultTheme.palette.yellow else defaultTheme.palette.blue
+	local style = useAlertBoxStyle()
+	local variantColor = if props.variant == "warning" then style.warning else style.info
 	local containerPadding = rem(2)
 	return React.createElement(Frame, {
 		name = props.name,
@@ -40,7 +46,7 @@ local function AlertBox(props)
 		portalRef = nil,
 	})), React.createElement(Text, {
 		text = props.text,
-		textColor = defaultTheme.palette.crust,
+		textColor = style.textColor,
 		textSize = rem(3),
 		size = UDim2.new(0, 0, 0, 0),
 		textWrapped = true,

package/dist/display/PillText.d.ts

@@ -1,4 +1,13 @@
 import { type TextProps } from "@rbxts-ui/primitives";
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const usePillTextStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    pillColor: "mark";
+    textColor: "textInverse";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    pillColor: "mark";
+    textColor: "textInverse";
+}>;
+export type PillTextStyle = StyleProps<typeof usePillTextStyle>;
 interface PillTextProps extends TextProps {
 }
 export declare function PillText(props: PillTextProps): JSX.Element;

package/dist/display/PillText.luau

@@ -8,7 +8,11 @@ local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").
 local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
 local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
+local usePillTextStyle = makeStyle({
+	pillColor = "mark",
+	textColor = "textInverse",
+})
 local WIDTH = 3
 local HEIGHT = 2
 local function PillText(props)
@@ -19,12 +23,12 @@ local function PillText(props)
 	local name = _binding.name
 	local zIndex = _binding.zIndex
 	local anchorPoint = _binding.anchorPoint
-	local theme = defaultTheme
+	local style = usePillTextStyle()
 	local textProps = Object.assign({}, omit(props, { "position", "name", "text", "textColor", "zIndex", "anchorPoint" }))
 	local rem = useRem()
 	local cornerRadius = UDim.new(0, rem(3))
 	local _exp = React.createElement(Frame, {
-		backgroundColor = theme.palette.black,
+		backgroundColor = style.pillColor,
 		backgroundTransparency = 0.3,
 		cornerRadius = cornerRadius,
 		size = UDim2.new(1, 0, 1, 0),
@@ -33,14 +37,14 @@ local function PillText(props)
 	local _exp_1 = React.createElement(Outline, {
 		cornerRadius = cornerRadius,
 		innerTransparency = 1,
-		innerColor = theme.palette.black,
+		innerColor = style.pillColor,
 		outerTransparency = 0,
-		outerColor = theme.palette.black,
+		outerColor = style.pillColor,
 	})
 	local _attributes = {
 		text = `{text}`,
 		textSize = rem(1),
-		textColor = textColor or theme.palette.text,
+		textColor = textColor or style.textColor,
 		richText = true,
 		automaticSize = Enum.AutomaticSize.XY,
 		rem = rem,

package/dist/error-handler/ErrorPage.luau

@@ -9,10 +9,20 @@ local Text = _primitives.Text
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
 local PrimaryButton = TS.import(script, script.Parent.Parent, "buttons", "PrimaryButton").PrimaryButton
 local TextField = TS.import(script, script.Parent.Parent, "form", "TextField").TextField
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _theme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist)
+local defaultTheme = _theme.defaultTheme
+local makeStyle = _theme.makeStyle
+local useErrorPageStyle = makeStyle({
+	panelColor = "textPrimary",
+	textColor = "surface",
+	errorColor = "danger",
+	accent = "accent",
+	info = "info",
+})
 local function ErrorPage(_param)
 	local message = _param.message
 	local rem = useRem()
+	local style = useErrorPageStyle()
 	local index = 0
 	local _exp = React.createElement("uilistlayout", {
 		FillDirection = "Vertical",
@@ -32,7 +42,7 @@ local function ErrorPage(_param)
 	local _attributes_1 = {
 		font = defaultTheme.fonts.inter.bold,
 		text = "Oh Noes!",
-		textColor = defaultTheme.palette.text,
+		textColor = style.textColor,
 		textSize = rem(3),
 		textAutoResize = "XY",
 	}
@@ -50,7 +60,7 @@ local function ErrorPage(_param)
 	local _attributes_3 = {
 		font = defaultTheme.fonts.inter.regular,
 		text = "Something went wrong, and we were unable to recover.",
-		textColor = defaultTheme.palette.text,
+		textColor = style.textColor,
 		textSize = rem(1.5),
 		textAutoResize = "XY",
 	}
@@ -68,7 +78,7 @@ local function ErrorPage(_param)
 	local _attributes_5 = {
 		font = defaultTheme.fonts.inter.regular,
 		text = "Please send this error to the developers, and try reconnecting:",
-		textColor = defaultTheme.palette.text,
+		textColor = style.textColor,
 		textSize = rem(1.5),
 		textAutoResize = "XY",
 	}
@@ -88,12 +98,12 @@ local function ErrorPage(_param)
 		textEditable = false,
 		font = defaultTheme.fonts.roboto.regular,
 		text = `{message}`,
-		textColor = defaultTheme.palette.red,
+		textColor = style.errorColor,
 		textSize = rem(1.5),
 		textAutoResize = "XY",
 		textXAlignment = "Left",
 		maxVisibleGraphemes = 512,
-		backgroundColor = defaultTheme.palette.crust,
+		backgroundColor = style.panelColor,
 		backgroundTransparency = 0,
 		cornerRadius = UDim.new(0, rem(1.5)),
 	}
@@ -106,7 +116,7 @@ local function ErrorPage(_param)
 		PaddingTop = UDim.new(0, rem(2)),
 		PaddingBottom = UDim.new(0, rem(2)),
 	}), React.createElement("uistroke", {
-		Color = defaultTheme.palette.red,
+		Color = style.errorColor,
 		Transparency = 0.3,
 		Thickness = 1,
 		ApplyStrokeMode = "Border",
@@ -122,19 +132,19 @@ local function ErrorPage(_param)
 		onClick = TS.async(function()
 			warn("Reconnecting...")
 		end),
-		overlayGradient = ColorSequence.new(defaultTheme.palette.blue, defaultTheme.palette.blueishColor),
+		overlayGradient = ColorSequence.new(style.accent, style.info),
 		size = UDim2.new(0, rem(12), 0, rem(5)),
 	}
 	local _original_9 = index
 	index += 1
 	_attributes_9.layoutOrder = _original_9
 	return React.createElement(Layer, nil, React.createElement(Frame, {
-		backgroundColor = defaultTheme.palette.crust,
+		backgroundColor = style.panelColor,
 		size = UDim2.new(1, 0, 1, 0),
 	}, _exp, _exp_1, _exp_2, _exp_3, _exp_4, _exp_5, _exp_6, _exp_7, _exp_8, _exp_9, React.createElement(PrimaryButton, _attributes_9, React.createElement(Text, {
 		font = defaultTheme.fonts.inter.medium,
 		text = "Reconnect →",
-		textColor = defaultTheme.palette.text,
+		textColor = style.textColor,
 		textSize = rem(1.5),
 		size = UDim2.new(1, 0, 1, 0),
 	}))))

package/dist/form/Checkbox.d.ts

@@ -1,3 +1,16 @@
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useCheckboxStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    boxColor: "surface";
+    markColor: "mark";
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    boxColor: "surface";
+    markColor: "mark";
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>;
+export type CheckboxStyle = StyleProps<typeof useCheckboxStyle>;
 interface CheckboxProps {
     checked: boolean;
     onChecked: (checked: boolean) => void;
@@ -5,7 +18,8 @@ interface CheckboxProps {
     variant?: "default" | "large" | "small";
     position?: UDim2;
     disabled?: boolean;
+    style?: CheckboxStyle;
 }
-export declare function Checkbox({ checked, onChecked, text, variant, position, disabled }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked, onChecked, text, variant, position, disabled, style: styleOverride, }: CheckboxProps): JSX.Element;
 export type { CheckboxProps };
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/form/Checkbox.luau

@@ -4,15 +4,52 @@ local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primiti
 local Frame = _primitives.Frame
 local Text = _primitives.Text
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
-local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
-local lerpBinding = _pretty_react_hooks.lerpBinding
-local useMotion = _pretty_react_hooks.useMotion
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
+local useMotion = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useMotion
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useMemo = _react.useMemo
 local ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "ReactiveButton").ReactiveButton
 local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local useCheckboxStyle = makeStyle({
+	boxColor = "surface",
+	markColor = "mark",
+	labelColor = "textPrimary",
+	mutedColor = "textMuted",
+})
+--[[
+	*
+	 * The checkmark, drawn from two rotated rounded frames in `color`. Replaces the
+	 * "✔" glyph, which Roblox renders with the fixed-color emoji font (ignores the
+	 * theme — invisible on dark surfaces).
+	 
+]]
+local function CheckGlyph(_param)
+	local color = _param.color
+	local cornerRadius = UDim.new(0.5, 0)
+	return React.createElement(Frame, {
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.fromScale(0.5, 0.5),
+		size = UDim2.fromScale(0.7, 0.7),
+		backgroundTransparency = 1,
+	}, React.createElement(Frame, {
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.fromScale(0.62, 0.5),
+		size = UDim2.fromScale(0.17, 0.8),
+		backgroundColor = color,
+		backgroundTransparency = 0,
+		rotation = 40,
+		cornerRadius = cornerRadius,
+	}), React.createElement(Frame, {
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.fromScale(0.27, 0.67),
+		size = UDim2.fromScale(0.17, 0.45),
+		backgroundColor = color,
+		backgroundTransparency = 0,
+		rotation = -50,
+		cornerRadius = cornerRadius,
+	}))
+end
 local function Checkbox(_param)
 	local checked = _param.checked
 	local onChecked = _param.onChecked
@@ -26,9 +63,9 @@ local function Checkbox(_param)
 	if disabled == nil then
 		disabled = false
 	end
-	local theme = defaultTheme
+	local styleOverride = _param.style
 	local rem = useRem()
-	local hover, hoverMotion = useMotion(0)
+	local style = useCheckboxStyle(styleOverride)
 	local checkboxSize = if variant == "large" then 4 elseif variant == "small" then 1.7 else 3
 	local buttonSize = UDim2.new(0, rem(checkboxSize), 0, rem(checkboxSize))
 	local textWidth, textWidthMotion = useMotion({
@@ -45,8 +82,8 @@ local function Checkbox(_param)
 		end)
 	end, { rem })
 	local cornerRadius = UDim.new(0, rem(1))
-	local mainColor = if disabled then theme.palette.overlay0 else theme.palette.black
-	local textColor = if disabled then theme.palette.overlay0 else theme.palette.black
+	local markColor = if disabled then style.mutedColor else style.markColor
+	local labelColor = if disabled then style.mutedColor else style.labelColor
 	return React.createElement(ReactiveButton, {
 		backgroundTransparency = 1,
 		size = size,
@@ -54,9 +91,6 @@ local function Checkbox(_param)
 		onClick = function()
 			return not disabled and onChecked(not checked)
 		end,
-		onHover = function(hovered)
-			return hoverMotion:spring(if hovered then 1 else 0)
-		end,
 	}, React.createElement("uilistlayout", {
 		FillDirection = "Horizontal",
 		VerticalAlignment = "Center",
@@ -64,36 +98,19 @@ local function Checkbox(_param)
 	}), React.createElement(Frame, {
 		backgroundTransparency = 1,
 		size = buttonSize,
-	}, React.createElement(Frame, {
-		backgroundColor = theme.palette.white,
-		cornerRadius = cornerRadius,
-		size = UDim2.new(1, 0, 1, 0),
-	}, React.createElement("uigradient", {
-		Offset = lerpBinding(hover, Vector2.new(), Vector2.new(0, 1)),
-		Rotation = 90,
-		Transparency = NumberSequence.new(0, 0.1),
-	})), React.createElement(Outline, {
-		outerColor = mainColor,
-		innerColor = mainColor,
+	}, React.createElement(Outline, {
+		outerColor = markColor,
+		innerColor = markColor,
 		cornerRadius = cornerRadius,
 		innerTransparency = 0,
 		outerTransparency = 1,
 		innerThickness = 2,
-	}), React.createElement(Text, {
-		text = if checked then "✔" else "",
-		textColor = mainColor,
-		textScaled = true,
-		size = UDim2.new(1, 0, 1, 0),
-		position = UDim2.new(0.5, 0, 0.5, 0),
-		anchorPoint = Vector2.new(0.5, 0.5),
-		textXAlignment = "Center",
-		textYAlignment = "Center",
-		padding = 0.9,
-		rem = rem,
-	})), if text ~= "" and text then (React.createElement(Text, {
+	}), if checked then React.createElement(CheckGlyph, {
+		color = markColor,
+	}) else nil), if text ~= "" and text then (React.createElement(Text, {
 		text = text,
 		size = UDim2.new(0, rem(2), 0, rem(2)),
-		textColor = textColor,
+		textColor = labelColor,
 		textXAlignment = "Left",
 		change = {
 			TextBounds = function(rbx)

package/dist/form/CheckboxRow.d.ts

@@ -1,4 +1,13 @@
 import React from "@rbxts/react";
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useCheckboxRowStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>;
+export type CheckboxRowStyle = StyleProps<typeof useCheckboxRowStyle>;
 interface CheckboxRowProps {
     label: string;
     checked: boolean;
@@ -6,7 +15,8 @@ interface CheckboxRowProps {
     disabled?: boolean;
     name?: string;
     children?: React.ReactNode;
+    style?: CheckboxRowStyle;
 }
-export declare function CheckboxRow({ label, checked, onChecked, disabled, name, children, }: CheckboxRowProps): JSX.Element;
+export declare function CheckboxRow({ label, checked, onChecked, disabled, name, children, style: styleOverride, }: CheckboxRowProps): JSX.Element;
 export type { CheckboxRowProps };
 //# sourceMappingURL=CheckboxRow.d.ts.map

package/dist/form/CheckboxRow.luau

@@ -6,7 +6,11 @@ local Checkbox = TS.import(script, script.Parent, "Checkbox").Checkbox
 local Button = TS.import(script, script.Parent.Parent, "buttons", "Button").Button
 local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
+local useCheckboxRowStyle = makeStyle({
+	labelColor = "textPrimary",
+	mutedColor = "textMuted",
+})
 local function CheckboxRow(_param)
 	local label = _param.label
 	local checked = _param.checked
@@ -17,7 +21,8 @@ local function CheckboxRow(_param)
 	end
 	local name = _param.name
 	local children = _param.children
-	local theme = defaultTheme
+	local styleOverride = _param.style
+	local style = useCheckboxRowStyle(styleOverride)
 	local rem = useRem()
 	local textSize = rem(3)
 	return React.createElement(HStack, {
@@ -38,7 +43,7 @@ local function CheckboxRow(_param)
 		text = label,
 		textSize = textSize,
 		textScaled = true,
-		textColor = if disabled then theme.palette.overlay0 else theme.palette.crust,
+		textColor = if disabled then style.mutedColor else style.labelColor,
 		size = UDim2.new(1, 0, 1, 0),
 		textXAlignment = "Left",
 	})), children)

package/dist/form/Dropdown.d.ts

@@ -1,4 +1,13 @@
+import { type StyleProps } from "@rbxts-ui/theme";
 import React from "@rbxts/react";
+declare const useDropdownStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    bgColor: "surface";
+    borderColor: "border";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    bgColor: "surface";
+    borderColor: "border";
+}>;
+export type DropdownStyle = StyleProps<typeof useDropdownStyle>;
 interface DropdownOption<T> {
     label: string;
     value: T;
@@ -10,6 +19,7 @@ interface DropdownProps<T> {
     size?: UDim2;
     renderOption?: (option: DropdownOption<T>) => React.ReactNode;
     portalRef?: React.RefObject<GuiObject>;
+    style?: DropdownStyle;
 }
 export declare function Dropdown<T>(props: DropdownProps<T>): JSX.Element;
 export type { DropdownOption, DropdownProps };

package/dist/form/Dropdown.luau

@@ -3,7 +3,7 @@ local TS = _G[script]
 local VStackScrolling = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStackScrolling
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
@@ -13,6 +13,10 @@ local createPortal = TS.import(script, TS.getModule(script, "@rbxts", "react-rob
 local DropdownButton = TS.import(script, script.Parent.Parent, "buttons", "DropdownButton").DropdownButton
 local DropdownOptionButton = TS.import(script, script.Parent.Parent, "buttons", "DropdownOptionButton").DropdownOptionButton
 local ClickOutsideLayer = TS.import(script, script.Parent.Parent, "utils", "ClickOutsideOverlay").ClickOutsideLayer
+local useDropdownStyle = makeStyle({
+	bgColor = "surface",
+	borderColor = "border",
+})
 local function Dropdown(props)
 	local _binding = props
 	local options = _binding.options
@@ -21,7 +25,7 @@ local function Dropdown(props)
 	local size = _binding.size
 	local renderOption = _binding.renderOption
 	local portalRef = _binding.portalRef
-	local theme = defaultTheme
+	local style = useDropdownStyle(props.style)
 	local isOpen, setIsOpen = useState(false)
 	local dropdownBounds, setDropdownBounds = useState()
 	local dropdownRef = useRef()
@@ -71,7 +75,7 @@ local function Dropdown(props)
 			CornerRadius = cornerRadius,
 		})
 		local _exp_1 = React.createElement("uistroke", {
-			Color = theme.palette.crust,
+			Color = style.borderColor,
 			Transparency = 0.5,
 			Thickness = 1,
 		})
@@ -122,10 +126,10 @@ local function Dropdown(props)
 		}, React.createElement(VStackScrolling, {
 			Position = UDim2.new(0, relativePosition.X, 0, dropdownY),
 			Size = UDim2.new(0, dropdownBounds.size.X, 0, dropdownHeight),
-			BackgroundColor3 = theme.palette.white,
+			BackgroundColor3 = style.bgColor,
 			BackgroundTransparency = 0,
 			ClipsDescendants = true,
-			BorderColor3 = theme.palette.crust,
+			BorderColor3 = style.borderColor,
 			ZIndex = 2000,
 			paddingBottom = rem(1),
 		}, renderOptions())), container)

package/dist/form/FormRow.d.ts

@@ -1,10 +1,20 @@
+import { type StyleProps } from "@rbxts-ui/theme";
 import React from "@rbxts/react";
+declare const useFormRowStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>;
+export type FormRowStyle = StyleProps<typeof useFormRowStyle>;
 interface FormRowProps {
     label: string;
     children: React.ReactNode;
     disabled?: boolean;
     name?: string;
+    style?: FormRowStyle;
 }
-export declare function FormRow({ label, children, disabled, name }: FormRowProps): JSX.Element;
+export declare function FormRow({ label, children, disabled, name, style: styleOverride }: FormRowProps): JSX.Element;
 export type { FormRowProps };
 //# sourceMappingURL=FormRow.d.ts.map

package/dist/form/FormRow.luau

@@ -3,15 +3,20 @@ local TS = _G[script]
 local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useFormRowStyle = makeStyle({
+	labelColor = "textPrimary",
+	mutedColor = "textMuted",
+})
 local INPUT_HEIGHT = 5
 local function FormRow(_param)
 	local label = _param.label
 	local children = _param.children
 	local disabled = _param.disabled
 	local name = _param.name
-	local theme = defaultTheme
+	local styleOverride = _param.style
+	local style = useFormRowStyle(styleOverride)
 	local rem = useRem()
 	local textSize = rem(3)
 	local labelWidth = rem(20)
@@ -23,7 +28,7 @@ local function FormRow(_param)
 		text = label,
 		textSize = textSize,
 		textScaled = true,
-		textColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		textColor = if disabled then style.mutedColor else style.labelColor,
 		size = UDim2.new(0.3, 0, 0, rem(INPUT_HEIGHT)),
 		textXAlignment = "Left",
 	}, React.createElement("uisizeconstraint", {

package/dist/form/IconChip.d.ts

@@ -0,0 +1,15 @@
+import { type IconName } from "@rbxts-ui/icons";
+interface IconChipProps {
+    readonly icon: IconName;
+    /** Tint of the icon and its circular backing. */
+    readonly primary: Color3;
+    readonly height?: number;
+}
+/**
+ * Circular tinted icon used as the leading affordance of an input row. Replaces
+ * the old emoji chip (emoji ignore color and read inconsistently). Call sites pick
+ * `primary` for the light theme, so on dark we lift it toward white to stay legible.
+ */
+export declare function IconChip({ icon, primary, height }: IconChipProps): JSX.Element;
+export type { IconChipProps };
+//# sourceMappingURL=IconChip.d.ts.map

package/dist/form/IconChip.luau

@@ -0,0 +1,47 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local Icon = TS.import(script, TS.getModule(script, "@rbxts-ui", "icons").dist).Icon
+local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
+local Frame = _primitives.Frame
+local Group = _primitives.Group
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local pickTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).pickTheme
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+--[[
+	*
+	 * Circular tinted icon used as the leading affordance of an input row. Replaces
+	 * the old emoji chip (emoji ignore color and read inconsistently). Call sites pick
+	 * `primary` for the light theme, so on dark we lift it toward white to stay legible.
+	 
+]]
+local function IconChip(_param)
+	local icon = _param.icon
+	local primary = _param.primary
+	local height = _param.height
+	if height == nil then
+		height = 4
+	end
+	local rem = useRem()
+	local fullRound = UDim.new(1, 0)
+	local iconSize = rem(height / 1.6)
+	local tint = pickTheme(primary, primary:Lerp(Color3.new(1, 1, 1), 0.55))
+	return React.createElement(Group, {
+		size = UDim2.new(0, rem(height), 0, rem(height)),
+	}, React.createElement(Frame, {
+		backgroundColor = tint,
+		backgroundTransparency = pickTheme(0.8, 0.85),
+		cornerRadius = fullRound,
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		size = UDim2.new(1, 0, 1, 0),
+	}), React.createElement(Icon, {
+		icon = icon,
+		color = tint,
+		size = UDim2.new(0, iconSize, 0, iconSize),
+		anchorPoint = Vector2.new(0.5, 0.5),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+	}))
+end
+return {
+	IconChip = IconChip,
+}