feat(kviewswitcher): introduce kui tokens [KHCP-7733] (#1593)

* feat(kviewswitcher): introduce kui tokens [KHCP-7733]

* fix(kviewswitcher): interpolation [KHCP-7733]

.github/CODEOWNERS

@@ -61,6 +61,7 @@
 /src/components/KTooltip @adamdehaven @jillztom @portikM
 /src/components/KTreeList @adamdehaven @jillztom @portikM
 /src/components/KTruncate @adamdehaven @jillztom @portikM
+/src/components/KViewSwitcher @adamdehaven @jillztom @portikM
 
 # Dependabot approvals
 # Allow Kongponents BOT to approve dependabot updates

docs/components/view-switcher.md

@@ -27,7 +27,7 @@ The current view of your UI, one of `table` or `grid`. The button will show icon
 
 <KComponent :data="{ currentView: 'grid' }" v-slot="{ data }">
   <div>
-    <KCard class="mb-4">
+    <KCard class="vertical-spacing">
       <template v-slot:body>{{ data }}</template>
     </KCard>
     <KViewSwitcher :view="data.currentView" @view-changed="(view) => data.currentView = view"/>
@@ -39,7 +39,7 @@ The current view of your UI, one of `table` or `grid`. The button will show icon
 ```html
 <KComponent :data="{ currentView: 'grid' }" v-slot="{ data }">
   <div>
-    <KCard class="mb-4">
+    <KCard>
       <template v-slot:body>{{ data }}</template>
     </KCard>
     <KViewSwitcher
@@ -55,7 +55,7 @@ The current view of your UI, one of `table` or `grid`. The button will show icon
 
 <KComponent :data="{ currentView: 'table', turtles: [{ name: 'Leonardo', age: 34, color: 'blue' }, { name: 'Michelangelo', age: 32, color: 'orange' }, { name: 'Raphael', age: 32, color: 'red' }, { name: 'Donatello', age: 29, color: 'purple' }] }" v-slot="{ data }">
   <div>
-    <div class="d-flex align-items-center justify-content-between mb-4">
+     <div class="sewage"> <!-- where the ninja turtles live -->
       <h3>Teenage Mutant Ninja Turtles</h3>
       <KViewSwitcher
         :view="data.currentView"
@@ -78,12 +78,12 @@ The current view of your UI, one of `table` or `grid`. The button will show icon
         v-for="turtle in data.turtles"
         :key="turtle.name">
         <template v-slot:body>
-          <div class="mb-2"><strong>{{ turtle.name }}</strong></div>
-          <div class="mb-2">
+          <div class="card-element"><strong>{{ turtle.name }}</strong></div>
+          <div class="card-element">
             <img class="profile-pic" :src="getTurtlePic(turtle.name)" width="100" />
           </div>
-          <div class="mb-2">
-            <KBadge :background-color="turtle.color" color="var(--white)">{{ turtle.color }}</KBadge>
+          <div class="card-element">
+            <KBadge :background-color="turtle.color" color="white">{{ turtle.color }}</KBadge>
           </div>
           <div><strong>Age: </strong>{{ turtle.age }}</div>
         </template>
@@ -124,4 +124,19 @@ export default defineComponent({
   grid-gap: 16px;
   text-align: center;
 }
+
+.sewage {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.card-element {
+  margin-bottom: 8px;
+}
+
+.vertical-spacing {
+  margin-bottom: 16px;
+}
 </style>

src/components/KViewSwitcher/KViewSwitcher.vue

@@ -1,7 +1,7 @@
 <template>
   <KButton
     appearance="outline"
-    class="k-view-switcher view-switch-button non-visual-button"
+    class="k-view-switcher view-switch-button"
     :class="[view, { paused: isPaused }]"
     :is-rounded="false"
     size="small"
@@ -56,14 +56,17 @@ const toggleView = (): void => {
 
 <style lang="scss" scoped>
 @import '@/styles/variables';
+@import '@/styles/tmp-variables';
 @import '@/styles/functions';
+@import '@/styles/mixins';
 
 // Originally forked and modified from https://codepen.io/aaroniker/pen/dyoKeMP
 .view-switch-button {
-  --KButtonPaddingY: 6px;
-  --KButtonPaddingX: 6px;
-  --KButtonSecondaryHover: var(--white);
-  --KButtonSecondaryHoverBorder: var(--blue-300);
+  @include non-visual-button;
+  --KButtonPaddingY: var(--kui-space-30, #{$kui-space-30});
+  --KButtonPaddingX: var(--kui-space-30, #{$kui-space-30});
+  --KButtonSecondaryHover: var(--white, var(--kui-color-background, #{$kui-color-background}));
+  --KButtonSecondaryHoverBorder: var(--blue-300, var(--kui-color-border-primary-weak, #{$kui-color-border-primary-weak}));
   --KButtonSecondaryFocus: none;
   transform: scale(var(--scale, 1)) translateZ(0);
 
@@ -78,14 +81,14 @@ const toggleView = (): void => {
 
     i {
       animation: var(--name, var(--dots-name, none)) var(--duration, var(--dots-duration, .5s)) var(--easing, var(--dots-easing, linear)) forwards var(--delay, var(--dots-delay, 0s));
-      background-color: var(--grey-500);
-      border-radius: 2px;
+      background-color: var(--grey-500, var(--kui-color-background-neutral, $kui-color-background-neutral));
+      border-radius: var(--kui-border-radius-10, $kui-border-radius-10);
       display: block;
       height: var(--height, 7px);
       left: var(--left, 4px);
       position: absolute;
       top: var(--top, 4px);
-      transition: background-color 200ms ease;
+      transition: background-color $tmp-animation-timing-2 ease;
       width: var(--width, 7px);
     }
 
@@ -141,7 +144,7 @@ const toggleView = (): void => {
 
     .lines {
       --name: var(--lines-name, none);
-      --duration: var(--lines-duration, 0.15s);
+      --duration: var(--lines-duration, #{$tmp-animation-timing-2});
       --easing: var(--lines-easing, linear);
       --delay: var(--lines-delay, 0s);