feat: adjust colormap used for status badges

PnX-SI · Sep 23, 2024 · 007ef3e · 007ef3e
1 parent ebc2175
commit 007ef3e
Showing 1 changed file with 66 additions and 43 deletions.
diff --git a/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss b/frontend/src/app/syntheseModule/taxon-sheet/infos/status/status.component.scss
@@ -1,24 +1,42 @@
-// https://github.com/timcashion/IUCNpalette
-$status-color-iucn-co: rgb(0, 0, 0);
-$status-color-iucn-cr: rgb(255, 0, 0);
-$status-color-iucn-en: rgb(255, 165, 0);
-$status-color-iucn-vu: rgb(255, 255, 0);
-$status-color-iucn-nt: rgb(173, 255, 47);
-$status-color-iucn-lc: rgb(0, 128, 0);
-$status-color-iucn-dd: rgb(128, 128, 128);
-$status-color-iucn-ne: rgb(255, 255, 255);
-
-$status-color-bool-true: rgb(255, 0, 0);
-$status-color-bool-false: rgb(0, 128, 0);
-
-@function backgroundColor($color) {
-  @return rgba($color, 0.65);
+// ////////////////////////////////////////////////////////////////////////////
+// Color Management
+// ////////////////////////////////////////////////////////////////////////////
+
+$default-badge-color: #fff;
+
+$status-color-iucn-ex: #000000;
+$status-color-iucn-ew: #3d1951;
+$status-color-iucn-re: #5a1a63;
+$status-color-iucn-cr: #d3001b;
+$status-color-iucn-en: #fbbf00;
+$status-color-iucn-vu: #ffed00;
+$status-color-iucn-nt: #fbf2ca;
+$status-color-iucn-lc: #78b74a;
+$status-color-iucn-dd: #d3d4d5;
+
+$status-color-iucn-na: #919291;
+$status-color-iucn-ne: #ffffff;
+
+@use 'sass:color';
+
+@function color($color) {
+  @if (lightness($color) > 30) {
+    @return #444;
+  } @else {
+    @return #fff;
+  }
 }
 
-@function border($color) {
-  @return 2px solid $color;
+@mixin badge-color($color) {
+  background-color: $color;
+  border: 2px solid color.adjust($color, $lightness: -20%);
+  color: color($color);
 }
 
+// ////////////////////////////////////////////////////////////////////////////
+//
+// ////////////////////////////////////////////////////////////////////////////
+
 .Status {
   display: flex;
   flex-flow: row nowrap;
@@ -36,53 +54,58 @@ $status-color-bool-false: rgb(0, 128, 0);
     flex-flow: row wrap;
     width: 100%;
     gap: $gap;
-    line-height: inherit; //
+    line-height: inherit;
 
     .badge {
       display: flex;
       flex-flow: row nowrap;
       white-space: nowrap;
       gap: $gap / 2;
       text-transform: uppercase;
-      &--CO {
-        background-color: backgroundColor($status-color-iucn-co);
-        border: border($status-color-iucn-co);
+      font-weight: bold;
+
+      @include badge-color($default-badge-color);
+
+      &--EX {
+        @include badge-color($status-color-iucn-ex);
+      }
+
+      &--EW {
+        @include badge-color($status-color-iucn-ew);
       }
+
+      &--RE {
+        @include badge-color($status-color-iucn-re);
+      }
+
       &--CR {
-        background-color: backgroundColor($status-color-iucn-cr);
-        border: border($status-color-iucn-cr);
+        @include badge-color($status-color-iucn-cr);
       }
+
       &--EN {
-        background-color: backgroundColor($status-color-iucn-en);
-        border: border($status-color-iucn-en);
+        @include badge-color($status-color-iucn-en);
       }
+
       &--VU {
-        background-color: backgroundColor($status-color-iucn-vu);
-        border: border($status-color-iucn-vu);
+        @include badge-color($status-color-iucn-vu);
       }
+
       &--NT {
-        background-color: backgroundColor($status-color-iucn-nt);
-        border: border($status-color-iucn-nt);
+        @include badge-color($status-color-iucn-nt);
       }
+
       &--LC {
-        background-color: backgroundColor($status-color-iucn-lc);
-        border: border($status-color-iucn-lc);
+        @include badge-color($status-color-iucn-lc);
       }
+
       &--DD {
-        background-color: backgroundColor($status-color-iucn-dd);
-        border: border($status-color-iucn-dd);
+        @include badge-color($status-color-iucn-dd);
       }
-      &--NE {
-        background-color: backgroundColor($status-color-iucn-ne);
-        border: border($status-color-iucn-ne);
+      &--NA {
+        @include badge-color($status-color-iucn-na);
       }
-      &--true {
-        background-color: backgroundColor($status-color-bool-true);
-        border: border($status-color-bool-true);
-      }
-      &--false {
-        background-color: backgroundColor($status-color-bool-false);
-        border: border($status-color-bool-false);
+      &--NE {
+        @include badge-color($status-color-iucn-ne);
       }
     }
   }