Theme Reference
Centralized design tokens and theme reference for @robloxui/theme (npm) and RobloxUI-theme (Wally) packages. These 15 tokens are the single source of truth for all RobloxUI component styling — colors, font sizes, spacing, and border radii.
7 Colors5 Sizes3 Radii
| Name | CSS Variable | Luau Variable | Value | Swatch |
|---|---|---|---|---|
| Primary | --robloxui-primary | RuiPrimary | #0066FF | |
| Secondary | --robloxui-secondary | RuiSecondary | #6B7280 | |
| Accent | --robloxui-accent | RuiAccent | #F59E0B | |
| Success | --robloxui-success | RuiSuccess | #10B981 | |
| Error | --robloxui-error | RuiError | #EF4444 | |
| Background | --robloxui-bg | RuiBg | #0F1117 | |
| Text Primary | --robloxui-text-primary | RuiTextPrimary | #F8FAFC | |
| Font Size Small | --robloxui-font-size-sm | RuiFontSizeSm | 0.875rem (14px) | |
| Font Size Medium | --robloxui-font-size-md | RuiFontSizeMd | 1rem (16px) | |
| Font Size Large | --robloxui-font-size-lg | RuiFontSizeLg | 1.125rem (18px) | |
| Spacing Small | --robloxui-spacing-sm | RuiSpacingSm | 1rem (16px) | |
| Spacing Medium | --robloxui-spacing-md | RuiSpacingMd | 1.5rem (24px) | |
| Radius Small | --robloxui-radius-sm | RuiRadiusSm | 4px | |
| Radius Medium | --robloxui-radius-md | RuiRadiusMd | 8px | |
| Radius Large | --robloxui-radius-lg | RuiRadiusLg | 12px |