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

WIP UI Tweaks (#2911)

Browse source 
- Tighten up toolbar
- Reduce intensity of active tools
- Remove divider between project + branch
- Add a styletree for toolbar + move breadcrumb into it
- Some ts theme tidying

[[PR Description]]

Release Notes:

- Improved density and contrast of a number of UI elements.
This commit is contained in:
Nate Butler 2023-08-30 11:19:05 -04:00 • committed by GitHub
commit e808386765
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 493 additions and 372 deletions
Download patch file Download diff file Expand all files Collapse all files

69
styles/src/style_tree/assistant.ts
View file

@ -8,50 +8,48 @@ type RoleCycleButton = TextStyle & {
}
// TODO: Replace these with zed types
type RemainingTokens = TextStyle & {
background: string,
margin: { top: number, right: number },
background: string
margin: { top: number; right: number }
padding: {
right: number,
left: number,
top: number,
bottom: number,
},
corner_radius: number,
right: number
left: number
top: number
bottom: number
}
corner_radius: number
}
export default function assistant(): any {
const theme = useTheme()
const interactive_role = (color: StyleSets): Interactive<RoleCycleButton> => {
return (
interactive({
base: {
const interactive_role = (
color: StyleSets
): Interactive<RoleCycleButton> => {
return interactive({
base: {
...text(theme.highest, "sans", color, { size: "sm" }),
},
state: {
hovered: {
...text(theme.highest, "sans", color, { size: "sm" }),
background: background(theme.highest, color, "hovered"),
},
state: {
hovered: {
...text(theme.highest, "sans", color, { size: "sm" }),
background: background(theme.highest, color, "hovered"),
},
clicked: {
...text(theme.highest, "sans", color, { size: "sm" }),
background: background(theme.highest, color, "pressed"),
}
clicked: {
...text(theme.highest, "sans", color, { size: "sm" }),
background: background(theme.highest, color, "pressed"),
},
})
)
},
})
}
const tokens_remaining = (color: StyleSets): RemainingTokens => {
return (
{
...text(theme.highest, "mono", color, { size: "xs" }),
background: background(theme.highest, "on", "default"),
margin: { top: 12, right: 20 },
padding: { right: 4, left: 4, top: 1, bottom: 1 },
corner_radius: 6,
}
)
return {
...text(theme.highest, "mono", color, { size: "xs" }),
background: background(theme.highest, "on", "default"),
margin: { top: 12, right: 20 },
padding: { right: 4, left: 4, top: 1, bottom: 1 },
corner_radius: 6,
}
}
return {
@ -172,7 +170,10 @@ export default function assistant(): any {
base: {
background: background(theme.middle),
padding: { top: 4, bottom: 4 },
border: border(theme.middle, "default", { top: true, overlay: true }),
border: border(theme.middle, "default", {
top: true,
overlay: true,
}),
},
state: {
hovered: {
@ -180,7 +181,7 @@ export default function assistant(): any {
},
clicked: {
background: background(theme.middle, "pressed"),
}
},
},
}),
saved_at: {