@keenmate/pure-admin-core 2.6.0 → 2.7.1

package/src/scss/core-components/_file-selector.scss

@@ -45,13 +45,13 @@
   cursor: pointer;
 
   &:hover {
-    border-color: $accent-color;
-    background: rgba($accent-color, 0.05);
+    border-color: var(--pa-accent);
+    background: color-mix(in srgb, var(--pa-accent) 5%, transparent);
   }
 
   &--active {
-    border-color: $accent-color;
-    background: rgba($accent-color, 0.1);
+    border-color: var(--pa-accent);
+    background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
     border-style: solid;
   }
 
@@ -81,7 +81,7 @@
     margin-bottom: $spacing-xs;
 
     strong {
-      color: $accent-color;
+      color: var(--pa-accent);
       font-weight: $font-weight-semibold;
     }
   }
@@ -127,7 +127,7 @@
     transition: all $transition-fast $easing-snappy;
 
     &:hover {
-      border-color: $accent-color;
+      border-color: var(--pa-accent);
       box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
     }
 
@@ -159,7 +159,7 @@
       width: 2rem;
       height: 2rem;
       border: none;
-      background: $danger-bg;
+      background: var(--pa-danger);
       color: #ffffff;
       cursor: pointer;
       border-radius: 50%;
@@ -182,7 +182,7 @@
 
     &-remove:hover {
       transform: scale(1.1);
-      background: rgba($danger-bg, 0.9);
+      background: color-mix(in srgb, var(--pa-danger) 90%, transparent);
     }
   }
 
@@ -230,7 +230,7 @@
     }
 
     &-remove:hover {
-      background: $danger-bg;
+      background: var(--pa-danger);
       transform: scale(1.1);
     }
   }
@@ -252,7 +252,7 @@
       transition: background-color $transition-fast $easing-snappy;
 
       &:hover {
-        background-color: rgba($accent-color, 0.1);
+        background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
       }
 
       &:not(:last-child)::after {
@@ -266,7 +266,7 @@
 
     &-count {
       font-weight: $font-weight-medium;
-      color: $accent-color;
+      color: var(--pa-accent);
     }
 
     &-size {
@@ -350,7 +350,7 @@
     justify-content: center;
 
     &:hover {
-      background: rgba(var(--pa-text-color-2), 0.1);
+      background: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
       color: var(--pa-text-color-1);
     }
   }
@@ -391,11 +391,11 @@
 
     tbody tr {
       &:hover {
-        background: rgba($accent-color, 0.05);
+        background: color-mix(in srgb, var(--pa-accent) 5%, transparent);
       }
 
       &.uploading {
-        background: rgba($accent-color, 0.1);
+        background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
       }
     }
   }
@@ -418,7 +418,7 @@
 
   &__progress-bar {
     height: 6.4px;
-    background: rgba($accent-color, 0.2);
+    background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
     border-radius: var(--pa-border-radius-sm);
     overflow: hidden;
     margin-bottom: $spacing-xs;
@@ -426,7 +426,7 @@
 
   &__progress-fill {
     height: 100%;
-    background: $accent-color;
+    background: var(--pa-accent);
     border-radius: var(--pa-border-radius-sm);
     transition: width 0.48s ease;
   }
@@ -446,15 +446,15 @@
     }
 
     &--uploading {
-      color: $accent-color;
+      color: var(--pa-accent);
     }
 
     &--complete {
-      color: $success-bg;
+      color: var(--pa-success);
     }
 
     &--error {
-      color: $danger-bg;
+      color: var(--pa-danger);
     }
   }
 
@@ -469,7 +469,7 @@
     height: 3.2rem;
     border: $border-width-base solid var(--pa-border-color);
     background: var(--pa-card-bg);
-    color: $danger-bg;
+    color: var(--pa-danger);
     cursor: pointer;
     border-radius: var(--pa-border-radius-sm);
     font-size: $font-size-2xl;
@@ -481,9 +481,9 @@
     font-weight: $font-weight-bold;
 
     &:hover {
-      background: $danger-bg;
+      background: var(--pa-danger);
       color: #ffffff;
-      border-color: $danger-bg;
+      border-color: var(--pa-danger);
       transform: scale(1.1);
     }
   }
@@ -529,9 +529,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: rgba($accent-color, 0.1);
+    background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
     border-radius: var(--pa-border-radius);
-    color: $accent-color;
+    color: var(--pa-accent);
   }
 
   &__info {
@@ -571,8 +571,8 @@
     justify-content: center;
 
     &:hover {
-      background: rgba($danger-bg, 0.1);
-      color: $danger-bg;
+      background: color-mix(in srgb, var(--pa-danger) 10%, transparent);
+      color: var(--pa-danger);
     }
 
     &::before {
@@ -626,7 +626,7 @@
     justify-content: center;
 
     &:hover {
-      background: $danger-bg;
+      background: var(--pa-danger);
       transform: scale(1.1);
     }
 
@@ -656,14 +656,14 @@
 
   &__bar {
     height: 6.4px;
-    background: rgba($accent-color, 0.2);
+    background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
     border-radius: var(--pa-border-radius-sm);
     overflow: hidden;
   }
 
   &__fill {
     height: 100%;
-    background: $accent-color;
+    background: var(--pa-accent);
     border-radius: var(--pa-border-radius-sm);
     transition: width 0.48s ease;
   }
@@ -682,11 +682,11 @@
     font-weight: $font-weight-semibold;
 
     &--complete {
-      color: $success-bg;
+      color: var(--pa-success);
     }
 
     &--error {
-      color: $danger-bg;
+      color: var(--pa-danger);
     }
   }
 }
@@ -753,9 +753,9 @@
 
 // Drag Overlay (for data-overlay-target feature)
 .pa-file-dropzone-overlay {
-  background: rgba($accent-color, 0.15);
+  background: color-mix(in srgb, var(--pa-accent) 15%, transparent);
   backdrop-filter: blur(3.2px);
-  border: 4.8px dashed $accent-color;
+  border: 4.8px dashed var(--pa-accent);
   border-radius: var(--pa-border-radius);
   display: flex;
   align-items: center;
@@ -775,6 +775,6 @@
   &__text {
     font-size: $font-size-xl;
     font-weight: $font-weight-semibold;
-    color: $accent-color;
+    color: var(--pa-accent);
   }
 }

package/src/scss/core-components/_kpi-base.scss

@@ -0,0 +1,169 @@
+/* ========================================
+   KPI · shared base
+   Cross-cutting building blocks used by every pa-kpi-* showcase.
+   Tokens (--pa-positive, --pa-detail-bg, --pa-chart-trendline-*) live in
+   _base-css-variables.scss; this file only defines the shared class
+   surface that consumes them.
+   ======================================== */
+@use '../variables' as *;
+
+/* ----- LIVE indicator (title-bar pulse) ---------------------------------
+   Used in every KPI card header — a small mono "LIVE" caption with a
+   pulsing green dot. Sits next to the card title. */
+.pa-kpi-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--pa-text-secondary);
+
+  &__dot {
+    width: 0.8rem;
+    height: 0.8rem;
+    border-radius: 50%;
+    background: var(--pa-positive);
+    box-shadow: 0 0 6px var(--pa-positive);
+    animation: pa-kpi-pulse 1.6s ease-in-out infinite;
+  }
+}
+
+@keyframes pa-kpi-pulse {
+  50% { opacity: 0.35; }
+}
+
+/* ----- Card header row --------------------------------------------------
+   Title (h2/h3 by author choice) on one side, controls + LIVE on the other.
+   Wraps onto multiple rows on narrow cards. Every showcase uses this shape. */
+.pa-kpi-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.6rem;
+  flex-wrap: wrap;
+}
+
+/* ----- Card footer caption ---------------------------------------------
+   Two-line mono caption row at the bottom of the card (left: data source,
+   right: timestamp). Strong text inside picks up the focal color so things
+   like a metric name or count stand out. */
+.pa-kpi-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  color: var(--pa-text-secondary);
+
+  strong {
+    color: var(--pa-text-color-1);
+    font-weight: 700;
+  }
+}
+
+/* ----- Sparkline endpoint dot ------------------------------------------
+   The SVG circle that marks the end of a sparkline is converted to a CSS
+   span at init time — the SVG uses preserveAspectRatio="none" so an
+   embedded <circle> renders as an oval at non-square aspect ratios.
+   See kpi-showcases.js for the conversion; here we only style the result. */
+.pa-kpi-spark-dot {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  margin: -3px 0 0 -3px;     /* centre on the (left, top) anchor */
+  border-radius: 50%;
+  background: currentColor;  /* inherits sentiment color from chart wrapper */
+  pointer-events: none;
+}
+
+/* Wrapper inserted around an SVG sparkline at init time when its parent
+   isn't already a positioned anchor — so the .pa-kpi-spark-dot can be
+   absolutely positioned relative to the chart. */
+.pa-kpi-spark-wrap {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+/* ----- Hover detail popover --------------------------------------------
+   Bloomberg-dark by default regardless of host theme (terminal/data-dashboard
+   aesthetic). Override the --pa-detail-* tokens at :root or .pa-kpi-detail
+   level for a light/theme-aware variant.
+
+   Positioned by Floating UI anchored to a virtual element at the cursor —
+   the JS appends each popover to <body> at init so ancestor overflow:hidden
+   doesn't clip it. position: fixed because cursor coords are viewport-
+   relative; pointer-events:none so the cursor passes through cleanly and
+   tile mouseleave fires reliably. */
+.pa-kpi-detail {
+  position: fixed;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: 9000;
+  min-width: 26rem;
+  max-width: 32rem;
+  background: var(--pa-detail-bg);
+  color: var(--pa-detail-text);
+  padding: 1.2rem 1.5rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.25rem;
+  line-height: 1.5;
+  border-radius: 0.4rem;
+  box-shadow: var(--pa-detail-shadow);
+
+  &[data-show] {
+    visibility: visible;
+  }
+
+  &__title {
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: var(--pa-detail-title);
+    margin-bottom: 0.6rem;
+  }
+
+  dl {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 0.35rem 1.6rem;
+    margin: 0;
+  }
+
+  dt {
+    margin: 0;
+    color: var(--pa-detail-row-label);
+    font-weight: 400;
+  }
+
+  dd {
+    margin: 0;
+    text-align: end;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Inline sentiment hints for dd content (e.g. <dd>+12% <span class="pos">…</span></dd>) */
+  .pos  { color: var(--pa-positive); }
+  .neg  { color: var(--pa-negative); }
+  .warn { color: var(--pa-warning); }
+}
+
+/* ----- Section heading strip used outside card chrome -------------------
+   The 7 showcases each render a "stress-test" section that places tiles
+   directly inside .pa-col-* page-grid cells (no card wrapper). The strip
+   above those layouts hosts a label or LIVE indicator at the row's end. */
+.pa-kpi-sectionhead {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1.6rem;
+  margin-bottom: 1.2rem;
+}

package/src/scss/core-components/_kpi-bento.scss

@@ -0,0 +1,182 @@
+/* ========================================
+   KPI · Bento layout
+   Magazine-style asymmetric tile sizing with sparklines as soft background
+   fills behind the values. 6 tiles arranged on a 6-col × 3-row grid
+   (hero left-half × 2 rows, two stacked right-half × 2 rows, three equal
+   tiles bottom row). Tile placement by source order via :nth-child.
+   ======================================== */
+@use '../variables' as *;
+
+.pa-kpi-bento {
+  container-type: inline-size;
+}
+.pa-kpi-bento__body { padding: 1.6rem; }
+
+/* ----- Bento grid ------------------------------------------------------- */
+.pa-kpi-bento__grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 12rem 12rem 12rem;
+  grid-template-areas:
+    "hero hero hero a    a    a"
+    "hero hero hero b    b    b"
+    "c    c    d    d    e    e";
+  gap: 1rem;
+
+  > :nth-child(1) { grid-area: hero; }
+  > :nth-child(2) { grid-area: a; }
+  > :nth-child(3) { grid-area: b; }
+  > :nth-child(4) { grid-area: c; }
+  > :nth-child(5) { grid-area: d; }
+  > :nth-child(6) { grid-area: e; }
+}
+
+/* Narrow card → stack everything single column. Hero modifier still
+   bumps the value font-size so it reads as the headline. */
+@container (max-width: 700px) {
+  .pa-kpi-bento__grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: none;
+    gap: 0.8rem;
+
+    > :nth-child(n) { grid-area: auto; }
+  }
+  .pa-kpi-bento-tile        { min-height: 10rem; }
+  .pa-kpi-bento-tile--hero  { min-height: 14rem; }
+}
+
+/* ----- Tile (per-KPI bento cell) ---------------------------------------- */
+.pa-kpi-bento-tile {
+  /* Per-tile inline-size container so the value font-size scales with
+     *this* tile's width via cqi (not the outer card's width). The hero
+     and the smaller bottom tiles each scale to their own column. */
+  container-type: inline-size;
+  position: relative;
+  overflow: hidden;
+  padding: 1.3rem 1.5rem;
+  border: 1px solid var(--pa-border-color);
+  background: var(--pa-card-bg);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "label delta"
+    ".     .    "
+    "value value";
+  gap: 0.4rem 1rem;
+
+  /* Sparkline + delta sentiment cascade via currentColor. */
+  --pa-kpi-accent: var(--pa-positive);
+
+  &--positive    { --pa-kpi-accent: var(--pa-positive); }
+  &--negative    { --pa-kpi-accent: var(--pa-negative); }
+  &--neutral     { --pa-kpi-accent: var(--pa-neutral); }
+  &--up-strong   { --pa-kpi-accent: var(--pa-very-positive); }
+  &--down-strong { --pa-kpi-accent: var(--pa-very-negative); }
+
+  &--hero {
+    padding: 1.6rem 1.8rem;
+
+    .pa-kpi-bento-tile__num   { font-size: clamp(3.6rem, 22cqi, 7rem); }
+    .pa-kpi-bento-tile__unit  { font-size: clamp(1.6rem, 9cqi, 2.6rem); }
+    .pa-kpi-bento-tile__label,
+    .pa-kpi-bento-tile__delta { font-size: 1.4rem; }
+    .pa-kpi-bento-tile__chart { height: 70%; }
+  }
+}
+
+/* ----- Top row: label + delta, both layered over the chart -------------- */
+.pa-kpi-bento-tile__label {
+  grid-area: label;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  z-index: 1;
+  line-height: 1.2;
+}
+.pa-kpi-bento-tile__delta {
+  grid-area: delta;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--pa-kpi-accent);
+  z-index: 1;
+  align-self: start;
+  line-height: 1.2;
+}
+
+/* ----- Value (bottom of grid, layered over chart) ----------------------- */
+.pa-kpi-bento-tile__value {
+  grid-area: value;
+  align-self: end;
+  position: relative;
+  z-index: 1;
+  font-family: var(--base-font-family-mono);
+  display: inline-flex;
+  align-items: baseline;
+  line-height: 1;
+  white-space: nowrap;
+}
+.pa-kpi-bento-tile__num {
+  font-size: clamp(2rem, 14cqi, 3.2rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-bento-tile__unit {
+  font-size: clamp(1.2rem, 7cqi, 1.6rem);
+  font-weight: 500;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  margin: 0 0.3rem;
+}
+
+/* ----- Sparkline background ---------------------------------------------
+   Absolutely positioned, fills the bottom 65% of the tile. The value sits
+   over it (z-index: 1 above). The line/area read through behind the
+   digits at lower opacity so the value remains the focal point. SVG is
+   nested in a fixed-height wrapper so taller tiles don't distort the line
+   shape (preserveAspectRatio="none" would otherwise stretch the Y axis). */
+.pa-kpi-bento-tile__chart {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 65%;
+  pointer-events: none;
+  color: var(--pa-kpi-accent);
+  z-index: 0;
+  display: flex;
+  align-items: flex-end;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  polyline {
+    fill: none;
+    stroke: currentColor;
+    stroke-opacity: 0.55;
+    stroke-width: var(--pa-chart-trendline-stroke);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  polygon {
+    fill: currentColor;
+    fill-opacity: 0.10;
+    stroke: none;
+  }
+}
+.pa-kpi-bento-tile__chart-svg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+}