Format
This commit is contained in:
Nate Butler
@@ -27,8 +27,8 @@ export default function commandPalette(colorScheme: ColorScheme) {
|
||||
active: {
|
||||
text: text(layer, "mono", "on", "default", { size: "xs" }),
|
||||
background: withOpacity(background(layer, "on"), 0.2),
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
@@ -37,6 +37,6 @@ export default function commandPalette(colorScheme: ColorScheme) {
|
||||
key: {
|
||||
inactive: { ...key.inactive },
|
||||
active: key.active,
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,7 +88,7 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
}
|
||||
},
|
||||
}, // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
|
||||
}),
|
||||
state: {
|
||||
@@ -102,9 +102,9 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
leaveCall: interactive({
|
||||
base: {
|
||||
@@ -190,55 +190,51 @@ export default function contactsPanel(colorScheme: ColorScheme) {
|
||||
...text(layer, "mono", "variant", { size: "xs" }),
|
||||
},
|
||||
treeBranch: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
base: interactive({
|
||||
base: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: borderColor(layer),
|
||||
width: 1,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: borderColor(layer),
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: borderColor(layer),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
projectRow: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
...projectRow,
|
||||
background: background(layer),
|
||||
icon: {
|
||||
margin: { left: nameMargin },
|
||||
color: foreground(layer, "variant"),
|
||||
width: 12,
|
||||
},
|
||||
name: {
|
||||
...projectRow.name,
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
},
|
||||
base: interactive({
|
||||
base: {
|
||||
...projectRow,
|
||||
background: background(layer),
|
||||
icon: {
|
||||
margin: { left: nameMargin },
|
||||
color: foreground(layer, "variant"),
|
||||
width: 12,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
name: {
|
||||
...projectRow.name,
|
||||
...text(layer, "mono", { size: "sm" }),
|
||||
},
|
||||
}),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: { background: background(layer, "active") },
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,39 +12,38 @@ export default function contextMenu(colorScheme: ColorScheme) {
|
||||
border: border(layer),
|
||||
keystrokeMargin: 30,
|
||||
item: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
iconSpacing: 8,
|
||||
iconWidth: 14,
|
||||
padding: { left: 6, right: 6, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
label: text(layer, "sans", { size: "sm" }),
|
||||
base: interactive({
|
||||
base: {
|
||||
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 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
label: text(layer, "sans", "hovered", { size: "sm" }),
|
||||
keystroke: {
|
||||
...text(layer, "sans", "variant", {
|
||||
...text(layer, "sans", "hovered", {
|
||||
size: "sm",
|
||||
weight: "bold",
|
||||
}),
|
||||
padding: { left: 3, right: 3 },
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
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 },
|
||||
},
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
@@ -56,10 +55,9 @@ export default function contextMenu(colorScheme: ColorScheme) {
|
||||
clicked: {
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
separator: {
|
||||
background: borderColor(layer),
|
||||
|
||||
@@ -50,20 +50,19 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
suggestion: syntax.predictive,
|
||||
codeActions: {
|
||||
indicator: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "variant", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "variant", "pressed"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "variant", "pressed"),
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
@@ -75,10 +74,9 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
clicked: {
|
||||
color: foreground(layer, "accent", "pressed"),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
verticalScale: 0.55,
|
||||
},
|
||||
@@ -87,20 +85,19 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
foldedIcon: "icons/chevron_right_8.svg",
|
||||
foldableIcon: "icons/chevron_down_8.svg",
|
||||
indicator: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "on"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "base"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "base"),
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
@@ -109,10 +106,9 @@ export default function editor(colorScheme: ColorScheme) {
|
||||
hovered: {
|
||||
color: foreground(layer, "variant"),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
ellipses: {
|
||||
textColor: colorScheme.ramps.neutral(0.71).hex(),
|
||||
cornerRadiusFactor: 0.15,
|
||||
|
||||
@@ -40,41 +40,40 @@ export default function picker(colorScheme: ColorScheme): any {
|
||||
padding: {},
|
||||
},
|
||||
item: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
cornerRadius: 8,
|
||||
text: text(layer, "sans", "variant"),
|
||||
highlightText: text(layer, "sans", "accent", {
|
||||
weight: "bold",
|
||||
}),
|
||||
base: interactive({
|
||||
base: {
|
||||
padding: {
|
||||
bottom: 4,
|
||||
left: 12,
|
||||
right: 12,
|
||||
top: 4,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: withOpacity(
|
||||
background(layer, "hovered"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
background: withOpacity(
|
||||
background(layer, "pressed"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
margin: {
|
||||
top: 1,
|
||||
left: 4,
|
||||
right: 4,
|
||||
},
|
||||
}),
|
||||
cornerRadius: 8,
|
||||
text: text(layer, "sans", "variant"),
|
||||
highlightText: text(layer, "sans", "accent", {
|
||||
weight: "bold",
|
||||
}),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: withOpacity(
|
||||
background(layer, "hovered"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
clicked: {
|
||||
background: withOpacity(
|
||||
background(layer, "pressed"),
|
||||
0.5
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
@@ -95,10 +94,9 @@ export default function picker(colorScheme: ColorScheme): any {
|
||||
0.5
|
||||
),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
inputEditor,
|
||||
emptyInputEditor,
|
||||
|
||||
@@ -43,7 +43,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@@ -52,7 +52,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
state: {
|
||||
active: interactive({
|
||||
base: {
|
||||
...default_entry
|
||||
...default_entry,
|
||||
},
|
||||
state: {
|
||||
default: {
|
||||
@@ -66,9 +66,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
openProjectButton: interactive({
|
||||
@@ -99,7 +98,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
|
||||
...text(layer, "sans", "default", { size: "sm" }),
|
||||
background: background(layer, "pressed"),
|
||||
border: border(layer, "active"),
|
||||
}
|
||||
},
|
||||
},
|
||||
}),
|
||||
background: background(layer),
|
||||
|
||||
@@ -37,36 +37,35 @@ export default function search(colorScheme: ColorScheme) {
|
||||
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
|
||||
matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
|
||||
optionButton: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "mono", "on"),
|
||||
background: background(layer, "on"),
|
||||
cornerRadius: 6,
|
||||
border: border(layer, "on"),
|
||||
margin: {
|
||||
right: 4,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
padding: {
|
||||
bottom: 2,
|
||||
left: 10,
|
||||
right: 10,
|
||||
top: 2,
|
||||
},
|
||||
}),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "mono", "on", "hovered"),
|
||||
background: background(layer, "on", "hovered"),
|
||||
border: border(layer, "on", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "mono", "on", "pressed"),
|
||||
background: background(layer, "on", "pressed"),
|
||||
border: border(layer, "on", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
@@ -78,10 +77,9 @@ export default function search(colorScheme: ColorScheme) {
|
||||
clicked: {
|
||||
...text(layer, "mono", "accent", "pressed"),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
editor,
|
||||
invalidEditor: {
|
||||
...editor,
|
||||
|
||||
@@ -108,25 +108,24 @@ export default function statusBar(colorScheme: ColorScheme) {
|
||||
groupBottom: {},
|
||||
groupRight: {},
|
||||
button: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
...statusContainer,
|
||||
iconSize: 16,
|
||||
iconColor: foreground(layer, "variant"),
|
||||
label: {
|
||||
margin: { left: 6 },
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
},
|
||||
base: interactive({
|
||||
base: {
|
||||
...statusContainer,
|
||||
iconSize: 16,
|
||||
iconColor: foreground(layer, "variant"),
|
||||
label: {
|
||||
margin: { left: 6 },
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
iconColor: foreground(layer, "hovered"),
|
||||
background: background(layer, "variant"),
|
||||
},
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
iconColor: foreground(layer, "hovered"),
|
||||
background: background(layer, "variant"),
|
||||
},
|
||||
}), state:
|
||||
{
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
iconColor: foreground(layer, "active"),
|
||||
@@ -140,11 +139,9 @@ export default function statusBar(colorScheme: ColorScheme) {
|
||||
iconColor: foreground(layer, "pressed"),
|
||||
background: background(layer, "pressed"),
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
badge: {
|
||||
cornerRadius: 3,
|
||||
padding: 2,
|
||||
|
||||
@@ -89,24 +89,22 @@ export default function tabBar(colorScheme: ColorScheme) {
|
||||
},
|
||||
draggedTab,
|
||||
paneButton: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: activePaneActiveTab.height,
|
||||
base: interactive({
|
||||
base: {
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 12,
|
||||
buttonWidth: activePaneActiveTab.height,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
color: foreground(layer, "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
}),
|
||||
state:
|
||||
{
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
color: foreground(layer, "accent"),
|
||||
@@ -117,10 +115,9 @@ export default function tabBar(colorScheme: ColorScheme) {
|
||||
clicked: {
|
||||
color: foreground(layer, "pressed"),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
paneButtonContainer: {
|
||||
background: tab.background,
|
||||
border: {
|
||||
|
||||
@@ -19,7 +19,7 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
|
||||
secondaryTextSpacing: 10,
|
||||
padding: { left: 8, right: 8, top: 2, bottom: 2 },
|
||||
cornerRadius: 6,
|
||||
background: background(layer, "on")
|
||||
background: background(layer, "on"),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
@@ -35,21 +35,20 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
|
||||
padding: { left: 8, right: 8, top: 8, bottom: 8 },
|
||||
},
|
||||
item: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryTextSpacing: 10,
|
||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 },
|
||||
base: interactive({
|
||||
base: {
|
||||
...text(layer, "sans", { size: "sm" }),
|
||||
secondaryTextSpacing: 10,
|
||||
secondaryText: text(layer, "sans", { size: "sm" }),
|
||||
padding: { left: 18, right: 18, top: 2, bottom: 2 },
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
...text(layer, "sans", "hovered", { size: "sm" }),
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
@@ -58,9 +57,8 @@ export default function dropdownMenu(colorScheme: ColorScheme) {
|
||||
hovered: {
|
||||
background: background(layer, "hovered"),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
}),
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,37 +18,36 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
const isLight = colorScheme.isLight
|
||||
const itemSpacing = 8
|
||||
const titlebarButton = toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
background: background(layer, "variant"),
|
||||
border: border(layer),
|
||||
base: interactive({
|
||||
base: {
|
||||
cornerRadius: 6,
|
||||
padding: {
|
||||
top: 1,
|
||||
bottom: 1,
|
||||
left: 8,
|
||||
right: 8,
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "variant", "hovered", {
|
||||
size: "xs",
|
||||
}),
|
||||
background: background(layer, "variant", "hovered"),
|
||||
border: border(layer, "variant", "hovered"),
|
||||
},
|
||||
clicked: {
|
||||
...text(layer, "sans", "variant", "pressed", {
|
||||
size: "xs",
|
||||
}),
|
||||
background: background(layer, "variant", "pressed"),
|
||||
border: border(layer, "variant", "pressed"),
|
||||
},
|
||||
...text(layer, "sans", "variant", { size: "xs" }),
|
||||
background: background(layer, "variant"),
|
||||
border: border(layer),
|
||||
},
|
||||
state: {
|
||||
hovered: {
|
||||
...text(layer, "sans", "variant", "hovered", {
|
||||
size: "xs",
|
||||
}),
|
||||
background: background(layer, "variant", "hovered"),
|
||||
border: border(layer, "variant", "hovered"),
|
||||
},
|
||||
}),
|
||||
clicked: {
|
||||
...text(layer, "sans", "variant", "pressed", {
|
||||
size: "xs",
|
||||
}),
|
||||
background: background(layer, "variant", "pressed"),
|
||||
border: border(layer, "variant", "pressed"),
|
||||
},
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
@@ -56,10 +55,9 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
background: background(layer, "variant", "active"),
|
||||
border: border(layer, "variant", "active"),
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
},
|
||||
})
|
||||
const avatarWidth = 18
|
||||
const avatarOuterWidth = avatarWidth + 4
|
||||
const followerAvatarWidth = 14
|
||||
@@ -275,25 +273,24 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
},
|
||||
}),
|
||||
toggleContactsButton: toggleable({
|
||||
base:
|
||||
interactive({
|
||||
base: {
|
||||
margin: { left: itemSpacing },
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 14,
|
||||
buttonWidth: 20,
|
||||
base: interactive({
|
||||
base: {
|
||||
margin: { left: itemSpacing },
|
||||
cornerRadius: 6,
|
||||
color: foreground(layer, "variant"),
|
||||
iconWidth: 14,
|
||||
buttonWidth: 20,
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
},
|
||||
state: {
|
||||
clicked: {
|
||||
background: background(layer, "variant", "pressed"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
hovered: {
|
||||
background: background(layer, "variant", "hovered"),
|
||||
},
|
||||
}), state:
|
||||
{
|
||||
},
|
||||
}),
|
||||
state: {
|
||||
active: {
|
||||
default: {
|
||||
background: background(layer, "on", "default"),
|
||||
@@ -303,11 +300,10 @@ export default function workspace(colorScheme: ColorScheme) {
|
||||
},
|
||||
clicked: {
|
||||
background: background(layer, "on", "pressed"),
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
userMenuButton: merge(titlebarButton, {
|
||||
inactive: {
|
||||
default: {
|
||||
|
||||
Reference in New Issue
Block a user