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 1/3] 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);

From dc9d69910b0fb5195c80a1a88d40bc0ffd7be30a Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 9 Aug 2021 15:55:03 +0100
Subject: [PATCH 2/3] fix underline conditional

---
 packages/bbui/src/Tabs/Tabs.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index bcfe7b1750..d8b8e3b735 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -68,7 +68,8 @@
   {#if $tab.info}
     <div
       class="spectrum-Tabs-selectionIndicator indicator-transition"
-      style=" background-color: {'var(--spectrum-global-color-blue-400)'}; width: {width}; height: {height}; left: {left}; top: {top};"
+      style="{quiet &&
+        'background-color: var(--spectrum-global-color-blue-400)'}; width: {width}; height: {height}; left: {left}; top: {top};"
     />
   {/if}
 </div>

From 2500b465e1c9139e53d9580976c1877323b0bff4 Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Mon, 9 Aug 2021 15:56:05 +0100
Subject: [PATCH 3/3] border fix

---
 packages/bbui/src/Tabs/Tabs.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index d8b8e3b735..2a4017e605 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -68,7 +68,7 @@
   {#if $tab.info}
     <div
       class="spectrum-Tabs-selectionIndicator indicator-transition"
-      style="{quiet &&
+      style="{emphasized &&
         'background-color: var(--spectrum-global-color-blue-400)'}; width: {width}; height: {height}; left: {left}; top: {top};"
     />
   {/if}