Update dark, light themes.

Nate Butler created

Change summary

crates/zed/assets/themes/dark.json  | 130 +++++++++++++++++-----------
crates/zed/assets/themes/light.json | 142 ++++++++++++++++++------------
styles/styleTree/editor.ts          |  20 +++
styles/styleTree/workspace.ts       |   2 
styles/themes/dark.ts               |  48 +++++-----
styles/themes/light.ts              |  38 ++++----
styles/utils/color.ts               |   6 
7 files changed, 228 insertions(+), 158 deletions(-)

Detailed changes

crates/zed/assets/themes/dark.json 🔗

@@ -18,7 +18,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#2db4f3",
+        "color": "#1096d3",
         "weight": "bold",
         "size": 14
       }
@@ -38,7 +38,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#2db4f3",
+        "color": "#1096d3",
         "weight": "bold",
         "size": 14
       },
@@ -70,8 +70,8 @@
         "size": 14
       },
       "selection": {
-        "cursor": "#4287f6",
-        "selection": "#d0e2fd"
+        "cursor": "#2472f2",
+        "selection": "#103063"
       },
       "text": {
         "family": "Zed Mono",
@@ -111,8 +111,8 @@
       "background": "#1c1c1c",
       "icon_close": "#555555",
       "icon_close_active": "#ffffff",
-      "icon_conflict": "#f7b241",
-      "icon_dirty": "#4287f6",
+      "icon_conflict": "#f6a724",
+      "icon_dirty": "#135acd",
       "icon_width": 8,
       "spacing": 10,
       "text": {
@@ -137,8 +137,8 @@
       "background": "#000000",
       "icon_close": "#555555",
       "icon_close_active": "#ffffff",
-      "icon_conflict": "#f7b241",
-      "icon_dirty": "#4287f6",
+      "icon_conflict": "#f6a724",
+      "icon_dirty": "#135acd",
       "icon_width": 8,
       "spacing": 10,
       "text": {
@@ -289,7 +289,7 @@
       },
       "outdated_warning": {
         "family": "Zed Sans",
-        "color": "#f8c570",
+        "color": "#f7bb57",
         "size": 13
       }
     },
@@ -297,7 +297,7 @@
       "height": 34,
       "background": "#000000",
       "border": {
-        "color": "#070707",
+        "color": "#151515",
         "width": 1,
         "bottom": true
       },
@@ -325,54 +325,54 @@
     }
   },
   "editor": {
-    "text_color": "#f1f1f1",
+    "text_color": "#d5d5d5",
     "background": "#000000",
     "active_line_background": "#0e0e0e",
     "code_actions_indicator": "#9c9c9c",
-    "diff_background_deleted": "#f78c8c",
-    "diff_background_inserted": "#22c55e",
-    "document_highlight_read_background": "#777af4",
-    "document_highlight_write_background": "#777af4",
-    "error_color": "#f78c8c",
+    "diff_background_deleted": "#f15656",
+    "diff_background_inserted": "#1b9447",
+    "document_highlight_read_background": "#2b2b2b",
+    "document_highlight_write_background": "#2b2b2b",
+    "error_color": "#f15656",
     "gutter_background": "#000000",
-    "gutter_padding_factor": 2.5,
+    "gutter_padding_factor": 3.5,
     "highlighted_line_background": "#070707",
     "line_number": "#636363",
     "line_number_active": "#ffffff",
     "rename_fade": 0.6,
     "unnecessary_code_fade": 0.5,
     "selection": {
-      "cursor": "#4287f6",
-      "selection": "#d0e2fd"
+      "cursor": "#2472f2",
+      "selection": "#103063"
     },
     "guest_selections": [
       {
-        "cursor": "#87d116",
-        "selection": "#dbf9ac"
+        "cursor": "#79ba16",
+        "selection": "#38530f"
       },
       {
-        "cursor": "#777af4",
-        "selection": "#d4d5fd"
+        "cursor": "#484bed",
+        "selection": "#121269"
       },
       {
-        "cursor": "#f98a3d",
-        "selection": "#fde0cd"
+        "cursor": "#ee670a",
+        "selection": "#5d2f0e"
       },
       {
-        "cursor": "#b671f8",
-        "selection": "#e9d4fd"
+        "cursor": "#993bf3",
+        "selection": "#3e1169"
       },
       {
-        "cursor": "#16ddc7",
-        "selection": "#b4faf2"
+        "cursor": "#16d6c1",
+        "selection": "#0e4f48"
       },
       {
-        "cursor": "#f58ac0",
-        "selection": "#fcd4e8"
+        "cursor": "#ef59a3",
+        "selection": "#fbc6e1"
       },
       {
-        "cursor": "#f6bc09",
-        "selection": "#fceabc"
+        "cursor": "#f7bf17",
+        "selection": "#fce9b7"
       }
     ],
     "autocomplete": {
@@ -406,7 +406,7 @@
         "left": -14
       },
       "match_highlight": {
-        "color": "#59c3f5",
+        "color": "#4f8ff7",
         "weight": "normal"
       },
       "selected_item": {
@@ -481,12 +481,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#f78c8c",
+          "color": "#f15656",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#f78c8c",
+          "color": "#f15656",
           "size": 14,
           "weight": "bold"
         }
@@ -504,12 +504,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#f8c570",
+          "color": "#f7bb57",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#f8c570",
+          "color": "#f7bb57",
           "size": 14,
           "weight": "bold"
         }
@@ -527,12 +527,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#6099f7",
+          "color": "#2472f2",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#6099f7",
+          "color": "#2472f2",
           "size": 14,
           "weight": "bold"
         }
@@ -550,12 +550,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#6099f7",
+          "color": "#2472f2",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#6099f7",
+          "color": "#2472f2",
           "size": 14,
           "weight": "bold"
         }
@@ -653,7 +653,35 @@
         }
       }
     },
-    "syntax": {}
+    "syntax": {
+      "keyword": "#4f8ff7",
+      "function": "#f9da82",
+      "string": "#f99d5f",
+      "type": "#3eeeda",
+      "number": "#aeef4b",
+      "comment": "#aaaaaa",
+      "property": "#4f8ff7",
+      "variant": "#53c1f5",
+      "constant": "#d5d5d5",
+      "title": {
+        "color": "#de900c",
+        "weight": "bold"
+      },
+      "emphasis": "#1096d3",
+      "emphasis_strong": {
+        "color": "#1096d3",
+        "weight": "bold"
+      },
+      "link_uri": {
+        "color": "#79ba16",
+        "underline": true
+      },
+      "link_text": {
+        "color": "#ee670a",
+        "italic": true
+      },
+      "list_marker": "#20b0f2"
+    }
   },
   "project_diagnostics": {
     "tab_icon_spacing": 4,
@@ -929,8 +957,8 @@
         "size": 14
       },
       "selection": {
-        "cursor": "#4287f6",
-        "selection": "#d0e2fd"
+        "cursor": "#2472f2",
+        "selection": "#103063"
       },
       "border": {
         "color": "#151515",
@@ -1067,7 +1095,7 @@
     }
   },
   "search": {
-    "match_background": "#87d116",
+    "match_background": "#0a2633",
     "tab_icon_spacing": 4,
     "tab_icon_width": 14,
     "active_hovered_option_button": {
@@ -1123,8 +1151,8 @@
         "size": 16
       },
       "selection": {
-        "cursor": "#4287f6",
-        "selection": "#d0e2fd"
+        "cursor": "#2472f2",
+        "selection": "#103063"
       },
       "text": {
         "family": "Zed Mono",
@@ -1177,8 +1205,8 @@
         "size": 16
       },
       "selection": {
-        "cursor": "#4287f6",
-        "selection": "#d0e2fd"
+        "cursor": "#2472f2",
+        "selection": "#103063"
       },
       "text": {
         "family": "Zed Mono",
@@ -1186,7 +1214,7 @@
         "size": 16
       },
       "border": {
-        "color": "#f47171",
+        "color": "#eb2d2d",
         "width": 1
       },
       "margin": {

crates/zed/assets/themes/light.json 🔗

@@ -18,7 +18,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#6099f7",
+        "color": "#2472f2",
         "weight": "bold",
         "size": 14
       }
@@ -38,7 +38,7 @@
       },
       "highlight_text": {
         "family": "Zed Sans",
-        "color": "#6099f7",
+        "color": "#2472f2",
         "weight": "bold",
         "size": 14
       },
@@ -70,8 +70,8 @@
         "size": 14
       },
       "selection": {
-        "cursor": "#6099f7",
-        "selection": "#d0e2fd"
+        "cursor": "#2472f2",
+        "selection": "#c5dafc"
       },
       "text": {
         "family": "Zed Mono",
@@ -111,8 +111,8 @@
       "background": "#f1f1f1",
       "icon_close": "#555555",
       "icon_close_active": "#000000",
-      "icon_conflict": "#f6bc09",
-      "icon_dirty": "#4287f6",
+      "icon_conflict": "#f7bf17",
+      "icon_dirty": "#135acd",
       "icon_width": 8,
       "spacing": 10,
       "text": {
@@ -137,8 +137,8 @@
       "background": "#ffffff",
       "icon_close": "#555555",
       "icon_close_active": "#000000",
-      "icon_conflict": "#f6bc09",
-      "icon_dirty": "#4287f6",
+      "icon_conflict": "#f7bf17",
+      "icon_dirty": "#135acd",
       "icon_width": 8,
       "spacing": 10,
       "text": {
@@ -289,7 +289,7 @@
       },
       "outdated_warning": {
         "family": "Zed Sans",
-        "color": "#e5af09",
+        "color": "#d3a20b",
         "size": 13
       }
     },
@@ -297,7 +297,7 @@
       "height": 34,
       "background": "#ffffff",
       "border": {
-        "color": "#c6c6c6",
+        "color": "#e3e3e3",
         "width": 1,
         "bottom": true
       },
@@ -327,52 +327,52 @@
   "editor": {
     "text_color": "#2b2b2b",
     "background": "#ffffff",
-    "active_line_background": "#e3e3e3",
+    "active_line_background": "#f1f1f1",
     "code_actions_indicator": "#717171",
-    "diff_background_deleted": "#fdd4d4",
-    "diff_background_inserted": "#befad2",
-    "document_highlight_read_background": "#e3e3e3",
-    "document_highlight_write_background": "#e3e3e3",
-    "error_color": "#f47171",
+    "diff_background_deleted": "#fcc6c6",
+    "diff_background_inserted": "#b7f9ce",
+    "document_highlight_read_background": "#f1f1f1",
+    "document_highlight_write_background": "#f1f1f1",
+    "error_color": "#eb2d2d",
     "gutter_background": "#ffffff",
-    "gutter_padding_factor": 2.5,
-    "highlighted_line_background": "#e3e3e3",
-    "line_number": "#808080",
+    "gutter_padding_factor": 3.5,
+    "highlighted_line_background": "#f1f1f1",
+    "line_number": "#aaaaaa",
     "line_number_active": "#000000",
     "rename_fade": 0.6,
     "unnecessary_code_fade": 0.5,
     "selection": {
-      "cursor": "#6099f7",
-      "selection": "#d0e2fd"
+      "cursor": "#2472f2",
+      "selection": "#c5dafc"
     },
     "guest_selections": [
       {
-        "cursor": "#87d116",
-        "selection": "#dbf9ac"
+        "cursor": "#79ba16",
+        "selection": "#dffab5"
       },
       {
-        "cursor": "#777af4",
-        "selection": "#d4d5fd"
+        "cursor": "#484bed",
+        "selection": "#cdcdfc"
       },
       {
-        "cursor": "#f98a3d",
-        "selection": "#fde0cd"
+        "cursor": "#ee670a",
+        "selection": "#fcd6bd"
       },
       {
-        "cursor": "#b671f8",
-        "selection": "#e9d4fd"
+        "cursor": "#993bf3",
+        "selection": "#e4cbfc"
       },
       {
-        "cursor": "#16ddc7",
-        "selection": "#b4faf2"
+        "cursor": "#16d6c1",
+        "selection": "#b1faf2"
       },
       {
-        "cursor": "#f58ac0",
-        "selection": "#fcd4e8"
+        "cursor": "#ef59a3",
+        "selection": "#fbc6e1"
       },
       {
-        "cursor": "#f6bc09",
-        "selection": "#fceabc"
+        "cursor": "#f7bf17",
+        "selection": "#fce9b7"
       }
     ],
     "autocomplete": {
@@ -400,13 +400,13 @@
           "right": 6,
           "top": 2
         },
-        "background": "#f1f1f1"
+        "background": "#f8f8f8"
       },
       "margin": {
         "left": -14
       },
       "match_highlight": {
-        "color": "#59c3f5",
+        "color": "#103063",
         "weight": "normal"
       },
       "selected_item": {
@@ -417,7 +417,7 @@
           "right": 6,
           "top": 2
         },
-        "background": "#e3e3e3"
+        "background": "#f1f1f1"
       }
     },
     "diagnostic_header": {
@@ -453,7 +453,7 @@
       }
     },
     "diagnostic_path_header": {
-      "background": "#e3e3e3",
+      "background": "#f1f1f1",
       "text_scale_factor": 0.857,
       "filename": {
         "family": "Zed Mono",
@@ -481,12 +481,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#f47171",
+          "color": "#eb2d2d",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#f47171",
+          "color": "#eb2d2d",
           "size": 14,
           "weight": "bold"
         }
@@ -504,12 +504,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#e5af09",
+          "color": "#d3a20b",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#e5af09",
+          "color": "#d3a20b",
           "size": 14,
           "weight": "bold"
         }
@@ -527,12 +527,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#6099f7",
+          "color": "#2472f2",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#6099f7",
+          "color": "#2472f2",
           "size": 14,
           "weight": "bold"
         }
@@ -550,12 +550,12 @@
       "message": {
         "text": {
           "family": "Zed Sans",
-          "color": "#6099f7",
+          "color": "#2472f2",
           "size": 14
         },
         "highlight_text": {
           "family": "Zed Sans",
-          "color": "#6099f7",
+          "color": "#2472f2",
           "size": 14,
           "weight": "bold"
         }
@@ -653,7 +653,35 @@
         }
       }
     },
-    "syntax": {}
+    "syntax": {
+      "keyword": "#103063",
+      "function": "#1b9447",
+      "string": "#bb550e",
+      "type": "#138a7d",
+      "number": "#14a898",
+      "comment": "#555555",
+      "property": "#134697",
+      "variant": "#1179a8",
+      "constant": "#393939",
+      "title": {
+        "color": "#1096d3",
+        "weight": "bold"
+      },
+      "emphasis": "#2472f2",
+      "emphasis_strong": {
+        "color": "#2472f2",
+        "weight": "bold"
+      },
+      "link_uri": {
+        "color": "#14a898",
+        "underline": true
+      },
+      "link_text": {
+        "color": "#ee670a",
+        "italic": true
+      },
+      "list_marker": "#20b0f2"
+    }
   },
   "project_diagnostics": {
     "tab_icon_spacing": 4,
@@ -929,8 +957,8 @@
         "size": 14
       },
       "selection": {
-        "cursor": "#6099f7",
-        "selection": "#d0e2fd"
+        "cursor": "#2472f2",
+        "selection": "#c5dafc"
       },
       "border": {
         "color": "#e3e3e3",
@@ -1022,7 +1050,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#e3e3e3",
+      "background": "#f1f1f1",
       "corner_radius": 6
     },
     "unshared_project": {
@@ -1062,7 +1090,7 @@
       "padding": {
         "left": 8
       },
-      "background": "#e3e3e3",
+      "background": "#f1f1f1",
       "corner_radius": 6
     }
   },
@@ -1123,8 +1151,8 @@
         "size": 16
       },
       "selection": {
-        "cursor": "#6099f7",
-        "selection": "#d0e2fd"
+        "cursor": "#2472f2",
+        "selection": "#c5dafc"
       },
       "text": {
         "family": "Zed Mono",
@@ -1177,8 +1205,8 @@
         "size": 16
       },
       "selection": {
-        "cursor": "#6099f7",
-        "selection": "#d0e2fd"
+        "cursor": "#2472f2",
+        "selection": "#c5dafc"
       },
       "text": {
         "family": "Zed Mono",
@@ -1186,7 +1214,7 @@
         "size": 16
       },
       "border": {
-        "color": "#fbbdbd",
+        "color": "#f9a0a0",
         "width": 1
       },
       "margin": {

styles/styleTree/editor.ts 🔗

@@ -49,7 +49,7 @@ export default function editor(theme: Theme) {
         documentHighlightWriteBackground: theme.editor.highlight.occurrence.value,
         errorColor: theme.textColor.error.value,
         gutterBackground: backgroundColor(theme, 500),
-        gutterPaddingFactor: 2.5,
+        gutterPaddingFactor: 3.5,
         highlightedLineBackground: theme.editor.line.highlighted.value,
         lineNumber: theme.editor.gutter.primary.value,
         lineNumberActive: theme.editor.gutter.active.value,
@@ -129,7 +129,21 @@ export default function editor(theme: Theme) {
         invalidInformationDiagnostic: diagnostic(theme, "muted"),
         invalidWarningDiagnostic: diagnostic(theme, "muted"),
         syntax: {
-
-        }
+            keyword: theme.syntax.keyword.color.value, 
+            function: theme.syntax.function.color.value,
+            string: theme.syntax.string.color.value,
+            type: theme.syntax.type.color.value,
+            number: theme.syntax.number.color.value,
+            comment: theme.syntax.comment.color.value,
+            property: theme.syntax.property.color.value,
+            variant: theme.syntax.variant.color.value,
+            constant: theme.syntax.constant.color.value,
+            title: { color: theme.syntax.title.color.value, weight: "bold" },
+            emphasis: theme.textColor.feature.value,
+            "emphasis.strong": { color: theme.textColor.feature.value, weight: "bold" },
+            link_uri: { color: theme.syntax.linkUrl.color.value, underline: true },
+            link_text: { color: theme.syntax.linkText.color.value, italic: true },
+            list_marker: theme.syntax.listMarker.color.value,
+        },
     };
 }

styles/styleTree/workspace.ts 🔗

@@ -135,7 +135,7 @@ export default function workspace(theme: Theme) {
     toolbar: {
       height: 34,
       background: backgroundColor(theme, 500),
-      border: border(theme, "primary", { bottom: true }),
+      border: border(theme, "secondary", { bottom: true }),
       itemSpacing: 8,
       padding: { left: 16, right: 8, top: 4, bottom: 4 },
     },

styles/themes/dark.ts 🔗

@@ -88,39 +88,39 @@ const iconColor = {
 
 const player = {
     1: {
-        baseColor: colors.blue[600],
-        cursorColor: colors.blue[600],
-        selectionColor: colors.blue[100],
-        borderColor: colors.blue[600],
+        baseColor: colors.blue[500],
+        cursorColor: colors.blue[500],
+        selectionColor: colors.blue[800],
+        borderColor: colors.blue[800],
     },
     2: {
         baseColor: colors.lime[500],
         cursorColor: colors.lime[500],
-        selectionColor: colors.lime[100],
+        selectionColor: colors.lime[800],
         borderColor: colors.lime[500],
     },
     3: {
         baseColor: colors.indigo[500],
         cursorColor: colors.indigo[500],
-        selectionColor: colors.indigo[100],
+        selectionColor: colors.indigo[800],
         borderColor: colors.indigo[500],
     },
     4: {
         baseColor: colors.orange[500],
         cursorColor: colors.orange[500],
-        selectionColor: colors.orange[100],
+        selectionColor: colors.orange[800],
         borderColor: colors.orange[500],
     },
     5: {
         baseColor: colors.purple[500],
         cursorColor: colors.purple[500],
-        selectionColor: colors.purple[100],
+        selectionColor: colors.purple[800],
         borderColor: colors.purple[500],
     },
     6: {
         baseColor: colors.teal[400],
         cursorColor: colors.teal[400],
-        selectionColor: colors.teal[100],
+        selectionColor: colors.teal[800],
         borderColor: colors.teal[400],
     },
     7: {
@@ -151,11 +151,11 @@ const editor = {
     },
     highlight: {
         selection: player[1].selectionColor,
-        occurrence: colors.indigo[500], // TODO: Why does indigo[500], indigo[100], and indigo[900] all give me the same color? @kethku
-        activeOccurrence: colors.indigo[400], // TODO: We don't seem to be using this right now in rust
+        occurrence: colors.neutral[750], 
+        activeOccurrence: colors.neutral[700],
         matchingBracket: backgroundColor[500].active,
-        match: colors.lime[500],
-        activeMatch: colors.lime[400],
+        match: colors.sky[900],
+        activeMatch: colors.sky[800],
         related: backgroundColor[500].focused,
     },
     gutter: {
@@ -166,15 +166,15 @@ const editor = {
 
 const syntax: Syntax = {
     primary: {
-        color: textColor.primary,
+        color: colors.neutral[150],
         weight: fontWeights.normal,
     },
     comment: {
-        color: colors.lime[200],
+        color: colors.neutral[300],
         weight: fontWeights.normal,
     },
     punctuation: {
-        color: textColor.primary,
+        color: colors.neutral[200],
         weight: fontWeights.normal,
     },
     constant: {
@@ -182,7 +182,7 @@ const syntax: Syntax = {
         weight: fontWeights.normal,
     },
     keyword: {
-        color: colors.sky[400],
+        color: colors.blue[400],
         weight: fontWeights.normal,
     },
     function: {
@@ -194,19 +194,19 @@ const syntax: Syntax = {
         weight: fontWeights.normal,
     },
     variant: {
-        color: colors.teal[300],
+        color: colors.sky[300],
         weight: fontWeights.normal,
     },
     property: {
-        color: colors.sky[300],
+        color: colors.blue[400],
         weight: fontWeights.normal,
     },
     enum: {
-        color: colors.sky[400],
+        color: colors.orange[500],
         weight: fontWeights.normal,
     },
     operator: {
-        color: colors.sky[400],
+        color: colors.orange[500],
         weight: fontWeights.normal,
     },
     string: {
@@ -214,11 +214,11 @@ const syntax: Syntax = {
         weight: fontWeights.normal,
     },
     number: {
-        color: colors.neutral[150],
+        color: colors.lime[300],
         weight: fontWeights.normal,
     },
     boolean: {
-        color: colors.neutral[150],
+        color: colors.lime[300],
         weight: fontWeights.normal,
     },
     predictive: {
@@ -226,7 +226,7 @@ const syntax: Syntax = {
         weight: fontWeights.normal,
     },
     title: {
-        color: colors.sky[500],
+        color: colors.amber[500],
         weight: fontWeights.bold,
     },
     emphasis: {

styles/themes/light.ts 🔗

@@ -18,9 +18,9 @@ const backgroundColor = {
   },
   500: {
     base: colors.neutral[0],
-    hovered: colors.neutral[50],
-    active: colors.neutral[100],
-    focused: colors.neutral[50],
+    hovered: colors.neutral[25],
+    active: colors.neutral[50],
+    focused: colors.neutral[75],
   },
   ok: {
     base: colors.green[100],
@@ -159,66 +159,66 @@ const editor = {
     related: colors.neutral[0],
   },
   gutter: {
-    primary: textColor.muted,
+    primary: colors.neutral[300],
     active: textColor.active,
   },
 };
 
 const syntax: Syntax = {
   primary: {
-    color: textColor.primary,
+    color: colors.neutral[750],
     weight: fontWeights.normal,
   },
   comment: {
-    color: colors.lime[200],
+    color: colors.neutral[600],
     weight: fontWeights.normal,
   },
   punctuation: {
-    color: textColor.primary,
+    color: colors.neutral[700],
     weight: fontWeights.normal,
   },
   constant: {
-    color: colors.neutral[150],
+    color: colors.neutral[700],
     weight: fontWeights.normal,
   },
   keyword: {
-    color: colors.sky[400],
+    color: colors.blue[800],
     weight: fontWeights.normal,
   },
   function: {
-    color: colors.yellow[200],
+    color: colors.green[600],
     weight: fontWeights.normal,
   },
   type: {
-    color: colors.teal[300],
+    color: colors.teal[600],
     weight: fontWeights.normal,
   },
   variant: {
-    color: colors.teal[300],
+    color: colors.sky[600],
     weight: fontWeights.normal,
   },
   property: {
-    color: colors.sky[300],
+    color: colors.blue[700],
     weight: fontWeights.normal,
   },
   enum: {
-    color: colors.sky[400],
+    color: colors.orange[600],
     weight: fontWeights.normal,
   },
   operator: {
-    color: colors.sky[400],
+    color: colors.orange[600],
     weight: fontWeights.normal,
   },
   string: {
-    color: colors.orange[300],
+    color: colors.orange[600],
     weight: fontWeights.normal,
   },
   number: {
-    color: colors.neutral[150],
+    color: colors.teal[500],
     weight: fontWeights.normal,
   },
   boolean: {
-    color: colors.neutral[150],
+    color: colors.amber[600],
     weight: fontWeights.normal,
   },
   predictive: {
@@ -238,7 +238,7 @@ const syntax: Syntax = {
     weight: fontWeights.bold,
   },
   linkUrl: {
-    color: colors.lime[500],
+    color: colors.teal[500],
     weight: fontWeights.normal,
     // TODO: add underline
   },

styles/utils/color.ts 🔗

@@ -17,14 +17,14 @@ export function colorRamp(
   } else {
     let hue = Math.round(chroma(color).hsl()[0]);
     let startColor = chroma.hsl(hue, 0.88, 0.96);
-    let endColor = chroma.hsl(hue, 0.68, 0.32);
+    let endColor = chroma.hsl(hue, 0.68, 0.12);
     scale = chroma
       .scale([startColor, color, endColor])
       .domain([0, 0.5, 1])
       .mode("hsl")
       .gamma(1)
-      .correctLightness(true)
-      .padding([0, 0.15]);
+      // .correctLightness(true)
+      .padding([0, 0]);
   }
 
   const ramp: ColorRamp = {};