Implement info diagnostic level in the demo panel

Info diagnostics were displayed as error in the problems panel. Now they
are displayed as info.

Author: remcohaszing

examples/demo/src/index.css

@@ -4,6 +4,7 @@
   --error-color: hsl(0, 85%, 62%);
   --foreground-color: hsl(0, 0%, 0%);
   --header-foreground-color: hsl(0, 0%, 0%);
+  --info-color: hsl(212, 100%, 61%);
   --primary-color: hsl(189, 100%, 63%);
   --shadow-color: hsla(0, 0%, 27%, 0.239);
   --scrollbar-color: hsla(0, 0%, 47%, 0.4);
@@ -124,6 +125,10 @@ main {
   margin-left: 0.5rem;
 }
 
+.problem .codicon-info {
+  color: var(--info-color);
+}
+
 .problem .codicon-warning {
   color: var(--warning-color);
 }

examples/demo/src/index.ts

@@ -260,7 +260,11 @@ editor.onDidChangeMarkers(([resource]) => {
     wrapper.classList.add('problem')
     codicon.classList.add(
       'codicon',
-      marker.severity === MarkerSeverity.Warning ? 'codicon-warning' : 'codicon-error'
+      marker.severity === MarkerSeverity.Info
+        ? 'codicon-info'
+        : marker.severity === MarkerSeverity.Warning
+          ? 'codicon-warning'
+          : 'codicon-error'
     )
     text.classList.add('problem-text')
     text.textContent = marker.message