Share the colors between TypeScript and CSS

src/common/theme.ts

@@ -1,21 +1,8 @@
 import { createTheme } from "@mui/material";
-
-// See https://www.figma.com/file/M3dC0Gk98IGSGlxY901rBh/
-export const theme = {
-	palette: {
-		black: "#000000",
-		white: "#ffffff",
-		textPrimary: "#444444",
-		primary: "#009966",
-		error: "#ff0000",
-		border: "#bbbbbb",
-		editorBackground: "#fafafa",
-		editorGrid: "#dddddd",
-	},
-};
+import { theme } from "../style";
 
 export const muiTheme = createTheme({
 	palette: {
-		primary: { main: theme.palette.primary },
+		primary: { main: theme.colors.primary },
 	},
 });

src/components/GlobalHeader.tsx

@@ -1,6 +1,6 @@
 import { AppBar } from "@mui/material";
 import type { CSSProperties } from "react";
-import { theme } from "../common/theme";
+import { theme } from "../style";
 
 export type GlobalHeaderProps = {
 	style: CSSProperties;
@@ -15,7 +15,7 @@ export default function GlobalHeader({ style }: GlobalHeaderProps) {
 			style={style}
 			sx={{
 				p: 2,
-				background: theme.palette.white,
+				background: theme.colors.white,
 				borderBottom: "1px solid",
 				borderColor: "divider",
 			}}

src/main.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter, Route, Routes } from "react-router";
 import App from "./App";
-import "./index.css";
+import "./style.css";
 import { muiTheme } from "./common/theme";
 import EditPage from "./pages/edit";
 import HomePage from "./pages/home";

src/pages/edit/Editor/components/Grid.tsx

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
-import { theme } from "../../../../common/theme";
 import { vector2 } from "../../../../common/vector2";
+import { theme } from "../../../../style";
 import { useComponentEditorStore } from "../store";
 
 export default function CCComponentEditorGrid() {
@@ -27,7 +27,7 @@ export default function CCComponentEditorGrid() {
 					left: 0,
 					width: "1px",
 					height: "100%",
-					backgroundColor: theme.palette.editorGrid,
+					backgroundColor: theme.colors.editorGrid,
 					transform: `translateX(${x}px)`,
 				}}
 			/>,
@@ -48,7 +48,7 @@ export default function CCComponentEditorGrid() {
 					left: 0,
 					width: "100%",
 					height: "1px",
-					backgroundColor: theme.palette.editorGrid,
+					backgroundColor: theme.colors.editorGrid,
 					transform: `translateY(${y}px)`,
 				}}
 			/>,

src/pages/edit/Editor/index.tsx

@@ -1,10 +1,10 @@
 import { Box } from "@mui/material";
 import nullthrows from "nullthrows";
 import { useState } from "react";
-import { theme } from "../../../common/theme";
 import { ComponentPropertyDialog } from "../../../components/ComponentPropertyDialog";
 import type { CCComponentId } from "../../../store/component";
 import { useStore } from "../../../store/react";
+import { theme } from "../../../style";
 import CCComponentEditorContextMenu from "./components/ContextMenu";
 import CCComponentEditorFrameControl from "./components/FrameControl";
 import CCComponentEditorGrid from "./components/Grid";
@@ -35,7 +35,7 @@ function CCComponentEditorContent({
 			sx={{
 				position: "relative",
 				overflow: "hidden",
-				backgroundColor: theme.palette.editorBackground,
+				backgroundColor: theme.colors.editorBackground,
 			}}
 		>
 			<CCComponentEditorGrid />

src/pages/edit/Editor/renderer/Connection/index.tsx

@@ -1,12 +1,12 @@
 import nullthrows from "nullthrows";
 import { useState } from "react";
-import { theme } from "../../../../../common/theme";
 import type { Vector2 } from "../../../../../common/vector2";
 import type { CCComponentPinType } from "../../../../../store/componentPin";
 import type { CCConnectionId } from "../../../../../store/connection";
 import { useStore } from "../../../../../store/react";
 import ensureStoreItem from "../../../../../store/react/error";
 import { useNode } from "../../../../../store/react/selectors";
+import { theme } from "../../../../../style";
 import { useComponentEditorStore } from "../../store";
 import { stringifySimulationValue } from "../../store/slices/core/index";
 import { getCCComponentEditorRendererNodeGeometry } from "../Node/geometry";
@@ -64,8 +64,8 @@ export function CCComponentEditorRendererConnectionCore({
 			stroke={
 				connectionId &&
 				componentEditorState.selectedConnectionIds.has(connectionId)
-					? theme.palette.primary
-					: theme.palette.textPrimary
+					? theme.colors.primary
+					: theme.colors.textPrimary
 			}
 			strokeWidth="2"
 			fill="none"
@@ -139,7 +139,7 @@ const CCComponentEditorRendererConnection = ensureStoreItem(
 					}}
 				/>
 				{isHovered && componentEditorState.editorMode === "play" && (
-					<text fontSize={10} fill={theme.palette.textPrimary}>
+					<text fontSize={10} fill={theme.colors.textPrimary}>
 						<textPath
 							href={`#${connectionId}`}
 							startOffset="50%"

src/pages/edit/Editor/renderer/Node/components/Default/index.tsx

@@ -1,4 +1,4 @@
-import { theme } from "../../../../../../../common/theme";
+import { theme } from "../../../../../../../style";
 import type { CCComponentEditorRendererNodeRendererProps } from "../../types";
 
 export function CCComponentEditorRendererNodeDefaultRenderer(
@@ -7,7 +7,7 @@ export function CCComponentEditorRendererNodeDefaultRenderer(
 	return (
 		<>
 			<text
-				fill={theme.palette.textPrimary}
+				fill={theme.colors.textPrimary}
 				x={0}
 				y={-5}
 				textAnchor="start"
@@ -20,11 +20,11 @@ export function CCComponentEditorRendererNodeDefaultRenderer(
 				y={0}
 				width="100%"
 				height="100%"
-				fill={theme.palette.white}
+				fill={theme.colors.white}
 				stroke={
 					props.nodeState.isSelected
-						? theme.palette.primary
-						: theme.palette.textPrimary
+						? theme.colors.primary
+						: theme.colors.textPrimary
 				}
 				strokeWidth={2}
 				rx={2}

src/pages/edit/Editor/renderer/Node/components/Display/index.tsx

@@ -1,8 +1,8 @@
 import nullthrows from "nullthrows";
-import { theme } from "../../../../../../../common/theme";
 import { display } from "../../../../../../../store/intrinsics/definitions";
 import type { CCIntrinsicComponentDisplaySpec } from "../../../../../../../store/intrinsics/types";
 import { useStore } from "../../../../../../../store/react";
+import { theme } from "../../../../../../../style";
 import { useComponentEditorStore } from "../../../../store";
 import type { CCComponentEditorRendererNodeRendererProps } from "../../types";
 import { CCComponentEditorRendererNodeDefaultRenderer } from "../Default";
@@ -40,7 +40,7 @@ export function CCComponentEditorRendererNodeDisplayRenderer(
 				x={padding}
 				y={padding}
 				fontSize={16}
-				fill={theme.palette.textPrimary}
+				fill={theme.colors.textPrimary}
 				dominantBaseline="hanging"
 			>
 				{config.resolution.x}x{config.resolution.y}
@@ -65,10 +65,10 @@ export function CCComponentEditorRendererNodeDisplayRenderer(
 								height={gridSize}
 								fill={
 									inputValue?.[x + config.resolution.x * y]
-										? theme.palette.black
-										: theme.palette.white
+										? theme.colors.black
+										: theme.colors.white
 								}
-								stroke={theme.palette.editorGrid}
+								stroke={theme.colors.editorGrid}
 							/>
 						))
 						.toArray(),

src/pages/edit/Editor/renderer/Node/components/Interface/index.tsx

@@ -1,7 +1,7 @@
 import nullthrows from "nullthrows";
-import { theme } from "../../../../../../../common/theme";
 import { useStore } from "../../../../../../../store/react";
 import { wrappingIncrementSimulationValue } from "../../../../../../../store/simulation";
+import { theme } from "../../../../../../../style";
 import { useComponentEditorStore } from "../../../../store";
 import { stringifySimulationValue } from "../../../../store/slices/core";
 import type { CCComponentEditorRendererNodeRendererProps } from "../../types";
@@ -60,8 +60,8 @@ export function CCComponentEditorRendererNodeInterfaceRenderer(
 				height={labelHeight}
 				rx={labelHeight / 2}
 				ry={labelHeight / 2}
-				stroke={theme.palette.textPrimary}
-				fill={theme.palette.white}
+				stroke={theme.colors.textPrimary}
+				fill={theme.colors.white}
 				strokeWidth={1}
 				{...(onClick
 					? {
@@ -77,7 +77,7 @@ export function CCComponentEditorRendererNodeInterfaceRenderer(
 			<text
 				x={width / 2}
 				y={height / 2}
-				fill={theme.palette.textPrimary}
+				fill={theme.colors.textPrimary}
 				textAnchor="middle"
 				dominantBaseline="middle"
 				fontSize={10}

src/pages/edit/Editor/renderer/NodePin/index.tsx

@@ -1,13 +1,13 @@
 import { KDTree } from "mnemonist";
 import nullthrows from "nullthrows";
 import { type PointerEvent, type ReactNode, useState } from "react";
-import { theme } from "../../../../../common/theme";
 import { type Vector2, vector2 } from "../../../../../common/vector2";
 import { useDraggable } from "../../../../../hooks/drag";
 import { CCConnectionStore } from "../../../../../store/connection";
 import { input, output } from "../../../../../store/intrinsics/definitions";
 import type { CCNodePinId } from "../../../../../store/nodePin";
 import { useStore } from "../../../../../store/react";
+import { theme } from "../../../../../style";
 import { useComponentEditorStore } from "../../store";
 import {
 	CCComponentEditorRendererConnectionCore,
@@ -154,8 +154,8 @@ export default function CCComponentEditorRendererNodePin({
 					width={CCComponentEditorRendererNodePinConstants.SIZE}
 					height={CCComponentEditorRendererNodePinConstants.SIZE}
 					rx={3}
-					fill={theme.palette.white}
-					stroke={theme.palette.textPrimary}
+					fill={theme.colors.white}
+					stroke={theme.colors.textPrimary}
 					strokeWidth={2}
 				/>
 				{nodePin.manualBitWidth !== null && (
@@ -171,7 +171,7 @@ export default function CCComponentEditorRendererNodePin({
 									? 6
 									: 8
 						}
-						fill={theme.palette.textPrimary}
+						fill={theme.colors.textPrimary}
 					>
 						{nodePin.manualBitWidth >= 100 ? "99+" : nodePin.manualBitWidth}
 					</text>
@@ -195,7 +195,7 @@ export default function CCComponentEditorRendererNodePin({
 						}
 						dominantBaseline="central"
 						fontSize={12}
-						fill={theme.palette.textPrimary}
+						fill={theme.colors.textPrimary}
 					>
 						{componentPin.name}
 					</text>

src/pages/edit/SidePanel.tsx

@@ -3,11 +3,11 @@ import { Box, InputAdornment, TextField } from "@mui/material";
 import { useState } from "react";
 import invariant from "tiny-invariant";
 import { setDataTransferAsComponent } from "../../common/serialization";
-import { theme } from "../../common/theme";
 import { type CCComponentId, isIncluding } from "../../store/component";
 import { ccPinTypes } from "../../store/componentPin";
 import { useStore } from "../../store/react";
 import { useComponents } from "../../store/react/selectors";
+import { theme } from "../../style";
 
 export type SidePanelProps = {
 	editedComponentId: CCComponentId;
@@ -28,9 +28,9 @@ function ComponentRenderer({ componentId }: { componentId: CCComponentId }) {
 					gridTemplateColumns: "1fr 1fr",
 					alignItems: "center",
 					marginTop: "4px",
-					border: `2px solid ${theme.palette.black}`,
+					border: `2px solid ${theme.colors.black}`,
 					borderRadius: "2px",
-					background: theme.palette.white,
+					background: theme.colors.white,
 				}}
 			>
 				{ccPinTypes.map((type) => (
@@ -70,9 +70,9 @@ function ComponentRenderer({ componentId }: { componentId: CCComponentId }) {
 										style={{
 											width: "10px",
 											height: "10px",
-											border: `2px solid ${theme.palette.black}`,
+											border: `2px solid ${theme.colors.black}`,
 											borderRadius: "4px",
-											background: theme.palette.white,
+											background: theme.colors.white,
 										}}
 									/>
 									<div>{pin.name}</div>

src/style.css

@@ -0,0 +1,30 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+:root {
+	font-family: sans-serif;
+
+	/* Keep in sync with the colors in style.ts */
+	--color-black: #000000;
+	--color-white: #ffffff;
+	--color-text-primary: #444444;
+	--color-primary: #009966;
+	--color-error: #ff0000;
+	--color-border: #bbbbbb;
+	--color-editor-background: #fafafa;
+	--color-editor-grid: #dddddd;
+}
+
+:root,
+body,
+#root {
+	height: 100%;
+}
+
+body {
+	margin: 0;
+	overflow: hidden;
+}

src/style.ts

@@ -0,0 +1,14 @@
+// See https://www.figma.com/file/M3dC0Gk98IGSGlxY901rBh/
+// Keep in sync with the custom properties in style.css
+export const theme = {
+	colors: {
+		black: "#000000",
+		white: "#ffffff",
+		textPrimary: "#444444",
+		primary: "#009966",
+		error: "#ff0000",
+		border: "#bbbbbb",
+		editorBackground: "#fafafa",
+		editorGrid: "#dddddd",
+	},
+};