@rbxts/uiblox 0.2.0-alpha.0 → 0.2.0-alpha.10

package/out/ui/packages/paper/components/Paper.d.ts

@@ -2,6 +2,7 @@ import React from "@rbxts/react";
 export type PaperElevation = "flat" | "raised";
 export interface PaperProps {
     elevation?: PaperElevation;
+    square?: boolean;
     children?: React.ReactNode;
 }
 declare function Paper(props: PaperProps): JSX.Element;

package/out/ui/packages/paper/components/Paper.luau

@@ -8,6 +8,7 @@ local function Paper(props)
 	if elevation == nil then
 		elevation = "flat"
 	end
+	local square = _binding.square
 	local children = _binding.children
 	local styles = usePaperStyles({
 		elevation = elevation,
@@ -21,9 +22,13 @@ local function Paper(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)
-	setmetatable(_attributes_2, nil)
-	return React.createElement("frame", _attributes, _exp, React.createElement("uicorner", _attributes_2), children)
+	local _condition = square ~= true
+	if _condition then
+		local _attributes_2 = table.clone(styles.corner)
+		setmetatable(_attributes_2, nil)
+		_condition = React.createElement("uicorner", _attributes_2)
+	end
+	return React.createElement("frame", _attributes, _exp, _condition, children)
 end
 local default = Paper
 return {

package/out/ui/packages/popup/index.d.ts

@@ -2,3 +2,4 @@ export { default as Popup } from "./components/Popup";
 export { PopupProps } from "./components/Popup";
 export { default as Portal } from "./components/Portal";
 export { PortalProps } from "./components/Portal";
+export { portalTarget } from "./components/portalTarget";

package/out/ui/packages/popup/init.luau

@@ -3,4 +3,5 @@ local TS = _G[script]
 local exports = {}
 exports.Popup = TS.import(script, script, "components", "Popup").default
 exports.Portal = TS.import(script, script, "components", "Portal").default
+exports.portalTarget = TS.import(script, script, "components", "portalTarget").portalTarget
 return exports

package/out/ui/packages/radioGroup/components/RadioGroup.d.ts

@@ -11,6 +11,7 @@ export interface RadioGroupProps<T> {
     onChange: (value: T) => void;
     disabled?: boolean;
     size?: ControlSize;
+    row?: boolean;
 }
 declare function RadioGroup<T>(props: CustomizedProps<Frame, RadioGroupProps<T>>): JSX.Element;
 export default RadioGroup;

package/out/ui/packages/radioGroup/components/RadioGroup.luau

@@ -10,17 +10,19 @@ local function RadioGroup(props)
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
 	local size = _binding.size
+	local row = _binding.row
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local _binding_1 = useRadioGroupStyles({
 		size = size,
+		row = row,
 	})
 	local root = _binding_1.root
 	local list = _binding_1.list
 	local option = _binding_1.option
-	local row = _binding_1.row
+	local optionRow = _binding_1.optionRow
 	local ring = _binding_1.ring
 	local dot = _binding_1.dot
 	local stroke = _binding_1.stroke
@@ -70,7 +72,7 @@ local function RadioGroup(props)
 				end
 			end,
 		}
-		local _attributes_3 = table.clone(row)
+		local _attributes_3 = table.clone(optionRow)
 		setmetatable(_attributes_3, nil)
 		local _exp_1 = React.createElement("uilistlayout", _attributes_3)
 		local _attributes_4 = table.clone(ring)

package/out/ui/packages/radioGroup/components/RadioGroup.styles.d.ts

@@ -1,6 +1,7 @@
 import { ControlSize } from "../../../../theme/index";
 export interface RadioGroupStyleProps {
     size?: ControlSize;
+    row?: boolean;
 }
 declare const useRadioGroupStyles: (props: RadioGroupStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useRadioGroupStyles;

package/out/ui/packages/radioGroup/components/RadioGroup.styles.luau

@@ -6,6 +6,7 @@ local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param)
 	local size = _param.size
+	local row = _param.row
 	local metrics = controlMetrics(theme.density, size)
 	return createStyles({
 		root = {
@@ -15,8 +16,10 @@ local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param
 			BorderSizePixel = 0,
 		},
 		list = {
+			FillDirection = if row == true then Enum.FillDirection.Horizontal else Enum.FillDirection.Vertical,
 			Padding = UDim.new(0, theme.padding.default),
 			SortOrder = Enum.SortOrder.LayoutOrder,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
 		},
 		option = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -25,7 +28,7 @@ local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param
 			BorderSizePixel = 0,
 			Text = "",
 		},
-		row = {
+		optionRow = {
 			FillDirection = Enum.FillDirection.Horizontal,
 			Padding = UDim.new(0, theme.padding.default),
 			VerticalAlignment = Enum.VerticalAlignment.Center,

package/out/ui/packages/rating/components/Rating.d.ts

@@ -0,0 +1,9 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface RatingProps {
+    value: number;
+    max?: number;
+    disabled?: boolean;
+    onChange: (value: number) => void;
+}
+declare function Rating(props: CustomizedProps<Frame, RatingProps>): JSX.Element;
+export default Rating;

package/out/ui/packages/rating/components/Rating.luau

@@ -0,0 +1,95 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local useRatingStyles = TS.import(script, script.Parent, "Rating.styles").default
+local function Rating(props)
+	local _binding = props
+	local value = _binding.value
+	local max = _binding.max
+	if max == nil then
+		max = 5
+	end
+	local disabled = _binding.disabled
+	local onChange = _binding.onChange
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useRatingStyles({
+		disabled = disabled,
+	})
+	local active = canActivate(disabled)
+	local stars = {}
+	do
+		local i = 1
+		local _shouldIncrement = false
+		while true do
+			if _shouldIncrement then
+				i += 1
+			else
+				_shouldIncrement = true
+			end
+			if not (i <= max) then
+				break
+			end
+			local _i = i
+			table.insert(stars, _i)
+		end
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Rating"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#stars)
+	local _callback = function(n)
+		local _attributes_2 = {
+			key = `Star-{n}`,
+		}
+		for _k, _v in styles.star do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Image = tostring(if n <= value then Icons.StarFilled else Icons.Star)
+		_attributes_2.LayoutOrder = n
+		_attributes_2.Active = active
+		_attributes_2.Selectable = active
+		_attributes_2.Event = {
+			Activated = function()
+				if active then
+					onChange(if n == value then 0 else n)
+				end
+			end,
+		}
+		return React.createElement("imagebutton", _attributes_2)
+	end
+	for _k, _v in stars do
+		_newValue[_k] = _callback(_v, _k - 1, stars)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local default = Rating
+return {
+	default = default,
+}

package/out/ui/packages/rating/components/Rating.styles.d.ts

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

package/out/ui/packages/rating/components/Rating.styles.luau

@@ -0,0 +1,39 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useRatingStyles = componentStyles("Rating", function(theme, _param)
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			HorizontalAlignment = Enum.HorizontalAlignment.Left,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
+		},
+		star = {
+			Size = UDim2.fromOffset(theme.spacing.calc(3), theme.spacing.calc(3)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Active = not disabled,
+			Selectable = not disabled,
+			ImageColor3 = if disabled then theme.palette.text.disabled else theme.palette.primary.main,
+		},
+	})
+end)
+local default = useRatingStyles
+return {
+	default = default,
+}

package/out/ui/packages/rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Rating } from "./components/Rating";
+export { RatingProps } from "./components/Rating";

package/out/ui/packages/rating/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Rating = TS.import(script, script, "components", "Rating").default
+return exports

package/out/ui/packages/select/components/Select.d.ts

@@ -1,3 +1,4 @@
+import React from "@rbxts/react";
 import { ControlSize, CustomizedProps } from "../../../../theme/index";
 import { ChoiceOption } from "../../radioGroup/index";
 export interface SelectProps<T> {
@@ -6,8 +7,13 @@ export interface SelectProps<T> {
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    loading?: boolean;
     placeholder?: string;
     searchable?: boolean;
+    defaultOpen?: boolean;
+    defaultQuery?: string;
+    emptyText?: string;
+    empty?: React.Element;
     reducedMotion?: boolean;
     size?: ControlSize;
 }

package/out/ui/packages/select/components/Select.luau

@@ -14,11 +14,15 @@ local controlMetrics = _theme.controlMetrics
 local cx = _theme.cx
 local useTheme = _theme.useTheme
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local spinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").spinnerPixels
+local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
 local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion").playProperty
 local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
 local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
-local VirtualList = TS.import(script, script.Parent.Parent.Parent, "virtualList").VirtualList
+local _virtualList = TS.import(script, script.Parent.Parent.Parent, "virtualList")
+local EmptyListHint = _virtualList.EmptyListHint
+local VirtualList = _virtualList.VirtualList
 local useSelectStyles = TS.import(script, script.Parent, "Select.styles").default
 local optionLabel = TS.import(script, script.Parent, "optionLabel").optionLabel
 local _selectFilter = TS.import(script, script.Parent, "selectFilter")
@@ -42,11 +46,19 @@ local function Select(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local loading = _binding.loading
+	if loading == nil then
+		loading = false
+	end
 	local placeholder = _binding.placeholder
 	if placeholder == nil then
 		placeholder = ""
 	end
 	local searchable = _binding.searchable
+	local defaultOpen = _binding.defaultOpen
+	local defaultQuery = _binding.defaultQuery
+	local emptyText = _binding.emptyText
+	local empty = _binding.empty
 	local reducedProp = _binding.reducedMotion
 	local size = _binding.size
 	local className = _binding.className
@@ -60,13 +72,17 @@ local function Select(props)
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local row = controlMetrics(theme.density, size).height
-	local active = canActivate(disabled)
+	local active = canActivate(disabled, loading)
 	local anchor, setAnchor = useState()
-	local open, setOpen = useState(false)
+	local open, setOpen = useState(defaultOpen == true and not loading)
 	local held, setHeld = useState(false)
 	local focused, setFocused = useState(false)
 	local highlight, setHighlight = useState(-1)
-	local query, setQuery = useState("")
+	local _condition = defaultQuery
+	if _condition == nil then
+		_condition = ""
+	end
+	local query, setQuery = useState(_condition)
 	local recent = useRef()
 	local typed = useRef()
 	local onKeyRef = useRef()
@@ -89,7 +105,20 @@ local function Select(props)
 	local search = usesSelectSearch(#options, searchable)
 	local filtered = filterChoices(options, query)
 	local rows = groupRows(filtered)
-	local menuHeight = math.min(#rows * row, theme.spacing.calc(16)) + (if search then row else 0)
+	local listHeight = if #rows == 0 then row else math.min(#rows * row, theme.spacing.calc(16))
+	local menuHeight = listHeight + (if search then row else 0)
+	local _condition_1 = empty
+	if _condition_1 == nil then
+		local _attributes = {}
+		local _condition_2 = emptyText
+		if _condition_2 == nil then
+			_condition_2 = (if #query > 0 or #options > 0 then "No results" else "No options")
+		end
+		_attributes.text = _condition_2
+		_attributes.height = row
+		_condition_1 = (React.createElement(EmptyListHint, _attributes))
+	end
+	local emptyHint = _condition_1
 	local close = function()
 		setOpen(false)
 		setQuery("")
@@ -119,15 +148,15 @@ local function Select(props)
 		if fromPointer == nil then
 			fromPointer = false
 		end
-		local _condition = fromPointer
-		if _condition then
+		local _condition_2 = fromPointer
+		if _condition_2 then
 			local _result_1 = listRef.current
 			if _result_1 ~= nil then
 				_result_1 = _result_1.suppressClick()
 			end
-			_condition = _result_1
+			_condition_2 = _result_1
 		end
-		if _condition then
+		if _condition_2 then
 			return nil
 		end
 		local choice = filtered[index + 1]
@@ -218,6 +247,12 @@ local function Select(props)
 			setHeld(true)
 		end
 	end, { shown })
+	useEffect(function()
+		if loading and open then
+			setOpen(false)
+			setQuery("")
+		end
+	end, { loading, open })
 	useEffect(function()
 		local menu = menuRef.current
 		if not menu or not held then
@@ -242,11 +277,11 @@ local function Select(props)
 		end
 	end, { shown, held, reducedMotion })
 	local _attributes = {}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "Select"
+	local _condition_2 = id
+	if not (_condition_2 ~= 0 and _condition_2 == _condition_2 and _condition_2 ~= "" and _condition_2) then
+		_condition_2 = "Select"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_2
 	_attributes.ref = ref
 	for _k, _v in styles.root do
 		_attributes[_k] = _v
@@ -278,11 +313,11 @@ local function Select(props)
 		if _result_2 ~= nil then
 			_result_2 = _result_2.label
 		end
-		local _condition_1 = _result_2
-		if _condition_1 == nil then
-			_condition_1 = placeholder
+		local _condition_3 = _result_2
+		if _condition_3 == nil then
+			_condition_3 = placeholder
 		end
-		_result_1 = _condition_1
+		_result_1 = _condition_3
 	end
 	_attributes_1.Text = _result_1
 	_attributes_1.Active = active
@@ -305,7 +340,9 @@ local function Select(props)
 			return onKey(input, true)
 		end,
 	}
-	local _attributes_2 = table.clone(styles.padding)
+	local _attributes_2 = table.clone(cx(styles.padding, loading and {
+		PaddingRight = UDim.new(0, theme.padding.calc(1.5) + spinnerPixels(size) + theme.padding.calc(1)),
+	}))
 	setmetatable(_attributes_2, nil)
 	local _exp = React.createElement("uipadding", _attributes_2)
 	local _attributes_3 = table.clone(styles.corner)
@@ -313,9 +350,18 @@ local function Select(props)
 	local _exp_1 = React.createElement("uicorner", _attributes_3)
 	local _attributes_4 = table.clone(cx(styles.stroke, focused and styles.focusStroke))
 	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("textbutton", _attributes_1, _exp, _exp_1, React.createElement("uistroke", _attributes_4))
-	local _condition_1 = (shown or held)
-	if _condition_1 then
+	local _exp_2 = React.createElement("textbutton", _attributes_1, _exp, _exp_1, React.createElement("uistroke", _attributes_4), loading and (React.createElement(CircularProgress, {
+		size = spinnerPixels(size),
+		thickness = 2,
+		color = theme.palette.text.secondary,
+		reducedMotion = reducedMotion,
+		className = {
+			AnchorPoint = Vector2.new(1, 0.5),
+			Position = UDim2.new(1, -theme.padding.calc(1), 0.5, 0),
+		},
+	})))
+	local _condition_3 = (shown or held)
+	if _condition_3 then
 		local _attributes_5 = {
 			key = "Menu",
 		}
@@ -333,8 +379,8 @@ local function Select(props)
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		})
-		local _condition_2 = search
-		if _condition_2 then
+		local _condition_4 = search
+		if _condition_4 then
 			local _attributes_8 = {
 				key = "Search",
 			}
@@ -342,7 +388,7 @@ local function Select(props)
 				_attributes_8[_k] = _v
 			end
 			_attributes_8.LayoutOrder = 1
-			_condition_2 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
+			_condition_4 = (React.createElement("frame", _attributes_8, React.createElement(Input, {
 				text = query,
 				placeholder = "Search",
 				width = UDim.new(1, 0),
@@ -352,7 +398,7 @@ local function Select(props)
 				end,
 			})))
 		end
-		_condition_1 = (React.createElement(Popup, {
+		_condition_3 = (React.createElement(Popup, {
 			anchor = anchor,
 			preferredHeight = menuHeight,
 			onDismiss = close,
@@ -364,7 +410,7 @@ local function Select(props)
 			Size = UDim2.fromScale(1, 1),
 			BackgroundTransparency = 1,
 			GroupTransparency = 1,
-		}, React.createElement("frame", _attributes_5, _exp_3, _exp_4, _exp_5, _exp_6, _condition_2, React.createElement("frame", {
+		}, React.createElement("frame", _attributes_5, _exp_3, _exp_4, _exp_5, _exp_6, _condition_4, React.createElement("frame", {
 			key = "ListHost",
 			Size = UDim2.new(1, 0, 1, if search then -row else 0),
 			BackgroundTransparency = 1,
@@ -377,6 +423,7 @@ local function Select(props)
 			end,
 			itemHeight = row,
 			listRef = listRef,
+			empty = emptyHint,
 			className = styles.list,
 			renderItem = function(row)
 				if row.kind == "header" then
@@ -424,7 +471,7 @@ local function Select(props)
 			end,
 		}))))))
 	end
-	return React.createElement("frame", _attributes, _exp_2, _condition_1)
+	return React.createElement("frame", _attributes, _exp_2, _condition_3)
 end
 local default = Select
 return {

package/out/ui/packages/select/components/Select.styles.luau

@@ -9,7 +9,7 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 	local metrics = controlMetrics(theme.density, size)
 	return createStyles({
 		root = {
-			Size = UDim2.fromOffset(theme.spacing.calc(8), metrics.height),
+			Size = UDim2.fromOffset(theme.spacing.calc(12), metrics.height),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -38,13 +38,13 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 			ZIndex = 20001,
 		},
 		search = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1, 0, 0, metrics.height),
 			BackgroundTransparency = 1,
 			ZIndex = 20002,
 		},
 		list = {
 			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.elevated,
+			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ScrollBarThickness = theme.padding.default,
 			ScrollBarImageColor3 = theme.palette.text.secondary,

package/out/ui/packages/sidebar/components/Sidebar.styles.luau

@@ -12,8 +12,8 @@ local useSidebarStyles = componentStyles("Sidebar", function(theme, props)
 		ignoreInset = false
 	end
 	local sidebarWidths = {
-		large = theme.spacing.calc(15),
-		compact = theme.spacing.calc(5),
+		large = 180,
+		compact = 60,
 	}
 	return createStyles({
 		root = {

package/out/ui/packages/skeleton/components/Skeleton.luau

@@ -30,6 +30,7 @@ local function SkeletonBlock(props)
 	local circular = _binding_1.circular
 	local fillRef = useRef()
 	local gradientRef = useRef()
+	local showGradient = motion ~= "pulse"
 	useEffect(function()
 		local fill = fillRef.current
 		local gradient = gradientRef.current
@@ -45,7 +46,7 @@ local function SkeletonBlock(props)
 		if motion == "pulse" then
 			fill.BackgroundTransparency = 0
 			return loopProperty(fill, {
-				BackgroundTransparency = 0.55,
+				BackgroundTransparency = 0.45,
 			}, 0.9, true)
 		end
 		fill.BackgroundTransparency = 0
@@ -90,7 +91,7 @@ local function SkeletonBlock(props)
 		_attributes_1[_k] = _v
 	end
 	_attributes_1.Size = UDim2.new(1, 0, 1, 0)
-	local _condition_3 = motion == "shimmer"
+	local _condition_3 = showGradient
 	if _condition_3 then
 		local _attributes_2 = {
 			ref = gradientRef,

package/out/ui/packages/skeleton/components/Skeleton.styles.luau

@@ -3,15 +3,20 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local skeletonTone = TS.import(script, script.Parent, "skeletonTone").skeletonTone
 local useSkeletonStyles = componentStyles("Skeleton", function(theme)
+	local _binding = skeletonTone(theme)
+	local bone = _binding.bone
+	local shine = _binding.shine
 	return createStyles({
 		block = {
-			BackgroundColor3 = theme.palette.surface.paper,
+			BackgroundColor3 = bone,
 			BackgroundTransparency = 0,
 			BorderSizePixel = 0,
 		},
 		highlight = {
-			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, theme.palette.surface.paper), ColorSequenceKeypoint.new(0.5, theme.palette.text.secondary), ColorSequenceKeypoint.new(1, theme.palette.surface.paper) }),
+			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, bone), ColorSequenceKeypoint.new(0.5, shine), ColorSequenceKeypoint.new(1, bone) }),
+			Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 0.35), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 0.35) }),
 		},
 		rounded = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/out/ui/packages/skeleton/components/skeletonMotion.luau

@@ -3,7 +3,7 @@ local function skeletonMotion(animation, reducedMotion)
 	if animation == false or reducedMotion == true then
 		return false
 	end
-	return animation or "pulse"
+	return animation or "shimmer"
 end
 local function skeletonLineWidth(width, index, count)
 	if count > 1 and index == count - 1 then

package/out/ui/packages/skeleton/components/skeletonTone.d.ts

@@ -0,0 +1,20 @@
+interface SkeletonPalette {
+    surface: {
+        canvas: Color3;
+        elevated: Color3;
+    };
+    action: {
+        hover: Color3;
+    };
+    text: {
+        secondary: Color3;
+    };
+}
+/** Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. */
+export declare function skeletonTone(theme: {
+    palette: SkeletonPalette;
+}): {
+    bone: Color3;
+    shine: Color3;
+};
+export {};

package/out/ui/packages/skeleton/components/skeletonTone.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local relativeLuminance = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme", "utilites", "colorMath").relativeLuminance
+--* Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. 
+local function skeletonTone(theme)
+	local lightCanvas = relativeLuminance(theme.palette.surface.canvas) > 0.5
+	return {
+		bone = theme.palette.action.hover,
+		shine = if lightCanvas then theme.palette.surface.elevated else theme.palette.text.secondary,
+	}
+end
+return {
+	skeletonTone = skeletonTone,
+}