Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "styles",
"version": "1.0.0", "version": "1.0.0",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {

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

@ -18,7 +18,7 @@ export default function contextMenu(theme: Theme) {
item: { item: {
padding: { left: 4, right: 4, top: 2, bottom: 2 }, padding: { left: 4, right: 4, top: 2, bottom: 2 },
cornerRadius: 6, cornerRadius: 6,
label: text(theme, "sans", "secondary", { size: "sm" }), label: text(theme, "sans", "primary", { size: "sm" }),
keystroke: { keystroke: {
...text(theme, "sans", "muted", { size: "sm", weight: "bold" }), ...text(theme, "sans", "muted", { size: "sm", weight: "bold" }),
padding: { left: 3, right: 3 }, padding: { left: 3, right: 3 },
@ -29,7 +29,7 @@ export default function contextMenu(theme: Theme) {
}, },
active: { active: {
background: backgroundColor(theme, 300, "active"), background: backgroundColor(theme, 300, "active"),
text: text(theme, "sans", "primary", { size: "sm" }), text: text(theme, "sans", "active", { size: "sm" }),
}, },
activeHover: { activeHover: {
background: backgroundColor(theme, 300, "hovered"), 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, textColor: theme.syntax.primary.color,
background: backgroundColor(theme, 500), background: backgroundColor(theme, 500),
activeLineBackground: theme.editor.line.active, activeLineBackground: theme.editor.line.active,
codeActionsIndicator: iconColor(theme, "muted"), codeActionsIndicator: iconColor(theme, "secondary"),
diffBackgroundDeleted: backgroundColor(theme, "error"), diffBackgroundDeleted: backgroundColor(theme, "error"),
diffBackgroundInserted: backgroundColor(theme, "ok"), diffBackgroundInserted: backgroundColor(theme, "ok"),
documentHighlightReadBackground: theme.editor.highlight.occurrence, documentHighlightReadBackground: theme.editor.highlight.occurrence,
@ -107,7 +107,7 @@ export default function editor(theme: Theme) {
top: true, top: true,
}), }),
code: { code: {
...text(theme, "mono", "muted", { size: "sm" }), ...text(theme, "mono", "secondary", { size: "sm" }),
margin: { margin: {
left: 10, left: 10,
}, },
@ -135,17 +135,17 @@ export default function editor(theme: Theme) {
warningDiagnostic: diagnostic(theme, "warning"), warningDiagnostic: diagnostic(theme, "warning"),
informationDiagnostic: diagnostic(theme, "info"), informationDiagnostic: diagnostic(theme, "info"),
hintDiagnostic: diagnostic(theme, "info"), hintDiagnostic: diagnostic(theme, "info"),
invalidErrorDiagnostic: diagnostic(theme, "muted"), invalidErrorDiagnostic: diagnostic(theme, "secondary"),
invalidHintDiagnostic: diagnostic(theme, "muted"), invalidHintDiagnostic: diagnostic(theme, "secondary"),
invalidInformationDiagnostic: diagnostic(theme, "muted"), invalidInformationDiagnostic: diagnostic(theme, "secondary"),
invalidWarningDiagnostic: diagnostic(theme, "muted"), invalidWarningDiagnostic: diagnostic(theme, "secondary"),
hoverPopover: hoverPopover(theme), hoverPopover: hoverPopover(theme),
linkDefinition: { linkDefinition: {
color: theme.syntax.linkUri.color, color: theme.syntax.linkUri.color,
underline: theme.syntax.linkUri.underline, underline: theme.syntax.linkUri.underline,
}, },
jumpIcon: { jumpIcon: {
color: iconColor(theme, "muted"), color: iconColor(theme, "secondary"),
iconWidth: 20, iconWidth: 20,
buttonWidth: 20, buttonWidth: 20,
cornerRadius: 6, cornerRadius: 6,
@ -157,7 +157,7 @@ export default function editor(theme: Theme) {
}, },
hover: { hover: {
color: iconColor(theme, "active"), color: iconColor(theme, "active"),
background: backgroundColor(theme, "on500", "base"), background: backgroundColor(theme, "on500"),
}, },
}, },
compositionMark: { 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" }), highlightText: text(theme, "sans", "feature", { weight: "bold" }),
active: { active: {
background: backgroundColor(theme, 300, "active"), background: backgroundColor(theme, 300, "active"),
text: text(theme, "sans", "primary"), text: text(theme, "sans", "active"),
}, },
hover: { hover: {
background: backgroundColor(theme, 300, "hovered"), background: backgroundColor(theme, 300, "hovered"),
@ -32,7 +32,7 @@ export default function picker(theme: Theme) {
}, },
border: border(theme, "primary"), border: border(theme, "primary"),
empty: { empty: {
text: text(theme, "sans", "placeholder"), text: text(theme, "sans", "muted"),
padding: { padding: {
bottom: 4, bottom: 4,
left: 12, left: 12,

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

@ -12,25 +12,24 @@ export default function projectPanel(theme: Theme) {
iconColor: iconColor(theme, "muted"), iconColor: iconColor(theme, "muted"),
iconSize: 8, iconSize: 8,
iconSpacing: 8, iconSpacing: 8,
text: text(theme, "mono", "muted", { size: "sm" }), text: text(theme, "mono", "secondary", { size: "sm" }),
hover: { hover: {
background: backgroundColor(theme, 300, "hovered"), background: backgroundColor(theme, 300, "hovered"),
text: text(theme, "mono", "primary", { size: "sm" }),
}, },
active: { active: {
background: backgroundColor(theme, 300, "active"), background: backgroundColor(theme, 300, "active"),
text: text(theme, "mono", "primary", { size: "sm" }), text: text(theme, "mono", "active", { size: "sm" }),
}, },
activeHover: { activeHover: {
background: backgroundColor(theme, 300, "hovered"), background: backgroundColor(theme, 300, "active"),
text: text(theme, "mono", "active", { size: "sm" }), text: text(theme, "mono", "active", { size: "sm" }),
}, },
}, },
cutEntryFade: 0.4, cutEntryFade: 0.4,
ignoredEntryFade: 0.6, ignoredEntryFade: 0.6,
filenameEditor: { filenameEditor: {
background: backgroundColor(theme, 500, "active"), background: backgroundColor(theme, "on300"),
text: text(theme, "mono", "primary", { size: "sm" }), text: text(theme, "mono", "active", { size: "sm" }),
selection: player(theme, 1).selection, 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, right: 6,
}, },
border: border(theme, "primary", { top: true, overlay: true }), border: border(theme, "primary", { top: true, overlay: true }),
cursorPosition: text(theme, "sans", "muted"), cursorPosition: text(theme, "sans", "secondary"),
autoUpdateProgressMessage: text(theme, "sans", "muted"), autoUpdateProgressMessage: text(theme, "sans", "secondary"),
autoUpdateDoneMessage: text(theme, "sans", "muted"), autoUpdateDoneMessage: text(theme, "sans", "secondary"),
lspStatus: { lspStatus: {
...diagnosticStatusContainer, ...diagnosticStatusContainer,
iconSpacing: 4, iconSpacing: 4,
iconWidth: 14, iconWidth: 14,
height: 18, height: 18,
message: text(theme, "sans", "muted"), message: text(theme, "sans", "secondary"),
iconColor: iconColor(theme, "muted"), iconColor: iconColor(theme, "muted"),
hover: { hover: {
message: text(theme, "sans", "primary"), message: text(theme, "sans", "primary"),
iconColor: iconColor(theme, "active"), iconColor: iconColor(theme, "primary"),
background: backgroundColor(theme, 300, "hovered"), background: backgroundColor(theme, 300, "hovered"),
}, },
}, },
diagnosticMessage: { diagnosticMessage: {
...text(theme, "sans", "muted"), ...text(theme, "sans", "secondary"),
hover: text(theme, "sans", "secondary"), hover: text(theme, "sans", "active"),
}, },
feedback: { feedback: {
...text(theme, "sans", "muted"), ...text(theme, "sans", "secondary"),
hover: text(theme, "sans", "active"), hover: text(theme, "sans", "active"),
}, },
diagnosticSummary: { diagnosticSummary: {
@ -53,7 +53,7 @@ export default function statusBar(theme: Theme) {
iconSpacing: 2, iconSpacing: 2,
summarySpacing: 6, summarySpacing: 6,
text: text(theme, "sans", "primary", { size: "sm" }), text: text(theme, "sans", "primary", { size: "sm" }),
iconColorOk: iconColor(theme, "secondary"), iconColorOk: iconColor(theme, "muted"),
iconColorWarning: iconColor(theme, "warning"), iconColorWarning: iconColor(theme, "warning"),
iconColorError: iconColor(theme, "error"), iconColorError: iconColor(theme, "error"),
containerOk: { containerOk: {
@ -95,7 +95,7 @@ export default function statusBar(theme: Theme) {
item: { item: {
...statusContainer, ...statusContainer,
iconSize: 16, iconSize: 16,
iconColor: iconColor(theme, "secondary"), iconColor: iconColor(theme, "muted"),
hover: { hover: {
iconColor: iconColor(theme, "active"), iconColor: iconColor(theme, "active"),
background: backgroundColor(theme, 300, "hovered"), 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 }, margin: { top: 6, left: 6 },
shadow: popoverShadow(theme), shadow: popoverShadow(theme),
cornerRadius: 6, cornerRadius: 6,
text: text(theme, "sans", "secondary", { size: "xs", weight: "bold" }), text: text(theme, "sans", "primary", { size: "xs" }),
keystroke: { keystroke: {
background: backgroundColor(theme, "on500"), background: backgroundColor(theme, "on500"),
cornerRadius: 4, cornerRadius: 4,
margin: { left: 6 }, margin: { left: 6 },
padding: { left: 4, right: 4 }, padding: { left: 4, right: 4 },
...text(theme, "mono", "muted", { size: "xs", weight: "bold" }), ...text(theme, "mono", "secondary", { size: "xs", weight: "bold" }),
}, },
maxTextWidth: 200, maxTextWidth: 200,
}; };

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

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