chore; initial dial styling

zmann-org · Jan 7, 2024 · 9811a17 · 9811a17
1 parent d747e31
commit 9811a17
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/toybox_c1200_ui/lib/Knob.tsx b/packages/toybox_c1200_ui/lib/Knob.tsx
@@ -3,13 +3,15 @@ import { useState } from "react";
 import { KnobHeadless } from "react-knob-headless";
 import { mapTo01Linear } from "@dsp-ts/math";
 import { KnobBaseThumb } from "./KnobBaseThumb";
+import useTheme from "@himalaya-ui/core/esm/use-theme";
 
 type KnobBaseThumbProps = React.ComponentProps<typeof KnobBaseThumb>;
 type KnobDecorativeProps = Pick<KnobBaseThumbProps, "value01"> & {
   readonly valueDefault: number;
 };
 
 export function KnobDecorative({ valueDefault }: KnobDecorativeProps) {
+  const theme = useTheme();
   const [valueRaw, setValueRaw] = useState<number>(valueDefault);
   const value01 = mapTo01Linear(valueRaw, valueMin, valueMax);
   return (
@@ -20,6 +22,14 @@ export function KnobDecorative({ valueDefault }: KnobDecorativeProps) {
         width: "4rem",
         height: "4rem",
         position: "relative",
+        background:
+          "linear-gradient(white, white) padding-box, linear-gradient(to bottom," +
+          theme.palette.accents_5 +
+          "B5," +
+          theme.palette.background +
+          ") border-box",
+        borderRadius: "56em",
+        border: "3px solid transparent",
       }}
       aria-label={""}
       valueMin={valueMin}

diff --git a/packages/toybox_c1200_ui/lib/KnobBaseThumb.tsx b/packages/toybox_c1200_ui/lib/KnobBaseThumb.tsx
@@ -10,14 +10,16 @@ export function KnobBaseThumb({ value01 }: KnobBaseThumbProps) {
   const angleMin = -145;
   const angleMax = 145;
   const angle = mapFrom01Linear(value01, angleMin, angleMax);
+
   return (
     <div
       style={{
         borderRadius: 9999,
         width: "100%",
         height: "100%",
         position: "absolute",
-        backgroundColor: UItheme.palette.accents_2,
+        filter: "drop-shadow(0px 0px 5px " + UItheme.palette.background + ")",
+        background: "linear-gradient(to bottom, "+UItheme.palette.accents_2+", #2f2f2f)",
       }}
     >
       <div
@@ -30,12 +32,13 @@ export function KnobBaseThumb({ value01 }: KnobBaseThumbProps) {
       >
         <div
           style={{
+            marginTop: 4,
             borderRadius: "0.125rem",
-            width: 2,
-            height: "50%",
+            width: 4,
+            height: "40%",
             top: 0,
             left: "50%",
-            backgroundColor: UItheme.palette.accents_0,
+            backgroundColor: UItheme.palette.primary.value,
             position: "absolute",
             transform:
               "translateX(-50%) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1)",