fx-file-server/hugo/docsy/assets/scss/_boxes.scss

// Boxes on the home page and similar: .td-box

// box-variant creates the main style for a colored section
@mixin box-variant($parent, $color-name, $color-value) {
  $text-color: color-contrast($color-value);
  $link-color: mix($blue, $text-color, lightness($color-value));
  $link-hover-color: if(
    color-contrast($link-color) == $color-contrast-light,
    shade-color($link-color, $link-shade-percentage),
    tint-color($link-color, $link-shade-percentage)
  );

  #{$parent} {
    &--#{$color-name} {
      color: $text-color;
      background-color: #{$color-value};

      .td-arrow-down {
        &::before {
          left: 50%;
          margin-left: -30px;
          bottom: -25px;
          border: {
            style: solid;
            width: 25px 30px 0 30px;
            color: #{$color-value} transparent transparent transparent;
          }
          z-index: 3;
          position: absolute;
          content: "";
        }
      }
    }
  }

  // Improve contrast for the links in paragraphs.
  @include link-variant(
    "#{$parent}--#{$color-name} p > a, #{$parent}--#{$color-name} span > a",
    $link-color,
    $link-hover-color,
    false
  );
}

// Common min-height modifiers used for boxes.
@mixin td-box-height-modifiers($parent) {
  #{$parent} {
    &--height-min {
      min-height: 300px;
    }

    &--height-med {
      min-height: 400px;
    }

    &--height-max {
      min-height: 500px;
    }

    &--height-full {
      min-height: 100vh;
    }

    @include media-breakpoint-up(md) {
      &--height-min {
        min-height: 450px;
      }

      &--height-med {
        min-height: 500px;
      }

      &--height-max {
        min-height: 650px;
      }
    }
  }
}

@include td-box-height-modifiers(".td-box");

// Styling for section boxes
.td-box {
  .row {
    padding-left: 5vw;
    padding-right: 5vw;
  }
  table {
    @extend .td-table;
  }
}

// Styling for community page link boxes

.td-box.linkbox {
  padding: 5vh 5vw;
}

// This allows "painting by numbers"
@for $i from 1 through length($td-box-colors) {
  $c: nth($td-box-colors, $i);
  $name: $i - 1;

  @include box-variant(".td-box", $name, $c);
}

// Same as above with all the theme color names.
@each $color, $value in $colors {
  @include box-variant(".td-box", $color, $value);
}

@each $color, $value in $theme-colors {
  @include box-variant(".td-box", $color, $value);
}

@each $color, $value in $grays {
  @include box-variant(".td-box", $color, $value);
}

// Single dark-mode compatibility override for white boxes:
@include color-mode(dark) {
  .td-box--white {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    p > a, span > a {
      color: var(--bs-link-color);
      &:focus,
      &:hover {
        color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
      }
    }
    .td-arrow-down::before {
      border-color: var(--bs-body-bg) transparent transparent transparent;
    }
  }
}