oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adjust some of the styles to the new Toggleable format

Browse Source
This commit is contained in:
Piotr Osiewicz
2023-06-20 16:05:23 -07:00
committed by Mikayla Maki
parent 198a446b03
commit 31c1177737
15 changed files with 1932 additions and 1808 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/styleTree/contextMenu.ts
+48 -43
View File
@@ -1,49 +1,54 @@
import { ColorScheme } from "../theme/colorScheme"
import { background, border, borderColor, text } from "./components"
import { interactive } from "./interactive"
import { toggleable } from "./toggle"
export default function contextMenu(colorScheme: ColorScheme) {
let layer = colorScheme.middle
return {
background: background(layer),
cornerRadius: 10,
padding: 4,
shadow: colorScheme.popoverShadow,
border: border(layer),
keystrokeMargin: 30,
item: {
iconSpacing: 8,
iconWidth: 14,
padding: { left: 6, right: 6, top: 2, bottom: 2 },
cornerRadius: 6,
label: text(layer, "sans", { size: "sm" }),
keystroke: {
...text(layer, "sans", "variant", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
},
hover: {
background: background(layer, "hovered"),
label: text(layer, "sans", "hovered", { size: "sm" }),
keystroke: {
...text(layer, "sans", "hovered", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
},
},
active: {
background: background(layer, "active"),
},
activeHover: {
background: background(layer, "active"),
},
let layer = colorScheme.middle
return {
background: background(layer),
cornerRadius: 10,
padding: 4,
shadow: colorScheme.popoverShadow,
border: border(layer),
keystrokeMargin: 30,
item: toggleable(interactive({
iconSpacing: 8,
iconWidth: 14,
padding: { left: 6, right: 6, top: 2, bottom: 2 },
cornerRadius: 6,
label: text(layer, "sans", { size: "sm" }),
keystroke: {
...text(layer, "sans", "variant", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
}
}, {
hover: {
background: background(layer, "hovered"),
label: text(layer, "sans", "hovered", { size: "sm" }),
keystroke: {
...text(layer, "sans", "hovered", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
},
separator: {
background: borderColor(layer),
margin: { top: 2, bottom: 2 },
},
}
}
}), {
default: {
background: background(layer, "active"),
},
hover: {
background: background(layer, "active"),
},
}),
separator: {
background: borderColor(layer),
margin: { top: 2, bottom: 2 },
},
}
}