fix: toggle group segment design (#20549)

* add toggle state correctly

* fix height

---------

Co-authored-by: Sean Brydon <sean@Seans-Mac-mini.local>

apps/ui-playground/tailwind.config.js

@@ -13,6 +13,7 @@ export default {
     "./node_modules/fumadocs-ui/dist/**/*.js",
     "../../internal/ui/src/**/*.tsx",
     "../../internal/icons/src/**/*.tsx",
+    "../../packages/ui/components/**/*.{ts,tsx}",
   ],
   plugins: [...base.plugins],
   theme: base.theme,

packages/ui/components/form/toggleGroup/ToggleGroup.tsx

@@ -49,9 +49,14 @@ export const ToggleGroup = ({
         {...props}
         orientation={orientation}
         onValueChange={onValueChange}
+        style={{
+          // @ts-expect-error --toggle-group-shadow is not a valid CSS property but can be a variable
+          "--toggle-group-shadow":
+            "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)",
+        }}
         className={classNames(
-          `border-default bg-default relative rounded-md border p-1`,
-          orientation === "horizontal" && "min-h-9 inline-flex gap-0.5 rtl:flex-row-reverse",
+          `bg-subtle border-subtle rounded-[10px] border p-0.5`,
+          orientation === "horizontal" && "inline-flex gap-0.5 rtl:flex-row-reverse",
           orientation === "vertical" && "flex w-fit flex-col gap-0.5",
           props.className,
           isFullWidth && "w-full",
@@ -64,7 +69,7 @@ export const ToggleGroup = ({
               value={option.value}
               data-testid={`toggle-group-item-${option.value}`}
               className={classNames(
-                "aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition",
+                "aria-checked:bg-default aria-checked:border-subtle rounded-lg border border-transparent p-1.5 text-sm leading-none transition aria-checked:shadow-[0px_2px_3px_0px_rgba(0,0,0,0.03),0px_2px_2px_-1px_rgba(0,0,0,0.03)]",
                 option.disabled
                   ? "text-gray-400 hover:cursor-not-allowed"
                   : "text-default [&[aria-checked='false']]:hover:text-emphasis",