border styling

Author: emir-karabeg

.claude/rules/sim-styling.md

@@ -48,7 +48,15 @@ Icons default `size-[14px]`. Equal h/w → `size-*` (`size-[14px]`, `size-4`), n
 
 ## Color Tokens
 
-Value text `--text-body`; muted/placeholder/labels `--text-muted`; icons `--text-icon`; borders `--border-1` (fields) / `--border` (dividers); surfaces `--surface-5` (light) / `--surface-4` (dark); active row `--surface-active`; error `--text-error`. No focus rings on chip surfaces.
+Value text `--text-body`; muted/placeholder/labels `--text-muted`; icons `--text-icon`; neutral borders and dividers `--border` (`--border-1` and `--border-muted` are legacy aliases resolving to it; `--divider` is retired); surfaces `--surface-5` (light) / `--surface-4` (dark); active row `--surface-active`; error `--text-error`. No focus rings on chip surfaces.
+
+### Line weight
+
+Neutral border geometry comes from `--border-width`: `1px` by default, dropping to `0.5px` under `@media (min-resolution: 2dppx)` so hidpi displays get a true hairline. Tailwind's `border*` and `divide-*` utilities resolve through it, as do `h-px`/`w-px` — the `px` key is overridden on **`spacing`**, not on `width`/`height`, so a hairline and the `-right-px`/`inset-px` offsets that position it stay in agreement.
+
+**Tune line weight on `--border`, never on `--border-width`.** Browsers floor a border to whole device pixels, so on a 2dppx display every value in `(0, 1px)` collapses to the same single-pixel hairline and the next drawable step is a full `1px` — double. Width has exactly one usable position; perceived weight is a color property. Light mode gains weight by darkening `--border`, dark mode by lightening it.
+
+Draw a line with a real `border-*` utility. Never hand-roll one as `shadow-[inset_0_-1px_0_…]` — box-shadow has its own width and cannot follow the token, so such a line silently renders at double weight against every neighbor. Use an explicit numeric width (or a `ring`/`outline`) only when the line is intentionally emphasized, e.g. focus and selection affordances.
 
 ## Chip Components (consumer usage)
 

apps/sim/app/(interfaces)/chat/components/message/components/markdown-renderer.tsx

@@ -91,8 +91,8 @@ const COMPONENTS = {
     }
 
     return (
-      <div className='my-6 overflow-hidden rounded-lg border border-[var(--divider)] text-sm'>
-        <div className='flex items-center justify-between border-[var(--divider)] border-b bg-[var(--surface-4)] px-4 py-1.5'>
+      <div className='my-6 overflow-hidden rounded-lg border border-[var(--border)] text-sm'>
+        <div className='flex items-center justify-between border-[var(--border)] border-b bg-[var(--surface-4)] px-4 py-1.5'>
           <span className='font-sans text-[var(--text-tertiary)] text-xs'>
             {codeProps.className?.replace('language-', '') || 'code'}
           </span>
@@ -115,12 +115,12 @@ const COMPONENTS = {
   ),
 
   blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-    <blockquote className='my-4 break-words border-[var(--divider)] border-l-2 pl-4 font-sans text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
+    <blockquote className='my-4 break-words border-[var(--border)] border-l-2 pl-4 font-sans text-[var(--text-primary)] italic [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&>p]:my-2'>
       {children}
     </blockquote>
   ),
 
-  hr: () => <hr className='my-8 border-[var(--divider)] border-t' />,
+  hr: () => <hr className='my-8 border-[var(--border)] border-t' />,
 
   a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
     <LinkWithPreview href={href || '#'} {...props}>
@@ -139,10 +139,10 @@ const COMPONENTS = {
     <thead className='bg-[var(--surface-3)] text-left'>{children}</thead>
   ),
   tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-    <tbody className='divide-y divide-[var(--divider)] bg-[var(--surface-2)]'>{children}</tbody>
+    <tbody className='divide-y divide-[var(--border)] bg-[var(--surface-2)]'>{children}</tbody>
   ),
   tr: ({ children }: React.HTMLAttributes<HTMLTableRowElement>) => (
-    <tr className='border-[var(--divider)] border-b transition-colors hover:bg-[var(--surface-hover)]'>
+    <tr className='border-[var(--border)] border-b transition-colors hover:bg-[var(--surface-hover)]'>
       {children}
     </tr>
   ),

apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx

@@ -53,7 +53,7 @@ interface HeroChatLoopProps {
  * screenshot is invisible. The reply STREAMS in word by word (the way the
  * real Mothership streams its responses); once the text completes, the
  * "Suggested follow-ups" block (the real special-tags markup: numbered
- * `--divider`-ruled rows with a trailing arrow) and the action row land
+ * `--border`-ruled rows with a trailing arrow) and the action row land
  * together; under `prefers-reduced-motion` it appears whole.
  * The content column is centered and capped (like the real full-width
  * MothershipChat) so it reads right both full-width (stage collapsed) and at
@@ -153,7 +153,7 @@ export function HeroChatLoop({ phase, fading }: HeroChatLoopProps) {
                   <span
                     key={title}
                     className={cn(
-                      'flex items-center gap-2 border-[var(--divider)] px-2 py-2 text-left',
+                      'flex items-center gap-2 border-[var(--border)] px-2 py-2 text-left',
                       i > 0 && 'border-t'
                     )}
                   >

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx

@@ -233,7 +233,7 @@ export function LandingPreviewLogs() {
             <col style={{ width: '14%' }} />
             <col style={{ width: '18%' }} />
           </colgroup>
-          <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
+          <thead className='border-[var(--border)] border-b'>
             <tr>
               {COL_HEADERS.map(({ key, label }) => (
                 <th

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-resource/landing-preview-resource.tsx

@@ -128,7 +128,7 @@ export function LandingPreviewResource({
               />
             ))}
           </colgroup>
-          <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
+          <thead className='border-[var(--border)] border-b'>
             <tr>
               {columns.map((col) => (
                 <th

apps/sim/app/(landing)/files/components/files-hero-loop.tsx

@@ -274,7 +274,7 @@ export function FilesHeroLoop() {
           <div
             className={cn(
               ROW_GRID,
-              'h-10 flex-shrink-0 items-center shadow-[inset_0_-1px_0_var(--border)]'
+              'h-10 flex-shrink-0 items-center border-[var(--border)] border-b'
             )}
           >
             {COL_HEADERS.map((header) => (

apps/sim/app/(landing)/knowledge/components/knowledge-hero-loop.tsx

@@ -209,7 +209,7 @@ export function KnowledgeHeroLoop() {
                 <col style={{ width: 170 }} />
                 <col style={{ width: 190 }} />
               </colgroup>
-              <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
+              <thead className='border-[var(--border)] border-b'>
                 <tr>
                   {COL_HEADERS.map((header) => (
                     <th

apps/sim/app/(landing)/logs/components/logs-hero-loop.tsx

@@ -330,7 +330,7 @@ export function LogsHeroLoop() {
                   <col key={index} style={{ width }} />
                 ))}
               </colgroup>
-              <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
+              <thead className='border-[var(--border)] border-b'>
                 <tr>
                   {COL_HEADERS.map((label) => (
                     <th

apps/sim/app/_styles/globals.css

@@ -23,6 +23,12 @@
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
   --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
   --output-panel-width: 560px; /* OUTPUT_PANEL_WIDTH.DEFAULT */
+  /**
+   * Neutral border and divider thickness. Standard-density displays cannot draw
+   * a sub-pixel line crisply, so they keep a full pixel; the hidpi override below
+   * thins it. Consumed by Tailwind's `border*`, `divide-*`, and `h-px`/`w-px`.
+   */
+  --border-width: 1px;
   --auth-primary-btn-bg: #ffffff;
   --auth-primary-btn-border: #ffffff;
   --auth-primary-btn-text: #000000;
@@ -50,6 +56,18 @@
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
+/**
+ * One device pixel on high-density displays. Browsers floor a border to whole
+ * device pixels, so every value in (0, 1px) collapses to this same hairline and
+ * the next drawable step is a full 1px — i.e. double. Line weight between those
+ * two is therefore tuned on `--border`, never here.
+ */
+@media (min-resolution: 2dppx) {
+  :root {
+    --border-width: 0.5px;
+  }
+}
+
 /**
  * Electron's `titleBarOverlay` publishes the window controls' geometry as these
  * `titlebar-area-*` env vars, and Chromium rescales them under page zoom so the
@@ -312,9 +330,7 @@ html.sidebar-booting .sidebar-shell-inner {
     --surface-2: #ffffff; /* blocks, cards, modals - pure white */
     --surface-3: #f7f7f7; /* popovers, headers */
     --surface-4: #f5f5f5; /* buttons base */
-    --border: #dedede; /* primary border */
     --surface-5: #f3f3f3; /* inputs, form elements */
-    --border-1: #e0e0e0; /* stronger border */
     --surface-6: #e5e5e5; /* popovers, elevated surfaces */
     --surface-7: #d9d9d9;
     --surface-hover: #f2f2f2; /* hover state */
@@ -336,10 +352,13 @@ html.sidebar-booting .sidebar-shell-inner {
     --text-error: #ef4444;
 
     /* Borders / dividers */
-    --divider: #ededed;
-    --border-muted: #e4e4e4;
+    --border: #d8d8d8;
     --border-success: #e0e0e0;
 
+    /** Legacy neutral-border aliases. New work should use --border. */
+    --border-1: var(--border);
+    --border-muted: var(--border);
+
     /* Brand & state */
     --brand-agent: #6f3dfa;
     --brand-secondary: #33b4ff;
@@ -470,9 +489,7 @@ html.sidebar-booting .sidebar-shell-inner {
     --surface-2: #232323;
     --surface-3: #242424;
     --surface-4: #292929;
-    --border: #333333;
     --surface-5: #363636;
-    --border-1: #3d3d3d;
     --surface-6: #454545;
     --surface-7: #505050;
     --surface-hover: #262626; /* hover state */
@@ -493,11 +510,14 @@ html.sidebar-booting .sidebar-shell-inner {
     --text-muted-inverse: #b3b3b3;
     --text-error: #ef4444;
 
-    /* --border-strong: #303030; */
-    --divider: #393939;
-    --border-muted: #424242;
+    /* Borders / dividers */
+    --border: #444444;
     --border-success: #575757;
 
+    /** Legacy neutral-border aliases. New work should use --border. */
+    --border-1: var(--border);
+    --border-muted: var(--border);
+
     /* Brand & state */
     --brand-agent: #701ffc;
     --brand-secondary: #33b4ff;

apps/sim/app/layout.tsx

@@ -56,7 +56,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             strategy='lazyOnload'
           />
         )}
-        {/* 
+        {/*
           Workspace layout dimensions: set CSS vars before hydration to avoid layout jump.
           
           IMPORTANT: These hardcoded values must stay in sync with stores/constants.ts