xrpl-dev-portal/shared/components/CardStat/CardStat.scss

// BDS CardStat Component Styles
// Brand Design System - Statistics card component
// 
// Naming Convention: BEM with 'bds' namespace
// .bds-card-stat              - Base card
// .bds-card-stat--lilac       - Lilac variant
// .bds-card-stat--green       - Green variant
// .bds-card-stat--light-gray  - Light gray variant
// .bds-card-stat--dark-gray   - Dark gray variant
// .bds-card-stat__content     - Inner content wrapper
// .bds-card-stat__text        - Text section
// .bds-card-stat__statistic   - Large statistic text
// .bds-card-stat__label       - Descriptive label
// .bds-card-stat__buttons     - Button container
// .bds-card-stat__button-link - Link wrapper for buttons

// =============================================================================
// Design Tokens
// =============================================================================
// Note: Uses centralized spacing tokens from _spacing.scss where applicable.

// Color variant map: (variant-name: (light-mode-bg, dark-mode-bg))
// null for dark-mode-bg means no change in dark mode
$bds-card-stat-variants: (
  'lilac': ($lilac-300, null),
  'green': ($green-300, null),
  'light-gray': (#E6EAF0, #CAD4DF),
  'dark-gray': (#CAD4DF, #8A919A)
);

// Text colors
$bds-card-stat-text: $black; // Neutral black

// Spacing - uses centralized tokens
$bds-card-stat-gap: $bds-space-sm; // 8px - spacing('sm')

// Transitions
$bds-card-stat-transition-duration: 150ms; // Component-specific (faster than default)
$bds-card-stat-transition-timing: $bds-transition-timing;

// =============================================================================
// Base Card Styles
// =============================================================================

.bds-card-stat {
  // Layout
  // !important needed to override PageGridCol's default display (e.g. grid/flex from parent)
  display: flex !important;
  flex-direction: column;
  width: 100%;
  min-height: 200px;
  height: 100%;
  justify-content: space-between;
  flex: 1;
  padding: $bds-space-sm; // 8px - spacing('sm')
  gap: $bds-space-xs; // 4px - spacing('xs')

  // Visual - default to lilac
  background-color: nth(map-get($bds-card-stat-variants, 'lilac'), 1);

  // Typography
  color: $bds-card-stat-text;

  // Transitions
  transition: transform $bds-card-stat-transition-duration $bds-card-stat-transition-timing;

  // Tablet (md) breakpoint
  @include media-breakpoint-up(md) {
    padding: $bds-space-md; // 12px - spacing('md')
  }

  // Desktop (lg+) breakpoint
  @include media-breakpoint-up(lg) {
    padding: $bds-space-lg; // 16px - spacing('lg')
  }

  // Text section
  &__text {
    display: flex;
    flex-direction: column;
    gap: $bds-space-sm; // 8px - spacing('sm')
  }

  // Statistic (large number)
  &__statistic {
    @include type(display-lg);
    margin-bottom: 0;

    sup {
      top: -0.4em;
      font-size: 0.7em;

      // Numeric superscript modifier - smaller size for numbers
      &.bds-card-stat__superscript--numeric {
        font-size: 0.5em;
        top: -0.75em;
        font-weight: 400;
      }
    }
  }

  // Buttons section
  &__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: $bds-card-stat-gap;
    align-items: flex-start;
  }
}

// =============================================================================
// Color Variants (generated from map)
// =============================================================================

@each $variant, $colors in $bds-card-stat-variants {
  $light-bg: nth($colors, 1);
  $dark-bg: nth($colors, 2);

  .bds-card-stat--#{$variant} {
    background-color: $light-bg;
  }

  // Dark mode override (only if dark-mode color is defined)
  @if $dark-bg != null {
    html.dark .bds-card-stat--#{$variant} {
      background-color: $dark-bg;
    }
  }
}

// =============================================================================
// Responsive Height Adjustments
// =============================================================================

.bds-card-stat {
  // Base (mobile) - ~200px height
  min-height: 200px;

  // Tablet (md) - ~208px height
  @include media-breakpoint-up(md) {
    min-height: 208px;
  }

  // Desktop (lg+) - ~298px height (more vertical space)
  @include media-breakpoint-up(lg) {
    min-height: 298px;
  }
}

.bds-grid__col-lg-3 {
  .bds-card-stat {
    @include media-breakpoint-up(lg) {
      aspect-ratio: 1 / 1;
      min-height: unset;
      height: auto;
    }
  }
}