wip

Keith Simmons created

Change summary

styles/core.ts  | 102 +++++-----
styles/dark.ts  | 462 +++++++++++++-------------------------------------
styles/theme.ts | 358 ++++++++++++++-------------------------
3 files changed, 307 insertions(+), 615 deletions(-)

Detailed changes

styles/core.ts 🔗 

@@ -1,58 +1,58 @@
 import { colorRamp } from "./lib";
 
 export default {
-  fontFamily: {
-    sans: "Zed Sans",
-    mono: "Zed Mono",
-  },
-  fontSize: {
-    "3xs": {
-      value: "8",
-      type: "fontSizes",
+    fontFamily: {
+        sans: "Zed Sans",
+        mono: "Zed Mono",
     },
-    "2xs": {
-      value: "10",
-      type: "fontSizes",
+    fontSize: {
+        "3xs": {
+            value: "8",
+            type: "fontSizes",
+        },
+        "2xs": {
+            value: "10",
+            type: "fontSizes",
+        },
+        xs: {
+            value: "12",
+            type: "fontSizes",
+        },
+        sm: {
+            value: "14",
+            type: "fontSizes",
+        },
+        md: {
+            value: "16",
+            type: "fontSizes",
+        },
+        lg: {
+            value: "18",
+            type: "fontSizes",
+        },
+        xl: {
+            value: "20",
+            type: "fontSizes",
+        },
     },
-    xs: {
-      value: "12",
-      type: "fontSizes",
+    color: {
+        neutral: colorRamp(["black", "white"], { steps: 21, increment: 50 }),
+        rose: colorRamp("#F43F5EFF"),
+        red: colorRamp("#EF4444FF"),
+        orange: colorRamp("#F97316FF"),
+        amber: colorRamp("#F59E0BFF"),
+        yellow: colorRamp("#EAB308FF"),
+        lime: colorRamp("#84CC16FF"),
+        green: colorRamp("#22C55EFF"),
+        emerald: colorRamp("#10B981FF"),
+        teal: colorRamp("#14B8A6FF"),
+        cyan: colorRamp("#06BBD4FF"),
+        sky: colorRamp("#0EA5E9FF"),
+        blue: colorRamp("#3B82F6FF"),
+        indigo: colorRamp("#6366F1FF"),
+        violet: colorRamp("#8B5CF6FF"),
+        purple: colorRamp("#A855F7FF"),
+        fuschia: colorRamp("#D946E4FF"),
+        pink: colorRamp("#EC4899FF"),
     },
-    sm: {
-      value: "14",
-      type: "fontSizes",
-    },
-    md: {
-      value: "16",
-      type: "fontSizes",
-    },
-    lg: {
-      value: "18",
-      type: "fontSizes",
-    },
-    xl: {
-      value: "20",
-      type: "fontSizes",
-    },
-  },
-  color: {
-    neutral: colorRamp(["black", "white"], { steps: 21, increment: 50 }),
-    rose: colorRamp("#F43F5EFF"),
-    red: colorRamp("#EF4444FF"),
-    orange: colorRamp("#F97316FF"),
-    amber: colorRamp("#F59E0BFF"),
-    yellow: colorRamp("#EAB308FF"),
-    lime: colorRamp("#84CC16FF"),
-    green: colorRamp("#22C55EFF"),
-    emerald: colorRamp("#10B981FF"),
-    teal: colorRamp("#14B8A6FF"),
-    cyan: colorRamp("#06BBD4FF"),
-    sky: colorRamp("#0EA5E9FF"),
-    blue: colorRamp("#3B82F6FF"),
-    indigo: colorRamp("#6366F1FF"),
-    violet: colorRamp("#8B5CF6FF"),
-    purple: colorRamp("#A855F7FF"),
-    fuschia: colorRamp("#D946E4FF"),
-    pink: colorRamp("#EC4899FF"),
-  },
 };

styles/dark.ts 🔗 

@@ -1,442 +1,230 @@
 import core from "./core";
 import Theme from "./theme";
 
+const { color } = core;
+
 const backgroundColor = {
     100: {
-        base: {
-            value: core.color.neutral[999].value,
-        },
-        hovered: {
-            value: core.color.neutral[999].value,
-        },
-        active: {
-            value: core.color.neutral[999].value,
-        },
-        focused: {
-            value: core.color.neutral[999].value,
-        },
+        base: color.neutral[750],
+        hovered: color.neutral[750],
+        active: color.neutral[750],
+        focused: color.neutral[750],
     },
     300: {
-        base: {
-            value: core.color.neutral[999].value,
-        },
-        hovered: {
-            value: core.color.neutral[999].value,
-        },
-        active: {
-            value: core.color.neutral[999].value,
-        },
-        focused: {
-            value: core.color.neutral[999].value,
-        },
+        base: color.neutral[800],
+        hovered: color.neutral[800],
+        active: color.neutral[800],
+        focused: color.neutral[800],
     },
     500: {
-        base: {
-            value: core.color.neutral[999].value,
-        },
-        hovered: {
-            value: "#000000",
-        },
-        active: {
-            value: "#000000",
-        },
-        focused: {
-            value: "#000000",
-        },
+        base: color.neutral[900],
+        hovered: color.neutral[900],
+        active: color.neutral[900],
+        focused: color.neutral[900],
     },
     ok: {
-        base: {
-            value: "#000000",
-        },
-        hovered: {
-            value: "#000000",
-        },
-        active: {
-            value: "#000000",
-        },
-        focused: {
-            value: "#000000",
-        },
+        base: color.green[600],
+        hovered: color.green[600],
+        active: color.green[600],
+        focused: color.green[600],
     },
     error: {
-        base: {
-            value: "#000000",
-        },
-        hovered: {
-            value: "#000000",
-        },
-        active: {
-            value: "#000000",
-        },
-        focused: {
-            value: "#000000",
-        },
+        base: color.red[400],
+        hovered: color.red[400],
+        active: color.red[400],
+        focused: color.red[400],
     },
     warning: {
-        base: {
-            value: "#000000",
-        },
-        hovered: {
-            value: "#000000",
-        },
-        active: {
-            value: "#000000",
-        },
-        focused: {
-            value: "#000000",
-        },
+        base: color.amber[300],
+        hovered: color.amber[300],
+        active: color.amber[300],
+        focused: color.amber[300],
     },
     info: {
-        base: {
-            value: "#000000",
-        },
-        hovered: {
-            value: "#000000",
-        },
-        active: {
-            value: "#000000",
-        },
-        focused: {
-            value: "#000000",
-        },
+        base: color.blue[500],
+        hovered: color.blue[500],
+        active: color.blue[500],
+        focused: color.blue[500],
     },
 };
 
 const borderColor = {
-    primary: {
-        value: "#000000",
-    },
-    secondary: {
-        value: "#000000",
-    },
-    muted: {
-        value: "#000000",
-    },
-    focused: {
-        value: "#000000",
-    },
-    active: {
-        value: "#000000",
-    },
-    ok: {
-        value: "#000000",
-    },
-    error: {
-        value: "#000000",
-    },
-    warning: {
-        value: "#000000",
-    },
-    info: {
-        value: "#000000",
-    },
+    primary: color.neutral[850],
+    secondary: color.neutral[700],
+    muted: color.neutral[750],
+    focused: color.neutral[100],
+    active: color.neutral[500],
+    ok: color.neutral[999],
+    error: color.neutral[999],
+    warning: color.neutral[999],
+    info: color.neutral[999],
 };
 
 const textColor = {
-    primary: {
-        value: core.color.neutral[150].value,
-    },
-    secondary: {
-        value: core.color.neutral[350].value,
-    },
-    muted: {
-        value: core.color.neutral[550].value,
-    },
-    placeholder: {
-        value: core.color.neutral[750].value,
-    },
-    active: {
-        value: core.color.neutral[0].value,
-    },
-    feature: {
-        //TODO: (design) define feature and it's correct value
-        value: core.color.sky[500].value,
-    },
-    ok: {
-        value: core.color.green[600].value,
-    },
-    error: {
-        value: core.color.red[400].value,
-    },
-    warning: {
-        value: core.color.amber[300].value,
-    },
-    info: {
-        value: core.color.blue[500].value,
-    },
+    primary: color.neutral[150],
+    secondary: color.neutral[350],
+    muted: color.neutral[550],
+    placeholder: color.neutral[750],
+    active: color.neutral[0],
+    //TODO: (design) define feature and it's correct value
+    feature: color.sky[500],
+    ok: color.green[600],
+    error: color.red[400],
+    warning: color.amber[300],
+    info: color.blue[500],
 };
 
 const iconColor = {
-    primary: {
-        value: core.color.neutral[300].value,
-    },
-    secondary: {
-        value: core.color.neutral[500].value,
-    },
-    muted: {
-        value: core.color.neutral[600].value,
-    },
-    placeholder: {
-        value: core.color.neutral[700].value,
-    },
-    active: {
-        value: core.color.neutral[50].value,
-    },
-    feature: {
-        //TODO: (design) define feature and it's correct value
-        value: core.color.sky[500].value,
-    },
-    ok: {
-        value: core.color.green[600].value,
-    },
-    error: {
-        value: core.color.red[400].value,
-    },
-    warning: {
-        value: core.color.amber[300].value,
-    },
-    info: {
-        value: core.color.blue[500].value,
-    },
+    primary: color.neutral[300],
+    secondary: color.neutral[500],
+    muted: color.neutral[600],
+    placeholder: color.neutral[700],
+    active: color.neutral[50],
+    //TODO: (design) define feature and it's correct value
+    feature: color.sky[500],
+    ok: color.green[600],
+    error: color.red[400],
+    warning: color.amber[300],
+    info: color.blue[500],
 };
 
 const editor = {
-    background: {
-        value: backgroundColor[500].base.value,
-    },
-    indent_guide: {
-        value: core.color.neutral[999].value,
-    },
-    indent_guide_active: {
-        value: core.color.neutral[999].value,
-    },
+    background: backgroundColor[500].base,
+    indent_guide: color.neutral[999],
+    indent_guide_active: color.neutral[999],
     line: {
-        active: {
-            value: core.color.neutral[999].value,
-        },
-        highlighted: {
-            value: core.color.neutral[999].value,
-        },
-        inserted: {
-            value: core.color.neutral[999].value,
-        },
-        deleted: {
-            value: core.color.neutral[999].value,
-        },
-        modified: {
-            value: core.color.neutral[999].value,
-        },
+        active: color.neutral[999],
+        highlighted: color.neutral[999],
+        inserted: color.neutral[999],
+        deleted: color.neutral[999],
+        modified: color.neutral[999],
     },
     highlight: {
-        selection: {
-            value: core.color.neutral[999].value,
-        },
-        occurrence: {
-            value: core.color.neutral[999].value,
-        },
-        activeOccurrence: {
-            value: core.color.neutral[999].value,
-        },
-        matchingBracket: {
-            value: core.color.neutral[999].value,
-        },
-        match: {
-            value: core.color.neutral[999].value,
-        },
-        activeMatch: {
-            value: core.color.neutral[999].value,
-        },
-        related: {
-            value: core.color.neutral[999].value,
-        },
+        selection: color.neutral[999],
+        occurrence: color.neutral[999],
+        activeOccurrence: color.neutral[999],
+        matchingBracket: color.neutral[999],
+        match: color.neutral[999],
+        activeMatch: color.neutral[999],
+        related: color.neutral[999],
     },
     gutter: {
-        primary: {
-            value: core.color.neutral[999].value,
-        },
-        active: {
-            value: core.color.neutral[999].value,
-        },
+        primary: color.neutral[999],
+        active: color.neutral[999],
     },
 };
 
 const syntax = {
     primary: {
-        color: {
-            value: core.color.neutral[150]
-        },
+        color: textColor.primary,
         weight: { value: "normal" },
     },
     comment: {
-        color: { value: "000000" },
+        color: color.lime[200],
         weight: { value: "normal" },
     },
     punctuation: {
-        color: { value: "000000" },
+        color: textColor.primary,
         weight: { value: "normal" },
     },
     constant: {
-        color: { value: "000000" },
+        color: color.neutral[150],
         weight: { value: "normal" },
     },
     keyword: {
-        color: { value: "000000" },
+        color: color.sky[400],
         weight: { value: "normal" },
     },
     function: {
-        color: { value: "000000" },
+        color: color.yellow[200],
         weight: { value: "normal" },
     },
     type: {
-        color: { value: "000000" },
+        color: color.teal[300],
         weight: { value: "normal" },
     },
     variant: {
-        color: { value: "000000" },
+        color: color.teal[300],
         weight: { value: "normal" },
     },
     property: {
-        color: { value: "000000" },
+        color: color.sky[300],
         weight: { value: "normal" },
     },
     enum: {
-        color: { value: "000000" },
+        color: color.sky[400],
         weight: { value: "normal" },
     },
     operator: {
-        color: { value: "000000" },
+        color: color.sky[400],
         weight: { value: "normal" },
     },
     string: {
-        color: { value: "000000" },
+        color: color.orange[300],
         weight: { value: "normal" },
     },
     number: {
-        color: { value: "000000" },
+        color: color.neutral[150],
         weight: { value: "normal" },
     },
     boolean: {
-        color: { value: "000000" },
+        color: color.neutral[150],
         weight: { value: "normal" },
     },
     predictive: {
-        color: { value: "000000" },
+        color: textColor.muted,
         weight: { value: "normal" },
     },
 };
 
 const player = {
     1: {
-        baseColor: {
-            value: core.color.neutral[999].value,
-        },
-        cursorColor: {
-            value: core.color.neutral[999].value,
-        },
-        selectionColor: {
-            value: core.color.neutral[999].value,
-        },
-        borderColor: {
-            value: core.color.neutral[999].value,
-        },
+        baseColor: color.blue[600],
+        cursorColor: color.blue[600],
+        selectionColor: color.blue[600],
+        borderColor: color.blue[600],
     },
     2: {
-        baseColor: {
-            value: core.color.neutral[999].value,
-        },
-        cursorColor: {
-            value: core.color.neutral[999].value,
-        },
-        selectionColor: {
-            value: core.color.neutral[999].value,
-        },
-        borderColor: {
-            value: core.color.neutral[999].value,
-        },
+        baseColor: color.indigo[500],
+        cursorColor: color.indigo[500],
+        selectionColor: color.indigo[500],
+        borderColor: color.indigo[500],
     },
     3: {
-        baseColor: {
-            value: core.color.neutral[999].value,
-        },
-        cursorColor: {
-            value: core.color.neutral[999].value,
-        },
-        selectionColor: {
-            value: core.color.neutral[999].value,
-        },
-        borderColor: {
-            value: core.color.neutral[999].value,
-        },
+        baseColor: color.green[500],
+        cursorColor: color.green[500],
+        selectionColor: color.green[500],
+        borderColor: color.green[500],
     },
     4: {
-        baseColor: {
-            value: core.color.neutral[999].value,
-        },
-        cursorColor: {
-            value: core.color.neutral[999].value,
-        },
-        selectionColor: {
-            value: core.color.neutral[999].value,
-        },
-        borderColor: {
-            value: core.color.neutral[999].value,
-        },
+        baseColor: color.orange[500],
+        cursorColor: color.orange[500],
+        selectionColor: color.orange[500],
+        borderColor: color.orange[500],
     },
     5: {
-        baseColor: {
-            value: core.color.neutral[999].value,
-        },
-        cursorColor: {
-            value: core.color.neutral[999].value,
-        },
-        selectionColor: {
-            value: core.color.neutral[999].value,
-        },
-        borderColor: {
-            value: core.color.neutral[999].value,
-        },
+        baseColor: color.purple[500],
+        cursorColor: color.purple[500],
+        selectionColor: color.purple[500],
+        borderColor: color.purple[500],
     },
     6: {
-        baseColor: {
-            value: core.color.neutral[999].value,
-        },
-        cursorColor: {
-            value: core.color.neutral[999].value,
-        },
-        selectionColor: {
-            value: core.color.neutral[999].value,
-        },
-        borderColor: {
-            value: core.color.neutral[999].value,
-        },
+        baseColor: color.teal[400],
+        cursorColor: color.teal[400],
+        selectionColor: color.teal[400],
+        borderColor: color.teal[400],
     },
     7: {
-        baseColor: {
-            value: core.color.neutral[999].value,
-        },
-        cursorColor: {
-            value: core.color.neutral[999].value,
-        },
-        selectionColor: {
-            value: core.color.neutral[999].value,
-        },
-        borderColor: {
-            value: core.color.neutral[999].value,
-        },
+        baseColor: color.pink[400],
+        cursorColor: color.pink[400],
+        selectionColor: color.pink[400],
+        borderColor: color.pink[400],
     },
     8: {
-        baseColor: {
-            value: core.color.neutral[999].value,
-        },
-        cursorColor: {
-            value: core.color.neutral[999].value,
-        },
-        selectionColor: {
-            value: core.color.neutral[999].value,
-        },
-        borderColor: {
-            value: core.color.neutral[999].value,
-        },
+        baseColor: color.yellow[400],
+        cursorColor: color.yellow[400],
+        selectionColor: color.yellow[400],
+        borderColor: color.yellow[400],
     },
 };

styles/theme.ts 🔗 

@@ -1,242 +1,146 @@
+export interface NumberToken {
+    value: number,
+    type: "number"
+}
+
 export type Color = string;
+export interface ColorToken {
+    value: Color;
+    type: "color";
+    step?: number
+}
 export type Weight =
-  | "thin"
-  | "extra_light"
-  | "light"
-  | "normal"
-  | "medium"
-  | "semibold"
-  | "bold"
-  | "extra_bold"
-  | "black";
+    | "thin"
+    | "extra_light"
+    | "light"
+    | "normal"
+    | "medium"
+    | "semibold"
+    | "bold"
+    | "extra_bold"
+    | "black";
+export interface WeightToken {
+    value: Weight,
+    type: "fontWeight"
+}
 
-interface SyntaxHighlightStyle {
-  color: { value: Color };
-  weight: { value: Weight };
+export interface SyntaxHighlightStyle {
+    color: ColorToken;
+    weight: WeightToken;
 }
 
-interface Player {
-  baseColor: {
-    value: Color;
-  };
-  cursorColor: {
-    value: Color;
-  };
-  selectionColor: {
-    value: Color;
-  };
-  borderColor: {
-    value: Color;
-  };
+export interface Player {
+    baseColor: ColorToken;
+    cursorColor: ColorToken;
+    selectionColor: ColorToken;
+    borderColor: ColorToken;
 }
 
 export interface BackgroundColor {
-  base: {
-    value: Color;
-  };
-  hovered: {
-    value: Color;
-  };
-  active: {
-    value: Color;
-  };
-  focused: {
-    value: Color;
-  };
+    base: ColorToken;
+    hovered: ColorToken;
+    active: ColorToken;
+    focused: ColorToken;
 }
 
 export default interface Theme {
-  backgroundColor: {
-    100: BackgroundColor;
-    300: BackgroundColor;
-    500: BackgroundColor;
-    ok: BackgroundColor;
-    error: BackgroundColor;
-    warning: BackgroundColor;
-    info: BackgroundColor;
-  };
-  borderColor: {
-    primary: {
-      value: Color;
-    };
-    secondary: {
-      value: Color;
-    };
-    muted: {
-      value: Color;
-    };
-    focused: {
-      value: Color;
-    };
-    active: {
-      value: Color;
-    };
-    ok: {
-      value: Color;
-    };
-    error: {
-      value: Color;
-    };
-    warning: {
-      value: Color;
-    };
-    info: {
-      value: Color;
-    };
-  };
-  textColor: {
-    primary: {
-      value: Color;
-    };
-    secondary: {
-      value: Color;
-    };
-    muted: {
-      value: Color;
+    backgroundColor: {
+        100: BackgroundColor;
+        300: BackgroundColor;
+        500: BackgroundColor;
+        ok: BackgroundColor;
+        error: BackgroundColor;
+        warning: BackgroundColor;
+        info: BackgroundColor;
+    };
+    borderColor: {
+        primary: ColorToken;
+        secondary: ColorToken;
+        muted: ColorToken;
+        focused: ColorToken;
+        active: ColorToken;
+        ok: ColorToken;
+        error: ColorToken;
+        warning: ColorToken;
+        info: ColorToken;
+    };
+    textColor: {
+        primary: ColorToken;
+        secondary: ColorToken;
+        muted: ColorToken;
+        placeholder: ColorToken;
+        active: ColorToken;
+        feature: ColorToken;
+        ok: ColorToken;
+        error: ColorToken;
+        warning: ColorToken;
+        info: ColorToken;
+    };
+    iconColor: {
+        primary: ColorToken;
+        secondary: ColorToken;
+        muted: ColorToken;
+        placeholder: ColorToken;
+        active: ColorToken;
+        feature: ColorToken;
+        ok: ColorToken;
+        error: ColorToken;
+        warning: ColorToken;
+        info: ColorToken;
+    };
+    editor: {
+        background: ColorToken;
+        indent_guide: ColorToken;
+        indent_guide_active: ColorToken;
+        line: {
+            active: ColorToken;
+            highlighted: ColorToken;
+            inserted: ColorToken;
+            deleted: ColorToken;
+            modified: ColorToken;
+        };
+        highlight: {
+            selection: ColorToken;
+            occurrence: ColorToken;
+            activeOccurrence: ColorToken;
+            matchingBracket: ColorToken;
+            match: ColorToken;
+            activeMatch: ColorToken;
+            related: ColorToken;
+        };
+        gutter: {
+            primary: ColorToken;
+            active: ColorToken;
+        };
     };
-    placeholder: {
-      value: Color;
-    };
-    active: {
-      value: Color;
-    };
-    feature: {
-      value: Color;
-    };
-    ok: {
-      value: Color;
-    };
-    error: {
-      value: Color;
-    };
-    warning: {
-      value: Color;
-    };
-    info: {
-      value: Color;
-    };
-  };
-  iconColor: {
-    primary: {
-      value: Color;
-    };
-    secondary: {
-      value: Color;
-    };
-    muted: {
-      value: Color;
-    };
-    placeholder: {
-      value: Color;
-    };
-    active: {
-      value: Color;
-    };
-    feature: {
-      value: Color;
-    };
-    ok: {
-      value: Color;
-    };
-    error: {
-      value: Color;
-    };
-    warning: {
-      value: Color;
-    };
-    info: {
-      value: Color;
-    };
-  };
-  editor: {
-    background: {
-      value: Color;
-    };
-    indent_guide: {
-      value: Color;
-    };
-    indent_guide_active: {
-      value: Color;
-    };
-    line: {
-      active: {
-        value: Color;
-      };
-      highlighted: {
-        value: Color;
-      };
-      inserted: {
-        value: Color;
-      };
-      deleted: {
-        value: Color;
-      };
-      modified: {
-        value: Color;
-      };
-    };
-    highlight: {
-      selection: {
-        value: Color;
-      };
-      occurrence: {
-        value: Color;
-      };
-      activeOccurrence: {
-        value: Color;
-      };
-      matchingBracket: {
-        value: Color;
-      };
-      match: {
-        value: Color;
-      };
-      activeMatch: {
-        value: Color;
-      };
-      related: {
-        value: Color;
-      };
-    };
-    gutter: {
-      primary: {
-        value: Color;
-      };
-      active: {
-        value: Color;
-      };
-    };
-  };
 
-  syntax: {
-    primary: SyntaxHighlightStyle;
-    comment: SyntaxHighlightStyle;
-    punctuation: SyntaxHighlightStyle;
-    constant: SyntaxHighlightStyle;
-    keyword: SyntaxHighlightStyle;
-    function: SyntaxHighlightStyle;
-    type: SyntaxHighlightStyle;
-    variant: SyntaxHighlightStyle;
-    property: SyntaxHighlightStyle;
-    enum: SyntaxHighlightStyle;
-    operator: SyntaxHighlightStyle;
-    string: SyntaxHighlightStyle;
-    number: SyntaxHighlightStyle;
-    boolean: SyntaxHighlightStyle;
-    predictive: SyntaxHighlightStyle;
-  };
+    syntax: {
+        primary: SyntaxHighlightStyle;
+        comment: SyntaxHighlightStyle;
+        punctuation: SyntaxHighlightStyle;
+        constant: SyntaxHighlightStyle;
+        keyword: SyntaxHighlightStyle;
+        function: SyntaxHighlightStyle;
+        type: SyntaxHighlightStyle;
+        variant: SyntaxHighlightStyle;
+        property: SyntaxHighlightStyle;
+        enum: SyntaxHighlightStyle;
+        operator: SyntaxHighlightStyle;
+        string: SyntaxHighlightStyle;
+        number: SyntaxHighlightStyle;
+        boolean: SyntaxHighlightStyle;
+        predictive: SyntaxHighlightStyle;
+    };
 
-  player: {
-    1: Player;
-    2: Player;
-    3: Player;
-    4: Player;
-    5: Player;
-    6: Player;
-    7: Player;
-    8: Player;
-  };
-  shadowAlpha: {
-    value: number;
-  };
+    player: {
+        1: Player;
+        2: Player;
+        3: Player;
+        4: Player;
+        5: Player;
+        6: Player;
+        7: Player;
+        8: Player;
+    };
+    shadowAlpha: NumberToken;
 }