From 729a5d55eaf2fdad0a928bc4d8ed457f561f3512 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 12 Jun 2024 14:14:15 -0600
Subject: [PATCH] Dark mode audit style updates (#2152)

* Update Menu component border

* Add border and make cancel a ghost button by default in Modal component

* Update border in DayOfMonthPicker component

* Audit and update Badge types and colors

* Add interactive-table-hover background color and update table row hover styles

* Revert green status color

* Keep text and background color in dark mode for timeline

* Add light prop to Link component to set text to off white

* Remove shadow and fix border width on TopNav

* Fix various border colors and radius

* Fix interactive ghost hover color
---
 .../components/batch-operations/header.svelte |  6 ++--
 .../components/batch-operations/table.svelte  |  6 ++--
 .../event/event-group-details.svelte          |  4 +--
 .../event/event-history-timeline.svelte       | 36 +++++++++----------
 .../components/event/event-summary-row.svelte | 12 +++----
 .../svg/group-details-text.svelte             |  6 ++--
 .../schedule/schedule-form-view.svelte        |  2 +-
 src/lib/components/top-nav.svelte             |  2 +-
 src/lib/components/workflow-status.svelte     |  4 +--
 .../workflow/pending-activities.svelte        |  8 ++---
 .../workflow/workflow-call-stack-error.svelte |  1 -
 .../workflow-compatibility-error.svelte       |  1 -
 .../workflow/workflow-typed-error.svelte      |  1 -
 .../workflow/workflows-summary-row.svelte     |  2 +-
 src/lib/holocene/accordion.svelte             | 16 ++++-----
 src/lib/holocene/alert.stories.svelte         |  1 -
 src/lib/holocene/alert.svelte                 |  9 +----
 src/lib/holocene/api-pagination.svelte        |  1 -
 src/lib/holocene/badge.stories.svelte         |  5 +--
 src/lib/holocene/badge.svelte                 | 23 +++++-------
 src/lib/holocene/card.svelte                  |  2 +-
 src/lib/holocene/day-of-month-picker.svelte   |  2 +-
 src/lib/holocene/drawer-content.svelte        |  2 +-
 src/lib/holocene/drawer.svelte                |  6 ++--
 src/lib/holocene/link.stories.svelte          | 10 +++---
 src/lib/holocene/link.svelte                  | 10 +++---
 src/lib/holocene/menu/menu.svelte             |  2 +-
 src/lib/holocene/modal.stories.svelte         |  1 -
 src/lib/holocene/modal.svelte                 |  4 +--
 .../orderable-list/orderable-list-item.svelte |  2 +-
 .../orderable-list/orderable-list.svelte      |  2 +-
 src/lib/holocene/table/paginated-table.svelte |  2 +-
 src/lib/layouts/workflow-header.svelte        | 10 +++---
 .../pages/workflow-pending-activities.svelte  |  8 ++---
 src/lib/theme/plugin.ts                       |  1 +
 src/lib/theme/variables.ts                    |  6 +++-
 .../(app)/namespaces/[namespace]/+page.svelte |  8 ++---
 37 files changed, 103 insertions(+), 121 deletions(-)

diff --git a/src/lib/components/batch-operations/header.svelte b/src/lib/components/batch-operations/header.svelte
index d4f702809..49762abbf 100644
--- a/src/lib/components/batch-operations/header.svelte
+++ b/src/lib/components/batch-operations/header.svelte
@@ -24,9 +24,9 @@
 
   const jobStateToBadgeType: Record<BatchOperationState, BadgeType> = {
     Completed: 'success',
-    Running: 'running',
-    Failed: 'error',
-    Unspecified: 'unspecified',
+    Running: 'primary',
+    Failed: 'danger',
+    Unspecified: undefined,
   };
 </script>
 
diff --git a/src/lib/components/batch-operations/table.svelte b/src/lib/components/batch-operations/table.svelte
index 48377118a..2fe83d378 100644
--- a/src/lib/components/batch-operations/table.svelte
+++ b/src/lib/components/batch-operations/table.svelte
@@ -19,9 +19,9 @@
 
   const jobStateToBadgeType: Record<BatchOperationState, BadgeType> = {
     Completed: 'success',
-    Running: 'running',
-    Failed: 'error',
-    Unspecified: 'unspecified',
+    Running: 'primary',
+    Failed: 'danger',
+    Unspecified: undefined,
   };
 </script>
 
diff --git a/src/lib/components/event/event-group-details.svelte b/src/lib/components/event/event-group-details.svelte
index 82b5a5a2c..5f7cde587 100644
--- a/src/lib/components/event/event-group-details.svelte
+++ b/src/lib/components/event/event-group-details.svelte
@@ -61,11 +61,11 @@
 
 <style lang="postcss">
   .row:hover {
-    @apply surface-subtle cursor-pointer bg-fixed;
+    @apply cursor-pointer bg-interactive-table-hover bg-fixed;
   }
 
   .active {
-    @apply surface-subtle;
+    @apply bg-interactive-table-hover;
   }
 
   .failure {
diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
index 6fc82f25a..dbbd13934 100644
--- a/src/lib/components/event/event-history-timeline.svelte
+++ b/src/lib/components/event/event-history-timeline.svelte
@@ -70,7 +70,7 @@
     const link = renderComponentToHTML(Link, {
       href,
       text: sanitizeHtml(groupName),
-      class: 'flex gap-2 items-center',
+      class: 'flex gap-2 items-center !text-space-black',
     });
     return link;
   }
@@ -337,7 +337,7 @@
     display: flex;
     align-items: center;
 
-    @apply !text-primary;
+    @apply !text-space-black;
   }
 
   :global(.vis-timeline) {
@@ -358,7 +358,7 @@
   }
 
   :global(.vis-content, .vis-group) {
-    @apply surface-secondary;
+    @apply bg-off-white;
   }
 
   :global(.vis-timeline .vis-item) {
@@ -394,7 +394,7 @@
     border-color: theme(colors.off-black);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.workflow) {
@@ -408,7 +408,7 @@
     border-color: theme(colors.red.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Failed) {
@@ -420,7 +420,7 @@
     border-color: theme(colors.yellow.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Terminated, .vis-item.vis-point.CancelRequested) {
@@ -432,7 +432,7 @@
     border-color: theme(colors.orange.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.TimedOut) {
@@ -444,7 +444,7 @@
     border-color: theme(colors.slate.100);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Canceled, .vis-item.vis-point.Unspecified) {
@@ -456,7 +456,7 @@
     border-color: theme(colors.pink.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Fired) {
@@ -468,7 +468,7 @@
     border-color: theme(colors.indigo.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Scheduled) {
@@ -485,7 +485,7 @@
     border-color: theme(colors.blue.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(
@@ -508,7 +508,7 @@
     border-color: theme(colors.purple.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.ContinuedAsNew) {
@@ -516,15 +516,15 @@
   }
 
   :global(.vis-item.vis-range.Completed, .vis-item.vis-range.Open) {
-    background-color: #71d375;
-    border-color: #71d375;
+    background-color: theme(colors.green.300);
+    border-color: theme(colors.green.300);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Completed, .vis-item.vis-point.Open) {
-    color: #71d375;
+    color: theme(colors.green.300);
   }
 
   :global(.vis-item.vis-range.Signaled) {
@@ -532,7 +532,7 @@
     border-color: theme(colors.pink.200);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Signaled) {
@@ -544,7 +544,7 @@
     border-color: theme(colors.yellow.200);
     border-radius: 9999px;
     border-width: 2px;
-    color: theme(colors.black);
+    color: theme(colors.space-black);
   }
 
   :global(.vis-item.vis-point.Paused) {
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index f5be774b8..f2cdf29bb 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -189,11 +189,11 @@
   }
 
   .row:hover {
-    @apply cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100 bg-fixed dark:surface-subtle dark:bg-none;
+    @apply cursor-pointer bg-interactive-table-hover dark:bg-none;
   }
 
   .expanded.row {
-    @apply bg-blue-50 dark:surface-subtle;
+    @apply bg-interactive-table-hover;
   }
 
   .failure {
@@ -237,21 +237,21 @@
   }
 
   .active {
-    @apply cursor-pointer bg-gradient-to-br from-blue-100 to-purple-100 bg-fixed dark:surface-subtle dark:bg-none;
+    @apply cursor-pointer bg-interactive-table-hover bg-fixed dark:bg-none;
   }
 
   .canceled:hover,
   .active.canceled {
-    @apply bg-gradient-to-br from-yellow-100 to-yellow-200 bg-fixed dark:bg-yellow-600 dark:bg-none;
+    @apply bg-yellow-200 bg-fixed dark:bg-yellow-600 dark:bg-none;
   }
 
   .failure:hover,
   .active.failure {
-    @apply bg-gradient-to-br from-red-100 to-red-200 bg-fixed dark:bg-red-900 dark:bg-none;
+    @apply bg-red-200 bg-fixed dark:bg-red-900 dark:bg-none;
   }
 
   .terminated:hover,
   .active.terminated {
-    @apply bg-gradient-to-br from-pink-100 to-pink-200 bg-fixed dark:bg-pink-500 dark:bg-none;
+    @apply bg-pink-200 bg-fixed dark:bg-pink-500 dark:bg-none;
   }
 </style>
diff --git a/src/lib/components/lines-and-dots/svg/group-details-text.svelte b/src/lib/components/lines-and-dots/svg/group-details-text.svelte
index d9d83e244..afe82e2cc 100644
--- a/src/lib/components/lines-and-dots/svg/group-details-text.svelte
+++ b/src/lib/components/lines-and-dots/svg/group-details-text.svelte
@@ -102,7 +102,7 @@
   {/if} -->
 {:else if shouldDisplayAsExecutionLink(key)}
   <Link
-    inverse
+    light
     href={routeForEventHistory({
       namespace,
       workflow,
@@ -111,7 +111,7 @@
   >
 {:else if shouldDisplayChildWorkflowLink(key, attributes)}
   <Link
-    inverse
+    light
     href={routeForEventHistory({
       namespace: attributes?.namespace || namespace,
       workflow: attributes.workflowExecutionWorkflowId,
@@ -119,7 +119,7 @@
     })}>{value}</Link
   >
 {:else if shouldDisplayAsTaskQueueLink(key)}
-  <Link inverse href={routeForTaskQueue({ namespace, queue: value })}
+  <Link light href={routeForTaskQueue({ namespace, queue: value })}
     >{value}</Link
   >
 {:else}
diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index 58ecd50ae..e73d79941 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/src/lib/components/schedule/schedule-form-view.svelte
@@ -145,7 +145,7 @@
       <h1 class="font-base text-2xl">{title}</h1>
     </header>
     <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
-      <Alert intent="error" title="" hidden={!$error} bold>
+      <Alert intent="error" title="" hidden={!$error}>
         {$error}
       </Alert>
       <div class="w-full">
diff --git a/src/lib/components/top-nav.svelte b/src/lib/components/top-nav.svelte
index fb086c961..895de4515 100644
--- a/src/lib/components/top-nav.svelte
+++ b/src/lib/components/top-nav.svelte
@@ -54,7 +54,7 @@
 <svelte:window bind:innerWidth={screenWidth} />
 
 <nav
-  class="surface-primary sticky top-0 z-40 flex w-full flex-col items-center justify-end border-b-2 border-subtle p-1 px-4 shadow-md md:flex-row md:px-8"
+  class="surface-primary sticky top-0 z-40 flex w-full flex-col items-center justify-end border-b border-subtle p-1 px-4 md:flex-row md:px-8"
   data-testid="top-nav"
   class:bg-red-50={$dataEncoder.hasError && showNamespaceSpecificNav}
   aria-label={translate('common.main')}
diff --git a/src/lib/components/workflow-status.svelte b/src/lib/components/workflow-status.svelte
index c68d61a03..88389cb9e 100644
--- a/src/lib/components/workflow-status.svelte
+++ b/src/lib/components/workflow-status.svelte
@@ -50,7 +50,7 @@
         status: {
           Running: 'bg-blue-300',
           TimedOut: 'bg-orange-300',
-          Completed: 'bg-[#71D375]',
+          Completed: 'bg-green-300',
           Failed: 'bg-red-300',
           ContinuedAsNew: 'bg-purple-300',
           Canceled: 'bg-slate-100',
@@ -59,7 +59,7 @@
           Unspecified: 'bg-slate-100',
           Scheduled: 'bg-indigo-300',
           Started: 'bg-blue-300',
-          Open: 'bg-[#71D375]',
+          Open: 'bg-green-300',
           New: 'bg-blue-300',
           Initiated: 'bg-blue-300',
           Fired: 'bg-pink-300',
diff --git a/src/lib/components/workflow/pending-activities.svelte b/src/lib/components/workflow/pending-activities.svelte
index 299ad47ef..efa8675ee 100644
--- a/src/lib/components/workflow/pending-activities.svelte
+++ b/src/lib/components/workflow/pending-activities.svelte
@@ -65,7 +65,7 @@
                     <h4 class="pending-activity-detail-header">
                       {translate('workflows.activity-type')}
                     </h4>
-                    <Badge type={failed ? 'error' : undefined}>
+                    <Badge type={failed ? 'danger' : undefined}>
                       {pendingActivity.activityType}
                     </Badge>
                   </div>
@@ -85,7 +85,7 @@
                     <h4 class="pending-activity-detail-header">
                       {translate('workflows.attempt')}
                     </h4>
-                    <Badge type={failed ? 'error' : undefined}>
+                    <Badge type={failed ? 'danger' : undefined}>
                       {#if failed}
                         <Icon name="retry" />
                       {/if}
@@ -96,7 +96,7 @@
                     <h4 class="pending-activity-detail-header">
                       {translate('workflows.attempts-left')}
                     </h4>
-                    <Badge type={failed ? 'error' : undefined}>
+                    <Badge type={failed ? 'danger' : undefined}>
                       {formatAttemptsLeft(
                         pendingActivity.maximumAttempts,
                         pendingActivity.attempt,
@@ -108,7 +108,7 @@
                       <h4 class="pending-activity-detail-header">
                         {translate('workflows.next-retry')}
                       </h4>
-                      <Badge type={failed ? 'error' : undefined}>
+                      <Badge type={failed ? 'danger' : undefined}>
                         {toTimeDifference({
                           date: pendingActivity.scheduledTime,
                           negativeDefault: 'None',
diff --git a/src/lib/components/workflow/workflow-call-stack-error.svelte b/src/lib/components/workflow/workflow-call-stack-error.svelte
index 627f31a79..fed547c14 100644
--- a/src/lib/components/workflow/workflow-call-stack-error.svelte
+++ b/src/lib/components/workflow/workflow-call-stack-error.svelte
@@ -12,7 +12,6 @@
 {#if runningWithNoWorkers}
   <div class="mb-4" in:fly={{ duration: 200, delay: 100 }}>
     <Alert
-      bold
       icon="warning"
       intent="warning"
       title={translate('workflows.workflow-error-no-workers-title')}
diff --git a/src/lib/components/workflow/workflow-compatibility-error.svelte b/src/lib/components/workflow/workflow-compatibility-error.svelte
index 50217216e..932c578a0 100644
--- a/src/lib/components/workflow/workflow-compatibility-error.svelte
+++ b/src/lib/components/workflow/workflow-compatibility-error.svelte
@@ -19,7 +19,6 @@
 {#if !runningWithNoWorkers && runningWithNoCompatibleWorkers}
   <div class="mb-4" in:fly={{ duration: 200, delay: 100 }}>
     <Alert
-      bold
       icon="warning"
       intent="warning"
       title={translate('workflows.workflow-error-no-compatible-workers-title')}
diff --git a/src/lib/components/workflow/workflow-typed-error.svelte b/src/lib/components/workflow/workflow-typed-error.svelte
index 5a1682fc7..9bb50a0e0 100644
--- a/src/lib/components/workflow/workflow-typed-error.svelte
+++ b/src/lib/components/workflow/workflow-typed-error.svelte
@@ -39,7 +39,6 @@
 
 {#if cause}
   <Alert
-    bold
     icon="warning"
     intent="warning"
     title={translate(`typed-errors.${cause}.title`)}
diff --git a/src/lib/components/workflow/workflows-summary-row.svelte b/src/lib/components/workflow/workflows-summary-row.svelte
index 2568c3670..88b2e3e78 100644
--- a/src/lib/components/workflow/workflows-summary-row.svelte
+++ b/src/lib/components/workflow/workflows-summary-row.svelte
@@ -44,7 +44,7 @@
   };
 </script>
 
-<TableRow class="hover:surface-subtle">
+<TableRow class="hover:bg-interactive-table-hover">
   <td>
     <WorkflowStatus
       status={workflow.status}
diff --git a/src/lib/holocene/accordion.svelte b/src/lib/holocene/accordion.svelte
index 22bc34f00..9888fb00c 100644
--- a/src/lib/holocene/accordion.svelte
+++ b/src/lib/holocene/accordion.svelte
@@ -10,13 +10,14 @@
 
   import type { IconName } from './icon';
 
+  import Button from './button.svelte';
+
   interface $$Props extends HTMLAttributes<HTMLDivElement> {
     title: string;
     id?: string;
     subtitle?: string;
     icon?: IconName;
     open?: boolean;
-    readOnly?: boolean;
     error?: string;
     onToggle?: () => void;
     'data-testid'?: string;
@@ -41,7 +42,7 @@
 
 <div
   class={merge(
-    'surface-primary flex w-full cursor-default flex-col rounded-xl border-2 p-4 text-primary dark:border-subtle',
+    'surface-primary flex w-full cursor-default flex-col rounded-2xl border-2 border-subtle p-4 text-primary hover:bg-interactive-secondary-hover',
     className,
   )}
   {...$$restProps}
@@ -67,15 +68,14 @@
       >
         <slot name="action" />
       </div>
-      <div
-        class="rounded-full from-blue-100 to-purple-100 p-1 hover:bg-gradient-to-br dark:from-blue-800 dark:to-purple-800"
-      >
-        <Icon name={open ? 'chevron-up' : 'chevron-down'} />
-      </div>
+      <Button
+        leadingIcon={open ? 'chevron-up' : 'chevron-down'}
+        variant="ghost"
+      />
     </div>
     <p class="flex items-center font-secondary">
       {#if error}
-        <Badge class="mr-2" type="error">{error}</Badge>
+        <Badge class="mr-2" type="danger">{error}</Badge>
       {/if}
       {subtitle}
     </p>
diff --git a/src/lib/holocene/alert.stories.svelte b/src/lib/holocene/alert.stories.svelte
index 295367717..defc43444 100644
--- a/src/lib/holocene/alert.stories.svelte
+++ b/src/lib/holocene/alert.stories.svelte
@@ -7,7 +7,6 @@
     args: {
       title: 'Alert Title',
       intent: 'info',
-      bold: false,
       hidden: false,
     },
     argTypes: {
diff --git a/src/lib/holocene/alert.svelte b/src/lib/holocene/alert.svelte
index 59eec3352..e292f33fe 100644
--- a/src/lib/holocene/alert.svelte
+++ b/src/lib/holocene/alert.svelte
@@ -14,7 +14,6 @@
     intent: Intent;
     title?: string;
     icon?: AlertIcon;
-    bold?: boolean;
     'data-testid'?: string;
     hidden?: boolean;
   }
@@ -22,7 +21,6 @@
   export let intent: Intent;
   export let title = '';
   export let icon: AlertIcon = intent;
-  export let bold = false;
   export let hidden = false;
 
   let className = '';
@@ -47,7 +45,6 @@
 
 <div
   class={merge('alert flex', intent, className)}
-  class:bold
   class:hidden
   {role}
   {...$$restProps}
@@ -71,11 +68,7 @@
 
 <style lang="postcss">
   .alert {
-    @apply rounded-md border-2 p-5 font-primary text-sm text-primary;
-  }
-
-  .alert.bold {
-    @apply rounded-xl;
+    @apply rounded-lg border-2 p-5 font-primary text-sm text-primary;
   }
 
   .alert.success {
diff --git a/src/lib/holocene/api-pagination.svelte b/src/lib/holocene/api-pagination.svelte
index c5d94bb16..8c13f1103 100644
--- a/src/lib/holocene/api-pagination.svelte
+++ b/src/lib/holocene/api-pagination.svelte
@@ -206,7 +206,6 @@
   <slot name="error" />
 {:else if error}
   <Alert
-    bold
     intent="error"
     class="mb-10"
     title={error?.message ?? fallbackErrorMessage}
diff --git a/src/lib/holocene/badge.stories.svelte b/src/lib/holocene/badge.stories.svelte
index fc61fa948..ec6d6b2d3 100644
--- a/src/lib/holocene/badge.stories.svelte
+++ b/src/lib/holocene/badge.stories.svelte
@@ -3,9 +3,7 @@
 
   import Badge, { badgeTypes } from './badge.svelte';
 
-  const types = badgeTypes.filter(
-    (type) => type !== 'count' && type !== 'unspecified',
-  );
+  const types = badgeTypes.filter((type) => type !== 'count');
 
   export const meta = {
     title: 'Badge',
@@ -30,7 +28,6 @@
 
 <Template let:args>
   <div class="flex flex-col gap-2">
-    <Badge type="unspecified">{args.label}</Badge>
     {#each types as type}
       <Badge {type} class="capitalize">{type.replace(/-/g, ' ')}</Badge>
     {/each}
diff --git a/src/lib/holocene/badge.svelte b/src/lib/holocene/badge.svelte
index b0eadaa58..5f50dd5ab 100644
--- a/src/lib/holocene/badge.svelte
+++ b/src/lib/holocene/badge.svelte
@@ -5,18 +5,13 @@
   export type BadgeType = VariantProps<typeof types>['type'];
 
   const type = {
-    alpha: 'bg-purple-100 text-purple-700',
-    beta: 'bg-indigo-400',
-    success: 'bg-green-100 text-green-800',
-    information: 'bg-indigo-400',
-    error: 'bg-red-300',
+    primary: 'bg-blue-300',
+    secondary: 'bg-purple-300',
+    default: 'bg-slate-100',
     warning: 'bg-yellow-200',
-    unspecified: 'bg-slate-100',
-    active: 'bg-green-100 text-green-800',
-    inactive: 'bg-slate-100',
-    available: 'bg-green-100 text-green-800',
-    running: 'bg-indigo-400',
-    count: 'h-6 w-6 min-w-max rounded-full bg-indigo-400',
+    success: 'bg-green-300',
+    danger: 'bg-red-300',
+    count: 'h-6 w-6 min-w-max rounded-full bg-blue-300',
   };
 
   const types = cva(
@@ -41,7 +36,7 @@
         type,
       },
       defaultVariants: {
-        type: 'unspecified',
+        type: 'default',
       },
     },
   );
@@ -50,12 +45,12 @@
 </script>
 
 <script lang="ts">
-  export let type: BadgeType | undefined | null | false = 'unspecified';
+  export let type: BadgeType | undefined | null | false = 'default';
 
   let className = '';
   export { className as class };
 </script>
 
-<div class={merge(types({ type: type || 'unspecified' }), className)}>
+<div class={merge(types({ type: type || 'default' }), className)}>
   <slot />
 </div>
diff --git a/src/lib/holocene/card.svelte b/src/lib/holocene/card.svelte
index fcd37c529..2537d7efc 100644
--- a/src/lib/holocene/card.svelte
+++ b/src/lib/holocene/card.svelte
@@ -4,6 +4,6 @@
 
 <style lang="postcss">
   .card {
-    @apply rounded-xl border-2 p-5 dark:border-subtle;
+    @apply rounded-2xl border-2 border-subtle p-5;
   }
 </style>
diff --git a/src/lib/holocene/day-of-month-picker.svelte b/src/lib/holocene/day-of-month-picker.svelte
index 7d6790236..1cd9b9021 100644
--- a/src/lib/holocene/day-of-month-picker.svelte
+++ b/src/lib/holocene/day-of-month-picker.svelte
@@ -20,7 +20,7 @@
 
 <div class="text-center">
   <div
-    class="surface-primary grid gap-x-4 gap-y-4 rounded border px-0 py-4 text-center md:gap-x-8 md:px-2 xl:gap-x-16 xl:px-4"
+    class="surface-primary grid gap-x-4 gap-y-4 rounded border border-subtle px-0 py-4 text-center md:gap-x-8 md:px-2 xl:gap-x-16 xl:px-4"
   >
     {#each daysInMonth as day}
       {@const active = daysOfMonth.includes(day)}
diff --git a/src/lib/holocene/drawer-content.svelte b/src/lib/holocene/drawer-content.svelte
index 394a02862..dd30e954c 100644
--- a/src/lib/holocene/drawer-content.svelte
+++ b/src/lib/holocene/drawer-content.svelte
@@ -24,7 +24,7 @@
     @apply flex flex-col justify-center gap-2 px-8 py-4;
 
     &.bottom {
-      @apply items-center p-0;
+      @apply items-start;
     }
 
     &.right {
diff --git a/src/lib/holocene/drawer.svelte b/src/lib/holocene/drawer.svelte
index 7140ef49a..c7337d110 100644
--- a/src/lib/holocene/drawer.svelte
+++ b/src/lib/holocene/drawer.svelte
@@ -34,10 +34,10 @@
   <aside
     {id}
     class={merge(
-      'surface-primary fixed z-[55] h-auto overflow-y-auto rounded-t-lg text-primary shadow-xl',
-      position === 'bottom' && 'bottom-0 left-0 right-0',
+      'surface-primary fixed z-[55] h-auto overflow-y-auto border-subtle text-primary',
+      position === 'bottom' && 'bottom-0 left-0 right-0 border-t',
       position === 'right' &&
-        'bottom-0 right-0 top-0 h-full rounded-bl-lg rounded-tr-none',
+        'bottom-0 right-0 top-0 h-full rounded-bl-lg rounded-tr-none border-l',
       dark && 'bg-black text-off-white',
       className,
     )}
diff --git a/src/lib/holocene/link.stories.svelte b/src/lib/holocene/link.stories.svelte
index 09b4339d6..c7fea771f 100644
--- a/src/lib/holocene/link.stories.svelte
+++ b/src/lib/holocene/link.stories.svelte
@@ -13,7 +13,7 @@
       icon: undefined,
       active: false,
       newTab: false,
-      inverse: false,
+      light: false,
     },
     argTypes: {
       href: { control: 'text' },
@@ -28,7 +28,7 @@
 </script>
 
 <Template let:args>
-  <div class={twMerge(args.inverse && 'bg-inverse')}>
+  <div class={twMerge(args.light && 'bg-space-black')}>
     <Link {...args}>This is a link.</Link>
   </div>
 </Template>
@@ -41,7 +41,7 @@
 
 <Story name="Open in New Tab" args={{ newTab: true }} />
 
-<Story name="Inverse" args={{ inverse: true }} />
+<Story name="Light" args={{ light: true }} />
 
 <Story
   name="Default (Dark)"
@@ -83,8 +83,8 @@
 />
 
 <Story
-  name="Inverse (Dark)"
-  args={{ inverse: true }}
+  name="Light (Dark)"
+  args={{ light: true }}
   parameters={{
     themes: {
       themeOverride: 'dark',
diff --git a/src/lib/holocene/link.svelte b/src/lib/holocene/link.svelte
index 928234805..e5b079059 100644
--- a/src/lib/holocene/link.svelte
+++ b/src/lib/holocene/link.svelte
@@ -16,7 +16,7 @@
     class?: string;
     icon?: IconName;
     text?: string;
-    inverse?: boolean;
+    light?: boolean;
     'data-testid'?: string;
   };
 
@@ -27,7 +27,7 @@
   export let newTab = false;
   export let icon: IconName = null;
   export let text: string = '';
-  export let inverse = false;
+  export let light = false;
 
   const onLinkClick = (e: MouseEvent) => {
     // Skip if middle mouse click or new tab
@@ -44,7 +44,7 @@
   rel={newTab ? 'noreferrer' : null}
   class={merge('link', icon ? 'inline-flex' : 'inline', className)}
   class:active
-  class:inverse
+  class:light
   on:click={onLinkClick}
   tabindex={href ? null : 0}
   {...$$restProps}
@@ -66,8 +66,8 @@
       @apply text-brand;
     }
 
-    &.inverse {
-      @apply text-inverse hover:text-brand focus-visible:text-brand;
+    &.light {
+      @apply text-off-white;
     }
   }
 
diff --git a/src/lib/holocene/menu/menu.svelte b/src/lib/holocene/menu/menu.svelte
index cf53517fe..7735db1c3 100644
--- a/src/lib/holocene/menu/menu.svelte
+++ b/src/lib/holocene/menu/menu.svelte
@@ -58,7 +58,7 @@
 
 <style lang="postcss">
   .menu {
-    @apply surface-primary absolute z-20 mt-1 min-w-full list-none overflow-auto rounded-lg border border-primary text-primary shadow;
+    @apply surface-primary absolute z-20 mt-1 min-w-full list-none overflow-auto rounded-lg border-2 border-subtle text-primary shadow;
 
     &.left {
       @apply left-0 origin-top-left;
diff --git a/src/lib/holocene/modal.stories.svelte b/src/lib/holocene/modal.stories.svelte
index 331cfe5af..709e4abaf 100644
--- a/src/lib/holocene/modal.stories.svelte
+++ b/src/lib/holocene/modal.stories.svelte
@@ -12,7 +12,6 @@
       loading: false,
       error: '',
       confirmText: 'Confirm',
-      confirmType: 'destructive',
       hideConfirm: false,
       confirmDisabled: false,
       cancelText: 'Cancel',
diff --git a/src/lib/holocene/modal.svelte b/src/lib/holocene/modal.svelte
index 0244faf90..fe1ee1d4f 100644
--- a/src/lib/holocene/modal.svelte
+++ b/src/lib/holocene/modal.svelte
@@ -115,7 +115,7 @@
       </p>
     </div>
     <div class="flex items-center justify-end space-x-2 p-6">
-      <Button variant="secondary" disabled={loading} on:click={handleCancel}
+      <Button variant="ghost" disabled={loading} on:click={handleCancel}
         >{cancelText}</Button
       >
       {#if !hideConfirm}
@@ -133,7 +133,7 @@
 
 <style lang="postcss">
   .body {
-    @apply surface-primary z-50 w-full max-w-lg overflow-y-auto rounded-lg p-0 text-primary shadow-xl md:h-max;
+    @apply surface-primary z-50 w-full max-w-lg overflow-y-auto rounded-2xl border-2 border-secondary p-0 text-primary shadow-xl md:h-max;
   }
 
   .body::backdrop {
diff --git a/src/lib/holocene/orderable-list/orderable-list-item.svelte b/src/lib/holocene/orderable-list/orderable-list-item.svelte
index 545c50586..c7e107e70 100644
--- a/src/lib/holocene/orderable-list/orderable-list-item.svelte
+++ b/src/lib/holocene/orderable-list/orderable-list-item.svelte
@@ -157,7 +157,7 @@
   }
 
   hr {
-    @apply pointer-events-none border-primary last-of-type:hidden dark:border-subtle;
+    @apply pointer-events-none border-subtle last-of-type:hidden;
   }
 
   :global(.orderable-item.dragging-over:not(.locked)) {
diff --git a/src/lib/holocene/orderable-list/orderable-list.svelte b/src/lib/holocene/orderable-list/orderable-list.svelte
index 8bd1996fc..089df735c 100644
--- a/src/lib/holocene/orderable-list/orderable-list.svelte
+++ b/src/lib/holocene/orderable-list/orderable-list.svelte
@@ -23,6 +23,6 @@
   }
 
   .orderable-list {
-    @apply surface-primary rounded-lg border-2 border-primary dark:border-subtle;
+    @apply surface-primary rounded-lg border-2 border-subtle;
   }
 </style>
diff --git a/src/lib/holocene/table/paginated-table.svelte b/src/lib/holocene/table/paginated-table.svelte
index 609b22f52..3ffa95acc 100644
--- a/src/lib/holocene/table/paginated-table.svelte
+++ b/src/lib/holocene/table/paginated-table.svelte
@@ -182,7 +182,7 @@
     @apply surface-primary;
 
     :global(tr:not(.empty)) {
-      @apply h-12 border-b border-table hover:surface-subtle last-of-type:border-0 hover:bg-fixed;
+      @apply h-12 border-b border-table last-of-type:border-0 hover:bg-interactive-table-hover hover:bg-fixed;
     }
 
     :global(tr > td > .table-link) {
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.svelte
index 9c6bec4fe..f12fd3a9b 100644
--- a/src/lib/layouts/workflow-header.svelte
+++ b/src/lib/layouts/workflow-header.svelte
@@ -140,7 +140,7 @@
             }),
           )}
         >
-          <Badge type="information" class="px-2 py-0">
+          <Badge type="primary" class="px-2 py-0">
             {workflow?.historyEvents}
           </Badge>
         </Tab>
@@ -153,7 +153,7 @@
             routeForWorkers(routeParameters),
           )}
         >
-          <Badge type="information" class="px-2 py-0">
+          <Badge type="primary" class="px-2 py-0">
             {workers?.pollers?.length}
           </Badge>
         </Tab>
@@ -166,7 +166,7 @@
             routeForRelationships(routeParameters),
           )}
         >
-          <Badge type="information" class="px-2 py-0"
+          <Badge type="primary" class="px-2 py-0"
             >{workflowRelationships.relationshipCount}</Badge
           >
         </Tab>
@@ -181,7 +181,7 @@
             )}
           >
             <Badge
-              type={activitiesCanceled ? 'warning' : 'information'}
+              type={activitiesCanceled ? 'warning' : 'primary'}
               class="px-2 py-0"
             >
               <div class="flex items-center gap-1">
@@ -225,7 +225,6 @@
     {#if cancelInProgress}
       <div in:fly={{ duration: 200, delay: 100 }}>
         <Alert
-          bold
           icon="info"
           intent="info"
           title={translate('workflows.cancel-request-sent')}
@@ -237,7 +236,6 @@
     {#if workflowHasBeenReset}
       <div in:fly={{ duration: 200, delay: 100 }}>
         <Alert
-          bold
           icon="info"
           intent="info"
           data-testid="workflow-reset-alert"
diff --git a/src/lib/pages/workflow-pending-activities.svelte b/src/lib/pages/workflow-pending-activities.svelte
index 698cb6a81..8f0da4cdc 100644
--- a/src/lib/pages/workflow-pending-activities.svelte
+++ b/src/lib/pages/workflow-pending-activities.svelte
@@ -46,13 +46,13 @@
               <h4 class="font-semibold">
                 {translate('workflows.activity-type')}
               </h4>
-              <Badge type={failed ? 'error' : undefined}>
+              <Badge type={failed ? 'danger' : undefined}>
                 {details.activityType}
               </Badge>
             </li>
             <li class="event-table-row">
               <h4>{translate('workflows.attempt')}</h4>
-              <Badge type={failed ? 'error' : 'unspecified'}>
+              <Badge type={failed ? 'danger' : undefined}>
                 {#if failed}
                   <Icon class="mr-1" name="retry" />
                 {/if}
@@ -62,14 +62,14 @@
             {#if failed}
               <li class="event-table-row">
                 <h4>{translate('workflows.attempts-left')}</h4>
-                <Badge type="error">
+                <Badge type="danger">
                   {formatAttemptsLeft(details.maximumAttempts, details.attempt)}
                 </Badge>
               </li>
               {#if details.scheduledTime}
                 <li class="event-table-row">
                   <h4>{translate('workflows.next-retry')}</h4>
-                  <Badge type="error">
+                  <Badge type="danger">
                     {toTimeDifference({
                       date: details.scheduledTime,
                       negativeDefault: translate('workflows.no-retry'),
diff --git a/src/lib/theme/plugin.ts b/src/lib/theme/plugin.ts
index e0e2eea00..612682e99 100644
--- a/src/lib/theme/plugin.ts
+++ b/src/lib/theme/plugin.ts
@@ -123,6 +123,7 @@ const temporal = plugin(
         'interactive-secondary-active': css(
           '--color-interactive-secondary-active',
         ),
+        'interactive-table-hover': css('--color-interactive-table-hover'),
 
         information: css('--color-surface-information'),
         success: css('--color-surface-success'),
diff --git a/src/lib/theme/variables.ts b/src/lib/theme/variables.ts
index 002a99f06..23399a778 100644
--- a/src/lib/theme/variables.ts
+++ b/src/lib/theme/variables.ts
@@ -150,13 +150,17 @@ export const variables = {
     dark: 'red.500',
   },
   '--color-interactive-ghost-hover': {
-    light: 'slate.50',
+    light: 'slate.100',
     dark: 'slate.700',
   },
   '--color-interactive-ghost-active': {
     light: 'slate.100',
     dark: 'slate.950',
   },
+  '--color-interactive-table-hover': {
+    light: 'indigo.100',
+    dark: 'slate.900',
+  },
   // Border
   '--color-border-primary': {
     light: 'space-black',
diff --git a/src/routes/(app)/namespaces/[namespace]/+page.svelte b/src/routes/(app)/namespaces/[namespace]/+page.svelte
index 673a6542f..4ad03603b 100644
--- a/src/routes/(app)/namespaces/[namespace]/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/+page.svelte
@@ -28,8 +28,8 @@
 
   const badgeTypeForArchivalState = (state: ArchivalState): BadgeType => {
     return state === ArchivalState.ARCHIVAL_STATE_ENABLED
-      ? 'active'
-      : 'inactive';
+      ? 'success'
+      : undefined;
   };
 
   const badgeTypeForBoolean = (
@@ -37,10 +37,10 @@
     invertLogic = true,
   ): BadgeType => {
     if (invertLogic) {
-      return bool ? 'inactive' : 'active';
+      return bool ? undefined : 'success';
     }
 
-    return bool ? 'active' : 'inactive';
+    return bool ? 'success' : undefined;
   };
 
   const badgeTextForBoolean = (bool: boolean) => {