From 6eeb5cbd7c7744f9f8db4d3b392b967c9c4f91c8 Mon Sep 17 00:00:00 2001
From: Matt Stover <mcs@mcstover.com>
Date: Tue, 19 Oct 2021 09:16:27 -0700
Subject: [PATCH 1/2] feat: Wrap KvTooltip in kiva classic theme provider and
 use the mint theme for existing usages.

---
 src/components/Checkout/CheckoutReceipt.vue   |   2 +-
 .../Checkout/DonateRepaymentsToggle.vue       |   2 +-
 src/components/Checkout/OrderTotals.vue       |   1 +
 src/components/Kv/KvTooltip.vue               | 130 +++++++-----------
 4 files changed, 56 insertions(+), 79 deletions(-)

diff --git a/src/components/Checkout/CheckoutReceipt.vue b/src/components/Checkout/CheckoutReceipt.vue
index 7e453b4df4..513aca4eac 100644
--- a/src/components/Checkout/CheckoutReceipt.vue
+++ b/src/components/Checkout/CheckoutReceipt.vue
@@ -87,7 +87,7 @@
 										:id="`print-card-${card.id}`"
 										class="loan__question-icon"
 									/>
-									<kv-tooltip :controller="`print-card-${card.id}`">
+									<kv-tooltip :controller="`print-card-${card.id}`" theme="mint">
 										You can print this card now. We'll also send it to
 										you in an email so you can print it later.
 									</kv-tooltip>
diff --git a/src/components/Checkout/DonateRepaymentsToggle.vue b/src/components/Checkout/DonateRepaymentsToggle.vue
index 9c62b2e450..27b435deb1 100644
--- a/src/components/Checkout/DonateRepaymentsToggle.vue
+++ b/src/components/Checkout/DonateRepaymentsToggle.vue
@@ -10,7 +10,7 @@
 		>
 			<span id="donate-repayments-tooltip">Donate loan repayments instead?</span>
 		</kv-checkbox>
-		<kv-tooltip controller="donate-repayments-tooltip">
+		<kv-tooltip controller="donate-repayments-tooltip" theme="mint">
 			<template #title>
 				Thanks for your support!
 			</template>
diff --git a/src/components/Checkout/OrderTotals.vue b/src/components/Checkout/OrderTotals.vue
index 08e390c309..cf38f1d0d6 100644
--- a/src/components/Checkout/OrderTotals.vue
+++ b/src/components/Checkout/OrderTotals.vue
@@ -57,6 +57,7 @@
 			<kv-tooltip
 				class="tooltip"
 				controller="promo_name"
+				theme="mint"
 				v-if="promoFundDisplayDescription"
 			>
 				{{ promoFundDisplayDescription }}
diff --git a/src/components/Kv/KvTooltip.vue b/src/components/Kv/KvTooltip.vue
index 9d98aa3018..fd11e484ba 100644
--- a/src/components/Kv/KvTooltip.vue
+++ b/src/components/Kv/KvTooltip.vue
@@ -1,38 +1,58 @@
 <template>
-	<kv-popper
-		:controller="controller"
-		:popper-modifiers="popperModifiers"
-		popper-placement="top"
-		transition-type="kvfastfade"
-		class="tooltip-pane"
-	>
-		<div class="tooltip-content">
-			<div class="title-slot" v-if="this.$slots.title">
-				<slot name="title"></slot>
+	<kv-theme-provider :theme="themeStyle" class="kv-tailwind">
+		<kv-popper
+			:controller="controller"
+			:popper-modifiers="popperModifiers"
+			popper-placement="top"
+			transition-type="kvfastfade"
+			class="tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover"
+		>
+			<div class="tw-p-2.5" style="max-width: 250px;">
+				<div class="tw-text-primary tw-font-medium tw-mb-1.5" v-if="this.$slots.title">
+					<slot name="title"></slot>
+				</div>
+				<div class="tw-text-primary">
+					<slot></slot>
+				</div>
 			</div>
-			<div class="default-slot">
-				<slot></slot>
-			</div>
-		</div>
-		<div class="tooltip-arrow" x-arrow="">
-			<div class="tooltip-inner-arrow"></div>
-		</div>
-	</kv-popper>
+			<div class="tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid" x-arrow=""></div>
+		</kv-popper>
+	</kv-theme-provider>
 </template>
 
 <script>
 import KvPopper from '@/components/Kv/KvPopper';
+import {
+	darkTheme,
+	darkGreenTheme,
+	mintTheme,
+	defaultTheme
+} from '~/@kiva/kv-tokens/configs/kivaColors';
+import KvThemeProvider from '~/@kiva/kv-components/vue/KvThemeProvider';
 
 export default {
 	components: {
-		KvPopper
+		KvPopper,
+		KvThemeProvider
 	},
 	// TODO: Add prop for tooltip placement, Currently defaults to 'top' but will flip to bottom when constrained
 	props: {
 		controller: { type: String, required: true },
+		theme: {
+			type: String,
+			default: 'default',
+			validator(value) {
+				// The value must match one of these strings
+				return ['default', 'mint', 'green', 'dark'].indexOf(value) !== -1;
+			}
+		},
 	},
 	data() {
 		return {
+			darkGreenTheme,
+			darkTheme,
+			defaultTheme,
+			mintTheme,
 			popperModifiers: {
 				preventOverflow: {
 					padding: 10,
@@ -40,54 +60,32 @@ export default {
 			}
 		};
 	},
+	computed: {
+		themeStyle() {
+			const themeMapper = {
+				default: defaultTheme,
+				mint: mintTheme,
+				green: darkGreenTheme,
+				dark: darkTheme
+			};
+			return themeMapper[this.theme];
+		}
+	}
 };
 </script>
 
 <style lang="scss" scoped>
 @import 'settings';
 
-$tooltip-border-width: 1;
-$arrow-width: 14;
+$arrow-width: 8;
 $outer-arrow-width: rem-calc($arrow-width);
 $inner-arrow-width: rem-calc($arrow-width - 2);
 $inner-arrow-offset: rem-calc($arrow-width - 1);
-
-.tooltip-pane {
-	position: absolute;
-	background: $aqua-light-green;
-	border-radius: rem-calc(3);
-	box-shadow: 0 2px 0 rgba(196, 231, 219, 0.8);
-	border: #{$tooltip-border-width}px solid $aqua-medium-green;
-	z-index: 1234;
-}
-
-.tooltip-content {
-	padding: 1rem;
-	max-width: rem-calc(250);
-	line-height: 1.4;
-}
-
-.tooltip-content .title-slot {
-	font-weight: 800;
-	margin-bottom: 0.75rem;
-}
+$border-color: var(--bg-primary);
 
 .tooltip-arrow {
-	width: 0;
-	height: 0;
-	border-style: solid;
-	position: absolute;
-	margin: $outer-arrow-width;
-	border-color: $aqua-medium-green;
-}
-
-.tooltip-inner-arrow {
-	width: 0;
-	height: 0;
-	border-style: solid;
-	position: absolute;
 	margin: $outer-arrow-width;
-	border-color: $aqua-light-green;
+	border-color: rgba($border-color);
 }
 
 /* Top Tooltip Arrow appears on Bottom */
@@ -106,17 +104,6 @@ $inner-arrow-offset: rem-calc($arrow-width - 1);
 	margin-bottom: 0;
 }
 
-.tooltip-pane[x-placement^="top"] .tooltip-inner-arrow {
-	border-width: $inner-arrow-width $inner-arrow-width 0 $inner-arrow-width;
-	border-left-color: transparent;
-	border-right-color: transparent;
-	border-bottom-color: transparent;
-	bottom: calc(#{$tooltip-border-width} * 4px);
-	left: calc(-#{$inner-arrow-offset} * 2); /* stylelint-disable-line */
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
 /* Bottom Tooltip Arrow appears on Top */
 .tooltip-pane[x-placement^="bottom"] {
 	margin-top: $outer-arrow-width;
@@ -133,17 +120,6 @@ $inner-arrow-offset: rem-calc($arrow-width - 1);
 	margin-bottom: 0;
 }
 
-.tooltip-pane[x-placement^="bottom"] .tooltip-inner-arrow {
-	border-width: 0 $inner-arrow-width $inner-arrow-width $inner-arrow-width;
-	border-left-color: transparent;
-	border-right-color: transparent;
-	border-top-color: transparent;
-	top: calc(#{$tooltip-border-width} * 2px);
-	left: calc(-#{$inner-arrow-offset} * 2); /* stylelint-disable-line */
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
 /* TODO: TWEAK Inner Arrow Styles for Left + Right Orientations */
 
 /* Right Side Tooltip, Arrow appears on Left */

From 8b2fa61a6f01f55a6e94c80c93370583cc1fe59f Mon Sep 17 00:00:00 2001
From: Matt Stover <mcs@mcstover.com>
Date: Tue, 19 Oct 2021 10:59:32 -0700
Subject: [PATCH 2/2] Reduce number of available themes to only those used or
 planned for use.

---
 src/components/Kv/KvTooltip.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/Kv/KvTooltip.vue b/src/components/Kv/KvTooltip.vue
index fd11e484ba..26f4ffc3a8 100644
--- a/src/components/Kv/KvTooltip.vue
+++ b/src/components/Kv/KvTooltip.vue
@@ -24,9 +24,7 @@
 import KvPopper from '@/components/Kv/KvPopper';
 import {
 	darkTheme,
-	darkGreenTheme,
-	mintTheme,
-	defaultTheme
+	mintTheme
 } from '~/@kiva/kv-tokens/configs/kivaColors';
 import KvThemeProvider from '~/@kiva/kv-components/vue/KvThemeProvider';
 
@@ -43,15 +41,13 @@ export default {
 			default: 'default',
 			validator(value) {
 				// The value must match one of these strings
-				return ['default', 'mint', 'green', 'dark'].indexOf(value) !== -1;
+				return ['mint', 'dark'].indexOf(value) !== -1;
 			}
 		},
 	},
 	data() {
 		return {
-			darkGreenTheme,
 			darkTheme,
-			defaultTheme,
 			mintTheme,
 			popperModifiers: {
 				preventOverflow: {
@@ -63,9 +59,7 @@ export default {
 	computed: {
 		themeStyle() {
 			const themeMapper = {
-				default: defaultTheme,
 				mint: mintTheme,
-				green: darkGreenTheme,
 				dark: darkTheme
 			};
 			return themeMapper[this.theme];