From f963c0ed457c2f6fd3e495c9fbeac36461ad186c Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 22 Jul 2022 17:28:58 -0400 Subject: [PATCH] WIP for keith --- crates/theme/src/theme.rs | 21 ++++++-- styles/src/styleTree/tabBar.ts | 85 ++++++++++++++++++++++++++++++ styles/src/styleTree/workspace.ts | 64 +--------------------- styles/src/themes/common/base16.ts | 4 +- 4 files changed, 105 insertions(+), 69 deletions(-) create mode 100644 styles/src/styleTree/tabBar.ts diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 540c5bfd6c80999104475e43b18f9d504eb6bc65..23dfa4b58ba20f3a7fd77c2defe9229ff0a56ff4 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -38,11 +38,7 @@ pub struct Theme { pub struct Workspace { pub background: Color, pub titlebar: Titlebar, - pub active_pane_active_tab: Tab, - pub active_pane_inactive_tab: Tab, - pub inactive_pane_active_tab: Tab, - pub inactive_pane_inactive_tab: Tab, - pub pane_button: Interactive, + pub tab_bar: TabBar, pub pane_divider: Border, pub leader_border_opacity: f32, pub leader_border_width: f32, @@ -72,6 +68,21 @@ pub struct Titlebar { pub outdated_warning: ContainedText, } +#[derive(Clone, Deserialize, Default)] +pub struct TabBar { + #[serde(flatten)] + pub container: ContainerStyle, + pub pane_button: Interactive, + pub active_pane: TabStyles, + pub inactive_pane: TabStyles, +} + +#[derive(Clone, Deserialize, Default)] +pub struct TabStyles { + active_tab: Tab, + inactive_tab: Tab, +} + #[derive(Clone, Deserialize, Default)] pub struct AvatarRibbon { #[serde(flatten)] diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts new file mode 100644 index 0000000000000000000000000000000000000000..d35af34ac9bc43fdd833217025622fea699d6037 --- /dev/null +++ b/styles/src/styleTree/tabBar.ts @@ -0,0 +1,85 @@ +import Theme from "../themes/common/theme"; +import { iconColor, text, border, backgroundColor } from "./components"; + +export default function tabBar(theme: Theme) { + const height = 32; + + const tab = { + height, + background: backgroundColor(theme, 300), + border: border(theme, "primary", { + left: true, + bottom: true, + overlay: true, + }), + iconClose: iconColor(theme, "muted"), + iconCloseActive: iconColor(theme, "active"), + iconConflict: iconColor(theme, "warning"), + iconDirty: iconColor(theme, "info"), + iconWidth: 8, + spacing: 8, + text: text(theme, "sans", "secondary", { size: "sm" }), + padding: { + left: 8, + right: 8, + }, + description: { + margin: { left: 6, top: 1 }, + ...text(theme, "sans", "muted", { size: "2xs" }) + } + }; + + const activePaneActiveTab = { + ...tab, + background: backgroundColor(theme, 500), + text: text(theme, "sans", "active", { size: "sm" }), + border: { + ...tab.border, + }, + }; + + const inactivePaneInactiveTab = { + ...tab, + background: backgroundColor(theme, 300), + text: text(theme, "sans", "muted", { size: "sm" }), + }; + + const inactivePaneActiveTab = { + ...tab, + background: backgroundColor(theme, 500), + text: text(theme, "sans", "secondary", { size: "sm" }), + border: { + ...tab.border, + }, + } + + return { + height, + background: backgroundColor(theme, 300), + border: border(theme, "primary", { + left: true, + bottom: true, + overlay: true, + }), + activePane: { + activeTab: activePaneActiveTab, + inactiveTab: tab, + }, + inactivePane: { + activeTab: inactivePaneActiveTab, + inactiveTab: inactivePaneInactiveTab, + }, + paneButton: { + color: iconColor(theme, "secondary"), + border: { + ...activePaneActiveTab.border, + }, + iconWidth: 12, + buttonWidth: activePaneActiveTab.height, + hover: { + color: iconColor(theme, "active"), + background: backgroundColor(theme, 300), + }, + }, + } +} \ No newline at end of file diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index c86dce72262112c5f5b49301d2ed481c01036604..4937edfdee1537f0133a54587a0c29f6c5dd1f98 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -8,58 +8,13 @@ import { text, } from "./components"; import statusBar from "./statusBar"; +import tabBar from "./tabBar"; export function workspaceBackground(theme: Theme) { return backgroundColor(theme, 300); } export default function workspace(theme: Theme) { - const activePaneInactiveTab = { - height: 32, - background: workspaceBackground(theme), - iconClose: iconColor(theme, "muted"), - iconCloseActive: iconColor(theme, "active"), - iconConflict: iconColor(theme, "warning"), - iconDirty: iconColor(theme, "info"), - iconWidth: 8, - spacing: 8, - text: text(theme, "sans", "secondary", { size: "sm" }), - border: border(theme, "primary", { - left: true, - bottom: true, - overlay: true, - }), - padding: { - left: 8, - right: 8, - }, - description: { - margin: { left: 6, top: 1 }, - ...text(theme, "sans", "muted", { size: "2xs" }) - } - }; - - const activePaneActiveTab = { - ...activePaneInactiveTab, - background: backgroundColor(theme, 500), - text: text(theme, "sans", "active", { size: "sm" }), - border: { - ...activePaneInactiveTab.border, - bottom: false, - }, - }; - - const inactivePaneInactiveTab = { - ...activePaneInactiveTab, - background: backgroundColor(theme, 100), - text: text(theme, "sans", "placeholder", { size: "sm" }), - }; - - const inactivePaneActiveTab = { - ...activePaneInactiveTab, - text: text(theme, "sans", "placeholder", { size: "sm" }), - } - const titlebarPadding = 6; return { @@ -74,22 +29,7 @@ export default function workspace(theme: Theme) { }, leaderBorderOpacity: 0.7, leaderBorderWidth: 2.0, - activePaneActiveTab, - activePaneInactiveTab, - inactivePaneActiveTab, - inactivePaneInactiveTab, - paneButton: { - color: iconColor(theme, "secondary"), - border: { - ...activePaneActiveTab.border, - }, - iconWidth: 12, - buttonWidth: activePaneActiveTab.height, - hover: { - color: iconColor(theme, "active"), - background: backgroundColor(theme, 300), - }, - }, + tabBar: tabBar(theme), modal: { margin: { bottom: 52, diff --git a/styles/src/themes/common/base16.ts b/styles/src/themes/common/base16.ts index a73ac7f0cf4d6a256cf7bb0fcbdcfaf1f7cd5cea..55219b168782e02dcdb5ba2976852767ec1eaeb5 100644 --- a/styles/src/themes/common/base16.ts +++ b/styles/src/themes/common/base16.ts @@ -115,8 +115,8 @@ export function createTheme( const textColor = { primary: sample(ramps.neutral, 6), secondary: sample(ramps.neutral, 5), - muted: sample(ramps.neutral, 5), - placeholder: sample(ramps.neutral, 4), + muted: sample(ramps.neutral, 4), + placeholder: sample(ramps.neutral, 3), active: sample(ramps.neutral, 7), feature: sample(ramps.blue, 0.5), ok: sample(ramps.green, 0.5),