fix: restore translucent dashboard styling (#6664)

* fix: restore translucent dashboard styling

* fix: restore dashboard widget transparency

* fix: address dashboard review feedback

* fix: apply board opacity to containers

* fix: flatten demo board container

* fix: default board roundness to sm

* fix: restore assistant widget transparency

* Revert "fix: default board roundness to sm"

This reverts commit c235cbdf2b.

* fix: address remaining dashboard review comments

* test: align grid geometry expectations

packages/widgets/src/firewall/component.tsx

@@ -27,6 +27,7 @@ import type { WidgetComponentProps } from "../definition";
 import { calculateBandwidth, formatBitsPerSec } from "./bandwidth";
 import { FirewallMenu } from "./firewall-menu";
 import { FirewallVersion, formatVersion } from "./firewall-version";
+import classes from "./firewall.module.css";
 
 export interface Firewall {
   label: string;
@@ -243,7 +244,7 @@ const FirewallPanel = ({
   t,
   tCommon,
 }: FirewallPanelProps) => (
-  <Paper withBorder={isAdvanced} radius="sm" p={isAdvanced ? "xs" : 0}>
+  <Paper className={classes.card} withBorder={isAdvanced} radius="sm" p={isAdvanced ? "xs" : 0} bg="transparent">
     <Stack gap="xs">
       {isAdvanced && (
         <Group justify="space-between" wrap="nowrap">
@@ -382,6 +383,7 @@ const InterfacesPanel = ({
       value={isAdvanced ? "interfaces" : accordionValue}
       onChange={isAdvanced ? undefined : setAccordionValue}
       variant={isAdvanced ? "contained" : "default"}
+      classNames={{ item: classes.accordionItem, control: classes.accordionControl }}
     >
       <Accordion.Item value="interfaces">
         <Accordion.Control icon={<IconTopologyBus size="var(--mantine-font-size-md)" />}>

packages/widgets/src/firewall/firewall-menu.tsx

@@ -1,6 +1,7 @@
 import { Box, Select } from "@mantine/core";
 
 import type { Firewall } from "./component";
+import classes from "./firewall.module.css";
 
 interface FirewallMenuProps {
   onChange: (value: string | null) => void;
@@ -18,6 +19,7 @@ export const FirewallMenu = ({ onChange, isTiny, dropdownItems, selectedFirewall
       w="100%"
       color="lightgray"
       data={dropdownItems}
+      classNames={{ input: classes.selectInput }}
       styles={{
         input: {
           minHeight: "24px",

packages/widgets/src/firewall/firewall.module.css

@@ -1,7 +1,33 @@
-[data-mantine-color-scheme="light"] .card {
-  background-color: var(--mantine-color-gray-1);
+.card {
+  background-color: transparent;
+  border-color: rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45));
 }
 
-[data-mantine-color-scheme="dark"] .card {
-  background-color: var(--mantine-color-dark-7);
+.accordionItem {
+  border-color: rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45));
+  background-color: transparent;
+}
+
+.accordionItem[data-active] {
+  background-color: transparent;
+}
+
+.accordionControl {
+  background-color: transparent;
+}
+
+.accordionControl:hover,
+.accordionControl:focus-visible,
+.accordionControl:active {
+  background-color: rgb(from var(--mantine-color-default-hover) r g b / calc(var(--opacity, 1) * 0.4));
+}
+
+.selectInput {
+  background-color: transparent;
+  border-color: rgb(from var(--mantine-color-default-border) r g b / calc(var(--opacity, 1) * 0.45));
+}
+
+.selectInput:focus,
+.selectInput:focus-within {
+  border-color: var(--mantine-primary-color-filled);
 }