skins: Added Pixel skin

packages/apps/browser/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/browser
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/browser/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/browser",
 	"description": "A ProzillaOS application for browsing the internet.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/browser",
 	"author": {
 		"name": "Prozilla",

packages/apps/calculator/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/calculator
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/calculator/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/calculator",
 	"description": "A ProzillaOS application for making basic calculations.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/calculator",
 	"author": {
 		"name": "Prozilla",

packages/apps/file-explorer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/file-explorer
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/file-explorer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/file-explorer",
 	"description": "A standard ProzillaOS application for browsing files.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/file-explorer",
 	"author": {
 		"name": "Prozilla",

packages/apps/logic-sim/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/logic-sim
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/logic-sim/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/logic-sim",
 	"description": "A ProzillaOS application for simulating digital logic.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/logic-sim",
 	"author": {
 		"name": "Prozilla",

packages/apps/media-viewer/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/media-viewer
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/media-viewer/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/media-viewer",
 	"description": "A ProzillaOS application for viewing different kinds of media.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/media-viewer",
 	"author": {
 		"name": "Prozilla",

packages/apps/settings/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/settings
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+  - @prozilla-os/file-explorer@1.1.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/settings/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/settings",
 	"description": "A settings app for ProzillaOS.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/settings",
 	"author": {
 		"name": "Prozilla",

packages/apps/terminal/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/terminal
 
+## 1.1.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.1
 
 ### Patch Changes

packages/apps/terminal/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/terminal",
 	"description": "A terminal/shell application for ProzillaOS.",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"homepage": "https://os.prozilla.dev/terminal",
 	"author": {
 		"name": "Prozilla",

packages/apps/text-editor/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @prozilla-os/text-editor
 
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+
 ## 1.1.0
 
 ### Minor Changes

packages/apps/text-editor/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/text-editor",
 	"description": "A text editor application for ProzillaOS.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev/text-editor",
 	"author": {
 		"name": "Prozilla",

packages/core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @prozilla-os/core
 
+## 1.2.1
+
+### Patch Changes
+
+- Added Pixel skin
+- Updated dependencies
+  - @prozilla-os/skins@1.1.1
+
 ## 1.2.0
 
 ### Minor Changes

packages/core/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/core",
 	"description": "A React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",

packages/core/src/components/_utils/directory-list/ImagePreview.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import styles from "./ImagePreview.module.css";
 import { ReactSVG } from "react-svg";
 import { useSystemManager } from "../../../hooks";
+import { VectorImage } from "../vector-image/VectorImage";
 
 interface ImagePreviewProps {
 	source: string;
@@ -25,9 +26,7 @@ export function ImagePreview({ source, className, onError, ...props }: ImagePrev
 	return (<div className={classNames.join(" ")} {...props}>
 		{loadingFailed
 			? <ReactSVG src={skin.fileIcons.generic}/>
-			: source.endsWith(".svg")
-				? <ReactSVG src={source} onError={onLoadingError}/>
-				: <img src={source} onError={onLoadingError} alt="Preview" draggable="false"/>
+			: <VectorImage src={source} onError={onLoadingError}/>
 		}
 	</div>);
 }

packages/core/src/components/_utils/index.ts

@@ -6,5 +6,6 @@ export { ProgressBar } from "./progress-bar/ProgressBar";
 export { HeaderMenu } from "./header-menu/HeaderMenu";
 export { WebView } from "./web-view/WebView";
 export { ImagePreview } from "./directory-list/ImagePreview";
+export { VectorImage as Image } from "./vector-image/VectorImage";
 
 export type { OnSelectionChangeParams, FileEventHandler, FolderEventHandler } from "./directory-list/DirectoryList";

packages/core/src/components/_utils/vector-image/VectorImage.tsx

@@ -0,0 +1,51 @@
+import { Vector2 } from "@prozilla-os/core";
+import { useEffect, useState } from "react";
+import { ReactSVG } from "react-svg";
+
+interface ImageProps {
+	className?: string;
+	src?: string;
+	[key: string]: unknown;
+}
+
+export function VectorImage({ className, src, ...props }: ImageProps) {
+	const [dimensions, setDimensions] = useState<Vector2>(Vector2.ZERO);
+
+	useEffect(() => {
+		if (src == null)
+			return;
+
+		const image = new Image();
+
+		image.onload = () => {
+			console.log(image);
+			setDimensions(new Vector2(image.naturalWidth, image.naturalHeight));
+		};
+
+		image.src = src;
+	}, [src]);
+
+	if (src?.endsWith(".svg")) {
+		return <ReactSVG className={className} src={src} {...props}/>;
+	} else {
+		return <div>
+			<div>
+				<svg
+					width={200}
+					height={200}
+					className={className}
+					viewBox={"0 0 200 200"}
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+					xmlnsXlink="http://www.w3.org/1999/xlink"
+					shapeRendering="crispEdges"
+					{...props}
+				>    
+					<g transform={`scale(${200 / (dimensions.x ?? 1)})`}>
+						<image width={dimensions.x} height={dimensions.y} href={src} style={{ imageRendering: "crisp-edges" }}/>
+					</g>
+				</svg>
+			</div>
+		</div>;
+	}
+}

packages/core/src/components/modals/_utils/WindowedModal.tsx

@@ -8,6 +8,7 @@ import Draggable from "react-draggable";
 import { ReactSVG } from "react-svg";
 import utilStyles from "../../../styles/utils.module.css";
 import { ModalProps } from "../ModalView";
+import { VectorImage } from "../../_utils/vector-image/VectorImage";
 
 export function WindowedModal({ modal, params, children, ...props }: ModalProps) {
 	const nodeRef = useRef(null);
@@ -53,7 +54,7 @@ export function WindowedModal({ modal, params, children, ...props }: ModalProps)
 			}}
 		>
 			<div className={`${styles.Header} Window-handle`}>
-				<ReactSVG
+				<VectorImage
 					className={styles["Window-icon"]}
 					src={params?.iconUrl as string}
 				/>

packages/core/src/components/taskbar/app-icon/AppIcon.tsx

@@ -8,6 +8,7 @@ import { Actions } from "../../actions/Actions";
 import { ClickAction } from "../../actions/actions/ClickAction";
 import { WindowsManager } from "../../../features/windows/windowsManager";
 import { useClassNames } from "../../../hooks";
+import { VectorImage } from "../../_utils/vector-image/VectorImage";
 
 interface AppButtonProps {
 	app: App;
@@ -73,7 +74,7 @@ export const AppButton: FC<AppButtonProps> = memo(({ app, windowsManager, active
 			}}
 			title={app.name}
 		>
-			<ReactSVG src={app.iconUrl as string}/>
+			<VectorImage src={app.iconUrl as string}/>
 		</button>
 	);
 });

packages/core/src/components/taskbar/indicators/Battery.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import styles from "./Battery.module.css";
 import { UtilMenu } from "../menus/UtilMenu";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
+import { useClassNames } from "@prozilla-os/core";
 
 type Battery = {
 	charging: boolean | ((prevState: boolean) => boolean);
@@ -93,7 +94,7 @@ export function Battery({ hideUtilMenus, showUtilMenu }: BatteryProps) {
 	}
 
 	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
-		<button className={styles.Button} title="Battery" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
+		<button className={useClassNames([styles.Button], "Taskbar", "Indicator", "Battery")} title="Battery" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
 			{!isCharging
 				? <FontAwesomeIcon className={styles["Charging-indicator"]} icon={faMinus}/>
 				: null

packages/core/src/components/taskbar/indicators/Calendar.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import styles from "./Calendar.module.css";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
 import { UtilMenu } from "../menus/UtilMenu";
+import { useClassNames } from "@prozilla-os/core";
 
 interface CalendarProps {
 	hideUtilMenus: boolean;
@@ -35,8 +36,8 @@ export function Calendar({ hideUtilMenus, showUtilMenu }: CalendarProps) {
 		setShowMenu(show);
 	};
 
-	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
-		<button className={styles.Button} title="Date & Time" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
+	return <OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
+		<button className={useClassNames([styles.Button], "Taskbar", "Indicator", "Calendar")} title="Date & Time" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
 			<p>
 				{date.toLocaleString("en-GB", {
 					hour: "numeric",
@@ -66,5 +67,5 @@ export function Calendar({ hideUtilMenus, showUtilMenu }: CalendarProps) {
 				year: "numeric",
 			})}</p>
 		</UtilMenu>
-	</OutsideClickListener>);
+	</OutsideClickListener>;
 }

packages/core/src/components/taskbar/indicators/Network.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
 import { UtilMenu } from "../menus/UtilMenu";
 import styles from "./Network.module.css";
+import { useClassNames } from "@prozilla-os/core";
 
 interface NetworkProps {
 	hideUtilMenus: boolean;
@@ -27,7 +28,7 @@ export function Network({ hideUtilMenus, showUtilMenu }: NetworkProps) {
 	};
 
 	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
-		<button title="Network" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
+		<button title="Network" className={useClassNames([], "Taskbar", "Indicator", "Network")} tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
 			<FontAwesomeIcon icon={faWifi}/>
 		</button>
 		<UtilMenu active={showMenu} setActive={setShowMenu} className={styles.Menu}>

packages/core/src/components/taskbar/indicators/Volume.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
 import { UtilMenu } from "../menus/UtilMenu";
 import styles from "./Volume.module.css";
+import { useClassNames } from "@prozilla-os/core";
 
 interface VolumeProps {
 	hideUtilMenus: boolean;
@@ -27,7 +28,7 @@ export function Volume({ hideUtilMenus, showUtilMenu }: VolumeProps) {
 	};
 
 	return (<OutsideClickListener onOutsideClick={() => { updateShowMenu(false); }}>
-		<button title="Volume" tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
+		<button title="Volume" className={useClassNames([], "Taskbar", "Indicator", "Volume")} tabIndex={0} onClick={() => { updateShowMenu(!showMenu); }}>
 			<FontAwesomeIcon icon={faVolumeHigh}/>
 		</button>
 		<UtilMenu active={showMenu} setActive={setShowMenu} className={styles.Menu}>

packages/core/src/components/taskbar/menus/HomeMenu.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from "react";
 import { AppsConfig, closeViewport, Vector2 } from "../../../features";
 import { useWindowsManager, useVirtualRoot, useKeyboardListener, useSystemManager, useClassNames } from "../../../hooks";
 import { utilStyles } from "../../../styles";
+import { VectorImage } from "../../_utils/vector-image/VectorImage";
 
 interface HomeMenuProps {
 	active: boolean;
@@ -123,7 +124,7 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) {
 								}}
 								title={name}
 							>
-								<ReactSVG src={iconUrl ?? ""}/>
+								<VectorImage src={iconUrl ?? ""}/>
 								<h2 className={utilStyles.TextRegular}>{name}</h2>
 							</button>
 						)}

packages/core/src/components/taskbar/menus/SearchMenu.tsx

@@ -6,6 +6,7 @@ import { useKeyboardListener } from "../../../hooks/_utils/keyboard";
 import { App } from "../../../features/";
 import { ReactSVG } from "react-svg";
 import { useClassNames, useSystemManager } from "../../../hooks";
+import { VectorImage } from "../../_utils/vector-image/VectorImage";
 
 interface SearchMenuProps {
 	active: boolean;
@@ -80,7 +81,7 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp
 							windowsManager?.open(id);
 						}}
 					>
-						<ReactSVG src={appsConfig.getAppById(id)?.iconUrl ?? ""}/>
+						<VectorImage src={appsConfig.getAppById(id)?.iconUrl ?? ""}/>
 						<p>{name}</p>
 					</button>
 				)}

packages/core/src/components/taskbar/menus/UtilMenu.tsx

@@ -16,8 +16,12 @@ export function UtilMenu({ active, setActive: _setActive, className, children }:
 	if (className != null)
 		classNames.push(className);
 
+	const modifiers = ["Util"];
+	if (active)
+		modifiers.push("Active");
+
 	return (<div className={classNames.join(" ")}>
-		<div className={useClassNames([styles.UtilMenu], "Taskbar", "Menu", "Util")}>
+		<div className={useClassNames([styles.UtilMenu], "Taskbar", "Menu", modifiers)}>
 			{children}
 		</div>
 	</div>);

packages/core/src/components/windows/WindowView.tsx

@@ -1,7 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styles from "./WindowView.module.css";
 import { faCircleRight, faExpand, faMinus, faWindowMaximize as fasWindowMaximize, faTimes, faXmark } from "@fortawesome/free-solid-svg-icons";
-import { ReactSVG } from "react-svg";
 import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
 import Draggable from "react-draggable";
 import { CSSProperties, FC, memo, MouseEventHandler, useEffect, useRef, useState } from "react";
@@ -24,6 +23,7 @@ import { WindowFallbackView } from "./WindowFallbackView";
 import { WindowOptions } from "../../features/windows/windowsManager";
 import { ModalProps } from "../modals/ModalView";
 import { useClassNames, useSystemManager } from "../../hooks";
+import { VectorImage } from "../_utils/vector-image/VectorImage";
 
 export interface WindowProps extends WindowOptions {
 	fullscreen?: boolean;
@@ -176,7 +176,7 @@ export const WindowView: FC<WindowProps> = memo(({ id, app, size, position, onIn
 							focus(event as unknown as Event, true);
 						}}
 					>
-						<ReactSVG
+						<VectorImage
 							className={useClassNames([styles["Window-icon"]], "WindowIcon")}
 							src={iconUrl}
 						/>

packages/core/src/features/system/systemManager.ts

@@ -76,15 +76,15 @@ export class SystemManager {
 	private loadSkin() {
 		const skin = this.skin;
 
-		if (skin.appIcons != null) {
-			const appIcons = skin.appIcons as { [key: string]: string };
-			const appNames = skin.appNames as { [key: string]: string };
+		if (skin.appIcons != null || skin.appNames != null) {
+			const appIcons = skin.appIcons as { [key: string]: string } ?? {};
+			const appNames = skin.appNames as { [key: string]: string } ?? {};
 
 			this.appsConfig.apps.forEach((app) => {
 				if (Object.keys(appIcons).includes(app.id))
 					app.setIconUrl(appIcons[app.id]);
 				if (Object.keys(appNames).includes(app.id))
-					app.setIconUrl(appNames[app.id]);
+					app.setName(appNames[app.id]);
 			});
 		}
 

packages/core/src/hooks/_utils/classNames.ts

@@ -4,17 +4,32 @@ import { NAME } from "../../constants/branding.const";
 /**
  * Generates static class name using BEM notation
  */
-export function useStaticClassName(block?: string, element?: string, modifier?: string) {
+export function useStaticClassName(block?: string, element?: string, modifier?: string | string[]) {
 	return useMemo(() => {
 		if (block == null)
 			return null;
 
-		let className = `${NAME}-${block}`;
+		let className = "";
 
-		if (element != null)
-			className += `_${element}`;
-		if (modifier != null)
-			className += `--${modifier}`;
+		if (modifier == null || typeof modifier == "string") {
+			className = `${NAME}-${block}`;
+
+			if (element != null)
+				className += `_${element}`;
+			if (modifier != null)
+				className += `--${modifier}`;
+		} else {
+			modifier?.forEach((mod) => {
+				className += ` ${NAME}-${block}`;
+
+				if (element != null)
+					className += `_${element}`;
+				if (mod != null)
+					className += `--${mod}`;
+			});
+
+			className = className.trim();
+		}
 
 		return className;
 	}, [block, element, modifier]);
@@ -23,7 +38,7 @@ export function useStaticClassName(block?: string, element?: string, modifier?:
 /**
  * Combine clas names and an optional static class name
  */
-export function useClassNames(classNames: (string | undefined)[], block?: string, element?: string, modifier?: string) {
+export function useClassNames(classNames: (string | undefined)[], block?: string, element?: string, modifier?: string | string[]) {
 	const staticClassName = useStaticClassName(block, element, modifier);
 
 	return useMemo(() => {

packages/demo/public/assets/fonts/minecraftia/readme.txt

@@ -0,0 +1,7 @@
+The font file in this archive was created by Andrew Tyler www.AndrewTyler.net and font@andrewtyler.net
+
+Use at 12 or 24 px size with anti-alising off for best results.
+
+
+
+

packages/demo/scripts/stage.ts

@@ -3,7 +3,7 @@ import { appsConfig } from "../src/config/apps.config";
 import { ANSI } from "../../core/src/constants";
 import { NAME, TAG_LINE } from "../src/config/branding.config";
 import { BASE_URL, BUILD_DIR, DOMAIN } from "../src/config/deploy.config";
-import { skin } from "../src/config/skin.config";
+import { defaultSkin } from "../src/config/skin.config";
 import { name } from "../package.json";
 
 const PATHS = {
@@ -17,7 +17,7 @@ function generateSitemapXml() {
 	const date = new Date();
 	const lastModified = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 
-	const images = skin.wallpapers.map((path) => `
+	const images = defaultSkin.wallpapers.map((path) => `
 		<image:image>
 			<image:loc>${BASE_URL.slice(0, -1) + path}</image:loc>
 		</image:image>`

packages/demo/src/Main.tsx

@@ -1,11 +1,33 @@
-import { ReactElement } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { Router } from "./router/Router";
-import { skin } from "./config/skin.config";
+import { defaultSkin } from "./config/skin.config";
 import { NAME, TAG_LINE } from "./config/branding.config";
 import { appsConfig } from "./config/apps.config";
-import { ProzillaOS } from "prozilla-os";
+import { getViewportParams, ProzillaOS } from "prozilla-os";
+import { macOsSkin, minimalSkin, pixelSkin } from "@prozilla-os/skins";
 
 export function Main(): ReactElement {
+	const [skin, setSkin] = useState(defaultSkin);
+
+	useEffect(() => {
+		const params = getViewportParams();
+
+		if (params.skin == null)
+			return;
+
+		switch (params.skin) {
+			case "mac":
+				setSkin(macOsSkin);
+				break;
+			case "minimal":
+				setSkin(minimalSkin);
+				break;
+			case "pixel":
+				setSkin(pixelSkin);
+				break;
+		}
+	}, []);
+
 	return <ProzillaOS
 		systemName={NAME}
 		tagLine={TAG_LINE}

packages/demo/src/config/skin.config.ts

@@ -1,6 +1,6 @@
 import { Skin } from "@prozilla-os/skins";
 
-export const skin = new Skin({
+export const defaultSkin = new Skin({
 	wallpapers: [
 		"/assets/wallpapers/vibrant-wallpaper-blue-purple-red.png",
 		"/assets/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
@@ -24,5 +24,5 @@ export const skin = new Skin({
 		images: "/assets/apps/file-explorer/icons/folder-images.svg",
 		text: "/assets/apps/file-explorer/icons/folder-text.svg",
 		link: "/assets/apps/file-explorer/icons/folder-link.svg",
-	}
+	},
 });

packages/prozilla-os/CHANGELOG.md

@@ -1,5 +1,19 @@
 # prozilla-os
 
+## 1.2.2
+
+### Patch Changes
+
+- Updated dependencies
+  - @prozilla-os/core@1.2.1
+  - @prozilla-os/browser@1.1.1
+  - @prozilla-os/calculator@1.1.1
+  - @prozilla-os/file-explorer@1.1.1
+  - @prozilla-os/media-viewer@1.1.1
+  - @prozilla-os/settings@1.1.1
+  - @prozilla-os/terminal@1.1.2
+  - @prozilla-os/text-editor@1.1.1
+
 ## 1.2.1
 
 ### Patch Changes

packages/prozilla-os/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "prozilla-os",
 	"description": "a React component library written in TypeScript for building web-based operating systems, made by Prozilla.",
-	"version": "1.2.1",
+	"version": "1.2.2",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",

packages/skins/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @prozilla-os/skins
 
+## 1.1.1
+
+### Patch Changes
+
+- Added Pixel skin
+
 ## 1.1.0
 
 ### Minor Changes

packages/skins/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@prozilla-os/skins",
 	"description": "A React library that contains skins for ProzillaOS.",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"homepage": "https://os.prozilla.dev",
 	"author": {
 		"name": "Prozilla",

packages/skins/src/core/index.ts

@@ -1,3 +1,4 @@
 export { Skin } from "./skin";
 export { macOsSkin } from "./skins/macOs";
-export { minimalSkin } from "./skins/minimal";
+export { minimalSkin } from "./skins/minimal";
+export { pixelSkin } from "./skins/pixel";

packages/skins/src/core/skins/macOs.ts

@@ -13,6 +13,14 @@ export const macOsSkin = new Skin({
 		"text-editor": "/assets/skins/mac/apps/icons/text-editor.svg",
 		"wordle": "/assets/skins/mac/apps/icons/wordle.svg",
 	},
+	appNames: {
+		"browser": "Safari",
+		"calculator": "Calculator",
+		"file-explorer": "Finder",
+		"media-viewer": "Photos",
+		"terminal": "Terminal",
+		"text-editor": "Notes",
+	},
 	wallpapers: [
 		"/assets/skins/mac/wallpapers/macos-monterey.jpg"
 	],

packages/skins/src/core/skins/pixel.ts

@@ -0,0 +1,20 @@
+import { Skin } from "../skin";
+
+export const pixelSkin = new Skin({
+	appIcons: {
+		"ball-maze": "/assets/skins/pixel/apps/icons/ball-maze.png",
+		"browser": "/assets/skins/pixel/apps/icons/browser.png",
+		"calculator": "/assets/skins/pixel/apps/icons/calculator.png",
+		"file-explorer": "/assets/skins/pixel/apps/icons/file-explorer.png",
+		"logic-sim": "/assets/skins/pixel/apps/icons/logic-sim.png",
+		"media-viewer": "/assets/skins/pixel/apps/icons/media-viewer.png",
+		"minesweeper": "/assets/skins/pixel/apps/icons/minesweeper.png",
+		"settings": "/assets/skins/pixel/apps/icons/settings.png",
+		"terminal": "/assets/skins/pixel/apps/icons/terminal.png",
+		"text-editor": "/assets/skins/pixel/apps/icons/text-editor.png",
+		"wordle": "/assets/skins/pixel/apps/icons/wordle.png",
+	},
+	loadStyleSheet: () => {
+		import("../../styles/skins/pixel.css");
+	}
+});

packages/skins/src/main.ts

@@ -1 +1 @@
-export { Skin, macOsSkin, minimalSkin } from "./core";
+export * from "./core";

packages/skins/src/styles/skins/macOs.css

@@ -100,13 +100,28 @@
 	pointer-events: auto;
 }
 
-.ProzillaOS-Taskbar_UtilIcons button {
+.ProzillaOS-Taskbar_Indicator--Calendar {
 	display: flex;
+	flex-direction: row;
 	gap: 0.5rem;
 }
 
-.ProzillaOS-Taskbar_UtilIcons button br {
-	display: none;
+.ProzillaOS-Taskbar_UtilIcons > div {
+	position: relative;
+}
+
+.ProzillaOS-Taskbar_UtilIcons > div > div {
+	top: 100%;
+	bottom: unset;
+}
+
+.ProzillaOS-Taskbar_Menu--Util {
+	border-radius: var(--border-radius-1);
+	border-top-right-radius: 0;
+}
+
+.ProzillaOS-Taskbar_UtilIcons > div > div > .ProzillaOS-Taskbar_Menu--Util:not(.ProzillaOS-Taskbar_Menu--Active) {
+	transform: translateY(-100px);
 }
 
 .ProzillaOS-Desktop .ProzillaOS-DirectoryList {

packages/skins/src/styles/skins/pixel.css

@@ -0,0 +1,37 @@
+:root {
+	--border-radius-0: 0;
+	--border-radius-1: 0;
+}
+
+:root {
+	--body-font-family: "Minecraftia", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+	/* --mono-font-family: "Minecraftia", source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+		monospace; */
+}
+
+@font-face {
+	font-family: "Minecraftia";
+	src: url("/assets/fonts/minecraftia/Minecraftia-Regular.ttf");
+	font-display: swap;
+}
+
+body {
+	font-smooth: never;
+	-webkit-font-smoothing : none;
+}
+
+p, pre, input, a {
+	position: relative;
+	top: 0.25rem;
+	line-height: 1.6rem;
+}
+
+p > a {
+	top: unset;
+}
+
+.ProzillaOS-Taskbar_Indicator--Calendar > p {
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+}