74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
import { Layer } from "../common"
|
|
import { interactive, toggleable } from "../element"
|
|
import { Border, text } from "../style_tree/components"
|
|
|
|
type TabProps = {
|
|
layer: Layer
|
|
}
|
|
|
|
export const tab = ({ layer }: TabProps) => {
|
|
const active_color = text(layer, "sans", "base").color
|
|
const inactive_border: Border = {
|
|
color: "#FFFFFF00",
|
|
width: 1,
|
|
bottom: true,
|
|
left: false,
|
|
right: false,
|
|
top: false,
|
|
}
|
|
const active_border: Border = {
|
|
...inactive_border,
|
|
color: active_color,
|
|
}
|
|
|
|
const base = {
|
|
...text(layer, "sans", "variant"),
|
|
padding: {
|
|
top: 8,
|
|
left: 8,
|
|
right: 8,
|
|
bottom: 6,
|
|
},
|
|
border: inactive_border,
|
|
}
|
|
|
|
const i = interactive({
|
|
state: {
|
|
default: {
|
|
...base,
|
|
},
|
|
hovered: {
|
|
...base,
|
|
...text(layer, "sans", "base", "hovered"),
|
|
},
|
|
clicked: {
|
|
...base,
|
|
...text(layer, "sans", "base", "pressed"),
|
|
},
|
|
},
|
|
})
|
|
|
|
return toggleable({
|
|
base: i,
|
|
state: {
|
|
active: {
|
|
default: {
|
|
...i,
|
|
...text(layer, "sans", "base"),
|
|
border: active_border,
|
|
},
|
|
hovered: {
|
|
...i,
|
|
...text(layer, "sans", "base", "hovered"),
|
|
border: active_border,
|
|
},
|
|
clicked: {
|
|
...i,
|
|
...text(layer, "sans", "base", "pressed"),
|
|
border: active_border,
|
|
},
|
|
},
|
|
},
|
|
})
|
|
}
|