Feat component improvements

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);

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;

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);
 }

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);
 }
 

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%;

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);
 }

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;
 }

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;
@@ -34,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);
@@ -56,4 +54,4 @@
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
   color: var(--rs-color-foreground-base-primary);
-}
+}

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}

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);

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;
-}
+}

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);
 }
 

packages/raystack/components/spinner/spinner.module.css

@@ -56,7 +56,6 @@
 }
 
 @keyframes spin {
-
   0%,
   100% {
     opacity: 0.8;
@@ -112,13 +111,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 +142,4 @@
 
 .spinner-color-attention {
   color: var(--rs-color-foreground-attention-primary);
-}
+}

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);
 }

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 {