From e6b032ad337d9504654201db8e854b2d6a928b36 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 19 Aug 2024 12:14:08 +0530
Subject: [PATCH 01/11] updated drop shadow according to the latest guidelines

replaced redundant dropshadows with most relavent version out of dropshadow(1,2,6)
---
 docs/pages/styling/index.vue | 14 +++++++-------
 lib/KBreadcrumbs.vue         |  2 +-
 lib/KModal.vue               |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue
index 919d5ad54..a1099baac 100644
--- a/docs/pages/styling/index.vue
+++ b/docs/pages/styling/index.vue
@@ -38,7 +38,7 @@
         @import '~kolibri-design-system/lib/styles/definitions'
 
         .box {
-          @extend %dropshadow-4dp;
+          @extend %dropshadow-2dp;
 
           border-radius: $radius;
           text-align: center;
@@ -105,7 +105,7 @@
         @import '~kolibri-design-system/lib/styles/definitions'
 
         .more-shadow {
-          @extend %dropshadow-12dp;
+          @extend %dropshadow-6dp;
         }
       </DocsShowCode>
       <!-- eslint-enable -->
@@ -155,7 +155,7 @@
         @import '~kolibri-design-system/lib/styles/definitions'
 
         .ease:hover {
-          @extend %dropshadow-8dp;
+          @extend %dropshadow-6dp;
           @extend %md-standard-func;
 
           cursor: pointer;
@@ -183,7 +183,7 @@
   @import '~~/lib/styles/definitions';
 
   .box {
-    @extend %dropshadow-4dp;
+    @extend %dropshadow-2dp;
 
     display: inline-block;
     min-width: 150px;
@@ -195,17 +195,17 @@
   }
 
   .more-shadow {
-    @extend %dropshadow-12dp;
+    @extend %dropshadow-6dp;
   }
 
   .immediate:hover {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
 
     cursor: pointer;
   }
 
   .ease:hover {
-    @extend %dropshadow-8dp;
+    @extend %dropshadow-6dp;
     @extend %md-standard-func;
 
     cursor: pointer;
diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 72c746152..d9342b87d 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -318,7 +318,7 @@
   }
 
   .breadcrumbs-dropdown {
-    @extend %dropshadow-8dp;
+    @extend %-2dp;
 
     position: absolute;
     z-index: 8;
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 1112d86e7..8afb41442 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -391,7 +391,7 @@
 
   // TODO: margins for stacked buttons.
   .modal {
-    @extend %dropshadow-16dp;
+    @extend %-16dp;
 
     position: absolute;
     top: 50%;

From a3598eef3cd5d8189a761b784ea954535e60970a Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 19 Aug 2024 12:20:27 +0530
Subject: [PATCH 02/11] Update KBreadcrumbs.vue

---
 lib/KBreadcrumbs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index d9342b87d..6e7416111 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -318,7 +318,7 @@
   }
 
   .breadcrumbs-dropdown {
-    @extend %-2dp;
+    @extend %dropshadow-2dp;
 
     position: absolute;
     z-index: 8;

From 35d118195d39383a40f5adb8eb04d23c37994a81 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 19 Aug 2024 12:30:17 +0530
Subject: [PATCH 03/11] Update KModal.vue

---
 lib/KModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/KModal.vue b/lib/KModal.vue
index 8afb41442..c5a781d12 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -391,7 +391,7 @@
 
   // TODO: margins for stacked buttons.
   .modal {
-    @extend %-16dp;
+    @extend %dropshadow-6dp;
 
     position: absolute;
     top: 50%;

From a5ee0a4e7acebfb4729753b2f7ebca2dbaac111b Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 19 Aug 2024 16:20:47 +0530
Subject: [PATCH 04/11] Update UiSnackbar.vue

---
 lib/keen/UiSnackbar.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/keen/UiSnackbar.vue b/lib/keen/UiSnackbar.vue
index 535b1354a..0282c0f10 100644
--- a/lib/keen/UiSnackbar.vue
+++ b/lib/keen/UiSnackbar.vue
@@ -92,6 +92,7 @@
   $ui-snackbar-font-size: rem(14px) !default;
 
   .ui-snackbar {
+    @extend  %dropshadow-2dp;
     @include font-family-noto;
 
     display: inline-flex;
@@ -102,7 +103,7 @@
     padding: rem(14px 24px);
     background-color: $ui-snackbar-background-color;
     border-radius: $ui-default-border-radius;
-    box-shadow: 0 1px 3px rgba(black, 0.12), 0 1px 2px rgba(black, 0.24);
+    //box-shadow: 0 1px 3px rgba(black, 0.12), 0 1px 2px rgba(black, 0.24);
   }
 
   .ui-snackbar-message {

From 4bc38e6c677458dc2f0902bb5db88a851168eae9 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 19 Aug 2024 16:32:10 +0530
Subject: [PATCH 05/11] replacing the box shadow   elements

switched out the box shadow with appropriate drop-shadows
---
 lib/KSelect/index.vue       | 3 ++-
 lib/KSwitch.vue             | 3 ++-
 lib/keen/UiAutocomplete.vue | 3 ++-
 lib/keen/UiButton.vue       | 6 ++++--
 lib/keen/UiMenu.vue         | 6 ++++--
 lib/keen/UiPopover.vue      | 5 +++--
 lib/keen/UiToolbar.vue      | 3 ++-
 7 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/lib/KSelect/index.vue b/lib/KSelect/index.vue
index c2263f4e7..88415318a 100644
--- a/lib/KSelect/index.vue
+++ b/lib/KSelect/index.vue
@@ -1065,6 +1065,7 @@
   }
 
   .ui-select-dropdown {
+    @extend %boxshadow-2dp;
     position: absolute;
     z-index: $z-index-dropdown;
     display: block;
@@ -1075,7 +1076,7 @@
     margin-bottom: rem-calc(8px);
     list-style-type: none;
     outline: none;
-    box-shadow: 1px 2px 8px $md-grey-600;
+    //box-shadow: 1px 2px 8px $md-grey-600;
   }
 
   .ui-select-options {
diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
index b26052fba..79f1dd559 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -254,13 +254,14 @@
   }
 
   .k-switch-thumb {
+    @extend %dropshadow-1dp;
     position: absolute;
     z-index: 1;
     width: $k-switch-thumb-size;
     height: $k-switch-thumb-size;
     background-color: $k-switch-thumb-color;
     border-radius: 50%;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    //box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     transition-timing-function: ease;
     transition-duration: 0.2s;
     transition-property: background-color, transform;
diff --git a/lib/keen/UiAutocomplete.vue b/lib/keen/UiAutocomplete.vue
index 8dc23eab9..dbcea97e6 100644
--- a/lib/keen/UiAutocomplete.vue
+++ b/lib/keen/UiAutocomplete.vue
@@ -600,6 +600,7 @@
   }
 
   .ui-autocomplete__suggestions {
+    @extend %dropshadow-1dp;
     position: absolute;
     z-index: $z-index-dropdown;
     display: block;
@@ -610,7 +611,7 @@
     color: $primary-text-color;
     list-style-type: none;
     background-color: white;
-    box-shadow: 1px 2px 8px $md-grey-600;
+    //box-shadow: 1px 2px 8px $md-grey-600;
   }
 
   .ui-autocomplete__feedback {
diff --git a/lib/keen/UiButton.vue b/lib/keen/UiButton.vue
index 394ae3348..d2e051a2f 100644
--- a/lib/keen/UiButton.vue
+++ b/lib/keen/UiButton.vue
@@ -261,12 +261,14 @@
     }
 
     &.is-raised {
-      box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
+      @extend %boxshadow-2dp;
+      //box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
       transition: box-shadow 0.3s ease;
 
       &.has-focus-ring:focus,
       body[modality='keyboard'] &:focus {
-        box-shadow: 0 0 5px rgba(black, 0.22), 0 3px 6px rgba(black, 0.3);
+        @extend %boxshadow-2dp;
+        //box-shadow: 0 0 5px rgba(black, 0.22), 0 3px 6px rgba(black, 0.3);
       }
     }
 
diff --git a/lib/keen/UiMenu.vue b/lib/keen/UiMenu.vue
index 7da1beb51..3b0a10f01 100644
--- a/lib/keen/UiMenu.vue
+++ b/lib/keen/UiMenu.vue
@@ -145,9 +145,11 @@
     outline: none;
 
     &.is-raised {
+      @extend %boxshadow-2dp;
       border: none;
-      box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
-        0 1px 10px 0 rgba(black, 0.12);
+
+     // box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
+       // 0 1px 10px 0 rgba(black, 0.12);
     }
 
     &.has-secondary-text {
diff --git a/lib/keen/UiPopover.vue b/lib/keen/UiPopover.vue
index da78e6a98..8a04afee1 100644
--- a/lib/keen/UiPopover.vue
+++ b/lib/keen/UiPopover.vue
@@ -356,8 +356,9 @@
 
   .ui-popover {
     &.is-raised {
-      box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
-        0 1px 10px 0 rgba(black, 0.12);
+      @extend %boxshadow-2dp;
+      //box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
+        //0 1px 10px 0 rgba(black, 0.12);
     }
 
     .ui-menu {
diff --git a/lib/keen/UiToolbar.vue b/lib/keen/UiToolbar.vue
index 7b2d5cd0f..98384a331 100644
--- a/lib/keen/UiToolbar.vue
+++ b/lib/keen/UiToolbar.vue
@@ -144,7 +144,8 @@
     font-size: $ui-toolbar-font-size;
 
     &.is-raised {
-      box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
+      @extend %boxshadow-2dp;
+      // box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
     }
 
     &:not(.is-raised).ui-toolbar--type-default {

From be81cead2327e71be647e5723528e1e1d29bb448 Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 19 Aug 2024 23:07:39 +0530
Subject: [PATCH 06/11] added the import functions

added the import functions to the files missing them
---
 lib/KBreadcrumbs.vue        | 2 +-
 lib/KCard/BaseCard.vue      | 2 +-
 lib/KModal.vue              | 2 +-
 lib/KPageContainer.vue      | 2 +-
 lib/KSelect/index.vue       | 2 +-
 lib/KSwitch.vue             | 2 +-
 lib/keen/UiAutocomplete.vue | 2 +-
 lib/keen/UiButton.vue       | 6 +++---
 lib/keen/UiMenu.vue         | 4 ++--
 lib/keen/UiPopover.vue      | 4 ++--
 lib/keen/UiSnackbar.vue     | 2 +-
 lib/keen/UiToolbar.vue      | 4 ++--
 12 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 6e7416111..a2f2d6c90 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -283,7 +283,7 @@
 
 
 <style lang="scss" scoped>
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import './styles/definitions';
   $crumb-max-width: 300px;
 
diff --git a/lib/KCard/BaseCard.vue b/lib/KCard/BaseCard.vue
index 15b6a86bc..7f61d9e1b 100644
--- a/lib/KCard/BaseCard.vue
+++ b/lib/KCard/BaseCard.vue
@@ -176,7 +176,7 @@
 
 
 <style lang="scss" scoped>
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import '../styles/definitions';
 
   .base-card {
diff --git a/lib/KModal.vue b/lib/KModal.vue
index c5a781d12..9fd7a0548 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -374,7 +374,7 @@
 
 
 <style lang="scss" scoped>
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import './styles/definitions';
 
   .modal-overlay {
diff --git a/lib/KPageContainer.vue b/lib/KPageContainer.vue
index ffb396515..ea9165cf8 100644
--- a/lib/KPageContainer.vue
+++ b/lib/KPageContainer.vue
@@ -55,7 +55,7 @@
 
 
 <style lang="scss" scoped>
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import './styles/definitions';
 
   .page-container {
diff --git a/lib/KSelect/index.vue b/lib/KSelect/index.vue
index 88415318a..433fcde3f 100644
--- a/lib/KSelect/index.vue
+++ b/lib/KSelect/index.vue
@@ -1065,7 +1065,7 @@
   }
 
   .ui-select-dropdown {
-    @extend %boxshadow-2dp;
+    @extend %dropshadow-2dp;
     position: absolute;
     z-index: $z-index-dropdown;
     display: block;
diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
index 79f1dd559..afeeae72a 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -185,7 +185,7 @@
 
 
 <style lang="scss">
-
+   @import '~kolibri-design-system/lib/styles/definitions';
   $k-switch-height: 32px !default;
   $k-switch-thumb-size: 20px !default;
   $k-switch-thumb-color: #f5f5f5 !default;
diff --git a/lib/keen/UiAutocomplete.vue b/lib/keen/UiAutocomplete.vue
index dbcea97e6..ef55dad82 100644
--- a/lib/keen/UiAutocomplete.vue
+++ b/lib/keen/UiAutocomplete.vue
@@ -438,7 +438,7 @@
 </script>
 
 <style lang="scss">
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import './styles/imports';
 
   .ui-autocomplete {
diff --git a/lib/keen/UiButton.vue b/lib/keen/UiButton.vue
index d2e051a2f..b2c8f091e 100644
--- a/lib/keen/UiButton.vue
+++ b/lib/keen/UiButton.vue
@@ -211,7 +211,7 @@
 </script>
 
 <style lang="scss">
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import './styles/imports';
 
   .ui-button {
@@ -261,13 +261,13 @@
     }
 
     &.is-raised {
-      @extend %boxshadow-2dp;
+      @extend %dropshadow-2dp;
       //box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
       transition: box-shadow 0.3s ease;
 
       &.has-focus-ring:focus,
       body[modality='keyboard'] &:focus {
-        @extend %boxshadow-2dp;
+        @extend %dropshadow-2dp;
         //box-shadow: 0 0 5px rgba(black, 0.22), 0 3px 6px rgba(black, 0.3);
       }
     }
diff --git a/lib/keen/UiMenu.vue b/lib/keen/UiMenu.vue
index 3b0a10f01..831b51428 100644
--- a/lib/keen/UiMenu.vue
+++ b/lib/keen/UiMenu.vue
@@ -127,7 +127,7 @@
 <style lang="scss">
 
   /* stylelint-disable */
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import './styles/imports';
 
   .ui-menu {
@@ -145,7 +145,7 @@
     outline: none;
 
     &.is-raised {
-      @extend %boxshadow-2dp;
+      @extend %dropshadow-2dp;
       border: none;
 
      // box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
diff --git a/lib/keen/UiPopover.vue b/lib/keen/UiPopover.vue
index 8a04afee1..c41463b3d 100644
--- a/lib/keen/UiPopover.vue
+++ b/lib/keen/UiPopover.vue
@@ -350,13 +350,13 @@
 <style lang="scss">
 
   /* stylelint-disable */
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import './styles/imports';
   //@import './styles/tippy/tippy';
 
   .ui-popover {
     &.is-raised {
-      @extend %boxshadow-2dp;
+      @extend %dropshadow-2dp;
       //box-shadow: 0 2px 4px -1px rgba(black, 0.2), 0 4px 5px 0 rgba(black, 0.14),
         //0 1px 10px 0 rgba(black, 0.12);
     }
diff --git a/lib/keen/UiSnackbar.vue b/lib/keen/UiSnackbar.vue
index 0282c0f10..b48594fce 100644
--- a/lib/keen/UiSnackbar.vue
+++ b/lib/keen/UiSnackbar.vue
@@ -84,7 +84,7 @@
 <style lang="scss" scoped>
 
   /* stylelint-disable */
-
+  
   @import '../styles/definitions';
   @import './styles/imports';
 
diff --git a/lib/keen/UiToolbar.vue b/lib/keen/UiToolbar.vue
index 98384a331..5369c019e 100644
--- a/lib/keen/UiToolbar.vue
+++ b/lib/keen/UiToolbar.vue
@@ -125,7 +125,7 @@
 </script>
 
 <style lang="scss">
-
+  @import '~kolibri-design-system/lib/styles/definitions';
   @import './styles/imports';
 
   $ui-toolbar-font-size: rem(18px) !default;
@@ -144,7 +144,7 @@
     font-size: $ui-toolbar-font-size;
 
     &.is-raised {
-      @extend %boxshadow-2dp;
+      @extend %dropshadow-2dp;
       // box-shadow: 0 0 2px rgba(black, 0.12), 0 2px 2px rgba(black, 0.2);
     }
 

From 81ce945d718606cf124aa406f8311ed3e91d085b Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 19 Aug 2024 23:17:47 +0530
Subject: [PATCH 07/11] ..

---
 docs/pages/styling/index.vue | 1 +
 lib/KBreadcrumbs.vue         | 2 +-
 lib/KCard/BaseCard.vue       | 2 +-
 lib/KModal.vue               | 2 +-
 lib/KPageContainer.vue       | 2 +-
 lib/KSwitch.vue              | 2 +-
 lib/KTooltip/index.vue       | 2 +-
 lib/keen/UiAutocomplete.vue  | 2 +-
 lib/keen/UiButton.vue        | 2 +-
 lib/keen/UiMenu.vue          | 2 +-
 lib/keen/UiPopover.vue       | 2 +-
 lib/keen/UiToolbar.vue       | 2 +-
 12 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/docs/pages/styling/index.vue b/docs/pages/styling/index.vue
index a1099baac..6f36797aa 100644
--- a/docs/pages/styling/index.vue
+++ b/docs/pages/styling/index.vue
@@ -181,6 +181,7 @@
 <style lang="scss" scoped>
 
   @import '~~/lib/styles/definitions';
+  
 
   .box {
     @extend %dropshadow-2dp;
diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index a2f2d6c90..6eca3efdd 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -283,7 +283,7 @@
 
 
 <style lang="scss" scoped>
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import './styles/definitions';
   $crumb-max-width: 300px;
 
diff --git a/lib/KCard/BaseCard.vue b/lib/KCard/BaseCard.vue
index 7f61d9e1b..bb1689d44 100644
--- a/lib/KCard/BaseCard.vue
+++ b/lib/KCard/BaseCard.vue
@@ -176,7 +176,7 @@
 
 
 <style lang="scss" scoped>
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import '../styles/definitions';
 
   .base-card {
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 9fd7a0548..54e2941d7 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -374,7 +374,7 @@
 
 
 <style lang="scss" scoped>
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import './styles/definitions';
 
   .modal-overlay {
diff --git a/lib/KPageContainer.vue b/lib/KPageContainer.vue
index ea9165cf8..00f273ba8 100644
--- a/lib/KPageContainer.vue
+++ b/lib/KPageContainer.vue
@@ -55,7 +55,7 @@
 
 
 <style lang="scss" scoped>
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import './styles/definitions';
 
   .page-container {
diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
index afeeae72a..f888fc6cc 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -185,7 +185,7 @@
 
 
 <style lang="scss">
-   @import '~kolibri-design-system/lib/styles/definitions';
+   @import '../styles/definitions';
   $k-switch-height: 32px !default;
   $k-switch-thumb-size: 20px !default;
   $k-switch-thumb-color: #f5f5f5 !default;
diff --git a/lib/KTooltip/index.vue b/lib/KTooltip/index.vue
index 6de8baab0..c33cb6665 100644
--- a/lib/KTooltip/index.vue
+++ b/lib/KTooltip/index.vue
@@ -130,7 +130,7 @@
   @import '../styles/definitions';
 
   .k-tooltip {
-    @extend %dropshadow-1dp;
+    @extend %w-1dp;
 
     position: absolute;
     z-index: 24;
diff --git a/lib/keen/UiAutocomplete.vue b/lib/keen/UiAutocomplete.vue
index ef55dad82..34ba923ad 100644
--- a/lib/keen/UiAutocomplete.vue
+++ b/lib/keen/UiAutocomplete.vue
@@ -438,7 +438,7 @@
 </script>
 
 <style lang="scss">
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import './styles/imports';
 
   .ui-autocomplete {
diff --git a/lib/keen/UiButton.vue b/lib/keen/UiButton.vue
index b2c8f091e..8abc1a7ab 100644
--- a/lib/keen/UiButton.vue
+++ b/lib/keen/UiButton.vue
@@ -211,7 +211,7 @@
 </script>
 
 <style lang="scss">
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import './styles/imports';
 
   .ui-button {
diff --git a/lib/keen/UiMenu.vue b/lib/keen/UiMenu.vue
index 831b51428..7789af816 100644
--- a/lib/keen/UiMenu.vue
+++ b/lib/keen/UiMenu.vue
@@ -127,7 +127,7 @@
 <style lang="scss">
 
   /* stylelint-disable */
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import './styles/imports';
 
   .ui-menu {
diff --git a/lib/keen/UiPopover.vue b/lib/keen/UiPopover.vue
index c41463b3d..d837a54b9 100644
--- a/lib/keen/UiPopover.vue
+++ b/lib/keen/UiPopover.vue
@@ -350,7 +350,7 @@
 <style lang="scss">
 
   /* stylelint-disable */
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import './styles/imports';
   //@import './styles/tippy/tippy';
 
diff --git a/lib/keen/UiToolbar.vue b/lib/keen/UiToolbar.vue
index 5369c019e..5d6a94679 100644
--- a/lib/keen/UiToolbar.vue
+++ b/lib/keen/UiToolbar.vue
@@ -125,7 +125,7 @@
 </script>
 
 <style lang="scss">
-  @import '~kolibri-design-system/lib/styles/definitions';
+  @import '../styles/definitions';
   @import './styles/imports';
 
   $ui-toolbar-font-size: rem(18px) !default;

From 8adfe1e3f3eeb28a95a15c45eeff67264d16666b Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Mon, 19 Aug 2024 23:33:04 +0530
Subject: [PATCH 08/11] .

---
 lib/KBreadcrumbs.vue   | 2 +-
 lib/KModal.vue         | 2 +-
 lib/KPageContainer.vue | 2 +-
 lib/KSwitch.vue        | 2 +-
 lib/KTooltip/index.vue | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/KBreadcrumbs.vue b/lib/KBreadcrumbs.vue
index 6eca3efdd..161b690fa 100644
--- a/lib/KBreadcrumbs.vue
+++ b/lib/KBreadcrumbs.vue
@@ -283,7 +283,7 @@
 
 
 <style lang="scss" scoped>
-  @import '../styles/definitions';
+  
   @import './styles/definitions';
   $crumb-max-width: 300px;
 
diff --git a/lib/KModal.vue b/lib/KModal.vue
index 54e2941d7..3ac85f79c 100644
--- a/lib/KModal.vue
+++ b/lib/KModal.vue
@@ -374,7 +374,7 @@
 
 
 <style lang="scss" scoped>
-  @import '../styles/definitions';
+  
   @import './styles/definitions';
 
   .modal-overlay {
diff --git a/lib/KPageContainer.vue b/lib/KPageContainer.vue
index 00f273ba8..525f7d0f8 100644
--- a/lib/KPageContainer.vue
+++ b/lib/KPageContainer.vue
@@ -55,7 +55,7 @@
 
 
 <style lang="scss" scoped>
-  @import '../styles/definitions';
+  
   @import './styles/definitions';
 
   .page-container {
diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
index f888fc6cc..a384aa532 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -185,7 +185,7 @@
 
 
 <style lang="scss">
-   @import '../styles/definitions';
+   @import './styles/definitions.scss';
   $k-switch-height: 32px !default;
   $k-switch-thumb-size: 20px !default;
   $k-switch-thumb-color: #f5f5f5 !default;
diff --git a/lib/KTooltip/index.vue b/lib/KTooltip/index.vue
index c33cb6665..6de8baab0 100644
--- a/lib/KTooltip/index.vue
+++ b/lib/KTooltip/index.vue
@@ -130,7 +130,7 @@
   @import '../styles/definitions';
 
   .k-tooltip {
-    @extend %w-1dp;
+    @extend %dropshadow-1dp;
 
     position: absolute;
     z-index: 24;

From 5148db8e75d436f8d4c4dd67b8b09d191f41d66c Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Tue, 20 Aug 2024 01:04:02 +0530
Subject: [PATCH 09/11] commented depricated dropshadow

---
 lib/styles/definitions.scss | 168 ++++++++++++++++++------------------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/lib/styles/definitions.scss b/lib/styles/definitions.scss
index a3f38d648..ba3180fe2 100644
--- a/lib/styles/definitions.scss
+++ b/lib/styles/definitions.scss
@@ -67,91 +67,91 @@ $core-time: 0.25s;
   box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 3px 1px -2px rgba(0, 0, 0, 0.12);
 }
-%dropshadow-3dp {
-  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
-    0 3px 3px -2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-4dp {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-    0 1px 10px 0 rgba(0, 0, 0, 0.12);
-}
-%dropshadow-5dp {
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
-    0 1px 14px 0 rgba(0, 0, 0, 0.12);
-}
+// %dropshadow-3dp {
+//   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+//     0 3px 3px -2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-4dp {
+//   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+//     0 1px 10px 0 rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-5dp {
+//   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
+//     0 1px 14px 0 rgba(0, 0, 0, 0.12);
+// }
 %dropshadow-6dp {
   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
     0 1px 18px 0 rgba(0, 0, 0, 0.12);
-}
-%dropshadow-7dp {
-  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
-    0 2px 16px 1px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-8dp {
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-9dp {
-  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
-    0 3px 16px 2px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-10dp {
-  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
-    0 4px 18px 3px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-11dp {
-  box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
-    0 4px 20px 3px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-12dp {
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
-    0 5px 22px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-13dp {
-  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
-    0 5px 24px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-14dp {
-  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
-    0 5px 26px 4px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-15dp {
-  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
-    0 6px 28px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-16dp {
-  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-    0 6px 30px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-17dp {
-  box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
-    0 6px 32px 5px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-18dp {
-  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
-    0 7px 34px 6px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-19dp {
-  box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
-    0 7px 36px 6px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-20dp {
-  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
-    0 8px 38px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-21dp {
-  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
-    0 8px 40px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-22dp {
-  box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
-    0 8px 42px 7px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-23dp {
-  box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
-    0 9px 44px 8px rgba(0, 0, 0, 0.12);
-}
-%dropshadow-24dp {
-  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
-    0 9px 46px 8px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-7dp {
+//   box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
+//     0 2px 16px 1px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-8dp {
+//   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+//     0 3px 14px 2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-9dp {
+//   box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
+//     0 3px 16px 2px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-10dp {
+//   box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
+//     0 4px 18px 3px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-11dp {
+//   box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
+//     0 4px 20px 3px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-12dp {
+//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 22px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-13dp {
+//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 24px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-14dp {
+//   box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
+//     0 5px 26px 4px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-15dp {
+//   box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 28px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-16dp {
+//   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 30px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-17dp {
+//   box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
+//     0 6px 32px 5px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-18dp {
+//   box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
+//     0 7px 34px 6px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-19dp {
+//   box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
+//     0 7px 36px 6px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-20dp {
+//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 38px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-21dp {
+//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 40px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-22dp {
+//   box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
+//     0 8px 42px 7px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-23dp {
+//   box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
+//     0 9px 44px 8px rgba(0, 0, 0, 0.12);
+// }
+// %dropshadow-24dp {
+//   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+//     0 9px 46px 8px rgba(0, 0, 0, 0.12);
 }

From c610654ae2b0fdb6c66152523b17970415d818bf Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Tue, 20 Aug 2024 15:26:44 +0530
Subject: [PATCH 10/11] Update definitions.scss

---
 lib/styles/definitions.scss | 168 ++++++++++++++++++------------------
 1 file changed, 84 insertions(+), 84 deletions(-)

diff --git a/lib/styles/definitions.scss b/lib/styles/definitions.scss
index ba3180fe2..a3f38d648 100644
--- a/lib/styles/definitions.scss
+++ b/lib/styles/definitions.scss
@@ -67,91 +67,91 @@ $core-time: 0.25s;
   box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
     0 3px 1px -2px rgba(0, 0, 0, 0.12);
 }
-// %dropshadow-3dp {
-//   box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
-//     0 3px 3px -2px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-4dp {
-//   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
-//     0 1px 10px 0 rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-5dp {
-//   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
-//     0 1px 14px 0 rgba(0, 0, 0, 0.12);
-// }
+%dropshadow-3dp {
+  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
+    0 3px 3px -2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-4dp {
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+%dropshadow-5dp {
+  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 5px 8px 0 rgba(0, 0, 0, 0.14),
+    0 1px 14px 0 rgba(0, 0, 0, 0.12);
+}
 %dropshadow-6dp {
   box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
     0 1px 18px 0 rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-7dp {
-//   box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
-//     0 2px 16px 1px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-8dp {
-//   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-//     0 3px 14px 2px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-9dp {
-//   box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
-//     0 3px 16px 2px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-10dp {
-//   box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
-//     0 4px 18px 3px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-11dp {
-//   box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
-//     0 4px 20px 3px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-12dp {
-//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
-//     0 5px 22px 4px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-13dp {
-//   box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
-//     0 5px 24px 4px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-14dp {
-//   box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
-//     0 5px 26px 4px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-15dp {
-//   box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
-//     0 6px 28px 5px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-16dp {
-//   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-//     0 6px 30px 5px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-17dp {
-//   box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
-//     0 6px 32px 5px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-18dp {
-//   box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
-//     0 7px 34px 6px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-19dp {
-//   box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
-//     0 7px 36px 6px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-20dp {
-//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
-//     0 8px 38px 7px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-21dp {
-//   box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
-//     0 8px 40px 7px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-22dp {
-//   box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
-//     0 8px 42px 7px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-23dp {
-//   box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
-//     0 9px 44px 8px rgba(0, 0, 0, 0.12);
-// }
-// %dropshadow-24dp {
-//   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
-//     0 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-7dp {
+  box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.2), 0 7px 10px 1px rgba(0, 0, 0, 0.14),
+    0 2px 16px 1px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-8dp {
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-9dp {
+  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.2), 0 9px 12px 1px rgba(0, 0, 0, 0.14),
+    0 3px 16px 2px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-10dp {
+  box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2), 0 10px 14px 1px rgba(0, 0, 0, 0.14),
+    0 4px 18px 3px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-11dp {
+  box-shadow: 0 6px 7px -4px rgba(0, 0, 0, 0.2), 0 11px 15px 1px rgba(0, 0, 0, 0.14),
+    0 4px 20px 3px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-12dp {
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
+    0 5px 22px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-13dp {
+  box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 13px 19px 2px rgba(0, 0, 0, 0.14),
+    0 5px 24px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-14dp {
+  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2), 0 14px 21px 2px rgba(0, 0, 0, 0.14),
+    0 5px 26px 4px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-15dp {
+  box-shadow: 0 8px 9px -5px rgba(0, 0, 0, 0.2), 0 15px 22px 2px rgba(0, 0, 0, 0.14),
+    0 6px 28px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-16dp {
+  box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
+    0 6px 30px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-17dp {
+  box-shadow: 0 8px 11px -5px rgba(0, 0, 0, 0.2), 0 17px 26px 2px rgba(0, 0, 0, 0.14),
+    0 6px 32px 5px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-18dp {
+  box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2), 0 18px 28px 2px rgba(0, 0, 0, 0.14),
+    0 7px 34px 6px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-19dp {
+  box-shadow: 0 9px 12px -6px rgba(0, 0, 0, 0.2), 0 19px 29px 2px rgba(0, 0, 0, 0.14),
+    0 7px 36px 6px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-20dp {
+  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 20px 31px 3px rgba(0, 0, 0, 0.14),
+    0 8px 38px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-21dp {
+  box-shadow: 0 10px 13px -6px rgba(0, 0, 0, 0.2), 0 21px 33px 3px rgba(0, 0, 0, 0.14),
+    0 8px 40px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-22dp {
+  box-shadow: 0 10px 14px -6px rgba(0, 0, 0, 0.2), 0 22px 35px 3px rgba(0, 0, 0, 0.14),
+    0 8px 42px 7px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-23dp {
+  box-shadow: 0 11px 14px -7px rgba(0, 0, 0, 0.2), 0 23px 36px 3px rgba(0, 0, 0, 0.14),
+    0 9px 44px 8px rgba(0, 0, 0, 0.12);
+}
+%dropshadow-24dp {
+  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
+    0 9px 46px 8px rgba(0, 0, 0, 0.12);
 }

From 2620245eb6135f714bfea7c4964c605c5732c3ca Mon Sep 17 00:00:00 2001
From: lokesh-sagi125 <lokesh.personal28@gmail.com>
Date: Tue, 20 Aug 2024 18:49:03 +0530
Subject: [PATCH 11/11] .

---
 lib/KCard/BaseCard.vue | 2 +-
 lib/KSwitch.vue        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/KCard/BaseCard.vue b/lib/KCard/BaseCard.vue
index bb1689d44..517ddf3d4 100644
--- a/lib/KCard/BaseCard.vue
+++ b/lib/KCard/BaseCard.vue
@@ -176,7 +176,7 @@
 
 
 <style lang="scss" scoped>
-  @import '../styles/definitions';
+  
   @import '../styles/definitions';
 
   .base-card {
diff --git a/lib/KSwitch.vue b/lib/KSwitch.vue
index a384aa532..7099e26ed 100644
--- a/lib/KSwitch.vue
+++ b/lib/KSwitch.vue
@@ -185,7 +185,7 @@
 
 
 <style lang="scss">
-   @import './styles/definitions.scss';
+   @import './styles/definitions';
   $k-switch-height: 32px !default;
   $k-switch-thumb-size: 20px !default;
   $k-switch-thumb-color: #f5f5f5 !default;