WIP snake_case 4/?

This commit is contained in:
Nate Butler 2023-06-29 10:57:19 -04:00
parent 17f2fed3c8
commit 0627c198fd
25 changed files with 428 additions and 447 deletions

View file

@ -1,23 +1,21 @@
import { ColorScheme } from "../theme/color_scheme"
import { text, border, background, foreground } from "./components"
import editor from "./editor"
import { interactive } from "../element"
export default function assistant(colorScheme: ColorScheme): any {
const layer = colorScheme.highest
export default function assistant(theme: ColorScheme): any {
return {
container: {
background: editor(colorScheme).background,
background: background(theme.highest),
padding: { left: 12 },
},
message_header: {
margin: { bottom: 6, top: 6 },
background: editor(colorScheme).background,
background: background(theme.highest),
},
hamburger_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
color: foreground(theme.highest, "variant"),
asset: "icons/hamburger_15.svg",
dimensions: {
width: 15,
@ -31,7 +29,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: {
hovered: {
icon: {
color: foreground(layer, "hovered"),
color: foreground(theme.highest, "hovered"),
},
},
},
@ -39,7 +37,7 @@ export default function assistant(colorScheme: ColorScheme): any {
split_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
color: foreground(theme.highest, "variant"),
asset: "icons/split_message_15.svg",
dimensions: {
width: 15,
@ -53,7 +51,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: {
hovered: {
icon: {
color: foreground(layer, "hovered"),
color: foreground(theme.highest, "hovered"),
},
},
},
@ -61,7 +59,7 @@ export default function assistant(colorScheme: ColorScheme): any {
quote_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
color: foreground(theme.highest, "variant"),
asset: "icons/quote_15.svg",
dimensions: {
width: 15,
@ -75,7 +73,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: {
hovered: {
icon: {
color: foreground(layer, "hovered"),
color: foreground(theme.highest, "hovered"),
},
},
},
@ -83,7 +81,7 @@ export default function assistant(colorScheme: ColorScheme): any {
assist_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
color: foreground(theme.highest, "variant"),
asset: "icons/assist_15.svg",
dimensions: {
width: 15,
@ -97,7 +95,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: {
hovered: {
icon: {
color: foreground(layer, "hovered"),
color: foreground(theme.highest, "hovered"),
},
},
},
@ -105,7 +103,7 @@ export default function assistant(colorScheme: ColorScheme): any {
zoom_in_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
color: foreground(theme.highest, "variant"),
asset: "icons/maximize_8.svg",
dimensions: {
width: 12,
@ -119,7 +117,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: {
hovered: {
icon: {
color: foreground(layer, "hovered"),
color: foreground(theme.highest, "hovered"),
},
},
},
@ -127,7 +125,7 @@ export default function assistant(colorScheme: ColorScheme): any {
zoom_out_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
color: foreground(theme.highest, "variant"),
asset: "icons/minimize_8.svg",
dimensions: {
width: 12,
@ -141,7 +139,7 @@ export default function assistant(colorScheme: ColorScheme): any {
state: {
hovered: {
icon: {
color: foreground(layer, "hovered"),
color: foreground(theme.highest, "hovered"),
},
},
},
@ -149,7 +147,7 @@ export default function assistant(colorScheme: ColorScheme): any {
plus_button: interactive({
base: {
icon: {
color: foreground(layer, "variant"),
color: foreground(theme.highest, "variant"),
asset: "icons/plus_12.svg",
dimensions: {
width: 12,
@ -163,33 +161,33 @@ export default function assistant(colorScheme: ColorScheme): any {
state: {
hovered: {
icon: {
color: foreground(layer, "hovered"),
color: foreground(theme.highest, "hovered"),
},
},
},
}),
title: {
...text(layer, "sans", "default", { size: "sm" }),
...text(theme.highest, "sans", "default", { size: "sm" }),
},
saved_conversation: {
container: interactive({
base: {
background: background(layer, "on"),
background: background(theme.highest, "on"),
padding: { top: 4, bottom: 4 },
},
state: {
hovered: {
background: background(layer, "on", "hovered"),
background: background(theme.highest, "on", "hovered"),
},
},
}),
savedAt: {
margin: { left: 8 },
...text(layer, "sans", "default", { size: "xs" }),
...text(theme.highest, "sans", "default", { size: "xs" }),
},
title: {
margin: { left: 16 },
...text(layer, "sans", "default", {
...text(theme.highest, "sans", "default", {
size: "sm",
weight: "bold",
}),
@ -197,7 +195,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
user_sender: {
default: {
...text(layer, "sans", "default", {
...text(theme.highest, "sans", "default", {
size: "sm",
weight: "bold",
}),
@ -205,7 +203,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
assistant_sender: {
default: {
...text(layer, "sans", "accent", {
...text(theme.highest, "sans", "accent", {
size: "sm",
weight: "bold",
}),
@ -213,7 +211,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
system_sender: {
default: {
...text(layer, "sans", "variant", {
...text(theme.highest, "sans", "variant", {
size: "sm",
weight: "bold",
}),
@ -221,51 +219,51 @@ export default function assistant(colorScheme: ColorScheme): any {
},
sent_at: {
margin: { top: 2, left: 8 },
...text(layer, "sans", "default", { size: "2xs" }),
...text(theme.highest, "sans", "default", { size: "2xs" }),
},
model: interactive({
base: {
background: background(layer, "on"),
background: background(theme.highest, "on"),
margin: { left: 12, right: 12, top: 12 },
padding: 4,
corner_radius: 4,
...text(layer, "sans", "default", { size: "xs" }),
...text(theme.highest, "sans", "default", { size: "xs" }),
},
state: {
hovered: {
background: background(layer, "on", "hovered"),
border: border(layer, "on", { overlay: true }),
background: background(theme.highest, "on", "hovered"),
border: border(theme.highest, "on", { overlay: true }),
},
},
}),
remaining_tokens: {
background: background(layer, "on"),
background: background(theme.highest, "on"),
margin: { top: 12, right: 24 },
padding: 4,
corner_radius: 4,
...text(layer, "sans", "positive", { size: "xs" }),
...text(theme.highest, "sans", "positive", { size: "xs" }),
},
no_remaining_tokens: {
background: background(layer, "on"),
background: background(theme.highest, "on"),
margin: { top: 12, right: 24 },
padding: 4,
corner_radius: 4,
...text(layer, "sans", "negative", { size: "xs" }),
...text(theme.highest, "sans", "negative", { size: "xs" }),
},
error_icon: {
margin: { left: 8 },
color: foreground(layer, "negative"),
color: foreground(theme.highest, "negative"),
width: 12,
},
api_key_editor: {
background: background(layer, "on"),
background: background(theme.highest, "on"),
corner_radius: 6,
text: text(layer, "mono", "on"),
placeholderText: text(layer, "mono", "on", "disabled", {
text: text(theme.highest, "mono", "on"),
placeholder_text: text(theme.highest, "mono", "on", "disabled", {
size: "xs",
}),
selection: colorScheme.players[0],
border: border(layer, "on"),
selection: theme.players[0],
border: border(theme.highest, "on"),
padding: {
bottom: 4,
left: 8,
@ -275,7 +273,7 @@ export default function assistant(colorScheme: ColorScheme): any {
},
api_key_prompt: {
padding: 10,
...text(layer, "sans", "default", { size: "xs" }),
...text(theme.highest, "sans", "default", { size: "xs" }),
},
}
}