Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix typescript indent size

Browse source
This commit is contained in:
Keith Simmons 2022-04-06 10:35:29 -07:00
parent 1812480cbb
commit 36f4d8f9e4
17 changed files with 1309 additions and 1309 deletions
Download patch file Download diff file Expand all files Collapse all files

14
styles/src/buildThemes.ts
View file

@ -7,11 +7,11 @@ import snakeCase from "./utils/snakeCase";
const themes = [dark, light]; const themes = [dark, light];
for (let theme of themes) { for (let theme of themes) {
let styleTree = snakeCase(app(theme)); let styleTree = snakeCase(app(theme));
let styleTreeJSON = JSON.stringify(styleTree, null, 2); let styleTreeJSON = JSON.stringify(styleTree, null, 2);
let outPath = path.resolve( let outPath = path.resolve(
`${__dirname}/../../crates/zed/assets/themes/${theme.name}.json` `${__dirname}/../../crates/zed/assets/themes/${theme.name}.json`
); );
fs.writeFileSync(outPath, styleTreeJSON); fs.writeFileSync(outPath, styleTreeJSON);
console.log(`- ${outPath} created`); console.log(`- ${outPath} created`);
} }

148
styles/src/buildTokens.ts
View file

@ -7,80 +7,80 @@ import { colors, fontFamilies, fontSizes, fontWeights } from "./tokens";
// Organize theme tokens // Organize theme tokens
function themeTokens(theme: Theme) { function themeTokens(theme: Theme) {
return { return {
meta: { meta: {
themeName: theme.name, themeName: theme.name,
}, },
text: theme.textColor, text: theme.textColor,
icon: theme.iconColor, icon: theme.iconColor,
background: theme.backgroundColor, background: theme.backgroundColor,
border: theme.borderColor, border: theme.borderColor,
editor: theme.editor, editor: theme.editor,
syntax: { syntax: {
primary: { primary: {
value: theme.syntax.primary.color.value, value: theme.syntax.primary.color.value,
type: "color", type: "color",
}, },
comment: { comment: {
value: theme.syntax.comment.color.value, value: theme.syntax.comment.color.value,
type: "color", type: "color",
}, },
keyword: { keyword: {
value: theme.syntax.keyword.color.value, value: theme.syntax.keyword.color.value,
type: "color", type: "color",
}, },
function: { function: {
value: theme.syntax.function.color.value, value: theme.syntax.function.color.value,
type: "color", type: "color",
}, },
type: { type: {
value: theme.syntax.type.color.value, value: theme.syntax.type.color.value,
type: "color", type: "color",
}, },
variant: { variant: {
value: theme.syntax.variant.color.value, value: theme.syntax.variant.color.value,
type: "color", type: "color",
}, },
property: { property: {
value: theme.syntax.property.color.value, value: theme.syntax.property.color.value,
type: "color", type: "color",
}, },
enum: { enum: {
value: theme.syntax.enum.color.value, value: theme.syntax.enum.color.value,
type: "color", type: "color",
}, },
operator: { operator: {
value: theme.syntax.operator.color.value, value: theme.syntax.operator.color.value,
type: "color", type: "color",
}, },
string: { string: {
value: theme.syntax.string.color.value, value: theme.syntax.string.color.value,
type: "color", type: "color",
}, },
number: { number: {
value: theme.syntax.number.color.value, value: theme.syntax.number.color.value,
type: "color", type: "color",
}, },
boolean: { boolean: {
value: theme.syntax.boolean.color.value, value: theme.syntax.boolean.color.value,
type: "color", type: "color",
}, },
}, },
player: theme.player, player: theme.player,
shadowAlpha: theme.shadowAlpha, shadowAlpha: theme.shadowAlpha,
}; };
} }
// Organize core tokens // Organize core tokens
const coreTokens = { const coreTokens = {
color: { color: {
...colors, ...colors,
}, },
text: { text: {
family: fontFamilies, family: fontFamilies,
weight: fontWeights, weight: fontWeights,
}, },
size: fontSizes, size: fontSizes,
}; };
const combinedTokens: any = {}; const combinedTokens: any = {};
@ -98,10 +98,10 @@ combinedTokens.core = coreTokens;
// We write `${theme}.json` as a separate file for the design team's convenience, but it isn't consumed by Figma Tokens directly. // 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]; let themes = [dark, light];
themes.forEach((theme) => { themes.forEach((theme) => {
const themePath = `${distPath}/${theme.name}.json` const themePath = `${distPath}/${theme.name}.json`
fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2)); fs.writeFileSync(themePath, JSON.stringify(themeTokens(theme), null, 2));
console.log(`- ${themePath} created`); console.log(`- ${themePath} created`);
combinedTokens[theme.name] = themeTokens(theme); 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. // Write combined tokens to `tokens.json`. This file is consumed by the Figma Tokens plugin to keep our designs consistent with the app.

54
styles/src/styleTree/app.ts
View file

@ -9,35 +9,35 @@ import selectorModal from "./selectorModal";
import workspace from "./workspace"; import workspace from "./workspace";
export const panel = { export const panel = {
padding: { top: 12, left: 12, bottom: 12, right: 12 }, padding: { top: 12, left: 12, bottom: 12, right: 12 },
}; };
export default function app(theme: Theme): Object { export default function app(theme: Theme): Object {
return { return {
selector: selectorModal(theme), selector: selectorModal(theme),
workspace: workspace(theme), workspace: workspace(theme),
editor: editor(theme), editor: editor(theme),
projectDiagnostics: { projectDiagnostics: {
tabIconSpacing: 4, tabIconSpacing: 4,
tabIconWidth: 13, tabIconWidth: 13,
tabSummarySpacing: 10, tabSummarySpacing: 10,
emptyMessage: text(theme, "sans", "primary", { size: "lg" }), emptyMessage: text(theme, "sans", "primary", { size: "lg" }),
statusBarItem: { statusBarItem: {
...text(theme, "sans", "muted"), ...text(theme, "sans", "muted"),
margin: { margin: {
right: 10, right: 10,
},
},
}, },
projectPanel: projectPanel(theme), },
chatPanel: chatPanel(theme), },
contactsPanel: contactsPanel(theme), projectPanel: projectPanel(theme),
search: search(theme), chatPanel: chatPanel(theme),
breadcrumbs: { contactsPanel: contactsPanel(theme),
...text(theme, "sans", "primary"), search: search(theme),
padding: { breadcrumbs: {
left: 6, ...text(theme, "sans", "primary"),
}, padding: {
} left: 6,
}; },
}
};
} }

196
styles/src/styleTree/chatPanel.ts
View file

@ -1,108 +1,108 @@
import Theme from "../themes/theme"; import Theme from "../themes/theme";
import { panel } from "./app"; import { panel } from "./app";
import { import {
backgroundColor, backgroundColor,
border, border,
player, player,
shadow, shadow,
text, text,
TextColor TextColor
} from "./components"; } from "./components";
export default function chatPanel(theme: Theme) { export default function chatPanel(theme: Theme) {
function channelSelectItem( function channelSelectItem(
theme: Theme, theme: Theme,
textColor: TextColor, textColor: TextColor,
hovered: boolean 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 { return {
...panel, name: text(theme, "sans", textColor),
channelName: text(theme, "sans", "primary", { weight: "bold" }), padding: 4,
channelNameHash: { hash: {
...text(theme, "sans", "muted"), ...text(theme, "sans", "muted"),
padding: { margin: {
right: 8, 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,
},
}, },
},
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,
},
},
};
} }

106
styles/src/styleTree/components.ts
View file

@ -5,89 +5,89 @@ import { Color } from "../utils/color";
export type TextColor = keyof Theme["textColor"]; export type TextColor = keyof Theme["textColor"];
export function text( export function text(
theme: Theme, theme: Theme,
fontFamily: keyof typeof fontFamilies, fontFamily: keyof typeof fontFamilies,
color: TextColor, color: TextColor,
properties?: { properties?: {
size?: keyof typeof fontSizes; size?: keyof typeof fontSizes;
weight?: FontWeight; weight?: FontWeight;
underline?: boolean; underline?: boolean;
} }
) { ) {
let size = fontSizes[properties?.size || "sm"].value; let size = fontSizes[properties?.size || "sm"].value;
return { return {
family: fontFamilies[fontFamily].value, family: fontFamilies[fontFamily].value,
color: theme.textColor[color].value, color: theme.textColor[color].value,
...properties, ...properties,
size, size,
}; };
} }
export function textColor(theme: Theme, color: TextColor) { export function textColor(theme: Theme, color: TextColor) {
return theme.textColor[color].value; return theme.textColor[color].value;
} }
export type BorderColor = keyof Theme["borderColor"]; export type BorderColor = keyof Theme["borderColor"];
export interface BorderOptions { export interface BorderOptions {
width?: number; width?: number;
top?: boolean; top?: boolean;
bottom?: boolean; bottom?: boolean;
left?: boolean; left?: boolean;
right?: boolean; right?: boolean;
overlay?: boolean; overlay?: boolean;
} }
export function border( export function border(
theme: Theme, theme: Theme,
color: BorderColor, color: BorderColor,
options?: BorderOptions options?: BorderOptions
) { ) {
return { return {
color: borderColor(theme, color), color: borderColor(theme, color),
width: 1, width: 1,
...options, ...options,
}; };
} }
export function borderColor(theme: Theme, color: BorderColor) { export function borderColor(theme: Theme, color: BorderColor) {
return theme.borderColor[color].value; return theme.borderColor[color].value;
} }
export type IconColor = keyof Theme["iconColor"]; export type IconColor = keyof Theme["iconColor"];
export function iconColor(theme: Theme, color: IconColor) { export function iconColor(theme: Theme, color: IconColor) {
return theme.iconColor[color].value; return theme.iconColor[color].value;
} }
export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8; export type PlayerIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
export interface Player { export interface Player {
selection: { selection: {
cursor: Color; cursor: Color;
selection: Color; selection: Color;
}; };
} }
export function player( export function player(
theme: Theme, theme: Theme,
playerNumber: PlayerIndex, playerNumber: PlayerIndex,
): Player { ): Player {
return { return {
selection: { selection: {
cursor: theme.player[playerNumber].cursorColor.value, cursor: theme.player[playerNumber].cursorColor.value,
selection: theme.player[playerNumber].selectionColor.value, selection: theme.player[playerNumber].selectionColor.value,
}, },
}; };
} }
export type BackgroundColor = keyof Theme["backgroundColor"]; export type BackgroundColor = keyof Theme["backgroundColor"];
export type BackgroundState = keyof BackgroundColorSet; export type BackgroundState = keyof BackgroundColorSet;
export function backgroundColor( export function backgroundColor(
theme: Theme, theme: Theme,
name: BackgroundColor, name: BackgroundColor,
state?: BackgroundState, state?: BackgroundState,
): Color { ): Color {
return theme.backgroundColor[name][state || "base"].value; return theme.backgroundColor[name][state || "base"].value;
} }
export function shadow(theme: Theme) { export function shadow(theme: Theme) {
return { return {
blur: 16, blur: 16,
color: chroma("black").alpha(theme.shadowAlpha.value).hex(), color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
offset: [0, 2], offset: [0, 2],
}; };
} }

108
styles/src/styleTree/contactsPanel.ts
View file

@ -3,60 +3,60 @@ import { panel } from "./app";
import { backgroundColor, borderColor, text } from "./components"; import { backgroundColor, borderColor, text } from "./components";
export default function(theme: Theme) { export default function(theme: Theme) {
const project = { const project = {
guestAvatarSpacing: 4, guestAvatarSpacing: 4,
height: 24, height: 24,
guestAvatar: { guestAvatar: {
cornerRadius: 8, cornerRadius: 8,
width: 14, width: 14,
}, },
name: { name: {
...text(theme, "mono", "placeholder", { size: "sm" }), ...text(theme, "mono", "placeholder", { size: "sm" }),
margin: { margin: {
right: 6, right: 6,
}, },
}, },
padding: { padding: {
left: 8, left: 8,
}, },
}; };
const sharedProject = { const sharedProject = {
...project, ...project,
background: backgroundColor(theme, 300), background: backgroundColor(theme, 300),
cornerRadius: 6, cornerRadius: 6,
name: { name: {
...project.name, ...project.name,
...text(theme, "mono", "secondary", { size: "sm" }), ...text(theme, "mono", "secondary", { size: "sm" }),
}, },
}; };
return { return {
...panel, ...panel,
hostRowHeight: 28, hostRowHeight: 28,
treeBranchColor: borderColor(theme, "muted"), treeBranchColor: borderColor(theme, "muted"),
treeBranchWidth: 1, treeBranchWidth: 1,
hostAvatar: { hostAvatar: {
cornerRadius: 10, cornerRadius: 10,
width: 18, width: 18,
}, },
hostUsername: { hostUsername: {
...text(theme, "mono", "primary", { size: "sm" }), ...text(theme, "mono", "primary", { size: "sm" }),
padding: { padding: {
left: 8, left: 8,
}, },
}, },
project, project,
sharedProject, sharedProject,
hoveredSharedProject: { hoveredSharedProject: {
...sharedProject, ...sharedProject,
background: backgroundColor(theme, 300, "hovered"), background: backgroundColor(theme, 300, "hovered"),
cornerRadius: 6, cornerRadius: 6,
}, },
unsharedProject: project, unsharedProject: project,
hoveredUnsharedProject: { hoveredUnsharedProject: {
...project, ...project,
cornerRadius: 6, cornerRadius: 6,
}, },
} }
} }

274
styles/src/styleTree/editor.ts
View file

@ -1,146 +1,146 @@
import Theme from "../themes/theme"; import Theme from "../themes/theme";
import { import {
backgroundColor, backgroundColor,
border, border,
iconColor, iconColor,
player, player,
text, text,
TextColor TextColor
} from "./components"; } from "./components";
export default function editor(theme: Theme) { export default function editor(theme: Theme) {
const autocompleteItem = { const autocompleteItem = {
cornerRadius: 6, cornerRadius: 6,
padding: { padding: {
bottom: 2, bottom: 2,
left: 6, left: 6,
right: 6, right: 6,
top: 2, 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",
}),
},
};
}
function diagnostic(theme: Theme, color: TextColor) {
return { return {
// textColor: theme.syntax.primary.color, textScaleFactor: 0.857,
textColor: theme.syntax.primary.color.value, header: {
background: backgroundColor(theme, 500), border: border(theme, "primary", {
activeLineBackground: theme.editor.line.active.value, top: true,
codeActionsIndicator: iconColor(theme, "muted"), }),
diffBackgroundDeleted: backgroundColor(theme, "error"), },
diffBackgroundInserted: backgroundColor(theme, "ok"), message: {
documentHighlightReadBackground: theme.editor.highlight.occurrence.value, text: text(theme, "sans", color, { size: "sm" }),
documentHighlightWriteBackground: theme.editor.highlight.activeOccurrence.value, highlightText: text(theme, "sans", color, {
errorColor: theme.textColor.error.value, size: "sm",
gutterBackground: backgroundColor(theme, 500), weight: "bold",
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: 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,
},
}; };
}
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: 6,
padding: 6,
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,
},
};
} }

56
styles/src/styleTree/projectPanel.ts
View file

@ -4,34 +4,34 @@ import { panel } from "./app";
import { backgroundColor, iconColor, text, TextColor } from "./components"; import { backgroundColor, iconColor, text, TextColor } from "./components";
export default function projectPanel(theme: Theme) { export default function projectPanel(theme: Theme) {
function entry(theme: Theme, textColor: TextColor, background?: Color) { 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 { return {
...panel, height: 22,
entry: entry(theme, "secondary"), background,
hoveredEntry: entry( iconColor: iconColor(theme, "muted"),
theme, iconSize: 8,
"secondary", iconSpacing: 8,
backgroundColor(theme, 300, "hovered") text: text(theme, "mono", textColor, { size: "sm" }),
),
selectedEntry: entry(theme, "primary"),
hoveredSelectedEntry: entry(
theme,
"primary",
backgroundColor(theme, 300, "hovered")
),
padding: {
top: 6,
left: 12,
},
}; };
}
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,
},
};
} }

144
styles/src/styleTree/search.ts
View file

@ -2,78 +2,78 @@ import Theme from "../themes/theme";
import { backgroundColor, border, player, text } from "./components"; import { backgroundColor, border, player, text } from "./components";
export default function search(theme: Theme) { export default function search(theme: Theme) {
const optionButton = { const optionButton = {
...text(theme, "mono", "secondary"), ...text(theme, "mono", "secondary"),
background: backgroundColor(theme, 300), background: backgroundColor(theme, 300),
cornerRadius: 6, cornerRadius: 6,
border: border(theme, "primary"), border: border(theme, "primary"),
margin: { margin: {
left: 1, left: 1,
right: 1, right: 1,
}, },
padding: { padding: {
bottom: 1, bottom: 1,
left: 6, left: 6,
right: 6, right: 6,
top: 1, top: 1,
}, },
}; };
const editor = { const editor = {
background: backgroundColor(theme, 500), background: backgroundColor(theme, 500),
cornerRadius: 6, cornerRadius: 6,
minWidth: 200, minWidth: 200,
maxWidth: 500, maxWidth: 500,
placeholderText: text(theme, "mono", "placeholder"), placeholderText: text(theme, "mono", "placeholder"),
selection: player(theme, 1).selection, selection: player(theme, 1).selection,
text: text(theme, "mono", "primary"), text: text(theme, "mono", "primary"),
border: border(theme, "secondary"), border: border(theme, "secondary"),
margin: { margin: {
right: 5, right: 5,
}, },
padding: { padding: {
top: 3, top: 3,
bottom: 3, bottom: 3,
left: 14, left: 14,
right: 14, right: 14,
}, },
}; };
return { return {
matchBackground: theme.editor.highlight.match.value, matchBackground: theme.editor.highlight.match.value,
tabIconSpacing: 4, tabIconSpacing: 4,
tabIconWidth: 14, tabIconWidth: 14,
activeHoveredOptionButton: { activeHoveredOptionButton: {
...optionButton, ...optionButton,
background: backgroundColor(theme, 100), background: backgroundColor(theme, 100),
}, },
activeOptionButton: { activeOptionButton: {
...optionButton, ...optionButton,
background: backgroundColor(theme, 100), background: backgroundColor(theme, 100),
}, },
editor, editor,
hoveredOptionButton: { hoveredOptionButton: {
...optionButton, ...optionButton,
background: backgroundColor(theme, 100), background: backgroundColor(theme, 100),
}, },
invalidEditor: { invalidEditor: {
...editor, ...editor,
border: border(theme, "error"), border: border(theme, "error"),
}, },
matchIndex: { matchIndex: {
...text(theme, "mono", "muted"), ...text(theme, "mono", "muted"),
padding: 6, padding: 6,
}, },
optionButton, optionButton,
optionButtonGroup: { optionButtonGroup: {
padding: { padding: {
left: 2, left: 2,
right: 2, right: 2,
}, },
}, },
resultsStatus: { resultsStatus: {
...text(theme, "mono", "primary"), ...text(theme, "mono", "primary"),
size: 18, size: 18,
}, },
}; };
} }

104
styles/src/styleTree/selectorModal.ts
View file

@ -2,58 +2,58 @@ import Theme from "../themes/theme";
import { backgroundColor, border, player, shadow, text } from "./components"; import { backgroundColor, border, player, shadow, text } from "./components";
export default function selectorModal(theme: Theme): Object { export default function selectorModal(theme: Theme): Object {
const item = { const item = {
padding: { padding: {
bottom: 4, bottom: 4,
left: 16, left: 16,
right: 16, right: 16,
top: 4, top: 4,
}, },
cornerRadius: 6, cornerRadius: 6,
text: text(theme, "sans", "secondary"), text: text(theme, "sans", "secondary"),
highlightText: text(theme, "sans", "feature", { weight: "bold" }), highlightText: text(theme, "sans", "feature", { weight: "bold" }),
}; };
const activeItem = { const activeItem = {
...item, ...item,
background: backgroundColor(theme, 300, "active"), background: backgroundColor(theme, 300, "active"),
text: text(theme, "sans", "primary"), text: text(theme, "sans", "primary"),
}; };
return { return {
background: backgroundColor(theme, 300), background: backgroundColor(theme, 300),
cornerRadius: 6, cornerRadius: 6,
padding: 8, padding: 8,
item, item,
activeItem, activeItem,
border: border(theme, "primary"), border: border(theme, "primary"),
empty: { empty: {
text: text(theme, "sans", "placeholder"), text: text(theme, "sans", "placeholder"),
padding: { padding: {
bottom: 4, bottom: 4,
left: 16, left: 16,
right: 16, right: 16,
top: 8, top: 8,
}, },
}, },
inputEditor: { inputEditor: {
background: backgroundColor(theme, 500), background: backgroundColor(theme, 500),
corner_radius: 6, corner_radius: 6,
placeholderText: text(theme, "sans", "placeholder"), placeholderText: text(theme, "sans", "placeholder"),
selection: player(theme, 1).selection, selection: player(theme, 1).selection,
text: text(theme, "mono", "primary"), text: text(theme, "mono", "primary"),
border: border(theme, "secondary"), border: border(theme, "secondary"),
padding: { padding: {
bottom: 7, bottom: 7,
left: 16, left: 16,
right: 16, right: 16,
top: 7, top: 7,
}, },
}, },
margin: { margin: {
bottom: 52, bottom: 52,
top: 52, top: 52,
}, },
shadow: shadow(theme), shadow: shadow(theme),
}; };
} }

282
styles/src/styleTree/workspace.ts
View file

@ -1,150 +1,150 @@
import Theme from "../themes/theme"; import Theme from "../themes/theme";
import { backgroundColor, border, borderColor, iconColor, text } from "./components"; import { backgroundColor, border, iconColor, text } from "./components";
export default function workspace(theme: Theme) { export default function workspace(theme: Theme) {
const signInPrompt = { const signInPrompt = {
...text(theme, "sans", "secondary", { size: "xs" }), ...text(theme, "sans", "secondary", { size: "xs" }),
underline: true, underline: true,
padding: { padding: {
right: 8, right: 8,
}, },
}; };
const tab = { const tab = {
height: 32, height: 32,
background: backgroundColor(theme, 300), background: backgroundColor(theme, 300),
iconClose: iconColor(theme, "muted"), iconClose: iconColor(theme, "muted"),
iconCloseActive: iconColor(theme, "active"), iconCloseActive: iconColor(theme, "active"),
iconConflict: iconColor(theme, "warning"), iconConflict: iconColor(theme, "warning"),
iconDirty: iconColor(theme, "info"), iconDirty: iconColor(theme, "info"),
iconWidth: 8, iconWidth: 8,
spacing: 10, spacing: 10,
text: text(theme, "mono", "secondary", { size: "sm" }), text: text(theme, "mono", "secondary", { size: "sm" }),
border: border(theme, "primary", { border: border(theme, "primary", {
left: true, left: true,
bottom: true, bottom: true,
overlay: true, overlay: true,
}), }),
padding: { padding: {
left: 12, left: 12,
right: 12, right: 12,
}, },
}; };
const activeTab = { const activeTab = {
...tab, ...tab,
background: backgroundColor(theme, 500), background: backgroundColor(theme, 500),
text: text(theme, "mono", "active", { size: "sm" }), 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, "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"),
},
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: { border: {
...tab.border, color: "#00000088",
bottom: false, width: 1,
}, },
}; },
avatarRibbon: {
const sidebarItem = { height: 3,
height: 32, width: 12,
iconColor: iconColor(theme, "secondary"), // TODO: The background for this ideally should be
iconSize: 18, // set with a token, not hardcoded in rust
}; },
const sidebar = { border: border(theme, "primary", { bottom: true }),
width: 30, signInPrompt,
background: backgroundColor(theme, 300), hoveredSignInPrompt: {
border: border(theme, "primary", { right: true }), ...signInPrompt,
item: sidebarItem, ...text(theme, "sans", "active", { size: "xs" }),
activeItem: { },
...sidebarItem, offlineIcon: {
iconColor: iconColor(theme, "active"), color: iconColor(theme, "secondary"),
width: 16,
padding: {
right: 4,
}, },
resizeHandle: { },
background: border(theme, "primary").color, outdatedWarning: {
padding: { ...text(theme, "sans", "warning"),
left: 1, size: 13,
}, },
}, },
}; toolbar: {
height: 34,
return { background: backgroundColor(theme, 500),
background: backgroundColor(theme, 300), border: border(theme, "secondary", { bottom: true }),
leaderBorderOpacity: 0.7, itemSpacing: 8,
leaderBorderWidth: 2.0, padding: { left: 16, right: 8, top: 4, bottom: 4 },
tab, },
activeTab, breadcrumbs: {
leftSidebar: { ...text(theme, "mono", "secondary"),
...sidebar, padding: { left: 6 },
border: border(theme, "primary", { right: true }), },
}, disconnectedOverlay: {
rightSidebar: { ...text(theme, "sans", "active"),
...sidebar, background: "#000000aa",
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"),
},
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",
},
};
} }

394
styles/src/themes/dark.ts
View file

@ -3,227 +3,227 @@ import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme"; import Theme, { buildPlayer, Syntax } from "./theme";
const backgroundColor = { const backgroundColor = {
100: { 100: {
base: colors.neutral[750], base: colors.neutral[750],
hovered: colors.neutral[725], hovered: colors.neutral[725],
active: colors.neutral[800], active: colors.neutral[800],
focused: colors.neutral[675], focused: colors.neutral[675],
}, },
300: { 300: {
base: colors.neutral[800], base: colors.neutral[800],
hovered: colors.neutral[775], hovered: colors.neutral[775],
active: colors.neutral[750], active: colors.neutral[750],
focused: colors.neutral[775], focused: colors.neutral[775],
}, },
500: { 500: {
base: colors.neutral[900], base: colors.neutral[900],
hovered: withOpacity(colors.neutral[0], 0.08), hovered: withOpacity(colors.neutral[0], 0.08),
active: withOpacity(colors.neutral[0], 0.12), active: withOpacity(colors.neutral[0], 0.12),
focused: colors.neutral[825], focused: colors.neutral[825],
}, },
ok: { ok: {
base: colors.green[600], base: colors.green[600],
hovered: colors.green[600], hovered: colors.green[600],
active: colors.green[600], active: colors.green[600],
focused: colors.green[600], focused: colors.green[600],
}, },
error: { error: {
base: colors.red[400], base: colors.red[400],
hovered: colors.red[400], hovered: colors.red[400],
active: colors.red[400], active: colors.red[400],
focused: colors.red[400], focused: colors.red[400],
}, },
warning: { warning: {
base: colors.amber[300], base: colors.amber[300],
hovered: colors.amber[300], hovered: colors.amber[300],
active: colors.amber[300], active: colors.amber[300],
focused: colors.amber[300], focused: colors.amber[300],
}, },
info: { info: {
base: colors.blue[500], base: colors.blue[500],
hovered: colors.blue[500], hovered: colors.blue[500],
active: colors.blue[500], active: colors.blue[500],
focused: colors.blue[500], focused: colors.blue[500],
}, },
}; };
const borderColor = { const borderColor = {
primary: colors.neutral[875], primary: colors.neutral[875],
secondary: colors.neutral[775], secondary: colors.neutral[775],
muted: colors.neutral[675], muted: colors.neutral[675],
focused: colors.neutral[500], focused: colors.neutral[500],
active: colors.neutral[900], active: colors.neutral[900],
ok: colors.green[500], ok: colors.green[500],
error: colors.red[500], error: colors.red[500],
warning: colors.amber[500], warning: colors.amber[500],
info: colors.blue[500], info: colors.blue[500],
}; };
const textColor = { const textColor = {
primary: colors.neutral[50], primary: colors.neutral[50],
secondary: colors.neutral[350], secondary: colors.neutral[350],
muted: colors.neutral[450], muted: colors.neutral[450],
placeholder: colors.neutral[650], placeholder: colors.neutral[650],
active: colors.neutral[0], active: colors.neutral[0],
//TODO: (design) define feature and it's correct value //TODO: (design) define feature and it's correct value
feature: colors.sky[500], feature: colors.sky[500],
ok: colors.green[600], ok: colors.green[600],
error: colors.red[400], error: colors.red[400],
warning: colors.amber[300], warning: colors.amber[300],
info: colors.blue[500], info: colors.blue[500],
}; };
const iconColor = { const iconColor = {
primary: colors.neutral[200], primary: colors.neutral[200],
secondary: colors.neutral[350], secondary: colors.neutral[350],
muted: colors.neutral[600], muted: colors.neutral[600],
placeholder: colors.neutral[700], placeholder: colors.neutral[700],
active: colors.neutral[0], active: colors.neutral[0],
//TODO: (design) define feature and it's correct value //TODO: (design) define feature and it's correct value
feature: colors.blue[500], feature: colors.blue[500],
ok: colors.green[600], ok: colors.green[600],
error: colors.red[500], error: colors.red[500],
warning: colors.amber[400], warning: colors.amber[400],
info: colors.blue[600], info: colors.blue[600],
}; };
const player = { const player = {
1: buildPlayer(colors.blue[500]), 1: buildPlayer(colors.blue[500]),
2: buildPlayer(colors.lime[500]), 2: buildPlayer(colors.lime[500]),
3: buildPlayer(colors.fuschia[500]), 3: buildPlayer(colors.fuschia[500]),
4: buildPlayer(colors.orange[500]), 4: buildPlayer(colors.orange[500]),
5: buildPlayer(colors.purple[500]), 5: buildPlayer(colors.purple[500]),
6: buildPlayer(colors.teal[400]), 6: buildPlayer(colors.teal[400]),
7: buildPlayer(colors.pink[400]), 7: buildPlayer(colors.pink[400]),
8: buildPlayer(colors.yellow[400]), 8: buildPlayer(colors.yellow[400]),
}; };
const editor = { const editor = {
background: backgroundColor[500].base, background: backgroundColor[500].base,
indent_guide: borderColor.muted, indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary, indent_guide_active: borderColor.secondary,
line: { line: {
active: withOpacity(colors.neutral[0], 0.07), active: withOpacity(colors.neutral[0], 0.07),
highlighted: withOpacity(colors.neutral[0], 0.12), highlighted: withOpacity(colors.neutral[0], 0.12),
inserted: backgroundColor.ok.active, inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active, deleted: backgroundColor.error.active,
modified: backgroundColor.info.active, modified: backgroundColor.info.active,
}, },
highlight: { highlight: {
selection: player[1].selectionColor, selection: player[1].selectionColor,
occurrence: withOpacity(colors.neutral[0], 0.12), 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 activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
matchingBracket: backgroundColor[500].active, matchingBracket: backgroundColor[500].active,
match: withOpacity(colors.sky[500], 0.16), match: withOpacity(colors.sky[500], 0.16),
activeMatch: withOpacity(colors.sky[800], 0.32), activeMatch: withOpacity(colors.sky[800], 0.32),
related: backgroundColor[500].focused, related: backgroundColor[500].focused,
}, },
gutter: { gutter: {
primary: textColor.placeholder, primary: textColor.placeholder,
active: textColor.active, active: textColor.active,
}, },
}; };
const syntax: Syntax = { const syntax: Syntax = {
primary: { primary: {
color: colors.neutral[150], color: colors.neutral[150],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
comment: { comment: {
color: colors.neutral[300], color: colors.neutral[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
punctuation: { punctuation: {
color: colors.neutral[200], color: colors.neutral[200],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
constant: { constant: {
color: colors.neutral[150], color: colors.neutral[150],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
keyword: { keyword: {
color: colors.blue[400], color: colors.blue[400],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
function: { function: {
color: colors.yellow[200], color: colors.yellow[200],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
type: { type: {
color: colors.teal[300], color: colors.teal[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
variant: { variant: {
color: colors.sky[300], color: colors.sky[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
property: { property: {
color: colors.blue[400], color: colors.blue[400],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
enum: { enum: {
color: colors.orange[500], color: colors.orange[500],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
operator: { operator: {
color: colors.orange[500], color: colors.orange[500],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
string: { string: {
color: colors.orange[300], color: colors.orange[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
number: { number: {
color: colors.lime[300], color: colors.lime[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
boolean: { boolean: {
color: colors.lime[300], color: colors.lime[300],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
predictive: { predictive: {
color: textColor.muted, color: textColor.muted,
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
title: { title: {
color: colors.amber[500], color: colors.amber[500],
weight: fontWeights.bold, weight: fontWeights.bold,
}, },
emphasis: { emphasis: {
color: textColor.active, color: textColor.active,
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
emphasisStrong: { emphasisStrong: {
color: textColor.active, color: textColor.active,
weight: fontWeights.bold, weight: fontWeights.bold,
}, },
linkUrl: { linkUrl: {
color: colors.lime[500], color: colors.lime[500],
weight: fontWeights.normal, weight: fontWeights.normal,
// TODO: add underline // TODO: add underline
}, },
linkText: { linkText: {
color: colors.orange[500], color: colors.orange[500],
weight: fontWeights.normal, weight: fontWeights.normal,
// TODO: add italic // TODO: add italic
}, },
}; };
const shadowAlpha: NumberToken = { const shadowAlpha: NumberToken = {
value: 0.32, value: 0.32,
type: "number", type: "number",
}; };
const theme: Theme = { const theme: Theme = {
name: "dark", name: "dark",
backgroundColor, backgroundColor,
borderColor, borderColor,
textColor, textColor,
iconColor, iconColor,
editor, editor,
syntax, syntax,
player, player,
shadowAlpha, shadowAlpha,
}; };
export default theme; export default theme;

390
styles/src/themes/light.ts
View file

@ -3,225 +3,225 @@ import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme"; import Theme, { buildPlayer, Syntax } from "./theme";
const backgroundColor = { const backgroundColor = {
100: { 100: {
base: colors.neutral[75], base: colors.neutral[75],
hovered: colors.neutral[100], hovered: colors.neutral[100],
active: colors.neutral[150], active: colors.neutral[150],
focused: colors.neutral[100], focused: colors.neutral[100],
}, },
300: { 300: {
base: colors.neutral[25], base: colors.neutral[25],
hovered: colors.neutral[75], hovered: colors.neutral[75],
active: colors.neutral[125], active: colors.neutral[125],
focused: colors.neutral[75], focused: colors.neutral[75],
}, },
500: { 500: {
base: colors.neutral[0], base: colors.neutral[0],
hovered: withOpacity(colors.neutral[900], 0.03), hovered: withOpacity(colors.neutral[900], 0.03),
active: withOpacity(colors.neutral[900], 0.06), active: withOpacity(colors.neutral[900], 0.06),
focused: colors.neutral[50], focused: colors.neutral[50],
}, },
ok: { ok: {
base: colors.green[100], base: colors.green[100],
hovered: colors.green[100], hovered: colors.green[100],
active: colors.green[100], active: colors.green[100],
focused: colors.green[100], focused: colors.green[100],
}, },
error: { error: {
base: colors.red[100], base: colors.red[100],
hovered: colors.red[100], hovered: colors.red[100],
active: colors.red[100], active: colors.red[100],
focused: colors.red[100], focused: colors.red[100],
}, },
warning: { warning: {
base: colors.yellow[100], base: colors.yellow[100],
hovered: colors.yellow[100], hovered: colors.yellow[100],
active: colors.yellow[100], active: colors.yellow[100],
focused: colors.yellow[100], focused: colors.yellow[100],
}, },
info: { info: {
base: colors.blue[100], base: colors.blue[100],
hovered: colors.blue[100], hovered: colors.blue[100],
active: colors.blue[100], active: colors.blue[100],
focused: colors.blue[100], focused: colors.blue[100],
}, },
}; };
const borderColor = { const borderColor = {
primary: colors.neutral[150], primary: colors.neutral[150],
secondary: colors.neutral[150], secondary: colors.neutral[150],
muted: colors.neutral[100], muted: colors.neutral[100],
focused: colors.neutral[100], focused: colors.neutral[100],
active: colors.neutral[250], active: colors.neutral[250],
ok: colors.green[200], ok: colors.green[200],
error: colors.red[200], error: colors.red[200],
warning: colors.yellow[200], warning: colors.yellow[200],
info: colors.blue[200], info: colors.blue[200],
}; };
const textColor = { const textColor = {
primary: colors.neutral[750], primary: colors.neutral[750],
secondary: colors.neutral[650], secondary: colors.neutral[650],
muted: colors.neutral[550], muted: colors.neutral[550],
placeholder: colors.neutral[450], placeholder: colors.neutral[450],
active: colors.neutral[900], active: colors.neutral[900],
feature: colors.indigo[600], feature: colors.indigo[600],
ok: colors.green[500], ok: colors.green[500],
error: colors.red[500], error: colors.red[500],
warning: colors.yellow[500], warning: colors.yellow[500],
info: colors.blue[500], info: colors.blue[500],
}; };
const iconColor = { const iconColor = {
primary: colors.neutral[700], primary: colors.neutral[700],
secondary: colors.neutral[500], secondary: colors.neutral[500],
muted: colors.neutral[350], muted: colors.neutral[350],
placeholder: colors.neutral[300], placeholder: colors.neutral[300],
active: colors.neutral[900], active: colors.neutral[900],
feature: colors.indigo[500], feature: colors.indigo[500],
ok: colors.green[600], ok: colors.green[600],
error: colors.red[600], error: colors.red[600],
warning: colors.yellow[400], warning: colors.yellow[400],
info: colors.blue[600], info: colors.blue[600],
}; };
const player = { const player = {
1: buildPlayer(colors.blue[500]), 1: buildPlayer(colors.blue[500]),
2: buildPlayer(colors.emerald[400]), 2: buildPlayer(colors.emerald[400]),
3: buildPlayer(colors.fuschia[400]), 3: buildPlayer(colors.fuschia[400]),
4: buildPlayer(colors.orange[400]), 4: buildPlayer(colors.orange[400]),
5: buildPlayer(colors.purple[400]), 5: buildPlayer(colors.purple[400]),
6: buildPlayer(colors.teal[400]), 6: buildPlayer(colors.teal[400]),
7: buildPlayer(colors.pink[400]), 7: buildPlayer(colors.pink[400]),
8: buildPlayer(colors.yellow[400]), 8: buildPlayer(colors.yellow[400]),
}; };
const editor = { const editor = {
background: backgroundColor[500].base, background: backgroundColor[500].base,
indent_guide: borderColor.muted, indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary, indent_guide_active: borderColor.secondary,
line: { line: {
active: withOpacity(colors.neutral[900], 0.06), active: withOpacity(colors.neutral[900], 0.06),
highlighted: withOpacity(colors.neutral[900], 0.12), highlighted: withOpacity(colors.neutral[900], 0.12),
inserted: backgroundColor.ok.active, inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active, deleted: backgroundColor.error.active,
modified: backgroundColor.info.active, modified: backgroundColor.info.active,
}, },
highlight: { highlight: {
selection: player[1].selectionColor, selection: player[1].selectionColor,
occurrence: withOpacity(colors.neutral[900], 0.06), 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 activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side
matchingBracket: colors.neutral[0], matchingBracket: colors.neutral[0],
match: withOpacity(colors.red[500], 0.2), match: withOpacity(colors.red[500], 0.2),
activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side
related: colors.neutral[0], related: colors.neutral[0],
}, },
gutter: { gutter: {
primary: colors.neutral[300], primary: colors.neutral[300],
active: textColor.active, active: textColor.active,
}, },
}; };
const syntax: Syntax = { const syntax: Syntax = {
primary: { primary: {
color: colors.neutral[800], color: colors.neutral[800],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
comment: { comment: {
color: colors.neutral[500], color: colors.neutral[500],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
punctuation: { punctuation: {
color: colors.neutral[600], color: colors.neutral[600],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
constant: { constant: {
color: colors.neutral[800], color: colors.neutral[800],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
keyword: { keyword: {
color: colors.indigo[700], color: colors.indigo[700],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
function: { function: {
color: colors.orange[600], color: colors.orange[600],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
type: { type: {
color: colors.yellow[600], color: colors.yellow[600],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
variant: { variant: {
color: colors.rose[700], color: colors.rose[700],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
property: { property: {
color: colors.emerald[700], color: colors.emerald[700],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
enum: { enum: {
color: colors.red[500], color: colors.red[500],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
operator: { operator: {
color: colors.red[500], color: colors.red[500],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
string: { string: {
color: colors.red[500], color: colors.red[500],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
number: { number: {
color: colors.indigo[500], color: colors.indigo[500],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
boolean: { boolean: {
color: colors.red[500], color: colors.red[500],
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
predictive: { predictive: {
color: textColor.placeholder, color: textColor.placeholder,
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
title: { title: {
color: colors.sky[500], color: colors.sky[500],
weight: fontWeights.bold, weight: fontWeights.bold,
}, },
emphasis: { emphasis: {
color: textColor.active, color: textColor.active,
weight: fontWeights.normal, weight: fontWeights.normal,
}, },
emphasisStrong: { emphasisStrong: {
color: textColor.active, color: textColor.active,
weight: fontWeights.bold, weight: fontWeights.bold,
}, },
linkUrl: { linkUrl: {
color: colors.lime[500], color: colors.lime[500],
weight: fontWeights.normal, weight: fontWeights.normal,
// TODO: add underline // TODO: add underline
}, },
linkText: { linkText: {
color: colors.red[500], color: colors.red[500],
weight: fontWeights.normal, weight: fontWeights.normal,
// TODO: add italic // TODO: add italic
}, },
}; };
const shadowAlpha: NumberToken = { const shadowAlpha: NumberToken = {
value: 0.12, value: 0.12,
type: "number", type: "number",
}; };
const theme: Theme = { const theme: Theme = {
name: "light", name: "light",
backgroundColor, backgroundColor,
borderColor, borderColor,
textColor, textColor,
iconColor, iconColor,
editor, editor,
syntax, syntax,
player, player,
shadowAlpha, shadowAlpha,
}; };
export default theme; export default theme;

240
styles/src/themes/theme.ts
View file

@ -2,144 +2,144 @@ import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color"; import { withOpacity } from "../utils/color";
export interface SyntaxHighlightStyle { export interface SyntaxHighlightStyle {
color: ColorToken; color: ColorToken;
weight: FontWeightToken; weight: FontWeightToken;
} }
export interface Player { export interface Player {
baseColor: ColorToken; baseColor: ColorToken;
cursorColor: ColorToken; cursorColor: ColorToken;
selectionColor: ColorToken; selectionColor: ColorToken;
borderColor: ColorToken; borderColor: ColorToken;
} }
export function buildPlayer( export function buildPlayer(
color: ColorToken, color: ColorToken,
cursorOpacity?: number, cursorOpacity?: number,
selectionOpacity?: number, selectionOpacity?: number,
borderOpacity?: number borderOpacity?: number
) { ) {
return { return {
baseColor: color, baseColor: color,
cursorColor: withOpacity(color, cursorOpacity || 1.0), cursorColor: withOpacity(color, cursorOpacity || 1.0),
selectionColor: withOpacity(color, selectionOpacity || 0.24), selectionColor: withOpacity(color, selectionOpacity || 0.24),
borderColor: withOpacity(color, borderOpacity || 0.8), borderColor: withOpacity(color, borderOpacity || 0.8),
} }
} }
export interface BackgroundColorSet { export interface BackgroundColorSet {
base: ColorToken; base: ColorToken;
hovered: ColorToken; hovered: ColorToken;
active: ColorToken; active: ColorToken;
focused: ColorToken; focused: ColorToken;
} }
export interface Syntax { export interface Syntax {
primary: SyntaxHighlightStyle; primary: SyntaxHighlightStyle;
comment: SyntaxHighlightStyle; comment: SyntaxHighlightStyle;
punctuation: SyntaxHighlightStyle; punctuation: SyntaxHighlightStyle;
constant: SyntaxHighlightStyle; constant: SyntaxHighlightStyle;
keyword: SyntaxHighlightStyle; keyword: SyntaxHighlightStyle;
function: SyntaxHighlightStyle; function: SyntaxHighlightStyle;
type: SyntaxHighlightStyle; type: SyntaxHighlightStyle;
variant: SyntaxHighlightStyle; variant: SyntaxHighlightStyle;
property: SyntaxHighlightStyle; property: SyntaxHighlightStyle;
enum: SyntaxHighlightStyle; enum: SyntaxHighlightStyle;
operator: SyntaxHighlightStyle; operator: SyntaxHighlightStyle;
string: SyntaxHighlightStyle; string: SyntaxHighlightStyle;
number: SyntaxHighlightStyle; number: SyntaxHighlightStyle;
boolean: SyntaxHighlightStyle; boolean: SyntaxHighlightStyle;
predictive: SyntaxHighlightStyle; predictive: SyntaxHighlightStyle;
// TODO: Either move the following or rename // TODO: Either move the following or rename
title: SyntaxHighlightStyle; title: SyntaxHighlightStyle;
emphasis: SyntaxHighlightStyle; emphasis: SyntaxHighlightStyle;
emphasisStrong: SyntaxHighlightStyle; emphasisStrong: SyntaxHighlightStyle;
linkUrl: SyntaxHighlightStyle; linkUrl: SyntaxHighlightStyle;
linkText: SyntaxHighlightStyle; linkText: SyntaxHighlightStyle;
}; };
export default interface Theme { export default interface Theme {
name: string; name: string;
backgroundColor: { backgroundColor: {
100: BackgroundColorSet; 100: BackgroundColorSet;
300: BackgroundColorSet; 300: BackgroundColorSet;
500: BackgroundColorSet; 500: BackgroundColorSet;
ok: BackgroundColorSet; ok: BackgroundColorSet;
error: BackgroundColorSet; error: BackgroundColorSet;
warning: BackgroundColorSet; warning: BackgroundColorSet;
info: BackgroundColorSet; info: BackgroundColorSet;
};
borderColor: {
primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
focused: ColorToken;
active: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
};
textColor: {
primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
placeholder: ColorToken;
active: ColorToken;
feature: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
};
iconColor: {
primary: ColorToken;
secondary: ColorToken;
muted: ColorToken;
placeholder: ColorToken;
active: ColorToken;
feature: ColorToken;
ok: ColorToken;
error: ColorToken;
warning: ColorToken;
info: ColorToken;
};
editor: {
background: ColorToken;
indent_guide: ColorToken;
indent_guide_active: ColorToken;
line: {
active: ColorToken;
highlighted: ColorToken;
inserted: ColorToken;
deleted: ColorToken;
modified: ColorToken;
}; };
borderColor: { highlight: {
primary: ColorToken; selection: ColorToken;
secondary: ColorToken; occurrence: ColorToken;
muted: ColorToken; activeOccurrence: ColorToken;
focused: ColorToken; matchingBracket: ColorToken;
active: ColorToken; match: ColorToken;
ok: ColorToken; activeMatch: ColorToken;
error: ColorToken; related: ColorToken;
warning: ColorToken;
info: ColorToken;
}; };
textColor: { gutter: {
primary: ColorToken; primary: ColorToken;
secondary: ColorToken; active: 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, syntax: Syntax,
player: { player: {
1: Player; 1: Player;
2: Player; 2: Player;
3: Player; 3: Player;
4: Player; 4: Player;
5: Player; 5: Player;
6: Player; 6: Player;
7: Player; 7: Player;
8: Player; 8: Player;
}; };
shadowAlpha: NumberToken; shadowAlpha: NumberToken;
} }

2
styles/src/tokens.ts
View file

@ -36,7 +36,7 @@ export const fontSizes = {
xl: fontSize(20), xl: fontSize(20),
}; };
export type FontWeight = export type FontWeight =
| "thin" | "thin"
| "extra_light" | "extra_light"
| "light" | "light"

70
styles/src/utils/color.ts
View file

@ -4,49 +4,49 @@ import { ColorToken } from "../tokens";
export type Color = string; export type Color = string;
export type ColorRampStep = { value: Color; type: "color"; step: number }; export type ColorRampStep = { value: Color; type: "color"; step: number };
export type ColorRamp = { export type ColorRamp = {
[index: number]: ColorRampStep; [index: number]: ColorRampStep;
}; };
export function colorRamp( export function colorRamp(
color: Color | [Color, Color], color: Color | [Color, Color],
options?: { steps?: number; increment?: number; } options?: { steps?: number; increment?: number; }
): ColorRamp { ): ColorRamp {
let scale: Scale; let scale: Scale;
if (Array.isArray(color)) { if (Array.isArray(color)) {
const [startColor, endColor] = color; const [startColor, endColor] = color;
scale = chroma.scale([startColor, endColor]); scale = chroma.scale([startColor, endColor]);
} else { } else {
let hue = Math.round(chroma(color).hsl()[0]); let hue = Math.round(chroma(color).hsl()[0]);
let startColor = chroma.hsl(hue, 0.88, 0.96); let startColor = chroma.hsl(hue, 0.88, 0.96);
let endColor = chroma.hsl(hue, 0.68, 0.12); let endColor = chroma.hsl(hue, 0.68, 0.12);
scale = chroma scale = chroma
.scale([startColor, color, endColor]) .scale([startColor, color, endColor])
.domain([0, 0.5, 1]) .domain([0, 0.5, 1])
.mode("hsl") .mode("hsl")
.gamma(1) .gamma(1)
// .correctLightness(true) // .correctLightness(true)
.padding([0, 0]); .padding([0, 0]);
} }
const ramp: ColorRamp = {}; const ramp: ColorRamp = {};
const steps = options?.steps || 10; const steps = options?.steps || 10;
const increment = options?.increment || 100; const increment = options?.increment || 100;
scale.colors(steps, "hex").forEach((color, ix) => { scale.colors(steps, "hex").forEach((color, ix) => {
const step = ix * increment; const step = ix * increment;
ramp[step] = { ramp[step] = {
value: color, value: color,
step, step,
type: "color", type: "color",
}; };
}); });
return ramp; return ramp;
} }
export function withOpacity(color: ColorToken, opacity: number): ColorToken { export function withOpacity(color: ColorToken, opacity: number): ColorToken {
return { return {
...color, ...color,
value: chroma(color.value).alpha(opacity).hex() value: chroma(color.value).alpha(opacity).hex()
}; };
} }

36
styles/src/utils/snakeCase.ts
View file

@ -4,32 +4,32 @@ import { snakeCase } from "case-anything";
// Typescript magic to convert any string from camelCase to snake_case at compile time // Typescript magic to convert any string from camelCase to snake_case at compile time
type SnakeCase<S> = type SnakeCase<S> =
S extends string ? S extends string ?
S extends `${infer T}${infer U}` ? S extends `${infer T}${infer U}` ?
`${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` : `${T extends Capitalize<T> ? "_" : ""}${Lowercase<T>}${SnakeCase<U>}` :
S : S :
S; S;
type SnakeCased<Type> = { type SnakeCased<Type> = {
[Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]> [Property in keyof Type as SnakeCase<Property>]: SnakeCased<Type[Property]>
} }
export default function snakeCaseTree<T>(object: T): SnakeCased<T> { export default function snakeCaseTree<T>(object: T): SnakeCased<T> {
const snakeObject: any = {}; const snakeObject: any = {};
for (const key in object) { for (const key in object) {
snakeObject[snakeCase(key)] = snakeCaseValue(object[key]); snakeObject[snakeCase(key)] = snakeCaseValue(object[key]);
} }
return snakeObject; return snakeObject;
} }
function snakeCaseValue(value: any): any { function snakeCaseValue(value: any): any {
if (typeof value === "object") { if (typeof value === "object") {
if (Array.isArray(value)) { if (Array.isArray(value)) {
return value.map(snakeCaseValue); return value.map(snakeCaseValue);
} else {
return snakeCaseTree(value);
}
} else { } else {
return value; return snakeCaseTree(value);
} }
} else {
return value;
}
} }