From d88e20477df2cffa2b10b64dc65ce68066fd40f7 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Thu, 31 Mar 2022 01:38:18 -0400 Subject: [PATCH] Update app.ts, editor.ts --- styles/app.ts | 65 +++++++++++++++++++------------------------- styles/components.ts | 4 +++ styles/editor.ts | 4 +-- styles/theme.ts | 12 ++++++++ styles/workspace.ts | 4 +-- 5 files changed, 48 insertions(+), 41 deletions(-) diff --git a/styles/app.ts b/styles/app.ts index 5f2993d30a..11e476baf7 100644 --- a/styles/app.ts +++ b/styles/app.ts @@ -1,10 +1,10 @@ -import { backgroundColor, text } from "./components"; -import selectorModal from "./selector-modal"; -import workspace from "./workspace"; -import editor from "./editor"; -import Theme from "./theme"; -import projectPanel from "./project-panel"; import chatPanel from "./chat-panel"; +import { backgroundColor, border, borderColor, player, text } from "./components"; +import editor from "./editor"; +import projectPanel from "./project-panel"; +import selectorModal from "./selector-modal"; +import Theme from "./theme"; +import workspace from "./workspace"; export const panel = { padding: { top: 12, left: 12, bottom: 12, right: 12 }, @@ -35,27 +35,27 @@ export default function app(theme: Theme): Object { contactsPanel: { extends: "$panel", hostRowHeight: 28, - treeBranchColor: "$surface.100", + treeBranchColor: borderColor(theme, "muted"), treeBranchWidth: 1, hostAvatar: { cornerRadius: 10, width: 18, }, hostUsername: { - extends: "$text.primary", + ...text(theme, "mono", "muted"), padding: { left: 8, }, }, hoveredSharedProject: { - background: "$state.hover", - cornerRadius: 6, extends: "$contacts_panel.sharedProject", + background: theme.editor.line.active.value, + cornerRadius: 6, }, hoveredUnsharedProject: { - background: "$state.hover", - cornerRadius: 6, extends: "$contacts_panel.unsharedProject", + background: theme.editor.line.active.value, + cornerRadius: 6, }, project: { guestAvatarSpacing: 4, @@ -65,7 +65,7 @@ export default function app(theme: Theme): Object { width: 14, }, name: { - extends: "$text.secondary", + extends: text(theme, "mono", "secondary"), margin: { right: 6, }, @@ -77,7 +77,7 @@ export default function app(theme: Theme): Object { sharedProject: { extends: "$contactsPanel.project", name: { - color: "$text.primary.color", + color: text(theme, "mono", "primary"), }, }, unsharedProject: { @@ -86,28 +86,25 @@ export default function app(theme: Theme): Object { }, search: { background: backgroundColor(theme, 300), - matchBackground: "$state.highlightedLine", + matchBackground: theme.editor.highlight.match, tabIconSpacing: 4, tabIconWidth: 14, activeHoveredOptionButton: { - background: "$surface.100", extends: "$search.option_button", + background: backgroundColor(theme, 100), }, activeOptionButton: { - background: "$surface.100", extends: "$search.option_button", + background: backgroundColor(theme, 100), }, editor: { - background: "$surface.500", + background: backgroundColor(theme, 500), cornerRadius: 6, maxWidth: 400, - placeholderText: "$text.muted", - selection: "$selection.host", - text: "$text.primary", - border: { - color: "$border.primary", - width: 1, - }, + placeholderText: text(theme, "mono", "placeholder"), + selection: player(theme, 1).selection, + text: text(theme, "mono", "primary"), + border: border(theme, "primary"), margin: { bottom: 5, left: 5, @@ -122,28 +119,22 @@ export default function app(theme: Theme): Object { }, }, hoveredOptionButton: { - background: "$surface.100", extends: "$search.optionButton", + background: backgroundColor(theme, 100), }, invalidEditor: { extends: "$search.editor", - border: { - color: "$status.bad", - width: 1, - }, + border: border(theme, "error"), }, matchIndex: { - extends: "$text.secondary", + ...text(theme, "mono", "secondary"), padding: 6, }, optionButton: { + ...text(theme, "mono", "secondary"), background: backgroundColor(theme, 300), cornerRadius: 6, - extends: "$text.secondary", - border: { - color: "$border.primary", - width: 1, - }, + border: border(theme, "primary"), margin: { left: 1, right: 1, @@ -162,7 +153,7 @@ export default function app(theme: Theme): Object { }, }, resultsStatus: { - extends: "$text.primary", + ...text(theme, "mono", "primary"), size: 18, }, }, diff --git a/styles/components.ts b/styles/components.ts index 28d883927b..c8b2f87638 100644 --- a/styles/components.ts +++ b/styles/components.ts @@ -47,6 +47,10 @@ export function border( }; } +export function borderColor(theme: Theme, color: keyof Theme["borderColor"]) { + return theme.borderColor[color].value; +} + export function iconColor(theme: Theme, color: keyof Theme["iconColor"]) { return theme.iconColor[color].value; } diff --git a/styles/editor.ts b/styles/editor.ts index ea7012d209..a27464eee2 100644 --- a/styles/editor.ts +++ b/styles/editor.ts @@ -4,7 +4,7 @@ import { iconColor, player, text, - TextColor, + TextColor } from "./components"; import Theme from "./theme"; @@ -89,7 +89,7 @@ export default function editor(theme: Theme) { diagnosticHeader: { background: theme.editor.background.value, iconWidthFactor: 1.5, - textScaleFactor: 0.857, + 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, diff --git a/styles/theme.ts b/styles/theme.ts index 27f578f436..9d297d552d 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -71,6 +71,18 @@ export default interface Theme { active: { value: Color; }; + ok: { + value: Color; + }; + error: { + value: Color; + }; + warning: { + value: Color; + }; + info: { + value: Color; + }; }; textColor: { primary: { diff --git a/styles/workspace.ts b/styles/workspace.ts index 5ecb3a378c..1a50fe9ee1 100644 --- a/styles/workspace.ts +++ b/styles/workspace.ts @@ -42,8 +42,8 @@ export default function workspace(theme: Theme) { }; const sidebarItem = { - height: "$workspace.tab.height", - iconColor: "$text.muted.color", + height: 32, + iconColor: iconColor(theme, "secondary"), iconSize: 18, }; const sidebar = {