Include oncogenicity as classname-s

oncokb · Oct 5, 2019 · cbe00e8 · cbe00e8
1 parent 5171c58
commit cbe00e8
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 125 deletions.
diff --git a/dist/oncokb.css b/dist/oncokb.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "oncokb-styles",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "OncoKB Styles",
   "main": "dist/css/oncokb.css",
   "keywords": [
@@ -15,8 +15,8 @@
   "style": "dist/css/oncokb.css",
   "sass": "scss/oncokb.scss",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/oncokb/styles.git"
+    "type": "git",
+    "url": "https://github.com/oncokb/styles.git"
   },
   "devDependencies": {
     "del": "^5.0.0",

diff --git a/scss/_vars.scss b/scss/_vars.scss
@@ -8,7 +8,7 @@ $oncokb-color-oncogenic: #007FFF;
 $oncokb-color-neutral: #696969;
 $oncokb-color-inconclusive: #AAAAAA;
 $oncokb-color-vus: #696969;
-$oncokb-color-na: #CCCCCC;
+$oncokb-color-unknown: #CCCCCC;
 
 // Colors of Therapeutic Levels
 $oncokb-color-level-1: #33A02C;

diff --git a/scss/oncokb.scss b/scss/oncokb.scss
@@ -1,6 +1,98 @@
 @import "vars";
 
 .oncokb {
+  // Oncogenicity colors
+  &.oncogenic, &.likely-oncogenic, &.predicted-oncogenic {
+    color: $oncokb-color-oncogenic;
+  }
+
+  &.neutral, &.likely-neutral {
+    color: $oncokb-color-neutral;
+  }
+
+  &.inconclusive {
+    color: $oncokb-color-inconclusive;
+  }
+
+  &.vus {
+    color: $oncokb-color-vus;
+  }
+
+  &.unknown {
+    color: $oncokb-color-unknown;
+  }
+
+  // Level colors
+
+
+  &.level-1 {
+    color: $oncokb-color-level-1;
+  }
+
+  &.level-2 {
+    color: $oncokb-color-level-2;
+  }
+
+  &.level-2A {
+    color: $oncokb-color-level-2A;
+  }
+
+  &.level-2B {
+    color: $oncokb-color-level-2B;
+  }
+
+  &.level-3 {
+    color: $oncokb-color-level-3;
+  }
+
+  &.level-3A {
+    color: $oncokb-color-level-3A;
+  }
+
+  &.level-3B {
+    color: $oncokb-color-level-3B;
+  }
+
+  &.level-4 {
+    color: $oncokb-color-level-4;
+  }
+
+  &.level-R1 {
+    color: $oncokb-color-level-R1;
+  }
+
+  &.level-R2 {
+    color: $oncokb-color-level-R2;
+  }
+
+  &.level-R3 {
+    color: $oncokb-color-level-R3;
+  }
+
+  &.level-Dx1 {
+    color: $oncokb-color-level-Dx1;
+  }
+
+  &.level-Dx2 {
+    color: $oncokb-color-level-Dx2;
+  }
+
+  &.level-Dx3 {
+    color: $oncokb-color-level-Dx3;
+  }
+
+  &.level-Px1 {
+    color: $oncokb-color-level-Px1;
+  }
+
+  &.level-Px2 {
+    color: $oncokb-color-level-Px2;
+  }
+
+  &.level-Px3 {
+    color: $oncokb-color-level-Px3;
+  }
+
   &.level-icon {
     background-image: url('images/v3/level-icons.png');
     width: 16px;
@@ -193,72 +285,4 @@
       background-position-x: -789px;
     }
   }
-
-  &.level-1 {
-    color: $oncokb-color-level-1;
-  }
-
-  &.level-2 {
-    color: $oncokb-color-level-2;
-  }
-
-  &.level-2A {
-    color: $oncokb-color-level-2A;
-  }
-
-  &.level-2B {
-    color: $oncokb-color-level-2B;
-  }
-
-  &.level-3 {
-    color: $oncokb-color-level-3;
-  }
-
-  &.level-3A {
-    color: $oncokb-color-level-3A;
-  }
-
-  &.level-3B {
-    color: $oncokb-color-level-3B;
-  }
-
-  &.level-4 {
-    color: $oncokb-color-level-4;
-  }
-
-  &.level-R1 {
-    color: $oncokb-color-level-R1;
-  }
-
-  &.level-R2 {
-    color: $oncokb-color-level-R2;
-  }
-
-  &.level-R3 {
-    color: $oncokb-color-level-R3;
-  }
-
-  &.level-Dx1 {
-    color: $oncokb-color-level-Dx1;
-  }
-
-  &.level-Dx2 {
-    color: $oncokb-color-level-Dx2;
-  }
-
-  &.level-Dx3 {
-    color: $oncokb-color-level-Dx3;
-  }
-
-  &.level-Px1 {
-    color: $oncokb-color-level-Px1;
-  }
-
-  &.level-Px2 {
-    color: $oncokb-color-level-Px2;
-  }
-
-  &.level-Px3 {
-    color: $oncokb-color-level-Px3;
-  }
-}
+}