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, }, }, }, })}
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,
},
},
},
})
}