zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-11-07 20:39:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix up uses of interactive

Browse Source
This commit is contained in:
Piotr Osiewicz 2023-06-15 21:58:08 +02:00 committed by Mikayla Maki
parent 247f618d4f
commit 63630949ba
No known key found for this signature in database
12 changed files with 425 additions and 363 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
styles/src/styleTree/commandPalette.ts
View File

@ -10,21 +10,23 @@ export default function commandPalette(colorScheme: ColorScheme) {
keystrokeSpacing: 8, keystrokeSpacing: 8,
key: key:
toggleable(interactive({ toggleable(interactive({
text: text(layer, "mono", "variant", "default", { size: "xs" }), base: {
cornerRadius: 2, text: text(layer, "mono", "variant", "default", { size: "xs" }),
background: background(layer, "on"), cornerRadius: 2,
padding: { background: background(layer, "on"),
top: 1, padding: {
bottom: 1, top: 1,
left: 6, bottom: 1,
right: 6, left: 6,
}, right: 6,
margin: { },
top: 1, margin: {
bottom: 1, top: 1,
left: 2, bottom: 1,
}, left: 2,
}, { hover: { cornerRadius: 4, padding: { top: 17 } } }), { },
}, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }
}), {
default: { default: {
text: text(layer, "mono", "on", "default", { size: "xs" }), text: text(layer, "mono", "on", "default", { size: "xs" }),
background: withOpacity(background(layer, "on"), 0.2), background: withOpacity(background(layer, "on"), 0.2),

79
styles/src/styleTree/contactList.ts
View File

@ -73,14 +73,17 @@ export default function contactsPanel(colorScheme: ColorScheme) {
rowHeight: 28, rowHeight: 28,
sectionIconSize: 8, sectionIconSize: 8,
headerRow: toggleable(interactive({ headerRow: toggleable(interactive({
...text(layer, "mono", { size: "sm" }), base: {
margin: { top: 14 }, ...text(layer, "mono", { size: "sm" }),
padding: { margin: { top: 14 },
left: sidePadding, padding: {
right: sidePadding, left: sidePadding,
}, right: sidePadding,
background: background(layer, "default"),// posiewic: breaking change },
}, {}), background: background(layer, "default"),// posiewic: breaking change
}
, state: { hovered: { background: background(layer, "default") } } // hack, we want headerRow to be interactive for whatever reason. It probably shouldn't be interactive in the first place.
}),
{ {
default: { default: {
...text(layer, "mono", "active", { size: "sm" }), ...text(layer, "mono", "active", { size: "sm" }),
@ -88,27 +91,30 @@ export default function contactsPanel(colorScheme: ColorScheme) {
}, },
}), }),
leaveCall: interactive({ leaveCall: interactive({
background: background(layer), base: {
border: border(layer), background: background(layer),
cornerRadius: 6, border: border(layer),
margin: { cornerRadius: 6,
top: 1, margin: {
}, top: 1,
padding: { },
top: 1, padding: {
bottom: 1, top: 1,
left: 7, bottom: 1,
right: 7, left: 7,
}, right: 7,
...text(layer, "sans", "variant", { size: "xs" }), },
}, ...text(layer, "sans", "variant", { size: "xs" }),
{ }
hover: { ,
state: {
hovered: {
...text(layer, "sans", "hovered", { size: "xs" }), ...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"), background: background(layer, "hovered"),
border: border(layer, "hovered"), border: border(layer, "hovered"),
} }
} }
}
), ),
contactRow: { contactRow: {
inactive: { inactive: {
@ -153,13 +159,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
}, },
}, },
contactButtonSpacing: nameMargin, contactButtonSpacing: nameMargin,
contactButton: interactive( contactButton: interactive({
contactButton, base: { ...contactButton },
{ state: {
hover: { hovered: {
background: background(layer, "hovered"), background: background(layer, "hovered"),
}, },
}), }
}),
disabledButton: { disabledButton: {
...contactButton, ...contactButton,
background: background(layer, "on"), background: background(layer, "on"),
@ -169,14 +176,16 @@ export default function contactsPanel(colorScheme: ColorScheme) {
...text(layer, "mono", "variant", { size: "xs" }), ...text(layer, "mono", "variant", { size: "xs" }),
}, },
treeBranch: toggleable(interactive({ treeBranch: toggleable(interactive({
color: borderColor(layer), base: {
width: 1, color: borderColor(layer),
}, width: 1,
{ },
hover: { state: {
hovered: {
color: borderColor(layer), color: borderColor(layer),
}, },
}), }
}),
{ {
default: { default: {
color: borderColor(layer), color: borderColor(layer),

20
styles/src/styleTree/contactNotification.ts
View File

@ -23,18 +23,20 @@ export default function contactNotification(colorScheme: ColorScheme): Object {
}, },
button: button:
interactive({ interactive({
...text(layer, "sans", "on", { size: "xs" }), base: {
background: background(layer, "on"), ...text(layer, "sans", "on", { size: "xs" }),
padding: 4, background: background(layer, "on"),
cornerRadius: 6, padding: 4,
margin: { left: 6 } cornerRadius: 6,
}, margin: { left: 6 }
},
{ state: {
hover: { hovered: {
background: background(layer, "on", "hovered"), background: background(layer, "on", "hovered"),
} }
}), }
}),
dismissButton: { dismissButton: {
default: { default: {

40
styles/src/styleTree/contextMenu.ts
View File

@ -13,35 +13,37 @@ export default function contextMenu(colorScheme: ColorScheme) {
border: border(layer), border: border(layer),
keystrokeMargin: 30, keystrokeMargin: 30,
item: toggleable(interactive({ item: toggleable(interactive({
iconSpacing: 8, base: {
iconWidth: 14, iconSpacing: 8,
padding: { left: 6, right: 6, top: 2, bottom: 2 }, iconWidth: 14,
cornerRadius: 6, padding: { left: 6, right: 6, top: 2, bottom: 2 },
label: text(layer, "sans", { size: "sm" }), cornerRadius: 6,
keystroke: { label: text(layer, "sans", { size: "sm" }),
...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: { keystroke: {
...text(layer, "sans", "hovered", { ...text(layer, "sans", "variant", {
size: "sm", size: "sm",
weight: "bold", weight: "bold",
}), }),
padding: { left: 3, right: 3 }, 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 },
},
}
} }
}), { }), {
default: { default: {
background: background(layer, "active"), background: background(layer, "active"),
}, },
hover: { hovered: {
background: background(layer, "active"), background: background(layer, "active"),
}, },
}), }),

112
styles/src/styleTree/copilot.ts
View File

@ -9,53 +9,57 @@ export default function copilot(colorScheme: ColorScheme) {
let ctaButton = let ctaButton =
// Copied from welcome screen. FIXME: Move this into a ZDS component // Copied from welcome screen. FIXME: Move this into a ZDS component
interactive({ interactive({
background: background(layer), base: {
border: border(layer, "default"), background: background(layer),
cornerRadius: 4, border: border(layer, "default"),
margin: { cornerRadius: 4,
top: 4, margin: {
bottom: 4, top: 4,
left: 8, bottom: 4,
right: 8, left: 8,
right: 8,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" })
}, },
padding: { state: {
top: 3, hovered: {
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" })
},
{
hover: {
...text(layer, "sans", "default", { size: "sm" }), ...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"), background: background(layer, "hovered"),
border: border(layer, "active"), border: border(layer, "active"),
}, },
}); }
});
return { return {
outLinkIcon: outLinkIcon:
interactive({ interactive({
icon: svg( base: {
foreground(layer, "variant"), icon: svg(
"icons/link_out_12.svg", foreground(layer, "variant"),
12, "icons/link_out_12.svg",
12 12,
), 12
container: { ),
cornerRadius: 6, container: {
padding: { left: 6 }, cornerRadius: 6,
padding: { left: 6 },
},
}, },
}, state: {
{ hovered: {
hover: {
icon: { icon: {
color: color:
foreground(layer, "hovered") foreground(layer, "hovered")
} }
}, },
}), }
}),
modal: { modal: {
titleText: { titleText: {
@ -82,7 +86,8 @@ export default function copilot(colorScheme: ColorScheme) {
bottom: 8, bottom: 8,
}, },
}, },
closeIcon: interactive( closeIcon: interactive({
base:
{ {
icon: svg( icon: svg(
foreground(layer, "variant"), foreground(layer, "variant"),
@ -103,8 +108,8 @@ export default function copilot(colorScheme: ColorScheme) {
}, },
} }
}, },
{ state: {
hover: { hovered: {
icon: svg( icon: svg(
foreground(layer, "on"), foreground(layer, "on"),
"icons/x_mark_8.svg", "icons/x_mark_8.svg",
@ -120,7 +125,8 @@ export default function copilot(colorScheme: ColorScheme) {
8 8
), ),
}, },
}), }
}),
dimensions: { dimensions: {
width: 280, width: 280,
height: 280, height: 280,
@ -196,27 +202,29 @@ export default function copilot(colorScheme: ColorScheme) {
}, },
right: (content_width * 1) / 3, right: (content_width * 1) / 3,
rightContainer: interactive({ rightContainer: interactive({
border: border(colorScheme.lowest, "inverted", { base: {
bottom: false, border: border(colorScheme.lowest, "inverted", {
right: false,
top: false,
left: true,
}),
padding: {
top: 3,
bottom: 5,
left: 8,
right: 0,
}
}, {
hover: {
border: border(layer, "active", {
bottom: false, bottom: false,
right: false, right: false,
top: false, top: false,
left: true, left: true,
}), }),
}, padding: {
top: 3,
bottom: 5,
left: 8,
right: 0,
}
}, state: {
hovered: {
border: border(layer, "active", {
bottom: false,
right: false,
top: false,
left: true,
}),
},
}
}) })
}, },
}, },

64
styles/src/styleTree/editor.ts
View File

@ -51,14 +51,16 @@ export default function editor(colorScheme: ColorScheme) {
suggestion: syntax.predictive, suggestion: syntax.predictive,
codeActions: { codeActions: {
indicator: toggleable(interactive({ indicator: toggleable(interactive({
color: foreground(layer, "variant"), base: {
}, { color: foreground(layer, "variant"),
clicked: { }, state: {
color: foreground(layer, "base"), clicked: {
}, color: foreground(layer, "base"),
hover: { },
color: foreground(layer, "on"), hovered: {
}, color: foreground(layer, "on"),
},
}
}), }),
{ {
default: { default: {
@ -73,14 +75,16 @@ export default function editor(colorScheme: ColorScheme) {
foldedIcon: "icons/chevron_right_8.svg", foldedIcon: "icons/chevron_right_8.svg",
foldableIcon: "icons/chevron_down_8.svg", foldableIcon: "icons/chevron_down_8.svg",
indicator: toggleable(interactive({ indicator: toggleable(interactive({
color: foreground(layer, "variant"), base: {
}, { color: foreground(layer, "variant"),
clicked: { }, state: {
color: foreground(layer, "base"), clicked: {
}, color: foreground(layer, "base"),
hover: { },
color: foreground(layer, "on"), hovered: {
}, color: foreground(layer, "on"),
},
}
}), }),
{ {
default: { default: {
@ -231,19 +235,21 @@ export default function editor(colorScheme: ColorScheme) {
underline: syntax.linkUri.underline, underline: syntax.linkUri.underline,
}, },
jumpIcon: interactive({ jumpIcon: interactive({
color: foreground(layer, "on"), base: {
iconWidth: 20, color: foreground(layer, "on"),
buttonWidth: 20, iconWidth: 20,
cornerRadius: 6, buttonWidth: 20,
padding: { cornerRadius: 6,
top: 6, padding: {
bottom: 6, top: 6,
left: 6, bottom: 6,
right: 6, left: 6,
} right: 6,
}, { }
hover: { }, state: {
background: background(layer, "on", "hovered"), hovered: {
background: background(layer, "on", "hovered"),
}
} }
}), }),

37
styles/src/styleTree/picker.ts
View File

@ -41,23 +41,26 @@ export default function picker(colorScheme: ColorScheme): any {
padding: {}, padding: {},
}, },
item: toggleable(interactive({ item: toggleable(interactive({
padding: { base: {
bottom: 4, padding: {
left: 12, bottom: 4,
right: 12, left: 12,
top: 4, right: 12,
}, top: 4,
margin: { },
top: 1, margin: {
left: 4, top: 1,
right: 4, left: 4,
}, right: 4,
cornerRadius: 8, },
text: text(layer, "sans", "variant"), cornerRadius: 8,
highlightText: text(layer, "sans", "accent", { weight: "bold" }), text: text(layer, "sans", "variant"),
}, { highlightText: text(layer, "sans", "accent", { weight: "bold" }),
hover: { }
background: withOpacity(background(layer, "hovered"), 0.5), , state: {
hovered: {
background: withOpacity(background(layer, "hovered"), 0.5),
}
} }
}), }),
{ {

58
styles/src/styleTree/projectPanel.ts
View File

@ -30,15 +30,17 @@ export default function projectPanel(colorScheme: ColorScheme) {
} }
let entry = toggleable(interactive({ let entry = toggleable(interactive({
...baseEntry, base: {
text: text(layer, "mono", "variant", { size: "sm" }), ...baseEntry,
status, text: text(layer, "mono", "variant", { size: "sm" }),
}, status,
}, state:
{ {
hover: { hovered: {
background: background(layer, "variant", "hovered"), background: background(layer, "variant", "hovered"),
} }
}), }
}),
{ {
default: { default: {
/*background: colorScheme.isLight /*background: colorScheme.isLight
@ -46,7 +48,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
: background(layer, "active") ,*/ // todo posiewic : background(layer, "active") ,*/ // todo posiewic
text: text(layer, "mono", "active", { size: "sm" }), text: text(layer, "mono", "active", { size: "sm" }),
}, },
hover: { hovered: {
//background: background(layer, "active"), //background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }), text: text(layer, "mono", "active", { size: "sm" }),
}, },
@ -55,27 +57,29 @@ export default function projectPanel(colorScheme: ColorScheme) {
return { return {
openProjectButton: interactive({ openProjectButton: interactive({
background: background(layer), base: {
border: border(layer, "active"), background: background(layer),
cornerRadius: 4,
margin: {
top: 16,
left: 16,
right: 16,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" })
}, {
hover: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"), border: border(layer, "active"),
}, cornerRadius: 4,
margin: {
top: 16,
left: 16,
right: 16,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" })
}, state: {
hovered: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
}
}), }),
background: background(layer), background: background(layer),
padding: { left: 6, right: 6, top: 0, bottom: 6 }, padding: { left: 6, right: 6, top: 0, bottom: 6 },

128
styles/src/styleTree/statusBar.ts
View File

@ -27,74 +27,82 @@ export default function statusBar(colorScheme: ColorScheme) {
border: border(layer, { top: true, overlay: true }), border: border(layer, { top: true, overlay: true }),
cursorPosition: text(layer, "sans", "variant"), cursorPosition: text(layer, "sans", "variant"),
activeLanguage: interactive({ activeLanguage: interactive({
padding: { left: 6, right: 6 }, base: {
...text(layer, "sans", "variant") padding: { left: 6, right: 6 },
}, ...text(layer, "sans", "variant")
{ },
hover: { state: {
hovered: {
...text(layer, "sans", "on"), ...text(layer, "sans", "on"),
} }
}, }
},
), ),
autoUpdateProgressMessage: text(layer, "sans", "variant"), autoUpdateProgressMessage: text(layer, "sans", "variant"),
autoUpdateDoneMessage: text(layer, "sans", "variant"), autoUpdateDoneMessage: text(layer, "sans", "variant"),
lspStatus: interactive({ lspStatus: interactive({
...diagnosticStatusContainer, base: {
iconSpacing: 4, ...diagnosticStatusContainer,
iconWidth: 14, iconSpacing: 4,
height: 18, iconWidth: 14,
message: text(layer, "sans"), height: 18,
iconColor: foreground(layer) message: text(layer, "sans"),
}, iconColor: foreground(layer)
{ },
hover: { state: {
hovered: {
message: text(layer, "sans"), message: text(layer, "sans"),
iconColor: foreground(layer), iconColor: foreground(layer),
background: background(layer, "hovered"), background: background(layer, "hovered"),
} }
}), }
}),
diagnosticMessage: interactive({ diagnosticMessage: interactive({
...text(layer, "sans") base: {
...text(layer, "sans")
},
state: { hovered: text(layer, "sans", "hovered") }
}, },
{ hover: text(layer, "sans", "hovered") },
), ),
diagnosticSummary: diagnosticSummary:
interactive({ interactive({
height: 20, base: {
iconWidth: 16, height: 20,
iconSpacing: 2, iconWidth: 16,
summarySpacing: 6, iconSpacing: 2,
text: text(layer, "sans", { size: "sm" }), summarySpacing: 6,
iconColorOk: foreground(layer, "variant"), text: text(layer, "sans", { size: "sm" }),
iconColorWarning: foreground(layer, "warning"), iconColorOk: foreground(layer, "variant"),
iconColorError: foreground(layer, "negative"), iconColorWarning: foreground(layer, "warning"),
containerOk: { iconColorError: foreground(layer, "negative"),
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
},
containerWarning: {
...diagnosticStatusContainer,
background: background(layer, "warning"),
border: border(layer, "warning"),
},
containerError: {
...diagnosticStatusContainer,
background: background(layer, "negative"),
border: border(layer, "negative"),
}
}, {
hover: {
iconColorOk: foreground(layer, "on"),
containerOk: { containerOk: {
background: background(layer, "on", "hovered"), cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
}, },
containerWarning: { containerWarning: {
background: background(layer, "warning", "hovered"), ...diagnosticStatusContainer,
border: border(layer, "warning", "hovered"), background: background(layer, "warning"),
border: border(layer, "warning"),
}, },
containerError: { containerError: {
background: background(layer, "negative", "hovered"), ...diagnosticStatusContainer,
border: border(layer, "negative", "hovered"), background: background(layer, "negative"),
border: border(layer, "negative"),
}
}, state: {
hovered: {
iconColorOk: foreground(layer, "on"),
containerOk: {
background: background(layer, "on", "hovered"),
},
containerWarning: {
background: background(layer, "warning", "hovered"),
border: border(layer, "warning", "hovered"),
},
containerError: {
background: background(layer, "negative", "hovered"),
border: border(layer, "negative", "hovered"),
}
} }
} }
} }
@ -104,17 +112,19 @@ export default function statusBar(colorScheme: ColorScheme) {
groupBottom: {}, groupBottom: {},
groupRight: {}, groupRight: {},
button: toggleable(interactive({ button: toggleable(interactive({
...statusContainer, base: {
iconSize: 16, ...statusContainer,
iconColor: foreground(layer, "variant"), iconSize: 16,
label: { iconColor: foreground(layer, "variant"),
margin: { left: 6 }, label: {
...text(layer, "sans", { size: "sm" }), margin: { left: 6 },
}, ...text(layer, "sans", { size: "sm" }),
}, { },
hover: { }, state: {
iconColor: foreground(layer, "hovered"), hovered: {
background: background(layer, "variant"), iconColor: foreground(layer, "hovered"),
background: background(layer, "variant"),
}
} }
}), }),
{ {

16
styles/src/styleTree/tabBar.ts
View File

@ -90,15 +90,17 @@ export default function tabBar(colorScheme: ColorScheme) {
}, },
draggedTab, draggedTab,
paneButton: toggleable(interactive({ paneButton: toggleable(interactive({
color: foreground(layer, "variant"), base: {
iconWidth: 12, color: foreground(layer, "variant"),
buttonWidth: activePaneActiveTab.height, iconWidth: 12,
}, buttonWidth: activePaneActiveTab.height,
{ },
hover: { state: {
hovered: {
color: foreground(layer, "hovered"), color: foreground(layer, "hovered"),
} }
}), }
}),
{ {
default: { default: {
color: foreground(layer, "accent"), color: foreground(layer, "accent"),

38
styles/src/styleTree/welcome.ts
View File

@ -65,24 +65,26 @@ export default function welcome(colorScheme: ColorScheme) {
}, },
}, },
button: interactive({ button: interactive({
background: background(layer), base: {
border: border(layer, "active"), background: background(layer),
cornerRadius: 4, border: border(layer, "active"),
margin: { cornerRadius: 4,
top: 4, margin: {
bottom: 4, top: 4,
}, bottom: 4,
padding: { },
top: 3, padding: {
bottom: 3, top: 3,
left: 7, bottom: 3,
right: 7, left: 7,
}, right: 7,
...text(layer, "sans", "default", interactive_text_size) },
}, { ...text(layer, "sans", "default", interactive_text_size)
hover: { }, state: {
...text(layer, "sans", "default", interactive_text_size), hovered: {
background: background(layer, "hovered"), ...text(layer, "sans", "default", interactive_text_size),
background: background(layer, "hovered"),
}
} }
}), }),

164
styles/src/styleTree/workspace.ts
View File

@ -18,26 +18,28 @@ export default function workspace(colorScheme: ColorScheme) {
const isLight = colorScheme.isLight const isLight = colorScheme.isLight
const itemSpacing = 8 const itemSpacing = 8
const titlebarButton = toggleable(interactive({ const titlebarButton = toggleable(interactive({
cornerRadius: 6, base: {
padding: { cornerRadius: 6,
top: 1, padding: {
bottom: 1, top: 1,
left: 8, bottom: 1,
right: 8, left: 8,
}, right: 8,
...text(layer, "sans", "variant", { size: "xs" }), },
background: background(layer, "variant"), ...text(layer, "sans", "variant", { size: "xs" }),
border: border(layer), background: background(layer, "variant"),
}, { border: border(layer),
hover: { }, state: {
...text(layer, "sans", "variant", "hovered", { size: "xs" }), hovered: {
background: background(layer, "variant", "hovered"), ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
border: border(layer, "variant", "hovered"), background: background(layer, "variant", "hovered"),
}, border: border(layer, "variant", "hovered"),
clicked: { },
...text(layer, "sans", "variant", "pressed", { size: "xs" }), clicked: {
background: background(layer, "variant", "pressed"), ...text(layer, "sans", "variant", "pressed", { size: "xs" }),
border: border(layer, "variant", "pressed"), background: background(layer, "variant", "pressed"),
border: border(layer, "variant", "pressed"),
}
} }
}), }),
{ {
@ -86,17 +88,19 @@ export default function workspace(colorScheme: ColorScheme) {
}, },
keyboardHint: keyboardHint:
interactive({ interactive({
...text(layer, "sans", "variant", { size: "sm" }), base: {
padding: { ...text(layer, "sans", "variant", { size: "sm" }),
top: 3, padding: {
left: 8, top: 3,
right: 8, left: 8,
bottom: 3, right: 8,
}, bottom: 3,
cornerRadius: 8 },
}, { cornerRadius: 8
hover: { }, state: {
...text(layer, "sans", "active", { size: "sm" }), hovered: {
...text(layer, "sans", "active", { size: "sm" }),
}
} }
}), }),
@ -250,33 +254,37 @@ export default function workspace(colorScheme: ColorScheme) {
cornerRadius: 6, cornerRadius: 6,
}, },
callControl: interactive({ callControl: interactive({
cornerRadius: 6, base: {
color: foreground(layer, "variant"), cornerRadius: 6,
iconWidth: 12, color: foreground(layer, "variant"),
buttonWidth: 20, iconWidth: 12,
}, { buttonWidth: 20,
hover: { }, state: {
background: background(layer, "variant", "hovered"), hovered: {
color: foreground(layer, "variant", "hovered"), background: background(layer, "variant", "hovered"),
}, color: foreground(layer, "variant", "hovered"),
},
}
}), }),
toggleContactsButton: toggleable(interactive({ toggleContactsButton: toggleable(interactive({
margin: { left: itemSpacing }, base: {
cornerRadius: 6, margin: { left: itemSpacing },
color: foreground(layer, "variant"), cornerRadius: 6,
iconWidth: 14, color: foreground(layer, "variant"),
buttonWidth: 20, iconWidth: 14,
}, buttonWidth: 20,
{ },
state: {
clicked: { clicked: {
background: background(layer, "variant", "pressed"), background: background(layer, "variant", "pressed"),
color: foreground(layer, "variant", "pressed"), color: foreground(layer, "variant", "pressed"),
}, },
hover: { hovered: {
background: background(layer, "variant", "hovered"), background: background(layer, "variant", "hovered"),
color: foreground(layer, "variant", "hovered"), color: foreground(layer, "variant", "hovered"),
} }
}), }
}),
{ {
default: { default: {
background: background(layer, "variant", "active"), background: background(layer, "variant", "active"),
@ -318,38 +326,42 @@ export default function workspace(colorScheme: ColorScheme) {
itemSpacing: 8, itemSpacing: 8,
navButton: interactive( navButton: interactive(
{ {
color: foreground(colorScheme.highest, "on"), base: {
iconWidth: 12, color: foreground(colorScheme.highest, "on"),
buttonWidth: 24, iconWidth: 12,
cornerRadius: 6, buttonWidth: 24,
}, { cornerRadius: 6,
hover: { }, state: {
color: foreground(colorScheme.highest, "on", "hovered"), hovered: {
background: background( color: foreground(colorScheme.highest, "on", "hovered"),
colorScheme.highest, background: background(
"on", colorScheme.highest,
"hovered" "on",
), "hovered"
}, ),
disabled: { },
color: foreground(colorScheme.highest, "on", "disabled"), disabled: {
}, color: foreground(colorScheme.highest, "on", "disabled"),
}), },
}
}),
padding: { left: 8, right: 8, top: 4, bottom: 4 }, padding: { left: 8, right: 8, top: 4, bottom: 4 },
}, },
breadcrumbHeight: 24, breadcrumbHeight: 24,
breadcrumbs: interactive({ breadcrumbs: interactive({
...text(colorScheme.highest, "sans", "variant"), base: {
cornerRadius: 6, ...text(colorScheme.highest, "sans", "variant"),
padding: { cornerRadius: 6,
left: 6, padding: {
right: 6, left: 6,
right: 6,
}
}, state: {
hovered: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(colorScheme.highest, "on", "hovered"),
},
} }
}, {
hover: {
color: foreground(colorScheme.highest, "on", "hovered"),
background: background(colorScheme.highest, "on", "hovered"),
},
}), }),
disconnectedOverlay: { disconnectedOverlay: {
...text(layer, "sans"), ...text(layer, "sans"),