Detailed changes
@@ -7,11 +7,11 @@ import snakeCase from "./utils/snakeCase";
const themes = [dark, light];
for (let theme of themes) {
- let styleTree = snakeCase(app(theme));
- let styleTreeJSON = JSON.stringify(styleTree, null, 2);
- let outPath = path.resolve(
- `${__dirname}/../../crates/zed/assets/themes/${theme.name}.json`
- );
- fs.writeFileSync(outPath, styleTreeJSON);
- console.log(`- ${outPath} created`);
+ let styleTree = snakeCase(app(theme));
+ let styleTreeJSON = JSON.stringify(styleTree, null, 2);
+ let outPath = path.resolve(
+ `${__dirname}/../../crates/zed/assets/themes/${theme.name}.json`
+ );
+ fs.writeFileSync(outPath, styleTreeJSON);
+ console.log(`- ${outPath} created`);
}
@@ -7,80 +7,80 @@ 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,
- };
+ 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,
+ color: {
+ ...colors,
+ },
+ text: {
+ family: fontFamilies,
+ weight: fontWeights,
+ },
+ size: fontSizes,
};
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.
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);
+ 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.
@@ -9,35 +9,35 @@ import selectorModal from "./selectorModal";
import workspace from "./workspace";
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 {
- 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,
- },
- },
+ return {
+ selector: selectorModal(theme),
+ workspace: workspace(theme),
+ editor: editor(theme),
+ projectDiagnostics: {
+ tabIconSpacing: 4,
+ tabIconWidth: 13,
+ tabSummarySpacing: 10,
+ emptyMessage: text(theme, "sans", "primary", { size: "lg" }),
+ statusBarItem: {
+ ...text(theme, "sans", "muted"),
+ margin: {
+ right: 10,
},
- projectPanel: projectPanel(theme),
- chatPanel: chatPanel(theme),
- contactsPanel: contactsPanel(theme),
- search: search(theme),
- breadcrumbs: {
- ...text(theme, "sans", "primary"),
- padding: {
- left: 6,
- },
- }
- };
+ },
+ },
+ projectPanel: projectPanel(theme),
+ chatPanel: chatPanel(theme),
+ contactsPanel: contactsPanel(theme),
+ search: search(theme),
+ breadcrumbs: {
+ ...text(theme, "sans", "primary"),
+ padding: {
+ left: 6,
+ },
+ }
+ };
}
@@ -1,108 +1,108 @@
import Theme from "../themes/theme";
import { panel } from "./app";
import {
- backgroundColor,
- border,
- player,
- shadow,
- text,
- TextColor
+ 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,
- },
+ 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,
};
+ }
- 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,
- },
+ 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,
+ },
+ },
+ };
}
@@ -5,89 +5,89 @@ 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;
- }
+ 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,
- };
+ 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;
+ 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;
+ width?: number;
+ top?: boolean;
+ bottom?: boolean;
+ left?: boolean;
+ right?: boolean;
+ overlay?: boolean;
}
export function border(
- theme: Theme,
- color: BorderColor,
- options?: BorderOptions
+ theme: Theme,
+ color: BorderColor,
+ options?: BorderOptions
) {
- return {
- color: borderColor(theme, color),
- width: 1,
- ...options,
- };
+ return {
+ color: borderColor(theme, color),
+ width: 1,
+ ...options,
+ };
}
export function borderColor(theme: Theme, color: BorderColor) {
- return theme.borderColor[color].value;
+ return theme.borderColor[color].value;
}
export type IconColor = keyof Theme["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 interface Player {
- selection: {
- cursor: Color;
- selection: Color;
- };
+ selection: {
+ cursor: Color;
+ selection: Color;
+ };
}
export function player(
- theme: Theme,
- playerNumber: PlayerIndex,
+ theme: Theme,
+ playerNumber: PlayerIndex,
): Player {
- return {
- selection: {
- cursor: theme.player[playerNumber].cursorColor.value,
- selection: theme.player[playerNumber].selectionColor.value,
- },
- };
+ 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,
+ theme: Theme,
+ name: BackgroundColor,
+ state?: BackgroundState,
): Color {
- return theme.backgroundColor[name][state || "base"].value;
+ 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],
- };
+ return {
+ blur: 16,
+ color: chroma("black").alpha(theme.shadowAlpha.value).hex(),
+ offset: [0, 2],
+ };
}
@@ -3,60 +3,60 @@ 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 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" }),
- },
- };
+ 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,
- },
- }
+ 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,
+ },
+ }
}
@@ -1,146 +1,146 @@
import Theme from "../themes/theme";
import {
- backgroundColor,
- border,
- iconColor,
- player,
- text,
- TextColor
+ 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",
- }),
- },
- };
- }
+ const autocompleteItem = {
+ cornerRadius: 6,
+ padding: {
+ bottom: 2,
+ left: 6,
+ right: 6,
+ top: 2,
+ },
+ };
+ function diagnostic(theme: Theme, color: TextColor) {
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,
- },
- },
+ 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: 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,
},
- 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,
+ },
+ 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,
+ },
+ };
}
@@ -4,34 +4,34 @@ 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" }),
- };
- }
-
+ function entry(theme: Theme, textColor: TextColor, background?: Color) {
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,
- },
+ 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,
+ },
+ };
}
@@ -2,78 +2,78 @@ import Theme from "../themes/theme";
import { backgroundColor, border, player, text } from "./components";
export default function search(theme: Theme) {
- const optionButton = {
- ...text(theme, "mono", "secondary"),
- background: backgroundColor(theme, 300),
- cornerRadius: 6,
- border: border(theme, "primary"),
- margin: {
- left: 1,
- right: 1,
- },
- padding: {
- bottom: 1,
- left: 6,
- right: 6,
- top: 1,
- },
- };
+ const optionButton = {
+ ...text(theme, "mono", "secondary"),
+ background: backgroundColor(theme, 300),
+ cornerRadius: 6,
+ border: border(theme, "primary"),
+ margin: {
+ left: 1,
+ right: 1,
+ },
+ padding: {
+ bottom: 1,
+ left: 6,
+ right: 6,
+ top: 1,
+ },
+ };
- const editor = {
- background: backgroundColor(theme, 500),
- cornerRadius: 6,
- minWidth: 200,
- maxWidth: 500,
- placeholderText: text(theme, "mono", "placeholder"),
- selection: player(theme, 1).selection,
- text: text(theme, "mono", "primary"),
- border: border(theme, "secondary"),
- margin: {
- right: 5,
- },
- padding: {
- top: 3,
- bottom: 3,
- left: 14,
- right: 14,
- },
- };
+ const editor = {
+ background: backgroundColor(theme, 500),
+ cornerRadius: 6,
+ minWidth: 200,
+ maxWidth: 500,
+ placeholderText: text(theme, "mono", "placeholder"),
+ selection: player(theme, 1).selection,
+ text: text(theme, "mono", "primary"),
+ border: border(theme, "secondary"),
+ margin: {
+ right: 5,
+ },
+ padding: {
+ top: 3,
+ bottom: 3,
+ left: 14,
+ right: 14,
+ },
+ };
- return {
- matchBackground: theme.editor.highlight.match.value,
- tabIconSpacing: 4,
- tabIconWidth: 14,
- activeHoveredOptionButton: {
- ...optionButton,
- background: backgroundColor(theme, 100),
- },
- activeOptionButton: {
- ...optionButton,
- background: backgroundColor(theme, 100),
- },
- editor,
- hoveredOptionButton: {
- ...optionButton,
- background: backgroundColor(theme, 100),
- },
- invalidEditor: {
- ...editor,
- border: border(theme, "error"),
- },
- matchIndex: {
- ...text(theme, "mono", "muted"),
- padding: 6,
- },
- optionButton,
- optionButtonGroup: {
- padding: {
- left: 2,
- right: 2,
- },
- },
- resultsStatus: {
- ...text(theme, "mono", "primary"),
- size: 18,
- },
- };
+ return {
+ matchBackground: theme.editor.highlight.match.value,
+ tabIconSpacing: 4,
+ tabIconWidth: 14,
+ activeHoveredOptionButton: {
+ ...optionButton,
+ background: backgroundColor(theme, 100),
+ },
+ activeOptionButton: {
+ ...optionButton,
+ background: backgroundColor(theme, 100),
+ },
+ editor,
+ hoveredOptionButton: {
+ ...optionButton,
+ background: backgroundColor(theme, 100),
+ },
+ invalidEditor: {
+ ...editor,
+ border: border(theme, "error"),
+ },
+ matchIndex: {
+ ...text(theme, "mono", "muted"),
+ padding: 6,
+ },
+ optionButton,
+ optionButtonGroup: {
+ padding: {
+ left: 2,
+ right: 2,
+ },
+ },
+ resultsStatus: {
+ ...text(theme, "mono", "primary"),
+ size: 18,
+ },
+ };
}
@@ -2,58 +2,58 @@ import Theme from "../themes/theme";
import { backgroundColor, border, player, shadow, text } from "./components";
export default function selectorModal(theme: Theme): Object {
- const item = {
- padding: {
- bottom: 4,
- left: 16,
- right: 16,
- top: 4,
- },
- cornerRadius: 6,
- text: text(theme, "sans", "secondary"),
- highlightText: text(theme, "sans", "feature", { weight: "bold" }),
- };
+ const item = {
+ padding: {
+ bottom: 4,
+ left: 16,
+ right: 16,
+ top: 4,
+ },
+ cornerRadius: 6,
+ text: text(theme, "sans", "secondary"),
+ highlightText: text(theme, "sans", "feature", { weight: "bold" }),
+ };
- const activeItem = {
- ...item,
- background: backgroundColor(theme, 300, "active"),
- text: text(theme, "sans", "primary"),
- };
+ const activeItem = {
+ ...item,
+ background: backgroundColor(theme, 300, "active"),
+ text: text(theme, "sans", "primary"),
+ };
- return {
- background: backgroundColor(theme, 300),
- cornerRadius: 6,
- padding: 8,
- item,
- activeItem,
- border: border(theme, "primary"),
- empty: {
- text: text(theme, "sans", "placeholder"),
- padding: {
- bottom: 4,
- left: 16,
- right: 16,
- top: 8,
- },
- },
- inputEditor: {
- background: backgroundColor(theme, 500),
- corner_radius: 6,
- placeholderText: text(theme, "sans", "placeholder"),
- selection: player(theme, 1).selection,
- text: text(theme, "mono", "primary"),
- border: border(theme, "secondary"),
- padding: {
- bottom: 7,
- left: 16,
- right: 16,
- top: 7,
- },
- },
- margin: {
- bottom: 52,
- top: 52,
- },
- shadow: shadow(theme),
- };
+ return {
+ background: backgroundColor(theme, 300),
+ cornerRadius: 6,
+ padding: 8,
+ item,
+ activeItem,
+ border: border(theme, "primary"),
+ empty: {
+ text: text(theme, "sans", "placeholder"),
+ padding: {
+ bottom: 4,
+ left: 16,
+ right: 16,
+ top: 8,
+ },
+ },
+ inputEditor: {
+ background: backgroundColor(theme, 500),
+ corner_radius: 6,
+ placeholderText: text(theme, "sans", "placeholder"),
+ selection: player(theme, 1).selection,
+ text: text(theme, "mono", "primary"),
+ border: border(theme, "secondary"),
+ padding: {
+ bottom: 7,
+ left: 16,
+ right: 16,
+ top: 7,
+ },
+ },
+ margin: {
+ bottom: 52,
+ top: 52,
+ },
+ shadow: shadow(theme),
+ };
}
@@ -1,150 +1,150 @@
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) {
- const signInPrompt = {
- ...text(theme, "sans", "secondary", { size: "xs" }),
- underline: true,
- padding: {
- right: 8,
- },
- };
+ const signInPrompt = {
+ ...text(theme, "sans", "secondary", { size: "xs" }),
+ underline: true,
+ padding: {
+ right: 8,
+ },
+ };
- const tab = {
- height: 32,
- background: backgroundColor(theme, 300),
- iconClose: iconColor(theme, "muted"),
- iconCloseActive: iconColor(theme, "active"),
- iconConflict: iconColor(theme, "warning"),
- iconDirty: iconColor(theme, "info"),
- iconWidth: 8,
- spacing: 10,
- text: text(theme, "mono", "secondary", { size: "sm" }),
- border: border(theme, "primary", {
- left: true,
- bottom: true,
- overlay: true,
- }),
- padding: {
- left: 12,
- right: 12,
- },
- };
+ const tab = {
+ height: 32,
+ background: backgroundColor(theme, 300),
+ iconClose: iconColor(theme, "muted"),
+ iconCloseActive: iconColor(theme, "active"),
+ iconConflict: iconColor(theme, "warning"),
+ iconDirty: iconColor(theme, "info"),
+ iconWidth: 8,
+ spacing: 10,
+ text: text(theme, "mono", "secondary", { size: "sm" }),
+ border: border(theme, "primary", {
+ left: true,
+ bottom: true,
+ overlay: true,
+ }),
+ padding: {
+ left: 12,
+ right: 12,
+ },
+ };
- const activeTab = {
- ...tab,
- background: backgroundColor(theme, 500),
- text: text(theme, "mono", "active", { size: "sm" }),
- border: {
- ...tab.border,
- bottom: false,
- },
- };
+ const activeTab = {
+ ...tab,
+ background: backgroundColor(theme, 500),
+ text: text(theme, "mono", "active", { size: "sm" }),
+ border: {
+ ...tab.border,
+ bottom: false,
+ },
+ };
- const sidebarItem = {
- height: 32,
- iconColor: iconColor(theme, "secondary"),
- iconSize: 18,
- };
- const sidebar = {
- width: 30,
- background: backgroundColor(theme, 300),
- border: border(theme, "primary", { right: true }),
- item: sidebarItem,
- activeItem: {
- ...sidebarItem,
- iconColor: iconColor(theme, "active"),
- },
- resizeHandle: {
- background: border(theme, "primary").color,
- padding: {
- left: 1,
- },
- },
- };
+ 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: {
- 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 },
+ 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: {
+ color: "#00000088",
+ width: 1,
},
- disconnectedOverlay: {
- ...text(theme, "sans", "active"),
- background: "#000000aa",
+ },
+ 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",
+ },
+ };
}
@@ -3,227 +3,227 @@ import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
const backgroundColor = {
- 100: {
- base: colors.neutral[750],
- hovered: colors.neutral[725],
- active: colors.neutral[800],
- focused: colors.neutral[675],
- },
- 300: {
- base: colors.neutral[800],
- hovered: colors.neutral[775],
- active: colors.neutral[750],
- focused: colors.neutral[775],
- },
- 500: {
- base: colors.neutral[900],
- hovered: withOpacity(colors.neutral[0], 0.08),
- active: withOpacity(colors.neutral[0], 0.12),
- focused: colors.neutral[825],
- },
- ok: {
- base: colors.green[600],
- hovered: colors.green[600],
- active: colors.green[600],
- focused: colors.green[600],
- },
- error: {
- base: colors.red[400],
- hovered: colors.red[400],
- active: colors.red[400],
- focused: colors.red[400],
- },
- warning: {
- base: colors.amber[300],
- hovered: colors.amber[300],
- active: colors.amber[300],
- focused: colors.amber[300],
- },
- info: {
- base: colors.blue[500],
- hovered: colors.blue[500],
- active: colors.blue[500],
- focused: colors.blue[500],
- },
+ 100: {
+ base: colors.neutral[750],
+ hovered: colors.neutral[725],
+ active: colors.neutral[800],
+ focused: colors.neutral[675],
+ },
+ 300: {
+ base: colors.neutral[800],
+ hovered: colors.neutral[775],
+ active: colors.neutral[750],
+ focused: colors.neutral[775],
+ },
+ 500: {
+ base: colors.neutral[900],
+ hovered: withOpacity(colors.neutral[0], 0.08),
+ active: withOpacity(colors.neutral[0], 0.12),
+ focused: colors.neutral[825],
+ },
+ ok: {
+ base: colors.green[600],
+ hovered: colors.green[600],
+ active: colors.green[600],
+ focused: colors.green[600],
+ },
+ error: {
+ base: colors.red[400],
+ hovered: colors.red[400],
+ active: colors.red[400],
+ focused: colors.red[400],
+ },
+ warning: {
+ base: colors.amber[300],
+ hovered: colors.amber[300],
+ active: colors.amber[300],
+ focused: colors.amber[300],
+ },
+ info: {
+ base: colors.blue[500],
+ hovered: colors.blue[500],
+ active: colors.blue[500],
+ focused: colors.blue[500],
+ },
};
const borderColor = {
- primary: colors.neutral[875],
- secondary: colors.neutral[775],
- muted: colors.neutral[675],
- focused: colors.neutral[500],
- active: colors.neutral[900],
- ok: colors.green[500],
- error: colors.red[500],
- warning: colors.amber[500],
- info: colors.blue[500],
+ primary: colors.neutral[875],
+ secondary: colors.neutral[775],
+ muted: colors.neutral[675],
+ focused: colors.neutral[500],
+ active: colors.neutral[900],
+ ok: colors.green[500],
+ error: colors.red[500],
+ warning: colors.amber[500],
+ info: colors.blue[500],
};
const textColor = {
- primary: colors.neutral[50],
- secondary: colors.neutral[350],
- muted: colors.neutral[450],
- placeholder: colors.neutral[650],
- active: colors.neutral[0],
- //TODO: (design) define feature and it's correct value
- feature: colors.sky[500],
- ok: colors.green[600],
- error: colors.red[400],
- warning: colors.amber[300],
- info: colors.blue[500],
+ primary: colors.neutral[50],
+ secondary: colors.neutral[350],
+ muted: colors.neutral[450],
+ placeholder: colors.neutral[650],
+ active: colors.neutral[0],
+ //TODO: (design) define feature and it's correct value
+ feature: colors.sky[500],
+ ok: colors.green[600],
+ error: colors.red[400],
+ warning: colors.amber[300],
+ info: colors.blue[500],
};
const iconColor = {
- primary: colors.neutral[200],
- secondary: colors.neutral[350],
- muted: colors.neutral[600],
- placeholder: colors.neutral[700],
- active: colors.neutral[0],
- //TODO: (design) define feature and it's correct value
- feature: colors.blue[500],
- ok: colors.green[600],
- error: colors.red[500],
- warning: colors.amber[400],
- info: colors.blue[600],
+ primary: colors.neutral[200],
+ secondary: colors.neutral[350],
+ muted: colors.neutral[600],
+ placeholder: colors.neutral[700],
+ active: colors.neutral[0],
+ //TODO: (design) define feature and it's correct value
+ feature: colors.blue[500],
+ ok: colors.green[600],
+ error: colors.red[500],
+ warning: colors.amber[400],
+ info: colors.blue[600],
};
const player = {
- 1: buildPlayer(colors.blue[500]),
- 2: buildPlayer(colors.lime[500]),
- 3: buildPlayer(colors.fuschia[500]),
- 4: buildPlayer(colors.orange[500]),
- 5: buildPlayer(colors.purple[500]),
- 6: buildPlayer(colors.teal[400]),
- 7: buildPlayer(colors.pink[400]),
- 8: buildPlayer(colors.yellow[400]),
+ 1: buildPlayer(colors.blue[500]),
+ 2: buildPlayer(colors.lime[500]),
+ 3: buildPlayer(colors.fuschia[500]),
+ 4: buildPlayer(colors.orange[500]),
+ 5: buildPlayer(colors.purple[500]),
+ 6: buildPlayer(colors.teal[400]),
+ 7: buildPlayer(colors.pink[400]),
+ 8: buildPlayer(colors.yellow[400]),
};
const editor = {
- background: backgroundColor[500].base,
- indent_guide: borderColor.muted,
- indent_guide_active: borderColor.secondary,
- line: {
- active: withOpacity(colors.neutral[0], 0.07),
- highlighted: withOpacity(colors.neutral[0], 0.12),
- inserted: backgroundColor.ok.active,
- deleted: backgroundColor.error.active,
- modified: backgroundColor.info.active,
- },
- highlight: {
- selection: player[1].selectionColor,
- occurrence: withOpacity(colors.neutral[0], 0.12),
- activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
- matchingBracket: backgroundColor[500].active,
- match: withOpacity(colors.sky[500], 0.16),
- activeMatch: withOpacity(colors.sky[800], 0.32),
- related: backgroundColor[500].focused,
- },
- gutter: {
- primary: textColor.placeholder,
- active: textColor.active,
- },
+ background: backgroundColor[500].base,
+ indent_guide: borderColor.muted,
+ indent_guide_active: borderColor.secondary,
+ line: {
+ active: withOpacity(colors.neutral[0], 0.07),
+ highlighted: withOpacity(colors.neutral[0], 0.12),
+ inserted: backgroundColor.ok.active,
+ deleted: backgroundColor.error.active,
+ modified: backgroundColor.info.active,
+ },
+ highlight: {
+ selection: player[1].selectionColor,
+ occurrence: withOpacity(colors.neutral[0], 0.12),
+ activeOccurrence: withOpacity(colors.neutral[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
+ matchingBracket: backgroundColor[500].active,
+ match: withOpacity(colors.sky[500], 0.16),
+ activeMatch: withOpacity(colors.sky[800], 0.32),
+ related: backgroundColor[500].focused,
+ },
+ gutter: {
+ primary: textColor.placeholder,
+ active: textColor.active,
+ },
};
const syntax: Syntax = {
- primary: {
- color: colors.neutral[150],
- weight: fontWeights.normal,
- },
- comment: {
- color: colors.neutral[300],
- weight: fontWeights.normal,
- },
- punctuation: {
- color: colors.neutral[200],
- weight: fontWeights.normal,
- },
- constant: {
- color: colors.neutral[150],
- weight: fontWeights.normal,
- },
- keyword: {
- color: colors.blue[400],
- weight: fontWeights.normal,
- },
- function: {
- color: colors.yellow[200],
- weight: fontWeights.normal,
- },
- type: {
- color: colors.teal[300],
- weight: fontWeights.normal,
- },
- variant: {
- color: colors.sky[300],
- weight: fontWeights.normal,
- },
- property: {
- color: colors.blue[400],
- weight: fontWeights.normal,
- },
- enum: {
- color: colors.orange[500],
- weight: fontWeights.normal,
- },
- operator: {
- color: colors.orange[500],
- weight: fontWeights.normal,
- },
- string: {
- color: colors.orange[300],
- weight: fontWeights.normal,
- },
- number: {
- color: colors.lime[300],
- weight: fontWeights.normal,
- },
- boolean: {
- color: colors.lime[300],
- weight: fontWeights.normal,
- },
- predictive: {
- color: textColor.muted,
- weight: fontWeights.normal,
- },
- title: {
- color: colors.amber[500],
- weight: fontWeights.bold,
- },
- emphasis: {
- color: textColor.active,
- weight: fontWeights.normal,
- },
- emphasisStrong: {
- color: textColor.active,
- weight: fontWeights.bold,
- },
- linkUrl: {
- color: colors.lime[500],
- weight: fontWeights.normal,
- // TODO: add underline
- },
- linkText: {
- color: colors.orange[500],
- weight: fontWeights.normal,
- // TODO: add italic
- },
+ primary: {
+ color: colors.neutral[150],
+ weight: fontWeights.normal,
+ },
+ comment: {
+ color: colors.neutral[300],
+ weight: fontWeights.normal,
+ },
+ punctuation: {
+ color: colors.neutral[200],
+ weight: fontWeights.normal,
+ },
+ constant: {
+ color: colors.neutral[150],
+ weight: fontWeights.normal,
+ },
+ keyword: {
+ color: colors.blue[400],
+ weight: fontWeights.normal,
+ },
+ function: {
+ color: colors.yellow[200],
+ weight: fontWeights.normal,
+ },
+ type: {
+ color: colors.teal[300],
+ weight: fontWeights.normal,
+ },
+ variant: {
+ color: colors.sky[300],
+ weight: fontWeights.normal,
+ },
+ property: {
+ color: colors.blue[400],
+ weight: fontWeights.normal,
+ },
+ enum: {
+ color: colors.orange[500],
+ weight: fontWeights.normal,
+ },
+ operator: {
+ color: colors.orange[500],
+ weight: fontWeights.normal,
+ },
+ string: {
+ color: colors.orange[300],
+ weight: fontWeights.normal,
+ },
+ number: {
+ color: colors.lime[300],
+ weight: fontWeights.normal,
+ },
+ boolean: {
+ color: colors.lime[300],
+ weight: fontWeights.normal,
+ },
+ predictive: {
+ color: textColor.muted,
+ weight: fontWeights.normal,
+ },
+ title: {
+ color: colors.amber[500],
+ weight: fontWeights.bold,
+ },
+ emphasis: {
+ color: textColor.active,
+ weight: fontWeights.normal,
+ },
+ emphasisStrong: {
+ color: textColor.active,
+ weight: fontWeights.bold,
+ },
+ linkUrl: {
+ color: colors.lime[500],
+ weight: fontWeights.normal,
+ // TODO: add underline
+ },
+ linkText: {
+ color: colors.orange[500],
+ weight: fontWeights.normal,
+ // TODO: add italic
+ },
};
const shadowAlpha: NumberToken = {
- value: 0.32,
- type: "number",
+ value: 0.32,
+ type: "number",
};
const theme: Theme = {
- name: "dark",
- backgroundColor,
- borderColor,
- textColor,
- iconColor,
- editor,
- syntax,
- player,
- shadowAlpha,
+ name: "dark",
+ backgroundColor,
+ borderColor,
+ textColor,
+ iconColor,
+ editor,
+ syntax,
+ player,
+ shadowAlpha,
};
export default theme;
@@ -3,225 +3,225 @@ import { withOpacity } from "../utils/color";
import Theme, { buildPlayer, Syntax } from "./theme";
const backgroundColor = {
- 100: {
- base: colors.neutral[75],
- hovered: colors.neutral[100],
- active: colors.neutral[150],
- focused: colors.neutral[100],
- },
- 300: {
- base: colors.neutral[25],
- hovered: colors.neutral[75],
- active: colors.neutral[125],
- focused: colors.neutral[75],
- },
- 500: {
- base: colors.neutral[0],
- hovered: withOpacity(colors.neutral[900], 0.03),
- active: withOpacity(colors.neutral[900], 0.06),
- focused: colors.neutral[50],
- },
- ok: {
- base: colors.green[100],
- hovered: colors.green[100],
- active: colors.green[100],
- focused: colors.green[100],
- },
- error: {
- base: colors.red[100],
- hovered: colors.red[100],
- active: colors.red[100],
- focused: colors.red[100],
- },
- warning: {
- base: colors.yellow[100],
- hovered: colors.yellow[100],
- active: colors.yellow[100],
- focused: colors.yellow[100],
- },
- info: {
- base: colors.blue[100],
- hovered: colors.blue[100],
- active: colors.blue[100],
- focused: colors.blue[100],
- },
+ 100: {
+ base: colors.neutral[75],
+ hovered: colors.neutral[100],
+ active: colors.neutral[150],
+ focused: colors.neutral[100],
+ },
+ 300: {
+ base: colors.neutral[25],
+ hovered: colors.neutral[75],
+ active: colors.neutral[125],
+ focused: colors.neutral[75],
+ },
+ 500: {
+ base: colors.neutral[0],
+ hovered: withOpacity(colors.neutral[900], 0.03),
+ active: withOpacity(colors.neutral[900], 0.06),
+ focused: colors.neutral[50],
+ },
+ ok: {
+ base: colors.green[100],
+ hovered: colors.green[100],
+ active: colors.green[100],
+ focused: colors.green[100],
+ },
+ error: {
+ base: colors.red[100],
+ hovered: colors.red[100],
+ active: colors.red[100],
+ focused: colors.red[100],
+ },
+ warning: {
+ base: colors.yellow[100],
+ hovered: colors.yellow[100],
+ active: colors.yellow[100],
+ focused: colors.yellow[100],
+ },
+ info: {
+ base: colors.blue[100],
+ hovered: colors.blue[100],
+ active: colors.blue[100],
+ focused: colors.blue[100],
+ },
};
const borderColor = {
- primary: colors.neutral[150],
- secondary: colors.neutral[150],
- muted: colors.neutral[100],
- focused: colors.neutral[100],
- active: colors.neutral[250],
- ok: colors.green[200],
- error: colors.red[200],
- warning: colors.yellow[200],
- info: colors.blue[200],
+ primary: colors.neutral[150],
+ secondary: colors.neutral[150],
+ muted: colors.neutral[100],
+ focused: colors.neutral[100],
+ active: colors.neutral[250],
+ ok: colors.green[200],
+ error: colors.red[200],
+ warning: colors.yellow[200],
+ info: colors.blue[200],
};
const textColor = {
- primary: colors.neutral[750],
- secondary: colors.neutral[650],
- muted: colors.neutral[550],
- placeholder: colors.neutral[450],
- active: colors.neutral[900],
- feature: colors.indigo[600],
- ok: colors.green[500],
- error: colors.red[500],
- warning: colors.yellow[500],
- info: colors.blue[500],
+ primary: colors.neutral[750],
+ secondary: colors.neutral[650],
+ muted: colors.neutral[550],
+ placeholder: colors.neutral[450],
+ active: colors.neutral[900],
+ feature: colors.indigo[600],
+ ok: colors.green[500],
+ error: colors.red[500],
+ warning: colors.yellow[500],
+ info: colors.blue[500],
};
const iconColor = {
- primary: colors.neutral[700],
- secondary: colors.neutral[500],
- muted: colors.neutral[350],
- placeholder: colors.neutral[300],
- active: colors.neutral[900],
- feature: colors.indigo[500],
- ok: colors.green[600],
- error: colors.red[600],
- warning: colors.yellow[400],
- info: colors.blue[600],
+ primary: colors.neutral[700],
+ secondary: colors.neutral[500],
+ muted: colors.neutral[350],
+ placeholder: colors.neutral[300],
+ active: colors.neutral[900],
+ feature: colors.indigo[500],
+ ok: colors.green[600],
+ error: colors.red[600],
+ warning: colors.yellow[400],
+ info: colors.blue[600],
};
const player = {
- 1: buildPlayer(colors.blue[500]),
- 2: buildPlayer(colors.emerald[400]),
- 3: buildPlayer(colors.fuschia[400]),
- 4: buildPlayer(colors.orange[400]),
- 5: buildPlayer(colors.purple[400]),
- 6: buildPlayer(colors.teal[400]),
- 7: buildPlayer(colors.pink[400]),
- 8: buildPlayer(colors.yellow[400]),
+ 1: buildPlayer(colors.blue[500]),
+ 2: buildPlayer(colors.emerald[400]),
+ 3: buildPlayer(colors.fuschia[400]),
+ 4: buildPlayer(colors.orange[400]),
+ 5: buildPlayer(colors.purple[400]),
+ 6: buildPlayer(colors.teal[400]),
+ 7: buildPlayer(colors.pink[400]),
+ 8: buildPlayer(colors.yellow[400]),
};
const editor = {
- background: backgroundColor[500].base,
- indent_guide: borderColor.muted,
- indent_guide_active: borderColor.secondary,
- line: {
- active: withOpacity(colors.neutral[900], 0.06),
- highlighted: withOpacity(colors.neutral[900], 0.12),
- inserted: backgroundColor.ok.active,
- deleted: backgroundColor.error.active,
- modified: backgroundColor.info.active,
- },
- highlight: {
- selection: player[1].selectionColor,
- occurrence: withOpacity(colors.neutral[900], 0.06),
- activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side
- matchingBracket: colors.neutral[0],
- match: withOpacity(colors.red[500], 0.2),
- activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side
- related: colors.neutral[0],
- },
- gutter: {
- primary: colors.neutral[300],
- active: textColor.active,
- },
+ background: backgroundColor[500].base,
+ indent_guide: borderColor.muted,
+ indent_guide_active: borderColor.secondary,
+ line: {
+ active: withOpacity(colors.neutral[900], 0.06),
+ highlighted: withOpacity(colors.neutral[900], 0.12),
+ inserted: backgroundColor.ok.active,
+ deleted: backgroundColor.error.active,
+ modified: backgroundColor.info.active,
+ },
+ highlight: {
+ selection: player[1].selectionColor,
+ occurrence: withOpacity(colors.neutral[900], 0.06),
+ activeOccurrence: withOpacity(colors.neutral[900], 0.16), // TODO: This is not hooked up to occurences on the rust side
+ matchingBracket: colors.neutral[0],
+ match: withOpacity(colors.red[500], 0.2),
+ activeMatch: withOpacity(colors.indigo[400], 0.36), // TODO: This is not hooked up to occurences on the rust side
+ related: colors.neutral[0],
+ },
+ gutter: {
+ primary: colors.neutral[300],
+ active: textColor.active,
+ },
};
const syntax: Syntax = {
- primary: {
- color: colors.neutral[800],
- weight: fontWeights.normal,
- },
- comment: {
- color: colors.neutral[500],
- weight: fontWeights.normal,
- },
- punctuation: {
- color: colors.neutral[600],
- weight: fontWeights.normal,
- },
- constant: {
- color: colors.neutral[800],
- weight: fontWeights.normal,
- },
- keyword: {
- color: colors.indigo[700],
- weight: fontWeights.normal,
- },
- function: {
- color: colors.orange[600],
- weight: fontWeights.normal,
- },
- type: {
- color: colors.yellow[600],
- weight: fontWeights.normal,
- },
- variant: {
- color: colors.rose[700],
- weight: fontWeights.normal,
- },
- property: {
- color: colors.emerald[700],
- weight: fontWeights.normal,
- },
- enum: {
- color: colors.red[500],
- weight: fontWeights.normal,
- },
- operator: {
- color: colors.red[500],
- weight: fontWeights.normal,
- },
- string: {
- color: colors.red[500],
- weight: fontWeights.normal,
- },
- number: {
- color: colors.indigo[500],
- weight: fontWeights.normal,
- },
- boolean: {
- color: colors.red[500],
- weight: fontWeights.normal,
- },
- predictive: {
- color: textColor.placeholder,
- weight: fontWeights.normal,
- },
- title: {
- color: colors.sky[500],
- weight: fontWeights.bold,
- },
- emphasis: {
- color: textColor.active,
- weight: fontWeights.normal,
- },
- emphasisStrong: {
- color: textColor.active,
- weight: fontWeights.bold,
- },
- linkUrl: {
- color: colors.lime[500],
- weight: fontWeights.normal,
- // TODO: add underline
- },
- linkText: {
- color: colors.red[500],
- weight: fontWeights.normal,
- // TODO: add italic
- },
+ primary: {
+ color: colors.neutral[800],
+ weight: fontWeights.normal,
+ },
+ comment: {
+ color: colors.neutral[500],
+ weight: fontWeights.normal,
+ },
+ punctuation: {
+ color: colors.neutral[600],
+ weight: fontWeights.normal,
+ },
+ constant: {
+ color: colors.neutral[800],
+ weight: fontWeights.normal,
+ },
+ keyword: {
+ color: colors.indigo[700],
+ weight: fontWeights.normal,
+ },
+ function: {
+ color: colors.orange[600],
+ weight: fontWeights.normal,
+ },
+ type: {
+ color: colors.yellow[600],
+ weight: fontWeights.normal,
+ },
+ variant: {
+ color: colors.rose[700],
+ weight: fontWeights.normal,
+ },
+ property: {
+ color: colors.emerald[700],
+ weight: fontWeights.normal,
+ },
+ enum: {
+ color: colors.red[500],
+ weight: fontWeights.normal,
+ },
+ operator: {
+ color: colors.red[500],
+ weight: fontWeights.normal,
+ },
+ string: {
+ color: colors.red[500],
+ weight: fontWeights.normal,
+ },
+ number: {
+ color: colors.indigo[500],
+ weight: fontWeights.normal,
+ },
+ boolean: {
+ color: colors.red[500],
+ weight: fontWeights.normal,
+ },
+ predictive: {
+ color: textColor.placeholder,
+ weight: fontWeights.normal,
+ },
+ title: {
+ color: colors.sky[500],
+ weight: fontWeights.bold,
+ },
+ emphasis: {
+ color: textColor.active,
+ weight: fontWeights.normal,
+ },
+ emphasisStrong: {
+ color: textColor.active,
+ weight: fontWeights.bold,
+ },
+ linkUrl: {
+ color: colors.lime[500],
+ weight: fontWeights.normal,
+ // TODO: add underline
+ },
+ linkText: {
+ color: colors.red[500],
+ weight: fontWeights.normal,
+ // TODO: add italic
+ },
};
const shadowAlpha: NumberToken = {
- value: 0.12,
- type: "number",
+ value: 0.12,
+ type: "number",
};
const theme: Theme = {
- name: "light",
- backgroundColor,
- borderColor,
- textColor,
- iconColor,
- editor,
- syntax,
- player,
- shadowAlpha,
+ name: "light",
+ backgroundColor,
+ borderColor,
+ textColor,
+ iconColor,
+ editor,
+ syntax,
+ player,
+ shadowAlpha,
};
export default theme;
@@ -2,144 +2,144 @@ import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
import { withOpacity } from "../utils/color";
export interface SyntaxHighlightStyle {
- color: ColorToken;
- weight: FontWeightToken;
+ color: ColorToken;
+ weight: FontWeightToken;
}
export interface Player {
- baseColor: ColorToken;
- cursorColor: ColorToken;
- selectionColor: ColorToken;
- borderColor: ColorToken;
+ baseColor: ColorToken;
+ cursorColor: ColorToken;
+ selectionColor: ColorToken;
+ borderColor: ColorToken;
}
export function buildPlayer(
- color: ColorToken,
- cursorOpacity?: number,
- selectionOpacity?: number,
- borderOpacity?: number
+ color: ColorToken,
+ cursorOpacity?: number,
+ selectionOpacity?: number,
+ borderOpacity?: number
) {
- return {
- baseColor: color,
- cursorColor: withOpacity(color, cursorOpacity || 1.0),
- selectionColor: withOpacity(color, selectionOpacity || 0.24),
- borderColor: withOpacity(color, borderOpacity || 0.8),
- }
+ return {
+ baseColor: color,
+ cursorColor: withOpacity(color, cursorOpacity || 1.0),
+ selectionColor: withOpacity(color, selectionOpacity || 0.24),
+ borderColor: withOpacity(color, borderOpacity || 0.8),
+ }
}
export interface BackgroundColorSet {
- base: ColorToken;
- hovered: ColorToken;
- active: ColorToken;
- focused: ColorToken;
+ base: ColorToken;
+ hovered: ColorToken;
+ active: ColorToken;
+ focused: ColorToken;
}
export interface Syntax {
- primary: SyntaxHighlightStyle;
- comment: SyntaxHighlightStyle;
- punctuation: SyntaxHighlightStyle;
- constant: SyntaxHighlightStyle;
- keyword: SyntaxHighlightStyle;
- function: SyntaxHighlightStyle;
- type: SyntaxHighlightStyle;
- variant: SyntaxHighlightStyle;
- property: SyntaxHighlightStyle;
- enum: SyntaxHighlightStyle;
- operator: SyntaxHighlightStyle;
- string: SyntaxHighlightStyle;
- number: SyntaxHighlightStyle;
- boolean: SyntaxHighlightStyle;
- predictive: SyntaxHighlightStyle;
- // TODO: Either move the following or rename
- title: SyntaxHighlightStyle;
- emphasis: SyntaxHighlightStyle;
- emphasisStrong: SyntaxHighlightStyle;
- linkUrl: SyntaxHighlightStyle;
- linkText: SyntaxHighlightStyle;
+ primary: SyntaxHighlightStyle;
+ comment: SyntaxHighlightStyle;
+ punctuation: SyntaxHighlightStyle;
+ constant: SyntaxHighlightStyle;
+ keyword: SyntaxHighlightStyle;
+ function: SyntaxHighlightStyle;
+ type: SyntaxHighlightStyle;
+ variant: SyntaxHighlightStyle;
+ property: SyntaxHighlightStyle;
+ enum: SyntaxHighlightStyle;
+ operator: SyntaxHighlightStyle;
+ string: SyntaxHighlightStyle;
+ number: SyntaxHighlightStyle;
+ boolean: SyntaxHighlightStyle;
+ predictive: SyntaxHighlightStyle;
+ // TODO: Either move the following or rename
+ title: SyntaxHighlightStyle;
+ emphasis: SyntaxHighlightStyle;
+ emphasisStrong: SyntaxHighlightStyle;
+ linkUrl: SyntaxHighlightStyle;
+ linkText: SyntaxHighlightStyle;
};
export default interface Theme {
- name: string;
- backgroundColor: {
- 100: BackgroundColorSet;
- 300: BackgroundColorSet;
- 500: BackgroundColorSet;
- ok: BackgroundColorSet;
- error: BackgroundColorSet;
- warning: BackgroundColorSet;
- info: BackgroundColorSet;
- };
- 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;
+ name: string;
+ backgroundColor: {
+ 100: BackgroundColorSet;
+ 300: BackgroundColorSet;
+ 500: BackgroundColorSet;
+ ok: BackgroundColorSet;
+ error: BackgroundColorSet;
+ warning: BackgroundColorSet;
+ info: BackgroundColorSet;
+ };
+ borderColor: {
+ primary: ColorToken;
+ secondary: ColorToken;
+ muted: ColorToken;
+ focused: ColorToken;
+ active: ColorToken;
+ ok: ColorToken;
+ error: ColorToken;
+ warning: ColorToken;
+ info: ColorToken;
+ };
+ textColor: {
+ primary: ColorToken;
+ secondary: ColorToken;
+ muted: ColorToken;
+ placeholder: ColorToken;
+ active: ColorToken;
+ feature: ColorToken;
+ ok: ColorToken;
+ error: ColorToken;
+ warning: ColorToken;
+ info: ColorToken;
+ };
+ iconColor: {
+ primary: ColorToken;
+ secondary: ColorToken;
+ muted: ColorToken;
+ placeholder: ColorToken;
+ active: ColorToken;
+ feature: ColorToken;
+ ok: ColorToken;
+ error: ColorToken;
+ warning: ColorToken;
+ info: ColorToken;
+ };
+ editor: {
+ background: ColorToken;
+ indent_guide: ColorToken;
+ indent_guide_active: ColorToken;
+ line: {
+ active: ColorToken;
+ highlighted: ColorToken;
+ inserted: ColorToken;
+ deleted: ColorToken;
+ modified: ColorToken;
};
- iconColor: {
- primary: ColorToken;
- secondary: ColorToken;
- muted: ColorToken;
- placeholder: ColorToken;
- active: ColorToken;
- feature: ColorToken;
- ok: ColorToken;
- error: ColorToken;
- warning: ColorToken;
- info: ColorToken;
+ highlight: {
+ selection: ColorToken;
+ occurrence: ColorToken;
+ activeOccurrence: ColorToken;
+ matchingBracket: ColorToken;
+ match: ColorToken;
+ activeMatch: ColorToken;
+ related: ColorToken;
};
- editor: {
- background: ColorToken;
- indent_guide: ColorToken;
- indent_guide_active: ColorToken;
- line: {
- active: ColorToken;
- highlighted: ColorToken;
- inserted: ColorToken;
- deleted: ColorToken;
- modified: ColorToken;
- };
- highlight: {
- selection: ColorToken;
- occurrence: ColorToken;
- activeOccurrence: ColorToken;
- matchingBracket: ColorToken;
- match: ColorToken;
- activeMatch: ColorToken;
- related: ColorToken;
- };
- gutter: {
- primary: ColorToken;
- active: ColorToken;
- };
+ gutter: {
+ primary: ColorToken;
+ active: ColorToken;
};
+ };
- syntax: Syntax,
+ syntax: Syntax,
- player: {
- 1: Player;
- 2: Player;
- 3: Player;
- 4: Player;
- 5: Player;
- 6: Player;
- 7: Player;
- 8: Player;
- };
- shadowAlpha: NumberToken;
+ player: {
+ 1: Player;
+ 2: Player;
+ 3: Player;
+ 4: Player;
+ 5: Player;
+ 6: Player;
+ 7: Player;
+ 8: Player;
+ };
+ shadowAlpha: NumberToken;
}
@@ -36,7 +36,7 @@ export const fontSizes = {
xl: fontSize(20),
};
-export type FontWeight =
+export type FontWeight =
| "thin"
| "extra_light"
| "light"
@@ -4,49 +4,49 @@ import { ColorToken } from "../tokens";
export type Color = string;
export type ColorRampStep = { value: Color; type: "color"; step: number };
export type ColorRamp = {
- [index: number]: ColorRampStep;
+ [index: number]: ColorRampStep;
};
export function colorRamp(
- color: Color | [Color, Color],
- options?: { steps?: number; increment?: number; }
+ 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]);
- }
+ 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;
+ 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",
- };
- });
+ scale.colors(steps, "hex").forEach((color, ix) => {
+ const step = ix * increment;
+ ramp[step] = {
+ value: color,
+ step,
+ type: "color",
+ };
+ });
- return ramp;
+ return ramp;
}
export function withOpacity(color: ColorToken, opacity: number): ColorToken {
- return {
- ...color,
- value: chroma(color.value).alpha(opacity).hex()
- };
+ return {
+ ...color,
+ value: chroma(color.value).alpha(opacity).hex()
+ };
}
@@ -4,32 +4,32 @@ import { snakeCase } from "case-anything";
// 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;
+ 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]>
+ [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;
+ 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);
- }
+ if (typeof value === "object") {
+ if (Array.isArray(value)) {
+ return value.map(snakeCaseValue);
} else {
- return value;
+ return snakeCaseTree(value);
}
+ } else {
+ return value;
+ }
}