retrospring/app/assets/stylesheets/components/_themes.scss

.theme-success {
  --background: #f4fcf6;
  --primary: var(--success);
}

.theme-warning {
  --background: #fcfaf4;
  --primary: var(--warning);
  --primary-text: 0, 0, 0;
}

.theme-danger {
  --background: #fceff1;
  --primary: var(--danger);
}

.theme-preview {
  .card-header {
    .fake-text {
      display: inline-block;
      width: 1.5rem;
      background: RGB(var(--primary-text));

      &:not(:first-child) {
        background: RGBA(var(--primary-text), 0.5);
        width: 1rem;
      }
    }
  }

  .card-body {
    background: var(--background);

    .raised {
      background: var(--raised-bg);
      border-radius: 4px;
      padding: 4px;

      .fake-text {
        background: RGB(var(--raised-text));
      }
    }

    .rounded-circle {
      display: inline-block;
      width: 24px;
      height: 24px;
    }
  }

  .card-footer {
    background: var(--raised-bg);
    color: RGB(var(--raised-text));
  }

  .fake-text {
    display: block;
    width: 3rem;
    height: 6px;
    background: RGB(var(--primary-text));
    margin: 4px 0;
  }
}