feat(app): Polish DevRank styling and docs (#9011)

Author: tobiu

resources/scss/src/apps/devrank/GridContainer.scss

@@ -15,8 +15,28 @@
         }
     }
 
-    .heatmap-cell-0 { background-color: transparent; color: var(--neo-text-color-2); opacity: 0.5; }
-    .heatmap-cell-1 { background-color: rgba(14, 233, 175, 0.15); color: var(--neo-text-color-1); }
-    .heatmap-cell-2 { background-color: rgba(14, 233, 175, 0.35); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
-    .heatmap-cell-3 { background-color: rgba(14, 233, 175, 0.65); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.8); font-weight: bold; }
+    .neo-grid-body .neo-grid-row .neo-grid-cell {
+        &.heatmap-cell-0 {
+            background-color: var(--heatmap-bg-0);
+            color           : var(--heatmap-text-0);
+        }
+
+        &.heatmap-cell-1 {
+            background-color: var(--heatmap-bg-1);
+            color           : var(--heatmap-text-1);
+        }
+
+        &.heatmap-cell-2 {
+            background-color: var(--heatmap-bg-2);
+            color           : var(--heatmap-text-2);
+            text-shadow     : var(--heatmap-shadow-2);
+        }
+
+        &.heatmap-cell-3 {
+            background-color: var(--heatmap-bg-3);
+            color           : var(--heatmap-text-3);
+            font-weight     : bold;
+            text-shadow     : var(--heatmap-shadow-3);
+        }
+    }
 }

resources/scss/theme-neo-dark/apps/devrank/GridContainer.scss

@@ -0,0 +1,17 @@
+:root .neo-theme-neo-dark {
+    .devrank-grid-container {
+        --heatmap-bg-0: rgba(14, 233, 175, 0.05);
+        --heatmap-text-0: rgba(255, 255, 255, 0.5);
+
+        --heatmap-bg-1: rgba(14, 233, 175, 0.15);
+        --heatmap-text-1: #fff;
+
+        --heatmap-bg-2: rgba(14, 233, 175, 0.35);
+        --heatmap-text-2: #fff;
+        --heatmap-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5);
+
+        --heatmap-bg-3: rgba(14, 233, 175, 0.65);
+        --heatmap-text-3: #fff;
+        --heatmap-shadow-3: 0 1px 2px rgba(0, 0, 0, 0.8);
+    }
+}

resources/scss/theme-neo-light/apps/devrank/GridContainer.scss

@@ -0,0 +1,17 @@
+:root .neo-theme-neo-light {
+    .devrank-grid-container {
+        --heatmap-bg-0: rgba(14, 233, 175, 0.05);
+        --heatmap-text-0: rgba(0, 0, 0, 0.5);
+
+        --heatmap-bg-1: rgba(14, 233, 175, 0.15);
+        --heatmap-text-1: #000;
+
+        --heatmap-bg-2: rgba(14, 233, 175, 0.35);
+        --heatmap-text-2: #000;
+        --heatmap-shadow-2: none;
+
+        --heatmap-bg-3: rgba(14, 233, 175, 0.65);
+        --heatmap-text-3: #fff;
+        --heatmap-shadow-3: 0 1px 2px rgba(0, 0, 0, 0.8);
+    }
+}

src/grid/column/Base.mjs

@@ -21,6 +21,8 @@ class Column extends Base {
          */
         className: 'Neo.grid.column.Base',
         /**
+         * Additional CSS classes to add to the cell.
+         * These classes are appended to the default ones (e.g. 'neo-grid-cell').
          * @member {Function|String|String[]|null} cellCls=null
          */
         cellCls: null,