styles/package-lock.json 🔗
@@ -5,6 +5,7 @@
"requires": true,
"packages": {
"": {
+ "name": "styles",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
Merge pull request #1416 from zed-industries/update-theme-styles
Nate Butler created
Rebalance text and icon color usage...Change summary
styles/package-lock.json | 1 +
styles/src/styleTree/contextMenu.ts | 4 ++--
styles/src/styleTree/editor.ts | 16 ++++++++--------
styles/src/styleTree/picker.ts | 4 ++--
styles/src/styleTree/projectPanel.ts | 11 +++++------
styles/src/styleTree/statusBar.ts | 20 ++++++++++----------
styles/src/styleTree/tooltip.ts | 4 ++--
styles/src/styleTree/workspace.ts | 2 +-
8 files changed, 31 insertions(+), 31 deletions(-)
Detailed changes
styles/src/styleTree/contextMenu.ts 🔗
@@ -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"),
styles/src/styleTree/editor.ts 🔗
@@ -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: {
styles/src/styleTree/picker.ts 🔗
@@ -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,
styles/src/styleTree/projectPanel.ts 🔗
@@ -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,
},
};
styles/src/styleTree/statusBar.ts 🔗
@@ -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"),
styles/src/styleTree/tooltip.ts 🔗
@@ -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,
};
styles/src/styleTree/workspace.ts 🔗
@@ -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),