Move style source files to src and build to dist
Co-authored-by: Nate Butler <nate@zed.dev>
This commit is contained in:
Keith Simmons
co-authored by
Nate Butler
Nate Butler
parent
58dee75ff0
commit
05a05157fa
@@ -0,0 +1,110 @@
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
import dark from "./themes/dark";
|
||||
import light from "./themes/light";
|
||||
import Theme from "./themes/theme";
|
||||
import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
|
||||
|
||||
// Organize theme tokens
|
||||
function themeTokens(theme: Theme) {
|
||||
return {
|
||||
meta: {
|
||||
themeName: theme.name,
|
||||
},
|
||||
text: theme.textColor,
|
||||
icon: theme.iconColor,
|
||||
background: theme.backgroundColor,
|
||||
border: theme.borderColor,
|
||||
editor: theme.editor,
|
||||
syntax: {
|
||||
primary: {
|
||||
value: theme.syntax.primary.color.value,
|
||||
type: "color",
|
||||
},
|
||||
comment: {
|
||||
value: theme.syntax.comment.color.value,
|
||||
type: "color",
|
||||
},
|
||||
keyword: {
|
||||
value: theme.syntax.keyword.color.value,
|
||||
type: "color",
|
||||
},
|
||||
function: {
|
||||
value: theme.syntax.function.color.value,
|
||||
type: "color",
|
||||
},
|
||||
type: {
|
||||
value: theme.syntax.type.color.value,
|
||||
type: "color",
|
||||
},
|
||||
variant: {
|
||||
value: theme.syntax.variant.color.value,
|
||||
type: "color",
|
||||
},
|
||||
property: {
|
||||
value: theme.syntax.property.color.value,
|
||||
type: "color",
|
||||
},
|
||||
enum: {
|
||||
value: theme.syntax.enum.color.value,
|
||||
type: "color",
|
||||
},
|
||||
operator: {
|
||||
value: theme.syntax.operator.color.value,
|
||||
type: "color",
|
||||
},
|
||||
string: {
|
||||
value: theme.syntax.string.color.value,
|
||||
type: "color",
|
||||
},
|
||||
number: {
|
||||
value: theme.syntax.number.color.value,
|
||||
type: "color",
|
||||
},
|
||||
boolean: {
|
||||
value: theme.syntax.boolean.color.value,
|
||||
type: "color",
|
||||
},
|
||||
},
|
||||
player: theme.player,
|
||||
shadowAlpha: theme.shadowAlpha,
|
||||
};
|
||||
}
|
||||
|
||||
// Organize core tokens
|
||||
const coreTokens = {
|
||||
color: {
|
||||
...colors,
|
||||
},
|
||||
text: {
|
||||
family: fontFamilies,
|
||||
weight: fontWeights,
|
||||
},
|
||||
size: fontSizes,
|
||||
};
|
||||
|
||||
const combinedTokens: any = {
|
||||
core: coreTokens,
|
||||
}
|
||||
|
||||
// Create core.json
|
||||
const corePath = path.resolve(`${__dirname}/../dist/figma/core.json`);
|
||||
const coreJSON = JSON.stringify(coreTokens, null, 2);
|
||||
fs.writeFileSync(corePath, coreJSON);
|
||||
console.log(`- Core: core.json created`);
|
||||
|
||||
// Create {theme}.json
|
||||
let themes = [dark, light];
|
||||
const themePath = path.resolve(`${__dirname}/figma`);
|
||||
themes.forEach((theme) => {
|
||||
const tokenJSON = JSON.stringify(themeTokens(theme), null, 2);
|
||||
fs.writeFileSync(`${themePath}/${theme.name}.json`, tokenJSON);
|
||||
console.log(`- Theme: ${theme.name}.json created`);
|
||||
combinedTokens[theme.name] = themeTokens(theme);
|
||||
});
|
||||
|
||||
// Create combined tokens.json
|
||||
const combinedPath = path.resolve(`${__dirname}/figma/tokens.json`);
|
||||
const combinedJSON = JSON.stringify(combinedTokens, null, 2);
|
||||
fs.writeFileSync(combinedPath, combinedJSON);
|
||||
console.log(`- Combined: tokens.json created`);
|
||||
@@ -0,0 +1,17 @@
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
import app from "./styleTree/app";
|
||||
import dark from "./themes/dark";
|
||||
import light from "./themes/light";
|
||||
import snakeCase from "./utils/snakeCase";
|
||||
|
||||
const themes = [dark, light];
|
||||
for (let theme of themes) {
|
||||
let styleTree = snakeCase(app(theme));
|
||||
let styleTreeJSON = JSON.stringify(styleTree, null, 2);
|
||||
let outPath = path.resolve(
|
||||
`${__dirname}/../../crates/zed/assets/themes/${theme.name}.json`
|
||||
);
|
||||
fs.writeFileSync(outPath, styleTreeJSON);
|
||||
console.log(`Generated ${outPath}`);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,637 @@
|
||||
{
|
||||
"meta": {
|
||||
"themeName": "dark"
|
||||
},
|
||||
"text": {
|
||||
"primary": {
|
||||
"value": "#f1f1f1",
|
||||
"step": 50,
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#9c9c9c",
|
||||
"step": 350,
|
||||
"type": "color"
|
||||
},
|
||||
"muted": {
|
||||
"value": "#636363",
|
||||
"step": 550,
|
||||
"type": "color"
|
||||
},
|
||||
"placeholder": {
|
||||
"value": "#2b2b2b",
|
||||
"step": 750,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
},
|
||||
"feature": {
|
||||
"value": "#1096d3",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"ok": {
|
||||
"value": "#1b9447",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"error": {
|
||||
"value": "#f15656",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"value": "#f7bb57",
|
||||
"step": 300,
|
||||
"type": "color"
|
||||
},
|
||||
"info": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"primary": {
|
||||
"value": "#c6c6c6",
|
||||
"step": 200,
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#9c9c9c",
|
||||
"step": 350,
|
||||
"type": "color"
|
||||
},
|
||||
"muted": {
|
||||
"value": "#555555",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"placeholder": {
|
||||
"value": "#393939",
|
||||
"step": 700,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
},
|
||||
"feature": {
|
||||
"value": "#1096d3",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"ok": {
|
||||
"value": "#1b9447",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"error": {
|
||||
"value": "#eb2d2d",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"value": "#f6a724",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"info": {
|
||||
"value": "#135acd",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"100": {
|
||||
"base": {
|
||||
"value": "#2b2b2b",
|
||||
"step": 750,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#323232",
|
||||
"step": 725,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#393939",
|
||||
"step": 700,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#404040",
|
||||
"step": 675,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"300": {
|
||||
"base": {
|
||||
"value": "#1c1c1c",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#232323",
|
||||
"step": 775,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#2b2b2b",
|
||||
"step": 750,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#323232",
|
||||
"step": 725,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"500": {
|
||||
"base": {
|
||||
"value": "#000000",
|
||||
"step": 900,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#070707",
|
||||
"step": 875,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#0e0e0e",
|
||||
"step": 850,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#151515",
|
||||
"step": 825,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"ok": {
|
||||
"base": {
|
||||
"value": "#1b9447",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#1b9447",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#1b9447",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#1b9447",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"base": {
|
||||
"value": "#f15656",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#f15656",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#f15656",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#f15656",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"base": {
|
||||
"value": "#f7bb57",
|
||||
"step": 300,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#f7bb57",
|
||||
"step": 300,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#f7bb57",
|
||||
"step": 300,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#f7bb57",
|
||||
"step": 300,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"info": {
|
||||
"base": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"border": {
|
||||
"primary": {
|
||||
"value": "#070707",
|
||||
"step": 875,
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#151515",
|
||||
"step": 825,
|
||||
"type": "color"
|
||||
},
|
||||
"muted": {
|
||||
"value": "#232323",
|
||||
"step": 775,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#717171",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#000000",
|
||||
"step": 900,
|
||||
"type": "color"
|
||||
},
|
||||
"ok": {
|
||||
"value": "#20b456",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"error": {
|
||||
"value": "#eb2d2d",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"value": "#de900c",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"info": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"editor": {
|
||||
"background": {
|
||||
"value": "#000000",
|
||||
"step": 900,
|
||||
"type": "color"
|
||||
},
|
||||
"indent_guide": {
|
||||
"value": "#232323",
|
||||
"step": 775,
|
||||
"type": "color"
|
||||
},
|
||||
"indent_guide_active": {
|
||||
"value": "#151515",
|
||||
"step": 825,
|
||||
"type": "color"
|
||||
},
|
||||
"line": {
|
||||
"active": {
|
||||
"value": "#0e0e0e",
|
||||
"step": 850,
|
||||
"type": "color"
|
||||
},
|
||||
"highlighted": {
|
||||
"value": "#070707",
|
||||
"step": 875,
|
||||
"type": "color"
|
||||
},
|
||||
"inserted": {
|
||||
"value": "#1b9447",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"deleted": {
|
||||
"value": "#f15656",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"modified": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"highlight": {
|
||||
"selection": {
|
||||
"value": "#103063",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"occurrence": {
|
||||
"value": "#2b2b2b",
|
||||
"step": 750,
|
||||
"type": "color"
|
||||
},
|
||||
"activeOccurrence": {
|
||||
"value": "#393939",
|
||||
"step": 700,
|
||||
"type": "color"
|
||||
},
|
||||
"matchingBracket": {
|
||||
"value": "#0e0e0e",
|
||||
"step": 850,
|
||||
"type": "color"
|
||||
},
|
||||
"match": {
|
||||
"value": "#0a2633",
|
||||
"step": 900,
|
||||
"type": "color"
|
||||
},
|
||||
"activeMatch": {
|
||||
"value": "#0e4158",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"related": {
|
||||
"value": "#151515",
|
||||
"step": 825,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"gutter": {
|
||||
"primary": {
|
||||
"value": "#636363",
|
||||
"step": 550,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"syntax": {
|
||||
"primary": {
|
||||
"value": "#d5d5d5",
|
||||
"type": "color"
|
||||
},
|
||||
"comment": {
|
||||
"value": "#aaaaaa",
|
||||
"type": "color"
|
||||
},
|
||||
"keyword": {
|
||||
"value": "#4f8ff7",
|
||||
"type": "color"
|
||||
},
|
||||
"function": {
|
||||
"value": "#f9da82",
|
||||
"type": "color"
|
||||
},
|
||||
"type": {
|
||||
"value": "#3eeeda",
|
||||
"type": "color"
|
||||
},
|
||||
"variant": {
|
||||
"value": "#53c1f5",
|
||||
"type": "color"
|
||||
},
|
||||
"property": {
|
||||
"value": "#4f8ff7",
|
||||
"type": "color"
|
||||
},
|
||||
"enum": {
|
||||
"value": "#ee670a",
|
||||
"type": "color"
|
||||
},
|
||||
"operator": {
|
||||
"value": "#ee670a",
|
||||
"type": "color"
|
||||
},
|
||||
"string": {
|
||||
"value": "#f99d5f",
|
||||
"type": "color"
|
||||
},
|
||||
"number": {
|
||||
"value": "#aeef4b",
|
||||
"type": "color"
|
||||
},
|
||||
"boolean": {
|
||||
"value": "#aeef4b",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"player": {
|
||||
"1": {
|
||||
"baseColor": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#103063",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#103063",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"2": {
|
||||
"baseColor": {
|
||||
"value": "#79ba16",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#79ba16",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#38530f",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#79ba16",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"3": {
|
||||
"baseColor": {
|
||||
"value": "#484bed",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#484bed",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#121269",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#484bed",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"4": {
|
||||
"baseColor": {
|
||||
"value": "#ee670a",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#ee670a",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#5d2f0e",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#ee670a",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"5": {
|
||||
"baseColor": {
|
||||
"value": "#993bf3",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#993bf3",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#3e1169",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#993bf3",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"6": {
|
||||
"baseColor": {
|
||||
"value": "#16d6c1",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#16d6c1",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#0e4f48",
|
||||
"step": 800,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#16d6c1",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"7": {
|
||||
"baseColor": {
|
||||
"value": "#ef59a3",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#ef59a3",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#fbc6e1",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#ef59a3",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"8": {
|
||||
"baseColor": {
|
||||
"value": "#f7bf17",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#f7bf17",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#fce9b7",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#f7bf17",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"shadowAlpha": {
|
||||
"value": 0.32,
|
||||
"type": "number"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,637 @@
|
||||
{
|
||||
"meta": {
|
||||
"themeName": "light"
|
||||
},
|
||||
"text": {
|
||||
"primary": {
|
||||
"value": "#2b2b2b",
|
||||
"step": 750,
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#555555",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"muted": {
|
||||
"value": "#808080",
|
||||
"step": 450,
|
||||
"type": "color"
|
||||
},
|
||||
"placeholder": {
|
||||
"value": "#aaaaaa",
|
||||
"step": 300,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#000000",
|
||||
"step": 900,
|
||||
"type": "color"
|
||||
},
|
||||
"feature": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"ok": {
|
||||
"value": "#20b456",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"error": {
|
||||
"value": "#eb2d2d",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"value": "#d3a20b",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"info": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"primary": {
|
||||
"value": "#aaaaaa",
|
||||
"step": 300,
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#717171",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"muted": {
|
||||
"value": "#555555",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"placeholder": {
|
||||
"value": "#393939",
|
||||
"step": 700,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#000000",
|
||||
"step": 900,
|
||||
"type": "color"
|
||||
},
|
||||
"feature": {
|
||||
"value": "#1179a8",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"ok": {
|
||||
"value": "#1b9447",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"error": {
|
||||
"value": "#c91818",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"value": "#f7bf17",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"info": {
|
||||
"value": "#135acd",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"background": {
|
||||
"100": {
|
||||
"base": {
|
||||
"value": "#e3e3e3",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#d5d5d5",
|
||||
"step": 150,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#c6c6c6",
|
||||
"step": 200,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#d5d5d5",
|
||||
"step": 150,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"300": {
|
||||
"base": {
|
||||
"value": "#f1f1f1",
|
||||
"step": 50,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#e3e3e3",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#d5d5d5",
|
||||
"step": 150,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#e3e3e3",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"500": {
|
||||
"base": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#f8f8f8",
|
||||
"step": 25,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#f1f1f1",
|
||||
"step": 50,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#eaeaea",
|
||||
"step": 75,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"ok": {
|
||||
"base": {
|
||||
"value": "#b7f9ce",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#b7f9ce",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#b7f9ce",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#b7f9ce",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"error": {
|
||||
"base": {
|
||||
"value": "#fcc6c6",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#fcc6c6",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#fcc6c6",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#fcc6c6",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"warning": {
|
||||
"base": {
|
||||
"value": "#fce9b7",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#fce9b7",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#fce9b7",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#fce9b7",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"info": {
|
||||
"base": {
|
||||
"value": "#c5dafc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"hovered": {
|
||||
"value": "#c5dafc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#c5dafc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#c5dafc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"border": {
|
||||
"primary": {
|
||||
"value": "#c6c6c6",
|
||||
"step": 200,
|
||||
"type": "color"
|
||||
},
|
||||
"secondary": {
|
||||
"value": "#e3e3e3",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"muted": {
|
||||
"value": "#f1f1f1",
|
||||
"step": 50,
|
||||
"type": "color"
|
||||
},
|
||||
"focused": {
|
||||
"value": "#e3e3e3",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#b8b8b8",
|
||||
"step": 250,
|
||||
"type": "color"
|
||||
},
|
||||
"ok": {
|
||||
"value": "#84f2ab",
|
||||
"step": 200,
|
||||
"type": "color"
|
||||
},
|
||||
"error": {
|
||||
"value": "#f9a0a0",
|
||||
"step": 200,
|
||||
"type": "color"
|
||||
},
|
||||
"warning": {
|
||||
"value": "#f9da82",
|
||||
"step": 200,
|
||||
"type": "color"
|
||||
},
|
||||
"info": {
|
||||
"value": "#9ec1fa",
|
||||
"step": 200,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"editor": {
|
||||
"background": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
},
|
||||
"indent_guide": {
|
||||
"value": "#f1f1f1",
|
||||
"step": 50,
|
||||
"type": "color"
|
||||
},
|
||||
"indent_guide_active": {
|
||||
"value": "#e3e3e3",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"line": {
|
||||
"active": {
|
||||
"value": "#f1f1f1",
|
||||
"step": 50,
|
||||
"type": "color"
|
||||
},
|
||||
"highlighted": {
|
||||
"value": "#f1f1f1",
|
||||
"step": 50,
|
||||
"type": "color"
|
||||
},
|
||||
"inserted": {
|
||||
"value": "#b7f9ce",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"deleted": {
|
||||
"value": "#fcc6c6",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"modified": {
|
||||
"value": "#c5dafc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"highlight": {
|
||||
"selection": {
|
||||
"value": "#c5dafc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"occurrence": {
|
||||
"value": "#f1f1f1",
|
||||
"step": 50,
|
||||
"type": "color"
|
||||
},
|
||||
"activeOccurrence": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
},
|
||||
"matchingBracket": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
},
|
||||
"match": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
},
|
||||
"activeMatch": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
},
|
||||
"related": {
|
||||
"value": "#ffffff",
|
||||
"step": 0,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"gutter": {
|
||||
"primary": {
|
||||
"value": "#aaaaaa",
|
||||
"step": 300,
|
||||
"type": "color"
|
||||
},
|
||||
"active": {
|
||||
"value": "#000000",
|
||||
"step": 900,
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"syntax": {
|
||||
"primary": {
|
||||
"value": "#2b2b2b",
|
||||
"type": "color"
|
||||
},
|
||||
"comment": {
|
||||
"value": "#555555",
|
||||
"type": "color"
|
||||
},
|
||||
"keyword": {
|
||||
"value": "#103063",
|
||||
"type": "color"
|
||||
},
|
||||
"function": {
|
||||
"value": "#1b9447",
|
||||
"type": "color"
|
||||
},
|
||||
"type": {
|
||||
"value": "#138a7d",
|
||||
"type": "color"
|
||||
},
|
||||
"variant": {
|
||||
"value": "#1179a8",
|
||||
"type": "color"
|
||||
},
|
||||
"property": {
|
||||
"value": "#134697",
|
||||
"type": "color"
|
||||
},
|
||||
"enum": {
|
||||
"value": "#bb550e",
|
||||
"type": "color"
|
||||
},
|
||||
"operator": {
|
||||
"value": "#bb550e",
|
||||
"type": "color"
|
||||
},
|
||||
"string": {
|
||||
"value": "#bb550e",
|
||||
"type": "color"
|
||||
},
|
||||
"number": {
|
||||
"value": "#14a898",
|
||||
"type": "color"
|
||||
},
|
||||
"boolean": {
|
||||
"value": "#b0740f",
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"player": {
|
||||
"1": {
|
||||
"baseColor": {
|
||||
"value": "#135acd",
|
||||
"step": 600,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#c5dafc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#2472f2",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"2": {
|
||||
"baseColor": {
|
||||
"value": "#79ba16",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#79ba16",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#dffab5",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#79ba16",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"3": {
|
||||
"baseColor": {
|
||||
"value": "#484bed",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#484bed",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#cdcdfc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#484bed",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"4": {
|
||||
"baseColor": {
|
||||
"value": "#ee670a",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#ee670a",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#fcd6bd",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#ee670a",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"5": {
|
||||
"baseColor": {
|
||||
"value": "#993bf3",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#993bf3",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#e4cbfc",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#993bf3",
|
||||
"step": 500,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"6": {
|
||||
"baseColor": {
|
||||
"value": "#16d6c1",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#16d6c1",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#b1faf2",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#16d6c1",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"7": {
|
||||
"baseColor": {
|
||||
"value": "#ef59a3",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#ef59a3",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#fbc6e1",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#ef59a3",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"8": {
|
||||
"baseColor": {
|
||||
"value": "#f7bf17",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"cursorColor": {
|
||||
"value": "#f7bf17",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
},
|
||||
"selectionColor": {
|
||||
"value": "#fce9b7",
|
||||
"step": 100,
|
||||
"type": "color"
|
||||
},
|
||||
"borderColor": {
|
||||
"value": "#f7bf17",
|
||||
"step": 400,
|
||||
"type": "color"
|
||||
}
|
||||
}
|
||||
},
|
||||
"shadowAlpha": {
|
||||
"value": 0.12,
|
||||
"type": "number"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,43 @@
|
||||
import Theme from "../themes/theme";
|
||||
import chatPanel from "./chatPanel";
|
||||
import { text } from "./components";
|
||||
import contactsPanel from "./contactsPanel";
|
||||
import editor from "./editor";
|
||||
import projectPanel from "./projectPanel";
|
||||
import search from "./search";
|
||||
import selectorModal from "./selectorModal";
|
||||
import workspace from "./workspace";
|
||||
|
||||
export const panel = {
|
||||
padding: { top: 12, left: 12, bottom: 12, right: 12 },
|
||||
};
|
||||
|
||||
export default function app(theme: Theme): Object {
|
||||
return {
|
||||
selector: selectorModal(theme),
|
||||
workspace: workspace(theme),
|
||||
editor: editor(theme),
|
||||
projectDiagnostics: {
|
||||
tabIconSpacing: 4,
|
||||
tabIconWidth: 13,
|
||||
tabSummarySpacing: 10,
|
||||
emptyMessage: text(theme, "sans", "primary", { size: "lg" }),
|
||||
statusBarItem: {
|
||||
...text(theme, "sans", "muted"),
|
||||
margin: {
|
||||
right: 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
projectPanel: projectPanel(theme),
|
||||
chatPanel: chatPanel(theme),
|
||||
contactsPanel: contactsPanel(theme),
|
||||
search: search(theme),
|
||||
breadcrumbs: {
|
||||
...text(theme, "sans", "primary"),
|
||||
padding: {
|
||||
left: 6,
|
||||
},
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import Theme from "../themes/theme";
|
||||
import { panel } from "./app";
|
||||
import {
|
||||
backgroundColor,
|
||||
border,
|
||||
player,
|
||||
shadow,
|
||||
text,
|
||||
TextColor
|
||||
} from "./components";
|
||||
|
||||
export default function chatPanel(theme: Theme) {
|
||||
function channelSelectItem(
|
||||
theme: Theme,
|
||||
textColor: TextColor,
|
||||
hovered: boolean
|
||||
) {
|
||||
return {
|
||||
name: text(theme, "sans", textColor),
|
||||
padding: 4,
|
||||
hash: {
|
||||
...text(theme, "sans", "muted"),
|
||||
margin: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
background: hovered ? backgroundColor(theme, 300, "hovered") : undefined,
|
||||
cornerRadius: hovered ? 6 : 0,
|
||||
};
|
||||
}
|
||||
|
||||
const message = {
|
||||
body: text(theme, "sans", "secondary"),
|
||||
timestamp: text(theme, "sans", "muted", { size: "sm" }),
|
||||
padding: {
|
||||
bottom: 6,
|
||||
},
|
||||
sender: {
|
||||
...text(theme, "sans", "primary", { weight: "bold" }),
|
||||
margin: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...panel,
|
||||
channelName: text(theme, "sans", "primary", { weight: "bold" }),
|
||||
channelNameHash: {
|
||||
...text(theme, "sans", "muted"),
|
||||
padding: {
|
||||
right: 8,
|
||||
},
|
||||
},
|
||||
channelSelect: {
|
||||
header: {
|
||||
...channelSelectItem(theme, "primary", false),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
item: channelSelectItem(theme, "secondary", false),
|
||||
hoveredItem: channelSelectItem(theme, "secondary", true),
|
||||
activeItem: channelSelectItem(theme, "primary", false),
|
||||
hoveredActiveItem: channelSelectItem(theme, "primary", true),
|
||||
menu: {
|
||||
background: backgroundColor(theme, 500),
|
||||
cornerRadius: 6,
|
||||
padding: 4,
|
||||
border: border(theme, "primary"),
|
||||
shadow: shadow(theme),
|
||||
},
|
||||
},
|
||||
signInPrompt: text(theme, "sans", "secondary", { underline: true }),
|
||||
hoveredSignInPrompt: text(theme, "sans", "primary", { underline: true }),
|
||||
message,
|
||||
pendingMessage: {
|
||||
...message,
|
||||
body: {
|
||||
...message.body,
|
||||
color: theme.textColor.muted.value,
|
||||
},
|
||||
sender: {
|
||||
...message.sender,
|
||||
color: theme.textColor.muted.value,
|
||||
},
|
||||
timestamp: {
|
||||
...message.timestamp,
|
||||
color: theme.textColor.muted.value,
|
||||
},
|
||||
},
|
||||
inputEditor: {
|
||||
background: backgroundColor(theme, 500),
|
||||
cornerRadius: 6,
|
||||
text: text(theme, "mono", "primary"),
|
||||
placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
|
||||
selection: player(theme, 1).selection,
|
||||
border: border(theme, "secondary"),
|
||||
padding: {
|
||||
bottom: 7,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 7,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import chroma from "chroma-js";
|
||||
import Theme, { BackgroundColor } from "../themes/theme";
|
||||
import { fontFamilies, fontSizes, FontFamily, FontWeight, FontSize } from "../tokens";
|
||||
import { Color } from "../utils/color";
|
||||
|
||||
export type TextColor = keyof Theme["textColor"];
|
||||
export interface Text {
|
||||
family: FontFamily,
|
||||
color: Color,
|
||||
size: FontSize,
|
||||
weight?: FontWeight,
|
||||
underline?: boolean,
|
||||
}
|
||||
export function text(
|
||||
theme: Theme,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
color: TextColor,
|
||||
properties?: {
|
||||
size?: keyof typeof fontSizes;
|
||||
weight?: FontWeight;
|
||||
underline?: boolean;
|
||||
}
|
||||
): Text {
|
||||
let extraProperties = {
|
||||
...properties,
|
||||
size: fontSizes[properties.size || "sm"].value,
|
||||
};
|
||||
return {
|
||||
family: fontFamilies[fontFamily].value,
|
||||
color: theme.textColor[color].value,
|
||||
...extraProperties,
|
||||
};
|
||||
}
|
||||
|
||||
export interface BorderOptions {
|
||||
width?: number;
|
||||
top?: boolean;
|
||||
bottom?: boolean;
|
||||
left?: boolean;
|
||||
right?: boolean;
|
||||
overlay?: boolean;
|
||||
}
|
||||
export function border(
|
||||
theme: Theme,
|
||||
color: keyof Theme["borderColor"],
|
||||
options?: BorderOptions
|
||||
) {
|
||||
return {
|
||||
color: borderColor(theme, color),
|
||||
width: 1,
|
||||
...options,
|
||||
};
|
||||
}
|
||||
|
||||
export function borderColor(theme: Theme, color: keyof Theme["borderColor"]) {
|
||||
return theme.borderColor[color].value;
|
||||
}
|
||||
|
||||
export function iconColor(theme: Theme, color: keyof Theme["iconColor"]) {
|
||||
return theme.iconColor[color].value;
|
||||
}
|
||||
|
||||
export interface Player {
|
||||
selection: {
|
||||
cursor: Color;
|
||||
selection: Color;
|
||||
};
|
||||
}
|
||||
|
||||
export function player(
|
||||
theme: Theme,
|
||||
playerNumber: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
|
||||
): Player {
|
||||
return {
|
||||
selection: {
|
||||
cursor: theme.player[playerNumber].cursorColor.value,
|
||||
selection: theme.player[playerNumber].selectionColor.value,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function backgroundColor(
|
||||
theme: Theme,
|
||||
name: keyof Theme["backgroundColor"],
|
||||
state?: keyof BackgroundColor
|
||||
): Color {
|
||||
return theme.backgroundColor[name][state || "base"].value;
|
||||
}
|
||||
|
||||
export function shadow(theme: Theme) {
|
||||
return {
|
||||
blur: 16,
|
||||
color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
|
||||
offset: [0, 2],
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import Theme from "../themes/theme";
|
||||
import { panel } from "./app";
|
||||
import { borderColor, text } from "./components";
|
||||
|
||||
export default function(theme: Theme) {
|
||||
const project = {
|
||||
guestAvatarSpacing: 4,
|
||||
height: 24,
|
||||
guestAvatar: {
|
||||
cornerRadius: 8,
|
||||
width: 14,
|
||||
},
|
||||
name: {
|
||||
...text(theme, "mono", "secondary"),
|
||||
margin: {
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
left: 8,
|
||||
},
|
||||
};
|
||||
|
||||
const sharedProject = {
|
||||
...project,
|
||||
name: {
|
||||
...project.name,
|
||||
...text(theme, "mono", "primary"),
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...panel,
|
||||
hostRowHeight: 28,
|
||||
treeBranchColor: borderColor(theme, "muted"),
|
||||
treeBranchWidth: 1,
|
||||
hostAvatar: {
|
||||
cornerRadius: 10,
|
||||
width: 18,
|
||||
},
|
||||
hostUsername: {
|
||||
...text(theme, "mono", "muted"),
|
||||
padding: {
|
||||
left: 8,
|
||||
},
|
||||
},
|
||||
project,
|
||||
sharedProject,
|
||||
hoveredSharedProject: {
|
||||
...sharedProject,
|
||||
background: theme.editor.line.active.value,
|
||||
cornerRadius: 6,
|
||||
},
|
||||
unsharedProject: project,
|
||||
hoveredUnsharedProject: {
|
||||
...project,
|
||||
background: theme.editor.line.active.value,
|
||||
cornerRadius: 6,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
import Theme from "../themes/theme";
|
||||
import {
|
||||
backgroundColor,
|
||||
border,
|
||||
iconColor,
|
||||
player,
|
||||
text,
|
||||
TextColor
|
||||
} from "./components";
|
||||
|
||||
export default function editor(theme: Theme) {
|
||||
const autocompleteItem = {
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 6,
|
||||
right: 6,
|
||||
top: 2,
|
||||
},
|
||||
};
|
||||
|
||||
function diagnostic(theme: Theme, color: TextColor) {
|
||||
return {
|
||||
textScaleFactor: 0.857,
|
||||
header: {
|
||||
border: border(theme, "primary", {
|
||||
top: true,
|
||||
}),
|
||||
},
|
||||
message: {
|
||||
text: text(theme, "sans", color, { size: "sm" }),
|
||||
highlightText: text(theme, "sans", color, {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
// textColor: theme.syntax.primary.color,
|
||||
textColor: theme.syntax.primary.color.value,
|
||||
background: backgroundColor(theme, 500),
|
||||
activeLineBackground: theme.editor.line.active.value,
|
||||
codeActionsIndicator: iconColor(theme, "secondary"),
|
||||
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,
|
||||
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,
|
||||
renameFade: 0.6,
|
||||
unnecessaryCodeFade: 0.5,
|
||||
selection: player(theme, 1).selection,
|
||||
guestSelections: [
|
||||
player(theme, 2).selection,
|
||||
player(theme, 3).selection,
|
||||
player(theme, 4).selection,
|
||||
player(theme, 5).selection,
|
||||
player(theme, 6).selection,
|
||||
player(theme, 7).selection,
|
||||
player(theme, 8).selection,
|
||||
],
|
||||
autocomplete: {
|
||||
background: backgroundColor(theme, 500),
|
||||
cornerRadius: 6,
|
||||
padding: 6,
|
||||
border: border(theme, "secondary"),
|
||||
item: autocompleteItem,
|
||||
hoveredItem: {
|
||||
...autocompleteItem,
|
||||
background: backgroundColor(theme, 500, "hovered"),
|
||||
},
|
||||
margin: {
|
||||
left: -14,
|
||||
},
|
||||
matchHighlight: {
|
||||
color: theme.syntax.keyword.color.value,
|
||||
weight: theme.syntax.keyword.weight.value,
|
||||
},
|
||||
selectedItem: {
|
||||
...autocompleteItem,
|
||||
background: backgroundColor(theme, 500, "active"),
|
||||
},
|
||||
},
|
||||
diagnosticHeader: {
|
||||
background: backgroundColor(theme, 300),
|
||||
iconWidthFactor: 1.5,
|
||||
textScaleFactor: 0.857, // NateQ: Will we need dynamic sizing for text? If so let's create tokens for these.
|
||||
border: border(theme, "secondary", {
|
||||
bottom: true,
|
||||
top: true,
|
||||
}),
|
||||
code: {
|
||||
...text(theme, "mono", "muted", { size: "sm" }),
|
||||
margin: {
|
||||
left: 10,
|
||||
},
|
||||
},
|
||||
message: {
|
||||
highlightText: text(theme, "sans", "primary", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
text: text(theme, "sans", "secondary", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
diagnosticPathHeader: {
|
||||
background: theme.editor.line.active.value,
|
||||
textScaleFactor: 0.857,
|
||||
filename: text(theme, "mono", "primary", { size: "sm" }),
|
||||
path: {
|
||||
...text(theme, "mono", "muted", { size: "sm" }),
|
||||
margin: {
|
||||
left: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
errorDiagnostic: diagnostic(theme, "error"),
|
||||
warningDiagnostic: diagnostic(theme, "warning"),
|
||||
informationDiagnostic: diagnostic(theme, "info"),
|
||||
hintDiagnostic: diagnostic(theme, "info"),
|
||||
invalidErrorDiagnostic: diagnostic(theme, "muted"),
|
||||
invalidHintDiagnostic: diagnostic(theme, "muted"),
|
||||
invalidInformationDiagnostic: diagnostic(theme, "muted"),
|
||||
invalidWarningDiagnostic: diagnostic(theme, "muted"),
|
||||
syntax: {
|
||||
keyword: theme.syntax.keyword.color.value,
|
||||
function: theme.syntax.function.color.value,
|
||||
string: theme.syntax.string.color.value,
|
||||
type: theme.syntax.type.color.value,
|
||||
number: theme.syntax.number.color.value,
|
||||
comment: theme.syntax.comment.color.value,
|
||||
property: theme.syntax.property.color.value,
|
||||
variant: theme.syntax.variant.color.value,
|
||||
constant: theme.syntax.constant.color.value,
|
||||
title: { color: theme.syntax.title.color.value, weight: "bold" },
|
||||
emphasis: theme.textColor.feature.value,
|
||||
"emphasis.strong": { color: theme.textColor.feature.value, weight: "bold" },
|
||||
link_uri: { color: theme.syntax.linkUrl.color.value, underline: true },
|
||||
link_text: { color: theme.syntax.linkText.color.value, italic: true },
|
||||
list_marker: theme.syntax.punctuation.color.value,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import Theme from "../themes/theme";
|
||||
import { Color } from "../utils/color";
|
||||
import { panel } from "./app";
|
||||
import { backgroundColor, iconColor, text, TextColor } from "./components";
|
||||
|
||||
export default function projectPanel(theme: Theme) {
|
||||
function entry(theme: Theme, textColor: TextColor, background?: Color) {
|
||||
return {
|
||||
height: 22,
|
||||
background,
|
||||
iconColor: iconColor(theme, "muted"),
|
||||
iconSize: 8,
|
||||
iconSpacing: 8,
|
||||
text: text(theme, "mono", textColor, { size: "sm" }),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...panel,
|
||||
entry: entry(theme, "secondary"),
|
||||
hoveredEntry: entry(
|
||||
theme,
|
||||
"secondary",
|
||||
backgroundColor(theme, 300, "hovered")
|
||||
),
|
||||
selectedEntry: entry(theme, "primary"),
|
||||
hoveredSelectedEntry: entry(
|
||||
theme,
|
||||
"primary",
|
||||
backgroundColor(theme, 300, "hovered")
|
||||
),
|
||||
padding: {
|
||||
top: 6,
|
||||
left: 12,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import Theme from "../themes/theme";
|
||||
import { backgroundColor, border, player, text } from "./components";
|
||||
|
||||
export default function search(theme: Theme) {
|
||||
const optionButton = {
|
||||
...text(theme, "mono", "secondary"),
|
||||
background: backgroundColor(theme, 300),
|
||||
cornerRadius: 6,
|
||||
border: border(theme, "primary"),
|
||||
margin: {
|
||||
left: 1,
|
||||
right: 1,
|
||||
},
|
||||
padding: {
|
||||
bottom: 1,
|
||||
left: 6,
|
||||
right: 6,
|
||||
top: 1,
|
||||
},
|
||||
};
|
||||
|
||||
const editor = {
|
||||
background: backgroundColor(theme, 500),
|
||||
cornerRadius: 6,
|
||||
minWidth: 200,
|
||||
maxWidth: 500,
|
||||
placeholderText: text(theme, "mono", "placeholder"),
|
||||
selection: player(theme, 1).selection,
|
||||
text: text(theme, "mono", "primary"),
|
||||
border: border(theme, "primary"),
|
||||
margin: {
|
||||
right: 5,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 14,
|
||||
right: 14,
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
matchBackground: theme.editor.highlight.match.value,
|
||||
tabIconSpacing: 4,
|
||||
tabIconWidth: 14,
|
||||
activeHoveredOptionButton: {
|
||||
...optionButton,
|
||||
background: backgroundColor(theme, 100),
|
||||
},
|
||||
activeOptionButton: {
|
||||
...optionButton,
|
||||
background: backgroundColor(theme, 100),
|
||||
},
|
||||
editor,
|
||||
hoveredOptionButton: {
|
||||
...optionButton,
|
||||
background: backgroundColor(theme, 100),
|
||||
},
|
||||
invalidEditor: {
|
||||
...editor,
|
||||
border: border(theme, "error"),
|
||||
},
|
||||
matchIndex: {
|
||||
...text(theme, "mono", "muted"),
|
||||
padding: 6,
|
||||
},
|
||||
optionButton,
|
||||
optionButtonGroup: {
|
||||
padding: {
|
||||
left: 2,
|
||||
right: 2,
|
||||
},
|
||||
},
|
||||
resultsStatus: {
|
||||
...text(theme, "mono", "primary"),
|
||||
size: 18,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import Theme from "../themes/theme";
|
||||
import { backgroundColor, border, player, shadow, text } from "./components";
|
||||
|
||||
export default function selectorModal(theme: Theme): Object {
|
||||
const item = {
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 4,
|
||||
},
|
||||
cornerRadius: 6,
|
||||
text: text(theme, "sans", "secondary"),
|
||||
highlightText: text(theme, "sans", "feature", { weight: "bold" }),
|
||||
};
|
||||
|
||||
const activeItem = {
|
||||
...item,
|
||||
background: backgroundColor(theme, 300, "active"),
|
||||
text: text(theme, "sans", "primary"),
|
||||
};
|
||||
|
||||
return {
|
||||
background: backgroundColor(theme, 300),
|
||||
cornerRadius: 6,
|
||||
padding: 8,
|
||||
item,
|
||||
activeItem,
|
||||
border: border(theme, "primary"),
|
||||
empty: {
|
||||
text: text(theme, "sans", "muted"),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 8,
|
||||
},
|
||||
},
|
||||
inputEditor: {
|
||||
background: backgroundColor(theme, 500),
|
||||
corner_radius: 6,
|
||||
placeholderText: text(theme, "sans", "placeholder"),
|
||||
selection: player(theme, 1).selection,
|
||||
text: text(theme, "mono", "primary"),
|
||||
border: border(theme, "secondary"),
|
||||
padding: {
|
||||
bottom: 7,
|
||||
left: 16,
|
||||
right: 16,
|
||||
top: 7,
|
||||
},
|
||||
},
|
||||
margin: {
|
||||
bottom: 52,
|
||||
top: 52,
|
||||
},
|
||||
shadow: shadow(theme),
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
import Theme from "../themes/theme";
|
||||
import { backgroundColor, border, iconColor, text } from "./components";
|
||||
|
||||
export default function workspace(theme: Theme) {
|
||||
const signInPrompt = {
|
||||
...text(theme, "sans", "secondary"),
|
||||
size: 13,
|
||||
underline: true,
|
||||
padding: {
|
||||
right: 8,
|
||||
},
|
||||
};
|
||||
|
||||
const tab = {
|
||||
height: 32,
|
||||
background: backgroundColor(theme, 300),
|
||||
iconClose: iconColor(theme, "muted"),
|
||||
iconCloseActive: iconColor(theme, "active"),
|
||||
iconConflict: iconColor(theme, "warning"),
|
||||
iconDirty: iconColor(theme, "info"),
|
||||
iconWidth: 8,
|
||||
spacing: 10,
|
||||
text: text(theme, "mono", "secondary", { size: "sm" }),
|
||||
border: border(theme, "primary", {
|
||||
left: true,
|
||||
bottom: true,
|
||||
overlay: true,
|
||||
}),
|
||||
padding: {
|
||||
left: 12,
|
||||
right: 12,
|
||||
},
|
||||
};
|
||||
|
||||
const activeTab = {
|
||||
...tab,
|
||||
background: backgroundColor(theme, 500),
|
||||
text: text(theme, "mono", "active", { size: "sm" }),
|
||||
border: {
|
||||
...tab.border,
|
||||
bottom: false,
|
||||
},
|
||||
};
|
||||
|
||||
const sidebarItem = {
|
||||
height: 32,
|
||||
iconColor: iconColor(theme, "secondary"),
|
||||
iconSize: 18,
|
||||
};
|
||||
const sidebar = {
|
||||
width: 30,
|
||||
background: backgroundColor(theme, 300),
|
||||
border: border(theme, "primary", { right: true }),
|
||||
item: sidebarItem,
|
||||
activeItem: {
|
||||
...sidebarItem,
|
||||
iconColor: iconColor(theme, "active"),
|
||||
},
|
||||
resizeHandle: {
|
||||
background: border(theme, "primary").color,
|
||||
padding: {
|
||||
left: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
background: backgroundColor(theme, 300),
|
||||
leaderBorderOpacity: 0.7,
|
||||
leaderBorderWidth: 2.0,
|
||||
tab,
|
||||
activeTab,
|
||||
leftSidebar: {
|
||||
...sidebar,
|
||||
border: border(theme, "primary", { right: true }),
|
||||
},
|
||||
rightSidebar: {
|
||||
...sidebar,
|
||||
border: border(theme, "primary", { left: true }),
|
||||
},
|
||||
paneDivider: {
|
||||
color: border(theme, "primary").color,
|
||||
width: 1,
|
||||
},
|
||||
status_bar: {
|
||||
height: 24,
|
||||
itemSpacing: 8,
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
cursorPosition: text(theme, "sans", "muted"),
|
||||
diagnosticMessage: text(theme, "sans", "muted"),
|
||||
lspMessage: text(theme, "sans", "muted"),
|
||||
},
|
||||
titlebar: {
|
||||
avatarWidth: 18,
|
||||
height: 32,
|
||||
background: backgroundColor(theme, 100),
|
||||
shareIconColor: iconColor(theme, "secondary"),
|
||||
shareIconActiveColor: iconColor(theme, "active"),
|
||||
title: text(theme, "sans", "primary"),
|
||||
avatar: {
|
||||
cornerRadius: 10,
|
||||
border: {
|
||||
color: "#00000088",
|
||||
width: 1,
|
||||
},
|
||||
},
|
||||
avatarRibbon: {
|
||||
height: 3,
|
||||
width: 12,
|
||||
// TODO: The background for this ideally should be
|
||||
// set with a token, not hardcoded in rust
|
||||
},
|
||||
border: border(theme, "primary", { bottom: true }),
|
||||
signInPrompt,
|
||||
hoveredSignInPrompt: {
|
||||
...signInPrompt,
|
||||
...text(theme, "mono", "active"),
|
||||
size: 13,
|
||||
},
|
||||
offlineIcon: {
|
||||
color: iconColor(theme, "secondary"),
|
||||
width: 16,
|
||||
padding: {
|
||||
right: 4,
|
||||
},
|
||||
},
|
||||
outdatedWarning: {
|
||||
...text(theme, "sans", "warning"),
|
||||
size: 13,
|
||||
},
|
||||
},
|
||||
toolbar: {
|
||||
height: 34,
|
||||
background: backgroundColor(theme, 500),
|
||||
border: border(theme, "secondary", { bottom: true }),
|
||||
itemSpacing: 8,
|
||||
padding: { left: 16, right: 8, top: 4, bottom: 4 },
|
||||
},
|
||||
breadcrumbs: {
|
||||
...text(theme, "mono", "secondary"),
|
||||
padding: { left: 6 },
|
||||
},
|
||||
disconnectedOverlay: {
|
||||
...text(theme, "sans", "active"),
|
||||
background: "#000000aa",
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
import { Color, colors, fontWeights, NumberToken } from "../tokens";
|
||||
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[700],
|
||||
focused: colors.neutral[675],
|
||||
},
|
||||
300: {
|
||||
base: colors.neutral[800],
|
||||
hovered: colors.neutral[775],
|
||||
active: colors.neutral[750],
|
||||
focused: colors.neutral[725],
|
||||
},
|
||||
500: {
|
||||
base: colors.neutral[900],
|
||||
hovered: colors.neutral[875],
|
||||
active: colors.neutral[850],
|
||||
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[825],
|
||||
muted: colors.neutral[775],
|
||||
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[550],
|
||||
placeholder: colors.neutral[750],
|
||||
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.sky[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.indigo[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: backgroundColor[500].active,
|
||||
highlighted: backgroundColor[500].hovered,
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: withOpacity(colors.teal[500], 0.16),
|
||||
activeOccurrence: withOpacity(colors.teal[500], 0.32),
|
||||
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.muted,
|
||||
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
|
||||
},
|
||||
};
|
||||
|
||||
const shadowAlpha: NumberToken = {
|
||||
value: 0.32,
|
||||
type: "number",
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: "dark",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@@ -0,0 +1,228 @@
|
||||
import { colors, fontWeights, NumberToken } from "../tokens";
|
||||
import { withOpacity } from "../utils/color";
|
||||
import Theme, { buildPlayer, Syntax } from "./theme";
|
||||
|
||||
const backgroundColor = {
|
||||
100: {
|
||||
base: colors.neutral[100],
|
||||
hovered: colors.neutral[150],
|
||||
active: colors.neutral[200],
|
||||
focused: colors.neutral[150],
|
||||
},
|
||||
300: {
|
||||
base: colors.neutral[50],
|
||||
hovered: colors.neutral[100],
|
||||
active: colors.neutral[150],
|
||||
focused: colors.neutral[100],
|
||||
},
|
||||
500: {
|
||||
base: colors.neutral[0],
|
||||
hovered: colors.neutral[25],
|
||||
active: colors.neutral[50],
|
||||
focused: colors.neutral[75],
|
||||
},
|
||||
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[200],
|
||||
secondary: colors.neutral[100],
|
||||
muted: colors.neutral[50],
|
||||
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[600],
|
||||
muted: colors.neutral[450],
|
||||
placeholder: colors.neutral[300],
|
||||
active: colors.neutral[900],
|
||||
feature: colors.blue[500],
|
||||
ok: colors.green[500],
|
||||
error: colors.red[500],
|
||||
warning: colors.yellow[500],
|
||||
info: colors.blue[500],
|
||||
};
|
||||
|
||||
const iconColor = {
|
||||
primary: colors.neutral[300],
|
||||
secondary: colors.neutral[500],
|
||||
muted: colors.neutral[600],
|
||||
placeholder: colors.neutral[700],
|
||||
active: colors.neutral[900],
|
||||
feature: colors.sky[600],
|
||||
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.lime[500]),
|
||||
3: buildPlayer(colors.indigo[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]),
|
||||
};
|
||||
|
||||
// TODO: Fixup
|
||||
const editor = {
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: backgroundColor[500].active,
|
||||
highlighted: backgroundColor[500].active,
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: withOpacity(colors.teal[500], 0.16),
|
||||
activeOccurrence: withOpacity(colors.teal[500], 0.32),
|
||||
matchingBracket: colors.neutral[0],
|
||||
match: withOpacity(colors.sky[500], 0.16),
|
||||
activeMatch: withOpacity(colors.sky[800], 0.32),
|
||||
related: colors.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: colors.neutral[300],
|
||||
active: textColor.active,
|
||||
},
|
||||
};
|
||||
|
||||
const syntax: Syntax = {
|
||||
primary: {
|
||||
color: colors.neutral[750],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
comment: {
|
||||
color: colors.neutral[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
punctuation: {
|
||||
color: colors.neutral[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
constant: {
|
||||
color: colors.neutral[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
keyword: {
|
||||
color: colors.blue[800],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
function: {
|
||||
color: colors.green[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
type: {
|
||||
color: colors.teal[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
variant: {
|
||||
color: colors.sky[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
property: {
|
||||
color: colors.blue[700],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
enum: {
|
||||
color: colors.orange[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
operator: {
|
||||
color: colors.orange[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
string: {
|
||||
color: colors.orange[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
number: {
|
||||
color: colors.teal[500],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
boolean: {
|
||||
color: colors.amber[600],
|
||||
weight: fontWeights.normal,
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
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.teal[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add underline
|
||||
},
|
||||
linkText: {
|
||||
color: colors.orange[500],
|
||||
weight: fontWeights.normal,
|
||||
// TODO: add italic
|
||||
},
|
||||
};
|
||||
|
||||
const shadowAlpha: NumberToken = {
|
||||
value: 0.12,
|
||||
type: "number",
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: "light",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@@ -0,0 +1,146 @@
|
||||
import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
|
||||
import { Color, withOpacity } from "../utils/color";
|
||||
|
||||
export interface SyntaxHighlightStyle {
|
||||
color: ColorToken;
|
||||
weight: FontWeightToken;
|
||||
}
|
||||
|
||||
export interface Player {
|
||||
baseColor: ColorToken;
|
||||
cursorColor: ColorToken;
|
||||
selectionColor: ColorToken;
|
||||
borderColor: ColorToken;
|
||||
}
|
||||
export function buildPlayer(
|
||||
color: ColorToken,
|
||||
cursorOpacity?: number,
|
||||
selectionOpacity?: number,
|
||||
borderOpacity?: number
|
||||
) {
|
||||
return {
|
||||
baseColor: color,
|
||||
cursorColor: withOpacity(color, cursorOpacity || 1.0),
|
||||
selectionColor: withOpacity(color, selectionOpacity || 0.1),
|
||||
borderColor: withOpacity(color, borderOpacity || 0.8),
|
||||
}
|
||||
}
|
||||
|
||||
export interface BackgroundColor {
|
||||
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;
|
||||
listMarker: SyntaxHighlightStyle;
|
||||
};
|
||||
|
||||
export default interface Theme {
|
||||
name: string;
|
||||
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;
|
||||
};
|
||||
};
|
||||
|
||||
syntax: Syntax,
|
||||
|
||||
player: {
|
||||
1: Player;
|
||||
2: Player;
|
||||
3: Player;
|
||||
4: Player;
|
||||
5: Player;
|
||||
6: Player;
|
||||
7: Player;
|
||||
8: Player;
|
||||
};
|
||||
shadowAlpha: NumberToken;
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { colorRamp } from "./utils/color";
|
||||
|
||||
interface Token<V, T> {
|
||||
value: V,
|
||||
type: T
|
||||
}
|
||||
|
||||
export type FontFamily = string;
|
||||
export type FontFamilyToken = Token<FontFamily, "fontFamily">;
|
||||
function fontFamily(value: FontFamily): FontFamilyToken {
|
||||
return {
|
||||
value,
|
||||
type: "fontFamily"
|
||||
}
|
||||
}
|
||||
export const fontFamilies = {
|
||||
sans: fontFamily("Zed Sans"),
|
||||
mono: fontFamily("Zed Mono"),
|
||||
}
|
||||
|
||||
export type FontSize = number;
|
||||
export type FontSizeToken = Token<FontSize, "fontSize">;
|
||||
function fontSize(value: FontSize) {
|
||||
return {
|
||||
value,
|
||||
type: "fontSize"
|
||||
};
|
||||
}
|
||||
export const fontSizes = {
|
||||
"3xs": fontSize(8),
|
||||
"2xs": fontSize(10),
|
||||
xs: fontSize(12),
|
||||
sm: fontSize(14),
|
||||
md: fontSize(16),
|
||||
lg: fontSize(18),
|
||||
xl: fontSize(20),
|
||||
};
|
||||
|
||||
export type FontWeight =
|
||||
| "thin"
|
||||
| "extra_light"
|
||||
| "light"
|
||||
| "normal"
|
||||
| "medium"
|
||||
| "semibold"
|
||||
| "bold"
|
||||
| "extra_bold"
|
||||
| "black";
|
||||
export type FontWeightToken = Token<FontWeight, "fontWeight">;
|
||||
function fontWeight(value: FontWeight): FontWeightToken {
|
||||
return {
|
||||
value,
|
||||
type: "fontWeight"
|
||||
};
|
||||
}
|
||||
export const fontWeights = {
|
||||
"thin": fontWeight("thin"),
|
||||
"extra_light": fontWeight("extra_light"),
|
||||
"light": fontWeight("light"),
|
||||
"normal": fontWeight("normal"),
|
||||
"medium": fontWeight("medium"),
|
||||
"semibold": fontWeight("semibold"),
|
||||
"bold": fontWeight("bold"),
|
||||
"extra_bold": fontWeight("extra_bold"),
|
||||
"black": fontWeight("black"),
|
||||
}
|
||||
|
||||
export type Color = string;
|
||||
export interface ColorToken {
|
||||
value: Color,
|
||||
type: "color",
|
||||
step?: number,
|
||||
}
|
||||
export const colors = {
|
||||
neutral: colorRamp(["white", "black"], { steps: 37, increment: 25 }), // (900/25) + 1
|
||||
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"),
|
||||
}
|
||||
|
||||
export type NumberToken = Token<number, "number">;
|
||||
|
||||
export default {
|
||||
fontFamilies,
|
||||
fontSizes,
|
||||
fontWeights,
|
||||
colors,
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
import chroma, { Scale } from "chroma-js";
|
||||
import { ColorToken } from "../tokens";
|
||||
|
||||
export type Color = string;
|
||||
export type ColorRampStep = { value: Color; type: "color"; step: number };
|
||||
export type ColorRamp = {
|
||||
[index: number]: ColorRampStep;
|
||||
};
|
||||
|
||||
export function colorRamp(
|
||||
color: Color | [Color, Color],
|
||||
options?: { steps?: number; increment?: number; }
|
||||
): ColorRamp {
|
||||
let scale: Scale;
|
||||
if (Array.isArray(color)) {
|
||||
const [startColor, endColor] = color;
|
||||
scale = chroma.scale([startColor, endColor]);
|
||||
} else {
|
||||
let hue = Math.round(chroma(color).hsl()[0]);
|
||||
let startColor = chroma.hsl(hue, 0.88, 0.96);
|
||||
let endColor = chroma.hsl(hue, 0.68, 0.12);
|
||||
scale = chroma
|
||||
.scale([startColor, color, endColor])
|
||||
.domain([0, 0.5, 1])
|
||||
.mode("hsl")
|
||||
.gamma(1)
|
||||
// .correctLightness(true)
|
||||
.padding([0, 0]);
|
||||
}
|
||||
|
||||
const ramp: ColorRamp = {};
|
||||
const steps = options?.steps || 10;
|
||||
const increment = options?.increment || 100;
|
||||
|
||||
scale.colors(steps, "hex").forEach((color, ix) => {
|
||||
const step = ix * increment;
|
||||
ramp[step] = {
|
||||
value: color,
|
||||
step,
|
||||
type: "color",
|
||||
};
|
||||
});
|
||||
|
||||
return ramp;
|
||||
}
|
||||
|
||||
export function withOpacity(color: ColorToken, opacity: number): ColorToken {
|
||||
return {
|
||||
...color,
|
||||
value: chroma(color.value).alpha(opacity).hex()
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import { snakeCase } from "case-anything";
|
||||
|
||||
// https://stackoverflow.com/questions/60269936/typescript-convert-generic-object-from-snake-to-camel-case
|
||||
|
||||
// Typescript magic to convert any string from camelCase to snake_case at compile time
|
||||
type SnakeCase<S> =
|
||||
S extends string ?
|
||||
S extends `${infer T}${infer U}` ?
|
||||
`${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` :
|
||||
S :
|
||||
S;
|
||||
|
||||
type SnakeCased<Type> = {
|
||||
[Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
|
||||
}
|
||||
|
||||
export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
|
||||
const snakeObject: any = {};
|
||||
for (const key in object) {
|
||||
snakeObject[snakeCase(key)] = snakeCaseValue(object[key]);
|
||||
}
|
||||
return snakeObject;
|
||||
}
|
||||
|
||||
function snakeCaseValue(value: any): any {
|
||||
if (typeof value === "object") {
|
||||
if (Array.isArray(value)) {
|
||||
return value.map(snakeCaseValue);
|
||||
} else {
|
||||
return snakeCaseTree(value);
|
||||
}
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user