WIP

styles/styleTree/app.ts

@@ -1,6 +1,6 @@
 import Theme from "../themes/theme";
 import chatPanel from "./chatPanel";
-import { backgroundColor, borderColor, text } from "./components";
+import { text } from "./components";
 import contactsPanel from "./contactsPanel";
 import editor from "./editor";
 import projectPanel from "./projectPanel";
@@ -18,7 +18,6 @@ export default function app(theme: Theme): Object {
         workspace: workspace(theme),
         editor: editor(theme),
         projectDiagnostics: {
-            background: backgroundColor(theme, 300),
             tabIconSpacing: 4,
             tabIconWidth: 13,
             tabSummarySpacing: 10,

styles/styleTree/editor.ts

@@ -38,7 +38,8 @@ export default function editor(theme: Theme) {
     }
 
     return {
-        textColor: theme.textColor.secondary.value,
+        // textColor: theme.syntax.primary.color,
+        textColor: theme.syntax.primary.color.value,
         background: backgroundColor(theme, 500),
         activeLineBackground: theme.editor.line.active.value,
         codeActionsIndicator: iconColor(theme, "secondary"),

styles/themes/dark.ts

@@ -16,9 +16,9 @@ const backgroundColor = {
     },
     500: {
         base: colors.neutral[900],
-        hovered: colors.neutral[900],
-        active: colors.neutral[900],
-        focused: colors.neutral[900],
+        hovered: colors.neutral[850],
+        active: colors.neutral[800],
+        focused: colors.neutral[850],
     },
     ok: {
         base: colors.green[600],
@@ -59,7 +59,7 @@ const borderColor = {
 };
 
 const textColor = {
-    primary: colors.neutral[150],
+    primary: colors.neutral[100],
     secondary: colors.neutral[350],
     muted: colors.neutral[550],
     placeholder: colors.neutral[750],
@@ -90,49 +90,49 @@ const player = {
     1: {
         baseColor: colors.blue[600],
         cursorColor: colors.blue[600],
-        selectionColor: colors.blue[600],
+        selectionColor: colors.blue[100],
         borderColor: colors.blue[600],
     },
     2: {
-        baseColor: colors.indigo[500],
-        cursorColor: colors.indigo[500],
-        selectionColor: colors.indigo[500],
-        borderColor: colors.indigo[500],
+        baseColor: colors.lime[500],
+        cursorColor: colors.lime[500],
+        selectionColor: colors.lime[100],
+        borderColor: colors.lime[500],
     },
     3: {
-        baseColor: colors.green[500],
-        cursorColor: colors.green[500],
-        selectionColor: colors.green[500],
-        borderColor: colors.green[500],
+        baseColor: colors.indigo[500],
+        cursorColor: colors.indigo[500],
+        selectionColor: colors.indigo[100],
+        borderColor: colors.indigo[500],
     },
     4: {
         baseColor: colors.orange[500],
         cursorColor: colors.orange[500],
-        selectionColor: colors.orange[500],
+        selectionColor: colors.orange[100],
         borderColor: colors.orange[500],
     },
     5: {
         baseColor: colors.purple[500],
         cursorColor: colors.purple[500],
-        selectionColor: colors.purple[500],
+        selectionColor: colors.purple[100],
         borderColor: colors.purple[500],
     },
     6: {
         baseColor: colors.teal[400],
         cursorColor: colors.teal[400],
-        selectionColor: colors.teal[400],
+        selectionColor: colors.teal[100],
         borderColor: colors.teal[400],
     },
     7: {
         baseColor: colors.pink[400],
         cursorColor: colors.pink[400],
-        selectionColor: colors.pink[400],
+        selectionColor: colors.pink[100],
         borderColor: colors.pink[400],
     },
     8: {
         baseColor: colors.yellow[400],
         cursorColor: colors.yellow[400],
-        selectionColor: colors.yellow[400],
+        selectionColor: colors.yellow[100],
         borderColor: colors.yellow[400],
     },
 };
@@ -143,24 +143,24 @@ const editor = {
     indent_guide: borderColor.muted,
     indent_guide_active: borderColor.secondary,
     line: {
-        active: colors.neutral[0],
-        highlighted: colors.neutral[0],
+        active: backgroundColor[500].active,
+        highlighted: backgroundColor[500].hovered,
         inserted: backgroundColor.ok.active,
         deleted: backgroundColor.error.active,
         modified: backgroundColor.info.active,
     },
     highlight: {
         selection: player[1].selectionColor,
-        occurrence: backgroundColor[500].active,
-        activeOccurrence: colors.neutral[0],
-        matchingBracket: colors.neutral[0],
-        match: colors.neutral[0],
-        activeMatch: colors.neutral[0],
-        related: colors.neutral[0],
+        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
+        matchingBracket: backgroundColor[500].active,
+        match: colors.lime[500],
+        activeMatch: colors.lime[400],
+        related: backgroundColor[500].focused,
     },
     gutter: {
-        primary: colors.neutral[0],
-        active: colors.neutral[0],
+        primary: textColor.muted,
+        active: textColor.active,
     },
 };
 

styles/themes/light.ts

@@ -61,16 +61,16 @@ const borderColor = {
 };
 
 const textColor = {
-  primary: colors.neutral[800],
-  secondary: colors.neutral[700],
-  muted: colors.neutral[600],
-  placeholder: colors.neutral[500],
+  primary: colors.neutral[750],
+  secondary: colors.neutral[600],
+  muted: colors.neutral[450],
+  placeholder: colors.neutral[300],
   active: colors.neutral[900],
-  feature: colors.blue[600],
-  ok: colors.green[800],
-  error: colors.red[800],
-  warning: colors.yellow[800],
-  info: colors.blue[800],
+  feature: colors.blue[500],
+  ok: colors.green[500],
+  error: colors.red[500],
+  warning: colors.yellow[500],
+  info: colors.blue[500],
 };
 
 const iconColor = {
@@ -94,17 +94,17 @@ const player = {
     borderColor: colors.blue[500],
   },
   2: {
+    baseColor: colors.lime[500],
+    cursorColor: colors.lime[500],
+    selectionColor: colors.lime[100],
+    borderColor: colors.lime[500],
+  },
+  3: {
     baseColor: colors.indigo[500],
     cursorColor: colors.indigo[500],
     selectionColor: colors.indigo[100],
     borderColor: colors.indigo[500],
   },
-  3: {
-    baseColor: colors.green[500],
-    cursorColor: colors.green[500],
-    selectionColor: colors.green[100],
-    borderColor: colors.green[500],
-  },
   4: {
     baseColor: colors.orange[500],
     cursorColor: colors.orange[500],
@@ -143,8 +143,8 @@ const editor = {
   indent_guide: borderColor.muted,
   indent_guide_active: borderColor.secondary,
   line: {
-    active: colors.neutral[0],
-    highlighted: colors.neutral[0],
+    active: backgroundColor[500].active,
+    highlighted: backgroundColor[500].active,
     inserted: backgroundColor.ok.active,
     deleted: backgroundColor.error.active,
     modified: backgroundColor.info.active,
@@ -159,8 +159,8 @@ const editor = {
     related: colors.neutral[0],
   },
   gutter: {
-    primary: colors.neutral[0],
-    active: colors.neutral[0],
+    primary: textColor.muted,
+    active: textColor.active,
   },
 };
 

styles/utils/color.ts

@@ -22,8 +22,8 @@ export function colorRamp(
       .scale([startColor, color, endColor])
       .domain([0, 0.5, 1])
       .mode("hsl")
-      .gamma(1)
-      .correctLightness(true)
+      .gamma(0.2)
+      // .correctLightness(true)
       .padding([0, 0.15]);
   }