Add additional highlight colors.

Arelle · Feb 6, 2025 · bcdae14 · bcdae14
1 parent f178a38
commit bcdae14
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/iXBRLViewerPlugin/viewer/src/js/util.js b/iXBRLViewerPlugin/viewer/src/js/util.js
@@ -14,7 +14,7 @@ export const CALC11_ARCROLE = "calc11";
 export const GLOSSARY_URL = "https://xbrl.org/glossary/";
 
 // The number of distinct highlight colors defined in inspector.less
-export const HIGHLIGHT_COLORS = 3;
+export const HIGHLIGHT_COLORS = 6;
 
 // Feature names
 export const FEATURE_GUIDE_LINK = 'guide_link';

diff --git a/iXBRLViewerPlugin/viewer/src/less/colours.less b/iXBRLViewerPlugin/viewer/src/less/colours.less
@@ -25,6 +25,9 @@
 @colour-highlight-default: lighten(desaturate(spin(@colour-secondary, -0.5660), 31.1688), 34); // #beea8f
 @colour-highlight-1: lighten(saturate(spin(@colour-tertiary, -25.3918), 17.2043), 36); // #dd73ff
 @colour-highlight-2: lighten(saturate(spin(@colour-warning, 1.0810), 17.7215), 33); // #ffac29
+@colour-highlight-3: #a6fff7;
+@colour-highlight-4: #ff7467;
+@colour-highlight-5: #7e84fF;
 
 @colour-icon-grey: @colour-text;
 

diff --git a/iXBRLViewerPlugin/viewer/src/less/inspector.less b/iXBRLViewerPlugin/viewer/src/less/inspector.less
@@ -34,6 +34,9 @@
   --colour-foreground: @colour-foreground;
   --colour-highlight-1: @colour-highlight-1;
   --colour-highlight-2: @colour-highlight-2;
+  --colour-highlight-3: @colour-highlight-3;
+  --colour-highlight-4: @colour-highlight-4;
+  --colour-highlight-5: @colour-highlight-5;
   --colour-highlight-default: @colour-highlight-default;
   --colour-icon-grey: @colour-icon-grey;
   --colour-linked-fact: @colour-linked-fact;
@@ -334,6 +337,18 @@
             .sample-2 {
               background: var(--colour-highlight-2);
             }
+
+            .sample-3 {
+              background: var(--colour-highlight-3);
+            }
+
+            .sample-4 {
+              background: var(--colour-highlight-4);
+            }
+
+            .sample-5 {
+              background: var(--colour-highlight-5);
+            }
           }
         }
       }

diff --git a/iXBRLViewerPlugin/viewer/src/less/viewer.less b/iXBRLViewerPlugin/viewer/src/less/viewer.less
@@ -8,6 +8,9 @@
   --colour-bg: @colour-bg;
   --colour-highlight-1: @colour-highlight-1;
   --colour-highlight-2: @colour-highlight-2;
+  --colour-highlight-3: @colour-highlight-3;
+  --colour-highlight-4: @colour-highlight-4;
+  --colour-highlight-5: @colour-highlight-5;
   --colour-highlight-default: @colour-highlight-default;
   --colour-linked-fact: @colour-linked-fact;
   --colour-primary-focus: @colour-primary-focus;
@@ -30,10 +33,25 @@
     background-color: var(--colour-highlight-1) !important; // Override inline styles
   }
 
-  &:not(.ixbrl-no-highlight) .ixbrl-highlight-2,
+  &:not(.ixbrl-no-highlight).ixbrl-highlight-2,
   &.ixbrl-highlight-2 .ixbrl-sub-element:not(.ixbrl-no-highlight) {
     background-color: var(--colour-highlight-2) !important; // Override inline styles
   }
+
+  &:not(.ixbrl-no-highlight).ixbrl-highlight-3,
+  &.ixbrl-highlight-3 .ixbrl-sub-element:not(.ixbrl-no-highlight) {
+    background-color: var(--colour-highlight-3) !important; // Override inline styles
+  }
+
+  &:not(.ixbrl-no-highlight).ixbrl-highlight-4,
+  &.ixbrl-highlight-4 .ixbrl-sub-element:not(.ixbrl-no-highlight) {
+    background-color: var(--colour-highlight-4) !important; // Override inline styles
+  }
+
+  &:not(.ixbrl-no-highlight) .ixbrl-highlight-5,
+  &.ixbrl-highlight-5 .ixbrl-sub-element:not(.ixbrl-no-highlight) {
+    background-color: var(--colour-highlight-5) !important; // Override inline styles
+  }
 }
 
 .review.review-highlight-untagged-numbers .review-untagged-number {
@@ -46,14 +64,18 @@
 
 .review .ixbrl-highlight {
   &:not(.ixbrl-no-highlight).ixbrl-highlight-1, 
-  &.ixbrl-highlight-1 .ixbrl-sub-element:not(.ixbrl-no-highlight) {
+  &:not(.ixbrl-no-highlight).ixbrl-highlight-2, 
+  &:not(.ixbrl-no-highlight).ixbrl-highlight-3, 
+  &:not(.ixbrl-no-highlight).ixbrl-highlight-4, 
+  &:not(.ixbrl-no-highlight).ixbrl-highlight-5, 
+  &.ixbrl-highlight-1 .ixbrl-sub-element:not(.ixbrl-no-highlight),
+  &.ixbrl-highlight-2 .ixbrl-sub-element:not(.ixbrl-no-highlight),
+  &.ixbrl-highlight-3 .ixbrl-sub-element:not(.ixbrl-no-highlight),
+  &.ixbrl-highlight-4 .ixbrl-sub-element:not(.ixbrl-no-highlight),
+  &.ixbrl-highlight-5 .ixbrl-sub-element:not(.ixbrl-no-highlight) {
     background-color: var(--colour-highlight-default) !important; // Override inline styles
   }
 
-  &:not(.ixbrl-no-highlight) .ixbrl-highlight-2,
-  &.ixbrl-highlight-2 .ixbrl-sub-element:not(.ixbrl-no-highlight) {
-    background-color: var(--colour-highlight-default) !important; // Override inline styles
-  }
 }
 
 // Apply related fact highlighting (used for calc contributors)