Update dark, light themes.

2022-04-03 21:15:14 -04:00
parent 2d51b103d2
commit b6f85e4895
7 changed files with 230 additions and 160 deletions
@@ -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,
+        },
    };
 }
@@ -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 },
    },
@@ -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],
-        weight: fontWeights.normal,
-    },
-    property: {
        color: colors.sky[300],
        weight: fontWeights.normal,
    },
+    property: {
+        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: {
@@ -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
  },
@@ -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 = {};