feat(kskeleton): introduce kui tokens [KHCP-7723]

docs/components/skeleton.md

@@ -215,10 +215,10 @@ KSkeleton package uses a component to render the placeholder content `<KSkeleton
 
 ### Box Props
 
-| Prop   | Allowed Values                                              | Description                                  |
-| :----- | :---------------------------------------------------------- | -------------------------------------------- |
-| width  | '1' (default), '2', '5', '6', '10', '50', '75', '100'       | Width of the skeleton box in relative units. Values 10, 50, 75, 100 are percentage based. |
-| height | '1' (default), '2'                                          | Height of the skeleton box in relative units |
+| Prop   | Allowed Values                                        | Description                                                                               |
+| :----- | :---------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| width  | '1' (default), '2', '5', '6', '10', '50', '75', '100' | Width of the skeleton box in relative units. Values 10, 50, 75, 100 are percentage based. |
+| height | '1' (default), '2'                                    | Height of the skeleton box in relative units                                              |
 
 <KSkeletonBox />
 <KSkeletonBox width="2" height="2"/>
@@ -333,13 +333,13 @@ And another example:
 
 ## Theming
 
-| Variable                             | Purpose                                                                                                                                                                    |
-| :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--KSkeletonFullScreenMargin`        | Margin around full screen variant. Useful for when you want to show full screen loader under header or next to sidebar since the full screen component has fixed position. |
-| `--KSkeletonFullScreenProgressBackgroundColor` | Progress bar background color.                                                                                                                                                   |
-| `--KSkeletonFullScreenProgressColor` | Progress bar fill color.                                                                                                                                                   |
-| `--KSkeletonFullScreenSpinnerColor` | Generic spinner icon fill color.                                                                                                                                                   |
-| `--KSkeletonCardWidth`               | Width of the card. Default is 33%                                                                                                                                          |
+| Variable                                       | Purpose                                                                                                                                                                    |
+| :--------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--KSkeletonFullScreenMargin`                  | Margin around full screen variant. Useful for when you want to show full screen loader under header or next to sidebar since the full screen component has fixed position. |
+| `--KSkeletonFullScreenProgressBackgroundColor` | Progress bar background color.                                                                                                                                             |
+| `--KSkeletonFullScreenProgressColor`           | Progress bar fill color.                                                                                                                                                   |
+| `--KSkeletonFullScreenSpinnerColor`            | Generic spinner icon fill color.                                                                                                                                           |
+| `--KSkeletonCardWidth`                         | Width of the card. Default is 33%                                                                                                                                          |
 
 ### Examples
 
@@ -418,7 +418,7 @@ export default defineComponent({
 <style>
 .k-skeleton-full-screen-margin {
   --KSkeletonFullScreenMargin: 58px 0 0;
-  --KSkeletonFullScreenProgressColor: var(--black-70);
+  --KSkeletonFullScreenProgressColor: grey;
 }
 .k-skeleton-modified {
   --KSkeletonCardWidth: calc(33% - 16px);

src/components/KSkeleton/CardSkeleton.vue

@@ -9,15 +9,16 @@
         <div class="skeleton-card-header">
           <slot name="card-header">
             <KSkeletonBox
+              class="card-header-content-1"
               height="2"
               width="25"
             />
             <KSkeletonBox
-              class="ml-2"
+              class="card-header-content-2"
               height="2"
               width="75"
             />
-            <hr class="mb-0">
+            <hr>
           </slot>
         </div>
         <div class="skeleton-card-content">
@@ -55,26 +56,34 @@ $borderColor: #e6e6e6;
 .skeleton-card-wrapper {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-md, spacing(md));
+  gap: var(--spacing-md, var(--kui-space-60, $kui-space-60));
   justify-content: space-between;
   width: 100%;
 }
 .skeleton-card-column {
-  margin-bottom: var(--spacing-md, spacing(md));
-  width: var(--KSkeletonCardWidth, calc(33% - var(--spacing-md, spacing(md))));
+  margin-bottom: var(--spacing-md, var(--kui-space-60, $kui-space-60));
+  width: var(--KSkeletonCardWidth, calc(33% - var(--spacing-md, var(--kui-space-60, $kui-space-60))));
 }
 .skeleton-card {
-  border: 1px solid $borderColor;
-  border-radius: 3px;
+  border: var(--kui-border-width-10, $kui-border-width-10) solid $borderColor;
+  border-radius: var(--kui-border-radius-20, $kui-border-radius-20);
   display: flex;
   flex-direction: column;
   min-height: 324px;
   overflow: hidden;
-  padding: var(--spacing-md, spacing(md));
+  padding: var(--spacing-md, var(--kui-space-60, $kui-space-60));
   .skeleton-card-header {
     display: flex;
-    margin-bottom: var(--spacing-md, spacing(md));
+    margin-bottom: var(--spacing-md, var(--kui-space-60, $kui-space-60));
     width: 100%;
+
+    .card-header-content-2 {
+      margin-left: var(--kui-space-40, $kui-space-40) !important;
+    }
+
+    hr {
+      margin-bottom: var(--kui-space-0, $kui-space-0) !important;
+    }
   }
   .skeleton-card-content {
     display: flex;
@@ -84,8 +93,8 @@ $borderColor: #e6e6e6;
     align-self: flex-end;
     display: flex;
     justify-content: space-between;
-    margin-top: auto;
-    padding-top: var(--spacing-md, spacing(md));
+    margin-top: var(--kui-space-auto, $kui-space-auto);
+    padding-top: var(--spacing-md, var(--kui-space-60, $kui-space-60));
     width: 100%;
   }
 }

src/components/KSkeleton/FormSkeleton.vue

@@ -54,7 +54,7 @@ import KSkeletonBox from '@/components/KSkeleton/KSkeletonBox.vue'
 .skeleton-form-wrapper {
   width: 100%;
   .skeleton-form-row {
-    margin-bottom: 32px;
+    margin-bottom: var(--kui-space-90, $kui-space-90);
   }
 }
 </style>

src/components/KSkeleton/FullScreenGenericSpinner.vue

@@ -62,38 +62,40 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 @import '@/styles/variables';
+@import '@/styles/tmp-variables';
 @import '@/styles/mixins';
 @import '@/styles/functions';
+
 .fullscreen-loading-container {
   @include fullscreen-loading-container;
   .progress {
-    background-color: var(--KSkeletonFullScreenProgressBackgroundColor, var(--grey-200, color(grey-200)));
-    border-radius: 8px;
-    margin-top: 16px;
+    background-color: var(--KSkeletonFullScreenProgressBackgroundColor, var(--grey-200, var(--kui-color-background-neutral-weakest, $kui-color-background-neutral-weakest)));
+    border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
+    margin-top: var(--kui-space-60, $kui-space-60);
     max-width: 350px;
 
     .progress-bar {
-      background-color: var(--KSkeletonFullScreenProgressColor, var(--blue-500, color(blue-500)));
-      border-radius: 8px;
+      background-color: var(--KSkeletonFullScreenProgressColor, var(--blue-500, var(--kui-color-background-primary, $kui-color-background-primary)));
+      border-radius: var(--kui-border-radius-40, $kui-border-radius-40);
       height: 5px;
     }
   }
 
   .spinner-loader {
     :after {
-      border-radius: 50%;
+      border-radius: var(--kui-border-radius-circle, $kui-border-radius-circle);
       height: 183px;
       width: 183px;
     }
     animation: spinnerAnimation 1.4s infinite linear;
-    border-bottom: 10px solid var(--grey-200, color(grey-200));
-    border-left: 10px solid var(--KSkeletonFullScreenSpinnerColor, var(--blue-500, color(blue-500)));
-    border-radius: 50%;
-    border-right: 10px solid var(--grey-200, color(grey-200));
-    border-top: 10px solid var(--grey-200, color(grey-200));
-    font-size: 10px;
+    border-bottom: $tmp-border-width-10 solid var(--grey-200, $tmp-color-gray-200);
+    border-left: 10px solid var(--KSkeletonFullScreenSpinnerColor, var(--blue-500, var(--kui-color-border-primary, $kui-color-border-primary)));
+    border-radius: var(--kui-border-radius-circle, $kui-border-radius-circle);
+    border-right: $tmp-border-width-10 solid var(--grey-200, $tmp-color-gray-200);
+    border-top: $tmp-border-width-10 solid var(--grey-200, $tmp-color-gray-200);
+    font-size: var(--kui-font-size-10, $kui-font-size-10);
     height: 183px;
-    margin: 60px auto;
+    margin: var(--kui-space-120, $kui-space-120) var(--kui-space-auto, $kui-space-auto);
     position: relative;
     transform: translateZ(0);
     width: 183px;
@@ -115,6 +117,5 @@ onUnmounted(() => {
     transform: rotate(360deg);
   }
 }
-
 }
 </style>

src/components/KSkeleton/FullScreenKongSkeleton.vue

@@ -70,14 +70,14 @@ onUnmounted(() => {
   @include fullscreen-loading-container;
 
   .progress {
-    background-color: var(--KSkeletonFullScreenProgressBackgroundColor, var(--grey-200, color(grey-200)));
-    border-radius: 8px;
-    margin-top: 16px;
+    background-color: var(--KSkeletonFullScreenProgressBackgroundColor, var(--grey-200, var(--kui-color-background-neutral-weakest, $kui-color-background-neutral-weakest)));
+    border-radius: var(--kui-border-radius-40, kui-border-radius-40);
+    margin-top: var(--kui-space-60, $kui-space-60);
     max-width: 350px;
 
     .progress-bar {
-      background-color: var(--KSkeletonFullScreenProgressColor, var(--blue-500, color(blue-500)));
-      border-radius: 8px;
+      background-color: var(--KSkeletonFullScreenProgressColor, var(--blue-500, var(--kui-color-background-primary, $kui-color-background-primary)));
+      border-radius: var(--kui-border-radius-40, kui-border-radius-40);
       height: 5px;
     }
   }

src/components/KSkeleton/KSkeleton.vue

@@ -1,8 +1,8 @@
 <template>
   <div
     v-if="isVisible"
-    class="d-flex flex-wrap k-skeleton-container"
-    :class="{ 'w-100': type !== 'spinner', 'opacity-0': !isVisible }"
+    class="k-skeleton-container"
+    :class="{ 'is-spinner': type !== 'spinner' }"
   >
     <CardSkeleton
       v-if="type === 'card'"
@@ -115,15 +115,12 @@ onMounted(() => {
 @import '@/styles/variables';
 @import '@/styles/functions';
 
-.k-skeleton-container.opacity-0 .box {
-  opacity: 0;
-}
-
-.k-skeleton-container.opacity-0 :deep(.kong-icon) {
-  display: none;
-}
+.k-skeleton-container {
+  display: flex !important;
+  flex-wrap: wrap !important;
 
-.k-skeleton-container.opacity-0.mr-2 {
-  margin-right: 0 !important;
+  &.is-spinner {
+    width: 100% !important;
+  }
 }
 </style>

src/components/KSkeleton/KSkeletonBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="box mr-1"
+    class="box"
     :class="{[`width-${width}`]: true, [`height-${height}`]: true }"
   />
 </template>
@@ -39,8 +39,9 @@ defineProps({
     )
     repeat;
   background-size: 400% 100%;
-  border-radius: 3px;
+  border-radius: var(--kui-border-radius-10, $kui-border-radius-10);
   display: inline-flex;
+  margin-right: var(--kui-space-20, $kui-space-20) !important;
   transition: 1s;
   // Provided box widths
   &.width {

src/components/KSkeleton/TableSkeleton.vue

@@ -9,11 +9,7 @@
         <KSkeletonBox
           v-for="cell in columns"
           :key="cell"
-          :class="{
-            'mr-6': cell !== columns,
-            'w-100': cell === columns, // take the rest of the space
-            'skeleton-cell': true
-          }"
+          class="skeleton-cell"
           :width="calcWidth(cell, columns || 6)"
         />
       </slot>
@@ -48,24 +44,37 @@ const calcWidth = (cell: number, columns: number): SkeletonBoxWidth => {
 @import '@/styles/variables';
 @import '@/styles/functions';
 
-$screen-lg: 1256px;
-$screen-md: 756px;
+$screen-lg: $kui-breakpoint-tablet;
+$screen-md: $kui-breakpoint-phablet;
+
 .skeleton-table-wrapper {
   overflow: hidden;
   width: 100%;
+
   .skeleton-table-row {
     display: flex;
     flex-direction: row;
-    margin-bottom: 32px;
+    margin-bottom: var(--kui-space-90, $kui-space-90);
     /** Hide columns on smaller screens */
+
+    .skeleton-cell {
+      // 'mr-6': cell !== columns
+      margin-right: var(--kui-space-90, $kui-space-90) !important;
+
+      &:last-child {
+        margin-right: var(--kui-space-0, $kui-space-0) !important;
+        width: 100% !important;
+      }
+    }
+
     @media only screen and (max-width: $screen-lg) {
       .skeleton-cell {
         &:nth-of-type(n + 5) {
           display: none;
         }
         &:nth-of-type(4) {
-          margin-left: auto;
-          margin-right: 0;
+          margin-left: var(--kui-space-auto, $kui-space-auto);
+          margin-right: var(--kui-space-0, $kui-space-0);
         }
       }
     }
@@ -75,8 +84,8 @@ $screen-md: 756px;
           display: none;
         }
         &:nth-of-type(2) {
-          margin-left: auto;
-          margin-right: 0;
+          margin-left: var(--kui-space-auto, $kui-space-auto);
+          margin-right: var(--kui-space-0, $kui-space-0);
           width: 96px;
         }
       }

src/styles/_tmp-variables.scss

@@ -27,6 +27,8 @@ $tmp-color-steel-300: #a3b6d9;
 
 $tmp-color-blue-200: #bdd3f9;
 
+$tmp-color-gray-200: #f1f1f5;
+
 // Opaque colors
 $tmp-color-black-10: rgba(0, 0, 0, 0.1);
 $tmp-color-black-60: rgba(0, 0, 0, 0.6);