Fix typescript indent size
This commit is contained in:
Keith Simmons
+197
-197
@@ -3,227 +3,227 @@ import { withOpacity } from "../utils/color";
|
||||
import Theme, { buildPlayer, Syntax } from "./theme";
|
||||
|
||||
const backgroundColor = {
|
||||
100: {
|
||||
base: colors.neutral[750],
|
||||
hovered: colors.neutral[725],
|
||||
active: colors.neutral[800],
|
||||
focused: colors.neutral[675],
|
||||
},
|
||||
300: {
|
||||
base: colors.neutral[800],
|
||||
hovered: colors.neutral[775],
|
||||
active: colors.neutral[750],
|
||||
focused: colors.neutral[775],
|
||||
},
|
||||
500: {
|
||||
base: colors.neutral[900],
|
||||
hovered: withOpacity(colors.neutral[0], 0.08),
|
||||
active: withOpacity(colors.neutral[0], 0.12),
|
||||
focused: colors.neutral[825],
|
||||
},
|
||||
ok: {
|
||||
base: colors.green[600],
|
||||
hovered: colors.green[600],
|
||||
active: colors.green[600],
|
||||
focused: colors.green[600],
|
||||
},
|
||||
error: {
|
||||
base: colors.red[400],
|
||||
hovered: colors.red[400],
|
||||
active: colors.red[400],
|
||||
focused: colors.red[400],
|
||||
},
|
||||
warning: {
|
||||
base: colors.amber[300],
|
||||
hovered: colors.amber[300],
|
||||
active: colors.amber[300],
|
||||
focused: colors.amber[300],
|
||||
},
|
||||
info: {
|
||||
base: colors.blue[500],
|
||||
hovered: colors.blue[500],
|
||||
active: colors.blue[500],
|
||||
focused: colors.blue[500],
|
||||
},
|
||||
100: {
|
||||
base: colors.neutral[750],
|
||||
hovered: colors.neutral[725],
|
||||
active: colors.neutral[800],
|
||||
focused: colors.neutral[675],
|
||||
},
|
||||
300: {
|
||||
base: colors.neutral[800],
|
||||
hovered: colors.neutral[775],
|
||||
active: colors.neutral[750],
|
||||
focused: colors.neutral[775],
|
||||
},
|
||||
500: {
|
||||
base: colors.neutral[900],
|
||||
hovered: withOpacity(colors.neutral[0], 0.08),
|
||||
active: withOpacity(colors.neutral[0], 0.12),
|
||||
focused: colors.neutral[825],
|
||||
},
|
||||
ok: {
|
||||
base: colors.green[600],
|
||||
hovered: colors.green[600],
|
||||
active: colors.green[600],
|
||||
focused: colors.green[600],
|
||||
},
|
||||
error: {
|
||||
base: colors.red[400],
|
||||
hovered: colors.red[400],
|
||||
active: colors.red[400],
|
||||
focused: colors.red[400],
|
||||
},
|
||||
warning: {
|
||||
base: colors.amber[300],
|
||||
hovered: colors.amber[300],
|
||||
active: colors.amber[300],
|
||||
focused: colors.amber[300],
|
||||
},
|
||||
info: {
|
||||
base: colors.blue[500],
|
||||
hovered: colors.blue[500],
|
||||
active: colors.blue[500],
|
||||
focused: colors.blue[500],
|
||||
},
|
||||
};
|
||||
|
||||
const borderColor = {
|
||||
primary: colors.neutral[875],
|
||||
secondary: colors.neutral[775],
|
||||
muted: colors.neutral[675],
|
||||
focused: colors.neutral[500],
|
||||
active: colors.neutral[900],
|
||||
ok: colors.green[500],
|
||||
error: colors.red[500],
|
||||
warning: colors.amber[500],
|
||||
info: colors.blue[500],
|
||||
primary: colors.neutral[875],
|
||||
secondary: colors.neutral[775],
|
||||
muted: colors.neutral[675],
|
||||
focused: colors.neutral[500],
|
||||
active: colors.neutral[900],
|
||||
ok: colors.green[500],
|
||||
error: colors.red[500],
|
||||
warning: colors.amber[500],
|
||||
info: colors.blue[500],
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
primary: colors.neutral[50],
|
||||
secondary: colors.neutral[350],
|
||||
muted: colors.neutral[450],
|
||||
placeholder: colors.neutral[650],
|
||||
active: colors.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: colors.sky[500],
|
||||
ok: colors.green[600],
|
||||
error: colors.red[400],
|
||||
warning: colors.amber[300],
|
||||
info: colors.blue[500],
|
||||
primary: colors.neutral[50],
|
||||
secondary: colors.neutral[350],
|
||||
muted: colors.neutral[450],
|
||||
placeholder: colors.neutral[650],
|
||||
active: colors.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: colors.sky[500],
|
||||
ok: colors.green[600],
|
||||
error: colors.red[400],
|
||||
warning: colors.amber[300],
|
||||
info: colors.blue[500],
|
||||
};
|
||||
|
||||
const iconColor = {
|
||||
primary: colors.neutral[200],
|
||||
secondary: colors.neutral[350],
|
||||
muted: colors.neutral[600],
|
||||
placeholder: colors.neutral[700],
|
||||
active: colors.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: colors.blue[500],
|
||||
ok: colors.green[600],
|
||||
error: colors.red[500],
|
||||
warning: colors.amber[400],
|
||||
info: colors.blue[600],
|
||||
primary: colors.neutral[200],
|
||||
secondary: colors.neutral[350],
|
||||
muted: colors.neutral[600],
|
||||
placeholder: colors.neutral[700],
|
||||
active: colors.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: colors.blue[500],
|
||||
ok: colors.green[600],
|
||||
error: colors.red[500],
|
||||
warning: colors.amber[400],
|
||||
info: colors.blue[600],
|
||||
};
|
||||
|
||||
const player = {
|
||||
1: buildPlayer(colors.blue[500]),
|
||||
2: buildPlayer(colors.lime[500]),
|
||||
3: buildPlayer(colors.fuschia[500]),
|
||||
4: buildPlayer(colors.orange[500]),
|
||||
5: buildPlayer(colors.purple[500]),
|
||||
6: buildPlayer(colors.teal[400]),
|
||||
7: buildPlayer(colors.pink[400]),
|
||||
8: buildPlayer(colors.yellow[400]),
|
||||
1: buildPlayer(colors.blue[500]),
|
||||
2: buildPlayer(colors.lime[500]),
|
||||
3: buildPlayer(colors.fuschia[500]),
|
||||
4: buildPlayer(colors.orange[500]),
|
||||
5: buildPlayer(colors.purple[500]),
|
||||
6: buildPlayer(colors.teal[400]),
|
||||
7: buildPlayer(colors.pink[400]),
|
||||
8: buildPlayer(colors.yellow[400]),
|
||||
};
|
||||
|
||||
const editor = {
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: withOpacity(colors.neutral[0], 0.07),
|
||||
highlighted: withOpacity(colors.neutral[0], 0.12),
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: withOpacity(colors.neutral[0], 0.12),
|
||||
activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
|
||||
matchingBracket: backgroundColor[500].active,
|
||||
match: withOpacity(colors.sky[500], 0.16),
|
||||
activeMatch: withOpacity(colors.sky[800], 0.32),
|
||||
related: backgroundColor[500].focused,
|
||||
},
|
||||
gutter: {
|
||||
primary: textColor.placeholder,
|
||||
active: textColor.active,
|
||||
},
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: withOpacity(colors.neutral[0], 0.07),
|
||||
highlighted: withOpacity(colors.neutral[0], 0.12),
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: withOpacity(colors.neutral[0], 0.12),
|
||||
activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
|
||||
matchingBracket: backgroundColor[500].active,
|
||||
match: withOpacity(colors.sky[500], 0.16),
|
||||
activeMatch: withOpacity(colors.sky[800], 0.32),
|
||||
related: backgroundColor[500].focused,
|
||||
},
|
||||
gutter: {
|
||||
primary: textColor.placeholder,
|
||||
active: textColor.active,
|
||||
},
|
||||
};
|
||||
|
||||
const syntax: Syntax = {
|
||||
primary: {
|
||||
color: colors.neutral[150],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
comment: {
|
||||
color: colors.neutral[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
punctuation: {
|
||||
color: colors.neutral[200],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
constant: {
|
||||
color: colors.neutral[150],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
keyword: {
|
||||
color: colors.blue[400],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
function: {
|
||||
color: colors.yellow[200],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
type: {
|
||||
color: colors.teal[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
variant: {
|
||||
color: colors.sky[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
property: {
|
||||
color: colors.blue[400],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
enum: {
|
||||
color: colors.orange[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
operator: {
|
||||
color: colors.orange[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
string: {
|
||||
color: colors.orange[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
number: {
|
||||
color: colors.lime[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
boolean: {
|
||||
color: colors.lime[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
title: {
|
||||
color: colors.amber[500],
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
emphasis: {
|
||||
color: textColor.active,
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
emphasisStrong: {
|
||||
color: textColor.active,
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
linkUrl: {
|
||||
color: colors.lime[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add underline
|
||||
},
|
||||
linkText: {
|
||||
color: colors.orange[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add italic
|
||||
},
|
||||
primary: {
|
||||
color: colors.neutral[150],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
comment: {
|
||||
color: colors.neutral[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
punctuation: {
|
||||
color: colors.neutral[200],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
constant: {
|
||||
color: colors.neutral[150],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
keyword: {
|
||||
color: colors.blue[400],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
function: {
|
||||
color: colors.yellow[200],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
type: {
|
||||
color: colors.teal[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
variant: {
|
||||
color: colors.sky[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
property: {
|
||||
color: colors.blue[400],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
enum: {
|
||||
color: colors.orange[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
operator: {
|
||||
color: colors.orange[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
string: {
|
||||
color: colors.orange[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
number: {
|
||||
color: colors.lime[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
boolean: {
|
||||
color: colors.lime[300],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
title: {
|
||||
color: colors.amber[500],
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
emphasis: {
|
||||
color: textColor.active,
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
emphasisStrong: {
|
||||
color: textColor.active,
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
linkUrl: {
|
||||
color: colors.lime[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add underline
|
||||
},
|
||||
linkText: {
|
||||
color: colors.orange[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add italic
|
||||
},
|
||||
};
|
||||
|
||||
const shadowAlpha: NumberToken = {
|
||||
value: 0.32,
|
||||
type: "number",
|
||||
value: 0.32,
|
||||
type: "number",
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: "dark",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
name: "dark",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
|
||||
+195
-195
@@ -3,225 +3,225 @@ import { withOpacity } from "../utils/color";
|
||||
import Theme, { buildPlayer, Syntax } from "./theme";
|
||||
|
||||
const backgroundColor = {
|
||||
100: {
|
||||
base: colors.neutral[75],
|
||||
hovered: colors.neutral[100],
|
||||
active: colors.neutral[150],
|
||||
focused: colors.neutral[100],
|
||||
},
|
||||
300: {
|
||||
base: colors.neutral[25],
|
||||
hovered: colors.neutral[75],
|
||||
active: colors.neutral[125],
|
||||
focused: colors.neutral[75],
|
||||
},
|
||||
500: {
|
||||
base: colors.neutral[0],
|
||||
hovered: withOpacity(colors.neutral[900], 0.03),
|
||||
active: withOpacity(colors.neutral[900], 0.06),
|
||||
focused: colors.neutral[50],
|
||||
},
|
||||
ok: {
|
||||
base: colors.green[100],
|
||||
hovered: colors.green[100],
|
||||
active: colors.green[100],
|
||||
focused: colors.green[100],
|
||||
},
|
||||
error: {
|
||||
base: colors.red[100],
|
||||
hovered: colors.red[100],
|
||||
active: colors.red[100],
|
||||
focused: colors.red[100],
|
||||
},
|
||||
warning: {
|
||||
base: colors.yellow[100],
|
||||
hovered: colors.yellow[100],
|
||||
active: colors.yellow[100],
|
||||
focused: colors.yellow[100],
|
||||
},
|
||||
info: {
|
||||
base: colors.blue[100],
|
||||
hovered: colors.blue[100],
|
||||
active: colors.blue[100],
|
||||
focused: colors.blue[100],
|
||||
},
|
||||
100: {
|
||||
base: colors.neutral[75],
|
||||
hovered: colors.neutral[100],
|
||||
active: colors.neutral[150],
|
||||
focused: colors.neutral[100],
|
||||
},
|
||||
300: {
|
||||
base: colors.neutral[25],
|
||||
hovered: colors.neutral[75],
|
||||
active: colors.neutral[125],
|
||||
focused: colors.neutral[75],
|
||||
},
|
||||
500: {
|
||||
base: colors.neutral[0],
|
||||
hovered: withOpacity(colors.neutral[900], 0.03),
|
||||
active: withOpacity(colors.neutral[900], 0.06),
|
||||
focused: colors.neutral[50],
|
||||
},
|
||||
ok: {
|
||||
base: colors.green[100],
|
||||
hovered: colors.green[100],
|
||||
active: colors.green[100],
|
||||
focused: colors.green[100],
|
||||
},
|
||||
error: {
|
||||
base: colors.red[100],
|
||||
hovered: colors.red[100],
|
||||
active: colors.red[100],
|
||||
focused: colors.red[100],
|
||||
},
|
||||
warning: {
|
||||
base: colors.yellow[100],
|
||||
hovered: colors.yellow[100],
|
||||
active: colors.yellow[100],
|
||||
focused: colors.yellow[100],
|
||||
},
|
||||
info: {
|
||||
base: colors.blue[100],
|
||||
hovered: colors.blue[100],
|
||||
active: colors.blue[100],
|
||||
focused: colors.blue[100],
|
||||
},
|
||||
};
|
||||
|
||||
const borderColor = {
|
||||
primary: colors.neutral[150],
|
||||
secondary: colors.neutral[150],
|
||||
muted: colors.neutral[100],
|
||||
focused: colors.neutral[100],
|
||||
active: colors.neutral[250],
|
||||
ok: colors.green[200],
|
||||
error: colors.red[200],
|
||||
warning: colors.yellow[200],
|
||||
info: colors.blue[200],
|
||||
primary: colors.neutral[150],
|
||||
secondary: colors.neutral[150],
|
||||
muted: colors.neutral[100],
|
||||
focused: colors.neutral[100],
|
||||
active: colors.neutral[250],
|
||||
ok: colors.green[200],
|
||||
error: colors.red[200],
|
||||
warning: colors.yellow[200],
|
||||
info: colors.blue[200],
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
primary: colors.neutral[750],
|
||||
secondary: colors.neutral[650],
|
||||
muted: colors.neutral[550],
|
||||
placeholder: colors.neutral[450],
|
||||
active: colors.neutral[900],
|
||||
feature: colors.indigo[600],
|
||||
ok: colors.green[500],
|
||||
error: colors.red[500],
|
||||
warning: colors.yellow[500],
|
||||
info: colors.blue[500],
|
||||
primary: colors.neutral[750],
|
||||
secondary: colors.neutral[650],
|
||||
muted: colors.neutral[550],
|
||||
placeholder: colors.neutral[450],
|
||||
active: colors.neutral[900],
|
||||
feature: colors.indigo[600],
|
||||
ok: colors.green[500],
|
||||
error: colors.red[500],
|
||||
warning: colors.yellow[500],
|
||||
info: colors.blue[500],
|
||||
};
|
||||
|
||||
const iconColor = {
|
||||
primary: colors.neutral[700],
|
||||
secondary: colors.neutral[500],
|
||||
muted: colors.neutral[350],
|
||||
placeholder: colors.neutral[300],
|
||||
active: colors.neutral[900],
|
||||
feature: colors.indigo[500],
|
||||
ok: colors.green[600],
|
||||
error: colors.red[600],
|
||||
warning: colors.yellow[400],
|
||||
info: colors.blue[600],
|
||||
primary: colors.neutral[700],
|
||||
secondary: colors.neutral[500],
|
||||
muted: colors.neutral[350],
|
||||
placeholder: colors.neutral[300],
|
||||
active: colors.neutral[900],
|
||||
feature: colors.indigo[500],
|
||||
ok: colors.green[600],
|
||||
error: colors.red[600],
|
||||
warning: colors.yellow[400],
|
||||
info: colors.blue[600],
|
||||
};
|
||||
|
||||
const player = {
|
||||
1: buildPlayer(colors.blue[500]),
|
||||
2: buildPlayer(colors.emerald[400]),
|
||||
3: buildPlayer(colors.fuschia[400]),
|
||||
4: buildPlayer(colors.orange[400]),
|
||||
5: buildPlayer(colors.purple[400]),
|
||||
6: buildPlayer(colors.teal[400]),
|
||||
7: buildPlayer(colors.pink[400]),
|
||||
8: buildPlayer(colors.yellow[400]),
|
||||
1: buildPlayer(colors.blue[500]),
|
||||
2: buildPlayer(colors.emerald[400]),
|
||||
3: buildPlayer(colors.fuschia[400]),
|
||||
4: buildPlayer(colors.orange[400]),
|
||||
5: buildPlayer(colors.purple[400]),
|
||||
6: buildPlayer(colors.teal[400]),
|
||||
7: buildPlayer(colors.pink[400]),
|
||||
8: buildPlayer(colors.yellow[400]),
|
||||
};
|
||||
|
||||
const editor = {
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: withOpacity(colors.neutral[900], 0.06),
|
||||
highlighted: withOpacity(colors.neutral[900], 0.12),
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: withOpacity(colors.neutral[900], 0.06),
|
||||
activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side
|
||||
matchingBracket: colors.neutral[0],
|
||||
match: withOpacity(colors.red[500], 0.2),
|
||||
activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side
|
||||
related: colors.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: colors.neutral[300],
|
||||
active: textColor.active,
|
||||
},
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: withOpacity(colors.neutral[900], 0.06),
|
||||
highlighted: withOpacity(colors.neutral[900], 0.12),
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: withOpacity(colors.neutral[900], 0.06),
|
||||
activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side
|
||||
matchingBracket: colors.neutral[0],
|
||||
match: withOpacity(colors.red[500], 0.2),
|
||||
activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side
|
||||
related: colors.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: colors.neutral[300],
|
||||
active: textColor.active,
|
||||
},
|
||||
};
|
||||
|
||||
const syntax: Syntax = {
|
||||
primary: {
|
||||
color: colors.neutral[800],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
comment: {
|
||||
color: colors.neutral[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
punctuation: {
|
||||
color: colors.neutral[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
constant: {
|
||||
color: colors.neutral[800],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
keyword: {
|
||||
color: colors.indigo[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
function: {
|
||||
color: colors.orange[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
type: {
|
||||
color: colors.yellow[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
variant: {
|
||||
color: colors.rose[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
property: {
|
||||
color: colors.emerald[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
enum: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
operator: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
string: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
number: {
|
||||
color: colors.indigo[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
boolean: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.placeholder,
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
title: {
|
||||
color: colors.sky[500],
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
emphasis: {
|
||||
color: textColor.active,
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
emphasisStrong: {
|
||||
color: textColor.active,
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
linkUrl: {
|
||||
color: colors.lime[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add underline
|
||||
},
|
||||
linkText: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add italic
|
||||
},
|
||||
primary: {
|
||||
color: colors.neutral[800],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
comment: {
|
||||
color: colors.neutral[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
punctuation: {
|
||||
color: colors.neutral[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
constant: {
|
||||
color: colors.neutral[800],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
keyword: {
|
||||
color: colors.indigo[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
function: {
|
||||
color: colors.orange[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
type: {
|
||||
color: colors.yellow[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
variant: {
|
||||
color: colors.rose[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
property: {
|
||||
color: colors.emerald[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
enum: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
operator: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
string: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
number: {
|
||||
color: colors.indigo[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
boolean: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.placeholder,
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
title: {
|
||||
color: colors.sky[500],
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
emphasis: {
|
||||
color: textColor.active,
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
emphasisStrong: {
|
||||
color: textColor.active,
|
||||
weight: fontWeights.bold,
|
||||
},
|
||||
linkUrl: {
|
||||
color: colors.lime[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add underline
|
||||
},
|
||||
linkText: {
|
||||
color: colors.red[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add italic
|
||||
},
|
||||
};
|
||||
|
||||
const shadowAlpha: NumberToken = {
|
||||
value: 0.12,
|
||||
type: "number",
|
||||
value: 0.12,
|
||||
type: "number",
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: "light",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
name: "light",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
|
||||
+120
-120
@@ -2,144 +2,144 @@ import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
|
||||
import { withOpacity } from "../utils/color";
|
||||
|
||||
export interface SyntaxHighlightStyle {
|
||||
color: ColorToken;
|
||||
weight: FontWeightToken;
|
||||
color: ColorToken;
|
||||
weight: FontWeightToken;
|
||||
}
|
||||
|
||||
export interface Player {
|
||||
baseColor: ColorToken;
|
||||
cursorColor: ColorToken;
|
||||
selectionColor: ColorToken;
|
||||
borderColor: ColorToken;
|
||||
baseColor: ColorToken;
|
||||
cursorColor: ColorToken;
|
||||
selectionColor: ColorToken;
|
||||
borderColor: ColorToken;
|
||||
}
|
||||
export function buildPlayer(
|
||||
color: ColorToken,
|
||||
cursorOpacity?: number,
|
||||
selectionOpacity?: number,
|
||||
borderOpacity?: number
|
||||
color: ColorToken,
|
||||
cursorOpacity?: number,
|
||||
selectionOpacity?: number,
|
||||
borderOpacity?: number
|
||||
) {
|
||||
return {
|
||||
baseColor: color,
|
||||
cursorColor: withOpacity(color, cursorOpacity || 1.0),
|
||||
selectionColor: withOpacity(color, selectionOpacity || 0.24),
|
||||
borderColor: withOpacity(color, borderOpacity || 0.8),
|
||||
}
|
||||
return {
|
||||
baseColor: color,
|
||||
cursorColor: withOpacity(color, cursorOpacity || 1.0),
|
||||
selectionColor: withOpacity(color, selectionOpacity || 0.24),
|
||||
borderColor: withOpacity(color, borderOpacity || 0.8),
|
||||
}
|
||||
}
|
||||
|
||||
export interface BackgroundColorSet {
|
||||
base: ColorToken;
|
||||
hovered: ColorToken;
|
||||
active: ColorToken;
|
||||
focused: ColorToken;
|
||||
base: ColorToken;
|
||||
hovered: ColorToken;
|
||||
active: ColorToken;
|
||||
focused: ColorToken;
|
||||
}
|
||||
|
||||
export interface 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;
|
||||
// TODO: Either move the following or rename
|
||||
title: SyntaxHighlightStyle;
|
||||
emphasis: SyntaxHighlightStyle;
|
||||
emphasisStrong: SyntaxHighlightStyle;
|
||||
linkUrl: SyntaxHighlightStyle;
|
||||
linkText: SyntaxHighlightStyle;
|
||||
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;
|
||||
// TODO: Either move the following or rename
|
||||
title: SyntaxHighlightStyle;
|
||||
emphasis: SyntaxHighlightStyle;
|
||||
emphasisStrong: SyntaxHighlightStyle;
|
||||
linkUrl: SyntaxHighlightStyle;
|
||||
linkText: SyntaxHighlightStyle;
|
||||
};
|
||||
|
||||
export default interface Theme {
|
||||
name: string;
|
||||
backgroundColor: {
|
||||
100: BackgroundColorSet;
|
||||
300: BackgroundColorSet;
|
||||
500: BackgroundColorSet;
|
||||
ok: BackgroundColorSet;
|
||||
error: BackgroundColorSet;
|
||||
warning: BackgroundColorSet;
|
||||
info: BackgroundColorSet;
|
||||
name: string;
|
||||
backgroundColor: {
|
||||
100: BackgroundColorSet;
|
||||
300: BackgroundColorSet;
|
||||
500: BackgroundColorSet;
|
||||
ok: BackgroundColorSet;
|
||||
error: BackgroundColorSet;
|
||||
warning: BackgroundColorSet;
|
||||
info: BackgroundColorSet;
|
||||
};
|
||||
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;
|
||||
};
|
||||
borderColor: {
|
||||
primary: ColorToken;
|
||||
secondary: ColorToken;
|
||||
muted: ColorToken;
|
||||
focused: ColorToken;
|
||||
active: ColorToken;
|
||||
ok: ColorToken;
|
||||
error: ColorToken;
|
||||
warning: ColorToken;
|
||||
info: ColorToken;
|
||||
highlight: {
|
||||
selection: ColorToken;
|
||||
occurrence: ColorToken;
|
||||
activeOccurrence: ColorToken;
|
||||
matchingBracket: ColorToken;
|
||||
match: ColorToken;
|
||||
activeMatch: ColorToken;
|
||||
related: 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;
|
||||
};
|
||||
gutter: {
|
||||
primary: ColorToken;
|
||||
active: ColorToken;
|
||||
};
|
||||
};
|
||||
|
||||
syntax: Syntax,
|
||||
syntax: Syntax,
|
||||
|
||||
player: {
|
||||
1: Player;
|
||||
2: Player;
|
||||
3: Player;
|
||||
4: Player;
|
||||
5: Player;
|
||||
6: Player;
|
||||
7: Player;
|
||||
8: Player;
|
||||
};
|
||||
shadowAlpha: NumberToken;
|
||||
player: {
|
||||
1: Player;
|
||||
2: Player;
|
||||
3: Player;
|
||||
4: Player;
|
||||
5: Player;
|
||||
6: Player;
|
||||
7: Player;
|
||||
8: Player;
|
||||
};
|
||||
shadowAlpha: NumberToken;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user