working jump to definition with tests

styles/src/styleTree/chatPanel.ts

@@ -4,7 +4,6 @@ import {
   backgroundColor,
   border,
   player,
-  modalShadow,
   text,
   TextColor,
   popoverShadow
@@ -80,15 +79,15 @@ export default function chatPanel(theme: Theme) {
       ...message,
       body: {
         ...message.body,
-        color: theme.textColor.muted.value,
+        color: theme.textColor.muted,
       },
       sender: {
         ...message.sender,
-        color: theme.textColor.muted.value,
+        color: theme.textColor.muted,
       },
       timestamp: {
         ...message.timestamp,
-        color: theme.textColor.muted.value,
+        color: theme.textColor.muted,
       },
     },
     inputEditor: {

styles/src/styleTree/components.ts

@@ -1,8 +1,5 @@
-import chroma from "chroma-js";
-import { isIPv4 } from "net";
 import Theme, { BackgroundColorSet } from "../themes/common/theme";
-import { fontFamilies, fontSizes, FontWeight } from "../tokens";
-import { Color } from "../utils/color";
+import { fontFamilies, fontSizes, FontWeight } from "../common";
 
 export type TextColor = keyof Theme["textColor"];
 export function text(
@@ -15,16 +12,16 @@ export function text(
     underline?: boolean;
   }
 ) {
-  let size = fontSizes[properties?.size || "sm"].value;
+  let size = fontSizes[properties?.size || "sm"];
   return {
-    family: fontFamilies[fontFamily].value,
-    color: theme.textColor[color].value,
+    family: fontFamilies[fontFamily],
+    color: theme.textColor[color],
     ...properties,
     size,
   };
 }
 export function textColor(theme: Theme, color: TextColor) {
-  return theme.textColor[color].value;
+  return theme.textColor[color];
 }
 
 export type BorderColor = keyof Theme["borderColor"];
@@ -48,19 +45,19 @@ export function border(
   };
 }
 export function borderColor(theme: Theme, color: BorderColor) {
-  return theme.borderColor[color].value;
+  return theme.borderColor[color];
 }
 
 export type IconColor = keyof Theme["iconColor"];
 export function iconColor(theme: Theme, color: IconColor) {
-  return theme.iconColor[color].value;
+  return theme.iconColor[color];
 }
 
 export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 export interface Player {
   selection: {
-    cursor: Color;
-    selection: Color;
+    cursor: string;
+    selection: string;
   };
 }
 export function player(
@@ -69,8 +66,8 @@ export function player(
 ): Player {
   return {
     selection: {
-      cursor: theme.player[playerNumber].cursorColor.value,
-      selection: theme.player[playerNumber].selectionColor.value,
+      cursor: theme.player[playerNumber].cursorColor,
+      selection: theme.player[playerNumber].selectionColor,
     },
   };
 }
@@ -81,14 +78,14 @@ export function backgroundColor(
   theme: Theme,
   name: BackgroundColor,
   state?: BackgroundState,
-): Color {
-  return theme.backgroundColor[name][state || "base"].value;
+): string {
+  return theme.backgroundColor[name][state || "base"];
 }
 
 export function modalShadow(theme: Theme) {
   return {
     blur: 16,
-    color: theme.shadow.value,
+    color: theme.shadow,
     offset: [0, 2],
   };
 }
@@ -96,7 +93,7 @@ export function modalShadow(theme: Theme) {
 export function popoverShadow(theme: Theme) {
   return {
     blur: 4,
-    color: theme.shadow.value,
+    color: theme.shadow,
     offset: [1, 2],
   };
 }

styles/src/styleTree/editor.ts

@@ -43,28 +43,28 @@ export default function editor(theme: Theme) {
   for (const syntaxKey in theme.syntax) {
     const style = theme.syntax[syntaxKey];
     syntax[syntaxKey] = {
-      color: style.color.value,
-      weight: style.weight.value,
+      color: style.color,
+      weight: style.weight,
       underline: style.underline,
       italic: style.italic,
     };
   }
 
   return {
-    textColor: theme.syntax.primary.color.value,
+    textColor: theme.syntax.primary.color,
     background: backgroundColor(theme, 500),
-    activeLineBackground: theme.editor.line.active.value,
+    activeLineBackground: theme.editor.line.active,
     codeActionsIndicator: iconColor(theme, "muted"),
     diffBackgroundDeleted: backgroundColor(theme, "error"),
     diffBackgroundInserted: backgroundColor(theme, "ok"),
-    documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
-    documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence.value,
-    errorColor: theme.textColor.error.value,
+    documentHighlightReadBackground: theme.editor.highlight.occurrence,
+    documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence,
+    errorColor: theme.textColor.error,
     gutterBackground: backgroundColor(theme, 500),
     gutterPaddingFactor: 3.5,
-    highlightedLineBackground: theme.editor.line.highlighted.value,
-    lineNumber: theme.editor.gutter.primary.value,
-    lineNumberActive: theme.editor.gutter.active.value,
+    highlightedLineBackground: theme.editor.line.highlighted,
+    lineNumber: theme.editor.gutter.primary,
+    lineNumberActive: theme.editor.gutter.active,
     renameFade: 0.6,
     unnecessaryCodeFade: 0.5,
     selection: player(theme, 1).selection,
@@ -120,7 +120,7 @@ export default function editor(theme: Theme) {
       },
     },
     diagnosticPathHeader: {
-      background: theme.editor.line.active.value,
+      background: theme.editor.line.active,
       textScaleFactor: 0.857,
       filename: text(theme, "mono", "primary", { size: "sm" }),
       path: {
@@ -139,6 +139,10 @@ export default function editor(theme: Theme) {
     invalidInformationDiagnostic: diagnostic(theme, "muted"),
     invalidWarningDiagnostic: diagnostic(theme, "muted"),
     hover_popover: hoverPopover(theme),
+    link_definition: {
+      color: theme.syntax.linkUri.color,
+      underline: theme.syntax.linkUri.underline,
+    },
     jumpIcon: {
       color: iconColor(theme, "muted"),
       iconWidth: 20,

styles/src/styleTree/hoverPopover.ts

@@ -22,6 +22,6 @@ export default function HoverPopover(theme: Theme) {
       padding: { top: 4 },
     },
     prose: text(theme, "sans", "primary", { "size": "sm" }),
-    highlight: theme.editor.highlight.occurrence.value,
+    highlight: theme.editor.highlight.occurrence,
   }
 }

styles/src/styleTree/search.ts

@@ -25,7 +25,7 @@ export default function search(theme: Theme) {
   };
 
   return {
-    matchBackground: theme.editor.highlight.match.value,
+    matchBackground: theme.editor.highlight.match,
     tabIconSpacing: 8,
     tabIconWidth: 14,
     optionButton: {

styles/src/styleTree/updateNotification.ts

@@ -13,7 +13,7 @@ export default function updateNotification(theme: Theme): Object {
       ...text(theme, "sans", "secondary", { size: "xs" }),
       margin: { left: headerPadding, top: 6, bottom: 6 },
       hover: {
-        color: theme.textColor["active"].value
+        color: theme.textColor["active"]
       }
     },
     dismissButton: {

styles/src/styleTree/workspace.ts

@@ -147,7 +147,7 @@ export default function workspace(theme: Theme) {
     },
     disconnectedOverlay: {
       ...text(theme, "sans", "active"),
-      background: withOpacity(theme.backgroundColor[500].base, 0.8).value,
+      background: withOpacity(theme.backgroundColor[500].base, 0.8),
     },
     notification: {
       margin: { top: 10 },