feat(kslideout): introduce kui tokens (#1586)

feat(kslideout): introduce kui tokens [khcp-7724]

.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

docs/components/slideout.md

@@ -17,15 +17,15 @@ 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>
       </KCard>
       <KAlert
         appearance="info"
         alert-message="Or even an alert!"
-        class="mt-2" />
+        class="vertical-spacing" />
     </KSlideout>
   </div>
 </KToggle>
@@ -44,15 +44,15 @@ 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>
       </KCard>
       <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>

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;
     }
 

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