Add accent colors to all buttons

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -3,6 +3,7 @@
   import { createEventDispatcher } from "svelte"
   import Tooltip from "../Tooltip/Tooltip.svelte"
   import { fade } from "svelte/transition"
+  import { hexToRGBA } from "../helpers"
 
   const dispatch = createEventDispatcher()
 
@@ -17,9 +18,22 @@
   export let fullWidth = false
   export let noPadding = false
   export let tooltip = ""
+  export let accentColor = null
 
   let showTooltip = false
 
+  $: accentStyle = getAccentStyle(accentColor)
+
+  const getAccentStyle = color => {
+    if (!color) {
+      return ""
+    }
+    let style = ""
+    style += `--accent-bg-color:${hexToRGBA(color, 0.15)};`
+    style += `--accent-border-color:${hexToRGBA(color, 0.35)};`
+    return style
+  }
+
   function longPress(element) {
     if (!longPressable) return
     let timer
@@ -47,6 +61,7 @@
   on:mouseover={() => (showTooltip = true)}
   on:mouseleave={() => (showTooltip = false)}
   on:focus={() => (showTooltip = true)}
+  style={accentStyle}
 >
   <button
     use:longPress
@@ -58,6 +73,7 @@
     class="spectrum-ActionButton spectrum-ActionButton--size{size}"
     class:active
     class:disabled
+    class:accent={accentColor != null}
     {disabled}
     on:longPress
     on:click|preventDefault
@@ -138,4 +154,10 @@
     text-align: center;
     z-index: 1;
   }
+
+  button.accent.is-selected,
+  button:active.accent {
+    border: 1px solid var(--accent-border-color);
+    background: var(--accent-bg-color);
+  }
 </style>

packages/bbui/src/helpers.js

@@ -228,3 +228,13 @@ export const getDateDisplayValue = (
     return value.format(`${localeDateFormat} HH:mm`)
   }
 }
+
+export const hexToRGBA = (color, opacity) => {
+  if (color.includes("#")) {
+    color = color.replace("#", "")
+  }
+  const r = parseInt(color.substring(0, 2), 16)
+  const g = parseInt(color.substring(2, 4), 16)
+  const b = parseInt(color.substring(4, 6), 16)
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`
+}

packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte

@@ -44,7 +44,14 @@
   }
 </script>
 
-<ActionButton icon="Filter" quiet {disabled} on:click={drawer.show} {selected}>
+<ActionButton
+  icon="Filter"
+  quiet
+  {disabled}
+  on:click={drawer.show}
+  {selected}
+  accentColor="#004EA6"
+>
   {text}
 </ActionButton>
 

packages/builder/src/components/backend/DataTable/buttons/grid/GridAutomationsButton.svelte

@@ -39,9 +39,14 @@
 
 <DetailPopover title="Automations" minWidth={400} bind:this={popover}>
   <svelte:fragment slot="anchor" let:open>
-    <ActionButton icon="JourneyVoyager" selected={open} quiet
+    <ActionButton
-      >Automations</ActionButton
+      icon="JourneyVoyager"
+      selected={open || connectedAutomations.length}
+      quiet
+      accentColor="#5610AD"
     >
+      Automations
+    </ActionButton>
   </svelte:fragment>
   {#if !connectedAutomations.length}
     There aren't any automations connected to this data.

packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte

@@ -22,6 +22,7 @@
     on:click={() => (open = !open)}
     selected={open || anyRestricted}
     disabled={!$columns.length}
+    accentColor="#674D00"
   >
     {text}
   </ActionButton>

packages/builder/src/components/backend/DataTable/buttons/grid/GridRowActionsButton.svelte

@@ -23,8 +23,8 @@
   $: tableId = ds?.tableId
   $: isView = ds?.type === "viewV2"
   $: fetchRowActions(tableId)
-  $: activeCount = 0
+  $: viewActiveCount = 0
-  $: suffix = isView ? activeCount : rowActions.length
+  $: activeCount = isView ? viewActiveCount : rowActions.length
 
   const rowActionUrl = derived([url, appStore], ([$url, $appStore]) => {
     return ({ automationId }) => {
@@ -62,8 +62,13 @@
 
 <DetailPopover title="Row actions" minWidth={400} maxWidth={400}>
   <svelte:fragment slot="anchor" let:open>
-    <ActionButton icon="Engagement" selected={open} quiet>
+    <ActionButton
-      Row actions ({suffix})
+      icon="Engagement"
+      selected={open || activeCount}
+      quiet
+      accentColor="#A24400"
+    >
+      Row actions ({activeCount})
     </ActionButton>
   </svelte:fragment>
   A row action is a user-triggered automation for a chosen row.

packages/builder/src/components/backend/DataTable/buttons/grid/GridScreensButton.svelte

@@ -19,7 +19,14 @@
 
 <DetailPopover title="Screens" minWidth={400}>
   <svelte:fragment slot="anchor" let:open>
-    <ActionButton icon="WebPage" selected={open} quiet>Screens</ActionButton>
+    <ActionButton
+      icon="WebPage"
+      selected={open || connectedScreens.length}
+      quiet
+      accentColor="#364800"
+    >
+      Screens
+    </ActionButton>
   </svelte:fragment>
   {#if !connectedScreens.length}
     There aren't any screens connected to this data.