Estilo de UI

El estilo de UI es una solución de Roblox para hojas de estilo, similar a CSS, que te permite declarar y aplicar globalmente sobreescrituras a las propiedades de instancia de la UI. Este soporte a nivel de motor es la base para el Editor de Estilos y el pipeline de tokens end-to-end.

Conceptos

Las reglas de estilo (parte de un StyleSheet) se aplican a cada instancia que coincide con la definición de Selector de la regla para coincidir con características como el nombre de clase, el nombre de instancia y las relaciones jerárquicas. Consulta la documentación de Selector para más detalles.

Los tokens de estilo, definidos a través de atributos de un StyleSheet de token, representan variables de propiedad de UI que pueden ser utilizadas a través de estilos y componentes, por ejemplo, un color común para un Frame.BackgroundColor3, TextLabel.TextColor3 y UIStroke.Color. Los tokens son comparables a las variables de CSS.

Los temas de estilo, configurados a través de atributos de un StyleSheet de tema, consisten en conjuntos de tokens específicos que pueden intercambiarse, por ejemplo, tokens de color que definen un tema "claro" y "oscuro". Los temas relacionados deben tener el mismo conjunto de tokens para funcionar correctamente.

Las consultas de estilo te permiten aplicar estilos de manera condicional basada en el contexto o el entorno de la UI. Estos son comparables a las consultas de contenedor y consultas de medios de CSS, lo que permite que la UI se adapte al tamaño de la pantalla, tipos de entrada o configuraciones de accesibilidad del usuario.

Propagación de reglas

Una instancia de StyleLink vincula un StyleSheet y sus reglas asociadas a un ScreenGui padre y a todos los GuiObjects dentro de él. Solo un StyleSheet puede aplicarse a un árbol dado.

Definiciones de selector

A un alto nivel, la coincidencia y modificación de instancias a través de la definición de Selector de una regla opera a través de:

• Selectores de clase de Roblox que apuntan a todas las instancias de una clase GuiObject dada, por ejemplo, Frame, ImageLabel, TextButton, etc.
• Etiquetas de instancia aplicadas a objetos de UI específicos a través de CollectionService.
• Selección por nombre de instancia de acuerdo con el valor del Instance.Name del objeto de UI.
• Modificadores de instancia, similares a pseudo-elementos CSS, aplicados a través de UIComponents fantasma como UICorner o UIStroke.
• Selectores de estado de GuiObject, similares a los selectores de pseudo-clase CSS, que corresponden a uno de los cuatro valores del enum GuiState como Hover.
• Selectores de consulta de Roblox, similares a las consultas de contenedor y de medios CSS, que usan el prefijo @ para aplicar estilos solo mientras una instancia de StyleQuery o pseudo‑instancia con el mismo nombre esté activa.

La siguiente configuración muestra cómo los tokens de tamaño y color, un tema y un selector de clase de "Frame" producen un Frame magenta de tamaño 200×200 píxeles.

Selector de Clase de UI
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local screenGui = script.Parent

-- Tokens
local tokens = Instance.new("StyleSheet")
tokens.Name = "Tokens"
tokens.Parent = ReplicatedStorage
tokens:SetAttribute("SquareS", UDim2.fromOffset(50, 50))
tokens:SetAttribute("SquareM", UDim2.fromOffset(100, 100))
tokens:SetAttribute("SquareL", UDim2.fromOffset(200, 200))
tokens:SetAttribute("Fit", UDim2.fromScale(1, 1))
tokens:SetAttribute("Magenta", Color3.fromHex("FF0099"))
tokens:SetAttribute("Gold", Color3.fromHex("FFCC00"))
tokens:SetAttribute("Aqua", Color3.fromHex("0093F0"))

-- TemaA
local themeA = Instance.new("StyleSheet")
themeA.Name = "TemaA"
themeA.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Derivar tokens globales
tokensDerive.Parent = themeA
themeA:SetAttribute("FrameSize", "$SquareM")
themeA:SetAttribute("FrameColor", "$Aqua")

-- TemaB
local themeB = Instance.new("StyleSheet")
themeB.Name = "TemaB"
themeB.Parent = ReplicatedStorage
local tokensDerive = Instance.new("StyleDerive")
tokensDerive.StyleSheet = tokens  -- Derivar tokens globales
tokensDerive.Parent = themeB
themeB:SetAttribute("FrameSize", "$SquareL")
themeB:SetAttribute("FrameColor", "$Magenta")

-- Hoja de Diseño
local designSheet = Instance.new("StyleSheet")
designSheet.Name = "HojaDeDiseño"
designSheet.Parent = ReplicatedStorage
local themeDerive = Instance.new("StyleDerive")
themeDerive.StyleSheet = themeB  -- Derivar de TemaB
themeDerive.Parent = designSheet

-- Vincular HojaDeDiseño a ScreenGui
local styleLink = Instance.new("StyleLink")
styleLink.StyleSheet = designSheet
styleLink.Parent = screenGui

-- Configurar regla
local rule = Instance.new("StyleRule")
rule.Selector = "Frame"  -- Selector de clase
rule.Parent = designSheet

-- Establecer propiedades de la regla
rule:SetProperties({
	["BackgroundColor3"] = "$FrameColor",
	["Size"] = "$FrameSize",
	["BorderSizePixel"] = 0
})

local frame = Instance.new("Frame")
frame.Parent = screenGui

Propiedades modificadas

Las propiedades de instancia afectadas por el estilo están marcadas con un ⚠ en la ventana de Propiedades, y al pasar el cursor sobre una propiedad afectada se muestra qué estilo la está influyendo. Por ejemplo, si una regla de estilo indica a un Frame etiquetado que use un AnchorPoint de 0.5, 0.5, esa propiedad de objeto mostrará el valor predeterminado de 0, 0, pero su AnchorPoint real usará el valor estilizado de la regla.

Cuando un valor de propiedad predeterminado o estilizado se modifica más para un objeto de UI específico, se vuelve negrita para indicar un valor sobrescrito. Por ejemplo — asumiendo un AnchorPoint predeterminado de 0, 0 — establecer esa propiedad en 1, 1 para una instancia específica revela una sobrescritura en negrita:

Para cualquier valor de propiedad sobrescrito, puedes hacer clic derecho sobre él en la ventana de Propiedades y seleccionar Restablecer a Predeterminado para revertirlo al valor estilizado, o al valor de propiedad predeterminado si no ha sido estilizado.