@keenmate/pure-admin-core 1.0.0-rc01 → 1.0.0-rc03

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

@@ -0,0 +1,139 @@
+/* ========================================
+   Callout Components
+   Documentation-style callouts with left border accent
+   For tips, notes, warnings in content areas
+   ======================================== */
+@use '../variables' as *;
+
+// Callout base
+.pa-callout {
+  position: relative;
+  padding: $card-footer-padding-v $card-footer-padding-h;
+  margin-bottom: $spacing-base;
+  border-left: $callout-border-width solid var(--pa-border-color);
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  background-color: var(--pa-card-bg);
+
+  // Remove margins when first/last child in card body
+  .pa-card__body &:first-child {
+    margin-top: 0;
+  }
+  .pa-card__body &:last-child {
+    margin-bottom: 0;
+  }
+
+  // Callout variants
+  &--primary {
+    border-left-color: var(--pa-accent);
+    background-color: rgba($accent-color, $opacity-subtle);
+  }
+
+  &--secondary {
+    border-left-color: var(--pa-text-secondary);
+    background-color: color-mix(in srgb, var(--pa-text-secondary) 5%, transparent);
+  }
+
+  &--success {
+    border-left-color: var(--pa-success-bg);
+    background-color: var(--pa-success-bg-subtle);
+  }
+
+  &--danger {
+    border-left-color: var(--pa-danger-bg);
+    background-color: var(--pa-danger-bg-subtle);
+  }
+
+  &--warning {
+    border-left-color: var(--pa-warning-bg);
+    background-color: var(--pa-warning-bg-subtle);
+  }
+
+  &--info {
+    border-left-color: var(--pa-info-bg);
+    background-color: var(--pa-info-bg-subtle);
+  }
+
+  // Callout sizes
+  &--sm {
+    padding: $spacing-sm $spacing-md;
+    font-size: $font-size-xs;
+  }
+
+  &--lg {
+    padding: $spacing-lg $spacing-xl;
+    font-size: $font-size-base;
+  }
+
+  // Callout components
+  &__icon {
+    float: left;
+    margin-right: $spacing-sm;
+    font-size: $font-size-lg;
+    line-height: 1;
+  }
+
+  &__heading {
+    margin: 0 0 $spacing-sm 0;
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+  }
+
+  &__content {
+    // Clearfix for floated icon
+    &::after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+
+  // Remove margin from last child
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  // Paragraphs inside callouts
+  p {
+    margin: 0 0 $spacing-sm 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Lists inside callouts
+  ul, ol {
+    margin: $spacing-sm 0;
+    padding-left: $spacing-lg;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // Code inside callouts
+  code {
+    background-color: rgba(0, 0, 0, $opacity-subtle);
+    padding: 0.1em 0.3em;
+    border-radius: $border-radius-sm;
+    font-size: 0.9em;
+  }
+
+  // Links styling
+  a {
+    color: inherit;
+    text-decoration: underline;
+    font-weight: $font-weight-medium;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Headings inside callouts
+  h1, h2, h3, h4, h5, h6 {
+    color: inherit;
+    margin-top: 0;
+  }
+}

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

@@ -83,12 +83,12 @@
       color: var(--pa-text-primary);
       font-size: $font-size-base;
       font-weight: $font-weight-semibold;
+      line-height: 1;
     }
   }
 
   &__body {
-    padding: $card-body-padding $card-body-padding $card-body-padding
-      $card-body-padding;
+    padding: $card-body-padding-v $card-body-padding-h;
     flex: 1;
 
     // Remove top margin from first child to avoid double spacing with padding

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

@@ -88,11 +88,18 @@
   &__header {
     padding: $spacing-lg;
     background-color: var(--pa-header-bg);
-    border-bottom: $border-width-base solid var(--pa-border-color);
+    border-bottom: 1px solid var(--pa-text-primary);
     display: flex;
     align-items: flex-start;
     gap: $spacing-base;
     position: relative;
+
+    // No-avatar variant for corporate apps without user photos
+    &--no-avatar {
+      .pa-profile-panel__avatar {
+        display: none;
+      }
+    }
   }
 
   &__avatar {
@@ -114,6 +121,7 @@
   &__info {
     flex: 1;
     min-width: 0;
+    padding-right: $profile-close-size; // Space for close button
   }
 
   &__name {
@@ -121,6 +129,10 @@
     font-size: $font-size-lg;
     font-weight: $font-weight-semibold;
     color: var(--pa-text-primary);
+    // Truncate long names
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__email {
@@ -196,8 +208,8 @@
   &__nav-item {
     display: flex;
     align-items: center;
-    gap: $spacing-md;
-    padding: $card-footer-padding-v $card-footer-padding-h;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
     color: var(--pa-text-primary);
     text-decoration: none;
     border-radius: $border-radius;
@@ -217,8 +229,8 @@
   }
 
   &__nav-icon {
-    font-size: $font-size-lg;
-    width: $profile-nav-icon-width;
+    font-size: $font-size-base;
+    width: $sidebar-icon-size;
     text-align: center;
   }
 
@@ -228,54 +240,126 @@
     gap: $spacing-md;
     margin-top: auto;
   }
-}
 
-// Responsive adjustments
-@media (max-width: $mobile-breakpoint) {
-  .pa-profile-panel__content {
-    width: 85vw;
-    max-width: $profile-panel-mobile-max-width;
+  // Tabs section
+  &__tabs {
+    padding: 0 $spacing-lg;
+    border-bottom: $border-width-base solid var(--pa-border-color);
+    background-color: var(--pa-header-bg);
+
+    .pa-tabs {
+      border-bottom: none;
+      margin-bottom: 0;
+    }
+
+    .pa-tabs__item {
+      color: var(--pa-header-text-secondary);
+      border-bottom-color: transparent;
+
+      &:hover {
+        color: var(--pa-header-text);
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      &--active {
+        color: var(--pa-header-text);
+        border-bottom-color: var(--pa-accent);
+      }
+    }
   }
 
-  .pa-header__profile-name {
-    display: none;
+  // Favorites section
+  &__favorites {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      margin-bottom: $spacing-sm;
+    }
   }
-}
 
-// Global scrollbar styling - applies to all content
-/* Webkit browsers (Chrome, Safari, Edge) */
-*::-webkit-scrollbar {
-  width: $scrollbar-width;
-  height: $scrollbar-width;
-}
+  &__favorite-item {
+    display: flex;
+    align-items: center;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
+    color: var(--pa-text-primary);
+    text-decoration: none;
+    border-radius: $border-radius;
+    cursor: pointer;
+    transition: background-color $transition-fast $easing-snappy,
+                color $transition-fast $easing-snappy;
+    font-weight: $font-weight-medium;
 
-*::-webkit-scrollbar-track {
-  background: var(--pa-primary-bg);
-  border-radius: $border-radius;
-}
+    &:hover {
+      background-color: var(--pa-accent-light);
+      color: var(--pa-accent);
+    }
 
-*::-webkit-scrollbar-thumb {
-  background: $border-color;
-  border-radius: $border-radius;
-  border: $border-width-base solid var(--pa-primary-bg);
+    &:focus {
+      outline: $focus-outline-width solid var(--pa-accent);
+      outline-offset: $focus-outline-offset;
+    }
+  }
 
-  &:hover {
-    background: $accent-color;
-    border-color: $accent-hover;
+  &__favorite-icon {
+    font-size: $font-size-base;
+    width: $sidebar-icon-size;
+    text-align: center;
   }
 
-  &:active {
-    background: $accent-hover;
+  &__favorite-label {
+    flex: 1;
   }
-}
 
-*::-webkit-scrollbar-corner {
-  background: var(--pa-primary-bg);
-}
+  // Favorite remove button
+  &__favorite-remove {
+    opacity: 0;
+    margin-left: auto;
+    background: none;
+    border: none;
+    padding: $spacing-sm;
+    color: var(--pa-text-secondary);
+    cursor: pointer;
+    border-radius: $border-radius;
+    font-size: $font-size-sm;
+    line-height: 1;
+    transition: opacity $transition-fast $easing-snappy,
+                color $transition-fast $easing-snappy,
+                background-color $transition-fast $easing-snappy;
+
+    &:hover {
+      color: var(--pa-danger);
+      background-color: var(--pa-danger-bg-light);
+    }
+  }
 
-/* Firefox */
-* {
-  scrollbar-width: auto;
-  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+  // Show remove button on favorite-item hover
+  &__favorite-item:hover &__favorite-remove {
+    opacity: 1;
+  }
+
+  &__favorites-add {
+    margin-top: auto;
+    padding-top: $spacing-md;
+  }
 }
 
+// Responsive adjustments
+@media (max-width: $mobile-breakpoint) {
+  .pa-profile-panel__content {
+    width: 85vw;
+    max-width: $profile-panel-mobile-max-width;
+  }
+
+  .pa-header__profile-name {
+    display: none;
+  }
+}

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

@@ -0,0 +1,41 @@
+// ============================================================================
+// SCROLLBARS
+// Global scrollbar styling for consistent appearance across browsers
+// ============================================================================
+@use '../variables' as *;
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: $scrollbar-width;
+  height: $scrollbar-width;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pa-primary-bg);
+  border-radius: $scrollbar-border-radius;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: $border-color;
+  border-radius: $scrollbar-border-radius;
+  border: $border-width-base solid var(--pa-primary-bg);
+
+  &:hover {
+    background: $accent-color;
+    border-color: $accent-hover;
+  }
+
+  &:active {
+    background: $accent-hover;
+  }
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pa-primary-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+}

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

@@ -75,7 +75,7 @@
       font-size: $font-size-4xl;
       font-weight: $font-weight-bold;
       color: var(--pa-text-primary);
-      line-height: 1;
+      line-height: 1.1;
       margin-bottom: $spacing-sm;
     }
 
@@ -120,7 +120,7 @@
     .pa-stat__number {
       font-size: clamp($stat-square-number-min, $stat-square-number-scale, $stat-square-number-max);
       font-weight: $font-weight-bold;
-      line-height: 1;
+      line-height: 1.1;
       color: inherit;
       z-index: $focus-outline-width;
       position: relative;
@@ -134,7 +134,7 @@
     .pa-stat__symbol {
       font-size: clamp($stat-square-symbol-min, $stat-square-symbol-scale, $stat-square-symbol-max);
       font-weight: $font-weight-bold;
-      line-height: 1;
+      line-height: 1.1;
       opacity: $stat-symbol-opacity;
       color: inherit;
       position: absolute;

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

@@ -540,16 +540,3 @@
   }
 }
 
-// Text utilities for tables
-.text-success {
-  color: var(--pa-success-bg);
-}
-
-.text-danger {
-  color: var(--pa-danger-bg);
-}
-
-.text-warning {
-  color: var(--pa-warning-bg);
-}
-

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

@@ -304,7 +304,7 @@
     &--bordered {
       border: $border-width-base solid var(--pa-border-color);
       border-radius: $border-radius-lg;
-      padding: $card-body-padding;
+      padding: $card-body-padding-v $card-body-padding-h;
       background-color: var(--pa-card-bg);
 
       // Remove bottom border from tabs since wrapper has border
@@ -337,7 +337,7 @@
     &--bordered {
       border: $border-width-base solid var(--pa-border-color);
       border-radius: $border-radius-lg;
-      padding: $card-body-padding;
+      padding: $card-body-padding-v $card-body-padding-h;
       background-color: var(--pa-card-bg);
 
       // Add divider between tabs and content (gap already provides spacing)

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

@@ -195,6 +195,59 @@ 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)
+.gap-1 { gap: 0.1rem; }  // 1px
+.gap-2 { gap: 0.2rem; }  // 2px
+.gap-3 { gap: 0.3rem; }  // 3px
+.gap-4 { gap: 0.4rem; }  // 4px
+.gap-5 { gap: 0.5rem; }  // 5px
+.gap-6 { gap: 0.6rem; }  // 6px
+.gap-8 { gap: 0.8rem; }  // 8px
+.gap-10 { gap: 1rem; }   // 10px
+.gap-12 { gap: 1.2rem; } // 12px
+.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; }
+
+// Font-size utilities (10px rem base)
+// Direct font-size classes using typography variables
+.text-2xs { font-size: $font-size-2xs; }   // 1rem = 10px
+.text-xs  { font-size: $font-size-xs; }    // 1.2rem = 12px
+.text-sm  { font-size: $font-size-sm; }    // 1.4rem = 14px
+.text-md  { font-size: $font-size-md; }    // 1.5rem = 15px
+.text-base { font-size: $font-size-base; } // 1.6rem = 16px
+.text-lg  { font-size: $font-size-lg; }    // 1.8rem = 18px
+.text-xl  { font-size: $font-size-xl; }    // 2rem = 20px
+.text-2xl { font-size: $font-size-2xl; }   // 2.4rem = 24px
+.text-3xl { font-size: $font-size-3xl; }   // 2.8rem = 28px
+.text-4xl { font-size: $font-size-4xl; }   // 3.2rem = 32px
+
 // Component showcase styling
 .component-showcase {
   display: flex;