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,
key:
toggleable(interactive({
text: text(layer, "mono", "variant", "default", { size: "xs" }),
cornerRadius: 2,
background: background(layer, "on"),
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
},
margin: {
top: 1,
bottom: 1,
left: 2,
},
}, { hover: { cornerRadius: 4, padding: { top: 17 } } }), {
base: {
text: text(layer, "mono", "variant", "default", { size: "xs" }),
cornerRadius: 2,
background: background(layer, "on"),
padding: {
top: 1,
bottom: 1,
left: 6,
right: 6,
},
margin: {
top: 1,
bottom: 1,
left: 2,
},
}, state: { hovered: { cornerRadius: 4, padding: { top: 17 } } }
}), {
default: {
text: text(layer, "mono", "on", "default", { size: "xs" }),
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,
sectionIconSize: 8,
headerRow: toggleable(interactive({
...text(layer, "mono", { size: "sm" }),
margin: { top: 14 },
padding: {
left: sidePadding,
right: sidePadding,
},
background: background(layer, "default"),// posiewic: breaking change
}, {}),
base: {
...text(layer, "mono", { size: "sm" }),
margin: { top: 14 },
padding: {
left: sidePadding,
right: sidePadding,
},
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: {
...text(layer, "mono", "active", { size: "sm" }),
@ -88,27 +91,30 @@ export default function contactsPanel(colorScheme: ColorScheme) {
},
}),
leaveCall: interactive({
background: background(layer),
border: border(layer),
cornerRadius: 6,
margin: {
top: 1,
},
padding: {
top: 1,
bottom: 1,
left: 7,
right: 7,
},
...text(layer, "sans", "variant", { size: "xs" }),
},
{
hover: {
base: {
background: background(layer),
border: border(layer),
cornerRadius: 6,
margin: {
top: 1,
},
padding: {
top: 1,
bottom: 1,
left: 7,
right: 7,
},
...text(layer, "sans", "variant", { size: "xs" }),
}
,
state: {
hovered: {
...text(layer, "sans", "hovered", { size: "xs" }),
background: background(layer, "hovered"),
border: border(layer, "hovered"),
}
}
}
),
contactRow: {
inactive: {
@ -153,13 +159,14 @@ export default function contactsPanel(colorScheme: ColorScheme) {
},
},
contactButtonSpacing: nameMargin,
contactButton: interactive(
contactButton,
{
hover: {
contactButton: interactive({
base: { ...contactButton },
state: {
hovered: {
background: background(layer, "hovered"),
},
}),
}
}),
disabledButton: {
...contactButton,
background: background(layer, "on"),
@ -169,14 +176,16 @@ export default function contactsPanel(colorScheme: ColorScheme) {
...text(layer, "mono", "variant", { size: "xs" }),
},
treeBranch: toggleable(interactive({
color: borderColor(layer),
width: 1,
},
{
hover: {
base: {
color: borderColor(layer),
width: 1,
},
state: {
hovered: {
color: borderColor(layer),
},
}),
}
}),
{
default: {
color: borderColor(layer),

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

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

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

@ -13,35 +13,37 @@ export default function contextMenu(colorScheme: ColorScheme) {
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" }),
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", "hovered", {
...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", "hovered", {
size: "sm",
weight: "bold",
}),
padding: { left: 3, right: 3 },
},
}
}
}), {
default: {
background: background(layer, "active"),
},
hover: {
hovered: {
background: background(layer, "active"),
},
}),

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

@ -9,53 +9,57 @@ export default function copilot(colorScheme: ColorScheme) {
let ctaButton =
// Copied from welcome screen. FIXME: Move this into a ZDS component
interactive({
background: background(layer),
border: border(layer, "default"),
cornerRadius: 4,
margin: {
top: 4,
bottom: 4,
left: 8,
right: 8,
base: {
background: background(layer),
border: border(layer, "default"),
cornerRadius: 4,
margin: {
top: 4,
bottom: 4,
left: 8,
right: 8,
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" })
},
padding: {
top: 3,
bottom: 3,
left: 7,
right: 7,
},
...text(layer, "sans", "default", { size: "sm" })
},
{
hover: {
state: {
hovered: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
border: border(layer, "active"),
},
});
}
});
return {
outLinkIcon:
interactive({
icon: svg(
foreground(layer, "variant"),
"icons/link_out_12.svg",
12,
12
),
container: {
cornerRadius: 6,
padding: { left: 6 },
base: {
icon: svg(
foreground(layer, "variant"),
"icons/link_out_12.svg",
12,
12
),
container: {
cornerRadius: 6,
padding: { left: 6 },
},
},
},
{
hover: {
state: {
hovered: {
icon: {
color:
foreground(layer, "hovered")
}
},
}),
}
}),
modal: {
titleText: {
@ -82,7 +86,8 @@ export default function copilot(colorScheme: ColorScheme) {
bottom: 8,
},
},
closeIcon: interactive(
closeIcon: interactive({
base:
{
icon: svg(
foreground(layer, "variant"),
@ -103,8 +108,8 @@ export default function copilot(colorScheme: ColorScheme) {
},
}
},
{
hover: {
state: {
hovered: {
icon: svg(
foreground(layer, "on"),
"icons/x_mark_8.svg",
@ -120,7 +125,8 @@ export default function copilot(colorScheme: ColorScheme) {
8
),
},
}),
}
}),
dimensions: {
width: 280,
height: 280,
@ -196,27 +202,29 @@ export default function copilot(colorScheme: ColorScheme) {
},
right: (content_width * 1) / 3,
rightContainer: interactive({
border: border(colorScheme.lowest, "inverted", {
bottom: false,
right: false,
top: false,
left: true,
}),
padding: {
top: 3,
bottom: 5,
left: 8,
right: 0,
}
}, {
hover: {
border: border(layer, "active", {
base: {
border: border(colorScheme.lowest, "inverted", {
bottom: false,
right: false,
top: false,
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,
codeActions: {
indicator: toggleable(interactive({
color: foreground(layer, "variant"),
}, {
clicked: {
color: foreground(layer, "base"),
},
hover: {
color: foreground(layer, "on"),
},
base: {
color: foreground(layer, "variant"),
}, state: {
clicked: {
color: foreground(layer, "base"),
},
hovered: {
color: foreground(layer, "on"),
},
}
}),
{
default: {
@ -73,14 +75,16 @@ export default function editor(colorScheme: ColorScheme) {
foldedIcon: "icons/chevron_right_8.svg",
foldableIcon: "icons/chevron_down_8.svg",
indicator: toggleable(interactive({
color: foreground(layer, "variant"),
}, {
clicked: {
color: foreground(layer, "base"),
},
hover: {
color: foreground(layer, "on"),
},
base: {
color: foreground(layer, "variant"),
}, state: {
clicked: {
color: foreground(layer, "base"),
},
hovered: {
color: foreground(layer, "on"),
},
}
}),
{
default: {
@ -231,19 +235,21 @@ export default function editor(colorScheme: ColorScheme) {
underline: syntax.linkUri.underline,
},
jumpIcon: interactive({
color: foreground(layer, "on"),
iconWidth: 20,
buttonWidth: 20,
cornerRadius: 6,
padding: {
top: 6,
bottom: 6,
left: 6,
right: 6,
}
}, {
hover: {
background: background(layer, "on", "hovered"),
base: {
color: foreground(layer, "on"),
iconWidth: 20,
buttonWidth: 20,
cornerRadius: 6,
padding: {
top: 6,
bottom: 6,
left: 6,
right: 6,
}
}, state: {
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: {},
},
item: toggleable(interactive({
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" }),
}, {
hover: {
background: withOpacity(background(layer, "hovered"), 0.5),
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" }),
}
, 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({
...baseEntry,
text: text(layer, "mono", "variant", { size: "sm" }),
status,
},
base: {
...baseEntry,
text: text(layer, "mono", "variant", { size: "sm" }),
status,
}, state:
{
hover: {
hovered: {
background: background(layer, "variant", "hovered"),
}
}),
}
}),
{
default: {
/*background: colorScheme.isLight
@ -46,7 +48,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
: background(layer, "active") ,*/ // todo posiewic
text: text(layer, "mono", "active", { size: "sm" }),
},
hover: {
hovered: {
//background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
@ -55,27 +57,29 @@ export default function projectPanel(colorScheme: ColorScheme) {
return {
openProjectButton: interactive({
background: background(layer),
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" })
}, {
hover: {
...text(layer, "sans", "default", { size: "sm" }),
background: background(layer, "hovered"),
base: {
background: background(layer),
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),
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 }),
cursorPosition: text(layer, "sans", "variant"),
activeLanguage: interactive({
padding: { left: 6, right: 6 },
...text(layer, "sans", "variant")
},
{
hover: {
base: {
padding: { left: 6, right: 6 },
...text(layer, "sans", "variant")
},
state: {
hovered: {
...text(layer, "sans", "on"),
}
},
}
},
),
autoUpdateProgressMessage: text(layer, "sans", "variant"),
autoUpdateDoneMessage: text(layer, "sans", "variant"),
lspStatus: interactive({
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
height: 18,
message: text(layer, "sans"),
iconColor: foreground(layer)
},
{
hover: {
base: {
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
height: 18,
message: text(layer, "sans"),
iconColor: foreground(layer)
},
state: {
hovered: {
message: text(layer, "sans"),
iconColor: foreground(layer),
background: background(layer, "hovered"),
}
}),
}
}),
diagnosticMessage: interactive({
...text(layer, "sans")
base: {
...text(layer, "sans")
},
state: { hovered: text(layer, "sans", "hovered") }
},
{ hover: text(layer, "sans", "hovered") },
),
diagnosticSummary:
interactive({
height: 20,
iconWidth: 16,
iconSpacing: 2,
summarySpacing: 6,
text: text(layer, "sans", { size: "sm" }),
iconColorOk: foreground(layer, "variant"),
iconColorWarning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"),
containerOk: {
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"),
base: {
height: 20,
iconWidth: 16,
iconSpacing: 2,
summarySpacing: 6,
text: text(layer, "sans", { size: "sm" }),
iconColorOk: foreground(layer, "variant"),
iconColorWarning: foreground(layer, "warning"),
iconColorError: foreground(layer, "negative"),
containerOk: {
background: background(layer, "on", "hovered"),
cornerRadius: 6,
padding: { top: 3, bottom: 3, left: 7, right: 7 },
},
containerWarning: {
background: background(layer, "warning", "hovered"),
border: border(layer, "warning", "hovered"),
...diagnosticStatusContainer,
background: background(layer, "warning"),
border: border(layer, "warning"),
},
containerError: {
background: background(layer, "negative", "hovered"),
border: border(layer, "negative", "hovered"),
...diagnosticStatusContainer,
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: {},
groupRight: {},
button: toggleable(interactive({
...statusContainer,
iconSize: 16,
iconColor: foreground(layer, "variant"),
label: {
margin: { left: 6 },
...text(layer, "sans", { size: "sm" }),
},
}, {
hover: {
iconColor: foreground(layer, "hovered"),
background: background(layer, "variant"),
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"),
}
}
}),
{

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

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

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

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