improve token categories and color scheme

crates/docs/src/static/styles.css

@@ -1,4 +1,30 @@
 :root {
+  --base00: #202746;
+  --base01: #293256;
+  --base02: #5e6687;
+  --base03: #6b7394;
+  --base04: #898ea4;
+  --base05: #979db4;
+  --base06: #dfe2f1;
+  --base07: #f5f7ff;
+  --base08: #c94922;
+  --base09: #c76b29;
+  --base0A: #c08b30;
+  --base0B: #39aca6;
+  --base0C: #22a2c9;
+  --base0D: #3d8fd1;
+  --base0E: #6679cc;
+  --base0F: #9c637a;
+
+  --red: var(--base08);
+  --orange: var(--base09);
+  --yellow: var(--base0A);
+  --green: var(--base0B);
+  --cyan: var(--base0C);
+  --blue: var(--base0D);
+  --violet: var(--base0E);
+  --magenta: var(--base0F);
+
   --purple-1: #f2f1f9;
   --purple-2: #d9d2ef;
   --purple-3: #a17ef1;
@@ -16,8 +42,8 @@
   --link-color: var(--purple-5);
   --code-link-color: #5721d4;
   --text-color: var(--gray-5);
-  --code-color: #222222;
-  --code-bg-color: var(--gray-2);
+  /* --code-color: var(--base00); */
+  --code-bg-color: var(--base07);
   --body-bg-color: #ffffff;
   --border-color: #e9e9e9;
   --faded-color: #4c4c4c;
@@ -146,9 +172,8 @@ a:hover code {
 body {
   display: grid;
   grid-template-columns:
-    [before-sidebar] 1fr [sidebar] var(
-      --sidebar-width
-    ) [main-content] fit-content(calc(1280px - var(--sidebar-width)))
+    [before-sidebar] 1fr [sidebar] var(--sidebar-width)
+    [main-content] fit-content(calc(1280px - var(--sidebar-width)))
     [end] 1fr;
   grid-template-rows: [top-header] var(--top-header-height) [above-footer] auto [footer] auto;
   box-sizing: border-box;
@@ -508,59 +533,6 @@ pre {
   html {
     scrollbar-color: #444444 #2f2f2f;
   }
-
-  samp .kw,
-  samp .pipe,
-  samp .backslash,
-  samp .arrow,
-  samp .backpass,
-  samp .brace,
-  samp .bracket,
-  samp .paren,
-  code .kw,
-  code .pipe,
-  code .backslash,
-  code .arrow,
-  code .backpass,
-  code .brace,
-  code .bracket,
-  code .paren {
-    /* language keywords, e.g. `if` */
-    color: #00c3ff;
-  }
-
-  samp .op,
-  samp .comma,
-  samp .qmark,
-  samp .bar,
-  samp .colon,
-  code .op,
-  code .comma,
-  code .qmark,
-  code .bar,
-  code .colon {
-    /* operators, e.g. `+` */
-    color: #ff3966;
-  }
-
-  samp .str,
-  code .str {
-    /* string literals */
-    color: var(--link-color);
-  }
-
-  /* autovar = automatic variable names in the repl, e.g. # val1 */
-  samp .comment,
-  samp .autovar,
-  code .comment,
-  code .autovar {
-    color: #4ed86c;
-  }
-
-  samp .number,
-  code .number {
-    color: #00c3ff;
-  }
 }
 
 @media only screen and (max-device-width: 480px) and (orientation: portrait) {
@@ -673,83 +645,46 @@ pre {
   }
 }
 
-samp .ann,
-code .ann {
-  /* type annotation - purple in the repl */
-  color: #f384fd;
-}
-
-code .autovar,
-samp .autovar {
-  /* automatic variable names in the repl, e.g. # val1 */
+/* Comments `#` and Documentation comments `##` */
+samp .comment,
+code .comment {
   color: #338545;
 }
-
+/* Number, String, Tag, Type literals */
+samp .literal,
+code .literal {
+  color: var(--cyan);
+}
+/* Keywords and punctuation */
 samp .kw,
-samp .pipe,
-samp .backslash,
-samp .arrow,
-samp .backpass,
-samp .brace,
-samp .bracket,
-samp .paren,
-code .kw,
-code .pipe,
-code .backslash,
-code .arrow,
-code .backpass,
-code .brace,
-code .bracket,
-code .paren {
-  /* language keywords, e.g. `if`*/
-  color: #004cc2;
+code .kw {
+  color: var(--magenta);
+}
+/* Operators */
+samp .op,
+code .op {
+  color: var(--orange);
 }
 
+/* Delimieters */
+samp .delimeter,
+code .delimeter {
+  color: var(--base05);
+}
+
+/* Variables modules and field names */
+samp .lowerident,
+code .lowerident {
+  color: var(--violet);
+}
+
+/* Types, Tags, and Modules */
 samp .upperident,
 code .upperident {
-  /* Upper identifiers e.g. Types */
-  color: var(--purple-5);
-}
-
-samp .op,
-samp .comma,
-samp .qmark,
-samp .bar,
-samp .colon,
-code .op,
-code .comma,
-code .qmark,
-code .bar,
-code .colon {
-  /* operators, e.g. `+` */
-  color: #c20000;
-}
-
-samp .number,
-code .number {
-  /* number literals */
-  color: #158086;
-}
-
-samp .str,
-code .str {
-  /* string literals */
-  color: #158086;
-}
-
-samp .str-esc,
-samp .str-interp,
-code .str-esc,
-code .str-interp {
-  /* escapes inside string literals, e.g. \t */
-  color: #3474db;
+  color: var(--green);
 }
 
 samp .dim,
 code .dim {
   opacity: 0.55;
 }
-
-samp .comment code .comment {
-  color: #338545;
-}