diff --git a/projects/swimlane/ngx-ui/src/lib/assets/icons/iconfont/scss/icons.scss b/projects/swimlane/ngx-ui/src/lib/assets/icons/iconfont/scss/icons.scss
index 4ae3bf2c9..d874d5b62 100644
--- a/projects/swimlane/ngx-ui/src/lib/assets/icons/iconfont/scss/icons.scss
+++ b/projects/swimlane/ngx-ui/src/lib/assets/icons/iconfont/scss/icons.scss
@@ -18,7 +18,7 @@ Generated using nucleoapp.com
 
 [class^='icon-']:before,
 [class*='icon-']:before {
-  line-height: 1;
+  line-height: var(--font-line-height-100);
   font: normal normal normal 1em/1 'ngx-icon';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -26,20 +26,20 @@ Generated using nucleoapp.com
 
 /* size examples - relative units */
 .ngx-icon-sm {
-  font-size: 0.8em;
+  font-size: var(--font-size-xs);
 }
 
 .ngx-icon-lg {
-  font-size: 1.2em;
+  font-size: var(--font-size-l);
 }
 
 /* size examples - absolute units */
 .ngx-icon-16 {
-  font-size: 16px;
+  font-size: var(--font-size-m);
 }
 
 .ngx-icon-32 {
-  font-size: 32px;
+  font-size: var(--font-size-4xl);
 }
 
 /* rotate the icon infinitely */
diff --git a/projects/swimlane/ngx-ui/src/lib/components/button-group/button-group.component.scss b/projects/swimlane/ngx-ui/src/lib/components/button-group/button-group.component.scss
index 3f3b0a5de..8d73142bf 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/button-group/button-group.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/button-group/button-group.component.scss
@@ -6,20 +6,20 @@
   position: relative;
 
   // default colors
-  --button-bg: #{colors.$color-blue-grey-600};
-  --button-border: #{colors.$color-blue-grey-600};
+  --button-bg: var(--grey-600);
+  --button-border: var(--grey-600);
   --button-text: white;
-  --button-hover: #{colors.$color-blue-grey-700};
+  --button-hover: var(--grey-700);
 
   &.ngx-button-group--contained--primary {
-    --button-bg: #{colors.$color-blue-400};
-    --button-border: #{colors.$color-blue-400};
+    --button-bg: var(--blue-400);
+    --button-border: var(--blue-400);
     --button-text: white;
-    --button-hover: #{colors.$color-blue};
+    --button-hover: var(--blue-500);
   }
 
   > ngx-dropdown {
-    padding-bottom: 0;
+    padding-bottom: var(--spacing-0);
     position: unset; // align dropdown menu with button group
 
     > ngx-dropdown-toggle {
@@ -41,11 +41,11 @@
 
       button {
         // matching button style in dropdown menu
-        padding: 5px 20px;
+        padding: var(--spacing-4) var(--spacing-20);
         white-space: nowrap;
         width: 100%;
         text-align: left;
-        font-size: 0.9em;
+        font-size: var(--font-size-m);
       }
     }
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle-group.component.scss b/projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle-group.component.scss
index c9ba556fd..c15e5c0d4 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle-group.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle-group.component.scss
@@ -6,10 +6,10 @@
 
   &__container {
     &__label {
-      font-weight: 600;
-      font-size: 12px;
+      font-weight: var(--font-weight-semibold);
+      font-size: var(--font-size-xs);
       line-height: 12px;
-      color: colors.$color-blue-grey-350;
+      color: var(--grey-350);
     }
 
     &__toggle-buttons {
@@ -17,22 +17,22 @@
       display: flex;
       flex-wrap: nowrap;
 
-      border: 1px solid colors.$color-blue-grey-600;
-      border-radius: 4px;
+      border: 1px solid var(--grey-600);
+      border-radius: var(--radius-4);
 
-      padding: 2px;
-      gap: 2px;
+      padding: var(--spacing-2);
+      gap: var(--spacing-2);
 
       &__animation-holder {
         position: absolute;
 
         top: 0;
 
-        margin: 2px;
+        margin: var(--spacing-2);
         height: calc(100% - 4px);
 
-        border-radius: 2px;
-        background-color: colors.$color-blue-grey-700;
+        border-radius: var(--radius-2);
+        background-color: var(--grey-700);
         transition: all 0.25s cubic-bezier(0.35, 0, 0.25, 1);
       }
     }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle.component.scss b/projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle.component.scss
index fc1f80944..7619937f4 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/button-toggle/button-toggle.component.scss
@@ -5,22 +5,22 @@
   position: relative;
   z-index: 3;
   padding: 1px 10px;
-  border-radius: 2px;
-  color: colors.$color-blue-grey-350;
+  border-radius: var(--radius-2);
+  color: var(--grey-350);
   white-space: nowrap;
   transition: background-color 0.25s cubic-bezier(0.35, 0, 0.25, 1), font-weight 0.25s ease-in;
 
   &.checked {
-    font-weight: 600;
-    color: colors.$color-blue-grey-050;
-    background-color: colors.$color-blue-grey-700;
+    font-weight: var(--font-weight-semibold);
+    color: var(--grey-050);
+    background-color: var(--grey-700);
   }
 
   &:hover:not(.checked):not([disabled]) {
-    background: rgba(colors.$color-blue-grey-650, 0.1);
+    background: rgba(var(--grey-650), 0.1);
   }
 
   &:focus-visible {
-    outline: 2px solid colors.$color-blue-grey-500;
+    outline: 2px solid var(--grey-500);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/button/button.component.scss b/projects/swimlane/ngx-ui/src/lib/components/button/button.component.scss
index 5944e8ec8..d7379af69 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/button/button.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/button/button.component.scss
@@ -7,14 +7,14 @@
   &,
   &.btn {
     transition: background-color 0.25s ease-out;
-    padding: 0;
+    padding: var(--spacing-0);
   }
 
   button {
     padding: 0.35em 0.55em;
     width: 100%;
     outline-offset: 2px;
-    border-radius: 2px;
+    border-radius: var(--radius-2);
 
     > .content {
       text-overflow: ellipsis;
@@ -46,19 +46,19 @@
   }
 
   &.in-progress {
-    color: colors.$color-white !important;
+    color: var(--white) !important;
   }
 
   &.success {
-    background-color: colors.$color-green !important;
-    background: colors.$color-green !important;
-    border: 1px solid colors.$color-green !important;
+    background-color: var(--green-500) !important;
+    background: var(--green-500) !important;
+    border: 1px solid var(--green-500) !important;
   }
 
   &.fail {
-    background-color: colors.$color-red !important;
-    background: colors.$color-red !important;
-    border: 1px solid colors.$color-red !important;
+    background-color: var(--red-500) !important;
+    background: var(--red-500) !important;
+    border: 1px solid var(--red-500) !important;
   }
 
   &.in-progress,
@@ -98,31 +98,31 @@
       .icon {
         height: 1em;
         width: 1em;
-        font-weight: bold;
-        color: colors.$color-white;
+        font-weight: var(--font-weight-bold);
+        color: var(--white);
         overflow: hidden;
-        font-size: 1em;
+        font-size: var(--font-size-m);
       }
     }
   }
 
   // focus ring colors
   &.btn-primary button {
-    outline-color: colors.$color-blue;
+    outline-color: var(--blue-500);
   }
 
   &.btn-warning button {
-    outline-color: colors.$color-orange;
+    outline-color: var(--orange-500);
   }
 
   &.btn-danger button {
-    outline-color: colors.$color-red-400;
+    outline-color: var(--red-400);
   }
 
   &.btn-bordered,
   &.btn-primary.btn-bordered {
     button {
-      outline-color: colors.$color-blue-400;
+      outline-color: var(--blue-400);
     }
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/button/file-button.component.scss b/projects/swimlane/ngx-ui/src/lib/components/button/file-button.component.scss
index 22e3aa343..11b28ffe3 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/button/file-button.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/button/file-button.component.scss
@@ -1,10 +1,10 @@
 @use 'colors/colors' as colors;
 @use 'components/buttons' as buttons;
 
-$upload-button-text-color: colors.$color-grey-100;
-$upload-button-progress-fill: colors.$color-blue-400;
-$upload-button-progress-bg: colors.$color-grey-500;
-$upload-button-success-fill: colors.$color-blue-400;
+$upload-button-text-color: var(--grey-100);
+$upload-button-progress-fill: var(--blue-400);
+$upload-button-progress-bg: var(--grey-500);
+$upload-button-success-fill: var(--blue-400);
 
 /**
  * File upload button
@@ -34,8 +34,8 @@ $upload-button-success-fill: colors.$color-blue-400;
     }
 
     .ngx-file-button-text {
-      font-size: 0.9rem;
-      margin-left: 8px;
+      font-size: var(--font-size-m);
+      margin-left: var(--spacing-8);
       color: $upload-button-progress-bg;
     }
   }
@@ -52,10 +52,10 @@ $upload-button-success-fill: colors.$color-blue-400;
       background: buttons.$button-fill-color;
       border: none;
       border-radius: 50px;
-      padding: 5px 0;
+      padding: var(--spacing-4) var(--spacing-0);
       transition: 0.3s all ease;
       position: relative;
-      margin: 0;
+      margin: var(--spacing-0);
 
       &:hover:not([disabled]),
       &:focus:not([disabled]),
@@ -66,9 +66,9 @@ $upload-button-success-fill: colors.$color-blue-400;
 
       .ngx-file-button-label {
         color: $upload-button-text-color;
-        font-size: 18px;
-        font-weight: 400;
-        line-height: 40px;
+        font-size: var(--font-size-l);
+        font-weight: var(--font-weight-regular);
+        line-height: var(--font-line-height-400);
         max-height: 40px;
         transition: 0.3s all ease;
         cursor: pointer;
@@ -100,8 +100,8 @@ $upload-button-success-fill: colors.$color-blue-400;
     }
 
     .icon-check {
-      font-size: 25px;
-      color: colors.$color-grey-100;
+      font-size: var(--font-size-2xl);
+      color: var(--grey-100);
       position: absolute;
       top: 0;
       left: 0;
@@ -112,16 +112,16 @@ $upload-button-success-fill: colors.$color-blue-400;
     }
 
     &.active {
-      padding: 0;
+      padding: var(--spacing-0);
 
       .ngx-file-button-button {
         background: $upload-button-progress-bg;
-        margin-top: 25px;
+        margin-top: var(--spacing-24);
       }
 
       .ngx-file-button-fill {
         display: block;
-        margin-top: 25px;
+        margin-top: var(--spacing-24);
         transition: 100ms all ease 100ms;
       }
 
@@ -132,8 +132,8 @@ $upload-button-success-fill: colors.$color-blue-400;
 
     &.success {
       .ngx-file-button-button {
-        margin: 0;
-        padding: 25px;
+        margin: var(--spacing-0);
+        padding: var(--spacing-24);
         width: 50px;
         background: $upload-button-success-fill;
       }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.scss b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.scss
index 542ef5fc4..d337b5417 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/calendar/calendar.component.scss
@@ -2,27 +2,27 @@
 @use 'colors/shadow-variables' as shadows;
 @use 'forms/variables' as inputs;
 
-$calendar-bg: colors.$color-blue-grey-800;
-$calendar-border: colors.$color-blue-grey-700;
-$calendar-title-bg: colors.$color-blue-grey-800;
-$calendar-title-btn: colors.$color-blue-grey-350;
-$calendar-hover-bg: colors.$color-blue-400;
-$calendar-today-bg: colors.$color-blue-grey-750;
-$calendar-active-bg: colors.$color-blue-400;
-$calendar-active-text: colors.$color-grey-050;
-$calendar-range-bg: colors.$color-blue-700;
-$calendar-day-text: colors.$color-blue-grey-350;
-$calendar-month-current: colors.$color-blue-grey-750;
+$calendar-bg: var(--grey-800);
+$calendar-border: var(--grey-700);
+$calendar-title-bg: var(--grey-800);
+$calendar-title-btn: var(--grey-350);
+$calendar-hover-bg: var(--blue-400);
+$calendar-today-bg: var(--grey-750);
+$calendar-active-bg: var(--blue-400);
+$calendar-active-text: var(--grey-050);
+$calendar-range-bg: var(--blue-700);
+$calendar-day-text: var(--grey-350);
+$calendar-month-current: var(--grey-750);
 
 .ngx-calendar {
   position: relative;
-  font-size: 0.9rem;
+  font-size: var(--font-size-m);
   box-shadow: shadows.$shadow-3;
   background: $calendar-bg;
   display: inline-block;
   border: 1px solid $calendar-border;
   width: 270px;
-  padding: 0.5rem 0rem;
+  padding: 0.5rem var(--spacing-0);
 
   .ngx-calendar-wrap {
     flex: 1 1 100%;
@@ -33,10 +33,10 @@ $calendar-month-current: colors.$color-blue-grey-750;
   }
 
   button {
-    outline: 0px colors.$color-blue-200;
+    outline: 0px var(--blue-200);
 
     &:focus-within {
-      outline: 2px solid colors.$color-blue-200;
+      outline: 2px solid var(--blue-200);
       outline-offset: 1px;
     }
   }
@@ -44,29 +44,29 @@ $calendar-month-current: colors.$color-blue-grey-750;
   .title-row {
     background: $calendar-title-bg;
     color: $calendar-active-text;
-    padding: 0.69rem 0;
-    font-weight: 600;
+    padding: 0.69rem var(--spacing-0);
+    font-weight: var(--font-weight-semibold);
     line-height: 0;
 
     .title {
       color: $calendar-active-bg;
       min-width: 100px;
-      padding: 9px;
+      padding: var(--spacing-9);
       cursor: pointer;
-      border-radius: 3px;
+      border-radius: var(--radius-4);
     }
 
     .prev-month,
     .next-month {
       color: $calendar-title-btn;
-      font-size: 0.6rem;
-      border-radius: 3px;
+      font-size: var(--font-size-xxs);
+      border-radius: var(--radius-4);
     }
   }
 
   .day-name-row {
     color: $calendar-day-text;
-    font-weight: 600;
+    font-weight: var(--font-weight-semibold);
     display: flex;
 
     .day-name {
@@ -75,7 +75,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
   }
 
   td {
-    padding: 0px;
+    padding: var(--spacing-0);
   }
 
   .day-name,
@@ -96,7 +96,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
   }
 
   .day-container {
-    margin-top: 0;
+    margin-top: var(--spacing-0);
     width: 100%;
 
     .day-row {
@@ -106,7 +106,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
       }
       .day-cell2 {
         flex: 1 0 30px;
-        margin: 0.1rem 0rem;
+        margin: 0.1rem var(--spacing-0);
       }
     }
 
@@ -120,7 +120,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
       border-radius: 50%;
       text-align: center;
       transition: background 200ms;
-      padding: 0;
+      padding: var(--spacing-0);
 
       &.prev-month,
       &.next-month {
@@ -156,7 +156,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
       border-radius: 50%;
       text-align: center;
       transition: background 200ms;
-      padding: 0;
+      padding: var(--spacing-0);
       position: relative;
 
       &.prev-month,
@@ -235,7 +235,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
       }
       &.range {
         color: $calendar-active-text;
-        margin: 0rem 0rem;
+        margin: var(--spacing-0) var(--spacing-0);
         max-width: initial;
         flex: 1 1 30px;
         &:before {
@@ -321,7 +321,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
 
     .month-cell,
     .year-cell {
-      padding: 0;
+      padding: var(--spacing-0);
       border: 1px solid $calendar-border;
     }
 
@@ -330,7 +330,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
       grid-auto-rows: auto;
       text-transform: uppercase;
       text-align: center;
-      font-size: 14px;
+      font-size: var(--font-size-s);
       width: 100%;
 
       &.active {
@@ -378,7 +378,7 @@ $calendar-month-current: colors.$color-blue-grey-750;
   background: $calendar-bg;
   border-top: 1px solid $calendar-border;
   border-bottom: 1px solid $calendar-border;
-  padding: 24px 18px 6px 18px;
+  padding: var(--spacing-24) 18px 6px 18px;
 
   flex-direction: row;
   box-sizing: border-box;
@@ -392,9 +392,9 @@ $calendar-month-current: colors.$color-blue-grey-750;
   }
 
   .ngx-input {
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
+    margin-top: var(--spacing-0);
+    margin-bottom: var(--spacing-0);
+    padding-top: var(--spacing-0);
     width: 73px;
     height: 46px;
 
@@ -404,10 +404,10 @@ $calendar-month-current: colors.$color-blue-grey-750;
   }
 
   button.ampm {
-    color: colors.$color-blue-grey-500;
+    color: var(--grey-500);
 
     &.selected {
-      color: colors.$color-white;
+      color: var(--white);
       background-color: #818fa933;
       opacity: 20;
     }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/card/card-avatar/card-avatar.component.scss b/projects/swimlane/ngx-ui/src/lib/components/card/card-avatar/card-avatar.component.scss
index f6af5e359..d19c3c7b7 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/card/card-avatar/card-avatar.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/card/card-avatar/card-avatar.component.scss
@@ -1,7 +1,7 @@
 @use 'colors/colors' as colors;
 
 $border-width: 3px;
-$color-background-grey: colors.$color-blue-grey-750;
+$color-background-grey: var(--grey-750);
 
 .ngx-card-avatar {
   width: 54px;
@@ -16,7 +16,7 @@ $color-background-grey: colors.$color-blue-grey-750;
   }
 
   &--avatar {
-    border: 2px solid colors.$color-blue-grey-100;
+    border: 2px solid var(--grey-100);
     box-shadow: 0 0 15px rgba(122, 185, 255, 0.4);
     border-radius: 100%;
     width: 100%;
@@ -39,7 +39,7 @@ $color-background-grey: colors.$color-blue-grey-750;
         left: 0;
         width: 10px;
         height: 10px;
-        padding: 4px;
+        padding: var(--spacing-4);
         border-radius: 50%;
         border: $border-width solid $color-background-grey;
         background-color: white;
@@ -57,9 +57,9 @@ $color-background-grey: colors.$color-blue-grey-750;
 
       .ngx-card-avatar--content {
         margin: auto;
-        font-size: 0.95rem;
-        color: colors.$color-blue-grey-100;
-        font-weight: bold;
+        font-size: var(--font-size-m);
+        color: var(--grey-100);
+        font-weight: var(--font-weight-bold);
       }
     }
   }
@@ -73,7 +73,7 @@ $color-background-grey: colors.$color-blue-grey-750;
       }
 
       &.error {
-        background-color: colors.$color-error;
+        background-color: var(--color-error);
       }
     }
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/card/card-placeholder/card-placeholder.component.scss b/projects/swimlane/ngx-ui/src/lib/components/card/card-placeholder/card-placeholder.component.scss
index 8fc6c9484..af9554eba 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/card/card-placeholder/card-placeholder.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/card/card-placeholder/card-placeholder.component.scss
@@ -2,7 +2,7 @@
 
 .ngx-card-placeholder {
   display: inline-block;
-  background-color: colors.$color-blue-grey-700;
+  background-color: var(--grey-700);
   border-radius: 11px;
 
   &.small {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/card/card.component.scss b/projects/swimlane/ngx-ui/src/lib/components/card/card.component.scss
index 7e01a1388..f9e3ab834 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/card/card.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/card/card.component.scss
@@ -1,10 +1,10 @@
 @use 'colors/colors' as colors;
 
-$color-accent-grey: linear-gradient(180deg, colors.$color-blue-grey-100 0%, colors.$color-blue-grey-200 100%);
+$color-accent-grey: linear-gradient(180deg, var(--grey-100) 0%, var(--grey-200) 100%);
 $card-accent-thickness: 4px;
 
-$color-background-grey: linear-gradient(180deg, colors.$color-blue-grey-750 0%, colors.$color-blue-grey-800 100%);
-$color-flat-background: colors.$color-blue-grey-800;
+$color-background-grey: linear-gradient(180deg, var(--grey-750) 0%, var(--grey-800) 100%);
+$color-flat-background: var(--grey-800);
 
 $card-outline-border-thickness: 3px;
 
@@ -14,7 +14,7 @@ $card-horizontal-description-padding: 15px;
 
 $card-vertical-header-padding: 15px;
 $card-vertical-body-padding: 27px;
-$card-vertical-gutter: 20px;
+$card-vertical-gutter: var(--spacing-20);
 
 @keyframes cardSlideIn {
   0% {
@@ -32,7 +32,7 @@ $card-vertical-gutter: 20px;
   display: flex;
   background: $color-flat-background;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-  border-radius: 2px;
+  border-radius: var(--radius-2);
 
   // disabled
   &.disabled {
@@ -46,11 +46,11 @@ $card-vertical-gutter: 20px;
 
   &--status {
     display: block;
-    background-color: colors.$color-blue-grey-550;
+    background-color: var(--grey-550);
     width: 8px;
     height: 8px;
     border-radius: 50%;
-    box-shadow: inset 0 -2px 2px colors.$color-blue-grey-600;
+    box-shadow: inset 0 -2px 2px var(--grey-600);
 
     &.success {
       background-color: #b0e53c;
@@ -58,8 +58,8 @@ $card-vertical-gutter: 20px;
     }
 
     &.error {
-      background-color: colors.$color-error;
-      box-shadow: 0 0 7px colors.$color-error;
+      background-color: var(--color-error);
+      box-shadow: 0 0 7px var(--color-error);
     }
   }
 
@@ -73,12 +73,12 @@ $card-vertical-gutter: 20px;
     width: 3px;
     height: 3px;
     border-radius: 50%;
-    background-color: colors.$color-blue-grey-400;
-    margin: 3px 5px;
+    background-color: var(--grey-400);
+    margin: 3px var(--spacing-4);
   }
 
   .ngx-dropdown.ellipsis {
-    padding: 0;
+    padding: var(--spacing-0);
   }
 
   &.flat {
@@ -106,7 +106,7 @@ $card-vertical-gutter: 20px;
     margin-left: $card-horizontal-header-padding;
 
     .ngx-checkbox--label .ngx-checkbox--box {
-      margin-right: 0;
+      margin-right: var(--spacing-0);
     }
   }
 
@@ -116,14 +116,14 @@ $card-vertical-gutter: 20px;
     min-width: $card-accent-thickness;
     right: 0;
     height: 100%;
-    border-radius: 0 2px 2px 0;
+    border-radius: var(--radius-0) var(--radius-2) var(--radius-2) var(--radius-0);
   }
 
   // horizontal header
   .ngx-card-header {
     display: flex;
     align-items: center;
-    padding: 0 $card-horizontal-header-padding;
+    padding: var(--spacing-0) $card-horizontal-header-padding;
     flex-grow: 1;
     overflow: hidden;
     cursor: pointer;
@@ -148,22 +148,22 @@ $card-vertical-gutter: 20px;
       }
 
       .ngx-card-tag {
-        font-weight: bold;
-        font-size: 10px;
+        font-weight: var(--font-weight-bold);
+        font-size: var(--font-size-xxs);
         line-height: 12px;
       }
 
       .ngx-card-title {
-        font-weight: 600;
+        font-weight: var(--font-weight-semibold);
         font-size: 22px;
         color: #f0f1f6;
       }
 
       .ngx-card-subtitle {
         display: inline-block;
-        font-weight: 600;
-        font-size: 14px;
-        color: colors.$color-blue-grey-300;
+        font-weight: var(--font-weight-semibold);
+        font-size: var(--font-size-s);
+        color: var(--grey-300);
 
         > span {
           display: inline-block;
@@ -177,7 +177,7 @@ $card-vertical-gutter: 20px;
     align-items: center;
     justify-content: center;
     height: 100%;
-    padding: 0 $card-horizontal-gutter;
+    padding: var(--spacing-0) $card-horizontal-gutter;
 
     &--description {
       flex-basis: 28%;
@@ -185,8 +185,8 @@ $card-vertical-gutter: 20px;
       padding-bottom: $card-horizontal-description-padding;
 
       > p {
-        color: colors.$color-blue-grey-350;
-        font-size: 14px;
+        color: var(--grey-350);
+        font-size: var(--font-size-s);
         line-height: 18px;
         display: -webkit-box;
         -webkit-box-orient: vertical;
@@ -202,11 +202,11 @@ $card-vertical-gutter: 20px;
       flex-basis: 20%;
 
       .ngx-card-placeholder {
-        margin-bottom: 10px;
+        margin-bottom: var(--spacing-10);
         width: 100%; // section placeholders takes up entire width
 
         &:last-child {
-          margin-bottom: 0;
+          margin-bottom: var(--spacing-0);
         }
       }
 
@@ -226,20 +226,20 @@ $card-vertical-gutter: 20px;
 
     .view-details {
       display: flex;
-      color: colors.$color-blue-400;
-      font-size: 15px;
-      font-weight: 600;
+      color: var(--blue-400);
+      font-size: var(--font-size-m);
+      font-weight: var(--font-weight-semibold);
       white-space: nowrap;
       cursor: pointer;
 
       i {
-        margin-top: 5px;
-        margin-right: 5px;
+        margin-top: var(--spacing-4);
+        margin-right: var(--spacing-4);
       }
     }
 
     .ngx-dropdown.ellipsis {
-      margin-right: 12px;
+      margin-right: var(--spacing-12);
     }
   }
 
@@ -250,29 +250,29 @@ $card-vertical-gutter: 20px;
     right: -5px;
     left: -5px;
     bottom: -5px;
-    border: $card-outline-border-thickness solid colors.$color-blue-400;
-    border-radius: 5px;
+    border: $card-outline-border-thickness solid var(--blue-400);
+    border-radius: var(--radius-6);
 
     &.error {
-      border-color: colors.$color-error;
+      border-color: var(--color-error);
     }
   }
 
   .ngx-card--outline-text {
     pointer-events: none;
-    color: colors.$color-blue-400;
+    color: var(--blue-400);
     white-space: nowrap;
     position: absolute;
     top: -5px;
     right: -5px;
     left: -5px;
     bottom: -5px;
-    border: $card-outline-border-thickness solid colors.$color-blue-400;
+    border: $card-outline-border-thickness solid var(--blue-400);
     border-bottom: 0;
-    border-radius: 5px;
+    border-radius: var(--radius-6);
 
     .inner-text {
-      font-size: 14px;
+      font-size: var(--font-size-s);
       width: 100%;
       text-align: center;
       position: absolute;
@@ -286,30 +286,30 @@ $card-vertical-gutter: 20px;
       &::after {
         content: '';
         height: $card-outline-border-thickness;
-        background: colors.$color-blue-400;
+        background: var(--blue-400);
       }
 
       &::before {
-        margin-right: 15px;
-        border-radius: 0 0 0 2px;
+        margin-right: var(--spacing-16);
+        border-radius: var(--radius-0) var(--radius-0) var(--radius-0) var(--radius-2);
         flex: 1;
       }
 
       &::after {
-        margin-left: 15px;
-        border-radius: 0 0 2px 0;
-        width: 20px;
+        margin-left: var(--spacing-16);
+        border-radius: var(--radius-0) var(--radius-0) var(--radius-2) var(--radius-0);
+        width: var(--spacing-20);
       }
     }
 
     &.error {
-      color: colors.$color-error;
-      border-color: colors.$color-error;
+      color: var(--color-error);
+      border-color: var(--color-error);
 
       .inner-text {
         &::before,
         &::after {
-          background: colors.$color-error;
+          background: var(--color-error);
         }
       }
     }
@@ -322,10 +322,10 @@ $card-vertical-gutter: 20px;
   min-width: 347px;
   max-width: 850px;
   height: 418px;
-  color: colors.$color-blue-grey-350;
+  color: var(--grey-350);
 
   .ngx-card--status {
-    margin: $card-vertical-header-padding auto 0 auto;
+    margin: $card-vertical-header-padding auto var(--spacing-0) auto;
   }
 
   .ngx-card--accent {
@@ -333,7 +333,7 @@ $card-vertical-gutter: 20px;
     bottom: 0;
     width: 100%;
     height: $card-accent-thickness;
-    border-radius: 0 2px 2px 0;
+    border-radius: var(--radius-0) var(--radius-2) var(--radius-2) var(--radius-0);
   }
 
   .ngx-card-header {
@@ -341,15 +341,15 @@ $card-vertical-gutter: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    border-bottom: 2px colors.$color-blue-grey-700;
+    border-bottom: 2px var(--grey-700);
 
     .ngx-card-avatar {
-      margin: $card-vertical-header-padding 0 $card-vertical-gutter 0;
+      margin: $card-vertical-header-padding var(--spacing-0) $card-vertical-gutter var(--spacing-0);
     }
 
     &--label {
-      font-weight: 600;
-      font-size: 12px;
+      font-weight: var(--font-weight-semibold);
+      font-size: var(--font-size-xs);
       border-bottom: 0;
       white-space: nowrap;
       width: 100%;
@@ -364,16 +364,16 @@ $card-vertical-gutter: 20px;
       &::after {
         content: '';
         height: 2px;
-        background: colors.$color-blue-grey-700;
+        background: var(--grey-700);
         width: 100%;
       }
 
       &::before {
-        margin-right: 20px;
+        margin-right: var(--spacing-20);
       }
 
       &::after {
-        margin-left: 20px;
+        margin-left: var(--spacing-20);
       }
     }
   }
@@ -383,13 +383,13 @@ $card-vertical-gutter: 20px;
     flex-direction: column;
     align-items: center;
     flex-grow: 1;
-    padding: $card-vertical-gutter 0;
+    padding: $card-vertical-gutter var(--spacing-0);
     padding-left: $card-vertical-body-padding;
     padding-right: $card-vertical-body-padding;
 
     .ngx-card-title,
     .ngx-card-subtitle {
-      font-weight: 600;
+      font-weight: var(--font-weight-semibold);
       width: 100%;
       white-space: nowrap;
       overflow: hidden;
@@ -398,31 +398,31 @@ $card-vertical-gutter: 20px;
     }
 
     .ngx-card-title {
-      font-weight: 600;
-      font-size: 21px;
+      font-weight: var(--font-weight-semibold);
+      font-size: var(--font-size-xl);
       color: #f0f1f6;
-      margin-bottom: 5px;
+      margin-bottom: var(--spacing-4);
     }
 
     .ngx-card-subtitle {
-      color: colors.$color-blue-grey-200;
-      font-size: 13px;
+      color: var(--grey-200);
+      font-size: var(--font-size-xs);
     }
   }
 
   .ngx-card-footer {
     position: relative;
-    border-bottom: 2px colors.$color-blue-grey-700;
+    border-bottom: 2px var(--grey-700);
     height: 50px;
-    padding: $card-vertical-gutter 0;
+    padding: $card-vertical-gutter var(--spacing-0);
     margin-bottom: $card-accent-thickness;
     display: flex;
     align-items: center;
     justify-content: center;
 
     &--label {
-      font-weight: 600;
-      font-size: 12px;
+      font-weight: var(--font-weight-semibold);
+      font-size: var(--font-size-xs);
       border-bottom: 0;
       white-space: nowrap;
       width: 100%;
@@ -437,23 +437,23 @@ $card-vertical-gutter: 20px;
       &::after {
         content: '';
         height: 2px;
-        background: colors.$color-blue-grey-700;
+        background: var(--grey-700);
         width: 100%;
       }
 
       &::before {
-        margin-right: 20px;
+        margin-right: var(--spacing-20);
       }
 
       &::after {
-        margin-left: 20px;
+        margin-left: var(--spacing-20);
       }
     }
 
     .action {
       // footer action button
       cursor: pointer;
-      margin-right: 25px;
+      margin-right: var(--spacing-24);
     }
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.scss b/projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.scss
index b1e816554..4c56d1759 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/checkbox/checkbox.component.scss
@@ -18,20 +18,20 @@
   .ngx-checkbox--label {
     display: flex;
     cursor: pointer;
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-0);
 
     input {
       display: none;
     }
 
     .ngx-checkbox--box {
-      border-radius: 2px;
+      border-radius: var(--radius-2);
       background-color: transparent;
-      border: 2px solid colors.$color-blue-grey-600;
+      border: 2px solid var(--grey-600);
       transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
       user-select: none;
-      margin: auto 10px auto 0;
-      outline: 0px none colors.$color-blue-200;
+      margin: auto 10px auto var(--spacing-0);
+      outline: 0px none var(--blue-200);
       outline-offset: 1px;
 
       &:after {
@@ -41,17 +41,17 @@
         width: 6px;
         height: 12px;
         content: '';
-        border: solid colors.$color-white;
+        border: solid var(--white);
         border-width: 0 2px 2px 0;
         transform: rotate(0deg) scale(0);
         transition: all 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
       }
 
       &.indeterminate {
-        background-color: colors.$color-blue-400;
-        border-radius: 2px;
+        background-color: var(--blue-400);
+        border-radius: var(--radius-2);
         opacity: 1;
-        border: 2px solid colors.$color-blue-400;
+        border: 2px solid var(--blue-400);
         transform: rotate(0deg) scale(1);
 
         &:after {
@@ -61,15 +61,15 @@
           left: calc(50% - 6px);
           border: none;
           transform: rotate(0deg) scale(1);
-          background-color: colors.$color-white;
+          background-color: var(--white);
         }
       }
 
       &.checked {
-        background-color: colors.$color-blue-400;
-        border-radius: 2px;
+        background-color: var(--blue-400);
+        border-radius: var(--radius-2);
         opacity: 1;
-        border: 2px solid colors.$color-blue-400;
+        border: 2px solid var(--blue-400);
         transform: rotate(0deg) scale(1);
         &:after {
           transform: rotate(45deg) scale(1);
@@ -79,15 +79,15 @@
     }
 
     .ngx-checkbox--content {
-      margin: auto 0;
-      color: colors.$color-blue-grey-100;
+      margin: auto var(--spacing-0);
+      color: var(--grey-100);
     }
 
     &:focus-visible {
       outline: none;
 
       .ngx-checkbox--box {
-        outline: 2px solid colors.$color-blue-200;
+        outline: 2px solid var(--blue-200);
       }
     }
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/code-editor/code-editor.component.scss b/projects/swimlane/ngx-ui/src/lib/components/code-editor/code-editor.component.scss
index bd69fe923..c1d9bfe9c 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/code-editor/code-editor.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/code-editor/code-editor.component.scss
@@ -1,6 +1,6 @@
 .CodeMirror {
   height: auto;
-  font-size: 13px;
+  font-size: var(--font-size-xs);
   margin-top: 0.7em;
   margin-bottom: 0.7em;
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/code-editor/codemirror.css b/projects/swimlane/ngx-ui/src/lib/components/code-editor/codemirror.css
index 5fa197674..74ff4f643 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/code-editor/codemirror.css
+++ b/projects/swimlane/ngx-ui/src/lib/components/code-editor/codemirror.css
@@ -10,10 +10,10 @@
 /* PADDING */
 
 .CodeMirror-lines {
-  padding: 4px 0; /* Vertical padding around content */
+  padding: var(--spacing-4) var(--spacing-0); /* Vertical padding around content */
 }
 .CodeMirror pre {
-  padding: 0 4px; /* Horizontal padding of content */
+  padding: var(--spacing-0) var(--spacing-4); /* Horizontal padding of content */
 }
 
 .CodeMirror-scrollbar-filler,
@@ -31,7 +31,7 @@
 .CodeMirror-linenumbers {
 }
 .CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
+  padding: var(--spacing-0) 3px var(--spacing-0) 5px;
   min-width: 20px;
   text-align: right;
   color: #999;
@@ -141,7 +141,7 @@
 }
 .cm-header,
 .cm-strong {
-  font-weight: bold;
+  font-weight: var(--font-weight-bold);
 }
 .cm-em {
   font-style: italic;
@@ -253,7 +253,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
   /* See overflow: hidden in .CodeMirror */
   margin-bottom: -30px;
   margin-right: -30px;
-  padding-bottom: 30px;
+  padding-bottom: var(--spacing-30);
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
@@ -339,14 +339,14 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 }
 .CodeMirror pre {
   /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
+  -moz-border-radius: var(--radius-0);
+  -webkit-border-radius: var(--radius-0);
+  border-radius: var(--radius-0);
   border-width: 0;
   background: transparent;
   font-family: inherit;
   font-size: inherit;
-  margin: 0;
+  margin: var(--spacing-0);
   white-space: pre;
   word-wrap: normal;
   line-height: inherit;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/code-editor/dracula.css b/projects/swimlane/ngx-ui/src/lib/components/code-editor/dracula.css
index 0b2fd80cc..5e9511ecb 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/code-editor/dracula.css
+++ b/projects/swimlane/ngx-ui/src/lib/components/code-editor/dracula.css
@@ -94,8 +94,8 @@
 }
 
 .cm-s-dracula span.cm-mustache {
-  border-radius: 5px;
+  border-radius: var(--radius-6);
   color: #cdd3dd;
   background-color: #455066;
-  padding: 0px 2px 2px 2px;
+  padding: var(--spacing-0) var(--spacing-2) var(--spacing-2) var(--spacing-2);
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/code-editor/hint.scss b/projects/swimlane/ngx-ui/src/lib/components/code-editor/hint.scss
index 252a88147..59a80a2fb 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/code-editor/hint.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/code-editor/hint.scss
@@ -1,10 +1,10 @@
 @use 'colors/colors' as colors;
 @use 'colors/shadow-variables' as shadows;
 
-$dropdown-bg: colors.$color-blue-grey-700;
-$dropdown-bg-active: colors.$color-blue-grey-750;
-$dropdown-bg-hover: colors.$color-blue-grey-800;
-$dropdown-color: colors.$color-blue-grey-150;
+$dropdown-bg: var(--grey-700);
+$dropdown-bg-active: var(--grey-750);
+$dropdown-bg-hover: var(--grey-800);
+$dropdown-color: var(--grey-150);
 
 .CodeMirror-hints {
   position: absolute;
@@ -12,8 +12,8 @@ $dropdown-color: colors.$color-blue-grey-150;
   overflow: hidden;
   list-style: none;
 
-  margin: 0;
-  padding: 0;
+  margin: var(--spacing-0);
+  padding: var(--spacing-0);
 
   font-size: 90%;
   font-family: monospace;
@@ -26,13 +26,13 @@ $dropdown-color: colors.$color-blue-grey-150;
 }
 
 .CodeMirror-hint {
-  margin: 0;
-  padding: 5px 20px;
+  margin: var(--spacing-0);
+  padding: var(--spacing-4) var(--spacing-20);
   white-space: pre;
   background: transparent;
   box-shadow: none;
   color: $dropdown-color;
-  font-size: 0.9em;
+  font-size: var(--font-size-m);
   cursor: pointer;
 }
 
diff --git a/projects/swimlane/ngx-ui/src/lib/components/code-editor/lint.css b/projects/swimlane/ngx-ui/src/lib/components/code-editor/lint.css
index aed985cda..9eb86c935 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/code-editor/lint.css
+++ b/projects/swimlane/ngx-ui/src/lib/components/code-editor/lint.css
@@ -6,12 +6,12 @@
 .CodeMirror-lint-tooltip {
   background-color: #ffd;
   border: 1px solid black;
-  border-radius: 4px 4px 4px 4px;
+  border-radius: var(--radius-4) var(--radius-4) var(--radius-4) var(--radius-4);
   color: black;
   font-family: monospace;
   font-size: 10pt;
   overflow: hidden;
-  padding: 2px 5px;
+  padding: var(--spacing-2) var(--spacing-4);
   position: fixed;
   white-space: pre;
   white-space: pre-wrap;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.scss b/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.scss
index 70118a7ce..448374440 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.scss
@@ -13,15 +13,15 @@
     height: 44px;
     width: 100%;
     padding: 6px 16px;
-    color: colors.$color-blue-grey-250;
-    border-bottom: 1px solid colors.$color-blue-grey-700;
-    border-right: 1px solid colors.$color-blue-grey-700;
+    color: var(--grey-250);
+    border-bottom: 1px solid var(--grey-700);
+    border-right: 1px solid var(--grey-700);
 
     h4 {
       font-family: 'Source Sans Pro';
-      font-size: 14px;
+      font-size: var(--font-size-s);
       font-style: normal;
-      font-weight: 600;
+      font-weight: var(--font-weight-semibold);
       line-height: 18px;
       margin-top: 0px;
       margin-bottom: 0px;
@@ -38,7 +38,7 @@
     min-width: 186px;
     overflow: hidden;
     padding: 6px 8px 6px 8px;
-    border-right: 1px solid colors.$color-blue-grey-700;
+    border-right: 1px solid var(--grey-700);
 
     .search {
       position: sticky;
@@ -52,7 +52,7 @@
       }
 
       ngx-icon {
-        color: colors.$color-blue-grey-300;
+        color: var(--grey-300);
         margin-top: 5px;
         margin-left: 8px;
       }
@@ -81,29 +81,29 @@
 
         span {
           overflow: hidden;
-          color: colors.$color-blue-grey-150;
+          color: var(--grey-150);
           text-overflow: ellipsis;
           font-family: Source Sans Pro, Open Sans, Arial, sans-serif;
-          font-size: 14px;
+          font-size: var(--font-size-s);
           font-style: normal;
-          font-weight: 400;
+          font-weight: var(--font-weight-regular);
           line-height: 18px;
         }
 
         svg {
-          fill: colors.$color-blue-grey-100;
+          fill: var(--grey-100);
         }
 
         &.active {
           border-radius: 6px;
-          background-color: colors.$color-blue-grey-650;
+          background-color: var(--grey-650);
 
           span {
-            color: colors.$color-white;
+            color: var(--white);
           }
 
           svg {
-            fill: colors.$color-white;
+            fill: var(--white);
           }
         }
       }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/columns.component.scss b/projects/swimlane/ngx-ui/src/lib/components/column/columns.component.scss
index ae445b351..7e375a8db 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/column/columns.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/column/columns.component.scss
@@ -3,6 +3,6 @@
 .ngx-columns {
   display: flex;
   border-radius: 6px;
-  border: 1px solid colors.$color-blue-grey-700;
+  border: 1px solid var(--grey-700);
   overflow-y: hidden;
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/date-time/date-time.component.scss b/projects/swimlane/ngx-ui/src/lib/components/date-time/date-time.component.scss
index c198b0ce5..019ebbd45 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/date-time/date-time.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/date-time/date-time.component.scss
@@ -1,10 +1,10 @@
 @use 'colors/colors' as colors;
 @use 'forms/variables' as forms;
 
-$calendar-bg: colors.$color-blue-grey-800;
+$calendar-bg: var(--grey-800);
 $calender-border: #2d3544;
 $animation-timing: 200ms;
-$input-invalid-color: colors.$color-red;
+$input-invalid-color: var(--red-500);
 
 .ngx-date-time {
   position: relative;
@@ -13,29 +13,29 @@ $input-invalid-color: colors.$color-red;
 
   &.md {
     .ngx-input {
-      font-size: 18px !important;
+      font-size: var(--font-size-l) !important;
     }
   }
 
   &.lg {
     .ngx-input {
-      font-size: 21px !important;
+      font-size: var(--font-size-xl) !important;
     }
   }
 
   .calendar-dialog-btn {
     display: inline-flex;
     position: absolute;
-    padding: 0;
+    padding: var(--spacing-0);
     right: 5px;
     top: 50%;
     transform: translateY(-50%);
-    color: colors.$color-blue-grey-200;
+    color: var(--grey-200);
     z-index: 2;
   }
 
   .ngx-input-box-wrap {
-    padding-right: 25px;
+    padding-right: var(--spacing-24);
   }
 
   &.no-label {
@@ -136,7 +136,7 @@ $input-invalid-color: colors.$color-red;
 }
 
 .ngx-dialog .ngx-dialog-content.ngx-date-time-dialog {
-  padding: 0 !important;
+  padding: var(--spacing-0) !important;
   width: auto;
 
   h1 {
@@ -144,21 +144,21 @@ $input-invalid-color: colors.$color-red;
     white-space: nowrap;
 
     small {
-      color: colors.$color-grey-100;
+      color: var(--grey-100);
     }
   }
 
   .selected-header {
-    padding: 5px 20px;
-    background: colors.$color-blue;
-    color: colors.$color-grey-100;
+    padding: var(--spacing-4) var(--spacing-20);
+    background: var(--blue);
+    color: var(--grey-100);
   }
 
   .time-row {
     background: $calendar-bg;
     border: 1px solid $calender-border;
-    padding: 8px 18px;
-    margin-top: 0;
+    padding: var(--spacing-8) 18px;
+    margin-top: var(--spacing-0);
 
     flex-direction: row;
     box-sizing: border-box;
@@ -172,8 +172,8 @@ $input-invalid-color: colors.$color-red;
     }
 
     .ngx-input {
-      margin-top: 0;
-      padding-top: 0;
+      margin-top: var(--spacing-0);
+      padding-top: var(--spacing-0);
       width: 35px;
 
       &.milliseconds {
@@ -186,10 +186,10 @@ $input-invalid-color: colors.$color-red;
     }
 
     button.ampm {
-      color: colors.$color-blue-grey-500;
+      color: var(--grey-500);
 
       &.selected {
-        color: colors.$color-white;
+        color: var(--white);
       }
     }
   }
@@ -202,14 +202,14 @@ $input-invalid-color: colors.$color-red;
     }
 
     .day-name-row {
-      margin-top: 0;
+      margin-top: var(--spacing-0);
     }
   }
 
   .ngx-dialog-footer {
     border: 1px solid $calender-border;
     border-top: 0;
-    padding: 0.5rem 0;
+    padding: 0.5rem var(--spacing-0);
     flex-direction: row;
     box-sizing: border-box;
     display: flex;
@@ -219,14 +219,14 @@ $input-invalid-color: colors.$color-red;
     }
 
     .btn {
-      font-size: 1em;
-      color: colors.$color-blue-grey-400;
-      margin: 0;
-      padding: 0;
+      font-size: var(--font-size-m);
+      color: var(--grey-400);
+      margin: var(--spacing-0);
+      padding: var(--spacing-0);
     }
 
     .today-btn {
-      margin-left: 15px;
+      margin-left: var(--spacing-16);
       opacity: 1;
       transition: opacity $animation-timing;
 
@@ -237,23 +237,23 @@ $input-invalid-color: colors.$color-red;
     }
 
     .apply-btn {
-      margin-right: 15px;
-      color: colors.$color-blue-400;
+      margin-right: var(--spacing-16);
+      color: var(--blue-400);
     }
 
     .clear-btn {
-      margin-right: 15px;
+      margin-right: var(--spacing-16);
     }
   }
 }
 
 .ngx-tooltip-content.date-tip-tooltip {
-  padding: 5px;
+  padding: var(--spacing-4);
 
   .date-zone-display {
-    font-weight: bold;
-    font-size: 15px;
-    color: colors.$color-blue-grey-700;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-m);
+    color: var(--grey-700);
 
     > span {
       display: inline-block;
@@ -261,20 +261,20 @@ $input-invalid-color: colors.$color-red;
 
     button {
       float: right;
-      font-weight: bold;
+      font-weight: var(--font-weight-bold);
       line-height: 16px;
-      font-size: 11px;
+      font-size: var(--font-size-xs);
       text-transform: uppercase;
-      color: colors.$color-blue-grey-700;
+      color: var(--grey-700);
       background: #dee1ea;
-      margin-left: 5px;
-      padding: 0 6px;
+      margin-left: var(--spacing-4);
+      padding: var(--spacing-0) 6px;
       vertical-align: text-top;
       text-align: left;
       min-width: 70px;
 
       ngx-icon {
-        padding-right: 5px;
+        padding-right: var(--spacing-4);
       }
 
       &:hover,
diff --git a/projects/swimlane/ngx-ui/src/lib/components/dialog/alert/alert.component.scss b/projects/swimlane/ngx-ui/src/lib/components/dialog/alert/alert.component.scss
index fa1a5ab9a..13fd1125d 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/dialog/alert/alert.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/dialog/alert/alert.component.scss
@@ -2,23 +2,23 @@
 
 .ngx-alert-dialog {
   .ngx-dialog-content {
-    padding: 0;
-    background: colors.$color-blue-grey-725;
+    padding: var(--spacing-0);
+    background: var(--grey-725);
 
     .ngx-dialog-header {
       padding: 1.4rem 2rem 0 2rem;
 
       h1 {
-        font-size: 18px;
-        margin: 0;
+        font-size: var(--font-size-l);
+        margin: var(--spacing-0);
         color: white;
-        font-weight: 600;
+        font-weight: var(--font-weight-semibold);
       }
     }
 
     .ngx-dialog-body {
       padding: 0.5rem 2rem;
-      color: colors.$color-blue-grey-300;
+      color: var(--grey-300);
     }
 
     .ngx-dialog-footer {
@@ -30,12 +30,12 @@
     .ngx-dialog-content {
       .ngx-dialog-header {
         padding: 1.4rem 2rem;
-        border-left: 5px solid colors.$color-blue-500;
-        background: colors.$color-blue-grey-750;
+        border-left: 5px solid var(--blue-500);
+        background: var(--grey-750);
 
         .close-button {
           float: right;
-          background: colors.$color-blue-500;
+          background: var(--blue-500);
           color: white;
         }
       }
@@ -46,10 +46,10 @@
 
       &.ngx-alert-danger {
         .ngx-dialog-header {
-          border-left-color: colors.$color-error;
+          border-left-color: var(--color-error);
 
           .close-button {
-            background: colors.$color-error;
+            background: var(--color-error);
             color: white;
           }
         }
@@ -57,11 +57,11 @@
 
       &.ngx-alert-warning {
         .ngx-dialog-header {
-          border-left-color: colors.$color-orange-500;
+          border-left-color: var(--orange-500);
 
           .close-button {
-            background: colors.$color-orange-500;
-            color: colors.$color-blue-grey-800;
+            background: var(--orange-500);
+            color: var(--grey-800);
           }
         }
       }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/dialog/dialog.component.scss b/projects/swimlane/ngx-ui/src/lib/components/dialog/dialog.component.scss
index 1880c4906..f00434514 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/dialog/dialog.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/dialog/dialog.component.scss
@@ -1,9 +1,9 @@
 @use 'colors/colors' as colors;
 @use 'colors/shadow-variables' as shadow;
 
-$dialog-bg: colors.$color-blue-grey-800;
-$dialog-header-color: colors.$color-grey-100;
-$dialog-body-color: colors.$color-blue-grey-200;
+$dialog-bg: var(--grey-800);
+$dialog-header-color: var(--grey-100);
+$dialog-body-color: var(--grey-200);
 
 .ngx-dialog {
   position: fixed;
@@ -18,19 +18,19 @@ $dialog-body-color: colors.$color-blue-grey-200;
 
   .ngx-dialog-content {
     pointer-events: auto;
-    border-radius: 2px;
+    border-radius: var(--radius-2);
     box-shadow: shadow.$shadow-3;
     background: $dialog-bg;
     padding: 1.4rem;
     position: relative;
     animation-fill-mode: forwards;
     min-width: 250px;
-    font-size: 0.9rem;
+    font-size: var(--font-size-m);
     color: $dialog-body-color;
 
     &--large,
     &--medium {
-      padding: 0;
+      padding: var(--spacing-0);
       width: calc(100vw - 120px);
       background-color: transparent;
     }
@@ -49,7 +49,7 @@ $dialog-body-color: colors.$color-blue-grey-200;
 
     .close {
       position: absolute;
-      font-size: 14px;
+      font-size: var(--font-size-s);
       color: $dialog-header-color;
       right: -25px;
       top: -25px;
@@ -60,7 +60,7 @@ $dialog-body-color: colors.$color-blue-grey-200;
       h1 {
         font-size: 1.8rem;
         font-weight: 500;
-        margin: 0 0 1.4rem 0;
+        margin: var(--spacing-0) var(--spacing-0) 1.4rem var(--spacing-0);
         color: $dialog-header-color;
       }
     }
@@ -69,22 +69,22 @@ $dialog-body-color: colors.$color-blue-grey-200;
       text-align: right;
 
       .btn {
-        margin-left: 5px;
+        margin-left: var(--spacing-4);
       }
     }
   }
 
   &.wizard {
     .ngx-dialog-content {
-      padding: 0;
-      background: colors.$color-blue-grey-725;
+      padding: var(--spacing-0);
+      background: var(--grey-725);
 
       .ngx-dialog-header {
         padding: 1.4rem;
-        background: colors.$color-blue-grey-750;
+        background: var(--grey-750);
 
         h1 {
-          margin: 0;
+          margin: var(--spacing-0);
         }
       }
 
@@ -95,21 +95,21 @@ $dialog-body-color: colors.$color-blue-grey-200;
           float: left;
 
           .btn {
-            margin: 0 5px 0 0;
+            margin: var(--spacing-0) var(--spacing-4) var(--spacing-0) var(--spacing-0);
           }
         }
       }
 
       .ngx-tabs {
-        margin-bottom: 0;
+        margin-bottom: var(--spacing-0);
 
         .ngx-tabs-list {
-          padding: 0 20px;
-          background: colors.$color-blue-grey-775;
-          border-bottom: 2px solid colors.$color-blue-grey-775;
+          padding: var(--spacing-0) var(--spacing-20);
+          background: var(--grey-775);
+          border-bottom: 2px solid var(--grey-775);
 
           .ngx-tab {
-            background: colors.$color-blue-grey-775;
+            background: var(--grey-775);
 
             button {
               padding: 0.6em 0.75em;
@@ -117,7 +117,7 @@ $dialog-body-color: colors.$color-blue-grey-200;
             }
 
             &.active {
-              background: colors.$color-blue-grey-700;
+              background: var(--grey-700);
             }
           }
         }
@@ -146,7 +146,7 @@ $dialog-body-color: colors.$color-blue-grey-200;
 
       button.close {
         color: #afb7c8;
-        font-size: 16px;
+        font-size: var(--font-size-m);
         opacity: 1;
         top: 56px;
         right: 56px;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/components/large-format-dialog-header-action/large-format-dialog-header-action.component.scss b/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/components/large-format-dialog-header-action/large-format-dialog-header-action.component.scss
index 4ac9d7522..ae8898449 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/components/large-format-dialog-header-action/large-format-dialog-header-action.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/components/large-format-dialog-header-action/large-format-dialog-header-action.component.scss
@@ -8,18 +8,18 @@
   justify-content: flex-end;
 
   &__button {
-    color: colors.$color-blue-grey-400;
+    color: var(--grey-400);
     font-size: 0.8125rem;
-    line-height: 1rem;
-    padding-right: 0;
+    line-height: var(--font-line-height-100);
+    padding-right: var(--spacing-0);
 
     & i.ngx-icon {
-      font-size: 0.625rem;
+      font-size: var(--font-size-xxs);
       margin-right: 0.5rem;
     }
 
     &:hover {
-      color: colors.$color-white;
+      color: var(--white);
     }
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/components/large-format-dialog-header-title/large-format-dialog-header-title.component.scss b/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/components/large-format-dialog-header-title/large-format-dialog-header-title.component.scss
index 9f2e06ad7..959c17052 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/components/large-format-dialog-header-title/large-format-dialog-header-title.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/components/large-format-dialog-header-title/large-format-dialog-header-title.component.scss
@@ -62,7 +62,7 @@
 
     h1,
     h4 {
-      margin: 0;
+      margin: var(--spacing-0);
 
       /**
       truncate
@@ -73,14 +73,14 @@
     }
 
     h1 {
-      color: colors.$color-white;
+      color: var(--white);
       font-size: var(--title-font-size, 1.75rem);
       line-height: var(--title-font-line-height, 2rem);
     }
 
     h4 {
-      color: colors.$color-blue-grey-250;
-      font-size: 1rem;
+      color: var(--grey-250);
+      font-size: var(--font-size-m);
       line-height: 0.75rem;
     }
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/large-format-dialog-content-drawer.component.scss b/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/large-format-dialog-content-drawer.component.scss
index 4e0670080..2d4175b0a 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/large-format-dialog-content-drawer.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/large-format-dialog-content-drawer.component.scss
@@ -7,7 +7,7 @@
       max-height: calc(100% - 2rem);
       margin-left: 1rem;
       max-width: calc(100% - 2rem);
-      background-color: colors.$color-blue-grey-750;
+      background-color: var(--grey-750);
       overflow: hidden;
 
       &--1\/2 {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/large-format-dialog-content.component.scss b/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/large-format-dialog-content.component.scss
index 58b835b4a..79b68217d 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/large-format-dialog-content.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/dialog/large-format/large-format-dialog-content.component.scss
@@ -53,11 +53,11 @@
     &__header {
       flex: 0 0 var(--header-height, 60px);
       height: var(--header-height, 60px);
-      border-bottom: 2px solid colors.$color-blue-grey-700;
+      border-bottom: 2px solid var(--grey-700);
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 2rem;
+      padding: var(--spacing-0) 2rem;
     }
 
     &__body {
@@ -65,14 +65,14 @@
       min-height: 215px;
       max-height: var(--max-body-height, auto);
       overflow: auto;
-      padding: 0 var(--body-padding, 2rem);
+      padding: var(--spacing-0) var(--body-padding, 2rem);
     }
 
     .ngx-medium-format-dialog-footer,
     .ngx-large-format-dialog-footer {
       flex: 0 0 var(--footer-height, 4rem);
       height: var(--footer-height, 4rem);
-      border-top: 2px solid colors.$color-blue-grey-700;
+      border-top: 2px solid var(--grey-700);
     }
 
     .dialog-stepper,
@@ -121,7 +121,7 @@
 
     .dialog-stepper {
       ngx-stepper.ngx-stepper:not(.dialog-stepper--sub) {
-        padding: 1rem 0 0;
+        padding: 1rem var(--spacing-0) var(--spacing-0);
         margin-top: -5.5rem;
         height: 100%;
 
@@ -161,7 +161,7 @@
         > .ngx-stepper--content {
           margin-top: 1.25rem;
           overflow: auto;
-          padding: 0 2rem;
+          padding: var(--spacing-0) 2rem;
         }
 
         @media screen and (max-width: 1319px) {
@@ -193,7 +193,7 @@
     .dialog-tabs {
       ngx-tabs.ngx-tabs:not(.dialog-tabs--sub) {
         height: 100%;
-        margin: 0;
+        margin: var(--spacing-0);
 
         > section {
           height: 100%;
@@ -222,9 +222,9 @@
               button {
                 text-transform: uppercase;
                 font-size: 0.8125rem;
-                font-weight: bold;
-                line-height: 1rem;
-                color: colors.$color-blue-grey-400;
+                font-weight: var(--font-weight-bold);
+                line-height: var(--font-line-height-100);
+                color: var(--grey-400);
 
                 &::after {
                   top: 3.5rem;
@@ -233,14 +233,14 @@
 
               &.active {
                 button {
-                  color: colors.$color-white;
+                  color: var(--white);
                 }
               }
             }
           }
 
           > .ngx-tab-content {
-            padding: 0 2rem;
+            padding: var(--spacing-0) 2rem;
             overflow: auto;
             height: calc(100% - 5.5rem);
           }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/drawer/dialog-drawer-content/dialog-drawer-content.component.scss b/projects/swimlane/ngx-ui/src/lib/components/drawer/dialog-drawer-content/dialog-drawer-content.component.scss
index 5ff9feff0..5855432fe 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/drawer/dialog-drawer-content/dialog-drawer-content.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/drawer/dialog-drawer-content/dialog-drawer-content.component.scss
@@ -7,7 +7,7 @@
   height: 100%;
 
   &__header {
-    background-color: colors.$color-blue-grey-700;
+    background-color: var(--grey-700);
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -16,29 +16,29 @@
   }
 
   &__header-title {
-    color: colors.$color-blue-grey-350;
-    margin: 0;
+    color: var(--grey-350);
+    margin: var(--spacing-0);
     font-size: 1.125rem;
   }
 
   &__dismiss-btn {
-    color: colors.$color-blue-grey-350;
+    color: var(--grey-350);
     font-size: 0.875rem;
-    padding-right: 0;
+    padding-right: var(--spacing-0);
 
     &:hover {
-      color: colors.$color-white;
+      color: var(--white);
     }
   }
 
   &__content {
     height: 100%;
-    padding: 0 2rem;
+    padding: var(--spacing-0) 2rem;
     overflow: auto;
   }
 
   & ~ ngx-drawer.ngx-drawer.large-format-dialog-drawer {
-    margin-left: 0;
+    margin-left: var(--spacing-0);
     max-width: 100%;
     min-height: calc(100% - 3.5rem - 4px);
     max-height: calc(100% - 3.5rem - 4px);
diff --git a/projects/swimlane/ngx-ui/src/lib/components/drawer/drawer.component.scss b/projects/swimlane/ngx-ui/src/lib/components/drawer/drawer.component.scss
index 0c3815156..c79f075cf 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/drawer/drawer.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/drawer/drawer.component.scss
@@ -6,7 +6,7 @@
   overflow-x: hidden;
   text-align: left;
   z-index: 998;
-  background: colors.$color-blue-grey-800;
+  background: var(--grey-800);
 
   &.left-drawer {
     top: 0;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/dropdown/dropdown.component.scss b/projects/swimlane/ngx-ui/src/lib/components/dropdown/dropdown.component.scss
index fba5e0d4a..5e16b15ff 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/dropdown/dropdown.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/dropdown/dropdown.component.scss
@@ -2,9 +2,9 @@
 @use 'colors/colors' as colors;
 @use 'colors/shadow-variables' as shadows;
 
-$dropdown-bg: colors.$color-blue-grey-700;
-$dropdown-bg-hover: color.adjust(colors.$color-blue-grey-700, $lightness: -5%);
-$dropdown-color: colors.$color-grey-100;
+$dropdown-bg: var(--grey-700);
+$dropdown-bg-hover: #232837; // Color 705 custom color
+$dropdown-color: var(--grey-100);
 
 /**
  * Dropdown Component
@@ -13,7 +13,7 @@ $dropdown-color: colors.$color-grey-100;
  */
 .ngx-dropdown {
   position: relative;
-  padding-bottom: 10px;
+  padding-bottom: var(--spacing-10);
 
   &.open {
     .ngx-dropdown-menu {
@@ -69,7 +69,7 @@ $dropdown-color: colors.$color-grey-100;
     min-width: 180px;
     background: $dropdown-bg;
     box-shadow: shadows.$shadow-3;
-    margin-top: 0;
+    margin-top: var(--spacing-0);
     opacity: 0;
     display: none;
     transition: visibility 0s, opacity 0.25s ease-out;
@@ -102,16 +102,16 @@ $dropdown-color: colors.$color-grey-100;
     > ul > li {
       > a,
       > button {
-        padding: 5px 20px;
+        padding: var(--spacing-4) var(--spacing-20);
         clear: both;
-        line-height: 1.42857143;
+        line-height: var(--font-line-height-200);
         white-space: nowrap;
         width: 100%;
         text-align: left;
         background: transparent;
         box-shadow: none;
         color: $dropdown-color;
-        font-size: 0.9em;
+        font-size: var(--font-size-m);
         display: block;
       }
 
@@ -122,20 +122,20 @@ $dropdown-color: colors.$color-grey-100;
       &.divider,
       &.divider-label {
         height: initial;
-        margin: 8px 0;
-        padding: 0 20px;
+        margin: var(--spacing-8) var(--spacing-0);
+        padding: var(--spacing-0) var(--spacing-20);
         overflow: hidden;
         background-color: initial !important;
-        color: colors.$color-blue-grey-400 !important;
+        color: var(--grey-400) !important;
       }
 
       // Floating dividers are hidden
       &.divider {
         display: none;
-        padding: 0;
+        padding: var(--spacing-0);
 
         hr {
-          margin: 2px 0;
+          margin: var(--spacing-2) var(--spacing-0);
         }
 
         &:first-child,
@@ -162,7 +162,7 @@ $dropdown-color: colors.$color-grey-100;
   @mixin ngx-dropdown-outline($menu-color, $menu-border, $item-active, $item-hover, $item-color) {
     background: $menu-color;
     min-width: 130px;
-    font-size: 13px;
+    font-size: var(--font-size-xs);
     border: 1px solid $menu-border;
     background: $menu-color;
 
@@ -176,12 +176,12 @@ $dropdown-color: colors.$color-grey-100;
     }
 
     > ul {
-      padding: 9.5px 0;
-      margin: 2px 0 0;
+      padding: 9.5px var(--spacing-0);
+      margin: var(--spacing-2) var(--spacing-0) var(--spacing-0);
       list-style: none;
 
       > li {
-        padding-top: 0 !important;
+        padding-top: var(--spacing-0) !important;
         color: $item-color;
 
         > button,
@@ -190,10 +190,10 @@ $dropdown-color: colors.$color-grey-100;
           height: 26px;
           display: block;
           clear: both;
-          font-weight: 400;
-          line-height: 1.42857;
+          font-weight: var(--font-weight-regular);
+          line-height: var(--font-line-height-200);
           white-space: nowrap;
-          font-size: 13px;
+          font-size: var(--font-size-xs);
           color: $item-color;
         }
 
@@ -212,7 +212,7 @@ $dropdown-color: colors.$color-grey-100;
         }
 
         &.divider hr {
-          border-bottom: 1px solid colors.$color-blue-grey-700;
+          border-bottom: 1px solid var(--grey-700);
         }
       }
     }
@@ -221,8 +221,8 @@ $dropdown-color: colors.$color-grey-100;
   // Styles
   .ngx-dropdown-menu {
     &.ngx-dropdown-light-outline {
-      $menu-color: colors.$color-blue-grey-750;
-      $menu-border: colors.$color-blue-grey-550;
+      $menu-color: var(--grey-750);
+      $menu-border: var(--grey-550);
       $item-active: #479eff;
       $item-hover: #1f242f;
       $item-color: #fff;
@@ -231,10 +231,10 @@ $dropdown-color: colors.$color-grey-100;
     }
 
     &.ngx-dropdown-dark-outline {
-      $menu-color: colors.$color-blue-grey-775;
-      $menu-border: colors.$color-blue-grey-550;
+      $menu-color: var(--color-grey-750);
+      $menu-border: var(--color-grey-550);
       $item-active: #479eff;
-      $item-hover: colors.$color-blue-grey-750;
+      $item-hover: var(--grey-750);
       $item-color: #afb7c8;
 
       @include ngx-dropdown-outline($menu-color, $menu-border, $item-active, $item-hover, $item-color);
diff --git a/projects/swimlane/ngx-ui/src/lib/components/dropzone/dropzone.component.scss b/projects/swimlane/ngx-ui/src/lib/components/dropzone/dropzone.component.scss
index 1ea205b46..be7d1d917 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/dropzone/dropzone.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/dropzone/dropzone.component.scss
@@ -2,7 +2,7 @@
 
 @keyframes soundWave {
   100% {
-    stroke: colors.$color-blue-500;
+    stroke: var(--blue-500);
     scale: 1.2;
   }
 }
@@ -27,7 +27,7 @@
   position: relative;
   flex-direction: column;
   flex: 1;
-  padding: 50px;
+  padding: var(--spacing-48);
   // overflow: hidden;
 
   .file-over {
@@ -55,8 +55,8 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    margin: 0;
-    font-weight: normal;
+    margin: var(--spacing-0);
+    font-weight: var(--font-weight-regular);
     cursor: pointer;
     animation: popIn 0.35s ease-in-out;
     height: 500px;
@@ -70,7 +70,7 @@
       path {
         clip-rule: evenodd;
         fill-rule: evenodd;
-        stroke: colors.$color-blue-grey-650;
+        stroke: var(--grey-650);
         stroke-width: 2;
         stroke-linejoin: round;
         transition: stroke 0.2s ease-in-out;
@@ -86,26 +86,26 @@
 
       .ngx-dropzone--icon {
         font-size: 30px;
-        color: colors.$color-blue-grey-100;
+        color: var(--grey-100);
       }
 
       .ngx-dropzone--title {
-        font-size: 20px;
+        font-size: var(--font-size-xl);
         line-height: 25px;
-        font-weight: 600;
-        margin-bottom: 5px;
-        color: colors.$color-blue-grey-100;
+        font-weight: var(--font-weight-semibold);
+        margin-bottom: var(--spacing-4);
+        color: var(--grey-100);
       }
 
       .ngx-dropzone--sub-title {
-        color: colors.$color-blue-400;
-        font-size: 12px;
-        font-weight: bold;
+        color: var(--blue-400);
+        font-size: var(--font-size-xs);
+        font-weight: var(--font-weight-bold);
         transition: color 0.2s ease-in-out;
 
         &:hover,
         &:focus {
-          color: colors.$color-blue-300;
+          color: var(--blue-300)
         }
 
         .underline {
@@ -114,10 +114,10 @@
       }
 
       .ngx-dropzone--supporting-files {
-        margin-top: 20px;
-        color: colors.$color-blue-grey-350;
-        font-size: 12px;
-        padding: 0 10px;
+        margin-top: var(--spacing-20);
+        color: var(--grey-350);
+        font-size: var(--font-size-xs);
+        padding: var(--spacing-0) 10px;
       }
     }
   }
@@ -125,9 +125,9 @@
   &--small {
     box-sizing: border-box;
     height: 120px;
-    background-color: colors.$color-blue-grey-800;
-    border: 1px dashed colors.$color-blue-grey-500;
-    padding: 0;
+    background-color: var(--grey-800);
+    border: 1px dashed var(--grey-500);
+    padding: var(--spacing-0);
     justify-content: center;
 
     .file-over {
@@ -154,13 +154,13 @@
         transform: none;
 
         .ngx-dropzone--title {
-          font-size: 12px;
+          font-size: var(--font-size-xs);
           line-height: 15px;
-          margin-bottom: 0;
+          margin-bottom: var(--spacing-0);
         }
 
         .ngx-dropzone--sub-title {
-          font-size: 10px;
+          font-size: var(--font-size-xxs);
         }
       }
     }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/filter/filter.component.scss b/projects/swimlane/ngx-ui/src/lib/components/filter/filter.component.scss
index 149f1e209..12fb22ea3 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/filter/filter.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/filter/filter.component.scss
@@ -2,25 +2,25 @@
 @use 'forms/variables' as forms;
 
 // general
-$color-dropdown-bg: colors.$color-blue-grey-775;
-$color-hover-bg: colors.$color-blue-grey-750;
-$color-placeholder-text: colors.$color-blue-grey-350;
-$color-caret-bg: colors.$color-blue-grey-350;
+$color-dropdown-bg: var(--grey-775);
+$color-hover-bg: var(--grey-750);
+$color-placeholder-text: var(--grey-350);
+$color-caret-bg: var(--grey-350);
 
 // filter
-$color-filter-bg: colors.$color-blue-grey-800;
-$color-filter-text: colors.$color-blue-grey-200;
-$color-empty-text: colors.$color-blue-grey-150;
+$color-filter-bg: var(--grey-800);
+$color-filter-text: var(--grey-200);
+$color-empty-text: var(--grey-150);
 
 // chips
-$color-chip-bg: colors.$color-blue-grey-600;
+$color-chip-bg: var(--grey-600);
 $color-chip-text: #fff;
 
 $max-width: 300px;
 
 .ngx-filter {
   max-width: $max-width;
-  margin-right: 8px;
+  margin-right: var(--spacing-8);
   display: inline-block;
 
   .ngx-select-flex-wrap {
@@ -37,7 +37,7 @@ $max-width: 300px;
   .ngx-select-wrap {
     position: relative;
     display: block;
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-0);
     width: 100%;
 
     .ngx-select-hint {
@@ -46,10 +46,10 @@ $max-width: 300px;
   }
 
   .ngx-chip {
-    border: 1px solid colors.$color-blue-grey-500;
-    border-radius: 4px;
+    border: 1px solid var(--grey-500);
+    border-radius: var(--radius-4);
     height: 30px;
-    padding: 0px;
+    padding: var(--spacing-0);
     line-height: 0;
     display: flex;
     flex-wrap: nowrap;
@@ -78,9 +78,10 @@ $max-width: 300px;
     }
 
     .ngx-chip__contents {
-      padding: 0px 10px;
-      border-top-left-radius: 4px;
-      border-bottom-left-radius: 4px;
+      padding: var(--spacing-0) 10px;
+      border-top-left-radius: var(--radius-4);
+      border-bottom-left-radius: var(--radius-4);
+      max-width: calc($max-width - 33px);
       overflow: hidden;
       max-width: calc($max-width - 33px);
       text-overflow: ellipsis;
@@ -92,14 +93,14 @@ $max-width: 300px;
       .ngx-chip-label,
       .ngx-chip-value {
         font-family: Source Sans Pro;
-        font-size: 16px;
-        font-weight: 400;
+        font-size: var(--font-size-m);
+        font-weight: var(--font-weight-regular);
         line-height: 28px;
         text-align: left;
       }
 
       .ngx-chip-label {
-        color: colors.$color-blue-grey-250;
+        color: var(--grey-250);
         margin-right: 3px;
       }
 
@@ -121,15 +122,15 @@ $max-width: 300px;
 
     .ngx-chip__controls {
       color: $color-caret-bg;
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px;
+      border-top-right-radius: var(--radius-4);
+      border-bottom-right-radius: var(--radius-4);
       display: flex;
       flex-wrap: nowrap;
       min-height: 1.75em;
-      padding: 0px;
+      padding: var(--spacing-0);
 
       button {
-        padding: 0 10px;
+        padding: var(--spacing-0) 10px;
         cursor: pointer;
         min-height: 1em;
       }
@@ -138,7 +139,7 @@ $max-width: 300px;
       .ngx-chip-caret {
         align-items: center;
         display: flex;
-        font-size: 0.7em;
+        font-size: var(--font-size-xs);
       }
 
       .ngx-chip-caret {
@@ -150,12 +151,12 @@ $max-width: 300px;
 
   &.active {
     .ngx-chip {
-      border: 1px solid colors.$color-blue-500;
+      border: 1px solid var(--blue-500);
       background-color: #313847;
 
       .ngx-chip__controls {
         .ngx-chip-caret {
-          color: colors.$color-blue-400;
+          color: var(--blue-400);
           transition: transform 200ms ease-in-out;
           transform: rotate(180deg) translateY(1px);
         }
@@ -165,14 +166,14 @@ $max-width: 300px;
 
   &.active-selections {
     .ngx-chip {
-      background-color: colors.$color-blue-800;
-      border: 1px solid colors.$color-blue-800;
+      background-color: var(--blue-800);
+      border: 1px solid var(--blue-800);
 
       .ngx-chip__contents:hover {
-        background-color: colors.$color-blue-900;
+        background-color: var(--blue-900);
       }
       .ngx-chip__controls:hover {
-        background-color: colors.$color-blue-900;
+        background-color: var(--blue-900);
       }
     }
 
@@ -241,9 +242,9 @@ $max-width: 300px;
     width: 100%;
     min-width: 300px;
     background: $color-dropdown-bg;
-    border: 1px solid colors.$color-blue-grey-550;
+    border: 1px solid var(--grey-550);
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-    margin-top: 10px;
+    margin-top: var(--spacing-10);
     opacity: 0;
     display: none;
     transition: visibility 0s, opacity 0.25s ease-out;
@@ -254,11 +255,11 @@ $max-width: 300px;
       position: relative;
 
       &:not(:last-child) {
-        border-bottom: 1px solid colors.$color-blue-grey-700;
+        border-bottom: 1px solid var(--grey-700);
       }
 
       .ngx-check {
-        color: colors.$color-blue-400;
+        color: var(--blue-400);
         position: absolute;
         right: 20px;
         top: 50%;
@@ -276,14 +277,14 @@ $max-width: 300px;
       overflow-y: auto;
 
       .ngx-select-dropdown-option {
-        padding: 9px 40px 9px 20px;
-        font-size: 14px;
+        padding: 9px 40px 9px var(--spacing-20);
+        font-size: var(--font-size-s);
         overflow-x: hidden;
         overflow-y: visible;
         text-overflow: ellipsis;
 
         &.disabled {
-          color: colors.$color-blue-grey-450;
+          color: var(--grey-450);
           opacity: 1;
         }
 
@@ -299,11 +300,11 @@ $max-width: 300px;
         }
 
         &.ngx-select-all-option {
-          color: colors.$color-blue-400;
+          color: var(--blue-400);
         }
 
         &.selected {
-          background: colors.$color-blue-grey-800;
+          background: var(--grey-800);
 
           &:not(.disabled) {
             &.active,
@@ -319,14 +320,14 @@ $max-width: 300px;
       .ngx-select-option-group {
         .ngx-select-option-group-name {
           padding: 7px 15px;
-          font-size: 1rem;
+          font-size: var(--font-size-m);
           display: block;
-          font-weight: 600;
-          line-height: 20px;
-          color: colors.$color-blue-grey-300;
+          font-weight: var(--font-weight-semibold);
+          line-height: var(--font-line-height-300);
+          color: var(--grey-300);
           overflow-x: hidden;
           text-overflow: ellipsis;
-          border-bottom: 1px solid colors.$color-blue-grey-700;
+          border-bottom: 1px solid var(--grey-700);
         }
       }
 
@@ -338,7 +339,7 @@ $max-width: 300px;
     }
 
     .ngx-select-filter {
-      padding: 10px 20px;
+      padding: var(--spacing-10) var(--spacing-20);
       background: $color-filter-bg;
       position: relative;
 
@@ -346,11 +347,11 @@ $max-width: 300px;
       .ngx-x {
         position: absolute;
         top: 50%;
-        color: colors.$color-blue-grey-350;
+        color: var(--grey-350);
       }
 
       .ngx-search {
-        font-size: 1.1rem;
+        font-size: var(--font-size-m);
         margin-top: -9px;
       }
 
@@ -361,7 +362,7 @@ $max-width: 300px;
         cursor: pointer;
 
         &:hover {
-          color: colors.$color-blue-grey-300;
+          color: var(--grey-300);
         }
       }
 
@@ -371,9 +372,9 @@ $max-width: 300px;
         border: none;
         outline: none;
         display: block;
-        font-size: 13px;
+        font-size: var(--font-size-xs);
         width: 100%;
-        padding-left: 24px;
+        padding-left: var(--spacing-24);
 
         &::-webkit-search-decoration,
         &::-webkit-search-cancel-button,
@@ -383,7 +384,7 @@ $max-width: 300px;
         }
 
         &::placeholder {
-          color: colors.$color-blue-grey-350;
+          color: var(--grey-350);
         }
       }
     }
@@ -391,7 +392,7 @@ $max-width: 300px;
     .ngx-select-empty-placeholder {
       color: $color-empty-text;
       padding: 7px 15px;
-      font-size: 15px;
+      font-size: var(--font-size-m);
       font-style: italic;
 
       .ngx-select-empty-placeholder-add {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/hotkeys/hotkeys.component.scss b/projects/swimlane/ngx-ui/src/lib/components/hotkeys/hotkeys.component.scss
index 4fc084498..fbd33bd47 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/hotkeys/hotkeys.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/hotkeys/hotkeys.component.scss
@@ -11,7 +11,7 @@
     cursor: pointer;
     width: 40px;
     height: 40px;
-    line-height: 40px;
+    line-height: var(--font-line-height-400);
     text-align: center;
     border-radius: 20px;
     position: absolute;
@@ -21,54 +21,54 @@
 
   .close-icon {
     font-size: 40px;
-    color: colors.$color-blue-grey-300;
+    color: var(--grey-300);
     float: right;
-    line-height: 1em;
+    line-height: var(--font-line-height-100);
   }
 
   .hotkeys-icon {
-    color: colors.$color-blue-grey-300;
-    font-size: 21px;
+    color: var(--grey-300);
+    font-size: var(--font-size-xl);
     background-color: black;
   }
 
   .ngx-icon:hover {
-    color: colors.$color-blue-grey-100;
+    color: var(--grey-100);
   }
 }
 
 .hotkeys {
-  background: colors.$color-blue-grey-850;
-  border: 1px solid colors.$color-blue-grey-500;
-  padding: 15px;
+  background: var(--grey-850);
+  border: 1px solid var(--grey-500);
+  padding: var(--spacing-16);
   box-shadow: shadow.$shadow-1;
-  color: colors.$color-blue-grey-300;
-  font-size: 14px;
-  border-radius: 2px;
+  color: var(--grey-300);
+  font-size: var(--font-size-s);
+  border-radius: var(--radius-2);
   margin-bottom: 45px;
 
   .hotkey-row {
-    padding: 10px 0;
-    border-bottom: 1px solid colors.$color-blue-grey-600;
+    padding: var(--spacing-10) var(--spacing-0);
+    border-bottom: 1px solid var(--grey-600);
 
     &:first-child {
-      padding-top: 0px;
+      padding-top: var(--spacing-0);
     }
 
     &:last-child {
       border-bottom: none;
-      padding-bottom: 0px;
+      padding-bottom: var(--spacing-0);
     }
 
     .combination {
       float: right;
-      margin-left: 30px;
+      margin-left: var(--spacing-30);
 
       .key {
-        background: colors.$color-blue-grey-500;
-        color: colors.$color-blue-grey-850;
-        padding: 2px 7px;
-        border-radius: 2px;
+        background: var(--grey-500);
+        color: var(--grey-850);
+        padding: var(--spacing-2) 7px;
+        border-radius: var(--radius-2);
       }
     }
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/icon/icon.component.scss b/projects/swimlane/ngx-ui/src/lib/components/icon/icon.component.scss
index 1a7c55f7e..242c1e75b 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/icon/icon.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/icon/icon.component.scss
@@ -9,7 +9,7 @@ ngx-icon {
   display: inline-block;
   width: 1em;
   height: 1em;
-  line-height: 1em;
+  line-height: var(--font-line-height-100);
   vertical-align: baseline;
 
   .ngx-icon {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/input/input.component.scss b/projects/swimlane/ngx-ui/src/lib/components/input/input.component.scss
index 9fc7dce40..41cea93cc 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/input/input.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/input/input.component.scss
@@ -7,14 +7,14 @@
   &.md {
     .ngx-input-box,
     .ngx-input-textarea {
-      font-size: 18px !important;
+      font-size: var(--font-size-l) !important;
     }
   }
 
   &.lg {
     .ngx-input-box,
     .ngx-input-textarea {
-      font-size: 21px !important;
+      font-size: var(--font-size-xl) !important;
     }
   }
 
@@ -61,7 +61,7 @@
   input:-webkit-autofill:focus,
   input:-webkit-autofill:active {
     transition: background-color 5000s ease-in-out 0s;
-    -webkit-text-fill-color: colors.$color-grey-100 !important;
+    -webkit-text-fill-color: var(--grey-100) !important;
   }
 
   .ngx-input-flex-wrap {
@@ -88,17 +88,17 @@
   }
 
   ngx-input-prefix {
-    margin-right: 8px;
+    margin-right: var(--spacing-8);
   }
 
   ngx-input-suffix {
-    margin-left: 8px;
+    margin-left: var(--spacing-8);
   }
 
   .ngx-input-wrap {
     position: relative;
     display: block;
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-0);
     width: 100%;
 
     .ngx-input-box-wrap {
@@ -117,12 +117,12 @@
         display: block;
         background: transparent;
         border: none;
-        margin-bottom: 0px;
-        padding-left: 0px;
+        margin-bottom: var(--spacing-0);
+        padding-left: var(--spacing-0);
         width: 100%;
         max-width: 100%;
         color: forms.$color-input-text;
-        font-size: 1em;
+        font-size: var(--font-size-m);
         line-height: 1.25em;
         min-height: 0px;
         font-family: inherit;
@@ -144,7 +144,7 @@
       }
 
       .ngx-input-box {
-        margin: 3px 0;
+        margin: 3px var(--spacing-0);
 
         &[type='number'] {
           &::-webkit-inner-spin-button {
@@ -167,7 +167,7 @@
         font-size: 0.8rem;
         color: forms.$input-icon-color;
         transition: color 100ms;
-        padding: 0;
+        padding: var(--spacing-0);
         z-index: 1;
 
         &:hover {
@@ -187,7 +187,7 @@
         transition: all 0.1s ease-out;
 
         i {
-          font-size: 0.625rem;
+          font-size: var(--font-size-xxs);
           color: forms.$input-icon-color;
           cursor: pointer;
 
@@ -243,8 +243,8 @@
 
       .ngx-input-box,
       .ngx-input-textarea {
-        margin: 0;
-        padding: 4px 10px;
+        margin: var(--spacing-0);
+        padding: var(--spacing-4) 10px;
         position: relative;
         z-index: 1;
       }
@@ -260,11 +260,11 @@
     }
 
     ngx-input-prefix {
-      padding-left: 10px;
+      padding-left: var(--spacing-10);
     }
 
     ngx-input-suffix {
-      padding-right: 10px;
+      padding-right: var(--spacing-10);
     }
   }
 
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-flat.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-flat.component.scss
index ed98e3438..d6f6d497d 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-flat.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-flat.component.scss
@@ -8,19 +8,19 @@
     flex: 0 0 80px;
 
     .node-options-btn {
-      color: colors.$color-blue-grey-400;
-      padding: 1px 3px 2px;
+      color: var(--grey-400);
+      padding: 1px 3px var(--spacing-2);
     }
 
     .ngx-dropdown {
-      margin-left: 10px;
+      margin-left: var(--spacing-10);
     }
   }
 }
 
 .property-config-dialog {
   .ngx-dialog-content {
-    padding: 0 !important;
+    padding: var(--spacing-0) !important;
     min-width: 500px !important;
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.scss
index dd9e7c2a6..4b5930958 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/json-editor-node-flat.component.scss
@@ -8,16 +8,16 @@
   }
 }
 .json-editor--popover-template {
-  font-weight: 600;
-  font-size: 12px;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-xs);
   line-height: 13px;
   max-width: 300px;
-  color: colors.$color-blue-grey-800;
+  color: var(--grey-800);
 
   .label {
-    color: colors.$color-blue-grey-550;
-    font-size: 10px;
-    font-weight: bold;
+    color: var(--grey-550);
+    font-size: var(--font-size-xxs);
+    font-weight: var(--font-weight-bold);
     text-transform: uppercase;
   }
 
@@ -39,15 +39,15 @@ ngx-json-editor-node-flat {
 
   .node-container {
     display: flex;
-    padding-bottom: 0px;
+    padding-bottom: var(--spacing-0);
   }
 
   .node {
-    background-color: colors.$color-blue-grey-700;
+    background-color: var(--grey-700);
     box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
-    border-radius: 2px;
+    border-radius: var(--radius-2);
     display: flex;
-    padding: 25px 10px;
+    padding: var(--spacing-24) 10px;
     position: relative;
     flex: 0 1 100%;
     height: 96px;
@@ -57,18 +57,18 @@ ngx-json-editor-node-flat {
       position: absolute;
       width: 100%;
       height: 100%;
-      border-radius: 2px;
+      border-radius: var(--radius-2);
       top: 0;
       left: 0;
-      border: 2px solid colors.$color-error;
+      border: 2px solid var(--color-error);
     }
 
     .left-options {
       display: flex;
       flex-direction: column;
       justify-content: center;
-      margin-right: 10px;
-      color: colors.$color-blue-grey-400;
+      margin-right: var(--spacing-10);
+      color: var(--grey-400);
       flex: 0 0 15px;
 
       .required-indicator {
@@ -80,8 +80,8 @@ ngx-json-editor-node-flat {
           display: flex;
 
           svg path {
-            fill: colors.$color-blue-grey-400;
-            stroke: colors.$color-blue-grey-400;
+            fill: var(--grey-400);
+            stroke: var(--grey-400);
           }
 
           &.not-required {
@@ -92,8 +92,8 @@ ngx-json-editor-node-flat {
 
           &.invalid {
             svg path {
-              fill: colors.$color-error;
-              stroke: colors.$color-error;
+              fill: var(--color-error);
+              stroke: var(--color-error);
             }
           }
         }
@@ -117,19 +117,19 @@ ngx-json-editor-node-flat {
 
       .node-info {
         flex: 0 0 40%;
-        padding-right: 25px;
+        padding-right: var(--spacing-24);
         overflow: hidden;
         padding-top: 3px;
       }
 
       .node-input {
         flex: 0 1 60%;
-        padding-top: 5px;
-        margin-bottom: 2px;
+        padding-top: var(--spacing-4);
+        margin-bottom: var(--spacing-2);
 
         ngx-input {
-          padding: 0;
-          margin: 0;
+          padding: var(--spacing-0);
+          margin: var(--spacing-0);
 
           .ngx-input-hint {
             min-height: 0;
@@ -144,20 +144,20 @@ ngx-json-editor-node-flat {
           }
 
           input {
-            color: colors.$color-blue-grey-100;
+            color: var(--grey-100);
           }
 
           button {
             display: none;
-            color: colors.$color-blue-grey-400;
+            color: var(--grey-400);
           }
         }
 
         .input-error {
-          color: colors.$color-error;
+          color: var(--color-error);
           min-height: 1.2em; // min height keeps input from shifting when error is shown
           text-transform: capitalize;
-          font-size: 12px;
+          font-size: var(--font-size-xs);
           font-family: Source Sans Pro, Open Sans, Arial, sans-serif;
         }
       }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/array-node-flat/array-node-flat.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/array-node-flat/array-node-flat.component.scss
index 534bb8129..c99422e6d 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/array-node-flat/array-node-flat.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/array-node-flat/array-node-flat.component.scss
@@ -2,13 +2,13 @@
 @use '../node-types.extensions';
 
 .array-node-flat {
-  margin-top: 4px;
+  margin-top: var(--spacing-4);
 
   .array-node-content {
     @extend %node-type;
 
     &.no-margin {
-      margin-bottom: 0;
+      margin-bottom: var(--spacing-0);
     }
   }
 
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-info/node-info.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-info/node-info.component.scss
index 10503eeec..9438648e4 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-info/node-info.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-info/node-info.component.scss
@@ -10,9 +10,9 @@ ngx-json-editor-node-info {
     align-items: baseline;
 
     .info-btn {
-      color: colors.$color-blue-grey-350;
-      font-size: 12px;
-      margin-left: 5px;
+      color: var(--grey-350);
+      font-size: var(--font-size-xs);
+      margin-left: var(--spacing-4);
       position: relative;
       z-index: 1;
       white-space: nowrap;
@@ -21,8 +21,8 @@ ngx-json-editor-node-info {
 
   .name,
   .editable-name input {
-    font-weight: 600;
-    font-size: 18px;
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-l);
     line-height: 23px;
     color: #f0f1f6;
   }
@@ -37,13 +37,13 @@ ngx-json-editor-node-info {
 
   .info-type,
   .description {
-    color: colors.$color-blue-grey-250;
+    color: var(--grey-250);
   }
 
   .info-type {
     display: inline-flex;
-    font-size: 12px;
-    color: colors.$color-blue-grey-250;
+    font-size: var(--font-size-xs);
+    color: var(--grey-250);
     white-space: nowrap;
 
     > * {
@@ -60,27 +60,27 @@ ngx-json-editor-node-info {
     .dot-separator {
       flex: 0 0 auto;
       font-size: 0.2em;
-      margin: 0 5px;
+      margin: var(--spacing-0) var(--spacing-4);
       vertical-align: middle;
-      line-height: 20px;
+      line-height: var(--font-line-height-300);
     }
   }
 
   .description {
-    font-size: 14px;
-    color: colors.$color-blue-grey-250;
+    font-size: var(--font-size-s);
+    color: var(--grey-250);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: clip;
   }
 
   .required {
-    color: colors.$color-red-400;
+    color: var(--red-400);
   }
 
   .editable-name {
-    margin: 0;
-    padding-top: 15px;
+    margin: var(--spacing-0);
+    padding-top: var(--spacing-16);
 
     .ngx-input-hint {
       display: none;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-types.extensions.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-types.extensions.scss
index e2fc3552d..d11c94169 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-types.extensions.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/node-types.extensions.scss
@@ -4,11 +4,11 @@
 
 %node-type {
   display: flex;
-  margin-bottom: 4px;
+  margin-bottom: var(--radius-4);
   position: relative;
 
   &:last-child {
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-0);
   }
 
   ngx-json-editor-node-flat {
@@ -20,9 +20,9 @@
   height: 100px;
   position: relative;
   display: flex;
-  padding-top: 0px;
+  padding-top: var(--spacing-0);
   ngx-dropdown {
-    padding-bottom: 0;
+    padding-bottom: var(--spacing-0);
   }
 
   &.compressed {
@@ -30,23 +30,23 @@
   }
 
   &.background {
-    border-left: 1px solid colors.$color-blue-grey-650;
+    border-left: 1px solid var(--grey-650);
     height: 96px;
-    padding-left: 0px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    margin-top: -2px;
-    margin-bottom: -2px;
+    padding-left: var(--spacing-0);
+    padding-top: var(--spacing-2);
+    padding-bottom: var(--spacing-2);
+    margin-top: -var(--spacing-2);
+    margin-bottom: -var(--spacing-2);
   }
 
   .indented-content {
-    border: 2px dotted color.change(colors.$color-blue-grey-650, $alpha: 0.5);
+    border: 2px dotted rgba(var(--grey-650), 0.5);
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
-    border-radius: 4px;
-    margin-bottom: 0px;
+    border-radius: var(--radius-4);
+    margin-bottom: var(--spacing-0);
     background-color: rgba(49, 56, 71, 0.5);
 
     &.indented-content--root {
@@ -54,19 +54,19 @@
     }
 
     &.indented-content--indent {
-      margin-left: 15px;
+      margin-left: var(--spacing-16);
     }
 
     button {
       display: flex;
-      color: colors.$color-blue-400;
+      color: var(--blue-400);
       i {
-        font-size: 18px;
+        font-size: var(--font-size-l);
       }
 
       span {
-        font-size: 14px;
-        margin-left: 10px;
+        font-size: var(--font-size-s);
+        margin-left: var(--spacing-10);
       }
     }
 
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/object-node-flat/object-node-flat.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/object-node-flat/object-node-flat.component.scss
index be8fdc944..6caa9bd70 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/object-node-flat/object-node-flat.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/object-node-flat/object-node-flat.component.scss
@@ -4,7 +4,7 @@
 @use '../../../../json-editor.extensions';
 
 .object-node-flat {
-  margin-top: 4px;
+  margin-top: var(--spacing-4);
 
   .object-node-content {
     @extend %node-type;
@@ -15,19 +15,19 @@
   }
 
   .add-prop-button {
-    margin-bottom: 4px;
+    margin-bottom: var(--spacing-4);
     height: 96px;
     margin-left: -15px;
     &:last-child {
-      margin-bottom: 0;
+      margin-bottom: var(--spacing-0);
     }
 
     .node {
-      margin-bottom: 0;
+      margin-bottom: var(--spacing-0);
       justify-content: unset !important;
       opacity: 0.2;
       cursor: pointer;
-      outline: 2px dotted color.change(colors.$color-blue-grey-650, $alpha: 0.5);
+      border: 2px dotted rgba(var(--grey-650), 0.5);
       outline-offset: -2px;
 
       &:hover {
@@ -41,7 +41,7 @@
     }
 
     .node-input {
-      padding-top: 0 !important;
+      padding-top: var(--spacing-0) !important;
     }
   }
 }
@@ -54,7 +54,7 @@
   .add-button {
     display: none;
     padding-left: 1rem;
-    border-left: 1px solid colors.$color-blue-grey-650;
+    border-left: 1px solid var(--grey-650);
   }
 }
 
@@ -67,6 +67,6 @@
   @extend %indentation;
   position: relative;
   height: 117px;
-  margin-bottom: 5px;
+  margin-bottom: var(--spacing-4);
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/property-config/property-config.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/property-config/property-config.component.scss
index 22d0cdf53..d35616d41 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/property-config/property-config.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/json-editor-node-flat/node-types/property-config/property-config.component.scss
@@ -2,20 +2,20 @@
 
 .property-config {
   .header {
-    background: linear-gradient(180deg, colors.$color-blue-grey-650 0%, colors.$color-blue-grey-750 100%);
+    background: linear-gradient(180deg, var(--grey-650) 0%, var(--grey-750) 100%);
     height: 75px;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 35px;
+    padding: var(--spacing-0) 35px;
 
     span {
-      font-size: 19px;
+      font-size: var(--font-size-xl);
       color: white;
     }
 
     button {
-      font-size: 14px;
+      font-size: var(--font-size-s);
       line-height: 18px;
     }
   }
@@ -27,7 +27,7 @@
 
   .new-enum-input {
     button {
-      color: colors.$color-grey-500;
+      color: var(--grey-500);
     }
 
     .ngx-input-hint {
@@ -37,8 +37,8 @@
 
   .enum-edit {
     button {
-      font-size: 9px;
-      padding-right: 0;
+      font-size: var(--font-size-xxs);
+      padding-right: var(--spacing-0);
     }
   }
 
@@ -49,7 +49,7 @@
       flex-basis: 50%;
 
       &:first-child {
-        margin-right: 30px;
+        margin-right: var(--spacing-30);
       }
     }
   }
@@ -70,7 +70,7 @@
   }
 
   .examples-container {
-    border: 1px solid colors.$color-blue-grey-550;
+    border: 1px solid var(--grey-550);
     padding: 14px;
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/orderable-inputs-list/orderable-inputs-list.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/orderable-inputs-list/orderable-inputs-list.component.scss
index 5ee08da60..7aca513fe 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/orderable-inputs-list/orderable-inputs-list.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor-flat/orderable-inputs-list/orderable-inputs-list.component.scss
@@ -8,18 +8,18 @@
 }
 
 .input-item {
-  background: colors.$color-blue-grey-650;
+  background: var(--grey-650);
   box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
-  margin-bottom: 13px;
+  border-radius: var(--radius-2);
+  margin-bottom: var(--spacing-12);
 
   .drag-drop-handle,
   .remove-item {
-    color: colors.$color-blue-grey-350;
+    color: var(--grey-350);
   }
 
   .drag-drop-handle {
-    margin: 0 9px;
+    margin: var(--spacing-0) var(--spacing-8);
     height: 17px;
     font-size: 14.5px;
     cursor: grab;
@@ -27,12 +27,12 @@
 
   .ngx-input {
     flex: 1;
-    margin: 0;
+    margin: var(--spacing-0);
   }
 
   .remove-item {
     font-size: 8px;
-    margin: 0 5px;
+    margin: var(--spacing-0) var(--spacing-4);
     height: 8px;
   }
 }
@@ -40,8 +40,8 @@
 .add-examples {
   cursor: pointer;
   height: 45px;
-  border: 1px dashed colors.$color-blue-400;
-  color: colors.$color-blue-400;
+  border: 1px dashed var(--blue-400);
+  color: var(--blue-400);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor.extensions.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor.extensions.scss
index 450cde4b0..c5b51f8d6 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor.extensions.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor.extensions.scss
@@ -2,7 +2,7 @@
 
 %ngx-dropdown-menu {
   white-space: nowrap;
-  margin-top: 10px;
+  margin-top: var(--spacing-10);
 
   .dropdown-column {
     vertical-align: top;
@@ -10,31 +10,31 @@
     min-width: 150px;
 
     &:nth-child(2) {
-      border-left: 1px solid colors.$color-blue-grey-550;
+      border-left: 1px solid var(--grey-550);
     }
   }
 }
 
 %indentation {
-  border-radius: 0px;
+  border-radius: var(--radius-0);
   display: flex;
   align-items: center;
-  border-left: 1px solid colors.$color-blue-grey-650;
+  border-left: 1px solid var(--grey-650);
   line-height: 4px;
-  margin: -2px 0;
+  margin: -2px var(--spacing-0);
 }
 
 .json-editor--vertical-separator {
-  background-color: colors.$color-blue-grey-650;
-  border-radius: 2px;
+  background-color: var(--grey-650);
+  border-radius: var(--radius-2);
   width: 1px;
-  margin-right: 15px;
+  margin-right: var(--spacing-16);
   padding-right: 1px;
   margin-bottom: -2px;
   margin-top: -2px;
   height: calc(100% + 5px);
 
   &:first-child {
-    margin-left: 15px;
+    margin-left: var(--spacing-16);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor-node/json-editor-node.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor-node/json-editor-node.component.scss
index 7dde3b4f8..14dccd995 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor-node/json-editor-node.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor-node/json-editor-node.component.scss
@@ -3,15 +3,15 @@
 @use '../json-editor.variables' as json-editor;
 
 .json-tree-node {
-  padding: 0px;
-  margin-left: 25px;
-  margin-bottom: 0px;
+  padding: var(--spacing-0);
+  margin-left: var(--spacing-24);
+  margin-bottom: var(--spacing-0);
   position: relative;
   white-space: nowrap;
 
   &.inline {
     display: inline-block;
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-0);
     vertical-align: top;
     width: calc(100% - 290px);
 
@@ -19,8 +19,9 @@
       position: absolute;
       content: '=';
       left: -19px;
-      font-size: 20px;
-      color: colors.$color-blue-grey-500;
+      font-size: var(--font-size-xl);
+
+      color: var(--grey-500);
     }
 
     &.inline {
@@ -37,8 +38,8 @@
   }
 
   .ngx-expander {
-    font-size: 0.75rem;
-    color: colors.$color-blue-grey-200;
+    font-size: var(--font-size-xs);
+    color: var(--grey-200);
     position: absolute;
     top: -25px;
     left: -26px;
@@ -51,12 +52,12 @@
 
     &.ngx-tree-collapse::before,
     &.ngx-tree-expand::before {
-      background: colors.$color-blue-grey-800;
+      background: var(--grey-800);
       border-radius: 50%;
     }
 
     &.invalid {
-      color: colors.$color-error;
+      color: var(--color-error);
     }
   }
 
@@ -65,18 +66,18 @@
     left: 20px;
     width: 21px;
     height: 21px;
-    padding: 2px 3px;
-    background: colors.$color-blue-grey-300;
+    padding: var(--spacing-2) 3px;
+    background: var(--grey-300);
 
     ngx-icon {
-      color: colors.$color-blue-grey-800;
+      color: var(--grey-800);
     }
 
     &::before {
       content: ' ';
       width: 15px;
       height: 1px;
-      border-radius: 5px;
+      border-radius: var(--radius-6);
       background: none;
       border-top: dashed 1px json-editor.$color-tree-line;
       position: absolute;
@@ -98,7 +99,7 @@
     border: 1px solid json-editor.$color-node-item-border;
     height: 30px;
     display: inline-block;
-    margin-left: 20px;
+    margin-left: var(--spacing-20);
     position: relative;
     background: json-editor.$color-node-item-bg;
 
@@ -106,7 +107,7 @@
       content: ' ';
       width: 15px;
       height: 1px;
-      border-radius: 5px;
+      border-radius: var(--radius-6);
       background: none;
       border-top: dashed 1px json-editor.$color-tree-line;
       position: absolute;
@@ -128,25 +129,25 @@
         width: 16px;
         height: 16px;
       }
-      margin-left: 0px;
+      margin-left: var(--spacing-0);
       display: inline-block;
 
       &:hover {
-        background: color.adjust(json-editor.$color-icon-type-bg, $alpha: 0.1);
+        background: rgba(var(--blue-200), 0.1);
       }
     }
 
     .property-name {
       display: inline-block;
       width: 170px;
-      padding: 0px 5px;
+      padding: var(--spacing-0) var(--spacing-4);
       position: relative;
       transform: translateY(-50%);
       vertical-align: middle;
 
       .title {
         display: inline-block;
-        color: colors.$color-blue-grey-400;
+        color: var(--grey-400);
         width: 100%;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -158,10 +159,10 @@
       input {
         border: none;
         background: transparent;
-        color: colors.$color-blue-grey-150;
+        color: var(--grey-150);
         width: calc(100% - 5px);
-        line-height: 20px;
-        font-size: 14px;
+        line-height: var(--font-line-height-300);
+        font-size: var(--font-size-s);
       }
     }
   }
@@ -170,22 +171,22 @@
     position: absolute;
     top: -28px;
     left: 205px;
-    color: colors.$color-error;
+    color: var(--color-error);
   }
 
   *:not(ngx-input).value-input,
   ngx-input.value-input .ngx-input-wrap .ngx-input-box-wrap .ngx-input-box {
     border: 1px solid json-editor.$color-node-item-border;
     background: json-editor.$color-node-item-bg;
-    color: colors.$color-blue-grey-150;
+    color: var(--grey-150);
     width: 100%;
     height: 30px;
-    padding: 5px;
-    border-radius: 0;
-    margin: 0;
+    padding: var(--spacing-4);
+    border-radius: var(--radius-0);
+    margin: var(--spacing-0);
 
     &.select * {
-      background-color: colors.$color-blue-grey-700;
+      background-color: var(--grey-700);
     }
 
     &.code {
@@ -195,7 +196,7 @@
       .code-display {
         white-space: pre-wrap;
         font-family: 'Courier New', Courier, monospace;
-        font-size: 14px;
+        font-size: var(--font-size-s);
       }
 
       .edit-code-icon {
@@ -218,7 +219,7 @@
         min-height: 30px;
         position: absolute;
         z-index: 20;
-        background: colors.$color-blue-grey-775;
+        background: var(--grey-775);
 
         .edit-code-icon {
           display: inline;
@@ -228,7 +229,7 @@
   }
 
   ngx-input.value-input {
-    margin: 0;
+    margin: var(--spacing-0);
 
     .ngx-input-label,
     .ngx-input-underline,
@@ -238,17 +239,17 @@
   }
 
   .ngx-toggle {
-    margin: 0;
+    margin: var(--spacing-0);
     line-height: 30px;
 
     .ngx-toggle-text {
-      color: colors.$color-blue-grey-150;
+      color: var(--grey-150);
     }
   }
 
   .invalid {
     > div > .value-input {
-      border: 1px solid colors.$color-error;
+      border: 1px solid var(--color-error);
     }
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor.component.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor.component.scss
index 39374c05a..7b40e7f01 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor.component.scss
@@ -6,7 +6,7 @@
     border: 1px solid json-editor.$color-node-item-border;
     height: 30px;
     display: inline-block;
-    margin-left: 20px;
+    margin-left: var(--spacing-20);
     position: relative;
     background: json-editor.$color-node-item-bg;
 
@@ -14,7 +14,7 @@
       content: ' ';
       width: 15px;
       height: 1px;
-      border-radius: 5px;
+      border-radius: var(--radius-6);
       background: none;
       border-top: dashed 1px json-editor.$color-tree-line;
       position: absolute;
@@ -36,14 +36,14 @@
         width: 16px;
         height: 16px;
       }
-      margin-left: 0px;
+      margin-left: var(--spacing-0);
       display: inline-block;
     }
 
     .name {
       display: inline-block;
       width: 170px;
-      padding: 0px 5px;
+      padding: var(--spacing-0) var(--spacing-4);
       position: relative;
       transform: translateY(-50%);
       vertical-align: middle;
@@ -51,7 +51,7 @@
       .title {
         display: inline-block;
         width: 100%;
-        color: colors.$color-blue-grey-400;
+        color: var(--grey-400);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -71,7 +71,7 @@
       min-width: 150px;
 
       &:nth-child(2) {
-        border-left: 1px solid colors.$color-blue-grey-550;
+        border-left: 1px solid var(--grey-550);
       }
     }
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor.variables.scss b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor.variables.scss
index 71c779f21..08bf12aaa 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor.variables.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/json-editor/json-editor/json-editor.variables.scss
@@ -1,10 +1,10 @@
 @use 'sass:color';
 @use 'colors/colors' as colors;
 
-$color-tree-line: colors.$color-blue-grey-500;
-$color-node-item-bg: rgba(colors.$color-blue-200, 0.05);
-$color-node-item-border: rgba(colors.$color-blue-200, 0.07);
+$color-tree-line: var(--grey-500);
+$color-node-item-bg: rgba(var(--blue-200), 0.05);
+$color-node-item-border: rgba(var(--blue-200), 0.07);
 $color-icon-type-bg: $color-node-item-border;
-$color-icon-type: colors.$color-blue-grey-200;
-$color-error: colors.$color-red-600;
-$color-tree-line: colors.$color-blue-grey-500;
+$color-icon-type: var(--grey-200);
+$color-error: var(--red-600);
+$color-tree-line: var(--grey-500);
diff --git a/projects/swimlane/ngx-ui/src/lib/components/list/list-column/list-column.component.scss b/projects/swimlane/ngx-ui/src/lib/components/list/list-column/list-column.component.scss
index 8c2de06bd..151dda821 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/list/list-column/list-column.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/list/list-column/list-column.component.scss
@@ -1,9 +1,9 @@
 @use 'colors/colors' as colors;
 
 ngx-list-column.ngx-list-column {
-  color: colors.$color-blue-grey-050;
-  font-size: 1rem;
-  line-height: 20px;
+  color: var(--grey-050);
+  font-size: var(--font-size-m);
+  line-height: var(--font-line-height-300);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/list/list-header/list-header.component.scss b/projects/swimlane/ngx-ui/src/lib/components/list/list-header/list-header.component.scss
index 68bb72bdd..267e36340 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/list/list-header/list-header.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/list/list-header/list-header.component.scss
@@ -1,6 +1,6 @@
 ngx-list-header.ngx-list-header {
   color: #fff;
-  font-size: 14px;
-  font-weight: 700;
+  font-size: var(--font-size-s);
+  font-weight: var(--font-weight-bold);
   line-height: 22px;
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/list/list-row/list-row.component.scss b/projects/swimlane/ngx-ui/src/lib/components/list/list-row/list-row.component.scss
index 23a279129..5028835d8 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/list/list-row/list-row.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/list/list-row/list-row.component.scss
@@ -2,13 +2,13 @@
 
 ngx-list-row {
   &.ngx-list-row {
-    background-color: colors.$color-blue-grey-800;
-    border: 1px solid colors.$color-blue-grey-600;
+    background-color: var(--grey-800);
+    border: 1px solid var(--grey-600);
     border-radius: 0.25rem;
     display: grid;
     align-items: center;
     height: 40px;
-    margin: 0.25rem 1rem 0rem 1rem;
+    margin: 0.25rem 1rem var(--spacing-0) 1rem;
     padding-inline: 1rem;
     position: relative;
 
@@ -23,15 +23,15 @@ ngx-list-row {
     }
 
     &--error::before {
-      background-color: colors.$color-red-500;
+      background-color: var(--red-500);
     }
 
     &--success::before {
-      background-color: colors.$color-green-500;
+      background-color: var(--green-500);
     }
 
     &--warning::before {
-      background-color: colors.$color-orange-400;
+      background-color: var(--orange-400);
     }
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/list/list.component.scss b/projects/swimlane/ngx-ui/src/lib/components/list/list.component.scss
index e31e58120..e47bd8780 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/list/list.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/list/list.component.scss
@@ -23,9 +23,9 @@ ngx-list.ngx-list {
   }
 
   hr {
-    border-top: 1px solid colors.$color-blue-grey-600;
-    border-bottom: 1px solid colors.$color-blue-grey-600;
+    border-top: 1px solid var(--grey-600);
+    border-bottom: 1px solid var(--grey-600);
     opacity: 0.75;
-    margin: 0.75rem 0 0.5rem 0;
+    margin: 0.75rem var(--spacing-0) 0.5rem var(--spacing-0);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/loading/loading.component.scss b/projects/swimlane/ngx-ui/src/lib/components/loading/loading.component.scss
index 7e401ff7f..f487aca4c 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/loading/loading.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/loading/loading.component.scss
@@ -5,16 +5,16 @@
 
   .ngx-loading-bar--container {
     position: fixed;
-    margin: 0;
-    padding: 0;
+    margin: var(--spacing-0);
+    padding: var(--spacing-0);
     top: 0;
     left: 0;
     right: 0;
     z-index: 99999;
 
     .ngx-loading-bar--bar {
-      background-color: colors.$color-blue-300;
-      color: colors.$color-blue-300;
+      background-color: var(--blue-300);
+      color: var(--blue-300);
       height: 2px;
       opacity: 1;
       z-index: 99998;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/long-press/long-press-button.component.scss b/projects/swimlane/ngx-ui/src/lib/components/long-press/long-press-button.component.scss
index 62290dd91..9c3afc5b7 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/long-press/long-press-button.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/long-press/long-press-button.component.scss
@@ -3,12 +3,12 @@
 $outerSize: 60px;
 $innerSize: 46px;
 $borderWidth: 3px;
-$background-color: colors.$color-blue-grey-850;
+$background-color: var(--grey-850);
 
 .ngx-long-press {
   border-radius: 50%;
   border: $borderWidth solid $background-color;
-  padding: 0px;
+  padding: var(--spacing-0);
   width: $outerSize;
   height: $outerSize;
   overflow: hidden;
@@ -18,7 +18,7 @@ $background-color: colors.$color-blue-grey-850;
   cursor: pointer;
 
   button {
-    padding: 0;
+    padding: var(--spacing-0);
     position: absolute;
     top: 50%;
     left: 50%;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/nag/nag.component.scss b/projects/swimlane/ngx-ui/src/lib/components/nag/nag.component.scss
index 2b52a8c39..2e7cc7708 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/nag/nag.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/nag/nag.component.scss
@@ -6,7 +6,7 @@
   overflow-x: hidden;
   text-align: left;
   z-index: 998;
-  background: colors.$color-blue-grey-800;
+  background: var(--grey-800);
   background: #313847;
 
   &.ngx-nag-bottom {
@@ -35,7 +35,7 @@
       border-radius: 15px;
       float: right;
       text-align: center;
-      margin-top: 10px;
+      margin-top: var(--spacing-10);
       line-height: 34px;
       cursor: pointer;
     }
@@ -47,7 +47,7 @@
 
   .ngx-nag-body {
     background-color: #313847;
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-0);
     padding: 1.8em;
     max-height: 50vh;
     overflow-y: auto;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/nav-menu/nav-menu.component.scss b/projects/swimlane/ngx-ui/src/lib/components/nav-menu/nav-menu.component.scss
index e741b50a9..364a29ad2 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/nav-menu/nav-menu.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/nav-menu/nav-menu.component.scss
@@ -1,10 +1,10 @@
-@use 'colors/colors' as colors;
+//@use 'colors/colors' as colors;
 
 ngx-nav-menu {
   width: 60px;
   height: 100%;
-  background: colors.$color-blue-grey-800;
-  padding: 0;
+  background: var(--grey-800);
+  padding: var(--spacing-0);
   user-select: none;
 
   .nav-menu {
@@ -15,14 +15,14 @@ ngx-nav-menu {
   }
 
   .expand-icon {
-    font-size: 12px;
+    font-size: var(--font-size-xs);
     cursor: pointer;
-    margin-top: 2px;
+    margin-top: var(--spacing-2);
     position: absolute;
     left: 23px;
 
     svg {
-      fill: colors.$color-blue-grey-400;
+      fill: var(--grey-400);
     }
 
     &.bottom {
@@ -31,7 +31,7 @@ ngx-nav-menu {
 
     &:hover {
       svg {
-        fill: colors.$color-blue-500;
+        fill: var(--blue-500);
       }
     }
   }
@@ -84,30 +84,30 @@ ngx-nav-menu.expanded,
   overflow: auto;
 
   .nav-item-container {
-    background: colors.$color-blue-grey-750;
+    background: var(--grey-750);
   }
 
   .nav-item {
     display: block;
-    margin: 1px 0;
-    background: colors.$color-blue-grey-750;
+    margin: 1px var(--spacing-0);
+    background: var(--grey-750);
     width: 100%;
-    color: colors.$color-white;
-    border-left-color: colors.$color-blue-grey-750;
+    color: var(--white);
+    border-left-color: var(--grey-750);
     border-left-width: 3px;
     border-left-style: solid;
 
-    padding: 13px 0px 14px 0px;
+    padding: 13px var(--spacing-0) 14px var(--spacing-0);
     cursor: pointer;
 
     ngx-icon {
       width: 20px;
       height: 20px;
-      margin-left: 17px;
+      margin-left: var(--spacing-16);
       vertical-align: middle;
-      font-size: 20px;
-      line-height: 20px;
-      color: colors.$color-blue-grey-350;
+      font-size: var(--font-size-xl);
+      line-height: var(--font-line-height-300);
+      color: var(--grey-350);
 
       svg {
         fill: none;
@@ -119,19 +119,19 @@ ngx-nav-menu.expanded,
     .nav-label {
       display: none;
       text-transform: uppercase;
-      margin-left: 15px;
-      font-size: 14px;
-      color: colors.$color-blue-grey-350;
-      font-weight: 600;
+      margin-left: var(--spacing-16);
+      font-size: var(--font-size-s);
+      color: var(--grey-350);
+      font-weight: var(--font-weight-semibold);
     }
 
     .toggle-icon {
       display: none;
       float: right;
-      color: colors.$color-blue-grey-350;
-      font-size: 12px;
-      margin-top: 5px;
-      margin-right: 10px;
+      color: var(--grey-350);
+      font-size: var(--font-size-xs);
+      margin-top: var(--spacing-4);
+      margin-right: var(--spacing-10);
     }
 
     &:focus {
@@ -141,10 +141,10 @@ ngx-nav-menu.expanded,
     &:hover,
     &.active {
       border-image: linear-gradient(to bottom, #02aaff 0%, #00fff4 100%) 1 100%;
-      border-color: colors.$color-blue-500;
+      border-color: var(--blue-500);
 
       ngx-icon {
-        color: colors.$color-blue-grey-050;
+        color: var(--grey-050);
 
         svg {
           filter: none;
@@ -157,26 +157,26 @@ ngx-nav-menu.expanded,
 
 .sub-nav {
   display: none;
-  padding-left: 0px;
-  margin: 0px;
+  padding-left: var(--spacing-0);
+  margin: var(--spacing-0);
   max-height: 263px;
   overflow: auto;
-  background: colors.$color-blue-grey-800;
+  background: var(--grey-800);
 
   .sub-nav-item {
     display: block;
-    background: colors.$color-blue-grey-800;
-    margin-bottom: 0px;
-    padding: 16px 18px;
-    font-size: 0.9rem;
-    color: colors.$color-blue-grey-350;
+    background: var(--grey-800);
+    margin-bottom: var(--spacing-0);
+    padding: var(--spacing-16) 18px;
+    font-size: var(--font-size-m);
+    color: var(--grey-350);
     cursor: pointer;
 
     .active-indicator {
       display: none;
       float: right;
-      margin-top: 4px;
-      color: colors.$color-blue-500;
+      margin-top: var(--spacing-4);
+      color: var(--blue-500);
     }
 
     &:focus {
@@ -192,12 +192,12 @@ ngx-nav-menu.expanded,
   }
 
   .sub-nav-item:not(:first-child) {
-    border-top: 1px solid colors.$color-blue-grey-750;
+    border-top: 1px solid var(--grey-750);
   }
 }
 
 .nav-logo {
-  background: colors.$color-blue-grey-900;
+  background: var(--grey-900);
   height: 50px;
   position: relative;
 
@@ -222,7 +222,7 @@ ngx-nav-menu.expanded,
   .logo-text {
     display: none;
     height: 20px;
-    margin-left: 25px;
+    margin-left: var(--spacing-24);
   }
 
   &:hover {
@@ -242,10 +242,10 @@ ngx-nav-menu.expanded,
 
 .nav-popover {
   width: 200px;
-  background: colors.$color-blue-grey-750 !important;
-  margin-top: 7px;
+  background: var(--grey-750) !important;
+  margin-top: var(--spacing-8);
   box-shadow: none !important;
-  padding: 0 !important;
+  padding: var(--spacing-0) !important;
 
   transition: opacity 0.3s, transform 0s !important;
 
@@ -254,17 +254,17 @@ ngx-nav-menu.expanded,
     overflow: auto;
   }
   .sub-nav-item {
-    margin: 0px 1px 1px 1px;
+    margin: var(--spacing-0) 1px 1px 1px;
   }
 
   .title {
     height: 50px;
-    background: colors.$color-blue-grey-750;
-    padding: 15px 0px 14px 15px;
+    background: var(--grey-750);
+    padding: var(--spacing-16) var(--spacing-0) 14px var(--spacing-16);
     text-transform: uppercase;
     margin-left: -1px;
-    font-size: 14px;
-    color: colors.$color-blue-grey-350;
-    font-weight: 600;
+    font-size: var(--font-size-s);
+    color: var(--grey-350);
+    font-weight: var(--font-weight-semibold);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/navbar/navbar-item.component.scss b/projects/swimlane/ngx-ui/src/lib/components/navbar/navbar-item.component.scss
index 20e6de567..298beb36b 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/navbar/navbar-item.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/navbar/navbar-item.component.scss
@@ -3,10 +3,10 @@
 .ngx-navbar-item {
   display: flex;
   font-size: 15pt;
-  color: colors.$color-blue-grey-400;
+  color: var(--grey-400);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
-  padding: 8px 10px 0 10px;
+  padding: var(--spacing-8) 10px var(--spacing-0) 10px;
 
   &:focus {
     outline: none;
@@ -14,6 +14,6 @@
 
   &:hover,
   &.active {
-    color: colors.$color-blue-400;
+    color: var(--blue-400);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/navbar/navbar.component.scss b/projects/swimlane/ngx-ui/src/lib/components/navbar/navbar.component.scss
index f3aec5876..9bbd6d57f 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/navbar/navbar.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/navbar/navbar.component.scss
@@ -5,7 +5,7 @@
   align-items: center;
   min-height: 50px;
   position: relative;
-  background-color: colors.$color-blue-grey-825;
+  background-color: var(--grey-825);
 
   .ngx-navbar--nav-items {
     display: flex;
@@ -20,7 +20,7 @@
 
     .ngx-navbar--bar {
       position: absolute;
-      background-color: colors.$color-blue-500;
+      background-color: var(--blue-500);
 
       &.ngx-navbar--bottom {
         bottom: 0;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/notification/notification.component.scss b/projects/swimlane/ngx-ui/src/lib/components/notification/notification.component.scss
index 2377aee87..ff37b27d9 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/notification/notification.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/notification/notification.component.scss
@@ -29,9 +29,9 @@
   margin-top: 0.5rem;
   position: relative;
   box-shadow: shadows.$shadow-15;
-  color: colors.$color-white;
+  color: var(--white);
   text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
-  background: colors.$color-blue-grey-700;
+  background: var(--grey-700);
 
   @include notification(#455066);
 
@@ -69,24 +69,24 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    padding: 0 1.25em;
+    padding: var(--spacing-0) 1.25em;
     height: 2rem;
 
     .ngx-icon {
-      font-size: 2rem;
+      font-size: var(--font-size-4xl);
       line-height: 2rem;
     }
   }
 
   .notification-content {
     padding: 1.5rem;
-    color: colors.$color-blue-grey-100;
+    color: var(--grey-100);
     overflow: auto;
     max-height: 300px;
 
     &.has-icon {
       margin-left: 4.5rem;
-      border-left: 1px solid colors.$color-blue-grey-650;
+      border-left: 1px solid var(--grey-650);
     }
   }
 
@@ -95,30 +95,30 @@
   }
 
   &.ngx-notification-info {
-    @include notification(colors.$color-blue);
+    @include notification(var(--blue-500));
   }
 
   &.ngx-notification-error {
-    @include notification(colors.$color-red);
+    @include notification(var(--red-500));
   }
 
   &.ngx-notification-warning {
-    @include notification(colors.$color-orange);
+    @include notification(var(--orange-500));
   }
 
   &.ngx-notification-success {
-    @include notification(colors.$color-green);
+    @include notification(var(--green-500));
   }
 
   .ngx-notification-title {
-    margin: 0;
+    margin: var(--spacing-0);
     font-size: 1.2rem;
     color: white;
   }
 
   .ngx-notification-body {
-    font-size: 0.9rem;
-    margin: 0;
+    font-size: var(--font-size-m);
+    margin: var(--spacing-0);
     line-height: 1rem;
   }
 
@@ -127,8 +127,8 @@
     right: 0.5rem;
     top: 0.5rem;
     line-height: 1em;
-    padding: 0;
-    font-size: 16px;
+    padding: var(--spacing-0);
+    font-size: var(--font-size-m);
     height: 16px;
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/overlay/resize-overlay.component.scss b/projects/swimlane/ngx-ui/src/lib/components/overlay/resize-overlay.component.scss
index 7a42d54bc..3a82c96ef 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/overlay/resize-overlay.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/overlay/resize-overlay.component.scss
@@ -15,25 +15,25 @@
       transform: translate(-50%, -50%);
       top: 50%;
       left: 50%;
-      font-size: 14px;
+      font-size: var(--font-size-s);
       line-height: 17px;
       max-width: 250px;
-      color: colors.$color-blue-grey-100;
+      color: var(--grey-100);
 
       h3 {
-        font-size: 18px !important;
+        font-size: var(--font-size-l) !important;
         line-height: 28px;
         color: white;
       }
 
       .ngx-icon.ngx-browser-size {
-        color: colors.$color-red;
+        color: var(--red-500);
         font-size: 46px;
         line-height: 46px;
       }
 
       .ngx-icon.ngx-question {
-        color: colors.$color-blue-grey-100;
+        color: var(--grey-100);
         font-size: 1.5rem;
         line-height: 1.5rem;
         margin-top: 1rem;
@@ -49,15 +49,15 @@
         background: #afb7c8;
         color: #060709;
         box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-        border-radius: 0;
-        font-size: 13px;
+        border-radius: var(--radius-0);
+        font-size: var(--font-size-xs);
         padding: 7px;
 
         .combination {
-          margin-left: 5px;
+          margin-left: var(--spacing-4);
           .key {
             background-color: #d1d5e1;
-            border-radius: 3px;
+            border-radius: var(--radius-4);
             padding: 3px;
             box-shadow: shadows.$shadow-2;
           }
@@ -71,7 +71,7 @@
       }
 
       .continue {
-        margin-top: 20px;
+        margin-top: var(--spacing-20);
         color: white;
         border-color: white;
       }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/plus-menu/plus-menu.component.scss b/projects/swimlane/ngx-ui/src/lib/components/plus-menu/plus-menu.component.scss
index 59f2b6cb6..949450cdb 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/plus-menu/plus-menu.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/plus-menu/plus-menu.component.scss
@@ -47,16 +47,16 @@
   &--circle-container {
     color: var(--menu-color);
     cursor: pointer;
-    font-size: 29px;
+    font-size: var(--font-size-3xl);
     user-select: none;
   }
 
   &--menu-title {
     display: none;
     vertical-align: top;
-    font-size: 18px;
+    font-size: var(--font-size-l);
     color: white;
-    margin-left: 5px;
+    margin-left: var(--spacing-4);
     line-height: var(--button-size);
   }
 
@@ -87,25 +87,25 @@
       width: 90px;
       height: auto;
       text-align: right;
-      font-size: 18px;
-      line-height: 19px;
-      font-weight: 600;
+      font-size: var(--font-size-l);
+      line-height: var(--font-line-height-300);
+      font-weight: var(--font-weight-semibold);
       cursor: pointer;
 
       .subtitle {
         font-style: normal;
-        font-weight: 600;
-        font-size: 13px;
+        font-weight: var(--font-weight-semibold);
+        font-size: var(--font-size-xs);
         line-height: 30px;
-        color: colors.$color-blue-grey-200;
+        color: var(--grey-200);
       }
     }
 
     .ngx-plus-menu--icon {
       position: absolute;
       text-align: center;
-      font-size: 25px;
-      font-weight: bold;
+      font-size: var(--font-size-2xl);
+      font-weight: var(--font-weight-bold);
       border-radius: 50%;
       background: var(--icon-background);
       border: 2px solid var(--menu-color);
diff --git a/projects/swimlane/ngx-ui/src/lib/components/progress-spinner/progress-spinner.component.scss b/projects/swimlane/ngx-ui/src/lib/components/progress-spinner/progress-spinner.component.scss
index 460209e1f..7319c8970 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/progress-spinner/progress-spinner.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/progress-spinner/progress-spinner.component.scss
@@ -41,11 +41,11 @@
   }
 
   &--label {
-    margin-top: 30px;
+    margin-top: var(--spacing-30);
 
     h4 {
-      font-weight: 600;
-      font-size: 24px;
+      font-weight: var(--font-weight-semibold);
+      font-size: var(--font-size-2xl);
       line-height: 30px;
       text-align: center;
       color: white;
@@ -75,7 +75,7 @@
           display: block;
           transform: translate(calc(50% - 35px), calc(50% - 36px));
           fill: none;
-          stroke: colors.$color-blue-500;
+          stroke: var(--blue-500);
           animation: icon-progress-spinner--check 1s linear forwards;
         }
 
@@ -83,7 +83,7 @@
           display: block;
           transform: translate(calc(50% - 35px), calc(50% - 28px));
           fill: none;
-          stroke: colors.$color-error;
+          stroke: var(--color-error);
           animation: icon-progress-spinner--check 1s linear forwards;
         }
       }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/radiobutton/radiobutton.component.scss b/projects/swimlane/ngx-ui/src/lib/components/radiobutton/radiobutton.component.scss
index 11eafa22c..76c582f9f 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/radiobutton/radiobutton.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/radiobutton/radiobutton.component.scss
@@ -7,12 +7,12 @@
     display: block;
     position: relative;
     padding-left: 1.5em;
-    margin: 0 0.8rem 0 0;
+    margin: var(--spacing-0) 0.8rem var(--spacing-0) var(--spacing-0);
     cursor: pointer;
     user-select: none;
 
     &--content {
-      color: colors.$color-blue-grey-100;
+      color: var(--grey-100);
     }
 
     /* Hide default radio button */
@@ -32,7 +32,7 @@
       border: 1px solid #6f809e;
       opacity: 1;
       transition: background-color 0.3s ease, opacity 0.3s ease;
-      outline: 0px none colors.$color-blue-200;
+      outline: 0px none var(--blue-200);
       outline-offset: 1px;
     }
 
@@ -40,7 +40,7 @@
       outline: none;
 
       .checkmark {
-        outline: 2px solid colors.$color-blue-200;
+        outline: 2px solid var(--blue-200);
       }
     }
 
diff --git a/projects/swimlane/ngx-ui/src/lib/components/section/section.component.scss b/projects/swimlane/ngx-ui/src/lib/components/section/section.component.scss
index d2b4f3c5b..b25c21861 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/section/section.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/section/section.component.scss
@@ -1,28 +1,28 @@
 @use 'colors/colors' as colors;
 @use 'colors/shadow-variables' as shadows;
 
-$section-header-bg: colors.$color-blue-grey-775;
-$section-header-color: colors.$color-blue-grey-100;
+$section-header-bg: var(--grey-775);
+$section-header-color: var(--grey-100);
 $section-shadow: shadows.$shadow-3;
 
 @mixin focus-ring {
-  outline: 2px solid colors.$color-blue-200;
-  border-radius: 2px;
+  outline: 2px solid var(--blue-200);
+  border-radius: var(--radius-2);
   outline-offset: 1px;
 }
 
 .ngx-section {
   display: block;
   margin-bottom: 2em;
-  background: colors.$color-blue-grey-825;
+  background: var(--grey-825);
 
   .ngx-section-header {
     background: $section-header-bg;
     display: block;
     width: auto;
     height: 40px;
-    line-height: 40px;
-    padding: 0 10px;
+    line-height: var(--font-line-height-400);
+    padding: var(--spacing-0) 10px;
     color: $section-header-color;
     position: relative;
 
@@ -30,12 +30,12 @@ $section-shadow: shadows.$shadow-3;
       font-size: 8px;
       vertical-align: top;
       display: inline-block;
-      line-height: 40px;
+      line-height: var(--font-line-height-400);
       position: absolute;
       background: none;
       border: none;
       box-shadow: none;
-      padding: 0 10px;
+      padding: var(--spacing-0) 10px;
       left: 5px;
 
       &:focus-visible {
@@ -49,14 +49,14 @@ $section-shadow: shadows.$shadow-3;
 
     h1 {
       font-size: 1.1em;
-      font-weight: 600;
-      line-height: 40px;
-      padding: 0;
-      margin: 0;
+      font-weight: var(--font-weight-semibold);
+      line-height: var(--font-line-height-400);
+      padding: var(--spacing-0);
+      margin: var(--spacing-0);
     }
 
     &.ngx-section-collapsible {
-      padding: 0 20px 0 35px;
+      padding: var(--spacing-0) var(--spacing-20) var(--spacing-0) 35px;
 
       &.header-toggle {
         cursor: pointer;
@@ -69,7 +69,7 @@ $section-shadow: shadows.$shadow-3;
 
     &.toggle-right {
       &.ngx-section-collapsible {
-        padding: 0 20px 0 15px;
+        padding: var(--spacing-0) var(--spacing-20) var(--spacing-0) 15px;
       }
 
       .ngx-section-toggle {
@@ -88,42 +88,42 @@ $section-shadow: shadows.$shadow-3;
     .ngx-section-header,
     .ngx-section-content {
       background: none;
-      border: 1px solid colors.$color-blue-grey-600;
+      border: 1px solid var(--grey-600);
     }
 
     .ngx-section-header {
-      border-radius: 2px 2px 0 0;
+      border-radius: var(--radius-2) var(--radius-2) var(--radius-0) var(--radius-0);
 
       &.section-collapsed {
-        border-radius: 2px;
+        border-radius: var(--radius-2);
       }
     }
 
     .ngx-section-content {
       border-top: 0;
-      border-radius: 0 0 2px 2px;
+      border-radius: var(--radius-0) var(--radius-0) var(--radius-2) var(--radius-2);
     }
   }
 
   &.light {
-    background: colors.$color-blue-grey-775;
+    background: var(--grey-775);
 
     .ngx-section-header,
     .ngx-section-content {
-      border: 2px solid colors.$color-blue-grey-700;
+      border: 2px solid var(--grey-700);
     }
 
     .ngx-section-header {
-      background: colors.$color-blue-grey-700;
-      border-radius: 0;
+      background: var(--grey-700);
+      border-radius: var(--radius-0);
 
       &.section-collapsed {
-        border-radius: 0;
+        border-radius: var(--radius-0);
       }
     }
 
     .ngx-section-content {
-      border-radius: 0;
+      border-radius: var(--radius-0);
     }
   }
 
diff --git a/projects/swimlane/ngx-ui/src/lib/components/select/select.component.scss b/projects/swimlane/ngx-ui/src/lib/components/select/select.component.scss
index 9ec0c5c73..1d0020c8d 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/select/select.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/select/select.component.scss
@@ -4,19 +4,19 @@
 @forward '../input/input.component';
 
 // general
-$color-group-bg: color.adjust(colors.$color-blue-grey-700, $lightness: -5%);
-$color-dropdown-bg: colors.$color-blue-grey-700;
-$color-hover-bg: colors.$color-blue-grey-725;
-$color-placeholder-text: colors.$color-blue-grey-350;
-$color-caret-bg: colors.$color-blue-grey-350;
+$color-group-bg: #232837; //custom color for groupings that is 5% darker
+$color-dropdown-bg: var(--grey-700);
+$color-hover-bg: var(--grey-725);
+$color-placeholder-text: var(--grey-350);
+$color-caret-bg: var(--grey-350);
 
 // filter
-$color-filter-bg: colors.$color-blue-grey-600;
-$color-filter-text: colors.$color-blue-grey-050;
-$color-empty-text: colors.$color-blue-grey-150;
+$color-filter-bg: var(--grey-600);
+$color-filter-text: var(--grey-050);
+$color-empty-text: var(--grey-150);
 
 // chips
-$color-chip-bg: colors.$color-blue-grey-600;
+$color-chip-bg: var(--grey-600);
 $color-chip-text: #ffffff;
 
 .ngx-select {
@@ -37,7 +37,7 @@ $color-chip-text: #ffffff;
   .ngx-select-wrap {
     position: relative;
     display: block;
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-0);
     width: 100%;
 
     .ngx-select-hint {
@@ -49,7 +49,7 @@ $color-chip-text: #ffffff;
   .ngx-select-input {
     display: block;
     position: relative;
-    margin-bottom: 0;
+    margin-bottom: var(--spacing-0);
     width: 100%;
 
     .ngx-select-input-box-outer-wrap {
@@ -64,8 +64,8 @@ $color-chip-text: #ffffff;
       position: relative;
       background: transparent;
       outline: none;
-      margin-bottom: 0;
-      padding-left: 0;
+      margin-bottom: var(--spacing-0);
+      padding-left: var(--spacing-0);
       width: 100%;
       min-height: 1.75em;
       min-width: 60px;
@@ -86,14 +86,14 @@ $color-chip-text: #ffffff;
     }
 
     .ngx-select-input-list {
-      padding: 0;
+      padding: var(--spacing-0);
       color: forms.$color-input-text;
       min-height: 1.4em;
       max-width: 100%;
     }
 
     &--has-controls .ngx-select-input-list {
-      padding: 0 10px 0 0;
+      padding: var(--spacing-0) 10px var(--spacing-0) var(--spacing-0);
     }
 
     .ngx-select-label {
@@ -109,7 +109,7 @@ $color-chip-text: #ffffff;
       white-space: nowrap;
       text-overflow: ellipsis;
       max-width: 100%;
-      padding-right: 25px; // room for caret
+      padding-right: var(--spacing-24); // room for caret
     }
 
     .ngx-select-input-box__controls {
@@ -117,15 +117,15 @@ $color-chip-text: #ffffff;
       display: flex;
       flex-wrap: nowrap;
       min-height: 1.75em;
-      padding-right: 5px;
+      padding-right: var(--spacing-4);
 
       button {
-        padding: 0 2px;
+        padding: var(--spacing-0) var(--spacing-2);
         cursor: pointer;
         min-height: 1em;
 
         &:hover {
-          color: colors.$color-blue-400;
+          color: var(--blue-400);
         }
       }
 
@@ -133,11 +133,11 @@ $color-chip-text: #ffffff;
       .ngx-select-caret {
         align-items: center;
         display: flex;
-        font-size: 0.6em;
+        font-size: var(--font-size-xxs);
       }
 
       .ngx-select-clear {
-        margin-right: 5px;
+        margin-right: var(--spacing-4);
       }
 
       .ngx-select-caret {
@@ -150,10 +150,10 @@ $color-chip-text: #ffffff;
   .ngx-select-input-option {
     // Specific style for links in tagging options
     > a {
-      color: colors.$color-blue-grey-050;
+      color: var(--grey-050);
 
       > .ngx-icon {
-        color: colors.$color-blue-grey-200;
+        color: var(--grey-200);
         font-size: 0.55em;
       }
       &:hover {
@@ -171,7 +171,7 @@ $color-chip-text: #ffffff;
     .ngx-select-input-option {
       background: $color-chip-bg;
       color: $color-chip-text;
-      border-radius: 2px;
+      border-radius: var(--radius-2);
       margin: 3px;
       white-space: nowrap;
       overflow: visible;
@@ -180,13 +180,13 @@ $color-chip-text: #ffffff;
       transition: background 100ms ease-in;
       position: relative;
       top: 0;
-      padding: 0 0.5em;
-      font-size: 1em;
+      padding: var(--spacing-0) 0.5em;
+      font-size: var(--font-size-m);
       line-height: 1.4em;
       max-width: 300px;
       display: inline-flex;
       align-items: baseline;
-      gap: 5px;
+      gap: var(--spacing-4);
 
       > * {
         flex: 0 1 100%;
@@ -197,11 +197,11 @@ $color-chip-text: #ffffff;
       }
 
       .ngx-select-clear {
-        padding: 0 0 0 2px;
+        padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-2);
         cursor: pointer;
         font-size: 0.5em;
         color: $color-caret-bg;
-        line-height: 1em;
+        line-height: var(--font-line-height-100);
         height: 1em;
         z-index: 500;
         top: -1px;
@@ -209,12 +209,12 @@ $color-chip-text: #ffffff;
         flex: 0 0 auto;
 
         &:hover {
-          color: colors.$color-blue-400;
+          color: var(--blue-400);
         }
       }
 
       &.disabled {
-        padding-right: 10px;
+        padding-right: var(--spacing-10);
       }
     }
   }
@@ -235,12 +235,12 @@ $color-chip-text: #ffffff;
           -webkit-appearance: none;
           appearance: none;
           color: forms.$color-input-text;
-          line-height: 1em;
+          line-height: var(--font-line-height-100);
           display: inline-block;
-          font-size: 1em;
+          font-size: var(--font-size-m);
           vertical-align: bottom;
-          padding: 0;
-          margin: 5px;
+          padding: var(--spacing-0);
+          margin: var(--spacing-4);
 
           &::-webkit-search-decoration,
           &::-webkit-search-cancel-button,
@@ -256,7 +256,7 @@ $color-chip-text: #ffffff;
       }
 
       .ngx-select-clear-tagging-input {
-        padding: 0 0 0 2px;
+        padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-2);
         cursor: pointer;
         font-size: 0.5em;
         color: $color-caret-bg;
@@ -265,7 +265,7 @@ $color-chip-text: #ffffff;
         z-index: 500;
         top: -1px;
         &:hover {
-          color: colors.$color-blue-400;
+          color: var(--blue-400);
         }
       }
     }
@@ -318,7 +318,7 @@ $color-chip-text: #ffffff;
       opacity: 1;
       bottom: 100%;
       top: auto;
-      margin-bottom: 24px;
+      margin-bottom: var(--spacing-24);
       animation: openUpwardsAnimation 0.25s;
     }
 
@@ -353,9 +353,9 @@ $color-chip-text: #ffffff;
     z-index: 1000;
     width: 100%;
     background: $color-dropdown-bg;
-    border: 1px solid colors.$color-blue-grey-650;
+    border: 1px solid var(--grey-650);
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
-    margin-top: 10px;
+    margin-top: var(--spacing-10);
     opacity: 0;
     display: none;
     transition: visibility 0s, opacity 0.25s ease-out;
@@ -366,11 +366,11 @@ $color-chip-text: #ffffff;
       position: relative;
 
       &:not(:last-child) {
-        border-bottom: 1px solid colors.$color-blue-grey-650;
+        border-bottom: 1px solid var(--grey-650);
       }
 
       .ngx-check {
-        color: colors.$color-blue-400;
+        color: var(--blue-400);
         position: absolute;
         right: 15px;
         top: 50%;
@@ -384,13 +384,13 @@ $color-chip-text: #ffffff;
 
       .ngx-select-dropdown-option {
         padding: 7px 35px 7px 15px;
-        font-size: 15px;
+        font-size: var(--font-size-m);
         overflow-x: hidden;
         overflow-y: visible;
         text-overflow: ellipsis;
 
         &.disabled {
-          color: colors.$color-blue-grey-450;
+          color: var(--grey-450);
           opacity: 1;
         }
 
@@ -406,7 +406,7 @@ $color-chip-text: #ffffff;
         }
 
         &.selected {
-          background: colors.$color-blue-grey-750;
+          background: var(--grey-750);
 
           &:not(.disabled) {
             &.active,
@@ -422,11 +422,11 @@ $color-chip-text: #ffffff;
       .ngx-select-option-group {
         .ngx-select-option-group-name {
           padding: 7px 15px;
-          font-size: 1rem;
+          font-size: var(--font-size-m);
           display: block;
-          font-weight: 600;
-          line-height: 20px;
-          color: colors.$color-blue-grey-300;
+          font-weight: var(--font-weight-semibold);
+          line-height: var(--font-line-height-300);
+          color: var(--grey-300);
           overflow-x: hidden;
           text-overflow: ellipsis;
         }
@@ -440,7 +440,7 @@ $color-chip-text: #ffffff;
     }
 
     .ngx-select-filter {
-      padding: 10px;
+      padding: var(--spacing-10);
       background: $color-filter-bg;
       position: relative;
 
@@ -448,12 +448,12 @@ $color-chip-text: #ffffff;
       .ngx-x {
         position: absolute;
         top: 50%;
-        color: colors.$color-blue-grey-350;
+        color: var(--grey-350);
       }
 
       .ngx-search {
         left: 10px;
-        font-size: 0.75rem;
+        font-size: var(--font-size-xs);
         margin-top: -6px;
       }
 
@@ -464,7 +464,7 @@ $color-chip-text: #ffffff;
         cursor: pointer;
 
         &:hover {
-          color: colors.$color-blue-grey-300;
+          color: var(--grey-300);
         }
       }
 
@@ -474,9 +474,9 @@ $color-chip-text: #ffffff;
         border: none;
         outline: none;
         display: block;
-        font-size: 15px;
+        font-size: var(--font-size-m);
         width: 100%;
-        padding-left: 19px;
+        padding-left: var(--spacing-20);
 
         &::-webkit-search-decoration,
         &::-webkit-search-cancel-button,
@@ -486,7 +486,7 @@ $color-chip-text: #ffffff;
         }
 
         &::placeholder {
-          color: colors.$color-blue-grey-350;
+          color: var(--grey-350);
         }
       }
     }
@@ -494,7 +494,7 @@ $color-chip-text: #ffffff;
     .ngx-select-empty-placeholder {
       color: $color-empty-text;
       padding: 7px 15px;
-      font-size: 15px;
+      font-size: var(--font-size-m);
       font-style: italic;
 
       .ngx-select-empty-placeholder-add {
@@ -517,23 +517,23 @@ $color-chip-text: #ffffff;
   &.ng-invalid.ng-dirty,
   &.invalid {
     .ngx-select-label {
-      font-weight: 600;
-      color: colors.$color-red;
+      font-weight: var(--font-weight-semibold);
+      color: var(--red-500);
     }
 
     .ngx-select-caret,
     .ngx-select-hint {
-      color: colors.$color-red;
+      color: var(--red-500);
     }
 
     .ngx-select-input-underline {
-      background-color: colors.$color-red;
+      background-color: var(--red-500);
     }
   }
 
   &.fill {
     &.single-selection .ngx-select-input-list {
-      padding-left: 10px;
+      padding-left: var(--spacing-10);
     }
 
     .ngx-select-flex-wrap {
@@ -543,12 +543,12 @@ $color-chip-text: #ffffff;
 
       .ngx-select-input-box {
         min-height: 1.75em;
-        color: colors.$color-blue-grey-050;
+        color: var(--grey-050);
       }
     }
 
     .ngx-select-placeholder {
-      padding-left: 10px;
+      padding-left: var(--spacing-10);
     }
   }
 
@@ -560,7 +560,7 @@ $color-chip-text: #ffffff;
       color: forms.$input-label-color-active;
 
       &:hover {
-        color: colors.$color-blue-400;
+        color: var(--blue-400);
       }
     }
   }
@@ -596,7 +596,7 @@ $color-chip-text: #ffffff;
     }
 
     .ngx-select-input .ngx-select-label {
-      padding-right: 25px; // space for the caret
+      padding-right: var(--spacing-24); // space for the caret
     }
   }
 
@@ -607,7 +607,7 @@ $color-chip-text: #ffffff;
     .ngx-select-input .ngx-select-label {
       font-size: forms.$input-label-font-size-active;
       top: -1.2em;
-      padding-right: 0;
+      padding-right: var(--spacing-0);
     }
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/slider/slider.component.scss b/projects/swimlane/ngx-ui/src/lib/components/slider/slider.component.scss
index 752da9e15..5fefcff8c 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/slider/slider.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/slider/slider.component.scss
@@ -1,10 +1,10 @@
 @use 'colors/colors' as colors;
 
-$slider-bg: colors.$color-blue-400;
-$slider-bg-fill: colors.$color-blue-400;
+$slider-bg: var(--blue-400);
+$slider-bg-fill: var(--blue-400);
 
-$slider-thumb: colors.$color-blue-400;
-$slider-focus-bg: colors.$color-blue-400;
+$slider-thumb: var(--blue-400);
+$slider-focus-bg: var(--blue-400);
 
 $slider-track-width: 2px;
 $slider-fill-width: 4px;
@@ -136,7 +136,7 @@ $slider-thumb-width: 1em;
     background-repeat: no-repeat;
     background-image: linear-gradient($slider-bg-fill, $slider-bg-fill);
     position: absolute;
-    border-radius: 0;
+    border-radius: var(--radius-0);
     z-index: 99;
     pointer-events: none;
     height: $slider-fill-width;
@@ -193,7 +193,7 @@ $slider-thumb-width: 1em;
         background-color: transparent;
         border-color: $slider-thumb;
         appearance: initial;
-        border-radius: 0;
+        border-radius: var(--radius-0);
         height: 1px;
         width: 1px;
         border: 0.5em solid transparent;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/split/split-handle.component.scss b/projects/swimlane/ngx-ui/src/lib/components/split/split-handle.component.scss
index cb6be9ca4..a94cc7177 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/split/split-handle.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/split/split-handle.component.scss
@@ -3,10 +3,10 @@
 
   .ngx-split-button {
     line-height: 0;
-    font-size: 32px;
+    font-size: var(--font-size-4xl);
     position: absolute;
     display: block;
-    padding: 0;
+    padding: var(--spacing-0);
   }
 
   &.direction-row {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/stepper/step.component.scss b/projects/swimlane/ngx-ui/src/lib/components/stepper/step.component.scss
index e3c49a6df..149d4586f 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/stepper/step.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/stepper/step.component.scss
@@ -16,25 +16,25 @@
 
   &.ngx-step--active {
     .ngx-step--title {
-      color: colors.$color-blue-500;
+      color: var(--blue-500);
     }
 
     .ngx-step--step {
       &:after {
         background-image: linear-gradient(
           to right,
-          colors.$color-blue-500 0%,
-          colors.$color-blue-grey-600 75%
+          var(--blue-500) 0%,
+          var(--grey-600) 75%
         ) !important;
       }
 
       .ngx-step--circle {
-        border: 1.75px solid colors.$color-blue-500;
-        color: colors.$color-blue-500;
+        border: 1.75px solid var(--blue-500);
+        color: var(--blue-500);
         box-shadow: 0px 0px 9.59842px rgba(20, 131, 255, 0.8);
 
         .marker-path {
-          fill: colors.$color-blue-500;
+          fill: var(--blue-500);
         }
       }
     }
@@ -43,8 +43,8 @@
   &.ngx-step--complete {
     .ngx-step--circle {
       &:hover {
-        border: 1.75px solid colors.$color-blue-500;
-        color: colors.$color-blue-500;
+        border: 1.75px solid var(--blue-500);
+        color: var(--blue-500);
         box-shadow: 0px 0px 9.59842px rgba(20, 131, 255, 0.8);
 
         .ngx-step--indicator {
@@ -56,28 +56,28 @@
         }
 
         .marker-path {
-          fill: colors.$color-blue-500;
+          fill: var(--blue-500);
         }
       }
     }
 
     &:not(.ngx-step--complete-last) {
       .ngx-step--title {
-        color: colors.$color-green-500;
+        color: var(--green-500);
       }
 
       .ngx-step--step {
         &:after {
-          background-color: colors.$color-green-500 !important;
+          background-color: var(--green-500) !important;
         }
 
         .ngx-step--circle {
-          border: 1.75px solid colors.$color-green-500;
-          color: colors.$color-green-500;
+          border: 1.75px solid var(--green-500);
+          color: var(--green-500);
           box-shadow: 0px 0px 9.59842px rgba(122, 185, 255, 0.7);
 
           .marker-path {
-            fill: colors.$color-green-500;
+            fill: var(--green-500);
           }
 
           .ngx-step--indicator {
@@ -93,21 +93,21 @@
 
     &.ngx-step--complete-last {
       .ngx-step--title {
-        color: colors.$color-green-500;
+        color: var(--green-500);
       }
 
       .ngx-step--step {
         &:after {
-          background-image: linear-gradient(to right, #1edeb6 0%, colors.$color-blue-500 75%) !important;
+          background-image: linear-gradient(to right, #1edeb6 0%, var(--blue-500) 75%) !important;
         }
 
         .ngx-step--circle {
-          border: 1.75px solid colors.$color-green-500;
-          color: colors.$color-green-500;
+          border: 1.75px solid var(--green-500);
+          color: var(--green-500);
           box-shadow: 0px 0px 9.59842px rgba(122, 185, 255, 0.7);
 
           .marker-path {
-            fill: colors.$color-green-500;
+            fill: var(--green-500);
           }
 
           .ngx-step--indicator {
@@ -123,14 +123,14 @@
   }
 
   .ngx-step--title {
-    padding: 0 5px;
+    padding: var(--spacing-0) var(--spacing-4);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    font-weight: 600;
-    font-size: 16px;
+    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-m);
     line-height: 22px;
-    color: colors.$color-blue-grey-600;
+    color: var(--grey-600);
     transition: color stepper.$transition-speed ease-in-out;
   }
 
@@ -142,7 +142,7 @@
     &:after {
       flex: 1 1 auto;
       height: 1.4px;
-      background-color: colors.$color-blue-grey-600;
+      background-color: var(--grey-600);
       transition: background-color stepper.$transition-speed ease-in-out,
         background-image stepper.$transition-speed ease-in-out;
       content: '';
@@ -155,12 +155,12 @@
       position: relative;
       width: stepper.$stepper-size;
       height: stepper.$stepper-size;
-      background: linear-gradient(180deg, colors.$color-blue-grey-750 0%, colors.$color-blue-grey-850 100%);
+      background: linear-gradient(180deg, var(--grey-750) 0%, var(--grey-850) 100%);
       border-radius: 50%;
-      border: 1.75px solid colors.$color-blue-grey-600;
-      color: colors.$color-blue-grey-600;
+      border: 1.75px solid var(--grey-600);
+      color: var(--grey-600);
       font-size: stepper.$stepper-size * 0.5;
-      font-weight: bold;
+      font-weight: var(--font-weight-bold);
       transition: border-color stepper.$transition-speed ease-in-out, color stepper.$transition-speed ease-in-out;
       user-select: none;
       cursor: pointer;
@@ -174,7 +174,7 @@
       }
 
       .center {
-        margin: 0;
+        margin: var(--spacing-0);
         position: absolute;
         top: 50%;
         left: 50%;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/stepper/stepper.component.scss b/projects/swimlane/ngx-ui/src/lib/components/stepper/stepper.component.scss
index 34b32ead7..73ef4aaea 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/stepper/stepper.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/stepper/stepper.component.scss
@@ -20,7 +20,7 @@
       display: inline-block;
       transform: translateX(calc(-50% + #{stepper.$stepper-size} / 2));
       text-align: center;
-      font-size: 12px;
+      font-size: var(--font-size-xs);
     }
   }
 
@@ -103,7 +103,7 @@
         &.ngx-step--complete-last {
           .ngx-step--step {
             &:after {
-              background-image: linear-gradient(to bottom, #1edeb6 0%, colors.$color-blue-500 75%) !important;
+              background-image: linear-gradient(to bottom, #1edeb6 0%, var(--blue-500) 75%) !important;
             }
           }
         }
@@ -113,8 +113,8 @@
             &:after {
               background-image: linear-gradient(
                 to bottom,
-                colors.$color-blue-500 0%,
-                colors.$color-blue-grey-600 75%
+                var(--blue-500) 0%,
+                var(--grey-600) 75%
               ) !important;
             }
           }
@@ -124,7 +124,7 @@
           position: unset;
           display: block;
           transform: unset;
-          margin-bottom: 0;
+          margin-bottom: var(--spacing-0);
           max-width: 100px;
           width: 100px;
           text-align: unset;
@@ -197,8 +197,8 @@
               animation: 1.5s linear infinite spinner;
               animation-play-state: inherit;
               border: solid 1px transparent;
-              border-bottom-color: colors.$color-blue-500;
-              border-right-color: colors.$color-blue-500;
+              border-bottom-color: var(--blue-500);
+              border-right-color: var(--blue-500);
               border-radius: 50%;
               content: '';
               height: 100%;
@@ -224,7 +224,7 @@
 
     .ngx-stepper--bar {
       position: absolute;
-      background-color: colors.$color-blue-500;
+      background-color: var(--blue-500);
     }
   }
 
@@ -289,20 +289,20 @@
         &.ngx-step--complete {
           &:not(.ngx-step--complete-last) {
             .ngx-step--title {
-              color: colors.$color-blue-500;
+              color: var(--blue-500);
             }
 
             .ngx-step--step {
               &:after {
-                background-color: colors.$color-blue-500 !important;
+                background-color: var(--blue-500) !important;
               }
 
               .ngx-step--circle {
-                border-color: colors.$color-blue-500;
-                color: colors.$color-blue-500;
+                border-color: var(--blue-500);
+                color: var(--blue-500);
 
                 .marker-path {
-                  fill: colors.$color-blue-500;
+                  fill: var(--blue-500);
                 }
               }
             }
@@ -310,24 +310,24 @@
 
           &.ngx-step--complete-last {
             .ngx-step--title {
-              color: colors.$color-blue-500;
+              color: var(--blue-500);
             }
 
             .ngx-step--step {
               &:after {
                 background-image: linear-gradient(
                   to right,
-                  colors.$color-blue-500 0%,
-                  colors.$color-blue-500 75%
+                  var(--blue-500) 0%,
+                  var(--blue-500) 75%
                 ) !important;
               }
 
               .ngx-step--circle {
-                border-color: colors.$color-blue-500;
-                color: colors.$color-blue-500;
+                border-color: var(--blue-500);
+                color: var(--blue-500);
 
                 .marker-path {
-                  fill: colors.$color-blue-500;
+                  fill: var(--blue-500);
                 }
               }
             }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/tabs/tabs.component.scss b/projects/swimlane/ngx-ui/src/lib/components/tabs/tabs.component.scss
index 020b408ca..b43208d49 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/tabs/tabs.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/tabs/tabs.component.scss
@@ -1,11 +1,11 @@
 @use 'colors/colors' as colors;
 
-$tabs-border-color: colors.$color-blue-grey-700;
-$tabs-active-fill: colors.$color-blue;
-$tabs-text-color: colors.$color-blue-grey-250;
-$tabs-active-text-color: colors.$color-white;
+$tabs-border-color: var(--grey-700);
+$tabs-active-fill: var(--blue-500);
+$tabs-text-color: var(--grey-250);
+$tabs-active-text-color: var(--white);
 
-$tabs-fill--light: colors.$color-blue-grey-700;
+$tabs-fill--light: var(--grey-700);
 $tabs-shadow--light: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
 $tabs-content-color--light: #1b1e27;
 
@@ -28,14 +28,14 @@ $tabs-button-height--vertical: 53px;
       box-shadow: none;
       font-size: 1.1rem;
       box-sizing: border-box;
-      margin: 0;
+      margin: var(--spacing-0);
       padding: 0.35em 0.75em;
       position: relative;
       text-align: center;
       user-select: none;
       font: inherit;
-      font-size: 1em;
-      font-weight: bold;
+      font-size: var(--font-size-m);
+      font-weight: var(--font-weight-bold);
       bottom: -1px;
 
       &::after {
@@ -75,15 +75,15 @@ $tabs-button-height--vertical: 53px;
       }
 
       &:focus-visible {
-        outline: 2px solid colors.$color-blue-200;
-        border-radius: 2px;
+        outline: 2px solid var(--blue-200);
+        border-radius: var(--radius-2);
         outline-offset: 1px;
       }
     }
   }
 
   .ngx-tab-content {
-    padding: 10px;
+    padding: var(--spacing-10);
   }
 
   &.light {
@@ -93,14 +93,14 @@ $tabs-button-height--vertical: 53px;
     .ngx-tabs-list {
       background-color: $tabs-fill--light;
       border-bottom: 2px solid $tabs-fill--light;
-      font-size: 13px;
+      font-size: var(--font-size-xs);
       line-height: 15px;
-      font-weight: 600;
+      font-weight: var(--font-weight-semibold);
       margin-left: -2px; // align tabs to the left border
 
       .ngx-tab {
         height: $tabs-button-height--light;
-        padding: 8px 1.25em;
+        padding: var(--spacing-8) 1.25em;
       }
     }
 
@@ -122,12 +122,12 @@ $tabs-button-height--vertical: 53px;
         height: $tabs-button-height--vertical;
         width: 100%;
         text-align: left;
-        font-size: 13px;
+        font-size: var(--font-size-xs);
         line-height: 45px;
         border: none !important;
-        border-bottom: 1px solid colors.$color-blue-grey-700 !important;
-        padding-left: 19px;
-        font-weight: 600;
+        border-bottom: 1px solid var(--grey-700) !important;
+        padding-left: var(--spacing-20);
+        font-weight: var(--font-weight-semibold);
 
         &::after {
           display: none;
@@ -142,7 +142,7 @@ $tabs-button-height--vertical: 53px;
 
   &.tabs-vertical.light {
     .ngx-tabs-list {
-      background-color: colors.$color-blue-grey-750;
+      background-color: var(--grey-750);
       border-right: 2px solid $tabs-fill--light;
       border-left: 2px solid $tabs-fill--light;
 
@@ -157,7 +157,7 @@ $tabs-button-height--vertical: 53px;
     }
 
     .ngx-tab-content {
-      background-color: colors.$color-blue-grey-750;
+      background-color: var(--grey-750);
     }
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/time-display/time-display.component.scss b/projects/swimlane/ngx-ui/src/lib/components/time-display/time-display.component.scss
index 7836511bf..c238fd817 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/time-display/time-display.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/time-display/time-display.component.scss
@@ -12,7 +12,7 @@ ngx-time {
   }
 
   &.ngx-time--date-invalid .ngx-time__container {
-    color: colors.$color-error;
+    color: var(--color-error);
   }
 
   &.ngx-time--has-popup .ngx-time__container {
@@ -28,18 +28,18 @@ ngx-time {
 
     &:active {
       transform: translate(1px, 1px);
-      color: colors.$color-blue-grey-350;
+      color: var(--grey-350);
     }
   }
 }
 
 .ngx-tooltip-content.date-tip-tooltip {
-  padding: 5px;
+  padding: var(--spacing-4);
 
   .date-zone-display {
-    font-weight: bold;
-    font-size: 15px;
-    color: colors.$color-blue-grey-700;
+    font-weight: var(--font-weight-bold);
+    font-size: var(--font-size-m);
+    color: var(--grey-700);
 
     > span {
       display: inline-block;
@@ -47,20 +47,20 @@ ngx-time {
 
     button {
       float: right;
-      font-weight: bold;
+      font-weight: var(--font-weight-bold);
       line-height: 16px;
-      font-size: 11px;
+      font-size: var(--font-size-xs);
       text-transform: uppercase;
-      color: colors.$color-blue-grey-700;
+      color: var(--grey-700);
       background: #dee1ea;
-      margin-left: 5px;
-      padding: 0 6px;
+      margin-left: var(--spacing-4);
+      padding: var(--spacing-0) 6px;
       vertical-align: text-top;
       text-align: left;
       min-width: 70px;
 
       ngx-icon {
-        padding-right: 5px;
+        padding-right: var(--spacing-4);
       }
 
       &:hover,
diff --git a/projects/swimlane/ngx-ui/src/lib/components/tip/tip.component.scss b/projects/swimlane/ngx-ui/src/lib/components/tip/tip.component.scss
index 5f1e9992a..4e26104e1 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/tip/tip.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/tip/tip.component.scss
@@ -1,16 +1,16 @@
 @use 'colors/colors' as colors;
 
-$color-default: colors.$color-blue-grey-350; // default icon and border left
-$color-border: colors.$color-blue-grey-650;
+$color-default: var(--grey-350); // default icon and border left
+$color-border: var(--grey-650);
 
 .ngx-tip {
   .tip-container {
     border: 2px solid $color-border;
     box-sizing: border-box;
-    border-radius: 2px;
+    border-radius: var(--radius-2);
     display: flex;
     justify-content: space-between;
-    padding: 10px;
+    padding: var(--spacing-10);
     position: relative;
 
     // rounded left border
@@ -20,8 +20,8 @@ $color-border: colors.$color-blue-grey-650;
       top: -2px;
       bottom: -2px;
       background: $color-default;
-      border-top-left-radius: 2px;
-      border-bottom-left-radius: 2px;
+      border-top-left-radius: var(--radius-2);
+      border-bottom-left-radius: var(--radius-2);
       width: 2px;
       left: -2px;
     }
@@ -32,15 +32,15 @@ $color-border: colors.$color-blue-grey-650;
 
       &--icon {
         color: $color-default;
-        font-size: 14px;
+        font-size: var(--font-size-s);
         padding-top: 3px;
       }
 
       &--template {
-        font-size: 14px;
+        font-size: var(--font-size-s);
         line-height: 18px;
-        margin: 0 10px;
-        color: colors.$color-blue-grey-250;
+        margin: var(--spacing-0) 10px;
+        color: var(--grey-250);
       }
     }
 
@@ -48,8 +48,8 @@ $color-border: colors.$color-blue-grey-650;
       margin-top: -2px;
 
       .ngx-icon {
-        color: colors.$color-blue-grey-400;
-        font-size: 10px;
+        color: var(--grey-400);
+        font-size: var(--font-size-xxs);
       }
 
       cursor: pointer;
@@ -59,13 +59,13 @@ $color-border: colors.$color-blue-grey-650;
   &.ngx-tip--success {
     .tip-container {
       &::before {
-        background: colors.$color-green-500;
+        background: var(--green-500);
       }
 
       .tip-content {
         &--icon {
           .ngx-icon {
-            color: colors.$color-green-500;
+            color: var(--green-500);
           }
         }
       }
@@ -75,12 +75,12 @@ $color-border: colors.$color-blue-grey-650;
   &.ngx-tip--error {
     .tip-container {
       &::before {
-        background: colors.$color-error;
+        background: var(--color-error);
       }
 
       .tip-content {
         &--icon .ngx-icon {
-          color: colors.$color-error;
+          color: var(--color-error);
         }
       }
     }
@@ -89,12 +89,12 @@ $color-border: colors.$color-blue-grey-650;
   &.ngx-tip--warning {
     .tip-container {
       &::before {
-        background: colors.$color-orange-400;
+        background: var(--orange-400);
       }
 
       .tip-content {
         &--icon .ngx-icon {
-          color: colors.$color-orange-400;
+          color: var(--orange-400);
         }
       }
     }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.scss b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.scss
index b51935f5d..c9d9ecc2c 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/toggle/toggle.component.scss
@@ -24,11 +24,11 @@
     display: none;
 
     &:checked ~ .ngx-toggle-label {
-      background: colors.$color-blue-700;
+      background: var(--blue-700);
 
       &:after {
         left: 16px;
-        background: colors.$color-blue;
+        background: var(--blue-500);
       }
     }
   }
@@ -38,7 +38,7 @@
     display: block;
     height: 14px;
     width: 36px;
-    background: colors.$color-blue-grey-900;
+    background: var(--grey-900);
     border-radius: 100px;
     cursor: pointer;
     transition: all 0.3s ease;
@@ -55,8 +55,8 @@
       height: 20px;
       width: 20px;
       border-radius: 100%;
-      background: colors.$color-blue-grey-400;
-      box-shadow: 0px 3px 3px colors.$color-blue-grey-900;
+      background: var(--grey-400);
+      box-shadow: 0px 3px 3px var(--grey-900);
       content: '';
       transition: all 0.3s ease;
     }
@@ -66,15 +66,15 @@
 
       &.ngx-check {
         opacity: 0.5;
-        color: colors.$color-white;
+        color: var(--white);
         padding: 2.5px 3.5px;
-        font-size: 9px;
+        font-size: var(--font-size-xxs);
       }
 
       &.ngx-x {
         flex-direction: row-reverse;
         opacity: 0.7;
-        color: colors.$color-blue-grey-400;
+        color: var(--grey-400);
         padding: 3.5px 4.5px;
         font-size: 7px;
         font-weight: 900;
@@ -84,7 +84,7 @@
 
   .ngx-toggle-text {
     cursor: pointer;
-    padding-left: 5px;
-    color: colors.$color-blue-grey-100;
+    padding-left: var(--spacing-4);
+    color: var(--grey-100);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/toolbar/toolbar.component.scss b/projects/swimlane/ngx-ui/src/lib/components/toolbar/toolbar.component.scss
index 5be907671..856d52656 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/toolbar/toolbar.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/toolbar/toolbar.component.scss
@@ -2,8 +2,8 @@
 @use 'colors/shadow-variables' as shadows;
 
 $toolbar-height: 50px;
-$toolbar-bg: colors.$color-blue-grey-800;
-$toolbar-color: colors.$color-blue-grey-250;
+$toolbar-bg: var(--grey-800);
+$toolbar-color: var(--grey-250);
 
 .ngx-toolbar {
   display: block;
@@ -30,13 +30,13 @@ $toolbar-color: colors.$color-blue-grey-250;
   }
 
   // grid is overriding this
-  padding: 0 20px !important;
+  padding: var(--spacing-0) var(--spacing-20) !important;
   .ngx-toolbar-title-col {
     overflow: hidden;
   }
 
   .ngx-toolbar-title {
-    margin: 0;
+    margin: var(--spacing-0);
     font-weight: 500;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -44,8 +44,8 @@ $toolbar-color: colors.$color-blue-grey-250;
     white-space: nowrap;
 
     small {
-      color: colors.$color-blue-grey-500;
-      font-size: 0.9rem;
+      color: var(--grey-500);
+      font-size: var(--font-size-m);
       line-height: 50px;
       vertical-align: top;
     }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/tooltip/tooltip.component.scss b/projects/swimlane/ngx-ui/src/lib/components/tooltip/tooltip.component.scss
index fd449e38f..9c0864732 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/tooltip/tooltip.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/tooltip/tooltip.component.scss
@@ -1,14 +1,14 @@
 @use 'colors/colors' as colors;
 @use 'colors/shadow-variables' as shadows;
 
-$tooltip-bg: colors.$color-blue-grey-200;
-$tooltip-color: colors.$color-blue-grey-700;
+$tooltip-bg: var(--grey-200);
+$tooltip-color: var(--grey-700);
 $tooltip-caret-bg: $tooltip-bg;
 $tooltip-border: transparent;
 $tooltip-spacing: 10px;
 
-$popover-bg: colors.$color-blue-grey-200;
-$popover-color: colors.$color-blue-grey-700;
+$popover-bg: var(--grey-200);
+$popover-color: var(--grey-700);
 $popover-caret-bg: $popover-bg;
 $popover-border: transparent;
 $popover-spacing: 10px;
@@ -17,7 +17,7 @@ $popover-spacing: 10px;
   position: fixed;
   z-index: 5000;
   display: block;
-  font-weight: normal;
+  font-weight: var(--font-weight-regular);
   opacity: 0;
   max-width: 600px;
   overflow-wrap: anywhere;
@@ -30,8 +30,8 @@ $popover-spacing: 10px;
     background: $popover-bg;
     color: $popover-color;
     box-shadow: shadows.$shadow-3;
-    font-size: 13px;
-    padding: 10px;
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-10);
 
     .tooltip-caret {
       position: absolute;
@@ -68,8 +68,8 @@ $popover-spacing: 10px;
   &.type-tooltip {
     color: $tooltip-color;
     background: $tooltip-bg;
-    font-size: 12px;
-    padding: 4px;
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-4);
     text-align: center;
 
     .tooltip-caret {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/tree/tree.component.scss b/projects/swimlane/ngx-ui/src/lib/components/tree/tree.component.scss
index 2381546a5..b7021a16b 100644
--- a/projects/swimlane/ngx-ui/src/lib/components/tree/tree.component.scss
+++ b/projects/swimlane/ngx-ui/src/lib/components/tree/tree.component.scss
@@ -13,12 +13,12 @@ $dashes: 5.3px;
 
   .ngx-tree-node {
     position: relative;
-    padding-left: 20px;
+    padding-left: var(--spacing-20);
     line-height: 25px;
     min-height: 25px;
 
     .ngx-expander {
-      font-size: 0.75rem;
+      font-size: var(--font-size-xs);
       color: $color-tree-text;
       position: absolute;
       left: 0;
@@ -32,18 +32,18 @@ $dashes: 5.3px;
 
       &.icon-tree-collapse::before,
       &.icon-tree-expand::before {
-        background: colors.$color-blue-grey-800;
+        background: var(--grey-800);
         border-radius: 50%;
       }
     }
 
     .ngx-node-label {
       color: $color-tree-text;
-      font-size: 0.9rem;
+      font-size: var(--font-size-m);
     }
 
     .ngx-tree {
-      margin-left: 5px;
+      margin-left: var(--spacing-4);
     }
 
     &.selectable {
@@ -73,7 +73,7 @@ $dashes: 5.3px;
       content: ' ';
       width: 5px;
       height: 5px;
-      border-radius: 5px;
+      border-radius: var(--radius-6);
       background: json-editor.$color-tree-line;
       position: absolute;
       bottom: -3px;
@@ -84,7 +84,7 @@ $dashes: 5.3px;
       content: ' ';
       width: 5px;
       height: 5px;
-      border-radius: 5px;
+      border-radius: var(--radius-6);
       background: none;
       border: 1px solid json-editor.$color-tree-line;
       position: absolute;
@@ -131,7 +131,7 @@ $dashes: 5.3px;
     height: 5px;
     left: 3px;
     top: 8px;
-    border-radius: 5px;
+    border-radius: var(--radius-6);
   }
 
   .empty::before {
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/colors/effects.scss b/projects/swimlane/ngx-ui/src/lib/styles/colors/effects.scss
index 3aa0529a6..e51464948 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/colors/effects.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/colors/effects.scss
@@ -2,7 +2,7 @@
 @use 'colors' as colors;
 
 @mixin glow($color) {
-  border: 2px solid color.adjust($color, $lightness: -5%);
+  border: 2px solid color-mix(in srgb, var(--blue-500), black 5%);
   box-shadow: 0px 0px 10px 0px $color;
 }
 
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/components/buttons.scss b/projects/swimlane/ngx-ui/src/lib/styles/components/buttons.scss
index 0671fed50..79aeff76c 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/components/buttons.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/components/buttons.scss
@@ -4,9 +4,9 @@
  * Button styling
  */
 
-$button-text-color: colors.$color-white;
-$button-fill-color: colors.$color-blue-grey-600;
-$button-fill-active-color: colors.$color-blue-grey-700;
+$button-text-color: var(--white);
+$button-fill-color: var(--grey-600);
+$button-fill-active-color: var(--grey-700);
 
 button {
   box-sizing: border-box;
@@ -43,24 +43,24 @@ button {
   text-decoration: none;
   user-select: none;
   font: inherit;
-  font-size: 0.9em;
-  font-weight: bold;
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-bold);
   outline: none;
-  line-height: 1em;
+  line-height: var(--font-line-height-100);
   outline-offset: 1px;
 
   background: $button-fill-color;
   border: solid 1px transparent;
-  border-radius: 2px;
+  border-radius: var(--radius-2);
   box-shadow: shadows.$shadow-1;
   transition: background-color 200ms, box-shadow 200ms;
 
   .ngx-icon,
   .icon {
-    font-weight: normal;
+    font-weight: var(--font-weight-regular);
     vertical-align: middle;
-    line-height: 1em;
-    font-size: 0.9em;
+    line-height: var(--font-line-height-100);
+    font-size: var(--font-size-m);
 
     &:before {
       font-weight: inherit;
@@ -78,7 +78,7 @@ button {
 
   &::-moz-focus-inner {
     border: 0;
-    padding: 0;
+    padding: var(--spacing-0);
   }
 
   &:focus,
@@ -101,23 +101,23 @@ button {
     outline-color: $button-fill-active-color;
 
     &.btn-primary {
-      background-color: colors.$color-blue;
+      background-color: var(--blue-500);
     }
 
     &.btn-warning {
-      background-color: colors.$color-orange;
+      background-color: var(--orange-500);
     }
 
     &.btn-danger {
-      background-color: colors.$color-red;
+      background-color: var(--red-500);
     }
     &.btn-link {
       background-color: transparent;
     }
 
     &.btn-bordered {
-      border-color: colors.$color-blue-200;
-      color: colors.$color-blue-200;
+      border-color: var(--blue-200);
+      color: var(--blue-200);
     }
   }
 
@@ -129,7 +129,7 @@ button {
 
   // sizes
   &.small {
-    font-size: 0.6em;
+    font-size: var(--font-size-xxs);
   }
 
   &.large {
@@ -137,27 +137,27 @@ button {
   }
 
   &.btn-primary {
-    background-color: colors.$color-blue-400;
-    outline-color: colors.$color-blue;
+    background-color: var(--blue-400);
+    outline-color: var(--blue-500);
 
     &.btn-primary-gradient {
-      background-color: colors.$color-blue-600;
-      background: linear-gradient(350.57deg, colors.$color-blue-600 14.42%, colors.$color-light-blue-600 100%);
+      background-color: var(--blue-600);
+      background: linear-gradient(350.57deg, var(--blue-600) 14.42%, var(--lightblue-600) 100%);
       box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
       text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-      border: 1px solid colors.$color-blue-600;
+      border: 1px solid var(--blue-600);
     }
   }
 
   &.btn-warning {
-    background-color: colors.$color-orange-400;
-    color: colors.$color-blue-grey-900;
-    outline-color: colors.$color-orange;
+    background-color: var(--orange-400);
+    color: var(--grey-900);
+    outline-color: var(--orange-500);
   }
 
   &.btn-danger {
-    background-color: colors.$color-red-400;
-    outline-color: colors.$color-red-400;
+    background-color: var(--red-400);
+    outline-color: var(--red-400);
   }
 
   &.btn-link {
@@ -167,11 +167,11 @@ button {
 
   &.btn-bordered,
   &.btn-primary.btn-bordered {
-    border: 1px solid colors.$color-blue-400;
-    color: colors.$color-blue-400;
+    border: 1px solid var(--blue-400);
+    color: var(--blue-400);
     background-color: transparent;
     box-shadow: none;
-    outline-color: colors.$color-blue-400;
+    outline-color: var(--blue-400);
 
     &.disabled-button {
       opacity: 0.5;
@@ -189,8 +189,8 @@ button {
     box-shadow: none;
 
     &:hover {
-      border-color: colors.$color-blue !important;
-      color: colors.$color-blue !important;
+      border-color: var(--blue-500) !important;
+      color: var(--blue-500) !important;
     }
 
     &.disabled-button {
@@ -204,7 +204,7 @@ button {
 
   &.btn-file {
     cursor: pointer;
-    padding: 0;
+    padding: var(--spacing-0);
 
     label {
       display: block;
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/components/datatable.scss b/projects/swimlane/ngx-ui/src/lib/styles/components/datatable.scss
index 83f70563e..796d82215 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/components/datatable.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/components/datatable.scss
@@ -1,17 +1,17 @@
 @use 'sass:color';
 @use 'colors/colors' as colors;
 
-$datatable-bg: colors.$color-blue-grey-800;
-$datatable-border: colors.$color-blue-grey-700;
-$datatable-color: colors.$color-grey-100;
-$datatable-row-hover: color.adjust($datatable-bg, $lightness: -2%);
+$datatable-bg: var(--grey-800);
+$datatable-border: var(--grey-700);
+$datatable-color: var(--grey-100);
+$datatable-row-hover: color-mix(in srgb, var(--grey-800), black 2%);
 
 .ngx-datatable {
   box-shadow: none;
   background: $datatable-bg;
   border: 1px solid $datatable-border;
   color: $datatable-color;
-  font-size: 13px;
+  font-size: var(--font-size-xs);
 
   .datatable-header {
     background: #181b24;
@@ -20,7 +20,7 @@ $datatable-row-hover: color.adjust($datatable-bg, $lightness: -2%);
     .datatable-header-cell {
       text-align: left;
       padding: 0.5rem 1.2rem;
-      font-weight: bold;
+      font-weight: var(--font-weight-bold);
 
       .datatable-header-cell-label {
         line-height: 24px;
@@ -52,49 +52,49 @@ $datatable-row-hover: color.adjust($datatable-bg, $lightness: -2%);
       }
 
       &.active {
-        background-color: colors.$color-blue;
-        color: colors.$color-grey-100;
+        background-color: var(--blue-500);
+        color: var(--grey-100);
       }
     }
   }
 
   .datatable-footer {
-    background: colors.$color-blue-grey-700;
-    color: colors.$color-grey-300;
+    background: var(--grey-700);
+    color: var(--grey-300);
     margin-top: -1px;
 
     .page-count {
       line-height: 50px;
       height: 50px;
-      padding: 0 1.2rem;
+      padding: var(--spacing-0) 1.2rem;
     }
 
     .datatable-pager {
-      margin: 0 10px;
+      margin: var(--spacing-0) 10px;
       vertical-align: top;
 
       ul {
         li {
-          margin: 10px 0;
+          margin: var(--spacing-10) var(--spacing-0);
 
           a {
             height: 22px;
             min-width: 24px;
             line-height: 22px;
-            padding: 0;
-            border-radius: 3px;
-            margin: 0 3px;
+            padding: var(--spacing-0);
+            border-radius: var(--radius-4);
+            margin: var(--spacing-0) 3px;
             text-align: center;
             text-decoration: none;
             vertical-align: bottom;
-            color: colors.$color-grey-300;
+            color: var(--grey-300);
           }
 
           &:not(.disabled) {
             &.active a,
             &:hover a {
-              background-color: colors.$color-blue-grey-600;
-              font-weight: bold;
+              background-color: var(--grey-600);
+              font-weight: var(--font-weight-bold);
             }
           }
         }
@@ -104,9 +104,9 @@ $datatable-row-hover: color.adjust($datatable-bg, $lightness: -2%);
       .icon-skip,
       .icon-right,
       .icon-prev {
-        font-size: 18px;
+        font-size: var(--font-size-l);
         line-height: 27px;
-        padding: 0 3px;
+        padding: var(--spacing-0) 3px;
       }
     }
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/components/hr.scss b/projects/swimlane/ngx-ui/src/lib/styles/components/hr.scss
index 2896fe17e..aa5de1208 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/components/hr.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/components/hr.scss
@@ -4,6 +4,6 @@ hr {
   height: 0;
   border: 0;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: solid 1px colors.$color-blue-grey-600;
-  margin: 20px 0;
+  border-bottom: solid 1px var(--grey-600);
+  margin: var(--spacing-20) var(--spacing-0);
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/components/lists.scss b/projects/swimlane/ngx-ui/src/lib/styles/components/lists.scss
index ec49dfc73..be8a0d678 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/components/lists.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/components/lists.scss
@@ -25,8 +25,8 @@ ul {
 
 .list-reset,
 .list-reset > li {
-  padding: 0;
-  margin: 0;
+  padding: var(--spacing-0);
+  margin: var(--spacing-0);
   list-style: none;
 }
 
@@ -46,8 +46,8 @@ ul {
 .vertical-list,
 .horizontal-list > li,
 .vertical-list > li {
-  padding: 0;
-  margin: 0;
+  padding: var(--spacing-0);
+  margin: var(--spacing-0);
   list-style: none;
 }
 
@@ -56,7 +56,7 @@ ul {
     display: inline-block;
 
     > button {
-      padding: 0 1rem;
+      padding: var(--spacing-0) 1rem;
     }
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/components/loading.scss b/projects/swimlane/ngx-ui/src/lib/styles/components/loading.scss
index 07a5673b5..96f2d4630 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/components/loading.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/components/loading.scss
@@ -9,7 +9,7 @@
 
 .icon-loading {
   animation: spin 1s infinite linear;
-  font-size: 32px;
+  font-size: var(--font-size-4xl);
   line-height: 0px;
   height: 32px;
   display: inline-block;
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/components/scrollbars.scss b/projects/swimlane/ngx-ui/src/lib/styles/components/scrollbars.scss
index 4e25a8456..994561aeb 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/components/scrollbars.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/components/scrollbars.scss
@@ -15,7 +15,7 @@
   &::-webkit-scrollbar-track {
     background-color: transparent;
     border-radius: 10px;
-    margin: 0;
+    margin: var(--spacing-0);
   }
 
   &::-webkit-scrollbar-corner {
@@ -23,7 +23,7 @@
   }
 
   &::-webkit-scrollbar-thumb {
-    border-radius: 6px;
+    border-radius: var(--radius-6);
     background-clip: padding-box;
     border: 4px solid transparent;
   }
@@ -40,11 +40,11 @@
 .ngx-scroll *,
 .ngx-scroll-overlay {
   &::-webkit-scrollbar-thumb {
-    background-color: rgba(colors.$color-blue-grey-550, 0.5);
+    background-color: rgba(var(--grey-550), 0.5);
   }
 
   &::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(colors.$color-blue-grey-550, 1);
+    background-color: rgba(var(--grey-550), 1);
   }
 }
 
@@ -67,14 +67,14 @@
   overflow: overlay;
 
   &::-webkit-scrollbar-thumb {
-    background-color: rgba(colors.$color-blue-grey-550, 0.3);
+    background-color: rgba(var(--grey-550), 0.3);
   }
 
   &:hover::-webkit-scrollbar-thumb {
-    background-color: rgba(colors.$color-blue-grey-550, 0.5);
+    background-color: rgba(var(--grey-550), 0.5);
   }
 
   &:hover::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(colors.$color-blue-grey-550, 1);
+    background-color: rgba(var(--grey-550), 1);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/components/table.scss b/projects/swimlane/ngx-ui/src/lib/styles/components/table.scss
index 65e8f9161..47428ce89 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/components/table.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/components/table.scss
@@ -1,9 +1,9 @@
 @use 'sass:color';
 @use '../colors/colors' as colors;
 
-$color-table-caption: colors.$color-grey-200;
-$color-table-border: colors.$color-blue-grey-600;
-$color-table-stripe: color.adjust(colors.$color-blue-grey-800, $lightness: -3%);
+$color-table-caption: var(--grey-200);
+$color-table-border: var(--grey-600);
+$color-table-stripe: color-mix(in srgb, var(--blue-500), black 5%);
 
 table {
   border-collapse: collapse;
@@ -11,7 +11,7 @@ table {
 
   th {
     text-align: left;
-    font-weight: bold;
+    font-weight: var(--font-weight-bold);
   }
 
   caption {
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/components/tags.scss b/projects/swimlane/ngx-ui/src/lib/styles/components/tags.scss
index a042c86d7..79e81e0f8 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/components/tags.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/components/tags.scss
@@ -1,22 +1,22 @@
 @use '../colors/colors' as colors;
 
-$tag-background: colors.$color-blue-grey-600;
+$tag-background: var(--grey-600);
 $tag-color: white;
 
 .tag {
   cursor: default;
-  border-radius: 3px;
+  border-radius: var(--radius-4);
   display: inline-block;
-  margin: 0 8px 0 0;
+  margin: var(--spacing-0) var(--spacing-8) var(--spacing-0) var(--spacing-0);
   box-sizing: border-box;
   position: relative;
   background: $tag-background;
   color: $tag-color;
-  font-size: 14px;
-  padding: 0 0.3rem;
+  font-size: var(--font-size-s);
+  padding: var(--spacing-0) 0.3rem;
 
   &.tag-small {
-    font-size: 0.7rem;
+    font-size: var(--font-size-xs);
   }
 
   &.tag-large {
@@ -24,12 +24,12 @@ $tag-color: white;
   }
 
   &.tag-filled {
-    background-color: colors.$color-blue-grey-050;
-    color: colors.$color-blue-grey-800;
+    background-color: var(--grey-050);
+    color: var(--grey-800);
   }
 
   &.tag-bordered {
-    border: 1px solid colors.$color-light-blue-400;
+    border: 1px solid var(--lightblue-400);
     color: white;
     background-color: transparent;
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/fonts/icons-effects.scss b/projects/swimlane/ngx-ui/src/lib/styles/fonts/icons-effects.scss
index 846b9bbd5..7e564dcf3 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/fonts/icons-effects.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/fonts/icons-effects.scss
@@ -31,16 +31,16 @@
 .icon-fx-spinning {
   animation: spin 1s infinite linear;
   display: inline-block;
-  font-size: 1em;
-  line-height: 1em;
+  font-size: var(--font-size-m);
+  line-height: var(--font-line-height-100);
   height: 1em;
 }
 
 .icon-fx-spinning-rev {
   animation: spin-rev 1s infinite linear;
   display: inline-block;
-  font-size: 1em;
-  line-height: 1em;
+  font-size: var(--font-size-m);
+  line-height: var(--font-line-height-100);
   height: 1em;
 }
 
@@ -70,7 +70,7 @@
 }
 
 .icon-fx-dbl-sized {
-  font-size: 2em;
+  font-size: var(--font-size-4xl);
 }
 
 .icon-fx-stacked {
@@ -78,7 +78,7 @@
   display: inline-block;
   width: 1em;
   height: 1em;
-  line-height: 1em;
+  line-height: var(--font-line-height-100);
   vertical-align: baseline;
 
   .icon,
@@ -107,10 +107,10 @@
 .icon {
   &.has-text,
   &.has-text-right {
-    margin-right: 5px;
+    margin-right: var(--spacing-4);
   }
 
   &.has-text-left {
-    margin-left: 5px;
+    margin-left: var(--spacing-4);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/forms/inputs.scss b/projects/swimlane/ngx-ui/src/lib/styles/forms/inputs.scss
index 137c71388..d17bbc3e3 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/forms/inputs.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/forms/inputs.scss
@@ -20,8 +20,8 @@ textarea {
   border: solid 1px forms.$color-input-border;
   color: forms.$color-input-text;
   transition: box-shadow 200ms;
-  border-radius: 0;
-  font-size: 13px;
+  border-radius: var(--radius-0);
+  font-size: var(--font-size-xs);
   height: 32px;
   line-height: 32px;
   width: 100%;
@@ -34,7 +34,7 @@ textarea {
 
   &:focus {
     box-shadow: shadows.$shadow-2;
-    // border-color: colors.$color-blue;
+    // border-color: var(--blue-500);
     // box-shadow: 0 3px 25px rgba(31, 137, 255, 0.25),
     //             0 3px 6px rgba(31, 137, 255, 0.12);
   }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/forms/selects.scss b/projects/swimlane/ngx-ui/src/lib/styles/forms/selects.scss
index cc24eec3d..20444d52c 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/forms/selects.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/forms/selects.scss
@@ -5,10 +5,10 @@ select {
   background: forms.$color-input-bg;
   border: solid 1px forms.$color-input-border;
   color: forms.$color-input-text;
-  border-radius: 2px;
+  border-radius: var(--radius-2);
   height: 32px;
   line-height: 32px;
-  font-size: 13px;
+  font-size: var(--font-size-xs);
   width: 100%;
 
   &:focus {
@@ -17,6 +17,6 @@ select {
 
   &[disabled] {
     cursor: not-allowed;
-    color: colors.$color-blue-grey-300;
+    color: var(--grey-300);
   }
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/forms/variables.scss b/projects/swimlane/ngx-ui/src/lib/styles/forms/variables.scss
index be13d2bc4..9930d0ca0 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/forms/variables.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/forms/variables.scss
@@ -1,39 +1,39 @@
 @use '../colors/colors' as colors;
 
-$color-input-bg: colors.$color-blue-grey-700;
-$color-input-border: colors.$color-blue-grey-600;
-$color-input-text: colors.$color-blue-grey-050;
-$color-input-text-placeholder: colors.$color-blue-grey-450;
-$color-input-text-disabled: colors.$color-blue-grey-400;
+$color-input-bg: var(--grey-700);
+$color-input-border: var(--grey-600);
+$color-input-text: var(--grey-050);
+$color-input-text-placeholder: var(--grey-450);
+$color-input-text-disabled: var(--grey-400);
 
-$input-invalid-color: colors.$color-red;
-$input-icon-color: colors.$color-grey-300;
-$input-icon-color-hover: colors.$color-grey-100;
-$input-placeholder-color: colors.$color-blue-grey-350;
+$input-invalid-color: var(--red-500);
+$input-icon-color: var(--grey-300);
+$input-icon-color-hover: var(--grey-100);
+$input-placeholder-color: var(--grey-350);
 
-$color-fill-input-bg: colors.$color-blue-grey-875;
+$color-fill-input-bg: var(--grey-875);
 
 $input-underline-height: 1px;
 $input-underline-height-fill: 2px;
-$input-active-underline-fill: colors.$color-blue;
-$input-inactive-underline-fill: colors.$color-blue-grey-600;
+$input-active-underline-fill: var(--blue-500);
+$input-inactive-underline-fill: var(--grey-600);
 
-$input-label-color: colors.$color-blue-grey-350;
-$input-label-color-active: colors.$color-blue-500;
-$input-label-font-size: 1em;
+$input-label-color: var(--grey-350);
+$input-label-color-active: var(--blue-500);
+$input-label-font-size: var(--font-size-m);
 $input-label-font-size-active: 0.7rem;
-$input-label-font-weight: 600;
+$input-label-font-weight: var(--font-weight-semibold);
 
-$input-hint-color: colors.$color-blue-grey-350;
-$input-hint-font-size: 12px;
-$input-hint-margin-top: 2px;
+$input-hint-color: var(--grey-350);
+$input-hint-font-size: var(--font-size-xs);
+$input-hint-margin-top: var(--spacing-2);
 $input-hint-min-height: 1em;
 $input-hint-line-height: 14px;
 
 $input-min-width: 300px;
 $input-line-height: calc(1em + 0.7rem);
-$input-margin-top: 16px;
-$input-margin-bottom: 8px;
+$input-margin-top: var(--spacing-16);
+$input-margin-bottom: var(--spacing-8);
 $input-padding-top: calc(#{$input-label-font-size-active} + 8px);
 
 $input-animation-duration: 150ms;
@@ -45,22 +45,22 @@ $input-animation-duration: 150ms;
   margin-bottom: $input-margin-bottom;
   line-height: $input-line-height;
   padding-top: $input-padding-top;
-  padding-bottom: 0;
+  padding-bottom: var(--spacing-0);
 
   &.marginless {
-    margin-top: 0;
-    margin-bottom: 0;
+    margin-top: var(--spacing-0);
+    margin-bottom: var(--spacing-0);
   }
 
   &.no-label {
-    padding-top: 0;
+    padding-top: var(--spacing-0);
   }
 }
 
 @mixin input-label {
   position: absolute;
   top: 0.4em;
-  line-height: 1em;
+  line-height: var(--font-line-height-100);
   pointer-events: none;
   font-size: $input-label-font-size;
   font-weight: $input-label-font-weight;
@@ -75,7 +75,7 @@ $input-animation-duration: 150ms;
 @mixin input-hint {
   font-size: $input-hint-font-size;
   color: $input-hint-color;
-  margin-top: 2px;
+  margin-top: var(--spacing-0);
   min-height: 1em;
   line-height: $input-hint-line-height;
   transition: color 0.2s ease-in-out;
@@ -91,7 +91,7 @@ $input-animation-duration: 150ms;
     transition: width 250ms ease-out;
     width: 0;
     height: $input-underline-height-fill;
-    margin: 0 auto;
+    margin: var(--spacing-0) auto;
   }
 }
 
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/layouts/flex.scss b/projects/swimlane/ngx-ui/src/lib/styles/layouts/flex.scss
index 7bc7c1cc8..e54f27338 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/layouts/flex.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/layouts/flex.scss
@@ -6,6 +6,7 @@
 /* --- CSS Variables --- */
 
 :root {
+  
   // columns
   --columns: 12;
   --column-width: calc(100% / var(--columns));
@@ -46,6 +47,7 @@
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: wrap;
+
   margin-right: var(--gutter-compensation, -0.5rem);
   margin-left: var(--gutter-compensation, -0.5rem);
 
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/themes/day.scss b/projects/swimlane/ngx-ui/src/lib/styles/themes/day.scss
index c14b292da..409ed8eb0 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/themes/day.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/themes/day.scss
@@ -1,5 +1,5 @@
 @use 'colors/colors' as colors;
 
 .day-theme {
-  background: colors.$color-grey-100;
+  background: var(--grey-100);
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/themes/night.scss b/projects/swimlane/ngx-ui/src/lib/styles/themes/night.scss
index 4e77a51f8..650b2c304 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/themes/night.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/themes/night.scss
@@ -3,8 +3,8 @@
 
 .night-theme,
 .moonlight-theme {
-  background: colors.$color-blue-grey-850;
-  color: colors.$color-blue-grey-050;
+  background: var(--grey-850);
+  color: var(--grey-050);
 }
 
 .moonlight-theme {
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/typography/code.scss b/projects/swimlane/ngx-ui/src/lib/styles/typography/code.scss
index 07b55c315..20134fad7 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/typography/code.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/typography/code.scss
@@ -17,21 +17,21 @@ pre {
   padding: 1rem;
   background: $code-color-bg;
   color: $code-color-text;
-  margin: 0.5rem 0;
+  margin: 0.5rem var(--spacing-0);
   font-family: $code-font-family;
   overflow-x: auto;
-  line-height: 1.45;
+  line-height: var(--font-line-height-200);
   tab-size: 2;
   -webkit-font-smoothing: auto;
   -webkit-text-size-adjust: none;
   position: relative;
-  border-radius: 2px;
+  border-radius: var(--radius-2);
   font-size: 0.8rem;
 }
 
 code {
-  margin: 0;
-  padding: 0;
+  margin: var(--spacing-0);
+  padding: var(--spacing-0);
   overflow-wrap: break-word;
   white-space: pre-wrap;
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/typography/font.scss b/projects/swimlane/ngx-ui/src/lib/styles/typography/font.scss
index 43b0abaab..d07d921d5 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/typography/font.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/typography/font.scss
@@ -6,6 +6,7 @@
 $font-size: 16px;
 $line-height: 1.4;
 
+
 h1,
 h2,
 h3,
@@ -14,25 +15,25 @@ h5,
 h6 {
   margin-bottom: 0.5rem;
   margin-top: 0.3em;
-  font-weight: normal;
+  font-weight: var(--font-weight-regular);
 
   small {
-    color: colors.$color-grey-300;
-    font-size: 0.75em;
+    color: var(--grey-300);
+    font-size: var(--font-size-xs);
   }
 }
 
 p {
   margin-bottom: 1rem;
   line-height: 1.75;
-  font-weight: 400;
+  font-weight: var(--font-weight-regular);
 }
 
 span,
 p,
 a {
   &.hint {
-    color: colors.$color-grey-300;
+    color: var(--grey-300);
     font-style: italic;
     font-size: 0.85em;
   }
@@ -47,6 +48,6 @@ a {
 }
 
 a {
-  color: colors.$color-blue-400;
+  color: var(--blue-400);
   text-decoration: none;
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/styles/vendor/index.scss b/projects/swimlane/ngx-ui/src/lib/styles/vendor/index.scss
index 2768db43c..e83774696 100644
--- a/projects/swimlane/ngx-ui/src/lib/styles/vendor/index.scss
+++ b/projects/swimlane/ngx-ui/src/lib/styles/vendor/index.scss
@@ -9,7 +9,7 @@
  */
 
 html {
-  line-height: 1.15; /* 1 */
+  line-height: var(--font-line-height-100); /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
@@ -21,7 +21,7 @@ html {
  */
 
 body {
-  margin: 0;
+  margin: var(--spacing-0);
 }
 
 /**
@@ -38,8 +38,8 @@ main {
  */
 
 h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
+  font-size: var(--font-size-4xl);
+  margin: 0.67em var(--spacing-0);
 }
 
 /* Grouping content
@@ -63,7 +63,7 @@ hr {
 
 pre {
   font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+  font-size: var(--font-size-m); /* 2 */
 }
 
 /* Text-level semantics
@@ -106,7 +106,7 @@ code,
 kbd,
 samp {
   font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
+  font-size: var(--font-size-m); /* 2 */
 }
 
 /**
@@ -164,8 +164,8 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
+  line-height: var(--font-line-height-100); /* 1 */
+  margin: var(--spacing-0); /* 2 */
 }
 
 /**
@@ -210,7 +210,7 @@ button::-moz-focus-inner,
 [type='reset']::-moz-focus-inner,
 [type='submit']::-moz-focus-inner {
   border-style: none;
-  padding: 0;
+  padding: var(--spacing-0);
 }
 
 /**
@@ -244,7 +244,7 @@ legend {
   color: inherit; /* 2 */
   display: table; /* 1 */
   max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
+  padding: var(--spacing-0); /* 3 */
   white-space: normal; /* 1 */
 }
 
@@ -272,7 +272,7 @@ textarea {
 [type='checkbox'],
 [type='radio'] {
   box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
+  padding: var(--spacing-0); /* 2 */
 }
 
 /**
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index acfd91840..8cd5967d7 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -28,15 +28,15 @@
 
     .search-box {
       border: 1px solid transparent;
-      color: colors.$color-blue-grey-400;
-      background: colors.$color-blue-grey-700;
+      color: var(--grey-400);
+      background: var(--grey-700);
       height: 40px;
-      padding: 8px;
-      line-height: 1em;
-      margin: 0;
+      padding: var(--spacing-8);
+      line-height: var(--font-line-height-100);
+      margin: var(--spacing-0);
 
       ngx-input-suffix .btn {
-        color: colors.$color-blue-grey-400;
+        color: var(--grey-400);
 
         &:hover {
           color: #ffffff;
@@ -45,7 +45,7 @@
 
       ngx-input {
         margin-top: -3px;
-        padding-top: 0;
+        padding-top: var(--spacing-0);
 
         .ngx-input-underline {
           display: none;
@@ -66,7 +66,7 @@
 
         .ngx-input-wrap .ngx-input-box-wrap .ngx-input-box {
           &::placeholder {
-            font-size: 14px !important;
+            font-size: var(--font-size-s) !important;
           }
         }
       }
@@ -84,7 +84,7 @@
     right: 0;
     overflow: auto;
     width: 100%;
-    padding-top: 50px;
+    padding-top: var(--spacing-48);
 
     .main-toolbar {
       position: absolute;
@@ -109,12 +109,12 @@
  */
 .style-header {
   text-transform: uppercase;
-  color: colors.$color-grey-300;
-  font-size: 1rem;
+  color: var(--grey-300);
+  font-size: var(--font-size-m);
   position: relative;
-  padding-bottom: 5px;
-  margin-bottom: 20px;
-  font-weight: 600;
+  padding-bottom: var(--spacing-4);
+  margin-bottom: var(--spacing-20);
+  font-weight: var(--font-weight-semibold);
 
   &:not(:first-of-type) {
     margin-top: 6rem;
@@ -124,7 +124,7 @@
     content: '';
     width: 25px;
     height: 1px;
-    background: colors.$color-grey-300;
+    background: var(--grey-300);
     position: absolute;
     bottom: 0;
     left: 0;
@@ -140,27 +140,27 @@
     overflow: hidden;
     width: 150px;
     display: inline-block;
-    padding: 10px 5px;
+    padding: var(--spacing-10) var(--spacing-4);
     text-align: center;
-    margin: 10px;
-    border: solid 1px colors.$color-blue-grey-800;
-    border-radius: 2px;
+    margin: var(--spacing-10);
+    border: solid 1px var(--grey-800);
+    border-radius: var(--radius-2);
 
     .icon-name {
-      color: colors.$color-blue-grey-600;
-      font-size: 0.9rem;
-      line-height: 1rem;
+      color: var(--grey-600);
+      font-size: var(--font-size-m);
+      line-height: var(--font-line-height-100);
     }
 
     .ngx-icon,
     .large-icon {
       display: block;
-      font-size: 50px;
-      line-height: 1em;
+      font-size: var(--font-size-6xl);
+      line-height: var(--font-line-height-100);
     }
 
     .icon-loading {
-      font-size: 50px;
+      font-size: var(--font-size-6xl);
       height: 50px;
       line-height: 0;
     }
@@ -172,7 +172,7 @@
 }
 
 .large-icons {
-  font-size: 50px;
+  font-size: var(--font-size-6xl);
   line-height: 50px;
 }
 
@@ -180,8 +180,8 @@
 .icon-stacking-section,
 .large-icon-section {
   .large-icon {
-    font-size: 50px;
-    margin-right: 10px;
+    font-size: var(--font-size-6xl);
+    margin-right: var(--spacing-10);
     line-height: 50px;
   }
 }
@@ -189,19 +189,19 @@
 .icons-preview-code {
   li {
     list-style-type: none;
-    padding: 20px;
-    margin-top: 20px;
+    padding: var(--spacing-20);
+    margin-top: var(--spacing-20);
 
     .ngx-icon,
     .icon-fx-stacked,
     .large-icon {
-      font-size: 50px;
+      font-size: var(--font-size-6xl);
     }
 
     .large-icon {
       display: block;
-      font-size: 50px;
-      margin: 10px;
+      font-size: var(--font-size-6xl);
+      margin: var(--spacing-10);
     }
   }
 }
@@ -209,7 +209,7 @@
 .inputs-section {
   input {
     display: block;
-    margin: 8px 0;
+    margin: var(--spacing-8) var(--spacing-0);
   }
 }
 
@@ -219,7 +219,7 @@
 }
 
 .CodeMirror {
-  margin-top: 20px;
+  margin-top: var(--spacing-20);
 }
 
 .fa,
@@ -233,7 +233,7 @@
   height: 50px;
 
   ngx-icon.search-icon {
-    margin-top: 5px;
+    margin-top: var(--spacing-4);
   }
 
   ngx-input[hidden] {
@@ -244,7 +244,7 @@
 
   ngx-input,
   &:hover ngx-input {
-    margin: 0 40px 0 20px;
+    margin: var(--spacing-0) 40px var(--spacing-0) var(--spacing-20);
     width: 240px;
     transition: width 0.5s;
   }
@@ -309,24 +309,24 @@ $palette: (
 }
 
 .list-unstyled {
-  padding-left: 0;
+  padding-left: var(--spacing-0);
   list-style: none;
 }
 
 .glow-demo {
-  background: colors.$color-blue-grey-850;
-  margin: 20px;
+  background: var(--grey-850);
+  margin: var(--spacing-20);
   text-align: center;
-  padding: 20px 10px;
+  padding: var(--spacing-20) 10px;
 }
 
 .badge {
   clear: both;
-  margin-top: 30px;
+  margin-top: var(--spacing-30);
   display: block;
   background-color: blue;
-  padding: 10px;
-  border-radius: 5px;
+  padding: var(--spacing-10);
+  border-radius: var(--radius-6);
   color: white;
   user-select: none;
 }
diff --git a/src/app/colors-page/colors-page.component.scss b/src/app/colors-page/colors-page.component.scss
index 355153a91..1d65d1920 100644
--- a/src/app/colors-page/colors-page.component.scss
+++ b/src/app/colors-page/colors-page.component.scss
@@ -6,13 +6,13 @@
   }
 
   .color {
-    padding: 15px 10px;
+    padding: var(--spacing-16) var(--spacing-10);
   }
 }
 
 .shadow-demo {
   height: 120px;
-  margin: 15px;
+  margin: var(--spacing-16);
   text-align: center;
   line-height: 120px;
 }
diff --git a/src/app/common/prism/prism.css b/src/app/common/prism/prism.css
index 7f562d5f7..60f2ac2c0 100644
--- a/src/app/common/prism/prism.css
+++ b/src/app/common/prism/prism.css
@@ -33,9 +33,9 @@ pre[class*='language-'],
 /* Code blocks */
 pre[class*='language-'] {
   border-radius: 0.5em;
-  margin: 0.5em 0;
+  margin: 0.5em var(--spacing-0);
   overflow: auto;
-  padding: 0 1rem;
+  padding: var(--spacing-0) 1rem;
 }
 
 pre[class*='language-']::-moz-selection {
@@ -125,7 +125,7 @@ code[class*='language-'] ::selection {
 
 .prism--token.prism--important,
 .prism--token.prism--bold {
-  font-weight: bold;
+  font-weight: var(--font-weight-bold);
 }
 
 .prism--token.prism--italic {
@@ -137,7 +137,7 @@ code[class*='language-'] ::selection {
 }
 
 pre[data-line] {
-  padding: 1em 0 1em 3em;
+  padding: 1em var(--spacing-0) 1em 3em;
   position: relative;
 }
 
@@ -162,7 +162,7 @@ pre[data-line] {
   left: 0;
   line-height: inherit;
   margin-top: 0.75em; /* Same as .prism’s padding-top */
-  padding: inherit 0;
+  padding: inherit var(--spacing-0);
   pointer-events: none;
   position: absolute;
   right: 0;
@@ -173,14 +173,14 @@ pre[data-line] {
 .line-highlight::before,
 .line-highlight[data-end]::after {
   background-color: hsl(215, 15%, 59%); /* #8794A6 */
-  border-radius: 999px;
+  border-radius: var(--radius-1000);
   box-shadow: 0 1px white;
   color: hsl(24, 20%, 95%); /* #F5F2F0 */
   content: attr(data-start);
   font: bold 65%/1.5 sans-serif;
   left: 0.6em;
   min-width: 1em;
-  padding: 0 0.5em;
+  padding: var(--spacing-0) 0.5em;
   position: absolute;
   text-align: center;
   text-shadow: none;
diff --git a/src/app/components/card-page/card-page.component.scss b/src/app/components/card-page/card-page.component.scss
index 97ed723f4..281bc0c32 100644
--- a/src/app/components/card-page/card-page.component.scss
+++ b/src/app/components/card-page/card-page.component.scss
@@ -2,10 +2,10 @@
 
 .card-page-container {
   .ngx-card {
-    margin-bottom: 20px;
+    margin-bottom: var(--spacing-20);
 
     .date-display {
-      color: colors.$color-blue-grey-400;
+      color: var(--grey-400);
     }
 
     .card-gutter {
@@ -20,15 +20,15 @@
 
     .card-action {
       justify-content: space-between;
-      padding-right: 0 !important;
-      color: colors.$color-blue-grey-350;
+      padding-right: var(--spacing-0) !important;
+      color: var(--grey-350);
     }
   }
 
   .playbook-card {
     &.border {
-      border: solid 2px colors.$color-blue-grey-650;
-      border-radius: 2px;
+      border: solid 2px var(--grey-650);
+      border-radius: var(--radius-2);
     }
 
     .ngx-card-header {
@@ -48,8 +48,8 @@
     .ngx-card-header {
       .ngx-card-subtitle {
         i {
-          margin-right: 5px;
-          margin-top: 5px;
+          margin-right: var(--spacing-4);
+          margin-top: var(--spacing-4);
         }
       }
 
@@ -60,7 +60,7 @@
 
     .card-toggle {
       color: #8f9db7;
-      font-size: 14px;
+      font-size: var(--font-size-s);
     }
   }
 
@@ -84,33 +84,33 @@
 
     .ngx-card-body {
       .card-stat-container {
-        margin: 20px 0;
+        margin: var(--spacing-20) var(--spacing-0);
         display: flex;
         width: 100%;
         height: 68px;
         background: linear-gradient(180deg, #2b3240 0%, #262c38 100%);
         opacity: 0.7;
         box-shadow: 0 2px 15px rgba(7, 8, 11, 0.2);
-        border-radius: 2px;
+        border-radius: var(--radius-2);
 
         .card-stat {
           width: 50%;
-          margin: auto 0;
+          margin: auto var(--spacing-0);
           text-align: center;
 
           .ngx-icon {
-            color: colors.$color-blue-grey-350;
+            color: var(--grey-350);
           }
 
           .card-stat--value {
-            color: colors.$color-blue-grey-100;
-            font-size: 21px;
+            color: var(--grey-100);
+            font-size: var(--font-size-xl);
           }
 
           .card-stat--label {
-            color: colors.$color-blue-grey-350;
-            font-size: 12px;
-            font-weight: 600;
+            color: var(--grey-350);
+            font-size: var(--font-size-xs);
+            font-weight: var(--font-weight-semibold);
           }
 
           &:first-child {
@@ -122,8 +122,8 @@
       .date-display {
         display: inline-block;
         align-items: center;
-        color: colors.$color-blue-grey-400;
-        font-size: 14px;
+        color: var(--grey-400);
+        font-size: var(--font-size-s);
       }
     }
   }
diff --git a/src/app/components/json-editor-page/json-editor-page.component.scss b/src/app/components/json-editor-page/json-editor-page.component.scss
index 3e0186964..6011d69aa 100644
--- a/src/app/components/json-editor-page/json-editor-page.component.scss
+++ b/src/app/components/json-editor-page/json-editor-page.component.scss
@@ -9,6 +9,6 @@
     width: 100%;
     height: 50%;
     overflow: auto;
-    padding-bottom: 10px;
+    padding-bottom: var(--spacing-10);
   }
 }
diff --git a/src/app/components/plus-menu-page/plus-menu-page.component.scss b/src/app/components/plus-menu-page/plus-menu-page.component.scss
index a7b160a5c..bd3e410b2 100644
--- a/src/app/components/plus-menu-page/plus-menu-page.component.scss
+++ b/src/app/components/plus-menu-page/plus-menu-page.component.scss
@@ -10,7 +10,7 @@ app-plus-menu-page {
   }
 
   app-prism {
-    margin-top: 30px;
+    margin-top: var(--spacing-30);
     display: block;
   }
 
diff --git a/src/app/components/split-page/split-page.component.scss b/src/app/components/split-page/split-page.component.scss
index 363cefe97..2b726b252 100644
--- a/src/app/components/split-page/split-page.component.scss
+++ b/src/app/components/split-page/split-page.component.scss
@@ -1,31 +1,31 @@
 .split-example {
   height: 500px;
-  margin: 20px 0;
+  margin: var(--spacing-20) var(--spacing-0);
 
   .right-panel {
     background: #2f3646;
-    padding: 10px;
+    padding: var(--spacing-10);
   }
 
   .fixed-panel {
     background: #3b4457;
-    padding: 10px;
+    padding: var(--spacing-10);
     flex: 0 0 20%;
   }
 
   .security-panel {
     background: #2f3646;
-    padding: 10px;
+    padding: var(--spacing-10);
   }
 
   .alerts-panel {
     background: #455066;
-    padding: 10px;
+    padding: var(--spacing-10);
   }
 
   .fixed-header {
     flex: 0 0 50px;
     background: #3b4457;
-    padding: 10px;
+    padding: var(--spacing-10);
   }
 }
diff --git a/src/app/components/time-display-page/time-display-page.component.scss b/src/app/components/time-display-page/time-display-page.component.scss
index dbedfcd94..936415106 100644
--- a/src/app/components/time-display-page/time-display-page.component.scss
+++ b/src/app/components/time-display-page/time-display-page.component.scss
@@ -1,4 +1,4 @@
 .example {
-  margin: 10px 0 40px 0;
+  margin: var(--spacing-10) var(--spacing-0) 40px var(--spacing-0);
   line-height: 0.9em;
 }
diff --git a/src/app/components/tip-page/tip-page.component.scss b/src/app/components/tip-page/tip-page.component.scss
index 7f0befd7b..270a8d8d6 100644
--- a/src/app/components/tip-page/tip-page.component.scss
+++ b/src/app/components/tip-page/tip-page.component.scss
@@ -1,7 +1,7 @@
 .tip-example {
-  margin-bottom: 20px;
+  margin-bottom: var(--spacing-20);
 
   .ngx-tip .tip-container {
-    margin-bottom: 10px;
+    margin-bottom: var(--spacing-10);
   }
 }
diff --git a/src/app/controls-page/controls-page.component.scss b/src/app/controls-page/controls-page.component.scss
index 6ad4ea1b4..5d7e71b04 100644
--- a/src/app/controls-page/controls-page.component.scss
+++ b/src/app/controls-page/controls-page.component.scss
@@ -1,6 +1,6 @@
 table.alignment-test {
-  margin-left: 20px;
-  margin-top: 20px;
+  margin-left: var(--spacing-20);
+  margin-top: var(--spacing-20);
   background: #171a21;
 
   tr,
@@ -13,7 +13,7 @@ table.alignment-test {
   }
 
   td {
-    padding: 05px;
+    padding: var(--spacing-0) 5px;
     border: 10px solid #34282c;
   }
 
@@ -28,7 +28,7 @@ table.alignment-test {
 
 .flex-container {
   display: flex;
-  gap: 12px;
+  gap: var(--spacing-12);
 
   > * {
     flex: 0 1 20%;
diff --git a/src/app/dialogs/dialog-medium-format-page/dialog-medium-format-dialog-page.component.scss b/src/app/dialogs/dialog-medium-format-page/dialog-medium-format-dialog-page.component.scss
index 1a5924c9f..36eca0a4d 100644
--- a/src/app/dialogs/dialog-medium-format-page/dialog-medium-format-dialog-page.component.scss
+++ b/src/app/dialogs/dialog-medium-format-page/dialog-medium-format-dialog-page.component.scss
@@ -6,6 +6,6 @@ code {
 blockquote {
   background: #212631;
   padding: 1rem;
-  margin-left: 0;
+  margin-left: var(--spacing-0);
   border-left: 0.25rem solid;
 }
diff --git a/src/app/layout-page/layout-page.component.scss b/src/app/layout-page/layout-page.component.scss
index 57e240170..39075b93a 100644
--- a/src/app/layout-page/layout-page.component.scss
+++ b/src/app/layout-page/layout-page.component.scss
@@ -2,43 +2,43 @@
 @use 'colors/colors' as colors;
 
 section {
-  margin: 40px 0;
+  margin: 40px var(--spacing-0);
 }
 
 code {
   display: inline;
   padding: 0.2em 0.4em;
-  margin: 0;
+  margin: var(--spacing-0);
   font-size: 85%;
-  background-color: colors.$color-blue-grey-775;
-  border-radius: 3px;
+  background-color: var(--grey-775);
+  border-radius: var(--radius-4);
 }
 
 .ngx-flex--wrap,
 .ngx-flex--wrap-fluid,
 .ngx-flex--wrap-fixed {
-  margin: 40px 0;
-  border: 1px solid colors.$color-blue-grey-725;
+  margin: 40px var(--spacing-0);
+  border: 1px solid var(--grey-725);
   position: relative;
 
   &:before {
     content: attr(class);
-    font-size: 16px;
-    font-weight: bold;
+    font-size: var(--font-size-m);
+    font-weight: var(--font-weight-bold);
     position: absolute;
     top: -20px;
   }
 }
 
 .ngx-flex--row {
-  background-color: rgba(colors.$color-green, 0.1);
-  margin-top: 20px;
+  background-color: rgba(var(--green-500), 0.1);
+  margin-top: var(--spacing-20);
   position: relative;
   box-sizing: border-box;
 
   &:before {
     content: attr(class);
-    font-size: 12px;
+    font-size: var(--font-size-xs);
     position: absolute;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -50,14 +50,14 @@ code {
   }
 
   > * {
-    background-color: rgba(colors.$color-light-blue, 0.15);
+    background-color: rgba(var(--lightblue-500), 0.15);
     position: relative;
-    border: 1px solid rgba(colors.$color-light-blue, 0.06);
+    border: 1px solid rgba(var(--lightblue-500), 0.06);
     box-sizing: border-box;
 
     &:before {
       content: attr(class);
-      font-size: 10px;
+      font-size: var(--font-size-xxs);
       position: absolute;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -66,13 +66,13 @@ code {
       top: 10px;
       width: calc(100% - 15px);
       left: 10px;
-      padding: 0 5px;
-      border-radius: 3px;
+      padding: var(--spacing-0) 5px;
+      border-radius: var(--radius-4);
     }
 
     &:hover:before {
-      font-size: 12px;
-      background-color: colors.$color-blue-grey-800;
+      font-size: var(--font-size-xs);
+      background-color: var(--grey-800);
       overflow: visible;
       z-index: 1000;
       width: auto;
@@ -81,15 +81,15 @@ code {
 }
 
 .box {
-  margin: 5px 0;
-  padding: 0 5px;
-  background: colors.$color-blue-500;
-  border-radius: 5px;
+  margin: var(--spacing-4) var(--spacing-0);
+  padding: var(--spacing-0) var(--spacing-4);
+  background: var(--blue-500);
+  border-radius: var(--radius-6);
   overflow: hidden;
   text-align: center;
   color: black;
-  font-size: 10px;
-  font-weight: bold;
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weight-bold);
   min-height: 30px;
   line-height: 30px;
   vertical-align: middle;
diff --git a/src/styles.scss b/src/styles.scss
index 91d5a9813..9b41f4683 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,14 +3,14 @@
 
 // prism theme
 @use './app/common/prism/prism.css';
-@use 'colors/colors' as colors;
+//@use 'colors/colors' as colors;
 
 .appearance-table {
   max-width: 500px;
 
   td,
   th {
-    padding: 10px;
+    padding: var(--spacing-10);
   }
 }
 
@@ -22,27 +22,27 @@ $ngx-font-path: '../projects/swimlane/ngx-ui/src/lib/assets/icons/iconfont/fonts
   src: url('#{$ngx-font-path}/ngx-icon.eot') format('embedded-opentype'),
     url('#{$ngx-font-path}/ngx-icon.woff2') format('woff2'), url('#{$ngx-font-path}/ngx-icon.woff') format('woff'),
     url('#{$ngx-font-path}/ngx-icon.ttf') format('truetype'), url('#{$ngx-font-path}/ngx-icon.svg') format('svg');
-  font-weight: normal;
+  font-weight: var(--font-weight-regular);
   font-style: normal;
 }
 
 code {
-  font-size: 14px;
+  font-size: var(--font-size-s);
   display: inline-block;
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
 }
 
 th > code {
-  color: colors.$color-blue-grey-050;
+  color: var(--grey-050);
 }
 
 th > code.component-type {
-  color: colors.$color-blue-200;
+  color: var(--blue-200);
   display: block;
 }
 
 .component-description {
-  font-size: 15px;
+  font-size: var(--font-size-m);
 }
 
 .documentation-content {
diff --git a/yarn.lock b/yarn.lock
index 9dcd047b7..8431601fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -42,13 +42,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular-devkit/architect@npm:0.1901.6, @angular-devkit/architect@npm:>=0.1900.0 < 0.2000.0":
-  version: 0.1901.6
-  resolution: "@angular-devkit/architect@npm:0.1901.6"
+"@angular-devkit/architect@npm:0.1902.14, @angular-devkit/architect@npm:>=0.1900.0 < 0.2000.0":
+  version: 0.1902.14
+  resolution: "@angular-devkit/architect@npm:0.1902.14"
   dependencies:
-    "@angular-devkit/core": "npm:19.1.6"
+    "@angular-devkit/core": "npm:19.2.14"
     rxjs: "npm:7.8.1"
-  checksum: 10c0/728ebd2e37d5443689a5f6ca26f113ae08389e1e277e51035095d5325e8222ccd0fbd89287d5af2569ceab205335a453d69b43072516316eaac46c9bd93c16ef
+  checksum: 10c0/c510298f8f65ae5768bb883a5703c1be11af147f26c23e8c40ed3571185880a6d5d8e3384157753acf20e76ae2a99de3adcc3d9468fab29adf4b06712ecf8f0a
   languageName: node
   linkType: hard
 
@@ -73,25 +73,25 @@ __metadata:
   linkType: hard
 
 "@angular-devkit/build-angular@npm:^19.0.0":
-  version: 19.1.6
-  resolution: "@angular-devkit/build-angular@npm:19.1.6"
+  version: 19.2.14
+  resolution: "@angular-devkit/build-angular@npm:19.2.14"
   dependencies:
     "@ampproject/remapping": "npm:2.3.0"
-    "@angular-devkit/architect": "npm:0.1901.6"
-    "@angular-devkit/build-webpack": "npm:0.1901.6"
-    "@angular-devkit/core": "npm:19.1.6"
-    "@angular/build": "npm:19.1.6"
-    "@babel/core": "npm:7.26.0"
-    "@babel/generator": "npm:7.26.3"
+    "@angular-devkit/architect": "npm:0.1902.14"
+    "@angular-devkit/build-webpack": "npm:0.1902.14"
+    "@angular-devkit/core": "npm:19.2.14"
+    "@angular/build": "npm:19.2.14"
+    "@babel/core": "npm:7.26.10"
+    "@babel/generator": "npm:7.26.10"
     "@babel/helper-annotate-as-pure": "npm:7.25.9"
     "@babel/helper-split-export-declaration": "npm:7.24.7"
-    "@babel/plugin-transform-async-generator-functions": "npm:7.25.9"
+    "@babel/plugin-transform-async-generator-functions": "npm:7.26.8"
     "@babel/plugin-transform-async-to-generator": "npm:7.25.9"
-    "@babel/plugin-transform-runtime": "npm:7.25.9"
-    "@babel/preset-env": "npm:7.26.0"
-    "@babel/runtime": "npm:7.26.0"
+    "@babel/plugin-transform-runtime": "npm:7.26.10"
+    "@babel/preset-env": "npm:7.26.9"
+    "@babel/runtime": "npm:7.26.10"
     "@discoveryjs/json-ext": "npm:0.6.3"
-    "@ngtools/webpack": "npm:19.1.6"
+    "@ngtools/webpack": "npm:19.2.14"
     "@vitejs/plugin-basic-ssl": "npm:1.2.0"
     ansi-colors: "npm:4.1.3"
     autoprefixer: "npm:10.4.20"
@@ -99,14 +99,14 @@ __metadata:
     browserslist: "npm:^4.21.5"
     copy-webpack-plugin: "npm:12.0.2"
     css-loader: "npm:7.1.2"
-    esbuild: "npm:0.24.2"
-    esbuild-wasm: "npm:0.24.2"
+    esbuild: "npm:0.25.4"
+    esbuild-wasm: "npm:0.25.4"
     fast-glob: "npm:3.3.3"
-    http-proxy-middleware: "npm:3.0.3"
+    http-proxy-middleware: "npm:3.0.5"
     istanbul-lib-instrument: "npm:6.0.3"
     jsonc-parser: "npm:3.3.1"
     karma-source-map-support: "npm:1.4.0"
-    less: "npm:4.2.1"
+    less: "npm:4.2.2"
     less-loader: "npm:12.2.0"
     license-webpack-plugin: "npm:4.0.2"
     loader-utils: "npm:3.3.1"
@@ -115,38 +115,38 @@ __metadata:
     ora: "npm:5.4.1"
     picomatch: "npm:4.0.2"
     piscina: "npm:4.8.0"
-    postcss: "npm:8.4.49"
+    postcss: "npm:8.5.2"
     postcss-loader: "npm:8.1.1"
     resolve-url-loader: "npm:5.0.0"
     rxjs: "npm:7.8.1"
-    sass: "npm:1.83.1"
-    sass-loader: "npm:16.0.4"
-    semver: "npm:7.6.3"
+    sass: "npm:1.85.0"
+    sass-loader: "npm:16.0.5"
+    semver: "npm:7.7.1"
     source-map-loader: "npm:5.0.0"
     source-map-support: "npm:0.5.21"
-    terser: "npm:5.37.0"
+    terser: "npm:5.39.0"
     tree-kill: "npm:1.2.2"
     tslib: "npm:2.8.1"
-    webpack: "npm:5.97.1"
+    webpack: "npm:5.98.0"
     webpack-dev-middleware: "npm:7.4.2"
     webpack-dev-server: "npm:5.2.0"
     webpack-merge: "npm:6.0.1"
     webpack-subresource-integrity: "npm:5.1.0"
   peerDependencies:
-    "@angular/compiler-cli": ^19.0.0
-    "@angular/localize": ^19.0.0
-    "@angular/platform-server": ^19.0.0
-    "@angular/service-worker": ^19.0.0
-    "@angular/ssr": ^19.1.6
-    "@web/test-runner": ^0.19.0
+    "@angular/compiler-cli": ^19.0.0 || ^19.2.0-next.0
+    "@angular/localize": ^19.0.0 || ^19.2.0-next.0
+    "@angular/platform-server": ^19.0.0 || ^19.2.0-next.0
+    "@angular/service-worker": ^19.0.0 || ^19.2.0-next.0
+    "@angular/ssr": ^19.2.14
+    "@web/test-runner": ^0.20.0
     browser-sync: ^3.0.2
     jest: ^29.5.0
     jest-environment-jsdom: ^29.5.0
     karma: ^6.3.0
-    ng-packagr: ^19.0.0
+    ng-packagr: ^19.0.0 || ^19.2.0-next.0
     protractor: ^7.0.0
     tailwindcss: ^2.0.0 || ^3.0.0 || ^4.0.0
-    typescript: ">=5.5 <5.8"
+    typescript: ">=5.5 <5.9"
   dependenciesMeta:
     esbuild:
       optional: true
@@ -175,7 +175,7 @@ __metadata:
       optional: true
     tailwindcss:
       optional: true
-  checksum: 10c0/75973a78aad1210cf91639338340dc3eaa3851aba0b60e20d1d4761bfdd9934014c2d8a8075c86b22ef1fa5af0bcfbbcca3a652d105c8a00b41d733730515da8
+  checksum: 10c0/39d53ca32ac4e006e439ffa0d3e9180c6ce10a16cf34cfaf4317538d78d8f628d9ee25d33403ea3f8dec744f64c107f769c4003e26caf034ecc12d5af6459db2
   languageName: node
   linkType: hard
 
@@ -292,16 +292,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular-devkit/build-webpack@npm:0.1901.6":
-  version: 0.1901.6
-  resolution: "@angular-devkit/build-webpack@npm:0.1901.6"
+"@angular-devkit/build-webpack@npm:0.1902.14":
+  version: 0.1902.14
+  resolution: "@angular-devkit/build-webpack@npm:0.1902.14"
   dependencies:
-    "@angular-devkit/architect": "npm:0.1901.6"
+    "@angular-devkit/architect": "npm:0.1902.14"
     rxjs: "npm:7.8.1"
   peerDependencies:
     webpack: ^5.30.0
     webpack-dev-server: ^5.0.2
-  checksum: 10c0/da2358af8e579dbe6c7bc20dc02ca11dd68d6dc534c56ef3e3cbd27e7a16dbd756be9251a59fc3674f95c45218b4543f0189a4a23486a7093d5215a5fb83e429
+  checksum: 10c0/8f9ca09e290cea0caf1564f8968e554f770b1c7496ad9e5e20cebc0d858ee3fb522ae812284c7affaf912b81e03c5095f5145ea7f02549f6f156425b9bfc74f8
   languageName: node
   linkType: hard
 
@@ -337,7 +337,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular-devkit/core@npm:18.2.14, @angular-devkit/core@npm:^18.0.0":
+"@angular-devkit/core@npm:18.2.14":
   version: 18.2.14
   resolution: "@angular-devkit/core@npm:18.2.14"
   dependencies:
@@ -361,9 +361,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular-devkit/core@npm:19.1.6, @angular-devkit/core@npm:^19.0.0":
-  version: 19.1.6
-  resolution: "@angular-devkit/core@npm:19.1.6"
+"@angular-devkit/core@npm:19.2.14, @angular-devkit/core@npm:^19.0.0":
+  version: 19.2.14
+  resolution: "@angular-devkit/core@npm:19.2.14"
   dependencies:
     ajv: "npm:8.17.1"
     ajv-formats: "npm:3.0.1"
@@ -376,7 +376,7 @@ __metadata:
   peerDependenciesMeta:
     chokidar:
       optional: true
-  checksum: 10c0/dc0da55674c81c1a83a0d465d136f78c935d7a945b909cb2363cee49a5b604daa01a10ef0100c6493cc09615e4515fccee9792f26b3dfbd2c711438dd2983859
+  checksum: 10c0/aafd31e1339a506c8293d0c8b6d3310610e4a1f3ffd7b635e149988e06647693d8da01204bab2fa12a28b55189a59e2f57d079d7a2bcf0677e0f1e60dd1232ac
   languageName: node
   linkType: hard
 
@@ -399,6 +399,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@angular-devkit/core@npm:^18.0.0":
+  version: 18.2.19
+  resolution: "@angular-devkit/core@npm:18.2.19"
+  dependencies:
+    ajv: "npm:8.17.1"
+    ajv-formats: "npm:3.0.1"
+    jsonc-parser: "npm:3.3.1"
+    picomatch: "npm:4.0.2"
+    rxjs: "npm:7.8.1"
+    source-map: "npm:0.7.4"
+  peerDependencies:
+    chokidar: ^3.5.2
+  dependenciesMeta:
+    esbuild:
+      built: true
+    puppeteer:
+      built: true
+  peerDependenciesMeta:
+    chokidar:
+      optional: true
+  checksum: 10c0/b677351b4d0e19825c818906022b2b0a4fe872af63344544c1a9756ae941ac33c8e364158d9ce9312cb7b1b2805a3bb9c4ed2e04f19c6ca4fe9cf55ddbe22397
+  languageName: node
+  linkType: hard
+
 "@angular-devkit/schematics@npm:20.0.3, @angular-devkit/schematics@npm:>= 20.0.0 < 21.0.0, @angular-devkit/schematics@npm:^20.0.3":
   version: 20.0.3
   resolution: "@angular-devkit/schematics@npm:20.0.3"
@@ -536,49 +560,50 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular/build@npm:19.1.6":
-  version: 19.1.6
-  resolution: "@angular/build@npm:19.1.6"
+"@angular/build@npm:19.2.14":
+  version: 19.2.14
+  resolution: "@angular/build@npm:19.2.14"
   dependencies:
     "@ampproject/remapping": "npm:2.3.0"
-    "@angular-devkit/architect": "npm:0.1901.6"
-    "@angular-devkit/core": "npm:19.1.6"
-    "@babel/core": "npm:7.26.0"
+    "@angular-devkit/architect": "npm:0.1902.14"
+    "@babel/core": "npm:7.26.10"
     "@babel/helper-annotate-as-pure": "npm:7.25.9"
     "@babel/helper-split-export-declaration": "npm:7.24.7"
     "@babel/plugin-syntax-import-attributes": "npm:7.26.0"
-    "@inquirer/confirm": "npm:5.1.1"
+    "@inquirer/confirm": "npm:5.1.6"
     "@vitejs/plugin-basic-ssl": "npm:1.2.0"
-    beasties: "npm:0.2.0"
+    beasties: "npm:0.3.2"
     browserslist: "npm:^4.23.0"
-    esbuild: "npm:0.24.2"
+    esbuild: "npm:0.25.4"
     fast-glob: "npm:3.3.3"
     https-proxy-agent: "npm:7.0.6"
     istanbul-lib-instrument: "npm:6.0.3"
     listr2: "npm:8.2.5"
-    lmdb: "npm:3.2.2"
+    lmdb: "npm:3.2.6"
     magic-string: "npm:0.30.17"
-    mrmime: "npm:2.0.0"
+    mrmime: "npm:2.0.1"
     parse5-html-rewriting-stream: "npm:7.0.0"
     picomatch: "npm:4.0.2"
     piscina: "npm:4.8.0"
-    rollup: "npm:4.30.1"
-    sass: "npm:1.83.1"
-    semver: "npm:7.6.3"
-    vite: "npm:6.0.11"
+    rollup: "npm:4.34.8"
+    sass: "npm:1.85.0"
+    semver: "npm:7.7.1"
+    source-map-support: "npm:0.5.21"
+    vite: "npm:6.2.7"
     watchpack: "npm:2.4.2"
   peerDependencies:
-    "@angular/compiler": ^19.0.0
-    "@angular/compiler-cli": ^19.0.0
-    "@angular/localize": ^19.0.0
-    "@angular/platform-server": ^19.0.0
-    "@angular/service-worker": ^19.0.0
-    "@angular/ssr": ^19.1.6
+    "@angular/compiler": ^19.0.0 || ^19.2.0-next.0
+    "@angular/compiler-cli": ^19.0.0 || ^19.2.0-next.0
+    "@angular/localize": ^19.0.0 || ^19.2.0-next.0
+    "@angular/platform-server": ^19.0.0 || ^19.2.0-next.0
+    "@angular/service-worker": ^19.0.0 || ^19.2.0-next.0
+    "@angular/ssr": ^19.2.14
+    karma: ^6.4.0
     less: ^4.2.0
-    ng-packagr: ^19.0.0
+    ng-packagr: ^19.0.0 || ^19.2.0-next.0
     postcss: ^8.4.0
     tailwindcss: ^2.0.0 || ^3.0.0 || ^4.0.0
-    typescript: ">=5.5 <5.8"
+    typescript: ">=5.5 <5.9"
   dependenciesMeta:
     lmdb:
       optional: true
@@ -591,6 +616,8 @@ __metadata:
       optional: true
     "@angular/ssr":
       optional: true
+    karma:
+      optional: true
     less:
       optional: true
     ng-packagr:
@@ -599,7 +626,7 @@ __metadata:
       optional: true
     tailwindcss:
       optional: true
-  checksum: 10c0/7c694af8a5bbf4a8a7c2323888c07e1220f6bbe83e739ac077d42599e86358396a8be867098490d24e7d486b3721ec8849319b289650ac047c44872a1669b19c
+  checksum: 10c0/eae83723907e0f5e54d75fe2cb2fb0fc322c70b3cd465d46e4506b288f07a8291df6273e3507016672c8155064815f1a39bc759a9e099db83c0d32949ad53f72
   languageName: node
   linkType: hard
 
@@ -867,18 +894,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.12.11, @babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0, @babel/code-frame@npm:^7.26.2":
-  version: 7.26.2
-  resolution: "@babel/code-frame@npm:7.26.2"
-  dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.25.9"
-    js-tokens: "npm:^4.0.0"
-    picocolors: "npm:^1.0.0"
-  checksum: 10c0/7d79621a6849183c415486af99b1a20b84737e8c11cd55b6544f688c51ce1fd710e6d869c3dd21232023da272a79b91efb3e83b5bc2dc65c1187c5fcd1b72ea8
-  languageName: node
-  linkType: hard
-
-"@babel/code-frame@npm:^7.27.1":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.12.11, @babel/code-frame@npm:^7.26.2, @babel/code-frame@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/code-frame@npm:7.27.1"
   dependencies:
@@ -889,40 +905,51 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.26.0, @babel/compat-data@npm:^7.26.5":
-  version: 7.26.5
-  resolution: "@babel/compat-data@npm:7.26.5"
-  checksum: 10c0/9d2b41f0948c3dfc5de44d9f789d2208c2ea1fd7eb896dfbb297fe955e696728d6f363c600cd211e7f58ccbc2d834fe516bb1e4cf883bbabed8a32b038afc1a0
+"@babel/code-frame@npm:^7.25.9":
+  version: 7.26.2
+  resolution: "@babel/code-frame@npm:7.26.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10c0/7d79621a6849183c415486af99b1a20b84737e8c11cd55b6544f688c51ce1fd710e6d869c3dd21232023da272a79b91efb3e83b5bc2dc65c1187c5fcd1b72ea8
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.27.2":
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.26.8, @babel/compat-data@npm:^7.27.2":
   version: 7.27.5
   resolution: "@babel/compat-data@npm:7.27.5"
   checksum: 10c0/da2751fcd0b58eea958f2b2f7ff7d6de1280712b709fa1ad054b73dc7d31f589e353bb50479b9dc96007935f3ed3cada68ac5b45ce93086b7122ddc32e60dc00
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.26.0":
-  version: 7.26.0
-  resolution: "@babel/core@npm:7.26.0"
+"@babel/compat-data@npm:^7.26.5":
+  version: 7.26.5
+  resolution: "@babel/compat-data@npm:7.26.5"
+  checksum: 10c0/9d2b41f0948c3dfc5de44d9f789d2208c2ea1fd7eb896dfbb297fe955e696728d6f363c600cd211e7f58ccbc2d834fe516bb1e4cf883bbabed8a32b038afc1a0
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:7.26.10":
+  version: 7.26.10
+  resolution: "@babel/core@npm:7.26.10"
   dependencies:
     "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.26.0"
-    "@babel/generator": "npm:^7.26.0"
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
+    "@babel/code-frame": "npm:^7.26.2"
+    "@babel/generator": "npm:^7.26.10"
+    "@babel/helper-compilation-targets": "npm:^7.26.5"
     "@babel/helper-module-transforms": "npm:^7.26.0"
-    "@babel/helpers": "npm:^7.26.0"
-    "@babel/parser": "npm:^7.26.0"
-    "@babel/template": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.26.0"
+    "@babel/helpers": "npm:^7.26.10"
+    "@babel/parser": "npm:^7.26.10"
+    "@babel/template": "npm:^7.26.9"
+    "@babel/traverse": "npm:^7.26.10"
+    "@babel/types": "npm:^7.26.10"
     convert-source-map: "npm:^2.0.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
     json5: "npm:^2.2.3"
     semver: "npm:^6.3.1"
-  checksum: 10c0/91de73a7ff5c4049fbc747930aa039300e4d2670c2a91f5aa622f1b4868600fc89b01b6278385fbcd46f9574186fa3d9b376a9e7538e50f8d118ec13cfbcb63e
+  checksum: 10c0/e046e0e988ab53841b512ee9d263ca409f6c46e2a999fe53024688b92db394346fa3aeae5ea0866331f62133982eee05a675d22922a4603c3f603aa09a581d62
   languageName: node
   linkType: hard
 
@@ -995,16 +1022,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:7.26.3":
-  version: 7.26.3
-  resolution: "@babel/generator@npm:7.26.3"
+"@babel/generator@npm:7.26.10, @babel/generator@npm:^7.26.10":
+  version: 7.26.10
+  resolution: "@babel/generator@npm:7.26.10"
   dependencies:
-    "@babel/parser": "npm:^7.26.3"
-    "@babel/types": "npm:^7.26.3"
+    "@babel/parser": "npm:^7.26.10"
+    "@babel/types": "npm:^7.26.10"
     "@jridgewell/gen-mapping": "npm:^0.3.5"
     "@jridgewell/trace-mapping": "npm:^0.3.25"
     jsesc: "npm:^3.0.2"
-  checksum: 10c0/54f260558e3e4ec8942da3cde607c35349bb983c3a7c5121243f96893fba3e8cd62e1f1773b2051f936f8c8a10987b758d5c7d76dbf2784e95bb63ab4843fa00
+  checksum: 10c0/88b3b3ea80592fc89349c4e1a145e1386e4042866d2507298adf452bf972f68d13bf699a845e6ab8c028bd52c2247013eb1221b86e1db5c9779faacba9c4b10e
   languageName: node
   linkType: hard
 
@@ -1021,7 +1048,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.26.0, @babel/generator@npm:^7.26.5":
+"@babel/generator@npm:^7.26.5":
   version: 7.26.5
   resolution: "@babel/generator@npm:7.26.5"
   dependencies:
@@ -1074,29 +1101,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.25.9, @babel/helper-compilation-targets@npm:^7.26.5":
-  version: 7.26.5
-  resolution: "@babel/helper-compilation-targets@npm:7.26.5"
+"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.26.5, @babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2":
+  version: 7.27.2
+  resolution: "@babel/helper-compilation-targets@npm:7.27.2"
   dependencies:
-    "@babel/compat-data": "npm:^7.26.5"
-    "@babel/helper-validator-option": "npm:^7.25.9"
+    "@babel/compat-data": "npm:^7.27.2"
+    "@babel/helper-validator-option": "npm:^7.27.1"
     browserslist: "npm:^4.24.0"
     lru-cache: "npm:^5.1.1"
     semver: "npm:^6.3.1"
-  checksum: 10c0/9da5c77e5722f1a2fcb3e893049a01d414124522bbf51323bb1a0c9dcd326f15279836450fc36f83c9e8a846f3c40e88be032ed939c5a9840922bed6073edfb4
+  checksum: 10c0/f338fa00dcfea931804a7c55d1a1c81b6f0a09787e528ec580d5c21b3ecb3913f6cb0f361368973ce953b824d910d3ac3e8a8ee15192710d3563826447193ad1
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.27.1, @babel/helper-compilation-targets@npm:^7.27.2":
-  version: 7.27.2
-  resolution: "@babel/helper-compilation-targets@npm:7.27.2"
+"@babel/helper-compilation-targets@npm:^7.25.9":
+  version: 7.26.5
+  resolution: "@babel/helper-compilation-targets@npm:7.26.5"
   dependencies:
-    "@babel/compat-data": "npm:^7.27.2"
-    "@babel/helper-validator-option": "npm:^7.27.1"
+    "@babel/compat-data": "npm:^7.26.5"
+    "@babel/helper-validator-option": "npm:^7.25.9"
     browserslist: "npm:^4.24.0"
     lru-cache: "npm:^5.1.1"
     semver: "npm:^6.3.1"
-  checksum: 10c0/f338fa00dcfea931804a7c55d1a1c81b6f0a09787e528ec580d5c21b3ecb3913f6cb0f361368973ce953b824d910d3ac3e8a8ee15192710d3563826447193ad1
+  checksum: 10c0/9da5c77e5722f1a2fcb3e893049a01d414124522bbf51323bb1a0c9dcd326f15279836450fc36f83c9e8a846f3c40e88be032ed939c5a9840922bed6073edfb4
   languageName: node
   linkType: hard
 
@@ -1134,35 +1161,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.25.9":
-  version: 7.26.3
-  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.26.3"
+"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.27.1":
+  version: 7.27.1
+  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.27.1"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
+    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
     regexpu-core: "npm:^6.2.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/266f30b99af621559467ed67634cb653408a9262930c0627c3d17691a9d477329fb4dabe4b1785cbf0490e892513d247836674271842d6a8da49fd0afae7d435
+  checksum: 10c0/591fe8bd3bb39679cc49588889b83bd628d8c4b99c55bafa81e80b1e605a348b64da955e3fd891c4ba3f36fd015367ba2eadea22af6a7de1610fbb5bcc2d3df0
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.27.1":
-  version: 7.27.1
-  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.27.1"
+"@babel/helper-create-regexp-features-plugin@npm:^7.25.9":
+  version: 7.26.3
+  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.26.3"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.27.1"
+    "@babel/helper-annotate-as-pure": "npm:^7.25.9"
     regexpu-core: "npm:^6.2.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 10c0/591fe8bd3bb39679cc49588889b83bd628d8c4b99c55bafa81e80b1e605a348b64da955e3fd891c4ba3f36fd015367ba2eadea22af6a7de1610fbb5bcc2d3df0
+  checksum: 10c0/266f30b99af621559467ed67634cb653408a9262930c0627c3d17691a9d477329fb4dabe4b1785cbf0490e892513d247836674271842d6a8da49fd0afae7d435
   languageName: node
   linkType: hard
 
-"@babel/helper-define-polyfill-provider@npm:^0.6.2, @babel/helper-define-polyfill-provider@npm:^0.6.3":
-  version: 0.6.3
-  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.3"
+"@babel/helper-define-polyfill-provider@npm:^0.6.3":
+  version: 0.6.4
+  resolution: "@babel/helper-define-polyfill-provider@npm:0.6.4"
   dependencies:
     "@babel/helper-compilation-targets": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
@@ -1171,7 +1198,7 @@ __metadata:
     resolve: "npm:^1.14.2"
   peerDependencies:
     "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/4320e3527645e98b6a0d5626fef815680e3b2b03ec36045de5e909b0f01546ab3674e96f50bf3bc8413f8c9037e5ee1a5f560ebdf8210426dad1c2c03c96184a
+  checksum: 10c0/b74f2b46e233a178618d19432bdae16e0137d0a603497ee901155e083c4a61f26fe01d79fb95d5f4c22131ade9d958d8f587088d412cca1302633587f070919d
   languageName: node
   linkType: hard
 
@@ -1195,17 +1222,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-module-imports@npm:7.25.9"
-  dependencies:
-    "@babel/traverse": "npm:^7.25.9"
-    "@babel/types": "npm:^7.25.9"
-  checksum: 10c0/078d3c2b45d1f97ffe6bb47f61961be4785d2342a4156d8b42c92ee4e1b7b9e365655dd6cb25329e8fe1a675c91eeac7e3d04f0c518b67e417e29d6e27b6aa70
-  languageName: node
-  linkType: hard
-
-"@babel/helper-module-imports@npm:^7.27.1":
+"@babel/helper-module-imports@npm:^7.25.9, @babel/helper-module-imports@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-module-imports@npm:7.27.1"
   dependencies:
@@ -1215,7 +1232,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.25.9, @babel/helper-module-transforms@npm:^7.26.0":
+"@babel/helper-module-transforms@npm:^7.25.9":
   version: 7.26.0
   resolution: "@babel/helper-module-transforms@npm:7.26.0"
   dependencies:
@@ -1228,7 +1245,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.27.1, @babel/helper-module-transforms@npm:^7.27.3":
+"@babel/helper-module-transforms@npm:^7.26.0, @babel/helper-module-transforms@npm:^7.27.1, @babel/helper-module-transforms@npm:^7.27.3":
   version: 7.27.3
   resolution: "@babel/helper-module-transforms@npm:7.27.3"
   dependencies:
@@ -1259,14 +1276,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.26.5":
-  version: 7.26.5
-  resolution: "@babel/helper-plugin-utils@npm:7.26.5"
-  checksum: 10c0/cdaba71d4b891aa6a8dfbe5bac2f94effb13e5fa4c2c487667fdbaa04eae059b78b28d85a885071f45f7205aeb56d16759e1bed9c118b94b16e4720ef1ab0f65
-  languageName: node
-  linkType: hard
-
-"@babel/helper-plugin-utils@npm:^7.27.1":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.25.9, @babel/helper-plugin-utils@npm:^7.26.5, @babel/helper-plugin-utils@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-plugin-utils@npm:7.27.1"
   checksum: 10c0/94cf22c81a0c11a09b197b41ab488d416ff62254ce13c57e62912c85700dc2e99e555225787a4099ff6bae7a1812d622c80fbaeda824b79baa10a6c5ac4cf69b
@@ -1382,14 +1392,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/helper-validator-option@npm:7.25.9"
-  checksum: 10c0/27fb195d14c7dcb07f14e58fe77c44eea19a6a40a74472ec05c441478fa0bb49fa1c32b2d64be7a38870ee48ef6601bdebe98d512f0253aea0b39756c4014f3e
-  languageName: node
-  linkType: hard
-
-"@babel/helper-validator-option@npm:^7.27.1":
+"@babel/helper-validator-option@npm:^7.25.9, @babel/helper-validator-option@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-validator-option@npm:7.27.1"
   checksum: 10c0/6fec5f006eba40001a20f26b1ef5dbbda377b7b68c8ad518c05baa9af3f396e780bdfded24c4eef95d14bb7b8fd56192a6ed38d5d439b97d10efc5f1a191d148
@@ -1418,7 +1421,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.26.0, @babel/helpers@npm:^7.26.7":
+"@babel/helpers@npm:^7.26.10":
+  version: 7.27.4
+  resolution: "@babel/helpers@npm:7.27.4"
+  dependencies:
+    "@babel/template": "npm:^7.27.2"
+    "@babel/types": "npm:^7.27.3"
+  checksum: 10c0/3463551420926b3f403c1a30d66ac67bba5c4f73539a8ccb71544da129c4709ac37c57fac740ed8a261b3e6bbbf353b05e03b36ea1a6bf1081604b2a94ca43c1
+  languageName: node
+  linkType: hard
+
+"@babel/helpers@npm:^7.26.7":
   version: 7.26.7
   resolution: "@babel/helpers@npm:7.26.7"
   dependencies:
@@ -1438,25 +1451,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.14.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.3, @babel/parser@npm:^7.26.5, @babel/parser@npm:^7.26.7":
-  version: 7.26.7
-  resolution: "@babel/parser@npm:7.26.7"
+"@babel/parser@npm:^7.14.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.26.10, @babel/parser@npm:^7.27.1, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.27.4, @babel/parser@npm:^7.27.5":
+  version: 7.27.5
+  resolution: "@babel/parser@npm:7.27.5"
   dependencies:
-    "@babel/types": "npm:^7.26.7"
+    "@babel/types": "npm:^7.27.3"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/dcb08a4f2878ece33caffefe43b71488d753324bae7ca58d64bca3bc4af34dcfa1b58abdf9972516d76af760fceb25bb9294ca33461d56b31c5059ccfe32001f
+  checksum: 10c0/f7faaebf21cc1f25d9ca8ac02c447ed38ef3460ea95be7ea760916dcf529476340d72a5a6010c6641d9ed9d12ad827c8424840277ec2295c5b082ba0f291220a
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.27.1, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.27.4, @babel/parser@npm:^7.27.5":
-  version: 7.27.5
-  resolution: "@babel/parser@npm:7.27.5"
+"@babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.5, @babel/parser@npm:^7.26.7":
+  version: 7.26.7
+  resolution: "@babel/parser@npm:7.26.7"
   dependencies:
-    "@babel/types": "npm:^7.27.3"
+    "@babel/types": "npm:^7.26.7"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/f7faaebf21cc1f25d9ca8ac02c447ed38ef3460ea95be7ea760916dcf529476340d72a5a6010c6641d9ed9d12ad827c8424840277ec2295c5b082ba0f291220a
+  checksum: 10c0/dcb08a4f2878ece33caffefe43b71488d753324bae7ca58d64bca3bc4af34dcfa1b58abdf9972516d76af760fceb25bb9294ca33461d56b31c5059ccfe32001f
   languageName: node
   linkType: hard
 
@@ -1665,16 +1678,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-async-generator-functions@npm:7.25.9, @babel/plugin-transform-async-generator-functions@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.25.9"
+"@babel/plugin-transform-async-generator-functions@npm:7.26.8, @babel/plugin-transform-async-generator-functions@npm:^7.26.8":
+  version: 7.26.8
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.26.8"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.26.5"
     "@babel/helper-remap-async-to-generator": "npm:^7.25.9"
-    "@babel/traverse": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.26.8"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/e3fcb9fc3d6ab6cbd4fcd956b48c17b5e92fe177553df266ffcd2b2c1f2f758b893e51b638e77ed867941e0436487d2b8b505908d615c41799241699b520dec6
+  checksum: 10c0/f6fefce963fe2e6268dde1958975d7adbce65fba94ca6f4bc554c90da03104ad1dd2e66d03bc0462da46868498428646e30b03a218ef0e5a84bfc87a7e375cec
   languageName: node
   linkType: hard
 
@@ -1717,18 +1730,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-block-scoped-functions@npm:^7.25.9":
-  version: 7.26.5
-  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.26.5"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/2f3060800ead46b09971dd7bf830d66383b7bc61ced9945633b4ef9bf87787956ea83fcf49b387cecb377812588c6b81681714c760f9cf89ecba45edcbab1192
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-block-scoped-functions@npm:^7.27.1":
+"@babel/plugin-transform-block-scoped-functions@npm:^7.26.5, @babel/plugin-transform-block-scoped-functions@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.27.1"
   dependencies:
@@ -1865,18 +1867,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-destructuring@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-destructuring@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/7beec5fda665d108f69d5023aa7c298a1e566b973dd41290faa18aeea70f6f571295c1ece0a058f3ceb6c6c96de76de7cd34f5a227fbf09a1b8d8a735d28ca49
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-destructuring@npm:^7.27.1, @babel/plugin-transform-destructuring@npm:^7.27.3":
+"@babel/plugin-transform-destructuring@npm:^7.25.9, @babel/plugin-transform-destructuring@npm:^7.27.1, @babel/plugin-transform-destructuring@npm:^7.27.3":
   version: 7.27.3
   resolution: "@babel/plugin-transform-destructuring@npm:7.27.3"
   dependencies:
@@ -1979,18 +1970,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-exponentiation-operator@npm:^7.25.9":
-  version: 7.26.3
-  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.26.3"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/cac922e851c6a0831fdd2e3663564966916015aeff7f4485825fc33879cbc3a313ceb859814c9200248e2875d65bb13802a723e5d7d7b40a2e90da82a5a1e15c
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-exponentiation-operator@npm:^7.27.1":
+"@babel/plugin-transform-exponentiation-operator@npm:^7.26.3, @babel/plugin-transform-exponentiation-operator@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.27.1"
   dependencies:
@@ -2023,19 +2003,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-for-of@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-for-of@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/bf11abc71934a1f369f39cd7a33cf3d4dc5673026a53f70b7c1238c4fcc44e68b3ca1bdbe3db2076f60defb6ffe117cbe10b90f3e1a613b551d88f7c4e693bbe
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-for-of@npm:^7.27.1":
+"@babel/plugin-transform-for-of@npm:^7.26.9, @babel/plugin-transform-for-of@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-for-of@npm:7.27.1"
   dependencies:
@@ -2185,19 +2153,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-modules-commonjs@npm:^7.25.9":
-  version: 7.26.3
-  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.26.3"
-  dependencies:
-    "@babel/helper-module-transforms": "npm:^7.26.0"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/82e59708f19f36da29531a64a7a94eabbf6ff46a615e0f5d9b49f3f59e8ef10e2bac607d749091508d3fa655146c9e5647c3ffeca781060cdabedb4c7a33c6f2
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-modules-commonjs@npm:^7.27.1":
+"@babel/plugin-transform-modules-commonjs@npm:^7.26.3, @babel/plugin-transform-modules-commonjs@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.27.1"
   dependencies:
@@ -2307,18 +2263,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.25.9":
-  version: 7.26.6
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.26.6"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/574d6db7cbc5c092db5d1dece8ce26195e642b9c40dbfeaf3082058a78ad7959c1c333471cdd45f38b784ec488850548075d527b178c5010ee9bff7aa527cc7a
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.26.6, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.27.1"
   dependencies:
@@ -2424,19 +2369,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-optional-chaining@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/041ad2beae5affb8e68a0bcb6882a2dadb758db3c629a0e012f57488ab43a822ac1ea17a29db8ef36560a28262a5dfa4dbbbf06ed6e431db55abe024b7cd3961
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-optional-chaining@npm:^7.27.1":
+"@babel/plugin-transform-optional-chaining@npm:^7.25.9, @babel/plugin-transform-optional-chaining@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.27.1"
   dependencies:
@@ -2448,18 +2381,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-parameters@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/aecb446754b9e09d6b6fa95fd09e7cf682f8aaeed1d972874ba24c0a30a7e803ad5f014bb1fffc7bfeed22f93c0d200947407894ea59bf7687816f2f464f8df3
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-parameters@npm:^7.27.1":
+"@babel/plugin-transform-parameters@npm:^7.25.9, @babel/plugin-transform-parameters@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-parameters@npm:7.27.1"
   dependencies:
@@ -2611,19 +2533,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-runtime@npm:7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-runtime@npm:7.25.9"
+"@babel/plugin-transform-runtime@npm:7.26.10":
+  version: 7.26.10
+  resolution: "@babel/plugin-transform-runtime@npm:7.26.10"
   dependencies:
     "@babel/helper-module-imports": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/helper-plugin-utils": "npm:^7.26.5"
     babel-plugin-polyfill-corejs2: "npm:^0.4.10"
-    babel-plugin-polyfill-corejs3: "npm:^0.10.6"
+    babel-plugin-polyfill-corejs3: "npm:^0.11.0"
     babel-plugin-polyfill-regenerator: "npm:^0.6.1"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/888a4998ba0a2313de347954c9a8dfeccbff0633c69d33aee385b8878eba2b429dbfb00c3cc04f6bca454b9be8afa01ebbd73defb7fbbb6e2d3086205c07758b
+  checksum: 10c0/4b70a63b904a3f7faa6ca95f9034d2f29330764820b06cf1814dda4ab0482b233a28241e98d8497bc1690dd31972e72861d8534ae0e37f26e04637e7d615e43d
   languageName: node
   linkType: hard
 
@@ -2711,18 +2633,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.25.9":
-  version: 7.25.9
-  resolution: "@babel/plugin-transform-template-literals@npm:7.25.9"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/5144da6036807bbd4e9d2a8b92ae67a759543929f34f4db9b463448a77298f4a40bf1e92e582db208fe08ee116224806a3bd0bed75d9da404fc2c0af9e6da540
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-template-literals@npm:^7.27.1":
+"@babel/plugin-transform-template-literals@npm:^7.26.8, @babel/plugin-transform-template-literals@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-template-literals@npm:7.27.1"
   dependencies:
@@ -2733,18 +2644,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typeof-symbol@npm:^7.25.9":
-  version: 7.26.7
-  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.26.7"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.26.5"
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 10c0/d5640e3457637e6eee1d7205d255602ccca124ed30e4de10ec75ba179d167e0a826ceeab424e119921f5c995dfddf39ef1f2c91efd2dcbf3f0dc1e7931dfd1d1
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-typeof-symbol@npm:^7.27.1":
+"@babel/plugin-transform-typeof-symbol@npm:^7.26.7, @babel/plugin-transform-typeof-symbol@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/plugin-transform-typeof-symbol@npm:7.27.1"
   dependencies:
@@ -2849,13 +2749,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:7.26.0":
-  version: 7.26.0
-  resolution: "@babel/preset-env@npm:7.26.0"
+"@babel/preset-env@npm:7.26.9":
+  version: 7.26.9
+  resolution: "@babel/preset-env@npm:7.26.9"
   dependencies:
-    "@babel/compat-data": "npm:^7.26.0"
-    "@babel/helper-compilation-targets": "npm:^7.25.9"
-    "@babel/helper-plugin-utils": "npm:^7.25.9"
+    "@babel/compat-data": "npm:^7.26.8"
+    "@babel/helper-compilation-targets": "npm:^7.26.5"
+    "@babel/helper-plugin-utils": "npm:^7.26.5"
     "@babel/helper-validator-option": "npm:^7.25.9"
     "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.25.9"
     "@babel/plugin-bugfix-safari-class-field-initializer-scope": "npm:^7.25.9"
@@ -2867,9 +2767,9 @@ __metadata:
     "@babel/plugin-syntax-import-attributes": "npm:^7.26.0"
     "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
     "@babel/plugin-transform-arrow-functions": "npm:^7.25.9"
-    "@babel/plugin-transform-async-generator-functions": "npm:^7.25.9"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.26.8"
     "@babel/plugin-transform-async-to-generator": "npm:^7.25.9"
-    "@babel/plugin-transform-block-scoped-functions": "npm:^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.26.5"
     "@babel/plugin-transform-block-scoping": "npm:^7.25.9"
     "@babel/plugin-transform-class-properties": "npm:^7.25.9"
     "@babel/plugin-transform-class-static-block": "npm:^7.26.0"
@@ -2880,21 +2780,21 @@ __metadata:
     "@babel/plugin-transform-duplicate-keys": "npm:^7.25.9"
     "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "npm:^7.25.9"
     "@babel/plugin-transform-dynamic-import": "npm:^7.25.9"
-    "@babel/plugin-transform-exponentiation-operator": "npm:^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.26.3"
     "@babel/plugin-transform-export-namespace-from": "npm:^7.25.9"
-    "@babel/plugin-transform-for-of": "npm:^7.25.9"
+    "@babel/plugin-transform-for-of": "npm:^7.26.9"
     "@babel/plugin-transform-function-name": "npm:^7.25.9"
     "@babel/plugin-transform-json-strings": "npm:^7.25.9"
     "@babel/plugin-transform-literals": "npm:^7.25.9"
     "@babel/plugin-transform-logical-assignment-operators": "npm:^7.25.9"
     "@babel/plugin-transform-member-expression-literals": "npm:^7.25.9"
     "@babel/plugin-transform-modules-amd": "npm:^7.25.9"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.25.9"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.26.3"
     "@babel/plugin-transform-modules-systemjs": "npm:^7.25.9"
     "@babel/plugin-transform-modules-umd": "npm:^7.25.9"
     "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.25.9"
     "@babel/plugin-transform-new-target": "npm:^7.25.9"
-    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.26.6"
     "@babel/plugin-transform-numeric-separator": "npm:^7.25.9"
     "@babel/plugin-transform-object-rest-spread": "npm:^7.25.9"
     "@babel/plugin-transform-object-super": "npm:^7.25.9"
@@ -2910,21 +2810,21 @@ __metadata:
     "@babel/plugin-transform-shorthand-properties": "npm:^7.25.9"
     "@babel/plugin-transform-spread": "npm:^7.25.9"
     "@babel/plugin-transform-sticky-regex": "npm:^7.25.9"
-    "@babel/plugin-transform-template-literals": "npm:^7.25.9"
-    "@babel/plugin-transform-typeof-symbol": "npm:^7.25.9"
+    "@babel/plugin-transform-template-literals": "npm:^7.26.8"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.26.7"
     "@babel/plugin-transform-unicode-escapes": "npm:^7.25.9"
     "@babel/plugin-transform-unicode-property-regex": "npm:^7.25.9"
     "@babel/plugin-transform-unicode-regex": "npm:^7.25.9"
     "@babel/plugin-transform-unicode-sets-regex": "npm:^7.25.9"
     "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
     babel-plugin-polyfill-corejs2: "npm:^0.4.10"
-    babel-plugin-polyfill-corejs3: "npm:^0.10.6"
+    babel-plugin-polyfill-corejs3: "npm:^0.11.0"
     babel-plugin-polyfill-regenerator: "npm:^0.6.1"
-    core-js-compat: "npm:^3.38.1"
+    core-js-compat: "npm:^3.40.0"
     semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/26e19dc407cfa1c5166be638b4c54239d084fe15d8d7e6306d8c6dc7bc1decc51070a8dcf28352c1a2feeefbe52a06d193a12e302327ad5f529583df75fb7a26
+  checksum: 10c0/6812ca76bd38165a58fe8354bab5e7204e1aa17d8b9270bd8f8babb08cc7fa94cd29525fe41b553f2ba0e84033d566f10da26012b8ee0f81897005c5225d0051
   languageName: node
   linkType: hard
 
@@ -3020,12 +2920,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.26.0":
-  version: 7.26.0
-  resolution: "@babel/runtime@npm:7.26.0"
+"@babel/runtime@npm:7.26.10":
+  version: 7.26.10
+  resolution: "@babel/runtime@npm:7.26.10"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/12c01357e0345f89f4f7e8c0e81921f2a3e3e101f06e8eaa18a382b517376520cd2fa8c237726eb094dab25532855df28a7baaf1c26342b52782f6936b07c287
+  checksum: 10c0/6dc6d88c7908f505c4f7770fb4677dfa61f68f659b943c2be1f2a99cb6680343462867abf2d49822adc435932919b36c77ac60125793e719ea8745f2073d3745
   languageName: node
   linkType: hard
 
@@ -3056,7 +2956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2":
+"@babel/template@npm:^7.26.9, @babel/template@npm:^7.27.1, @babel/template@npm:^7.27.2":
   version: 7.27.2
   resolution: "@babel/template@npm:7.27.2"
   dependencies:
@@ -3082,7 +2982,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.27.3, @babel/traverse@npm:^7.27.4":
+"@babel/traverse@npm:^7.26.10, @babel/traverse@npm:^7.26.8, @babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.27.3, @babel/traverse@npm:^7.27.4":
   version: 7.27.4
   resolution: "@babel/traverse@npm:7.27.4"
   dependencies:
@@ -3097,7 +2997,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.24.7, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.26.3, @babel/types@npm:^7.26.5, @babel/types@npm:^7.26.7, @babel/types@npm:^7.4.4":
+"@babel/types@npm:^7.24.7, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.10, @babel/types@npm:^7.4.4":
+  version: 7.27.3
+  resolution: "@babel/types@npm:7.27.3"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.27.1"
+    "@babel/helper-validator-identifier": "npm:^7.27.1"
+  checksum: 10c0/bafdfc98e722a6b91a783b6f24388f478fd775f0c0652e92220e08be2cc33e02d42088542f1953ac5e5ece2ac052172b3dadedf12bec9aae57899e92fb9a9757
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.26.5, @babel/types@npm:^7.26.7":
   version: 7.26.7
   resolution: "@babel/types@npm:7.26.7"
   dependencies:
@@ -3187,9 +3097,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/aix-ppc64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/aix-ppc64@npm:0.24.2"
+"@esbuild/aix-ppc64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/aix-ppc64@npm:0.25.4"
   conditions: os=aix & cpu=ppc64
   languageName: node
   linkType: hard
@@ -3201,9 +3111,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/android-arm64@npm:0.24.2"
+"@esbuild/android-arm64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/android-arm64@npm:0.25.4"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -3215,9 +3125,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/android-arm@npm:0.24.2"
+"@esbuild/android-arm@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/android-arm@npm:0.25.4"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -3229,9 +3139,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/android-x64@npm:0.24.2"
+"@esbuild/android-x64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/android-x64@npm:0.25.4"
   conditions: os=android & cpu=x64
   languageName: node
   linkType: hard
@@ -3243,9 +3153,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/darwin-arm64@npm:0.24.2"
+"@esbuild/darwin-arm64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/darwin-arm64@npm:0.25.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -3257,9 +3167,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/darwin-x64@npm:0.24.2"
+"@esbuild/darwin-x64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/darwin-x64@npm:0.25.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -3271,9 +3181,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/freebsd-arm64@npm:0.24.2"
+"@esbuild/freebsd-arm64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/freebsd-arm64@npm:0.25.4"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -3285,9 +3195,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/freebsd-x64@npm:0.24.2"
+"@esbuild/freebsd-x64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/freebsd-x64@npm:0.25.4"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -3299,9 +3209,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-arm64@npm:0.24.2"
+"@esbuild/linux-arm64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-arm64@npm:0.25.4"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
@@ -3313,9 +3223,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-arm@npm:0.24.2"
+"@esbuild/linux-arm@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-arm@npm:0.25.4"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -3327,9 +3237,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-ia32@npm:0.24.2"
+"@esbuild/linux-ia32@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-ia32@npm:0.25.4"
   conditions: os=linux & cpu=ia32
   languageName: node
   linkType: hard
@@ -3341,9 +3251,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-loong64@npm:0.24.2"
+"@esbuild/linux-loong64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-loong64@npm:0.25.4"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
@@ -3355,9 +3265,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-mips64el@npm:0.24.2"
+"@esbuild/linux-mips64el@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-mips64el@npm:0.25.4"
   conditions: os=linux & cpu=mips64el
   languageName: node
   linkType: hard
@@ -3369,9 +3279,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-ppc64@npm:0.24.2"
+"@esbuild/linux-ppc64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-ppc64@npm:0.25.4"
   conditions: os=linux & cpu=ppc64
   languageName: node
   linkType: hard
@@ -3383,9 +3293,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-riscv64@npm:0.24.2"
+"@esbuild/linux-riscv64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-riscv64@npm:0.25.4"
   conditions: os=linux & cpu=riscv64
   languageName: node
   linkType: hard
@@ -3397,9 +3307,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-s390x@npm:0.24.2"
+"@esbuild/linux-s390x@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-s390x@npm:0.25.4"
   conditions: os=linux & cpu=s390x
   languageName: node
   linkType: hard
@@ -3411,9 +3321,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/linux-x64@npm:0.24.2"
+"@esbuild/linux-x64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/linux-x64@npm:0.25.4"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
@@ -3425,9 +3335,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-arm64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/netbsd-arm64@npm:0.24.2"
+"@esbuild/netbsd-arm64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/netbsd-arm64@npm:0.25.4"
   conditions: os=netbsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -3439,9 +3349,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/netbsd-x64@npm:0.24.2"
+"@esbuild/netbsd-x64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/netbsd-x64@npm:0.25.4"
   conditions: os=netbsd & cpu=x64
   languageName: node
   linkType: hard
@@ -3453,9 +3363,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-arm64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/openbsd-arm64@npm:0.24.2"
+"@esbuild/openbsd-arm64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/openbsd-arm64@npm:0.25.4"
   conditions: os=openbsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -3467,9 +3377,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/openbsd-x64@npm:0.24.2"
+"@esbuild/openbsd-x64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/openbsd-x64@npm:0.25.4"
   conditions: os=openbsd & cpu=x64
   languageName: node
   linkType: hard
@@ -3481,9 +3391,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/sunos-x64@npm:0.24.2"
+"@esbuild/sunos-x64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/sunos-x64@npm:0.25.4"
   conditions: os=sunos & cpu=x64
   languageName: node
   linkType: hard
@@ -3495,9 +3405,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/win32-arm64@npm:0.24.2"
+"@esbuild/win32-arm64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/win32-arm64@npm:0.25.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -3509,9 +3419,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/win32-ia32@npm:0.24.2"
+"@esbuild/win32-ia32@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/win32-ia32@npm:0.25.4"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -3523,9 +3433,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.24.2":
-  version: 0.24.2
-  resolution: "@esbuild/win32-x64@npm:0.24.2"
+"@esbuild/win32-x64@npm:0.25.4":
+  version: 0.25.4
+  resolution: "@esbuild/win32-x64@npm:0.25.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -3645,18 +3555,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@inquirer/confirm@npm:5.1.1":
-  version: 5.1.1
-  resolution: "@inquirer/confirm@npm:5.1.1"
-  dependencies:
-    "@inquirer/core": "npm:^10.1.2"
-    "@inquirer/type": "npm:^3.0.2"
-  peerDependencies:
-    "@types/node": ">=18"
-  checksum: 10c0/acca658c2b0a4546560d4c22e405aa7a94644a1126fd0ca895c7d2d11a3a5c836e85ffb45b7b2f9c955c5c0cc44975dbefa17d66e82de01b545e73d6f8de5c80
-  languageName: node
-  linkType: hard
-
 "@inquirer/confirm@npm:5.1.10":
   version: 5.1.10
   resolution: "@inquirer/confirm@npm:5.1.10"
@@ -3672,6 +3570,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@inquirer/confirm@npm:5.1.6":
+  version: 5.1.6
+  resolution: "@inquirer/confirm@npm:5.1.6"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.7"
+    "@inquirer/type": "npm:^3.0.4"
+  peerDependencies:
+    "@types/node": ">=18"
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+  checksum: 10c0/57b667f8096ec261504b613656e7b7718a238a73e059870a2b8e97c3127bc50085251100ed371250733b7cc5cd68122d8694d6a04a46de95d08bb590a8437b11
+  languageName: node
+  linkType: hard
+
 "@inquirer/confirm@npm:^5.1.10":
   version: 5.1.12
   resolution: "@inquirer/confirm@npm:5.1.12"
@@ -3687,7 +3600,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@inquirer/core@npm:^10.1.11, @inquirer/core@npm:^10.1.13":
+"@inquirer/core@npm:^10.1.11, @inquirer/core@npm:^10.1.13, @inquirer/core@npm:^10.1.7":
   version: 10.1.13
   resolution: "@inquirer/core@npm:10.1.13"
   dependencies:
@@ -3708,27 +3621,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@inquirer/core@npm:^10.1.2":
-  version: 10.1.6
-  resolution: "@inquirer/core@npm:10.1.6"
-  dependencies:
-    "@inquirer/figures": "npm:^1.0.10"
-    "@inquirer/type": "npm:^3.0.4"
-    ansi-escapes: "npm:^4.3.2"
-    cli-width: "npm:^4.1.0"
-    mute-stream: "npm:^2.0.0"
-    signal-exit: "npm:^4.1.0"
-    wrap-ansi: "npm:^6.2.0"
-    yoctocolors-cjs: "npm:^2.1.2"
-  peerDependencies:
-    "@types/node": ">=18"
-  peerDependenciesMeta:
-    "@types/node":
-      optional: true
-  checksum: 10c0/be16340bd064c7c389bfb429c350df4afc2da2e3275e9c350326d97a4eebab1444b4a866f7dda6aba43874dd7bbaed5cda0c27faf6c15709408b98e41d744d25
-  languageName: node
-  linkType: hard
-
 "@inquirer/editor@npm:^4.2.11":
   version: 4.2.13
   resolution: "@inquirer/editor@npm:4.2.13"
@@ -3761,13 +3653,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@inquirer/figures@npm:^1.0.10":
-  version: 1.0.10
-  resolution: "@inquirer/figures@npm:1.0.10"
-  checksum: 10c0/013b0eef03706d5ff8847c1ab1a12643edfb3d1902a5353bfe626999bc3b46653f8317d011a9dd4e831d3f2bfef3da84104a1fda4db0de0f4938122f5c70362e
-  languageName: node
-  linkType: hard
-
 "@inquirer/figures@npm:^1.0.12":
   version: 1.0.12
   resolution: "@inquirer/figures@npm:1.0.12"
@@ -3904,19 +3789,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@inquirer/type@npm:^3.0.2, @inquirer/type@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "@inquirer/type@npm:3.0.4"
-  peerDependencies:
-    "@types/node": ">=18"
-  peerDependenciesMeta:
-    "@types/node":
-      optional: true
-  checksum: 10c0/d1db1833e879646ce1f31daff372e90ee099457cf7a2c09a62e8bbce47aced5f22599ef51aa8b82b5ffaeb624340c263cdd9d7a9eae8d3dfc9740efad080915e
-  languageName: node
-  linkType: hard
-
-"@inquirer/type@npm:^3.0.6, @inquirer/type@npm:^3.0.7":
+"@inquirer/type@npm:^3.0.4, @inquirer/type@npm:^3.0.6, @inquirer/type@npm:^3.0.7":
   version: 3.0.7
   resolution: "@inquirer/type@npm:3.0.7"
   peerDependencies:
@@ -4070,9 +3943,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lmdb/lmdb-darwin-arm64@npm:3.2.2":
-  version: 3.2.2
-  resolution: "@lmdb/lmdb-darwin-arm64@npm:3.2.2"
+"@lmdb/lmdb-darwin-arm64@npm:3.2.6":
+  version: 3.2.6
+  resolution: "@lmdb/lmdb-darwin-arm64@npm:3.2.6"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -4084,9 +3957,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lmdb/lmdb-darwin-x64@npm:3.2.2":
-  version: 3.2.2
-  resolution: "@lmdb/lmdb-darwin-x64@npm:3.2.2"
+"@lmdb/lmdb-darwin-x64@npm:3.2.6":
+  version: 3.2.6
+  resolution: "@lmdb/lmdb-darwin-x64@npm:3.2.6"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -4098,9 +3971,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lmdb/lmdb-linux-arm64@npm:3.2.2":
-  version: 3.2.2
-  resolution: "@lmdb/lmdb-linux-arm64@npm:3.2.2"
+"@lmdb/lmdb-linux-arm64@npm:3.2.6":
+  version: 3.2.6
+  resolution: "@lmdb/lmdb-linux-arm64@npm:3.2.6"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
@@ -4112,9 +3985,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lmdb/lmdb-linux-arm@npm:3.2.2":
-  version: 3.2.2
-  resolution: "@lmdb/lmdb-linux-arm@npm:3.2.2"
+"@lmdb/lmdb-linux-arm@npm:3.2.6":
+  version: 3.2.6
+  resolution: "@lmdb/lmdb-linux-arm@npm:3.2.6"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
@@ -4126,9 +3999,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lmdb/lmdb-linux-x64@npm:3.2.2":
-  version: 3.2.2
-  resolution: "@lmdb/lmdb-linux-x64@npm:3.2.2"
+"@lmdb/lmdb-linux-x64@npm:3.2.6":
+  version: 3.2.6
+  resolution: "@lmdb/lmdb-linux-x64@npm:3.2.6"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
@@ -4147,9 +4020,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@lmdb/lmdb-win32-x64@npm:3.2.2":
-  version: 3.2.2
-  resolution: "@lmdb/lmdb-win32-x64@npm:3.2.2"
+"@lmdb/lmdb-win32-x64@npm:3.2.6":
+  version: 3.2.6
+  resolution: "@lmdb/lmdb-win32-x64@npm:3.2.6"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -4372,14 +4245,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ngtools/webpack@npm:19.1.6":
-  version: 19.1.6
-  resolution: "@ngtools/webpack@npm:19.1.6"
+"@ngtools/webpack@npm:19.2.14":
+  version: 19.2.14
+  resolution: "@ngtools/webpack@npm:19.2.14"
   peerDependencies:
-    "@angular/compiler-cli": ^19.0.0
-    typescript: ">=5.5 <5.8"
+    "@angular/compiler-cli": ^19.0.0 || ^19.2.0-next.0
+    typescript: ">=5.5 <5.9"
     webpack: ^5.54.0
-  checksum: 10c0/df4346f741a7292718ae5907cb891bd8da268feee0fee7a32f61026d74440d385538c5baf3422c1b3c347a309041ed10c992b7a3e64d40c68979acadbd08b988
+  checksum: 10c0/6cb4311d9be1432bd1b8e6c656cf436691f6d568419b0ed6c5373140fc13ce656166ae7ca412afec6386b28016bccc3300e379e251f55d21a88b66a2c6cb9d5b
   languageName: node
   linkType: hard
 
@@ -4758,16 +4631,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.30.1"
+"@rollup/rollup-android-arm-eabi@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.34.6"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm-eabi@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-android-arm-eabi@npm:4.34.6"
+"@rollup/rollup-android-arm-eabi@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.34.8"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
@@ -4786,16 +4659,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-android-arm64@npm:4.30.1"
+"@rollup/rollup-android-arm64@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-android-arm64@npm:4.34.6"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-android-arm64@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-android-arm64@npm:4.34.6"
+"@rollup/rollup-android-arm64@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-android-arm64@npm:4.34.8"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
@@ -4814,16 +4687,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.30.1"
+"@rollup/rollup-darwin-arm64@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.34.6"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-arm64@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-darwin-arm64@npm:4.34.6"
+"@rollup/rollup-darwin-arm64@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.34.8"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
@@ -4842,16 +4715,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-darwin-x64@npm:4.30.1"
+"@rollup/rollup-darwin-x64@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-darwin-x64@npm:4.34.6"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-darwin-x64@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-darwin-x64@npm:4.34.6"
+"@rollup/rollup-darwin-x64@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-darwin-x64@npm:4.34.8"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -4870,16 +4743,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.30.1"
+"@rollup/rollup-freebsd-arm64@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.34.6"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-arm64@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-freebsd-arm64@npm:4.34.6"
+"@rollup/rollup-freebsd-arm64@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-freebsd-arm64@npm:4.34.8"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
@@ -4898,16 +4771,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.30.1"
+"@rollup/rollup-freebsd-x64@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.34.6"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-freebsd-x64@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-freebsd-x64@npm:4.34.6"
+"@rollup/rollup-freebsd-x64@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-freebsd-x64@npm:4.34.8"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
@@ -4926,16 +4799,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.30.1"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.34.6"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-gnueabihf@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.34.6"
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.34.8"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
@@ -4954,16 +4827,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.30.1"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.34.6"
   conditions: os=linux & cpu=arm & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm-musleabihf@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.34.6"
+"@rollup/rollup-linux-arm-musleabihf@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.34.8"
   conditions: os=linux & cpu=arm & libc=musl
   languageName: node
   linkType: hard
@@ -4982,16 +4855,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.30.1"
+"@rollup/rollup-linux-arm64-gnu@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.34.6"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-gnu@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.34.6"
+"@rollup/rollup-linux-arm64-gnu@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.34.8"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5010,16 +4883,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.30.1"
+"@rollup/rollup-linux-arm64-musl@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.34.6"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-arm64-musl@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.34.6"
+"@rollup/rollup-linux-arm64-musl@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.34.8"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
@@ -5038,16 +4911,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-loongarch64-gnu@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.30.1"
+"@rollup/rollup-linux-loongarch64-gnu@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.34.6"
   conditions: os=linux & cpu=loong64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-loongarch64-gnu@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.34.6"
+"@rollup/rollup-linux-loongarch64-gnu@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-loongarch64-gnu@npm:4.34.8"
   conditions: os=linux & cpu=loong64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5066,16 +4939,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-powerpc64le-gnu@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.30.1"
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.34.6"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-powerpc64le-gnu@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.34.6"
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.34.8"
   conditions: os=linux & cpu=ppc64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5094,16 +4967,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.30.1"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.34.6"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-riscv64-gnu@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.34.6"
+"@rollup/rollup-linux-riscv64-gnu@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.34.8"
   conditions: os=linux & cpu=riscv64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5136,16 +5009,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.30.1"
+"@rollup/rollup-linux-s390x-gnu@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.34.6"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-s390x-gnu@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.34.6"
+"@rollup/rollup-linux-s390x-gnu@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.34.8"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
@@ -5164,16 +5037,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.30.1"
+"@rollup/rollup-linux-x64-gnu@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.34.6"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-gnu@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.34.6"
+"@rollup/rollup-linux-x64-gnu@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.34.8"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
@@ -5192,16 +5065,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.30.1"
+"@rollup/rollup-linux-x64-musl@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.34.6"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@rollup/rollup-linux-x64-musl@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-linux-x64-musl@npm:4.34.6"
+"@rollup/rollup-linux-x64-musl@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.34.8"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
@@ -5220,16 +5093,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.30.1"
+"@rollup/rollup-win32-arm64-msvc@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.34.6"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-arm64-msvc@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.34.6"
+"@rollup/rollup-win32-arm64-msvc@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.34.8"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
@@ -5248,16 +5121,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.30.1"
+"@rollup/rollup-win32-ia32-msvc@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.34.6"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-ia32-msvc@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.34.6"
+"@rollup/rollup-win32-ia32-msvc@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.34.8"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
@@ -5276,16 +5149,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.30.1":
-  version: 4.30.1
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.30.1"
+"@rollup/rollup-win32-x64-msvc@npm:4.34.6":
+  version: 4.34.6
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.34.6"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@rollup/rollup-win32-x64-msvc@npm:4.34.6":
-  version: 4.34.6
-  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.34.6"
+"@rollup/rollup-win32-x64-msvc@npm:4.34.8":
+  version: 4.34.8
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.34.8"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -5370,9 +5243,9 @@ __metadata:
   linkType: hard
 
 "@sigstore/protobuf-specs@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "@sigstore/protobuf-specs@npm:0.4.0"
-  checksum: 10c0/5b9e074ad132b977050cbd9431c09ea88b21af266dae91dda8d51e29c7b295e73e3be255c10d68874259326229dde1805dd1f5ff29082d2f3d32a932809816eb
+  version: 0.4.2
+  resolution: "@sigstore/protobuf-specs@npm:0.4.2"
+  checksum: 10c0/f1a0ec082064e7ccb04aaef1e2911f185529b8c92c7b3b6c2e877f45197d43808d7888b4495d8b50bc483d0b9bf320ce7b560ac9f0dfb10284a3de24c3a64e3b
   languageName: node
   linkType: hard
 
@@ -5645,20 +5518,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/estree@npm:*, @types/estree@npm:1.0.6, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "@types/estree@npm:1.0.6"
-  checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a
-  languageName: node
-  linkType: hard
-
-"@types/estree@npm:1.0.7":
+"@types/estree@npm:*, @types/estree@npm:1.0.7, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.6":
   version: 1.0.7
   resolution: "@types/estree@npm:1.0.7"
   checksum: 10c0/be815254316882f7c40847336cd484c3bc1c3e34f710d197160d455dc9d6d050ffbf4c3bc76585dba86f737f020ab20bdb137ebe0e9116b0c86c7c0342221b8c
   languageName: node
   linkType: hard
 
+"@types/estree@npm:1.0.6":
+  version: 1.0.6
+  resolution: "@types/estree@npm:1.0.6"
+  checksum: 10c0/cdfd751f6f9065442cd40957c07fd80361c962869aa853c1c2fd03e101af8b9389d8ff4955a43a6fcfa223dd387a089937f95be0f3eec21ca527039fd2d9859a
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:1.0.8":
   version: 1.0.8
   resolution: "@types/estree@npm:1.0.8"
@@ -7507,18 +7380,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-polyfill-corejs3@npm:^0.10.6":
-  version: 0.10.6
-  resolution: "babel-plugin-polyfill-corejs3@npm:0.10.6"
-  dependencies:
-    "@babel/helper-define-polyfill-provider": "npm:^0.6.2"
-    core-js-compat: "npm:^3.38.0"
-  peerDependencies:
-    "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0
-  checksum: 10c0/3a69220471b07722c2ae6537310bf26b772514e12b601398082965459c838be70a0ca70b0662f0737070654ff6207673391221d48599abb4a2b27765206d9f79
-  languageName: node
-  linkType: hard
-
 "babel-plugin-polyfill-corejs3@npm:^0.11.0":
   version: 0.11.1
   resolution: "babel-plugin-polyfill-corejs3@npm:0.11.1"
@@ -7662,19 +7523,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"beasties@npm:0.2.0":
-  version: 0.2.0
-  resolution: "beasties@npm:0.2.0"
+"beasties@npm:0.3.2":
+  version: 0.3.2
+  resolution: "beasties@npm:0.3.2"
   dependencies:
     css-select: "npm:^5.1.0"
     css-what: "npm:^6.1.0"
     dom-serializer: "npm:^2.0.0"
     domhandler: "npm:^5.0.3"
-    htmlparser2: "npm:^9.1.0"
+    htmlparser2: "npm:^10.0.0"
     picocolors: "npm:^1.1.1"
     postcss: "npm:^8.4.49"
     postcss-media-query-parser: "npm:^0.2.3"
-  checksum: 10c0/f7d885553b0289e3d50bcc7e4ad72a3974cedad4418d714b29afca91ee0cd0fef9f907a8e17bb80622f18ca410279be8ec2d938bc22e2cb2fcd084dad17291fa
+  checksum: 10c0/ed6d4356f8b0448ce360eabfba80bd3d9f8d6592a6dc2fa78467e6522da62fee87d8116d7b94aa695dc51bef18f332b3962435a414b759939264a8754702faa3
   languageName: node
   linkType: hard
 
@@ -7843,21 +7704,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.14.5, browserslist@npm:^4.21.3, browserslist@npm:^4.21.5, browserslist@npm:^4.22.1, browserslist@npm:^4.23.0, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0, browserslist@npm:^4.24.3":
-  version: 4.24.4
-  resolution: "browserslist@npm:4.24.4"
-  dependencies:
-    caniuse-lite: "npm:^1.0.30001688"
-    electron-to-chromium: "npm:^1.5.73"
-    node-releases: "npm:^2.0.19"
-    update-browserslist-db: "npm:^1.1.1"
-  bin:
-    browserslist: cli.js
-  checksum: 10c0/db7ebc1733cf471e0b490b4f47e3e2ea2947ce417192c9246644e92c667dd56a71406cc58f62ca7587caf828364892e9952904a02b7aead752bc65b62a37cfe9
-  languageName: node
-  linkType: hard
-
-"browserslist@npm:^4.24.4, browserslist@npm:^4.25.0":
+"browserslist@npm:^4.14.5, browserslist@npm:^4.21.3, browserslist@npm:^4.21.5, browserslist@npm:^4.22.1, browserslist@npm:^4.23.0, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0, browserslist@npm:^4.24.4, browserslist@npm:^4.25.0":
   version: 4.25.0
   resolution: "browserslist@npm:4.25.0"
   dependencies:
@@ -7965,13 +7812,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "call-bind-apply-helpers@npm:1.0.1"
+"call-bind-apply-helpers@npm:^1.0.0, call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "call-bind-apply-helpers@npm:1.0.2"
   dependencies:
     es-errors: "npm:^1.3.0"
     function-bind: "npm:^1.1.2"
-  checksum: 10c0/acb2ab68bf2718e68a3e895f0d0b73ccc9e45b9b6f210f163512ba76f91dab409eb8792f6dae188356f9095747512a3101646b3dea9d37fb8c7c6bf37796d18c
+  checksum: 10c0/47bd9901d57b857590431243fea704ff18078b16890a6b3e021e12d279bbf211d039155e27d7566b374d49ee1f8189344bac9833dec7a20cdec370506361c938
   languageName: node
   linkType: hard
 
@@ -7987,13 +7834,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "call-bound@npm:1.0.3"
+"call-bound@npm:^1.0.2, call-bound@npm:^1.0.3, call-bound@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "call-bound@npm:1.0.4"
   dependencies:
-    call-bind-apply-helpers: "npm:^1.0.1"
-    get-intrinsic: "npm:^1.2.6"
-  checksum: 10c0/45257b8e7621067304b30dbd638e856cac913d31e8e00a80d6cf172911acd057846572d0b256b45e652d515db6601e2974a1b1a040e91b4fc36fb3dd86fa69cf
+    call-bind-apply-helpers: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.3.0"
+  checksum: 10c0/f4796a6a0941e71c766aea672f63b72bc61234c4f4964dc6d7606e3664c307e7d77845328a8f3359ce39ddb377fed67318f9ee203dea1d47e46165dcf2917644
   languageName: node
   linkType: hard
 
@@ -8011,10 +7858,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001399, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001688":
-  version: 1.0.30001698
-  resolution: "caniuse-lite@npm:1.0.30001698"
-  checksum: 10c0/f3128454e6222b86349b62971501b8ebfc49faa9484398176f674293ea85091e1ca96862bc617dcac4d07850cfc5ef5173ebad03d63aa1197b6a8bf3cc46d745
+"caniuse-lite@npm:^1.0.30001399, caniuse-lite@npm:^1.0.30001646":
+  version: 1.0.30001721
+  resolution: "caniuse-lite@npm:1.0.30001721"
+  checksum: 10c0/fa3a8926899824b385279f1f886fe34c5efb1321c9ece1b9df25c8d567a2706db8450cc5b4d969e769e641593e08ea644909324aba93636a43e4949a75f81c4c
   languageName: node
   linkType: hard
 
@@ -8690,15 +8537,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.38.0, core-js-compat@npm:^3.38.1":
-  version: 3.40.0
-  resolution: "core-js-compat@npm:3.40.0"
-  dependencies:
-    browserslist: "npm:^4.24.3"
-  checksum: 10c0/44f6e88726fe266a5be9581a79766800478a8d5c492885f2d4c2a4e2babd9b06bc1689d5340d3a61ae7332f990aff2e83b6203ff8773137a627cfedfbeefabeb
-  languageName: node
-  linkType: hard
-
 "core-js-compat@npm:^3.40.0":
   version: 3.43.0
   resolution: "core-js-compat@npm:3.43.0"
@@ -9410,7 +9248,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"domutils@npm:^3.0.1, domutils@npm:^3.1.0, domutils@npm:^3.2.1":
+"domutils@npm:^3.0.1, domutils@npm:^3.2.1":
   version: 3.2.2
   resolution: "domutils@npm:3.2.2"
   dependencies:
@@ -9470,13 +9308,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"electron-to-chromium@npm:^1.5.73":
-  version: 1.5.96
-  resolution: "electron-to-chromium@npm:1.5.96"
-  checksum: 10c0/827d480f35abe8b0d01a4311fc3180089a406edfcd016d8433712b03ec6e56618ad6f9757e35403092de5c2e163372f9ec90eb8e8334f6f26119a21b568d9bf9
-  languageName: node
-  linkType: hard
-
 "email-addresses@npm:^3.0.1":
   version: 3.1.0
   resolution: "email-addresses@npm:3.1.0"
@@ -9663,25 +9494,25 @@ __metadata:
   linkType: hard
 
 "es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.5, es-abstract@npm:^1.23.9":
-  version: 1.23.9
-  resolution: "es-abstract@npm:1.23.9"
+  version: 1.24.0
+  resolution: "es-abstract@npm:1.24.0"
   dependencies:
     array-buffer-byte-length: "npm:^1.0.2"
     arraybuffer.prototype.slice: "npm:^1.0.4"
     available-typed-arrays: "npm:^1.0.7"
     call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.3"
+    call-bound: "npm:^1.0.4"
     data-view-buffer: "npm:^1.0.2"
     data-view-byte-length: "npm:^1.0.2"
     data-view-byte-offset: "npm:^1.0.1"
     es-define-property: "npm:^1.0.1"
     es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
+    es-object-atoms: "npm:^1.1.1"
     es-set-tostringtag: "npm:^2.1.0"
     es-to-primitive: "npm:^1.3.0"
     function.prototype.name: "npm:^1.1.8"
-    get-intrinsic: "npm:^1.2.7"
-    get-proto: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.3.0"
+    get-proto: "npm:^1.0.1"
     get-symbol-description: "npm:^1.1.0"
     globalthis: "npm:^1.0.4"
     gopd: "npm:^1.2.0"
@@ -9693,21 +9524,24 @@ __metadata:
     is-array-buffer: "npm:^3.0.5"
     is-callable: "npm:^1.2.7"
     is-data-view: "npm:^1.0.2"
+    is-negative-zero: "npm:^2.0.3"
     is-regex: "npm:^1.2.1"
+    is-set: "npm:^2.0.3"
     is-shared-array-buffer: "npm:^1.0.4"
     is-string: "npm:^1.1.1"
     is-typed-array: "npm:^1.1.15"
-    is-weakref: "npm:^1.1.0"
+    is-weakref: "npm:^1.1.1"
     math-intrinsics: "npm:^1.1.0"
-    object-inspect: "npm:^1.13.3"
+    object-inspect: "npm:^1.13.4"
     object-keys: "npm:^1.1.1"
     object.assign: "npm:^4.1.7"
     own-keys: "npm:^1.0.1"
-    regexp.prototype.flags: "npm:^1.5.3"
+    regexp.prototype.flags: "npm:^1.5.4"
     safe-array-concat: "npm:^1.1.3"
     safe-push-apply: "npm:^1.0.0"
     safe-regex-test: "npm:^1.1.0"
     set-proto: "npm:^1.0.0"
+    stop-iteration-iterator: "npm:^1.1.0"
     string.prototype.trim: "npm:^1.2.10"
     string.prototype.trimend: "npm:^1.0.9"
     string.prototype.trimstart: "npm:^1.0.8"
@@ -9716,8 +9550,8 @@ __metadata:
     typed-array-byte-offset: "npm:^1.0.4"
     typed-array-length: "npm:^1.0.7"
     unbox-primitive: "npm:^1.1.0"
-    which-typed-array: "npm:^1.1.18"
-  checksum: 10c0/1de229c9e08fe13c17fe5abaec8221545dfcd57e51f64909599a6ae896df84b8fd2f7d16c60cb00d7bf495b9298ca3581aded19939d4b7276854a4b066f8422b
+    which-typed-array: "npm:^1.1.19"
+  checksum: 10c0/b256e897be32df5d382786ce8cce29a1dd8c97efbab77a26609bd70f2ed29fbcfc7a31758cb07488d532e7ccccdfca76c1118f2afe5a424cdc05ca007867c318
   languageName: node
   linkType: hard
 
@@ -9749,7 +9583,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-object-atoms@npm:^1.0.0":
+"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1":
   version: 1.1.1
   resolution: "es-object-atoms@npm:1.1.1"
   dependencies:
@@ -9771,11 +9605,11 @@ __metadata:
   linkType: hard
 
 "es-shim-unscopables@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "es-shim-unscopables@npm:1.0.2"
+  version: 1.1.0
+  resolution: "es-shim-unscopables@npm:1.1.0"
   dependencies:
-    hasown: "npm:^2.0.0"
-  checksum: 10c0/f495af7b4b7601a4c0cfb893581c352636e5c08654d129590386a33a0432cf13a7bdc7b6493801cadd990d838e2839b9013d1de3b880440cb537825e834fe783
+    hasown: "npm:^2.0.2"
+  checksum: 10c0/1b9702c8a1823fc3ef39035a4e958802cf294dd21e917397c561d0b3e195f383b978359816b1732d02b255ccf63e1e4815da0065b95db8d7c992037be3bbbcdb
   languageName: node
   linkType: hard
 
@@ -9790,12 +9624,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild-wasm@npm:0.24.2":
-  version: 0.24.2
-  resolution: "esbuild-wasm@npm:0.24.2"
+"esbuild-wasm@npm:0.25.4":
+  version: 0.25.4
+  resolution: "esbuild-wasm@npm:0.25.4"
   bin:
     esbuild: bin/esbuild
-  checksum: 10c0/91fa81a320c542e435886ebaa556cbdda3a18bf71bf9a6505a16d3c0eb20c991119932d33bce78198aacaf6fe1cedfb57de97d22ddf4c681517c7ef8fbec4216
+  checksum: 10c0/b6f7a0965dc3faf0efae213900c9eb63bb387c5b255d4e1aafd916d42d74b58877cb84102f4a216002f8ce015fcd366b0a712674b91bdd3415157e1347b9d764
   languageName: node
   linkType: hard
 
@@ -9808,35 +9642,35 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:0.24.2, esbuild@npm:^0.24.2":
-  version: 0.24.2
-  resolution: "esbuild@npm:0.24.2"
-  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.24.2"
-    "@esbuild/android-arm": "npm:0.24.2"
-    "@esbuild/android-arm64": "npm:0.24.2"
-    "@esbuild/android-x64": "npm:0.24.2"
-    "@esbuild/darwin-arm64": "npm:0.24.2"
-    "@esbuild/darwin-x64": "npm:0.24.2"
-    "@esbuild/freebsd-arm64": "npm:0.24.2"
-    "@esbuild/freebsd-x64": "npm:0.24.2"
-    "@esbuild/linux-arm": "npm:0.24.2"
-    "@esbuild/linux-arm64": "npm:0.24.2"
-    "@esbuild/linux-ia32": "npm:0.24.2"
-    "@esbuild/linux-loong64": "npm:0.24.2"
-    "@esbuild/linux-mips64el": "npm:0.24.2"
-    "@esbuild/linux-ppc64": "npm:0.24.2"
-    "@esbuild/linux-riscv64": "npm:0.24.2"
-    "@esbuild/linux-s390x": "npm:0.24.2"
-    "@esbuild/linux-x64": "npm:0.24.2"
-    "@esbuild/netbsd-arm64": "npm:0.24.2"
-    "@esbuild/netbsd-x64": "npm:0.24.2"
-    "@esbuild/openbsd-arm64": "npm:0.24.2"
-    "@esbuild/openbsd-x64": "npm:0.24.2"
-    "@esbuild/sunos-x64": "npm:0.24.2"
-    "@esbuild/win32-arm64": "npm:0.24.2"
-    "@esbuild/win32-ia32": "npm:0.24.2"
-    "@esbuild/win32-x64": "npm:0.24.2"
+"esbuild@npm:0.25.4":
+  version: 0.25.4
+  resolution: "esbuild@npm:0.25.4"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.25.4"
+    "@esbuild/android-arm": "npm:0.25.4"
+    "@esbuild/android-arm64": "npm:0.25.4"
+    "@esbuild/android-x64": "npm:0.25.4"
+    "@esbuild/darwin-arm64": "npm:0.25.4"
+    "@esbuild/darwin-x64": "npm:0.25.4"
+    "@esbuild/freebsd-arm64": "npm:0.25.4"
+    "@esbuild/freebsd-x64": "npm:0.25.4"
+    "@esbuild/linux-arm": "npm:0.25.4"
+    "@esbuild/linux-arm64": "npm:0.25.4"
+    "@esbuild/linux-ia32": "npm:0.25.4"
+    "@esbuild/linux-loong64": "npm:0.25.4"
+    "@esbuild/linux-mips64el": "npm:0.25.4"
+    "@esbuild/linux-ppc64": "npm:0.25.4"
+    "@esbuild/linux-riscv64": "npm:0.25.4"
+    "@esbuild/linux-s390x": "npm:0.25.4"
+    "@esbuild/linux-x64": "npm:0.25.4"
+    "@esbuild/netbsd-arm64": "npm:0.25.4"
+    "@esbuild/netbsd-x64": "npm:0.25.4"
+    "@esbuild/openbsd-arm64": "npm:0.25.4"
+    "@esbuild/openbsd-x64": "npm:0.25.4"
+    "@esbuild/sunos-x64": "npm:0.25.4"
+    "@esbuild/win32-arm64": "npm:0.25.4"
+    "@esbuild/win32-ia32": "npm:0.25.4"
+    "@esbuild/win32-x64": "npm:0.25.4"
   dependenciesMeta:
     "@esbuild/aix-ppc64":
       optional: true
@@ -9890,7 +9724,7 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 10c0/5a25bb08b6ba23db6e66851828d848bd3ff87c005a48c02d83e38879058929878a6baa5a414e1141faee0d1dece3f32b5fbc2a87b82ed6a7aa857cf40359aeb5
+  checksum: 10c0/db9f51248f0560bc46ab219461d338047617f6caf373c95f643b204760bdfa10c95b48cfde948949f7e509599ae4ab61c3f112092a3534936c6abfb800c565b0
   languageName: node
   linkType: hard
 
@@ -10911,12 +10745,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"for-each@npm:^0.3.3":
-  version: 0.3.4
-  resolution: "for-each@npm:0.3.4"
+"for-each@npm:^0.3.3, for-each@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "for-each@npm:0.3.5"
   dependencies:
     is-callable: "npm:^1.2.7"
-  checksum: 10c0/6b2016c0a0fe3107c70a233923cac74f07bedb5a1847636039fa6bcc3df09aefa554cfec23c3342ad365acac1f95e799d9f8e220cb82a4c7b8a84f969234302f
+  checksum: 10c0/0e0b50f6a843a282637d43674d1fb278dda1dd85f4f99b640024cfb10b85058aac0cc781bf689d5fe50b4b7f638e91e548560723a4e76e04fe96ae35ef039cee
   languageName: node
   linkType: hard
 
@@ -11149,21 +10983,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7":
-  version: 1.2.7
-  resolution: "get-intrinsic@npm:1.2.7"
+"get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.5, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.2.7, get-intrinsic@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "get-intrinsic@npm:1.3.0"
   dependencies:
-    call-bind-apply-helpers: "npm:^1.0.1"
+    call-bind-apply-helpers: "npm:^1.0.2"
     es-define-property: "npm:^1.0.1"
     es-errors: "npm:^1.3.0"
-    es-object-atoms: "npm:^1.0.0"
+    es-object-atoms: "npm:^1.1.1"
     function-bind: "npm:^1.1.2"
-    get-proto: "npm:^1.0.0"
+    get-proto: "npm:^1.0.1"
     gopd: "npm:^1.2.0"
     has-symbols: "npm:^1.1.0"
     hasown: "npm:^2.0.2"
     math-intrinsics: "npm:^1.1.0"
-  checksum: 10c0/b475dec9f8bff6f7422f51ff4b7b8d0b68e6776ee83a753c1d627e3008c3442090992788038b37eff72e93e43dceed8c1acbdf2d6751672687ec22127933080d
+  checksum: 10c0/52c81808af9a8130f581e6a6a83e1ba4a9f703359e7a438d1369a5267a25412322f03dcbd7c549edaef0b6214a0630a28511d7df0130c93cfd380f4fa0b5b66a
   languageName: node
   linkType: hard
 
@@ -11622,18 +11456,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"htmlparser2@npm:^9.1.0":
-  version: 9.1.0
-  resolution: "htmlparser2@npm:9.1.0"
-  dependencies:
-    domelementtype: "npm:^2.3.0"
-    domhandler: "npm:^5.0.3"
-    domutils: "npm:^3.1.0"
-    entities: "npm:^4.5.0"
-  checksum: 10c0/394f6323efc265bbc791d8c0d96bfe95984e0407565248521ab92e2dc7668e5ceeca7bc6ed18d408b9ee3b25032c5743368a4280d280332d782821d5d467ad8f
-  languageName: node
-  linkType: hard
-
 "http-assert@npm:^1.3.0":
   version: 1.5.0
   resolution: "http-assert@npm:1.5.0"
@@ -11713,20 +11535,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"http-proxy-middleware@npm:3.0.3":
-  version: 3.0.3
-  resolution: "http-proxy-middleware@npm:3.0.3"
-  dependencies:
-    "@types/http-proxy": "npm:^1.17.15"
-    debug: "npm:^4.3.6"
-    http-proxy: "npm:^1.18.1"
-    is-glob: "npm:^4.0.3"
-    is-plain-object: "npm:^5.0.0"
-    micromatch: "npm:^4.0.8"
-  checksum: 10c0/c4d68a10d8d42f02e59f7dc8249c98d1ac03aecee177b42c2d8b6a0cb6b71c6688e759e5387f4cdb570150070ca1c6808b38010cbdf67f4500a2e75671a36e05
-  languageName: node
-  linkType: hard
-
 "http-proxy-middleware@npm:3.0.5":
   version: 3.0.5
   resolution: "http-proxy-middleware@npm:3.0.5"
@@ -12367,6 +12175,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-negative-zero@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-negative-zero@npm:2.0.3"
+  checksum: 10c0/bcdcf6b8b9714063ffcfa9929c575ac69bfdabb8f4574ff557dfc086df2836cf07e3906f5bbc4f2a5c12f8f3ba56af640c843cdfc74da8caed86c7c7d66fd08e
+  languageName: node
+  linkType: hard
+
 "is-network-error@npm:^1.0.0":
   version: 1.1.0
   resolution: "is-network-error@npm:1.1.0"
@@ -12560,7 +12375,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakref@npm:^1.0.2, is-weakref@npm:^1.1.0":
+"is-weakref@npm:^1.0.2, is-weakref@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-weakref@npm:1.1.1"
   dependencies:
@@ -13266,9 +13081,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"less@npm:4.2.1":
-  version: 4.2.1
-  resolution: "less@npm:4.2.1"
+"less@npm:4.2.2, less@npm:^4.2.0":
+  version: 4.2.2
+  resolution: "less@npm:4.2.2"
   dependencies:
     copy-anything: "npm:^2.0.1"
     errno: "npm:^0.1.1"
@@ -13297,7 +13112,7 @@ __metadata:
       optional: true
   bin:
     lessc: bin/lessc
-  checksum: 10c0/8c9a5fc71ab8bf501e0b739b603cdda23961c1eb72525e4e2509a09cf15dec5f7d56e669ae30b91a16a5cb2fe5d127a8752a9de975de7822098e3814956a316f
+  checksum: 10c0/d472c203a41fb3722a9bf5677f5348e59d8b6589bf2e3933a77c305b42b2ebbe1e3accf145f05b6d2415ba1dad08add7803646947bf867eec7a2a279d758d99a
   languageName: node
   linkType: hard
 
@@ -13336,41 +13151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"less@npm:^4.2.0":
-  version: 4.2.2
-  resolution: "less@npm:4.2.2"
-  dependencies:
-    copy-anything: "npm:^2.0.1"
-    errno: "npm:^0.1.1"
-    graceful-fs: "npm:^4.1.2"
-    image-size: "npm:~0.5.0"
-    make-dir: "npm:^2.1.0"
-    mime: "npm:^1.4.1"
-    needle: "npm:^3.1.0"
-    parse-node-version: "npm:^1.0.1"
-    source-map: "npm:~0.6.0"
-    tslib: "npm:^2.3.0"
-  dependenciesMeta:
-    errno:
-      optional: true
-    graceful-fs:
-      optional: true
-    image-size:
-      optional: true
-    make-dir:
-      optional: true
-    mime:
-      optional: true
-    needle:
-      optional: true
-    source-map:
-      optional: true
-  bin:
-    lessc: bin/lessc
-  checksum: 10c0/d472c203a41fb3722a9bf5677f5348e59d8b6589bf2e3933a77c305b42b2ebbe1e3accf145f05b6d2415ba1dad08add7803646947bf867eec7a2a279d758d99a
-  languageName: node
-  linkType: hard
-
 "levn@npm:^0.4.1":
   version: 0.4.1
   resolution: "levn@npm:0.4.1"
@@ -13461,16 +13241,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lmdb@npm:3.2.2":
-  version: 3.2.2
-  resolution: "lmdb@npm:3.2.2"
-  dependencies:
-    "@lmdb/lmdb-darwin-arm64": "npm:3.2.2"
-    "@lmdb/lmdb-darwin-x64": "npm:3.2.2"
-    "@lmdb/lmdb-linux-arm": "npm:3.2.2"
-    "@lmdb/lmdb-linux-arm64": "npm:3.2.2"
-    "@lmdb/lmdb-linux-x64": "npm:3.2.2"
-    "@lmdb/lmdb-win32-x64": "npm:3.2.2"
+"lmdb@npm:3.2.6":
+  version: 3.2.6
+  resolution: "lmdb@npm:3.2.6"
+  dependencies:
+    "@lmdb/lmdb-darwin-arm64": "npm:3.2.6"
+    "@lmdb/lmdb-darwin-x64": "npm:3.2.6"
+    "@lmdb/lmdb-linux-arm": "npm:3.2.6"
+    "@lmdb/lmdb-linux-arm64": "npm:3.2.6"
+    "@lmdb/lmdb-linux-x64": "npm:3.2.6"
+    "@lmdb/lmdb-win32-x64": "npm:3.2.6"
     msgpackr: "npm:^1.11.2"
     node-addon-api: "npm:^6.1.0"
     node-gyp: "npm:latest"
@@ -13492,7 +13272,7 @@ __metadata:
       optional: true
   bin:
     download-lmdb-prebuilds: bin/download-prebuilds.js
-  checksum: 10c0/fc903c525e1e6ca70fbbd30a43f0bc2924ff442f12289f32c5998bb3af768d36725065f6d879c78c16680a57f36f4cc25f70398a83fd408cd3e0fb761e092c63
+  checksum: 10c0/1b7a4e17351f41ae5cbe79a8db7782f34f24484ffbcba6614b91c7d5d4431284c55d8912065e50d05598de0d6dcd0417608d3705d930a207fbf76019219cc43d
   languageName: node
   linkType: hard
 
@@ -14278,13 +14058,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mrmime@npm:2.0.0":
-  version: 2.0.0
-  resolution: "mrmime@npm:2.0.0"
-  checksum: 10c0/312b35ed288986aec90955410b21ed7427fd1e4ee318cb5fc18765c8d029eeded9444faa46589e5b1ed6b35fb2054a802ac8dcb917ddf6b3e189cb3bf11a965c
-  languageName: node
-  linkType: hard
-
 "mrmime@npm:2.0.1":
   version: 2.0.1
   resolution: "mrmime@npm:2.0.1"
@@ -14418,7 +14191,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.1.25, nanoid@npm:^3.3.4, nanoid@npm:^3.3.7, nanoid@npm:^3.3.8":
+"nanoid@npm:^3.1.25, nanoid@npm:^3.3.4, nanoid@npm:^3.3.8":
   version: 3.3.8
   resolution: "nanoid@npm:3.3.8"
   bin:
@@ -14941,7 +14714,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-inspect@npm:^1.13.3":
+"object-inspect@npm:^1.13.3, object-inspect@npm:^1.13.4":
   version: 1.13.4
   resolution: "object-inspect@npm:1.13.4"
   checksum: 10c0/d7f8711e803b96ea3191c745d6f8056ce1f2496e530e6a19a0e92d89b0fa3c76d910c31f0aa270432db6bd3b2f85500a376a83aaba849a8d518c8845b3211692
@@ -15879,14 +15652,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.49":
-  version: 8.4.49
-  resolution: "postcss@npm:8.4.49"
+"postcss@npm:8.5.2":
+  version: 8.5.2
+  resolution: "postcss@npm:8.5.2"
   dependencies:
-    nanoid: "npm:^3.3.7"
+    nanoid: "npm:^3.3.8"
     picocolors: "npm:^1.1.1"
     source-map-js: "npm:^1.2.1"
-  checksum: 10c0/f1b3f17aaf36d136f59ec373459f18129908235e65dbdc3aee5eef8eba0756106f52de5ec4682e29a2eab53eb25170e7e871b3e4b52a8f1de3d344a514306be3
+  checksum: 10c0/3044d49bc725029ab62292e8bf9849741251b95f3b754e191bf8b4025414d40ec3b4ac05c5a563d4b50060b5c8e96683eb4d783d8d8fa3867eb7b763cbe66127
   languageName: node
   linkType: hard
 
@@ -15901,7 +15674,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.2.14, postcss@npm:^8.4.33, postcss@npm:^8.4.47, postcss@npm:^8.4.49":
+"postcss@npm:^8.2.14":
   version: 8.5.1
   resolution: "postcss@npm:8.5.1"
   dependencies:
@@ -15912,6 +15685,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.33, postcss@npm:^8.4.47, postcss@npm:^8.4.49":
+  version: 8.5.4
+  resolution: "postcss@npm:8.5.4"
+  dependencies:
+    nanoid: "npm:^3.3.11"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10c0/0feff648614a834f7cd5396ea6b05b658ca0507e10a4eaad03b56c348f6aec93f42a885fc1b30522630c6a7e49ae53b38a061e3cba526f2d9857afbe095a22bb
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.5.3":
   version: 8.5.6
   resolution: "postcss@npm:8.5.6"
@@ -16360,7 +16144,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.3":
+"regexp.prototype.flags@npm:^1.5.4":
   version: 1.5.4
   resolution: "regexp.prototype.flags@npm:1.5.4"
   dependencies:
@@ -16620,29 +16404,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:4.30.1":
-  version: 4.30.1
-  resolution: "rollup@npm:4.30.1"
-  dependencies:
-    "@rollup/rollup-android-arm-eabi": "npm:4.30.1"
-    "@rollup/rollup-android-arm64": "npm:4.30.1"
-    "@rollup/rollup-darwin-arm64": "npm:4.30.1"
-    "@rollup/rollup-darwin-x64": "npm:4.30.1"
-    "@rollup/rollup-freebsd-arm64": "npm:4.30.1"
-    "@rollup/rollup-freebsd-x64": "npm:4.30.1"
-    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.30.1"
-    "@rollup/rollup-linux-arm-musleabihf": "npm:4.30.1"
-    "@rollup/rollup-linux-arm64-gnu": "npm:4.30.1"
-    "@rollup/rollup-linux-arm64-musl": "npm:4.30.1"
-    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.30.1"
-    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.30.1"
-    "@rollup/rollup-linux-riscv64-gnu": "npm:4.30.1"
-    "@rollup/rollup-linux-s390x-gnu": "npm:4.30.1"
-    "@rollup/rollup-linux-x64-gnu": "npm:4.30.1"
-    "@rollup/rollup-linux-x64-musl": "npm:4.30.1"
-    "@rollup/rollup-win32-arm64-msvc": "npm:4.30.1"
-    "@rollup/rollup-win32-ia32-msvc": "npm:4.30.1"
-    "@rollup/rollup-win32-x64-msvc": "npm:4.30.1"
+"rollup@npm:4.34.8, rollup@npm:^4.30.1":
+  version: 4.34.8
+  resolution: "rollup@npm:4.34.8"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.34.8"
+    "@rollup/rollup-android-arm64": "npm:4.34.8"
+    "@rollup/rollup-darwin-arm64": "npm:4.34.8"
+    "@rollup/rollup-darwin-x64": "npm:4.34.8"
+    "@rollup/rollup-freebsd-arm64": "npm:4.34.8"
+    "@rollup/rollup-freebsd-x64": "npm:4.34.8"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.34.8"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.34.8"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.34.8"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.34.8"
+    "@rollup/rollup-linux-loongarch64-gnu": "npm:4.34.8"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.34.8"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.34.8"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.34.8"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.34.8"
+    "@rollup/rollup-linux-x64-musl": "npm:4.34.8"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.34.8"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.34.8"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.34.8"
     "@types/estree": "npm:1.0.6"
     fsevents: "npm:~2.3.2"
   dependenciesMeta:
@@ -16688,7 +16472,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: 10c0/a318c57e2ca9741e1503bcd75483949c6e83edd72234a468010a3098a34248f523e44f7ad4fde90dc5c2da56abc1b78ac42a9329e1dbd708682728adbd8df7cc
+  checksum: 10c0/b9e711e33413112fbb761107c3fddc4561dfc74335c393542a829a85ccfb2763bfd17bf2422d84a2e9bee7646e5367018973e97005fdf64e49c2e209612f0eb6
   languageName: node
   linkType: hard
 
@@ -16767,7 +16551,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup@npm:^4.23.0, rollup@npm:^4.24.0, rollup@npm:^4.4.0":
+"rollup@npm:^4.24.0, rollup@npm:^4.4.0":
   version: 4.34.6
   resolution: "rollup@npm:4.34.6"
   dependencies:
@@ -17021,32 +16805,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-loader@npm:16.0.4":
-  version: 16.0.4
-  resolution: "sass-loader@npm:16.0.4"
-  dependencies:
-    neo-async: "npm:^2.6.2"
-  peerDependencies:
-    "@rspack/core": 0.x || 1.x
-    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
-    sass: ^1.3.0
-    sass-embedded: "*"
-    webpack: ^5.0.0
-  peerDependenciesMeta:
-    "@rspack/core":
-      optional: true
-    node-sass:
-      optional: true
-    sass:
-      optional: true
-    sass-embedded:
-      optional: true
-    webpack:
-      optional: true
-  checksum: 10c0/d57c5fa35620e9022cfa3e5d49f3f9b3e54fb8b2fa9d021c10fe26c8c2f77103e038b6540eb20123a6f73aef23d2beb04033d3b7772588ca3f3c0ba2a4ee40ac
-  languageName: node
-  linkType: hard
-
 "sass-loader@npm:16.0.5":
   version: 16.0.5
   resolution: "sass-loader@npm:16.0.5"
@@ -17073,9 +16831,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:1.83.1":
-  version: 1.83.1
-  resolution: "sass@npm:1.83.1"
+"sass@npm:1.85.0":
+  version: 1.85.0
+  resolution: "sass@npm:1.85.0"
   dependencies:
     "@parcel/watcher": "npm:^2.4.1"
     chokidar: "npm:^4.0.0"
@@ -17086,7 +16844,7 @@ __metadata:
       optional: true
   bin:
     sass: sass.js
-  checksum: 10c0/9772506cd8290df7b5e800055098e91a8a65100840fd9e90c660deb74b248b3ddbbd1a274b8f7f09777d472d2c873575357bd87939a40fb5a80bdf654985486f
+  checksum: 10c0/a1af0c0596ae1904f66337d0c70a684db6e12210f97be4326cc3dcf18b0f956d7bc45ab2bcc7a8422d433d3eb3c9cb2cc8e60b2dafbdd01fb1ae5a23f5424690
   languageName: node
   linkType: hard
 
@@ -17131,7 +16889,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"schema-utils@npm:^3.1.0, schema-utils@npm:^3.2.0":
+"schema-utils@npm:^3.1.0":
   version: 3.3.0
   resolution: "schema-utils@npm:3.3.0"
   dependencies:
@@ -17192,12 +16950,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.6.3":
-  version: 7.6.3
-  resolution: "semver@npm:7.6.3"
+"semver@npm:7.7.1, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.3":
+  version: 7.7.1
+  resolution: "semver@npm:7.7.1"
   bin:
     semver: bin/semver.js
-  checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
+  checksum: 10c0/fd603a6fb9c399c6054015433051bdbe7b99a940a8fb44b85c2b524c4004b023d7928d47cb22154f8d054ea7ee8597f586605e05b52047f048278e4ac56ae958
   languageName: node
   linkType: hard
 
@@ -17219,15 +16977,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.3":
-  version: 7.7.1
-  resolution: "semver@npm:7.7.1"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/fd603a6fb9c399c6054015433051bdbe7b99a940a8fb44b85c2b524c4004b023d7928d47cb22154f8d054ea7ee8597f586605e05b52047f048278e4ac56ae958
-  languageName: node
-  linkType: hard
-
 "send@npm:0.19.0":
   version: 0.19.0
   resolution: "send@npm:0.19.0"
@@ -17898,6 +17647,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stop-iteration-iterator@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "stop-iteration-iterator@npm:1.1.0"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    internal-slot: "npm:^1.1.0"
+  checksum: 10c0/de4e45706bb4c0354a4b1122a2b8cc45a639e86206807ce0baf390ee9218d3ef181923fa4d2b67443367c491aa255c5fbaa64bb74648e3c5b48299928af86c09
+  languageName: node
+  linkType: hard
+
 "stream-combiner@npm:~0.0.4":
   version: 0.0.4
   resolution: "stream-combiner@npm:0.0.4"
@@ -18197,29 +17956,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.1.3, terser-webpack-plugin@npm:^5.3.10":
-  version: 5.3.11
-  resolution: "terser-webpack-plugin@npm:5.3.11"
-  dependencies:
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
-    jest-worker: "npm:^27.4.5"
-    schema-utils: "npm:^4.3.0"
-    serialize-javascript: "npm:^6.0.2"
-    terser: "npm:^5.31.1"
-  peerDependencies:
-    webpack: ^5.1.0
-  peerDependenciesMeta:
-    "@swc/core":
-      optional: true
-    esbuild:
-      optional: true
-    uglify-js:
-      optional: true
-  checksum: 10c0/4794274f445dc589f4c113c75a55ce51364ccf09bfe8a545cdb462e3f752bf300ea91f072fa28bbed291bbae03274da06fe4eca180e784fb8a43646aa7dbcaef
-  languageName: node
-  linkType: hard
-
-"terser-webpack-plugin@npm:^5.3.11":
+"terser-webpack-plugin@npm:^5.1.3, terser-webpack-plugin@npm:^5.3.11":
   version: 5.3.14
   resolution: "terser-webpack-plugin@npm:5.3.14"
   dependencies:
@@ -18241,9 +17978,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:5.37.0":
-  version: 5.37.0
-  resolution: "terser@npm:5.37.0"
+"terser@npm:5.39.0":
+  version: 5.39.0
+  resolution: "terser@npm:5.39.0"
   dependencies:
     "@jridgewell/source-map": "npm:^0.3.3"
     acorn: "npm:^8.8.2"
@@ -18251,7 +17988,7 @@ __metadata:
     source-map-support: "npm:~0.5.20"
   bin:
     terser: bin/terser
-  checksum: 10c0/ff0dc79b0a0da821e7f5bf7a047eab6d04e70e88b62339a0f1d71117db3310e255f5c00738fa3b391f56c3571f800a00047720261ba04ced0241c1f9922199f4
+  checksum: 10c0/83326545ea1aecd6261030568b6191ccfa4cb6aa61d9ea41746a52479f50017a78b77e4725fbbc207c5df841ffa66a773c5ac33636e95c7ab94fe7e0379ae5c7
   languageName: node
   linkType: hard
 
@@ -18925,20 +18662,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"update-browserslist-db@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "update-browserslist-db@npm:1.1.2"
-  dependencies:
-    escalade: "npm:^3.2.0"
-    picocolors: "npm:^1.1.1"
-  peerDependencies:
-    browserslist: ">= 4.21.0"
-  bin:
-    update-browserslist-db: cli.js
-  checksum: 10c0/9cb353998d6d7d6ba1e46b8fa3db888822dd972212da4eda609d185eb5c3557a93fd59780ceb757afd4d84240518df08542736969e6a5d6d6ce2d58e9363aac6
-  languageName: node
-  linkType: hard
-
 "update-browserslist-db@npm:^1.1.3":
   version: 1.1.3
   resolution: "update-browserslist-db@npm:1.1.3"
@@ -19052,14 +18775,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:6.0.11":
-  version: 6.0.11
-  resolution: "vite@npm:6.0.11"
+"vite@npm:6.2.7":
+  version: 6.2.7
+  resolution: "vite@npm:6.2.7"
   dependencies:
-    esbuild: "npm:^0.24.2"
+    esbuild: "npm:^0.25.0"
     fsevents: "npm:~2.3.3"
-    postcss: "npm:^8.4.49"
-    rollup: "npm:^4.23.0"
+    postcss: "npm:^8.5.3"
+    rollup: "npm:^4.30.1"
   peerDependencies:
     "@types/node": ^18.0.0 || ^20.0.0 || >=22.0.0
     jiti: ">=1.21.0"
@@ -19100,7 +18823,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: 10c0/a0537f9bf8d6ded740646a4aa44b8dbf442d3005e75f7b27e981ef6011f22d4759f5eb643a393c0ffb8d21e2f50fb5f774d3a53108fb96a10b0f83697e8efe84
+  checksum: 10c0/2da5df6bfdc386a3b24d7350c508e075a49a5b5c33eb4a327203eb175398a1da99d185c68bd2287be897032810700d95ea7ce72d1113d86f43de61f0ce4435da
   languageName: node
   linkType: hard
 
@@ -19420,9 +19143,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack@npm:5.97.1":
-  version: 5.97.1
-  resolution: "webpack@npm:5.97.1"
+"webpack@npm:5.98.0":
+  version: 5.98.0
+  resolution: "webpack@npm:5.98.0"
   dependencies:
     "@types/eslint-scope": "npm:^3.7.7"
     "@types/estree": "npm:^1.0.6"
@@ -19442,9 +19165,9 @@ __metadata:
     loader-runner: "npm:^4.2.0"
     mime-types: "npm:^2.1.27"
     neo-async: "npm:^2.6.2"
-    schema-utils: "npm:^3.2.0"
+    schema-utils: "npm:^4.3.0"
     tapable: "npm:^2.1.1"
-    terser-webpack-plugin: "npm:^5.3.10"
+    terser-webpack-plugin: "npm:^5.3.11"
     watchpack: "npm:^2.4.1"
     webpack-sources: "npm:^3.2.3"
   peerDependenciesMeta:
@@ -19452,7 +19175,7 @@ __metadata:
       optional: true
   bin:
     webpack: bin/webpack.js
-  checksum: 10c0/a12d3dc882ca582075f2c4bd88840be8307427245c90a8a0e0b372d73560df13fcf25a61625c9e7edc964981d16b5a8323640562eb48347cf9dd2f8bd1b39d35
+  checksum: 10c0/bee4fa77f444802f0beafb2ff30eb5454a606163ad7d3cc9a5dcc9d24033c62407bed04601b25dea49ea3969b352c1b530a86c753246f42560a4a084eefb094e
   languageName: node
   linkType: hard
 
@@ -19567,17 +19290,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.18":
-  version: 1.1.18
-  resolution: "which-typed-array@npm:1.1.18"
+"which-typed-array@npm:^1.1.16, which-typed-array@npm:^1.1.19":
+  version: 1.1.19
+  resolution: "which-typed-array@npm:1.1.19"
   dependencies:
     available-typed-arrays: "npm:^1.0.7"
     call-bind: "npm:^1.0.8"
-    call-bound: "npm:^1.0.3"
-    for-each: "npm:^0.3.3"
+    call-bound: "npm:^1.0.4"
+    for-each: "npm:^0.3.5"
+    get-proto: "npm:^1.0.1"
     gopd: "npm:^1.2.0"
     has-tostringtag: "npm:^1.0.2"
-  checksum: 10c0/0412f4a91880ca1a2a63056187c2e3de6b129b2b5b6c17bc3729f0f7041047ae48fb7424813e51506addb2c97320003ee18b8c57469d2cde37983ef62126143c
+  checksum: 10c0/702b5dc878addafe6c6300c3d0af5983b175c75fcb4f2a72dfc3dd38d93cf9e89581e4b29c854b16ea37e50a7d7fca5ae42ece5c273d8060dcd603b2404bbb3f
   languageName: node
   linkType: hard