Updated highlight color to a simpler palette with light and dark vari…

…ants
microsoft · May 9, 2024 · b7d2936 · b7d2936
1 parent 09d8582
commit b7d2936
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 72 deletions.
diff --git a/src/EventLogExpert.UI/Enums.cs b/src/EventLogExpert.UI/Enums.cs
@@ -34,26 +34,36 @@ public enum CopyType
     Xml
 }
 
-// Color samples: http://flounder.com/csharp_color_table.htm
 public enum HighlightColor
 {
     None,
-    Blue,
-    Green,
+    LightRed,
     Red,
+    DarkRed,
+    LightOrange,
+    Orange,
+    DarkOrange,
+    LightYellow,
     Yellow,
+    DarkYellow,
+    LightGreen,
+    Green,
+    DarkGreen,
+    LightTeal,
+    Teal,
+    DarkTeal,
+    LightBlue,
+    Blue,
+    DarkBlue,
+    LightPurple,
     Purple,
-    Orange,
-    Lime,
-    Fuchsia,
-    Aqua,
-    DodgerBlue,
-    YellowGreen,
-    Tan,
-    Firebrick,
-    Violet,
-    LightCoral,
-    LightGray
+    DarkPurple,
+    LightMagenta,
+    Magenta,
+    DarkMagenta,
+    LightPink,
+    Pink,
+    DarkPink
 }
 
 public enum FilterCategory

diff --git a/src/EventLogExpert/Components/EventTable.razor.css b/src/EventLogExpert/Components/EventTable.razor.css
@@ -58,67 +58,100 @@ tr { height: 22px; }
 
 .table-row { cursor: pointer; }
 
+.table-row.red,
+.table-row.darkred,
+.table-row.darkteal,
 .table-row.blue,
-.table-row.dodgerblue,
-.table-row.firebrick,
-.table-row.green,
-.table-row.lightcoral,
+.table-row.darkblue,
 .table-row.purple,
-.table-row.red {
+.table-row.darkpurple,
+.table-row.magenta,
+.table-row.darkmagenta,
+.table-row.pink,
+.table-row.darkpink {
     color: var(--clr-white) !important;
 
     & span.error { color: var(--clr-white) !important; }
 
     & span.warning { color: var(--clr-white) !important; }
 }
 
-.table-row.aqua,
-.table-row.fuchsia,
-.table-row.lime,
-.table-row.lightgray,
+.table-row.lightred,
+.table-row.lightorange,
 .table-row.orange,
-.table-row.tan,
-.table-row.violet,
+.table-row.darkorange,
+.table-row.lightyellow,
 .table-row.yellow,
-.table-row.yellowgreen {
+.table-row.darkyellow,
+.table-row.lightgreen,
+.table-row.green,
+.table-row.darkgreen,
+.table-row.lightteal,
+.table-row.teal,
+.table-row.lightblue,
+.table-row.lightpurple,
+.table-row.lightmagenta,
+.table-row.lightpink {
     color: var(--background-darkgray) !important;
 
     & span.error { color: var(--background-darkgray) !important; }
 
     & span.warning { color: var(--background-darkgray) !important; }
 }
 
-.table-row.aqua { background-color: var(--highlight-aqua) !important; }
+.table-row.lightred { background-color: var(--highlight-lightred) !important; }
 
-.table-row.blue { background-color: var(--highlight-blue) !important; }
+.table-row.red { background-color: var(--highlight-red) !important; }
+
+.table-row.darkred { background-color: var(--highlight-darkred) !important; }
+
+.table-row.lightorange { background-color: var(--highlight-lightorange) !important; }
 
-.table-row.dodgerblue { background-color: var(--highlight-dodgerblue) !important; }
+.table-row.orange { background-color: var(--highlight-orange) !important; }
+
+.table-row.darkorange { background-color: var(--highlight-darkorange) !important; }
+
+.table-row.lightyellow { background-color: var(--highlight-lightyellow) !important; }
+
+.table-row.yellow { background-color: var(--highlight-yellow) !important; }
 
-.table-row.firebrick { background-color: var(--highlight-firebrick) !important; }
+.table-row.darkyellow { background-color: var(--highlight-darkyellow) !important; }
 
-.table-row.fuchsia { background-color: var(--highlight-fuchsia) !important; }
+.table-row.lightgreen { background-color: var(--highlight-lightgreen) !important; }
 
 .table-row.green { background-color: var(--highlight-green) !important; }
 
-.table-row.lightcoral { background-color: var(--highlight-lightcoral) !important; }
+.table-row.darkgreen { background-color: var(--highlight-darkgreen) !important; }
 
-.table-row.lightgray { background-color: var(--highlight-lightgray) !important; }
+.table-row.lightteal { background-color: var(--highlight-lightteal) !important; }
 
-.table-row.lime { background-color: var(--highlight-lime) !important; }
+.table-row.teal { background-color: var(--highlight-teal) !important; }
 
-.table-row.orange { background-color: var(--highlight-orange) !important; }
+.table-row.darkteal { background-color: var(--highlight-darkteal) !important; }
+
+.table-row.lightblue { background-color: var(--highlight-lightblue) !important; }
+
+.table-row.blue { background-color: var(--highlight-blue) !important; }
+
+.table-row.darkblue { background-color: var(--highlight-darkblue) !important; }
+
+.table-row.lightpurple { background-color: var(--highlight-lightpurple) !important; }
 
 .table-row.purple { background-color: var(--highlight-purple) !important; }
 
-.table-row.red { background-color: var(--highlight-red) !important; }
+.table-row.darkpurple { background-color: var(--highlight-darkpurple) !important; }
 
-.table-row.tan { background-color: var(--highlight-tan) !important; }
+.table-row.lightmagenta { background-color: var(--highlight-lightmagenta) !important; }
 
-.table-row.violet { background-color: var(--highlight-violet) !important; }
+.table-row.magenta { background-color: var(--highlight-magenta) !important; }
 
-.table-row.yellow { background-color: var(--highlight-yellow) !important; }
+.table-row.darkmagenta { background-color: var(--highlight-darkmagenta) !important; }
+
+.table-row.lightpink { background-color: var(--highlight-lightpink) !important; }
+
+.table-row.pink { background-color: var(--highlight-pink) !important; }
 
-.table-row.yellowgreen { background-color: var(--highlight-yellowgreen) !important; }
+.table-row.darkpink { background-color: var(--highlight-darkpink) !important; }
 
 .level { width: 100px; }
 

diff --git a/src/EventLogExpert/wwwroot/css/app.css b/src/EventLogExpert/wwwroot/css/app.css
@@ -15,22 +15,33 @@
     --background-dark: #222222;
     --background-darkgray: #353535;
 
-    --highlight-aqua: rgb(0, 255, 255);
-    --highlight-blue: rgb(0, 0, 255);
-    --highlight-dodgerblue: rgb(30, 144, 255);
-    --highlight-firebrick: rgb(178, 34, 34);
-    --highlight-fuchsia: rgb(255, 0, 255);
-    --highlight-green: rgb(0, 128, 0);
-    --highlight-lightcoral: rgb(240, 128, 128);
-    --highlight-lightgray: rgb(211, 211, 211);
-    --highlight-lime: rgb(0, 255, 0);
-    --highlight-orange: rgb(255, 165, 0);
-    --highlight-purple: rgb(128, 0, 128);
-    --highlight-red: rgb(255, 0, 0);
-    --highlight-tan: rgb(210, 180, 140);
-    --highlight-violet: rgb(238, 130, 238);
-    --highlight-yellow: rgb(255, 255, 0);
-    --highlight-yellowgreen: rgb(154, 205, 50);
+    --highlight-lightred: #EE8F86;
+    --highlight-red: #D03B2D;
+    --highlight-darkred: #73190E;
+    --highlight-lightorange: #FEB95E;
+    --highlight-orange: #FE9100;
+    --highlight-darkorange: #BE660F;
+    --highlight-lightyellow: #FCE393;
+    --highlight-yellow: #F8C84B;
+    --highlight-darkyellow: #F29A3B;
+    --highlight-lightgreen: #A5E1AC;
+    --highlight-green: #5AC358;
+    --highlight-darkgreen: #3C8331;
+    --highlight-lightteal: #5DC2B4;
+    --highlight-teal: #018C76;
+    --highlight-darkteal: #01594C;
+    --highlight-lightblue: #73B8FD;
+    --highlight-blue: #066EE2;
+    --highlight-darkblue: #013B73;
+    --highlight-lightpurple: #B28BF5;
+    --highlight-purple: #7446F2;
+    --highlight-darkpurple: #271296;
+    --highlight-lightmagenta: #E495DD;
+    --highlight-magenta: #C330B9;
+    --highlight-darkmagenta: #9526AF;
+    --highlight-lightpink: #FF74A1;
+    --highlight-pink: #E2074C;
+    --highlight-darkpink: #960131;
 }
 
 ::-webkit-scrollbar {
@@ -322,47 +333,69 @@ i.bi.bi-star-fill { color: var(--clr-yellow); }
 .input.color-dropdown,
 .color-dropdown-item,
 .color-box {
-    width: 25px;
+    width: 40px;
     height: 22px;
     display: inline-block;
     text-align: center;
     border-bottom: 0;
     border: 1px solid var(--clr-lightblue);
-    text-indent: -9999px;
+    text-indent: 100%;
 
     &.none { background-color: var(--background-dark) !important; }
 
-    &.aqua { background-color: var(--highlight-aqua) !important; }
+    &.lightred { background-color: var(--highlight-lightred) !important; }
 
-    &.blue { background-color: var(--highlight-blue) !important; }
+    &.red { background-color: var(--highlight-red) !important; }
+
+    &.darkred { background-color: var(--highlight-darkred) !important; }
+
+    &.lightorange { background-color: var(--highlight-lightorange) !important; }
+
+    &.orange { background-color: var(--highlight-orange) !important; }
+
+    &.darkorange { background-color: var(--highlight-darkorange) !important; }
 
-    &.dodgerblue { background-color: var(--highlight-dodgerblue) !important; }
+    &.lightyellow { background-color: var(--highlight-lightyellow) !important; }
 
-    &.firebrick { background-color: var(--highlight-firebrick) !important; }
+    &.yellow { background-color: var(--highlight-yellow) !important; }
 
-    &.fuchsia { background-color: var(--highlight-fuchsia) !important; }
+    &.darkyellow { background-color: var(--highlight-darkyellow) !important; }
+
+    &.lightgreen { background-color: var(--highlight-lightgreen) !important; }
 
     &.green { background-color: var(--highlight-green) !important; }
 
-    &.lightcoral { background-color: var(--highlight-lightcoral) !important; }
+    &.darkgreen { background-color: var(--highlight-darkgreen) !important; }
 
-    &.lightgray { background-color: var(--highlight-lightgray) !important; }
+    &.lightteal { background-color: var(--highlight-lightteal) !important; }
 
-    &.lime { background-color: var(--highlight-lime) !important; }
+    &.teal { background-color: var(--highlight-teal) !important; }
 
-    &.orange { background-color: var(--highlight-orange) !important; }
+    &.darkteal { background-color: var(--highlight-darkteal) !important; }
+
+    &.lightblue { background-color: var(--highlight-lightblue) !important; }
+
+    &.blue { background-color: var(--highlight-blue) !important; }
+
+    &.darkblue { background-color: var(--highlight-darkblue) !important; }
+
+    &.lightpurple { background-color: var(--highlight-lightpurple) !important; }
 
     &.purple { background-color: var(--highlight-purple) !important; }
 
-    &.red { background-color: var(--highlight-red) !important; }
+    &.darkpurple { background-color: var(--highlight-darkpurple) !important; }
 
-    &.tan { background-color: var(--highlight-tan) !important; }
+    &.lightmagenta { background-color: var(--highlight-lightmagenta) !important; }
 
-    &.violet { background-color: var(--highlight-violet) !important; }
+    &.magenta { background-color: var(--highlight-magenta) !important; }
 
-    &.yellow { background-color: var(--highlight-yellow) !important; }
+    &.darkmagenta { background-color: var(--highlight-darkmagenta) !important; }
+
+    &.lightpink { background-color: var(--highlight-lightpink) !important; }
+
+    &.pink { background-color: var(--highlight-pink) !important; }
 
-    &.yellowgreen { background-color: var(--highlight-yellowgreen) !important; }
+    &.darkpink { background-color: var(--highlight-darkpink) !important; }
 }
 
 .color-dropdown-item {