Merge remote-tracking branch 'origin/main' into room

styles/src/styleTree/editor.ts

@@ -7,6 +7,7 @@ import {
   player,
   popoverShadow,
   text,
+  textColor,
   TextColor,
 } from "./components";
 import hoverPopover from "./hoverPopover";
@@ -59,8 +60,14 @@ export default function editor(theme: Theme) {
       indicator: iconColor(theme, "secondary"),
       verticalScale: 0.618
     },
-    diffBackgroundDeleted: backgroundColor(theme, "error"),
-    diffBackgroundInserted: backgroundColor(theme, "ok"),
+    diff: {
+      deleted: theme.iconColor.error,
+      inserted: theme.iconColor.ok,
+      modified: theme.iconColor.warning,
+      removedWidthEm: 0.275,
+      widthEm: 0.16,
+      cornerRadius: 0.05,
+    },
     documentHighlightReadBackground: theme.editor.highlight.occurrence,
     documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence,
     errorColor: theme.textColor.error,

styles/src/themes/common/base16.ts

@@ -113,6 +113,11 @@ export function createTheme(
       hovered: sample(ramps.blue, 0.1),
       active: sample(ramps.blue, 0.15),
     },
+    on500Ok: {
+      base: sample(ramps.green, 0.05),
+      hovered: sample(ramps.green, 0.1),
+      active: sample(ramps.green, 0.15)
+    }
   };
 
   const borderColor = {
@@ -180,6 +185,10 @@ export function createTheme(
       color: sample(ramps.neutral, 7),
       weight: fontWeights.normal,
     },
+    "variable.special": {
+      color: sample(ramps.blue, 0.80),
+      weight: fontWeights.normal,
+    },
     comment: {
       color: sample(ramps.neutral, 5),
       weight: fontWeights.normal,
@@ -205,15 +214,11 @@ export function createTheme(
       weight: fontWeights.normal,
     },
     constructor: {
-      color: sample(ramps.blue, 0.5),
-      weight: fontWeights.normal,
-    },
-    variant: {
-      color: sample(ramps.blue, 0.5),
+      color: sample(ramps.cyan, 0.5),
       weight: fontWeights.normal,
     },
     property: {
-      color: sample(ramps.blue, 0.5),
+      color: sample(ramps.blue, 0.6),
       weight: fontWeights.normal,
     },
     enum: {

styles/src/themes/common/theme.ts

@@ -43,7 +43,7 @@ export interface Syntax {
   keyword: SyntaxHighlightStyle;
   function: SyntaxHighlightStyle;
   type: SyntaxHighlightStyle;
-  variant: SyntaxHighlightStyle;
+  constructor: SyntaxHighlightStyle;
   property: SyntaxHighlightStyle;
   enum: SyntaxHighlightStyle;
   operator: SyntaxHighlightStyle;
@@ -78,6 +78,7 @@ export default interface Theme {
     // Hacks for elements on top of the editor
     on500: BackgroundColorSet;
     ok: BackgroundColorSet;
+    on500Ok: BackgroundColorSet;
     error: BackgroundColorSet;
     on500Error: BackgroundColorSet;
     warning: BackgroundColorSet;