@keenmate/pure-admin-core 2.6.0 → 2.7.0

package/src/scss/core-components/_timeline.scss

@@ -37,65 +37,65 @@
         width: $timeline-simple-dot-size;
         height: $timeline-simple-dot-size;
         background: var(--pa-main-bg);
-        border: $timeline-simple-dot-border solid $accent-color;
-        border-radius: 50%;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($accent-color, $timeline-simple-dot-shadow-opacity);
+        border: $timeline-simple-dot-border solid var(--pa-accent);
+        border-radius: $timeline-simple-dot-border-radius;
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-accent) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       // Marker color modifiers
       &--primary::before {
-        border-color: $btn-primary-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($btn-primary-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-btn-primary-bg);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-btn-primary-bg) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--success::before {
-        border-color: $success-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($success-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-success);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-success) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--warning::before {
-        border-color: $warning-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($warning-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-warning);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-warning) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--danger::before {
-        border-color: $danger-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($danger-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-danger);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-danger) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--info::before {
-        border-color: $info-bg;
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba($info-bg, $timeline-simple-dot-shadow-opacity);
+        border-color: var(--pa-info);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-info) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       &--secondary::before {
         border-color: var(--pa-text-color-2);
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba(var(--pa-text-color-2), $timeline-simple-dot-shadow-opacity);
+        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur color-mix(in srgb, var(--pa-text-color-2) #{$timeline-simple-dot-shadow-opacity * 100%}, transparent);
       }
 
       // Filled/solid bullet modifier
       &--filled::before {
-        background: $accent-color;
+        background: var(--pa-accent);
       }
 
       &--filled.pa-timeline__item--primary::before {
-        background: $btn-primary-bg;
+        background: var(--pa-btn-primary-bg);
       }
 
       &--filled.pa-timeline__item--success::before {
-        background: $success-bg;
+        background: var(--pa-success);
       }
 
       &--filled.pa-timeline__item--warning::before {
-        background: $warning-bg;
+        background: var(--pa-warning);
       }
 
       &--filled.pa-timeline__item--danger::before {
-        background: $danger-bg;
+        background: var(--pa-danger);
       }
 
       &--filled.pa-timeline__item--info::before {
-        background: $info-bg;
+        background: var(--pa-info);
       }
 
       &--filled.pa-timeline__item--secondary::before {
@@ -131,7 +131,7 @@
       content: '';
       position: absolute;
       width: $timeline-block-line-width;
-      background: $accent-color;
+      background: var(--pa-accent);
       top: 0;
       bottom: 0;
       left: 50%;
@@ -184,7 +184,7 @@
           height: $timeline-block-connector-height;
           top: $timeline-block-connector-top-offset;
           right: $timeline-block-connector-horizontal-offset;
-          background: $accent-color;
+          background: var(--pa-accent);
           z-index: 1;
         }
       }
@@ -229,7 +229,7 @@
           height: $timeline-block-connector-height;
           top: $timeline-block-connector-top-offset;
           left: $timeline-block-connector-horizontal-offset;
-          background: $accent-color;
+          background: var(--pa-accent);
           z-index: 1;
         }
       }
@@ -242,7 +242,7 @@
       text-align: center;
       font-size: $font-size-sm;
       font-weight: $font-weight-bold;
-      color: $accent-color;
+      color: var(--pa-accent);
       text-transform: uppercase;
       letter-spacing: $timeline-block-date-letter-spacing;
       z-index: 1;
@@ -256,16 +256,16 @@
       width: $timeline-block-icon-size;
       height: $timeline-block-icon-size;
       top: $timeline-block-icon-top-offset;
-      background: $warning-bg;
-      border: $timeline-block-icon-border solid $accent-color;
+      background: var(--pa-warning);
+      border: $timeline-block-icon-border solid var(--pa-accent);
       border-radius: 50%;
       font-size: $font-size-lg;
-      color: $accent-color;
+      color: var(--pa-accent);
       z-index: 1;
     }
 
     .pa-timeline__content {
-      background: $warning-bg;
+      background: var(--pa-warning);
       position: relative;
 
       h3 {
@@ -279,7 +279,7 @@
         margin: 0;
         font-size: $font-size-base;
         line-height: $line-height-relaxed;
-        color: $warning-text;
+        color: var(--pa-warning-text);
       }
     }
 
@@ -475,7 +475,7 @@
       line-height: $line-height-relaxed;
 
       a {
-        color: $accent-color;
+        color: var(--pa-accent);
         text-decoration: none;
         font-weight: $font-weight-medium;
 

package/src/scss/core-components/badges/_composite-badge-variants.scss

@@ -316,7 +316,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-primary-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-btn-primary-bg) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -328,7 +328,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-secondary-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-btn-secondary-bg) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -340,7 +340,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-success-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-success) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -353,7 +353,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-warning-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-warning) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -365,7 +365,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-info-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-info) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -378,7 +378,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-light-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-btn-light-bg) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 
@@ -390,7 +390,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 $focus-outline-width rgba($btn-dark-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-btn-dark-bg) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 }

package/src/scss/core-components/badges/_composite-badge.scss

@@ -64,7 +64,7 @@
 
     &:focus {
       outline: none;
-      box-shadow: 0 0 0 $focus-outline-width rgba($danger-bg, $btn-focus-ring-opacity);
+      box-shadow: 0 0 0 $focus-outline-width color-mix(in srgb, var(--pa-danger) #{$btn-focus-ring-opacity * 100%}, transparent);
     }
   }
 }

package/src/scss/core-components/badges/_labels.scss

@@ -74,17 +74,17 @@
   }
 
   &--secondary {
-    background-color: rgba($secondary-bg, $opacity-light);
-    color: $secondary-bg;
-    border-color: $secondary-bg;
+    background-color: color-mix(in srgb, var(--pa-btn-secondary-bg) #{$opacity-light * 100%}, transparent);
+    color: var(--pa-btn-secondary-bg);
+    border-color: var(--pa-btn-secondary-bg);
 
     &.pa-label--outline {
       background-color: transparent;
-      color: $secondary-bg;
-      border-color: $secondary-bg;
+      color: var(--pa-btn-secondary-bg);
+      border-color: var(--pa-btn-secondary-bg);
 
       &:hover {
-        background-color: rgba($secondary-bg, $opacity-light);
+        background-color: color-mix(in srgb, var(--pa-btn-secondary-bg) #{$opacity-light * 100%}, transparent);
       }
     }
   }

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

@@ -38,7 +38,7 @@
 
     &:hover {
       opacity: 1;
-      color: $danger-bg;
+      color: var(--pa-danger);
     }
 
     &:focus {

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

@@ -36,8 +36,8 @@
 
   &__field {
     display: inline;
-    background-color: rgba($accent-color, 0.15);
-    color: $accent-color;
+    background-color: color-mix(in srgb, var(--pa-accent) 15%, transparent);
+    color: var(--pa-accent);
     padding: 0.2rem 0.4rem;
     border-radius: var(--pa-border-radius-sm);
     font-weight: $font-weight-medium;
@@ -45,8 +45,8 @@
 
   &__operator {
     display: inline;
-    background-color: rgba($success-bg, 0.15);
-    color: $success-bg;
+    background-color: color-mix(in srgb, var(--pa-success) 15%, transparent);
+    color: var(--pa-success);
     padding: 0.2rem 0.4rem;
     border-radius: var(--pa-border-radius-sm);
     font-weight: $font-weight-medium;
@@ -221,28 +221,28 @@
   font-weight: $font-weight-medium;
 
   &--field {
-    background-color: rgba($accent-color, 0.15);
+    background-color: color-mix(in srgb, var(--pa-accent) 15%, transparent);
     color: var(--pa-text-color-1);
 
     &.pa-inline-query-token--invalid {
-      background-color: rgba($danger-bg, 0.15);
+      background-color: color-mix(in srgb, var(--pa-danger) 15%, transparent);
       color: var(--pa-text-color-1);
       text-decoration: wavy underline;
     }
   }
 
   &--operator {
-    background-color: rgba(var(--pa-text-color-2), 0.15);
+    background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
     color: var(--pa-text-color-1);
   }
 
   &--value {
-    background-color: rgba($success-bg, 0.15);
+    background-color: color-mix(in srgb, var(--pa-success) 15%, transparent);
     color: var(--pa-text-color-1);
   }
 
   &--keyword {
-    background-color: rgba($warning-bg, 0.15);
+    background-color: color-mix(in srgb, var(--pa-warning) 15%, transparent);
     color: var(--pa-text-color-1);
     font-style: italic;
   }
@@ -304,7 +304,7 @@
       flex-shrink: 0;
       font-size: $font-size-xs;
       padding: 0.2rem 0.6rem;
-      background-color: rgba(var(--pa-text-color-2), 0.1);
+      background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
       color: var(--pa-text-color-2);
       border-radius: var(--pa-border-radius-sm);
       font-family: $body-font-family;

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

@@ -125,6 +125,7 @@
 
         &--active {
           background-color: var(--pa-sidebar-submenu-active-bg);
+          color: var(--pa-sidebar-submenu-active-text);
         }
       }
 

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

@@ -191,6 +191,7 @@ body.pa-layout--sticky .pa-layout__sidebar {
 
     &--active {
       background-color: var(--pa-sidebar-submenu-active-bg);
+      color: var(--pa-sidebar-submenu-active-text);
       border-inline-end-color: var(--pa-accent); // RTL: flips to border-left-color
     }
   }

package/src/scss/variables/_colors.scss

@@ -33,6 +33,7 @@ $sidebar-text-secondary: $base-text-color-2 !default;
 $sidebar-submenu-bg: $base-surface-3 !default;
 $sidebar-submenu-hover-bg: color.adjust($base-surface-3, $lightness: -5%) !default;
 $sidebar-submenu-active-bg: color.adjust($base-surface-3, $lightness: -10%) !default;
+$sidebar-submenu-active-text: $sidebar-text !default;
 
 // Footer colors
 $footer-bg: $base-surface-1 !default;

package/src/scss/variables/_components.scss

@@ -518,7 +518,8 @@ $timeline-simple-dot-offset: -30px !default;
 $timeline-simple-dot-shadow-offset-x: 3px !default;
 $timeline-simple-dot-shadow-offset-y: 3px !default;
 $timeline-simple-dot-shadow-blur: 0 !default;
-$timeline-simple-dot-shadow-opacity: 0.3 !default;
+$timeline-simple-dot-shadow-opacity: 0.5 !default;
+$timeline-simple-dot-border-radius: 30% !default;
 $timeline-simple-content-margin-top: 0.6rem !default;  // 6px (was 0.4rem)
 $timeline-simple-scroll-container-max-height: 400px !default;
 $timeline-simple-scroll-loader-min-height: 60px !default;
@@ -743,7 +744,7 @@ $progress-ring-label-font-size: $font-size-2xs !default;
 $gauge-size: 12rem !default;                 // 120px
 $gauge-track-color: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) !default;
 $gauge-label-font-size: $font-size-xs !default;
-$gauge-value-font-size: $font-size-2xl !default;
+$gauge-value-font-size: $font-size-3xl !default;  // 2.8rem — value gets the whole donut hole (label is now below the gauge)
 $gauge-value-font-weight: $font-weight-bold !default;
 
 // Data bar (pa-data-bar)