WIP snake_case 2/?

This commit is contained in:
Nate Butler 2023-06-29 01:48:40 -04:00
parent b015f506da
commit ba17fae8d9
23 changed files with 317 additions and 356 deletions

View file

@ -2,25 +2,24 @@ import { ColorScheme } from "../theme/color_scheme"
import { background, border, border_color, text } from "./components"
import { interactive, toggleable } from "../element"
export default function context_menu(colorScheme: ColorScheme): any {
const layer = colorScheme.middle
export default function context_menu(theme: ColorScheme): any {
return {
background: background(layer),
background: background(theme.middle),
corner_radius: 10,
padding: 4,
shadow: colorScheme.popoverShadow,
border: border(layer),
keystrokeMargin: 30,
shadow: theme.popoverShadow,
border: border(theme.middle),
keystroke_margin: 30,
item: toggleable({
base: interactive({
base: {
iconSpacing: 8,
icon_spacing: 8,
icon_width: 14,
padding: { left: 6, right: 6, top: 2, bottom: 2 },
corner_radius: 6,
label: text(layer, "sans", { size: "sm" }),
label: text(theme.middle, "sans", { size: "sm" }),
keystroke: {
...text(layer, "sans", "variant", {
...text(theme.middle, "sans", "variant", {
size: "sm",
weight: "bold",
}),
@ -29,10 +28,10 @@ export default function context_menu(colorScheme: ColorScheme): any {
},
state: {
hovered: {
background: background(layer, "hovered"),
label: text(layer, "sans", "hovered", { size: "sm" }),
background: background(theme.middle, "hovered"),
label: text(theme.middle, "sans", "hovered", { size: "sm" }),
keystroke: {
...text(layer, "sans", "hovered", {
...text(theme.middle, "sans", "hovered", {
size: "sm",
weight: "bold",
}),
@ -40,27 +39,27 @@ export default function context_menu(colorScheme: ColorScheme): any {
},
},
clicked: {
background: background(layer, "pressed"),
background: background(theme.middle, "pressed"),
},
},
}),
state: {
active: {
default: {
background: background(layer, "active"),
background: background(theme.middle, "active"),
},
hovered: {
background: background(layer, "hovered"),
background: background(theme.middle, "hovered"),
},
clicked: {
background: background(layer, "pressed"),
background: background(theme.middle, "pressed"),
},
},
},
}),
separator: {
background: border_color(layer),
background: border_color(theme.middle),
margin: { top: 2, bottom: 2 },
},
}