From 7a58e3c81769178c24fc860455941f47986edbe7 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 9 Aug 2021 15:47:30 +0100
Subject: [PATCH] Add Quiet and Emphasized variants to the Tabs and Tab
 components

---
 packages/bbui/src/Tabs/Tab.svelte  |  7 +++++++
 packages/bbui/src/Tabs/Tabs.svelte | 14 +++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte
index b0f59c76f0..3644280edf 100644
--- a/packages/bbui/src/Tabs/Tab.svelte
+++ b/packages/bbui/src/Tabs/Tab.svelte
@@ -30,6 +30,7 @@
   on:click={onClick}
   class:is-selected={$selected.title === title}
   class="spectrum-Tabs-item"
+  class:emphasized={$selected.title === title && $selected.emphasized}
   tabindex="0"
 >
   {#if icon}
@@ -49,3 +50,9 @@
     <slot />
   </Portal>
 {/if}
+
+<style>
+  .emphasized {
+    color: var(--spectrum-global-color-blue-600);
+  }
+</style>
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 77a8526a15..bcfe7b1750 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -6,9 +6,11 @@
   export let selected
   export let vertical = false
   export let noPadding = false
+  export let quiet = false
+  export let emphasized = false
 
   let _id = id()
-  const tab = writable({ title: selected, id: _id })
+  const tab = writable({ title: selected, id: _id, emphasized })
   setContext("tab", tab)
 
   let container
@@ -56,7 +58,9 @@
 
 <div
   bind:this={container}
-  class="selected-border spectrum-Tabs spectrum-Tabs--{vertical
+  class:quiet
+  class="selected-border spectrum-Tabs {quiet &&
+    'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
     ? 'vertical'
     : 'horizontal'}"
 >
@@ -64,7 +68,7 @@
   {#if $tab.info}
     <div
       class="spectrum-Tabs-selectionIndicator indicator-transition"
-      style="width: {width}; height: {height}; left: {left}; top: {top};"
+      style=" background-color: {'var(--spectrum-global-color-blue-400)'}; width: {width}; height: {height}; left: {left}; top: {top};"
     />
   {/if}
 </div>
@@ -75,6 +79,10 @@
 />
 
 <style>
+  .quiet {
+    border-bottom: none !important;
+  }
+
   .spectrum-Tabs {
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);