theme.ts

  1import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
  2
  3export interface SyntaxHighlightStyle {
  4    color: ColorToken;
  5    weight: FontWeightToken;
  6}
  7
  8export interface Player {
  9    baseColor: ColorToken;
 10    cursorColor: ColorToken;
 11    selectionColor: ColorToken;
 12    borderColor: ColorToken;
 13}
 14
 15export interface BackgroundColor {
 16    base: ColorToken;
 17    hovered: ColorToken;
 18    active: ColorToken;
 19    focused: ColorToken;
 20}
 21
 22export interface Syntax {
 23    primary: SyntaxHighlightStyle;
 24    comment: SyntaxHighlightStyle;
 25    punctuation: SyntaxHighlightStyle;
 26    constant: SyntaxHighlightStyle;
 27    keyword: SyntaxHighlightStyle;
 28    function: SyntaxHighlightStyle;
 29    type: SyntaxHighlightStyle;
 30    variant: SyntaxHighlightStyle;
 31    property: SyntaxHighlightStyle;
 32    enum: SyntaxHighlightStyle;
 33    operator: SyntaxHighlightStyle;
 34    string: SyntaxHighlightStyle;
 35    number: SyntaxHighlightStyle;
 36    boolean: SyntaxHighlightStyle;
 37    predictive: SyntaxHighlightStyle;
 38    // TODO: Either move the following or rename
 39    title: SyntaxHighlightStyle;
 40    emphasis: SyntaxHighlightStyle;
 41    emphasisStrong: SyntaxHighlightStyle;
 42    linkUrl: SyntaxHighlightStyle;
 43    linkText: SyntaxHighlightStyle;
 44    listMarker: SyntaxHighlightStyle;
 45};
 46
 47export default interface Theme {
 48    name: string;
 49    backgroundColor: {
 50        100: BackgroundColor;
 51        300: BackgroundColor;
 52        500: BackgroundColor;
 53        ok: BackgroundColor;
 54        error: BackgroundColor;
 55        warning: BackgroundColor;
 56        info: BackgroundColor;
 57    };
 58    borderColor: {
 59        primary: ColorToken;
 60        secondary: ColorToken;
 61        muted: ColorToken;
 62        focused: ColorToken;
 63        active: ColorToken;
 64        ok: ColorToken;
 65        error: ColorToken;
 66        warning: ColorToken;
 67        info: ColorToken;
 68    };
 69    textColor: {
 70        primary: ColorToken;
 71        secondary: ColorToken;
 72        muted: ColorToken;
 73        placeholder: ColorToken;
 74        active: ColorToken;
 75        feature: ColorToken;
 76        ok: ColorToken;
 77        error: ColorToken;
 78        warning: ColorToken;
 79        info: ColorToken;
 80    };
 81    iconColor: {
 82        primary: ColorToken;
 83        secondary: ColorToken;
 84        muted: ColorToken;
 85        placeholder: ColorToken;
 86        active: ColorToken;
 87        feature: ColorToken;
 88        ok: ColorToken;
 89        error: ColorToken;
 90        warning: ColorToken;
 91        info: ColorToken;
 92    };
 93    editor: {
 94        background: ColorToken;
 95        indent_guide: ColorToken;
 96        indent_guide_active: ColorToken;
 97        line: {
 98            active: ColorToken;
 99            highlighted: ColorToken;
100            inserted: ColorToken;
101            deleted: ColorToken;
102            modified: ColorToken;
103        };
104        highlight: {
105            selection: ColorToken;
106            occurrence: ColorToken;
107            activeOccurrence: ColorToken;
108            matchingBracket: ColorToken;
109            match: ColorToken;
110            activeMatch: ColorToken;
111            related: ColorToken;
112        };
113        gutter: {
114            primary: ColorToken;
115            active: ColorToken;
116        };
117    };
118
119    syntax: Syntax,
120
121    player: {
122        1: Player;
123        2: Player;
124        3: Player;
125        4: Player;
126        5: Player;
127        6: Player;
128        7: Player;
129        8: Player;
130    };
131    shadowAlpha: NumberToken;
132}