From 4f861bcc17e17ca9dafa005ce4b2c411d0323283 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 23 Dec 2025 05:28:52 +0530
Subject: [PATCH 1/2] feat: component improvements

---
 .../www/src/components/demo/styles.module.css |  4 ++-
 apps/www/src/styles.css                       | 14 ++++++++---
 .../components/callout/callout.module.css     | 25 ++++++++++---------
 .../raystack/components/chip/chip.module.css  |  4 +--
 .../components/dialog/dialog.module.css       |  2 +-
 .../dropdown-menu/dropdown-menu.module.css    |  2 +-
 .../input-field/input-field.module.css        | 13 ----------
 .../raystack/components/list/list.module.css  |  3 +--
 .../components/navbar/navbar-sections.tsx     |  4 +--
 .../components/navbar/navbar.module.css       |  2 +-
 .../components/search/search.module.css       |  5 +++-
 .../components/select/select.module.css       |  5 ++--
 .../components/spinner/spinner.module.css     | 10 ++++----
 .../raystack/components/tabs/tabs.module.css  |  2 +-
 .../components/text-area/text-area.module.css |  3 ---
 .../components/toast/toast.module.css         |  6 -----
 packages/raystack/components/toast/toast.tsx  | 11 +++++++-
 17 files changed, 57 insertions(+), 58 deletions(-)

diff --git a/apps/www/src/components/demo/styles.module.css b/apps/www/src/components/demo/styles.module.css
index 03679d185..7e0948ade 100644
--- a/apps/www/src/components/demo/styles.module.css
+++ b/apps/www/src/components/demo/styles.module.css
@@ -116,7 +116,9 @@
   padding: var(--rs-space-3) var(--rs-space-4);
   cursor: pointer;
   color: var(--rs-color-foreground-base-secondary);
-  transition: color 0.2s ease-in-out, border-bottom 0.2s ease-in-out;
+  transition:
+    color 0.2s ease-in-out,
+    border-bottom 0.2s ease-in-out;
   border-bottom: 0.5px solid transparent;
   font-size: var(--rs-font-size-small);
   letter-spacing: var(--rs-letter-spacing-small);
diff --git a/apps/www/src/styles.css b/apps/www/src/styles.css
index 690da1187..68914c329 100644
--- a/apps/www/src/styles.css
+++ b/apps/www/src/styles.css
@@ -15,13 +15,21 @@ div.prose > table td code {
   word-break: break-word;
 }
 
-audio,canvas,embed,iframe,img,object,svg,video {
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
   display: block;
 }
 
-img,video {
+img,
+video {
   max-width: 100%;
-  height: auto
+  height: auto;
 }
 a {
   text-decoration: none;
diff --git a/packages/raystack/components/callout/callout.module.css b/packages/raystack/components/callout/callout.module.css
index c447bef7e..be770f299 100644
--- a/packages/raystack/components/callout/callout.module.css
+++ b/packages/raystack/components/callout/callout.module.css
@@ -8,6 +8,7 @@
   font-size: var(--rs-font-size-small);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
+  border: 0.5px solid transparent;
 }
 
 .container {
@@ -112,7 +113,7 @@
 
 .callout-outline.callout-grey {
   background: var(--rs-color-background-neutral-primary);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
 }
 
 .callout-outline.callout-success {
@@ -122,17 +123,17 @@
 
 .callout-outline.callout-alert {
   background: var(--rs-color-background-danger-primary);
-  border: 1px solid var(--rs-color-border-danger-primary);
+  border: 0.5px solid var(--rs-color-border-danger-primary);
 }
 
 .callout-outline.callout-accent {
   background: var(--rs-color-background-accent-primary);
-  border: 1px solid var(--rs-color-border-accent-primary);
+  border: 0.5px solid var(--rs-color-border-accent-primary);
 }
 
 .callout-outline.callout-attention {
   background: var(--rs-color-background-attention-primary);
-  border: 1px solid var(--rs-color-border-attention-primary);
+  border: 0.5px solid var(--rs-color-border-attention-primary);
   color: var(--rs-color-foreground-base-secondary);
 }
 
@@ -171,25 +172,25 @@
 
 .callout-outline.callout-high-contrast.callout-grey {
   background: var(--rs-color-background-neutral-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
 
 .callout-outline.callout-high-contrast.callout-alert {
   background: var(--rs-color-background-danger-primary);
-  border: 1px solid var(--rs-color-border-danger-primary);
+  border: 0.5px solid var(--rs-color-border-danger-primary);
   color: var(--rs-color-foreground-base-primary);
 }
 
 .callout-outline.callout-high-contrast.callout-accent {
   background: var(--rs-color-background-accent-primary);
-  border: 1px solid var(--rs-color-border-accent-primary);
+  border: 0.5px solid var(--rs-color-border-accent-primary);
   color: var(--rs-color-foreground-base-primary);
 }
 
 .callout-outline.callout-high-contrast.callout-attention {
   background: var(--rs-color-background-attention-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -201,7 +202,7 @@
 
 .callout-outline.callout-gradient {
   background: radial-gradient(circle, #ad00e933 0%, #ef040433 100%);
-  border: 1px solid #ef040444;
+  border: 0.5px solid #ef040444;
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -213,7 +214,7 @@
 
 .callout-outline.callout-high-contrast.callout-gradient {
   background: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -225,7 +226,7 @@
 
 .callout-outline.callout-normal {
   background: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -236,6 +237,6 @@
 
 .callout-outline.callout-high-contrast.callout-normal {
   background: var(--rs-color-background-base-primary);
-  border: 1px solid var(--rs-color-border-base-tertiary);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
   color: var(--rs-color-foreground-base-primary);
 }
diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css
index be9476594..76bed9e30 100644
--- a/packages/raystack/components/chip/chip.module.css
+++ b/packages/raystack/components/chip/chip.module.css
@@ -49,7 +49,7 @@
 
 .chip-color-neutral.chip-variant-outline:active,
 .chip-color-neutral.chip-variant-outline[data-state="active"] {
-  border: 1px solid var(--rs-color-border-base-emphasis);
+  border: 0.5px solid var(--rs-color-border-base-emphasis);
   color: var(--rs-color-foreground-base-primary);
 }
 
@@ -84,7 +84,7 @@
 
 .chip-color-accent.chip-variant-outline:active,
 .chip-color-accent.chip-variant-outline[data-state="active"] {
-  border: 1px solid var(--rs-color-border-accent-emphasis);
+  border: 0.5px solid var(--rs-color-border-accent-emphasis);
   color: var(--rs-color-foreground-accent-primary);
 }
 
diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
index d58bc833f..f2f4b0076 100644
--- a/packages/raystack/components/dialog/dialog.module.css
+++ b/packages/raystack/components/dialog/dialog.module.css
@@ -7,7 +7,7 @@
 
 .dialogContent {
   background-color: var(--rs-color-background-base-primary);
-  border-radius: var(--rs-radius-4);
+  border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-floating);
   position: fixed;
   top: 50%;
diff --git a/packages/raystack/components/dropdown-menu/dropdown-menu.module.css b/packages/raystack/components/dropdown-menu/dropdown-menu.module.css
index 6e3e5377a..29b30396a 100644
--- a/packages/raystack/components/dropdown-menu/dropdown-menu.module.css
+++ b/packages/raystack/components/dropdown-menu/dropdown-menu.module.css
@@ -12,7 +12,7 @@
   background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-lifted);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   color: var(--rs-color-foreground-base-primary);
   min-width: var(--popover-anchor-width);
 }
diff --git a/packages/raystack/components/input-field/input-field.module.css b/packages/raystack/components/input-field/input-field.module.css
index da1dbaa64..82b1f50d3 100644
--- a/packages/raystack/components/input-field/input-field.module.css
+++ b/packages/raystack/components/input-field/input-field.module.css
@@ -28,7 +28,6 @@
   border-radius: var(--rs-radius-2);
   border: 1px solid var(--rs-color-border-base-tertiary);
   background: var(--rs-color-background-base-primary);
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
   transition: all 0.2s ease;
   box-sizing: border-box;
   overflow: hidden;
@@ -44,7 +43,6 @@
   border-color: var(--rs-color-border-accent-emphasis);
   background-color: var(--rs-color-background-base-primary);
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--rs-color-border-accent-emphasis), 0.2);
 }
 
 .input-error-wrapper {
@@ -57,7 +55,6 @@
 
 .input-error-wrapper:focus-within {
   border-color: var(--rs-color-border-danger-emphasis-hover);
-  box-shadow: 0 0 0 2px rgba(var(--rs-color-border-danger-primary), 0.2);
 }
 
 .input-disabled-wrapper {
@@ -296,32 +293,22 @@
 
 .variant-borderless {
   border-color: transparent;
-  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
-  box-shadow: none;
 }
 
 .variant-borderless:hover {
   border-color: transparent;
-  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12); */
-  box-shadow: none;
 }
 
 .variant-borderless:focus-within {
   border-color: transparent;
-  /* box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16); */
-  box-shadow: none;
   outline: none;
 }
 
 .input-error-wrapper.variant-borderless {
   border-color: transparent;
-  /* box-shadow: 0 2px 8px rgba(var(--rs-color-border-danger-primary), 0.2); */
-  box-shadow: none;
 }
 
 .input-error-wrapper.variant-borderless:hover,
 .input-error-wrapper.variant-borderless:focus-within {
   border-color: transparent;
-  /* box-shadow: 0 2px 12px rgba(var(--rs-color-border-danger-primary), 0.3); */
-  box-shadow: none;
 }
diff --git a/packages/raystack/components/list/list.module.css b/packages/raystack/components/list/list.module.css
index b3dca9d44..ebadd4771 100644
--- a/packages/raystack/components/list/list.module.css
+++ b/packages/raystack/components/list/list.module.css
@@ -1,7 +1,6 @@
 .list {
   display: flex;
   flex-direction: column;
-  gap: var(--rs-space-3);
   padding: 0;
   margin: 0;
   list-style-type: none;
@@ -56,4 +55,4 @@
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
   color: var(--rs-color-foreground-base-primary);
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/navbar/navbar-sections.tsx b/packages/raystack/components/navbar/navbar-sections.tsx
index 74df29635..68a2e7224 100644
--- a/packages/raystack/components/navbar/navbar-sections.tsx
+++ b/packages/raystack/components/navbar/navbar-sections.tsx
@@ -13,7 +13,7 @@ export const NavbarStart = forwardRef<HTMLDivElement, NavbarStartProps>(
     <Flex
       ref={ref}
       align='center'
-      gap={3}
+      gap={5}
       className={cx(styles.start, className)}
       role={ariaLabel ? 'group' : undefined}
       aria-label={ariaLabel}
@@ -33,7 +33,7 @@ export const NavbarEnd = forwardRef<HTMLDivElement, NavbarEndProps>(
     <Flex
       ref={ref}
       align='center'
-      gap={3}
+      gap={5}
       className={cx(styles.end, className)}
       role={ariaLabel ? 'group' : undefined}
       aria-label={ariaLabel}
diff --git a/packages/raystack/components/navbar/navbar.module.css b/packages/raystack/components/navbar/navbar.module.css
index 7062e0e31..f43804266 100644
--- a/packages/raystack/components/navbar/navbar.module.css
+++ b/packages/raystack/components/navbar/navbar.module.css
@@ -1,7 +1,7 @@
 .root {
   display: flex;
   width: 100%;
-  padding: var(--rs-space-4) var(--rs-space-6);
+  padding: var(--rs-space-4) var(--rs-space-7);
   background: var(--rs-color-background-base-primary);
   border-bottom: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: var(--rs-shadow-feather);
diff --git a/packages/raystack/components/search/search.module.css b/packages/raystack/components/search/search.module.css
index 90952b388..3ef5501a4 100644
--- a/packages/raystack/components/search/search.module.css
+++ b/packages/raystack/components/search/search.module.css
@@ -3,6 +3,9 @@
   flex-direction: column;
   width: 100%;
 }
+.container input {
+  padding: 0 var(--rs-space-3);
+}
 
 .clearButtonWrapper {
   display: flex;
@@ -26,4 +29,4 @@
 .clearButton svg {
   width: 12px;
   height: 12px;
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
index 4850cc98d..bb827c8bb 100644
--- a/packages/raystack/components/select/select.module.css
+++ b/packages/raystack/components/select/select.module.css
@@ -8,7 +8,7 @@
   background-color: var(--rs-color-background-base-primary);
   border-radius: var(--rs-radius-2);
   box-shadow: var(--rs-shadow-soft);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   min-width: var(--radix-select-trigger-width);
   transition: all 0.2s ease;
   max-height: 320px;
@@ -71,7 +71,6 @@
 
 .trigger-outline {
   border: 0.5px solid var(--rs-color-border-base-secondary);
-  box-shadow: var(--rs-shadow-feather);
 }
 
 .trigger-text {
@@ -155,7 +154,7 @@
 .content[data-variant="text"] {
   margin-top: var(--rs-space-2);
   padding: var(--rs-space-1);
-  border: 1px solid var(--rs-color-border-base-primary);
+  border: 0.5px solid var(--rs-color-border-base-primary);
   box-shadow: var(--rs-shadow-soft);
 }
 
diff --git a/packages/raystack/components/spinner/spinner.module.css b/packages/raystack/components/spinner/spinner.module.css
index 6fa95bce8..20d6d6a18 100644
--- a/packages/raystack/components/spinner/spinner.module.css
+++ b/packages/raystack/components/spinner/spinner.module.css
@@ -112,13 +112,13 @@
 }
 
 .spinner-size-5 {
-  width: var(--rs-space-8);
-  height: var(--rs-space-8);
+  width: var(--rs-space-9);
+  height: var(--rs-space-9);
 }
 
 .spinner-size-6 {
-  width: var(--rs-space-9);
-  height: var(--rs-space-9);
+  width: var(--rs-space-10);
+  height: var(--rs-space-10);
 }
 
 .spinner-color-default {
@@ -143,4 +143,4 @@
 
 .spinner-color-attention {
   color: var(--rs-color-foreground-attention-primary);
-}
\ No newline at end of file
+}
diff --git a/packages/raystack/components/tabs/tabs.module.css b/packages/raystack/components/tabs/tabs.module.css
index da0fc850e..5b0bc8743 100644
--- a/packages/raystack/components/tabs/tabs.module.css
+++ b/packages/raystack/components/tabs/tabs.module.css
@@ -10,7 +10,7 @@
   gap: var(--rs-space-2);
   background-color: var(--rs-color-background-neutral-secondary);
   padding: var(--rs-space-1);
-  border-radius: var(--rs-radius-3);
+  border-radius: var(--rs-radius-2);
   width: 100%;
   box-shadow: var(--rs-shadow-inset);
 }
diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css
index 3dd4781f3..2c822f275 100644
--- a/packages/raystack/components/text-area/text-area.module.css
+++ b/packages/raystack/components/text-area/text-area.module.css
@@ -63,7 +63,6 @@
   color: var(--rs-color-foreground-base-primary);
   padding: var(--rs-space-3);
   transition: all 0.2s ease;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
   overflow: hidden;
 }
 
@@ -76,7 +75,6 @@
   border-color: var(--rs-color-border-accent-emphasis);
   background: var(--rs-color-background-base-primary);
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--rs-color-border-accent-emphasis), 0.2);
 }
 
 .textarea::placeholder {
@@ -108,7 +106,6 @@
 
 .error:focus {
   border-color: var(--rs-color-border-danger-emphasis-hover);
-  box-shadow: 0 0 0 2px rgba(var(--rs-color-border-danger-primary), 0.2);
 }
 
 .helperTextError {
diff --git a/packages/raystack/components/toast/toast.module.css b/packages/raystack/components/toast/toast.module.css
index 0f11ccbd7..06bcc2e58 100644
--- a/packages/raystack/components/toast/toast.module.css
+++ b/packages/raystack/components/toast/toast.module.css
@@ -1,9 +1,3 @@
-.raystack-toast [data-sonner-toast] {
-  background: var(--rs-color-background-base-primary);
-  color: var(--rs-color-foreground-base-primary);
-  border: 1px solid var(--rs-color-border-base-primary);
-}
-
 .toast-wrapper {
   margin-right: var(--rs-space-3);
 }
diff --git a/packages/raystack/components/toast/toast.tsx b/packages/raystack/components/toast/toast.tsx
index 12e0b546e..ff6c21851 100644
--- a/packages/raystack/components/toast/toast.tsx
+++ b/packages/raystack/components/toast/toast.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { ReactNode } from 'react';
-import { Toaster, type ToasterProps, toast as sonnerToast } from 'sonner';
+import { toast as sonnerToast, Toaster, type ToasterProps } from 'sonner';
 
 import { useTheme } from '../theme-provider';
 import { UseThemeProps } from '../theme-provider/types';
@@ -16,6 +16,15 @@ const ToastContainer = (props: ToastContainerProps) => {
     <Toaster
       theme={resolvedTheme as UseThemeProps['systemTheme']}
       className={styles['raystack-toast']}
+      toastOptions={{
+        style: {
+          background: 'var(--rs-color-background-base-primary)',
+          color: 'var(--rs-color-foreground-base-primary)',
+          border: '0.5px solid var(--rs-color-border-base-primary)',
+          padding: 'var(--rs-space-3)',
+          borderRadius: 'var(--rs-radius-2)'
+        }
+      }}
       {...props}
     />
   );

From fb451d04f291b101507eba6e708ac0749dc83de9 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 23 Dec 2025 05:29:12 +0530
Subject: [PATCH 2/2] feat: component improvements

---
 packages/raystack/components/list/list.module.css       | 1 -
 packages/raystack/components/spinner/spinner.module.css | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/raystack/components/list/list.module.css b/packages/raystack/components/list/list.module.css
index ebadd4771..d07383596 100644
--- a/packages/raystack/components/list/list.module.css
+++ b/packages/raystack/components/list/list.module.css
@@ -33,7 +33,6 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
-
 .label {
   font-size: var(--rs-font-size-small);
   font-weight: var(--rs-font-weight-medium);
diff --git a/packages/raystack/components/spinner/spinner.module.css b/packages/raystack/components/spinner/spinner.module.css
index 20d6d6a18..b996568fa 100644
--- a/packages/raystack/components/spinner/spinner.module.css
+++ b/packages/raystack/components/spinner/spinner.module.css
@@ -56,7 +56,6 @@
 }
 
 @keyframes spin {
-
   0%,
   100% {
     opacity: 0.8;