mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-25 01:34:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Rebalance text and icon color usage...

Browse source 
...to better differentiate between primary, secondary and muted.
This commit is contained in:
Nate Butler 2022-07-26 15:53:48 -04:00
parent 4ff007eaab
commit 01eed2c844
8 changed files with 31 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
styles/package-lock.json generated
View file

@ -5,6 +5,7 @@
"requires": true,
"packages": {
"": {
"name": "styles",
"version": "1.0.0",
"license": "ISC",
"dependencies": {

4
styles/src/styleTree/contextMenu.ts
View file

@ -18,7 +18,7 @@ export default function contextMenu(theme: Theme) {
item: {
padding: { left: 4, right: 4, top: 2, bottom: 2 },
cornerRadius: 6,
label: text(theme, "sans", "secondary", { size: "sm" }),
label: text(theme, "sans", "primary", { size: "sm" }),
keystroke: {
...text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
padding: { left: 3, right: 3 },
@ -29,7 +29,7 @@ export default function contextMenu(theme: Theme) {
},
active: {
background: backgroundColor(theme, 300, "active"),
text: text(theme, "sans", "primary", { size: "sm" }),
text: text(theme, "sans", "active", { size: "sm" }),
},
activeHover: {
background: backgroundColor(theme, 300, "hovered"),

16
styles/src/styleTree/editor.ts
View file

@ -55,7 +55,7 @@ export default function editor(theme: Theme) {
textColor: theme.syntax.primary.color,
background: backgroundColor(theme, 500),
activeLineBackground: theme.editor.line.active,
codeActionsIndicator: iconColor(theme, "muted"),
codeActionsIndicator: iconColor(theme, "secondary"),
diffBackgroundDeleted: backgroundColor(theme, "error"),
diffBackgroundInserted: backgroundColor(theme, "ok"),
documentHighlightReadBackground: theme.editor.highlight.occurrence,
@ -107,7 +107,7 @@ export default function editor(theme: Theme) {
top: true,
}),
code: {
...text(theme, "mono", "muted", { size: "sm" }),
...text(theme, "mono", "secondary", { size: "sm" }),
margin: {
left: 10,
},
@ -135,17 +135,17 @@ export default function editor(theme: Theme) {
warningDiagnostic: diagnostic(theme, "warning"),
informationDiagnostic: diagnostic(theme, "info"),
hintDiagnostic: diagnostic(theme, "info"),
invalidErrorDiagnostic: diagnostic(theme, "muted"),
invalidHintDiagnostic: diagnostic(theme, "muted"),
invalidInformationDiagnostic: diagnostic(theme, "muted"),
invalidWarningDiagnostic: diagnostic(theme, "muted"),
invalidErrorDiagnostic: diagnostic(theme, "secondary"),
invalidHintDiagnostic: diagnostic(theme, "secondary"),
invalidInformationDiagnostic: diagnostic(theme, "secondary"),
invalidWarningDiagnostic: diagnostic(theme, "secondary"),
hoverPopover: hoverPopover(theme),
linkDefinition: {
color: theme.syntax.linkUri.color,
underline: theme.syntax.linkUri.underline,
},
jumpIcon: {
color: iconColor(theme, "muted"),
color: iconColor(theme, "secondary"),
iconWidth: 20,
buttonWidth: 20,
cornerRadius: 6,
@ -157,7 +157,7 @@ export default function editor(theme: Theme) {
},
hover: {
color: iconColor(theme, "active"),
background: backgroundColor(theme, "on500", "base"),
background: backgroundColor(theme, "on500"),
},
},
compositionMark: {

4
styles/src/styleTree/picker.ts
View file

@ -24,7 +24,7 @@ export default function picker(theme: Theme) {
highlightText: text(theme, "sans", "feature", { weight: "bold" }),
active: {
background: backgroundColor(theme, 300, "active"),
text: text(theme, "sans", "primary"),
text: text(theme, "sans", "active"),
},
hover: {
background: backgroundColor(theme, 300, "hovered"),
@ -32,7 +32,7 @@ export default function picker(theme: Theme) {
},
border: border(theme, "primary"),
empty: {
text: text(theme, "sans", "placeholder"),
text: text(theme, "sans", "muted"),
padding: {
bottom: 4,
left: 12,

11
styles/src/styleTree/projectPanel.ts
View file

@ -12,25 +12,24 @@ export default function projectPanel(theme: Theme) {
iconColor: iconColor(theme, "muted"),
iconSize: 8,
iconSpacing: 8,
text: text(theme, "mono", "muted", { size: "sm" }),
text: text(theme, "mono", "secondary", { size: "sm" }),
hover: {
background: backgroundColor(theme, 300, "hovered"),
text: text(theme, "mono", "primary", { size: "sm" }),
},
active: {
background: backgroundColor(theme, 300, "active"),
text: text(theme, "mono", "primary", { size: "sm" }),
text: text(theme, "mono", "active", { size: "sm" }),
},
activeHover: {
background: backgroundColor(theme, 300, "hovered"),
background: backgroundColor(theme, 300, "active"),
text: text(theme, "mono", "active", { size: "sm" }),
},
},
cutEntryFade: 0.4,
ignoredEntryFade: 0.6,
filenameEditor: {
background: backgroundColor(theme, 500, "active"),
text: text(theme, "mono", "primary", { size: "sm" }),
background: backgroundColor(theme, "on300"),
text: text(theme, "mono", "active", { size: "sm" }),
selection: player(theme, 1).selection,
},
};

20
styles/src/styleTree/statusBar.ts
View file

@ -23,28 +23,28 @@ export default function statusBar(theme: Theme) {
right: 6,
},
border: border(theme, "primary", { top: true, overlay: true }),
cursorPosition: text(theme, "sans", "muted"),
autoUpdateProgressMessage: text(theme, "sans", "muted"),
autoUpdateDoneMessage: text(theme, "sans", "muted"),
cursorPosition: text(theme, "sans", "secondary"),
autoUpdateProgressMessage: text(theme, "sans", "secondary"),
autoUpdateDoneMessage: text(theme, "sans", "secondary"),
lspStatus: {
...diagnosticStatusContainer,
iconSpacing: 4,
iconWidth: 14,
height: 18,
message: text(theme, "sans", "muted"),
message: text(theme, "sans", "secondary"),
iconColor: iconColor(theme, "muted"),
hover: {
message: text(theme, "sans", "primary"),
iconColor: iconColor(theme, "active"),
iconColor: iconColor(theme, "primary"),
background: backgroundColor(theme, 300, "hovered"),
},
},
diagnosticMessage: {
...text(theme, "sans", "muted"),
hover: text(theme, "sans", "secondary"),
...text(theme, "sans", "secondary"),
hover: text(theme, "sans", "active"),
},
feedback: {
...text(theme, "sans", "muted"),
...text(theme, "sans", "secondary"),
hover: text(theme, "sans", "active"),
},
diagnosticSummary: {
@ -53,7 +53,7 @@ export default function statusBar(theme: Theme) {
iconSpacing: 2,
summarySpacing: 6,
text: text(theme, "sans", "primary", { size: "sm" }),
iconColorOk: iconColor(theme, "secondary"),
iconColorOk: iconColor(theme, "muted"),
iconColorWarning: iconColor(theme, "warning"),
iconColorError: iconColor(theme, "error"),
containerOk: {
@ -95,7 +95,7 @@ export default function statusBar(theme: Theme) {
item: {
...statusContainer,
iconSize: 16,
iconColor: iconColor(theme, "secondary"),
iconColor: iconColor(theme, "muted"),
hover: {
iconColor: iconColor(theme, "active"),
background: backgroundColor(theme, 300, "hovered"),

4
styles/src/styleTree/tooltip.ts
View file

@ -9,13 +9,13 @@ export default function tooltip(theme: Theme) {
margin: { top: 6, left: 6 },
shadow: popoverShadow(theme),
cornerRadius: 6,
text: text(theme, "sans", "secondary", { size: "xs", weight: "bold" }),
text: text(theme, "sans", "primary", { size: "xs" }),
keystroke: {
background: backgroundColor(theme, "on500"),
cornerRadius: 4,
margin: { left: 6 },
padding: { left: 4, right: 4 },
...text(theme, "mono", "muted", { size: "xs", weight: "bold" }),
...text(theme, "mono", "secondary", { size: "xs", weight: "bold" }),
},
maxTextWidth: 200,
};

2
styles/src/styleTree/workspace.ts
View file

@ -128,7 +128,7 @@ export default function workspace(theme: Theme) {
cornerRadius: 6,
hover: {
color: iconColor(theme, "active"),
background: backgroundColor(theme, 300),
background: backgroundColor(theme, "on500", "hovered"),
},
disabled: {
color: withOpacity(iconColor(theme, "muted"), 0.6),