improve token categories and color scheme

crates/compiler/parse/src/highlight.rs

@@ -59,6 +59,7 @@ pub enum Token {
     Arrow,
     Pipe,
     Backpass,
+    Decimal,
 }
 
 pub fn highlight(text: &str) -> Vec<Loc<Token>> {
@@ -165,6 +166,10 @@ fn highlight_inner<'a>(
                         ));
                     }
                 }
+                '.' => {
+                    state.advance_mut(1);
+                    tokens.push(Loc::at(Region::between(start, state.pos()), Token::Decimal));
+                }
                 '0'..='9' => {
                     if let Ok((_, _item, new_state)) =
                         positive_number_literal().parse(arena, state.clone(), 0)

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-color: var(--base00); */
-  --code-bg-color: var(--gray-2);
+  --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(
+    [before-sidebar] 1fr [sidebar] var(--sidebar-width)
-      --sidebar-width
+    [main-content] fit-content(calc(1280px - 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,
+/* Comments `#` and Documentation comments `##` */
-code .ann {
+samp .comment,
-  /* type annotation - purple in the repl */
+code .comment {
-  color: #f384fd;
-}
-
-code .autovar,
-samp .autovar {
-  /* automatic variable names in the repl, e.g. # val1 */
   color: #338545;
 }
-
+/* Number, String, Tag, Type literals */
+samp .literal,
+code .literal {
+  color: var(--cyan);
+}
+/* Keywords and punctuation */
 samp .kw,
-samp .pipe,
+code .kw {
-samp .backslash,
+  color: var(--magenta);
-samp .arrow,
+}
-samp .backpass,
+/* Operators */
-samp .brace,
+samp .op,
-samp .bracket,
+code .op {
-samp .paren,
+  color: var(--orange);
-code .kw,
-code .pipe,
-code .backslash,
-code .arrow,
-code .backpass,
-code .brace,
-code .bracket,
-code .paren {
-  /* language keywords, e.g. `if`*/
-  color: #004cc2;
 }
 
+/* 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(--green);
-  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;
 }
 
 samp .dim,
 code .dim {
   opacity: 0.55;
 }
-
-samp .comment code .comment {
-  color: #338545;
-}

crates/highlight/src/lib.rs

@@ -22,43 +22,32 @@ pub fn highlight(code: &str) -> Vec<String> {
         let current_text = &code[offset..location.byte_range().end];
 
         match location.value {
+            // Comments `#` and Documentation comments `##`
             Token::LineComment | Token::DocComment => {
                 buf = push_html_span(buf, current_text, "comment");
             }
+            // Number, String, Tag, Type literals
             Token::SingleQuote
             | Token::String
             | Token::UnicodeEscape
             | Token::EscapedChar
-            | Token::Interpolated => {
+            | Token::Interpolated
-                buf = push_html_span(buf, current_text, "str");
+            | Token::Number => {
+                buf = push_html_span(buf, current_text, "literal");
             }
-            Token::Keyword => {
+            // Keywords and punctuation
+            Token::Keyword
+            | Token::Equals
+            | Token::Backslash
+            | Token::Pizza
+            | Token::Arrow
+            | Token::Backpass
+            | Token::ColonEquals
+            | Token::Colon
+            | Token::QuestionMark => {
                 buf = push_html_span(buf, current_text, "kw");
             }
-            Token::Number => {
+            // Operators
-                buf = push_html_span(buf, current_text, "number");
-            }
-            Token::Pizza => {
-                buf = push_html_span(buf, current_text, "pipe");
-            }
-            Token::Arrow | Token::Backpass => {
-                buf = push_html_span(buf, current_text, "arrow");
-            }
-            Token::Bar => {
-                buf = push_html_span(buf, current_text, "bar");
-            }
-            Token::Backslash => {
-                buf = push_html_span(buf, current_text, "backslash");
-            }
-            Token::Comma => {
-                buf = push_html_span(buf, current_text, "comma");
-            }
-            Token::QuestionMark => {
-                buf = push_html_span(buf, current_text, "qmark");
-            }
-            Token::ColonEquals | Token::Colon => {
-                buf = push_html_span(buf, current_text, "colon");
-            }
             Token::Percent
             | Token::Caret
             | Token::Bang
@@ -75,25 +64,27 @@ pub fn highlight(code: &str) -> Vec<String> {
             | Token::DoubleBar
             | Token::Plus
             | Token::And
-            | Token::DoubleAnd
+            | Token::DoubleAnd => {
-            | Token::Equals => {
                 buf = push_html_span(buf, current_text, "op");
             }
-            Token::Paren => {
+            // Delimieters
-                buf = push_html_span(buf, current_text, "paren");
+            Token::Paren
-            }
+            | Token::Bracket
-            Token::Bracket => {
+            | Token::Brace
-                buf = push_html_span(buf, current_text, "bracket");
+            | Token::Comma
-            }
+            | Token::Bar
-            Token::Brace => {
+            | Token::Decimal => {
-                buf = push_html_span(buf, current_text, "brace");
+                buf = push_html_span(buf, current_text, "delimeter");
             }
+            // Types, Tags, and Modules
             Token::UpperIdent => {
                 buf = push_html_span(buf, current_text, "upperident");
             }
+            // Variables modules and field names
             Token::LowerIdent => {
                 buf = push_html_span(buf, current_text, "lowerident");
             }
+            // Anyting else that wasn't tokenised
             Token::Error | Token::Other => {
                 buf = push_html(buf, current_text);
             }