UI updates

README.md

@@ -45,18 +45,18 @@ This will install both Zircon, as well as the logging support. It is recommended
 Below is an example of how to register a command in Zircon:
 
 ```ts
-import Zircon from "@rbxts/zircon";
+import { ZirconServer, ZirconFunctionBuilder } from "@rbxts/zircon";
 import Log from "@rbxts/log";
 
-Zircon.Server.Registry.RegisterFunction(
+ZirconServer.Registry.RegisterFunction(
     new ZirconFunctionBuilder("print_message")
         .AddArguments("string")
         .Bind((context, message) => Log.Info(
                 "Zircon says {Message} from {Player}", 
                 message,
                 context.GetExecutor()
         )),
-    [Zircon.Server.Registry.User]
+    [ZirconServer.Registry.User]
 )
 ```
 

example/client/index.client.tsx

@@ -1,34 +1,15 @@
 import Roact from "@rbxts/roact";
-import Zircon from "@zircon";
-import ZirconClient from "./Client";
+import Zircon, { ZirconClient } from "@zircon";
 import delayAsync from "./Client/BuiltInConsole/DelayAsync";
 import ZirconDockedConsole from "./Client/BuiltInConsole/UI/DockedConsole";
-import { BaseTheme, makeTheme } from "./Client/UIKit/ThemeContext";
+import ThemeContext, { ZirconDarkPlastic, makeTheme, ZirconFrost } from "./Client/UIKit/ThemeContext";
 import { Players } from "@rbxts/services";
 import Log, { Logger } from "@rbxts/log";
 
 Log.SetLogger(Logger.configure().WriteTo(Zircon.Log.Console()).EnrichWithProperty("Version", PKG_VERSION).Create());
 
-const LightTheme = makeTheme({
-	PrimaryBackgroundColor3: Color3.fromRGB(220, 220, 220),
-	SecondaryBackgroundColor3: Color3.fromRGB(200, 200, 200),
-	PrimaryTextColor3: Color3.fromRGB(40, 40, 40),
-	ConsoleColors: {
-		...BaseTheme.ConsoleColors,
-		White: Color3.fromRGB(40, 40, 40),
-	},
-});
-
-function CustomConsole() {
-	return (
-		// <UIKTheme.Provider value={undefined}>
-		<ZirconDockedConsole />
-		// </UIKTheme.Provider>
-	);
-}
-
 ZirconClient.BindConsole({
-	ConsoleComponent: CustomConsole,
+	Theme: "Plastic",
 	EnableTags: true,
 	Keys: [Enum.KeyCode.Backquote],
 });

example/server/index.server.ts

@@ -1,9 +1,5 @@
 import Log, { Logger } from "@rbxts/log";
-import { LogConfiguration } from "@rbxts/log/out/Configuration";
-import { ZrValue } from "@rbxts/zirconium/out/Data/Locals";
-import ZrLuauFunction from "@rbxts/zirconium/out/Data/LuauFunction";
-import { ZrInstanceUserdata } from "@rbxts/zirconium/out/Data/Userdata";
-import Zircon from "@zircon";
+import Zircon, { ZirconServer } from "@zircon";
 import ZirconPrint from "BuiltIn/Print";
 import { ZirconFunctionBuilder } from "Class/ZirconFunctionBuilder";
 import { ZirconNamespaceBuilder } from "Class/ZirconNamespaceBuilder";
@@ -17,23 +13,23 @@ Log.SetLogger(
 		.Create(),
 );
 
-Zircon.Server.Registry.RegisterFunction(
+ZirconServer.Registry.RegisterFunction(
 	new ZirconFunctionBuilder("kill").AddArguments("player?").Bind((context, player) => {
 		const target = player ?? context.GetExecutor();
 		target.Character?.BreakJoints();
 		Log.Info("Killed {target}", target);
 	}),
-	[Zircon.Server.Registry.User],
+	[ZirconServer.Registry.User],
 );
 
-Zircon.Server.Registry.RegisterFunction(
+ZirconServer.Registry.RegisterFunction(
 	new ZirconFunctionBuilder("print_message")
 		.AddArguments("string")
 		.Bind((context, message) => Log.Info("Zircon says {Message} from {Player}", message, context.GetExecutor())),
-	[Zircon.Server.Registry.User],
+	[ZirconServer.Registry.User],
 );
 
-Zircon.Server.Registry.RegisterNamespace(
+ZirconServer.Registry.RegisterNamespace(
 	new ZirconNamespaceBuilder("example")
 		.AddFunction(
 			new ZirconFunctionBuilder("print").Bind((context, ...args) => {
@@ -47,14 +43,14 @@ Zircon.Server.Registry.RegisterNamespace(
 		)
 		.AddFunction(ZirconPrint)
 		.Build(),
-	[Zircon.Server.Registry.User],
+	[ZirconServer.Registry.User],
 );
 
-Zircon.Server.Registry.RegisterFunction(
+ZirconServer.Registry.RegisterFunction(
 	new ZirconFunctionBuilder("print").Bind((context, ...args) => {
 		Log.Info(args.map((a) => tostring(a)).join(" "));
 	}),
-	[Zircon.Server.Registry.User],
+	[ZirconServer.Registry.User],
 );
 
 delayAsync(5).then(() => {
@@ -66,10 +62,10 @@ delayAsync(5).then(() => {
 	Log.Fatal("Fatal message here");
 });
 
-game.GetService("Players").PlayerAdded.Connect((player) => {
-	Zircon.Server.Registry.AddPlayerToGroups(player, ["creator"]);
-});
+// game.GetService("Players").PlayerAdded.Connect((player) => {
+// 	ZirconServer.Registry.AddPlayerToGroups(player, ["creator"]);
+// });
 
-for (const player of game.GetService("Players").GetPlayers()) {
-	Zircon.Server.Registry.AddPlayerToGroups(player, ["creator"]);
-}
+// for (const player of game.GetService("Players").GetPlayers()) {
+// 	Zircon.Server.Registry.AddPlayerToGroups(player, ["creator"]);
+// }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rbxts/zircon",
-  "version": "0.8.0-alpha.0",
+  "version": "0.8.0-beta.0",
   "description": "",
   "main": "out/init.lua",
   "scripts": {
@@ -33,6 +33,7 @@
     "prettier": "^2.1.2",
     "rbxts-transform-debug": "^0.2.0",
     "rbxts-transform-env": "^0.3.0",
+    "rbxts-transformer-services": "^1.0.0",
     "roblox-ts": "^1.1.1",
     "typescript": "^4.1.3"
   },
@@ -45,7 +46,7 @@
     "@rbxts/roact": "^1.3.0-ts.14",
     "@rbxts/roact-rodux": "^0.2.2-ts.2",
     "@rbxts/rodux": "^3.0.0-ts.2",
-    "@rbxts/services": "^1.1.1",
+    "@rbxts/services": "^1.1.5",
     "@rbxts/signal": "^1.0.3",
     "@rbxts/snapdragon": "^2.0.0-beta.0",
     "@rbxts/string-utils": "^1.0.2",

src/Client/Components/Dropdown.tsx

@@ -202,12 +202,12 @@ export default class Dropdown<T = string> extends Roact.Component<DropdownProps<
 								TextXAlignment="Left"
 								TextColor3={
 									Disabled
-										? new Color3(50, 50, 50)
+										? theme.PrimaryDisabledColor3
 										: item.TextColor3
 										? item.TextColor3
-										: new Color3(200, 200, 200)
+										: theme.PrimaryTextColor3
 								}
-								TextStrokeTransparency={0.5}
+								// TextStrokeTransparency={0.5}
 								Text={item.SelectedText ?? item.Text}
 								Event={{
 									MouseButton1Click: () => !Disabled && this.setState({ active: !this.state.active }),
@@ -216,7 +216,7 @@ export default class Dropdown<T = string> extends Roact.Component<DropdownProps<
 						</frame>
 						<imagelabel
 							Image="rbxassetid://2657038128"
-							ImageColor3={Disabled ? Color3.fromRGB(100, 100, 100) : Color3.fromRGB(255, 255, 255)}
+							ImageColor3={Disabled ? theme.PrimaryDisabledColor3 : theme.PrimaryTextColor3}
 							Position={new UDim2(1, -25, 0, 5)}
 							BackgroundTransparency={1}
 							Rotation={this.state.active ? 0 : 180}

src/Client/Components/Icon.tsx

@@ -3,6 +3,7 @@ import ThemeContext from "../../Client/UIKit/ThemeContext";
 
 interface IconDefinition {
 	Offset: Vector2;
+	NoOverrideColor?: boolean;
 	TintColor?: Color3;
 }
 
@@ -88,6 +89,7 @@ export default class ZirconIcon extends Roact.PureComponent<IconProps> {
 							Size={new UDim2(0, 16, 0, 16)}
 							BackgroundTransparency={1}
 							Image={theme.IconAssetUri}
+							ImageColor3={theme.IconColor3}
 							ImageRectOffset={icon.Offset}
 							Position={this.props.Position}
 							ImageRectSize={new Vector2(16, 16)}

src/Client/Components/MultiSelectDropdown.tsx

@@ -246,8 +246,8 @@ export default class MultiSelectDropdown<T = string> extends Roact.Component<Dro
 								Font={theme.Font}
 								TextSize={15}
 								TextXAlignment="Left"
-								TextColor3={Disabled ? new Color3(50, 50, 50) : new Color3(200, 200, 200)}
-								TextStrokeTransparency={0.5}
+								TextColor3={Disabled ? theme.PrimaryDisabledColor3 : theme.PrimaryTextColor3}
+								// TextStrokeTransparency={0.5}
 								Text={this.props.Label.format(values.size())}
 								Event={{
 									MouseButton1Click: () => !Disabled && this.setState({ active: !this.state.active }),
@@ -256,7 +256,7 @@ export default class MultiSelectDropdown<T = string> extends Roact.Component<Dro
 						</frame>
 						<imagelabel
 							Image="rbxassetid://2657038128"
-							ImageColor3={Disabled ? Color3.fromRGB(100, 100, 100) : Color3.fromRGB(255, 255, 255)}
+							ImageColor3={Disabled ? theme.PrimaryDisabledColor3 : Color3.fromRGB(255, 255, 255)}
 							Position={new UDim2(1, -25, 0, 5)}
 							BackgroundTransparency={1}
 							Rotation={this.state.active ? 0 : 180}

src/Client/Components/OutputMessage.tsx

@@ -57,7 +57,7 @@ function OutputMessage(props: OutputMessageProps) {
 					} = output;
 
 					const tokens = MessageTemplateParser.GetTokens(Template);
-					const renderer = new ZirconStructuredMessageTemplateRenderer(tokens);
+					const renderer = new ZirconStructuredMessageTemplateRenderer(tokens, theme);
 					const text = renderer.Render(output.data);
 
 					messages.push(

src/Client/Format/ZirconStructuredMessageTemplate.tsx

@@ -1,15 +1,20 @@
 import { MessageTemplateRenderer, PropertyToken, TextToken } from "@rbxts/message-templates";
-import { DestructureMode } from "@rbxts/message-templates/out/MessageTemplateToken";
+import { DestructureMode, Token } from "@rbxts/message-templates/out/MessageTemplateToken";
+import { ZirconThemeDefinition } from "Client/UIKit/ThemeContext";
 import { formatRichText } from ".";
 
 export class ZirconStructuredMessageTemplateRenderer extends MessageTemplateRenderer {
+	public constructor(tokens: Token[], private theme: ZirconThemeDefinition) {
+		super(tokens);
+	}
+
 	protected RenderPropertyToken(propertyToken: PropertyToken, value: unknown): string {
 		if (propertyToken.destructureMode === DestructureMode.Destructure) {
-			return formatRichText(value);
+			return formatRichText(value, undefined, this.theme);
 		} else if (propertyToken.destructureMode === DestructureMode.ToString) {
 			return tostring(value);
 		} else {
-			return formatRichText(value);
+			return formatRichText(value, undefined, this.theme);
 		}
 	}
 	protected RenderTextToken(textToken: TextToken): string {

src/Client/Format/index.ts

@@ -1,7 +1,7 @@
 import { MessageTemplateParser, TemplateTokenKind } from "@rbxts/message-templates";
 import t from "@rbxts/t";
 import ZrTextStream from "@rbxts/zirconium/out/Ast/TextStream";
-import { getRichTextColor3, ZirconTheme } from "Client/UIKit/ThemeContext";
+import { getRichTextColor3, ZirconTheme, ZirconThemeDefinition } from "Client/UIKit/ThemeContext";
 interface PlainTextToken {
 	Type: "Text";
 	Value: string;
@@ -66,37 +66,37 @@ export function formatParse(formatString: string) {
 const isArray = t.array(t.any);
 const isMap = t.map(t.string, t.any);
 
-export function formatRichText(value: unknown, level = 1): string {
+export function formatRichText(value: unknown, level = 1, theme: ZirconThemeDefinition): string {
 	if (typeIs(value, "string")) {
-		return getRichTextColor3(ZirconTheme, "Green", `${value}`);
+		return getRichTextColor3(theme, "Green", `${value}`);
 	} else if (typeIs(value, "number") || typeIs(value, "boolean")) {
-		return getRichTextColor3(ZirconTheme, "Cyan", tostring(value));
+		return getRichTextColor3(theme, "Cyan", tostring(value));
 	} else if (isArray(value)) {
 		if (level > 1) {
-			return getRichTextColor3(ZirconTheme, "Grey", `[...]`);
+			return getRichTextColor3(theme, "Grey", `[...]`);
 		} else {
 			return getRichTextColor3(
 				ZirconTheme,
 				"Grey",
-				`[${value.map((v) => formatRichText(v, level + 1)).join(", ")}]`,
+				`[${value.map((v) => formatRichText(v, level + 1, theme)).join(", ")}]`,
 			);
 		}
 	} else if (isMap(value)) {
 		if (level > 1) {
-			return getRichTextColor3(ZirconTheme, "Grey", `{...}`);
+			return getRichTextColor3(theme, "Grey", `{...}`);
 		} else {
 			const arr = new Array<string>();
 			for (const [k, v] of value) {
-				arr.push(`${getRichTextColor3(ZirconTheme, "White", k)}: ${formatRichText(v, level + 1)}`);
+				arr.push(`${getRichTextColor3(theme, "White", k)}: ${formatRichText(v, level + 1, theme)}`);
 			}
-			return getRichTextColor3(ZirconTheme, "Grey", `{${arr.join(", ")}}`);
+			return getRichTextColor3(theme, "Grey", `{${arr.join(", ")}}`);
 		}
 	} else if (typeIs(value, "Instance")) {
-		return getRichTextColor3(ZirconTheme, "Orange", `${value.GetFullName()}`);
+		return getRichTextColor3(theme, "Orange", `${value.GetFullName()}`);
 	} else if (value === undefined) {
-		return getRichTextColor3(ZirconTheme, "Cyan", "undefined");
+		return getRichTextColor3(theme, "Cyan", "undefined");
 	} else {
-		return getRichTextColor3(ZirconTheme, "Yellow", `<${tostring(value)}>`);
+		return getRichTextColor3(theme, "Yellow", `<${tostring(value)}>`);
 	}
 }
 
@@ -153,7 +153,7 @@ export function formatMessageTemplate(template: string, values: Record<string, d
 	for (const token of tokens) {
 		if (token.kind === TemplateTokenKind.Property) {
 			const value = values[token.propertyName];
-			return formatRichText(value);
+			return formatRichText(value, undefined, ZirconTheme);
 		}
 	}
 }
@@ -169,7 +169,7 @@ export function formatTokens(tokens: ReadonlyArray<FormatToken>, vars: unknown[]
 				if (idxOffset > vars.size()) {
 					resultingStr += getRichTextColor3(ZirconTheme, "Red", `{${token.Value}}`);
 				} else {
-					resultingStr += formatRichText(vars[idxOffset]);
+					resultingStr += formatRichText(vars[idxOffset], undefined, ZirconTheme);
 					idxOffset += 1;
 				}
 			}