feat(ktooltip): introduce kui tokens [KHCP-7730] (#1591)

.github/CODEOWNERS

@@ -54,6 +54,7 @@
 /src/components/KSelect @adamdehaven @jillztom @portikM
 /src/components/KTable @adamdehaven @jillztom @portikM
 /src/components/KTextArea @adamdehaven @jillztom @portikM
+/src/components/KTooltip @adamdehaven @jillztom @portikM
 /src/components/KTreeList @adamdehaven @jillztom @portikM
 /src/components/KTruncate @adamdehaven @jillztom @portikM
 

docs/components/tooltip.md

@@ -36,8 +36,8 @@ KTooltip won't be triggered if the element you pass through `default` slot has `
 
 <KCard>
   <template #body>
-    <div class="d-flex">
-      <KTooltip label="I won't pop up" class="mr-2">
+    <div class="my-tooltip">
+      <KTooltip label="I won't pop up" class="my-tooltip-label">
         <KButton disabled>❌</KButton>
       </KTooltip>
       <KTooltip label="I will pop up">
@@ -49,6 +49,15 @@ KTooltip won't be triggered if the element you pass through `default` slot has `
   </template>
 </KCard>
 
+<style>
+.my-tooltip {
+  display: flex !important;
+}
+.my-tooltip-label {
+  margin-right: 4px !important;
+}
+</style>
+
 ```html
 <KTooltip label="I won't show up">
   <KButton disabled>❌</KButton>
@@ -74,7 +83,7 @@ Here are the different options:
   </li>
 </ul>
 
-<div class="d-flex justify-content-around">
+<div class="custom-tooltip">
   <KTooltip placement="bottom" label="A label that appears on the bottom">
     <KButton>bottom</KButton>
   </KTooltip>
@@ -89,6 +98,13 @@ Here are the different options:
   </KTooltip>
 </div>
 
+<style>
+.custom-tooltip {
+  display: flex !important;
+  justify-content: space-around !important;
+}
+</style>
+
 ```html
 <KTooltip placement="bottom" label="A label that appears on the bottom">
   <KButton>Sample Button</KButton>
@@ -129,15 +145,15 @@ You can set the maximum width of a Tooltip with the `maxWidth` property. `maxWid
 <KTooltip label="Video Games">
   <KButton>&nbsp;✌🏻</KButton>
   <template v-slot:content>
-    <span><b>yoyo</b> <span class="color-red-500">kooltip</span></span>
+    <span><b>yoyo</b> <em>kooltip</em></span>
   </template>
 </KTooltip>
 
 ```html
 <KTooltip>
   <KButton>&nbsp;✌🏻</KButton>
   <template v-slot:content>
-    <span><b>yoyo</b> <span class="color-red-500">kooltip</span></span>
+    <span><b>yoyo</b> <em>kooltip</em></span>
   </template>
 </KTooltip>
 ```
@@ -164,15 +180,15 @@ Example:
 
 <style>
 .tooltip-blue {
-  --KTooltipBackground: var(--blue-300);
-  --KTooltipColor: var(--blue-500);
+  --KTooltipBackground: var(--blue-300, #{$kui-color-background-primary-weaker});
+  --KTooltipColor: var(--blue-500, #{$kui-color-text-primary});
 }
 </style>
 ```
 
 <style>
 .tooltip-blue {
-  --KTooltipBackground: var(--blue-500);
-  --KTooltipColor: var(--blue-200);
+  --KTooltipBackground: var(--blue-500, #{$kui-color-background-primary});
+  --KTooltipColor: var(--blue-200, #bdd3f9);
 }
 </style>

src/components/KTooltip/KTooltip.vue

@@ -33,17 +33,17 @@ import { PopPlacementsArray, PopPlacements } from '@/types'
 
 const props = defineProps({
   /**
-     * Text to show in tooltip
-     */
+  * Text to show in tooltip
+  */
   label: {
     type: String,
     required: false,
     default: '',
   },
 
   /**
-     * Define which side the tooltip displays
-     */
+  * Define which side the tooltip displays
+  */
   placement: {
     type: String as PropType<PopPlacements>,
     default: 'bottom',
@@ -52,22 +52,22 @@ const props = defineProps({
     },
   },
   /**
-     * A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries.
-     */
+  * A flag to use fixed positioning of the popover to avoid content being clipped by parental boundaries.
+  */
   positionFixed: {
     type: Boolean,
     default: false,
   },
   /**
-     * Set the max-width of the ktooltip
-     */
+  * Set the max-width of the ktooltip
+  */
   maxWidth: {
     type: String,
     default: 'auto',
   },
   /**
-     * Test mode - for testing only, strips out generated ids
-     */
+  * Test mode - for testing only, strips out generated ids
+  */
   testMode: {
     type: Boolean,
     default: false,
@@ -79,16 +79,16 @@ const computedClass = computed((): string => {
   let result = ''
   switch (props.placement) {
     case 'top':
-      result = 'mb-2'
+      result = 'k-tooltip-top'
       break
     case 'right':
-      result = 'ml-2'
+      result = 'k-tooltip-right'
       break
     case 'bottom':
-      result = 'mt-2'
+      result = 'k-tooltip-bottom'
       break
     case 'left':
-      result = 'mr-2'
+      result = 'k-tooltip-left'
       break
   }
 
@@ -101,13 +101,29 @@ const computedClass = computed((): string => {
 @import '@/styles/functions';
 
 .k-tooltip.k-popover {
-  --KPopColor: var(--KTooltipColor, var(--white, color(white)));
-  --KPopBackground: var(--KTooltipBackground, var(--black-400, color(black-400)));
-  --KPopBodySize: var(--type-sm);
-  --KPopPaddingX: var(--spacing-xs);
-  --KPopPaddingY: var(--spacing-xs);
+  --KPopColor: var(--KTooltipColor, var(--white, var(--kui-color-text-inverse, #{$kui-color-text-inverse})));
+  --KPopBackground: var(--KTooltipBackground, var(--black-400, var(--kui-color-background-neutral-stronger, #{$kui-color-background-neutral-stronger})));
+  --KPopBodySize: var(--type-sm, var(--kui-font-size-30, #{$kui-font-size-30}));
+  --KPopPaddingX: var(--spacing-xs, var(--kui-space-40, #{$kui-space-40}));
+  --KPopPaddingY: var(--spacing-xs, var(--kui-space-40, #{$kui-space-40}));
   --KPopBorder: none;
   pointer-events: none;
   z-index: 9999;
 }
+
+.k-tooltip-top {
+  margin-bottom: var(--kui-space-10, $kui-space-10) !important;
+}
+
+.k-tooltip-right {
+  margin-left: var(--kui-space-10, $kui-space-10) !important;
+}
+
+.k-tooltip-bottom {
+  margin-top: var(--kui-space-10, $kui-space-10) !important;
+}
+
+.k-tooltip-left {
+  margin-right: var(--kui-space-10, $kui-space-10) !important;
+}
 </style>