FE-1048: Petrinaut use ds toggle (#8891)

Author: alex-e-leon

libs/@hashintel/ds-components/src/components/Switch/switch.tsx

@@ -22,11 +22,10 @@ export const styles = sva({
       flexShrink: "0",
       width: "var(--toggle-width)",
       height: "var(--toggle-height)",
-      padding: "var(--toggle-padding)",
+      padding: "[calc(var(--toggle-padding) + 1px)]",
       borderRadius: "full",
-      border: "[1px solid]",
-      borderColor: "black.a15",
-      boxShadow: "[inset 0 2px 4px rgba(0, 0, 0, 0.05)]",
+      boxShadow:
+        "[inset 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 0 0 1px var(--colors-black-a10)]",
       outlineColor: "black.a40",
       transition:
         "[background-color 0.15s ease, outline 0.15s ease, box-shadow 0.15s ease]",
@@ -87,7 +86,11 @@ export const styles = sva({
           "--toggle-width": "[24px]",
           "--toggle-height": "[14px]",
           "--toggle-padding": "[2px]",
-          "--toggle-thumb-size": "[10px]",
+          "--toggle-thumb-size": "[9px]",
+        },
+        thumb: {
+          boxShadow:
+            "[0 0.5px 2.5px 0 rgba(0, 0, 0, 0.1), 0 0.5px 1.5px -1px rgba(0, 0, 0, 0.1)]",
         },
         label: { fontSize: "[12px]" },
       },
@@ -96,9 +99,13 @@ export const styles = sva({
           "--toggle-width": "[28px]",
           "--toggle-height": "[16px]",
           "--toggle-padding": "[2px]",
-          "--toggle-thumb-size": "[12px]",
+          "--toggle-thumb-size": "[11px]",
         },
         label: { fontSize: "[12px]" },
+        thumb: {
+          boxShadow:
+            "[0 0.5px 2.5px 0 rgba(0, 0, 0, 0.1), 0 0.5px 1.5px -1px rgba(0, 0, 0, 0.1)]",
+        },
       },
       sm: {
         control: {
@@ -200,7 +207,8 @@ export const styles = sva({
     invalid: {
       true: {
         control: {
-          borderColor: "red.s70",
+          boxShadow:
+            "[0 0 0 1px var(--colors-red-s70), inset 0 2px 4px rgba(0, 0, 0, 0.05)]",
           "&::after": {
             content: '""',
             position: "absolute",

libs/@hashintel/ds-components/src/components/Toggle/toggle.recipe.ts

@@ -32,7 +32,6 @@ export {
   type SelectProps,
 } from "./components/Select/select";
 export { Slider, type SliderProps } from "./components/Slider/slider";
-export { Switch, type SwitchProps } from "./components/Switch/switch";
 export { TextInput } from "./components/TextInput/text-input";
 export { TextMark } from "./components/TextMark/text-mark";
 export { Toggle, type ToggleProps } from "./components/Toggle/toggle";

libs/@hashintel/ds-components/src/main.ts

@@ -1,14 +1,19 @@
 import { use, useState } from "react";
 
-import { Button, Icon, NumberInput, Select } from "@hashintel/ds-components";
+import {
+  Button,
+  Icon,
+  NumberInput,
+  Select,
+  Toggle,
+} from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
 
 import { SimulationContext } from "../../../../../../react/simulation/context";
 import { EditorContext } from "../../../../../../react/state/editor-context";
 import { SDCPNContext } from "../../../../../../react/state/sdcpn-context";
 import { InfoIconTooltip } from "../../../../../components/info-icon-tooltip";
 import { Slider } from "../../../../../components/slider";
-import { Switch } from "../../../../../components/switch";
 import { CreateScenarioDrawer } from "../../SimulateView/scenarios/create-scenario-drawer";
 import { ViewScenarioDrawer } from "../../SimulateView/scenarios/view-scenario-drawer";
 
@@ -303,12 +308,13 @@ const SimulationSettingsContent: React.FC = () => {
                     </div>
                   </div>
                   {param.type === "boolean" && selectedScenario ? (
-                    <Switch
-                      checked={
+                    <Toggle
+                      size="xs"
+                      value={
                         (scenarioParameterValues[param.variableName] ??
                           param.defaultValue) !== "0"
                       }
-                      onCheckedChange={(checked) =>
+                      onChange={(checked) =>
                         setScenarioParameterValue(
                           param.variableName,
                           checked ? "1" : "0",

libs/@hashintel/petrinaut/src/ui/components/switch.tsx

@@ -6,6 +6,7 @@ import {
   Icon,
   Select,
   TextInput,
+  Toggle,
   Tooltip,
 } from "@hashintel/ds-components";
 import { css } from "@hashintel/ds-helpers/css";
@@ -15,7 +16,6 @@ import { usePetrinautMutations } from "../../../../../../../react";
 import { EditorContext } from "../../../../../../../react/state/editor-context";
 import { SDCPNContext } from "../../../../../../../react/state/sdcpn-context";
 import { Section, SectionList } from "../../../../../../components/section";
-import { Switch } from "../../../../../../components/switch";
 import { PlaceIcon } from "../../../../../../constants/entity-icons";
 import { UI_MESSAGES } from "../../../../../../constants/ui-messages";
 import { useDraftField } from "../../../../../../hooks/use-draft-field";
@@ -233,46 +233,55 @@ const PlaceMainContent: React.FC = () => {
           <Section
             title="Dynamics"
             tooltip="Token data can dynamically change over time when tokens remain in a place, governed by a differential equation."
-            renderHeaderAction={() => (
-              <Switch
-                checked={!!place.colorId && place.dynamicsEnabled}
-                disabled={
-                  isReadOnly ||
-                  place.colorId === null ||
-                  availableDiffEqs.length === 0
-                }
-                tooltip={
-                  isReadOnly
-                    ? UI_MESSAGES.READ_ONLY_MODE
-                    : place.colorId === null
-                      ? UI_MESSAGES.DYNAMICS_REQUIRES_TYPE
-                      : availableDiffEqs.length === 0
-                        ? "Create a differential equation for this type first"
-                        : undefined
-                }
-                onCheckedChange={(checked) => {
-                  const update: {
-                    dynamicsEnabled: boolean;
-                    differentialEquationId?: string | null;
-                  } = { dynamicsEnabled: checked };
+            renderHeaderAction={() => {
+              const dynamicsTooltip = isReadOnly
+                ? UI_MESSAGES.READ_ONLY_MODE
+                : place.colorId === null
+                  ? UI_MESSAGES.DYNAMICS_REQUIRES_TYPE
+                  : availableDiffEqs.length === 0
+                    ? "Create a differential equation for this type first"
+                    : undefined;
 
-                  if (checked) {
-                    // Auto-select first available diff eq if none selected or previous no longer exists
-                    const currentIsValid = availableDiffEqs.some(
-                      (eq) => eq.id === place.differentialEquationId,
-                    );
-                    if (!currentIsValid && availableDiffEqs.length > 0) {
-                      update.differentialEquationId = availableDiffEqs[0]!.id;
+              return (
+                <Tooltip
+                  content={dynamicsTooltip}
+                  disableTooltip={!dynamicsTooltip}
+                >
+                  <Toggle
+                    size="sm"
+                    tone="success"
+                    value={!!place.colorId && place.dynamicsEnabled}
+                    disabled={
+                      isReadOnly ||
+                      place.colorId === null ||
+                      availableDiffEqs.length === 0
                     }
-                  }
+                    onChange={(checked) => {
+                      const update: {
+                        dynamicsEnabled: boolean;
+                        differentialEquationId?: string | null;
+                      } = { dynamicsEnabled: checked };
 
-                  updatePlace({
-                    placeId: place.id,
-                    update,
-                  });
-                }}
-              />
-            )}
+                      if (checked) {
+                        // Auto-select first available diff eq if none selected or previous no longer exists
+                        const currentIsValid = availableDiffEqs.some(
+                          (eq) => eq.id === place.differentialEquationId,
+                        );
+                        if (!currentIsValid && availableDiffEqs.length > 0) {
+                          update.differentialEquationId =
+                            availableDiffEqs[0]!.id;
+                        }
+                      }
+
+                      updatePlace({
+                        placeId: place.id,
+                        update,
+                      });
+                    }}
+                  />
+                </Tooltip>
+              );
+            }}
           >
             {place.colorId === null ? (
               <div className={hintTextStyle}>