Update Light & Dark themes

styles/src/styleTree/editor.ts

@@ -42,7 +42,7 @@ export default function editor(theme: Theme) {
         textColor: theme.syntax.primary.color.value,
         background: backgroundColor(theme, 500),
         activeLineBackground: theme.editor.line.active.value,
-        codeActionsIndicator: iconColor(theme, "secondary"),
+        codeActionsIndicator: iconColor(theme, "muted"),
         diffBackgroundDeleted: backgroundColor(theme, "error"),
         diffBackgroundInserted: backgroundColor(theme, "ok"),
         documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
@@ -78,10 +78,7 @@ export default function editor(theme: Theme) {
             margin: {
                 left: -14,
             },
-            matchHighlight: {
-                color: theme.syntax.keyword.color.value,
-                weight: theme.syntax.keyword.weight.value,
-            },
+            matchHighlight: text(theme, "mono", "feature"),
             selectedItem: {
                 ...autocompleteItem,
                 background: backgroundColor(theme, 500, "active"),

styles/src/styleTree/selectorModal.ts

@@ -28,7 +28,7 @@ export default function selectorModal(theme: Theme): Object {
         activeItem,
         border: border(theme, "primary"),
         empty: {
-            text: text(theme, "sans", "muted"),
+            text: text(theme, "sans", "placeholder"),
             padding: {
                 bottom: 4,
                 left: 16,

styles/src/styleTree/workspace.ts

@@ -117,7 +117,7 @@ export default function workspace(theme: Theme) {
             signInPrompt,
             hoveredSignInPrompt: {
                 ...signInPrompt,
-                ...text(theme, "mono", "active"),
+                ...text(theme, "sans", "active"),
                 size: 13,
             },
             offlineIcon: {

styles/src/themes/dark.ts

@@ -6,19 +6,19 @@ const backgroundColor = {
     100: {
         base: colors.neutral[750],
         hovered: colors.neutral[725],
-        active: colors.neutral[700],
+        active: colors.neutral[800],
         focused: colors.neutral[675],
     },
     300: {
         base: colors.neutral[800],
         hovered: colors.neutral[775],
         active: colors.neutral[750],
-        focused: colors.neutral[725],
+        focused: colors.neutral[775],
     },
     500: {
         base: colors.neutral[900],
-        hovered: colors.neutral[875],
-        active: colors.neutral[850],
+        hovered: withOpacity(colors.neutral[0], 0.08),
+        active: withOpacity(colors.neutral[0], 0.12),
         focused: colors.neutral[825],
     },
     ok: {
@@ -103,23 +103,23 @@ const editor = {
     indent_guide: borderColor.muted,
     indent_guide_active: borderColor.secondary,
     line: {
-        active: backgroundColor[500].active,
-        highlighted: backgroundColor[500].hovered,
+        active: withOpacity(colors.neutral[0], 0.07),
+        highlighted: withOpacity(colors.neutral[0], 0.12),
         inserted: backgroundColor.ok.active,
         deleted: backgroundColor.error.active,
         modified: backgroundColor.info.active,
     },
     highlight: {
         selection: player[1].selectionColor,
-        occurrence: withOpacity(colors.teal[500], 0.16),
-        activeOccurrence: withOpacity(colors.teal[500], 0.32),
+        occurrence: withOpacity(colors.neutral[0], 0.12),
+        activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
         matchingBracket: backgroundColor[500].active,
         match: withOpacity(colors.sky[500], 0.16),
         activeMatch: withOpacity(colors.sky[800], 0.32),
         related: backgroundColor[500].focused,
     },
     gutter: {
-        primary: textColor.muted,
+        primary: textColor.placeholder,
         active: textColor.active,
     },
 };

styles/src/themes/light.ts

@@ -4,22 +4,22 @@ import Theme, { buildPlayer, Syntax } from "./theme";
 
 const backgroundColor = {
     100: {
-        base: colors.neutral[100],
-        hovered: colors.neutral[150],
-        active: colors.neutral[200],
-        focused: colors.neutral[150],
-    },
-    300: {
-        base: colors.neutral[50],
+        base: colors.neutral[75],
         hovered: colors.neutral[100],
         active: colors.neutral[150],
         focused: colors.neutral[100],
     },
+    300: {
+        base: colors.neutral[25],
+        hovered: colors.neutral[75],
+        active: colors.neutral[125],
+        focused: colors.neutral[75],
+    },
     500: {
         base: colors.neutral[0],
-        hovered: colors.neutral[25],
-        active: colors.neutral[50],
-        focused: colors.neutral[75],
+        hovered: withOpacity(colors.neutral[900], 0.03),
+        active: withOpacity(colors.neutral[900], 0.06),
+        focused: colors.neutral[50],
     },
     ok: {
         base: colors.green[100],
@@ -48,9 +48,9 @@ const backgroundColor = {
 };
 
 const borderColor = {
-    primary: colors.neutral[200],
-    secondary: colors.neutral[100],
-    muted: colors.neutral[50],
+    primary: colors.neutral[150],
+    secondary: colors.neutral[150],
+    muted: colors.neutral[100],
     focused: colors.neutral[100],
     active: colors.neutral[250],
     ok: colors.green[200],
@@ -74,8 +74,8 @@ const textColor = {
 
 const iconColor = {
     primary: colors.neutral[700],
-    secondary: colors.neutral[600],
-    muted: colors.neutral[500],
+    secondary: colors.neutral[500],
+    muted: colors.neutral[350],
     placeholder: colors.neutral[300],
     active: colors.neutral[900],
     feature: colors.indigo[500],
@@ -102,19 +102,19 @@ const editor = {
     indent_guide: borderColor.muted,
     indent_guide_active: borderColor.secondary,
     line: {
-        active: backgroundColor[500].active,
-        highlighted: backgroundColor[500].active,
+        active: withOpacity(colors.neutral[900], 0.06),
+        highlighted: withOpacity(colors.neutral[900], 0.12),
         inserted: backgroundColor.ok.active,
         deleted: backgroundColor.error.active,
         modified: backgroundColor.info.active,
     },
     highlight: {
         selection: player[1].selectionColor,
-        occurrence: withOpacity(colors.amber[500], 0.06),
-        activeOccurrence: withOpacity(colors.amber[500], 0.26),
+        occurrence: withOpacity(colors.neutral[900], 0.06),
+        activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
         matchingBracket: colors.neutral[0],
-        match: withOpacity(colors.purple[500], 0.12),
-        activeMatch: withOpacity(colors.purple[400], 0.36),
+        match: withOpacity(colors.red[500], 0.2),
+        activeMatch: withOpacity(colors.indigo[400], 0.36),
         related: colors.neutral[0],
     },
     gutter: {