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

further style adjustments; cargo-run works

Browse source
This commit is contained in:
Piotr Osiewicz 2023-06-15 22:39:51 +02:00 • committed by Mikayla Maki
parent 63630949ba
commit 4bd89c4c8c
No known key found for this signature in database
7 changed files with 382 additions and 331 deletions
Download patch file Download diff file Expand all files Collapse all files

23
styles/src/styleTree/assistant.ts
View file

@ -1,6 +1,7 @@
import { ColorScheme } from "../theme/colorScheme"
import { text, border, background, foreground } from "./components"
import editor from "./editor"
import { interactive } from "./interactive"
export default function assistant(colorScheme: ColorScheme) {
const layer = colorScheme.highest
@ -15,13 +16,18 @@ export default function assistant(colorScheme: ColorScheme) {
background: editor(colorScheme).background,
},
userSender: {
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
default:
{ ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) },
},
assistantSender: {
...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
default: {
...text(layer, "sans", "accent", { size: "sm", weight: "bold" })
},
},
systemSender: {
...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
default: {
...text(layer, "sans", "variant", { size: "sm", weight: "bold" })
},
},
sentAt: {
margin: { top: 2, left: 8 },
@ -30,16 +36,19 @@ export default function assistant(colorScheme: ColorScheme) {
modelInfoContainer: {
margin: { right: 16, top: 4 },
},
model: {
model: interactive({
base: {
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),
padding: 4,
cornerRadius: 4,
...text(layer, "sans", "default", { size: "xs" }),
hover: {
}, state: {
hovered: {
background: background(layer, "on", "hovered"),
},
},
}
}
}),
remainingTokens: {
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),

15
styles/src/styleTree/contactList.ts
View file

@ -192,7 +192,8 @@ export default function contactsPanel(colorScheme: ColorScheme) {
},
}
),
projectRow: {
projectRow: toggleable(interactive({
base: {
...projectRow,
background: background(layer),
icon: {
@ -204,12 +205,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
...projectRow.name,
...text(layer, "mono", { size: "sm" }),
},
hover: {
}, state: {
hovered: {
background: background(layer, "hovered"),
},
active: {
background: background(layer, "active"),
},
},
}
}),
{
default: { background: background(layer, "active") }
})
}
}

12
styles/src/styleTree/feedback.ts
View file

@ -1,11 +1,13 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components"
import { interactive } from "./interactive"
export default function feedback(colorScheme: ColorScheme) {
let layer = colorScheme.highest
return {
submit_button: {
submit_button: interactive({
base: {
...text(layer, "mono", "on"),
background: background(layer, "on"),
cornerRadius: 6,
@ -18,18 +20,20 @@ export default function feedback(colorScheme: ColorScheme) {
left: 10,
right: 10,
top: 2,
},
}
}, state: {
clicked: {
...text(layer, "mono", "on", "pressed"),
background: background(layer, "on", "pressed"),
border: border(layer, "on", "pressed"),
},
hover: {
hovered: {
...text(layer, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"),
border: border(layer, "on", "hovered"),
},
},
}
}),
button_margin: 8,
info_text_default: text(layer, "sans", "default", { size: "xs" }),
link_text_default: text(layer, "sans", "default", {

32
styles/src/styleTree/search.ts
View file

@ -1,6 +1,8 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function search(colorScheme: ColorScheme) {
let layer = colorScheme.highest
@ -35,7 +37,8 @@ export default function search(colorScheme: ColorScheme) {
return {
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
optionButton: {
optionButton: toggleable(interactive({
base: {
...text(layer, "mono", "on"),
background: background(layer, "on"),
cornerRadius: 6,
@ -49,22 +52,26 @@ export default function search(colorScheme: ColorScheme) {
right: 10,
top: 2,
},
active: {
...text(layer, "mono", "on", "inverted"),
background: background(layer, "on", "inverted"),
border: border(layer, "on", "inverted"),
},
}, state: {
clicked: {
...text(layer, "mono", "on", "pressed"),
background: background(layer, "on", "pressed"),
border: border(layer, "on", "pressed"),
},
hover: {
hovered: {
...text(layer, "mono", "on", "hovered"),
background: background(layer, "on", "hovered"),
border: border(layer, "on", "hovered"),
},
}
}), {
default: {
...text(layer, "mono", "on", "inverted"),
background: background(layer, "on", "inverted"),
border: border(layer, "on", "inverted"),
},
}),
editor,
invalidEditor: {
...editor,
@ -97,7 +104,8 @@ export default function search(colorScheme: ColorScheme) {
...text(layer, "mono", "on"),
size: 18,
},
dismissButton: {
dismissButton: interactive({
base: {
color: foreground(layer, "variant"),
iconWidth: 12,
buttonWidth: 14,
@ -105,9 +113,11 @@ export default function search(colorScheme: ColorScheme) {
left: 10,
right: 10,
},
hover: {
}, state: {
hovered: {
color: foreground(layer, "hovered"),
},
},
}
}
}),
}
}

19
styles/src/styleTree/simpleMessageNotification.ts
View file

@ -1,5 +1,6 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, border, foreground, text } from "./components"
import { interactive } from "./interactive"
const headerPadding = 8
@ -12,7 +13,8 @@ export default function simpleMessageNotification(
...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding },
},
actionMessage: {
actionMessage: interactive({
base: {
...text(layer, "sans", { size: "xs" }),
border: border(layer, "active"),
cornerRadius: 4,
@ -24,21 +26,26 @@ export default function simpleMessageNotification(
},
margin: { left: headerPadding, top: 6, bottom: 6 },
hover: {
}, state: {
hovered: {
...text(layer, "sans", "default", { size: "xs" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
},
dismissButton: {
}
}),
dismissButton: interactive({
base: {
color: foreground(layer),
iconWidth: 8,
iconHeight: 8,
buttonWidth: 8,
buttonHeight: 8,
hover: {
}, state: {
hovered: {
color: foreground(layer, "hovered"),
},
},
}
})
}
}

42
styles/src/styleTree/toolbarDropdownMenu.ts
View file

@ -1,6 +1,7 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, border, text } from "./components"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function dropdownMenu(colorScheme: ColorScheme) {
let layer = colorScheme.middle
@ -9,38 +10,47 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
background: background(layer),
border: border(layer),
shadow: colorScheme.popoverShadow,
header: {
header: interactive({
base: {
...text(layer, "sans", { size: "sm" }),
secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
secondaryTextSpacing: 10,
padding: { left: 8, right: 8, top: 2, bottom: 2 },
cornerRadius: 6,
background: background(layer, "on"),
border: border(layer, "on", { overlay: true }),
hover: {
border: border(layer, "on", { overlay: true })
},
state: {
hovered: {
background: background(layer, "hovered"),
...text(layer, "sans", "hovered", { size: "sm" }),
}
},
}
})
,
sectionHeader: {
...text(layer, "sans", { size: "sm" }),
padding: { left: 8, right: 8, top: 8, bottom: 8 },
},
item: {
item: toggleable(interactive({
base: {
...text(layer, "sans", { size: "sm" }),
secondaryTextSpacing: 10,
secondaryText: text(layer, "sans", { size: "sm" }),
padding: { left: 18, right: 18, top: 2, bottom: 2 },
hover: {
padding: { left: 18, right: 18, top: 2, bottom: 2 }
}, state: {
hovered: {
background: background(layer, "hovered"),
...text(layer, "sans", "hovered", { size: "sm" }),
},
active: {
background: background(layer, "active"),
},
activeHover: {
background: background(layer, "active"),
},
},
}
}
}), {
default: {
background: background(layer, "active"),
},
hovered: {
background: background(layer, "active"),
},
})
}
}

24
styles/src/styleTree/updateNotification.ts
View file

@ -1,5 +1,6 @@
import { ColorScheme } from "../theme/colorScheme"
import { foreground, text } from "./components"
import { interactive } from "./interactive"
const headerPadding = 8
@ -10,22 +11,29 @@ export default function updateNotification(colorScheme: ColorScheme): Object {
...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, right: headerPadding },
},
actionMessage: {
actionMessage: interactive({
base: {
...text(layer, "sans", { size: "xs" }),
margin: { left: headerPadding, top: 6, bottom: 6 },
hover: {
margin: { left: headerPadding, top: 6, bottom: 6 }
}, state: {
hovered: {
color: foreground(layer, "hovered"),
},
},
dismissButton: {
}
}
}),
dismissButton: interactive({
base: {
color: foreground(layer),
iconWidth: 8,
iconHeight: 8,
buttonWidth: 8,
buttonHeight: 8,
hover: {
buttonHeight: 8
}, state: {
hovered: {
color: foreground(layer, "hovered"),
},
},
})
}
}