@rbxts/uiblox 0.2.0-alpha.2 → 0.2.0-alpha.20

package/README.md

@@ -36,6 +36,8 @@ npm install @rbxts/uiblox
 4. Use packaged components from `@rbxts/uiblox` (`Button`, `Input`, `Select`, …).
 5. Preview components in [Storyblox](https://github.com/bjlarouche/storyblox) with `*.stories` modules.
 
+Token reference (spacing, density, typography, shape, palette, `resolveStyle`): [docs/STYLING.md](docs/STYLING.md).
+
 ```tsx
 import React from "@rbxts/react";
 import { Button, DarkTheme, ThemeProvider } from "@rbxts/uiblox";

package/out/theme/constants/NumberConstants.d.ts

@@ -2,5 +2,7 @@ import { IconSizes } from "../interfaces/iconSizes/index";
 export declare const SPACING_BASE = 8;
 export declare const PADDING_BASE = 4;
 export declare const BORDER_RADIUS = 4;
+/** UICorner scale for pill/capsule controls (1 = fully round). */
+export declare const PILL_SCALE = 1;
 export declare const CONTENT_WIDTH = 1024;
 export declare const ICON_SIZES: IconSizes;

package/out/theme/constants/NumberConstants.luau

@@ -2,6 +2,8 @@
 local SPACING_BASE = 8
 local PADDING_BASE = 4
 local BORDER_RADIUS = 4
+--* UICorner scale for pill/capsule controls (1 = fully round). 
+local PILL_SCALE = 1
 local CONTENT_WIDTH = 1024
 local ICON_SIZES = {
 	small = 16,
@@ -12,6 +14,7 @@ return {
 	SPACING_BASE = SPACING_BASE,
 	PADDING_BASE = PADDING_BASE,
 	BORDER_RADIUS = BORDER_RADIUS,
+	PILL_SCALE = PILL_SCALE,
 	CONTENT_WIDTH = CONTENT_WIDTH,
 	ICON_SIZES = ICON_SIZES,
 }

package/out/theme/interfaces/spacing/Shape.d.ts

@@ -1,3 +1,6 @@
 export default interface Shape {
+    /** Pixel radius for squared controls (Button, Input, Paper). */
     borderRadius: number;
+    /** UICorner scale for capsules (Switch, Chip). Use `new UDim(pillScale, 0)`. */
+    pillScale: number;
 }

package/out/theme/interfaces/typography/FontSizes.d.ts

@@ -1,3 +1,3 @@
 import { FontSizeOptions } from "./FontSizeOptions";
-export declare const baseFontSize = 14;
+export declare const baseFontSize: number;
 export declare const allFontSizes: FontSizeOptions;

package/out/theme/interfaces/typography/FontSizes.luau

@@ -1,13 +1,20 @@
 -- Compiled with roblox-ts v3.0.0
-local baseFontSize = 14
+local TS = _G[script]
+local allTypographyVariants = TS.import(script, script.Parent, "Variants").allTypographyVariants
+local baseFontSize = allTypographyVariants.body.size
 local allFontSizes = {
-	h1 = 28,
-	h2 = 22,
-	h3 = 18,
-	body = baseFontSize,
-	caption = 12,
-	overline = 10,
-	button = 13,
+	h1 = allTypographyVariants.h1.size,
+	h2 = allTypographyVariants.h2.size,
+	h3 = allTypographyVariants.h3.size,
+	h4 = allTypographyVariants.h4.size,
+	h5 = allTypographyVariants.h5.size,
+	h6 = allTypographyVariants.h6.size,
+	subtitle1 = allTypographyVariants.subtitle1.size,
+	subtitle2 = allTypographyVariants.subtitle2.size,
+	body = allTypographyVariants.body.size,
+	caption = allTypographyVariants.caption.size,
+	overline = allTypographyVariants.overline.size,
+	button = allTypographyVariants.button.size,
 }
 return {
 	baseFontSize = baseFontSize,

package/out/theme/interfaces/typography/ThemeTypography.d.ts

@@ -1,7 +1,10 @@
 import { FontFamilyOptions } from "./FontFamilyOptions";
 import { FontSizeOptions } from "./FontSizeOptions";
+import { FontSizeVariant } from "./FontSizeOptions";
+import { TypographyVariantSpec } from "./Variants";
 interface ThemeTypography {
     fontSizes: FontSizeOptions;
     fontFamilies: FontFamilyOptions;
+    variants: Record<FontSizeVariant, TypographyVariantSpec>;
 }
 export default ThemeTypography;

package/out/theme/interfaces/typography/Variants.d.ts

@@ -1,18 +1,17 @@
-import { Tokens } from "../tokens/Tokens";
-export type TypographyTokens = {
-    [key in Tokens]: string;
-};
-export interface TypographyWeights {
+import { FontFamilyVariant } from "./FontFamilyOptions";
+import { FontSizeVariant } from "./FontSizeOptions";
+export interface TypographyVariantSpec {
+    size: number;
+    family: FontFamilyVariant;
+    /** Approx CSS weight; Roblox TextLabel uses `family` / FontFace */
+    weight: number;
+}
+export type TypographyVariants = FontSizeVariant;
+/** Size + family + weight per typography variant. */
+export declare const allTypographyVariants: Record<FontSizeVariant, TypographyVariantSpec>;
+/** @deprecated prefer allTypographyVariants[*].weight */
+export declare const TypographyWeights: {
     title: number;
     heading: number;
     body: number;
-    xl?: number;
-    lg?: number;
-    md?: number;
-    sm?: number;
-    xs?: number;
-    default?: number;
-}
-export type TypographyVariants = keyof TypographyWeights;
-export declare const TypographyWeights: TypographyWeights;
-export declare const TypographyTokens: TypographyTokens;
+};

package/out/theme/interfaces/typography/Variants.luau

@@ -1,24 +1,74 @@
 -- Compiled with roblox-ts v3.0.0
-local TypographyWeights = {
-	title = 800,
-	heading = 500,
-	body = 300,
+--* Size + family + weight per typography variant. 
+local allTypographyVariants = {
+	h1 = {
+		size = 28,
+		family = "bold",
+		weight = 700,
+	},
+	h2 = {
+		size = 22,
+		family = "bold",
+		weight = 700,
+	},
+	h3 = {
+		size = 18,
+		family = "semibold",
+		weight = 600,
+	},
+	h4 = {
+		size = 16,
+		family = "semibold",
+		weight = 600,
+	},
+	h5 = {
+		size = 14,
+		family = "semibold",
+		weight = 600,
+	},
+	h6 = {
+		size = 14,
+		family = "semibold",
+		weight = 600,
+	},
+	subtitle1 = {
+		size = 16,
+		family = "default",
+		weight = 400,
+	},
+	subtitle2 = {
+		size = 14,
+		family = "semibold",
+		weight = 600,
+	},
+	body = {
+		size = 14,
+		family = "default",
+		weight = 400,
+	},
+	button = {
+		size = 13,
+		family = "semibold",
+		weight = 600,
+	},
+	caption = {
+		size = 12,
+		family = "default",
+		weight = 400,
+	},
+	overline = {
+		size = 10,
+		family = "default",
+		weight = 400,
+	},
 }
-local TypographyTokens = {
-	[120] = "64px",
-	[110] = "48px",
-	[100] = "40px",
-	[90] = "32px",
-	[80] = "28px",
-	[70] = "24px",
-	[60] = "20px",
-	[50] = "18px",
-	[40] = "16px",
-	[30] = "14px",
-	[20] = "12px",
-	[10] = "10px",
+--* @deprecated prefer allTypographyVariants[*].weight 
+local TypographyWeights = {
+	title = 700,
+	heading = 600,
+	body = 400,
 }
 return {
-	TypographyTokens = TypographyTokens,
+	allTypographyVariants = allTypographyVariants,
 	TypographyWeights = TypographyWeights,
 }

package/out/theme/themes/DarkTheme.luau

@@ -6,9 +6,11 @@ local BORDER_RADIUS = _NumberConstants.BORDER_RADIUS
 local CONTENT_WIDTH = _NumberConstants.CONTENT_WIDTH
 local ICON_SIZES = _NumberConstants.ICON_SIZES
 local PADDING_BASE = _NumberConstants.PADDING_BASE
+local PILL_SCALE = _NumberConstants.PILL_SCALE
 local SPACING_BASE = _NumberConstants.SPACING_BASE
 local DEFAULT_BORDERS = TS.import(script, script.Parent.Parent, "constants", "ColorConstants").DEFAULT_BORDERS
 local allFontFamilies = TS.import(script, script.Parent.Parent, "interfaces", "typography", "FontFamilies").allFontFamilies
+local allTypographyVariants = TS.import(script, script.Parent.Parent, "interfaces", "typography", "Variants").allTypographyVariants
 local createDarkPalette = TS.import(script, script.Parent, "createPalette").createDarkPalette
 local DarkTheme = {
 	type = "Dark",
@@ -28,10 +30,12 @@ local DarkTheme = {
 	},
 	shape = {
 		borderRadius = BORDER_RADIUS,
+		pillScale = PILL_SCALE,
 	},
 	typography = {
 		fontSizes = allFontSizes,
 		fontFamilies = allFontFamilies,
+		variants = allTypographyVariants,
 	},
 	options = {
 		constants = {

package/out/theme/themes/LightTheme.luau

@@ -6,9 +6,11 @@ local BORDER_RADIUS = _NumberConstants.BORDER_RADIUS
 local CONTENT_WIDTH = _NumberConstants.CONTENT_WIDTH
 local ICON_SIZES = _NumberConstants.ICON_SIZES
 local PADDING_BASE = _NumberConstants.PADDING_BASE
+local PILL_SCALE = _NumberConstants.PILL_SCALE
 local SPACING_BASE = _NumberConstants.SPACING_BASE
 local DEFAULT_BORDERS = TS.import(script, script.Parent.Parent, "constants", "ColorConstants").DEFAULT_BORDERS
 local allFontFamilies = TS.import(script, script.Parent.Parent, "interfaces", "typography", "FontFamilies").allFontFamilies
+local allTypographyVariants = TS.import(script, script.Parent.Parent, "interfaces", "typography", "Variants").allTypographyVariants
 local createLightPalette = TS.import(script, script.Parent, "createPalette").createLightPalette
 local LightTheme = {
 	type = "Light",
@@ -28,10 +30,12 @@ local LightTheme = {
 	},
 	shape = {
 		borderRadius = BORDER_RADIUS,
+		pillScale = PILL_SCALE,
 	},
 	typography = {
 		fontSizes = allFontSizes,
 		fontFamilies = allFontFamilies,
+		variants = allTypographyVariants,
 	},
 	options = {
 		constants = {

package/out/ui/packages/accordion/components/Accordion.d.ts

@@ -4,6 +4,8 @@ export interface AccordionProps {
     title: string;
     open?: boolean;
     defaultOpen?: boolean;
+    disabled?: boolean;
+    square?: boolean;
     onChange?: (open: boolean) => void;
     children?: React.ReactNode;
 }

package/out/ui/packages/accordion/components/Accordion.luau

@@ -3,13 +3,18 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
-local accordionOpen = TS.import(script, script.Parent, "accordionOpen").accordionOpen
+local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local _accordionOpen = TS.import(script, script.Parent, "accordionOpen")
+local accordionGlyph = _accordionOpen.accordionGlyph
+local accordionOpen = _accordionOpen.accordionOpen
 local useAccordionStyles = TS.import(script, script.Parent, "Accordion.styles").default
 local function Accordion(props)
 	local _binding = props
 	local title = _binding.title
 	local controlled = _binding.open
 	local defaultOpen = _binding.defaultOpen
+	local disabled = _binding.disabled
+	local square = _binding.square
 	local onChange = _binding.onChange
 	local children = _binding.children
 	local className = _binding.className
@@ -20,8 +25,12 @@ local function Accordion(props)
 	local open = accordionOpen(localOpen, controlled)
 	local styles = useAccordionStyles({
 		open = open,
+		disabled = disabled,
 	})
 	local toggle = function()
+		if disabled == true then
+			return nil
+		end
 		local nextOpen = not open
 		if controlled == nil then
 			setLocalOpen(nextOpen)
@@ -51,32 +60,43 @@ local function Accordion(props)
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(styles.corner)
+	local _condition_1 = square ~= true
+	if _condition_1 then
+		local _attributes_1 = table.clone(styles.corner)
+		setmetatable(_attributes_1, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_1)
+	end
+	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uicorner", _attributes_1)
-	local _attributes_2 = table.clone(styles.list)
-	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
-	local _attributes_3 = {
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
 		key = "Header",
 	}
 	for _k, _v in styles.header do
-		_attributes_3[_k] = _v
+		_attributes_2[_k] = _v
 	end
-	_attributes_3.Event = {
+	_attributes_2.Event = {
 		Activated = toggle,
 	}
-	local _attributes_4 = table.clone(styles.padding)
-	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("uipadding", _attributes_4)
-	local _attributes_5 = {
+	local _attributes_3 = table.clone(styles.padding)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uipadding", _attributes_3)
+	local _attributes_4 = {
 		key = "Title",
 	}
 	for _k, _v in styles.title do
+		_attributes_4[_k] = _v
+	end
+	_attributes_4.Text = title
+	local _exp_2 = React.createElement("textlabel", _attributes_4)
+	local _attributes_5 = {
+		key = "Icon",
+	}
+	for _k, _v in styles.icon do
 		_attributes_5[_k] = _v
 	end
-	_attributes_5.Text = title
-	local _exp_3 = React.createElement("textbutton", _attributes_3, _exp_2, React.createElement("textlabel", _attributes_5))
+	_attributes_5.Image = if accordionGlyph(open) == "expanded" then Icons.Expanded else Icons.Collapsed
+	local _exp_3 = React.createElement("textbutton", _attributes_2, _exp_1, _exp_2, React.createElement("imagelabel", _attributes_5))
 	local _attributes_6 = {
 		key = "Body",
 	}
@@ -85,7 +105,7 @@ local function Accordion(props)
 	end
 	local _attributes_7 = table.clone(styles.padding)
 	setmetatable(_attributes_7, nil)
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
+	return React.createElement("frame", _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
 end
 local default = Accordion
 return {

package/out/ui/packages/accordion/components/Accordion.styles.d.ts

@@ -1,4 +1,5 @@
 declare const useAccordionStyles: (props: {
     open?: boolean;
+    disabled?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAccordionStyles;

package/out/ui/packages/accordion/components/Accordion.styles.luau

@@ -8,6 +8,7 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 	if open == nil then
 		open = false
 	end
+	local disabled = _param.disabled
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -27,19 +28,30 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Text = "",
-			Active = true,
-			Selectable = true,
+			Active = disabled ~= true,
+			Selectable = disabled ~= true,
 		},
 		title = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = theme.palette.text.primary,
+			TextTransparency = if disabled == true then 0.5 else 0,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
+		icon = {
+			Size = UDim2.fromOffset(theme.options.constants.iconSizes.small, theme.options.constants.iconSizes.small),
+			Position = UDim2.new(1, -theme.padding.calc(1.5), 0.5, 0),
+			AnchorPoint = Vector2.new(1, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+			ImageColor3 = theme.palette.text.primary,
+			ImageTransparency = if disabled == true then 0.5 else 0,
+		},
 		padding = {
 			PaddingTop = UDim.new(0, theme.padding.calc(1)),
 			PaddingBottom = UDim.new(0, theme.padding.calc(1)),

package/out/ui/packages/accordion/components/accordionOpen.d.ts

@@ -1 +1,2 @@
 export declare function accordionOpen(expanded: boolean | undefined, controlled: boolean | undefined): boolean;
+export declare function accordionGlyph(open?: boolean): "expanded" | "collapsed";

package/out/ui/packages/accordion/components/accordionOpen.luau

@@ -5,6 +5,10 @@ local function accordionOpen(expanded, controlled)
 	end
 	return expanded == true
 end
+local function accordionGlyph(open)
+	return if open == true then "expanded" else "collapsed"
+end
 return {
 	accordionOpen = accordionOpen,
+	accordionGlyph = accordionGlyph,
 }

package/out/ui/packages/alert/components/Alert.d.ts

@@ -5,6 +5,8 @@ export interface AlertProps {
     title?: string;
     message: string;
     onClose?: () => void;
+    filled?: boolean;
+    square?: boolean;
 }
 declare function Alert(props: CustomizedProps<Frame, AlertProps>): JSX.Element;
 export default Alert;

package/out/ui/packages/alert/components/Alert.luau

@@ -9,12 +9,17 @@ local function Alert(props)
 	local title = _binding.title
 	local message = _binding.message
 	local onClose = _binding.onClose
+	local filled = _binding.filled
+	local square = _binding.square
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local dismissible = onClose ~= nil
 	local styles = useAlertStyles({
 		severity = severity,
+		dismissible = dismissible,
+		filled = filled,
 	})
 	local _attributes = {}
 	local _condition = id
@@ -39,17 +44,42 @@ local function Alert(props)
 	local _attributes_1 = table.clone(styles.padding)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
-	local _attributes_2 = table.clone(styles.corner)
+	local _condition_1 = square ~= true
+	if _condition_1 then
+		local _attributes_2 = table.clone(styles.corner)
+		setmetatable(_attributes_2, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_2)
+	end
+	local _attributes_2 = table.clone(styles.stroke)
 	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uicorner", _attributes_2)
-	local _attributes_3 = table.clone(styles.stroke)
-	setmetatable(_attributes_3, nil)
-	local _exp_2 = React.createElement("uistroke", _attributes_3)
+	local _exp_1 = React.createElement("uistroke", _attributes_2)
+	local _condition_2 = dismissible
+	if _condition_2 then
+		local _attributes_3 = {
+			key = "Close",
+		}
+		for _k, _v in styles.close do
+			_attributes_3[_k] = _v
+		end
+		_attributes_3.Image = tostring(Icons.Close)
+		_attributes_3.Event = {
+			Activated = function()
+				return onClose()
+			end,
+		}
+		_condition_2 = (React.createElement("imagebutton", _attributes_3))
+	end
+	local _attributes_3 = {
+		key = "Body",
+	}
+	for _k, _v in styles.body do
+		_attributes_3[_k] = _v
+	end
 	local _attributes_4 = table.clone(styles.layout)
 	setmetatable(_attributes_4, nil)
-	local _exp_3 = React.createElement("uilistlayout", _attributes_4)
-	local _condition_1 = title ~= nil and title ~= ""
-	if _condition_1 then
+	local _exp_2 = React.createElement("uilistlayout", _attributes_4)
+	local _condition_3 = title ~= nil and title ~= ""
+	if _condition_3 then
 		local _attributes_5 = {
 			key = "Title",
 		}
@@ -57,7 +87,7 @@ local function Alert(props)
 			_attributes_5[_k] = _v
 		end
 		_attributes_5.Text = title
-		_condition_1 = React.createElement("textlabel", _attributes_5)
+		_condition_3 = React.createElement("textlabel", _attributes_5)
 	end
 	local _attributes_5 = {
 		key = "Message",
@@ -66,24 +96,7 @@ local function Alert(props)
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.Text = message
-	local _exp_4 = React.createElement("textlabel", _attributes_5)
-	local _condition_2 = onClose ~= nil
-	if _condition_2 then
-		local _attributes_6 = {
-			key = "Close",
-		}
-		for _k, _v in styles.close do
-			_attributes_6[_k] = _v
-		end
-		_attributes_6.Image = tostring(Icons.Close)
-		_attributes_6.Event = {
-			Activated = function()
-				return onClose()
-			end,
-		}
-		_condition_2 = (React.createElement("imagebutton", _attributes_6))
-	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _exp_3, _condition_1, _exp_4, _condition_2)
+	return React.createElement("frame", _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, React.createElement("textlabel", _attributes_5)))
 end
 local default = Alert
 return {

package/out/ui/packages/alert/components/Alert.styles.d.ts

@@ -1,5 +1,7 @@
 import { AlertSeverity } from "./alertTone";
 declare const useAlertStyles: (props: {
     severity?: AlertSeverity;
+    dismissible?: boolean;
+    filled?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAlertStyles;

package/out/ui/packages/alert/components/Alert.styles.luau

@@ -6,12 +6,15 @@ local createStyles = _theme.createStyles
 local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverity
 local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	local severity = _param.severity
+	local dismissible = _param.dismissible
+	local filled = _param.filled
 	local tone = theme.palette.status[alertSeverity(severity)]
+	local closeSize = theme.spacing.calc(2)
 	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
 			Size = UDim2.new(1, 0, 0, 0),
-			BackgroundColor3 = tone.surface,
+			BackgroundColor3 = if filled == true then tone.main else tone.surface,
 			BorderSizePixel = 0,
 		},
 		padding = {
@@ -24,11 +27,17 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = tone.border,
+			Color = if filled == true then tone.main else tone.border,
 			Thickness = 1,
-			Transparency = 0,
+			Transparency = if filled == true then 1 else 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		body = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, if dismissible == true then -(closeSize + theme.padding.calc(1)) else 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		layout = {
 			FillDirection = Enum.FillDirection.Vertical,
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
@@ -43,7 +52,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = tone.main,
+			TextColor3 = if filled == true then tone.on else tone.main,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			LayoutOrder = 1,
 		},
@@ -62,18 +71,18 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextColor3 = if filled == true then tone.on else theme.palette.text.primary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextWrapped = true
 	_object_1.LayoutOrder = 2
 	_object[_left] = _object_1
 	_object.close = {
-		Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
-		Position = UDim2.new(1, -theme.padding.calc(1), 0, theme.padding.calc(1)),
+		Size = UDim2.fromOffset(closeSize, closeSize),
+		Position = UDim2.new(1, 0, 0, 0),
 		AnchorPoint = Vector2.new(1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		ImageColor3 = theme.palette.text.secondary,
+		ImageColor3 = if filled == true then tone.on else theme.palette.text.secondary,
 		ScaleType = Enum.ScaleType.Fit,
 		ZIndex = 2,
 	}

package/out/ui/packages/appBar/components/AppBar.d.ts

@@ -1,9 +1,10 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
-import { AppBarElevation } from "./AppBar.styles";
+import { AppBarColor, AppBarElevation } from "./AppBar.styles";
 export interface AppBarProps {
     title?: string;
     elevation?: AppBarElevation;
+    color?: AppBarColor;
     children?: React.ReactNode;
 }
 declare function AppBar(props: CustomizedProps<Frame, AppBarProps>): JSX.Element;

package/out/ui/packages/appBar/components/AppBar.luau

@@ -13,6 +13,10 @@ local function AppBar(props)
 	if elevation == nil then
 		elevation = "raised"
 	end
+	local color = _binding.color
+	if color == nil then
+		color = "default"
+	end
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
@@ -20,6 +24,7 @@ local function AppBar(props)
 	local ref = _binding.ref
 	local styles = useAppBarStyles({
 		elevation = elevation,
+		color = color,
 		hasActions = children ~= nil,
 	})
 	local _attributes = {}