From 642ed4dc9471edc205afdb52f63e9abb6a6dcc94 Mon Sep 17 00:00:00 2001 From: chelproc Date: Sat, 31 Oct 2026 12:25:31 +0900 Subject: [PATCH] Share the colors between TypeScript and CSS Rename index.css to style.css and define the colors there as custom properties named --color-*, so that stylesheets can use them. Define the same colors as `theme.colors` in style.ts next to it, and import them from there directly. theme.ts now only holds the MUI theme. --- src/common/theme.ts | 17 ++--------- src/components/GlobalHeader.tsx | 4 +-- src/index.css | 20 ------------- src/main.tsx | 2 +- src/pages/edit/Editor/components/Grid.tsx | 6 ++-- src/pages/edit/Editor/index.tsx | 4 +-- .../edit/Editor/renderer/Connection/index.tsx | 8 ++--- .../Node/components/Default/index.tsx | 10 +++---- .../Node/components/Display/index.tsx | 10 +++---- .../Node/components/Interface/index.tsx | 8 ++--- .../edit/Editor/renderer/NodePin/index.tsx | 10 +++---- src/pages/edit/SidePanel.tsx | 10 +++---- src/style.css | 30 +++++++++++++++++++ src/style.ts | 14 +++++++++ 14 files changed, 82 insertions(+), 71 deletions(-) delete mode 100644 src/index.css create mode 100644 src/style.css create mode 100644 src/style.ts diff --git a/src/common/theme.ts b/src/common/theme.ts index 8d5ee32..ebf88ff 100644 --- a/src/common/theme.ts +++ b/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 }, }, }); diff --git a/src/components/GlobalHeader.tsx b/src/components/GlobalHeader.tsx index 41a148e..246ec70 100644 --- a/src/components/GlobalHeader.tsx +++ b/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", }} diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 30c9ff6..0000000 --- a/src/index.css +++ /dev/null @@ -1,20 +0,0 @@ -*, -*::before, -*::after { - box-sizing: border-box; -} - -:root { - font-family: sans-serif; -} - -:root, -body, -#root { - height: 100%; -} - -body { - margin: 0; - overflow: hidden; -} diff --git a/src/main.tsx b/src/main.tsx index c4c6474..71f68f4 100644 --- a/src/main.tsx +++ b/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"; diff --git a/src/pages/edit/Editor/components/Grid.tsx b/src/pages/edit/Editor/components/Grid.tsx index d5ee4be..1a285d2 100644 --- a/src/pages/edit/Editor/components/Grid.tsx +++ b/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)`, }} />, diff --git a/src/pages/edit/Editor/index.tsx b/src/pages/edit/Editor/index.tsx index 7d550ab..7512744 100644 --- a/src/pages/edit/Editor/index.tsx +++ b/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, }} > diff --git a/src/pages/edit/Editor/renderer/Connection/index.tsx b/src/pages/edit/Editor/renderer/Connection/index.tsx index 8808bdd..c4e466a 100644 --- a/src/pages/edit/Editor/renderer/Connection/index.tsx +++ b/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" && ( - + {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(), diff --git a/src/pages/edit/Editor/renderer/Node/components/Interface/index.tsx b/src/pages/edit/Editor/renderer/Node/components/Interface/index.tsx index d572fc4..e0da8b0 100644 --- a/src/pages/edit/Editor/renderer/Node/components/Interface/index.tsx +++ b/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( {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} @@ -195,7 +195,7 @@ export default function CCComponentEditorRendererNodePin({ } dominantBaseline="central" fontSize={12} - fill={theme.palette.textPrimary} + fill={theme.colors.textPrimary} > {componentPin.name} diff --git a/src/pages/edit/SidePanel.tsx b/src/pages/edit/SidePanel.tsx index 63b7411..20efd77 100644 --- a/src/pages/edit/SidePanel.tsx +++ b/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, }} />
{pin.name}
diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..9436309 --- /dev/null +++ b/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; +} diff --git a/src/style.ts b/src/style.ts new file mode 100644 index 0000000..c21e4c1 --- /dev/null +++ b/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", + }, +};