perf/modules/triage2-sk/triage2-sk.scss

@import '~elements-sk/colors';

// Legacy color scheme.
triage2-sk {
  .positive {
    fill: var(--green);
  }

  .negative {
    fill: var(--red);
  }

  .untriaged {
    fill: var(--brown);
  }

  button:not([selected]) {
    fill: #bbb;
    background: #fff;
  }

  .positive:hover,
  .negative:hover,
  .untriaged:hover,
  .positive[raised]:hover,
  .negative[raised]:hover,
  .untriaged[raised]:hover {
    background: #ddd;
  }

  button {
    padding: 0;
  }
}

@import '~elements-sk/themes/themes.css';

// Theme based color scheme.
.body-sk triage2-sk {
  .positive {
    fill: var(--green-700);
  }

  .negative {
    fill: var(--red-700);
  }

  .untriaged {
    fill: var(--brown-400);
  }

  button:not([selected]) {
    opacity: 0.4;
  }

  .positive:hover,
  .negative:hover,
  .untriaged:hover,
  .positive[raised]:hover,
  .negative[raised]:hover,
  .untriaged[raised]:hover {
    background: var(--surface-2dp);
  }
}

.body-sk.darkmode triage2-sk {
  .positive {
    background: var(--green-500);
    fill: var(--on-surface);
  }

  .negative {
    background: var(--red-500);
    fill: var(--on-surface);
  }

  .untriaged {
    background: var(--brown-300);
    fill: var(--on-surface);
  }

  .positive:hover,
  .negative:hover,
  .untriaged:hover,
  .positive[raised]:hover,
  .negative[raised]:hover,
  .untriaged[raised]:hover {
    fill: var(--surface-2dp);
  }
}