@keenmate/pure-admin-core 2.3.1 → 2.3.3

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

@@ -1,172 +1,172 @@
-/* ========================================
-   Comparison Table Component
-   Two-column and three-column comparison tables for version control, data changes, and merge operations
-   ======================================== */
-@use '../variables' as *;
-
-.pa-comparison-table {
-  // Ensure proper spacing and borders
-  border-collapse: collapse;
-
-  // Header styling
-  thead th {
-    background-color: var(--pa-table-header-bg);
-    font-weight: $font-weight-semibold;
-    text-align: start; // RTL: flips to right
-    padding: $spacing-sm $spacing-base;
-    border-bottom: $border-width-medium solid var(--pa-border-color);
-  }
-
-  tbody tr {
-    border-bottom: $border-width-base solid var(--pa-border-color);
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  tbody td {
-    padding: $spacing-sm $spacing-base;
-    vertical-align: middle;
-  }
-
-  // Field label column (left column with field names)
-  &__label {
-    font-weight: $font-weight-medium;
-    color: var(--pa-text-color-2);
-    background-color: var(--pa-main-bg);
-  }
-
-  // Value wrapper (contains value text + copy button)
-  &__value {
-    display: flex;
-    align-items: center;
-    gap: $spacing-sm;
-
-    span {
-      flex: 1;
-      word-break: break-word;
-    }
-  }
-
-  // Copy button
-  &__copy {
-    opacity: 0;
-    transition: opacity $transition-fast $easing-smooth;
-    flex-shrink: 0;
-
-    i {
-      font-size: $font-size-sm;
-    }
-  }
-
-  // Show copy button on row hover
-  tbody tr:hover &__copy {
-    opacity: 1;
-  }
-
-  // Changed value highlighting (pink/salmon background)
-  &__changed {
-    background-color: rgba(244, 114, 182, 0.15); // Pink highlight
-    position: relative;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset-inline-start: 0; // RTL: flips to right
-      top: 0;
-      bottom: 0;
-      width: $border-width-medium;
-      background-color: $comparison-accent-pink;
-    }
-
-    // Solid background variant (no left border accent)
-    &--solid {
-      background-color: rgba(244, 114, 182, 0.25) !important; // More opaque pink
-
-      &::before {
-        content: none; // Remove left border accent
-      }
-    }
-  }
-
-  // Conflict highlighting (orange background for 3-column merge conflicts)
-  &__conflict {
-    background-color: rgba(251, 146, 60, 0.15); // Orange highlight
-
-    &::before {
-      background-color: $comparison-accent-orange;
-    }
-
-    // Solid background variant (no left border accent)
-    &--solid {
-      background-color: rgba(251, 146, 60, 0.25) !important; // More opaque orange
-
-      &::before {
-        content: none; // Remove left border accent
-      }
-    }
-  }
-
-  // Section header rows (for grouping fields)
-  &__section {
-    td {
-      background-color: var(--pa-table-header-bg);
-      font-weight: $font-weight-semibold;
-      color: var(--pa-text-color-2);
-      padding: $spacing-xs $spacing-base;
-      border-top: $border-width-medium solid var(--pa-border-color);
-      border-bottom: $border-width-base solid var(--pa-border-color);
-    }
-  }
-
-  // Responsive behavior - stack on mobile
-  @media (max-width: $mobile-breakpoint) {
-    thead {
-      display: none;
-    }
-
-    tbody tr {
-      display: flex;
-      flex-direction: column;
-      margin-bottom: $spacing-base;
-      border: $border-width-base solid var(--pa-border-color);
-      border-radius: $border-radius;
-    }
-
-    tbody td {
-      display: flex;
-      padding: $spacing-sm;
-      border: none;
-
-      &:not(:last-child) {
-        border-bottom: $border-width-base solid var(--pa-border-color);
-      }
-
-      &::before {
-        content: attr(data-label);
-        font-weight: $font-weight-semibold;
-        margin-inline-end: $spacing-sm; // RTL: flips to left
-        min-width: 120px;
-      }
-    }
-
-    &__label {
-      background-color: transparent;
-      font-weight: $font-weight-bold;
-      padding: $spacing-xs $spacing-sm;
-    }
-
-    &__section {
-      td {
-        justify-content: center;
-        background-color: var(--pa-table-header-bg);
-        padding: $spacing-sm;
-
-        &::before {
-          display: none;
-        }
-      }
-    }
-  }
-}
+/* ========================================
+   Comparison Table Component
+   Two-column and three-column comparison tables for version control, data changes, and merge operations
+   ======================================== */
+@use '../variables' as *;
+
+.pa-comparison-table {
+  // Ensure proper spacing and borders
+  border-collapse: collapse;
+
+  // Header styling
+  thead th {
+    background-color: var(--pa-table-header-bg);
+    font-weight: $font-weight-semibold;
+    text-align: start; // RTL: flips to right
+    padding: $spacing-sm $spacing-base;
+    border-bottom: $border-width-medium solid var(--pa-border-color);
+  }
+
+  tbody tr {
+    border-bottom: $border-width-base solid var(--pa-border-color);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  tbody td {
+    padding: $spacing-sm $spacing-base;
+    vertical-align: middle;
+  }
+
+  // Field label column (left column with field names)
+  &__label {
+    font-weight: $font-weight-medium;
+    color: var(--pa-text-color-2);
+    background-color: var(--pa-main-bg);
+  }
+
+  // Value wrapper (contains value text + copy button)
+  &__value {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+
+    span {
+      flex: 1;
+      word-break: break-word;
+    }
+  }
+
+  // Copy button
+  &__copy {
+    opacity: 0;
+    transition: opacity $transition-fast $easing-smooth;
+    flex-shrink: 0;
+
+    i {
+      font-size: $font-size-sm;
+    }
+  }
+
+  // Show copy button on row hover
+  tbody tr:hover &__copy {
+    opacity: 1;
+  }
+
+  // Changed value highlighting (pink/salmon background)
+  &__changed {
+    background-color: rgba(244, 114, 182, 0.15); // Pink highlight
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset-inline-start: 0; // RTL: flips to right
+      top: 0;
+      bottom: 0;
+      width: $border-width-medium;
+      background-color: $comparison-accent-pink;
+    }
+
+    // Solid background variant (no left border accent)
+    &--solid {
+      background-color: rgba(244, 114, 182, 0.25) !important; // More opaque pink
+
+      &::before {
+        content: none; // Remove left border accent
+      }
+    }
+  }
+
+  // Conflict highlighting (orange background for 3-column merge conflicts)
+  &__conflict {
+    background-color: rgba(251, 146, 60, 0.15); // Orange highlight
+
+    &::before {
+      background-color: $comparison-accent-orange;
+    }
+
+    // Solid background variant (no left border accent)
+    &--solid {
+      background-color: rgba(251, 146, 60, 0.25) !important; // More opaque orange
+
+      &::before {
+        content: none; // Remove left border accent
+      }
+    }
+  }
+
+  // Section header rows (for grouping fields)
+  &__section {
+    td {
+      background-color: var(--pa-table-header-bg);
+      font-weight: $font-weight-semibold;
+      color: var(--pa-text-color-2);
+      padding: $spacing-xs $spacing-base;
+      border-top: $border-width-medium solid var(--pa-border-color);
+      border-bottom: $border-width-base solid var(--pa-border-color);
+    }
+  }
+
+  // Responsive behavior - stack on mobile
+  @media (max-width: $mobile-breakpoint) {
+    thead {
+      display: none;
+    }
+
+    tbody tr {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: $spacing-base;
+      border: $border-width-base solid var(--pa-border-color);
+      border-radius: var(--pa-border-radius);
+    }
+
+    tbody td {
+      display: flex;
+      padding: $spacing-sm;
+      border: none;
+
+      &:not(:last-child) {
+        border-bottom: $border-width-base solid var(--pa-border-color);
+      }
+
+      &::before {
+        content: attr(data-label);
+        font-weight: $font-weight-semibold;
+        margin-inline-end: $spacing-sm; // RTL: flips to left
+        min-width: 120px;
+      }
+    }
+
+    &__label {
+      background-color: transparent;
+      font-weight: $font-weight-bold;
+      padding: $spacing-xs $spacing-sm;
+    }
+
+    &__section {
+      td {
+        justify-content: center;
+        background-color: var(--pa-table-header-bg);
+        padding: $spacing-sm;
+
+        &::before {
+          display: none;
+        }
+      }
+    }
+  }
+}

package/src/scss/core-components/_data-display.scss

@@ -10,7 +10,7 @@
   padding: $field-copy-padding;
   background: transparent;
   border: none;
-  border-radius: $border-radius;
+  border-radius: var(--pa-border-radius);
   cursor: pointer;
   transition: opacity $field-copy-transition, background $field-copy-transition;
 
@@ -69,7 +69,7 @@
       padding: $field-copy-padding;
       background: transparent;
       border: none;
-      border-radius: $border-radius;
+      border-radius: var(--pa-border-radius);
       cursor: pointer;
       opacity: $field-copy-opacity;
       transition: opacity $field-copy-transition, background $field-copy-transition;
@@ -118,7 +118,7 @@
       padding: $field-copy-padding;
       background: transparent;
       border: none;
-      border-radius: $border-radius;
+      border-radius: var(--pa-border-radius);
       cursor: pointer;
       opacity: 0;
       transition: opacity $field-copy-transition, background $field-copy-transition;
@@ -290,7 +290,7 @@
     .pa-field:nth-child(odd) {
       background: var(--pa-table-stripe);
       padding: $fields-bordered-padding;
-      border-radius: $border-radius;
+      border-radius: var(--pa-border-radius);
     }
 
     .pa-field:nth-child(even) {
@@ -355,7 +355,7 @@
   &--filled {
     background: $fields-filled-bg;
     padding: $fields-filled-padding;
-    border-radius: $border-radius;
+    border-radius: var(--pa-border-radius);
   }
 
   // ------------------------------------------------------------------
@@ -449,7 +449,7 @@
       color: var(--pa-text-color-1);
       font-weight: $fields-chips-value-font-weight;
       padding: $fields-chips-value-padding-v $fields-chips-value-padding-h;
-      border-radius: $fields-chips-value-border-radius;
+      border-radius: var(--pa-border-radius);
       font-size: $fields-chips-value-font-size;
 
       &--success {
@@ -488,7 +488,7 @@
   display: grid;
   grid-template-columns: repeat($desc-table-cols, auto 1fr);
   border: $border-width-thin solid var(--pa-border-color);
-  border-radius: $border-radius;
+  border-radius: var(--pa-border-radius);
   overflow: hidden;
 
   &--cols-2 {
@@ -750,7 +750,7 @@
 
 .pa-prop-card {
   border: $border-width-thin solid var(--pa-border-color);
-  border-radius: $prop-card-border-radius;
+  border-radius: var(--pa-border-radius);
   overflow: hidden;
 
   &__header {
@@ -857,7 +857,7 @@
 
 .pa-banded {
   border: $border-width-thin solid var(--pa-border-color);
-  border-radius: $border-radius;
+  border-radius: var(--pa-border-radius);
   overflow: hidden;
 
   &__row {

package/src/scss/core-components/_data-viz.scss

@@ -12,7 +12,7 @@
   width: 100%;
   height: $progress-height;
   background: $progress-bg;
-  border-radius: $progress-border-radius;
+  border-radius: var(--pa-border-radius);
   overflow: hidden;
   position: relative;
 
@@ -106,7 +106,7 @@
   display: flex;
   width: 100%;
   height: $stacked-bar-height;
-  border-radius: $stacked-bar-border-radius;
+  border-radius: var(--pa-border-radius);
   overflow: hidden;
   background: $progress-bg;
 
@@ -144,7 +144,7 @@
   &__legend-swatch {
     width: $stacked-bar-legend-swatch-size;
     height: $stacked-bar-legend-swatch-size;
-    border-radius: $border-radius-sm;
+    border-radius: var(--pa-border-radius-sm);
     flex-shrink: 0;
 
     &--primary   { background: $accent-color; }
@@ -391,7 +391,7 @@
     width: 100%;
     height: $data-bar-height;
     background: $data-bar-bg;
-    border-radius: $data-bar-border-radius;
+    border-radius: var(--pa-border-radius-sm);
     overflow: hidden;
   }
 
@@ -428,7 +428,7 @@
   gap: $heatmap-gap;
 
   &__cell {
-    border-radius: $heatmap-border-radius;
+    border-radius: var(--pa-border-radius-sm);
     background: $progress-bg;
 
     &[data-level="1"] { background: rgba($accent-color, 0.2); }
@@ -465,7 +465,7 @@
   &__legend-cell {
     width: $heatmap-cell-size;
     height: $heatmap-cell-size;
-    border-radius: $heatmap-border-radius;
+    border-radius: var(--pa-border-radius-sm);
     background: $progress-bg;
 
     &[data-level="1"] { background: rgba($accent-color, 0.2); }
@@ -481,7 +481,7 @@
     gap: 0.1rem;
 
     .pa-heatmap__cell {
-      border-radius: 1px;
+      border-radius: var(--pa-border-radius-sm);
     }
   }
 }
@@ -501,7 +501,7 @@
     width: $sparkline-bar-width;
     height: var(--value, 50%);
     background: $accent-color;
-    border-radius: $sparkline-border-radius $sparkline-border-radius 0 0;
+    border-radius: var(--pa-border-radius-sm) var(--pa-border-radius-sm) 0 0;
     transition: height $transition-medium $easing-smooth;
     min-height: 1px;
   }
@@ -568,7 +568,7 @@
     width: 100%;
     height: $bar-list-bar-height;
     background: $bar-list-bar-bg;
-    border-radius: $bar-list-bar-border-radius;
+    border-radius: var(--pa-border-radius-sm);
     overflow: hidden;
 
     &::after {

package/src/scss/core-components/_detail-panel.scss

@@ -202,7 +202,7 @@
   align-items: center;
   justify-content: center;
   color: var(--pa-text-color-2);
-  border-radius: $border-radius;
+  border-radius: var(--pa-border-radius);
 
   &:hover {
     background-color: var(--pa-accent-light);