@acontplus/ng-components 2.1.32 → 2.4.0

package/src/lib/components/cards/dynamic-card/dynamic-card.scss

@@ -1,131 +0,0 @@
-//@use "@angular/material" as mat;
-//
-//:host {
-//  display: block;
-//  box-sizing: border-box;
-//
-//  mat-card {
-//    height: 100%;
-//    display: flex;
-//    flex-direction: column;
-//    transition:
-//            box-shadow 200ms ease,
-//            transform 200ms ease;
-//    overflow: hidden;
-//
-//    &:hover {
-//      // mat.elevation is already theme-aware.
-//      @include mat.elevation(4);
-//      transform: translateY(-2px);
-//    }
-//
-//    &-header {
-//      padding: 1rem 1rem 0.5rem;
-//
-//      mat-card-title {
-//        font-weight: 500;
-//        line-height: 1.2;
-//        margin-bottom: 0.25rem;
-//      }
-//
-//      mat-card-subtitle {
-//        // Use a theme color for subtitles, e.g., text-secondary.
-//        // The `mat.get-theme-color` function allows you to get specific colors from your theme.
-//        // Here, 'text' refers to the text palette and 'secondary' is a shade within it.
-//        // You might need to adjust 'secondary' based on your specific theme definition
-//        // or use `mat.get-color-from-palette($theme-palette, $color-shade)`.
-//        color: mat.get-theme-color(text, secondary);
-//        line-height: 1.3;
-//      }
-//
-//      [mat-card-avatar] {
-//        width: 40px;
-//        height: 40px;
-//        border-radius: 50%;
-//        margin-right: 1rem;
-//        // Use a theme color for the border, e.g., divider or text-disabled.
-//        border: 2px solid mat.get-theme-color(divider);
-//      }
-//    }
-//
-//    &-content {
-//      flex: 1;
-//      padding: 1rem;
-//      overflow: auto;
-//
-//      &:not(:first-child) {
-//        padding-top: 0;
-//      }
-//    }
-//
-//    &.mat-card-divider {
-//      // Use a theme color for the divider.
-//      border-top: 1px solid mat.get-theme-color(divider);
-//      padding-top: 0.5rem;
-//    }
-//
-//    &-actions {
-//      padding: 0.5rem 1rem 1rem;
-//      margin: 0;
-//      min-height: 52px;
-//      box-sizing: border-box;
-//      display: flex;
-//      flex-wrap: wrap;
-//      gap: 0.5rem;
-//
-//      &[align="end"] {
-//        justify-content: flex-end;
-//      }
-//
-//      &[align="center"] {
-//        justify: center;
-//      }
-//
-//      &[align="start"] {
-//        justify-content: flex-start;
-//      }
-//
-//      button {
-//        margin: 0 0.25rem;
-//        min-width: 88px; // Material spec minimum button width
-//
-//        mat-icon {
-//          margin-right: 0.5rem;
-//          font-size: 18px;
-//          height: 18px;
-//          width: 18px;
-//        }
-//      }
-//    }
-//  }
-//
-//  // Responsive adjustments
-//  @media (max-width: 600px) {
-//    mat-card {
-//      &-header {
-//        padding: 0.75rem 0.75rem 0.25rem;
-//
-//        [mat-card-avatar] {
-//          width: 36px;
-//          height: 36px;
-//          margin-right: 0.75rem;
-//        }
-//      }
-//
-//      &-content {
-//        padding: 0.75rem;
-//      }
-//
-//      &-actions {
-//        padding: 0.5rem;
-//        flex-direction: column;
-//        gap: 0.5rem;
-//
-//        button {
-//          width: 100%;
-//          margin: 0.25rem 0;
-//        }
-//      }
-//    }
-//  }
-//}

package/src/lib/components/dialog-wrapper/dialog-wrapper.scss

@@ -1,6 +1,5 @@
 .acp-dialog-header {
   cursor: move;
-  //padding: 12px 24px;
   border-bottom: 1px solid var(--mat-sys-outline-variant, #dee2e6);
   color: var(--mat-sys-on-surface, #212529);
   position: relative;

package/src/lib/components/grid/cell/cell.scss

@@ -1,10 +1,3 @@
-// .acp-grid-img {
-//   display: inline-block;
-//   width: 32px;
-//   border-radius: 4px;
-//   vertical-align: middle;
-// }
-
 .acp-placeholder-box {
   width: 50px;
   height: 50px;
@@ -18,7 +11,7 @@
   justify-content: center;
   align-items: center;
 
-  color: #6b7280; /* gris elegante */
+  color: #4b5563; /* darker gray for better contrast */
   font-size: 0.85rem;
   gap: 8px;
 }

package/src/lib/components/kpi-card/_kpi-card-theme.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/token-utils';
+@use './_m3-kpi-card' as m3-kpi-card;
+
+@mixin color($colors) {
+  @include token-utils.batch-create-token-values(
+    $colors,
+    ((namespace: kpi-card, tokens: token-utils.get-overrides(m3-kpi-card.get-tokens(), kpi-card)))
+  );
+}
+
+@mixin typography($typography) {
+  // Typography handled by Material tokens
+}
+
+@mixin density($density) {
+  // Density handled by Material tokens
+}
+
+@mixin base($base) {
+  @include token-utils.batch-create-token-values(
+    $base,
+    ((namespace: kpi-card, tokens: token-utils.get-overrides(m3-kpi-card.get-tokens(), kpi-card)))
+  );
+}
+
+@mixin theme($theme) {
+  @include color(map.get(m3-kpi-card.get-tokens($theme), color));
+  @include typography(map.get(m3-kpi-card.get-tokens($theme), typography));
+  @include density(map.get(m3-kpi-card.get-tokens($theme), density));
+  @include base(map.get(m3-kpi-card.get-tokens($theme), base));
+}
+
+@function color-variants-backwards-compatibility($theme) {
+  @return ();
+}
+
+@function overrides($tokens: ()) {
+  @return $tokens;
+}

package/src/lib/components/kpi-card/_m3-kpi-card.scss

@@ -0,0 +1,98 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/m3-utils';
+@use '../../../core/tokens/m3';
+
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  // Semantic color palettes for professional appearance
+  // Using more subtle tones for enterprise dashboard aesthetics
+  $semantic-palettes: (
+    success-light: mat.$green-palette,
+    warning-light: mat.$orange-palette,
+    error-light: mat.$red-palette,
+    info-light: mat.$azure-palette,
+  );
+
+  $color-tokens: ();
+  @each $name, $palette in $semantic-palettes {
+    $color-tokens: map.merge(
+      $color-tokens,
+      (
+        // Use on-surface for better contrast and professional appearance
+        kpi-card-#{$name}-color: map.get($system, on-surface),
+        // Use subtle background with semantic color accent (95 for light, 25 for dark)
+        kpi-card-#{$name}-bg: light-dark(map.get($palette, 95), map.get($palette, 25))
+      )
+    );
+  }
+
+  // Add success (bright) color using green palette
+  $success-palette: mat.$green-palette;
+  $color-tokens: map.merge(
+    $color-tokens,
+    (
+      // Use white text for bright success color for better contrast
+      kpi-card-success-color: light-dark(#ffffff, map.get($success-palette, 20)),
+      kpi-card-success-bg: light-dark(map.get($success-palette, 50), map.get($success-palette, 70))
+    )
+  );
+
+  // Add warning (bright) color - use Material Design warning/error color
+  // Material Design uses error color for warnings in some contexts, but we'll use orange palette
+  // to match Material button warning color
+  $warning-palette: mat.$orange-palette;
+  $color-tokens: map.merge(
+    $color-tokens,
+    (
+      // Use white text for bright warning color for better contrast
+      kpi-card-warning-color: light-dark(#ffffff, map.get($warning-palette, 20)),
+      // Use orange 60 for light mode (similar to Material button warning), 80 for dark mode
+      kpi-card-warning-bg: light-dark(map.get($warning-palette, 60), map.get($warning-palette, 80))
+    )
+  );
+
+  // Add info (bright) color using azure palette
+  $info-palette: mat.$azure-palette;
+  $color-tokens: map.merge(
+    $color-tokens,
+    (
+      // Use white text for bright info color for better contrast
+      kpi-card-info-color: light-dark(#ffffff, map.get($info-palette, 20)),
+      kpi-card-info-bg: light-dark(map.get($info-palette, 50), map.get($info-palette, 70))
+    )
+  );
+
+  $tokens: (
+    base: (
+      kpi-card-container-shape: map.get($system, corner-medium),
+      kpi-card-container-height: 200px,
+      kpi-card-container-elevation: 1,
+    ),
+    color: map.merge(
+        (
+          // Primary: Use primary theme color with on-primary text
+          kpi-card-primary-color: map.get($system, on-primary),
+          kpi-card-primary-bg: map.get($system, primary),
+          // Secondary: Use secondary theme color with on-secondary text
+          kpi-card-secondary-color: map.get($system, on-secondary),
+          kpi-card-secondary-bg: map.get($system, secondary),
+          // Error: Use error theme color with on-error text (Material Design 3 standard)
+          kpi-card-error-color: map.get($system, on-error),
+          kpi-card-error-bg: map.get($system, error),
+          // Neutral: Minimal styling for subtle cards
+          kpi-card-neutral-color: map.get($system, on-surface-variant),
+          kpi-card-neutral-bg: map.get($system, surface-variant),
+          // Custom: Allow full customization
+          kpi-card-custom-color: map.get($system, on-surface),
+          kpi-card-custom-bg: map.get($system, surface-container)
+        ),
+        $color-tokens
+      ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}