Border width update (#2448)

* Change borders from 2px to 1px

* Change ring from 4px to 2px

src/lib/components/bottom-nav-namespaces.svelte

@@ -45,7 +45,7 @@
 
 <style lang="postcss">
   .namespace {
-    @apply w-full cursor-pointer rounded border border-transparent text-left text-sm font-medium hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
+    @apply w-full cursor-pointer rounded border border-transparent text-left text-sm font-medium hover:surface-interactive-secondary focus-visible:surface-interactive-secondary focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
 
     &.selected {
       @apply text-brand;

src/lib/components/bottom-nav-settings.svelte

@@ -42,7 +42,7 @@
         : 'transcoder-off'}
     />
     <DataEncoderSettings />
-    <div class="border-b-2 border-subtle" />
+    <div class="border-b border-subtle" />
     <NavigationButton
       onClick={() => ($useDarkMode = !$useDarkMode)}
       tooltip={$useDarkMode

src/lib/components/bottom-nav.svelte

@@ -114,7 +114,7 @@
       class="grow text-white"
       on:click={onNamespaceClick}>{truncateNamespace(namespace)}</Button
     >
-    <div class="ml-1 h-full w-1 border-l-2 border-subtle" />
+    <div class="ml-1 h-full w-1 border-l border-subtle" />
     <Button
       variant="ghost"
       size="xs"
@@ -144,7 +144,7 @@
 
 <style lang="postcss">
   .namespace-wrapper {
-    @apply surface-black flex h-10 w-full grow flex-row items-center rounded-lg border-2 border-subtle px-0.5 text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-4 focus-within:ring-primary/70;
+    @apply surface-black flex h-10 w-full grow flex-row items-center rounded-lg border border-subtle px-0.5 text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
   }
 
   .nav-button {

src/lib/components/event/event-details-full.svelte

@@ -20,13 +20,13 @@
 {#if showEventGroup}
   <div class="w-full p-2">
     <div
-      class="flex flex-col gap-0 overflow-hidden rounded-xl border-2 border-subtle xl:flex-row"
+      class="flex flex-col gap-0 overflow-hidden rounded-xl border border-subtle xl:flex-row"
     >
       {#each group.eventList as groupEvent}
         {@const attributes = formatAttributes(groupEvent)}
         {@const details = Object.entries(attributes)}
         <div
-          class="w-full border-subtle [&:not(:last-child)]:border-r-2"
+          class="w-full border-subtle [&:not(:last-child)]:border-r"
           class:three-events={group.eventList.length === 3 ||
             (group.eventList.length === 2 && pendingEvent)}
           class:two-events={group.eventList.length === 2 ||
@@ -54,7 +54,7 @@
       {#if pendingEvent}
         {@const details = Object.entries(pendingEvent)}
         <div
-          class="w-full border-subtle [&:not(:last-child)]:border-r-2"
+          class="w-full border-subtle [&:not(:last-child)]:border-r"
           class:three-events={group.eventList.length === 2}
           class:two-events={group.eventList.length === 1}
         >
@@ -76,7 +76,7 @@
   {@const attributes = formatAttributes(event)}
   {@const details = Object.entries(attributes)}
   <div class="w-full p-2">
-    <div class="w-full overflow-hidden rounded-xl border-2 border-subtle">
+    <div class="w-full overflow-hidden rounded-xl border border-subtle">
       <EventLinksExpanded links={event?.links} />
       {#each details as [key, value] (key)}
         <EventDetailsRowExpanded {key} {value} {attributes} />

src/lib/components/event/event-details-row.svelte

@@ -61,6 +61,6 @@
 
 <style lang="postcss">
   .payload {
-    @apply overflow-hidden rounded border-2 border-subtle bg-primary px-1 py-0.5 font-mono text-xs;
+    @apply overflow-hidden rounded border border-subtle bg-primary px-1 py-0.5 font-mono text-xs;
   }
 </style>

src/lib/components/event/event-group-details.svelte

@@ -19,7 +19,7 @@
   $: ({ workflow, run, namespace } = $page.params);
 </script>
 
-<div class="w-full border-slate-700 lg:w-1/3 lg:border-r-2">
+<div class="w-full border-slate-700 lg:w-1/3 lg:border-r">
   <Table class="surface-primary w-full table-fixed pb-2" variant="simple">
     {#each [...eventGroup.events].reverse() as [id, eventInGroup] (id)}
       <tr

src/lib/components/feedback-button.svelte

@@ -19,14 +19,14 @@
 
 <style lang="postcss">
   .feedback-button {
-    @apply flex w-40 cursor-pointer items-center justify-between rounded-full px-4 py-2 text-sm text-purple-200 shadow-md;
+    @apply flex cursor-pointer items-center justify-between rounded-full px-4 py-2 text-sm text-purple-200 shadow-md;
   }
 
   .feedback-button:hover {
     @apply bg-slate-700;
   }
 
   .feedback-icon {
-    @apply mr-2 rounded-full border-2 border-purple-200;
+    @apply mr-2 rounded-full border-purple-200;
   }
 </style>

src/lib/components/lines-and-dots/svg/group-details-row.svelte

@@ -162,7 +162,7 @@
           runId={childWorkflowStartedEvent.attributes.workflowExecution.runId}
           height={childTimelineHeight}
           width={childTimelineWidth}
-          class="overflow-x-hidden rounded-br rounded-tr border-b-2 border-r-2 border-t-2 border-subtle bg-primary"
+          class="overflow-x-hidden rounded-br rounded-tr border-y border-r border-subtle bg-primary"
         />
       {/key}
     </foreignObject>

src/lib/components/lines-and-dots/svg/timeline-graph.svelte

@@ -67,7 +67,7 @@
 </script>
 
 <div
-  class="relative h-auto overflow-auto border-b-2 border-subtle"
+  class="relative h-auto overflow-auto border-b border-subtle"
   bind:clientWidth={canvasWidth}
   style="max-height: {viewportHeight}px;"
   on:scroll={handleScroll}

src/lib/components/lines-and-dots/workflow-error.svelte

@@ -46,7 +46,7 @@
       </p>
     {/if}
     <div
-      class="mt-2 flex w-full flex-col gap-0 overflow-hidden rounded-xl border-2 border-danger"
+      class="mt-2 flex w-full flex-col gap-0 overflow-hidden rounded-xl border border-danger"
     >
       <div class="flex items-center justify-between gap-2 bg-danger px-2 py-2">
         <div class="flex items-center gap-2">

src/lib/components/panel.svelte

@@ -8,7 +8,7 @@
 
 <style lang="postcss">
   .panel {
-    @apply rounded-xl border-2 p-8 dark:border-subtle;
+    @apply rounded-xl border p-8 dark:border-subtle;
 
     &.error {
       @apply border-danger bg-danger;

src/lib/components/schedule/schedule-basic-frequency.svelte

@@ -22,6 +22,6 @@
 
 <style lang="postcss">
   .frequency {
-    @apply flex h-auto max-h-32 flex-col overflow-auto rounded-lg border-2 border-subtle bg-primary px-2 py-2 font-mono text-sm;
+    @apply flex h-auto max-h-32 flex-col overflow-auto rounded-lg border border-subtle bg-primary px-2 py-2 font-mono text-sm;
   }
 </style>

src/lib/components/schedule/schedule-recent-runs.svelte

@@ -93,6 +93,6 @@
 
 <style lang="postcss">
   .row {
-    @apply my-1 inline-flex w-full items-center border-b-2 border-subtle py-1;
+    @apply my-1 inline-flex w-full items-center border-b border-subtle py-1;
   }
 </style>

src/lib/components/schedule/schedule-upcoming-runs.svelte

@@ -30,6 +30,6 @@
 
 <style lang="postcss">
   .row {
-    @apply my-1 inline-flex h-10 w-full justify-start border-b-2 border-subtle py-1;
+    @apply my-1 inline-flex h-10 w-full justify-start border-b border-subtle py-1;
   }
 </style>

src/lib/components/workflow/pending-activities.svelte

@@ -189,7 +189,7 @@
   }
 
   .pending-activity-summary {
-    @apply w-full overflow-x-scroll border-b-2 border-subtle py-1 text-sm;
+    @apply w-full overflow-x-scroll border-b border-subtle py-1 text-sm;
   }
 
   .pending-activity-row:last-child .pending-activity-summary {

src/lib/components/workflow/workflow-loading-row.svelte

@@ -18,11 +18,11 @@
 
 <style lang="postcss">
   .row {
-    @apply items-center border-b-2 p-2 text-sm no-underline last-of-type:border-b-0 md:table-row md:text-base;
+    @apply items-center border-b p-2 text-sm no-underline last-of-type:border-b-0 md:table-row md:text-base;
   }
 
   .cell {
-    @apply p-2 text-left md:border-b-2;
+    @apply p-2 text-left md:border-b;
   }
 
   .row:last-of-type .cell {

src/lib/components/workflow/workflows-summary-configurable-table/table-empty-state.svelte

@@ -31,7 +31,7 @@
   aria-live="polite"
 >
   <div
-    class="surface-primary flex w-auto min-w-[280px] flex-col gap-4 border-b-2 border-table p-8 xl:min-w-[520px] xl:border-b-0 xl:border-r-2"
+    class="surface-primary flex w-auto min-w-[280px] flex-col gap-4 border-b border-table p-8 xl:min-w-[520px] xl:border-b-0 xl:border-r"
   >
     {#if updating}
       <Loading />

src/lib/holocene/accordion/accordion-group.svelte

@@ -1,5 +1,5 @@
 <div
-  class="*:rounded-none *:border-t-0 [&>*:first-child]:rounded-t-2xl [&>*:first-child]:border-t-2 [&>*:last-child]:rounded-b-2xl"
+  class="*:rounded-none *:border-t-0 [&>*:first-child]:rounded-t-2xl [&>*:first-child]:border-t [&>*:last-child]:rounded-b-2xl"
 >
   <slot />
 </div>

src/lib/holocene/accordion/accordion.svelte

@@ -42,7 +42,7 @@
 {#if expandable}
   <div
     class={merge(
-      'surface-primary w-full rounded-2xl border-2 border-subtle p-2 focus-within:ring-4 focus-within:ring-inset focus-within:ring-primary/70',
+      'surface-primary w-full rounded-2xl border border-subtle p-2 focus-within:ring-2 focus-within:ring-inset focus-within:ring-primary/70',
       className,
     )}
     {...$$restProps}
@@ -95,7 +95,7 @@
   </div>
 {:else}
   <div
-    class="surface-primary w-full rounded-2xl border-2 border-subtle p-4"
+    class="surface-primary w-full rounded-2xl border border-subtle p-4"
     {...$$restProps}
   >
     <div class="flex w-full flex-col rounded-lg">

src/lib/holocene/alert.svelte

@@ -64,7 +64,7 @@
 
 <style lang="postcss">
   .alert {
-    @apply items-start gap-2 break-words rounded-lg border-2 p-5 text-sm text-primary;
+    @apply items-start gap-2 break-words rounded-lg border p-5 text-sm text-primary;
   }
 
   .alert.success {

src/lib/holocene/button.svelte

@@ -20,7 +20,7 @@
       'w-fit',
       'items-center',
       'justify-center',
-      'border-2',
+      'border',
       'gap-2',
       'rounded-lg',
       'disabled:opacity-50',
@@ -30,7 +30,7 @@
       'transition-shadow',
       'focus-visible:outline-none',
       'focus-visible:border-inverse',
-      'focus-visible:ring-4',
+      'focus-visible:ring-2',
       'whitespace-nowrap',
       'no-underline',
       '[.button-group>&]:rounded-none',

src/lib/holocene/card.svelte

@@ -4,6 +4,6 @@
 
 <style lang="postcss">
   .card {
-    @apply rounded-2xl border-2 border-subtle p-4;
+    @apply rounded-2xl border border-subtle p-4;
   }
 </style>

src/lib/holocene/checkbox.svelte

@@ -114,8 +114,8 @@
           'flex-none',
           'cursor-pointer',
           'rounded-md',
-          'border-2',
-          'bg-transparent',
+          'border',
+          'bg-primary',
           'text-inverse',
           'bg-clip-padding',
           'peer-indeterminate:bg-interactive',
@@ -124,17 +124,17 @@
           'peer-checked:border-interactive',
         ],
         !disabled && [
-          'group-hover:border-transparent',
-          'peer-focus-visible:border-transparent',
-          'group-hover:peer-checked:border-transparent',
-          'group-hover:peer-indeterminate:border-transparent',
+          'group-hover:border-inverse',
+          'peer-focus-visible:border-inverse',
+          'group-hover:peer-checked:border-inverse',
+          'group-hover:peer-indeterminate:border-inverse',
           'group-hover:bg-interactive-active',
           'peer-focus-visible:bg-interactive-active',
           'group-hover:peer-checked:bg-interactive-active',
           'group-hover:peer-indeterminate:bg-interactive-active',
-          'group-hover:ring-4',
+          'group-hover:ring-2',
           'group-hover:ring-primary/70',
-          'peer-focus-visible:ring-4',
+          'peer-focus-visible:ring-2',
           'peer-focus-visible:ring-primary/70',
         ],
         disabled && ['cursor-not-allowed', 'opacity-50'],

src/lib/holocene/combobox/combobox.svelte

@@ -436,7 +436,7 @@
       />
     </div>
     {#if $$slots.action}
-      <div class="ml-1 flex h-full items-center border-l-2 border-subtle p-0.5">
+      <div class="ml-1 flex h-full items-center border-l border-subtle p-0.5">
         {#if actionTooltip}
           <Tooltip text={actionTooltip} right>
             <slot name="action" />
@@ -446,7 +446,7 @@
         {/if}
       </div>
     {:else if href}
-      <div class="ml-1 flex h-full items-center border-l-2 border-subtle p-0.5">
+      <div class="ml-1 flex h-full items-center border-l border-subtle p-0.5">
         {#if actionTooltip}
           <Tooltip text={actionTooltip} right>
             <Button
@@ -519,10 +519,10 @@
 
 <style lang="postcss">
   .combobox-wrapper {
-    @apply surface-primary flex w-full flex-row items-center rounded-lg border-2 border-subtle text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-4 focus-within:ring-primary/70;
+    @apply surface-primary flex w-full flex-row items-center rounded-lg border border-subtle text-sm dark:focus-within:surface-primary focus-within:border-interactive focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
 
     &.invalid {
-      @apply border-2 border-danger text-danger focus-within:ring-danger/70;
+      @apply border border-danger text-danger focus-within:ring-danger/70;
     }
 
     &.disabled {

src/lib/holocene/copyable/button.svelte

@@ -23,7 +23,7 @@
 
 <button
   class={merge(
-    'surface-interactive-secondary m-1 rounded-md border-2 border-[transparent] bg-transparent p-1 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/70',
+    'surface-interactive-secondary m-1 rounded-md border border-[transparent] bg-transparent p-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70',
     className,
   )}
   on:click

src/lib/holocene/empty-state.svelte

@@ -22,7 +22,7 @@
     <p class="text-center">{content}</p>
   {/if}
   {#if error}
-    <p class="rounded-md border-2 border-danger bg-danger p-5 text-center">
+    <p class="rounded-md border border-danger bg-danger p-5 text-center">
       {error}
     </p>
   {/if}

src/lib/holocene/input/chip-input.svelte

@@ -174,11 +174,11 @@
 
 <style lang="postcss">
   .input-container {
-    @apply surface-primary flex max-h-20 min-h-[2.5rem] w-full flex-row flex-wrap gap-1 overflow-y-scroll rounded-lg border-2 border-subtle p-2 text-sm text-primary focus-within:border-interactive focus-within:ring-4 focus-within:ring-primary/70;
+    @apply surface-primary flex max-h-20 min-h-[2.5rem] w-full flex-row flex-wrap gap-1 overflow-y-scroll rounded-lg border border-subtle p-2 text-sm text-primary focus-within:border-interactive focus-within:ring-2 focus-within:ring-primary/70;
   }
 
   .invalid {
-    @apply border-danger focus-within:border-danger focus-within:ring-4 focus-within:ring-danger/70;
+    @apply border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/70;
   }
 
   input {

src/lib/holocene/input/input.svelte

@@ -93,7 +93,9 @@
   <div class="input-group flex rounded-lg">
     <slot name="before-input" {disabled} />
     <div
-      class="input-container"
+      class={merge(
+        'surface-primary relative box-border inline-flex h-10 w-full items-center rounded-lg border border-subtle text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70',
+      )}
       class:disabled
       class:error
       class:noBorder
@@ -185,7 +187,7 @@
 <style lang="postcss">
   /* Base styles */
   .input-container {
-    @apply surface-primary relative box-border inline-flex h-10 w-full items-center rounded-lg border-2 border-subtle text-sm focus-within:outline-none focus-within:ring-4 focus-within:ring-primary/70;
+    /* @apply ; */
 
     &.error,
     &.invalid {

src/lib/holocene/input/number-input.svelte

@@ -88,7 +88,7 @@
   }
 
   .input-container {
-    @apply surface-primary relative box-border flex h-10 w-16 items-center rounded-lg border-2 border-subtle text-sm focus-within:outline-none focus-within:ring-4 focus-within:ring-primary/70;
+    @apply surface-primary relative box-border flex h-10 w-16 items-center rounded-lg border border-subtle text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70;
   }
 
   .input-container.search {