H-5768: Extract styles from all component files in Petrinaut

libs/@hashintel/petrinaut/src/components/menu.tsx

@@ -2,19 +2,6 @@ import { Menu as ArkMenu } from "@ark-ui/react";
 import { css } from "@hashintel/ds-helpers/css";
 import type { ReactNode } from "react";
 
-export interface MenuItem {
-  id: string;
-  label: string | ReactNode;
-  onClick?: () => void;
-  disabled?: boolean;
-  submenu?: MenuItem[];
-}
-
-export interface MenuProps {
-  trigger: ReactNode;
-  items: MenuItem[];
-}
-
 const menuContentStyle = css({
   background: "[white]",
   borderRadius: "[6px]",
@@ -52,6 +39,10 @@ const triggerItemStyle = css({
   },
 });
 
+const triggerItemArrowStyle = css({
+  marginLeft: "[8px]",
+});
+
 const itemStyle = css({
   fontSize: "size.textsm",
   cursor: "pointer",
@@ -67,6 +58,19 @@ const itemStyle = css({
   },
 });
 
+export interface MenuItem {
+  id: string;
+  label: string | ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  submenu?: MenuItem[];
+}
+
+export interface MenuProps {
+  trigger: ReactNode;
+  items: MenuItem[];
+}
+
 export const Menu: React.FC<MenuProps> = ({ trigger, items }) => {
   return (
     <ArkMenu.Root>
@@ -81,7 +85,7 @@ export const Menu: React.FC<MenuProps> = ({ trigger, items }) => {
               >
                 <ArkMenu.TriggerItem className={triggerItemStyle}>
                   {item.label}
-                  <span style={{ marginLeft: 8 }}>›</span>
+                  <span className={triggerItemArrowStyle}>›</span>
                 </ArkMenu.TriggerItem>
                 <ArkMenu.Positioner>
                   <ArkMenu.Content className={submenuContentStyle}>

libs/@hashintel/petrinaut/src/components/segment-group.tsx

@@ -1,5 +1,46 @@
 import { SegmentGroup as ArkSegmentGroup } from "@ark-ui/react/segment-group";
-import { css } from "@hashintel/ds-helpers/css";
+import { css, cva } from "@hashintel/ds-helpers/css";
+
+const containerStyle = css({
+  display: "flex",
+  backgroundColor: "core.gray.20",
+  borderRadius: "radius.8",
+  gap: "spacing.1",
+  position: "relative",
+  padding: "[4px]",
+});
+
+const indicatorStyle = css({
+  backgroundColor: "core.gray.90",
+  borderRadius: "radius.6",
+  position: "absolute",
+  transition: "[all 0.2s ease]",
+  width: "var(--width)",
+  height: "var(--height)",
+  left: "var(--left)",
+  top: "var(--top)",
+});
+
+const itemStyle = cva({
+  base: {
+    flex: "1",
+    fontSize: "[13px]",
+    fontWeight: 500,
+    textAlign: "center",
+    cursor: "pointer",
+    borderRadius: "radius.6",
+    transition: "[all 0.2s ease]",
+    position: "relative",
+    zIndex: 1,
+    padding: "[4px 6px]",
+  },
+  variants: {
+    isSelected: {
+      true: { color: "core.gray.10" },
+      false: { color: "core.gray.70" },
+    },
+  },
+});
 
 interface SegmentOption {
   value: string;
@@ -26,45 +67,13 @@ export const SegmentGroup: React.FC<SegmentGroupProps> = ({
         }
       }}
     >
-      <div
-        className={css({
-          display: "flex",
-          backgroundColor: "core.gray.20",
-          borderRadius: "radius.8",
-          gap: "spacing.1",
-          position: "relative",
-        })}
-        style={{ padding: 4 }}
-      >
-        <ArkSegmentGroup.Indicator
-          className={css({
-            backgroundColor: "core.gray.90",
-            borderRadius: "radius.6",
-            position: "absolute",
-            transition: "[all 0.2s ease]",
-            width: "var(--width)",
-            height: "var(--height)",
-            left: "var(--left)",
-            top: "var(--top)",
-          })}
-        />
+      <div className={containerStyle}>
+        <ArkSegmentGroup.Indicator className={indicatorStyle} />
         {options.map((option) => (
           <ArkSegmentGroup.Item
             key={option.value}
             value={option.value}
-            className={css({
-              flex: "1",
-              fontSize: "[13px]",
-              fontWeight: 500,
-              textAlign: "center",
-              cursor: "pointer",
-              borderRadius: "radius.6",
-              transition: "[all 0.2s ease]",
-              position: "relative",
-              zIndex: 1,
-              color: value === option.value ? "core.gray.10" : "core.gray.70",
-            })}
-            style={{ padding: "4px 6px" }}
+            className={itemStyle({ isSelected: value === option.value })}
           >
             <ArkSegmentGroup.ItemText>{option.label}</ArkSegmentGroup.ItemText>
             <ArkSegmentGroup.ItemControl />

libs/@hashintel/petrinaut/src/components/tooltip.tsx

@@ -4,6 +4,16 @@ import type { SvgIconProps } from "@mui/material";
 import { SvgIcon, Tooltip as MuiTooltip } from "@mui/material";
 import type { FunctionComponent, ReactNode } from "react";
 
+const tooltipContentStyle = css({
+  backgroundColor: "core.gray.90",
+  color: "core.gray.10",
+  borderRadius: "radius.6",
+  fontSize: "[13px]",
+  zIndex: "[10000]",
+  boxShadow: "[0 2px 8px rgba(0, 0, 0, 0.15)]",
+  padding: "[6px 10px]",
+});
+
 interface TooltipProps {
   content: string;
   children: ReactNode;
@@ -18,19 +28,7 @@ export const Tooltip: React.FC<TooltipProps> = ({ content, children }) => {
     >
       <ArkTooltip.Trigger asChild>{children}</ArkTooltip.Trigger>
       <ArkTooltip.Positioner>
-        <ArkTooltip.Content
-          className={css({
-            backgroundColor: "core.gray.90",
-            color: "core.gray.10",
-            borderRadius: "radius.6",
-            fontSize: "[13px]",
-            zIndex: "[10000]",
-            boxShadow: "[0 2px 8px rgba(0, 0, 0, 0.15)]",
-          })}
-          style={{
-            padding: "6px 10px",
-          }}
-        >
+        <ArkTooltip.Content className={tooltipContentStyle}>
           {content}
         </ArkTooltip.Content>
       </ArkTooltip.Positioner>

libs/@hashintel/petrinaut/src/views/Editor/components/BottomPanel/bottom-panel.tsx

@@ -13,6 +13,12 @@ import { DiagnosticsContent } from "./diagnostics-content";
 import { ParametersContent } from "./parameters-content";
 import { SimulationSettingsContent } from "./simulation-settings-content";
 
+const glassPanelBaseStyle = css({
+  position: "fixed",
+  zIndex: 999,
+  padding: "[4px]",
+});
+
 const panelContainerStyle = css({
   display: "flex",
   flexDirection: "column",
@@ -136,14 +142,12 @@ export const BottomPanel: React.FC = () => {
 
   return (
     <GlassPanel
+      className={glassPanelBaseStyle}
       style={{
-        position: "fixed",
         bottom: PANEL_MARGIN,
         left: leftOffset,
         right: PANEL_MARGIN,
         height: panelHeight,
-        zIndex: 999,
-        padding: 4,
       }}
       contentClassName={panelContainerStyle}
       resizable={{