From 2a46c7ce0c7706135d965625a68b806a6df60a03 Mon Sep 17 00:00:00 2001
From: Uday Nair <138768433+UdayHyma@users.noreply.github.com>
Date: Tue, 7 Jan 2025 18:34:45 +0530
Subject: [PATCH 1/2] migrate rail component styles to use utils

- Create rail.module.css for component-specific styles
- Add data-appearance and data-emphasis attributes
---
 packages/ui/src/components/rail.module.css |  4 ++++
 packages/ui/src/components/rail.tsx        | 14 +++++---------
 2 files changed, 9 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/src/components/rail.module.css

diff --git a/packages/ui/src/components/rail.module.css b/packages/ui/src/components/rail.module.css
new file mode 100644
index 00000000..4f7ca0de
--- /dev/null
+++ b/packages/ui/src/components/rail.module.css
@@ -0,0 +1,4 @@
+.stack {
+    padding: var(--component-spacing-md);
+    border-radius: var(--component-radii-md);
+  }
\ No newline at end of file
diff --git a/packages/ui/src/components/rail.tsx b/packages/ui/src/components/rail.tsx
index 61183db0..fa54da77 100644
--- a/packages/ui/src/components/rail.tsx
+++ b/packages/ui/src/components/rail.tsx
@@ -17,7 +17,8 @@ import Settings from '@tokens-studio/icons/Settings.js';
 import ShoppingBag from '@tokens-studio/icons/ShoppingBag.js';
 import SunLight from '@tokens-studio/icons/SunLight.js';
 import TokensStudio from '@/assets/svgs/tokensstudio-logo.svg';
-
+import clsx from 'clsx';
+import styles from './rail.module.css';
 interface RailItem {
 	icon: React.ReactNode;
 	label: string;
@@ -101,14 +102,9 @@ export const Rail = () => {
 		<Stack
 			justify='between'
 			direction='column'
-			style={{
-				background: 'var(--color-neutral-canvas-minimal-bg)',
-				borderRight: '1px solid var(--color-neutral-stroke-default)',
-				color: 'var(--color-neutral-canvas-minimal-fg-default)',
-				height: '100%',
-				padding:
-					'var(--component-spacing-xl) var(--component-spacing-md) var(--component-spacing-md)'
-			}}
+			className={clsx(styles.rail, 'ts-canvas')}
+			data-appearance='neutral'
+			data-emphasis='minimal'
 		>
 			<Stack gap={3} direction='column' align='center'>
 				<Tooltip label={'Tokens Studio'}>

From e82d28f5c405e964147c0d25c721370443c12ed4 Mon Sep 17 00:00:00 2001
From: Uday Nair <138768433+UdayHyma@users.noreply.github.com>
Date: Tue, 7 Jan 2025 19:12:22 +0530
Subject: [PATCH 2/2] changes

Added the correct css properties to the modules file
---
 packages/ui/src/components/rail.module.css | 7 +++++--
 packages/ui/src/components/rail.tsx        | 4 +++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/rail.module.css b/packages/ui/src/components/rail.module.css
index 4f7ca0de..61fef272 100644
--- a/packages/ui/src/components/rail.module.css
+++ b/packages/ui/src/components/rail.module.css
@@ -1,4 +1,7 @@
 .stack {
-    padding: var(--component-spacing-md);
-    border-radius: var(--component-radii-md);
+  background: var(--color-neutral-canvas-minimal-bg);
+  border-right: 1px solid var(--color-neutral-stroke-default);
+  color: var(--color-neutral-canvas-minimal-fg-default);
+  height: 100%;
+  padding: var(--component-spacing-xl) var(--component-spacing-md) var(--component-spacing-md);
   }
\ No newline at end of file
diff --git a/packages/ui/src/components/rail.tsx b/packages/ui/src/components/rail.tsx
index fa54da77..810e2480 100644
--- a/packages/ui/src/components/rail.tsx
+++ b/packages/ui/src/components/rail.tsx
@@ -19,6 +19,7 @@ import SunLight from '@tokens-studio/icons/SunLight.js';
 import TokensStudio from '@/assets/svgs/tokensstudio-logo.svg';
 import clsx from 'clsx';
 import styles from './rail.module.css';
+
 interface RailItem {
 	icon: React.ReactNode;
 	label: string;
@@ -102,9 +103,10 @@ export const Rail = () => {
 		<Stack
 			justify='between'
 			direction='column'
-			className={clsx(styles.rail, 'ts-canvas')}
+			className={clsx(styles.stack, 'ts-canvas')}
 			data-appearance='neutral'
 			data-emphasis='minimal'
+
 		>
 			<Stack gap={3} direction='column' align='center'>
 				<Tooltip label={'Tokens Studio'}>