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

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

@@ -36,7 +36,7 @@
         top: 0;
         width: $timeline-simple-dot-size;
         height: $timeline-simple-dot-size;
-        background: var(--pa-primary-bg);
+        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);
@@ -69,8 +69,8 @@
       }
 
       &--secondary::before {
-        border-color: var(--pa-text-secondary);
-        box-shadow: $timeline-simple-dot-shadow-offset-x $timeline-simple-dot-shadow-offset-y $timeline-simple-dot-shadow-blur rgba(var(--pa-text-secondary), $timeline-simple-dot-shadow-opacity);
+        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);
       }
 
       // Filled/solid bullet modifier
@@ -99,7 +99,7 @@
       }
 
       &--filled.pa-timeline__item--secondary::before {
-        background: var(--pa-text-secondary);
+        background: var(--pa-text-color-2);
       }
     }
 
@@ -107,13 +107,13 @@
       display: block;
       font-size: $font-size-sm;
       font-weight: $font-weight-semibold;
-      color: var(--pa-text-primary);
+      color: var(--pa-text-color-1);
       margin-bottom: $spacing-xs;
     }
 
     .pa-timeline__content {
       font-size: $font-size-sm;
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       line-height: $line-height-relaxed;
       margin-top: $timeline-simple-content-margin-top;
     }
@@ -170,7 +170,7 @@
           height: $timeline-block-dot-size;
           top: $timeline-block-dot-top-offset;
           right: $timeline-block-dot-horizontal-offset;
-          background: var(--pa-primary-bg);
+          background: var(--pa-main-bg);
           border: $timeline-block-dot-border solid $accent-color;
           border-radius: 50%;
           z-index: 1;
@@ -215,7 +215,7 @@
           height: $timeline-block-dot-size;
           top: $timeline-block-dot-top-offset;
           left: $timeline-block-dot-horizontal-offset;
-          background: var(--pa-primary-bg);
+          background: var(--pa-main-bg);
           border: $timeline-block-dot-border solid $accent-color;
           border-radius: 50%;
           z-index: 1;
@@ -272,7 +272,7 @@
         margin: 0 0 $spacing-sm 0;
         font-size: $font-size-lg;
         font-weight: $font-weight-normal;
-        color: var(--pa-text-primary);
+        color: var(--pa-text-color-1);
       }
 
       p {
@@ -471,7 +471,7 @@
     .pa-timeline__content {
       flex: 1;
       font-size: $font-size-sm;
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       line-height: $line-height-relaxed;
 
       a {
@@ -485,7 +485,7 @@
       }
 
       time {
-        color: var(--pa-text-secondary);
+        color: var(--pa-text-color-2);
         font-size: $font-size-xs;
       }
     }
@@ -515,7 +515,7 @@
 
       p {
         margin: 0 0 $spacing-sm 0;
-        color: var(--pa-text-primary);
+        color: var(--pa-text-color-1);
         line-height: $line-height-relaxed;
 
         &:last-child {
@@ -545,7 +545,7 @@
     .pa-timeline__date-label {
       font-size: $timeline-feed-date-label-font-size;
       font-weight: $font-weight-semibold;
-      color: var(--pa-text-primary);
+      color: var(--pa-text-color-1);
       text-transform: uppercase;
       letter-spacing: $timeline-feed-date-label-letter-spacing;
     }
@@ -555,7 +555,7 @@
       flex-shrink: 0;
       width: $timeline-feed-time-width;
       font-size: $timeline-feed-time-font-size;
-      color: var(--pa-text-secondary);
+      color: var(--pa-text-color-2);
       font-weight: $font-weight-medium;
       text-align: right;
       padding-right: $spacing-sm;
@@ -579,7 +579,7 @@
   &__loader-text {
     margin-top: $spacing-sm;
     font-size: $font-size-sm;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
   }
 
   &__load-more-wrapper {

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

@@ -131,13 +131,13 @@
 .pa-toast__title {
   font-weight: $font-weight-semibold;
   margin: 0 0 $spacing-xs 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: $font-size-sm;
 }
 
 .pa-toast__message {
   margin: 0;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: $font-size-sm;
   line-height: $line-height-base;
 }
@@ -147,7 +147,7 @@
   flex-shrink: 0;
   background: none;
   border: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   padding: 0;
   width: $toast-close-size;
@@ -162,7 +162,7 @@
 
   &:hover {
     background-color: var(--pa-accent-hover);
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
   }
 
   &:focus {

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

@@ -200,7 +200,7 @@
 
   &--warning::before {
     background-color: var(--pa-btn-warning-bg);
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
   }
   &--warning::after {
     border-top-color: var(--pa-btn-warning-bg);
@@ -361,7 +361,7 @@
     border: $border-width-base solid var(--pa-border-color);
     border-radius: 50%;
     background-color: var(--pa-popover-content-bg);
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     font-size: $font-size-xs;
     font-weight: $font-weight-bold;
     cursor: pointer;
@@ -404,7 +404,7 @@
       margin: 0;
       font-size: $popover-title-font-size;
       font-weight: $font-weight-semibold;
-      color: var(--pa-text-primary);
+      color: var(--pa-text-color-1);
     }
   }
 
@@ -412,7 +412,7 @@
     padding: $spacing-base;
     font-size: $font-size-sm;
     line-height: $line-height-base;
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
     text-align: left; // Reset inherited alignment for rich content
 
     p {
@@ -439,7 +439,7 @@
 
     code {
       padding: $popover-code-padding-v $popover-code-padding-h;
-      background-color: color-mix(in srgb, var(--pa-text-secondary) 15%, transparent);
+      background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
       border-radius: $border-radius-sm;
       font-family: monospace;
       font-size: $popover-code-font-scale;
@@ -451,7 +451,7 @@
     border: none;
     font-size: $font-size-lg;
     line-height: 1;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     cursor: pointer;
     padding: 0;
     width: $popover-close-size;
@@ -463,8 +463,8 @@
     transition: all $transition-fast $easing-smooth;
 
     &:hover {
-      background-color: color-mix(in srgb, var(--pa-text-secondary) 10%, transparent);
-      color: var(--pa-text-primary);
+      background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
+      color: var(--pa-text-color-1);
     }
   }
 

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

@@ -122,6 +122,23 @@ html.font-size-4xl {
 .overflow-hidden { overflow: hidden; }
 .overflow-visible { overflow: visible; }
 
+// Overlay scrollbar utilities (scrollbar floats over content, doesn't reduce width)
+// Supported in Chromium browsers; Firefox falls back to auto
+.overflow-overlay {
+  overflow: auto;
+  overflow: overlay;
+}
+
+.overflow-y-overlay {
+  overflow-y: auto;
+  overflow-y: overlay;
+}
+
+.overflow-x-overlay {
+  overflow-x: auto;
+  overflow-x: overlay;
+}
+
 // Cursor utilities
 .cursor-pointer { cursor: pointer; }
 .cursor-help { cursor: help; }
@@ -141,7 +158,7 @@ html.font-size-4xl {
 // ========================================
 .pa-text {
   font-size: $font-size-sm;  // 1.4rem (14px) - default
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 
   // Size modifiers
   &--xs {
@@ -162,11 +179,11 @@ html.font-size-4xl {
 
   // Color modifiers
   &--primary {
-    color: var(--pa-text-primary);
+    color: var(--pa-text-color-1);
   }
 
   &--secondary {
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
   }
 
   // Alignment modifiers
@@ -185,7 +202,7 @@ html.font-size-4xl {
   // Semantic variants (compound styles)
   &--caption {
     font-size: $font-size-xs;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     margin-bottom: $spacing-sm;
   }
 
@@ -197,16 +214,13 @@ html.font-size-4xl {
 
 // Gap utilities (10px rem base)
 // Semantic gap classes using spacing variables
-.gap-0 { gap: 0; }
-.gap-xs { gap: $spacing-xs; }     // 0.25rem = 2.5px
-.gap-sm { gap: $spacing-sm; }     // 0.5rem = 5px
-.gap-md { gap: $spacing-md; }     // 0.75rem = 7.5px
-.gap-base { gap: $spacing-base; } // 1rem = 10px
-.gap-lg { gap: $spacing-lg; }     // 1.5rem = 15px
-.gap-xl { gap: $spacing-xl; }     // 2rem = 20px
-.gap-2xl { gap: $spacing-2xl; }   // 3rem = 30px
-
-// Numeric gap classes (in 10px rem units)
+@each $name, $value in $semantic-spacers {
+  .gap-#{$name} { gap: #{$value}; }
+  .row-gap-#{$name} { row-gap: #{$value}; }
+  .column-gap-#{$name} { column-gap: #{$value}; }
+}
+
+// Numeric gap classes (in 10px rem units) - kept for backwards compatibility
 .gap-1 { gap: 0.1rem; }  // 1px
 .gap-2 { gap: 0.2rem; }  // 2px
 .gap-3 { gap: 0.3rem; }  // 3px
@@ -219,22 +233,6 @@ html.font-size-4xl {
 .gap-15 { gap: 1.5rem; } // 15px
 .gap-20 { gap: 2rem; }   // 20px
 
-// Row gap utilities
-.row-gap-0 { row-gap: 0; }
-.row-gap-xs { row-gap: $spacing-xs; }
-.row-gap-sm { row-gap: $spacing-sm; }
-.row-gap-md { row-gap: $spacing-md; }
-.row-gap-base { row-gap: $spacing-base; }
-.row-gap-lg { row-gap: $spacing-lg; }
-
-// Column gap utilities
-.column-gap-0 { column-gap: 0; }
-.column-gap-xs { column-gap: $spacing-xs; }
-.column-gap-sm { column-gap: $spacing-sm; }
-.column-gap-md { column-gap: $spacing-md; }
-.column-gap-base { column-gap: $spacing-base; }
-.column-gap-lg { column-gap: $spacing-lg; }
-
 // Align-self utilities (for flex/grid children)
 .self-start { align-self: flex-start; }
 .self-center { align-self: center; }
@@ -255,6 +253,13 @@ html.font-size-4xl {
 .text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
 .text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
 
+// Text truncation with ellipsis
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 // Component showcase styling
 .component-showcase {
   display: flex;