From 4c5bca4aebf8b8cbb928f083b21bc1a1583f2030 Mon Sep 17 00:00:00 2001
From: Aanchal Mishra <87779967+aanchalm01@users.noreply.github.com>
Date: Thu, 27 Jul 2023 11:22:02 -0400
Subject: [PATCH] feat(kslideout): introduce kui tokens (#1586)

feat(kslideout): introduce kui tokens [khcp-7724]
---
 .github/CODEOWNERS                     |  1 +
 docs/components/slideout.md            | 14 ++++++++++----
 src/components/KSlideout/KSlideout.vue | 16 +++++++++-------
 src/styles/_tmp-variables.scss         |  1 +
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 0338941334..08441ea0f3 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -52,6 +52,7 @@
 /src/components/KRadio @adamdehaven @jillztom @portikM
 /src/components/KSegmentedControl @adamdehaven @jillztom @portikM
 /src/components/KSelect @adamdehaven @jillztom @portikM
+/src/components/KSlideout @adamdehaven @jillztom @portikM
 /src/components/KTable @adamdehaven @jillztom @portikM
 /src/components/KTabs @adamdehaven @jillztom @portikM
 /src/components/KTextArea @adamdehaven @jillztom @portikM
diff --git a/docs/components/slideout.md b/docs/components/slideout.md
index 470000c9d5..99aa254a53 100644
--- a/docs/components/slideout.md
+++ b/docs/components/slideout.md
@@ -17,7 +17,7 @@ Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderl
         <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
       </div>
       <KButton appearance="primary">Buttons</KButton>
-      <KCard class="mt-2">
+      <KCard class="vertical-spacing">
         <template v-slot:body>
           Something in a KCard
         </template>
@@ -25,7 +25,7 @@ Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderl
       <KAlert
         appearance="info"
         alert-message="Or even an alert!"
-        class="mt-2" />
+        class="vertical-spacing" />
     </KSlideout>
   </div>
 </KToggle>
@@ -44,7 +44,7 @@ Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderl
         <p>Anim officia eiusmod duis est consequat nulla tempor ad non magna Lorem ullamco nostrud amet. Occaecat voluptate dolor enim eiusmod do qui nulla pariatur enim. Et elit elit consequat do do duis enim est ullamco id sunt sunt amet eiusmod. Do minim mollit irure ea sunt officia minim sint eiusmod enim amet. Quis exercitation in ullamco quis aliqua.</p>
       </div>
       <KButton appearance="primary">Buttons</KButton>
-      <KCard class="mt-2">
+      <KCard class="vertical-spacing">
         <template v-slot:body>
           Something in a KCard
         </template>
@@ -52,7 +52,7 @@ Below we demonstrate wrapping `KSlideout` in the [`KToggle`](/components/renderl
       <KAlert
         appearance="info"
         alert-message="Or even an alert!"
-        class="mt-2" />
+        class="vertical-spacing" />
     </KSlideout>
   </div>
 </KToggle>
@@ -80,3 +80,9 @@ There is one default slot which is used to place content into the slideout panel
 ## Events
 
 - `@close` - Emitted when the close button is clicked, anything outside the panel is clicked, or the `esc` key is pressed.
+
+<style lang="scss" scoped>
+.vertical-spacing {
+  margin-top: $kui-space-40;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/KSlideout/KSlideout.vue b/src/components/KSlideout/KSlideout.vue
index b6e398547c..b36b4c3382 100644
--- a/src/components/KSlideout/KSlideout.vue
+++ b/src/components/KSlideout/KSlideout.vue
@@ -21,7 +21,7 @@
         >
           <KIcon
             icon="close"
-            size="24"
+            :size="KUI_ICON_SIZE_50"
             view-box="0 0 24 24"
           />
         </button>
@@ -41,6 +41,7 @@
 import { onMounted, onUnmounted } from 'vue'
 import KCard from '@/components/KCard/KCard.vue'
 import KIcon from '@/components/KIcon/KIcon.vue'
+import { KUI_ICON_SIZE_50 } from '@kong/design-tokens'
 
 const props = defineProps({
   isVisible: {
@@ -70,14 +71,15 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 @import '@/styles/variables';
+@import '@/styles/tmp-variables';
 @import '@/styles/functions';
 
 .k-slideout {
-  --KCardPaddingY: 32px;
-  --KCardPaddingX: 48px;
+  --KCardPaddingY: var(--kui-space-90, #{$kui-space-90});
+  --KCardPaddingX: var(--kui-space-110, #{$kui-space-110});
 
   .panel-background {
-    background: var(--black-45, color(black-45));
+    background: var(--black-45, $tmp-color-black-45);
     bottom: 0;
     left: 0;
     position: fixed;
@@ -87,7 +89,7 @@ onUnmounted(() => {
   }
 
   .panel {
-    background-color: var(--white, color(white));
+    background-color: var(--white, var(--kui-color-background, $kui-color-background));
     height: 100vh;
     max-width: 500px;
     position: fixed;
@@ -103,10 +105,10 @@ onUnmounted(() => {
       height: 16px;
       left:  16px;
       outline: inherit;
-      padding: 0;
+      padding: var(--kui-space-0, $kui-space-0);
       position: absolute;
       top: 16px;
-      transition: 200ms ease;
+      transition: $tmp-animation-timing-2 ease;
       width: 16px;
     }
 
diff --git a/src/styles/_tmp-variables.scss b/src/styles/_tmp-variables.scss
index 9fc92b8406..a9a615b7e0 100644
--- a/src/styles/_tmp-variables.scss
+++ b/src/styles/_tmp-variables.scss
@@ -35,6 +35,7 @@ $tmp-color-teal-200: #91e1fc;
 
 // Opaque colors
 $tmp-color-black-10: rgba(0, 0, 0, 0.1);
+$tmp-color-black-45: rgba(0, 0, 0, 0.45);
 $tmp-color-black-60: rgba(0, 0, 0, 0.6);
 
 // Borders