Merge branch 'main' into auto-update
This commit is contained in:
Antonio Scandurra
@@ -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}/../../assets/themes/${theme.name}.json`
|
||||
);
|
||||
fs.writeFileSync(outPath, styleTreeJSON);
|
||||
console.log(`- ${outPath} created`);
|
||||
}
|
||||
@@ -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 = {};
|
||||
|
||||
const distPath = path.resolve(`${__dirname}/../dist`);
|
||||
|
||||
// Add core tokens to the combined tokens and write `core.json`.
|
||||
// We write `core.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
|
||||
const corePath = path.join(distPath, "core.json");
|
||||
fs.writeFileSync(corePath, JSON.stringify(coreTokens, null, 2));
|
||||
console.log(`- ${corePath} created`);
|
||||
combinedTokens.core = coreTokens;
|
||||
|
||||
// Add each theme to the combined tokens and write ${theme}.json.
|
||||
// We write `${theme}.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly.
|
||||
let themes = [dark, light];
|
||||
themes.forEach((theme) => {
|
||||
const themePath = `${distPath}/${theme.name}.json`
|
||||
fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
|
||||
console.log(`- ${themePath} created`);
|
||||
combinedTokens[theme.name] = themeTokens(theme);
|
||||
});
|
||||
|
||||
// Write combined tokens to `tokens.json`. This file is consumed by the Figma Tokens plugin to keep our designs consistent with the app.
|
||||
const combinedPath = path.resolve(`${distPath}/tokens.json`);
|
||||
fs.writeFileSync(combinedPath, JSON.stringify(combinedTokens, null, 2));
|
||||
console.log(`- ${combinedPath} created`);
|
||||
@@ -0,0 +1,45 @@
|
||||
import Theme from "../themes/theme";
|
||||
import chatPanel from "./chatPanel";
|
||||
import { text } from "./components";
|
||||
import contactsPanel from "./contactsPanel";
|
||||
import commandPalette from "./commandPalette";
|
||||
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,
|
||||
},
|
||||
},
|
||||
},
|
||||
commandPalette: commandPalette(theme),
|
||||
projectPanel: projectPanel(theme),
|
||||
chatPanel: chatPanel(theme),
|
||||
contactsPanel: contactsPanel(theme),
|
||||
search: search(theme),
|
||||
breadcrumbs: {
|
||||
...text(theme, "sans", "secondary"),
|
||||
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,23 @@
|
||||
import Theme from "../themes/theme";
|
||||
import { text, backgroundColor, border } from "./components";
|
||||
|
||||
export default function commandPalette(theme: Theme) {
|
||||
return {
|
||||
keystrokeSpacing: 8,
|
||||
key: {
|
||||
text: text(theme, "mono", "secondary", { size: "xs" }),
|
||||
cornerRadius: 4,
|
||||
background: backgroundColor(theme, "on300"),
|
||||
border: border(theme, "secondary"),
|
||||
padding: {
|
||||
top: 2,
|
||||
bottom: 2,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
margin: {
|
||||
left: 2
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import chroma from "chroma-js";
|
||||
import Theme, { BackgroundColorSet } from "../themes/theme";
|
||||
import { fontFamilies, fontSizes, FontWeight } from "../tokens";
|
||||
import { Color } from "../utils/color";
|
||||
|
||||
export type TextColor = keyof Theme["textColor"];
|
||||
export function text(
|
||||
theme: Theme,
|
||||
fontFamily: keyof typeof fontFamilies,
|
||||
color: TextColor,
|
||||
properties?: {
|
||||
size?: keyof typeof fontSizes;
|
||||
weight?: FontWeight;
|
||||
underline?: boolean;
|
||||
}
|
||||
) {
|
||||
let size = fontSizes[properties?.size || "sm"].value;
|
||||
return {
|
||||
family: fontFamilies[fontFamily].value,
|
||||
color: theme.textColor[color].value,
|
||||
...properties,
|
||||
size,
|
||||
};
|
||||
}
|
||||
export function textColor(theme: Theme, color: TextColor) {
|
||||
return theme.textColor[color].value;
|
||||
}
|
||||
|
||||
export type BorderColor = keyof Theme["borderColor"];
|
||||
export interface BorderOptions {
|
||||
width?: number;
|
||||
top?: boolean;
|
||||
bottom?: boolean;
|
||||
left?: boolean;
|
||||
right?: boolean;
|
||||
overlay?: boolean;
|
||||
}
|
||||
export function border(
|
||||
theme: Theme,
|
||||
color: BorderColor,
|
||||
options?: BorderOptions
|
||||
) {
|
||||
return {
|
||||
color: borderColor(theme, color),
|
||||
width: 1,
|
||||
...options,
|
||||
};
|
||||
}
|
||||
export function borderColor(theme: Theme, color: BorderColor) {
|
||||
return theme.borderColor[color].value;
|
||||
}
|
||||
|
||||
export type IconColor = keyof Theme["iconColor"];
|
||||
export function iconColor(theme: Theme, color: IconColor) {
|
||||
return theme.iconColor[color].value;
|
||||
}
|
||||
|
||||
export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
|
||||
export interface Player {
|
||||
selection: {
|
||||
cursor: Color;
|
||||
selection: Color;
|
||||
};
|
||||
}
|
||||
export function player(
|
||||
theme: Theme,
|
||||
playerNumber: PlayerIndex,
|
||||
): Player {
|
||||
return {
|
||||
selection: {
|
||||
cursor: theme.player[playerNumber].cursorColor.value,
|
||||
selection: theme.player[playerNumber].selectionColor.value,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export type BackgroundColor = keyof Theme["backgroundColor"];
|
||||
export type BackgroundState = keyof BackgroundColorSet;
|
||||
export function backgroundColor(
|
||||
theme: Theme,
|
||||
name: BackgroundColor,
|
||||
state?: BackgroundState,
|
||||
): 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,62 @@
|
||||
import Theme from "../themes/theme";
|
||||
import { panel } from "./app";
|
||||
import { backgroundColor, borderColor, text } from "./components";
|
||||
|
||||
export default function(theme: Theme) {
|
||||
const project = {
|
||||
guestAvatarSpacing: 4,
|
||||
height: 24,
|
||||
guestAvatar: {
|
||||
cornerRadius: 8,
|
||||
width: 14,
|
||||
},
|
||||
name: {
|
||||
...text(theme, "mono", "placeholder", { size: "sm" }),
|
||||
margin: {
|
||||
right: 6,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
left: 8,
|
||||
},
|
||||
};
|
||||
|
||||
const sharedProject = {
|
||||
...project,
|
||||
background: backgroundColor(theme, 300),
|
||||
cornerRadius: 6,
|
||||
name: {
|
||||
...project.name,
|
||||
...text(theme, "mono", "secondary", { size: "sm" }),
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
...panel,
|
||||
hostRowHeight: 28,
|
||||
treeBranchColor: borderColor(theme, "muted"),
|
||||
treeBranchWidth: 1,
|
||||
hostAvatar: {
|
||||
cornerRadius: 10,
|
||||
width: 18,
|
||||
},
|
||||
hostUsername: {
|
||||
...text(theme, "mono", "primary", { size: "sm" }),
|
||||
padding: {
|
||||
left: 8,
|
||||
},
|
||||
},
|
||||
project,
|
||||
sharedProject,
|
||||
hoveredSharedProject: {
|
||||
...sharedProject,
|
||||
background: backgroundColor(theme, 300, "hovered"),
|
||||
cornerRadius: 6,
|
||||
},
|
||||
unsharedProject: project,
|
||||
hoveredUnsharedProject: {
|
||||
...project,
|
||||
cornerRadius: 6,
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
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, "muted"),
|
||||
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: 8,
|
||||
padding: 4,
|
||||
border: border(theme, "secondary"),
|
||||
item: autocompleteItem,
|
||||
hoveredItem: {
|
||||
...autocompleteItem,
|
||||
background: backgroundColor(theme, 500, "hovered"),
|
||||
},
|
||||
margin: {
|
||||
left: -14,
|
||||
},
|
||||
matchHighlight: text(theme, "mono", "feature"),
|
||||
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,84 @@
|
||||
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, "on500"),
|
||||
cornerRadius: 4,
|
||||
border: border(theme, "secondary"),
|
||||
margin: {
|
||||
left: 2,
|
||||
right: 2,
|
||||
},
|
||||
padding: {
|
||||
bottom: 3,
|
||||
left: 8,
|
||||
right: 8,
|
||||
top: 3,
|
||||
},
|
||||
};
|
||||
|
||||
const editor = {
|
||||
background: backgroundColor(theme, 500),
|
||||
cornerRadius: 8,
|
||||
minWidth: 200,
|
||||
maxWidth: 500,
|
||||
placeholderText: text(theme, "mono", "placeholder"),
|
||||
selection: player(theme, 1).selection,
|
||||
text: text(theme, "mono", "active"),
|
||||
border: border(theme, "secondary"),
|
||||
margin: {
|
||||
right: 6,
|
||||
},
|
||||
padding: {
|
||||
top: 3,
|
||||
bottom: 3,
|
||||
left: 12,
|
||||
right: 8,
|
||||
},
|
||||
};
|
||||
|
||||
return {
|
||||
matchBackground: theme.editor.highlight.match.value,
|
||||
tabIconSpacing: 8,
|
||||
tabIconWidth: 14,
|
||||
activeHoveredOptionButton: {
|
||||
...optionButton,
|
||||
...text(theme, "mono", "active"),
|
||||
background: backgroundColor(theme, "on500", "active"),
|
||||
border: border(theme, "muted"),
|
||||
},
|
||||
activeOptionButton: {
|
||||
...optionButton,
|
||||
...text(theme, "mono", "active"),
|
||||
background: backgroundColor(theme, "on500", "active"),
|
||||
border: border(theme, "muted"),
|
||||
},
|
||||
editor,
|
||||
hoveredOptionButton: {
|
||||
...optionButton,
|
||||
...text(theme, "mono", "active"),
|
||||
border: border(theme, "muted"),
|
||||
},
|
||||
invalidEditor: {
|
||||
...editor,
|
||||
border: border(theme, "error"),
|
||||
},
|
||||
matchIndex: {
|
||||
...text(theme, "mono", "muted"),
|
||||
padding: 6,
|
||||
},
|
||||
optionButton,
|
||||
optionButtonGroup: {
|
||||
padding: {
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
},
|
||||
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: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
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: 8,
|
||||
padding: 8,
|
||||
item,
|
||||
activeItem,
|
||||
border: border(theme, "primary"),
|
||||
empty: {
|
||||
text: text(theme, "sans", "placeholder"),
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 8,
|
||||
},
|
||||
},
|
||||
inputEditor: {
|
||||
background: backgroundColor(theme, 500),
|
||||
cornerRadius: 8,
|
||||
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,158 @@
|
||||
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: "xs" }),
|
||||
border: border(theme, "primary"),
|
||||
cornerRadius: 6,
|
||||
margin: {
|
||||
top: 1,
|
||||
right: 6,
|
||||
},
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
};
|
||||
|
||||
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: 8,
|
||||
text: text(theme, "sans", "secondary", { size: "sm" }),
|
||||
border: border(theme, "primary", {
|
||||
left: true,
|
||||
bottom: true,
|
||||
overlay: true,
|
||||
}),
|
||||
padding: {
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
};
|
||||
|
||||
const activeTab = {
|
||||
...tab,
|
||||
background: backgroundColor(theme, 500),
|
||||
text: text(theme, "sans", "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, "secondary").color,
|
||||
width: 1,
|
||||
},
|
||||
status_bar: {
|
||||
height: 24,
|
||||
itemSpacing: 8,
|
||||
padding: {
|
||||
left: 6,
|
||||
right: 6,
|
||||
},
|
||||
border: border(theme, "primary", { top: true, overlay: true }),
|
||||
cursorPosition: text(theme, "sans", "muted"),
|
||||
diagnosticMessage: text(theme, "sans", "muted"),
|
||||
lspMessage: text(theme, "sans", "muted"),
|
||||
autoUpdateProgressMessage: text(theme, "sans", "muted"),
|
||||
autoUpdateDoneMessage: text(theme, "sans", "muted"),
|
||||
},
|
||||
titlebar: {
|
||||
avatarWidth: 18,
|
||||
height: 32,
|
||||
background: backgroundColor(theme, 100),
|
||||
shareIconColor: iconColor(theme, "secondary"),
|
||||
shareIconActiveColor: iconColor(theme, "feature"),
|
||||
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, "sans", "active", { size: "xs" }),
|
||||
},
|
||||
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,241 @@
|
||||
import { 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[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],
|
||||
},
|
||||
on300: {
|
||||
base: withOpacity(colors.neutral[850], 0.5),
|
||||
hovered: colors.neutral[875],
|
||||
active: colors.neutral[900],
|
||||
focused: colors.neutral[875],
|
||||
},
|
||||
on500: {
|
||||
base: colors.neutral[850],
|
||||
hovered: colors.neutral[800],
|
||||
active: colors.neutral[775],
|
||||
focused: colors.neutral[800],
|
||||
},
|
||||
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.indigo[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.blue[400],
|
||||
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],
|
||||
};
|
||||
|
||||
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]),
|
||||
};
|
||||
|
||||
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.violet[700], 0.5),
|
||||
activeMatch: withOpacity(colors.violet[600], 0.7),
|
||||
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
|
||||
},
|
||||
};
|
||||
|
||||
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,239 @@
|
||||
import { colors, fontWeights, NumberToken } from "../tokens";
|
||||
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[100],
|
||||
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],
|
||||
},
|
||||
on300: {
|
||||
base: colors.neutral[50],
|
||||
hovered: colors.neutral[100],
|
||||
active: colors.neutral[150],
|
||||
focused: colors.neutral[100],
|
||||
},
|
||||
on500: {
|
||||
base: colors.neutral[50],
|
||||
hovered: colors.neutral[25],
|
||||
active: colors.neutral[0],
|
||||
focused: colors.neutral[25],
|
||||
},
|
||||
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.indigo[500],
|
||||
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[500],
|
||||
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],
|
||||
};
|
||||
|
||||
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]),
|
||||
};
|
||||
|
||||
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: colors.yellow[100],
|
||||
activeMatch: colors.yellow[200], // 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
|
||||
},
|
||||
};
|
||||
|
||||
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,147 @@
|
||||
import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
|
||||
import { 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.24),
|
||||
borderColor: withOpacity(color, borderOpacity || 0.8),
|
||||
}
|
||||
}
|
||||
|
||||
export interface BackgroundColorSet {
|
||||
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;
|
||||
};
|
||||
|
||||
export default interface Theme {
|
||||
name: string;
|
||||
backgroundColor: {
|
||||
100: BackgroundColorSet;
|
||||
300: BackgroundColorSet;
|
||||
500: BackgroundColorSet;
|
||||
on300: BackgroundColorSet;
|
||||
on500: 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;
|
||||
};
|
||||
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