@keenmate/pure-admin-core 1.0.0-rc06 → 1.1.0

package/src/scss/core-components/forms/_form-layout.scss

@@ -31,7 +31,7 @@
     flex-shrink: 0;
     padding-top: $input-padding-v;
     margin-bottom: 0;
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
     font-weight: $font-weight-medium;
     font-size: $font-size-sm;
   }
@@ -51,7 +51,7 @@
       align-items: center;
       gap: $form-scale;
       margin-bottom: $form-label-margin-bottom;
-      color: var(--pa-text-primary);
+      color: var(--pa-text-color-1);
       font-weight: $font-weight-medium;
       font-size: $font-size-sm;
     }

package/src/scss/core-components/forms/_form-states.scss

@@ -77,7 +77,7 @@
   display: block;
   margin-top: $form-help-margin-top;
   font-size: $font-size-xs;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 
   &--error {
     color: var(--pa-danger-bg);

package/src/scss/core-components/forms/_input-groups.scss

@@ -35,10 +35,11 @@
   &__append {
     display: flex;
     align-items: center;
-    padding: $input-padding-v $input-padding-h;
+    height: #{$base-input-size-md-height}rem;
+    line-height: #{$base-input-size-md-height}rem;
+    padding: 0 $input-padding-h;
     border: $border-width-base solid var(--pa-border-color);
     font-size: $font-size-sm;
-    line-height: 1;
     white-space: nowrap;
     border-radius: 0;
   }
@@ -74,8 +75,8 @@
     border-left: $border-width-base solid var(--pa-border-color);
   }
 
-  // When input is focused, only show focus border on edges adjacent to input
-  &:focus-within {
+  // When input is focused, show focus border on adjacent prepend/append
+  &:has(.pa-input:focus) {
     // Last prepend (one before input) gets focus border
     .pa-input-group__prepend {
       border-right: $border-width-base solid var(--pa-input-focus-border-color);
@@ -99,13 +100,10 @@
 
   &__button {
     border-radius: 0;
-    border-color: var(--pa-border-color);
-    border-left: none;
 
     &:first-child {
       border-top-left-radius: $border-radius;
       border-bottom-left-radius: $border-radius;
-      border-left: $border-width-base solid var(--pa-border-color);
     }
 
     &:last-child {
@@ -118,7 +116,8 @@
   &--xs {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-xs-v $input-padding-h;
+      height: #{$base-input-size-xs-height}rem;
+      line-height: #{$base-input-size-xs-height}rem;
       font-size: $font-size-xs;
     }
   }
@@ -126,7 +125,8 @@
   &--sm {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-sm-height}rem;
+      line-height: #{$base-input-size-sm-height}rem;
       font-size: $font-size-sm;
     }
   }
@@ -134,7 +134,8 @@
   &--lg {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-lg-height}rem;
+      line-height: #{$base-input-size-lg-height}rem;
       font-size: $font-size-base;
     }
   }
@@ -142,7 +143,8 @@
   &--xl {
     .pa-input-group__prepend,
     .pa-input-group__append {
-      padding: $input-padding-v $input-padding-h;
+      height: #{$base-input-size-xl-height}rem;
+      line-height: #{$base-input-size-xl-height}rem;
       font-size: $font-size-lg;
     }
   }

package/src/scss/core-components/forms/_input-wrapper.scss

@@ -28,7 +28,7 @@
     transform: translateY(-50%);
     background: transparent;
     border: none;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     cursor: pointer;
     padding: $spacing-xs;
     font-size: $font-size-base;

package/src/scss/core-components/forms/_query-editor.scss

@@ -31,7 +31,7 @@
     position: relative;
     z-index: 1;
     background: transparent;
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
   }
 
   &__field {
@@ -87,7 +87,7 @@
     &-type {
       margin-left: auto;
       font-size: $font-size-xs;
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       opacity: 0.7;
     }
   }
@@ -96,7 +96,7 @@
     padding: $spacing-xs $spacing-md;
     font-size: $font-size-xs;
     font-weight: $font-weight-medium;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     text-transform: uppercase;
     letter-spacing: 0.05em;
     background-color: var(--pa-card-header-bg);
@@ -106,7 +106,7 @@
   &__empty {
     padding: $spacing-md;
     text-align: center;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     font-size: $font-size-sm;
   }
 }
@@ -120,7 +120,7 @@
   border-radius: $border-radius;
   font-size: $font-size-sm;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   cursor: text;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -135,7 +135,7 @@
 
   &:empty::before {
     content: attr(data-placeholder);
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     opacity: 0.7;
     pointer-events: none;
   }
@@ -195,7 +195,7 @@
     font-family: $body-font-family;
     background: transparent;
     color: transparent;
-    caret-color: var(--pa-text-primary);
+    caret-color: var(--pa-text-color-1);
     resize: none;
     overflow: hidden;
     line-height: 1.5;
@@ -209,7 +209,7 @@
     }
 
     &::placeholder {
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       opacity: 0.7;
     }
   }
@@ -222,28 +222,28 @@
 
   &--field {
     background-color: rgba($accent-color, 0.15);
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
 
     &.pa-inline-query-token--invalid {
       background-color: rgba($danger-bg, 0.15);
-      color: var(--pa-text-primary);
+      color: var(--pa-text-color-1);
       text-decoration: wavy underline;
     }
   }
 
   &--operator {
-    background-color: rgba(var(--pa-text-secondary), 0.15);
-    color: var(--pa-text-primary);
+    background-color: rgba(var(--pa-text-color-2), 0.15);
+    color: var(--pa-text-color-1);
   }
 
   &--value {
     background-color: rgba($success-bg, 0.15);
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
   }
 
   &--keyword {
     background-color: rgba($warning-bg, 0.15);
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
     font-style: italic;
   }
 }
@@ -295,7 +295,7 @@
     &-type {
       display: block;
       font-size: $font-size-xs;
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       opacity: 0.7;
       line-height: 1.3;
     }
@@ -304,8 +304,8 @@
       flex-shrink: 0;
       font-size: $font-size-xs;
       padding: 0.2rem 0.6rem;
-      background-color: rgba(var(--pa-text-secondary), 0.1);
-      color: var(--pa-text-secondary);
+      background-color: rgba(var(--pa-text-color-2), 0.1);
+      color: var(--pa-text-color-2);
       border-radius: 0.4rem;
       font-family: $body-font-family;
     }

package/src/scss/core-components/layout/_layout-container.scss

@@ -14,7 +14,7 @@ body.pa-layout--sticky {
 .pa-layout {
   max-width: 100%;
   margin: $header-height auto 0;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   overflow: visible; // Allow tooltips to escape
   display: flex;
   flex-direction: column;
@@ -133,3 +133,35 @@ body.pa-layout--sticky .pa-layout__inner {
     gap: $spacing-xs;
   }
 }
+
+// Responsive footer - stack sections on mobile
+@media (max-width: $mobile-breakpoint) {
+  .pa-layout__footer {
+    flex-wrap: wrap;
+    min-height: auto;
+    padding: $spacing-sm $spacing-base;
+  }
+
+  .pa-footer__left,
+  .pa-footer__center,
+  .pa-footer__right {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .pa-footer__left {
+    flex: 1 1 auto;
+  }
+
+  .pa-footer__center {
+    display: none; // Hide empty center on mobile
+  }
+
+  .pa-footer__right {
+    flex: 0 1 auto;
+
+    &--vertical {
+      align-items: flex-end;
+    }
+  }
+}

package/src/scss/core-components/layout/_navbar-elements.scss

@@ -128,7 +128,7 @@
       a {
         display: block;
         padding: $spacing-sm $spacing-base;
-        color: var(--pa-text-primary);
+        color: var(--pa-text-color-1);
         border-radius: 0;
         white-space: nowrap;
         text-decoration: none;

package/src/scss/core-components/layout/_sidebar.scss

@@ -4,17 +4,68 @@
    ======================================== */
 @use '../../variables' as *;
 
-// Sidebar layout element
+// Local CSS variables for sidebar (runtime state, modified by JS for resize)
+:root {
+  --pa-local-sidebar-width: #{$sidebar-width};
+  --pa-local-sidebar-min-width: 18rem;
+  --pa-local-sidebar-max-width: 50rem;
+}
+
+// Sidebar layout element - width in :where() for low specificity (utility classes can override)
+:where(.pa-layout__sidebar) {
+  width: var(--pa-local-sidebar-width);
+}
+
 .pa-layout__sidebar {
-  width: $sidebar-width;
   background-color: var(--pa-sidebar-bg);
   border-right: $border-width-base solid var(--pa-border-color);
   flex-shrink: 0;
+  position: relative;
+}
+
+// Resize handle on sidebar edge
+.pa-sidebar-resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 100;
+
+  // Visual indicator on hover
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 2px;
+    height: 100%;
+    background-color: transparent;
+    transition: background-color $transition-fast $easing-snappy;
+  }
+
+  &:hover::after,
+  &--active::after {
+    background-color: var(--pa-accent);
+  }
+}
+
+// Disable text selection during resize
+body.pa-sidebar-resizing {
+  cursor: ew-resize !important;
+  user-select: none;
+
+  * {
+    cursor: ew-resize !important;
+  }
 }
 
 // Sticky mode - sidebar scrolls
 body.pa-layout--sticky .pa-layout__sidebar {
   overflow-y: auto;
+  overflow-y: overlay; // Chromium: scrollbar overlays content, doesn't reduce width
   overflow-x: visible; // Allow tooltips to escape right
 }
 

package/src/scss/utilities.scss

@@ -2,6 +2,8 @@
 // Spacing utilities similar to Bootstrap/Tailwind
 // Based on rem units: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5
 
+@use './variables' as *;
+
 // Spacing scale
 $spacers: (
   0: 0,
@@ -129,6 +131,28 @@ $spacers: (
   margin-bottom: auto !important;
 }
 
+// Semantic margin utilities (using spacing variables)
+@each $name, $value in $semantic-spacers {
+  .m-#{$name} { margin: #{$value} !important; }
+  .mt-#{$name} { margin-top: #{$value} !important; }
+  .mr-#{$name} { margin-right: #{$value} !important; }
+  .mb-#{$name} { margin-bottom: #{$value} !important; }
+  .ml-#{$name} { margin-left: #{$value} !important; }
+  .mx-#{$name} { margin-left: #{$value} !important; margin-right: #{$value} !important; }
+  .my-#{$name} { margin-top: #{$value} !important; margin-bottom: #{$value} !important; }
+}
+
+// Semantic padding utilities (using spacing variables)
+@each $name, $value in $semantic-spacers {
+  .p-#{$name} { padding: #{$value} !important; }
+  .pt-#{$name} { padding-top: #{$value} !important; }
+  .pr-#{$name} { padding-right: #{$value} !important; }
+  .pb-#{$name} { padding-bottom: #{$value} !important; }
+  .pl-#{$name} { padding-left: #{$value} !important; }
+  .px-#{$name} { padding-left: #{$value} !important; padding-right: #{$value} !important; }
+  .py-#{$name} { padding-top: #{$value} !important; padding-bottom: #{$value} !important; }
+}
+
 // Display utilities
 .d-none {
   display: none !important;
@@ -277,9 +301,12 @@ $spacers: (
 .w-100 { width: 100% !important; }
 .w-auto { width: auto !important; }
 
-// Width utilities (fractions) - matches grid naming: pa-col-1-3, pa-col-2-3
+// Width utilities (fractions) - matches grid naming
+.w-1-2 { width: 50% !important; }
 .w-1-3 { width: 33.333333% !important; }
 .w-2-3 { width: 66.666667% !important; }
+.w-1-4 { width: 25% !important; }
+.w-3-4 { width: 75% !important; }
 
 // Min-width utilities
 .mw-25 { min-width: 25% !important; }
@@ -287,16 +314,22 @@ $spacers: (
 .mw-75 { min-width: 75% !important; }
 .mw-100 { min-width: 100% !important; }
 .mw-auto { min-width: auto !important; }
+.mw-1-2 { min-width: 50% !important; }
 .mw-1-3 { min-width: 33.333333% !important; }
 .mw-2-3 { min-width: 66.666667% !important; }
+.mw-1-4 { min-width: 25% !important; }
+.mw-3-4 { min-width: 75% !important; }
 
 // Fixed width utilities (min-width + width locked)
 .w-25-fixed { min-width: 25% !important; width: 25% !important; }
 .w-50-fixed { min-width: 50% !important; width: 50% !important; }
 .w-75-fixed { min-width: 75% !important; width: 75% !important; }
 .w-100-fixed { min-width: 100% !important; width: 100% !important; }
+.w-1-2-fixed { min-width: 50% !important; width: 50% !important; }
 .w-1-3-fixed { min-width: 33.333333% !important; width: 33.333333% !important; }
 .w-2-3-fixed { min-width: 66.666667% !important; width: 66.666667% !important; }
+.w-1-4-fixed { min-width: 25% !important; width: 25% !important; }
+.w-3-4-fixed { min-width: 75% !important; width: 75% !important; }
 
 // Height utilities
 .h-25 {
@@ -319,10 +352,17 @@ $spacers: (
   height: auto !important;
 }
 
+// Height utilities (fractions)
+.h-1-2 { height: 50% !important; }
+.h-1-3 { height: 33.333333% !important; }
+.h-2-3 { height: 66.666667% !important; }
+.h-1-4 { height: 25% !important; }
+.h-3-4 { height: 75% !important; }
+
 // ============================================================================
 // REM-BASED SIZING UTILITIES
 // Use 'r' suffix to distinguish from percentage-based utilities
-// Values: 1-10, 15, 20, 25 (rem)
+// Values: 1-10, 15, 20, 25, 30, 35, 40, 45, 50 (rem)
 // ============================================================================
 
 // Width (rem)
@@ -339,6 +379,11 @@ $spacers: (
 .wr-15 { width: 15rem !important; }
 .wr-20 { width: 20rem !important; }
 .wr-25 { width: 25rem !important; }
+.wr-30 { width: 30rem !important; }
+.wr-35 { width: 35rem !important; }
+.wr-40 { width: 40rem !important; }
+.wr-45 { width: 45rem !important; }
+.wr-50 { width: 50rem !important; }
 
 // Min-width (rem)
 .minwr-1 { min-width: 1rem !important; }
@@ -354,6 +399,11 @@ $spacers: (
 .minwr-15 { min-width: 15rem !important; }
 .minwr-20 { min-width: 20rem !important; }
 .minwr-25 { min-width: 25rem !important; }
+.minwr-30 { min-width: 30rem !important; }
+.minwr-35 { min-width: 35rem !important; }
+.minwr-40 { min-width: 40rem !important; }
+.minwr-45 { min-width: 45rem !important; }
+.minwr-50 { min-width: 50rem !important; }
 
 // Max-width (rem)
 .maxwr-1 { max-width: 1rem !important; }
@@ -369,6 +419,11 @@ $spacers: (
 .maxwr-15 { max-width: 15rem !important; }
 .maxwr-20 { max-width: 20rem !important; }
 .maxwr-25 { max-width: 25rem !important; }
+.maxwr-30 { max-width: 30rem !important; }
+.maxwr-35 { max-width: 35rem !important; }
+.maxwr-40 { max-width: 40rem !important; }
+.maxwr-45 { max-width: 45rem !important; }
+.maxwr-50 { max-width: 50rem !important; }
 
 // Height (rem)
 .hr-1 { height: 1rem !important; }
@@ -384,6 +439,11 @@ $spacers: (
 .hr-15 { height: 15rem !important; }
 .hr-20 { height: 20rem !important; }
 .hr-25 { height: 25rem !important; }
+.hr-30 { height: 30rem !important; }
+.hr-35 { height: 35rem !important; }
+.hr-40 { height: 40rem !important; }
+.hr-45 { height: 45rem !important; }
+.hr-50 { height: 50rem !important; }
 
 // Min-height (rem)
 .minhr-1 { min-height: 1rem !important; }
@@ -399,6 +459,11 @@ $spacers: (
 .minhr-15 { min-height: 15rem !important; }
 .minhr-20 { min-height: 20rem !important; }
 .minhr-25 { min-height: 25rem !important; }
+.minhr-30 { min-height: 30rem !important; }
+.minhr-35 { min-height: 35rem !important; }
+.minhr-40 { min-height: 40rem !important; }
+.minhr-45 { min-height: 45rem !important; }
+.minhr-50 { min-height: 50rem !important; }
 
 // Max-height (rem)
 .maxhr-1 { max-height: 1rem !important; }
@@ -414,6 +479,11 @@ $spacers: (
 .maxhr-15 { max-height: 15rem !important; }
 .maxhr-20 { max-height: 20rem !important; }
 .maxhr-25 { max-height: 25rem !important; }
+.maxhr-30 { max-height: 30rem !important; }
+.maxhr-35 { max-height: 35rem !important; }
+.maxhr-40 { max-height: 40rem !important; }
+.maxhr-45 { max-height: 45rem !important; }
+.maxhr-50 { max-height: 50rem !important; }
 
 // ============================================================================
 // PERCENTAGE-BASED MIN/MAX UTILITIES
@@ -465,8 +535,11 @@ $spacers: (
 .maxw-90 { max-width: 90% !important; }
 .maxw-95 { max-width: 95% !important; }
 .maxw-100 { max-width: 100% !important; }
+.maxw-1-2 { max-width: 50% !important; }
 .maxw-1-3 { max-width: 33.333333% !important; }
 .maxw-2-3 { max-width: 66.666667% !important; }
+.maxw-1-4 { max-width: 25% !important; }
+.maxw-3-4 { max-width: 75% !important; }
 
 // Min-height (percentage)
 .minh-5 { min-height: 5% !important; }
@@ -489,8 +562,11 @@ $spacers: (
 .minh-90 { min-height: 90% !important; }
 .minh-95 { min-height: 95% !important; }
 .minh-100 { min-height: 100% !important; }
+.minh-1-2 { min-height: 50% !important; }
 .minh-1-3 { min-height: 33.333333% !important; }
 .minh-2-3 { min-height: 66.666667% !important; }
+.minh-1-4 { min-height: 25% !important; }
+.minh-3-4 { min-height: 75% !important; }
 
 // Max-height (percentage)
 .maxh-5 { max-height: 5% !important; }
@@ -513,8 +589,11 @@ $spacers: (
 .maxh-90 { max-height: 90% !important; }
 .maxh-95 { max-height: 95% !important; }
 .maxh-100 { max-height: 100% !important; }
+.maxh-1-2 { max-height: 50% !important; }
 .maxh-1-3 { max-height: 33.333333% !important; }
 .maxh-2-3 { max-height: 66.666667% !important; }
+.maxh-1-4 { max-height: 25% !important; }
+.maxh-3-4 { max-height: 75% !important; }
 
 // Position utilities
 .position-static {

package/src/scss/variables/_base.scss

@@ -33,20 +33,30 @@ $base-text-color-4: #a3b1bf !default;  // Quaternary text (lightest)
 $base-text-color-on-accent: #ffffff !default;  // Text on accent backgrounds
 
 // =============================================================================
-// SURFACE COLORS
-// Background colors for different surface levels
+// BACKGROUND COLORS
+// Semantic background colors for different purposes
 // =============================================================================
 
-$base-surface-1: #ffffff !default;     // Primary surface (cards, modals)
-$base-surface-2: #f8f9fa !default;     // Secondary surface (subtle backgrounds)
-$base-surface-3: #e9ecef !default;     // Tertiary surface (dividers, borders)
-$base-surface-inverse: #2c3e50 !default;  // Inverse surface (tooltips, dark elements)
+$base-main-bg: #ffffff !default;          // Primary background (cards, modals, content)
+$base-page-bg: #f8f9fa !default;          // Page background, subtle sections
+$base-subtle-bg: #e9ecef !default;        // Muted areas, dividers
+$base-inverse-bg: #2c3e50 !default;       // Inverse background (tooltips, dark elements)
 $base-overlay-bg: rgba(0, 0, 0, 0.5) !default;  // Modal/overlay background
 $base-shadow-color: rgba(0, 0, 0, 0.15) !default;  // Shadow color for elevation
-
-// Backward compatibility mappings
-$base-primary-bg: $base-surface-1 !default;
-$base-primary-bg-hover: color.adjust($base-primary-bg, $lightness: -5%) !default;
+$base-elevated-bg: #f5f5f5 !default;  // Header row, striped rows, elevated surfaces
+
+// Interactive state backgrounds
+$base-hover-bg: $base-subtle-bg !default;         // Hover state background
+$base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;  // Active/pressed state
+$base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
+
+// Legacy aliases (backward compatibility)
+$base-surface-1: $base-main-bg !default;
+$base-surface-2: $base-page-bg !default;
+$base-surface-3: $base-subtle-bg !default;
+$base-surface-inverse: $base-inverse-bg !default;
+$base-primary-bg: $base-main-bg !default;
+$base-primary-bg-hover: color.adjust($base-main-bg, $lightness: -5%) !default;
 
 // =============================================================================
 // BORDER COLORS

package/src/scss/variables/_colors.scss

@@ -5,18 +5,19 @@
 // ============================================================================
 
 @use 'sass:color';
-@use 'base' as *;
+// NOTE: Base variables are available in global scope via @import in _index.scss
+// No @use 'base' needed since we use @import for proper !default cascading
 
 // =============================================================================
 // LAYOUT COLORS (derived from base)
 // =============================================================================
 
-$primary-bg: $base-surface-2 !default;
-$bg-secondary: $base-surface-2 !default;
-$text-primary: $base-text-color-1 !default;
-$text-secondary: $base-text-color-2 !default;
+$main-bg: $base-page-bg !default;
+$page-bg: $base-page-bg !default;
+$subtle-bg: $base-main-bg !default;
+$text-color-1: $base-text-color-1 !default;
+$text-color-2: $base-text-color-2 !default;
 $border-color: $base-border-color !default;
-$content-background-color: $base-surface-1 !default;
 
 // Header colors
 $header-bg: $base-surface-1 !default;

package/src/scss/variables/_components.scss

@@ -3,12 +3,9 @@
 // Component-specific dimensions, paddings, and settings
 // ============================================================================
 
-@use 'base' as *;
-@use 'layout' as *;
-@use 'typography' as *;
-@use 'spacing' as *;
-@use 'colors' as *;
-@use 'system' as *;
+// NOTE: All base, layout, typography, spacing, colors, and system variables
+// are available in global scope via @import in _index.scss
+// No @use needed since we use @import for proper !default cascading
 
 // NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px)
 
@@ -229,9 +226,9 @@ $input-focus-border-color: $accent-color !default;
 $select-focus-border-color: $accent-color !default;
 $textarea-focus-border-color: $accent-color !default;
 $input-group-prepend-bg: $secondary-bg !default;
-$input-group-prepend-text: $text-secondary !default;
+$input-group-prepend-text: $text-color-2 !default;
 $input-group-append-bg: $secondary-bg !default;
-$input-group-append-text: $text-secondary !default;
+$input-group-append-text: $text-color-2 !default;
 $checkbox-margin-top: 0.2rem !default;        // 2px (was 0.125rem)
 $checkbox-size-xs: 1.2rem !default;           // 12px (was 0.75rem)
 $checkbox-size-sm: 1.4rem !default;           // 14px (was 0.875rem)
@@ -260,15 +257,15 @@ $multiselect-input-padding-v: $input-padding-v !default;
 $multiselect-input-padding-h: $input-padding-h !default;
 $multiselect-dropdown-bg: $card-bg !default;
 $multiselect-dropdown-border: $border-color !default;
-$multiselect-dropdown-text: $text-primary !default;
+$multiselect-dropdown-text: $text-color-1 !default;
 $multiselect-dropdown-shadow: $shadow-lg !default;
 $multiselect-dropdown-max-height: 32rem !default;  // 320px (was 20rem)
-$multiselect-hint-bg: $primary-bg !default;
+$multiselect-hint-bg: $main-bg !default;
 $multiselect-hint-border: $border-color !default;
 $multiselect-hint-padding: $spacing-sm !default;
 $multiselect-option-padding-v: $spacing-sm !default;
 $multiselect-option-padding-h: $spacing-md !default;
-$multiselect-option-hover-bg: $primary-bg !default;
+$multiselect-option-hover-bg: $main-bg !default;
 $multiselect-pill-bg: $accent-light !default;
 $multiselect-pill-border: $accent-color !default;
 $multiselect-pill-padding: $spacing-xs $spacing-sm !default;