Give different colors to types

Author: xPaw

src/components/schema/ColoredSyntax.tsx

@@ -1,10 +1,12 @@
 import React from "react";
 
-export type ColoredSyntaxKind = "literal" | "interface";
+export type ColoredSyntaxKind = "literal" | "interface" | "container" | "atomic";
 
 const syntaxStyles: Record<ColoredSyntaxKind, React.CSSProperties> = {
   literal: { color: "var(--syntax-literal)" },
   interface: { color: "var(--syntax-interface)" },
+  container: { color: "var(--syntax-container)" },
+  atomic: { color: "var(--syntax-atomic)" },
 };
 
 export function ColoredSyntax({

src/components/schema/CrossGameRefs.tsx

@@ -1,6 +1,12 @@
 import React, { useContext } from "react";
 import { styled } from "@linaria/react";
-import { Declaration, SchemaClass, SchemaEnum, SchemaFieldType, SchemaMetadataEntry } from "../../data/types";
+import {
+  Declaration,
+  SchemaClass,
+  SchemaEnum,
+  SchemaFieldType,
+  SchemaMetadataEntry,
+} from "../../data/types";
 import { DeclarationsContext, declarationPath } from "./DeclarationsContext";
 import { GAMES, GameId } from "../../games";
 import { SectionWrapper, SectionTitle, SectionList, SectionLink } from "./styles";

src/components/schema/ReferencedBy.tsx

@@ -2,13 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import { styled } from "@linaria/react";
 import { DeclarationsContext, declarationKey, declarationPath } from "./DeclarationsContext";
 import { KindIcon } from "../kind-icon/KindIcon";
-import {
-  SectionWrapper,
-  SectionTitle,
-  SectionList,
-  SectionLink,
-  SectionToggle,
-} from "./styles";
+import { SectionWrapper, SectionTitle, SectionList, SectionLink, SectionToggle } from "./styles";
 
 const COLLAPSE_THRESHOLD = 8;
 

src/components/schema/SchemaType.tsx

@@ -45,7 +45,7 @@ export function SchemaTypeView({ type }: { type: SchemaFieldType }) {
       if (type.inner) {
         return (
           <span>
-            <ColoredSyntax kind="interface">{type.name}</ColoredSyntax>
+            <ColoredSyntax kind="container">{type.name}</ColoredSyntax>
             <AngleBracket>&lt; </AngleBracket>
             <SchemaTypeView type={type.inner} />
             {type.inner2 && (
@@ -57,7 +57,7 @@ export function SchemaTypeView({ type }: { type: SchemaFieldType }) {
           </span>
         );
       }
-      return <ColoredSyntax kind="interface">{type.name}</ColoredSyntax>;
+      return <ColoredSyntax kind="atomic">{type.name}</ColoredSyntax>;
     case "bitfield":
       return <ColoredSyntax kind="literal">bitfield:{type.count}</ColoredSyntax>;
   }

src/global.css

@@ -13,8 +13,10 @@
   --group-border: #e0e2e8;
   --search-highlight: #fef9c3;
 
-  --syntax-literal: #0e7555;
+  --syntax-literal: #0550ae;
   --syntax-interface: #0e7555;
+  --syntax-container: #7c5e10;
+  --syntax-atomic: #8250af;
 
   --scrollbar-track: transparent;
   --scrollbar-thumb: #cdd0d6;
@@ -38,8 +40,10 @@
   --group-border: #262930;
   --search-highlight: #6dbf3a20;
 
-  --syntax-literal: #5ee6b8;
+  --syntax-literal: #79c0ff;
   --syntax-interface: #5ee6b8;
+  --syntax-container: #e3b341;
+  --syntax-atomic: #d2a8ff;
 
   --scrollbar-track: transparent;
   --scrollbar-thumb: #363a42;