[console] - adjusted setpoint styling

console/src/main.tsx

@@ -9,8 +9,8 @@
 
 import "@/index.css";
 import "@synnaxlabs/media/dist/style.css";
-import "@synnaxlabs/pluto/dist/style.css";
 
+// import "@synnaxlabs/pluto/dist/style.css";
 import { Provider } from "@synnaxlabs/drift/react";
 import { type Haul, Pluto, type state, type Triggers } from "@synnaxlabs/pluto";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

pluto/src/button/Button.css

@@ -134,6 +134,21 @@
     background: var(--pluto-bg);
     border: var(--pluto-border-width) solid var(--pluto-gray-l4);
 
+    &.pluto-btn--custom-color {
+        --pluto-bg: rgba(var(--pluto-btn-color), 1);
+        border-color: var(--pluto-bg) !important;
+
+        &:hover:not(.pluto--disabled) {
+            --pluto-bg: rgba(var(--pluto-btn-color), 0.75);
+            border-color: var(--pluto-bg) !important;
+        }
+
+        &:active:not(.pluto--disabled) {
+            --pluto-bg: rgba(var(--pluto-btn-color), 1);
+            border-color: var(--pluto-bg) !important;
+        }
+    }
+
     &.pluto--warning {
         border-color: var(--pluto-warning-z) !important;
         color: var(--pluto-warning-z);

pluto/src/button/Button.tsx

@@ -131,7 +131,8 @@ export const Button = Tooltip.wrap(
 
     const pStyle = { ...style };
     const res = Color.Color.z.safeParse(color);
-    const hasCustomColor = res.success && variant === "filled";
+    const hasCustomColor =
+      res.success && (variant === "filled" || variant === "outlined");
     if (hasCustomColor) {
       // @ts-expect-error - css variable
       pStyle[CSS.var("btn-color")] = res.data.rgbString;
@@ -146,8 +147,6 @@ export const Button = Tooltip.wrap(
     else if (size != null && level == null) level = Text.ComponentSizeLevels[size];
     else if (size == null) size = "medium";
 
-    console.log(className, endContent, endContent != null);
-
     return (
       <Text.WithIcon<"button", any>
         el="button"

pluto/src/input/Input.css

@@ -64,7 +64,7 @@
     }
 
     & > .pluto-input__internal:focus-within {
-        border-color: var(--pluto-primary-z) !important;
+        border-color: var(--pluto-input-color, var(--pluto-primary-z)) !important;
         & input {
             outline: none;
         }

pluto/src/input/Numeric.tsx

@@ -18,7 +18,7 @@ import { type BaseProps } from "@/input/types";
 import { Triggers } from "@/triggers";
 
 export interface NumericProps
-  extends Omit<BaseProps<number>, "type" | "onBlur">,
+  extends Omit<BaseProps<number>, "type" | "onBlur" | "color">,
     DragButtonExtraProps,
     TextExtraProps {
   selectOnFocus?: boolean;
@@ -38,7 +38,7 @@ export interface NumericProps
  * @param props.size - The size of the input: "small" | "medium" | "large".
  * @default "medium"
  * @param props.selectOnFocus - Whether the input should select its contents when focused.
- * @defaul true
+ * @default true
  * @param props.centerPlaceholder - Whether the placeholder should be centered.
  * @default false
  * @param props.showDragHandle - Whether or not to show a drag handle to set the time.

pluto/src/input/Text.tsx

@@ -12,6 +12,7 @@ import "@/input/Input.css";
 import { forwardRef, useRef, useState } from "react";
 
 import { Align } from "@/align";
+import { Color } from "@/color";
 import { CSS } from "@/css";
 import { useCombinedRefs } from "@/hooks";
 import { type BaseProps } from "@/input/types";
@@ -24,9 +25,10 @@ export interface TextExtraProps {
   resetOnBlurIfEmpty?: boolean;
   status?: Status.Variant;
   onlyChangeOnBlur?: boolean;
+  color?: Color.Crude;
 }
 
-export interface TextProps extends BaseProps<string>, TextExtraProps {}
+export interface TextProps extends Omit<BaseProps<string>, "color">, TextExtraProps {}
 
 /**
  * A controlled string input component.
@@ -114,6 +116,8 @@ export const Text = forwardRef<HTMLInputElement, TextProps>(
 
     const disabledCSS = disabled && CSS.BM("input", "disabled");
     if (variant === "preview") disabled = true;
+    if (color != null)
+      style = { ...style, [CSS.var("input-color")]: Color.cssString(color) };
 
     const showPlaceholder = (value == null || value.length === 0) && tempValue == null;
 
@@ -171,7 +175,7 @@ export const Text = forwardRef<HTMLInputElement, TextProps>(
             className={CSS(CSS.visible(false), level != null && CSS.BM("text", level))}
             disabled={disabled}
             placeholder={typeof placeholder === "string" ? placeholder : undefined}
-            style={{ fontWeight: weight, color }}
+            style={{ fontWeight: weight }}
             {...props}
           />
         </div>

pluto/src/vis/diagram/Diagram.tsx

@@ -249,7 +249,7 @@ const Core = Aether.wrap<DiagramProps>(
     const resizeRef = Canvas.useRegion(
       useCallback(
         (b) => {
-          debouncedFitView({ maxZoom: 1 });
+          if (fitViewOnResize) debouncedFitView({ maxZoom: 1 });
           setState((prev) => ({ ...prev, region: b }));
         },
         [setState, debouncedFitView, fitViewOnResize],

pluto/src/vis/schematic/Forms.tsx

@@ -82,7 +82,7 @@ const OrientationControl = ({
 );
 
 const LabelControls = ({ path }: { path: string }): ReactElement => (
-  <Align.Space direction="x" align="stretch">
+  <Align.Space direction="x" align="stretch" grow>
     <Form.Field<string> path={path + ".label"} label="Label" padHelpText={false} grow>
       {(p) => <Input.Text selectOnFocus {...p} />}
     </Form.Field>
@@ -750,19 +750,15 @@ export const SetpointForm = (): ReactElement => {
       default:
         return (
           <FormWrapper direction="x" align="stretch">
-            <Align.Space direction="y" grow>
-              <Align.Space direction="x" align="stretch">
-                <LabelControls path="label" />
-                <Form.Field<string>
-                  path="units"
-                  label="Units"
-                  align="start"
-                  padHelpText={false}
-                >
-                  {(p) => <Input.Text {...p} />}
-                </Form.Field>
-                <ColorControl path="color" />
-              </Align.Space>
+            <Align.Space direction="x" align="stretch" grow>
+              <LabelControls path="label" />
+              <Form.TextField
+                path="units"
+                label="Units"
+                align="start"
+                padHelpText={false}
+              />
+              <ColorControl path="color" />
             </Align.Space>
             <OrientationControl path="" />
           </FormWrapper>

pluto/src/vis/schematic/primitives/Primitives.css

@@ -179,9 +179,6 @@
     .pluto-btn {
         background: var(--pluto-gray-l2) !important;
     }
-    .pluto-input__internal:not(:active):not(:focus-within) {
-        border-right: none !important;
-    }
     .pluto-units {
         padding: 0 1rem;
     }

pluto/src/vis/schematic/primitives/Primitives.tsx

@@ -1217,13 +1217,14 @@ export const Setpoint = ({
         showDragHandle={false}
         selectOnFocus
         endContent={units}
+        color={color}
         style={{ [CSS.var("pack-border-shade")]: Color.cssString(color) }}
       >
         <CoreButton.Button
           variant="outlined"
           size="small"
           onClick={() => onChange(currValue)}
-          color={Color.cssString(color)}
+          color={color}
         >
           Set
         </CoreButton.Button>

pluto/src/vis/schematic/registry.ts

@@ -702,7 +702,7 @@ const setpoint: Spec<SetpointProps> = {
   Form: SetpointForm,
   defaultProps: (t) => ({
     units: "mV",
-    color: t.colors.gray.l9.rgba255,
+    color: t.colors.gray.l4.rgba255,
     ...zeroLabel("Setpoint"),
     ...ZERO_NUMERIC_SOURCE_PROPS,
     ...ZERO_NUMERIC_SINK_PROPS,
@@ -824,7 +824,7 @@ const textBox: Spec<TextBoxProps> = {
     width: 75,
   }),
   Preview: TextBoxPreview,
-  zIndex: Z_INDEX_LOWER,
+  zIndex: Z_INDEX_UPPER,
 };
 
 const offPageReference: Spec<ArrowProps> = {