chore: move inline styles into SCSS modules

Author: aaronbassett

packages/component-library/src/EntityList/index.stories.module.scss

@@ -0,0 +1,11 @@
+@use "../theme";
+
+.metricsContainer {
+  display: flex;
+  gap: theme.spacing(2);
+}
+
+.actionsContainer {
+  display: flex;
+  gap: theme.spacing(2);
+}

packages/component-library/src/EntityList/index.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { Badge } from "../Badge/index.jsx";
 import { EntityList as EntityListComponent } from "./index.jsx";
+import styles from "./index.stories.module.scss";
 
 const meta = {
   component: EntityListComponent,
@@ -196,13 +197,13 @@ export const ComplexContent: Story = {
         data: {
           project: <strong>Project Alpha</strong>,
           metrics: (
-            <div style={{ display: "flex", gap: "8px" }}>
+            <div className={styles.metricsContainer}>
               <Badge variant="neutral">10 feeds</Badge>
               <Badge variant="success">98% uptime</Badge>
             </div>
           ),
           actions: (
-            <div style={{ display: "flex", gap: "8px" }}>
+            <div className={styles.actionsContainer}>
               <button>Edit</button>
               <button>Delete</button>
             </div>
@@ -215,13 +216,13 @@ export const ComplexContent: Story = {
         data: {
           project: <strong>Project Beta</strong>,
           metrics: (
-            <div style={{ display: "flex", gap: "8px" }}>
+            <div className={styles.metricsContainer}>
               <Badge variant="neutral">5 feeds</Badge>
               <Badge variant="warning">92% uptime</Badge>
             </div>
           ),
           actions: (
-            <div style={{ display: "flex", gap: "8px" }}>
+            <div className={styles.actionsContainer}>
               <button>Edit</button>
               <button>Delete</button>
             </div>

packages/component-library/src/Meter/index.stories.module.scss

@@ -0,0 +1,17 @@
+@use "../theme";
+
+.performanceContainer {
+  display: flex;
+  flex-direction: column;
+  gap: theme.spacing(6);
+}
+
+.performanceSection {
+  > h3 {
+    margin: 0;
+    margin-bottom: theme.spacing(2);
+    font-size: theme.font-size("lg");
+    font-weight: 600;
+    color: theme.color("heading");
+  }
+}

packages/component-library/src/Meter/index.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Meter as MeterComponent } from "./index.jsx";
+import styles from "./index.stories.module.scss";
 
 const meta = {
   component: MeterComponent,
@@ -159,9 +160,9 @@ export const BatteryLevel: Story = {
 
 export const PerformanceScore: Story = {
   render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
-      <div>
-        <h3 style={{ marginBottom: "8px" }}>CPU Usage</h3>
+    <div className={styles.performanceContainer}>
+      <div className={styles.performanceSection}>
+        <h3>CPU Usage</h3>
         <MeterComponent
           label="CPU usage"
           value={45}
@@ -171,8 +172,8 @@ export const PerformanceScore: Story = {
           endLabel="100%"
         />
       </div>
-      <div>
-        <h3 style={{ marginBottom: "8px" }}>Memory Usage</h3>
+      <div className={styles.performanceSection}>
+        <h3>Memory Usage</h3>
         <MeterComponent
           label="Memory usage"
           value={78}
@@ -183,8 +184,8 @@ export const PerformanceScore: Story = {
           variant="error"
         />
       </div>
-      <div>
-        <h3 style={{ marginBottom: "8px" }}>Disk Usage</h3>
+      <div className={styles.performanceSection}>
+        <h3>Disk Usage</h3>
         <MeterComponent
           label="Disk usage"
           value={30}