theme.ts

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