ui/toolbar: use css modules

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.module.css

@@ -1,4 +1,4 @@
-div.toolbar {
+.toolbar {
   @apply flex flex-row items-center justify-center gap-1.5 p-1 size-fit rounded-md self-stretch;
 
   border: 0.0625rem solid theme(colors.off.toolbar_border);
@@ -13,7 +13,7 @@ div.toolbar {
   }
 }
 
-button.toolbar-button {
+.toolbar_button {
   @apply w-6 h-6 p-1 rounded-[0.25rem];
 
   &:hover {

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.stories.tsx

@@ -43,13 +43,8 @@ export const WithTooltip: Story = {
           trigger={<ToolbarButton name="select" icon="Cursor" />}
           placement="top"
         >
-          <div class="p-1 mb-1">
-            <Typography
-              hierarchy="label"
-              size="s"
-              color="inherit"
-              class="text-fg-inv-1"
-            >
+          <div class="p-1 mb-1 text-fg-inv-1">
+            <Typography hierarchy="label" size="s" color="inherit">
               Select an object
             </Typography>
           </div>
@@ -59,13 +54,8 @@ export const WithTooltip: Story = {
           trigger={<ToolbarButton name="new-machine" icon="NewMachine" />}
           placement="top"
         >
-          <div class="p-1 mb-1">
-            <Typography
-              hierarchy="label"
-              size="s"
-              color="inherit"
-              class="text-fg-inv-1"
-            >
+          <div class="p-1 mb-1 text-fg-inv-1">
+            <Typography hierarchy="label" size="s" color="inherit">
               Create a new machine
             </Typography>
           </div>
@@ -76,13 +66,8 @@ export const WithTooltip: Story = {
           }
           placement="top"
         >
-          <div class="p-1 mb-1">
-            <Typography
-              hierarchy="label"
-              size="s"
-              color="inherit"
-              class="text-fg-inv-1"
-            >
+          <div class="p-1 mb-1 text-fg-inv-1">
+            <Typography hierarchy="label" size="s" color="inherit">
               Manage Services
             </Typography>
           </div>
@@ -91,13 +76,8 @@ export const WithTooltip: Story = {
           trigger={<ToolbarButton name="ai" icon="AI" />}
           placement="top"
         >
-          <div class="p-1 mb-1">
-            <Typography
-              hierarchy="label"
-              size="s"
-              color="inherit"
-              class="text-fg-inv-1"
-            >
+          <div class="p-1 mb-1 text-fg-inv-1">
+            <Typography hierarchy="label" size="s" color="inherit">
               Chat with AI
             </Typography>
           </div>

pkgs/clan-app/ui/src/components/Toolbar/Toolbar.tsx

@@ -1,5 +1,5 @@
-import "./Toolbar.css";
 import { JSX } from "solid-js";
+import styles from "./Toolbar.module.css";
 
 export interface ToolbarProps {
   children: JSX.Element;
@@ -7,7 +7,7 @@ export interface ToolbarProps {
 
 export const Toolbar = (props: ToolbarProps) => {
   return (
-    <div class="toolbar" role="toolbar" aria-orientation="horizontal">
+    <div class={styles.toolbar} role="toolbar" aria-orientation="horizontal">
       {props.children}
     </div>
   );

pkgs/clan-app/ui/src/components/Toolbar/ToolbarButton.tsx

@@ -1,4 +1,4 @@
-import "./Toolbar.css";
+import styles from "./Toolbar.module.css";
 import cx from "classnames";
 import { Button } from "@kobalte/core/button";
 import Icon, { IconVariant } from "@/src/components/Icon/Icon";
@@ -13,7 +13,7 @@ export interface ToolbarButtonProps
 export const ToolbarButton = (props: ToolbarButtonProps) => {
   return (
     <Button
-      class={cx("toolbar-button", { selected: props.selected })}
+      class={cx(styles.toolbar_button, { selected: props.selected })}
       {...props}
     >
       <Icon icon={props.icon} inverted={!props.selected} />