This commit is contained in:
Nate Butler 2022-04-01 23:58:04 -04:00
parent f633e98081
commit ffc271e100
11 changed files with 576 additions and 562 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,8 +1,8 @@
import * as fs from "fs";
import * as path from "path";
import app from "./styleTree/app";
import dark from "./themes/dark";
import light from "./themes/light";
import app from "./styleTree/app";
import decamelizeTree from "./utils/decamelizeTree";
const themes = [dark, light];

View File

@ -31,7 +31,7 @@ export default function chatPanel(theme: Theme) {
const message = {
body: text(theme, "sans", "secondary"),
timestamp: text(theme, "sans", "muted"),
timestamp: text(theme, "sans", "muted", { size: "sm" }),
padding: {
bottom: 6,
},
@ -91,12 +91,12 @@ export default function chatPanel(theme: Theme) {
},
},
inputEditor: {
background: backgroundColor(theme, 300),
background: backgroundColor(theme, 500),
cornerRadius: 6,
text: text(theme, "mono", "primary"),
placeholderText: text(theme, "mono", "muted"),
placeholderText: text(theme, "mono", "placeholder", { size: "sm" }),
selection: player(theme, 1).selection,
border: border(theme, "primary"),
border: border(theme, "secondary"),
padding: {
bottom: 7,
left: 8,

View File

@ -5,7 +5,7 @@ import {
iconColor,
player,
text,
TextColor,
TextColor
} from "./components";
export default function editor(theme: Theme) {
@ -39,7 +39,7 @@ export default function editor(theme: Theme) {
return {
textColor: theme.textColor.secondary.value,
background: backgroundColor(theme, 300),
background: backgroundColor(theme, 500),
activeLineBackground: theme.editor.line.active.value,
codeActionsIndicator: iconColor(theme, "secondary"),
diffBackgroundDeleted: backgroundColor(theme, "error"),
@ -47,7 +47,7 @@ export default function editor(theme: Theme) {
documentHighlightReadBackground: theme.editor.highlight.occurrence.value,
documentHighlightWriteBackground: theme.editor.highlight.occurrence.value,
errorColor: theme.textColor.error.value,
gutterBackground: backgroundColor(theme, 300),
gutterBackground: backgroundColor(theme, 500),
gutterPaddingFactor: 2.5,
highlightedLineBackground: theme.editor.line.highlighted.value,
lineNumber: theme.editor.gutter.primary.value,
@ -65,14 +65,14 @@ export default function editor(theme: Theme) {
player(theme, 8).selection,
],
autocomplete: {
background: backgroundColor(theme, 100),
background: backgroundColor(theme, 500),
cornerRadius: 6,
padding: 6,
border: border(theme, "secondary"),
item: autocompleteItem,
hoveredItem: {
...autocompleteItem,
background: backgroundColor(theme, 100, "hovered"),
background: backgroundColor(theme, 500, "hovered"),
},
margin: {
left: -14,
@ -83,11 +83,11 @@ export default function editor(theme: Theme) {
},
selectedItem: {
...autocompleteItem,
background: backgroundColor(theme, 100, "active"),
background: backgroundColor(theme, 500, "active"),
},
},
diagnosticHeader: {
background: theme.editor.background.value,
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", {

View File

@ -1,7 +1,7 @@
import { panel } from "./app";
import { backgroundColor, iconColor, text, TextColor } from "./components";
import Theme from "../themes/theme";
import { Color } from "../utils/color";
import { panel } from "./app";
import { backgroundColor, iconColor, text, TextColor } from "./components";
export default function projectPanel(theme: Theme) {
function entry(theme: Theme, textColor: TextColor, background?: Color) {
@ -11,7 +11,7 @@ export default function projectPanel(theme: Theme) {
iconColor: iconColor(theme, "muted"),
iconSize: 8,
iconSpacing: 8,
text: text(theme, "mono", textColor),
text: text(theme, "mono", textColor, { size: "sm" }),
};
}
@ -31,6 +31,7 @@ export default function projectPanel(theme: Theme) {
),
padding: {
top: 6,
left: 12,
},
};
}

View File

@ -12,14 +12,15 @@ export default function workspace(theme: Theme) {
};
const tab = {
height: 34,
height: 32,
background: backgroundColor(theme, 300),
iconClose: iconColor(theme, "secondary"),
iconCloseActive: iconColor(theme, "active"),
iconConflict: iconColor(theme, "warning"),
iconDirty: iconColor(theme, "info"),
iconWidth: 8,
spacing: 10,
text: text(theme, "mono", "secondary"),
text: text(theme, "mono", "secondary", { size: "sm" }),
border: border(theme, "primary", {
left: true,
bottom: true,
@ -33,8 +34,8 @@ export default function workspace(theme: Theme) {
const activeTab = {
...tab,
background: backgroundColor(theme, 300),
text: text(theme, "mono", "primary"),
background: backgroundColor(theme, 500),
text: text(theme, "mono", "active", { size: "sm" }),
border: {
...tab.border,
bottom: false,
@ -48,11 +49,12 @@ export default function workspace(theme: Theme) {
};
const sidebar = {
width: 30,
background: backgroundColor(theme, 300),
border: border(theme, "primary", { right: true }),
item: sidebarItem,
activeItem: {
...sidebarItem,
iconColor: iconColor(theme, "primary"),
iconColor: iconColor(theme, "active"),
},
resizeHandle: {
background: border(theme, "primary").color,
@ -63,7 +65,7 @@ export default function workspace(theme: Theme) {
};
return {
background: backgroundColor(theme, 500),
background: backgroundColor(theme, 300),
leaderBorderOpacity: 0.7,
leaderBorderWidth: 2.0,
tab,
@ -94,6 +96,7 @@ export default function workspace(theme: Theme) {
titlebar: {
avatarWidth: 18,
height: 32,
background: backgroundColor(theme, 100),
shareIconColor: iconColor(theme, "secondary"),
shareIconActiveColor: iconColor(theme, "active"),
title: text(theme, "sans", "primary"),
@ -107,29 +110,32 @@ export default function workspace(theme: Theme) {
avatarRibbon: {
height: 3,
width: 12,
// TODO: The background for this ideally should be
// set with a token, not hardcoded in rust
},
border: border(theme, "primary", { bottom: true }),
signInPrompt,
hoveredSignInPrompt: {
...signInPrompt,
...text(theme, "mono", "active"),
size: 13,
},
offlineIcon: {
color: iconColor(theme, "muted"),
color: iconColor(theme, "secondary"),
width: 16,
padding: {
right: 4,
},
},
outdatedWarning: {
...text(theme, "sans", "muted"),
...text(theme, "sans", "warning"),
size: 13,
},
},
toolbar: {
height: 34,
background: backgroundColor(theme, 300),
border: border(theme, "primary", { bottom: true }),
background: backgroundColor(theme, 500),
border: border(theme, "muted", { bottom: true }),
itemSpacing: 8,
padding: { left: 16, right: 8, top: 4, bottom: 4 },
},
@ -138,8 +144,7 @@ export default function workspace(theme: Theme) {
padding: { left: 6 },
},
disconnectedOverlay: {
...text(theme, "sans", "primary"),
color: "#ffffff",
...text(theme, "sans", "active"),
background: "#000000aa",
},
};

View File

@ -3,10 +3,10 @@ import Theme, { Syntax } from "./theme";
const backgroundColor = {
100: {
base: colors.neutral[750],
hovered: colors.neutral[750],
active: colors.neutral[750],
focused: colors.neutral[750],
base: colors.neutral[700],
hovered: colors.neutral[700],
active: colors.neutral[700],
focused: colors.neutral[700],
},
300: {
base: colors.neutral[800],
@ -52,10 +52,10 @@ const borderColor = {
muted: colors.neutral[750],
focused: colors.neutral[100],
active: colors.neutral[500],
ok: colors.neutral[1000],
error: colors.neutral[1000],
warning: colors.neutral[1000],
info: colors.neutral[1000],
ok: colors.green[500],
error: colors.red[500],
warning: colors.amber[500],
info: colors.blue[500],
};
const textColor = {
@ -65,7 +65,7 @@ const textColor = {
placeholder: colors.neutral[750],
active: colors.neutral[0],
//TODO: (design) define feature and it's correct value
feature: colors.sky[500],
feature: colors.lime[400],
ok: colors.green[600],
error: colors.red[400],
warning: colors.amber[300],
@ -81,9 +81,9 @@ const iconColor = {
//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],
error: colors.red[500],
warning: colors.amber[400],
info: colors.blue[600],
};
const player = {

View File

@ -5,73 +5,72 @@ import Theme, { Syntax } from "./theme";
const backgroundColor = {
100: {
base: colors.neutral[750],
hovered: colors.neutral[750],
active: colors.neutral[750],
focused: colors.neutral[750],
base: colors.neutral[100],
hovered: colors.neutral[150],
active: colors.neutral[200],
focused: colors.neutral[150],
},
300: {
base: colors.neutral[800],
hovered: colors.neutral[800],
active: colors.neutral[800],
focused: colors.neutral[800],
base: colors.neutral[50],
hovered: colors.neutral[100],
active: colors.neutral[150],
focused: colors.neutral[100],
},
500: {
base: colors.neutral[900],
hovered: colors.neutral[900],
active: colors.neutral[900],
focused: colors.neutral[900],
base: colors.neutral[0],
hovered: colors.neutral[50],
active: colors.neutral[100],
focused: colors.neutral[50],
},
ok: {
base: colors.green[600],
hovered: colors.green[600],
active: colors.green[600],
focused: colors.green[600],
base: colors.green[100],
hovered: colors.green[100],
active: colors.green[100],
focused: colors.green[100],
},
error: {
base: colors.red[400],
hovered: colors.red[400],
active: colors.red[400],
focused: colors.red[400],
base: colors.red[100],
hovered: colors.red[100],
active: colors.red[100],
focused: colors.red[100],
},
warning: {
base: colors.amber[300],
hovered: colors.amber[300],
active: colors.amber[300],
focused: colors.amber[300],
base: colors.yellow[100],
hovered: colors.yellow[100],
active: colors.yellow[100],
focused: colors.yellow[100],
},
info: {
base: colors.blue[500],
hovered: colors.blue[500],
active: colors.blue[500],
focused: colors.blue[500],
base: colors.blue[100],
hovered: colors.blue[100],
active: colors.blue[100],
focused: colors.blue[100],
},
};
const borderColor = {
primary: colors.neutral[850],
secondary: colors.neutral[700],
muted: colors.neutral[750],
primary: colors.neutral[200],
secondary: colors.neutral[100],
muted: colors.neutral[50],
focused: colors.neutral[100],
active: colors.neutral[500],
ok: colors.neutral[1000],
error: colors.neutral[1000],
warning: colors.neutral[1000],
info: colors.neutral[1000],
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[150],
secondary: colors.neutral[350],
muted: colors.neutral[550],
placeholder: colors.neutral[750],
active: colors.neutral[0],
//TODO: (design) define feature and it's correct value
feature: colors.sky[500],
ok: colors.green[600],
error: colors.red[400],
warning: colors.amber[300],
info: colors.blue[500],
primary: colors.neutral[800],
secondary: colors.neutral[700],
muted: colors.neutral[600],
placeholder: colors.neutral[500],
active: colors.neutral[900],
feature: colors.blue[600],
ok: colors.green[800],
error: colors.red[800],
warning: colors.yellow[800],
info: colors.blue[800],
};
const iconColor = {
@ -79,63 +78,62 @@ const iconColor = {
secondary: colors.neutral[500],
muted: colors.neutral[600],
placeholder: colors.neutral[700],
active: colors.neutral[50],
//TODO: (design) define feature and it's correct value
feature: colors.sky[500],
active: colors.neutral[900],
feature: colors.sky[600],
ok: colors.green[600],
error: colors.red[400],
warning: colors.amber[300],
info: colors.blue[500],
error: colors.red[600],
warning: colors.yellow[400],
info: colors.blue[600],
};
const player = {
1: {
baseColor: colors.blue[600],
cursorColor: colors.blue[600],
selectionColor: colors.blue[600],
borderColor: colors.blue[600],
baseColor: colors.blue[600],
cursorColor: colors.blue[500],
selectionColor: colors.blue[100],
borderColor: colors.blue[500],
},
2: {
baseColor: colors.indigo[500],
cursorColor: colors.indigo[500],
selectionColor: colors.indigo[500],
borderColor: colors.indigo[500],
baseColor: colors.indigo[500],
cursorColor: colors.indigo[500],
selectionColor: colors.indigo[100],
borderColor: colors.indigo[500],
},
3: {
baseColor: colors.green[500],
cursorColor: colors.green[500],
selectionColor: colors.green[500],
borderColor: colors.green[500],
baseColor: colors.green[500],
cursorColor: colors.green[500],
selectionColor: colors.green[100],
borderColor: colors.green[500],
},
4: {
baseColor: colors.orange[500],
cursorColor: colors.orange[500],
selectionColor: colors.orange[500],
borderColor: colors.orange[500],
baseColor: colors.orange[500],
cursorColor: colors.orange[500],
selectionColor: colors.orange[100],
borderColor: colors.orange[500],
},
5: {
baseColor: colors.purple[500],
cursorColor: colors.purple[500],
selectionColor: colors.purple[500],
borderColor: colors.purple[500],
baseColor: colors.purple[500],
cursorColor: colors.purple[500],
selectionColor: colors.purple[100],
borderColor: colors.purple[500],
},
6: {
baseColor: colors.teal[400],
cursorColor: colors.teal[400],
selectionColor: colors.teal[400],
borderColor: colors.teal[400],
baseColor: colors.teal[400],
cursorColor: colors.teal[400],
selectionColor: colors.teal[100],
borderColor: colors.teal[400],
},
7: {
baseColor: colors.pink[400],
cursorColor: colors.pink[400],
selectionColor: colors.pink[400],
borderColor: colors.pink[400],
baseColor: colors.pink[400],
cursorColor: colors.pink[400],
selectionColor: colors.pink[100],
borderColor: colors.pink[400],
},
8: {
baseColor: colors.yellow[400],
cursorColor: colors.yellow[400],
selectionColor: colors.yellow[400],
borderColor: colors.yellow[400],
baseColor: colors.yellow[400],
cursorColor: colors.yellow[400],
selectionColor: colors.yellow[100],
borderColor: colors.yellow[400],
},
};
@ -145,118 +143,118 @@ const editor = {
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: colors.neutral[0],
highlighted: colors.neutral[0],
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
active: colors.neutral[0],
highlighted: colors.neutral[0],
inserted: backgroundColor.ok.active,
deleted: backgroundColor.error.active,
modified: backgroundColor.info.active,
},
highlight: {
selection: player[1].selectionColor,
occurrence: backgroundColor[500].active,
activeOccurrence: colors.neutral[0],
matchingBracket: colors.neutral[0],
match: colors.neutral[0],
activeMatch: colors.neutral[0],
related: colors.neutral[0],
selection: player[1].selectionColor,
occurrence: backgroundColor[500].active,
activeOccurrence: colors.neutral[0],
matchingBracket: colors.neutral[0],
match: colors.neutral[0],
activeMatch: colors.neutral[0],
related: colors.neutral[0],
},
gutter: {
primary: colors.neutral[0],
active: colors.neutral[0],
primary: colors.neutral[0],
active: colors.neutral[0],
},
};
const syntax: Syntax = {
primary: {
color: textColor.primary,
weight: fontWeights.normal,
color: textColor.primary,
weight: fontWeights.normal,
},
comment: {
color: colors.lime[200],
weight: fontWeights.normal,
color: colors.lime[200],
weight: fontWeights.normal,
},
punctuation: {
color: textColor.primary,
weight: fontWeights.normal,
color: textColor.primary,
weight: fontWeights.normal,
},
constant: {
color: colors.neutral[150],
weight: fontWeights.normal,
color: colors.neutral[150],
weight: fontWeights.normal,
},
keyword: {
color: colors.sky[400],
weight: fontWeights.normal,
color: colors.sky[400],
weight: fontWeights.normal,
},
function: {
color: colors.yellow[200],
weight: fontWeights.normal,
color: colors.yellow[200],
weight: fontWeights.normal,
},
type: {
color: colors.teal[300],
weight: fontWeights.normal,
color: colors.teal[300],
weight: fontWeights.normal,
},
variant: {
color: colors.teal[300],
weight: fontWeights.normal,
color: colors.teal[300],
weight: fontWeights.normal,
},
property: {
color: colors.sky[300],
weight: fontWeights.normal,
color: colors.sky[300],
weight: fontWeights.normal,
},
enum: {
color: colors.sky[400],
weight: fontWeights.normal,
color: colors.sky[400],
weight: fontWeights.normal,
},
operator: {
color: colors.sky[400],
weight: fontWeights.normal,
color: colors.sky[400],
weight: fontWeights.normal,
},
string: {
color: colors.orange[300],
weight: fontWeights.normal,
color: colors.orange[300],
weight: fontWeights.normal,
},
number: {
color: colors.neutral[150],
weight: fontWeights.normal,
color: colors.neutral[150],
weight: fontWeights.normal,
},
boolean: {
color: colors.neutral[150],
weight: fontWeights.normal,
color: colors.neutral[150],
weight: fontWeights.normal,
},
predictive: {
color: textColor.muted,
weight: fontWeights.normal,
color: textColor.muted,
weight: fontWeights.normal,
},
title: {
color: colors.sky[500],
weight: fontWeights.bold,
color: colors.sky[500],
weight: fontWeights.bold,
},
emphasis: {
color: textColor.active,
weight: fontWeights.normal,
color: textColor.active,
weight: fontWeights.normal,
},
emphasisStrong: {
color: textColor.active,
weight: fontWeights.bold,
color: textColor.active,
weight: fontWeights.bold,
},
linkUrl: {
color: colors.lime[500],
weight: fontWeights.normal,
// TODO: add underline
color: colors.lime[500],
weight: fontWeights.normal,
// TODO: add underline
},
linkText: {
color: colors.orange[500],
weight: fontWeights.normal,
// TODO: add italic
color: colors.orange[500],
weight: fontWeights.normal,
// TODO: add italic
},
listMarker: {
color: colors.sky[400],
weight: fontWeights.normal,
}
color: colors.sky[400],
weight: fontWeights.normal,
},
};
const shadowAlpha: NumberToken = {
value: 0.32,
value: 0.12,
type: "number",
};

View File

@ -1,4 +1,4 @@
import { FontWeightToken, ColorToken, NumberToken } from "../tokens";
import { ColorToken, FontWeightToken, NumberToken } from "../tokens";
export interface SyntaxHighlightStyle {
color: ColorToken;

View File

@ -72,7 +72,7 @@ export interface ColorToken {
step?: number,
}
export const colors = {
neutral: colorRamp(["black", "white"], { steps: 21, increment: 50 }),
neutral: colorRamp(["white", "black"], { steps: 19, increment: 50 }),
rose: colorRamp("#F43F5EFF"),
red: colorRamp("#EF4444FF"),
orange: colorRamp("#F97316FF"),