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

// BDS TileLogo Component Styles
// Brand Design System - Logo tile/card component
//
// Naming Convention: BEM with 'bds' namespace
// .bds-tile-logo              - Base tile (shared layout, transitions)
// .bds-tile-logo--square      - Square shape variant (1:1 aspect ratio, default)
// .bds-tile-logo--rectangle   - Rectangle shape variant (9:5 aspect ratio)
// .bds-tile-logo--neutral     - Neutral variant (gray tones)
// .bds-tile-logo--green       - Green variant (brand green tones)
// .bds-tile-logo--hovered     - Hovered state (triggers overlay animation)
// .bds-tile-logo--disabled    - Disabled state modifier
// .bds-tile-logo__overlay     - Hover gradient overlay (window shade animation)
// .bds-tile-logo__image       - Logo image element
//
// Note: Uses centralized spacing tokens from _spacing.scss.
// $bds-grid-gutter is now defined in _spacing.scss as the single source of truth.

// Focus border colors (component-specific, dark mode default)
$bds-tile-logo-focus-border-light: $black;
$bds-tile-logo-focus-border-dark: $white;

// Dark mode neutral — pressed overlay (opaque). Semi-transparent rgba(114,119,126,0.7)
// on top of the same $gray-500 (#72777E) tile base does not change the color; use solid #56595E.
$bds-tile-logo-neutral-pressed-dark: #56595e;

// -----------------------------------------------------------------------------
// Shape Tokens - Square (1:1 aspect ratio)
// -----------------------------------------------------------------------------
$bds-tile-logo-square-padding-sm: 36px 20px; // SM: vertical 36px, horizontal 20px
$bds-tile-logo-square-padding-md: 40px 24px; // MD: vertical 40px, horizontal 24px
$bds-tile-logo-square-padding-lg: 72px 48px; // LG: vertical 72px, horizontal 48px

// -----------------------------------------------------------------------------
// Shape Tokens - Rectangle (9:5 aspect ratio)
// -----------------------------------------------------------------------------
$bds-tile-logo-rect-padding-sm: 20px 36px; // SM/MD: vertical 20px, horizontal 36px
$bds-tile-logo-rect-padding-lg: 32px 64px; // LG: vertical 32px, horizontal 64px

// =============================================================================
// Base Tile Styles
// =============================================================================

.bds-tile-logo {
  // Reset button/anchor styles
  appearance: none;
  border: none;
  background: none;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
  text-align: center;

  // Layout
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;

  // Dimensions controlled by shape modifiers
  width: 100%;

  // Interaction
  cursor: pointer;

  // Transitions (using shared animation tokens)
  transition:
    background-color $bds-transition-duration $bds-transition-timing,
    opacity $bds-transition-duration $bds-transition-timing;

  // Focus styles - Dark Mode (default)
  &:focus {
    outline: $bds-focus-border-width solid $bds-tile-logo-focus-border-dark;
    outline-offset: 1px;
  }

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: $bds-focus-border-width solid $bds-tile-logo-focus-border-dark;
    outline-offset: 2px;
  }
}

// =============================================================================
// Shape Variants
// =============================================================================

// -----------------------------------------------------------------------------
// Square Shape (default) - 1:1 aspect ratio, width controlled by parent container
// Use PageGridCol with appropriate span to control width:
// - SM: span 2 (of 4 columns)
// - MD: span 2 (of 8 columns)
// - LG: span 3 (of 12 columns)
// -----------------------------------------------------------------------------
.bds-tile-logo--square {
  aspect-ratio: 1;
  padding: $bds-tile-logo-square-padding-sm;
  flex-shrink: 0; // Prevent shrinking in flex containers

  @media (min-width: map-get($grid-breakpoints, md)) {
    padding: $bds-tile-logo-square-padding-md;
  }

  @media (min-width: map-get($grid-breakpoints, lg)) {
    padding: $bds-tile-logo-square-padding-lg;
  }
}

// -----------------------------------------------------------------------------
// Rectangle Shape - 9:5 aspect ratio, width controlled by parent container
// Use PageGridCol with appropriate span to control width:
// - SM: span 2 (of 4 columns)
// - MD: span 2 (of 8 columns)
// - LG: span 3 (of 12 columns)
// -----------------------------------------------------------------------------
.bds-tile-logo--rectangle {
  aspect-ratio: 9 / 5;
  width: 100%; // Fill parent container width
  padding: $bds-tile-logo-rect-padding-sm;
  flex-shrink: 0; // Prevent shrinking in flex containers

  @media (min-width: map-get($grid-breakpoints, lg)) {
    padding: $bds-tile-logo-rect-padding-lg;
  }
}

// =============================================================================
// Overlay (Color wipe animation - "Window Shade" effect)
// =============================================================================
// Hover in: shade rises from bottom to top (reveals)
// Hover out: shade falls from top to bottom (hides)

.bds-tile-logo__overlay {
  // Use shared window shade animation mixin
  @include bds-window-shade-overlay;
}

// Hovered state: shade fully raised (visible)
// When transitioning TO this state, the top inset decreases = shade rises up
.bds-tile-logo--hovered .bds-tile-logo__overlay {
  @include bds-window-shade-revealed;
}

// =============================================================================
// Logo Image
// =============================================================================

.bds-tile-logo__image {
  position: relative;
  z-index: 1; // Above overlay
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

// =============================================================================
// Light Mode Styles (Default - site uses dark mode as default)
// =============================================================================

// -----------------------------------------------------------------------------
// Neutral Variant - Light Mode
// -----------------------------------------------------------------------------
.bds-tile-logo--neutral {
  background-color: $gray-200;

  // Overlay color for hover wipe
  .bds-tile-logo__overlay {
    background-color: $gray-300;
  }

  // Keyboard focus: same overlay fill as hover
  &:focus-visible:not(.bds-tile-logo--disabled) {
    .bds-tile-logo__overlay {
      @include bds-window-shade-revealed;
    }
  }

  // Pressed state
  &:active:not(.bds-tile-logo--disabled) {
    .bds-tile-logo__overlay {
      background-color: $gray-400;
      clip-path: inset(0 0 0 0);
    }
  }
}

// -----------------------------------------------------------------------------
// Green Variant - Light Mode
// -----------------------------------------------------------------------------
.bds-tile-logo--green {
  background-color: $green-200;

  // Overlay color for hover wipe
  .bds-tile-logo__overlay {
    background-color: $green-300;
  }

  &:focus-visible:not(.bds-tile-logo--disabled) {
    .bds-tile-logo__overlay {
      @include bds-window-shade-revealed;
    }
  }

  // Pressed state
  &:active:not(.bds-tile-logo--disabled) {
    .bds-tile-logo__overlay {
      background-color: $green-400;
      clip-path: inset(0 0 0 0);
    }
  }
}

// -----------------------------------------------------------------------------
// Disabled State - Light Mode
// -----------------------------------------------------------------------------
.bds-tile-logo--disabled {
  background-color: $gray-100;
  cursor: not-allowed;
  pointer-events: none;

  &:focus,
  &:focus-visible {
    outline: none;
  }

  .bds-tile-logo__image {
    opacity: 0.5;
  }
}

// =============================================================================
// Dark Mode Styles (using html.dark selector)
// =============================================================================

html.dark {
  // Focus styles - Dark Mode
  .bds-tile-logo {
    &:focus {
      outline-color: $bds-tile-logo-focus-border-dark;
    }

    &:focus-visible {
      outline-color: $bds-tile-logo-focus-border-dark;
    }
  }

  // ---------------------------------------------------------------------------
  // Neutral Variant - Dark Mode
  // ---------------------------------------------------------------------------
  .bds-tile-logo--neutral {
    background-color: $gray-500;

    // Logos read as white on gray tile (SVG / raster)
    .bds-tile-logo__image {
      filter: brightness(0) invert(1);
    }

    // Overlay color for hover wipe
    .bds-tile-logo__overlay {
      background-color: $gray-400;
    }

    // SVG logos (see TileLogo.tsx): render as white on dark neutral tiles
    .bds-tile-logo__image--monochrome-white {
      filter: brightness(0) invert(1);
    }

    // Pressed state
    &:active:not(.bds-tile-logo--disabled) {
      .bds-tile-logo__overlay {
        background-color: $bds-tile-logo-neutral-pressed-dark;
        clip-path: inset(0 0 0 0);
      }
    }
  }

  // ---------------------------------------------------------------------------
  // Green Variant - Dark Mode
  // ---------------------------------------------------------------------------
  .bds-tile-logo--green {
    background-color: $green-300;

    // Overlay color for hover wipe
    .bds-tile-logo__overlay {
      background-color: $green-200;
    }

    // Pressed state
    &:active:not(.bds-tile-logo--disabled) {
      .bds-tile-logo__overlay {
        background-color: $green-400;
        clip-path: inset(0 0 0 0);
      }
    }
  }

  // ---------------------------------------------------------------------------
  // Disabled State - Dark Mode
  // ---------------------------------------------------------------------------
  .bds-tile-logo--disabled {
    background-color: rgba($gray-500, 0.3);
    opacity: 1; // Reset opacity, use background color instead

    .bds-tile-logo__image {
      opacity: 0.5;
    }
  }

  // Green + disabled: dark logos disappear on the washed background — force white
  .bds-tile-logo--green.bds-tile-logo--disabled .bds-tile-logo__image {
    filter: brightness(0) invert(1);
  }
}

// =============================================================================
// Light Mode Styles (html.light)
// =============================================================================

html.light {
  // Focus styles - Light Mode
  .bds-tile-logo {
    &:focus {
      outline-color: $bds-tile-logo-focus-border-light;
    }

    &:focus-visible {
      outline-color: $bds-tile-logo-focus-border-light;
    }
  }

  // ---------------------------------------------------------------------------
  // Neutral Variant - Light Mode (explicit for html.light)
  // ---------------------------------------------------------------------------
  .bds-tile-logo--neutral {
    background-color: $gray-200;

    .bds-tile-logo__overlay {
      background-color: $gray-300;
    }

    &:active:not(.bds-tile-logo--disabled) {
      .bds-tile-logo__overlay {
        background-color: $gray-400;
        clip-path: inset(0 0 0 0);
      }
    }
  }

  // ---------------------------------------------------------------------------
  // Green Variant - Light Mode (explicit for html.light)
  // ---------------------------------------------------------------------------
  .bds-tile-logo--green {
    background-color: $green-200;

    .bds-tile-logo__overlay {
      background-color: $green-300;
    }

    &:active:not(.bds-tile-logo--disabled) {
      .bds-tile-logo__overlay {
        background-color: $green-400;
        clip-path: inset(0 0 0 0);
      }
    }
  }

  // ---------------------------------------------------------------------------
  // Disabled State - Light Mode
  // ---------------------------------------------------------------------------
  .bds-tile-logo--disabled {
    background-color: $gray-100;
    opacity: 1;

    .bds-tile-logo__image {
      opacity: 0.5;
    }
  }
}

// =============================================================================
// Tablet + mobile: no clip-path wipe (quick taps outrun the animation)
// Hover / focus-visible jump straight to pressed overlay; instant release.
// =============================================================================
@media (max-width: 991px) {
  .bds-tile-logo__overlay {
    transition: none;
  }

  .bds-tile-logo--neutral:not(.bds-tile-logo--disabled) {
    &.bds-tile-logo--hovered .bds-tile-logo__overlay,
    &:focus-visible .bds-tile-logo__overlay {
      background-color: $gray-400;
      clip-path: inset(0 0 0 0);
    }
  }

  .bds-tile-logo--green:not(.bds-tile-logo--disabled) {
    &.bds-tile-logo--hovered .bds-tile-logo__overlay,
    &:focus-visible .bds-tile-logo__overlay {
      background-color: $green-400;
      clip-path: inset(0 0 0 0);
    }
  }

  html.dark {
    .bds-tile-logo--neutral:not(.bds-tile-logo--disabled) {
      &.bds-tile-logo--hovered .bds-tile-logo__overlay,
      &:focus-visible .bds-tile-logo__overlay {
        background-color: $bds-tile-logo-neutral-pressed-dark;
        clip-path: inset(0 0 0 0);
      }
    }

    .bds-tile-logo--green:not(.bds-tile-logo--disabled) {
      &.bds-tile-logo--hovered .bds-tile-logo__overlay,
      &:focus-visible .bds-tile-logo__overlay {
        background-color: $green-200;
        clip-path: inset(0 0 0 0);
      }
    }
  }
}