From 01eed2c8449e79b5268954ccfe005f65e4a0a0f0 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Tue, 26 Jul 2022 15:53:48 -0400 Subject: [PATCH] Rebalance text and icon color usage... ...to better differentiate between primary, secondary and muted. --- 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(-) diff --git a/styles/package-lock.json b/styles/package-lock.json index 5499f1852c..582f1c8496 100644 --- a/styles/package-lock.json +++ b/styles/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "styles", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index a7c69d7660..0244641ec7 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/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"), diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 507eb74d8d..e3c1844974 100644 --- a/styles/src/styleTree/editor.ts +++ b/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: { diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 84a72aabcc..514deb4c33 100644 --- a/styles/src/styleTree/picker.ts +++ b/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, diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 7007a5da2d..26f88c6784 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/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, }, }; diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index d5d63fdadf..2a4c6d7f70 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/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"), diff --git a/styles/src/styleTree/tooltip.ts b/styles/src/styleTree/tooltip.ts index 8d1bb8078d..7545ad762e 100644 --- a/styles/src/styleTree/tooltip.ts +++ b/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, }; diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 4937edfdee..875b2bb2d5 100644 --- a/styles/src/styleTree/workspace.ts +++ b/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),